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

package/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.d.ts

@@ -3,6 +3,7 @@ interface UseTextAreaAutoResizeProps {
     ref: RefObject<HTMLTextAreaElement>;
     value: string;
     enabled?: boolean;
+    maxLines?: number;
 }
 interface UseTextAreaAutoResizeReturn {
     isExpanding: boolean;
@@ -18,5 +19,5 @@ export declare const MAX_INPUT_HEIGHT_PHASE_2: number;
 export declare const MIN_CONTAINER_HEIGHT = 24;
 export declare const MAX_CONTAINER_HEIGHT = 96;
 export declare const PARENT_PADDING_TOP = 16;
-declare const useTextAreaAutoResize: ({ enabled, ref, value, }: UseTextAreaAutoResizeProps) => UseTextAreaAutoResizeReturn;
+declare const useTextAreaAutoResize: ({ enabled, maxLines, ref, value, }: UseTextAreaAutoResizeProps) => UseTextAreaAutoResizeReturn;
 export default useTextAreaAutoResize;

package/bpk-component-chatbot-input/src/hooks/useTextAreaAutoResize.js

@@ -26,6 +26,7 @@ export const MAX_CONTAINER_HEIGHT = 96;
 export const PARENT_PADDING_TOP = 16;
 const useTextAreaAutoResize = ({
   enabled = true,
+  maxLines,
   ref,
   value
 }) => {
@@ -99,15 +100,27 @@ const useTextAreaAutoResize = ({
       scrollHeight
     } = measureEl;
     const lines = Math.max(1, Math.ceil(scrollHeight / lineHeightRef.current));
-    const isCapped = lines >= 5;
-    const maxInputHeight = isCapped ? MAX_INPUT_HEIGHT_PHASE_2 : MAX_INPUT_HEIGHT_PHASE_1;
+    const hasCustomMaxLines = maxLines !== undefined;
+    const isCapped = hasCustomMaxLines ? lines >= maxLines : lines >= 5;
+    let maxInputHeight;
+    if (hasCustomMaxLines) {
+      maxInputHeight = lineHeightRef.current * maxLines;
+    } else {
+      maxInputHeight = isCapped ? MAX_INPUT_HEIGHT_PHASE_2 : MAX_INPUT_HEIGHT_PHASE_1;
+    }
     const targetInputHeight = Math.max(MIN_INPUT_HEIGHT, Math.min(scrollHeight, maxInputHeight));
-    const extraSpace = isCapped ? PARENT_PADDING_TOP : 0;
-    const targetContainerHeight = Math.max(MIN_CONTAINER_HEIGHT, Math.min(targetInputHeight - extraSpace, MAX_CONTAINER_HEIGHT));
+    const customMaxContainerHeight = hasCustomMaxLines ? lineHeightRef.current * maxLines : MAX_CONTAINER_HEIGHT;
+    const extraSpace = isCapped && !hasCustomMaxLines ? PARENT_PADDING_TOP : 0;
+    const targetContainerHeight = Math.max(MIN_CONTAINER_HEIGHT, Math.min(targetInputHeight - extraSpace, customMaxContainerHeight));
     setDimensions(prev => {
       const isContentAdded = value.length > previousValueRef.current.length;
       const isAppending = value.startsWith(previousValueRef.current);
-      const prevMaxHeight = prev.isCapped ? MAX_INPUT_HEIGHT_PHASE_2 : MAX_INPUT_HEIGHT_PHASE_1;
+      let prevMaxHeight;
+      if (hasCustomMaxLines) {
+        prevMaxHeight = lineHeightRef.current * maxLines;
+      } else {
+        prevMaxHeight = prev.isCapped ? MAX_INPUT_HEIGHT_PHASE_2 : MAX_INPUT_HEIGHT_PHASE_1;
+      }
       const isInitialRender = isInitialRenderRef.current;
       const shouldScroll = isContentAdded && isAppending && textarea.scrollHeight > prevMaxHeight || isInitialRender && scrollHeight > maxInputHeight;
       shouldScrollRef.current = shouldScroll;
@@ -122,7 +135,7 @@ const useTextAreaAutoResize = ({
       };
     });
     previousValueRef.current = value;
-  }, [value, ref, enabled, containerWidth]);
+  }, [value, ref, enabled, containerWidth, maxLines]);
   useLayoutEffect(() => {
     if (shouldScrollRef.current) {
       scrollToBottom();

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

@@ -0,0 +1,13 @@
+/**
+ * Expands a textStyle token (or responsive object of tokens) into concrete
+ * CSS property values that can be spread directly onto a Chakra component.
+ *
+ * Supports:
+ * - Static values:     `textStyle="heading-3"` → `{ fontSize, lineHeight, fontWeight }`
+ * - Responsive objects: `textStyle={{ mobile: 'heading-5', desktop: 'heading-3' }}`
+ *   → `{ fontSize: { md: '...', '2xl': '...' }, lineHeight: { ... }, ... }`
+ *
+ * @param {any} value - A textStyle token string, responsive object, or undefined/null.
+ * @returns {Record<string, any>} An object of CSS props to spread, or an empty object if no match.
+ */
+export declare function expandTextStyleProps(value: any): Record<string, any>;

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

@@ -0,0 +1,265 @@
+/*
+ * 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 only the specific tokens needed for text styles, rather than the
+// entire foundations module. This avoids pulling unused tokens (colors,
+// shadows, borders, etc.) into the layout bundle.
+import { fontSizeXs, fontSizeSm, fontSizeBase, fontSizeLg, fontSizeXl, fontSizeXxl, fontSizeXxxl, fontSizeXxxxl, fontSizeXxxxxl, fontSize6Xl, fontSize7Xl, fontSize8Xl, lineHeightXs, lineHeightSm, lineHeightBase, lineHeightBaseTight, lineHeightLg, lineHeightLgTight, lineHeightXl, lineHeightXlTight, lineHeightXxl, lineHeightXxxl, lineHeightXxxxl, lineHeightXxxxxl, lineHeight6Xl, lineHeight7Xl, lineHeight8Xl, fontWeightBook, fontWeightBold, fontWeightBlack, fontWeightLight, letterSpacingTight, letterSpacingHero, fontFamilyLarken } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
+import { BpkBreakpointToChakraKey } from "./tokens";
+/**
+ * Maps Backpack text style tokens to concrete CSS properties.
+ *
+ * This map is intentionally kept outside the Chakra theme config so that
+ * layout-only consumers (who never use textStyle) do not pay for it.
+ * Components that use textStyle expand it inline via `expandTextStyleProps`.
+ */
+const TEXT_STYLE_MAP = {
+  xs: {
+    fontSize: fontSizeXs,
+    lineHeight: lineHeightXs,
+    fontWeight: fontWeightBook
+  },
+  sm: {
+    fontSize: fontSizeSm,
+    lineHeight: lineHeightSm,
+    fontWeight: fontWeightBook
+  },
+  base: {
+    fontSize: fontSizeBase,
+    lineHeight: lineHeightBase,
+    fontWeight: fontWeightBook
+  },
+  lg: {
+    fontSize: fontSizeLg,
+    lineHeight: lineHeightLg,
+    fontWeight: fontWeightBook
+  },
+  xl: {
+    fontSize: fontSizeXl,
+    lineHeight: lineHeightXl,
+    fontWeight: fontWeightBook
+  },
+  xxl: {
+    fontSize: fontSizeXxl,
+    lineHeight: lineHeightXxl,
+    fontWeight: fontWeightBold
+  },
+  xxxl: {
+    fontSize: fontSizeXxxl,
+    lineHeight: lineHeightXxxl,
+    fontWeight: fontWeightBold
+  },
+  xxxxl: {
+    fontSize: fontSizeXxxxl,
+    lineHeight: lineHeightXxxxl,
+    fontWeight: fontWeightBold,
+    letterSpacing: letterSpacingTight
+  },
+  xxxxxl: {
+    fontSize: fontSizeXxxxxl,
+    lineHeight: lineHeightXxxxxl,
+    fontWeight: fontWeightBold,
+    letterSpacing: letterSpacingTight
+  },
+  caption: {
+    fontSize: fontSizeXs,
+    lineHeight: lineHeightXs,
+    fontWeight: fontWeightBook
+  },
+  footnote: {
+    fontSize: fontSizeSm,
+    lineHeight: lineHeightSm,
+    fontWeight: fontWeightBook
+  },
+  'label-1': {
+    fontSize: fontSizeBase,
+    lineHeight: lineHeightBase,
+    fontWeight: fontWeightBold
+  },
+  'label-2': {
+    fontSize: fontSizeSm,
+    lineHeight: lineHeightSm,
+    fontWeight: fontWeightBold
+  },
+  'label-3': {
+    fontSize: fontSizeXs,
+    lineHeight: lineHeightXs,
+    fontWeight: fontWeightBold
+  },
+  'body-default': {
+    fontSize: fontSizeBase,
+    lineHeight: lineHeightBase,
+    fontWeight: fontWeightBook
+  },
+  'body-longform': {
+    fontSize: fontSizeLg,
+    lineHeight: lineHeightLg,
+    fontWeight: fontWeightBook
+  },
+  subheading: {
+    fontSize: fontSizeXl,
+    lineHeight: lineHeightXl,
+    fontWeight: fontWeightBook
+  },
+  'heading-1': {
+    fontSize: fontSizeXxxl,
+    lineHeight: lineHeightXxxl,
+    fontWeight: fontWeightBold
+  },
+  'heading-2': {
+    fontSize: fontSizeXxl,
+    lineHeight: lineHeightXxl,
+    fontWeight: fontWeightBold
+  },
+  'heading-3': {
+    fontSize: fontSizeXl,
+    lineHeight: lineHeightXlTight,
+    fontWeight: fontWeightBold
+  },
+  'heading-4': {
+    fontSize: fontSizeLg,
+    lineHeight: lineHeightLgTight,
+    fontWeight: fontWeightBold
+  },
+  'heading-5': {
+    fontSize: fontSizeBase,
+    lineHeight: lineHeightBaseTight,
+    fontWeight: fontWeightBold
+  },
+  'hero-1': {
+    fontSize: fontSize8Xl,
+    lineHeight: lineHeight8Xl,
+    fontWeight: fontWeightBlack,
+    letterSpacing: letterSpacingHero
+  },
+  'hero-2': {
+    fontSize: fontSize7Xl,
+    lineHeight: lineHeight7Xl,
+    fontWeight: fontWeightBlack,
+    letterSpacing: letterSpacingHero
+  },
+  'hero-3': {
+    fontSize: fontSize6Xl,
+    lineHeight: lineHeight6Xl,
+    fontWeight: fontWeightBlack,
+    letterSpacing: letterSpacingHero
+  },
+  'hero-4': {
+    fontSize: fontSizeXxxxxl,
+    lineHeight: lineHeightXxxxxl,
+    fontWeight: fontWeightBlack,
+    letterSpacing: letterSpacingHero
+  },
+  'hero-5': {
+    fontSize: fontSizeXxxxl,
+    lineHeight: lineHeightXxxl,
+    fontWeight: fontWeightBlack,
+    letterSpacing: letterSpacingHero
+  },
+  'hero-6': {
+    fontSize: fontSizeXxxl,
+    lineHeight: lineHeightXxl,
+    fontWeight: fontWeightBlack,
+    letterSpacing: letterSpacingHero
+  },
+  'editorial-1': {
+    fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
+    fontSize: fontSizeXxxxl,
+    lineHeight: lineHeightXxxxl,
+    fontWeight: fontWeightLight
+  },
+  'editorial-2': {
+    fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
+    fontSize: fontSizeXxl,
+    lineHeight: lineHeightXxl,
+    fontWeight: fontWeightLight
+  },
+  'editorial-3': {
+    fontFamily: `var(--bpk-larken-font-stack, ${fontFamilyLarken})`,
+    fontSize: fontSizeLg,
+    lineHeight: lineHeightLg,
+    fontWeight: fontWeightBook
+  }
+};
+
+/**
+ * Expands a textStyle token (or responsive object of tokens) into concrete
+ * CSS property values that can be spread directly onto a Chakra component.
+ *
+ * Supports:
+ * - Static values:     `textStyle="heading-3"` → `{ fontSize, lineHeight, fontWeight }`
+ * - Responsive objects: `textStyle={{ mobile: 'heading-5', desktop: 'heading-3' }}`
+ *   → `{ fontSize: { md: '...', '2xl': '...' }, lineHeight: { ... }, ... }`
+ *
+ * @param {any} value - A textStyle token string, responsive object, or undefined/null.
+ * @returns {Record<string, any>} An object of CSS props to spread, or an empty object if no match.
+ */
+// eslint-disable-next-line import/prefer-default-export
+export function expandTextStyleProps(value) {
+  if (value == null) return {};
+
+  // Responsive object: { mobile: 'heading-5', desktop: 'heading-3' }
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    // Normalise Backpack breakpoint keys to Chakra keys inline (avoids
+    // circular dependency on tokenUtils).
+    const normalized = {};
+    Object.entries(value).forEach(([key, val]) => {
+      if (key === 'base') {
+        normalized.base = val;
+      } else {
+        const chakraKey = BpkBreakpointToChakraKey[key];
+        if (chakraKey) {
+          normalized[chakraKey] = val;
+        }
+      }
+    });
+
+    // Pivot from { bp -> token } to { cssProp -> { bp -> cssValue } }
+    const result = {};
+    Object.entries(normalized).forEach(([bp, token]) => {
+      const style = TEXT_STYLE_MAP[String(token)];
+      if (!style) {
+        if (process.env.NODE_ENV !== 'production') {
+          // eslint-disable-next-line no-console
+          console.warn(`Unknown textStyle token "${String(token)}" at breakpoint "${bp}".`);
+        }
+        return;
+      }
+      Object.entries(style).forEach(([cssProp, cssValue]) => {
+        if (!result[cssProp]) {
+          result[cssProp] = {};
+        }
+        result[cssProp][bp] = cssValue;
+      });
+    });
+    return result;
+  }
+
+  // Static string value
+  const style = TEXT_STYLE_MAP[String(value)];
+  if (!style) {
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.warn(`Unknown textStyle token "${String(value)}".`);
+    }
+    return {};
+  }
+  return {
+    ...style
+  };
+}

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

@@ -18,9 +18,17 @@
 
 import { defineConfig } from '@chakra-ui/react';
 
-// 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';
+// 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';
 // NOTE:
 // We intentionally do not use the raw breakpoint *values* from foundations here.
 // Foundations exports breakpoint values such as `breakpointMobile = "32rem"` which
@@ -100,9 +108,9 @@ const spacingMap = {
  * These come directly from @skyscanner/bpk-foundations-web
  */
 const borderSizeMap = {
-  'bpk-border-size-sm': bpkTokens.borderSizeSm,
-  'bpk-border-size-lg': bpkTokens.borderSizeLg,
-  'bpk-border-size-xl': bpkTokens.borderSizeXl
+  'bpk-border-size-sm': borderSizeSm,
+  'bpk-border-size-lg': borderSizeLg,
+  'bpk-border-size-xl': borderSizeXl
 };
 
 /**
@@ -111,12 +119,12 @@ const borderSizeMap = {
  */
 const borderRadiusMap = {
   'bpk-border-radius-none': '0',
-  '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
+  '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
 };
 
 /**
@@ -124,9 +132,9 @@ const borderRadiusMap = {
  * These come directly from @skyscanner/bpk-foundations-web
  */
 const shadowMap = {
-  'bpk-shadow-sm': bpkTokens.boxShadowSm,
-  'bpk-shadow-lg': bpkTokens.boxShadowLg,
-  'bpk-shadow-xl': bpkTokens.boxShadowXl
+  'bpk-shadow-sm': boxShadowSm,
+  'bpk-shadow-lg': boxShadowLg,
+  'bpk-shadow-xl': boxShadowXl
 };
 
 /**
@@ -209,242 +217,6 @@ 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
@@ -452,6 +224,12 @@ 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`
@@ -462,7 +240,6 @@ export function createBpkConfig() {
       tokens: {
         spacing: spacingMap
       },
-      textStyles: textStylesMap,
       breakpoints: chakraBreakpoints
     }
   });