@skyscanner/backpack-web 26.0.0-beta.1 → 27.0.0

package/bpk-component-icon/sm/weather--partly-cloudy.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/weather--rain.js

@@ -7,8 +7,6 @@ export default (({
 }) => /*#__PURE__*/_jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/weather--snow.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/weather--thunderstorm.js

@@ -7,8 +7,6 @@ export default (({
 }) => /*#__PURE__*/_jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/weather--tornado.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/weather--wind.js

@@ -7,8 +7,6 @@ export default (({
 }) => /*#__PURE__*/_jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/weather.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/wifi.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/window--reduce.js

@@ -7,8 +7,6 @@ export default (({
 }) => /*#__PURE__*/_jsxs("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/window.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/world--amer.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/world--apac.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-icon/sm/world--emea.js

@@ -6,8 +6,6 @@ export default (({
 }) => /*#__PURE__*/_jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
-  width: "16",
-  height: "16",
   "aria-hidden": "true",
   style: {
     width: "1rem",

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-mobile-scroll-container{position:relative;overflow:hidden}.bpk-mobile-scroll-container--left-indicator::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(90deg, #fff, rgba(255,255,255,0));pointer-events:none;left:0}.bpk-mobile-scroll-container--right-indicator::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2.25rem;background-image:linear-gradient(270deg, #fff, rgba(255,255,255,0));pointer-events:none;right:0}.bpk-mobile-scroll-container__scroller{white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar){scrollbar-width:none}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar)::-webkit-scrollbar{display:none}.bpk-mobile-scroll-container__inner{width:100%}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-mobile-scroll-container{position:relative;overflow:hidden}.bpk-mobile-scroll-container--left-indicator::before{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(90deg, #fff, rgba(255,255,255,0));pointer-events:none;left:0}.bpk-mobile-scroll-container--right-indicator::after{position:absolute;top:0;bottom:0;content:' ';display:block;z-index:1;width:2rem;background-image:linear-gradient(270deg, #fff, rgba(255,255,255,0));pointer-events:none;right:0}.bpk-mobile-scroll-container__scroller{white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar){scrollbar-width:none}.bpk-mobile-scroll-container__scroller:not(.bpk-mobile-scroll-container__showScrollbar)::-webkit-scrollbar{display:none}.bpk-mobile-scroll-container__inner{width:100%}

package/bpk-component-skip-link/src/BpkSkipLink.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-skip-link{display:inline-block;padding:.75rem;transition:opacity 200ms ease-in-out;border-radius:.5rem;color:#fff;text-decoration:none;opacity:0;overflow:hidden;pointer-events:none;transition-delay:200ms;font-size:1rem;line-height:1.25rem;font-weight:700;background-color:#e70866;background-color:var(--bpk-skip-link-background-color, #e70866)}.bpk-skip-link:focus-within,.bpk-skip-link:focus{transition:none;opacity:1;transition-delay:0}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-skip-link{padding:.75rem 1rem;transition:opacity 200ms ease-in-out;border-radius:.5rem;color:#fff;text-decoration:none;opacity:0;overflow:hidden;pointer-events:none;transition-delay:200ms;font-size:1rem;line-height:1.25rem;font-weight:700;background-color:#e70866;background-color:var(--bpk-skip-link-background-color, #e70866)}.bpk-skip-link:focus-within,.bpk-skip-link:focus{transition:none;opacity:1;transition-delay:0}

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

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import Slider from 'react-slider';
 import PropTypes from 'prop-types';
 import { cssModules, isRTL } from "../../bpk-react-utils";
@@ -41,6 +42,7 @@ const BpkSlider = props => {
   return /*#__PURE__*/_jsx(Slider, {
     ...rest,
     withTracks: true,
+    snapDragDisabled: false,
     invert: invert,
     className: classNames.join(' '),
     thumbClassName: thumbClassNames.join(' '),

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

@@ -72,8 +72,7 @@ var XlSpinner = function XlSpinner(props) {
 };
 XlSpinner.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "32",
-  height: "32"
+  viewBox: "0 0 32 32"
 };
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSpinner.module.css";

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

@@ -72,8 +72,7 @@ var LgSpinner = function LgSpinner(props) {
 };
 LgSpinner.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "24",
-  height: "24"
+  viewBox: "0 0 24 24"
 };
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSpinner.module.css";

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

@@ -19,105 +19,47 @@ import React from "react";
 var SmSpinner = function SmSpinner(props) {
   return /*#__PURE__*/_jsxs("svg", {
     ...props,
-    children: [/*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      y: "7",
-      opacity: ".45",
-      rx: "1"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "12",
-      y: "7",
-      rx: "1"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "7",
-      y: "16",
-      opacity: ".3",
-      rx: "1",
-      transform: "rotate(-90 7 16)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "7",
-      y: "4",
-      opacity: ".65",
-      rx: "1",
-      transform: "rotate(-90 7 4)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "11.134",
-      y: "15.428",
-      opacity: ".25",
-      rx: "1",
-      transform: "rotate(-120 11.134 15.428)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "5.134",
-      y: "5.036",
-      opacity: ".55",
-      rx: "1",
-      transform: "rotate(-120 5.134 5.036)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "14.428",
-      y: "12.866",
-      opacity: ".2",
-      rx: "1",
-      transform: "rotate(-150 14.428 12.866)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "4.036",
-      y: "6.866",
-      opacity: ".5",
-      rx: "1",
-      transform: "rotate(-150 4.036 6.866)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "15.428",
-      y: "4.866",
-      opacity: ".85",
-      rx: "1",
-      transform: "rotate(150 15.428 4.866)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "5.036",
-      y: "10.866",
-      opacity: ".4",
-      rx: "1",
-      transform: "rotate(150 5.036 10.866)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "12.866",
-      y: "1.572",
-      opacity: ".75",
-      rx: "1",
-      transform: "rotate(120 12.866 1.572)"
-    }), /*#__PURE__*/_jsx("rect", {
-      width: "4",
-      height: "2",
-      x: "6.866",
-      y: "11.964",
-      opacity: ".35",
-      rx: "1",
-      transform: "rotate(120 6.866 11.964)"
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M3 7H1a1 1 0 0 0 0 2h2a1 1 0 0 0 0-2Z",
+      opacity: ".45"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M15 7h-2a1 1 0 1 0 0 2h2a1 1 0 1 0 0-2Z"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M7 13v2a1 1 0 1 0 2 0v-2a1 1 0 1 0-2 0Z",
+      opacity: ".3"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M7 1v2a1 1 0 0 0 2 0V1a1 1 0 0 0-2 0Z",
+      opacity: ".65"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m9.634 12.83 1 1.732a1 1 0 1 0 1.732-1l-1-1.732a1 1 0 0 0-1.732 1Z",
+      opacity: ".25"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m3.634 2.438 1 1.732a1 1 0 1 0 1.732-1l-1-1.732a1 1 0 1 0-1.732 1Z",
+      opacity: ".55"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m11.83 11.366 1.732 1a1 1 0 1 0 1-1.732l-1.732-1a1 1 0 1 0-1 1.732Z",
+      opacity: ".2"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m1.438 5.366 1.732 1a1 1 0 1 0 1-1.732l-1.732-1a1 1 0 1 0-1 1.732Z",
+      opacity: ".5"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m12.83 6.366 1.732-1a1 1 0 0 0-1-1.732l-1.732 1a1 1 0 0 0 1 1.732Z",
+      opacity: ".85"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m2.438 12.366 1.732-1a1 1 0 1 0-1-1.732l-1.732 1a1 1 0 1 0 1 1.732Z",
+      opacity: ".4"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m11.366 4.17 1-1.732a1 1 0 0 0-1.732-1l-1 1.732a1 1 0 0 0 1.732 1Z",
+      opacity: ".75"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "m5.366 14.562 1-1.732a1 1 0 1 0-1.732-1l-1 1.732a1 1 0 0 0 1.732 1Z",
+      opacity: ".35"
     })]
   });
 };
 SmSpinner.defaultProps = {
   xmlns: "http://www.w3.org/2000/svg",
-  width: "16",
-  height: "16"
+  viewBox: "0 0 16 16"
 };
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSpinner.module.css";

package/bpk-mixins/src/mixins/_badges.scss

@@ -19,8 +19,6 @@
 @import '../bonds.scss';
 @import 'typography.scss';
 
-$bpk-spacing-v2: true;
-
 ////
 /// @group badges
 ////

package/bpk-mixins/src/mixins/_buttons.scss

@@ -30,8 +30,6 @@
 ///     @include bpk-button();
 ///   }
 
-$bpk-spacing-v2: true;
-
 @mixin bpk-button {
   display: inline-block;
   min-height: $bpk-button-height;

package/bpk-mixins/src/mixins/_chips.scss

@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-$bpk-spacing-v2: true;
-
 @mixin bpk-chip {
   display: inline-flex;
   height: bpk-spacing-xl();

package/bpk-mixins/src/mixins/_forms.scss

@@ -18,8 +18,6 @@
 
 @import '../bonds.scss';
 
-$bpk-spacing-v2: true;
-
 ////
 /// @group forms
 ////
@@ -897,7 +895,7 @@ $bpk-spacing-v2: true;
 
 @mixin bpk-form-validation {
   position: relative;
-  transform: translateY(-#{$bpk-spacing-sm});
+  transform: translateY(-#{bpk-spacing-base()});
   transition:
     opacity $bpk-duration-sm ease-in-out,
     transform $bpk-duration-sm ease-in-out;

package/bpk-mixins/src/mixins/_margins.scss

@@ -25,7 +25,7 @@
 ///
 /// @example scss
 ///   .selector {
-///     @include bpk-margin-leading($bpk-spacing-sm);
+///     @include bpk-margin-leading(bpk-spacing-base());
 ///   }
 @mixin bpk-margin-leading($margin, $resetOppositeMargin: true) {
   margin-left: $margin;
@@ -52,7 +52,7 @@
 ///
 /// @example scss
 ///   .selector {
-///     @include bpk-margin-trailing($bpk-spacing-sm);
+///     @include bpk-margin-trailing(bpk-spacing-base());
 ///   }
 @mixin bpk-margin-trailing($margin, $resetOppositeMargin: true) {
   @if $resetOppositeMargin {

package/bpk-mixins/src/mixins/_scroll-indicators.scss

@@ -35,7 +35,7 @@
   content: ' ';
   display: block;
   z-index: 1;
-  width: $bpk-spacing-xl;
+  width: bpk-spacing-xl();
   background-image: linear-gradient(
     $gradient-direction,
     rgba($gradient-color, 1),

package/bpk-mixins/src/mixins/_typography.scss

@@ -19,8 +19,6 @@
 @import '../bonds.scss';
 @import './borders.scss';
 
-$bpk-spacing-v2: true;
-
 ////
 /// @group typography
 ////
@@ -673,7 +671,7 @@ $bpk-spacing-v2: true;
 @mixin bpk-list {
   margin-top: bpk-spacing-base();
   margin-bottom: bpk-spacing-base();
-  padding-left: $bpk-spacing-base;
+  padding-left: bpk-spacing-lg();
 }
 
 /// Nested list. Modifies the bpk-list mixin.
@@ -910,7 +908,7 @@ $bpk-spacing-v2: true;
 
 @mixin bpk-code {
   display: inline;
-  padding: 0 $bpk-spacing-xs;
+  padding: 0 bpk-spacing-sm();
   background-color: $bpk-surface-highlight-day;
   color: $bpk-text-primary-day;
   text-align: left;
@@ -969,8 +967,8 @@ $bpk-spacing-v2: true;
 ///   }
 
 @mixin bpk-code__pre {
-  margin: 0 0 $bpk-spacing-sm;
-  padding: $bpk-spacing-base;
+  margin: 0 0 bpk-spacing-base();
+  padding: bpk-spacing-lg();
   background-color: $bpk-surface-highlight-day;
 
   @include bpk-border-radius-xs;

package/bpk-mixins/src/mixins/_utils.scss

@@ -239,11 +239,11 @@
   &::before {
     position: absolute;
     /* stylelint-disable-next-line function-calc-no-invalid */
-    top: calc((-#{$bpk-spacing-xxl} / 2) + 50%);
+    top: calc((-#{bpk-spacing-xxl() + bpk-spacing-sm()} / 2) + 50%);
     /* stylelint-disable-next-line function-calc-no-invalid */
-    left: calc((-#{$bpk-spacing-xxl} / 2) + 50%);
+    left: calc((-#{bpk-spacing-xxl() + bpk-spacing-sm()} / 2) + 50%);
     content: '';
-    width: $bpk-spacing-xxl;
-    height: $bpk-spacing-xxl;
+    width: bpk-spacing-xxl() + bpk-spacing-sm();
+    height: bpk-spacing-xxl() + bpk-spacing-sm();
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "26.0.0-beta.1",
+  "version": "27.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,8 +24,8 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^16.1.0",
-    "@skyscanner/bpk-svgs": "^17.0.0",
+    "@skyscanner/bpk-foundations-web": "^17.0.0",
+    "@skyscanner/bpk-svgs": "^18.0.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^2.0.0",

package/bpk-component-flare/src/corner-radius.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare const _default: ({ styles, ...props }: {
-    [x: string]: any;
-    styles?: {} | undefined;
-}) => JSX.Element;
-export default _default;

package/bpk-component-flare/src/pointer.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-declare const _default: ({ styles, ...props }: {
-    [x: string]: any;
-    styles?: {} | undefined;
-}) => JSX.Element;
-export default _default;