@skyscanner/backpack-web 34.16.0 → 35.0.0

package/bpk-component-nudger/src/BpkNudger.js

@@ -16,30 +16,63 @@
  * limitations under the License.
  */
 
+import { useRef } from 'react';
+import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import { withButtonAlignment } from "../../bpk-component-icon";
+import MinusIcon from "../../bpk-component-icon/sm/minus";
+import PlusIcon from "../../bpk-component-icon/sm/plus";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkLabel from "../../bpk-component-label";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { cssModules } from "../../bpk-react-utils";
-import BpkConfigurableNudger from "./BpkConfigurableNudger";
+import { cssModules, setNativeValue } from "../../bpk-react-utils";
 import STYLES from "./BpkNudger.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const compareValues = (a, b) => a - b;
-const incrementValue = currentValue => currentValue + 1;
-const decrementValue = currentValue => currentValue - 1;
-const formatValue = currentValue => currentValue.toString();
 const BpkNudger = ({
   buttonType = 'secondary',
   className = null,
+  decreaseButtonLabel,
   icon,
   id,
+  increaseButtonLabel,
+  inputClassName,
+  max,
+  min,
+  name,
+  onValueChange,
+  step = 1,
   subtitle,
   title,
+  value,
   ...rest
 }) => {
-  const classNames = getClassName(title && 'bpk-nudger__container');
+  // Ensure that the minimum value is 0 or greater it's not designed to handle negative values.
+  const minimum = min < 0 ? 0 : min;
+  const containerClassNames = getClassName(title && 'bpk-nudger__container');
+  const inputClassNames = getClassName('bpk-nudger__input', 'bpk-nudger__input--numeric', inputClassName && inputClassName, buttonType === 'secondaryOnDark' && 'bpk-nudger__input--secondary-on-dark');
+  const nudgerClassNames = getClassName('bpk-nudger', className);
+  const maxButtonDisabled = compareValues(value, max) >= 0;
+  const minButtonDisabled = compareValues(value, minimum) <= 0;
+  const AlignedMinusIcon = withButtonAlignment(MinusIcon);
+  const AlignedPlusIcon = withButtonAlignment(PlusIcon);
+  const inputRef = useRef(null);
+  const incrementValue = currentValue => currentValue + step;
+  const decrementValue = currentValue => currentValue - step;
+  const valueLimitter = element => {
+    if (element.valueAsNumber < minimum) {
+      onValueChange(minimum);
+      setNativeValue(element, minimum, false);
+    } else if (element.valueAsNumber > max) {
+      onValueChange(max);
+      setNativeValue(element, max, false);
+    }
+    if (element.valueAsNumber >= minimum && element.valueAsNumber <= max) {
+      onValueChange(element.valueAsNumber);
+    }
+  };
   return /*#__PURE__*/_jsxs("div", {
-    className: classNames,
+    className: containerClassNames,
     children: [title && /*#__PURE__*/_jsxs("div", {
       className: getClassName('bpk-nudger__label'),
       children: [/*#__PURE__*/_jsx(BpkLabel, {
@@ -60,19 +93,68 @@ const BpkNudger = ({
           })
         })]
       })]
-    }), /*#__PURE__*/_jsx(BpkConfigurableNudger, {
-      inputClassName: getClassName('bpk-nudger__input--numeric'),
-      compareValues: compareValues,
-      incrementValue: incrementValue,
-      decrementValue: decrementValue,
-      formatValue: formatValue
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      ,
-      className: className,
-      buttonType: buttonType,
-      id: id,
-      ...rest
+    }), /*#__PURE__*/_jsxs("div", {
+      className: nudgerClassNames,
+      children: [/*#__PURE__*/_jsx(BpkButtonV2, {
+        type: BUTTON_TYPES[buttonType],
+        iconOnly: true,
+        onClick: () => {
+          if (Number.isNaN(value)) {
+            onValueChange(minimum);
+            inputRef.current && setNativeValue(inputRef.current, minimum);
+            return;
+          }
+          const newValue = decrementValue(value);
+          onValueChange(newValue);
+          // We want to maintain native input events across our form components. Along with react updating
+          // the value attribute we can set it via native handlers and emit a "change" event.
+          inputRef.current && setNativeValue(inputRef.current, newValue);
+        },
+        disabled: minButtonDisabled,
+        title: decreaseButtonLabel,
+        "aria-controls": id,
+        children: /*#__PURE__*/_jsx(AlignedMinusIcon, {})
+      }), /*#__PURE__*/_jsx("input", {
+        type: "number",
+        "aria-live": "polite",
+        defaultValue: value,
+        id: id,
+        ref: inputRef,
+        name: name || id,
+        step: step,
+        onInput: event => {
+          const inputElement = event.target;
+          if (!inputElement.validity.valid &&
+          // allow the removal of a value
+          Number.isNaN(inputElement.valueAsNumber)) {
+            // set prev value if entry invalid
+            onValueChange(value);
+            setNativeValue(inputElement, value, false);
+          }
+          valueLimitter(inputElement);
+        },
+        className: inputClassNames,
+        ...rest
+      }), /*#__PURE__*/_jsx(BpkButtonV2, {
+        type: BUTTON_TYPES[buttonType],
+        iconOnly: true,
+        onClick: () => {
+          if (Number.isNaN(value)) {
+            onValueChange(max);
+            inputRef.current && setNativeValue(inputRef.current, max);
+            return;
+          }
+          const newValue = incrementValue(value);
+          onValueChange(newValue);
+          // We want to maintain native input events across our form components. Along with react updating
+          // the value attribute we can set it via native handlers and emit a "change" event.
+          inputRef.current && setNativeValue(inputRef.current, newValue);
+        },
+        disabled: maxButtonDisabled,
+        title: increaseButtonLabel,
+        "aria-controls": id,
+        children: /*#__PURE__*/_jsx(AlignedPlusIcon, {})
+      })]
     })]
   });
 };

