@skyscanner/backpack-web 42.23.0 → 42.24.0-dev-v27250828403.1

package/bpk-component-map/src/BpkMap.js

@@ -24,20 +24,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkMap = props => {
   const {
-    bounds,
-    center,
-    children,
-    className,
-    greedyGestureHandling,
-    mapId,
-    mapOptionStyles,
-    mapRef,
-    onRegionChange,
-    onTilesLoaded,
-    onZoom,
-    panEnabled,
-    showControls,
-    zoom
+    bounds = null,
+    center = undefined,
+    children = null,
+    className = null,
+    greedyGestureHandling = false,
+    mapId = null,
+    mapOptionStyles = null,
+    mapRef = null,
+    onRegionChange = null,
+    onTilesLoaded = null,
+    onZoom = null,
+    panEnabled = true,
+    showControls = true,
+    zoom = 15
   } = props;
   if (!bounds && !center) {
     throw new Error('BpkMap: Provide either `bounds` or `center` props.');
@@ -138,20 +138,4 @@ BpkMap.propTypes = {
   })),
   mapId: PropTypes.string
 };
-BpkMap.defaultProps = {
-  bounds: null,
-  center: undefined,
-  children: null,
-  greedyGestureHandling: false,
-  mapRef: null,
-  onRegionChange: null,
-  onZoom: null,
-  onTilesLoaded: null,
-  panEnabled: true,
-  showControls: true,
-  zoom: 15,
-  className: null,
-  mapOptionStyles: null,
-  mapId: null
-};
 export default BpkMap;

package/bpk-component-map/src/withGoogleMapsScript.js

