### Basic LocalizationProvider Setup

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/localization-provider/usage.mdx

Wrap your application with LocalizationProvider to define the date adapter. This example uses the Luxon adapter for US English locale.

```javascript
import { LocalizationProvider } from "@salt-ds/date-components";
import { AdapterLuxon } from "@salt-ds/date-adapters/luxon";

const adapter = new AdapterLuxon({ locale: "en-US" });

return (
  <LocalizationProvider dateAdapter={adapter}>
    <App />
  </LocalizationProvider>
);
```

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

### Install @salt-ds/lab Package

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/getting-started/developing.mdx

Install the @salt-ds/lab package to experiment with early-stage components. Not recommended for production.

```bash
npm install @salt-ds/lab
```

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

### Install Salt UI Packages

Source: https://github.com/jpmorganchase/salt-ds/blob/main/README.md

Install the core, theme, lab, and icons packages using npm or yarn.

```sh
npm install @salt-ds/core @salt-ds/theme @salt-ds/lab @salt-ds/icons
```

```sh
yarn add @salt-ds/core @salt-ds/theme @salt-ds/lab @salt-ds/icons
```

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

### Initialize SemanticIconProvider with Custom Icons

Source: https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/stories/semantic-icon-provider/semantic-icon-provider.mdx

Replace existing icon setups with SemanticIconProvider and provide custom icon mappings. This example shows how to map specific icon names to custom icon components.

```javascript
import {
  ChevronDownIcon,
  SuccessTickIcon,
  ErrorSolidIcon,
} from "@salt-ds/icons";
import { SemanticIconProvider } from "@salt-ds/core";

const customIconMap = {
  ExpandIcon: ChevronDownIcon,
  SuccessIcon: SuccessTickIcon,
  ErrorIcon: ErrorSolidIcon,
};

const App = () => (
  <SemanticIconProvider iconMap={customIconMap}> {
    /* Your application components */
  </SemanticIconProvider>
);
```

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

### Install Data Grid Package

Source: https://github.com/jpmorganchase/salt-ds/blob/main/packages/data-grid/stories/grid.mdx

Install the @salt-ds/data-grid package using yarn or npm.

```sh
yarn add @salt-ds/data-grid;
```

```sh
npm install @salt-ds/data-grid;
```

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

### Install Core Salt Packages

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/getting-started/developing.mdx

Install the main Salt packages for core components, themes, and icons using npm. This command installs the production-ready UI components, CSS for themes, and SVG icons.

```bash
npm install @salt-ds/core @salt-ds/theme @salt-ds/icons
```

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

### File Drop Zone Default Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/file-drop-zone/examples.mdx

Demonstrates the default configuration of the File Drop Zone component. Customize messages and validation text to guide user actions and requirements.

```jsx
<FileDropZone />
```

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

### Install Date Components and Adapters

Source: https://github.com/jpmorganchase/salt-ds/blob/main/packages/date-components/README.md

Install the date components and their associated adapters using yarn. Ensure Salt peer dependencies like React and other Salt packages are also installed.

```sh
yarn add @salt-ds/date-components @salt-ds/date-adapters
```

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

### Basic Resizable Panel Group Setup

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/splitter/usage.mdx

Demonstrates the basic structure for a horizontal PanelGroup with multiple panels and resize handles. This setup requires the Salt DS theme to be imported and applied.

```jsx
<div className="react-resizable-panels-theme-salt">
  <PanelGroup direction="horizontal">
    <Panel id="left">
      <Text>Left</Text>
    </Panel>
    <PanelResizeHandle />
    <Panel id="middle">
      <Text>Center</Text>
    </Panel>
    <PanelResizeHandle />
    <Panel id="right">
      <Text>Right</Text>
    </Panel>
  </PanelGroup>
</div>
```

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

### Flex Layout Default Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/layouts/flex-layout/examples.mdx

Demonstrates the default behavior of FlexLayout, where items are arranged horizontally and aligned to the start. Dimensions are determined by content.

