@skyscanner/backpack-web 42.2.0 → 42.4.0

package/bpk-component-chat-bubble/index.d.ts

@@ -0,0 +1,4 @@
+import BpkChatBubble from './src/BpkChatBubble';
+export { CHAT_BUBBLE_TYPE, CHAT_BUBBLE_POSITION } from './src/common-types';
+export type { BpkChatBubbleProps, ChatBubbleType, BubblePosition } from './src/common-types';
+export default BpkChatBubble;

package/bpk-component-chat-bubble/index.js

@@ -0,0 +1,21 @@
+/*
+ * 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 BpkChatBubble from "./src/BpkChatBubble";
+export { CHAT_BUBBLE_TYPE, CHAT_BUBBLE_POSITION } from "./src/common-types";
+export default BpkChatBubble;

package/bpk-component-chat-bubble/src/BpkChatBubble.d.ts

@@ -0,0 +1,3 @@
+import type { BpkChatBubbleProps } from './common-types';
+declare const BpkChatBubble: (props: BpkChatBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkChatBubble;

package/bpk-component-chat-bubble/src/BpkChatBubble.js

@@ -0,0 +1,107 @@
+/*
+ * 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 BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../bpk-component-button";
+import RedoSmIcon from "../../bpk-component-icon/sm/redo";
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import BpkThumbButton from "../../bpk-component-thumb-button";
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import { CHAT_BUBBLE_TYPE } from "./common-types";
+import STYLES from "./BpkChatBubble.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const clampAndSnap = (ms, maxDelay = 300) => {
+  const v = Math.min(ms, maxDelay);
+  return Math.round(v / 50) * 50;
+};
+const BpkChatBubble = props => {
+  const {
+    animationDelay = 0,
+    children,
+    type
+  } = props;
+  const userPosition = 'userPosition' in props ? props.userPosition : undefined;
+  const systemPosition = 'systemPosition' in props ? props.systemPosition : undefined;
+  const showFeedback = 'showFeedback' in props ? props.showFeedback ?? false : false;
+  const selectedFeedback = 'selectedFeedback' in props ? props.selectedFeedback ?? null : null;
+  const onFeedbackClick = 'onFeedbackClick' in props ? props.onFeedbackClick : undefined;
+  const onRetry = 'onRetry' in props ? props.onRetry : undefined;
+  const retryDisabled = 'retryDisabled' in props ? props.retryDisabled ?? false : false;
+  const retryLabel = 'retryLabel' in props ? props.retryLabel : '';
+  const onSuggestionClick = 'onSuggestionClick' in props ? props.onSuggestionClick : undefined;
+  const thumbsUpLabel = 'thumbsUpLabel' in props ? props.thumbsUpLabel ?? 'Rate as useful' : 'Rate as useful';
+  const thumbsDownLabel = 'thumbsDownLabel' in props ? props.thumbsDownLabel ?? 'Rate as not useful' : 'Rate as not useful';
+  const isUser = type === CHAT_BUBBLE_TYPE.user;
+  const isSuggestion = type === CHAT_BUBBLE_TYPE.button;
+  const isRetry = type === CHAT_BUBBLE_TYPE.retry;
+  const isBot = type === CHAT_BUBBLE_TYPE.bot;
+  const isSystem = isBot || isRetry;
+  const snapped = clampAndSnap(animationDelay);
+  const inlineStyle = {
+    '--anim-delay': `${snapped}ms`
+  };
+  const containerClassName = getClassName('bpk-chat-bubble', 'bpk-chat-bubble--animated', isUser && 'bpk-chat-bubble--user', isBot && 'bpk-chat-bubble--bot', isRetry && 'bpk-chat-bubble--retry', isSuggestion && 'bpk-chat-bubble--button', isUser && userPosition === 'first' && 'bpk-chat-bubble--user-first', isUser && userPosition === 'middle' && 'bpk-chat-bubble--user-middle', isUser && userPosition === 'last' && 'bpk-chat-bubble--user-last', isSystem && systemPosition === 'first' && 'bpk-chat-bubble--system-first', isSystem && systemPosition === 'middle' && 'bpk-chat-bubble--system-middle', isSystem && systemPosition === 'last' && 'bpk-chat-bubble--system-last');
+  if (isSuggestion) {
+    return /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: containerClassName,
+      style: inlineStyle,
+      onClick: onSuggestionClick,
+      "data-testid": "bpk-chat-bubble-suggestion",
+      ...getDataComponentAttribute('ChatBubble'),
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsxs("div", {
+    className: containerClassName,
+    style: inlineStyle,
+    "data-testid": "bpk-chat-bubble",
+    ...getDataComponentAttribute('ChatBubble'),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: getClassName('bpk-chat-bubble__content'),
+      children: [children, isRetry && onRetry && /*#__PURE__*/_jsx("div", {
+        className: getClassName('bpk-chat-bubble__retry'),
+        children: /*#__PURE__*/_jsx(BpkButton, {
+          type: BUTTON_TYPES.primary,
+          size: SIZE_TYPES.small,
+          onClick: onRetry,
+          disabled: retryDisabled,
+          leadingIcon: /*#__PURE__*/_jsx(RedoSmIcon, {}),
+          children: /*#__PURE__*/_jsx(BpkText, {
+            textStyle: TEXT_STYLES.label1,
+            children: retryLabel
+          })
+        })
+      })]
+    }), showFeedback && isBot && /*#__PURE__*/_jsxs("div", {
+      className: getClassName('bpk-chat-bubble__thumbs'),
+      children: [/*#__PURE__*/_jsx(BpkThumbButton, {
+        type: "up",
+        selected: selectedFeedback === 'up',
+        onClick: onFeedbackClick ?? (() => {}),
+        accessibilityLabel: thumbsUpLabel
+      }), /*#__PURE__*/_jsx(BpkThumbButton, {
+        type: "down",
+        selected: selectedFeedback === 'down',
+        onClick: onFeedbackClick ?? (() => {}),
+        accessibilityLabel: thumbsDownLabel
+      })]
+    })]
+  });
+};
+export default BpkChatBubble;

