@skyscanner/backpack-web 15.1.0 → 16.1.0

package/bpk-component-card/README.md

@@ -8,6 +8,8 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 
 ## Usage
 
+### BpkCard
+
 ```js
 import React from 'react';
 import BpkCard from '@skyscanner/backpack-web/bpk-component-card';
@@ -21,8 +23,25 @@ export default () => (
 );
 ```
 
+### BpkDividedCard
+
+```js
+import React from 'react';
+import { BpkDividedCard, ORIENTATION } from '@skyscanner/backpack-web/bpk-component-divided-card';
+
+export default () => (
+  <BpkDividedCard
+    primaryContent={'foo'}
+    secondaryContent={'bar'}
+    orientation={ORIENTATION.vertical}
+  />
+);
+```
+
 ## Props
 
+### BpkCard
+
 | Property  | PropType | Required | Default Value |
 | --------- | -------- | -------- | ------------- |
 | children  | -        | true     | -             |
@@ -30,3 +49,13 @@ export default () => (
 | href      | string   | false    | null          |
 | atomic    | bool     | false    | true          |
 | padded    | bool     | false    | true          |
+
+### BpkDividedCard
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| primaryContent | node   | true    | -          |
+| secondaryContent | node   | true    | -          |
+| orientation | oneOf(ORIENTATION.horizontal, ORIENTATION.vertical)    | false    | ORIENTATION.horizontal          |
+| href | string   | false    | null          |
+| className | string   | false    | null          |

package/bpk-component-card/index.js

@@ -18,5 +18,8 @@
 /* @flow strict */
 
 import BpkCard from './src/BpkCard';
+import BpkDividedCard, { ORIENTATION } from './src/BpkDividedCard';
+
+export { ORIENTATION, BpkDividedCard };
 
 export default BpkCard;

package/bpk-component-card/src/BpkDividedCard.js

@@ -0,0 +1,95 @@
+/*
+ * 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 BpkCard from './BpkCard';
+import STYLES from './BpkDividedCard.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+export const ORIENTATION = {
+  horizontal: 'horizontal',
+  vertical: 'vertical',
+};
+
+export type Props = {
+  primaryContent: Node,
+  secondaryContent: Node,
+  orientation: $Values<typeof ORIENTATION>,
+  href: ?string,
+  className: ?string,
+};
+const BpkDividedCard = (props: Props) => {
+  const {
+    className,
+    href,
+    orientation,
+    primaryContent,
+    secondaryContent,
+    ...rest
+  } = props;
+  const isVertical = orientation === ORIENTATION.vertical;
+  const classNames = getClassName(
+    'bpk-divided-card',
+    isVertical ? 'bpk-divided-card--vertical' : 'bpk-divided-card--horizontal',
+    className,
+  );
+
+  return (
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+    <BpkCard className={classNames} href={href} padded={false} {...rest}>
+      <div
+        className={getClassName(
+          !isVertical && 'bpk-divided-card__primary--horizontal',
+        )}
+      >
+        {primaryContent}
+      </div>
+      <div
+        className={getClassName(
+          isVertical
+            ? 'bpk-divided-card__secondary--vertical'
+            : 'bpk-divided-card__secondary--horizontal',
+        )}
+      >
+        {secondaryContent}
+      </div>
+    </BpkCard>
+  );
+};
+
+BpkDividedCard.propTypes = {
+  primaryContent: PropTypes.node.isRequired,
+  secondaryContent: PropTypes.node.isRequired,
+  orientation: PropTypes.oneOf(Object.keys(ORIENTATION)),
+  href: PropTypes.string,
+  className: PropTypes.string,
+};
+
+BpkDividedCard.defaultProps = {
+  orientation: ORIENTATION.horizontal,
+  href: null,
+  className: null,
+};
+
+export default BpkDividedCard;

package/bpk-component-card/src/BpkDividedCard.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-divided-card{display:flex}

package/bpk-component-card/src/BpkDividedCard.module.scss

@@ -0,0 +1,62 @@
+/*
+ * 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';
+
+$min-vertical-width: 240;
+$max-vertical-width: 720;
+$min-horizontal-width: $max-vertical-width + 1;
+$min-horizontal-height: 292;
+$fixed-secondary-width: 216;
+
+.bpk-divided-card {
+  display: flex;
+
+  &--vertical {
+    min-width: $bpk-one-pixel-rem * $min-vertical-width;
+    max-width: $bpk-one-pixel-rem * $max-vertical-width;
+    flex-direction: column;
+  }
+
+  &--horizontal {
+    min-width: $bpk-one-pixel-rem * $min-horizontal-width;
+    min-height: $bpk-one-pixel-rem * $min-horizontal-height;
+  }
+
+  &__primary {
+    &--horizontal {
+      flex: 1;
+    }
+  }
+
+  &__secondary {
+    &--vertical {
+      border-top: $bpk-input-border;
+    }
+
+    &--horizontal {
+      width: $bpk-one-pixel-rem * $fixed-secondary-width;
+      border-left: $bpk-input-border;
+
+      @include bpk-rtl {
+        border-right: $bpk-input-border;
+        border-left: unset;
+      }
+    }
+  }
+}

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

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M12 1.5A10.5 10.5 0 1022.5 12 10.5 10.5 0 0012 1.5zm-.9 4.945a.317.317 0 01.172-.303A1.81 1.81 0 0112 6a1.778 1.778 0 01.718.141.333.333 0 01.182.314v1.142c0 .448-.45.676-.9.676s-.9-.228-.9-.676zm4.975 3.602l-2.115.235a.956.956 0 00-.806.896l-.084.937a1.11 1.11 0 00.004.24l.649 5.047a.508.508 0 01-.467.598.482.482 0 01-.454-.38l-.716-2.784a.087.087 0 00-.172 0l-.716 2.784a.483.483 0 01-.454.38.51.51 0 01-.468-.598l.65-5.047a1.082 1.082 0 00.004-.241l-.084-.936a.956.956 0 00-.806-.896l-2.115-.235a.507.507 0 01-.425-.522A.501.501 0 017.972 9h8.056a.501.501 0 01.472.525.507.507 0 01-.425.522z" /></svg>);

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

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M11.392 2.081A1.435 1.435 0 0112 3.366v5.86A2.791 2.791 0 019 12a2.792 2.792 0 01-3-2.773V3.33a1.383 1.383 0 01.572-1.248A5.122 5.122 0 019 1.5a4.967 4.967 0 012.392.581zm.767 13.707a.466.466 0 00-.366-.569A17.621 17.621 0 009 15a17.3 17.3 0 00-7.855 1.865A2.073 2.073 0 000 18.75v.75a3.226 3.226 0 003 3h10.235a.543.543 0 00.364-.887 6.771 6.771 0 01-1.44-5.825zM24 17.25A5.25 5.25 0 1118.75 12 5.25 5.25 0 0124 17.25zm-1.5 0a.75.75 0 00-.75-.75H19.5v-2.25a.75.75 0 00-1.5 0v2.25h-2.25a.75.75 0 000 1.5H18v2.25a.75.75 0 001.5 0V18h2.25a.75.75 0 00.75-.75z" /></svg>);

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

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M8.756 3.943c.909-3.147 3.568-2.792 4.541-1.5.973-.355 1.816-.132 2.27 1.706a5.462 5.462 0 01.08 2.109 11.513 11.513 0 00-.08 1.245 4.72 4.72 0 00.745 3.069c.197.2.28.575.046.712a7.069 7.069 0 01-3.223.716h-2.27a7.082 7.082 0 01-3.223-.716c-.234-.137-.15-.513.046-.713a4.715 4.715 0 00.744-3.068 13.736 13.736 0 01.324-3.56zM12 15a17.3 17.3 0 00-7.855 1.865A2.073 2.073 0 003 18.75v.75a3.226 3.226 0 003 3h12a3.226 3.226 0 003-3v-.75a2.002 2.002 0 00-1.107-1.883A17.608 17.608 0 0012 15z" /></svg>);

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

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M19.5 1.5h-15a3 3 0 00-3 3v15a3 3 0 003 3h15a3 3 0 003-3v-15a3 3 0 00-3-3zm-12 7.097a.9.9 0 01.286-.748A2.23 2.23 0 019 7.5a2.155 2.155 0 011.196.349.928.928 0 01.304.771v1.715a1.508 1.508 0 11-3 0zM12 16.5H6A1.749 1.749 0 014.5 15a.828.828 0 01.572-.754A10.413 10.413 0 019 13.5a10.602 10.602 0 013.947.747.795.795 0 01.553.753 1.749 1.749 0 01-1.5 1.5zm6.75-4.5h-4.5a.75.75 0 010-1.5h4.5a.75.75 0 010 1.5zm0-3h-4.5a.75.75 0 010-1.5h4.5a.75.75 0 010 1.5z" /></svg>);

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

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M8.072 2.082A1.383 1.383 0 007.5 3.329v5.897a2.792 2.792 0 003 2.774 2.791 2.791 0 003-2.774v-5.86a1.435 1.435 0 00-.608-1.285A4.966 4.966 0 0010.5 1.5a5.122 5.122 0 00-2.428.582zM2.645 16.865A17.3 17.3 0 0110.5 15a17.608 17.608 0 017.893 1.867A2 2 0 0119.5 18.75v.75a3.226 3.226 0 01-3 3h-12a3.226 3.226 0 01-3-3v-.75a2.073 2.073 0 011.145-1.885zM16.5 6A1.5 1.5 0 0118 4.5h3a1.5 1.5 0 010 3h-3A1.5 1.5 0 0116.5 6zM18 9a1.5 1.5 0 000 3h1.5a1.5 1.5 0 000-3z" /></svg>);

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

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M3 3a3 3 0 013-3h12a3 3 0 013 3v18.919a1.5 1.5 0 01-1.974 1.423l-6.552-2.184a1.5 1.5 0 00-.948 0l-6.552 2.184A1.5 1.5 0 013 21.919V3zm14.56 5.56a1.5 1.5 0 00-2.12-2.12l-4.94 4.939-1.94-1.94a1.5 1.5 0 10-2.12 2.122l3 3a1.5 1.5 0 002.12 0l6-6z" /></svg>);

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

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M12 22.5C6.201 22.5 1.5 17.799 1.5 12S6.201 1.5 12 1.5 22.5 6.201 22.5 12 17.799 22.5 12 22.5zm2.25-15.869c0-.763-.603-1.381-1.345-1.381h-1.81c-.742 0-1.345.618-1.345 1.381v2.31c0 1.274 1.008 2.309 2.25 2.309s2.25-1.035 2.25-2.31V6.632zm-8.04 9.844A7.037 7.037 0 0012 19.5a7.037 7.037 0 005.79-3.024c.427-.613.174-1.435-.5-1.762A12.06 12.06 0 0012 13.5c-1.898 0-3.693.436-5.29 1.213-.673.327-.927 1.15-.5 1.762z" /></svg>);

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

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M9.572 2.082A1.384 1.384 0 009 3.33v5.897A2.792 2.792 0 0012 12a2.791 2.791 0 003-2.774v-5.86a1.435 1.435 0 00-.608-1.285A4.966 4.966 0 0012 1.5a5.122 5.122 0 00-2.428.582zM4.145 16.865A17.3 17.3 0 0112 15a17.608 17.608 0 017.893 1.867A2 2 0 0121 18.75v.75a3.226 3.226 0 01-3 3H6a3.226 3.226 0 01-3-3v-.75a2.073 2.073 0 011.145-1.885z" /></svg>);

package/bpk-component-icon/sm/add-circle.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M12 1.5A10.5 10.5 0 1022.5 12 10.499 10.499 0 0012 1.5zm4.5 12h-3v3a1.5 1.5 0 01-3 0v-3h-3a1.5 1.5 0 010-3h3v-3a1.5 1.5 0 013 0v3h3a1.5 1.5 0 010 3z" /></svg>);

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

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M10.8 1.774A2.637 2.637 0 0112 1.5a2.563 2.563 0 011.196.28.685.685 0 01.304.62v2.262A1.377 1.377 0 0112 6a1.377 1.377 0 01-1.5-1.338V2.4a.681.681 0 01.3-.626zM15 13.835V9.452a1.514 1.514 0 00-.536-1.277 4.444 4.444 0 00-2.429-.675 4.575 4.575 0 00-2.5.784A1.545 1.545 0 009 9.568v4.383a2.458 2.458 0 00.295 1.217c.05.087.103.175.157.263a3.131 3.131 0 01.563 1.414l.408 4.312c.054.764.483 1.343.995 1.343h1.235c.511 0 .94-.58.994-1.343l.408-4.312a3.272 3.272 0 01.477-1.32c.074-.14.148-.277.214-.417A3.083 3.083 0 0015 13.835z" /></svg>);

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

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M12 0a1.5 1.5 0 00-1.5 1.5v2.379l-1.94-1.94a1.5 1.5 0 10-2.157 2.085l.037.037 4.06 4.06V10.5H8.121l-4.06-4.06a1.5 1.5 0 00-2.159 2.083l.037.037 1.94 1.94H1.5a1.5 1.5 0 000 3h2.379l-1.94 1.94a1.5 1.5 0 002.122 2.12l4.06-4.06H10.5v2.379l-4.06 4.06a1.5 1.5 0 002.12 2.122l1.94-1.94V22.5a1.5 1.5 0 003 0v-2.379l1.94 1.94a1.5 1.5 0 002.12-2.122l-4.06-4.06V13.5h2.379l4.06 4.06a1.5 1.5 0 002.122-2.12l-1.94-1.94H22.5a1.5 1.5 0 000-3h-2.379l1.94-1.94a1.5 1.5 0 00-2.122-2.12l-4.06 4.06H13.5V8.121l4.06-4.06a1.5 1.5 0 00-2.12-2.122L13.5 3.88V1.5A1.5 1.5 0 0012 0z" /></svg>);

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

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M8.675 9a.45.45 0 01-.43-.316l-1.94-6.21A.75.75 0 017.02 1.5h1.003a1.5 1.5 0 011.236.65l5.528 6.098a.45.45 0 01-.334.752z" /><path d="M2.33 7.658a1.5 1.5 0 012.012.671l.878 1.756a.75.75 0 00.67.415h14.36c.75 0 2.25.75 2.25 1.5s-1.5 1.5-2.25 1.5h-4.46a1.5 1.5 0 00-1.237.65l-5.294 7.7a1.5 1.5 0 01-1.236.65H7.02a.75.75 0 01-.716-.974l2.204-7.052a.75.75 0 00-.716-.974h-1.9a.75.75 0 00-.672.415l-.878 1.756a1.5 1.5 0 01-2.684-1.342l.997-1.994a.75.75 0 000-.67L1.658 9.67a1.5 1.5 0 01.67-2.013h.001z" /></svg>);

package/bpk-component-icon/sm/airline--multiple.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M8.516 22.5a1.171 1.171 0 01-.913-1.826L19.42 2.454a1.821 1.821 0 011.5-.954h1.5c.626 0 1 .955.75 1.91l-4.317 17.35a2.236 2.236 0 01-2.14 1.74H8.516zm3.75-15a1.138 1.138 0 01.955 1.757L6.344 19.858a2.688 2.688 0 00-.427 1.51 1.052 1.052 0 01-.912 1.132h-3.31a.833.833 0 01-.778-1.304l10.07-13.014a1.602 1.602 0 011.28-.682z" /></svg>);

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

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M1.743 20.612a1.17 1.17 0 00.884 1.888h13.475a2.268 2.268 0 002.186-1.78l4.18-17.777A1.158 1.158 0 0021.375 1.5h-2.001a6.442 6.442 0 00-5.127 2.609z" /></svg>);

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

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M22.854 9.233l-8.087-8.087a3.913 3.913 0 00-5.534 0L1.146 9.233a3.913 3.913 0 000 5.534l8.087 8.087a3.913 3.913 0 005.534 0l8.087-8.087a3.913 3.913 0 000-5.534zM9 12.023a.45.45 0 01-.34.437l-3.113.778a.842.842 0 01-.71-1.491L8.28 9.165a.45.45 0 01.72.36zm10.334.902a.842.842 0 01-.881.313L14.06 12.14a.45.45 0 00-.559.436v3.174l1.063.532a.79.79 0 01-.545 1.473L12 17.25l-2.018.505a.79.79 0 01-.545-1.473l1.063-.532v-9c0-1.5.672-2.25 1.5-2.25s1.5.75 1.5 2.25v1.31a1.5 1.5 0 00.845 1.35l4.818 2.337a.842.842 0 01.17 1.178z" /></svg>);

package/bpk-component-icon/sm/alert--active.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M5.701 3.329a1.5 1.5 0 00-2.1-2.143A11.968 11.968 0 000 9.758a1.5 1.5 0 003 0 8.968 8.968 0 012.701-6.43zm14.697-2.143a1.5 1.5 0 10-2.13 2.113l.03.03A8.968 8.968 0 0121 9.756a1.5 1.5 0 003 0 11.963 11.963 0 00-3.602-8.57zM4.814 9.476a7.186 7.186 0 1114.372 0v.66a10.361 10.361 0 001.084 4.612l.51 1.025a2.062 2.062 0 01-1.836 2.985H5.056a2.062 2.062 0 01-1.837-2.985l.51-1.025a10.35 10.35 0 001.085-4.612v-.66zm5.017 10.781a1.02 1.02 0 00-.755 1.44 2.243 2.243 0 001.917 1.56h2a2.258 2.258 0 001.93-1.56 1.02 1.02 0 00-.755-1.44H9.831z" /></svg>);

package/bpk-component-icon/sm/alert--add.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M5.056 18h13.888a2.062 2.062 0 001.836-2.985l-.51-1.025a10.36 10.36 0 01-1.084-4.612v-.659a7.186 7.186 0 10-14.372 0v.659A10.35 10.35 0 013.73 13.99l-.51 1.025A2.062 2.062 0 005.056 18zM9 7.5h1.5V6a1.5 1.5 0 013 0v1.5H15a1.5 1.5 0 110 3h-1.5V12a1.5 1.5 0 01-3 0v-1.5H9a1.5 1.5 0 010-3zm5.168 12a1.02 1.02 0 01.755 1.439 2.259 2.259 0 01-1.93 1.561h-2a2.243 2.243 0 01-1.917-1.561 1.02 1.02 0 01.755-1.439h4.337z" /></svg>);

package/bpk-component-icon/sm/alert--expired.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M5.056 18h13.888a2.062 2.062 0 001.837-2.985l-.51-1.025a10.35 10.35 0 01-1.085-4.612v-.66a7.186 7.186 0 10-14.372.001v.659A10.36 10.36 0 013.73 13.99l-.51 1.025A2.062 2.062 0 005.056 18zM9 8.121l-.037-.037A1.5 1.5 0 1111.12 6l.879.879.879-.879.036-.037A1.5 1.5 0 1115 8.121L14.12 9l.88.879.036.037A1.5 1.5 0 1112.88 12l-.88-.879-.878.879-.037.037A1.5 1.5 0 019 9.879L9.879 9zM12.993 22.5h-2a2.244 2.244 0 01-1.917-1.561A1.021 1.021 0 019.83 19.5h4.338a1.02 1.02 0 01.755 1.439 2.261 2.261 0 01-1.931 1.561z" /></svg>);

package/bpk-component-icon/sm/alert--remove.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M22.06 3.31l-3.412 3.413c-.047.048.102-.102 0 0L4.061 21.311a1.5 1.5 0 01-2.122-2.122l1.218-1.218a.33.33 0 00.053-.38 2.049 2.049 0 01.01-1.826l.51-1.025a10.35 10.35 0 001.084-4.612v-.66a7.18 7.18 0 0111.891-5.456.31.31 0 00.422-.01l2.812-2.813a1.5 1.5 0 012.122 2.122zm-2.802 8.032a.318.318 0 00-.534-.195l-7.09 7.09a.3.3 0 00.212.513h7.098a2.062 2.062 0 001.837-2.985l-.51-1.025a10.345 10.345 0 01-1.013-3.398zM9.831 20.25a1.02 1.02 0 00-.755 1.44 2.243 2.243 0 001.917 1.56h2a2.258 2.258 0 001.93-1.56 1.02 1.02 0 00-.755-1.44H9.831z" /></svg>);

package/bpk-component-icon/sm/arrow-down.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M16.537 8.25H7.463a1.358 1.358 0 00-1.11 2.251l4.354 4.77a1.53 1.53 0 002.184.04l4.718-4.77a1.357 1.357 0 00-1.072-2.291z" /></svg>);

package/bpk-component-icon/sm/arrow-left.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M15.75 16.537V7.463a1.358 1.358 0 00-2.251-1.11l-4.77 4.354a1.53 1.53 0 00-.04 2.184l4.77 4.718a1.357 1.357 0 002.291-1.072z" /></svg>);

package/bpk-component-icon/sm/arrow-right.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M8.25 7.463v9.074a1.358 1.358 0 002.251 1.11l4.77-4.354a1.53 1.53 0 00.04-2.184l-4.77-4.718A1.357 1.357 0 008.25 7.463z" /></svg>);

package/bpk-component-icon/sm/arrow-up.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M7.463 15.75h9.074a1.358 1.358 0 001.11-2.251l-4.354-4.77a1.53 1.53 0 00-2.184-.04l-4.718 4.77a1.357 1.357 0 001.072 2.291z" /></svg>);

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

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M19.5.75h-15a3 3 0 00-3 3v6.737a3 3 0 002.176 2.885l5.795 1.655a4.5 4.5 0 105.058 0l5.795-1.655a3 3 0 002.176-2.885V3.75a3 3 0 00-3-3zM12 20.25a1.5 1.5 0 111.5-1.5 1.5 1.5 0 01-1.5 1.5zm4.5-10.894a1.5 1.5 0 01-1.088 1.442l-3 1.202a1.5 1.5 0 01-.824 0l-3-1.202A1.5 1.5 0 017.5 9.356V5.25A1.5 1.5 0 019 3.75h6a1.5 1.5 0 011.5 1.5z" /></svg>);

package/bpk-component-icon/sm/baby-carriage.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M22.514 8.476A.48.48 0 0122.02 9h-9.25a.525.525 0 01-.499-.69l2.385-6.468a.474.474 0 01.497-.339c2.915.343 6.968 3.595 7.361 6.974zM3.02 11.25a.788.788 0 01.75-.75h18a.74.74 0 01.744.7c.006 3-2.244 5.25-5.794 5.25H8.48a5.141 5.141 0 01-5.46-5.2zM8.27 22.5a2.25 2.25 0 10-2.25-2.25 2.25 2.25 0 002.25 2.25zm11.25-2.25A2.25 2.25 0 1117.27 18a2.25 2.25 0 012.25 2.25zM4.08 3.44a1.5 1.5 0 00-2.195 2.046q.036.038.075.074c.733.736 1.06 1.1 1.06 1.94a1.5 1.5 0 003 0 5.31 5.31 0 00-1.9-4.02l-.04-.04z" /></svg>);

package/bpk-component-icon/sm/baggage--add.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M12 1.5c-2.703 0-4.688 1.426-5.543 2.46C6.111 4.38 6 4.895 6 5.32v1.43a.75.75 0 01-.75.75H4.5a3 3 0 00-3 3v9a3 3 0 003 3h15a3 3 0 003-3v-9a3 3 0 00-3-3h-.75a.75.75 0 01-.75-.75V5.385c0-.514-.162-1.074-.555-1.5C16.547 2.914 14.693 1.5 12 1.5zm2.625 6h-5.25C9.168 7.5 9 7.276 9 7v-.583c0-.264.075-.52.23-.684C9.751 5.176 10.721 4.5 12 4.5c1.276 0 2.208.676 2.758 1.262.16.171.242.436.242.71V7c0 .276-.168.5-.375.5zM10.5 12a1.5 1.5 0 013 0v1.5H15a1.5 1.5 0 010 3h-1.5V18a1.5 1.5 0 01-3 0v-1.5H9a1.5 1.5 0 010-3h1.5V12z" /></svg>);

package/bpk-component-icon/sm/baggage--remove.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M23.56.44a1.5 1.5 0 00-2.12 0l-3.76 3.758a1.958 1.958 0 00-.235-.312C16.547 2.913 14.693 1.5 12 1.5c-2.703 0-4.688 1.426-5.543 2.46C6.111 4.38 6 4.895 6 5.32v1.43a.75.75 0 01-.75.75H4.5a3 3 0 00-3 3v9c0 .269.035.53.102.777L.439 21.44a1.5 1.5 0 002.122 2.122l1.162-1.163c-.07-.013.069.019 0 0L18.63 7.491c.039.006-.04 0 0 0l4.93-4.93a1.5 1.5 0 000-2.122zM15 7c0 .276-.168.5-.375.5h-5.25C9.168 7.5 9 7.276 9 7v-.583c0-.264.075-.52.23-.684C9.751 5.176 10.721 4.5 12 4.5c1.276 0 2.208.676 2.758 1.262.16.171.242.436.242.71V7zm6.91 1.712L8.12 22.5H19.5a3 3 0 003-3v-9c0-.67-.22-1.289-.59-1.788z" /></svg>);

package/bpk-component-icon/sm/baggage-cabin-add.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M7.8 0h2.4A1.8 1.8 0 0112 1.746v9.504a.75.75 0 01-1.5 0V3h-3v8.25a.75.75 0 01-1.5 0V1.8A1.8 1.8 0 017.8 0zM5.25 13.5h5.172c.362 0 .541.477.3.747A6.725 6.725 0 009 18.75c0 1.137.28 2.207.777 3.147.14.265-.043.603-.343.603H7.5v.375a1.125 1.125 0 01-2.25 0V22.5A2.25 2.25 0 013 20.25v-4.5a2.25 2.25 0 012.25-2.25zM21 18.75a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0zm-6-3V18h-2.25a.75.75 0 000 1.5H15v2.25a.75.75 0 001.5 0V19.5h2.25a.75.75 0 000-1.5H16.5v-2.25a.75.75 0 00-1.5 0z" /></svg>);

package/bpk-component-icon/sm/baggage-cabin-not-included.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><g clipPath="url(#clip0_8306_178)"><path d="M10.8 0h2.4A1.8 1.8 0 0115 1.746V6.9L21.443.457a1.5 1.5 0 112.121 2.121L2.582 23.561a1.5 1.5 0 01-2.121-2.122L9 12.9V1.8A1.8 1.8 0 0110.8 0zm2.7 8.4V3h-3v8.25c-.02.17-.007.115-.02.17L13.5 8.4zM8.25 22.875v-.636a.25.25 0 01.073-.177l8.237-8.237a.234.234 0 01.278-.045A2.25 2.25 0 0118 15.75v4.5a2.25 2.25 0 01-2.25 2.25v.375a1.125 1.125 0 01-2.25 0V22.5h-3v.375a1.125 1.125 0 01-2.25 0z" /></g></svg>);

package/bpk-component-icon/sm/baggage-cabin.js

@@ -2,7 +2,7 @@ import React from "react";
 export default (({
   styles = {},
   ...props
-}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" style={{
-  width: "1.125rem",
-  height: "1.125rem"
+}) => <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" style={{
+  width: "1rem",
+  height: "1rem"
 }} {...props}><path d="M10.8 0h2.4A1.8 1.8 0 0115 1.746v9.504a.75.75 0 01-1.5 0V3h-3v8.25a.75.75 0 01-1.5 0V1.8A1.8 1.8 0 0110.8 0zM8.25 13.5h7.5A2.25 2.25 0 0118 15.75v4.5a2.25 2.25 0 01-2.25 2.25v.375a1.125 1.125 0 01-2.25 0V22.5h-3v.375a1.125 1.125 0 01-2.25 0V22.5A2.25 2.25 0 016 20.25v-4.5a2.25 2.25 0 012.25-2.25z" /></svg>);