@skyscanner/backpack-web 6.0.0-alpha.0 → 6.0.0-alpha.1

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js

@@ -1,103 +1,126 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.themeAttributes = exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _BpkHorizontalNav = require("./BpkHorizontalNav");
-
-var _BpkHorizontalNavItemModule = _interopRequireDefault(require("./BpkHorizontalNavItem.css"));
-
-const _excluded = ["children", "className", "disabled", "href", "selected", "spaceAround", "type"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkHorizontalNavItemModule.default);
+/*
+ * 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 React, { Component, type Node } from 'react';
+import PropTypes from 'prop-types';
+import { cssModules } from '../../bpk-react-utils';
+
+import { HORIZONTAL_NAV_TYPES } from './BpkHorizontalNav';
+import STYLES from './BpkHorizontalNavItem.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+export type Props = {
+  children: Node,
+  disabled: boolean,
+  selected: boolean,
+  spaceAround: boolean,
+  type: $Keys<typeof HORIZONTAL_NAV_TYPES>,
+  className: ?string,
+  href: ?string,
+};
 
 // In order to be able to access refs on the HorizontalNavItems, they need to be a fully defined
 // React Component class.
 // eslint-disable-next-line react/prefer-stateless-function
-class BpkHorizontalNavItem extends _react.Component {
+class BpkHorizontalNavItem extends Component<Props> {
+  static propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    href: PropTypes.string,
+    selected: PropTypes.bool,
+    spaceAround: PropTypes.bool,
+    type: PropTypes.oneOf(Object.keys(HORIZONTAL_NAV_TYPES)),
+  };
+
+  static defaultProps = {
+    className: null,
+    disabled: false,
+    href: null,
+    selected: false,
+    spaceAround: false,
+    type: HORIZONTAL_NAV_TYPES.default,
+  };
+
   render() {
-    const _this$props = this.props,
-          {
+    const {
       children,
       className,
       disabled,
       href,
       selected,
       spaceAround,
-      type
-    } = _this$props,
-          rest = _objectWithoutProperties(_this$props, _excluded);
-
-    const classNames = getClassName('bpk-horizontal-nav__item', spaceAround && 'bpk-horizontal-nav__item--space-around');
-    const innerClassNames = getClassName('bpk-horizontal-nav__link', `bpk-horizontal-nav__link--${type}`, selected && `bpk-horizontal-nav__link--${type}-selected`, disabled && `bpk-horizontal-nav__link--${type}-disabled`, className);
-    const clickableElement = href ?
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement("a", _extends({
-      href: href,
-      className: innerClassNames,
-      "aria-disabled": disabled,
-      role: "tab",
-      "aria-selected": selected ? 'true' : 'false'
-    }, rest), children) :
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement("button", _extends({
-      type: "button",
-      className: innerClassNames,
-      disabled: disabled,
-      role: "tab",
-      "aria-selected": selected ? 'true' : 'false'
-    }, rest), children);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classNames
-    }, clickableElement);
+      type,
+      ...rest
+    } = this.props;
+
+    const classNames = getClassName(
+      'bpk-horizontal-nav__item',
+      spaceAround && 'bpk-horizontal-nav__item--space-around',
+    );
+    const innerClassNames = getClassName(
+      'bpk-horizontal-nav__link',
+      `bpk-horizontal-nav__link--${type}`,
+      selected && `bpk-horizontal-nav__link--${type}-selected`,
+      disabled && `bpk-horizontal-nav__link--${type}-disabled`,
+      className,
+    );
+
+    const clickableElement = href ? (
+      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+      <a
+        href={href}
+        className={innerClassNames}
+        aria-disabled={disabled}
+        role="tab"
+        aria-selected={selected ? 'true' : 'false'}
+        {...rest}
+      >
+        {children}
+      </a>
+    ) : (
+      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+      <button
+        type="button"
+        className={innerClassNames}
+        disabled={disabled}
+        role="tab"
+        aria-selected={selected ? 'true' : 'false'}
+        {...rest}
+      >
+        {children}
+      </button>
+    );
+
+    return <div className={classNames}>{clickableElement}</div>;
   }
-
 }
 
-_defineProperty(BpkHorizontalNavItem, "propTypes", {
-  children: _propTypes.default.node.isRequired,
-  className: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  href: _propTypes.default.string,
-  selected: _propTypes.default.bool,
-  spaceAround: _propTypes.default.bool,
-  type: _propTypes.default.oneOf(Object.keys(_BpkHorizontalNav.HORIZONTAL_NAV_TYPES))
-});
+const themeAttributes = [
+  'horizontalNavLinkColor',
+  'horizontalNavLinkHoverColor',
+  'horizontalNavLinkActiveColor',
+  'horizontalNavLinkSelectedColor',
+  'horizontalNavBarSelectedColor',
+];
 
-_defineProperty(BpkHorizontalNavItem, "defaultProps", {
-  className: null,
-  disabled: false,
-  href: null,
-  selected: false,
-  spaceAround: false,
-  type: _BpkHorizontalNav.HORIZONTAL_NAV_TYPES.default
-});
+export { themeAttributes };
 
-const themeAttributes = ['horizontalNavLinkColor', 'horizontalNavLinkHoverColor', 'horizontalNavLinkActiveColor', 'horizontalNavLinkSelectedColor', 'horizontalNavBarSelectedColor'];
-exports.themeAttributes = themeAttributes;
-var _default = BpkHorizontalNavItem;
-exports.default = _default;
+export default BpkHorizontalNavItem;

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss

@@ -0,0 +1,152 @@
+/*
+ * 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';
+
+$bpk-spacing-v2: true;
+
+.bpk-horizontal-nav {
+  &__item {
+    display: inline-block;
+    display: flex;
+
+    &--space-around {
+      margin-right: auto;
+      margin-left: auto;
+    }
+  }
+
+  &__link {
+    display: inline-block;
+    display: flex;
+    padding: (bpk-spacing-base() - (2 * $bpk-one-pixel-rem)) bpk-spacing-lg();
+    border: 0;
+    border-radius: 0;
+    background: none;
+    text-decoration: none;
+    cursor: pointer;
+    fill: currentColor;
+
+    &--default {
+      @include bpk-themeable-property(
+        color,
+        --bpk-horizontal-nav-link-color,
+        $bpk-horizontal-nav-link-color
+      );
+
+      @include bpk-hover {
+        @include bpk-border-bottom-xl($bpk-color-sky-gray-tint-06);
+        @include bpk-themeable-property(
+          color,
+          --bpk-horizontal-nav-link-hover-color,
+          $bpk-horizontal-nav-link-hover-color
+        );
+      }
+
+      &:active {
+        @include bpk-border-bottom-xl($bpk-color-sky-gray-tint-05);
+        @include bpk-themeable-property(
+          color,
+          --bpk-horizontal-nav-link-active-color,
+          $bpk-horizontal-nav-link-active-color
+        );
+      }
+
+      &-disabled {
+        color: $bpk-color-sky-gray-tint-06;
+        cursor: not-allowed;
+
+        &:active {
+          color: $bpk-color-sky-gray-tint-06;
+          box-shadow: unset;
+        }
+      }
+
+      &-selected {
+        @include bpk-border-bottom-xl($bpk-horizontal-nav-bar-selected-color);
+        @include bpk-border-bottom-xl(
+          var(
+            --bpk-horizontal-nav-bar-selected-color,
+            $bpk-horizontal-nav-bar-selected-color
+          )
+        );
+        @include bpk-themeable-property(
+          color,
+          --bpk-horizontal-nav-link-selected-color,
+          $bpk-horizontal-nav-link-selected-color
+        );
+
+        @include bpk-hover {
+          @include bpk-border-bottom-xl($bpk-horizontal-nav-bar-selected-color);
+          @include bpk-border-bottom-xl(
+            var(
+              --bpk-horizontal-nav-bar-selected-color,
+              $bpk-horizontal-nav-bar-selected-color
+            )
+          );
+        }
+
+        &:active {
+          @include bpk-border-bottom-xl($bpk-horizontal-nav-bar-selected-color);
+          @include bpk-border-bottom-xl(
+            var(
+              --bpk-horizontal-nav-bar-selected-color,
+              $bpk-horizontal-nav-bar-selected-color
+            )
+          );
+        }
+      }
+    }
+
+    &--light {
+      color: $bpk-color-white;
+
+      @include bpk-hover {
+        @include bpk-border-bottom-xl($bpk-color-white);
+      }
+
+      &:active {
+        @include bpk-border-bottom-xl($bpk-color-white);
+      }
+
+      &-disabled {
+        color: $bpk-color-sky-gray-tint-06;
+        cursor: not-allowed;
+
+        &:active {
+          color: $bpk-color-sky-gray-tint-06;
+          box-shadow: unset;
+        }
+      }
+
+      &-selected {
+        color: $bpk-color-white;
+
+        @include bpk-border-bottom-xl($bpk-color-white);
+
+        @include bpk-hover {
+          @include bpk-border-bottom-xl($bpk-color-white);
+        }
+
+        &:active {
+          @include bpk-border-bottom-xl($bpk-color-white);
+        }
+      }
+    }
+  }
+}

package/bpk-component-icon/README.md

@@ -0,0 +1,79 @@
+# bpk-component-icon
+
+> Backpack icon components.
+
+## Installation
+
+```sh
+npm install bpk-component-icon --save-dev
+```
+
+## Basic usage
+
+```js
+import React from 'react';
+import BpkSmallFlightIcon from 'bpk-component-icon/sm/flight';
+import BpkLargeAccessibilityIcon from 'bpk-component-icon/lg/accessibility';
+
+import './icons.scss';
+
+export default () => (
+  <div>
+    <BpkSmallFlightIcon className="abc-icon__flight" />
+    <BpkLargeAccessibilityIcon className="abc-icon__a11y" />
+  </div>
+);
+```
+
+*`icons.scss`:*
+```scss
+@import '~bpk-mixins';
+
+.abc-icon__flight {
+  fill: currentColor; // see https://css-tricks.com/currentcolor/
+}
+
+.abc-icon__a11y {
+  fill: $bpk-color-sky-blue;
+}
+```
+
+### Aligning to BpkButton components
+
+```js
+import React from 'react';
+import BpkButton from 'bpk-component-button';
+import BpkSmallFlightIcon from 'bpk-component-icon/sm/flight';
+import BpkLargeAccessibilityIcon from 'bpk-component-icon/lg/accessibility';
+import { withButtonAlignment, withLargeButtonAlignment } from 'bpk-component-icon';
+
+const AlignedBpkSmallFlightIcon = withButtonAlignment(BpkSmallFlightIcon);
+const AlignedBpkLargeAccessibilityIcon = withLargeButtonAlignment(BpkLargeAccessibilityIcon);
+
+export default () => (
+  <div>
+    <BpkButton>
+      <AlignedBpkSmallFlightIcon />
+    </BpkButton>
+    <BpkButton large>
+      <AlignedBpkLargeAccessibilityIcon />
+    </BpkButton>
+  </div>
+);
+```
+
+### RTL support
+
+```js
+import React from 'react';
+import BpkSmallFlightIcon from 'bpk-component-icon/sm/flight';
+import { withRtlSupport } from 'bpk-component-icon';
+
+import './icons.scss';
+
+const RtlSupportedBpkSmallFlightIcon = withRtlSupport(BpkSmallFlightIcon);
+
+export default () => (
+  <RtlSupportedBpkSmallFlightIcon className="abc-icon__flight" />
+);
+```

package/bpk-component-icon/all.js

@@ -1,5 +1,3 @@
-"use strict";
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -17,16 +15,19 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 function requireAll(requireContext) {
   const hash = {};
-  requireContext.keys().forEach(key => {
+
+  requireContext.keys().forEach((key) => {
     const moduleName = key.replace('./', '').replace('.js', '');
     hash[moduleName] = requireContext(key).default;
   });
+
   return hash;
 }
 
 module.exports = {
   sm: requireAll(require.context('./sm', false, /\.js$/)),
-  lg: requireAll(require.context('./lg', false, /\.js$/))
-};
+  lg: requireAll(require.context('./lg', false, /\.js$/)),
+};

package/bpk-component-icon/index.js

@@ -1,39 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.withButtonAlignment = exports.alignToButton = withButtonAlignment;
-exports.withLargeButtonAlignment = exports.alignToLargeButton = withLargeButtonAlignment;
-Object.defineProperty(exports, "withAlignment", {
-  enumerable: true,
-  get: function () {
-    return _withAlignment.default;
-  }
-});
-Object.defineProperty(exports, "withDescription", {
-  enumerable: true,
-  get: function () {
-    return _withDescription.default;
-  }
-});
-Object.defineProperty(exports, "withRtlSupport", {
-  enumerable: true,
-  get: function () {
-    return _withRtlSupport.default;
-  }
-});
-
-var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
-
-var _withAlignment = _interopRequireDefault(require("./src/withAlignment"));
-
-var _withRtlSupport = _interopRequireDefault(require("./src/withRtlSupport"));
-
-var _withDescription = _interopRequireDefault(require("./src/withDescription"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -51,12 +15,35 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+import {
+  iconSizeSm,
+  iconSizeLg,
+  buttonLineHeight,
+  buttonLargeLineHeight,
+} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+
+import withAlignment from './src/withAlignment';
+import withRtlSupport from './src/withRtlSupport';
+import withDescription from './src/withDescription';
+
 // Wrapper functions to provide backwards compatibility
 function withButtonAlignment(WrappedComponent) {
-  return (0, _withAlignment.default)(WrappedComponent, _base.buttonLineHeight, _base.iconSizeSm);
+  return withAlignment(WrappedComponent, buttonLineHeight, iconSizeSm);
 }
 
 function withLargeButtonAlignment(WrappedComponent) {
-  return (0, _withAlignment.default)(WrappedComponent, _base.buttonLargeLineHeight, _base.iconSizeLg);
-} // alias to maintain backwards compat, can be deprecated in due course
-// alias to maintain backwards compat, can be deprecated in due course
+  return withAlignment(WrappedComponent, buttonLargeLineHeight, iconSizeLg);
+}
+
+// alias to maintain backwards compat, can be deprecated in due course
+// alias to maintain backwards compat, can be deprecated in due course
+export {
+  withButtonAlignment as alignToButton,
+  withLargeButtonAlignment as alignToLargeButton,
+  withButtonAlignment,
+  withLargeButtonAlignment,
+  withAlignment,
+  withRtlSupport,
+  withDescription,
+};

package/bpk-component-icon/lg/accessibility.js

@@ -1,39 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-const _excluded = ["styles"];
-
-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; }
-
-var _default = _ref => {
-  let {
-    styles = {}
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/_react.default.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    style: {
-      width: "1.5rem",
-      height: "1.5rem"
-    }
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8zM11 7.597V6.445a.314.314 0 0 1 .19-.303A2.216 2.216 0 0 1 12 6a2.15 2.15 0 0 1 .797.141.33.33 0 0 1 .203.314v1.142c0 .448-.5.676-1 .676s-1-.228-1-.676zm5.996 1.932a.525.525 0 0 1-.469.518l-2.35.235a1 1 0 0 0-.895.896l-.093.936a.97.97 0 0 0 .005.241l.72 5.047a.524.524 0 0 1-1.023.218l-.795-2.784a.1.1 0 0 0-.192 0l-.795 2.784a.524.524 0 0 1-1.024-.218l.721-5.047a.916.916 0 0 0 .005-.24l-.093-.937a1 1 0 0 0-.896-.896l-2.35-.235A.525.525 0 0 1 7.525 9h8.95a.525.525 0 0 1 .521.529z"
-  }));
-};
-
-exports.default = _default;
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
+  width: "1.5rem",
+  height: "1.5rem"
+}} {...props}><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8zM11 7.597V6.445a.314.314 0 0 1 .19-.303A2.216 2.216 0 0 1 12 6a2.15 2.15 0 0 1 .797.141.33.33 0 0 1 .203.314v1.142c0 .448-.5.676-1 .676s-1-.228-1-.676zm5.996 1.932a.525.525 0 0 1-.469.518l-2.35.235a1 1 0 0 0-.895.896l-.093.936a.97.97 0 0 0 .005.241l.72 5.047a.524.524 0 0 1-1.023.218l-.795-2.784a.1.1 0 0 0-.192 0l-.795 2.784a.524.524 0 0 1-1.024-.218l.721-5.047a.916.916 0 0 0 .005-.24l-.093-.937a1 1 0 0 0-.896-.896l-2.35-.235A.525.525 0 0 1 7.525 9h8.95a.525.525 0 0 1 .521.529z" /></svg>);

package/bpk-component-icon/lg/account--add.js

@@ -1,39 +1,8 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-const _excluded = ["styles"];
-
-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; }
-
-var _default = _ref => {
-  let {
-    styles = {}
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/_react.default.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    style: {
-      width: "1.5rem",
-      height: "1.5rem"
-    }
-  }, props), /*#__PURE__*/_react.default.createElement("path", {
-    d: "M9.5 12c1.5 0 3-.8 3-2.378V4.6a1.179 1.179 0 0 0-.608-1.102A5.616 5.616 0 0 0 9.5 3a5.833 5.833 0 0 0-2.428.499A1.13 1.13 0 0 0 6.5 4.568v5.054C6.5 11.199 8 12 9.5 12zm-1-3h2v.028a1 1 0 0 1-2 0zm2 7a6.98 6.98 0 0 0 2.1 5H4.546A2.951 2.951 0 0 1 1.5 18.227v-.996a1.77 1.77 0 0 1 .99-1.634A16.867 16.867 0 0 1 9.472 14q.666 0 1.3.058A7.002 7.002 0 0 0 10.5 16zm7-5a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm3 5a1 1 0 0 1-1 1h-1v1a1 1 0 0 1-2 0v-1h-1a1 1 0 0 1 0-2h1v-1a1 1 0 0 1 2 0v1h1a1 1 0 0 1 1 1z"
-  }));
-};
-
-exports.default = _default;
+import React from "react";
+export default (({
+  styles = {},
+  ...props
+}) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
+  width: "1.5rem",
+  height: "1.5rem"
+}} {...props}><path d="M9.5 12c1.5 0 3-.8 3-2.378V4.6a1.179 1.179 0 0 0-.608-1.102A5.616 5.616 0 0 0 9.5 3a5.833 5.833 0 0 0-2.428.499A1.13 1.13 0 0 0 6.5 4.568v5.054C6.5 11.199 8 12 9.5 12zm-1-3h2v.028a1 1 0 0 1-2 0zm2 7a6.98 6.98 0 0 0 2.1 5H4.546A2.951 2.951 0 0 1 1.5 18.227v-.996a1.77 1.77 0 0 1 .99-1.634A16.867 16.867 0 0 1 9.472 14q.666 0 1.3.058A7.002 7.002 0 0 0 10.5 16zm7-5a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm3 5a1 1 0 0 1-1 1h-1v1a1 1 0 0 1-2 0v-1h-1a1 1 0 0 1 0-2h1v-1a1 1 0 0 1 2 0v1h1a1 1 0 0 1 1 1z" /></svg>);