```javascript
import { FlexLayout } from "@salt-ds/core";

function DefaultLayout() {
  return (
    <FlexLayout>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </FlexLayout>
  );
}
```

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

### Install Luxon Dependencies

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/localization-provider/usage.mdx

Install the necessary dependencies for using the Luxon date adapter. This includes the Salt date adapters package and Luxon itself.

```json
"dependencies": {
  "@salt-ds/date-adapters": "latest", // or your required version
  "luxon": "^3.7.2",
  "@types/luxon": "^3.7.1",
}
```

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

### QuickLinks Component Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/getting-started/designing/index.mdx

Demonstrates the usage of the QuickLinks component with specified column layouts and navigation links.

```javascript
import QuickLinks from "@jpmorganchase/design-system/src/components/quick-links";

<QuickLinks
  columns={{
    xs: 1,
    md: 2,
  }}
  links={[
    {
      title: "Support (for JPMC employees only)",
      action: "Go to support page",
      href: "https://go/salt-ds-internal/support",
    },
    {
      title: "Support (Public)",
      action: "Go to GitHub",
      href: "/salt/support-and-contributions",
    },
  ]} />
```

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

### Install dayjs Dependencies

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/localization-provider/usage.mdx

Install dependencies for the Day.js adapter. This includes the Salt date adapters package and Day.js.

```json
"dependencies": {
  "@salt-ds/date-adapters": "latest", // or your required version
  "dayjs": "^1.11.20",
}
```

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

### Simple Grid Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/packages/data-grid/stories/grid.mdx

A basic example of rendering a simple grid. Ensure the grid element has a CSS height property set.

```javascript
<LazyStoryCanvas>
  <Canvas of={DataGridStories.SimpleGrid} />
</LazyStoryCanvas>
```

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

### Basic Input Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/input/examples.mdx

Demonstrates the fundamental usage of the Input component for capturing single-line text.

```jsx
import { Input } from '@salt-ds/core';

function BasicInput() {
  return <Input placeholder="Enter text here" />;
}
```

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

### Install Moment Dependencies

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/localization-provider/usage.mdx

Install dependencies for the legacy Moment.js date adapter. Include the Salt date adapters package and Moment.js. Moment-timezone is optional but recommended for timezone support.

```json
"dependencies": {
  "@salt-ds/date-adapters": "latest", // or your required version
  "moment": "^2.30.1",
  "moment-timezone": "^0.6.1", // if timezone support required
}
```

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

### Install embla-carousel-react

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/carousel/usage.mdx

Install the Embla Carousel React package using npm or yarn before using Salt Carousel components.

```bash
npm install @salt-ds/embla-carousel
```

```bash
yarn add @salt-ds/embla-carousel
```

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

### Install Highcharts Theme and Dependencies

Source: https://github.com/jpmorganchase/salt-ds/blob/main/packages/highcharts-theme/README.md

Install the necessary Highcharts packages and the Salt Highcharts theme using npm or yarn.

```bash
npm install highcharts@^10 highcharts-react-official @salt-ds/highcharts-theme
# or
yarn add highcharts@^10 highcharts-react-official @salt-ds/highcharts-theme
```

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

### SaltProvider Theme Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/salt-provider/examples.mdx

Demonstrates how to change the application theme using the `theme` prop on SaltProvider. Multiple theme names can be passed.

```jsx
import { SaltProvider } from "@salt-ds/core";

function App() {
  return (
    <SaltProvider theme="dark">{/* ... app content ... */}</SaltProvider>
  );
}
```

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

### Overlay With Actions Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/overlay/examples.mdx

Shows how to include action buttons within the overlay that can control its behavior. This example demonstrates an 'Export' button that triggers a function, closes the overlay, and returns focus to the trigger element.

