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

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

@@ -1,33 +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 { BpkHStack, BpkSpacing } from "../../bpk-component-layout";
-import { getDataComponentAttribute } from "../../bpk-react-utils";
-import { jsx as _jsx } from "react/jsx-runtime";
-const BpkChatbotInputToolbar = ({
-  children,
-  gap = BpkSpacing.Base,
-  ...rest
-}) => /*#__PURE__*/_jsx(BpkHStack, {
-  gap: gap,
-  width: "100%",
-  ...getDataComponentAttribute('ChatbotInput.Toolbar'),
-  ...rest,
-  children: children
-});
-export default BpkChatbotInputToolbar;

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

@@ -1,20 +0,0 @@
-import type { ReactNode } from 'react';
-export interface BpkArkProviderProps {
-    children: ReactNode;
-}
-/**
- * BpkArkProvider - Provides locale context for Ark-based Backpack components.
- *
- * Wraps children with Ark UI's LocaleProvider, reactively tracking
- * document direction (html[dir]) and language (html[lang]) via MutationObserver.
- * This enables correct RTL rendering for Ark-based components such as
- * BpkCheckboxV2, BpkSegmentedControlV2, etc.
- *
- * Use BpkProvider (which composes BpkLayoutProvider + BpkArkProvider) if you
- * need both layout primitives and Ark-based components. Use BpkArkProvider
- * directly only if you need Ark locale context without the Chakra layout system.
- *
- * @param {BpkArkProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Ark locale context.
- */
-export declare const BpkArkProvider: ({ children, }: BpkArkProviderProps) => JSX.Element;

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

@@ -1,112 +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, useState } from 'react';
-import { LocaleProvider } from '@ark-ui/react';
-import { jsx as _jsx } from "react/jsx-runtime";
-// Fallback locale mapping used when no explicit locale is available on the document.
-// Maps DOM direction to minimal BCP 47 locales understood by Ark's isRTL() utility.
-// 'ar-SA' is the minimal RTL locale — Ark only uses it to derive dir='rtl'.
-const FALLBACK_LOCALE_BY_DIRECTION = {
-  ltr: 'en-US',
-  rtl: 'ar-SA'
-};
-
-// Known RTL language subtags (ISO 639 codes). Used as fallback when
-// Intl.Locale.textInfo is unavailable (Node < 22, older browsers).
-const RTL_LANGUAGE_SUBTAGS = new Set(['ar', 'he', 'fa', 'ur', 'yi', 'iw', 'ps', 'sd', 'ug', 'ku']);
-
-// Returns the text direction implied by a BCP 47 locale string.
-// Uses Intl.Locale.textInfo when available (Chrome 99+, Safari 15.4+, Firefox 126+, Node 22+);
-// falls back to a known-RTL-subtag lookup.
-const getLangDir = locale => {
-  try {
-    const dir = new Intl.Locale(locale).textInfo?.direction;
-    if (dir) return dir === 'rtl' ? 'rtl' : 'ltr';
-  } catch {
-    // Ignore invalid locale strings
-  }
-  return RTL_LANGUAGE_SUBTAGS.has(locale.split('-')[0].toLowerCase()) ? 'rtl' : 'ltr';
-};
-
-// Resolves the locale to pass to Ark's LocaleProvider.
-//
-// Priority rules:
-//   1. If html[dir] is explicitly set:
-//      - Use html[lang] only when its direction is consistent with html[dir].
-//      - Otherwise fall back to FALLBACK_LOCALE_BY_DIRECTION[dir].
-//      This prevents an LTR html[lang] (e.g. 'en' from a page template) from
-//      overriding an explicit html[dir]="rtl" signal (e.g. from a dev RTL toggle).
-//   2. If html[dir] is not set: use html[lang] if present, else 'en-US'.
-//
-// SSR-safe: returns 'en-US' when document is unavailable.
-const getArkLocale = () => {
-  if (typeof document === 'undefined') return 'en-US';
-  const explicitDir = document.documentElement.getAttribute('dir');
-  const lang = document.documentElement.getAttribute('lang');
-  if (explicitDir === 'rtl' || explicitDir === 'ltr') {
-    if (lang && getLangDir(lang) === explicitDir) return lang;
-    return FALLBACK_LOCALE_BY_DIRECTION[explicitDir];
-  }
-  return lang || 'en-US';
-};
-
-// Reactive hook: subscribes to document.documentElement[dir] and [lang] changes
-// via MutationObserver. Re-renders when direction or locale is toggled
-// (e.g. Storybook RTL toolbar, runtime locale switcher).
-// SSR-safe: always initialises to 'en-US' so server and client agree on the first render,
-//           avoiding hydration mismatches. The real locale is read inside useEffect,
-//           which does not run on the server.
-const useArkLocale = () => {
-  const [locale, setLocale] = useState('en-US');
-  useEffect(() => {
-    setLocale(getArkLocale());
-    const observer = new MutationObserver(() => setLocale(getArkLocale()));
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['dir', 'lang']
-    });
-    return () => observer.disconnect();
-  }, []);
-  return locale;
-};
-
-/**
- * BpkArkProvider - Provides locale context for Ark-based Backpack components.
- *
- * Wraps children with Ark UI's LocaleProvider, reactively tracking
- * document direction (html[dir]) and language (html[lang]) via MutationObserver.
- * This enables correct RTL rendering for Ark-based components such as
- * BpkCheckboxV2, BpkSegmentedControlV2, etc.
- *
- * Use BpkProvider (which composes BpkLayoutProvider + BpkArkProvider) if you
- * need both layout primitives and Ark-based components. Use BpkArkProvider
- * directly only if you need Ark locale context without the Chakra layout system.
- *
- * @param {BpkArkProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Ark locale context.
- */
-export const BpkArkProvider = ({
-  children
-}) => {
-  const locale = useArkLocale();
-  return /*#__PURE__*/_jsx(LocaleProvider, {
-    locale: locale,
-    children: children
-  });
-};

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

