@skyscanner/backpack-web 42.16.0 → 42.18.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-checkbox/index.d.ts

@@ -9,3 +9,4 @@ export type { BpkCheckboxV2RootProps, BpkCheckboxV2CheckedState } from './src/Bp
 export type { BpkCheckboxV2ControlProps } from './src/BpkCheckboxV2/BpkCheckboxV2Control';
 export type { BpkCheckboxV2LabelProps } from './src/BpkCheckboxV2/BpkCheckboxV2Label';
 export type { BpkCheckboxV2DescriptionProps } from './src/BpkCheckboxV2/BpkCheckboxV2Description';
+export type { BpkCheckboxV2HiddenInputProps } from './src/BpkCheckboxV2/BpkCheckboxV2HiddenInput';

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.d.ts

@@ -1,9 +1,9 @@
 declare const BpkCheckboxV2: {
-    Root: ({ checked, children, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: import("./BpkCheckboxV2Root").BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
+    Root: ({ checked, children, "data-testid": dataTestId, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: import("./BpkCheckboxV2Root").BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
     Control: ({ children }: import("./BpkCheckboxV2Control").BpkCheckboxV2ControlProps) => import("react/jsx-runtime").JSX.Element;
     Indicator: () => null;
     Label: ({ children }: import("./BpkCheckboxV2Label").BpkCheckboxV2LabelProps) => import("react/jsx-runtime").JSX.Element;
     Description: ({ children }: import("./BpkCheckboxV2Description").BpkCheckboxV2DescriptionProps) => import("react/jsx-runtime").JSX.Element;
-    HiddenInput: () => import("react/jsx-runtime").JSX.Element;
+    HiddenInput: ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }?: import("./BpkCheckboxV2HiddenInput").BpkCheckboxV2HiddenInputProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default BpkCheckboxV2;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-checkbox-v2{display:inline-flex;align-items:flex-start;cursor:pointer;gap:.5rem}.bpk-checkbox-v2[data-disabled]{cursor:not-allowed}.bpk-checkbox-v2__control{position:relative;display:flex;width:1.25rem;height:1.25rem;margin-top:.125rem;justify-content:center;align-items:center;flex-shrink:0;border:.1875rem solid #626971;background-color:#fff;border-radius:.25rem;border-radius:var(--bpk-checkbox-border-radius, 0.25rem)}.bpk-checkbox-v2__control[data-focus-visible]{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-checkbox-v2__control[data-state=checked]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:.0625rem center;background-size:calc(100% - .15625rem) auto}.bpk-checkbox-v2__control[data-state=checked]:disabled{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2__control[data-state=indeterminate]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227))}.bpk-checkbox-v2__control[data-state=indeterminate]::before{content:"";width:.625rem;height:.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox-v2__control[data-invalid]{border-color:#e70866}.bpk-checkbox-v2__control[data-disabled]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked],.bpk-checkbox-v2__control[data-disabled][data-state=indeterminate]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked]{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2__label{color:#161616;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-checkbox-v2__label a{color:inherit}[data-disabled] .bpk-checkbox-v2__label{color:rgba(0,0,0,.2)}.bpk-checkbox-v2__description{display:block;margin-top:.25rem;color:#626971;font-size:.875rem;line-height:1.25rem;font-weight:400}[data-disabled] .bpk-checkbox-v2__description{color:rgba(0,0,0,.2)}
+.bpk-checkbox-v2{position:relative;display:inline-flex;align-items:flex-start;cursor:pointer;gap:.5rem}.bpk-checkbox-v2[data-disabled]{cursor:not-allowed}.bpk-checkbox-v2__control{position:relative;display:flex;width:1.25rem;height:1.25rem;margin-top:.125rem;justify-content:center;align-items:center;flex-shrink:0;border:.1875rem solid #626971;background-color:#fff;border-radius:.25rem;border-radius:var(--bpk-checkbox-border-radius, 0.25rem)}.bpk-checkbox-v2__control[data-focus-visible]{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-checkbox-v2__control[data-state=checked]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:.0625rem center;background-size:calc(100% - .15625rem) auto}.bpk-checkbox-v2__control[data-state=checked]:disabled{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2__control[data-state=indeterminate]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227))}.bpk-checkbox-v2__control[data-state=indeterminate]::before{content:"";width:.625rem;height:.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox-v2__control[data-invalid]{border-color:#e70866}.bpk-checkbox-v2__control[data-disabled]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked],.bpk-checkbox-v2__control[data-disabled][data-state=indeterminate]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked]{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2__label{color:#161616;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-checkbox-v2__label a{color:inherit}[data-disabled] .bpk-checkbox-v2__label{color:rgba(0,0,0,.2)}.bpk-checkbox-v2__description{display:block;margin-top:.25rem;color:#626971;font-size:.875rem;line-height:1.25rem;font-weight:400}[data-disabled] .bpk-checkbox-v2__description{color:rgba(0,0,0,.2)}

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2HiddenInput.d.ts

@@ -1,2 +1,7 @@
-declare const BpkCheckboxV2HiddenInput: () => import("react/jsx-runtime").JSX.Element;
+export type BpkCheckboxV2HiddenInputProps = {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+};
+declare const BpkCheckboxV2HiddenInput: ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }?: BpkCheckboxV2HiddenInputProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkCheckboxV2HiddenInput;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2HiddenInput.js

@@ -17,9 +17,19 @@
  */
 
 import { Checkbox } from '@ark-ui/react';
-
+import { jsx as _jsx } from "react/jsx-runtime";
 // Renders Ark's visually hidden native <input type="checkbox">.
 // Include when the checkbox is inside a <form> for native form submission.
-import { jsx as _jsx } from "react/jsx-runtime";
-const BpkCheckboxV2HiddenInput = () => /*#__PURE__*/_jsx(Checkbox.HiddenInput, {});
+// Accepts aria-* attributes so consumers can override the screen-reader
+// announcement when the visible <BpkCheckboxV2.Label> is missing or differs
+// from the desired accessible name.
+const BpkCheckboxV2HiddenInput = ({
+  'aria-describedby': ariaDescribedby,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledby
+} = {}) => /*#__PURE__*/_jsx(Checkbox.HiddenInput, {
+  "aria-describedby": ariaDescribedby,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby
+});
 export default BpkCheckboxV2HiddenInput;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.d.ts

@@ -3,6 +3,7 @@ export type BpkCheckboxV2CheckedState = boolean | 'indeterminate';
 export type BpkCheckboxV2RootProps = {
     children: ReactNode;
     checked?: BpkCheckboxV2CheckedState;
+    'data-testid'?: string;
     defaultChecked?: BpkCheckboxV2CheckedState;
     disabled?: boolean;
     id?: string;
@@ -12,5 +13,5 @@ export type BpkCheckboxV2RootProps = {
     required?: boolean;
     value?: string;
 };
-declare const BpkCheckboxV2Root: ({ checked, children, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkCheckboxV2Root: ({ checked, children, "data-testid": dataTestId, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: BpkCheckboxV2RootProps) => import("react/jsx-runtime").JSX.Element;
 export default BpkCheckboxV2Root;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2Root.js

@@ -24,6 +24,7 @@ const getClassName = cssModules(STYLES);
 const BpkCheckboxV2Root = ({
   checked,
   children,
+  'data-testid': dataTestId,
   defaultChecked,
   disabled = false,
   id,
@@ -35,6 +36,7 @@ const BpkCheckboxV2Root = ({
 }) => /*#__PURE__*/_jsx(Checkbox.Root, {
   className: getClassName('bpk-checkbox-v2'),
   checked: checked,
+  "data-testid": dataTestId,
   defaultChecked: defaultChecked,
   disabled: disabled,
   id: id,

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;