```jsx
import { Overlay, OverlayHeader, OverlayPanel, Button } from '@jpmorganchase/salt-ds';

function WithActionsOverlayExample() {
  const handleExport = () => {
    console.log('Exporting...');
    // Logic to close overlay and return focus would be here
  };

  return (
    <Overlay
      content={
        <OverlayPanel
          header={
            <OverlayHeader
              title="Overlay with Actions"
              actions={[
                <Button key="export" onClick={handleExport} variant="primary">
                  Export
                </Button>,
              ]}
            />
          }
        >
          <p>Content requiring action.</p>
        </OverlayPanel>
      }
      trigger={<button>Open Overlay with Actions</button>}
    />
  );
}
```

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

### Tag in Card Layout Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/tag/examples.mdx

Provides an example of using multiple tags within a card component, highlighting the recommended spacing between adjacent tags using `--salt-spacing-50`.

```jsx
<Card>
  <Tag>Tag 1</Tag>
  <Tag>Tag 2</Tag>
  <Tag>Tag 3</Tag>
</Card>
```

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

### Image Switcher Caption Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/templates/pattern-pages/README.md

This example shows how to implement a caption for an image switcher component. Captions add further explanation to an image.

```jsx
<ImageSwitcher
  images={[
    {
      src: "/img/patterns/selectable-card/cards-grid-layout.png",
      alt: "Cards arranged in a grid layout",
    },
    {
      src: "/img/patterns/selectable-card/cards-grid-layout-spacing.png",
      alt: "Cards arranged in a grid layout with spacing",
    },
  ]}
  label="Show spacing"
  caption="Cards arranged in a grid layout."
/>
```

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

### Install Fontsource Packages

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/getting-started/developing.mdx

Install the necessary Fontsource packages for Open Sans and PT Mono. This is recommended for self-hosting fonts in enterprise applications.

```bash
npm install @fontsource/open-sans @fontsource/pt-mono
```

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

### Default DatePicker Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/date-picker/examples.mdx

Demonstrates an uncontrolled DatePicker for simple date selection. Requires a LocalizationProvider.

```jsx
import { DatePicker } from '@salt-ds/core';

function DefaultDatePicker() {
  return <DatePicker selectionVariant="single" />;
}
```

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

### Button Bar Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/layouts/split-layout/examples.mdx

Demonstrates using a split layout in its default configuration to group buttons, suitable for app headers.

```javascript
<SplitLayout>
  <FlexItem>
    <ButtonGroup>
      <Button variant="secondary">Cancel</Button>
      <Button variant="primary">Save</Button>
    </ButtonGroup>
  </FlexItem>
  <FlexItem>
    <ButtonGroup>
      <Button variant="secondary">Help</Button>
    </ButtonGroup>
  </FlexItem>
</SplitLayout>
```

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

### Custom Floating Component Setup

Source: https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/stories/floating-platform/floating-platform.mdx

Imports necessary components for creating a custom floating component, including SaltProvider and FloatingPortal.

```javascript
import { Salt } from "@salt-ds/core";
import { FloatingComponentProvider } from "@salt-ds/window";
import { FloatingPortal } from "@floating-ui/react";
```

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

### Range Date Picker Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/date-picker/range-date-picker/usage.mdx

Demonstrates the basic usage of the Range Date Picker component with the 'range' selection variant.

```javascript
import { DatePicker } from "@salt-ds/core";

function RangeDatePicker() {
  return (
    <DatePicker selectionVariant="range">
      <DatePickerRangeInput />
      <DatePickerRangePanel />
    </DatePicker>
  );
}
```

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

### SaltProvider Responsive Density Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/salt-provider/examples.mdx

Demonstrates setting a responsive density, recommending 'touch' density for mobile devices. This can be achieved using media queries or device detection.

```jsx
import { SaltProvider } from "@salt-ds/core";

function App() {
  return (
    <SaltProvider density="touch">{/* ... app content ... */}</SaltProvider>
  );
}
```

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

### today

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/localization-provider/usage.mdx

Gets the current date with the time set to the start of the day.

