@skyscanner/backpack-web 36.18.0 → 37.1.0

package/bpk-component-page-indicator/src/BpkPageIndicator.js

@@ -14,7 +14,8 @@
  * 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 PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import NavButton, { DIRECTIONS } from "./NavButton";
 import STYLES from "./BpkPageIndicator.module.css";
@@ -27,84 +28,64 @@ export const VARIANT = {
   overImage: 'overImage'
 };
 const BpkPageIndicator = ({
-  className,
+  className = undefined,
   currentIndex,
   indicatorLabel,
   nextNavLabel,
-  onClick,
+  onClick = () => {},
   prevNavLabel,
-  showNav,
+  showNav = false,
   totalIndicators,
-  variant
+  variant = VARIANT.default
 }) => {
   /**
    * This validation is used to avoid an a11y issue when onClick isn't available.
    * In this case, we can set aria-hidden = true to let screen reader skip reading page indicator dots.
    * and render the dot as div rather than button to align with aria-hidden = true.
-  */
+   */
   const isInteractive = !!onClick;
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("div", {
-      className: className,
-      "aria-hidden": isInteractive ? 'false' : 'true',
-      "data-testid": "indicator-container",
-      children: /*#__PURE__*/_jsxs("div", {
-        className: getClassName('bpk-page-indicator', showNav && 'bpk-page-indicator__showNav'),
-        children: [showNav && /*#__PURE__*/_jsx(NavButton, {
-          currentIndex: currentIndex,
-          onClick: onClick,
-          disabled: currentIndex === 0,
-          direction: DIRECTIONS.PREV,
-          ariaLabel: prevNavLabel
-        }), /*#__PURE__*/_jsx("div", {
-          className: getClassName('bpk-page-indicator__container'),
-          children: /*#__PURE__*/_jsx("div", {
-            className: getClassName('bpk-page-indicator__indicators-container'),
-            style: currentIndex > START_SCROLL_INDEX ? {
-              '--scroll-index': totalIndicators > DISPLAYED_TOTAL ? Math.min(currentIndex - START_SCROLL_INDEX, totalIndicators - DISPLAYED_TOTAL) : 0
-            } : undefined,
-            children: [...Array(totalIndicators)].map((val, index) => isInteractive ? /*#__PURE__*/_jsx("button", {
-              type: "button",
-              onClick: e => {
-                onClick(e, index, DIRECTIONS.INDICATORS);
-              },
-              className: getClassName('bpk-page-indicator__indicator', `bpk-page-indicator__indicator--${variant}`, index === currentIndex && `bpk-page-indicator__indicator--active-${variant}`),
-              "aria-label": `${indicatorLabel} ${index + 1}`,
-              "aria-current": currentIndex === index ? 'true' : 'false'
-              // eslint-disable-next-line react/no-array-index-key
-            }, `indicator-${index}`) : /*#__PURE__*/_jsx("div", {
-              className: getClassName('bpk-page-indicator__indicator', `bpk-page-indicator__indicator--${variant}`, index === currentIndex && `bpk-page-indicator__indicator--active-${variant}`)
-              // eslint-disable-next-line react/no-array-index-key
-            }, `indicator-${index}`))
-          })
-        }), showNav && /*#__PURE__*/_jsx(NavButton, {
-          currentIndex: currentIndex,
-          onClick: onClick,
-          disabled: currentIndex === totalIndicators - 1,
-          ariaLabel: nextNavLabel,
-          direction: DIRECTIONS.NEXT
-        })]
-      })
+  const customStyle = {
+    '--scroll-index': totalIndicators > DISPLAYED_TOTAL ? Math.min(currentIndex - START_SCROLL_INDEX, totalIndicators - DISPLAYED_TOTAL) : 0
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    "aria-hidden": isInteractive ? 'false' : 'true',
+    "data-testid": "indicator-container",
+    children: /*#__PURE__*/_jsxs("div", {
+      className: getClassName('bpk-page-indicator', showNav && 'bpk-page-indicator__showNav'),
+      children: [showNav && /*#__PURE__*/_jsx(NavButton, {
+        currentIndex: currentIndex,
+        onClick: onClick,
+        disabled: currentIndex === 0,
+        direction: DIRECTIONS.PREV,
+        ariaLabel: prevNavLabel
+      }), /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-page-indicator__container'),
+        children: /*#__PURE__*/_jsx("div", {
+          className: getClassName('bpk-page-indicator__indicators-container'),
+          style: currentIndex > START_SCROLL_INDEX ? customStyle : undefined,
+          children: [...Array(totalIndicators)].map((val, index) => isInteractive ? /*#__PURE__*/_jsx("button", {
+            type: "button",
+            onClick: e => {
+              onClick(e, index, DIRECTIONS.INDICATORS);
+            },
+            className: getClassName('bpk-page-indicator__indicator', `bpk-page-indicator__indicator--${variant}`, index === currentIndex && `bpk-page-indicator__indicator--active-${variant}`),
+            "aria-label": `${indicatorLabel} ${index + 1}`,
+            "aria-current": currentIndex === index ? 'true' : 'false'
+            // eslint-disable-next-line react/no-array-index-key
+          }, `indicator-${index}`) : /*#__PURE__*/_jsx("div", {
+            className: getClassName('bpk-page-indicator__indicator', `bpk-page-indicator__indicator--${variant}`, index === currentIndex && `bpk-page-indicator__indicator--active-${variant}`)
+            // eslint-disable-next-line react/no-array-index-key
+          }, `indicator-${index}`))
+        })
+      }), showNav && /*#__PURE__*/_jsx(NavButton, {
+        currentIndex: currentIndex,
+        onClick: onClick,
+        disabled: currentIndex === totalIndicators - 1,
+        ariaLabel: nextNavLabel,
+        direction: DIRECTIONS.NEXT
+      })]
     })
-  );
-};
-BpkPageIndicator.propTypes = {
-  indicatorLabel: PropTypes.string,
-  prevNavLabel: PropTypes.string,
-  nextNavLabel: PropTypes.string,
-  currentIndex: PropTypes.number.isRequired,
-  totalIndicators: PropTypes.number.isRequired,
-  variant: PropTypes.oneOf(Object.keys(VARIANT)),
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  showNav: PropTypes.bool
-};
-BpkPageIndicator.defaultProps = {
-  onClick: null,
-  className: null,
-  showNav: false,
-  variant: VARIANT.default
+  });
 };
 export default BpkPageIndicator;

