@skyscanner/backpack-web 42.16.0 → 42.17.0

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

@@ -0,0 +1,6 @@
+import BpkAutosuggestLegacy from './src/BpkAutosuggest';
+import BpkAutosuggestSuggestion from './src/BpkAutosuggestSuggestion';
+import { defaultTheme } from './src/BpkAutosuggestV2/BpkAutosuggest';
+declare const BpkAutosuggest: import("react").ForwardRefExoticComponent<import("./src/BpkAutosuggestV2/BpkAutosuggest").BpkAutoSuggestProps<any> & import("react").RefAttributes<HTMLInputElement>>;
+export default BpkAutosuggest;
+export { BpkAutosuggestLegacy, BpkAutosuggestSuggestion, defaultTheme };

package/bpk-component-autosuggest/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 BpkAutosuggestLegacy from "./src/BpkAutosuggest";
+ */
+
+import BpkAutosuggestLegacy from "./src/BpkAutosuggest";
 import BpkAutosuggestSuggestion from "./src/BpkAutosuggestSuggestion";
 import BpkAutosuggestV2, { defaultTheme } from "./src/BpkAutosuggestV2/BpkAutosuggest";
 const BpkAutosuggest = BpkAutosuggestV2;

package/bpk-component-autosuggest/src/BpkAutosuggest.d.ts

@@ -0,0 +1,2 @@
+import Autosuggest from 'react-autosuggest';
+export default Autosuggest;

package/bpk-component-autosuggest/src/BpkAutosuggest.js

@@ -14,7 +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 Autosuggest from 'react-autosuggest';
+ */
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import Autosuggest from 'react-autosuggest';
 import BpkInput from "../../bpk-component-input";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkAutosuggest.module.css";
@@ -47,19 +50,15 @@ Autosuggest.defaultProps.renderInputComponent = inputProps => {
     ref,
     ...rest
   } = inputProps;
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx(BpkInput, {
-      inputRef: element => {
-        ref(element);
-        if (typeof inputRef === 'function') {
-          inputRef(element);
-        }
-      },
-      autoComplete: autoComplete,
-      ...rest
-    })
-  );
+  return /*#__PURE__*/_jsx(BpkInput, {
+    inputRef: element => {
+      ref(element);
+      if (typeof inputRef === 'function') {
+        inputRef(element);
+      }
+    },
+    autoComplete: autoComplete,
+    ...rest
+  });
 };
 export default Autosuggest;

package/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentType, HTMLAttributes, ReactNode } from 'react';
+type Props = Omit<HTMLAttributes<HTMLElement>, 'className'> & {
+    value: ReactNode;
+    subHeading?: ReactNode | null;
+    tertiaryLabel?: string | null;
+    icon?: ComponentType | null;
+    indent?: boolean;
+    className?: string | null;
+};
+declare const BpkAutosuggestSuggestion: ({ className, icon: Icon, indent, subHeading, tertiaryLabel, value, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkAutosuggestSuggestion;

package/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.js

@@ -14,72 +14,52 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkAutosuggest.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkAutosuggestSuggestion = props => {
+const BpkAutosuggestSuggestion = ({
+  className,
+  icon: Icon,
+  indent = false,
+  subHeading,
+  tertiaryLabel,
+  value,
+  ...rest
+}) => {
   const classNames = [getClassName('bpk-autosuggest__suggestion')];
-  const {
-    className,
-    icon,
-    indent,
-    subHeading,
-    tertiaryLabel,
-    value,
-    ...rest
-  } = props;
-  const Icon = icon;
   if (indent) {
     classNames.push(getClassName('bpk-autosuggest__suggestion--indent'));
   }
   if (className) {
     classNames.push(className);
   }
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsxs("section", {
-      className: classNames.join(' '),
-      ...rest,
-      children: [icon ? /*#__PURE__*/_jsx("div", {
-        className: getClassName('bpk-autosuggest__suggestion-icon'),
-        children: /*#__PURE__*/_jsx(Icon, {})
-      }) : null, /*#__PURE__*/_jsx("div", {
-        className: getClassName('bpk-autosuggest__suggestion-content'),
-        children: /*#__PURE__*/_jsxs("div", {
-          className: getClassName('bpk-autosuggest__suggestion-inner'),
-          children: [/*#__PURE__*/_jsxs("div", {
-            children: [/*#__PURE__*/_jsx("span", {
-              className: getClassName('bpk-autosuggest__suggestion-value'),
-              children: value
-            }), subHeading || tertiaryLabel ? /*#__PURE__*/_jsx("small", {
-              className: getClassName('bpk-autosuggest__suggestion-sub-heading'),
-              children: subHeading
-            }) : null]
-          }), tertiaryLabel ? /*#__PURE__*/_jsx("aside", {
-            className: getClassName('bpk-autosuggest__suggestion-tertiary-label'),
-            children: tertiaryLabel
+  return /*#__PURE__*/_jsxs("section", {
+    className: classNames.join(' '),
+    ...rest,
+    children: [Icon ? /*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-autosuggest__suggestion-icon'),
+      children: /*#__PURE__*/_jsx(Icon, {})
+    }) : null, /*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-autosuggest__suggestion-content'),
+      children: /*#__PURE__*/_jsxs("div", {
+        className: getClassName('bpk-autosuggest__suggestion-inner'),
+        children: [/*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx("span", {
+            className: getClassName('bpk-autosuggest__suggestion-value'),
+            children: value
+          }), subHeading || tertiaryLabel ? /*#__PURE__*/_jsx("small", {
+            className: getClassName('bpk-autosuggest__suggestion-sub-heading'),
+            children: subHeading
           }) : null]
-        })
-      })]
-    })
-  );
-};
-BpkAutosuggestSuggestion.propTypes = {
-  value: PropTypes.node.isRequired,
-  subHeading: PropTypes.node,
-  tertiaryLabel: PropTypes.string,
-  icon: PropTypes.func,
-  indent: PropTypes.bool,
-  className: PropTypes.string
-};
-BpkAutosuggestSuggestion.defaultProps = {
-  subHeading: null,
-  tertiaryLabel: null,
-  icon: null,
-  indent: false,
-  className: null
+        }), tertiaryLabel ? /*#__PURE__*/_jsx("aside", {
+          className: getClassName('bpk-autosuggest__suggestion-tertiary-label'),
+          children: tertiaryLabel
+        }) : null]
+      })
+    })]
+  });
 };
 export default BpkAutosuggestSuggestion;

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

