@skyscanner/backpack-web 17.1.0-beta.1 → 17.1.0

package/bpk-component-text/src/BpkText.module.scss

@@ -0,0 +1,139 @@
+/*
+ * 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 '~bpk-mixins/index.scss';
+
+.bpk-text {
+  @include bpk-text;
+
+  &--xs {
+    @include bpk-text--xs;
+  }
+
+  &--sm {
+    @include bpk-text--sm;
+  }
+
+  &--base {
+    @include bpk-text--base;
+  }
+
+  &--lg {
+    @include bpk-text--lg;
+  }
+
+  &--xl {
+    @include bpk-text--xl;
+  }
+
+  &--xxl {
+    @include bpk-text--xxl;
+  }
+
+  &--xxxl {
+    @include bpk-text--xxxl;
+  }
+
+  &--xxxxl {
+    @include bpk-text--xxxxl;
+  }
+
+  &--xxxxxl {
+    @include bpk-text--xxxxxl;
+  }
+
+  &--caption {
+    @include bpk-caption;
+  }
+
+  &--footnote {
+    @include bpk-footnote;
+  }
+
+  &--label-1 {
+    @include bpk-label-1;
+  }
+
+  &--label-2 {
+    @include bpk-label-2;
+  }
+
+  &--label-3 {
+    @include bpk-label-3;
+  }
+
+  &--body-default {
+    @include bpk-body-default;
+  }
+
+  &--body-longform {
+    @include bpk-body-longform;
+  }
+
+  &--subheading {
+    @include bpk-subheading;
+  }
+
+  &--heading-1 {
+    @include bpk-heading-1;
+  }
+
+  &--heading-2 {
+    @include bpk-heading-2;
+  }
+
+  &--heading-3 {
+    @include bpk-heading-3;
+  }
+
+  &--heading-4 {
+    @include bpk-heading-4;
+  }
+
+  &--heading-5 {
+    @include bpk-heading-5;
+  }
+
+  &--hero-1 {
+    @include bpk-hero-1;
+  }
+
+  &--hero-2 {
+    @include bpk-hero-2;
+  }
+
+  &--hero-3 {
+    @include bpk-hero-3;
+  }
+
+  &--hero-4 {
+    @include bpk-hero-4;
+  }
+
+  &--hero-5 {
+    @include bpk-hero-5;
+  }
+
+  &--bold {
+    @include bpk-text--bold;
+  }
+
+  &--black {
+    @include bpk-text--black;
+  }
+}

package/bpk-component-textarea/README.md

@@ -0,0 +1,32 @@
+# bpk-component-textarea
+
+> Backpack textarea component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import React from 'react';
+import BpkTextarea from '@skyscanner/backpack-web/bpk-component-textarea';
+
+export default () => (
+  <BpkTextarea
+    id="textarea"
+    name="textarea"
+    value="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
+  />
+);
+```
+
+## Props
+
+| Property     | PropType             | Required  | Default Value    |
+| ------------ | -------------------- | --------- | ---------------- |
+| id           | string               | true      | -                |
+| name         | string               | true      | -                |
+| value        | string               | true      | -                |
+| valid        | bool                 | false     | null             |
+| large        | bool                 | false     | false            |

package/bpk-component-textarea/index.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-Object.defineProperty(exports, "themeAttributes", {
-  enumerable: true,
-  get: function () {
-    return _themeAttributes.default;
-  }
-});
-var _BpkTextarea = _interopRequireDefault(require("./src/BpkTextarea"));
-var _themeAttributes = _interopRequireDefault(require("./src/themeAttributes"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -30,5 +15,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _BpkTextarea.default;
-exports.default = _default;
+
+/* @flow strict */
+
+import BpkTextarea from './src/BpkTextarea';
+import themeAttributes from './src/themeAttributes';
+
+export default BpkTextarea;
+export { themeAttributes };

package/bpk-component-textarea/src/BpkTextarea.js