```APIDOC
## today

Gets the current date with the time set to the start of the day.

### Parameters
#### Path Parameters
- `timezone` (Timezone) - Required - The timezone to use.

### Returns
`TDate` - The current date at the start of the day.
```

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

### Run Local Development Server

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/README.md

Execute these commands to start the local development server and generate snapshots. Navigate to http://localhost:3000/salt/index in your browser.

```bash
yarn gen:snapshot
```

```bash
yarn serve
```

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

### startOf

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/localization-provider/usage.mdx

Gets the start of a specified time period for a date object. Returns the beginning of the day, week, month, or year.

```APIDOC
## startOf

### Description
Gets the start of a specified time period for a date object.

### Parameters
#### Path Parameters
- `date` (TDate) - Required - The date object.
- `granularity` ("day" | "week" | "month" | "year") - Required - The time period.

### Returns
`TDate` - The date object representing the start of the period.
```

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

### Info Banner Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/banner/examples.mdx

Use for general information, such as updates to terms and conditions. Displays an info icon and supporting message.

```jsx
import { Banner } from '@jpmorganchase/salt-ds';

function App() {
  return (
    <Banner variant="info" status="info" message="This is an informational banner." />
  );
}
```

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

### Sentiment Indication Examples

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/patterns/indication.mdx

Illustrates sentiment indications with corresponding colors to guide users and evoke specific feelings. Use for interfaces to provide visual cues about potential outcomes.

```jsx
<ColorIndicator fillColor="gray" size={1.5}/>
Comfort
```

```jsx
<ColorIndicator fillColor="accent" size={1.5}/>
Trust
```

```jsx
<ColorIndicator fillColor="orange" size={1.5}/>
Carefulness
```

```jsx
<ColorIndicator fillColor="red" size={1.5}/>
Negativity
```

```jsx
<ColorIndicator fillColor="green" size={1.5}/>
Positivity
```

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

### Basic Component Usage

Source: https://github.com/jpmorganchase/salt-ds/blob/main/templates/component-pages/component-name/examples.mdx

Demonstrates the basic usage of the component-name component. Ensure the componentName and exampleName props are correctly set.

```javascript
<LivePreview componentName="component-name" exampleName="ComponentExample" />
```

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

### File Drop Zone Error State Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/file-drop-zone/examples.mdx

Shows how to display an error state when uploaded files fail validation. Set the `state` prop to 'error' to inform users and guide them toward resolving the issue.

```jsx
<FileDropZone state="error" />
```

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

### Responsive GridLayout Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/layouts/grid-layout/examples.mdx

Illustrates how to create a responsive grid layout by defining different column configurations for various breakpoints (xs, sm, md, lg, xl). This ensures content adapts to different screen sizes.

```jsx
columns={{ xs: 1, sm: 2, md: 4, lg: 6, xl: 12 }}
```

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

### Flex Item Position - Start

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/layouts/split-layout/examples.mdx

Aligns a specific flex item to the start of the cross-axis.

```javascript
<SplitLayout>
  <FlexItem align="start">Item 1</FlexItem>
  <FlexItem>Item 2</FlexItem>
</SplitLayout>
```

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

### Full Custom Floating Platform Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/stories/floating-platform/floating-platform.mdx

Integrates custom Floating UI platform, middleware, and enables animation frame updates for a Tooltip component. Requires importing platform, offset, FloatingPlatformProvider, and Tooltip.

```javascript
import { platform, offset } from "@floating-ui/dom";
import { FloatingPlatformProvider, Tooltip } from "@salt-ds/core";

const customPlatfrom = {
    ...platform,
    // Add custom platform configuration
}

const customMiddleware = [offset(10)];

const CustomFloatingPlatformTooltip = ({...props}) => {
    return (
        <FloatingPlatformProvider
            platform={customPlatform}
            animationFrame
            middleware={(defaultMiddleware) => ([...defaultMiddleware, ...customMiddleware])}
          >
            <Tooltip {...props} />
        </FloatingPlatformProvider>
    )
}
```

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