package/bpk-component-chat-bubble/src/BpkChatBubble.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 Skyscanner Ltd
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+@keyframes bpk-chat-bubble-entrance{from{transform:translateY(0.625rem) scale(0.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes bpk-chat-bubble-entrance-reduced{from{opacity:0}to{opacity:1}}.bpk-chat-bubble{width:fit-content;max-width:17.5rem;padding:1rem;background:#fff;color:#161616;overflow-wrap:break-word;word-wrap:break-word}.bpk-chat-bubble--bot,.bpk-chat-bubble--retry{align-self:flex-start}.bpk-chat-bubble--button,.bpk-chat-bubble--user{align-self:flex-end}.bpk-chat-bubble--button,.bpk-chat-bubble--user,.bpk-chat-bubble--bot,.bpk-chat-bubble--retry{border-radius:1.5rem}html[dir=rtl] .bpk-chat-bubble{direction:rtl}.bpk-chat-bubble--animated{transform:translateY(0.625rem) scale(0.98);opacity:0;animation:bpk-chat-bubble-entrance 200ms cubic-bezier(0.2, 0, 0, 1) forwards;animation-delay:var(--anim-delay, 0ms)}@media(prefers-reduced-motion: reduce){.bpk-chat-bubble--animated{transform:translateY(0) scale(1);animation:bpk-chat-bubble-entrance-reduced 200ms ease-out forwards}}.bpk-chat-bubble--bot,.bpk-chat-bubble--retry{text-align:start}.bpk-chat-bubble--user{background:#0062e3;color:#fff;text-align:start}.bpk-chat-bubble--button{width:fit-content;transition:transform 200ms ease-in-out,box-shadow 200ms ease-in-out;border:1px solid #0062e3;background:rgba(0,0,0,0);color:#0062e3;text-align:start;cursor:pointer;border-end-end-radius:.25rem}.bpk-no-touch-support .bpk-chat-bubble--button:hover:not(:active):not(:disabled){transform:translateY(-0.0625rem);box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}:global(.bpk-no-touch-support) .bpk-chat-bubble--button:hover:not(:active):not(:disabled){transform:translateY(-0.0625rem);box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chat-bubble--button:active{transform:translateY(0);box-shadow:none}.bpk-chat-bubble--system-first{border-end-start-radius:.25rem}.bpk-chat-bubble--system-middle{border-start-start-radius:.25rem;border-end-start-radius:.25rem}.bpk-chat-bubble--system-last{border-start-start-radius:.25rem}.bpk-chat-bubble--user-first{border-end-end-radius:.25rem}.bpk-chat-bubble--user-middle{border-start-end-radius:.25rem;border-end-end-radius:.25rem}.bpk-chat-bubble--user-last{border-start-end-radius:.25rem}.bpk-chat-bubble__content p+p{margin-top:1rem}.bpk-chat-bubble__retry{margin-top:1rem}.bpk-chat-bubble__retry button{padding:0 1rem}.bpk-chat-bubble__thumbs{display:flex;margin-top:.5rem;align-items:center;gap:1rem}

package/bpk-component-chat-bubble/src/common-types.d.ts

@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import type { ThumbsButtonType } from '../../bpk-component-thumb-button';
+export declare const CHAT_BUBBLE_TYPE: {
+    readonly user: "user";
+    readonly bot: "bot";
+    readonly retry: "retry";
+    readonly button: "button";
+};
+export declare const CHAT_BUBBLE_POSITION: {
+    readonly first: "first";
+    readonly middle: "middle";
+    readonly last: "last";
+};
+export type ChatBubbleType = (typeof CHAT_BUBBLE_TYPE)[keyof typeof CHAT_BUBBLE_TYPE];
+export type BubblePosition = (typeof CHAT_BUBBLE_POSITION)[keyof typeof CHAT_BUBBLE_POSITION];
+type BaseBubbleProps = {
+    /** Content to render inside the bubble */
+    children?: ReactNode;
+    /** Animation entrance delay in milliseconds (0–300, snapped to nearest 50ms) */
+    animationDelay?: number;
+};
+export type BpkChatBubbleProps = (BaseBubbleProps & {
+    type: 'user';
+    /** Position within a sequence of user bubbles, affects border-radius */
+    userPosition?: BubblePosition;
+}) | (BaseBubbleProps & {
+    type: 'bot';
+    /** Position within a sequence of same-sender bubbles, affects border-radius */
+    systemPosition?: BubblePosition;
+    /** Show thumbs up/down feedback buttons */
+    showFeedback?: boolean;
+    /** Currently selected feedback type */
+    selectedFeedback?: ThumbsButtonType | null;
+    /** Called when a feedback thumb button is clicked */
+    onFeedbackClick?: (type: ThumbsButtonType) => void;
+    /** Accessibility label for the thumbs up button (defaults to "Rate as useful") */
+    thumbsUpLabel?: string;
+    /** Accessibility label for the thumbs down button (defaults to "Rate as not useful") */
+    thumbsDownLabel?: string;
+}) | (BaseBubbleProps & {
+    type: 'retry';
+    /** Position within a sequence of same-sender bubbles, affects border-radius */
+    systemPosition?: BubblePosition;
+    /** Label for the retry button */
+    retryLabel: string;
+    /** Called when retry button is clicked */
+    onRetry?: () => void;
+    /** Whether the retry button is disabled */
+    retryDisabled?: boolean;
+}) | (BaseBubbleProps & {
+    type: 'button';
+    /** Called when the suggestion is clicked */
+    onSuggestionClick?: () => void;
+});
+export {};

package/bpk-component-chat-bubble/src/common-types.js

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+export const CHAT_BUBBLE_TYPE = {
+  user: 'user',
+  bot: 'bot',
+  retry: 'retry',
+  button: 'button'
+};
+export const CHAT_BUBBLE_POSITION = {
+  first: 'first',
+  middle: 'middle',
+  last: 'last'
+};

package/bpk-component-floating-notification/index.d.ts

@@ -1,3 +1,4 @@
-import BpkFloatingNotification, { type Props as BpkFloatingNotificationProps } from './src/BpkFloatingNotification';
+import BpkFloatingNotification, { NOTIFICATION_TYPES, type Props as BpkFloatingNotificationProps } from './src/BpkFloatingNotification';
 export type { BpkFloatingNotificationProps };
+export { NOTIFICATION_TYPES };
 export default BpkFloatingNotification;

package/bpk-component-floating-notification/index.js

@@ -14,5 +14,6 @@
  * 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 BpkFloatingNotification from "./src/BpkFloatingNotification";
+ */import BpkFloatingNotification, { NOTIFICATION_TYPES } from "./src/BpkFloatingNotification";
+export { NOTIFICATION_TYPES };
 export default BpkFloatingNotification;

package/bpk-component-floating-notification/src/BpkFloatingNotification.d.ts

@@ -1,4 +1,8 @@
 import type { MouseEvent, FunctionComponent } from 'react';
+export declare const NOTIFICATION_TYPES: {
+    readonly default: "default";
+    readonly critical: "critical";
+};
 export type Props = {
     animateOnEnter?: boolean;
     animateOnExit?: boolean;
@@ -16,6 +20,7 @@ export type Props = {
      */
     onExit?: () => void;
     text: string;
+    type?: (typeof NOTIFICATION_TYPES)[keyof typeof NOTIFICATION_TYPES];
     [rest: string]: any;
 };
 declare const BpkFloatingNotification: (props: Props) => import("react/jsx-runtime").JSX.Element;

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -18,13 +18,17 @@
 
 import { useEffect, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import BpkAriaLive from "../../bpk-component-aria-live";
+import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from "../../bpk-component-aria-live";
 import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import STYLES from "./BpkFloatingNotification.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+export const NOTIFICATION_TYPES = {
+  default: 'default',
+  critical: 'critical'
+};
 const BpkFloatingNotification = props => {
   const [showMessage, setShowMessage] = useState(true);
   const {
@@ -37,9 +41,10 @@ const BpkFloatingNotification = props => {
     onClick,
     onExit,
     text,
+    type = NOTIFICATION_TYPES.default,
     ...rest
   } = props;
-  const classNames = getClassName('bpk-floating-notification', className);
+  const classNames = getClassName('bpk-floating-notification', type === NOTIFICATION_TYPES.critical && 'bpk-floating-notification--critical', className);
   useEffect(() => {
     let timer;
     if (hideAfter) {
@@ -78,6 +83,7 @@ const BpkFloatingNotification = props => {
         })
       }), /*#__PURE__*/_jsx(BpkAriaLive, {
         "aria-hidden": true,
+        politenessSetting: type === NOTIFICATION_TYPES.critical ? ARIA_LIVE_POLITENESS_SETTINGS.assertive : ARIA_LIVE_POLITENESS_SETTINGS.polite,
         children: text
       }), ctaText && /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-floating-notification__cta'),

package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-floating-notification{position:fixed;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;align-items:center;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}.bpk-floating-notification__cta{margin-inline-start:auto}
+.bpk-floating-notification{position:fixed;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;align-items:center;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--critical{background-color:#e70866;color:#fff}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:currentcolor}.bpk-floating-notification__text{margin-inline-end:.5rem}.bpk-floating-notification__cta{margin-inline-start:auto}

package/bpk-component-info-banner/src/BpkInfoBanner.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-info-banner{padding:.5rem 1rem;overflow:hidden;border-radius:.5rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner--style-default{background-color:#eff3f8}.bpk-info-banner--style-onContrast{background-color:#fff}.bpk-info-banner__header{display:flex;flex-direction:row;align-items:flex-start}.bpk-info-banner__header--expandable{width:100%;padding:0;border:none;background-color:rgba(0,0,0,0);text-align:start;cursor:pointer}.bpk-info-banner__icon,.bpk-info-banner__toggle{padding:.125rem 0}.bpk-info-banner__message{padding:.25rem .5rem;flex-grow:1}.bpk-info-banner__success-icon{fill:#0c838a}.bpk-info-banner__warning-icon{fill:#f55d42}.bpk-info-banner__error-icon{fill:#e70866}.bpk-info-banner__info-icon{fill:#626971}.bpk-info-banner__toggle-button{padding:0;border:0;background-color:rgba(0,0,0,0);cursor:pointer;appearance:none;fill:#626971}.bpk-info-banner__children-container{color:#161616;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner__children-container--with-action{padding:.25rem 0 .25rem}.bpk-info-banner__children-container--no-action{padding:.25rem 0 .5rem}
+.bpk-info-banner{padding:.5rem 1rem;overflow:hidden;border-radius:.5rem;margin:0;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner--style-default{background-color:#eff3f8}.bpk-info-banner--style-onContrast{background-color:#fff}.bpk-info-banner__header{display:flex;flex-direction:row;align-items:flex-start}.bpk-info-banner__header--expandable{width:100%;padding:0;border:none;background-color:rgba(0,0,0,0);text-align:start;cursor:pointer}.bpk-info-banner__icon,.bpk-info-banner__toggle{padding:.125rem 0}.bpk-info-banner__message{padding:.25rem .5rem;flex-grow:1}.bpk-info-banner__success-icon{fill:#0c838a}.bpk-info-banner__warning-icon{fill:#f55d42}.bpk-info-banner__error-icon{fill:#e70866}.bpk-info-banner__info-icon{fill:#626971}.bpk-info-banner__critical-icon{fill:#fff}.bpk-info-banner--critical{background-color:#e70866;color:#fff}.bpk-info-banner--critical .bpk-info-banner__message{color:#fff}.bpk-info-banner--critical .bpk-info-banner__toggle-button{fill:#fff}.bpk-info-banner--critical .bpk-info-banner__children-container,.bpk-info-banner--critical .bpk-info-banner__children-container--with-action,.bpk-info-banner--critical .bpk-info-banner__children-container--no-action{color:#fff}.bpk-info-banner__toggle-button{padding:0;border:0;background-color:rgba(0,0,0,0);cursor:pointer;appearance:none;fill:#626971}.bpk-info-banner__children-container{color:#161616;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-info-banner__children-container--with-action{padding:.25rem 0 .25rem}.bpk-info-banner__children-container--no-action{padding:.25rem 0 .5rem}

package/bpk-component-info-banner/src/BpkInfoBannerInner.js

@@ -27,6 +27,7 @@ import BpkCloseButton from "../../bpk-component-close-button";
 import { withButtonAlignment } from "../../bpk-component-icon";
 import ChevronDownIcon from "../../bpk-component-icon/sm/chevron-down";
 import ChevronUpIcon from "../../bpk-component-icon/sm/chevron-up";
+import ExclamationCircleIcon from "../../bpk-component-icon/sm/exclamation-circle";
 import InfoCircleIcon from "../../bpk-component-icon/sm/information-circle";
 import TickCircleIcon from "../../bpk-component-icon/sm/tick-circle";
 import BpkLink from "../../bpk-component-link";
@@ -49,14 +50,16 @@ const getIconForType = (type, CustomIcon) => {
     [ALERT_TYPES.SUCCESS]: getClassName('bpk-info-banner__success-icon'),
     [ALERT_TYPES.WARNING]: getClassName('bpk-info-banner__warning-icon'),
     [ALERT_TYPES.ERROR]: getClassName('bpk-info-banner__error-icon'),
-    [ALERT_TYPES.INFO]: getClassName('bpk-info-banner__info-icon')
+    [ALERT_TYPES.INFO]: getClassName('bpk-info-banner__info-icon'),
+    [ALERT_TYPES.CRITICAL]: getClassName('bpk-info-banner__critical-icon')
   };
   const className = classMap[type];
   const componentMap = {
     [ALERT_TYPES.SUCCESS]: TickCircleIcon,
     [ALERT_TYPES.WARNING]: InfoCircleIcon,
     [ALERT_TYPES.ERROR]: InfoCircleIcon,
-    [ALERT_TYPES.INFO]: InfoCircleIcon
+    [ALERT_TYPES.INFO]: InfoCircleIcon,
+    [ALERT_TYPES.CRITICAL]: ExclamationCircleIcon
   };
   const Icon = CustomIcon || componentMap[type];
   const AlignedIcon = withButtonAlignment(Icon);
@@ -139,7 +142,8 @@ const BpkInfoBannerInner = ({
           children: /*#__PURE__*/_jsx(BpkCloseButton, {
             onClick: onBannerDismiss,
             "aria-label": dismissButtonLabel,
-            label: dismissButtonLabel
+            label: dismissButtonLabel,
+            onDark: type === ALERT_TYPES.CRITICAL
           })
         })]
       }), /*#__PURE__*/_jsxs(BpkAnimateHeight, {
@@ -149,6 +153,7 @@ const BpkInfoBannerInner = ({
           className: childrenContainerClassName,
           children: children
         }), isExpandable && action && /*#__PURE__*/_jsx(BpkLink, {
+          alternate: type === ALERT_TYPES.CRITICAL,
           onClick: action.callback,
           href: "#",
           children: action.title

package/bpk-component-info-banner/src/common-types.d.ts

@@ -4,6 +4,7 @@ export declare const ALERT_TYPES: {
     readonly WARNING: "warning";
     readonly ERROR: "error";
     readonly INFO: "info";
+    readonly CRITICAL: "critical";
 };
 export declare const STYLE_TYPES: {
     DEFAULT: string;

package/bpk-component-info-banner/src/common-types.js

@@ -20,7 +20,8 @@ export const ALERT_TYPES = {
   SUCCESS: 'success',
   WARNING: 'warning',
   ERROR: 'error',
-  INFO: 'info'
+  INFO: 'info',
+  CRITICAL: 'critical'
 };
 export const STYLE_TYPES = {
   DEFAULT: 'default',

package/bpk-component-layout/src/BpkBox.d.ts

@@ -1,3 +1,3 @@
 import type { BpkBoxProps } from './types';
-export declare const BpkBox: ({ children, ...props }: BpkBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BpkBox: import("react").ForwardRefExoticComponent<BpkBoxProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { BpkBoxProps };

package/bpk-component-layout/src/BpkBox.js

@@ -16,20 +16,23 @@
  * limitations under the License.
  */
 
+import { forwardRef } from 'react';
 import { Box } from '@chakra-ui/react';
 import { getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const BpkBox = ({
+export const BpkBox = /*#__PURE__*/forwardRef(({
   children,
   ...props
-}) => {
+}, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkBox'
   });
   return /*#__PURE__*/_jsx(Box, {
+    ref: ref,
     ...getDataComponentAttribute('Box'),
     ...processedProps,
     children: children
   });
-};
+});
+BpkBox.displayName = 'BpkBox';

package/bpk-component-layout/src/BpkFlex.d.ts

@@ -1,3 +1,3 @@
 import type { BpkFlexProps } from './types';
-export declare const BpkFlex: ({ align, basis, children, direction, grow, inline, justify, shrink, wrap, ...props }: BpkFlexProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BpkFlex: import("react").ForwardRefExoticComponent<BpkFlexProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { BpkFlexProps };

package/bpk-component-layout/src/BpkFlex.js

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
+import { forwardRef } from 'react';
 import { Flex } from '@chakra-ui/react';
 import { getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const BpkFlex = ({
+export const BpkFlex = /*#__PURE__*/forwardRef(({
   align,
   basis,
   children,
@@ -29,12 +30,14 @@ export const BpkFlex = ({
   inline,
   justify,
   shrink,
+  textStyle,
   wrap,
   ...props
-}) => {
+}, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkFlex',
     responsiveProps: {
+      textStyle,
       flexDirection: direction,
       justifyContent: justify,
       alignItems: align,
@@ -45,9 +48,11 @@ export const BpkFlex = ({
     }
   });
   return /*#__PURE__*/_jsx(Flex, {
+    ref: ref,
     ...getDataComponentAttribute('Flex'),
     ...processedProps,
     display: inline ? 'inline-flex' : undefined,
     children: children
   });
-};
+});
+BpkFlex.displayName = 'BpkFlex';

package/bpk-component-layout/src/BpkGrid.d.ts

@@ -1,3 +1,3 @@
 import type { BpkGridProps } from './types';
-export declare const BpkGrid: ({ align, autoColumns, autoFlow, autoRows, children, column, inline, justify, row, templateAreas, templateColumns, templateRows, ...props }: BpkGridProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BpkGrid: import("react").ForwardRefExoticComponent<BpkGridProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { BpkGridProps };

package/bpk-component-layout/src/BpkGrid.js

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
+import { forwardRef } from 'react';
 import { Grid } from '@chakra-ui/react';
 import { getDataComponentAttribute } from "../../bpk-react-utils";
 import { processBpkComponentProps } from "./tokenUtils";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const BpkGrid = ({
+export const BpkGrid = /*#__PURE__*/forwardRef(({
   align,
   autoColumns,
   autoFlow,
@@ -33,11 +34,13 @@ export const BpkGrid = ({
   templateAreas,
   templateColumns,
   templateRows,
+  textStyle,
   ...props
-}) => {
+}, ref) => {
   const processedProps = processBpkComponentProps(props, {
     component: 'BpkGrid',
     responsiveProps: {
+      textStyle,
       justifyContent: justify,
       alignItems: align,
       gridTemplateColumns: templateColumns,
@@ -51,9 +54,11 @@ export const BpkGrid = ({
     }
   });
   return /*#__PURE__*/_jsx(Grid, {
+    ref: ref,
     ...getDataComponentAttribute('Grid'),
     ...processedProps,
     display: inline ? 'inline-grid' : undefined,
     children: children
   });
-};
+});
+BpkGrid.displayName = 'BpkGrid';

package/bpk-component-layout/src/BpkGridItem.d.ts

@@ -1,3 +1,3 @@
 import type { BpkGridItemProps } from './types';
-export declare const BpkGridItem: ({ area, children, colEnd, colSpan, colStart, rowEnd, rowSpan, rowStart, ...props }: BpkGridItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BpkGridItem: import("react").ForwardRefExoticComponent<BpkGridItemProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { BpkGridItemProps };

package/bpk-component-layout/src/BpkGridItem.js

@@ -16,11 +16,12 @@
  * limitations under the License.
  */
 
+import { forwardRef } from 'react';
 import { GridItem } from '@chakra-ui/react';
 import { getDataComponentAttribute } from "../../bpk-react-utils";
-import { processBpkProps } from "./tokenUtils";
+import { processBpkComponentProps } from "./tokenUtils";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const BpkGridItem = ({
+export const BpkGridItem = /*#__PURE__*/forwardRef(({
   area,
   children,
   colEnd,
@@ -29,10 +30,17 @@ export const BpkGridItem = ({
   rowEnd,
   rowSpan,
   rowStart,
+  textStyle,
   ...props
-}) => {
-  const processedProps = processBpkProps(props);
+}, ref) => {
+  const processedProps = processBpkComponentProps({
+    textStyle,
+    ...props
+  }, {
+    component: 'BpkGridItem'
+  });
   return /*#__PURE__*/_jsx(GridItem, {
+    ref: ref,
     ...getDataComponentAttribute('GridItem'),
     ...processedProps,
     area: area,
@@ -44,4 +52,5 @@ export const BpkGridItem = ({
     rowSpan: rowSpan,
     children: children
   });
-};
+});
+BpkGridItem.displayName = 'BpkGridItem';

package/bpk-component-layout/src/BpkStack.d.ts

@@ -1,5 +1,5 @@
 import type { BpkStackProps } from './types';
-export declare const BpkStack: ({ children, ...props }: BpkStackProps) => import("react/jsx-runtime").JSX.Element;
-export declare const BpkHStack: ({ children, ...props }: BpkStackProps) => import("react/jsx-runtime").JSX.Element;
-export declare const BpkVStack: ({ children, ...props }: BpkStackProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BpkStack: import("react").ForwardRefExoticComponent<BpkStackProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const BpkHStack: import("react").ForwardRefExoticComponent<BpkStackProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const BpkVStack: import("react").ForwardRefExoticComponent<BpkStackProps & import("react").RefAttributes<HTMLDivElement>>;
 export type { BpkStackProps };