package/bpk-component-nudger/src/BpkNudger.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-html[dir=rtl] .bpk-nudger{display:flex;flex-direction:row-reverse}.bpk-nudger__input{display:inline-block;padding:.5rem 0;border:none;color:#161616;text-align:center;vertical-align:middle;margin:0;font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-nudger__input--secondary-on-dark{background-color:rgba(0,0,0,0);color:#fff}.bpk-nudger__input--numeric{width:2.5rem}.bpk-nudger__container{display:flex;justify-content:space-between;align-items:center}.bpk-nudger__label{display:flex;gap:.5rem}.bpk-nudger__label--title-subtitle{display:inline-flex;flex-direction:column;justify-content:space-between}.bpk-nudger__label--subtitle{color:#626971}
+html[dir=rtl] .bpk-nudger{display:flex}.bpk-nudger__input{display:inline-block;padding:.5rem 0;border:none;color:#161616;text-align:center;vertical-align:middle;margin:0;font-size:1rem;line-height:1.25rem;font-weight:700}.bpk-nudger__input::-webkit-outer-spin-button,.bpk-nudger__input::-webkit-inner-spin-button{margin:0;appearance:none}.bpk-nudger__input[type=number]{appearance:textfield}.bpk-nudger__input--secondary-on-dark{background-color:rgba(0,0,0,0);color:#fff}.bpk-nudger__input--numeric{width:2.5rem}.bpk-nudger__container{display:flex;justify-content:space-between;align-items:center}.bpk-nudger__label{display:flex;gap:.5rem}.bpk-nudger__label--title-subtitle{display:inline-flex;flex-direction:column;justify-content:space-between}.bpk-nudger__label--subtitle{color:#626971}

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

@@ -5,11 +5,12 @@ export declare const BUTTON_TYPES: {
 };
 export type CommonProps = {
     id: string;
-    min: string | number;
-    max: string | number;
-    value: string | number;
-    onChange: (arg0: any) => void | null;
-    name?: string | null;
+    min: number;
+    max: number;
+    value: number;
+    onValueChange: (arg0: number) => void;
+    name?: string | undefined;
+    step?: number;
     className?: string | null;
     /**
      * This is the label that will be read out when screen reader users tab to the increase button. Make sure you use a descriptive label.
@@ -18,6 +19,7 @@ export type CommonProps = {
      * Function that handle the incrementing of the current selected value.
      */
     increaseButtonLabel: string;
+    inputClassName?: string | undefined;
     /**
      * This is the label that will be read out when screen reader users tab to the decrease button. Make sure you use a descriptive label
      */

package/bpk-component-overlay/src/BpkOverlay.d.ts

@@ -30,5 +30,5 @@ export type Props = BpkOverlayProps & ComponentProps<'div'> & {
     overlayType?: OverlayType;
     foregroundContent?: ReactNode;
 };
-declare const BpkOverlay: (props: Props) => JSX.Element;
+declare const BpkOverlay: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkOverlay;

package/bpk-component-popover/src/BpkPopover.d.ts

@@ -33,5 +33,5 @@ export type Props = CloseButtonProps & {
     onAction?: () => void;
     renderTarget?: () => HTMLElement | HTMLElement | null;
 };
-declare const BpkPopover: ({ actionText, children, className, closeButtonIcon, closeButtonLabel, closeButtonProps, closeButtonText, id, isOpen, label, labelAsTitle, onAction, onClose, padded, placement, renderTarget, showArrow, target, ...rest }: Props) => JSX.Element;
+declare const BpkPopover: ({ actionText, children, className, closeButtonIcon, closeButtonLabel, closeButtonProps, closeButtonText, id, isOpen, label, labelAsTitle, onAction, onClose, padded, placement, renderTarget, showArrow, target, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkPopover;

package/bpk-component-rating/src/BpkRating.d.ts

@@ -13,7 +13,7 @@ type Props = {
     value: string | number;
 };
 declare const BpkRating: {
-    (props: Props): JSX.Element;
+    (props: Props): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         ariaLabel: PropTypes.Validator<string>;
         value: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;

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

@@ -10,6 +10,6 @@ declare class BpkRtlToggle extends Component<Props, State> {
     componentWillUnmount(): void;
     handleKeyDown: (e: KeyboardEvent) => void;
     toggleRtl: (e: InteractionEvents) => void;
-    render(): JSX.Element;
+    render(): import("react/jsx-runtime").JSX.Element;
 }
 export default BpkRtlToggle;

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

@@ -1,16 +1,14 @@
 import type { ComponentType } from 'react';
 declare const updateOnDirectionChange: (EnhancedComponent: ComponentType<any> | string) => {
-    new (props: {} | Readonly<{}>): {
+    new (props: {}): {
         componentDidMount(): void;
         componentWillUnmount(): void;
         onDirectionChange: () => void;
-        render(): JSX.Element;
-        context: any;
+        render(): import("react/jsx-runtime").JSX.Element;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<{}> & Readonly<{
-            children?: import("react").ReactNode | undefined;
-        }>;
+        readonly props: Readonly<{}>;
         state: Readonly<{}>;
         refs: {
             [key: string]: import("react").ReactInstance;
@@ -30,13 +28,11 @@ declare const updateOnDirectionChange: (EnhancedComponent: ComponentType<any> |
         componentDidMount(): void;
         componentWillUnmount(): void;
         onDirectionChange: () => void;
-        render(): JSX.Element;
-        context: any;
+        render(): import("react/jsx-runtime").JSX.Element;
+        context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => Pick<{}, K> | {} | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<{}> & Readonly<{
-            children?: import("react").ReactNode | undefined;
-        }>;
+        readonly props: Readonly<{}>;
         state: Readonly<{}>;
         refs: {
             [key: string]: import("react").ReactInstance;

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

@@ -27,8 +27,8 @@ declare const _default: {
             source: string;
         }) => void;
         handleDateKeyDown: (event: KeyboardEvent) => void;
-        render(): JSX.Element;
-        context: any;
+        render(): import("react/jsx-runtime").JSX.Element;
+        context: unknown;
         setState<K extends keyof {
             preventKeyboardFocus: boolean;
             focusedDate: Date;
@@ -65,8 +65,6 @@ declare const _default: {
             maxDate: Date;
         }> & {
             [rest: string]: any;
-        }> & Readonly<{
-            children?: import("react").ReactNode | undefined;
         }>;
         state: Readonly<{
             preventKeyboardFocus: boolean;

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

@@ -4,5 +4,5 @@ type Props = Partial<BpkCalendarDateProps> & {
     isOutside?: boolean;
     [rest: string]: any;
 };
-declare const BpkScrollableCalendarDate: ({ isOutside, ...rest }: Props) => JSX.Element | null;
+declare const BpkScrollableCalendarDate: ({ isOutside, ...rest }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default BpkScrollableCalendarDate;

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

@@ -1,11 +1,11 @@
-import type { ElementType } from 'react';
+import type { ElementType, ReactNode } from 'react';
 import type { BpkCalendarGridProps } from '../../bpk-component-calendar';
 type Props = Partial<BpkCalendarGridProps> & {
     DateComponent: ElementType;
     month: Date;
     formatDateFull: (date: Date) => Date | string;
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    formatMonth: (date: Date) => Date | string;
+    formatMonth: (date: Date) => ReactNode | string;
 };
-declare const BpkScrollableCalendarGrid: ({ className, formatMonth, ignoreOutsideDate, month, ...rest }: Props) => JSX.Element;
+declare const BpkScrollableCalendarGrid: ({ className, formatMonth, ignoreOutsideDate, month, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkScrollableCalendarGrid;

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

@@ -1,4 +1,4 @@
-import type { ElementType } from 'react';
+import type { ElementType, ReactNode } from 'react';
 import type { BpkCalendarGridProps, SelectionConfiguration } from '../../bpk-component-calendar';
 type Props = Partial<BpkCalendarGridProps> & {
     minDate: Date;
@@ -7,7 +7,7 @@ type Props = Partial<BpkCalendarGridProps> & {
     formatDateFull: (date: Date) => Date | string;
     month: Date;
     weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    formatMonth: (date: Date) => Date | string;
+    formatMonth: (date: Date) => ReactNode | string;
     focusedDate?: Date | null;
     selectionConfiguration?: SelectionConfiguration;
     className?: string | null;
@@ -16,5 +16,5 @@ type Props = Partial<BpkCalendarGridProps> & {
      */
     customRowHeight?: number;
 };
-declare const BpkScrollableCalendarGridList: (props: Props) => JSX.Element;
+declare const BpkScrollableCalendarGridList: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkScrollableCalendarGridList;

package/bpk-component-section-header/src/BpkSectionHeader.d.ts

@@ -10,5 +10,5 @@ type Props = {
     button?: ReactNode;
     type?: SectionType;
 };
-declare const BpkSectionHeader: ({ button, description, title, type, }: Props) => JSX.Element;
+declare const BpkSectionHeader: ({ button, description, title, type, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkSectionHeader;

package/bpk-component-segmented-control/src/BpkSegmentedControl.d.ts

@@ -13,5 +13,5 @@ export type Props = {
     selectedIndex: number;
     shadow?: boolean;
 };
-declare const BpkSegmentedControl: ({ buttonContents, onItemClick, selectedIndex, shadow, type, }: Props) => JSX.Element;
+declare const BpkSegmentedControl: ({ buttonContents, onItemClick, selectedIndex, shadow, type, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkSegmentedControl;

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

@@ -3,5 +3,5 @@ type Props = {
     skeletonStyle: string;
     styleObj?: CUSTOM_SIZE_TYPE;
 };
-declare const BpkBaseSkeleton: ({ skeletonStyle, styleObj, }: Props) => JSX.Element;
+declare const BpkBaseSkeleton: ({ skeletonStyle, styleObj, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkBaseSkeleton;

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

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

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

@@ -8,7 +8,10 @@ export type Props = {
     value: number[] | number;
     ariaLabel: string[];
     ariaValuetext?: string[];
+    inputProps?: [{
+        [key: string]: any;
+    }];
     [rest: string]: any;
 };
-declare const BpkSlider: ({ ariaLabel, ariaValuetext, max, min, minDistance, onAfterChange, onChange, step, value, ...rest }: Props) => JSX.Element;
+declare const BpkSlider: ({ ariaLabel, ariaValuetext, inputProps, max, min, minDistance, onAfterChange, onChange, step, value, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkSlider;

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

@@ -15,15 +15,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import { forwardRef, useRef, useEffect } from 'react';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import * as Slider from '@radix-ui/react-slider';
-import { cssModules, isRTL } from "../../bpk-react-utils";
+import { usePrevious } from '@radix-ui/react-use-previous';
+import { cssModules, isRTL, setNativeValue } from "../../bpk-react-utils";
 import STYLES from "./BpkSlider.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkSlider = ({
   ariaLabel,
   ariaValuetext,
+  inputProps,
   max,
   min,
   minDistance,
@@ -67,8 +70,53 @@ const BpkSlider = ({
       "aria-label": ariaLabel[index],
       "aria-valuetext": ariaValuetext ? ariaValuetext[index] : val.toString(),
       className: getClassName('bpk-slider__thumb'),
-      "aria-valuenow": currentValue[index]
+      "aria-valuenow": currentValue[index],
+      asChild: true,
+      children: /*#__PURE__*/_jsx("span", {
+        children: /*#__PURE__*/_jsx(BubbleInput, {
+          value: currentValue[index],
+          ...(inputProps && inputProps[index])
+        })
+      })
     }, ariaLabel[index]))]
   });
 };
+
+// Work around until radix-ui/react-slider is updated to accept an inputRef prop https://github.com/radix-ui/primitives/pull/3033
+const BubbleInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    value,
+    ...inputProps
+  } = props;
+  const ref = useRef();
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  const prevValue = usePrevious(value);
+
+  // Bubble value change to parents (e.g form change event)
+  useEffect(() => {
+    const input = ref.current;
+    if (prevValue !== value) {
+      setNativeValue(input, `${value}`);
+    }
+  }, [prevValue, value]);
+
+  /**
+   * We purposefully do not use `type="hidden"` here otherwise forms that
+   * wrap it will not be able to access its value via the FormData API.
+   *
+   * We purposefully do not add the `value` attribute here to allow the value
+   * to be set programatically and bubble to any parent form `onChange` event.
+   * Adding the `value` will cause React to consider the programatic
+   * dispatch a duplicate and it will get swallowed.
+   */
+  return /*#__PURE__*/_jsx("input", {
+    style: {
+      display: 'none'
+    },
+    ...inputProps,
+    ref: composedRefs,
+    type: "number",
+    defaultValue: value
+  });
+});
 export default BpkSlider;

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

@@ -44,5 +44,5 @@ export type Props = {
     imageRadius?: boolean;
     onClick?: (event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => void;
 };
-declare const BpkSnippet: ({ altText, bodyStyle, bodyText, buttonStyle, buttonText, desktopLayout, headline, headlineStyle, imageOrientation, imageRadius, onClick, src, subheading, }: Props) => JSX.Element;
+declare const BpkSnippet: ({ altText, bodyStyle, bodyText, buttonStyle, buttonText, desktopLayout, headline, headlineStyle, imageOrientation, imageRadius, onClick, src, subheading, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkSnippet;

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

@@ -1,18 +1,8 @@
-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,21 +1,9 @@
-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,21 +1,9 @@
-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;