### Complete SCSS Component Example using Backpack Tokens and Mixins

Source: https://github.com/jronald01/backpack/blob/main/AGENTS.md

A comprehensive example of an SCSS component (`.bpk-my-component`) demonstrating the integration of Backpack's design tokens and typography mixins. It shows how to apply spacing, colors, borders, and shadows, along with semantic typography for headings and body text, and includes a compact variant.

```scss
@use '../../bpk-mixins/tokens';
@use '../../bpk-mixins/typography';

.bpk-my-component {
  display: flex;
  flex-direction: column;
  padding: tokens.bpk-spacing-base();
  background-color: tokens.$bpk-canvas-day;
  border-radius: tokens.bpk-border-radius-md();
  border: tokens.$bpk-border-size-sm solid tokens.$bpk-line-day;
  box-shadow: tokens.bpk-box-shadow-sm();

  &__title {
    @include typography.bpk-heading-3;
    color: tokens.$bpk-text-primary-day;
    margin-bottom: tokens.bpk-spacing-sm();
  }

  &__body {
    @include typography.bpk-body-default;
    color: tokens.$bpk-text-secondary-day;
    margin-bottom: tokens.bpk-spacing-base();
  }

  &__link {
    @include typography.bpk-link;
    @include typography.bpk-link-underlined;
  }

  &--compact {
    padding: tokens.bpk-spacing-sm();

    .bpk-my-component__title {
      @include typography.bpk-heading-4;
    }

    .bpk-my-component__body {
      @include typography.bpk-caption;
    }
  }
}
```

--------------------------------

### Backpack Build and Development Commands (npm)

Source: https://github.com/jronald01/backpack/blob/main/AGENTS.md

Lists essential npm commands for managing the Backpack project, including dependency installation, building packages, running tests, launching Storybook, linting, and type checking. These commands are crucial for development and maintenance.

```bash
# Install dependencies
npm install

# Build all packages
npm run build

# Run tests
npm test

# Run Storybook
npm run storybook

# Lint code
npm run lint

# Type check
npm run typecheck
```

--------------------------------

### Install or upgrade npm to specific version

Source: https://github.com/jronald01/backpack/blob/main/CONTRIBUTING.md

Install npm globally with a specific version constraint. This example demonstrates installing npm version 9.5.1 or compatible versions, ensuring consistency across the development environment.

```shell
npm install --global npm@^9.5.1
```

--------------------------------

### Component Template Structure

Source: https://github.com/jronald01/backpack/blob/main/AGENTS.md

Defines the standard file and directory layout for a single Backpack component. Includes the main component file, its styles, tests, documentation, and Storybook examples.

```tree
packages/bpk-component-example/
├── src/
│   ├── BpkExample.tsx           # Main component
│   ├── BpkExample.module.scss   # Styles
│   └── BpkExample.test.tsx      # Tests
├── README.md                    # Component documentation
examples/bpk-component-example/
│   ├── examples.tsx             # Storybook examples
│   └── stories.tsx              # Storybook stories
```

--------------------------------

### Importing Backpack Components and Tokens (TypeScript/SCSS)

Source: https://github.com/jronald01/backpack/blob/main/AGENTS.md

Illustrates how to import Backpack UI components and design tokens within a TypeScript project and how to import SCSS mixins for tokens.

```typescript
// Component imports
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
```

```scss
// Token imports
@use '@skyscanner/backpack-web/bpk-mixins/tokens';
```

--------------------------------

### Backpack Project Structure and File Naming Conventions

Source: https://github.com/jronald01/backpack/blob/main/AGENTS.md

Illustrates the directory structure for Backpack components and outlines file naming conventions for React components, SCSS, tests, and stories. This helps in understanding how the project is organized.

```bash
packages/
├── bpk-component-{name}/          # Individual React components
├── bpk-mixins/                    # SCSS mixins and utilities
├── bpk-stylesheets/               # Compiled CSS
└── bpk-tokens/                    # Design tokens
```

```N/A
- React components: PascalCase (e.g., `BpkButton.tsx`)
- SCSS files: PascalCase (e.g., `BpkButton.module.scss`)
- Test files: `{ComponentName}.test.tsx`
- Story files: `{ComponentName}.stories.tsx`
```

--------------------------------

### BpkPriceMarker v1 Example (JSX)

Source: https://github.com/jronald01/backpack/blob/main/packages/bpk-component-map/docs/migrating-from-v1-v2.md

This snippet demonstrates the original implementation of the BpkPriceMarker component using v1, including props like `label`, `position`, `onClick`, `status`, and `disabled`.

```jsx
import { BpkPriceMarker } from '@skyscanner/backpack-web/bpk-component-map';

const MyComponent = () => (
  <BpkPriceMarker
    label="£120"
    position={{ latitude: 27.9881, longitude: 86.925 }}
    onClick={() => {
      console.log('Price marker pressed.');
    }}
    status={PRICE_MARKER_STATUSES.focused}
    disabled
  />
)
```

--------------------------------

### Start Storybook development server

Source: https://github.com/jronald01/backpack/blob/main/CONTRIBUTING.md

Launch the Storybook development server to view and interact with Backpack components in the browser. The server runs on localhost:9001 and provides a visual development environment for component testing and documentation.

```shell
npm start
```

--------------------------------

### Install npm dependencies with custom registry

Source: https://github.com/jronald01/backpack/blob/main/CONTRIBUTING.md

Install all project dependencies using npm with the explicit registry URL. This ensures all packages are fetched from the correct npm registry source.

