@skyscanner/backpack-web 42.10.0-dev-v24443725500.1 → 42.10.0

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

@@ -18,17 +18,9 @@
 
 import { defineConfig } from '@chakra-ui/react';
 
-// Import only the tokens needed for border/radius/shadow utilities.
-// Typography tokens have been moved to resolveTextStyle.ts where textStyle is
-// resolved inline, avoiding the need to bundle the full text style map in the
-// Chakra theme config.
-import {
-// Border sizes
-borderSizeSm, borderSizeLg, borderSizeXl,
-// Border radii
-borderRadiusXs, borderRadiusSm, borderRadiusMd, borderRadiusLg, borderRadiusXl, borderRadiusFull,
-// Box shadows
-boxShadowSm, boxShadowLg, boxShadowXl } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+// Import tokens from Backpack foundations
+// Note: Some tokens may not be in TypeScript definitions but exist at runtime
+import * as bpkTokens from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 // NOTE:
 // We intentionally do not use the raw breakpoint *values* from foundations here.
 // Foundations exports breakpoint values such as `breakpointMobile = "32rem"` which
@@ -108,9 +100,9 @@ const spacingMap = {
  * These come directly from @skyscanner/bpk-foundations-web
  */
 const borderSizeMap = {
-  'bpk-border-size-sm': borderSizeSm,
-  'bpk-border-size-lg': borderSizeLg,
-  'bpk-border-size-xl': borderSizeXl
+  'bpk-border-size-sm': bpkTokens.borderSizeSm,
+  'bpk-border-size-lg': bpkTokens.borderSizeLg,
+  'bpk-border-size-xl': bpkTokens.borderSizeXl
 };
 
 /**
@@ -119,12 +111,12 @@ const borderSizeMap = {
  */
 const borderRadiusMap = {
   'bpk-border-radius-none': '0',
-  'bpk-border-radius-xs': borderRadiusXs,
-  'bpk-border-radius-sm': borderRadiusSm,
-  'bpk-border-radius-md': borderRadiusMd,
-  'bpk-border-radius-lg': borderRadiusLg,
-  'bpk-border-radius-xl': borderRadiusXl,
-  'bpk-border-radius-full': borderRadiusFull
+  'bpk-border-radius-xs': bpkTokens.borderRadiusXs,
+  'bpk-border-radius-sm': bpkTokens.borderRadiusSm,
+  'bpk-border-radius-md': bpkTokens.borderRadiusMd,
+  'bpk-border-radius-lg': bpkTokens.borderRadiusLg,
+  'bpk-border-radius-xl': bpkTokens.borderRadiusXl,
+  'bpk-border-radius-full': bpkTokens.borderRadiusFull
 };
 
 /**
@@ -132,9 +124,9 @@ const borderRadiusMap = {
  * These come directly from @skyscanner/bpk-foundations-web
  */
 const shadowMap = {
-  'bpk-shadow-sm': boxShadowSm,
-  'bpk-shadow-lg': boxShadowLg,
-  'bpk-shadow-xl': boxShadowXl
+  'bpk-shadow-sm': bpkTokens.boxShadowSm,
+  'bpk-shadow-lg': bpkTokens.boxShadowLg,
+  'bpk-shadow-xl': bpkTokens.boxShadowXl
 };
 
 /**
@@ -217,6 +209,242 @@ export function getBorderRadiusValue(token) {
 export function getShadowValue(token) {
   return shadowMap[token];
 }
+
+/**
+ * Maps Backpack text style tokens to Chakra UI textStyles.
+ * CSS property values are sourced from @skyscanner/bpk-foundations-web/tokens/base.es6.
+ * Each entry mirrors the corresponding SCSS mixin in bpk-mixins/_typography.scss.
+ */
+const textStylesMap = {
+  xs: {
+    value: {
+      fontSize: bpkTokens.fontSizeXs,
+      lineHeight: bpkTokens.lineHeightXs,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  sm: {
+    value: {
+      fontSize: bpkTokens.fontSizeSm,
+      lineHeight: bpkTokens.lineHeightSm,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  base: {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBase,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  lg: {
+    value: {
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLg,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  xl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXl,
+      lineHeight: bpkTokens.lineHeightXl,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  xxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  xxxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxl,
+      lineHeight: bpkTokens.lineHeightXxxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  xxxxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxl,
+      fontWeight: bpkTokens.fontWeightBold,
+      letterSpacing: bpkTokens.letterSpacingTight
+    }
+  },
+  xxxxxl: {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxxl,
+      fontWeight: bpkTokens.fontWeightBold,
+      letterSpacing: bpkTokens.letterSpacingTight
+    }
+  },
+  caption: {
+    value: {
+      fontSize: bpkTokens.fontSizeXs,
+      lineHeight: bpkTokens.lineHeightXs,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  footnote: {
+    value: {
+      fontSize: bpkTokens.fontSizeSm,
+      lineHeight: bpkTokens.lineHeightSm,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  'label-1': {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBase,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'label-2': {
+    value: {
+      fontSize: bpkTokens.fontSizeSm,
+      lineHeight: bpkTokens.lineHeightSm,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'label-3': {
+    value: {
+      fontSize: bpkTokens.fontSizeXs,
+      lineHeight: bpkTokens.lineHeightXs,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'body-default': {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBase,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  'body-longform': {
+    value: {
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLg,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  subheading: {
+    value: {
+      fontSize: bpkTokens.fontSizeXl,
+      lineHeight: bpkTokens.lineHeightXl,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  },
+  'heading-1': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxl,
+      lineHeight: bpkTokens.lineHeightXxxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-2': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-3': {
+    value: {
+      fontSize: bpkTokens.fontSizeXl,
+      lineHeight: bpkTokens.lineHeightXlTight,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-4': {
+    value: {
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLgTight,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'heading-5': {
+    value: {
+      fontSize: bpkTokens.fontSizeBase,
+      lineHeight: bpkTokens.lineHeightBaseTight,
+      fontWeight: bpkTokens.fontWeightBold
+    }
+  },
+  'hero-1': {
+    value: {
+      fontSize: bpkTokens.fontSize8Xl,
+      lineHeight: bpkTokens.lineHeight8Xl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-2': {
+    value: {
+      fontSize: bpkTokens.fontSize7Xl,
+      lineHeight: bpkTokens.lineHeight7Xl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-3': {
+    value: {
+      fontSize: bpkTokens.fontSize6Xl,
+      lineHeight: bpkTokens.lineHeight6Xl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-4': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxxl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-5': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxxl,
+      lineHeight: bpkTokens.lineHeightXxxl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'hero-6': {
+    value: {
+      fontSize: bpkTokens.fontSizeXxxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightBlack,
+      letterSpacing: bpkTokens.letterSpacingHero
+    }
+  },
+  'editorial-1': {
+    value: {
+      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
+      fontSize: bpkTokens.fontSizeXxxxl,
+      lineHeight: bpkTokens.lineHeightXxxxl,
+      fontWeight: bpkTokens.fontWeightLight
+    }
+  },
+  'editorial-2': {
+    value: {
+      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
+      fontSize: bpkTokens.fontSizeXxl,
+      lineHeight: bpkTokens.lineHeightXxl,
+      fontWeight: bpkTokens.fontWeightLight
+    }
+  },
+  'editorial-3': {
+    value: {
+      fontFamily: `var(--bpk-larken-font-stack, ${bpkTokens.fontFamilyLarken})`,
+      fontSize: bpkTokens.fontSizeLg,
+      lineHeight: bpkTokens.lineHeightLg,
+      fontWeight: bpkTokens.fontWeightBook
+    }
+  }
+};
 export function createBpkConfig() {
   // Convert breakpoint map to Chakra UI format
   // Breakpoints in Chakra v3 are typically simple strings in the breakpoints object
@@ -224,12 +452,6 @@ export function createBpkConfig() {
   Object.entries(breakpointMap).forEach(([token, value]) => {
     chakraBreakpoints[token] = value;
   });
-
-  // textStyles have been removed from the Chakra config to reduce bundle size.
-  // Text style resolution is now handled inline by resolveTextStyle.ts via
-  // expandTextStyleProps(), which expands textStyle tokens into concrete CSS
-  // properties at prop-processing time. This means layout-only consumers that
-  // never use textStyle pay nothing for the typography map.
   return defineConfig({
     // Disable Chakra's preflight (CSS reset) so it does not override Backpack's
     // global font styles, in particular the `-webkit-font-smoothing: antialiased`
@@ -240,6 +462,7 @@ export function createBpkConfig() {
       tokens: {
         spacing: spacingMap
       },
+      textStyles: textStylesMap,
       breakpoints: chakraBreakpoints
     }
   });

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

@@ -17,7 +17,6 @@
  */
 
 import StackOptionKeys from "./BpkStack.constant";
-import { expandTextStyleProps } from "./resolveTextStyle";
 import { getSpacingValue } from "./theme";
 import { BpkBreakpointToChakraKey, isValidSpacingValue, isValidSizeValue, isValidPositionValue, isPercentage } from "./tokens";
 
@@ -35,6 +34,8 @@ import { BpkBreakpointToChakraKey, isValidSpacingValue, isValidSizeValue, isVali
 export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
   BpkBox: {
     container: [
+    // Typography
+    'textStyle',
     // Display
     'display',
     // Flex container props
@@ -51,14 +52,14 @@ export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
   },
   // Note: BpkFlex maps its public API props to these Chakra keys.
   BpkFlex: {
-    container: ['flexDirection', 'justifyContent', 'alignItems', 'flexWrap',
+    container: ['textStyle', 'flexDirection', 'justifyContent', 'alignItems', 'flexWrap',
     // Position keyword and overflow (from BpkCommonLayoutProps)
     'position', 'overflow', 'overflowX', 'overflowY'],
     item: ['flexGrow', 'flexShrink', 'flexBasis']
   },
   // Note: BpkGrid maps its public API props to these Chakra keys.
   BpkGrid: {
-    container: ['justifyContent', 'alignItems', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns',
+    container: ['textStyle', 'justifyContent', 'alignItems', 'gridTemplateColumns', 'gridTemplateRows', 'gridTemplateAreas', 'gridAutoFlow', 'gridAutoRows', 'gridAutoColumns',
     // Position keyword and overflow (from BpkCommonLayoutProps)
     'position', 'overflow', 'overflowX', 'overflowY'],
     item: [
@@ -66,11 +67,11 @@ export const BPK_RESPONSIVE_PROP_GROUPS_BY_COMPONENT = {
     'gridColumn', 'gridRow']
   },
   BpkGridItem: {
-    container: ['position', 'overflow', 'overflowX', 'overflowY']
+    container: ['textStyle', 'position', 'overflow', 'overflowX', 'overflowY']
   },
   // Note: BpkStack uses Chakra Stack option prop names directly.
   BpkStack: {
-    container: [...StackOptionKeys,
+    container: ['textStyle', ...StackOptionKeys,
     // Position keyword and overflow (from BpkCommonLayoutProps)
     'position', 'overflow', 'overflowX', 'overflowY']
   }
@@ -107,37 +108,18 @@ function filterToAllowlist(props, allowlist) {
  */
 export function processBpkComponentProps(props, options) {
   const processed = processBpkProps(props);
-
-  // --- textStyle inline resolution ---
-  // textStyle is no longer part of the Chakra theme config. Instead we resolve
-  // it here into concrete CSS properties (fontSize, lineHeight, fontWeight, etc.).
-  // The value may come from:
-  //   - responsiveProps (BpkFlex, BpkGrid explicitly pass it)
-  //   - processed props (BpkBox, BpkStack pass it via ...props)
-  const textStyleValue = options.responsiveProps?.textStyle ?? processed.textStyle;
-  delete processed.textStyle;
-  // Strip textStyle from responsiveProps without mutating the original object.
-  const {
-    textStyle: _ts,
-    ...cleanResponsiveProps
-  } = options.responsiveProps ?? {};
-  const expandedTextStyle = expandTextStyleProps(textStyleValue);
   const allowlist = BPK_RESPONSIVE_PROP_KEYS_BY_COMPONENT[options.component];
   // When responsiveProps is provided (e.g. BpkFlex maps direction→flexDirection),
   // merge it with any allowlisted props already in `processed` (e.g. position/overflow
   // that come in via ...props and are NOT included in responsiveProps).
   // responsiveProps takes precedence so that explicit prop-name mappings always win.
   const processedAllowlisted = filterToAllowlist(processed, allowlist);
-  const hasResponsiveProps = Object.keys(cleanResponsiveProps).length > 0;
-  const responsiveSource = hasResponsiveProps ? {
+  const responsiveSource = options.responsiveProps ? {
     ...processedAllowlisted,
-    ...filterToAllowlist(cleanResponsiveProps, allowlist)
+    ...filterToAllowlist(options.responsiveProps, allowlist)
   } : processedAllowlisted;
   if (Object.keys(responsiveSource).length === 0) {
-    return {
-      ...processed,
-      ...expandedTextStyle
-    };
+    return processed;
   }
 
   // Ensure allowlisted layout props do NOT fall through unprocessed (e.g. array responsive values).
@@ -158,11 +140,7 @@ export function processBpkComponentProps(props, options) {
       delete responsiveProcessed[key];
     }
   });
-
-  // Expanded textStyle props are applied last so they don't get overridden by
-  // the responsive pipeline, but explicit CSS props from the user take precedence.
   return {
-    ...expandedTextStyle,
     ...cleanedProcessed,
     ...responsiveProcessed
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.10.0-dev-v24443725500.1",
+  "version": "42.10.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",

package/bpk-component-chatbot-input/src/BpkChatbotInputContext.d.ts

@@ -1,9 +0,0 @@
-import type { ChatbotInputType } from './common-types';
-type BpkChatbotInputContextValue = {
-    inputType: ChatbotInputType;
-    isOverLimit: boolean;
-    setIsOverLimit: (value: boolean) => void;
-};
-export declare const BpkChatbotInputContext: import("react").Context<BpkChatbotInputContextValue>;
-export declare const useChatbotInputContext: () => BpkChatbotInputContextValue;
-export {};

package/bpk-component-chatbot-input/src/BpkChatbotInputContext.js

@@ -1,26 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { createContext, useContext } from 'react';
-import { CHATBOT_INPUT_TYPES } from "./common-types";
-export const BpkChatbotInputContext = /*#__PURE__*/createContext({
-  inputType: CHATBOT_INPUT_TYPES.COMPOSER,
-  isOverLimit: false,
-  setIsOverLimit: () => {}
-});
-export const useChatbotInputContext = () => useContext(BpkChatbotInputContext);

package/bpk-component-chatbot-input/src/BpkChatbotInputInput.d.ts

@@ -1,3 +0,0 @@
-import type { BpkChatbotInputInputProps } from './common-types';
-declare const BpkChatbotInputInput: ({ inputValue, isPolling, isSending, loadingAriaLabel, maxCharacters, maxLines, onInputBlur, onInputChange, onInputClick, onInputFocus, onKeyDown, onSubmit, placeholder, renderSendButton, sendAriaLabel, }: BpkChatbotInputInputProps) => import("react/jsx-runtime").JSX.Element;
-export default BpkChatbotInputInput;

package/bpk-component-chatbot-input/src/BpkChatbotInputInput.js

@@ -1,125 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { useEffect } from 'react';
-import BpkButton, { BUTTON_TYPES, SIZE_TYPES } from "../../bpk-component-button";
-import { withButtonAlignment } from "../../bpk-component-icon";
-import ArrowUpIcon from "../../bpk-component-icon/sm/long-arrow-up";
-import { BpkFlex, BpkSpacing } from "../../bpk-component-layout";
-import { getDataComponentAttribute } from "../../bpk-react-utils";
-import { useChatbotInputContext } from "./BpkChatbotInputContext";
-import InputField from "./InputField/InputField";
-import TextAreaField from "./TextAreaField/TextAreaField";
-import { CHATBOT_INPUT_TYPES } from "./common-types";
-import { MAX_CHARACTERS } from "./constants";
-import { useChatbotInput } from "./hooks";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const AlignedArrowUpIcon = withButtonAlignment(ArrowUpIcon);
-const BpkChatbotInputInput = ({
-  inputValue,
-  isPolling = false,
-  isSending = false,
-  loadingAriaLabel,
-  maxCharacters = MAX_CHARACTERS,
-  maxLines,
-  onInputBlur,
-  onInputChange,
-  onInputClick = () => {},
-  onInputFocus,
-  onKeyDown = () => {},
-  onSubmit,
-  placeholder,
-  renderSendButton,
-  sendAriaLabel
-}) => {
-  const {
-    inputType,
-    setIsOverLimit
-  } = useChatbotInputContext();
-  const {
-    containerHeight,
-    handleSubmit,
-    inputProps,
-    inputRef,
-    isCapped,
-    isCars,
-    isExpanding,
-    isOverLimit,
-    sendButtonDisabled,
-    textareaHeight
-  } = useChatbotInput({
-    placeholder,
-    inputType,
-    inputValue,
-    isPolling,
-    isSending,
-    maxCharacters,
-    maxLines,
-    onInputBlur,
-    onInputChange,
-    onInputClick,
-    onInputFocus,
-    onKeyDown,
-    onSubmit
-  });
-  useEffect(() => {
-    setIsOverLimit(isOverLimit);
-  }, [isOverLimit, setIsOverLimit]);
-  const isComposer = inputType === CHATBOT_INPUT_TYPES.COMPOSER;
-  const flexProps = isCars ? {
-    align: 'center',
-    gap: BpkSpacing.MD
-  } : {
-    align: isExpanding ? 'flex-end' : 'center',
-    gap: BpkSpacing.Base
-  };
-  return /*#__PURE__*/_jsxs(BpkFlex, {
-    width: "100%",
-    ...flexProps,
-    ...getDataComponentAttribute('ChatbotInput.Input'),
-    children: [isCars ? /*#__PURE__*/_jsx(InputField, {
-      ref: inputRef,
-      ...inputProps
-    }) : /*#__PURE__*/_jsx(TextAreaField, {
-      ref: inputRef,
-      containerHeight: containerHeight,
-      textareaHeight: textareaHeight,
-      isCapped: isCapped,
-      isExpanding: isExpanding,
-      isComposer: isComposer,
-      maxLines: maxLines,
-      ...inputProps
-    }), renderSendButton ? renderSendButton({
-      disabled: sendButtonDisabled,
-      onClick: handleSubmit,
-      loading: isPolling,
-      ariaLabel: isPolling ? loadingAriaLabel : sendAriaLabel
-    }) : /*#__PURE__*/_jsx(BpkButton, {
-      type: BUTTON_TYPES.primary,
-      size: SIZE_TYPES.small,
-      iconOnly: true,
-      onClick: handleSubmit,
-      disabled: sendButtonDisabled,
-      loading: isPolling,
-      "aria-label": isPolling ? loadingAriaLabel : sendAriaLabel,
-      "data-testid": "bpk-chatbot-input-send",
-      children: /*#__PURE__*/_jsx(AlignedArrowUpIcon, {})
-    })]
-  });
-};
-export default BpkChatbotInputInput;

package/bpk-component-chatbot-input/src/BpkChatbotInputRoot.d.ts

@@ -1,3 +0,0 @@
-import type { BpkChatbotInputRootProps } from './common-types';
-declare const BpkChatbotInputRoot: ({ align, children, gap, inputType, ...rest }: BpkChatbotInputRootProps) => import("react/jsx-runtime").JSX.Element;
-export default BpkChatbotInputRoot;

package/bpk-component-chatbot-input/src/BpkChatbotInputRoot.js

@@ -1,77 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { useCallback, useMemo, useState } from 'react';
-import { BpkVStack, BpkSpacing } from "../../bpk-component-layout";
-import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
-import { BpkChatbotInputContext } from "./BpkChatbotInputContext";
-import { CHATBOT_INPUT_TYPES } from "./common-types";
-import STYLES from "./BpkChatbotInput.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-const BpkChatbotInputRoot = ({
-  align = 'flex-start',
-  children,
-  gap = BpkSpacing.Base,
-  inputType = CHATBOT_INPUT_TYPES.COMPOSER,
-  ...rest
-}) => {
-  const isCars = inputType === CHATBOT_INPUT_TYPES.CARS;
-  const isComposer = inputType === CHATBOT_INPUT_TYPES.COMPOSER;
-  const [isOverLimit, setIsOverLimit] = useState(false);
-  const stableSetIsOverLimit = useCallback(value => {
-    setIsOverLimit(value);
-  }, []);
-  const contextValue = useMemo(() => ({
-    inputType,
-    isOverLimit,
-    setIsOverLimit: stableSetIsOverLimit
-  }), [inputType, isOverLimit, stableSetIsOverLimit]);
-  const containerClassName = getClassName(isCars ? 'bpk-chatbot-input--cars' : 'bpk-chatbot-input--composer', isComposer && 'bpk-chatbot-input--composer--with-shadow', isOverLimit && !isCars && 'bpk-chatbot-input--composer--overLimit');
-  const paddingProps = isCars ? {
-    paddingTop: BpkSpacing.MD,
-    paddingBottom: BpkSpacing.MD,
-    paddingEnd: BpkSpacing.MD,
-    paddingStart: BpkSpacing.Base
-  } : {
-    padding: BpkSpacing.Base
-  };
-  const handleContainerEvent = e => {
-    e.stopPropagation();
-  };
-  return /*#__PURE__*/_jsx(BpkChatbotInputContext.Provider, {
-    value: contextValue,
-    children: /*#__PURE__*/_jsx("div", {
-      className: containerClassName,
-      onClick: handleContainerEvent,
-      onTouchStart: handleContainerEvent,
-      role: "presentation",
-      "data-testid": "bpk-chatbot-input-container",
-      ...getDataComponentAttribute('ChatbotInput'),
-      children: /*#__PURE__*/_jsx(BpkVStack, {
-        align: align,
-        gap: gap,
-        width: "100%",
-        ...paddingProps,
-        ...rest,
-        children: children
-      })
-    })
-  });
-};
-export default BpkChatbotInputRoot;

package/bpk-component-chatbot-input/src/BpkChatbotInputToolbar.d.ts

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