package/bpk-component-page-indicator/src/NavButton.d.ts

@@ -0,0 +1,15 @@
+export declare const DIRECTIONS: {
+    readonly PREV: "PREV";
+    readonly INDICATORS: "INDICATORS";
+    readonly NEXT: "NEXT";
+};
+type Direction = (typeof DIRECTIONS)[keyof typeof DIRECTIONS];
+type Props = {
+    ariaLabel: string | undefined;
+    currentIndex: number;
+    direction: Direction;
+    disabled?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, newIndex: number, direction: Direction) => void;
+};
+declare const NavButton: ({ ariaLabel, currentIndex, direction, disabled, onClick, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default NavButton;

package/bpk-component-page-indicator/src/NavButton.js

@@ -14,7 +14,8 @@
  * 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 PropTypes from 'prop-types';
+ */
+
 import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";
 import { withButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
 import LeftArrowIcon from "../../bpk-component-icon/lg/chevron-left";
@@ -27,38 +28,24 @@ export const DIRECTIONS = {
 };
 const AlignedLeftArrowIcon = withButtonAlignment(withRtlSupport(LeftArrowIcon));
 const AlignedRightArrowIcon = withButtonAlignment(withRtlSupport(RightArrowIcon));
-const NavButton = props => {
-  const {
-    ariaLabel,
-    currentIndex,
-    direction,
-    disabled,
-    onClick
-  } = props;
-  return /*#__PURE__*/_jsx(BpkButtonV2, {
-    iconOnly: true,
-    type: BUTTON_TYPES.link,
-    onClick: e => {
-      if (direction === DIRECTIONS.PREV) {
-        onClick(e, currentIndex - 1, direction);
-      } else {
-        onClick(e, currentIndex + 1, direction);
-      }
-    },
-    "aria-label": ariaLabel,
-    disabled: disabled,
-    children: direction === DIRECTIONS.PREV ? /*#__PURE__*/_jsx(AlignedLeftArrowIcon, {}) : /*#__PURE__*/_jsx(AlignedRightArrowIcon, {})
-  });
-};
-NavButton.propTypes = {
-  direction: PropTypes.oneOf(Object.keys(DIRECTIONS)).isRequired,
-  disabled: PropTypes.bool,
-  ariaLabel: PropTypes.string.isRequired,
-  currentIndex: PropTypes.number.isRequired,
-  onClick: PropTypes.func
-};
-NavButton.defaultProps = {
-  disabled: false,
-  onClick: null
-};
+const NavButton = ({
+  ariaLabel,
+  currentIndex,
+  direction,
+  disabled = false,
+  onClick = () => {}
+}) => /*#__PURE__*/_jsx(BpkButtonV2, {
+  iconOnly: true,
+  type: BUTTON_TYPES.link,
+  onClick: e => {
+    if (direction === DIRECTIONS.PREV) {
+      onClick(e, currentIndex - 1, direction);
+    } else {
+      onClick(e, currentIndex + 1, direction);
+    }
+  },
+  "aria-label": ariaLabel,
+  disabled: disabled,
+  children: direction === DIRECTIONS.PREV ? /*#__PURE__*/_jsx(AlignedLeftArrowIcon, {}) : /*#__PURE__*/_jsx(AlignedRightArrowIcon, {})
+});
 export default NavButton;

package/bpk-component-price/src/BpkPrice.js

@@ -40,6 +40,7 @@ const BpkPrice = props => {
   const {
     align,
     className,
+    dataAttributes,
     icon,
     leadingClassName,
     leadingText,
@@ -107,6 +108,7 @@ const BpkPrice = props => {
         children: /*#__PURE__*/_jsx(BpkText, {
           textStyle: priceTextStyle,
           tagName: "span",
+          ...dataAttributes,
           children: price
         })
       }), icon && /*#__PURE__*/_jsx("span", {
@@ -124,7 +126,8 @@ BpkPrice.propTypes = {
   leadingText: PropTypes.string,
   trailingText: PropTypes.string,
   previousPrice: PropTypes.string,
-  leadingClassName: PropTypes.string
+  leadingClassName: PropTypes.string,
+  dataAttributes: PropTypes.objectOf(PropTypes.string)
 };
 BpkPrice.defaultProps = {
   size: SIZES.small,
@@ -133,6 +136,7 @@ BpkPrice.defaultProps = {
   leadingText: null,
   trailingText: null,
   previousPrice: null,
-  leadingClassName: null
+  leadingClassName: null,
+  dataAttributes: {}
 };
 export default BpkPrice;

package/bpk-component-tooltip/index.d.ts

@@ -1,6 +1,6 @@
-import BpkTooltipPortal from './src/BpkTooltipPortal';
+import BpkTooltip from './src/BpkTooltip';
 import { TOOLTIP_TYPES } from './src/constants';
-import type { Props } from './src/BpkTooltipPortal';
-export type BpkTooltipPortalProps = Props;
-export default BpkTooltipPortal;
+import type { Props } from './src/BpkTooltip';
+export type BpkTooltipProps = Props;
+export default BpkTooltip;
 export { TOOLTIP_TYPES };

package/bpk-component-tooltip/index.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import BpkTooltipPortal from "./src/BpkTooltipPortal";
+import BpkTooltip from "./src/BpkTooltip";
 import { TOOLTIP_TYPES } from "./src/constants";
-export default BpkTooltipPortal;
+export default BpkTooltip;
 export { TOOLTIP_TYPES };

package/bpk-component-tooltip/src/BpkTooltip.d.ts

@@ -1,11 +1,24 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, ReactElement } from 'react';
 import { TOOLTIP_TYPES } from './constants';
-export type TooltipProps = {
+import type { Placement } from '@floating-ui/react';
+export type Props = {
+    /**
+     * Tooltips are invisible to assistive technologies such as screen readers.
+     * To improve accessibility, `ariaLabel` is required to describe the content of the tooltip to assistive technologies.
+     * The label will be used on the `target` element, so any existing `aria-label` attached to `target` will be overridden.
+     */
+    ariaLabel: string;
+    /**
+     * "target" should be a DOM element.
+     */
+    target: ReactElement<any>;
     id: string;
     children: ReactNode | string;
     type?: (typeof TOOLTIP_TYPES)[keyof typeof TOOLTIP_TYPES];
     padded?: boolean;
-    className?: string | null;
+    hideOnTouchDevices?: boolean;
+    placement?: Placement;
+    isOpen?: boolean;
 };
-declare const BpkTooltip: ({ children, className, id, padded, type, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+declare const BpkTooltip: ({ ariaLabel, children, hideOnTouchDevices, id, isOpen, padded, placement, target, type, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkTooltip;

package/bpk-component-tooltip/src/BpkTooltip.js

@@ -22,42 +22,119 @@ This is the component for the tooltip that is displayed to users.
 The actual component that developers create (i.e. the default export from this package) is BpkTooltipPortal.
 */
 
+import { cloneElement, useRef, useState, useEffect } from 'react';
+import { arrow, FloatingArrow, FloatingPortal, offset, shift, useFloating, useHover, useInteractions, useRole } from '@floating-ui/react';
+import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
 import { ARROW_ID, TOOLTIP_TYPES } from "./constants";
 import STYLES from "./BpkTooltip.module.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+
+// The stroke width is used to set the border width of the arrow.
+const strokeWidth = 1;
+// This function is to ensure the arrow alignment when used on the top and bottom
+// doesn't look clipped away from the tooltip. This is due to our use of box-shadows that makes it look floating away,
+// so we need to compensate slightly to make it look as one.
+const getArrowAlignment = placement => {
+  if (placement.includes('bottom')) {
+    return {
+      bottom: '98%'
+    };
+  }
+  if (placement.includes('top')) {
+    return {
+      top: '98%'
+    };
+  }
+  return undefined;
+};
+const hasTouchSupport = () => !!(typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0));
 const BpkTooltip = ({
+  ariaLabel,
   children,
-  className = null,
+  hideOnTouchDevices = true,
   id,
+  isOpen = false,
   padded = true,
+  placement = 'bottom',
+  target,
   type = TOOLTIP_TYPES.light,
   ...rest
 }) => {
-  const classNames = getClassName('bpk-tooltip', className);
+  const [isOpenState, setIsOpenState] = useState(isOpen);
+  const arrowRef = useRef(null);
+  useEffect(() => {
+    if (!isOpen) {
+      setIsOpenState(false);
+    }
+  }, [isOpen]);
+  const {
+    context,
+    floatingStyles,
+    refs
+  } = useFloating({
+    open: isOpenState,
+    onOpenChange: setIsOpenState,
+    placement,
+    middleware: [offset(8), shift(), arrow({
+      element: arrowRef
+    })]
+  });
+  const hover = useHover(context, {
+    mouseOnly: !hasTouchSupport() || !hideOnTouchDevices
+  });
+  const role = useRole(context, {
+    role: 'tooltip'
+  });
+  const {
+    getFloatingProps,
+    getReferenceProps
+  } = useInteractions([hover, role]);
+  const targetWithAccessibilityProps = /*#__PURE__*/cloneElement(target, {
+    tabIndex: '0',
+    'aria-label': ariaLabel,
+    role: 'tooltip',
+    ref: refs.setReference,
+    ...getReferenceProps()
+  });
+  const classNames = getClassName('bpk-tooltip');
   const innerClassNames = getClassName('bpk-tooltip__inner', type === TOOLTIP_TYPES.dark && 'bpk-tooltip__inner--dark', padded && 'bpk-tooltip__inner--padded');
   const arrowClassNames = getClassName('bpk-tooltip__arrow', type === TOOLTIP_TYPES.dark && 'bpk-tooltip__arrow--dark');
-  return /*#__PURE__*/_jsx(TransitionInitialMount, {
-    appearClassName: getClassName('bpk-tooltip--appear'),
-    appearActiveClassName: getClassName('bpk-tooltip--appear-active'),
-    transitionTimeout: 200,
-    children: /*#__PURE__*/_jsxs("section", {
-      id: id,
-      tabIndex: -1,
-      role: "dialog",
-      className: classNames,
-      ...rest,
-      children: [/*#__PURE__*/_jsx("span", {
-        id: ARROW_ID,
-        "data-popper-arrow": true,
-        className: arrowClassNames,
-        role: "presentation"
-      }), /*#__PURE__*/_jsx("div", {
-        className: innerClassNames,
-        children: children
-      })]
-    })
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [targetWithAccessibilityProps, isOpenState && /*#__PURE__*/_jsx(FloatingPortal, {
+      children: /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-tooltip--container'),
+        ref: refs.setFloating,
+        style: floatingStyles,
+        ...getFloatingProps(),
+        children: /*#__PURE__*/_jsx(TransitionInitialMount, {
+          appearClassName: getClassName('bpk-tooltip--appear'),
+          appearActiveClassName: getClassName('bpk-tooltip--appear-active'),
+          transitionTimeout: 200,
+          children: /*#__PURE__*/_jsxs("section", {
+            id: id,
+            tabIndex: -1,
+            role: "dialog",
+            className: classNames,
+            ...rest,
+            children: [/*#__PURE__*/_jsx(FloatingArrow, {
+              ref: arrowRef,
+              context: context,
+              id: ARROW_ID,
+              className: arrowClassNames,
+              role: "presentation",
+              stroke: surfaceHighlightDay,
+              strokeWidth: strokeWidth,
+              style: getArrowAlignment(context.placement)
+            }), /*#__PURE__*/_jsx("div", {
+              className: innerClassNames,
+              children: children
+            })]
+          })
+        })
+      })
+    })]
   });
 };
 export default BpkTooltip;

package/bpk-component-tooltip/src/BpkTooltip.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-tooltip-portal{z-index:900}.bpk-tooltip-portal--target{display:inline-block}.bpk-tooltip{transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;opacity:1}.bpk-tooltip--appear{opacity:0}.bpk-tooltip-portal[data-popper-placement=top] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, -1rem);transition:none}.bpk-tooltip-portal[data-popper-placement=right] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(1rem, 0);transition:none}.bpk-tooltip-portal[data-popper-placement=bottom] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(0, 1rem);transition:none}.bpk-tooltip-portal[data-popper-placement=left] .bpk-tooltip--appear:not(.bpk-tooltip--appear-active){transform:translate(-1rem, 0);transition:none}.bpk-tooltip--appear-active{transform:translate(0, 0);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;opacity:1}.bpk-tooltip__arrow{position:absolute;width:.5rem;height:.5rem;transform:rotate(45deg);border:.0625rem solid rgba(0,0,0,0);background:inherit;background-color:#fff}.bpk-tooltip-portal[data-popper-placement=top] .bpk-tooltip__arrow{bottom:-0.1875rem;border-right-color:#c1c7cf;border-bottom-color:#c1c7cf}.bpk-tooltip-portal[data-popper-placement=right] .bpk-tooltip__arrow{left:-0.1875rem;border-bottom-color:#c1c7cf;border-left-color:#c1c7cf}.bpk-tooltip-portal[data-popper-placement=bottom] .bpk-tooltip__arrow{top:-0.1875rem;border-top-color:#c1c7cf;border-left-color:#c1c7cf}.bpk-tooltip-portal[data-popper-placement=left] .bpk-tooltip__arrow{right:-0.1875rem;border-top-color:#c1c7cf;border-right-color:#c1c7cf}.bpk-tooltip__arrow--dark{background-color:#05203c}.bpk-tooltip-portal[data-popper-placement=top] .bpk-tooltip__arrow--dark{border-right-color:#05203c;border-bottom-color:#05203c}.bpk-tooltip-portal[data-popper-placement=right] .bpk-tooltip__arrow--dark{border-bottom-color:#05203c;border-left-color:#05203c}.bpk-tooltip-portal[data-popper-placement=bottom] .bpk-tooltip__arrow--dark{border-top-color:#05203c;border-left-color:#05203c}.bpk-tooltip-portal[data-popper-placement=left] .bpk-tooltip__arrow--dark{border-top-color:#05203c;border-right-color:#05203c}.bpk-tooltip__inner{overflow:hidden;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-tooltip__inner--padded{padding:.5rem 1rem}.bpk-tooltip__inner--dark{color:#fff;border:.0625rem solid #05203c;background-color:#05203c;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}
+.bpk-tooltip--container{z-index:900}.bpk-tooltip{transition:opacity 200ms ease-in-out;outline:0;opacity:1;border:.0625rem solid #e0e4e9;background-color:#fff;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}.bpk-tooltip--appear{opacity:0}.bpk-tooltip--appear-active{opacity:1}.bpk-tooltip__arrow{width:.5rem;height:.5rem;fill:#fff}.bpk-tooltip__arrow--dark{fill:#05203c}.bpk-tooltip__inner--padded{padding:.5rem 1rem}.bpk-tooltip__inner--dark{color:#fff;border:.0625rem solid #05203c;background-color:#05203c;border-radius:.5rem;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25)}

package/bpk-mixins/_buttons.scss

@@ -395,7 +395,11 @@
   background: none; /* stylelint-disable-line order/order, order/properties-order */
   box-shadow: none;
 
-  @include bpk-link;
+  @include bpk-link--implicit;
+
+  &::after {
+    bottom: auto;
+  }
 
   padding: $vertical-padding 0; /* stylelint-disable-line order/order, order/properties-order */
   color: $bpk-private-button-link-normal-foreground-day;

package/bpk-mixins/_forms.scss

@@ -627,34 +627,13 @@
 ///     @include bpk-checkbox__checkmark();
 ///   }
 @mixin bpk-checkbox__checkmark {
-  &::before,
-  &::after {
-    position: absolute;
-    content: '';
-    transform: rotate(45deg);
-    border-radius: $bpk-border-size-lg;
-    background-color: $bpk-text-primary-inverse-day;
-  }
-
-  &::before {
-    top: bpk-spacing-md() - $bpk-one-pixel-rem;
-    left: 0;
-    width: bpk-spacing-lg() / 3;
-    height: bpk-spacing-sm() - $bpk-one-pixel-rem;
-  }
-
-  &::after {
-    top: bpk-spacing-sm() / 2;
-    left: bpk-spacing-md() - $bpk-one-pixel-rem;
-    width: bpk-spacing-sm() - $bpk-one-pixel-rem;
-    height: bpk-spacing-md() + ($bpk-one-pixel-rem * 3);
-  }
+  background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
+  background-repeat: no-repeat;
+  background-position: $bpk-one-pixel-rem center;
+  background-size: calc(100% - $bpk-one-pixel-rem * 2.5) auto;
 
   &:disabled {
-    &::before,
-    &::after {
-      background-color: $bpk-text-disabled-day;
-    }
+    background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
   }
 }