```shell
npm install --registry="https://registry.npmjs.org/"
```

--------------------------------

### Install Backpack Web Components npm Package

Source: https://github.com/jronald01/backpack/blob/main/packages/README.md

Install the Backpack web component library from npm to access reusable React components and design resources. This is the primary installation method for integrating Backpack into web projects. Requires npm or yarn package manager.

```shell
npm install --save @skyscanner/backpack-web
```

--------------------------------

### SCSS Design Token and Typography Mixin Imports

Source: https://github.com/jronald01/backpack/blob/main/AGENTS.md

Demonstrates how to import design tokens and typography mixins in SCSS files within the Backpack project. This ensures consistent styling by leveraging centralized design variables and utilities.

```scss
@use '../../bpk-mixins/tokens';
@use '../../bpk-mixins/typography';
```

--------------------------------

### BpkPriceMarker v2 Replacement Example (JSX)

Source: https://github.com/jronald01/backpack/blob/main/packages/bpk-component-map/docs/migrating-from-v1-v2.md

This snippet shows the replacement implementation of the BpkPriceMarker component using v2. It includes the new `accessibilityLabel` and `icon` props, and uses the updated `MARKER_STATUSES` enum. Note the import for `AirportsIconSm` and `withRtlSupport`.

```jsx
import { BpkPriceMarker } from '@skyscanner/backpack-web/bpk-component-map';
import AirportsIconSm from '@skyscanner/backpack-web/bpk-component-icon/sm/airports';

const AlignedAirportsIconSm = withRtlSupport(AirportsIconSm);

const MyComponent = () => (
  <BpkPriceMarker
    label="£120"
    position={{ latitude: 27.9881, longitude: 86.925 }}
    onClick={() => {
      console.log('Click the Price marker with icon.');
    }}
    status={MARKER_STATUSES.previous_selected}
    accessibilityLabel="Click the Price marker with icon"
    icon={<AlignedAirportsIconSm />}
  />
)
```

--------------------------------

### Install correct Node version with nvm or nave

Source: https://github.com/jronald01/backpack/blob/main/CONTRIBUTING.md

Automatically install the Node.js version specified in the .nvmrc file using the nvm or nave version manager. This ensures all contributors use the same Node version for consistency.

```shell
nvm use
```

```shell
nave auto
```

--------------------------------

### TypeScript Component API Patterns and Props

Source: https://github.com/jronald01/backpack/blob/main/AGENTS.md

Defines standard TypeScript interfaces for component props, including common patterns and prop names like size, variant, disabled, and loading. This ensures consistency in component development.

```typescript
// Standard prop patterns
interface BpkComponentProps {
  children?: React.ReactNode;
  className?: string;
  onClick?: (event: React.MouseEvent) => void;
  // ... component-specific props
}

// Common prop naming
- size: 'small' | 'default' | 'large'
- variant: 'primary' | 'secondary' | 'destructive'
- disabled: boolean
- loading: boolean
```

--------------------------------

### Build SVG assets in Backpack

Source: https://github.com/jronald01/backpack/blob/main/CONTRIBUTING.md

Execute the build process to compile SVG assets required by the Backpack design system. This step must be completed before starting the development server.

```shell
npm run build
```

--------------------------------

### Initial Popover Open State

Source: https://github.com/jronald01/backpack/blob/main/packages/bpk-component-popover/docs/migration-guide.md

The `isOpen` property is now optional and defines the initial state of the popover. It's no longer the primary control for opening/closing the popover, as this state is managed by the underlying `floating-ui` library. If provided, it will display the popover open on the initial load; otherwise, it defaults to closed.

```jsx
import BpkPopover from '@bpk-ui/popover';

// ...

// Popover will be closed on initial load (default behavior)
<BpkPopover
  id="my-popover-closed"
  target={<button>Click Me</button>}
>
  Popover content
</BpkPopover>

// Popover will be open on initial load
<BpkPopover
  id="my-popover-open"
  target={<button>Click Me</button>}
  isOpen={true}
>
  Popover content
</BpkPopover>
```

--------------------------------

### SCSS Spacing Tokens (Function-based) Usage

Source: https://github.com/jronald01/backpack/blob/main/AGENTS.md

Illustrates the use of Backpack's spacing functions in SCSS to apply padding, margin, and gap values. These functions return spacing in `rem` units, promoting consistency and maintainability. It shows single and multiple value applications, as well as the full spacing scale.

```scss
.my-component {
  // Spacing functions return values in rem
  padding: tokens.bpk-spacing-base();     // 1rem (16px)
  margin: tokens.bpk-spacing-lg();        // 1.5rem (24px)
  gap: tokens.bpk-spacing-sm();           // 0.5rem (8px)

  // Multiple values
  padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-base();
  margin: tokens.bpk-spacing-md() 0;

  // Full spacing scale
  padding: tokens.bpk-spacing-none();     // 0
  padding: tokens.bpk-spacing-sm();       // 0.5rem
  padding: tokens.bpk-spacing-base();     // 1rem
  padding: tokens.bpk-spacing-md();       // 1.25rem
  padding: tokens.bpk-spacing-lg();       // 1.5rem
  padding: tokens.bpk-spacing-xl();       // 2rem
}
```

--------------------------------

### Import Mixins Using Modern SASS @use API

Source: https://github.com/jronald01/backpack/blob/main/CONTRIBUTING.md

Demonstrates the recommended approach for importing SASS mixins in Backpack components using the Modern SASS API instead of deprecated @import statements. This example shows importing only needed mixins on demand and using math.div() for division operations.