@@ -0,0 +1,11 @@
+import BpkCollapsible from './src/BpkCollapsible';
+export { default as useBpkCollapsible } from './src/useBpkCollapsible';
+export { COLLAPSIBLE_VARIANTS } from './src/common-types';
+export default BpkCollapsible;
+export type { BpkCollapsibleOpenChangeDetails, BpkCollapsibleVariant, } from './src/common-types';
+export type { BpkCollapsibleRootProps } from './src/BpkCollapsibleRoot';
+export type { BpkCollapsibleRootProviderProps } from './src/BpkCollapsibleRootProvider';
+export type { BpkCollapsibleTriggerProps } from './src/BpkCollapsibleTrigger';
+export type { BpkCollapsibleIndicatorProps } from './src/BpkCollapsibleIndicator';
+export type { BpkCollapsibleContentProps } from './src/BpkCollapsibleContent';
+export type { BpkUseCollapsibleProps, BpkUseCollapsibleReturn, } from './src/useBpkCollapsible';

package/bpk-component-collapsible/index.js

@@ -0,0 +1,22 @@
+/*
+ * 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 BpkCollapsible from "./src/BpkCollapsible";
+export { default as useBpkCollapsible } from "./src/useBpkCollapsible";
+export { COLLAPSIBLE_VARIANTS } from "./src/common-types";
+export default BpkCollapsible;

package/bpk-component-collapsible/src/BpkCollapsible.d.ts

@@ -0,0 +1,8 @@
+declare const BpkCollapsible: {
+    Root: ({ children, collapsedHeight, defaultOpen, disabled, ids, lazyMount, onExitComplete, onOpenChange, open, unmountOnExit, variant, }: import("./BpkCollapsibleRoot").BpkCollapsibleRootProps) => import("react/jsx-runtime").JSX.Element;
+    RootProvider: ({ children, value, variant, }: import("./BpkCollapsibleRootProvider").BpkCollapsibleRootProviderProps) => import("react/jsx-runtime").JSX.Element;
+    Trigger: import("react").ForwardRefExoticComponent<import("./BpkCollapsibleTrigger").BpkCollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Indicator: import("react").ForwardRefExoticComponent<import("./BpkCollapsibleIndicator").BpkCollapsibleIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<import("./BpkCollapsibleContent").BpkCollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default BpkCollapsible;

package/bpk-component-collapsible/src/BpkCollapsible.js

@@ -0,0 +1,31 @@
+/*
+ * 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 BpkCollapsibleContent from "./BpkCollapsibleContent";
+import BpkCollapsibleIndicator from "./BpkCollapsibleIndicator";
+import BpkCollapsibleRoot from "./BpkCollapsibleRoot";
+import BpkCollapsibleRootProvider from "./BpkCollapsibleRootProvider";
+import BpkCollapsibleTrigger from "./BpkCollapsibleTrigger";
+const BpkCollapsible = {
+  Root: BpkCollapsibleRoot,
+  RootProvider: BpkCollapsibleRootProvider,
+  Trigger: BpkCollapsibleTrigger,
+  Indicator: BpkCollapsibleIndicator,
+  Content: BpkCollapsibleContent
+};
+export default BpkCollapsible;

package/bpk-component-collapsible/src/BpkCollapsible.module.css

@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+.bpk-collapsible{display:block;inline-size:100%;min-inline-size:0}.bpk-collapsible--default{color:#161616}.bpk-collapsible--on-contrast{color:#fff}.bpk-collapsible--on-contrast .bpk-collapsible__trigger:disabled,.bpk-collapsible--on-contrast .bpk-collapsible__content[data-disabled]{color:hsla(0,0%,100%,.5)}.bpk-collapsible__trigger{display:flex;padding:0;align-items:center;border:0;background:rgba(0,0,0,0);color:inherit;text-align:start;cursor:pointer;appearance:none;gap:.25rem;inline-size:100%}.bpk-collapsible__trigger:disabled,.bpk-collapsible__trigger[data-disabled]{cursor:not-allowed}.bpk-collapsible__trigger:disabled{color:rgba(0,0,0,.2)}.bpk-collapsible__trigger:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-collapsible__indicator{display:inline-flex;justify-content:center;align-items:center;transition:transform 200ms ease;color:inherit;margin-inline-start:auto}@media(prefers-reduced-motion: reduce){.bpk-collapsible__indicator{transition:none}}.bpk-collapsible__indicator svg{fill:currentcolor}.bpk-collapsible__indicator[data-state=open]{transform:rotate(180deg)}.bpk-collapsible__content{overflow:hidden}@media(prefers-reduced-motion: reduce){.bpk-collapsible__content[data-state=open],.bpk-collapsible__content[data-state=closing],.bpk-collapsible__content[data-state=closed]{animation:none}}.bpk-collapsible__content[data-disabled]{color:rgba(0,0,0,.2)}.bpk-collapsible__content[data-state=open]{animation:bpk-collapsible-expand 200ms ease}.bpk-collapsible__content[data-state=closing],.bpk-collapsible__content[data-state=closed]{animation:bpk-collapsible-collapse 200ms ease}.bpk-collapsible__content-inner{display:block}@keyframes bpk-collapsible-expand{from{block-size:var(--collapsed-height, 0)}to{block-size:var(--height)}}@keyframes bpk-collapsible-collapse{from{block-size:var(--height)}to{block-size:var(--collapsed-height, 0)}}

package/bpk-component-collapsible/src/BpkCollapsibleContent.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export type BpkCollapsibleContentProps = {
+    children: ReactNode;
+};
+declare const BpkCollapsibleContent: import("react").ForwardRefExoticComponent<BpkCollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BpkCollapsibleContent;

package/bpk-component-collapsible/src/BpkCollapsibleContent.js

@@ -0,0 +1,36 @@
+/*
+ * 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 { forwardRef } from 'react';
+import { Collapsible } from '@ark-ui/react';
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkCollapsible.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkCollapsibleContent = /*#__PURE__*/forwardRef(({
+  children
+}, ref) => /*#__PURE__*/_jsx(Collapsible.Content, {
+  ref: ref,
+  className: getClassName('bpk-collapsible__content'),
+  children: /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-collapsible__content-inner'),
+    children: children
+  })
+}));
+BpkCollapsibleContent.displayName = 'BpkCollapsibleContent';
+export default BpkCollapsibleContent;

