@skyscanner/backpack-web 0.0.1

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

@@ -0,0 +1,126 @@
+/*
+ * 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 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 {
+      children,
+      className,
+      disabled,
+      href,
+      selected,
+      spaceAround,
+      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>;
+  }
+}
+
+const themeAttributes = [
+  'horizontalNavLinkColor',
+  'horizontalNavLinkHoverColor',
+  'horizontalNavLinkActiveColor',
+  'horizontalNavLinkSelectedColor',
+  'horizontalNavBarSelectedColor',
+];
+
+export { themeAttributes };
+
+export default BpkHorizontalNavItem;

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-horizontal-nav__item{display:inline-block;display:flex}.bpk-horizontal-nav__item--space-around{margin-right:auto;margin-left:auto}.bpk-horizontal-nav__link{display:inline-block;display:flex;padding:.875rem 1.5rem;border:0;border-radius:0;background:none;text-decoration:none;cursor:pointer;fill:currentColor}.bpk-horizontal-nav__link--default{color:#68697f;color:var(--bpk-horizontal-nav-link-color, #68697f)}.bpk-no-touch-support .bpk-horizontal-nav__link--default:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #dddde5 inset;color:#444560;color:var(--bpk-horizontal-nav-link-hover-color, #444560)}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--default:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #dddde5 inset;color:#444560;color:var(--bpk-horizontal-nav-link-hover-color, #444560)}.bpk-horizontal-nav__link--default:active{box-shadow:0 -3px 0 0 #cdcdd7 inset;color:#111236;color:var(--bpk-horizontal-nav-link-active-color, #111236)}.bpk-horizontal-nav__link--default-disabled{color:#dddde5;cursor:not-allowed}.bpk-horizontal-nav__link--default-disabled:active{color:#dddde5;box-shadow:unset}.bpk-horizontal-nav__link--default-selected{box-shadow:0 -3px 0 0 #0770e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, #0770e3) inset;color:#0770e3;color:var(--bpk-horizontal-nav-link-selected-color, #0770e3)}.bpk-no-touch-support .bpk-horizontal-nav__link--default-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #0770e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, #0770e3) inset}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--default-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #0770e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, #0770e3) inset}.bpk-horizontal-nav__link--default-selected:active{box-shadow:0 -3px 0 0 #0770e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, #0770e3) inset}.bpk-horizontal-nav__link--light{color:#fff}.bpk-no-touch-support .bpk-horizontal-nav__link--light:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--light:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}.bpk-horizontal-nav__link--light:active{box-shadow:0 -3px 0 0 #fff inset}.bpk-horizontal-nav__link--light-disabled{color:#dddde5;cursor:not-allowed}.bpk-horizontal-nav__link--light-disabled:active{color:#dddde5;box-shadow:unset}.bpk-horizontal-nav__link--light-selected{color:#fff;box-shadow:0 -3px 0 0 #fff inset}.bpk-no-touch-support .bpk-horizontal-nav__link--light-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--light-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}.bpk-horizontal-nav__link--light-selected:active{box-shadow:0 -3px 0 0 #fff inset}

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

@@ -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.
+ */
+
+function requireAll(requireContext) {
+  const hash = {};
+
+  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$/)),
+};

package/bpk-component-icon/examples.js