```scss
@use sass:math;
@use '../bpk-mixins/tokens';

// Use imported functions
$result: math.div($a, $b);
```

--------------------------------

### SCSS Color Tokens Usage

Source: https://github.com/jronald01/backpack/blob/main/AGENTS.md

Demonstrates how to use various color tokens from the Backpack design system for text, backgrounds, brands, and borders within an SCSS component. These tokens provide semantic meaning and ensure consistent styling across the application.

```scss
.my-component {
  // Text colors
  color: tokens.$bpk-text-primary-day;
  color: tokens.$bpk-text-secondary-day;
  color: tokens.$bpk-text-disabled-day;
  color: tokens.$bpk-text-on-dark-day;

  // Background colors
  background-color: tokens.$bpk-canvas-day;
  background-color: tokens.$bpk-canvas-contrast-day;
  background-color: tokens.$bpk-surface-highlight-day;

  // Brand colors
  background-color: tokens.$bpk-core-primary-day;
  background-color: tokens.$bpk-core-accent-day;

  // Border colors
  border-color: tokens.$bpk-line-day;
  border-color: tokens.$bpk-line-on-dark-day;
}
```

--------------------------------

### Backpack SCSS Typography Mixin Usage for Text Sizes

Source: https://github.com/jronald01/backpack/blob/main/AGENTS.md

Shows how to apply Backpack's typography mixins to control text sizes within SCSS. This promotes consistent typography across the design system by avoiding manual font property adjustments.

```scss
.my-component {
  // Size-based typography
  &__small-text {
    @include typography.bpk-text-xs;    // Extra small
    @include typography.bpk-text-sm;    // Small
    @include typography.bpk-text-base;  // Base/default
    @include typography.bpk-text-lg;    // Large
    @include typography.bpk-text-xl;    // Extra large
    @include typography.bpk-text-xxl;   // 2x large
    @include typography.bpk-text-xxxl;  // 3x large
  }
}
```

--------------------------------

### BpkDataTable columns prop schema definition

Source: https://github.com/jronald01/backpack/blob/main/packages/bpk-component-datatable/docs/migrating.md

Defines the complete schema for the columns array prop in BpkDataTable v32. Each column object supports Header and Cell functions for custom rendering, dimension properties in rem units, sorting configuration, and styling options.

```javascript
{
  Header: function({disableSortBy, accessor, label}),
  accessor: string,
  Cell: function({rowData, rowIndex, accessor, columnIndex, cellData}),
  className: string,
  disableSortBy: boolean,
  defaultSortDirection: oneOf('ASC', 'DESC'),
  flexGrow: number,
  headerClassName: string,
  headerStyle: Object,
  label: string,
  minWidth: string,
  style: Object,
  width: string
}
```

--------------------------------

### BpkInput Component Examples in React

Source: https://context7.com/jronald01/backpack/llms.txt

Demonstrates the usage of the BpkInput component in React, including basic input, large size, clear button functionality, validation states, disabled input, and docked inputs for grouping. It utilizes `useState` for managing input values and validation status.

```jsx
import { useState } from 'react';
import BpkInput, { CLEAR_BUTTON_MODES } from '@skyscanner/backpack-web/bpk-component-input';
import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';

function InputExample() {
  const [value, setValue] = useState('');
  const [email, setEmail] = useState('');
  const [isEmailValid, setIsEmailValid] = useState(true);

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  const handleEmailChange = (e) => {
    const newEmail = e.target.value;
    setEmail(newEmail);
    setIsEmailValid(newEmail.includes('@') || newEmail === '');
  };

  const handleClear = (e) => {
    setValue('');
  };

  return (
    <div>
      {/* Basic input */}
      <BpkLabel htmlFor="basic-input">Name</BpkLabel>
      <BpkInput
        id="basic-input"
        name="basic-input"
        value={value}
        onChange={handleChange}
        placeholder="Enter your name"
      />

      {/* Large input */}
      <BpkLabel htmlFor="large-input">Destination</BpkLabel>
      <BpkInput
        id="large-input"
        name="large-input"
        value={value}
        onChange={handleChange}
        placeholder="Where to?"
        large
      />

      {/* Input with clear button */}
      <BpkLabel htmlFor="clearable-input">Search</BpkLabel>
      <BpkInput
        id="clearable-input"
        name="clearable-input"
        value={value}
        onChange={handleChange}
        onClear={handleClear}
        clearButtonMode={CLEAR_BUTTON_MODES.whileEditing}
        clearButtonLabel="Clear search"
        placeholder="Search flights"
      />

      {/* Validated input */}
      <BpkLabel htmlFor="email-input" valid={isEmailValid}>
        Email {!isEmailValid && '(Invalid)'}
      </BpkLabel>
      <BpkInput
        id="email-input"
        name="email"
        type="email"
        value={email}
        onChange={handleEmailChange}
        valid={isEmailValid}
        placeholder="email@example.com"
      />

      {/* Disabled input */}
      <BpkLabel htmlFor="disabled-input" disabled>Disabled Field</BpkLabel>
      <BpkInput
        id="disabled-input"
        name="disabled-input"
        value="Cannot edit this"
        disabled
      />

      {/* Docked inputs (grouped) */}
      <BpkLabel htmlFor="docked-first">Date Range</BpkLabel>
      <div style={{ display: 'flex' }}>
        <BpkInput
          id="docked-first"
          name="start-date"
          value="2025-01-01"
          docked
          dockedFirst
          placeholder="Start date"
        />
        <BpkInput
          id="docked-last"
          name="end-date"
          value="2025-01-15"
          docked
          dockedLast
          placeholder="End date"
        />
      </div>

      {/* Input with always-visible clear button */}
      <BpkLabel htmlFor="always-clear-input">Filter</BpkLabel>
      <BpkInput
        id="always-clear-input"
        name="filter"
        value={value}
        onChange={handleChange}
        onClear={handleClear}
        clearButtonMode={CLEAR_BUTTON_MODES.always}
        clearButtonLabel="Clear filter"
        placeholder="Filter results"
        large
      />
    </div>
  );
}

export default InputExample;

```

