@skyscanner/backpack-web 42.15.0 → 42.17.0

package/bpk-component-accordion/src/BpkAccordionItem.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-accordion__item--with-divider{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__item--with-divider-on-dark{box-shadow:0 -1px 0 0 hsla(0,0%,100%,.5) inset}.bpk-accordion__title{height:auto}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:left;cursor:pointer;appearance:none}html[dir=rtl] .bpk-accordion__toggle-button{text-align:right}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:flex;align-items:center;margin-left:.5rem;margin-right:0}html[dir=rtl] .bpk-accordion__icon-wrapper{margin-left:0;margin-right:.5rem}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-inner-container--with-divider{padding-bottom:1rem}
+.bpk-accordion__item--with-divider{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__item--with-divider-on-dark{box-shadow:0 -1px 0 0 hsla(0,0%,100%,.5) inset}.bpk-accordion__title{height:auto}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:start;cursor:pointer;appearance:none}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:flex;align-items:center;margin-left:.5rem;margin-right:0}html[dir=rtl] .bpk-accordion__icon-wrapper{margin-left:0;margin-right:.5rem}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-inner-container--with-divider{padding-bottom:1rem}

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/BpkAutosuggest.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-autosuggest__container--open{position:relative}.bpk-autosuggest__suggestions-container{display:none}.bpk-autosuggest__suggestions-container--open{position:absolute;top:100%;display:block;z-index:900;width:100%;margin-top:.75rem}.bpk-autosuggest__suggestions-container--open::before{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.8125rem;border:.8125rem solid rgba(0,0,0,0);border-bottom-color:#e0e4e9;pointer-events:none}.bpk-autosuggest__suggestions-container--open::after{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.75rem;border:.75rem solid rgba(0,0,0,0);border-bottom-color:#fff;pointer-events:none}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;list-style:none;overflow:hidden;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-left:2rem}.bpk-autosuggest__suggestion-icon{display:flex;margin-right:.5rem;vertical-align:top;fill:#626971}html[dir=rtl] .bpk-autosuggest__suggestion-icon{margin-right:0;margin-left:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block;overflow-wrap:anywhere}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}
+.bpk-autosuggest__container--open{position:relative}.bpk-autosuggest__suggestions-container{display:none}.bpk-autosuggest__suggestions-container--open{position:absolute;top:100%;display:block;z-index:900;width:100%;margin-top:.75rem}.bpk-autosuggest__suggestions-container--open::before{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.8125rem;border:.8125rem solid rgba(0,0,0,0);border-bottom-color:#e0e4e9;pointer-events:none}.bpk-autosuggest__suggestions-container--open::after{position:absolute;bottom:100%;left:50%;content:" ";display:block;margin-bottom:-0.0625rem;margin-left:-0.75rem;border:.75rem solid rgba(0,0,0,0);border-bottom-color:#fff;pointer-events:none}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;list-style:none;overflow:hidden;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-inline-start:2rem}.bpk-autosuggest__suggestion-icon{display:flex;vertical-align:top;fill:#626971;margin-inline-end:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block;overflow-wrap:anywhere}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}

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-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-autosuggest__input{width:100%}.bpk-autosuggest__suggestions-container{margin-top:.75rem;border:.0625rem solid #e0e4e9;border-radius:.5rem;background-color:#fff}.bpk-autosuggest__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-autosuggest__arrow[data-hide]{visibility:hidden}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;border-radius:.5rem;background-color:#fff;list-style:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);overflow:hidden}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-left:2rem}.bpk-autosuggest__suggestion-icon{display:table-cell;margin-right:.5rem;vertical-align:top;fill:#626971}html[dir=rtl] .bpk-autosuggest__suggestion-icon{margin-right:0;margin-left:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__section-container:not(:first-of-type){border-top:1px solid #c1c7cf}.bpk-autosuggest__visuallyhidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}
+.bpk-autosuggest__input{width:100%}.bpk-autosuggest__suggestions-container{margin-top:.75rem;border:.0625rem solid #e0e4e9;border-radius:.5rem;background-color:#fff}.bpk-autosuggest__arrow{width:1.5rem;height:1.5rem;fill:#fff}.bpk-autosuggest__arrow[data-hide]{visibility:hidden}.bpk-autosuggest__suggestions-list{min-width:fit-content;margin:0;padding:0;border-radius:.5rem;background-color:#fff;list-style:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);overflow:hidden}.bpk-autosuggest__suggestion-item{cursor:pointer;margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-autosuggest__suggestion-item:not(:last-child){box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-autosuggest__suggestion-item:active{background-color:#eff3f8}.bpk-autosuggest__suggestion-item--highlighted{background-color:#eff3f8}.bpk-autosuggest__suggestion{display:table;width:100%;padding:1rem}.bpk-autosuggest__suggestion--indent{padding-inline-start:2rem}.bpk-autosuggest__suggestion-icon{display:table-cell;vertical-align:top;fill:#626971;margin-inline-end:.5rem}.bpk-autosuggest__suggestion-content{display:table-cell;width:100%;vertical-align:top}.bpk-autosuggest__suggestion-inner{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.bpk-autosuggest__suggestion-value{display:block}.bpk-autosuggest__suggestion-sub-heading{display:table-cell;width:100%;vertical-align:top;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__suggestion-tertiary-label{display:table-cell;align-self:center;color:#626971;vertical-align:top;word-break:keep-all;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-autosuggest__section-container:not(:first-of-type){border-top:1px solid #c1c7cf}.bpk-autosuggest__visuallyhidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0)}

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;