@skyscanner/backpack-web 25.7.0-beta → 25.7.0-beta.2

package/bpk-component-section-list/src/BpkSectionListSection.js

@@ -14,52 +14,41 @@
  * 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.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import type { Node } from 'react';
+ */import PropTypes from 'prop-types';
 import { Children } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
-
-import STYLES from './BpkSectionListSection.module.scss';
-
+import { cssModules } from "../../bpk-react-utils";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import STYLES from "./BpkSectionListSection.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-type Props = {
-  children: Node,
-  headerText: ?string,
+const BpkSectionListSection = props => {
+  const {
+    children,
+    headerText,
+    ...rest
+  } = props;
+  return /*#__PURE__*/_jsxs("section", {
+    ...rest,
+    children: [headerText && /*#__PURE__*/_jsx("header", {
+      className: getClassName('bpk-section-list-section__header'),
+      children: /*#__PURE__*/_jsx(BpkText, {
+        textStyle: TEXT_STYLES.label1,
+        children: headerText
+      })
+    }), /*#__PURE__*/_jsx("ul", {
+      className: getClassName('bpk-section-list-section'),
+      children: Children.map(children, child => /*#__PURE__*/_jsx("li", {
+        children: child
+      }))
+    })]
+  });
 };
-
-const BpkSectionListSection = (props: Props) => {
-  const { children, headerText, ...rest } = props;
-
-  return (
-    <section {...rest}>
-      {headerText && (
-        <header className={getClassName('bpk-section-list-section__header')}>
-          <BpkText textStyle={TEXT_STYLES.label1}>{headerText}</BpkText>
-        </header>
-      )}
-      <ul className={getClassName('bpk-section-list-section')}>
-        {Children.map(children, (child) => (
-          <li>{child}</li>
-        ))}
-      </ul>
-    </section>
-  );
-};
-
 BpkSectionListSection.propTypes = {
   children: PropTypes.node.isRequired,
-  headerText: PropTypes.string,
+  headerText: PropTypes.string
 };
-
 BpkSectionListSection.defaultProps = {
-  headerText: null,
+  headerText: null
 };
-
-export default BpkSectionListSection;
+export default BpkSectionListSection;

package/bpk-component-select/index.js

@@ -14,13 +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.
- */
-/* @flow strict */
-
-import BpkSelect, { type Props } from './src/BpkSelect';
-import themeAttributes from './src/themeAttributes';
-
-export type BpkSelectProps = Props;
-
+ */import BpkSelect from "./src/BpkSelect";
+import themeAttributes from "./src/themeAttributes";
 export default BpkSelect;
-export { themeAttributes };
+export { themeAttributes };

package/bpk-component-select/src/BpkSelect.js

@@ -14,36 +14,14 @@
  * 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.
- */
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import type { Element } from 'react';
+ */import PropTypes from 'prop-types';
 import { cloneElement } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkSelect.module.scss';