--------------------------------

### React BpkModal Component Example

Source: https://context7.com/jronald01/backpack/llms.txt

This snippet demonstrates the usage of the BpkModal component in React. It showcases various configurations including default, wide, full-screen, contrast surface, no header, no padding, and mobile-specific display options. It requires React and the Skyscanner Backpack web component library.

```jsx
import { useState } from 'react';
import BpkModal, { MODAL_STYLING } from '@skyscanner/backpack-web/bpk-component-modal';
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';

function ModalExample() {
  const [isOpen, setIsOpen] = useState(false);
  const [isContrastModalOpen, setIsContrastModalOpen] = useState(false);

  const openModal = () => setIsOpen(true);
  const closeModal = () => setIsOpen(false);

  return (
    <div id="modal-container">
      <div id="pagewrap">
        {/* Trigger button */}
        <BpkButton onClick={openModal}>
          Open Modal
        </BpkButton>

        {/* Default modal */}
        <BpkModal
          id="my-modal"
          className="my-modal-class"
          isOpen={isOpen}
          onClose={closeModal}
          title="Modal Title"
          closeLabel="Close modal"
          getApplicationElement={() => document.getElementById('pagewrap')}
          renderTarget={() => document.getElementById('modal-container')}
        >
          <p>This is the modal content. You can put any React components here.</p>
          <BpkButton onClick={closeModal}>Confirm</BpkButton>
        </BpkModal>

        {/* Wide modal */}
        <BpkModal
          id="wide-modal"
          isOpen={isOpen}
          onClose={closeModal}
          title="Wide Modal"
          closeLabel="Close"
          wide
          getApplicationElement={() => document.getElementById('pagewrap')}
        >
          <p>This modal is wider than the default.</p>
        </BpkModal>

        {/* Full screen modal */}
        <BpkModal
          id="fullscreen-modal"
          isOpen={isOpen}
          onClose={closeModal}
          title="Full Screen Modal"
          closeLabel="Close"
          fullScreen
          getApplicationElement={() => document.getElementById('pagewrap')}
        >
          <p>This modal takes up the entire screen.</p>
        </BpkModal>

        {/* Contrast surface modal */}
        <BpkModal
          id="contrast-modal"
          isOpen={isContrastModalOpen}
          onClose={() => setIsContrastModalOpen(false)}
          title="Contrast Modal"
          closeText="Done"
          modalStyle={MODAL_STYLING.surfaceContrast}
          getApplicationElement={() => document.getElementById('pagewrap')}
        >
          <p>This modal uses a contrasting surface style.</p>
        </BpkModal>

        {/* Modal without header */}
        <BpkModal
          id="no-header-modal"
          isOpen={isOpen}
          onClose={closeModal}
          ariaLabel="Modal title for screen readers"
          showHeader={false}
          getApplicationElement={() => document.getElementById('pagewrap')}
        >
          <p>This modal has no visible header.</p>
        </BpkModal>

        {/* Modal without padding */}
        <BpkModal
          id="no-padding-modal"
          isOpen={isOpen}
          onClose={closeModal}
          title="No Padding"
          closeLabel="Close"
          padded={false}
          getApplicationElement={() => document.getElementById('pagewrap')}
        >
          <img src="/image.jpg" alt="Full width image" style={{ width: '100%' }} />
        </BpkModal>

        {/* Not full screen on mobile */}
        <BpkModal
          id="not-fullscreen-mobile"
          isOpen={isOpen}
          onClose={closeModal}
          title="Desktop-style Modal"
          closeLabel="Close"
          fullScreenOnMobile={false}
          getApplicationElement={() => document.getElementById('pagewrap')}
        >
          <p>This modal maintains its desktop appearance on mobile.</p>
        </BpkModal>
      </div>
    </div>
  );
}

export default ModalExample;
```

--------------------------------

### BpkButton Component Examples (React)

Source: https://context7.com/jronald01/backpack/llms.txt

Demonstrates the usage of the BpkButton component from the Backpack Design System. This component offers various styles (primary, secondary, destructive, featured, link), sizes, and states (disabled, submit), along with icon-only and anchor tag variations. It requires importing specific icon components and utilities for alignment and RTL support.

