@skyscanner/backpack-web 38.11.0 → 38.12.0

package/bpk-component-button/src/BpkButton.d.ts

@@ -11,26 +11,7 @@ export type Props = CommonProps & {
     linkOnDark?: boolean;
 };
 declare const BpkButton: {
-    (props: Props): import("react/jsx-runtime").JSX.Element;
-    defaultProps: {
-        primaryOnDark: boolean;
-        primaryOnLight: boolean;
-        secondary: boolean;
-        secondaryOnDark: boolean;
-        destructive: boolean;
-        featured: boolean;
-        link: boolean;
-        linkOnDark: boolean;
-        href: null;
-        className: null;
-        disabled: boolean;
-        onClick: null;
-        submit: boolean;
-        large: boolean;
-        iconOnly: boolean;
-        blank: boolean;
-        rel: null;
-    };
+    ({ destructive, featured, link, linkOnDark, primaryOnDark, primaryOnLight, secondary, secondaryOnDark, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         primaryOnDark: PropTypes.Requireable<boolean>;
         primaryOnLight: PropTypes.Requireable<boolean>;

package/bpk-component-button/src/BpkButton.js

@@ -17,20 +17,19 @@
  */
 import PropTypes from 'prop-types';
 import BpkButtonBase, { BUTTON_TYPES } from "./BpkButtonBase";
-import { propTypes, defaultProps } from "./common-types";
+import { propTypes } from "./common-types";
 import { jsx as _jsx } from "react/jsx-runtime";
-const BpkButton = props => {
-  const {
-    destructive,
-    featured,
-    link,
-    linkOnDark,
-    primaryOnDark,
-    primaryOnLight,
-    secondary,
-    secondaryOnDark,
-    ...rest
-  } = props;
+const BpkButton = ({
+  destructive = false,
+  featured = false,
+  link = false,
+  linkOnDark = false,
+  primaryOnDark = false,
+  primaryOnLight = false,
+  secondary = false,
+  secondaryOnDark = false,
+  ...rest
+}) => {
   if (primaryOnDark) {
     return /*#__PURE__*/_jsx(BpkButtonBase, {
       type: BUTTON_TYPES.primaryOnDark,
@@ -83,17 +82,6 @@ const BpkButton = props => {
     ...rest
   });
 };
-BpkButton.defaultProps = {
-  ...defaultProps,
-  primaryOnDark: false,
-  primaryOnLight: false,
-  secondary: false,
-  secondaryOnDark: false,
-  destructive: false,
-  featured: false,
-  link: false,
-  linkOnDark: false
-};
 BpkButton.propTypes = {
   ...propTypes,
   primaryOnDark: PropTypes.bool,

package/bpk-component-button/src/BpkButtonBase.d.ts

@@ -12,7 +12,7 @@ export declare const BUTTON_TYPES: {
 };
 type ValueOf<T> = T[keyof T];
 declare const BpkButtonBase: {
-    (props: Props & {
+    ({ blank, children, className, disabled, href, iconOnly, large, onClick, rel: propRel, submit, type, ...rest }: Props & {
         type?: ValueOf<typeof BUTTON_TYPES>;
     }): import("react/jsx-runtime").JSX.Element;
     propTypes: {
@@ -27,16 +27,5 @@ declare const BpkButtonBase: {
         blank: import("prop-types").Requireable<boolean>;
         rel: import("prop-types").Requireable<string>;
     };
-    defaultProps: {
-        href: null;
-        className: null;
-        disabled: boolean;
-        onClick: null;
-        submit: boolean;
-        large: boolean;
-        iconOnly: boolean;
-        blank: boolean;
-        rel: null;
-    };
 };
 export default BpkButtonBase;

package/bpk-component-button/src/BpkButtonBase.js

@@ -16,11 +16,11 @@
  * limitations under the License.
  */
 import { cssModules } from "../../bpk-react-utils";
-import { propTypes, defaultProps } from "./common-types";
+import { propTypes } from "./common-types";
 import COMMON_STYLES from "./BpkButtonBase.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(COMMON_STYLES);
-
+const noop = () => null;
 // This is a duplicate of BpkButtonV2
 // Better to duplicate rather than prematurely align the abstraction between Button and ButtonV2
 export const BUTTON_TYPES = {
@@ -34,21 +34,20 @@ export const BUTTON_TYPES = {
   link: 'link',
   linkOnDark: 'link-on-dark'
 };
-const BpkButtonBase = props => {
-  const {
-    blank,
-    children,
-    className,
-    disabled,
-    href,
-    iconOnly,
-    large,
-    onClick,
-    rel: propRel,
-    submit,
-    type,
-    ...rest
-  } = props;
+const BpkButtonBase = ({
+  blank = false,
+  children,
+  className = '',
+  disabled = false,
+  href = '',
+  iconOnly = false,
+  large = false,
+  onClick = noop,
+  rel: propRel = undefined,
+  submit = false,
+  type,
+  ...rest
+}) => {
   const classNames = [];
   if (type === undefined) {
     classNames.push('bpk-button');
@@ -114,7 +113,4 @@ const BpkButtonBase = props => {
 BpkButtonBase.propTypes = {
   ...propTypes
 };
-BpkButtonBase.defaultProps = {
-  ...defaultProps
-};
 export default BpkButtonBase;

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

@@ -4,25 +4,14 @@ export type Props = {
     children: ReactNode;
     href?: string;
     className?: string;
-    disabled: boolean;
+    disabled?: boolean;
     onClick?: (event: SyntheticEvent) => unknown;
-    submit: boolean;
-    large: boolean;
-    iconOnly: boolean;
-    blank: boolean;
+    submit?: boolean;
+    large?: boolean;
+    iconOnly?: boolean;
+    blank?: boolean;
     rel?: string;
 };
-export declare const defaultProps: {
-    href: null;
-    className: null;
-    disabled: boolean;
-    onClick: null;
-    submit: boolean;
-    large: boolean;
-    iconOnly: boolean;
-    blank: boolean;
-    rel: null;
-};
 export declare const propTypes: {
     children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
     href: PropTypes.Requireable<string>;

package/bpk-component-button/src/common-types.js

@@ -17,17 +17,6 @@
  */
 
 import PropTypes from 'prop-types';
-export const defaultProps = {
-  href: null,
-  className: null,
-  disabled: false,
-  onClick: null,
-  submit: false,
-  large: false,
-  iconOnly: false,
-  blank: false,
-  rel: null
-};
 export const propTypes = {
   children: PropTypes.node.isRequired,
   href: PropTypes.string,

package/bpk-component-checkbox/src/BpkCheckbox.js

@@ -19,21 +19,19 @@ import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkCheckbox.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkCheckbox = props => {
-  const {
-    checked,
-    className,
-    disabled,
-    indeterminate,
-    label,
-    name,
-    required,
-    smallLabel,
-    valid,
-    white,
-    ...rest
-  } = props;
-
+const BpkCheckbox = ({
+  checked = false,
+  className = null,
+  disabled = false,
+  indeterminate = false,
+  label,
+  name,
+  required = false,
+  smallLabel = false,
+  valid = null,
+  white = false,
+  ...rest
+}) => {
   // Explicit check for false primitive value as undefined is
   // treated as neither valid nor invalid
   const isInvalid = valid === false;
@@ -79,14 +77,4 @@ BpkCheckbox.propTypes = {
   checked: PropTypes.bool,
   indeterminate: PropTypes.bool
 };
-BpkCheckbox.defaultProps = {
-  required: false,
-  disabled: false,
-  white: false,
-  className: null,
-  smallLabel: false,
-  valid: null,
-  checked: false,
-  indeterminate: false
-};
 export default BpkCheckbox;

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -22,20 +22,19 @@ import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkFieldset.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkFieldset = props => {
-  const {
-    children,
-    className,
-    description,
-    disabled,
-    isCheckbox,
-    label,
-    required,
-    valid,
-    validationMessage,
-    validationProps,
-    ...rest
-  } = props;
+const BpkFieldset = ({
+  children,
+  className = null,
+  description = null,
+  disabled = false,
+  isCheckbox = false,
+  label = null,
+  required = false,
+  valid = null,
+  validationMessage = null,
+  validationProps = {},
+  ...rest
+}) => {
   if (!children) {
     return null;
   }
@@ -133,21 +132,7 @@ export const propTypes = {
   validationProps: PropTypes.object,
   description: PropTypes.string
 };
-export const defaultProps = {
-  label: null,
-  disabled: false,
-  valid: null,
-  required: false,
-  className: null,
-  validationMessage: null,
-  isCheckbox: false,
-  validationProps: {},
-  description: null
-};
 BpkFieldset.propTypes = {
   ...propTypes
 };
-BpkFieldset.defaultProps = {
-  ...defaultProps
-};
 export default BpkFieldset;

package/bpk-component-flare/src/BpkContentBubble.js

@@ -23,16 +23,15 @@ import CornerRadius from "./__generated__/js/corner-radius";
 import STYLES from "./bpk-content-bubble.module.css";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkContentBubble = props => {
-  const {
-    className,
-    content,
-    contentClassName,
-    flareProps,
-    rounded,
-    showPointer,
-    ...rest
-  } = props;
+const BpkContentBubble = ({
+  className = null,
+  content = null,
+  contentClassName = null,
+  flareProps = null,
+  rounded = true,
+  showPointer = true,
+  ...rest
+}) => {
   const wrapperClassNames = [getClassName('bpk-content-bubble__wrapper')];
   const contentClassNames = [getClassName('bpk-content-bubble__content-wrapper')];
   if (showPointer) {
@@ -73,7 +72,6 @@ const BpkContentBubble = props => {
       }), showPointer && /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-content-bubble__pointer'),
         children: /*#__PURE__*/_jsx(BpkFlareBar, {
-          rounded: rounded,
           ...flareProps
         })
       })]
@@ -89,12 +87,4 @@ BpkContentBubble.propTypes = {
   className: PropTypes.string,
   contentClassName: PropTypes.string
 };
-BpkContentBubble.defaultProps = {
-  flareProps: null,
-  rounded: true,
-  content: null,
-  showPointer: true,
-  className: null,
-  contentClassName: null
-};
 export default BpkContentBubble;

package/bpk-component-flare/src/BpkFlareBar.js

@@ -22,13 +22,11 @@ import Pointer from "./__generated__/js/pointer";
 import STYLES from "./bpk-flare-bar.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkFlareBar = props => {
-  const {
-    className,
-    rounded,
-    svgClassName,
-    ...rest
-  } = props;
+const BpkFlareBar = ({
+  className = null,
+  svgClassName = null,
+  ...rest
+}) => {
   const classNames = [getClassName('bpk-flare-bar__container')];
   if (className) {
     classNames.push(className);
@@ -47,12 +45,6 @@ const BpkFlareBar = props => {
 };
 BpkFlareBar.propTypes = {
   className: PropTypes.string,
-  svgClassName: PropTypes.string,
-  rounded: PropTypes.bool
-};
-BpkFlareBar.defaultProps = {
-  className: null,
-  svgClassName: null,
-  rounded: false
+  svgClassName: PropTypes.string
 };
 export default BpkFlareBar;

package/bpk-component-form-validation/src/BpkFormValidation.js

@@ -26,15 +26,14 @@ import STYLES from "./BpkFormValidation.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const AlignedExclamationIcon = withAlignment(BpkSmallExclamationIcon, lineHeightSm, iconSizeSm);
-const BpkFormValidation = props => {
-  const {
-    children,
-    className,
-    containerProps,
-    expanded,
-    isCheckbox,
-    ...rest
-  } = props;
+const BpkFormValidation = ({
+  children,
+  className = null,
+  containerProps = {},
+  expanded,
+  isCheckbox = false,
+  ...rest
+}) => {
   const classNames = getClassName('bpk-form-validation', expanded && 'bpk-form-validation--appear', isCheckbox && 'bpk-form-validation--is-checkbox', className);
   return /*#__PURE__*/_jsx(AnimateHeight, {
     duration: 200,
@@ -62,9 +61,4 @@ BpkFormValidation.propTypes = {
   className: PropTypes.string,
   containerProps: PropTypes.object // eslint-disable-line react/forbid-prop-types
 };
-BpkFormValidation.defaultProps = {
-  isCheckbox: false,
-  className: null,
-  containerProps: {}
-};
 export default BpkFormValidation;

package/bpk-component-info-banner/src/BpkInfoBannerInner.js

@@ -153,6 +153,7 @@ const BpkInfoBannerInner = ({
           children: children
         }), isExpandable && action && /*#__PURE__*/_jsx(BpkLink, {
           onClick: action.callback,
+          href: null,
           children: action.title
         })]
       })]

package/bpk-component-label/src/BpkLabel.js

@@ -19,16 +19,15 @@ import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkLabel.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkLabel = props => {
-  const {
-    children,
-    className,
-    disabled,
-    required,
-    valid,
-    white,
-    ...rest
-  } = props;
+const BpkLabel = ({
+  children,
+  className = null,
+  disabled = false,
+  required = false,
+  valid = null,
+  white = false,
+  ...rest
+}) => {
   const invalid = valid === false;
   const classNames = getClassName('bpk-label', white && 'bpk-label--white', invalid && 'bpk-label--invalid', disabled && 'bpk-label--disabled', white && disabled && 'bpk-label--disabled--white', className);
   return (
@@ -52,11 +51,4 @@ BpkLabel.propTypes = {
   required: PropTypes.bool,
   white: PropTypes.bool
 };
-BpkLabel.defaultProps = {
-  className: null,
-  disabled: false,
-  valid: null,
-  required: false,
-  white: false
-};
 export default BpkLabel;

package/bpk-component-link/src/BpkButtonLink.js

@@ -20,15 +20,14 @@ import themeAttributes from "./themeAttributes";
 import STYLES from "./BpkLink.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkButtonLink = props => {
-  const {
-    alternate,
-    children,
-    className,
-    implicit,
-    onClick,
-    ...rest
-  } = props;
+const BpkButtonLink = ({
+  alternate = false,
+  children,
+  className = null,
+  implicit = false,
+  onClick,
+  ...rest
+}) => {
   const classNames = [getClassName('bpk-link')];
   const underlinedClassNames = [getClassName('bpk-link-underlined')];
   if (className) {
@@ -69,10 +68,5 @@ BpkButtonLink.propTypes = {
   alternate: PropTypes.bool,
   implicit: PropTypes.bool
 };
-BpkButtonLink.defaultProps = {
-  className: null,
-  alternate: false,
-  implicit: false
-};
 export { themeAttributes };
 export default BpkButtonLink;

package/bpk-component-link/src/BpkLink.js

@@ -21,18 +21,17 @@ import themeAttributes, { linkAlternateThemeAttributes } from "./themeAttributes
 import STYLES from "./BpkLink.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkLink = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    alternate,
-    blank,
-    children,
-    className,
-    href,
-    implicit,
-    onClick,
-    rel: propRel,
-    ...rest
-  } = props;
+const BpkLink = /*#__PURE__*/forwardRef(({
+  alternate = false,
+  blank = false,
+  children,
+  className = null,
+  href,
+  implicit = false,
+  onClick = null,
+  rel: propRel = null,
+  ...rest
+}, ref) => {
   const classNames = [getClassName('bpk-link')];
   const underlinedClassNames = [getClassName('bpk-link-underlined')];
   const target = blank ? '_blank' : null;
@@ -81,13 +80,5 @@ BpkLink.propTypes = {
   alternate: PropTypes.bool,
   implicit: PropTypes.bool
 };
-BpkLink.defaultProps = {
-  className: null,
-  onClick: null,
-  blank: false,
-  rel: null,
-  alternate: false,
-  implicit: false
-};
 export default BpkLink;
 export { themeAttributes, linkAlternateThemeAttributes };

package/bpk-component-list/src/BpkList.js

@@ -19,15 +19,14 @@ import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkList = props => {
-  const {
-    ariaLabel,
-    ariaLabelledby,
-    children,
-    className,
-    ordered,
-    title
-  } = props;
+const BpkList = ({
+  ariaLabel = null,
+  ariaLabelledby = null,
+  children,
+  className = null,
+  ordered = false,
+  title = null
+}) => {
   const ListElements = ordered ? 'ol' : 'ul';
   const classNames = getClassName('bpk-list', className);
   return /*#__PURE__*/_jsx(ListElements, {
@@ -46,11 +45,4 @@ BpkList.propTypes = {
   ariaLabelledby: PropTypes.string,
   title: PropTypes.string
 };
-BpkList.defaultProps = {
-  ordered: false,
-  className: null,
-  ariaLabel: null,
-  ariaLabelledby: null,
-  title: null
-};
 export default BpkList;

package/bpk-component-list/src/BpkListItem.js

@@ -19,11 +19,10 @@ import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkList.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkListItem = props => {
-  const {
-    children,
-    className
-  } = props;
+const BpkListItem = ({
+  children,
+  className = null
+}) => {
   const classNames = getClassName('bpk-list__item', className);
   return /*#__PURE__*/_jsx("li", {
     className: classNames,
@@ -34,7 +33,4 @@ BpkListItem.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   className: PropTypes.string
 };
-BpkListItem.defaultProps = {
-  className: null
-};
 export default BpkListItem;

package/bpk-component-price/src/BpkPrice.js

@@ -36,20 +36,19 @@ const getDefaultTextStyle = size => {
   }
   return TEXT_STYLES.xs;
 };
-const BpkPrice = props => {
-  const {
-    align,
-    className,
-    dataAttributes,
-    icon,
-    leadingClassName,
-    leadingText,
-    previousPrice,
-    price,
-    size,
-    trailingText,
-    ...rest
-  } = props;
+const BpkPrice = ({
+  align = ALIGNS.left,
+  className = null,
+  dataAttributes = {},
+  icon,
+  leadingClassName = null,
+  leadingText = null,
+  previousPrice = null,
+  price,
+  size = SIZES.small,
+  trailingText = null,
+  ...rest
+}) => {
   const defaultTextStyle = getDefaultTextStyle(size);
   const priceTextStyle = getPriceTextStyle(size);
   const isAlignRight = align === ALIGNS.right;
@@ -129,14 +128,4 @@ BpkPrice.propTypes = {
   leadingClassName: PropTypes.string,
   dataAttributes: PropTypes.objectOf(PropTypes.string)
 };
-BpkPrice.defaultProps = {
-  size: SIZES.small,
-  align: ALIGNS.left,
-  className: null,
-  leadingText: null,
-  trailingText: null,
-  previousPrice: null,
-  leadingClassName: null,
-  dataAttributes: {}
-};
 export default BpkPrice;

package/bpk-component-radio/src/BpkRadio.js

@@ -19,18 +19,16 @@ import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkRadio.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkRadio = props => {
-  const {
-    ariaLabel,
-    className,
-    disabled,
-    label,
-    name,
-    valid,
-    white,
-    ...rest
-  } = props;
-
+const BpkRadio = ({
+  ariaLabel = null,
+  className = null,
+  disabled = false,
+  label,
+  name,
+  valid = null,
+  white = false,
+  ...rest
+}) => {
   // Explicit check for false primitive value as undefined is
   // treated as neither valid nor invalid
   const isInvalid = valid === false;
@@ -62,11 +60,4 @@ BpkRadio.propTypes = {
   className: PropTypes.string,
   valid: PropTypes.bool
 };
-BpkRadio.defaultProps = {
-  ariaLabel: null,
-  disabled: false,
-  white: false,
-  className: null,
-  valid: null
-};
 export default BpkRadio;

package/bpk-component-select/src/BpkSelect.js

@@ -20,21 +20,19 @@ import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSelect.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkSelect = props => {
-  const {
-    className,
-    disabled,
-    docked,
-    dockedFirst,
-    dockedLast,
-    dockedMiddle,
-    image,
-    large,
-    valid,
-    wrapperClassName,
-    ...rest
-  } = props;
-
+const BpkSelect = ({
+  className = null,
+  disabled = false,
+  docked = false,
+  dockedFirst = false,
+  dockedLast = false,
+  dockedMiddle = false,
+  image = null,
+  large = false,
+  valid = null,
+  wrapperClassName = null,
+  ...rest
+}) => {
   // Explicit check for false primitive value as undefined is
   // treated as neither valid nor invalid
   const isInvalid = valid === false;
@@ -81,16 +79,4 @@ BpkSelect.propTypes = {
   valid: PropTypes.bool,
   wrapperClassName: PropTypes.string
 };
-BpkSelect.defaultProps = {
-  className: null,
-  docked: false,
-  dockedFirst: false,
-  dockedLast: false,
-  dockedMiddle: false,
-  disabled: false,
-  image: null,
-  large: false,
-  valid: null,
-  wrapperClassName: null
-};
 export default BpkSelect;

package/bpk-component-star-rating/src/BpkInteractiveStar.js

@@ -20,17 +20,16 @@ import { BpkStarNonRtl, STAR_TYPES } from "./BpkStar";
 import STYLES from "./BpkInteractiveStar.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkInteractiveStar = props => {
-  const {
-    label,
-    name,
-    onClick,
-    onMouseEnter,
-    selected,
-    type,
-    value,
-    ...rest
-  } = props;
+const BpkInteractiveStar = ({
+  label,
+  name,
+  onClick,
+  onMouseEnter,
+  selected = false,
+  type,
+  value,
+  ...rest
+}) => {
   const buttonClassNames = getClassName('bpk-interactive-star', selected && 'bpk-interactive-star--selected');
   const iconClassNames = getClassName('bpk-interactive-star__icon', selected && 'bpk-interactive-star__icon--selected');
 
@@ -63,7 +62,4 @@ BpkInteractiveStar.propTypes = {
   value: PropTypes.number.isRequired,
   selected: PropTypes.bool
 };
-BpkInteractiveStar.defaultProps = {
-  selected: false
-};
 export default BpkInteractiveStar;

package/bpk-component-star-rating/src/BpkInteractiveStarRating.js

@@ -21,27 +21,27 @@ import { STAR_TYPES } from "./BpkStar";
 import STYLES from "./BpkStarRating.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+const noop = () => null;
 export const getTypeByRating = (starNumber, rating) => {
   if (starNumber > rating) {
     return STAR_TYPES.EMPTY;
   }
   return STAR_TYPES.FULL;
 };
-const BpkInteractiveStarRating = props => {
-  const {
-    className,
-    extraLarge,
-    getStarLabel,
-    hoverRating,
-    id,
-    large,
-    maxRating,
-    onMouseLeave,
-    onRatingHover,
-    onRatingSelect,
-    rating,
-    ...rest
-  } = props;
+const BpkInteractiveStarRating = ({
+  className = null,
+  extraLarge = false,
+  getStarLabel,
+  hoverRating = 0,
+  id,
+  large = false,
+  maxRating = 5,
+  onMouseLeave = noop,
+  onRatingHover = noop,
+  onRatingSelect = noop,
+  rating = 0,
+  ...rest
+}) => {
   const stars = [];
   const classNames = [getClassName('bpk-star-rating')];
   const displayRating = hoverRating || rating;
@@ -83,15 +83,4 @@ BpkInteractiveStarRating.propTypes = {
   onRatingSelect: PropTypes.func,
   rating: PropTypes.number
 };
-BpkInteractiveStarRating.defaultProps = {
-  className: null,
-  hoverRating: 0,
-  large: false,
-  extraLarge: false,
-  maxRating: 5,
-  onMouseLeave: () => null,
-  onRatingHover: () => null,
-  onRatingSelect: () => null,
-  rating: 0
-};
 export default BpkInteractiveStarRating;

package/bpk-component-star-rating/src/BpkStar.js

@@ -36,14 +36,13 @@ export const STAR_TYPES = {
   HALF: 'half',
   FULL: 'full'
 };
-const BpkStar = props => {
-  const {
-    className,
-    extraLarge,
-    large,
-    type,
-    ...rest
-  } = props;
+const BpkStar = ({
+  className = null,
+  extraLarge = false,
+  large = false,
+  type,
+  ...rest
+}) => {
   const iconClassNames = getClassName('bpk-star', large && 'bpk-star--large', extraLarge && 'bpk-star--extra-large', type === STAR_TYPES.FULL && 'bpk-star--filled', className);
   const containerClassNames = getClassName('bpk-star__container', 'bpk-star__container--half-star', large && 'bpk-star__container--large', extraLarge && 'bpk-star__container--extra-large', className);
   const halfIconClassNames = getClassName('bpk-star', 'bpk-star--half', 'bpk-star--filled');
@@ -93,10 +92,5 @@ BpkStar.propTypes = {
   large: PropTypes.bool,
   extraLarge: PropTypes.bool
 };
-BpkStar.defaultProps = {
-  className: null,
-  large: false,
-  extraLarge: false
-};
 export const BpkStarNonRtl = BpkStar;
 export default withRtlSupport(BpkStar);

package/bpk-component-star-rating/src/BpkStarRating.js

@@ -35,17 +35,16 @@ export const ROUNDING_TYPES = {
   up: n => Math.ceil(n * 2) / 2,
   nearest: n => Math.round(n * 2) / 2
 };
-const BpkStarRating = props => {
-  const {
-    className,
-    extraLarge,
-    large,
-    maxRating,
-    rating,
-    ratingLabel,
-    rounding,
-    ...rest
-  } = props;
+const BpkStarRating = ({
+  className = null,
+  extraLarge = false,
+  large = false,
+  maxRating = 5,
+  rating = 0,
+  ratingLabel,
+  rounding = ROUNDING_TYPES.down,
+  ...rest
+}) => {
   const stars = [];
   const classNames = [getClassName('bpk-star-rating')];
   const currentRating = rating > maxRating ? maxRating : rating;
@@ -78,12 +77,4 @@ BpkStarRating.propTypes = {
   rating: PropTypes.number,
   rounding: PropTypes.oneOf([ROUNDING_TYPES.down, ROUNDING_TYPES.up, ROUNDING_TYPES.nearest])
 };
-BpkStarRating.defaultProps = {
-  className: null,
-  large: false,
-  extraLarge: false,
-  maxRating: 5,
-  rating: 0,
-  rounding: ROUNDING_TYPES.down
-};
 export default BpkStarRating;

package/bpk-component-table/src/BpkTable.js

@@ -19,12 +19,11 @@ import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkTable.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkTable = props => {
-  const {
-    children,
-    className,
-    ...rest
-  } = props;
+const BpkTable = ({
+  children,
+  className = null,
+  ...rest
+}) => {
   const classNames = getClassName('bpk-table', className);
   return (
     /*#__PURE__*/
@@ -40,7 +39,4 @@ BpkTable.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string
 };
-BpkTable.defaultProps = {
-  className: null
-};
 export default BpkTable;

package/bpk-component-table/src/BpkTableCell.js

@@ -19,11 +19,11 @@ import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkTable.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkTableCell = props => {
-  const {
-    className,
-    ...rest
-  } = props;
+const BpkTableCell = ({
+  children,
+  className = null,
+  ...rest
+}) => {
   const classNames = getClassName('bpk-table__cell', className);
   return (
     /*#__PURE__*/
@@ -31,7 +31,7 @@ const BpkTableCell = props => {
     _jsx("td", {
       className: classNames,
       ...rest,
-      children: props.children
+      children: children
     })
   );
 };
@@ -39,7 +39,4 @@ BpkTableCell.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node.isRequired
 };
-BpkTableCell.defaultProps = {
-  className: null
-};
 export default BpkTableCell;

package/bpk-component-table/src/BpkTableHeadCell.js

@@ -19,22 +19,20 @@ import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkTable.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkTableHeadCell = props => {
-  const {
-    className,
-    ...rest
-  } = props;
+const BpkTableHeadCell = ({
+  children,
+  className = null,
+  ...rest
+}) => {
   const classNames = getClassName('bpk-table__cell', 'bpk-table__cell--head', className);
   return /*#__PURE__*/_jsx("th", {
+    className: classNames,
     ...rest,
-    className: classNames
+    children: children
   });
 };
 BpkTableHeadCell.propTypes = {
   children: PropTypes.node.isRequired,
   className: PropTypes.string
 };
-BpkTableHeadCell.defaultProps = {
-  className: null
-};
 export default BpkTableHeadCell;

package/bpk-component-textarea/src/BpkTextarea.js

@@ -19,14 +19,12 @@ import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkTextarea.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkTextarea = props => {
-  const {
-    className,
-    large,
-    valid,
-    ...rest
-  } = props;
-
+const BpkTextarea = ({
+  className = null,
+  large = false,
+  valid = null,
+  ...rest
+}) => {
   // Explicit check for false primitive value as undefined is
   // treated as neither valid nor invalid
   const isInvalid = valid === false;
@@ -48,9 +46,4 @@ BpkTextarea.propTypes = {
   valid: PropTypes.bool,
   large: PropTypes.bool
 };
-BpkTextarea.defaultProps = {
-  className: null,
-  valid: null,
-  large: false
-};
 export default BpkTextarea;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "38.11.0",
+  "version": "38.12.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",