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

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,23 +1,21 @@
 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;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        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;
-        }>;
+        readonly props: Readonly<{}>;
         state: Readonly<{}>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
         shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any | null;
         componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
@@ -30,20 +28,18 @@ declare const updateOnDirectionChange: (EnhancedComponent: ComponentType<any> |
         componentDidMount(): void;
         componentWillUnmount(): void;
         onDirectionChange: () => void;
-        render(): JSX.Element;
-        context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        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;
-        }>;
+        readonly props: Readonly<{}>;
         state: Readonly<{}>;
         refs: {
             [key: string]: import("react").ReactInstance;
         };
         shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any | null;
         componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     new (props: Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
         onDateClick: ((date: Date) => void) | null;
@@ -28,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;
@@ -47,13 +46,13 @@ declare const _default: {
             maxDate: Date;
         }> & {
             [rest: string]: any;
-        }>) => {
+        }>) => Pick<{
             preventKeyboardFocus: boolean;
             focusedDate: Date;
-        } | Pick<{
+        }, K> | {
             preventKeyboardFocus: boolean;
             focusedDate: Date;
-        }, K> | null) | Pick<{
+        } | null) | Pick<{
             preventKeyboardFocus: boolean;
             focusedDate: Date;
         }, K> | null, callback?: (() => void) | undefined): void;
@@ -66,8 +65,6 @@ declare const _default: {
             maxDate: Date;
         }> & {
             [rest: string]: any;
-        }> & Readonly<{
-            children?: import("react").ReactNode;
         }>;
         state: Readonly<{
             preventKeyboardFocus: boolean;
@@ -102,7 +99,7 @@ declare const _default: {
         }>, prevState: Readonly<{
             preventKeyboardFocus: boolean;
             focusedDate: Date;
-        }>): any;
+        }>): any | null;
         componentDidUpdate?(prevProps: Readonly<Omit<import("../../bpk-component-calendar/src/composeCalendar").Props & import("../../bpk-component-calendar/src/BpkCalendarContainer").Props, keyof {
             onDateClick: ((date: Date) => void) | null;
             onDateKeyDown: ((event: KeyboardEvent) => void) | null;

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

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import type { BpkCalendarDateProps } from '../../bpk-component-calendar';
 type Props = Partial<BpkCalendarDateProps> & {
     date: Date;
     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.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 type Props = {
     skeletonStyle: string;
     styleObj?: {

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import type { CUSTOM_SIZE_TYPE } from './common-types';
 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.d.ts

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

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type Props = {
     max: number;
     min: number;
@@ -9,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/index.d.ts

@@ -0,0 +1,3 @@
+import BpkSnippet, { BODY_STYLE, BUTTON_STYLE, DESKTOP_LAYOUT, HEADLINE_STYLE, IMAGE_ORIENTATION } from './src/BpkSnippet';
+export default BpkSnippet;
+export { BODY_STYLE, BUTTON_STYLE, DESKTOP_LAYOUT, HEADLINE_STYLE, IMAGE_ORIENTATION, };

package/bpk-component-snippet/index.js

@@ -0,0 +1,21 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import BpkSnippet, { BODY_STYLE, BUTTON_STYLE, DESKTOP_LAYOUT, HEADLINE_STYLE, IMAGE_ORIENTATION } from "./src/BpkSnippet";
+export default BpkSnippet;
+export { BODY_STYLE, BUTTON_STYLE, DESKTOP_LAYOUT, HEADLINE_STYLE, IMAGE_ORIENTATION };

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

@@ -0,0 +1,48 @@
+import type { MouseEvent } from 'react';
+export declare const BODY_STYLE: {
+    readonly bodyDefault: "body-default";
+    readonly bodyLongform: "body-longform";
+};
+export declare const BUTTON_STYLE: {
+    readonly primary: "primary";
+    readonly featured: "featured";
+};
+export declare const HEADLINE_STYLE: {
+    readonly heading1: "heading-1";
+    readonly heading2: "heading-2";
+    readonly heading3: "heading-3";
+    readonly heading4: "heading-4";
+    readonly heading5: "heading-5";
+    readonly hero1: "hero-1";
+    readonly hero2: "hero-2";
+    readonly hero3: "hero-3";
+    readonly hero4: "hero-4";
+    readonly hero5: "hero-5";
+};
+export declare const DESKTOP_LAYOUT: {
+    readonly imageLeft: "imageLeft";
+    readonly imageRight: "imageRight";
+    readonly vertical: "vertical";
+};
+export declare const IMAGE_ORIENTATION: {
+    readonly landscape: "landscape";
+    readonly portrait: "portrait";
+    readonly square: "square";
+};
+export type Props = {
+    src: string;
+    altText: string;
+    headline?: string | null;
+    subheading?: string | null;
+    bodyText?: string | null;
+    buttonText?: string | null;
+    bodyStyle?: (typeof BODY_STYLE)[keyof typeof BODY_STYLE];
+    buttonStyle?: (typeof BUTTON_STYLE)[keyof typeof BUTTON_STYLE];
+    headlineStyle?: (typeof HEADLINE_STYLE)[keyof typeof HEADLINE_STYLE];
+    desktopLayout?: (typeof DESKTOP_LAYOUT)[keyof typeof DESKTOP_LAYOUT];
+    imageOrientation?: (typeof IMAGE_ORIENTATION)[keyof typeof IMAGE_ORIENTATION];
+    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) => import("react/jsx-runtime").JSX.Element;
+export default BpkSnippet;