```jsx
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
import { withButtonAlignment, withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-right';

const AlignedArrowIcon = withButtonAlignment(withRtlSupport(ArrowIcon));

function ButtonExample() {
  const handleClick = () => {
    console.log('Button clicked');
  };

  return (
    <div>
      {/* Primary button (default) */}
      <BpkButton onClick={handleClick}>
        Primary Button
      </BpkButton>

      {/* Large primary button */}
      <BpkButton large onClick={handleClick}>
        Large Primary
      </BpkButton>

      {/* Secondary button */}
      <BpkButton secondary onClick={handleClick}>
        Secondary
      </BpkButton>

      {/* Destructive action button */}
      <BpkButton destructive onClick={handleClick}>
        Delete
      </BpkButton>

      {/* Featured button with gradient */}
      <BpkButton featured onClick={handleClick}>
        Featured
      </BpkButton>

      {/* Link-style button */}
      <BpkButton link onClick={handleClick}>
        Link Button
      </BpkButton>

      {/* Disabled button */}
      <BpkButton disabled>
        Disabled
      </BpkButton>

      {/* Icon-only button with accessibility */}
      <BpkButton iconOnly onClick={handleClick}>
        <AlignedArrowIcon />
        <span className="visually-hidden">Next</span>
      </BpkButton>

      {/* Button as link (anchor tag) */}
      <BpkButton href="https://www.skyscanner.net" blank>
        Go to Skyscanner
      </BpkButton>

      {/* Submit button */}
      <BpkButton submit onClick={handleClick}>
        Submit Form
      </BpkButton>
    </div>
  );
}

export default ButtonExample;
```

--------------------------------

### Apply Custom Themes with BpkThemeProvider in React

Source: https://context7.com/jronald01/backpack/llms.txt

Demonstrates using the BpkThemeProvider to apply custom color schemes and design tokens to child components in a React application. It shows how to define a theme object, specify theme attributes, and wrap components for theming. Includes examples of default theming, custom theming, theming with a wrapper component, and nested themes.

```jsx
import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
import BpkInput from '@skyscanner/backpack-web/bpk-component-input';

// Define custom theme
const customTheme = {
  buttonPrimaryTextColor: '#FFFFFF',
  buttonPrimaryHoverTextColor: '#FFFFFF',
  buttonPrimaryActiveTextColor: '#FFFFFF',
  buttonPrimaryBackgroundColor: '#FF5000',
  buttonPrimaryHoverBackgroundColor: '#E64500',
  buttonPrimaryActiveBackgroundColor: '#CC3D00',
  buttonSecondaryTextColor: '#FF5000',
  buttonSecondaryHoverTextColor: '#E64500',
  buttonSecondaryActiveTextColor: '#CC3D00',
  buttonSecondaryBorderColor: '#FF5000',
  buttonSecondaryHoverBorderColor: '#E64500',
  buttonSecondaryActiveBorderColor: '#CC3D00',
  buttonSecondaryBackgroundColor: '#FFFFFF',
  buttonSecondaryHoverBackgroundColor: '#FFF5F0',
  buttonSecondaryActiveBackgroundColor: '#FFE6D9',
};

// Theme attributes required by button component
const buttonThemeAttributes = [
  'buttonPrimaryTextColor',
  'buttonPrimaryHoverTextColor',
  'buttonPrimaryActiveTextColor',
  'buttonPrimaryBackgroundColor',
  'buttonPrimaryHoverBackgroundColor',
  'buttonPrimaryActiveBackgroundColor',
  'buttonSecondaryTextColor',
  'buttonSecondaryHoverTextColor',
  'buttonSecondaryActiveTextColor',
  'buttonSecondaryBorderColor',
  'buttonSecondaryHoverBorderColor',
  'buttonSecondaryActiveBorderColor',
  'buttonSecondaryBackgroundColor',
  'buttonSecondaryHoverBackgroundColor',
  'buttonSecondaryActiveBackgroundColor',
];

function ThemedApp() {
  return (
    <div>
      {/* Default theme */}
      <div>
        <h2>Default Theme</h2>
        <BpkButton>Default Primary Button</BpkButton>
        <BpkButton secondary>Default Secondary Button</BpkButton>
      </div>

      {/* Custom themed section */}
      <BpkThemeProvider
        theme={customTheme}
        themeAttributes={buttonThemeAttributes}
      >
        <h2>Custom Orange Theme</h2>
        <BpkButton>Custom Primary Button</BpkButton>
        <BpkButton secondary>Custom Secondary Button</BpkButton>
      </BpkThemeProvider>

      {/* Theme with custom wrapper component */}
      <BpkThemeProvider
        theme={customTheme}
        themeAttributes={buttonThemeAttributes}
        component="section"
        style={{ padding: '20px', backgroundColor: '#f5f5f5' }}
        className="themed-section"
      >
        <h2>Themed Section</h2>
        <BpkButton>Themed Button</BpkButton>
      </BpkThemeProvider>

      {/* Multiple nested themes */}
      <BpkThemeProvider
        theme={customTheme}
        themeAttributes={buttonThemeAttributes}
      >
        <div>
          <BpkButton>Outer Theme Button</BpkButton>

          <BpkThemeProvider
            theme={{
              ...customTheme,
              buttonPrimaryBackgroundColor: '#0066FF',
              buttonPrimaryHoverBackgroundColor: '#0052CC',
              buttonPrimaryActiveBackgroundColor: '#003D99',
            }}
            themeAttributes={buttonThemeAttributes}
          >
            <BpkButton>Nested Blue Theme Button</BpkButton>
          </BpkThemeProvider>
        </div>
      </BpkThemeProvider>
    </div>
  );
}

export default ThemedApp;

```

--------------------------------

### Show/Hide Popover Arrow

Source: https://github.com/jronald01/backpack/blob/main/packages/bpk-component-popover/docs/migration-guide.md

Controls the visibility of the popover's arrow. By default, the arrow is shown (`true`). Setting it to `false` will hide the arrow and attach the popover directly to the target element.