@@ -22,9 +22,9 @@ export const LibraryShapeType = PropTypes.arrayOf(PropTypes.oneOf(['drawing', 'g
 function withGoogleMapsScript(Component) {
   const WithGoogleMapsScript = ({
     googleMapsApiKey,
-    libraries,
-    loadingElement,
-    preventGoogleFontsLoading,
+    libraries = ['geometry', 'drawing', 'places'],
+    loadingElement = /*#__PURE__*/_jsx(DefaultLoadingElement, {}),
+    preventGoogleFontsLoading = false,
     ...rest
   }) => {
     const {
@@ -52,11 +52,6 @@ function withGoogleMapsScript(Component) {
     libraries: LibraryShapeType,
     preventGoogleFontsLoading: PropTypes.bool
   };
-  WithGoogleMapsScript.defaultProps = {
-    loadingElement: /*#__PURE__*/_jsx(DefaultLoadingElement, {}),
-    preventGoogleFontsLoading: false,
-    libraries: ['geometry', 'drawing', 'places']
-  };
   return WithGoogleMapsScript;
 }
 export default withGoogleMapsScript;

package/bpk-component-navigation-bar/src/BpkNavigationBar.d.ts

@@ -14,8 +14,8 @@ export type Props = {
      * Note: this prop only applies when `title` is a string; ReactNode titles are not truncated and wrap naturally. */
     wrapTitle?: boolean;
     className?: string;
-    leadingButton?: ReactElement | null;
-    trailingButton?: ReactElement | null;
+    leadingButton?: ReactElement<any> | null;
+    trailingButton?: ReactElement<any> | null;
     sticky?: boolean;
     barStyle?: BarStyle;
     [rest: string]: any;

package/bpk-component-page-indicator/src/BpkPageIndicator.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-page-indicator-fullWidth__container{width:100%}.bpk-page-indicator{display:flex;width:100%;justify-content:center;align-items:center}.bpk-page-indicator__showNav{justify-content:space-between}.bpk-page-indicator__container{max-width:5rem;min-height:.5rem;overflow:hidden}.bpk-page-indicator__indicators-container{--direction: -1;transform:translateX(calc(var(--direction) * var(--scroll-index, 0) * 1rem));transition:transform 200ms ease-in-out;white-space:nowrap}html[dir=rtl] .bpk-page-indicator__indicators-container{--direction: 1}.bpk-page-indicator__indicator{display:inline-block;width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;margin-inline:.25rem}.bpk-page-indicator__indicator:hover{cursor:pointer}.bpk-page-indicator__indicator--default{background-color:#c1c7cf}.bpk-page-indicator__indicator--overImage,.bpk-page-indicator__indicator--overImageSpaced,.bpk-page-indicator__indicator--carousel{background-color:hsla(0,0%,100%,.5)}.bpk-page-indicator__indicator--active-default{background-color:#626971;pointer-events:none}.bpk-page-indicator__indicator--active-overImage,.bpk-page-indicator__indicator--active-overImageSpaced,.bpk-page-indicator__indicator--active-carousel{background-color:#fff;pointer-events:none}.bpk-page-indicator__nav-carousel{--bpk-button-border-radius: 50%;--bpk-button-secondary-on-dark-background-color: rgba(255, 255, 255, 0.5);--bpk-button-secondary-on-dark-hover-background-color: rgba(255, 255, 255, 0.8);--bpk-button-secondary-on-dark-active-background-color: rgba(255, 255, 255, 0.8);--bpk-button-secondary-on-dark-text-color: rgb(22, 22, 22);--bpk-button-secondary-on-dark-hover-text-color: rgb(22, 22, 22);--bpk-button-secondary-on-dark-active-text-color: rgb(22, 22, 22)}.bpk-page-indicator__nav-carousel-button{display:inline-flex;width:2rem;height:2rem;min-height:2rem;padding:0;justify-content:center;align-items:center}
+.bpk-page-indicator-fullWidth__container{width:100%}.bpk-page-indicator{display:flex;width:100%;justify-content:center;align-items:center}.bpk-page-indicator__showNav{justify-content:space-between}.bpk-page-indicator__container{max-width:5rem;min-height:.5rem;overflow:hidden}.bpk-page-indicator__indicators-container{--direction: -1;transform:translateX(calc(var(--direction) * var(--scroll-index, 0) * 1rem));transition:transform 200ms ease-in-out;white-space:nowrap}html[dir=rtl] .bpk-page-indicator__indicators-container{--direction: 1}.bpk-page-indicator__indicator{display:inline-block;width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;margin-inline:.25rem}.bpk-page-indicator__indicator:hover{cursor:pointer}.bpk-page-indicator__indicator--default{background-color:#c1c7cf}.bpk-page-indicator__indicator--overImage,.bpk-page-indicator__indicator--overImageSpaced,.bpk-page-indicator__indicator--carousel{background-color:hsla(0,0%,100%,.5)}.bpk-page-indicator__indicator--active-default{background-color:#626971;pointer-events:none}.bpk-page-indicator__indicator--active-overImage,.bpk-page-indicator__indicator--active-overImageSpaced,.bpk-page-indicator__indicator--active-carousel{background-color:#fff;pointer-events:none}.bpk-page-indicator__nav-carousel{--bpk-button-border-radius: 50%;--bpk-button-secondary-on-dark-background-color: rgba(255, 255, 255, 0.5);--bpk-button-secondary-on-dark-hover-background-color: rgba(255, 255, 255, 0.8);--bpk-button-secondary-on-dark-active-background-color: rgba(255, 255, 255, 0.8);--bpk-button-secondary-on-dark-text-color: rgb(22, 22, 22);--bpk-button-secondary-on-dark-hover-text-color: rgb(22, 22, 22);--bpk-button-secondary-on-dark-active-text-color: rgb(22, 22, 22)}.bpk-page-indicator__nav-carousel .bpk-page-indicator__nav-carousel-button{display:inline-flex;width:2rem;height:2rem;min-height:2rem;padding:0;justify-content:center;align-items:center}

package/bpk-component-phone-input/src/BpkPhoneInput.js

@@ -24,21 +24,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkPhoneInput = props => {
   const {
-    className,
+    className = null,
     dialingCode,
-    dialingCodeMask,
+    dialingCodeMask = false,
     dialingCodeProps,
     dialingCodes,
-    disabled,
+    disabled = false,
     id,
     label,
-    large,
+    large = false,
     name,
     onChange,
     onDialingCodeChange,
-    valid,
+    valid = null,
     value,
-    wrapperProps,
+    wrapperProps = {},
     ...rest
   } = props;
   const commonProps = {
@@ -164,12 +164,4 @@ BpkPhoneInput.propTypes = {
   valid: PropTypes.bool,
   wrapperProps: PropTypes.object // eslint-disable-line react/forbid-prop-types
 };
-BpkPhoneInput.defaultProps = {
-  className: null,
-  disabled: false,
-  dialingCodeMask: false,
-  large: false,
-  valid: null,
-  wrapperProps: {}
-};
 export default BpkPhoneInput;

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

@@ -0,0 +1,5 @@
+import BpkPrice, { type Props as BpkPriceProps } from './src/BpkPrice';
+import { SIZES, ALIGNS } from './src/common-types';
+export default BpkPrice;
+export type { BpkPriceProps };
+export { SIZES, ALIGNS };

package/bpk-component-price/index.js

@@ -14,7 +14,9 @@
  * 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 BpkPrice from "./src/BpkPrice";
+ */
+
+import BpkPrice from "./src/BpkPrice";
 import { SIZES, ALIGNS } from "./src/common-types";
 export default BpkPrice;
 export { SIZES, ALIGNS };

package/bpk-component-price/src/BpkPrice.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { SIZES, ALIGNS } from './common-types';
+type NativeDivProps = HTMLAttributes<HTMLDivElement>;
+export type Props = Omit<NativeDivProps, 'className'> & {
+    price: string;
+    size?: (typeof SIZES)[keyof typeof SIZES];
+    align?: (typeof ALIGNS)[keyof typeof ALIGNS];
+    className?: string | null;
+    leadingText?: string | null;
+    /**
+     * **Experimental** This prop is experimental and subject to change.
+     * Use with caution.
+     */
+    leadingClassName?: string | null;
+    trailingText?: string | null;
+    previousPrice?: string | null;
+    icon?: ReactNode;
+    dataAttributes?: Record<string, string>;
+};
+declare const BpkPrice: ({ align, className, dataAttributes, icon, leadingClassName, leadingText, previousPrice, price, size, trailingText, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkPrice;

package/bpk-component-price/src/BpkPrice.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 BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
 import { SIZES, ALIGNS } from "./common-types";
@@ -75,9 +76,7 @@ const BpkPrice = ({
     });
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: getClassName('bpk-price', isAlignRight && 'bpk-price--right', className)
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    ,
+    className: getClassName('bpk-price', isAlignRight && 'bpk-price--right', className),
     ...rest,
     children: [/*#__PURE__*/_jsxs("div", {
       className: getClassName(previousPrice && 'bpk-price__leading', isAlignRight && 'bpk-price__leading--right', leadingClassName),
@@ -120,15 +119,4 @@ const BpkPrice = ({
     }), isAlignRight && getTrailingTextNode()]
   });
 };
-BpkPrice.propTypes = {
-  price: PropTypes.string.isRequired,
-  size: PropTypes.oneOf(Object.keys(SIZES)),
-  align: PropTypes.oneOf(Object.keys(ALIGNS)),
-  className: PropTypes.string,
-  leadingText: PropTypes.string,
-  trailingText: PropTypes.string,
-  previousPrice: PropTypes.string,
-  leadingClassName: PropTypes.string,
-  dataAttributes: PropTypes.objectOf(PropTypes.string)
-};
 export default BpkPrice;

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

@@ -0,0 +1,10 @@
+export declare const SIZES: {
+    readonly xsmall: "xsmall";
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+export declare const ALIGNS: {
+    readonly left: "left";
+    readonly right: "right";
+};

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

@@ -14,7 +14,9 @@
  * 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.
- */export const SIZES = {
+ */
+
+export const SIZES = {
   xsmall: 'xsmall',
   small: 'small',
   medium: 'medium',

package/bpk-component-section-list/src/BpkSectionListItem.js

@@ -24,11 +24,11 @@ const BpkLargeChevronRightIconWithRtlSupport = withRtlSupport(BpkLargeChevronRig
 const getClassName = cssModules(STYLES);
 const BpkSectionListItem = props => {
   const {
-    blank,
+    blank = false,
     children,
-    className,
-    href,
-    onClick,
+    className = null,
+    href = null,
+    onClick = null,
     ...rest
   } = props;
   const classNames = [getClassName('bpk-section-list-item', (href || onClick) && 'bpk-section-list-item--interactive', className)];
@@ -83,10 +83,4 @@ BpkSectionListItem.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func
 };
-BpkSectionListItem.defaultProps = {
-  blank: false,
-  className: null,
-  href: null,
-  onClick: null
-};
 export default BpkSectionListItem;

package/bpk-component-section-list/src/BpkSectionListSection.js

@@ -24,7 +24,7 @@ const getClassName = cssModules(STYLES);
 const BpkSectionListSection = props => {
   const {
     children,
-    headerText,
+    headerText = null,
     ...rest
   } = props;
   return /*#__PURE__*/_jsxs("section", {
@@ -47,7 +47,4 @@ BpkSectionListSection.propTypes = {
   children: PropTypes.node.isRequired,
   headerText: PropTypes.string
 };
-BpkSectionListSection.defaultProps = {
-  headerText: null
-};
 export default BpkSectionListSection;

package/bpk-component-select/src/BpkSelect.d.ts

@@ -9,7 +9,7 @@ export type Props = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className' |
     dockedFirst?: boolean;
     dockedLast?: boolean;
     dockedMiddle?: boolean;
-    image?: ReactElement | null;
+    image?: ReactElement<any> | null;
     large?: boolean;
     valid?: boolean | null;
     wrapperClassName?: string | null;

package/bpk-component-slider/src/BpkSlider.js

@@ -155,7 +155,7 @@ const BubbleInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     value,
     ...inputProps
   } = props;
-  const ref = useRef();
+  const ref = useRef(null);
   const composedRefs = useComposedRefs(forwardedRef, ref);
 
   // This Hook Provides the native behaviour that the input range type would have around the "change" event.

package/bpk-component-spinner/src/SpinnerLayout.story-helpers.d.ts

@@ -1,12 +1,6 @@
-import PropTypes from 'prop-types';
 import type { ReactElement } from 'react';
 type Props = {
     children: Array<ReactElement<any, any>> | ReactElement<any, any>;
 };
-declare const SpinnerLayout: {
-    (props: Props): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-    };
-};
+declare const SpinnerLayout: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default SpinnerLayout;

package/bpk-component-spinner/src/SpinnerLayout.story-helpers.js

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 import { Children } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import SPINNER_TYPES from "./spinnerTypes";
@@ -41,7 +40,4 @@ const SpinnerLayout = props => {
     })
   });
 };
-SpinnerLayout.propTypes = {
-  children: PropTypes.node.isRequired
-};
 export default SpinnerLayout;

package/bpk-component-star-rating/index.d.ts

@@ -0,0 +1,9 @@
+import BpkInteractiveStar, { type Props as BpkInteractiveStarProps } from './src/BpkInteractiveStar';
+import BpkInteractiveStarRating, { type Props as BpkInteractiveStarRatingProps } from './src/BpkInteractiveStarRating';
+import BpkStar, { BpkStarNonRtl, STAR_TYPES, type Props as BpkStarProps } from './src/BpkStar';
+import BpkStarRating, { ROUNDING_TYPES, type Props as BpkStarRatingProps } from './src/BpkStarRating';
+import themeAttributes from './src/themeAttributes';
+import withInteractiveStarRatingState from './src/withInteractiveStarRatingState';
+export { BpkStar, BpkStarNonRtl, STAR_TYPES, ROUNDING_TYPES, BpkInteractiveStar, BpkInteractiveStarRating, withInteractiveStarRatingState, themeAttributes, };
+export type { BpkStarProps, BpkStarRatingProps, BpkInteractiveStarProps, BpkInteractiveStarRatingProps, };
+export default BpkStarRating;

package/bpk-component-star-rating/index.js

@@ -14,7 +14,9 @@
  * 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 BpkInteractiveStar from "./src/BpkInteractiveStar";
+ */
+
+import BpkInteractiveStar from "./src/BpkInteractiveStar";
 import BpkInteractiveStarRating from "./src/BpkInteractiveStarRating";
 import BpkStar, { BpkStarNonRtl, STAR_TYPES } from "./src/BpkStar";
 import BpkStarRating, { ROUNDING_TYPES } from "./src/BpkStarRating";

package/bpk-component-star-rating/src/BpkInteractiveStar.d.ts

@@ -0,0 +1,17 @@
+import type { ButtonHTMLAttributes, MouseEventHandler } from 'react';
+import { type STAR_TYPES } from './BpkStar';
+type InteractiveStarType = typeof STAR_TYPES.EMPTY | typeof STAR_TYPES.FULL;
+type NativeButtonProps = ButtonHTMLAttributes<HTMLButtonElement>;
+export type Props = Omit<NativeButtonProps, 'className' | 'type' | 'onClick' | 'onMouseEnter' | 'name' | 'value' | 'aria-label' | 'aria-pressed'> & {
+    label: string;
+    name: string;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+    onMouseEnter: MouseEventHandler<HTMLButtonElement>;
+    type: InteractiveStarType;
+    value: number;
+    selected?: boolean;
+    large?: boolean;
+    extraLarge?: boolean;
+};
+declare const BpkInteractiveStar: ({ label, name, onClick, onMouseEnter, selected, type, value, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkInteractiveStar;

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

@@ -14,9 +14,10 @@
  * 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 { BpkStarNonRtl, STAR_TYPES } from "./BpkStar";
+import { BpkStarNonRtl } from "./BpkStar";
 import STYLES from "./BpkInteractiveStar.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -46,20 +47,10 @@ const BpkInteractiveStar = ({
     children: /*#__PURE__*/_jsx("div", {
       className: iconClassNames,
       children: /*#__PURE__*/_jsx(BpkStarNonRtl, {
-        type: type
-        /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md */,
+        type: type,
         ...rest
       })
     })
   });
 };
-BpkInteractiveStar.propTypes = {
-  label: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  onClick: PropTypes.func.isRequired,
-  onMouseEnter: PropTypes.func.isRequired,
-  type: PropTypes.oneOf([STAR_TYPES.EMPTY, STAR_TYPES.FULL]).isRequired,
-  value: PropTypes.number.isRequired,
-  selected: PropTypes.bool
-};
 export default BpkInteractiveStar;

package/bpk-component-star-rating/src/BpkInteractiveStarRating.d.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes, MouseEvent } from 'react';
+export declare const getTypeByRating: (starNumber: number, rating: number) => "full" | "empty";
+type StarLabel = (rating: number, maxRating: number) => string;
+type RatingHandler = (rating: number, event: MouseEvent<HTMLButtonElement>) => unknown;
+type NativeDivProps = HTMLAttributes<HTMLDivElement>;
+export type Props = Omit<NativeDivProps, 'className' | 'id' | 'onMouseLeave'> & {
+    getStarLabel: StarLabel;
+    id: string;
+    className?: string | null;
+    hoverRating?: number;
+    large?: boolean;
+    extraLarge?: boolean;
+    maxRating?: number;
+    onMouseLeave?: () => unknown;
+    onRatingHover?: RatingHandler;
+    onRatingSelect?: RatingHandler;
+    rating?: number;
+};
+declare const BpkInteractiveStarRating: ({ className, extraLarge, getStarLabel, hoverRating, id, large, maxRating, onMouseLeave, onRatingHover, onRatingSelect, rating, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkInteractiveStarRating;

package/bpk-component-star-rating/src/BpkInteractiveStarRating.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 { cssModules } from "../../bpk-react-utils";
 import BpkInteractiveStar from "./BpkInteractiveStar";
 import { STAR_TYPES } from "./BpkStar";
@@ -70,17 +71,4 @@ const BpkInteractiveStarRating = ({
     children: stars
   });
 };
-BpkInteractiveStarRating.propTypes = {
-  getStarLabel: PropTypes.func.isRequired,
-  id: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  hoverRating: PropTypes.number,
-  large: PropTypes.bool,
-  extraLarge: PropTypes.bool,
-  maxRating: PropTypes.number,
-  onMouseLeave: PropTypes.func,
-  onRatingHover: PropTypes.func,
-  onRatingSelect: PropTypes.func,
-  rating: PropTypes.number
-};
 export default BpkInteractiveStarRating;

package/bpk-component-star-rating/src/BpkStar.d.ts

@@ -0,0 +1,21 @@
+export declare const STAR_TYPES: {
+    readonly EMPTY: "empty";
+    readonly HALF: "half";
+    readonly FULL: "full";
+};
+export type StarType = (typeof STAR_TYPES)[keyof typeof STAR_TYPES];
+export type Props = {
+    type: StarType;
+    className?: string | null;
+    large?: boolean;
+    extraLarge?: boolean;
+};
+export declare const BpkStarNonRtl: ({ className, extraLarge, large, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const _default: {
+    (props: {
+        className?: string | null;
+        [rest: string]: any;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default _default;

package/bpk-component-star-rating/src/BpkStar.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 { withRtlSupport } from "../../bpk-component-icon";
 import LargeIcon from "../../bpk-component-icon/lg/star";
 import HalfLargeIcon from "../../bpk-component-icon/lg/star-half";
@@ -60,37 +61,23 @@ const BpkStar = ({
     HalfIcon = withRtlSupport(HalfExtraLargeIcon);
   }
   if (type === STAR_TYPES.HALF) {
-    return (
-      /*#__PURE__*/
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-      _jsx("span", {
-        className: [containerClassNames, halfIconClassNames],
-        ...rest,
-        children: /*#__PURE__*/_jsx(HalfIcon, {})
-      })
-    );
+    return /*#__PURE__*/_jsx("span", {
+      className: [containerClassNames, halfIconClassNames].join(' '),
+      ...rest,
+      children: /*#__PURE__*/_jsx(HalfIcon, {})
+    });
   }
   return type === STAR_TYPES.FULL ? /*#__PURE__*/_jsx("span", {
     className: iconClassNames,
-    children: /*#__PURE__*/_jsx(Icon
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    , {
+    children: /*#__PURE__*/_jsx(Icon, {
       ...rest
     })
   }) : /*#__PURE__*/_jsx("span", {
     className: iconClassNames,
-    children: /*#__PURE__*/_jsx(OutlineIcon
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    , {
+    children: /*#__PURE__*/_jsx(OutlineIcon, {
       ...rest
     })
   });
 };
-BpkStar.propTypes = {
-  type: PropTypes.oneOf([STAR_TYPES.EMPTY, STAR_TYPES.HALF, STAR_TYPES.FULL]).isRequired,
-  className: PropTypes.string,
-  large: PropTypes.bool,
-  extraLarge: PropTypes.bool
-};
 export const BpkStarNonRtl = BpkStar;
 export default withRtlSupport(BpkStar);

package/bpk-component-star-rating/src/BpkStarRating.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'react';
+export declare const getTypeByRating: (starNumber: number, rating: number) => "full" | "empty" | "half";
+export declare const ROUNDING_TYPES: {
+    down: (n: number) => number;
+    up: (n: number) => number;
+    nearest: (n: number) => number;
+};
+type RatingLabel = string | ((rating: number, maxRating: number) => string);
+type Rounding = typeof ROUNDING_TYPES.down | typeof ROUNDING_TYPES.up | typeof ROUNDING_TYPES.nearest;
+type NativeDivProps = HTMLAttributes<HTMLDivElement>;
+export type Props = Omit<NativeDivProps, 'className' | 'aria-label'> & {
+    ratingLabel: RatingLabel;
+    className?: string | null;
+    large?: boolean;
+    extraLarge?: boolean;
+    maxRating?: number;
+    rating?: number;
+    rounding?: Rounding;
+};
+declare const BpkStarRating: ({ className, extraLarge, large, maxRating, rating, ratingLabel, rounding, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkStarRating;

package/bpk-component-star-rating/src/BpkStarRating.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 { cssModules } from "../../bpk-react-utils";
 import BpkStar, { STAR_TYPES } from "./BpkStar";
 import STYLES from "./BpkStarRating.module.css";
@@ -68,13 +69,4 @@ const BpkStarRating = ({
     children: stars
   });
 };
-BpkStarRating.propTypes = {
-  ratingLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired,
-  className: PropTypes.string,
-  large: PropTypes.bool,
-  extraLarge: PropTypes.bool,
-  maxRating: PropTypes.number,
-  rating: PropTypes.number,
-  rounding: PropTypes.oneOf([ROUNDING_TYPES.down, ROUNDING_TYPES.up, ROUNDING_TYPES.nearest])
-};
 export default BpkStarRating;

package/bpk-component-star-rating/src/themeAttributes.d.ts

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

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

@@ -14,4 +14,6 @@
  * 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.
- */export default ['starRatingFilledColor'];
+ */
+
+export default ['starRatingFilledColor'];

package/bpk-component-star-rating/src/withInteractiveStarRatingState.d.ts

@@ -0,0 +1,42 @@
+import type { ComponentType, MouseEvent } from 'react';
+type WithInteractiveStarRatingStateProps = {
+    onRatingSelect?: (rating: number, event?: MouseEvent<HTMLButtonElement> | null) => unknown;
+};
+type State = {
+    rating: number;
+    hoverRating: number;
+};
+declare const withInteractiveStarRatingState: <P extends object>(InteractiveStarRating: ComponentType<P>) => {
+    new (props: P & WithInteractiveStarRatingStateProps): {
+        onRatingSelect: (rating: number, event?: MouseEvent<HTMLButtonElement> | null) => void;
+        onMouseLeave: () => void;
+        onRatingHover: (hoverRating: number) => void;
+        render(): import("react/jsx-runtime").JSX.Element;
+        context: unknown;
+        setState<K extends keyof State>(state: State | ((prevState: Readonly<State>, props: Readonly<P & WithInteractiveStarRatingStateProps>) => State | Pick<State, K> | null) | Pick<State, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P & WithInteractiveStarRatingStateProps>;
+        state: Readonly<State>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<P & WithInteractiveStarRatingStateProps>, nextState: Readonly<State>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P & WithInteractiveStarRatingStateProps>, prevState: Readonly<State>): any;
+        componentDidUpdate?(prevProps: Readonly<P & WithInteractiveStarRatingStateProps>, prevState: Readonly<State>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P & WithInteractiveStarRatingStateProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & WithInteractiveStarRatingStateProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P & WithInteractiveStarRatingStateProps>, nextState: Readonly<State>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & WithInteractiveStarRatingStateProps>, nextState: Readonly<State>, nextContext: any): void;
+    };
+    displayName: string;
+    defaultProps: {
+        onRatingSelect: () => null;
+    };
+    contextType?: import("react").Context<any> | undefined;
+};
+export default withInteractiveStarRatingState;