@@ -1,51 +1,76 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkTextareaModule = _interopRequireDefault(require("./BpkTextarea.module.css"));
-const _excluded = ["className", "large", "valid"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkTextareaModule.default);
-const BpkTextarea = props => {
-  const {
-      className,
-      large,
-      valid
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+/*
+ * 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.
+ */
+
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkTextarea.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+type Props = {
+  id: string,
+  name: string,
+  value: string,
+  className: ?string,
+  valid: ?boolean,
+  large: ?boolean,
+};
+
+const BpkTextarea = (props: Props) => {
+  const { className, large, valid, ...rest } = props;
 
   // Explicit check for false primitive value as undefined is
   // treated as neither valid nor invalid
   const isInvalid = valid === false;
+
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    _react.default.createElement("textarea", _extends({
-      className: getClassName('bpk-textarea', isInvalid && 'bpk-textarea--invalid', large && 'bpk-textarea--large', className),
-      "aria-invalid": isInvalid
-    }, rest))
+    <textarea
+      className={getClassName(
+        'bpk-textarea',
+        isInvalid && 'bpk-textarea--invalid',
+        large && 'bpk-textarea--large',
+        className,
+      )}
+      aria-invalid={isInvalid}
+      {...rest}
+    />
   );
 };
+
 BpkTextarea.propTypes = {
-  id: _propTypes.default.string.isRequired,
-  name: _propTypes.default.string.isRequired,
-  value: _propTypes.default.string.isRequired,
-  className: _propTypes.default.string,
-  valid: _propTypes.default.bool,
-  large: _propTypes.default.bool
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  valid: PropTypes.bool,
+  large: PropTypes.bool,
 };
+
 BpkTextarea.defaultProps = {
   className: null,
   valid: null,
-  large: false
+  large: false,
 };
-var _default = BpkTextarea;
-exports.default = _default;
+
+export default BpkTextarea;

package/bpk-component-textarea/src/BpkTextarea.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-textarea{display:inline-block;width:100%;max-width:100%;min-height:5.5rem;padding:.5rem .5rem;border:solid 0.0625rem #C2C9CD;border-radius:.25rem;background:#fff;color:#161616;appearance:none}.bpk-textarea::placeholder{color:rgba(0,0,0,0.2)}.bpk-textarea:disabled{border-color:#eff1f2;background:#fff;color:rgba(0,0,0,0.2);cursor:not-allowed}.bpk-textarea::-ms-clear{display:none}.bpk-textarea--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZTcwODY2ICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right 0.5rem center;border-color:#e70866;border-color:var(--bpk-textarea-invalid-border-color, #e70866)}html[dir='rtl'] .bpk-textarea--invalid{padding-right:.5rem;padding-left:2rem;background-position:left 0.5rem center}html[dir='rtl'] .bpk-textarea--invalid.bpk-textarea--large{padding-right:1rem;padding-left:2.5rem;background-position:right 1rem center}.bpk-textarea--large{min-height:6rem;padding-right:1rem;padding-left:1rem}.bpk-textarea--large.bpk-textarea--invalid{padding-right:2.5rem;background-position:right 1rem center}html[dir='rtl'] .bpk-textarea--large.bpk-textarea--invalid{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-textarea{display:inline-block;width:100%;max-width:100%;min-height:5.5rem;padding:.5rem .5rem;border:solid 0.0625rem #B2B2BF;border-radius:.25rem;background:#fff;color:#111236;appearance:none}.bpk-textarea::placeholder{color:#68697f}.bpk-textarea:disabled{border-color:#f1f2f8;background:#fff;color:#b2b2bf;cursor:not-allowed}.bpk-textarea::-ms-clear{display:none}.bpk-textarea--invalid{padding-right:2rem;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4Ij48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjZDE0MzViICFpbXBvcnRhbnQgfTwvc3R5bGU+PHBhdGggZD0iTTEyIDEuNUExMC41IDEwLjUgMCAxIDAgMjIuNSAxMiAxMC41IDEwLjUgMCAwIDAgMTIgMS41ek0xMiAxOGExLjUgMS41IDAgMSAxIDEuNS0xLjVBMS41IDEuNSAwIDAgMSAxMiAxOHptMS41LTZhMS41IDEuNSAwIDAgMS0zIDBWNy41YTEuNSAxLjUgMCAwIDEgMyAweiIvPjwvc3ZnPg==") no-repeat right 0.5rem center;border-color:#d1435b;border-color:var(--bpk-textarea-invalid-border-color, #d1435b)}html[dir='rtl'] .bpk-textarea--invalid{padding-right:.5rem;padding-left:2rem;background-position:left 0.5rem center}html[dir='rtl'] .bpk-textarea--invalid.bpk-textarea--large{padding-right:1rem;padding-left:2.5rem;background-position:right 1rem center}.bpk-textarea--large{min-height:6rem;padding-right:1rem;padding-left:1rem}.bpk-textarea--large.bpk-textarea--invalid{padding-right:2.5rem;background-position:right 1rem center}html[dir='rtl'] .bpk-textarea--large.bpk-textarea--invalid{padding-right:1rem;padding-left:2.5rem;background-position:left 1rem center}

package/bpk-component-textarea/src/BpkTextarea.module.scss

@@ -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 '~bpk-mixins/index.scss';
+
+$bpk-spacing-v2: true;
+
+.bpk-textarea {
+  @include bpk-textarea;
+
+  &--invalid {
+    @include bpk-textarea--invalid;
+  }
+
+  &--large {
+    @include bpk-textarea--large;
+  }
+}

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

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -21,5 +15,7 @@ exports.default = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = ['textareaInvalidBorderColor'];
-exports.default = _default;
+
+/* @flow strict */
+
+export default ['textareaInvalidBorderColor'];

package/bpk-component-theme-toggle/README.md

@@ -0,0 +1,28 @@
+# bpk-component-theme-toggle
+
+> Backpack Theme Switcher component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import React from 'react';
+import BpkThemeToggle from '@skyscanner/backpack-web/bpk-component-theme-toggle';
+
+export default () => (
+  <BpkThemeToggle />
+);
+```
+
+## HOC usage
+
+```js
+import React from 'react';
+import { updateOnThemeChange } from '@skyscanner/backpack-web/bpk-component-theme-toggle';
+import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
+
+const EnhancedThemeProvider = updateOnThemeChange(BpkThemeProvider);
+```

package/bpk-component-theme-toggle/index.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-Object.defineProperty(exports, "updateOnThemeChange", {
-  enumerable: true,
-  get: function () {
-    return _updateOnThemeChange.default;
-  }
-});
-var _BpkThemeToggle = _interopRequireDefault(require("./src/BpkThemeToggle"));
-var _updateOnThemeChange = _interopRequireDefault(require("./src/updateOnThemeChange"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -30,5 +15,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _BpkThemeToggle.default;
-exports.default = _default;
+
+import BpkThemeToggle from './src/BpkThemeToggle';
+import updateOnThemeChange from './src/updateOnThemeChange';
+
+export default BpkThemeToggle;
+export { updateOnThemeChange };

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -1,94 +1,113 @@
-"use strict";
+/*
+ * 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 React from 'react';
+
+import BpkLabel from '../../bpk-component-label';
+import BpkSelect from '../../bpk-component-select';
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkThemeToggle.module.scss';
+import bpkCustomThemes from './theming';
+import { getHtmlElement, THEME_CHANGE_EVENT } from './utils';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _bpkComponentLabel = _interopRequireDefault(require("../../bpk-component-label"));
-var _bpkComponentSelect = _interopRequireDefault(require("../../bpk-component-select"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkThemeToggleModule = _interopRequireDefault(require("./BpkThemeToggle.module.css"));
-var _theming = _interopRequireDefault(require("./theming"));
-var _utils = require("./utils");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 const inputId = 'theme-select';
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkThemeToggleModule.default);
-const availableThemes = Object.keys(_theming.default);
-const setTheme = theme => {
-  const htmlElement = (0, _utils.getHtmlElement)();
-  htmlElement.dispatchEvent(new CustomEvent(_utils.THEME_CHANGE_EVENT, {
-    detail: {
-      theme
-    }
-  }));
+const getClassName = cssModules(STYLES);
+const availableThemes = Object.keys(bpkCustomThemes);
+
+const setTheme = (theme) => {
+  const htmlElement = getHtmlElement();
+  htmlElement.dispatchEvent(
+    new CustomEvent(THEME_CHANGE_EVENT, { detail: { theme } }),
+  );
 };
-class BpkThemeToggle extends _react.default.Component {
+
+class BpkThemeToggle extends React.Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "handleKeyDown", e => {
-      if (e.ctrlKey && e.metaKey && e.key.toLowerCase() === 't') {
-        this.cycleTheme();
-      }
-    });
-    _defineProperty(this, "handleChange", e => {
-      const selectedTheme = e.target.value;
-      this.setState({
-        selectedTheme
-      });
-      setTheme(_theming.default[selectedTheme]);
-    });
-    _defineProperty(this, "cycleTheme", () => {
-      let {
-        selectedTheme
-      } = this.state;
-      const selectedIndex = selectedTheme ? availableThemes.indexOf(selectedTheme) + 1 : 0;
-      if (selectedIndex >= availableThemes.length) {
-        selectedTheme = '';
-      } else {
-        selectedTheme = availableThemes[selectedIndex];
-      }
-      this.setState({
-        selectedTheme
-      });
-      setTheme(_theming.default[selectedTheme]);
-    });
     this.state = {
-      selectedTheme: ''
+      selectedTheme: '',
     };
   }
+
   componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown);
   }
+
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleKeyDown);
   }
+
+  handleKeyDown = (e) => {
+    if (e.ctrlKey && e.metaKey && e.key.toLowerCase() === 't') {
+      this.cycleTheme();
+    }
+  };
+
+  handleChange = (e) => {
+    const selectedTheme = e.target.value;
+    this.setState({ selectedTheme });
+    setTheme(bpkCustomThemes[selectedTheme]);
+  };
+
+  cycleTheme = () => {
+    let { selectedTheme } = this.state;
+    const selectedIndex = selectedTheme
+      ? availableThemes.indexOf(selectedTheme) + 1
+      : 0;
+    if (selectedIndex >= availableThemes.length) {
+      selectedTheme = '';
+    } else {
+      selectedTheme = availableThemes[selectedIndex];
+    }
+    this.setState({ selectedTheme });
+    setTheme(bpkCustomThemes[selectedTheme]);
+  };
+
   render() {
-    const _this$props = this.props,
-      rest = _extends({}, (_objectDestructuringEmpty(_this$props), _this$props));
-    return /*#__PURE__*/_react.default.createElement("div", rest, /*#__PURE__*/_react.default.createElement(_bpkComponentLabel.default, {
-      className: getClassName('bpk-theme-toggle__label'),
-      htmlFor: inputId
-    }, "Change theme"), /*#__PURE__*/_react.default.createElement(_bpkComponentSelect.default, {
-      id: inputId,
-      name: inputId,
-      value: this.state.selectedTheme,
-      onChange: this.handleChange
-    }, /*#__PURE__*/_react.default.createElement("option", {
-      value: "",
-      hidden: true
-    }, "Change theme"), /*#__PURE__*/_react.default.createElement("option", {
-      value: "skyscanner"
-    }, "None"), availableThemes.map(themeName => /*#__PURE__*/_react.default.createElement("option", {
-      key: themeName,
-      value: themeName
-    }, themeName))));
+    const { ...rest } = this.props;
+    return (
+      <div {...rest}>
+        <BpkLabel
+          className={getClassName('bpk-theme-toggle__label')}
+          htmlFor={inputId}
+        >
+          Change theme
+        </BpkLabel>
+        <BpkSelect
+          id={inputId}
+          name={inputId}
+          value={this.state.selectedTheme}
+          onChange={this.handleChange}
+        >
+          <option value="" hidden>
+            Change theme
+          </option>
+          <option value="skyscanner">None</option>
+          {availableThemes.map((themeName) => (
+            <option key={themeName} value={themeName}>
+              {themeName}
+            </option>
+          ))}
+        </BpkSelect>
+      </div>
+    );
   }
 }
-var _default = BpkThemeToggle;
-exports.default = _default;
+
+export default BpkThemeToggle;

package/bpk-component-theme-toggle/src/BpkThemeToggle.module.scss

@@ -0,0 +1,25 @@
+/*
+ * 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 '~bpk-mixins/index.scss';
+
+.bpk-theme-toggle {
+  &__label {
+    @include bpk-visually-hidden;
+  }
+}