@skyscanner/backpack-web 6.1.0 → 7.0.0-alpha.1

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

@@ -1,274 +0,0 @@
-/*
- * 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 {
-  horizontalNavLinkColor,
-  horizontalNavLinkHoverColor,
-  horizontalNavLinkActiveColor,
-  calendarDayHoverColor,
-  calendarDayActiveColor,
-  colorSkyGrayTint02,
-  colorSkyGrayTint06,
-  colorWhite,
-  colorMonteverde,
-} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
-const generateTheme = ({
-  docsSidebarBackground,
-  docsSidebarLink,
-  docsSidebarLinkBorder,
-  docsSidebarSelectedArrowColor,
-  fontSize,
-  primaryColor300,
-  primaryColor500,
-  primaryColor600,
-  primaryColor700,
-  secondaryColor500,
-  secondaryColor600,
-  secondaryColor700,
-  themeName,
-}) => ({
-  themeName,
-
-  primaryColor: primaryColor500,
-  logoFillColor: primaryColor500,
-
-  accordionActiveColor: primaryColor700,
-  accordionColor: primaryColor500,
-  accordionHoverColor: primaryColor600,
-
-  badgeBackgroundColor: primaryColor500,
-  badgeSuccessBackgroundColor: secondaryColor500,
-  badgeDestructiveBackgroundColor: colorSkyGrayTint02,
-
-  bannerAlertPrimaryColor: colorMonteverde,
-  bannerAlertSuccessColor: secondaryColor500,
-  bannerAlertWarnColor: 'orange',
-  bannerAlertErrorColor: primaryColor500,
-
-  barchartBarBackgroundColor: primaryColor300,
-  barchartBarHoverBackgroundColor: primaryColor500,
-  barchartBarActiveBackgroundColor: primaryColor600,
-  barchartBarSelectedBackgroundColor: primaryColor700,
-
-  blockquoteBarColor: primaryColor500,
-
-  buttonFontSize: fontSize,
-
-  buttonPrimaryTextColor: colorWhite,
-  buttonPrimaryHoverTextColor: colorWhite,
-  buttonPrimaryActiveTextColor: colorWhite,
-  buttonPrimaryGradientStartColor: secondaryColor500,
-  buttonPrimaryGradientEndColor: secondaryColor600,
-  buttonPrimaryBackgroundColor: secondaryColor600,
-  buttonPrimaryHoverBackgroundColor: secondaryColor600,
-  buttonPrimaryActiveBackgroundColor: secondaryColor700,
-
-  buttonSecondaryTextColor: primaryColor500,
-  buttonSecondaryHoverTextColor: primaryColor600,
-  buttonSecondaryActiveTextColor: primaryColor700,
-  buttonSecondaryBorderColor: colorSkyGrayTint06,
-  buttonSecondaryHoverBorderColor: primaryColor600,
-  buttonSecondaryActiveBorderColor: primaryColor700,
-  buttonSecondaryBackgroundColor: colorWhite,
-  buttonSecondaryHoverBackgroundColor: colorWhite,
-  buttonSecondaryActiveBackgroundColor: colorWhite,
-
-  buttonFeaturedTextColor: colorWhite,
-  buttonFeaturedHoverTextColor: colorWhite,
-  buttonFeaturedActiveTextColor: colorWhite,
-  buttonFeaturedGradientStartColor: primaryColor500,
-  buttonFeaturedGradientEndColor: primaryColor600,
-  buttonFeaturedBackgroundColor: primaryColor600,
-  buttonFeaturedHoverBackgroundColor: primaryColor600,
-  buttonFeaturedActiveBackgroundColor: primaryColor700,
-
-  buttonDestructiveTextColor: secondaryColor500,
-  buttonDestructiveHoverTextColor: secondaryColor600,
-  buttonDestructiveActiveTextColor: secondaryColor700,
-  buttonDestructiveBorderColor: colorSkyGrayTint06,
-  buttonDestructiveHoverBorderColor: secondaryColor500,
-  buttonDestructiveActiveBorderColor: secondaryColor500,
-  buttonDestructiveBackgroundColor: colorWhite,
-  buttonDestructiveHoverBackgroundColor: colorWhite,
-  buttonDestructiveActiveBackgroundColor: colorWhite,
-
-  chipPrimarySelectedBackgroundColor: primaryColor500,
-  chipPrimarySelectedHoverBackgroundColor: primaryColor600,
-  chipPrimarySelectedActiveBackgroundColor: primaryColor700,
-  chipPrimarySelectedTextColor: colorWhite,
-
-  chipSuccessSelectedBackgroundColor: secondaryColor500,
-  chipSuccessSelectedHoverBackgroundColor: secondaryColor600,
-  chipSuccessSelectedActiveBackgroundColor: secondaryColor700,
-  chipSuccessSelectedTextColor: colorWhite,
-
-  chipLightSelectedBackgroundColor: primaryColor500,
-  chipLightSelectedHoverBackgroundColor: primaryColor600,
-  chipLightSelectedActiveBackgroundColor: primaryColor700,
-  chipLightSelectedTextColor: colorWhite,
-
-  fieldsetLabelTextColor: secondaryColor500,
-
-  formValidationIconFill: secondaryColor500,
-  formValidationTextColor: secondaryColor500,
-
-  inputInvalidBorderColor: secondaryColor500,
-
-  linkColor: primaryColor300,
-  linkHoverColor: primaryColor500,
-  linkActiveColor: primaryColor600,
-  linkVisitedColor: primaryColor700,
-
-  linkAlternateColor: colorWhite,
-  linkAlternateHoverColor: colorWhite,
-  linkAlternateActiveColor: colorSkyGrayTint06,
-  linkAlternateVisitedColor: colorWhite,
-
-  horizontalNavBarSelectedColor: primaryColor500,
-  horizontalNavLinkSelectedColor: primaryColor500,
-  horizontalNavLinkColor,
-  horizontalNavLinkHoverColor,
-  horizontalNavLinkActiveColor,
-
-  selectInvalidBorderColor: secondaryColor500,
-
-  spinnerPrimaryColor: primaryColor500,
-
-  starRatingFilledColor: primaryColor500,
-
-  sliderBarColor: primaryColor500,
-
-  textareaInvalidBorderColor: secondaryColor500,
-
-  paginationNudgerActiveColor: primaryColor500,
-  paginationNudgerColor: primaryColor500,
-  paginationNudgerHoverColor: primaryColor700,
-  paginationSelectedBackgroundColor: primaryColor700,
-
-  progressBarFillColor: primaryColor500,
-
-  calendarDateTextColor: primaryColor500,
-  calendarDateTextHoverColor: calendarDayHoverColor,
-  calendarDateTextActiveColor: calendarDayActiveColor,
-  calendarDateTextFocusColor: primaryColor500,
-  calendarDateTextSelectedColor: colorWhite,
-  calendarDateSelectedBackgroundColor: primaryColor700,
-  calendarDateFocusedBorderColor: primaryColor500,
-  calendarNudgerIconColor: primaryColor500,
-  calendarNudgerIconHoverColor: primaryColor600,
-  calendarNudgerIconActiveColor: primaryColor700,
-
-  checkboxCheckedColor: primaryColor700,
-  radioCheckedColor: primaryColor700,
-  switchCheckedColor: primaryColor700,
-
-  ratingHighTextColor: 'black',
-  ratingHighColor: primaryColor500,
-  ratingMediumTextColor: colorWhite,
-  ratingMediumColor: secondaryColor500,
-  ratingLowColor: colorSkyGrayTint02,
-
-  iconMarkerDefaultBackgroundColor: primaryColor500,
-  iconMarkerDefaultSelectedColor: primaryColor500,
-  iconMarkerDefaultDisabledColor: primaryColor700,
-  iconMarkerDefaultDisabledBackgroundColor: primaryColor300,
-
-  priceMarkerBackgroundColor: primaryColor700,
-
-  priceMarkerSelectedBorderColor: primaryColor700,
-  priceMarkerSelectedColor: primaryColor700,
-
-  priceMarkerViewedBackgroundColor: primaryColor300,
-  priceMarkerViewedBorderColor: primaryColor300,
-  priceMarkerViewedColor: colorWhite,
-
-  skipLinkBackgroundColor: secondaryColor500,
-
-  navigationBarIconButtonColor: colorWhite,
-  navigationBarIconButtonHoverColor: colorWhite,
-  navigationBarIconButtonActiveColor: colorWhite,
-  navigationBarButtonLinkColor: colorWhite,
-  navigationBarButtonLinkHoverColor: colorWhite,
-  navigationBarButtonLinkActiveColor: colorWhite,
-  navigationBarButtonLinkVisitedColor: colorWhite,
-  navigationBarTitleColor: colorWhite,
-  navigationBarBackgroundColor: primaryColor500,
-  docsSidebarBackground,
-  docsSidebarLink,
-  docsSidebarLinkBorder,
-  docsSidebarSelectedArrowColor,
-});
-
-const londonTheme = {
-  primaryColor300: '#F28494',
-  primaryColor500: '#ED1B28',
-  primaryColor600: '#D11622',
-  primaryColor700: '#B1121C',
-  secondaryColor300: '#6889AB',
-  secondaryColor500: '#013A76',
-  secondaryColor600: '#002F61',
-  secondaryColor700: '#00254B',
-  fontSize: '1.2rem',
-  docsSidebarBackground: '#013A76',
-  docsSidebarLink: '#6889AB',
-  docsSidebarLinkBorder: '#6889AB',
-  docsSidebarSelectedArrowColor: '#ED1B28',
-  themeName: 'London',
-};
-
-const hongKongTheme = {
-  primaryColor300: '#108685',
-  primaryColor500: '#006463',
-  primaryColor600: '#024D4D',
-  primaryColor700: '#013838',
-  secondaryColor300: '#686868',
-  secondaryColor500: '#4C4C4C',
-  secondaryColor600: '#3C3C3C',
-  secondaryColor700: '#2A2A2A',
-  fontSize: '1.2rem',
-  docsSidebarBackground: '#4C4C4C',
-  docsSidebarLink: '#686868',
-  docsSidebarLinkBorder: '#686868',
-  docsSidebarSelectedArrowColor: '#108685',
-  themeName: 'HongKong',
-};
-
-const dohaTheme = {
-  primaryColor300: '#BF3671',
-  primaryColor500: '#9B104C',
-  primaryColor600: '#7F083B',
-  primaryColor700: '#5E072C',
-  secondaryColor300: '#ffd54f',
-  secondaryColor500: '#ffc107',
-  secondaryColor600: '#ffb300',
-  secondaryColor700: '#ffa000',
-  fontSize: '1.2rem',
-  docsSidebarBackground: '#5E072C',
-  docsSidebarLink: '#BF3671',
-  docsSidebarLinkBorder: '#BF3671',
-  docsSidebarSelectedArrowColor: '#BF3671',
-  themeName: 'Doha',
-};
-
-const bpkCustomThemes = {
-  London: generateTheme(londonTheme),
-  'Hong Kong': generateTheme(hongKongTheme),
-  Doha: generateTheme(dohaTheme),
-};
-
-export default bpkCustomThemes;

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

@@ -1,74 +0,0 @@
-/*
- * 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, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-import { wrapDisplayName } from '../../bpk-react-utils';
-
-import { getHtmlElement, THEME_CHANGE_EVENT } from './utils';
-
-const updateOnThemeChange = (EnhancedComponent) => {
-  class UpdateOnThemeChange extends Component {
-    constructor() {
-      super();
-      this.state = {
-        theme: null,
-      };
-    }
-
-    componentDidMount() {
-      getHtmlElement().addEventListener(
-        THEME_CHANGE_EVENT,
-        this.onThemeChange,
-        false,
-      );
-    }
-
-    componentWillUnmount() {
-      getHtmlElement().removeEventListener(
-        THEME_CHANGE_EVENT,
-        this.onThemeChange,
-        false,
-      );
-    }
-
-    onThemeChange = (e) => {
-      const { theme } = e.detail;
-      this.setState({ theme });
-      this.forceUpdate();
-    };
-
-    render() {
-      return <EnhancedComponent theme={this.state.theme} {...this.props} />;
-    }
-  }
-
-  UpdateOnThemeChange.displayName = wrapDisplayName(
-    EnhancedComponent,
-    'updateOnThemeChange',
-  );
-
-  UpdateOnThemeChange.propTypes = {
-    children: PropTypes.node.isRequired,
-  };
-
-  return UpdateOnThemeChange;
-};
-
-export default updateOnThemeChange;

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

@@ -1,23 +0,0 @@
-/*
- * 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.
- */
-const THEME_CHANGE_EVENT = 'bpkchangetheme';
-
-const getHtmlElement = () =>
-  typeof document !== 'undefined' ? document.querySelector('html') : {};
-
-export { THEME_CHANGE_EVENT, getHtmlElement };