-
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkSelect.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-export type Props = {
-  id: string,
-  name: string,
-  value: string,
-  className: ?string,
-  disabled: boolean,
-  docked: boolean,
-  dockedFirst: boolean,
-  dockedLast: boolean,
-  dockedMiddle: boolean,
-  image: ?Element<any>,
-  large: boolean,
-  valid: ?boolean,
-  wrapperClassName: ?string,
-};
-
-const BpkSelect = (props: Props) => {
+const BpkSelect = props => {
   const {
     className,
     disabled,
@@ -61,47 +39,26 @@ const BpkSelect = (props: Props) => {
   // Explicit check for false primitive value as undefined is
   // treated as neither valid nor invalid
   const isInvalid = valid === false;
-
-  const select = (
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <select
-      className={getClassName(
-        'bpk-select',
-        large && 'bpk-select--large',
-        docked && 'bpk-select--docked',
-        dockedFirst && 'bpk-select--docked-first',
-        dockedMiddle && 'bpk-select--docked-middle',
-        dockedLast && 'bpk-select--docked-last',
-        isInvalid && 'bpk-select--invalid',
-        image && 'bpk-select--with-image',
-        image && large && 'bpk-select--with-image-large',
-        className,
-      )}
-      disabled={disabled}
-      aria-invalid={isInvalid}
-      {...rest}
-    />
-  );
-
+  const select =
+  /*#__PURE__*/
+  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+  _jsx("select", {
+    className: getClassName('bpk-select', large && 'bpk-select--large', docked && 'bpk-select--docked', dockedFirst && 'bpk-select--docked-first', dockedMiddle && 'bpk-select--docked-middle', dockedLast && 'bpk-select--docked-last', isInvalid && 'bpk-select--invalid', image && 'bpk-select--with-image', image && large && 'bpk-select--with-image-large', className),
+    disabled: disabled,
+    "aria-invalid": isInvalid,
+    ...rest
+  });
   if (image) {
-    return (
-      <div className={getClassName('bpk-select-wrapper', wrapperClassName)}>
-        {cloneElement(image, {
-          'aria-hidden': true,
-          className: getClassName(
-            'bpk-select-wrapper__image',
-            large && 'bpk-select-wrapper__image--large',
-            disabled && 'bpk-select-wrapper__image--disabled',
-            image.props.className,
-          ),
-        })}
-        {select}
-      </div>
-    );
+    return /*#__PURE__*/_jsxs("div", {
+      className: getClassName('bpk-select-wrapper', wrapperClassName),
+      children: [/*#__PURE__*/cloneElement(image, {
+        'aria-hidden': true,
+        className: getClassName('bpk-select-wrapper__image', large && 'bpk-select-wrapper__image--large', disabled && 'bpk-select-wrapper__image--disabled', image.props.className)
+      }), select]
+    });
   }
   return select;
 };
-
 BpkSelect.propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
@@ -121,9 +78,8 @@ BpkSelect.propTypes = {
   image: PropTypes.node,
   large: PropTypes.bool,
   valid: PropTypes.bool,
-  wrapperClassName: PropTypes.string,
+  wrapperClassName: PropTypes.string
 };
-
 BpkSelect.defaultProps = {
   className: null,
   docked: false,
@@ -134,7 +90,6 @@ BpkSelect.defaultProps = {
   image: null,
   large: false,
   valid: null,
-  wrapperClassName: null,
+  wrapperClassName: null
 };
-
-export default BpkSelect;
+export default BpkSelect;

package/bpk-component-select/src/themeAttributes.js

@@ -16,4 +16,4 @@
  * limitations under the License.
  */
 
-export default ['selectInvalidBorderColor'];
+export default ['selectInvalidBorderColor'];

package/bpk-component-skip-link/index.js

@@ -14,12 +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.
- */
-/* @flow strict */
-
-import BpkSkipLink, { type Props as BpkSkipLinkProps } from './src/BpkSkipLink';
-import themeAttributes from './src/themeAttributes';
-
-export type { BpkSkipLinkProps };
+ */import BpkSkipLink from "./src/BpkSkipLink";
+import themeAttributes from "./src/themeAttributes";
 export { themeAttributes };
-export default BpkSkipLink;
+export default BpkSkipLink;

package/bpk-component-skip-link/src/BpkSkipLink.js

@@ -14,46 +14,35 @@
  * 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.
- */
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkSkipLink.module.scss';
-
+ */import PropTypes from 'prop-types';
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkSkipLink.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-export type Props = {
-  label: string,
-  href: string,
-  className: ?string,
-};
-
-const BpkSkipLink = (props: Props) => {
-  const { className, href, label, ...rest } = props;
-
+const BpkSkipLink = props => {
+  const {
+    className,
+    href,
+    label,
+    ...rest
+  } = props;
   return (
+    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <a
-      href={href}
-      className={getClassName('bpk-skip-link', className)}
-      {...rest}
-    >
-      {label}
-    </a>
+    _jsx("a", {
+      href: href,
+      className: getClassName('bpk-skip-link', className),
+      ...rest,
+      children: label
+    })
   );
 };
-
 BpkSkipLink.propTypes = {
   label: PropTypes.string.isRequired,
   href: PropTypes.string.isRequired,
-  className: PropTypes.string,
+  className: PropTypes.string
 };
-
 BpkSkipLink.defaultProps = {
-  className: null,
+  className: null
 };
-
-export default BpkSkipLink;
+export default BpkSkipLink;

package/bpk-component-skip-link/src/themeAttributes.js

@@ -16,4 +16,4 @@
  * limitations under the License.
  */
 
-export default ['skipLinkBackgroundColor'];
+export default ['skipLinkBackgroundColor'];

package/bpk-component-slider/index.js

@@ -16,8 +16,7 @@
  * limitations under the License.
  */
 
-import BpkSlider from './src/BpkSlider';
-import themeAttributes from './src/themeAttributes';
-
+import BpkSlider from "./src/BpkSlider";
+import themeAttributes from "./src/themeAttributes";
 export default BpkSlider;
-export { themeAttributes };
+export { themeAttributes };

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

@@ -18,48 +18,40 @@
 
 import Slider from 'react-slider';
 import PropTypes from 'prop-types';
-
-import { cssModules, isRTL } from '../../bpk-react-utils';
-
-import STYLES from './BpkSlider.module.scss';
-
+import { cssModules, isRTL } from "../../bpk-react-utils";
+import STYLES from "./BpkSlider.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-
-const BpkSlider = (props) => {
-  const { className, ...rest } = props;
+const BpkSlider = props => {
+  const {
+    className,
+    ...rest
+  } = props;
   const invert = isRTL();
   const classNames = [getClassName('bpk-slider')];
   const thumbClassNames = [getClassName('bpk-slider__handle')];
   const trackClassNames = [getClassName('bpk-slider__bar')];
-
   const isRange = (rest.value || rest.defaultValue || []).length > 1;
-
   if (isRange) {
     classNames.push(getClassName('bpk-slider--range'));
   }
   if (className) {
     classNames.push(getClassName(className));
   }
-
-  return (
-    <Slider
-      {...rest}
-      withTracks
-      invert={invert}
-      className={classNames.join(' ')}
-      thumbClassName={thumbClassNames.join(' ')}
-      thumbActiveClassName={getClassName('bpk-slider__handle--active')}
-      trackClassName={trackClassNames.join(' ')}
-    />
-  );
+  return /*#__PURE__*/_jsx(Slider, {
+    ...rest,
+    withTracks: true,
+    invert: invert,
+    className: classNames.join(' '),
+    thumbClassName: thumbClassNames.join(' '),
+    thumbActiveClassName: getClassName('bpk-slider__handle--active'),
+    trackClassName: trackClassNames.join(' ')
+  });
 };
-
 BpkSlider.propTypes = {
-  className: PropTypes.string,
+  className: PropTypes.string
 };
-
 BpkSlider.defaultProps = {
-  className: null,
+  className: null
 };
-
-export default BpkSlider;
+export default BpkSlider;

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

@@ -16,4 +16,4 @@
  * limitations under the License.
  */
 
-export default ['sliderBarColor'];
+export default ['sliderBarColor'];

package/bpk-component-spinner/index.js

@@ -14,20 +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.
- */
-
-/* @flow strict */
-
-import BpkSpinner from './src/BpkSpinner';
-import SPINNER_TYPES from './src/spinnerTypes';
-import BpkLargeSpinner from './src/BpkLargeSpinner';
-import BpkExtraLargeSpinner from './src/BpkExtraLargeSpinner';
-import themeAttributes from './src/themeAttributes';
-
-export {
-  BpkSpinner,
-  BpkLargeSpinner,
-  BpkExtraLargeSpinner,
-  SPINNER_TYPES,
-  themeAttributes,
-};
+ */import BpkSpinner from "./src/BpkSpinner";
+import SPINNER_TYPES from "./src/spinnerTypes";
+import BpkLargeSpinner from "./src/BpkLargeSpinner";
+import BpkExtraLargeSpinner from "./src/BpkExtraLargeSpinner";
+import themeAttributes from "./src/themeAttributes";
+export { BpkSpinner, BpkLargeSpinner, BpkExtraLargeSpinner, SPINNER_TYPES, themeAttributes };

package/bpk-component-spinner/src/BpkExtraLargeSpinner.js

@@ -1,3 +1,4 @@
+import React from "react";
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,46 +15,92 @@
  * 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.
- */
-
-/* @flow strict */
-
-import PropTypes from 'prop-types';
-import XlSpinner from '@skyscanner/bpk-svgs/dist/js/spinners/xl';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkSpinner.module.scss';
-import SPINNER_TYPES from './spinnerTypes';
-
-const getClassName = cssModules(STYLES);
-
-type Props = {
-  type: $Keys<typeof SPINNER_TYPES>,
-  className: ?string,
+ */import PropTypes from 'prop-types';
+var XlSpinner = function XlSpinner(props) {
+  return /*#__PURE__*/_jsxs("svg", {
+    ...props,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M16 9.092c-.67 0-1.22-.549-1.22-1.22V2.997c0-.67.55-1.219 1.22-1.219.671 0 1.22.549 1.22 1.22v4.876c0 .67-.549 1.219-1.22 1.219",
+      clipRule: "evenodd",
+      opacity: ".65"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M19.454 10.012a1.22 1.22 0 0 1-.446-1.664l2.44-4.22a1.225 1.225 0 0 1 1.667-.445 1.22 1.22 0 0 1 .447 1.664l-2.44 4.22c-.336.58-1.086.78-1.668.445",
+      clipRule: "evenodd",
+      opacity: ".75"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M21.982 12.546a1.223 1.223 0 0 1 .447-1.665l4.222-2.438a1.223 1.223 0 0 1 1.666.446c.335.58.134 1.33-.447 1.665l-4.222 2.438a1.223 1.223 0 0 1-1.666-.446",
+      clipRule: "evenodd",
+      opacity: ".85"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M22.908 16c0-.671.548-1.22 1.219-1.22h4.876c.67 0 1.22.549 1.22 1.22 0 .67-.55 1.218-1.22 1.218h-4.876c-.67 0-1.22-.548-1.22-1.219",
+      clipRule: "evenodd",
+      opacity: ".9"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M21.982 19.454a1.22 1.22 0 0 1 1.664-.447l4.22 2.44c.58.336.781 1.086.446 1.667a1.22 1.22 0 0 1-1.664.447l-4.22-2.44a1.225 1.225 0 0 1-.446-1.667",
+      clipRule: "evenodd",
+      opacity: ".2"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M19.454 21.982a1.223 1.223 0 0 1 1.665.446l2.438 4.223c.335.58.135 1.33-.446 1.665-.58.335-1.33.134-1.665-.446l-2.438-4.223a1.223 1.223 0 0 1 .446-1.665",
+      clipRule: "evenodd",
+      opacity: ".25"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M16 22.907c.67 0 1.219.549 1.219 1.22v4.876c0 .67-.549 1.218-1.219 1.218s-1.22-.548-1.22-1.218v-4.877c0-.67.55-1.219 1.22-1.219",
+      clipRule: "evenodd",
+      opacity: ".3"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M12.546 21.982c.58.335.781 1.083.446 1.664l-2.438 4.22c-.335.58-1.084.78-1.665.445a1.221 1.221 0 0 1-.446-1.664l2.438-4.22a1.223 1.223 0 0 1 1.665-.445",
+      clipRule: "evenodd",
+      opacity: ".35"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M10.018 19.453c.335.581.134 1.33-.447 1.666L5.35 23.556a1.224 1.224 0 0 1-1.666-.447 1.223 1.223 0 0 1 .447-1.665l4.222-2.438a1.223 1.223 0 0 1 1.666.446",
+      clipRule: "evenodd",
+      opacity: ".4"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M9.092 16c0 .67-.549 1.218-1.219 1.218H2.997c-.67 0-1.22-.548-1.22-1.219 0-.67.55-1.219 1.22-1.219h4.876c.67 0 1.22.549 1.22 1.22",
+      clipRule: "evenodd",
+      opacity: ".45"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M10.013 12.55a1.22 1.22 0 0 1-1.664.446l-4.22-2.44a1.225 1.225 0 0 1-.446-1.667 1.22 1.22 0 0 1 1.664-.446l4.22 2.44c.58.336.781 1.086.446 1.667",
+      clipRule: "evenodd",
+      opacity: ".5"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M12.546 10.017c-.58.335-1.33.135-1.665-.446L8.443 5.348a1.223 1.223 0 0 1 .446-1.665 1.223 1.223 0 0 1 1.665.446l2.438 4.223c.335.58.135 1.33-.446 1.665",
+      clipRule: "evenodd",
+      opacity: ".55"
+    })]
+  });
 };
-
-const BpkExtraLargeSpinner = (props: Props) => {
-  const { className, type, ...rest } = props;
-  const classNames = getClassName(
-    'bpk-spinner',
-    'bpk-spinner--extra-large',
-    `bpk-spinner--${type}`,
+XlSpinner.defaultProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "32",
+  height: "32"
+};
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkSpinner.module.css";
+import SPINNER_TYPES from "./spinnerTypes";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkExtraLargeSpinner = props => {
+  const {
     className,
-  );
+    type,
+    ...rest
+  } = props;
+  const classNames = getClassName('bpk-spinner', 'bpk-spinner--extra-large', `bpk-spinner--${type}`, className);
 
   // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-  return <XlSpinner className={classNames} {...rest} />;
+  return /*#__PURE__*/_jsx(XlSpinner, {
+    className: classNames,
+    ...rest
+  });
 };
-
 BpkExtraLargeSpinner.propTypes = {
   type: PropTypes.oneOf(Object.keys(SPINNER_TYPES)),
-  className: PropTypes.string,
+  className: PropTypes.string
 };
-
 BpkExtraLargeSpinner.defaultProps = {
   type: SPINNER_TYPES.dark,
-  className: null,
+  className: null
 };
-
-export default BpkExtraLargeSpinner;
+export default BpkExtraLargeSpinner;