```jsx
import BpkPopover from '@bpk-ui/popover';

// ...

<BpkPopover
  id="my-popover"
  target={<button>Click Me</button>}
  isOpen={true}
  showArrow={true} // Arrow is visible
>
  Popover content
</BpkPopover>

<BpkPopover
  id="my-popover-no-arrow"
  target={<button>Click Me</button>}
  isOpen={true}
  showArrow={false} // Arrow is hidden
>
  Popover content without arrow
</BpkPopover>
```

--------------------------------

### Stub Declaration for Untyped Modules

Source: https://github.com/jronald01/backpack/blob/main/decisions/imports-ts-suppressions.md

This example shows how consumers can suppress TypeScript errors for untyped imports by creating stub declaration files. This approach requires adding a `declare module` statement for each untyped package imported.

```typescript
declare module '*/bpk-component-text';
declare module 'some-external-untyped-package';
```

--------------------------------

### Run Tests in Backpack

Source: https://github.com/jronald01/backpack/blob/main/CONTRIBUTING.md

Commands to run tests in the Backpack project. Includes standard test execution and a watch mode for continuous testing during development. Visual regression tests are also mentioned, powered by Percy and run on CI.

```bash
npm test
npm run jest:watch
```

--------------------------------

### Import and render BpkButton component variants

Source: https://github.com/jronald01/backpack/blob/main/packages/bpk-component-button/docs/button-v1-readme.md

Demonstrates how to import the BpkButton component along with icon wrappers for RTL and button alignment support. Shows rendering of multiple button variants including primary, secondary, link, and icon-only buttons with proper accessibility markup.

```jsx
import { withButtonAlignment, withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-right';
import BpkButton from '@skyscanner/backpack-web/bpk-component-button';

const AlignedArrowIcon = withButtonAlignment(withRtlSupport(ArrowIcon));

export default () => (
  <div>
    <BpkButton>Primary</BpkButton>
    <BpkButton large>Large primary</BpkButton>
    <BpkButton secondary>Secondary</BpkButton>
    <BpkButton secondaryOnDark>SecondaryOnDark</BpkButton>
    <BpkButton link>Link</BpkButton>
    <BpkButton linkOnDark>LinkOnDark</BpkButton>
    <BpkButton primaryOnDark>PrimaryOnDark</BpkButton>
    <BpkButton primaryOnLight>PrimaryOnLight</BpkButton>
    <BpkButton iconOnly>
      <AlignedArrowIcon />
      <span className="visually-hidden">Search</span>
    </BpkButton>
  </div>
);
```

--------------------------------

### Clone repository and create feature branch in Git

Source: https://github.com/jronald01/backpack/blob/main/CONTRIBUTING.md

Initialize the Backpack project by cloning the repository from GitHub and creating a new feature branch for your contribution. This establishes the foundation for submitting pull requests to the project.

```shell
git clone https://github.com/YOUR_USERNAME/Backpack.git
git checkout -b {BRANCH_NAME}
```

--------------------------------

### BpkCalendarContainer: Date Range Selection in React

Source: https://context7.com/jronald01/backpack/llms.txt

Illustrates using the BpkCalendarContainer for selecting date ranges. It manages start and end dates using React's useState and implements logic for setting and clearing the range. Dependencies include 'react' and 'date-fns'.

```jsx
import { useState } from 'react';
import BpkCalendarContainer from '@skyscanner/backpack-web/bpk-component-calendar';
import { format } from 'date-fns';

function CalendarExample() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const formatDate = (date) => format(date, 'dd/MM/yyyy');
  const formatMonth = (date) => format(date, 'MMMM yyyy');
  const formatDateFull = (date) => format(date, 'EEEE, MMMM do, yyyy');

  const handleRangeSelect = (date) => {
    if (!startDate || (startDate && endDate)) {
      // Start new range
      setStartDate(date);
      setEndDate(null);
    } else {
      // Complete range
      if (date < startDate) {
        setEndDate(startDate);
        setStartDate(date);
      } else {
        setEndDate(date);
      }
    }
  };

  return (
    <div>
      <h3>Date Range Selection</h3>
      <BpkCalendarContainer
        id="range-calendar"
        selectionConfiguration={{
          type: 'range',
          startDate: startDate,
          endDate: endDate,
        }}
        formatDate={formatDate}
        formatMonth={formatMonth}
        formatDateFull={formatDateFull}
        daysOfWeek={[
          { name: 'Sunday', nameAbbr: 'Sun', index: 0, isWeekend: true },
          { name: 'Monday', nameAbbr: 'Mon', index: 1, isWeekend: false },
          { name: 'Tuesday', nameAbbr: 'Tue', index: 2, isWeekend: false },
          { name: 'Wednesday', nameAbbr: 'Wed', index: 3, isWeekend: false },
          { name: 'Thursday', nameAbbr: 'Thu', index: 4, isWeekend: false },
          { name: 'Friday', nameAbbr: 'Fri', index: 5, isWeekend: false },
          { name: 'Saturday', nameAbbr: 'Sat', index: 6, isWeekend: true },
        ]}
        weekStartsOn={1}
        changeMonthLabel="Change month"
        nextMonthLabel="Next month"
        previousMonthLabel="Previous month"
        onDateSelect={handleRangeSelect}
      />
      {startDate && endDate && (
        <p>
          Range: {formatDate(startDate)} - {formatDate(endDate)}
        </p>
      )}
    </div>
  );
}

```

--------------------------------

### BpkCalendarContainer: Custom Date Modifiers in React

Source: https://context7.com/jronald01/backpack/llms.txt