@@ -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 React from 'react';
+import {
+  colors,
+  lineHeightBase,
+  iconSizeSm,
+  iconSizeLg,
+  lineHeightSm,
+} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import BpkButton from 'bpk-component-button';
+import { BpkList, BpkListItem } from 'bpk-component-list';
+import BpkText from 'bpk-component-text';
+
+import { sm, lg } from './all';
+import SearchIcon from './lg/search';
+import SmallLongArrowRightIcon from './sm/long-arrow-right';
+import LargeLongArrowRightIcon from './lg/long-arrow-right';
+
+import {
+  withAlignment,
+  withButtonAlignment,
+  withLargeButtonAlignment,
+  withRtlSupport,
+} from './index';
+
+const AlignedBaseArrow = withAlignment(
+  SmallLongArrowRightIcon,
+  lineHeightBase,
+  iconSizeSm,
+);
+
+const AlignedSpan = withAlignment('span', iconSizeLg, lineHeightBase);
+const AlignedSpanSmall = withAlignment('span', iconSizeLg, lineHeightSm);
+
+const AlignedSmallLongArrowRightIcon = withButtonAlignment(
+  SmallLongArrowRightIcon,
+);
+const AlignedLargeLongArrowRightIcon = withLargeButtonAlignment(
+  LargeLongArrowRightIcon,
+);
+const RtlAlignedLargeLongArrowRightIcon = withRtlSupport(
+  withLargeButtonAlignment(LargeLongArrowRightIcon),
+);
+
+const SmallIconsExample = () => (
+  <BpkList>
+    {Object.keys(sm).map((icon) => {
+      const Icon = sm[icon];
+      return (
+        <BpkListItem key={icon}>
+          <Icon fill={colors.colorSkyGrayTint01} /> <span>{icon}</span>
+        </BpkListItem>
+      );
+    })}
+  </BpkList>
+);
+
+const LargeIconsExample = () => (
+  <BpkList>
+    {Object.keys(lg).map((icon) => {
+      const Icon = lg[icon];
+      return (
+        <BpkListItem key={icon}>
+          <Icon fill={colors.colorSkyGrayTint01} /> <span>{icon}</span>
+        </BpkListItem>
+      );
+    })}
+  </BpkList>
+);
+
+const AlignToBaseTextExample = () => (
+  <BpkText textStyle="base">
+    Search &nbsp;
+    <AlignedBaseArrow fill={colors.colorSkyGrayTint01} />
+  </BpkText>
+);
+
+const AlignToLargeTextExample = () => (
+  <BpkText textStyle="lg">
+    Search &nbsp;
+    <AlignedLargeLongArrowRightIcon fill={colors.colorSkyGrayTint01} />
+  </BpkText>
+);
+
+const AlignSmallTextToIconExample = () => (
+  <BpkText textStyle="sm">
+    <SearchIcon fill={colors.colorSkyGrayTint01} />
+    <AlignedSpanSmall>&nbsp; Search</AlignedSpanSmall>
+  </BpkText>
+);
+
+const AlignTextToIconExample = () => (
+  <BpkText textStyle="base">
+    <SearchIcon fill={colors.colorSkyGrayTint01} />
+    <AlignedSpan>&nbsp; Search</AlignedSpan>
+  </BpkText>
+);
+
+const AlignToButtonExample = () => (
+  <BpkButton>
+    Next step <AlignedSmallLongArrowRightIcon fill={colors.colorWhite} />
+  </BpkButton>
+);
+
+const AlignToLargeButtonExample = () => (
+  <BpkButton large>
+    Next step <AlignedLargeLongArrowRightIcon fill={colors.colorWhite} />
+  </BpkButton>
+);
+
+const AlignToLargeButtonRTLExample = () => (
+  <BpkButton large>
+    Search <RtlAlignedLargeLongArrowRightIcon fill={colors.colorWhite} />
+  </BpkButton>
+);
+
+const MixedExample = () => (
+  <div>
+    <SmallIconsExample />
+    <LargeIconsExample />
+  </div>
+);
+
+export {
+  SmallIconsExample,
+  LargeIconsExample,
+  AlignToBaseTextExample,
+  AlignToLargeTextExample,
+  AlignSmallTextToIconExample,
+  AlignTextToIconExample,
+  AlignToButtonExample,
+  AlignToLargeButtonExample,
+  AlignToLargeButtonRTLExample,
+  MixedExample,
+};

package/bpk-component-icon/index.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 {
+  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 withAlignment(WrappedComponent, buttonLineHeight, iconSizeSm);
+}
+
+function withLargeButtonAlignment(WrappedComponent) {
+  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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,8 @@
+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>);

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