package/bpk-component-collapsible/src/BpkCollapsibleIndicator.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export type BpkCollapsibleIndicatorProps = {
+    children: ReactNode;
+};
+declare const BpkCollapsibleIndicator: import("react").ForwardRefExoticComponent<BpkCollapsibleIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export default BpkCollapsibleIndicator;

package/bpk-component-collapsible/src/BpkCollapsibleIndicator.js

@@ -0,0 +1,34 @@
+/*
+ * 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 { forwardRef } from 'react';
+import { Collapsible } from '@ark-ui/react';
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkCollapsible.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkCollapsibleIndicator = /*#__PURE__*/forwardRef(({
+  children
+}, ref) => /*#__PURE__*/_jsx(Collapsible.Indicator, {
+  ref: ref,
+  className: getClassName('bpk-collapsible__indicator'),
+  "aria-hidden": true,
+  children: children
+}));
+BpkCollapsibleIndicator.displayName = 'BpkCollapsibleIndicator';
+export default BpkCollapsibleIndicator;

package/bpk-component-collapsible/src/BpkCollapsibleRoot.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { BpkCollapsibleOpenChangeDetails, BpkCollapsibleVariant } from './common-types';
+type ElementIds = Partial<{
+    root: string;
+    trigger: string;
+    content: string;
+}>;
+export type BpkCollapsibleRootProps = {
+    children: ReactNode;
+    collapsedHeight?: string | number;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    ids?: ElementIds;
+    lazyMount?: boolean;
+    onExitComplete?: () => void;
+    onOpenChange?: (details: BpkCollapsibleOpenChangeDetails) => void;
+    open?: boolean;
+    unmountOnExit?: boolean;
+    variant?: BpkCollapsibleVariant;
+};
+declare const BpkCollapsibleRoot: ({ children, collapsedHeight, defaultOpen, disabled, ids, lazyMount, onExitComplete, onOpenChange, open, unmountOnExit, variant, }: BpkCollapsibleRootProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkCollapsibleRoot;

package/bpk-component-collapsible/src/BpkCollapsibleRoot.js

@@ -0,0 +1,49 @@
+/*
+ * 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 { Collapsible } from '@ark-ui/react';
+import { getDataComponentAttribute } from "../../bpk-react-utils";
+import { COLLAPSIBLE_VARIANTS, getRootClassName } from "./common-types";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkCollapsibleRoot = ({
+  children,
+  collapsedHeight,
+  defaultOpen,
+  disabled = false,
+  ids,
+  lazyMount,
+  onExitComplete,
+  onOpenChange,
+  open,
+  unmountOnExit,
+  variant = COLLAPSIBLE_VARIANTS.default
+}) => /*#__PURE__*/_jsx(Collapsible.Root, {
+  className: getRootClassName(variant),
+  collapsedHeight: collapsedHeight,
+  defaultOpen: defaultOpen,
+  disabled: disabled,
+  ids: ids,
+  lazyMount: lazyMount,
+  onExitComplete: onExitComplete,
+  onOpenChange: onOpenChange,
+  open: open,
+  unmountOnExit: unmountOnExit,
+  ...getDataComponentAttribute('Collapsible'),
+  children: children
+});
+export default BpkCollapsibleRoot;

package/bpk-component-collapsible/src/BpkCollapsibleRootProvider.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { BpkCollapsibleVariant } from './common-types';
+import type { BpkUseCollapsibleReturn } from './useBpkCollapsible';
+export type BpkCollapsibleRootProviderProps = {
+    children: ReactNode;
+    value: BpkUseCollapsibleReturn;
+    variant?: BpkCollapsibleVariant;
+};
+declare const BpkCollapsibleRootProvider: ({ children, value, variant, }: BpkCollapsibleRootProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkCollapsibleRootProvider;

package/bpk-component-collapsible/src/BpkCollapsibleRootProvider.js

@@ -0,0 +1,33 @@
+/*
+ * 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 { Collapsible } from '@ark-ui/react';
+import { getDataComponentAttribute } from "../../bpk-react-utils";
+import { COLLAPSIBLE_VARIANTS, getRootClassName } from "./common-types";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkCollapsibleRootProvider = ({
+  children,
+  value,
+  variant = COLLAPSIBLE_VARIANTS.default
+}) => /*#__PURE__*/_jsx(Collapsible.RootProvider, {
+  className: getRootClassName(variant),
+  value: value,
+  ...getDataComponentAttribute('Collapsible'),
+  children: children
+});
+export default BpkCollapsibleRootProvider;

package/bpk-component-collapsible/src/BpkCollapsibleTrigger.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export type BpkCollapsibleTriggerProps = {
+    children: ReactNode;
+};
+declare const BpkCollapsibleTrigger: import("react").ForwardRefExoticComponent<BpkCollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default BpkCollapsibleTrigger;

package/bpk-component-collapsible/src/BpkCollapsibleTrigger.js

@@ -0,0 +1,43 @@
+/*
+ * 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 { forwardRef } from 'react';
+import { Collapsible, useCollapsibleContext } from '@ark-ui/react';
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkCollapsible.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+// Applies the native HTML `disabled` attribute to the underlying <button> so
+// the trigger is removed from the tab order and announced as disabled by
+// assistive tech. Ark/Zag only emit `data-disabled`, which would otherwise
+// leave the button tabbable and announced as enabled.
+const BpkCollapsibleTrigger = /*#__PURE__*/forwardRef(({
+  children
+}, ref) => {
+  const {
+    disabled
+  } = useCollapsibleContext();
+  return /*#__PURE__*/_jsx(Collapsible.Trigger, {
+    ref: ref,
+    className: getClassName('bpk-collapsible__trigger'),
+    disabled: disabled,
+    children: children
+  });
+});
+BpkCollapsibleTrigger.displayName = 'BpkCollapsibleTrigger';
+export default BpkCollapsibleTrigger;

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

@@ -0,0 +1,9 @@
+export declare const COLLAPSIBLE_VARIANTS: {
+    readonly default: "default";
+    readonly onContrast: "onContrast";
+};
+export type BpkCollapsibleVariant = (typeof COLLAPSIBLE_VARIANTS)[keyof typeof COLLAPSIBLE_VARIANTS];
+export type BpkCollapsibleOpenChangeDetails = {
+    open: boolean;
+};
+export declare const getRootClassName: (variant: BpkCollapsibleVariant) => string;

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

@@ -0,0 +1,29 @@
+/*
+ * 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 { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkCollapsible.module.css";
+export const COLLAPSIBLE_VARIANTS = {
+  default: 'default',
+  onContrast: 'onContrast'
+};
+const getClassName = cssModules(STYLES);
+export const getRootClassName = variant => {
+  const variantModifier = variant === COLLAPSIBLE_VARIANTS.onContrast ? 'on-contrast' : 'default';
+  return getClassName('bpk-collapsible', `bpk-collapsible--${variantModifier}`);
+};

package/bpk-component-collapsible/src/useBpkCollapsible.d.ts

@@ -0,0 +1,5 @@
+import type { UseCollapsibleProps, UseCollapsibleReturn } from '@ark-ui/react';
+export type BpkUseCollapsibleProps = UseCollapsibleProps;
+export type BpkUseCollapsibleReturn = UseCollapsibleReturn;
+declare const useBpkCollapsible: (props?: BpkUseCollapsibleProps) => BpkUseCollapsibleReturn;
+export default useBpkCollapsible;

package/bpk-component-collapsible/src/useBpkCollapsible.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 { useCollapsible } from '@ark-ui/react';
+const useBpkCollapsible = props => useCollapsible(props);
+export default useBpkCollapsible;

package/bpk-component-horizontal-nav/index.d.ts

@@ -0,0 +1,6 @@
+import BpkHorizontalNav, { HORIZONTAL_NAV_TYPES, type Props as NavProps } from './src/BpkHorizontalNav';
+import BpkHorizontalNavItem, { type Props as ItemProps, themeAttributes } from './src/BpkHorizontalNavItem';
+export type BpkHorizontalNavProps = NavProps;
+export type BpkHorizontalNavItemProps = ItemProps;
+export { HORIZONTAL_NAV_TYPES, BpkHorizontalNavItem, themeAttributes };
+export default BpkHorizontalNav;

package/bpk-component-horizontal-nav/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 BpkHorizontalNav, { HORIZONTAL_NAV_TYPES } from "./src/BpkHorizontalNav";
+ */
+
+import BpkHorizontalNav, { HORIZONTAL_NAV_TYPES } from "./src/BpkHorizontalNav";
 import BpkHorizontalNavItem, { themeAttributes } from "./src/BpkHorizontalNavItem";
 export { HORIZONTAL_NAV_TYPES, BpkHorizontalNavItem, themeAttributes };
 export default BpkHorizontalNav;

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.d.ts

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+declare const HORIZONTAL_NAV_TYPES: {
+    readonly default: "default";
+    readonly light: "light";
+};
+type Props = {
+    children: ReactNode;
+    ariaLabel?: string | null;
+    /**
+     * Ensures that the selected item is within view when loaded on narrow-screened devices.
+     */
+    autoScrollToSelected?: boolean;
+    className?: string | null;
+    leadingScrollIndicatorClassName?: string | null;
+    /**
+     * When set to "false", the bottom border on the component isn't included. This refers
+     * to the underline on the whole "BpkHorizontalNav", not the line that appears under the selected item.
+     */
+    showUnderline?: boolean;
+    trailingScrollIndicatorClassName?: string | null;
+    type?: keyof typeof HORIZONTAL_NAV_TYPES;
+    [rest: string]: any;
+};
+declare const BpkHorizontalNav: ({ ariaLabel, autoScrollToSelected, children: rawChildren, className, leadingScrollIndicatorClassName, showUnderline, trailingScrollIndicatorClassName, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export type { Props };
+export default BpkHorizontalNav;
+export { HORIZONTAL_NAV_TYPES };

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js

@@ -14,8 +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 PropTypes from 'prop-types';
-import { Component, Children, cloneElement } from 'react';
+ */
+
+import { Children, cloneElement, useCallback, useEffect, useRef } from 'react';
 import BpkMobileScrollContainer from "../../bpk-component-mobile-scroll-container";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkHorizontalNav.module.css";
@@ -29,138 +30,102 @@ const getPos = ref => {
   if (!ref) {
     return null;
   }
-  const pos = ref.getBoundingClientRect();
-  return pos;
+  return ref.getBoundingClientRect();
 };
-class BpkHorizontalNav extends Component {
-  constructor(props) {
-    super(props);
-    this.scrollRef = null;
-    this.selectedItemRef = null;
-  }
-  componentDidMount() {
-    requestAnimationFrame(() => {
-      this.scrollSelectedIntoView(false);
-    });
-  }
-  componentDidUpdate() {
-    this.scrollSelectedIntoView(true);
-  }
-  scrollSelectedIntoView = useSmoothScroll => {
-    if (!this.props.autoScrollToSelected || !this.scrollRef || !this.selectedItemRef) {
-      return;
-    }
-    if (!this.scrollRef) {
+const BpkHorizontalNav = ({
+  ariaLabel = null,
+  autoScrollToSelected = false,
+  children: rawChildren,
+  className = null,
+  leadingScrollIndicatorClassName = null,
+  showUnderline = true,
+  trailingScrollIndicatorClassName = null,
+  type = HORIZONTAL_NAV_TYPES.default,
+  ...rest
+}) => {
+  const scrollRef = useRef(null);
+  const selectedItemRef = useRef(null);
+  const isMounted = useRef(false);
+  const scrollSelectedIntoView = useCallback(useSmoothScroll => {
+    if (!autoScrollToSelected || !scrollRef.current || !selectedItemRef.current) {
       return;
     }
-    const selectedItemPos = getPos(this.selectedItemRef);
+    const selectedItemPos = getPos(selectedItemRef.current);
     if (!selectedItemPos) {
       return;
     }
-    const scrollPos = getPos(this.scrollRef);
+    const scrollPos = getPos(scrollRef.current);
     if (!scrollPos) {
       return;
     }
-
-    // We only need to carry out a scroll if the element is not already fully within the scroll view
     const needsScroll = selectedItemPos.left < scrollPos.left || selectedItemPos.right > scrollPos.right;
     if (!needsScroll) {
       return;
     }
     const scrollAdjustment = selectedItemPos.left - scrollPos.left;
-    // Some browsers don't support smooth scrolling, so in those cases we must fall back to simply setting `scrollLeft`
-    if (this.scrollRef && this.scrollRef.scroll && typeof this.scrollRef.scroll === 'function' && useSmoothScroll) {
-      this.scrollRef.scroll({
+    if (scrollRef.current.scroll && typeof scrollRef.current.scroll === 'function' && useSmoothScroll) {
+      scrollRef.current.scroll({
         left: scrollAdjustment,
         behavior: 'smooth'
       });
-    } else if (this.scrollRef) {
-      this.scrollRef.scrollLeft = scrollAdjustment;
+    } else {
+      scrollRef.current.scrollLeft = scrollAdjustment;
     }
-  };
-  render() {
-    const {
-      ariaLabel,
-      autoScrollToSelected,
-      children: rawChildren,
-      className,
-      leadingScrollIndicatorClassName,
-      showUnderline,
-      trailingScrollIndicatorClassName,
-      type,
-      ...rest
-    } = this.props;
-    const classNames = getClassName('bpk-horizontal-nav', showUnderline && `bpk-horizontal-nav--show-${type}-underline`, className);
-    let children = rawChildren;
-    if (autoScrollToSelected || type === HORIZONTAL_NAV_TYPES.light) {
-      children = Children.map(rawChildren, child => {
-        const childProps = {};
-        let childRef;
-        if (autoScrollToSelected) {
-          if (child && child.props && child.props.selected) {
-            childRef = ref => {
-              this.selectedItemRef = ref;
-            };
-          }
-        }
-        if (type === HORIZONTAL_NAV_TYPES.light) {
-          childProps.type = HORIZONTAL_NAV_TYPES.light;
-        }
-        return child ? /*#__PURE__*/_jsx("div", {
-          ref: childRef,
-          children: /*#__PURE__*/cloneElement(child, childProps)
-        }) : null;
-      });
+  }, [autoScrollToSelected]);
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      scrollSelectedIntoView(false);
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  useEffect(() => {
+    if (isMounted.current) {
+      scrollSelectedIntoView(true);
+    } else {
+      isMounted.current = true;
     }
-    return (
-      /*#__PURE__*/
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _jsx("div", {
-        className: classNames,
-        children: /*#__PURE__*/_jsx(BpkMobileScrollContainer, {
-          ariaLabel: ariaLabel,
-          innerContainerTagName: "nav",
-          leadingIndicatorClassName: leadingScrollIndicatorClassName,
-          trailingIndicatorClassName: trailingScrollIndicatorClassName,
-          scrollerRef: ref => {
-            this.scrollRef = ref;
-          },
-          ...rest,
-          children: /*#__PURE__*/_jsx("div", {
-            className: getClassName('bpk-horizontal-nav__list'),
-            role: "tablist",
-            children: children
-          })
-        })
-      })
-    );
+  });
+  const classNames = getClassName('bpk-horizontal-nav', showUnderline && `bpk-horizontal-nav--show-${type}-underline`, className);
+  let children = rawChildren;
+  if (autoScrollToSelected || type === HORIZONTAL_NAV_TYPES.light) {
+    children = Children.map(rawChildren, child => {
+      const isElement = typeof child === 'object' && child !== null && 'props' in child;
+      const childProps = {};
+      let childRef;
+      if (autoScrollToSelected) {
+        if (isElement && child.props.selected) {
+          childRef = ref => {
+            selectedItemRef.current = ref;
+          };
+        }
+      }
+      if (type === HORIZONTAL_NAV_TYPES.light) {
+        childProps.type = HORIZONTAL_NAV_TYPES.light;
+      }
+      return isElement ? /*#__PURE__*/_jsx("div", {
+        ref: childRef,
+        children: /*#__PURE__*/cloneElement(child, childProps)
+      }) : null;
+    });
   }
-}
-BpkHorizontalNav.propTypes = {
-  ariaLabel: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  /**
-   * Ensures that the selected item is within view when loaded on narrow-screened devices.
-   */
-  autoScrollToSelected: PropTypes.bool,
-  className: PropTypes.string,
-  leadingScrollIndicatorClassName: PropTypes.string,
-  /**
-   * When set to "false", the bottom border on the component isn't included. This refers
-   * to the underline on the whole "BpkHorizontalNav", not the line that appears under the selected item.
-   */
-  showUnderline: PropTypes.bool,
-  trailingScrollIndicatorClassName: PropTypes.string,
-  type: PropTypes.oneOf(Object.keys(HORIZONTAL_NAV_TYPES))
-};
-BpkHorizontalNav.defaultProps = {
-  ariaLabel: null,
-  autoScrollToSelected: false,
-  className: null,
-  leadingScrollIndicatorClassName: null,
-  showUnderline: true,
-  trailingScrollIndicatorClassName: null,
-  type: HORIZONTAL_NAV_TYPES.default
+  return /*#__PURE__*/_jsx("div", {
+    className: classNames,
+    children: /*#__PURE__*/_jsx(BpkMobileScrollContainer, {
+      ariaLabel: ariaLabel ?? undefined,
+      innerContainerTagName: "nav",
+      leadingIndicatorClassName: leadingScrollIndicatorClassName ?? undefined,
+      trailingIndicatorClassName: trailingScrollIndicatorClassName ?? undefined,
+      scrollerRef: ref => {
+        scrollRef.current = ref;
+      },
+      ...rest,
+      children: /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-horizontal-nav__list'),
+        role: "tablist",
+        children: children
+      })
+    })
+  });
 };
 export default BpkHorizontalNav;
 export { HORIZONTAL_NAV_TYPES };

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+import { HORIZONTAL_NAV_TYPES } from './BpkHorizontalNav';
+type Props = {
+    children: ReactNode;
+    className?: string | null;
+    /**
+     * **Note:**
+     * "disabled" and "selected" are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
+     */
+    disabled?: boolean;
+    href?: string | null;
+    /**
+     * **Note:**
+     * "disabled" and "selected" are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
+     */
+    selected?: boolean;
+    spaceAround?: boolean;
+    type?: keyof typeof HORIZONTAL_NAV_TYPES;
+    [rest: string]: any;
+};
+declare const BpkHorizontalNavItem: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const themeAttributes: string[];
+export type { Props };
+export { themeAttributes };
+export default BpkHorizontalNavItem;

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js

@@ -14,84 +14,49 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
-import { Component } from 'react';
+ */
+
+import { forwardRef } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import { HORIZONTAL_NAV_TYPES } from "./BpkHorizontalNav";
 import STYLES from "./BpkHorizontalNavItem.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-// In order to be able to access refs on the HorizontalNavItems, they need to be a fully defined
-// React Component class.
-// eslint-disable-next-line react/prefer-stateless-function
-class BpkHorizontalNavItem extends Component {
-  render() {
-    const {
-      children,
-      className,
-      disabled,
-      href,
-      selected,
-      spaceAround,
-      type,
-      ...rest
-    } = this.props;
-    const classNames = getClassName('bpk-horizontal-nav__item', spaceAround && 'bpk-horizontal-nav__item--space-around');
-    const innerClassNames = getClassName('bpk-horizontal-nav__link', `bpk-horizontal-nav__link--${type}`, selected && `bpk-horizontal-nav__link--${type}-selected`, disabled && `bpk-horizontal-nav__link--${type}-disabled`, className);
-    const clickableElement = href ?
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("a", {
-      href: href,
-      className: innerClassNames,
-      "aria-disabled": disabled,
-      role: "tab",
-      "aria-selected": selected ? 'true' : 'false',
-      ...rest,
-      children: children
-    }) :
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("button", {
-      type: "button",
-      className: innerClassNames,
-      disabled: disabled,
-      role: "tab",
-      "aria-selected": selected ? 'true' : 'false',
-      ...rest,
-      children: children
-    });
-    return /*#__PURE__*/_jsx("div", {
-      className: classNames,
-      children: clickableElement
-    });
-  }
-}
-BpkHorizontalNavItem.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  /**
-   * **Note:**
-   * "disabled" and "selected" are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
-   */
-  disabled: PropTypes.bool,
-  href: PropTypes.string,
-  /**
-   * **Note:**
-   * "disabled" and "selected" are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
-   */
-  selected: PropTypes.bool,
-  spaceAround: PropTypes.bool,
-  type: PropTypes.oneOf(Object.keys(HORIZONTAL_NAV_TYPES))
-};
-BpkHorizontalNavItem.defaultProps = {
-  className: null,
-  disabled: false,
-  href: null,
-  selected: false,
-  spaceAround: false,
-  type: HORIZONTAL_NAV_TYPES.default
-};
+const BpkHorizontalNavItem = /*#__PURE__*/forwardRef(({
+  children,
+  className = null,
+  disabled = false,
+  href = null,
+  selected = false,
+  spaceAround = false,
+  type = HORIZONTAL_NAV_TYPES.default,
+  ...rest
+}, ref) => {
+  const classNames = getClassName('bpk-horizontal-nav__item', spaceAround && 'bpk-horizontal-nav__item--space-around');
+  const innerClassNames = getClassName('bpk-horizontal-nav__link', `bpk-horizontal-nav__link--${type}`, selected && `bpk-horizontal-nav__link--${type}-selected`, disabled && `bpk-horizontal-nav__link--${type}-disabled`, className);
+  const clickableElement = href ? /*#__PURE__*/_jsx("a", {
+    href: href,
+    className: innerClassNames,
+    "aria-disabled": disabled,
+    role: "tab",
+    "aria-selected": selected ? 'true' : 'false',
+    ...rest,
+    children: children
+  }) : /*#__PURE__*/_jsx("button", {
+    type: "button",
+    className: innerClassNames,
+    disabled: disabled,
+    role: "tab",
+    "aria-selected": selected ? 'true' : 'false',
+    ...rest,
+    children: children
+  });
+  return /*#__PURE__*/_jsx("div", {
+    ref: ref,
+    className: classNames,
+    children: clickableElement
+  });
+});
 const themeAttributes = ['horizontalNavLinkColor', 'horizontalNavLinkHoverColor', 'horizontalNavLinkActiveColor', 'horizontalNavLinkSelectedColor', 'horizontalNavBarSelectedColor'];
 export { themeAttributes };
 export default BpkHorizontalNavItem;

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

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

package/bpk-component-switch/index.js

@@ -14,7 +14,7 @@
  * 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 BpkSwitch from "./src/BpkSwitch";
+ */import BpkSwitch, { SWITCH_VARIANTS } from "./src/BpkSwitch";
 import themeAttributes from "./src/themeAttributes";
-export { themeAttributes };
+export { SWITCH_VARIANTS, themeAttributes };
 export default BpkSwitch;

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

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

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

@@ -19,14 +19,23 @@
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkSwitch.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const SWITCH_VARIANTS = {
+  default: 'default',
+  onContrast: 'onContrast'
+};
 const getClassName = cssModules(STYLES);
+const switchVariantClassNames = {
+  [SWITCH_VARIANTS.default]: null,
+  [SWITCH_VARIANTS.onContrast]: getClassName('bpk-switch__switch--on-contrast')
+};
 const BpkSwitch = ({
   ariaLabel,
   className = null,
   small = false,
+  variant = SWITCH_VARIANTS.default,
   ...rest
 }) => {
-  const switchClassNames = getClassName('bpk-switch__switch', small && 'bpk-switch__switch--small');
+  const switchClassNames = getClassName('bpk-switch__switch', small && 'bpk-switch__switch--small', switchVariantClassNames[variant]);
   return /*#__PURE__*/_jsxs("label", {
     className: getClassName('bpk-switch', className),
     ...getDataComponentAttribute('Switch'),

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.16.0",
+  "version": "42.17.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
     "@radix-ui/react-compose-refs": "^1.1.1",
     "@radix-ui/react-slider": "1.3.5",
     "@react-google-maps/api": "^2.19.3",
-    "@skyscanner/bpk-foundations-web": "^24.5.0",
+    "@skyscanner/bpk-foundations-web": "^24.6.0",
     "@skyscanner/bpk-svgs": "^20.11.0",
     "tabbable": "^6.4.0",
     "d3-path": "^3.1.0",