@skyscanner/backpack-web 33.0.0-beta.1 → 33.1.0

package/bpk-component-accordion/src/BpkAccordionItem.js

@@ -17,10 +17,10 @@
  */import PropTypes from 'prop-types';
 import { Node, Element, useContext, cloneElement } from 'react';
 import AnimateHeight from "../../bpk-animate-height";
+import { withButtonAlignment } from "../../bpk-component-icon";
 import ChevronDownIcon from "../../bpk-component-icon/sm/chevron-down";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
-import { withButtonAlignment } from "../../bpk-component-icon";
 import { BpkAccordionContext } from "./BpkAccordion";
 import STYLES from "./BpkAccordionItem.module.css";
 import { jsxs as _jsxs } from "react/jsx-runtime";

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

@@ -18,7 +18,6 @@
 
 import component, { BADGE_TYPES, type Props } from './src/BpkBadge';
 import themeAttributes from './src/themeAttributes';
-import BpkBadgeV2 from './src/BpkBadgeV2/BpkBadge';
 export type BpkBadgeProps = Props;
 export default component;
-export { BADGE_TYPES, themeAttributes, BpkBadgeV2 };
+export { BADGE_TYPES, themeAttributes };

package/bpk-component-banner-alert/src/AnimateAndFade.js

@@ -17,11 +17,10 @@
  */
 
 import { Component } from 'react';
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
-
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { durationSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { cssModules } from "../../bpk-react-utils";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkAnimateHeight from "../../bpk-animate-height";

package/bpk-component-banner-alert/src/BpkBannerAlertInner.js

@@ -156,7 +156,6 @@ const BpkBannerAlertInner = ({
         }), dismissable && /*#__PURE__*/_jsx("span", {
           className: getClassName('bpk-banner-alert__toggle'),
           children: /*#__PURE__*/_jsx(BpkCloseButton, {
-            className: getClassName('bpk-banner-alert__toggle-button'),
             onClick: onBannerDismiss,
             "aria-label": dismissButtonLabel,
             label: dismissButtonLabel

package/bpk-component-barchart/src/BpkBarchart.js

@@ -15,8 +15,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import { Component } from 'react';
 import debounce from 'lodash.debounce';
+import { Component } from 'react';
 import { scaleLinear, scaleBand } from 'd3-scale';
 import { lineHeightSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { cssModules } from "../../bpk-react-utils";

package/bpk-component-barchart/src/BpkBarchartBars.js

@@ -14,8 +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 { scaleBand, scaleLinear } from 'd3-scale';
+ */import { scaleBand, scaleLinear } from 'd3-scale';
+import PropTypes from 'prop-types';
 import { borderRadiusXs } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import BpkBarchartBar from "./BpkBarchartBar";
 import { remToPx } from "./utils";

package/bpk-component-bottom-sheet/src/BpkBottomSheet.d.ts

@@ -15,16 +15,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import type { ReactNode } from 'react';
+import { ReactNode } from 'react';
 import type { Props as BottomSheetProps } from './BpkBottomSheet';
 export type Props = Partial<BottomSheetProps> & {
+  actionText?: string;
+  ariaLabelledby: string;
   children: ReactNode;
   closeLabel?: string;
   closeOnEscPressed?: boolean;
   closeOnScrimClick?: boolean;
   id: string;
   isOpen: boolean;
+  onAction?: () => void;
   onClose: (
     arg0?: TouchEvent | MouseEvent | KeyboardEvent,
     arg1?: {
@@ -32,14 +34,7 @@ export type Props = Partial<BottomSheetProps> & {
     },
   ) => void;
   title?: string;
-  /**
-   * Because this component uses a modal on mobile viewports, you need to let it know what
-   * the root element of your application is by returning its DOM node via this prop
-   * This is to "hide" your application from screen readers whilst the modal is open.
-   * The "pagewrap" element id is a convention we use internally at Skyscanner. In most cases it should "just work".
-  */
-  getApplicationElement: () => HTMLElement | null;
-  renderTarget?: null | HTMLElement | (() => null | HTMLElement);
+  wide?: boolean;
 };
-declare const BpkBottomSheet: ({ closeLabel, closeOnEscPressed, closeOnScrimClick, id, isOpen, onClose, title, renderTarget, ...rest }: Props) => JSX.Element;
+declare const BpkBottomSheet: ({ actionText, ariaLabelledby, children, closeLabel, closeOnEscPressed, closeOnScrimClick, id, isOpen, onAction, onClose, title, wide, ...rest }: Props) => JSX.Element;
 export default BpkBottomSheet;

package/bpk-component-bottom-sheet/src/BpkBottomSheet.js

@@ -15,16 +15,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { useState } from "react";
-import { Portal, cssModules } from "../../bpk-react-utils";
-import { withScrim } from "../../bpk-scrim-utils";
-import BpkBottomSheetInner from "./BpkBottomSheetInner";
+import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import { BpkButtonLink } from "../../bpk-component-link";
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkCloseButton from "../../bpk-component-close-button";
+import { BpkDialogWrapper, cssModules } from "../../bpk-react-utils";
+import BpkNavigationBar from "../../bpk-component-navigation-bar";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
 import STYLES from "./BpkBottomSheet.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const ScrimBpkBottomSheetInner = withScrim(BpkBottomSheetInner);
 const BpkBottomSheet = ({
   actionText = '',
+  ariaLabelledby,
+  children,
   closeLabel = '',
   closeOnEscPressed = false,
   closeOnScrimClick = false,
@@ -32,36 +41,65 @@ const BpkBottomSheet = ({
   isOpen,
   onAction = () => null,
   onClose,
-  renderTarget,
   title = '',
-  wide = false,
-  ...rest
+  wide = false
 }) => {
-  const [exiting, setExitting] = useState(false);
-  const handleClose = (arg0, arg1) => {
-    setExitting(true);
+  const [exiting, setExiting] = useState(false);
+  const animationTimeout = 240;
+  const handleClose = (timeout, arg0, arg1) => {
+    setExiting(true);
     setTimeout(() => {
       onClose(arg0, arg1);
-      setExitting(false);
-    }, 240);
+      setExiting(false);
+    }, timeout);
   };
-  return /*#__PURE__*/_jsx(Portal, {
-    isOpen: isOpen,
-    onClose: handleClose,
-    closeOnEscPressed: closeOnEscPressed,
-    renderTarget: renderTarget,
-    children: /*#__PURE__*/_jsx(ScrimBpkBottomSheetInner, {
+  const headingId = `bpk-bottom-sheet-heading-${id}`;
+  const dialogClassName = getClassName('bpk-bottom-sheet', wide && 'bpk-bottom-sheet--wide');
+  return /*#__PURE__*/_jsx(BpkBreakpoint, {
+    query: BREAKPOINTS.ABOVE_MOBILE,
+    children: isAboveMobile => /*#__PURE__*/_jsx(BpkDialogWrapper, {
+      ariaLabelledby: ariaLabelledby,
+      dialogClassName: dialogClassName,
       id: id,
-      onClose: handleClose,
-      closeOnScrimClick: closeOnScrimClick,
-      containerClassName: getClassName('bpk-bottom-sheet--container'),
-      title: title,
-      closeLabel: closeLabel,
-      actionText: actionText,
-      onAction: onAction,
-      wide: wide,
+      isOpen: isOpen,
+      onClose: (arg0, arg1) => handleClose(isAboveMobile ? 0 : animationTimeout, arg0, arg1),
       exiting: exiting,
-      ...rest
+      transitionClassNames: {
+        appear: getClassName('bpk-bottom-sheet--appear'),
+        appearActive: getClassName('bpk-bottom-sheet--appear-active'),
+        exit: getClassName('bpk-bottom-sheet--exit')
+      },
+      closeOnEscPressed: closeOnEscPressed,
+      closeOnScrimClick: closeOnScrimClick,
+      timeout: {
+        appear: animationTimeout,
+        exit: isAboveMobile ? 0 : animationTimeout
+      },
+      children: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("header", {
+          className: getClassName('bpk-bottom-sheet--header'),
+          children: /*#__PURE__*/_jsx(BpkNavigationBar, {
+            id: headingId,
+            title: title && /*#__PURE__*/_jsx(BpkText, {
+              id: headingId,
+              textStyle: TEXT_STYLES.label1,
+              tagName: "h2",
+              children: title
+            }),
+            leadingButton: /*#__PURE__*/_jsx(BpkCloseButton, {
+              label: closeLabel,
+              onClick: (arg0, arg1) => handleClose(isAboveMobile ? 0 : animationTimeout, arg0, arg1)
+            }),
+            trailingButton: actionText && onAction ? /*#__PURE__*/_jsx(BpkButtonLink, {
+              onClick: onAction,
+              children: actionText
+            }) : null
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: getClassName('bpk-bottom-sheet--content'),
+          children: children
+        })]
+      })
     })
   });
 };

package/bpk-component-bottom-sheet/src/BpkBottomSheet.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-bottom-sheet--container{display:flex;padding:1.5rem}@media(max-width: 32rem){.bpk-bottom-sheet--container{padding:0;overflow:hidden}}
+.bpk-bottom-sheet{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-bottom-sheet{position:fixed;bottom:0;height:fit-content;max-height:90%;margin-bottom:0;border-radius:1.5rem 1.5rem 0 0;overflow-x:hidden}}.bpk-bottom-sheet::-webkit-scrollbar{display:none}.bpk-bottom-sheet--appear{animation-duration:200ms;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear{transform:scale(0.9);opacity:0;animation:none}}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear-active{transform:scale(1);opacity:1}}.bpk-bottom-sheet--exit{animation-direction:reverse;animation-duration:200ms;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--content{padding:1rem;flex:1;overflow-y:auto}@media(min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}.bpk-bottom-sheet--header{position:sticky;top:0;z-index:899;box-shadow:0 -1px 0 0 #c1c7cf inset}@keyframes slide-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}

package/bpk-component-breakpoint/src/BpkBreakpoint.js

@@ -18,7 +18,6 @@
 
 import { useState, useEffect } from 'react';
 import MediaQuery from "react-responsive/dist/react-responsive";
-
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { breakpoints } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-button/src/BpkButtonDestructive.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#c80456;color:var(--bpk-button-destructive-text-color, rgb(200, 4, 86));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, rgb(200, 4, 86))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, rgb(200, 4, 86))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#c80456;background-color:var(--bpk-button-destructive-active-background-color, rgb(200, 4, 86))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}
+.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}

package/bpk-component-button/src/BpkButtonLink.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link:active{background:none;color:#154679;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}
+.bpk-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}

package/bpk-component-button/src/BpkButtonLinkOnDark.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}
+.bpk-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}

package/bpk-component-button/src/BpkButtonSecondaryOnDark.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:#243346;background-color:var(--bpk-button-secondary-on-dark-background-color, rgb(36, 51, 70))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:rgba(255,255,255,.2)}
+.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:rgba(255,255,255,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:rgba(255,255,255,.2)}

package/bpk-component-button/src/BpkButtonV2/BpkButton.d.ts

@@ -18,4 +18,4 @@
 
 /// <reference types="react" />
 import type { Props } from './common-types';
-export declare const BpkButtonV2: ({ blank, children, className, disabled, href, iconOnly, onClick, rel: propRel, size, submit, type, ...rest }: Props) => JSX.Element;
+export declare const BpkButtonV2: ({ blank, children, className, disabled, fullWidth, href, iconOnly, onClick, rel: propRel, size, submit, type, ...rest }: Props) => JSX.Element;

package/bpk-component-button/src/BpkButtonV2/BpkButton.js

@@ -27,6 +27,7 @@ export const BpkButtonV2 = ({
   children,
   className = null,
   disabled = false,
+  fullWidth = false,
   href = null,
   iconOnly = false,
   onClick = () => {},
@@ -36,7 +37,7 @@ export const BpkButtonV2 = ({
   type = BUTTON_TYPES.primary,
   ...rest
 }) => {
-  const classNames = getCommonClassName('bpk-button', size === SIZE_TYPES.large && 'bpk-button--large', iconOnly && 'bpk-button--icon-only', iconOnly && size === SIZE_TYPES.large && 'bpk-button--large-icon-only', `bpk-button--${type}`, className);
+  const classNames = getCommonClassName('bpk-button', size === SIZE_TYPES.large && 'bpk-button--large', iconOnly && 'bpk-button--icon-only', iconOnly && size === SIZE_TYPES.large && 'bpk-button--large-icon-only', `bpk-button--${type}`, fullWidth && 'bpk-button--full-width', className);
   const target = blank ? '_blank' : '';
   const rel = blank ? propRel || 'noopener noreferrer' : propRel;
   if (!disabled && href) {

package/bpk-component-button/src/BpkButtonV2/BpkButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#c80456;color:var(--bpk-button-destructive-text-color, rgb(200, 4, 86));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, rgb(200, 4, 86))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#c80456;background-color:var(--bpk-button-destructive-hover-background-color, rgb(200, 4, 86))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#c80456;background-color:var(--bpk-button-destructive-active-background-color, rgb(200, 4, 86))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link:active{background:none;color:#154679;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#154679;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:#243346;background-color:var(--bpk-button-secondary-on-dark-background-color, rgb(36, 51, 70))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:rgba(255,255,255,.2)}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}
+.bpk-button{display:inline-block;min-height:2.25rem;margin:0;padding:.375rem 1rem;border:0;border-radius:.5rem;text-align:center;text-decoration:none;cursor:pointer;vertical-align:middle;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:700;color:#fff;color:var(--bpk-button-primary-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-hover-background-color, rgb(21, 70, 121))}.bpk-button:active{color:#fff;color:var(--bpk-button-primary-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-active-background-color, rgb(21, 70, 121))}.bpk-button:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-button--large{min-height:3rem;padding:.75rem 1rem}.bpk-button--icon-only{border-radius:.5rem;padding-right:.625rem;padding-left:.625rem;border-radius:.5rem}.bpk-button--large-icon-only{border-radius:.5rem;padding-right:.75rem;padding-left:.75rem;border-radius:.5rem}.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}.bpk-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:rgba(255,255,255,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:rgba(255,255,255,.2)}.bpk-button--full-width{display:block;width:100%}.bpk-button span>svg{display:block}.bpk-button svg{fill:currentcolor}

package/bpk-component-button/src/BpkButtonV2/common-types.d.ts

@@ -41,6 +41,7 @@ export type Props = {
   size?: SizeType;
   className?: string | null;
   disabled?: boolean;
+  fullWidth?: boolean;
   iconOnly?: boolean;
   onClick?: (event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => void;
   rel?: string | undefined;

package/bpk-component-calendar/src/BpkCalendarGrid.js

@@ -21,9 +21,8 @@ import { cssModules, isDeviceIos } from "../../bpk-react-utils";
 import Week from "./Week";
 import { addMonths, formatIsoDate, getCalendarMonthWeeks, isSameMonth } from "./date-utils";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
-import { addCalendarGridTransition } from "./BpkCalendarGridTransition";
 import STYLES from "./BpkCalendarGrid.module.css";
-
+import { addCalendarGridTransition } from "./BpkCalendarGridTransition";
 // This should be imported after `./BpkCalendarGrid.module.css`.
 // Because of how css specificity works the class `bpk-calendar-grid-transition__grid` needs to be defined
 // after `bpk-calendar-grid` (defined by BpkCalendarGrid.module.css) so it can override width and display of the calendar

package/bpk-component-calendar/src/Week.js

@@ -20,11 +20,11 @@ import { Component } from 'react';
 import { cssModules } from "../../bpk-react-utils";
 import { isSameDay, isSameWeek, isSameMonth, isToday, isWithinRange, startOfMonth, endOfMonth } from "./date-utils";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
-import { SELECTION_TYPES } from "./BpkCalendarDate";
 // TODO: Move this to `Week.scss`
 // This should be using its own css file as `BpkCalendarGrid` is also importing `BpkCalendarGrid.module.css`
 // and the order of css imports can break the component.
 import STYLES from "./BpkCalendarGrid.module.css";
+import { SELECTION_TYPES } from "./BpkCalendarDate";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const shallowEqualProps = (props1, props2, propList) => {

package/bpk-component-calendar/src/composeCalendar.d.ts

@@ -71,6 +71,9 @@ export type Props = {
     preventKeyboardFocus?: boolean;
     selectionConfiguration?: SelectionConfiguration;
     gridClassName?: string | null;
+    /**
+     * Sets the height of month rows in 'rem' units. If not specified, the default value of `2.75rem` will be used.
+     */
     customRowHeight?: number;
     /**
      * Key to be used to pick the desired weekDay format from the `daysOfWeek` object, for example: `nameAbbr` or `nameNarrow`.
@@ -93,5 +96,5 @@ export type Props = {
      */
     dateProps?: {} | null;
 };
-declare const composeCalendar: (Nav: ComponentType<any> | string | null, GridHeader: ComponentType<any> | string | null, Grid: ComponentType<any> | string, CalendarDate: ComponentType<any> | string | null) => ({ changeMonthLabel, className, dateModifiers, dateProps, daysOfWeek, fixedWidth, focusedDate, formatDateFull, formatMonth, gridClassName, gridProps, headerProps, id, markOutsideDays, markToday, maxDate, minDate, month, navProps, nextMonthLabel, onDateClick, onDateKeyDown, onMonthChange, preventKeyboardFocus, previousMonthLabel, selectionConfiguration, weekDayKey, weekStartsOn, }: Props) => JSX.Element;
+declare const composeCalendar: (Nav: ComponentType<any> | string | null, GridHeader: ComponentType<any> | string | null, Grid: ComponentType<any> | string, CalendarDate: ComponentType<any> | string | null) => ({ changeMonthLabel, className, customRowHeight, dateModifiers, dateProps, daysOfWeek, fixedWidth, focusedDate, formatDateFull, formatMonth, gridClassName, gridProps, headerProps, id, markOutsideDays, markToday, maxDate, minDate, month, navProps, nextMonthLabel, onDateClick, onDateKeyDown, onMonthChange, preventKeyboardFocus, previousMonthLabel, selectionConfiguration, weekDayKey, weekStartsOn, }: Props) => JSX.Element;
 export default composeCalendar;

package/bpk-component-calendar/src/date-utils.d.ts

@@ -16,25 +16,25 @@
  * limitations under the License.
  */
 
-import startOfMonth from 'date-fns/startOfMonth';
-import endOfMonth from 'date-fns/endOfMonth';
-import lastDayOfMonth from 'date-fns/lastDayOfMonth';
-import getDay from 'date-fns/getDay';
-import isWithinRange from 'date-fns/isWithinInterval';
-import isToday from 'date-fns/isToday';
-import isSaturday from 'date-fns/isSaturday';
-import isSunday from 'date-fns/isSunday';
-import isSameDay from 'date-fns/isSameDay';
-import isSameWeek from 'date-fns/isSameWeek';
-import isSameMonth from 'date-fns/isSameMonth';
-import isBefore from 'date-fns/isBefore';
-import isAfter from 'date-fns/isAfter';
-import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
-import addDays from 'date-fns/addDays';
-import addMonths from 'date-fns/addMonths';
-import startOfDay from 'date-fns/startOfDay';
-import parseISO from 'date-fns/parseISO';
-import format from 'date-fns/format';
+import { startOfMonth } from 'date-fns/startOfMonth';
+import { endOfMonth } from 'date-fns/endOfMonth';
+import { lastDayOfMonth } from 'date-fns/lastDayOfMonth';
+import { getDay } from 'date-fns/getDay';
+import { isWithinInterval as isWithinRange } from 'date-fns/isWithinInterval';
+import { isToday } from 'date-fns/isToday';
+import { isSaturday } from 'date-fns/isSaturday';
+import { isSunday } from 'date-fns/isSunday';
+import { isSameDay } from 'date-fns/isSameDay';
+import { isSameWeek } from 'date-fns/isSameWeek';
+import { isSameMonth } from 'date-fns/isSameMonth';
+import { isBefore } from 'date-fns/isBefore';
+import { isAfter } from 'date-fns/isAfter';
+import { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths';
+import { addDays } from 'date-fns/addDays';
+import { addMonths } from 'date-fns/addMonths';
+import { startOfDay } from 'date-fns/startOfDay';
+import { parseISO } from 'date-fns/parseISO';
+import { format } from 'date-fns/format';
 import type { DaysOfWeek } from './custom-proptypes';
 declare function daysInMonth(year: number, month: number): number;
 declare function getCalendarMonthWeeks(date: Date, weekStartsOn: number): Date[][];

package/bpk-component-calendar/src/date-utils.js

@@ -16,27 +16,27 @@
  * limitations under the License.
  */
 
-import startOfMonth from 'date-fns/startOfMonth';
-import endOfMonth from 'date-fns/endOfMonth';
-import lastDayOfMonth from 'date-fns/lastDayOfMonth';
-import getDay from 'date-fns/getDay';
-import isWithinRange from 'date-fns/isWithinInterval';
-import isToday from 'date-fns/isToday';
-import isSaturday from 'date-fns/isSaturday';
-import isSunday from 'date-fns/isSunday';
-import isSameDay from 'date-fns/isSameDay';
-import isSameWeek from 'date-fns/isSameWeek';
-import isSameMonth from 'date-fns/isSameMonth';
-import isBefore from 'date-fns/isBefore';
-import isAfter from 'date-fns/isAfter';
-import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
-import addDays from 'date-fns/addDays';
-import addMonths from 'date-fns/addMonths';
-import setMonth from 'date-fns/setMonth';
-import setYear from 'date-fns/setYear';
-import startOfDay from 'date-fns/startOfDay';
-import parseISO from 'date-fns/parseISO';
-import format from 'date-fns/format';
+import { startOfMonth } from 'date-fns/startOfMonth';
+import { endOfMonth } from 'date-fns/endOfMonth';
+import { lastDayOfMonth } from 'date-fns/lastDayOfMonth';
+import { getDay } from 'date-fns/getDay';
+import { isWithinInterval as isWithinRange } from 'date-fns/isWithinInterval';
+import { isToday } from 'date-fns/isToday';
+import { isSaturday } from 'date-fns/isSaturday';
+import { isSunday } from 'date-fns/isSunday';
+import { isSameDay } from 'date-fns/isSameDay';
+import { isSameWeek } from 'date-fns/isSameWeek';
+import { isSameMonth } from 'date-fns/isSameMonth';
+import { isBefore } from 'date-fns/isBefore';
+import { isAfter } from 'date-fns/isAfter';
+import { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths';
+import { addDays } from 'date-fns/addDays';
+import { addMonths } from 'date-fns/addMonths';
+import { setMonth } from 'date-fns/setMonth';
+import { setYear } from 'date-fns/setYear';
+import { startOfDay } from 'date-fns/startOfDay';
+import { parseISO } from 'date-fns/parseISO';
+import { format } from 'date-fns/format';
 const ONE_MINUTE_IN_MS = 60 * 1000;
 const ONE_HOUR_IN_MS = 60 * ONE_MINUTE_IN_MS;
 

package/bpk-component-calendar/test-utils.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import format from 'date-fns/format';
+import { format } from 'date-fns/format';
 export const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');
 export const formatDateFullArabic = date => {
   const dateString = 'EEEE, dd، MMMM، yyyy';

package/bpk-component-chip/src/BpkSelectableChip.js

@@ -18,8 +18,8 @@
 
 import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import { CHIP_TYPES } from "./commonTypes";
 import STYLES from "./BpkSelectableChip.module.css";
+import { CHIP_TYPES } from "./commonTypes";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/{bpk-component-bottom-sheet/src/BpkBottomSheetInner.d.ts → bpk-component-datatable/index.d.ts}

@@ -16,14 +16,6 @@
  * limitations under the License.
  */
 
-import type { ReactNode } from 'react';
-export type Props = {
-  children: ReactNode;
-  closeLabel?: string;
-  dialogRef: (ref: HTMLElement | null | undefined) => void;
-  id: string;
-  onClose: () => void;
-  title?: string;
-};
-declare const BpkBottomSheetInner: ({ children, closeLabel, dialogRef, id, onClose, title, }: Props) => JSX.Element;
-export default BpkBottomSheetInner;
+import BpkDataTable from './src/BpkDataTable';
+export { BpkDataTable };
+export default BpkDataTable;

package/bpk-component-datatable/src/BpkDataTable.d.ts

@@ -0,0 +1,22 @@
+/*
+ * 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.
+ */
+
+/// <reference types="react" />
+import { type BpkDataTableProps } from './common-types';
+declare const BpkDataTable: (props: BpkDataTableProps) => JSX.Element;
+export default BpkDataTable;