Demonstrates how to apply custom styles and behaviors to dates within BpkCalendarContainer using the `getDateModifiers` function. This example highlights weekends and marks specific dates ('the 15th') as 'special'. Dependencies include 'react' and 'date-fns'.

```jsx
import { useState } from 'react';
import BpkCalendarContainer from '@skyscanner/backpack-web/bpk-component-calendar';
import { format } from 'date-fns';

function CalendarExample() {
  const [selectedDate, setSelectedDate] = useState(null);
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const formatDate = (date) => format(date, 'dd/MM/yyyy');
  const formatMonth = (date) => format(date, 'MMMM yyyy');
  const formatDateFull = (date) => format(date, 'EEEE, MMMM do, yyyy');

  const handleDateSelect = (date) => {
    setSelectedDate(date);
    console.log('Selected date:', formatDate(date));
  };

  const handleRangeSelect = (date) => {
    if (!startDate || (startDate && endDate)) {
      // Start new range
      setStartDate(date);
      setEndDate(null);
    } else {
      // Complete range
      if (date < startDate) {
        setEndDate(startDate);
        setStartDate(date);
      } else {
        setEndDate(date);
      }
    }
  };

  // Custom date modifiers
  const getDateModifiers = (date) => {
    const modifiers = [];

    // Highlight weekends
    const day = date.getDay();
    if (day === 0 || day === 6) {
      modifiers.push('weekend');
    }

    // Mark special dates
    if (date.getDate() === 15) {
      modifiers.push('special');
    }

    return modifiers;
  };

  return (
    <div>
      <h3>Calendar with Custom Modifiers</h3>
      <BpkCalendarContainer
        id="custom-modifiers-calendar"
        formatDate={formatDate}
        formatMonth={formatMonth}
        formatDateFull={formatDateFull}
        daysOfWeek={[
          { name: 'Sunday', nameAbbr: 'Sun', index: 0, isWeekend: true },
          { name: 'Monday', nameAbbr: 'Mon', index: 1, isWeekend: false },
          { name: 'Tuesday', nameAbbr: 'Tue', index: 2, isWeekend: false },
          { name: 'Wednesday', nameAbbr: 'Wed', index: 3, isWeekend: false },
          { name: 'Thursday', nameAbbr: 'Thu', index: 4, isWeekend: false },
          { name: 'Friday', nameAbbr: 'Fri', index: 5, isWeekend: false },
          { name: 'Saturday', nameAbbr: 'Sat', index: 6, isWeekend: true },
        ]}
        weekStartsOn={1}
        changeMonthLabel="Change month"
        nextMonthLabel="Next month"
        previousMonthLabel="Previous month"
        dateModifiers={getDateModifiers}
        onDateSelect={handleDateSelect} // Example for single date selection context
      />
    </div>
  );
}

```

--------------------------------

### Run Linters Manually in Backpack

Source: https://github.com/jronald01/backpack/blob/main/CONTRIBUTING.md

Provides commands for manually running linters on JavaScript and SCSS files within the Backpack project. Includes options for linting both languages, just JavaScript, just SCSS, and attempting to automatically fix linting errors in JavaScript.

```bash
npm run lint
npm run lint:js
npm run lint:js:fix
npm run lint:scss
```

--------------------------------

### SCSS Mixins for Styling with Backpack Design Tokens

Source: https://context7.com/jronald01/backpack/llms.txt

Demonstrates the usage of Backpack SCSS mixins to apply design tokens for typography, buttons, borders, spacing, and responsive breakpoints. It requires importing base foundations and mixins from '@skyscanner/bpk-foundations-web' and '@skyscanner/bpk-mixins'. The mixins facilitate consistent styling and responsive design across different devices.

```scss
// Import Backpack mixins and foundations
@import '~@skyscanner/bpk-foundations-web/tokens/base.scss';
@import '~@skyscanner/bpk-mixins/index.scss';

// Using typography mixins
.my-heading {
  @include bpk-heading-1();
  color: $bpk-text-primary-day;
  margin-bottom: $bpk-spacing-md;
}

.my-body-text {
  @include bpk-body-default();
  color: $bpk-text-secondary-day;
}

.my-caption {
  @include bpk-caption();
  color: $bpk-text-tertiary-day;
}

// Using button mixins
.my-custom-button {
  @include bpk-button();
  background-color: $bpk-core-accent-day;
  color: $bpk-text-on-dark-day;

  &:hover {
    background-color: $bpk-core-accent-day;
    opacity: 0.8;
  }

  &:active {
    background-color: $bpk-core-accent-day;
    opacity: 0.6;
  }
}

// Using border radius
.my-card {
  @include bpk-border-radius-sm();
  padding: $bpk-spacing-base;
  background-color: $bpk-surface-default-day;
  box-shadow: $bpk-box-shadow-sm;
}

.my-rounded-element {
  @include bpk-border-radius-lg();
}

// Using breakpoint mixins for responsive design
.my-responsive-container {
  padding: $bpk-spacing-md;

  @include bpk-breakpoint-mobile {
    padding: $bpk-spacing-sm;
    font-size: $bpk-font-size-sm;
  }

  @include bpk-breakpoint-tablet {
    padding: $bpk-spacing-base;
    max-width: 768px;
  }

  @include bpk-breakpoint-above-mobile {
    display: flex;
    gap: $bpk-spacing-lg;
  }

  @include bpk-breakpoint-above-tablet {
    max-width: 1024px;
    margin: 0 auto;
  }
}

// Using elevation/shadow mixins
.elevated-card {
  @include bpk-box-shadow-sm();
  background: $bpk-surface-default-day;
  padding: $bpk-spacing-lg;

  &:hover {
    @include bpk-box-shadow-lg();
  }
}

// Using spacing utilities
.spaced-content {
  margin-bottom: $bpk-spacing-xl;

  > * + * {
    margin-top: $bpk-spacing-md;
  }
}

// Using RTL support mixin
.directional-element {
  margin-left: $bpk-spacing-md;

  @include bpk-rtl {
    margin-left: 0;
    margin-right: $bpk-spacing-md;
  }
}

```