@@ -1,19 +0,0 @@
-import type { ReactNode } from 'react';
-export interface BpkLayoutProviderProps {
-    children: ReactNode;
-}
-/**
- * BpkLayoutProvider - Provides context for Backpack layout components only.
- *
- * Wraps children with the Chakra UI system context configured with Backpack
- * tokens (spacing, breakpoints). This is the minimal provider needed by
- * layout primitives (BpkBox, BpkFlex, BpkGrid, BpkStack, etc.).
- *
- * Use this instead of BpkProvider when you only need layout components and
- * want to avoid bundling Ark UI (used by BpkCheckboxV2, BpkSegmentedControlV2,
- * and other Ark-based components).
- *
- * @param {BpkLayoutProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Chakra context.
- */
-export declare const BpkLayoutProvider: ({ children, }: BpkLayoutProviderProps) => JSX.Element;

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

@@ -1,50 +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 { ChakraProvider, createSystem, defaultBaseConfig } from '@chakra-ui/react';
-import { createBpkConfig } from "./theme";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Creates a Chakra UI system with Backpack token mappings.
- *
- * Uses `defaultBaseConfig` (conditions + utilities only) instead of
- * `defaultConfig` to avoid bundling ~141KB of unused component recipes.
- * See: https://chakra-ui.com/guides/component-bundle-optimization
- */
-const bpkSystem = createSystem(defaultBaseConfig, createBpkConfig());
-
-/**
- * BpkLayoutProvider - Provides context for Backpack layout components only.
- *
- * Wraps children with the Chakra UI system context configured with Backpack
- * tokens (spacing, breakpoints). This is the minimal provider needed by
- * layout primitives (BpkBox, BpkFlex, BpkGrid, BpkStack, etc.).
- *
- * Use this instead of BpkProvider when you only need layout components and
- * want to avoid bundling Ark UI (used by BpkCheckboxV2, BpkSegmentedControlV2,
- * and other Ark-based components).
- *
- * @param {BpkLayoutProviderProps} props - The provider props.
- * @returns {JSX.Element} The provider wrapping its children with Chakra context.
- */
-export const BpkLayoutProvider = ({
-  children
-}) => /*#__PURE__*/_jsx(ChakraProvider, {
-  value: bpkSystem,
-  children: children
-});

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

@@ -1,13 +0,0 @@
-/**
- * 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

@@ -1,265 +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 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
-  };
-}