### Install Country Symbols Package

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/country-symbol/usage.mdx

Install the separate country symbols package using npm or yarn.

```bash
npm install @salt-ds/countries
yarn add @salt-ds/countries
```

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

### Basic Icon Usage

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/icon/examples.mdx

Demonstrates the basic import and usage of an icon from the @salt-ds/icons package.

```javascript
import { AddDocumentIcon } from "@salt-ds/icons";

function App() {
  return <AddDocumentIcon />;
}
```

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

### Overlay Default Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/overlay/examples.mdx

Demonstrates the basic usage of the Overlay component for exposing supplemental information. The overlay stays open until explicitly closed by the user.

```jsx
import { Overlay } from '@jpmorganchase/salt-ds';

function DefaultOverlayExample() {
  return (
    <Overlay
      content={(
        <div>
          <h2>Overlay Title</h2>
          <p>This is the overlay content.</p>
        </div>
      )}
      trigger={<button>Open Overlay</button>}
    />
  );
}
```

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

### Import and Construct Luxon Adapter

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/localization-provider/usage.mdx

Import the AdapterLuxon and create an instance for use with LocalizationProvider. The locale can be specified during construction.

```javascript
import { AdapterLuxon } from "@salt-ds/date-adapters/luxon";
const dateAdapter = new AdapterLuxon({ locale: "en-US" });
```

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

### Multiline Banners Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/banner/examples.mdx

Supports longer messages or multiple actions within a banner. This example demonstrates a banner with multiple actions.

```jsx
import { Banner, BannerActions } from '@jpmorganchase/salt-ds';

function App() {
  return (
    <Banner
      variant="info"
      status="info"
      message="This is a multiline banner with multiple actions."
      actions={
        <BannerActions
          actions={[
            { icon: 'refresh', label: 'Refresh' },
            { icon: 'close', label: 'Close' },
          ]}
        />
      }
    />
  );
}
```

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

### Set up JPM Brand theme with SaltProviderNext

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/themes/index.mdx

Import base and theme-next CSS, then wrap your application with SaltProviderNext, specifying font and accent properties.

```tsx
import { SaltProviderNext } from "@salt-ds/core";
import "@salt-ds/theme/index.css";
import "@salt-ds/theme/css/theme-next.css";

<SaltProviderNext
  accent="teal"
  corner="rounded"
  headingFont="Amplitude"
  actionFont="Amplitude"
>
  {/* ... */}
</SaltProviderNext>;
```

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

### Basic Button Usage with SaltProvider

Source: https://github.com/jpmorganchase/salt-ds/blob/main/README.md

Demonstrates how to import and use the Button component within a SaltProvider. Ensure the Salt theme CSS is imported.

```jsx
import { Button, SaltProvider } from "@salt-ds/core";

import "@salt-ds/theme/index.css";

function App() {
  return (
    <SaltProvider>
      <Button sentiment="accented" appearance="solid">Button</Button>
    </SaltProvider>
  );
}
```

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

### Custom Floating UI Platform Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/stories/floating-platform/floating-platform.mdx

Demonstrates using FloatingComponentProvider and FloatingPlatformProvider to render a Tooltip in its own iframe, portalled to the global coordinate space. It customizes Tooltip positioning based on global coordinates.

```javascript
import { Canvas } from '@storybook/addon-docs';
import * as CustomFloatingUiPlatformStories from './floating-platform.stories';

<Canvas
  of={CustomFloatingUiPlatformStories.CustomFloatingUiPlatform}
  meta={CustomFloatingUiPlatformStories}
/>
```

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

### Install date-fns Dependencies

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/localization-provider/usage.mdx

Install dependencies for the date-fns adapter. This includes the Salt date adapters package and date-fns. Use @date-fns/tz if timezone support is needed.