--------------------------------

### Sass: Import Specific Mixins with @use

Source: https://github.com/jronald01/backpack/blob/main/decisions/modern-sass-api.md

Demonstrates the correct way to import and use Sass mixins from the `bpk-mixins` package using the modern `@use` syntax. This method ensures granular imports, improving modularity and build performance. It is incompatible with `node-sass`.

```scss
// BpkAwesomeComponent.module.scss
@use '../bpk-mixins/tokens';

.bpk-awesome-component {
  margin-right: tokens.bpk-spacing-md();
}
```

--------------------------------

### Log actions with fallback to console.log

Source: https://github.com/jronald01/backpack/blob/main/examples/bpk-storybook-utils/README.md

Logs events using Storybook's action addon if available, otherwise falls back to console.log. This utility allows consistent action logging both inside and outside Storybook environments. It takes a string argument representing the action name.

```javascript
import { action } from '@skyscanner/backpack-web/bpk-storybook-utils';

... 

action("Thing");
```

--------------------------------

### Ignore Stylelint Rules with Justification (CSS)

Source: https://github.com/jronald01/backpack/blob/main/decisions/ignoring.md

Shows how to disable specific Stylelint rules, like `declaration-no-important`, within a CSS file. This example includes a comment explaining why the `!important` flag is necessary, which is to override inline styles on SVG icons. This approach provides clarity on rule exceptions.

```css
> svg {
  /* stylelint-disable declaration-no-important */
  width: 16 * $bpk-one-pixel-rem !important;
  height: 16 * $bpk-one-pixel-rem !important;
  /* stylelint-enable declaration-no-important */
}
```

--------------------------------

### Define exact props with React.HTMLAttributes in TypeScript

Source: https://github.com/jronald01/backpack/blob/main/decisions/inexact-rest.md

Types a Props object by intersecting named properties with React.HTMLAttributes for a specific HTML element (div in this example). This approach provides exact typing for standard HTML attributes while avoiding the use of `any`, offering better type safety than inexact rest parameters.

```typescript
type Props = {
  namedPropOne: string;
  namedPropTwo: boolean;
} & React.HTMLAttributes<HTMLDivElement>;
```

--------------------------------

### Display components with a dark background wrapper

Source: https://github.com/jronald01/backpack/blob/main/examples/bpk-storybook-utils/README.md

Provides a wrapper component that applies a dark background, enhancing the visibility of components that are not easily seen on light backgrounds. It's useful for demonstrating UI elements that require specific background conditions. The component accepts children elements to be displayed within the dark background.

```javascript
import { BpkDarkExampleWrapper } from '@skyscanner/backpack-web/bpk-storybook-utils';

... 

<BpkDarkExampleWrapper>
  <p style={{ color: 'white' }}>
    This white text is only visible on dark backgrounds.
  </p>
</BpkDarkExampleWrapper>
```

--------------------------------

### Backpack Calendar Component Example

Source: https://context7.com/jronald01/backpack/llms.txt

Demonstrates the usage of the Backpack Calendar component, including date selection, disabling past dates, and navigation labels. It utilizes props like `weekStartsOn`, `minDate`, `maxDate`, `isDateDisabled`, `selectedDate`, and `onDateSelect` for configuration. The component requires a date object for selection and a function to handle date changes.

```jsx
import React, { useState } from 'react';
import { BpkCalendar, dateToISOString, ISOStringPaser } from '@skyscanner/backpack-web/bpk-component-calendar';

const disablePastDates = (date) => {
  const today = new Date();
  return dateToISOString(date) < dateToISOString(today);
};

function CalendarExample() {
  const [selectedDate, setSelectedDate] = useState(null);

  const handleDateSelect = (date) => {
    setSelectedDate(date);
  };

  return (
    <div className="App">
      <div>
        <BpkCalendar
          id="calendar"
          availableDateTokenizers={[
            { name: 'Sunday', nameAbbr: 'Sun', index: 0, isWeekend: true },
            { name: 'Monday', nameAbbr: 'Mon', index: 1, isWeekend: false },
            { name: 'Tuesday', nameAbbr: 'Tue', index: 2, isWeekend: false },
            { name: 'Wednesday', nameAbbr: 'Wed', index: 3, isWeekend: false },
            { name: 'Thursday', nameAbbr: 'Thu', index: 4, isWeekend: false },
            { name: 'Friday', nameAbbr: 'Fri', index: 5, isWeekend: false },
            { name: 'Saturday', nameAbbr: 'Sat', index: 6, isWeekend: true },
          ]}
          weekStartsOn={1}
          changeMonthLabel="Change month"
          nextMonthLabel="Next month"
          previousMonthLabel="Previous month"
          minDate={new Date()} // Today
          maxDate={new Date(Date.now() + 90 * 24 * 60 * 60 * 1000)} // 90 days from now
          isDateDisabled={disablePastDates}
          selectedDate={selectedDate}
          onDateSelect={handleDateSelect}
        />
      </div>
    </div>
  );
}

export default CalendarExample;
```