package/bpk-component-ticket/README.md

@@ -1,37 +0,0 @@
-# bpk-component-ticket
-
-> Backpack ticket component.
-
-## Installation
-
-```sh
-npm install bpk-component-ticket --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkTicket from 'bpk-component-ticket';
-
-export default () => (
-  <BpkTicket stub="Lorem ipsum dolor sit amet.">
-    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
-    commodo ligula eget dolor. Aenean massa. Cum sociis natoque
-    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-  </BpkTicket>
-);
-```
-
-## Props
-
-| Property      | PropType | Required | Default Value |
-| ------------- | -------- | -------- | ------------- |
-| children      | node     | true     | -             |
-| stub          | node     | true     | -             |
-| href          | string   | false    | null          |
-| padded        | bool     | false    | true          |
-| vertical      | bool     | false    | false         |
-| stubProps     | object   | false    | {}            |
-| stubClassName | string   | false    | null          |
-

package/bpk-component-ticket/index.js

@@ -1,23 +0,0 @@
-/*
- * 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 BpkTicket from './src/BpkTicket';
-
-export default BpkTicket;

package/bpk-component-ticket/package.json

@@ -1,28 +0,0 @@
-{
-  "name": "bpk-component-ticket",
-  "version": "5.0.1",
-  "description": "Backpack ticket component.",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "git@github.com:Skyscanner/backpack.git"
-  },
-  "author": "Backpack Design System <backpack@skyscanner.net>",
-  "main": "index.js",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
-  "dependencies": {
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "bpk-component-button": "^6.2.7",
-    "bpk-component-icon": "^9.2.13"
-  }
-}

package/bpk-component-ticket/src/BpkTicket.js

@@ -1,148 +0,0 @@
-/*
- * 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, { type Node } from 'react';
-
-import { cssModules } from '../../bpk-react-utils';
-
-import STYLES from './BpkTicket.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-type Props = {
-  children: Node,
-  stub: Node,
-  stubProps: { [string]: any },
-  padded: boolean,
-  vertical: boolean,
-  className: ?string,
-  stubClassName: ?string,
-  href: ?string,
-};
-
-const BpkTicket = (props: Props) => {
-  const {
-    children,
-    className,
-    href,
-    padded,
-    stub,
-    stubClassName,
-    stubProps,
-    vertical,
-    ...rest
-  } = props;
-
-  const classNames = getClassName(
-    'bpk-ticket',
-    className,
-    vertical && 'bpk-ticket--vertical',
-  );
-
-  const mainClassNames = getClassName(
-    'bpk-ticket__paper',
-    'bpk-ticket__main',
-    padded && 'bpk-ticket__main--padded',
-    vertical && 'bpk-ticket__main--vertical',
-    !vertical && 'bpk-ticket__main--horizontal',
-  );
-
-  const mainInnerClassNames = getClassName(
-    'bpk-ticket__main-inner',
-    vertical && 'bpk-ticket__main-inner--vertical',
-    !vertical && 'bpk-ticket__main-inner--horizontal',
-  );
-
-  const stubClassNames = getClassName(
-    'bpk-ticket__paper',
-    'bpk-ticket__stub',
-    stubClassName,
-    padded && 'bpk-ticket__stub--padded',
-    vertical && 'bpk-ticket__stub--vertical',
-    !vertical && 'bpk-ticket__stub--horizontal',
-  );
-
-  const stubInnerClassNames = getClassName(
-    'bpk-ticket__stub-inner',
-    vertical && 'bpk-ticket__stub-inner--vertical',
-    !vertical && 'bpk-ticket__stub-inner--horizontal',
-  );
-
-  const mainContent = padded ? (
-    children
-  ) : (
-    <div className={mainInnerClassNames}>{children}</div>
-  );
-
-  const stubContent = padded ? (
-    stub
-  ) : (
-    <div className={stubInnerClassNames}>{stub}</div>
-  );
-
-  const contents = [
-    <div key="main" className={mainClassNames}>
-      {mainContent}
-    </div>,
-    // $FlowFixMe[cannot-spread-indexer] - inexact rest. See 'decisions/flowfixme.md'.
-    <div key="stub" className={stubClassNames} {...stubProps}>
-      {stubContent}
-    </div>,
-  ];
-
-  if (href) {
-    return (
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      <a href={href} className={classNames} {...rest}>
-        {contents}
-      </a>
-    );
-  }
-
-  return (
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    <div role="button" className={classNames} {...rest}>
-      {contents}
-    </div>
-  );
-};
-
-BpkTicket.propTypes = {
-  children: PropTypes.node.isRequired,
-  stub: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  href: PropTypes.string,
-  padded: PropTypes.bool,
-  vertical: PropTypes.bool,
-  stubClassName: PropTypes.string,
-  stubProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-};
-
-BpkTicket.defaultProps = {
-  className: null,
-  href: null,
-  padded: true,
-  vertical: false,
-  stubClassName: null,
-  stubProps: {},
-};
-
-export default BpkTicket;

package/bpk-component-ticket/src/BpkTicket.module.css

@@ -1,18 +0,0 @@
-/*
- * 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-ticket{position:relative;display:block;display:flex;flex-direction:row;align-items:stretch;color:#111236;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);border-radius:.375rem;z-index:0}.bpk-ticket::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';display:block;z-index:-1;transition:opacity 200ms ease-in-out;border-radius:inherit;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);opacity:0;pointer-events:none}.bpk-no-touch-support .bpk-ticket:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-no-touch-support .bpk-ticket:hover:not(:active):not(:disabled) .bpk-ticket__paper::after{opacity:1}:global(.bpk-no-touch-support) .bpk-ticket:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-ticket:hover:not(:active):not(:disabled) .bpk-ticket__paper::after{opacity:1}.bpk-ticket--vertical{flex-direction:column}.bpk-ticket--with-notches{box-shadow:none}.bpk-ticket--with-notches::after{content:none}.bpk-ticket__paper{position:relative;background-color:#fff}.bpk-ticket__paper--with-notches{box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3);z-index:0}.bpk-ticket__paper--with-notches::after{position:absolute;top:0;right:0;bottom:0;left:0;content:'';display:block;z-index:-1;transition:opacity 200ms ease-in-out;border-radius:inherit;box-shadow:0px 4px 14px 0px rgba(37,32,31,0.25);opacity:0;pointer-events:none}.bpk-ticket__main{flex:2 1 auto}.bpk-ticket__main--horizontal{border-radius:.375rem 0 0 .375rem}html[dir='rtl'] .bpk-ticket__main--horizontal{border-radius:0 .375rem .375rem 0}.bpk-ticket__main--vertical{border-radius:.375rem .375rem 0 0}.bpk-ticket__main--padded{padding:1rem}.bpk-ticket__main-inner{height:100%;overflow:hidden}.bpk-ticket__main-inner--horizontal{border-radius:.375rem 0 0 .375rem}html[dir='rtl'] .bpk-ticket__main-inner--horizontal{border-radius:0 .375rem .375rem 0}.bpk-ticket__main-inner--vertical{border-radius:.375rem .375rem 0 0}.bpk-ticket__stub{flex:1 1 auto}.bpk-ticket__stub--horizontal{min-width:30%;border-radius:0 .375rem .375rem 0}html[dir='rtl'] .bpk-ticket__stub--horizontal{border-radius:.375rem 0 0 .375rem}.bpk-ticket__stub--vertical{border-radius:0 0 .375rem .375rem}.bpk-ticket__stub--padded{padding:1rem}.bpk-ticket__stub-inner{height:100%;overflow:hidden}.bpk-ticket__stub-inner--horizontal{min-width:30%;border-radius:0 .375rem .375rem 0}html[dir='rtl'] .bpk-ticket__stub-inner--horizontal{border-radius:.375rem 0 0 .375rem}.bpk-ticket__stub-inner--vertical{border-radius:0 0 .375rem .375rem}.bpk-ticket__punchline{position:relative;z-index:1;flex:0 0 auto;background-color:#fff}.bpk-ticket__punchline--horizontal{height:.125rem;background-image:linear-gradient(#dddde5, #dddde5);background-repeat:repeat-x;background-position:0 50%;background-size:.5rem .125rem}.bpk-ticket__punchline--horizontal-with-notches{height:1rem;margin:auto .5rem;padding:0 .5rem;background-image:linear-gradient(#dddde5, #dddde5);background-repeat:repeat-x;background-position:0 50%;background-size:.5rem .125rem}.bpk-ticket__punchline--vertical{width:.125rem;background-image:linear-gradient(#dddde5, #dddde5);background-repeat:repeat-y;background-position:50% 0;background-size:.125rem .5rem}.bpk-ticket__punchline--vertical-with-notches{width:1rem;margin:.5rem auto;padding:.5rem 0;background-image:linear-gradient(#dddde5, #dddde5);background-repeat:repeat-y;background-position:50% 0;background-size:.125rem .5rem}.bpk-ticket__punchline--fallback{display:table-cell;width:.125rem;background-image:linear-gradient(#dddde5, #dddde5);background-repeat:repeat-y;background-position:50% 0;background-size:.125rem .5rem}.bpk-ticket__notch{position:absolute;width:1rem;height:.5rem;overflow:hidden}.bpk-ticket__notch::after{position:relative;content:'';display:block;width:2rem;height:2rem;transform:translate3d(0, 0, 0);border:.5rem solid #fff;border-radius:1rem;box-shadow:0px 1px 3px 0px rgba(37,32,31,0.3) inset}.bpk-ticket__notch--top{top:-.5rem}.bpk-ticket__notch--top::after{right:-50%;bottom:200%;left:-50%}.bpk-ticket__notch--right{right:-.5rem;width:.5rem;height:1rem}.bpk-ticket__notch--right::after{right:100%;bottom:50%}html[dir='rtl'] .bpk-ticket__notch--right::after{right:auto;left:200%}.bpk-ticket__notch--bottom{bottom:-.5rem}.bpk-ticket__notch--bottom::after{right:-50%;bottom:100%;left:-50%}.bpk-ticket__notch--left{left:-.5rem;width:.5rem;height:1rem}.bpk-ticket__notch--left::after{right:200%;bottom:50%}html[dir='rtl'] .bpk-ticket__notch--left::after{right:auto;left:100%}