@@ -0,0 +1,8 @@
+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="M10.865 12h2.27a8.07 8.07 0 0 0 3.223-.614c.234-.117.15-.44-.046-.61a3.617 3.617 0 0 1-.744-2.63 8.345 8.345 0 0 1 .079-1.068 4.03 4.03 0 0 0-.08-1.808c-.454-1.575-1.296-1.766-2.27-1.46a2.682 2.682 0 0 0-4.54 1.284 10.123 10.123 0 0 0-.325 3.052 3.617 3.617 0 0 1-.744 2.63c-.197.17-.28.493-.046.61a8.07 8.07 0 0 0 3.223.614zM11 9h2v.028a1 1 0 0 1-2 0zm9 8.25v.977A2.712 2.712 0 0 1 17.227 21H7.045A2.951 2.951 0 0 1 4 18.227v-.995a1.77 1.77 0 0 1 .99-1.634A16.866 16.866 0 0 1 11.972 14a17.328 17.328 0 0 1 7.016 1.6A1.784 1.784 0 0 1 20 17.25z" /></svg>);

package/bpk-component-icon/lg/account--id-card.js

@@ -0,0 +1,8 @@
+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="M18.922 2H5a3.226 3.226 0 0 0-3 3v13.768A3.27 3.27 0 0 0 5 22h14a3.226 3.226 0 0 0 3-3V5a3.238 3.238 0 0 0-3.078-3zM8 7.858A.878.878 0 0 1 8.897 7h1.206a.878.878 0 0 1 .897.858v1.707a1.501 1.501 0 0 1-3 0zm6 7.557A1.537 1.537 0 0 1 12.44 17H6.713A1.67 1.67 0 0 1 5 15.415v-.653a.892.892 0 0 1 .487-.815A9.372 9.372 0 0 1 9.484 13a9.647 9.647 0 0 1 4.017.947.898.898 0 0 1 .499.825zM18.5 11h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1zm0-2h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1z" /></svg>);

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

@@ -0,0 +1,8 @@
+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="M10 12c1.5 0 3-.8 3-2.378V4.6a1.179 1.179 0 0 0-.608-1.102A5.619 5.619 0 0 0 10 3a5.833 5.833 0 0 0-2.428.499A1.13 1.13 0 0 0 7 4.568v5.054C7 11.2 8.5 12 10 12zM9 9h2v.028a1 1 0 0 1-2 0zm9 8.25v.977A2.712 2.712 0 0 1 15.227 21H5.045A2.951 2.951 0 0 1 2 18.227v-.995a1.77 1.77 0 0 1 .99-1.634A16.866 16.866 0 0 1 9.972 14a17.328 17.328 0 0 1 7.016 1.6A1.784 1.784 0 0 1 18 17.25zM22 7a1 1 0 0 1-1 1h-4a1 1 0 0 1 0-2h4a1 1 0 0 1 1 1zm-1 4a1 1 0 0 1-1 1h-3a1 1 0 0 1 0-2h3a1 1 0 0 1 1 1z" /></svg>);

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

@@ -0,0 +1,8 @@
+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="M4 5a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v16.382a1 1 0 0 1-1.447.894l-5.659-2.829a2 2 0 0 0-1.788 0l-5.659 2.83A1 1 0 0 1 4 21.381V5zm13.237 3.676a1 1 0 0 0-1.474-1.352l-4.794 5.23-2.262-2.261a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.444-.031l5.5-6z" /></svg>);

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

@@ -0,0 +1,8 @@
+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 2zM9.809 7.254A1.283 1.283 0 0 1 11.12 6h1.763a1.283 1.283 0 0 1 1.31 1.254V9.35a2.194 2.194 0 0 1-4.384 0zM16.5 16a5.28 5.28 0 0 1-4.5 2 5.261 5.261 0 0 1-4.5-2 1.345 1.345 0 0 1 0-1.5 7.204 7.204 0 0 1 4.5-1.497 7.322 7.322 0 0 1 4.5 1.497c.345.28.274 1.15 0 1.5z" /></svg>);