```json
"dependencies": {
  "@salt-ds/date-adapters": "latest", // or your required version
  "date-fns": "^4.1.0", // if timezone support is not required
  "@date-fns/tz": "^1.4.1", // if timezone support required
}
```

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

### AG Grid Row Validation Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/ag-grid-theme/examples.mdx

An example demonstrating row validation states. Use the class names `.warning-row`, `.success-row`, and `.error-row` to style rows.

```jsx
<LivePreview componentName="ag-grid-theme" exampleName="RowValidation" />
```

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

### AG Grid Cell Validation Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/ag-grid-theme/examples.mdx

An example demonstrating cell validation states. Use the class names `.warning-cell`, `.success-cell`, and `.error-cell` to style cells.

```jsx
<LivePreview componentName="ag-grid-theme" exampleName="CellValidation" />
```

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

### SaltProvider Density Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/salt-provider/examples.mdx

Shows how to adjust component density using the `density` prop on SaltProvider. This affects spacing and the amount of content visible on screen. The default density is 'medium'.

```jsx
import { SaltProvider } from "@salt-ds/core";

function App() {
  return (
    <SaltProvider density="compact">{/* ... app content ... */}</SaltProvider>
  );
}
```

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

### Column Groups Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/packages/data-grid/stories/grid.mdx

Example of grouping columns using the ColumnGroup component. When using ColumnGroup, all other grid children must also be wrapped within a ColumnGroup.

```javascript
<LazyStoryCanvas>
  <Canvas of={DataGridColumnGroupStories.ColumnGroups} />
</LazyStoryCanvas>
```

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

### Deprecate Token Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/CONTRIBUTING.md

Demonstrates how to deprecate CSS tokens by moving them to a deprecated file and optionally pointing to a replacement. This example shows removing and replacing tokens.

```css
.salt-theme {
  --salt-text-token-1: red;
  --salt-text-token-2: blue;
  --salt-text-token-6: green;

  /* Deprecate all below */
  --salt-text-token-3: var(--salt-text-token-2);
  --salt-text-token-4: purple;
  --salt-text-token-5: pink;
}
```

```css
.salt-theme {
  --salt-text-token-3: var(--salt-text-token-2); /* Use --salt-text-token-1 */
  --salt-text-token-4: purple;
  --salt-text-token-5: pink; /* Use --salt-text-token-1 */
}
```

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

### Tooltip Component Rendering Logic

Source: https://github.com/jpmorganchase/salt-ds/blob/main/packages/lab/stories/window/window.mdx

Illustrates the rendering logic for a `Tooltip` component, including its use of `Portal` and `Window`. This example highlights the challenge where styles might be injected into the parent document context instead of the component's own window.

```tsx
// Tooltip.tsx

// Attempting to get the context from this scope will result in the parent document context
// being fetched instead of the context within the window

const Window = useWindow();

return (
  <Portal disablePortal={disablePortal} container={container}>
    {open && (
      <Window
        className={clsx(withBaseName(), withBaseName(state))}
        ref={ref}
        {...rest}
      >
        <div className={withBaseName("content")}>
          {render ? (
            render({
              Icon: (passedProps: IconProps) => getIcon(passedProps),
              getIconProps: () => defaultIconProps,
            })
          ) : (
            <>
              {getIcon({})}
              <span className={withBaseName("body")}>{title}</span>
            </>
          )}
        </div>
        {!hideArrow && (
          <div className={withBaseName("arrow")} {...arrowProps} />
        )}
      </Window>
    )}
  </Portal>
);
```

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

### Import Pagination Components

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/pagination/usage.mdx

Import Pagination and related components from the core Salt package. This includes Pagination, Paginator, CompactPaginator, CompactInput, and GoToInput.

```javascript
import {
  Pagination,
  Paginator,
  CompactPaginator,
  CompactInput,
  GoToInput,
} from "@salt-ds/core";
```

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

### Import MegaMenu Components

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/mega-menu/usage.mdx

Import MegaMenu and its related components from the '@salt-ds/lab' package. Ensure these components are available in your project for use.

```javascript
import {
  MegaMenu,
  MegaMenuTrigger,
  MegaMenuPanel,
  MegaMenuGroups,
  MegaMenuGroup,
  MegaMenuHeader,
  MegaMenuItem,
  MegaMenuSupportingContent,
  MegaMenuSupportingActions,
} from "@salt-ds/lab";
```

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

### now

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/localization-provider/usage.mdx

Gets the current date and time.

```APIDOC
## now

Gets the current date and time.

### Parameters
#### Path Parameters
- `timezone` (Timezone) - Required - The timezone to use.

### Returns
`TDate` - The current date and time.
```

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

### getDay

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/localization-provider/usage.mdx

Gets the day of the month for a date object.

```APIDOC
## getDay

Gets the day of the month for a date object.

### Parameters
#### Path Parameters
- `date` (TDate) - Required - The date object.

### Returns
`number` - The day of the month as a number (1-31).
```

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

### getDayOfWeek

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/localization-provider/usage.mdx

Gets the day of the week for a date object.

```APIDOC
## getDayOfWeek

Gets the day of the week for a date object.

### Parameters
#### Path Parameters
- `date` (TDate) - Required - The date object.

### Returns
`number` - The day of the week as a number (0-6).
```

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

### Custom Middleware Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/packages/core/stories/floating-platform/floating-platform.mdx

Shows how to add custom middleware, like 'offset', to adjust the tooltip's position beyond the default offsets.

```javascript
import { Canvas } from '@storybook/addon-docs';
import * as CustomFloatingUiPlatformStories from './floating-platform.stories';

<Canvas
  of={CustomFloatingUiPlatformStories.CustomMiddleware}
  meta={CustomFloatingUiPlatformStories}
/>
```

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

### Environment Variables Configuration

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/README.md

Create a `.env.local` file in the project root and populate it with these variables to configure the local development environment.

```env
MOSAIC_ACTIVE_MODE_URL=http://localhost:8080
MOSAIC_DOCS_CLONE_CREDENTIALS=[your_github_username:your_token]
MOSAIC_SNAPSHOT_DIR=snapshots/latest
OPTIMIZE_IMAGES=false
SNAPSHOT_MODE=active
```

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

### Vertical Stepper Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/stepper/examples.mdx

Illustrates the vertical orientation of the Stepper component.

```jsx
<Stepper orientation="vertical">
  <Step label="Step 1" />
  <Step label="Step 2" />
  <Step label="Step 3" />
</Stepper>
```

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

### endOf

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/localization-provider/usage.mdx

Gets the end of a specified time period for a date object.

```APIDOC
## endOf

Gets the end of a specified time period for a date object.

### Parameters
#### Path Parameters
- `date` (TDate) - Required - The date object.
- `granularity` (string) - Required - The time period. Must be one of: "day", "week", "month", "year".

### Returns
`TDate` - The date object representing the end of the period.
```

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

### Importing FormField Components

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/form-field/usage.mdx

Demonstrates how to import the FormField, FormFieldHelperText, and FormFieldLabel components from the core Salt package.

```APIDOC
## Import

To import `FormField` and related components from the core Salt package, use:

```js
import { FormField, FormFieldHelperText, FormFieldLabel } from "@salt-ds/core";
```
```

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

### Horizontal Stepper Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/stepper/examples.mdx

Demonstrates the default horizontal orientation of the Stepper component.

```jsx
<Stepper>
  <Step label="Step 1" />
  <Step label="Step 2" />
  <Step label="Step 3" />
</Stepper>
```

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

### Layout Alignment - Start

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/layouts/split-layout/examples.mdx

Positions items at the beginning of the available space along the main axis.

```javascript
<SplitLayout align="start">
  <FlexItem>Item 1</FlexItem>
  <FlexItem>Item 2</FlexItem>
</SplitLayout>
```

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

### Default Rating Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/rating/examples.mdx

Displays the default Rating component with five stars for user selection.

```javascript
import { Rating } from "@salt-ds/core";

function DefaultRating() {
  return <Rating defaultValue={3} />;
}
```

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

### SaltProvider Nested Providers Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/salt-provider/examples.mdx

Shows how to use nested SaltProvider instances to create scoped themes, allowing for mixed configurations of theme, mode, density, and breakpoints. Nested providers inherit values from their parents.

```jsx
import { SaltProvider } from "@salt-ds/core";

function App() {
  return (
    <SaltProvider theme="dark" mode="dark">
      {/* ... app content ... */}
      <SaltProvider theme="light" mode="light" density="compact">
        {/* ... nested app content ... */}
      </SaltProvider>
    </SaltProvider>
  );
}
```

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

### NumberInput Disabled Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/number-input/examples.mdx

Demonstrates how to disable the NumberInput component to prevent user interaction and input.

```javascript
<NumberInput disabled />
```

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

### SaltProvider Breakpoints Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/salt-provider/examples.mdx

Illustrates customizing the CSS media queries used by hooks like `useBreakpoints` and `useCurrentBreakpoint` via the `breakpoints` prop on SaltProvider. This enables responsive design patterns.

```jsx
import { SaltProvider } from "@salt-ds/core";

const customBreakpoints = {
  sm: '640px',
  md: '768px',
  lg: '1024px',
  xl: '1280px',
};

function App() {
  return (
    <SaltProvider breakpoints={customBreakpoints}>{/* ... app content ... */}</SaltProvider>
  );
}
```

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

### ComboBox Default Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/combo-box/examples.mdx

Default single-select ComboBox. The selected option is displayed in the input field.

```jsx
import { ComboBox } from '@jpmorganchase/salt-ds';

const DefaultComboBox = () => (
  <ComboBox
    options={[
      { label: 'Option 1', value: 'option-1' },
      { label: 'Option 2', value: 'option-2' },
      { label: 'Option 3', value: 'option-3' },
    ]} />
);
```

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

### Secondary Variant Banner Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/banner/examples.mdx

Applies the secondary variant to provide additional emphasis to the banner.

```jsx
import { Banner } from '@jpmorganchase/salt-ds';

function App() {
  return (
    <Banner variant="secondary" status="info" message="This is a secondary banner." />
  );
}
```

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

### Import and Construct Day.js Adapter

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/localization-provider/usage.mdx

Import AdapterDayjs and construct the adapter. Additional Day.js configurations, such as default timezone, can be applied before constructing the adapter.

```javascript
import { AdapterDayjs } from "@salt-ds/date-adapters/dayjs";
import dayjs from "dayjs";
// Additional configuration can use the dayjs API
dayjs.tz.setDefault("America/New_York");

const dayjsAdapter = new AdapterDayjs({ locale: "en" }, dayjs);
```

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

### Dropdown with Start Adornment

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/dropdown/examples.mdx

Shows how to add custom content at the beginning of a Dropdown using the `startAdornment` prop. This is useful for indicating the purpose of the field, such as currency or location.

```jsx
<Dropdown startAdornment="$" label="Amount" options={['100', '200', '300']} />
```

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

### Linear Progress Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/progress/examples.mdx

Displays a linear progress indicator. Suitable for processes where a horizontal bar is preferred.

```jsx
<Progress type="linear" value={30} />
```

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

### SaltProvider Mode Example

Source: https://github.com/jpmorganchase/salt-ds/blob/main/site/docs/components/salt-provider/examples.mdx

Illustrates changing the application mode (e.g., light to dark) for all nested components using the `mode` prop on SaltProvider. The default mode is 'light'.

```jsx
import { SaltProvider } from "@salt-ds/core";

function App() {
  return (
    <SaltProvider mode="dark">{/* ... app content ... */}</SaltProvider>
  );
}
```