### Installing Dependencies and Starting the Development Server

Source: https://github.com/kajabi/pine/blob/main/libs/core/readme.md

Installs the necessary npm packages for the Stencil component and starts the development server.

```bash
npm install
npm start
```

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

### Starting the development server

Source: https://github.com/kajabi/pine/blob/main/CONTRIBUTING.md

This command starts a local development server for testing changes in the Pine Design System. A local instance of Storybook will be served at `http://localhost:6006`.

```zsh
npm run start
```

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

### Installing rollup-plugin-copy

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/guides/assets.docs.mdx

Install the rollup-plugin-copy plugin using npm. This plugin allows copying files and folders during the build process.

```sh
npm install rollup-plugin-copy -D
```

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

### Creating a new branch with conventional naming

Source: https://github.com/kajabi/pine/blob/main/CONTRIBUTING.md

This example demonstrates the conventional branch naming convention used in the Pine Design System. Branches that don't adhere to this style won't be able to be pushed, so be sure your branch begins with one of the accepted prefixes.

```zsh
style/button-accent-update
```

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

### Install Pine React Components

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/introduction/welcome.docs.mdx

Install the Pine React components via npm to use them within React projects.

```Shell
npm install @pine-ds/react
```

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

### Core Token Examples

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/tokens/tokens.docs.mdx

Examples of core tokens, which represent the most basic values like colors and font sizes. These tokens should be used sparingly in code.

```text
color.purple.500: #6B62F2;
font-size.100: 14px;
```

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

### Importing Component in Stencil App

Source: https://github.com/kajabi/pine/blob/main/libs/core/readme.md

Install the component as a node module and import it into a stencil-starter app.

```javascript
import my-component;
```

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

### Installing Pine React Package

Source: https://github.com/kajabi/pine/blob/main/README.md

Installs the Pine Design System React package using npm. This is required to use the components within React projects.

```bash
npm install @pine-ds/react
```

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

### Semantic Token Examples

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/tokens/tokens.docs.mdx

Examples of semantic tokens, which reference core tokens and are used to apply styles in specific contexts. These tokens drive component styling and are intended for liberal use.

```text
color.accent: {color.purple.500}
font-size.default: {font-size.100}
```

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

### Import Storybook Blocks

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-input/stories/pds-input.docs.mdx

Imports necessary components from the @storybook/blocks library for creating documentation and interactive examples within Storybook.

```JavaScript
import { Meta, Canvas, Controls } from '@storybook/blocks';
```

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

### Component Token Example

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/tokens/tokens.docs.mdx

Example of a component-level token, which is defined and used locally within a component for component-specific styling.

```text
chip.color.accent: {color.purple.100};
```

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

### New Dimension Token Example

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/tokens/tokens.docs.mdx

Example of creating a new dimension token for 72px using the provided formula, resulting in a token with a value of 900.

```css
--pine-dimension-900: 72px
```

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

### Dimension Token Example

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/tokens/tokens.docs.mdx

Example of a dimension token in the Pine design system, representing a base dimension of 8px.

```css
--pine-dimension-100
```

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

### Initializing Default Chip Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-chip/docs/pds-chip.mdx

This example demonstrates the basic usage of the Chip component with a default label. It shows how to render a simple chip element in both React and Web Component formats.

```react
<pdsChip>Label</pdsChip>
```

```webComponent
<pds-chip>Label</pds-chip>
```

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

### Using Component via Node Modules

Source: https://github.com/kajabi/pine/blob/main/libs/core/readme.md

Install the component as a node module and include it in a web page using a script tag that points to the component's esm.js file in node_modules.

```html
<script type='module' src='node_modules/my-component/dist/my-component.esm.js'></script>
```

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

### Display Documentation with MDX

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-popover/stories/pds-popover.docs.mdx

Renders the documentation imported from the MDX file. This allows for rich text, examples, and other content to be displayed alongside the component stories.

```jsx
<Docs />
```

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

### CSS with Core Tokens

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/tokens/tokens.docs.mdx

Example of CSS using core tokens directly for background colors. This approach requires separate updates for each component.

```css
/* Card */
background-color: var(--pine-color-white);
/* Table */
background-color: var(--pine-color-white);
/* Box */
background-color: var(--pine-color-white);
```

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

### Initializing PdsSelect with Helper Message (Web Component)

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-select/docs/pds-select.mdx

This example shows how to initialize a PdsSelect web component with a helper message. The helper message provides additional context or instructions to the user below the select component. The component uses the `helper-message` attribute to display the message.

```Web Component
<pds-select component-id="pds-select-with-message-example" label="Name" helper-message="This is a helper message to convey extra context for the select" value="john">
  <option value="paul">Paul McCartney</option>
  <option value="john">John Lennon</option>
  <option value="george">George Harrison</option>
  <option value="ringo">Ringo Starr</option>
</pds-select>
```

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

### Include Pine Core CSS and JavaScript

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/introduction/welcome.docs.mdx

Include the necessary CSS and JavaScript files directly in your project using <link> and <script> tags to start using Pine's web components. Replace [VERSION] with the desired version number.

```HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pine-ds/core@[VERSION]/dist/pine-core/pine-core.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@pine-ds/core@[VERSION]/dist/pine-core/pine-core.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@pine-ds/core@[VERSION]/dist/pine-core/index.esm.js"></script>
```

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

### Linting all files

Source: https://github.com/kajabi/pine/blob/main/CONTRIBUTING.md

This command runs the prettier linter on all files in the Pine Design System. It ensures that the code adheres to the defined coding standards.

```zsh
npm run lint.all
```

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

### Importing Documentation from MDX

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-copytext/stories/pds-copytext.docs.mdx

Imports the documentation for the PDS Copytext component from an MDX file. This allows the documentation to include detailed information and examples.

```JavaScript
import Docs from '../docs/pds-copytext.mdx';
```

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

### Storybook Meta Configuration

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/resources/support.docs.mdx

Configures Storybook metadata for the 'Get Support' resource, hiding the canvas tab in the preview.

```jsx
<Meta title="Resources/Get Support"  parameters={{ previewTabs: { canvas: { hidden: true }, } }} />
```

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

### Initializing PdsSelect with Autocomplete (Web Component)

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-select/docs/pds-select.mdx

This example shows how to initialize a PdsSelect web component with the autocomplete feature enabled. The `autocomplete` attribute is set to `on`, allowing browsers to suggest previously entered values, improving the user's input experience.

```Web Component
<pds-select autocomplete="on" component-id="pds-select-autocomplete-example" label="Name" value="paul">
  <option value="paul">Paul McCartney</option>
  <option value="john">John Lennon</option>
  <option value="george">George Harrison</option>
  <option value="ringo">Ringo Starr</option>
</pds-select>
```

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

### Primary Button Examples - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-button/docs/pds-button.mdx

Illustrates the usage of the primary button variant with different states (default, disabled, and with an icon) using web components. It showcases the basic implementation and customization options.

```html
<pds-button>Primary</pds-button>
<pds-button disabled="true">Disabled</pds-button>
<pds-button><pds-icon slot="start" aria-hidden="true" name="trash"></pds-icon>Icon</pds-button>
```

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

### Import PDS Text Stories

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-text/stories/pds-text.docs.mdx

Imports all stories related to the PDS Text component from the './pds-text.stories.js' file. These stories are used to generate the interactive examples and playground.

```JavaScript
import * as stories from './pds-text.stories.js';
```

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

### Initializing PdsSelect with Helper Message (React)

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-select/docs/pds-select.mdx

This example shows how to initialize a PdsSelect component with a helper message. The helper message provides additional context or instructions to the user below the select component. The component uses the `helper-message` prop to display the message.

```React
<PdsSelect componentId="pds-select-with-message-example" label="Name" helper-message="This is a helper message to convey extra context for the select" value="john">
  <option value="paul">Paul McCartney</option>
  <option value="john">John Lennon</option>
  <option value="george">George Harrison</option>
  <option value="ringo">Ringo Starr</option>
</PdsSelect>
```

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

### Secondary Button Examples - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-button/docs/pds-button.mdx

Illustrates the usage of the secondary button variant with different states (default, disabled, and with an icon) using web components. It showcases the basic implementation and customization options.

```html
<pds-button variant="secondary">Secondary</pds-button>
<pds-button variant="secondary" disabled="true">Disabled</pds-button>
<pds-button variant="secondary"><pds-icon slot="start" aria-hidden="true" name="trash"></pds-icon>Icon</pds-button>
```

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

### Displaying a Default Image with PdsImage

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-image/docs/pds-image.mdx

Demonstrates how to display a default image using the PdsImage component with a source URL and alt text for accessibility. The example shows both the React and web component implementations.

```react
<PdsImage src="https://placebear.com/200/300" alt="Random Bear"></PdsImage>
```

```webComponent
<pds-image src="https://placebear.com/200/300" alt="Random Bear"></pds-image>
```

```HTML
<pds-image src="https://placebear.com/200/300" alt="Random Bear"></pds-image>
```

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

### Accent Button Examples - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-button/docs/pds-button.mdx

Illustrates the usage of the accent button variant with different states (default, disabled, and with an icon) using web components. It showcases the basic implementation and customization options.

```html
<pds-button variant="accent">Accent</pds-button>
<pds-button variant="accent" disabled="true">Disabled</pds-button>
<pds-button variant="accent"><pds-icon slot="start" aria-hidden="true" name="trash"></pds-icon>Icon</pds-button>
```

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

### Generating a new component

Source: https://github.com/kajabi/pine/blob/main/CONTRIBUTING.md

This command generates the initial component files for a new component in the Pine Design System. After running this command, you will need to update the generated files to match other components.

```zsh
npm run stencil.generate pds-[component name]
```

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

### Helper Message Input Example - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-input/docs/pds-input.mdx

Shows an input field with a helper message using web components. The `helper-message` attribute provides additional information or instructions to the user. The `type` is set to `email`.

```HTML
<pds-input component-id="pds-input-help-example" label="Name" type="email" helper-message="Please use the correct format" value="Frank Dux"></pds-input>
```

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

### Initializing PdsSelect with Autocomplete (React)

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-select/docs/pds-select.mdx

This example shows how to initialize a PdsSelect component with the autocomplete feature enabled. The `autocomplete` prop is set to `on`, allowing browsers to suggest previously entered values, improving the user's input experience.

```React
<PdsSelect autocomplete="on" componentId="pds-select-autocomplete-example" label="Name" value="paul">
  <option value="paul">Paul McCartney</option>
  <option value="john">John Lennon</option>
  <option value="george">George Harrison</option>
  <option value="ringo">Ringo Starr</option>
</PdsSelect>
```

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

### Primary Button Examples - React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-button/docs/pds-button.mdx

Illustrates the usage of the primary button variant with different states (default, disabled, and with an icon) in a React environment.  It showcases the basic implementation and customization options.

```jsx
<PdsButton>Primary</PdsButton>
<PdsButton disabled="true">Disabled</PdsButton>
<PdsButton><PdsIcon slot="start" aria-hidden="true" name="trash"></PdsIcon>Icon</PdsButton>
```

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

### Configuring Vite with rollup-plugin-copy

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/guides/assets.docs.mdx

Configure Vite to copy Pine Design System assets from the 'node_modules' folder to the 'public' folder using the rollup-plugin-copy plugin. This ensures that Vite bundles the assets.

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import copy from 'rollup-plugin-copy'

export default defineConfig({
  plugins: [
    copy({
      targets: [
        {
          src: 'node_modules/@pine-ds/core/dist/pine-core/svg/*',
          dest: 'public/assets/pine-ds/svg',
        },
      ],
      hook: 'buildStart',
    }),
    // ...other plugins e.g. react()
  ],
  // ...other config options
})
```

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

### Secondary Button Examples - React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-button/docs/pds-button.mdx

Illustrates the usage of the secondary button variant with different states (default, disabled, and with an icon) in a React environment. It showcases the basic implementation and customization options.

```jsx
<PdsButton variant="secondary">Secondary</PdsButton>
<PdsButton variant="secondary" disabled="true">Disabled</PdsButton>
<PdsButton variant="secondary"><PdsIcon slot="start" aria-hidden="true" name="trash"></PdsIcon>Icon</PdsButton>
```

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

### Default Text Input Example - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-input/docs/pds-input.mdx

Demonstrates the default text input with a label and a pre-filled value using web components. The `type` is set to `text`, allowing any single-line data. The `label` provides context for the input field.

```HTML
<pds-input component-id="pds-input-text-example" label="Name" type="text" value="Frank Dux"></pds-input>
```

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

### Helper Message Input Example - React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-input/docs/pds-input.mdx

Shows an input field with a helper message. The `helperMessage` attribute provides additional information or instructions to the user. The `type` is set to `email`.

```React
<PdsInput componentId="pds-input-help-example" label="Name" type="email" helperMessage="Please use the correct format" value="Frank Dux"></PdsInput>
```

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

### Building the Component for Production

Source: https://github.com/kajabi/pine/blob/main/libs/core/readme.md

Builds the Stencil component for production, creating optimized and distributable files.

```bash
npm run build
```

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

### Rebasing a branch against main

Source: https://github.com/kajabi/pine/blob/main/CONTRIBUTING.md

These commands rebase your feature branch against the main branch and resolve any conflicts. This ensures that your changes are based on the latest version of the codebase.

```zsh
git checkout your/branch-name
git rebase main
```

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

### Cloning the Stencil Component Starter

Source: https://github.com/kajabi/pine/blob/main/libs/core/readme.md

Clones the Stencil component starter repository to a new directory, navigates into the directory, and removes the origin remote.

```bash
git clone https://github.com/ionic-team/stencil-component-starter.git my-component
cd my-component
git remote rm origin
```

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

### Accent Button Examples - React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-button/docs/pds-button.mdx

Illustrates the usage of the accent button variant with different states (default, disabled, and with an icon) in a React environment. It showcases the basic implementation and customization options.

```jsx
<PdsButton variant="accent">Accent</PdsButton>
<PdsButton variant="accent" disabled="true">Disabled</PdsButton>
<PdsButton variant="accent"><PdsIcon slot="start" aria-hidden="true" name="trash"></PdsIcon>Icon</PdsButton>
```

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

### Running Unit Tests

Source: https://github.com/kajabi/pine/blob/main/libs/core/readme.md

Executes the unit tests for the Stencil components to ensure code quality and functionality.

```bash
npm test
```

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

### Rendering Chip Component as Dropdown

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-chip/docs/pds-chip.mdx

This example demonstrates how to render the Chip component in a dropdown style by setting the `variant` property to `"dropdown"`. It showcases various sentiment options with the dropdown variant in both React and Web Component formats.

```react
<pdsChip sentiment="accent" variant="dropdown">Accent</pdsChip>
    <pdsChip sentiment="danger" variant="dropdown">Danger</pdsChip>
    <pdsChip sentiment="info" variant="dropdown">Info</pdsChip>
    <pdsChip sentiment="neutral" variant="dropdown">Neutral</pdsChip>
    <pdsChip sentiment="success" variant="dropdown">Success</pdsChip>
    <pdsChip sentiment="warning" variant="dropdown">Warning</pdsChip>
```

```webComponent
<pds-chip sentiment="accent" variant="dropdown">Accent</pds-chip>
    <pds-chip sentiment="danger" variant="dropdown">Danger</pds-chip>
    <pds-chip sentiment="info" variant="dropdown">Info</pds-chip>
    <pds-chip sentiment="neutral" variant="dropdown">Neutral</pds-chip>
    <pds-chip sentiment="success" variant="dropdown">Success</pds-chip>
    <pds-chip sentiment="warning" variant="dropdown">Warning</pds-chip>
```

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

### Running spec and e2e tests

Source: https://github.com/kajabi/pine/blob/main/CONTRIBUTING.md

This command runs both spec and end-to-end (E2E) tests in the Pine Design System. It is used for quality assurance to ensure that new features and changes are well-tested.

```zsh
npm run test.all
```

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

### Default Text Input Example - React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-input/docs/pds-input.mdx

Demonstrates the default text input with a label and a pre-filled value.  The `type` is set to `text`, allowing any single-line data.  The `label` provides context for the input field.

```React
<PdsInput componentId="pds-input-text-example" label="Name" type="text" value="Frank Dux"></PdsInput>
```

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

### Using Component via Script Tag

Source: https://github.com/kajabi/pine/blob/main/libs/core/readme.md

Include the component in a web page using a script tag that points to the component's esm.js file hosted on a CDN.

```html
<script type='module' src='https://unpkg.com/my-component@0.0.1/dist/my-component.esm.js'></script>
```

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

### Placeholder Email Input Example - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-input/docs/pds-input.mdx

Demonstrates an email input with a placeholder text using web components. The `placeholder` attribute provides a hint to the user about the expected input format. The `type` is set to `email` for email validation.

```HTML
<pds-input component-id="pds-input-placeholder-example" label="Email" type="email" placeholder="Enter a email address..." value=""></pds-input>
```

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

### Placeholder Email Input Example - React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-input/docs/pds-input.mdx

Demonstrates an email input with a placeholder text. The `placeholder` attribute provides a hint to the user about the expected input format. The `type` is set to `email` for email validation.

```React
<PdsInput componentId="pds-input-placeholder-example" label="Email" type="email" placeholder="Enter a email address..." value=""></PdsInput>
```

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

### PDS Input Error Example in HTML

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-input/docs/pds-input.mdx

This HTML example demonstrates how to use the `invalid` attribute to display an error message for an invalid email address. The `error-message` attribute is used to specify the error message to be displayed.

```HTML
<pds-input component-id="pds-input-error-example" label="Email address" type="email" error-message="Please provide a valid email address" value="Frank Dux" invalid></pds-input>
```

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

### Default Accordion Implementation

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-accordion/docs/pds-accordion.mdx

This example demonstrates the default Accordion component with no slots set, rendering a default trigger label and no panel content. It showcases the basic implementation in both React and Web Component formats.

```React
<PdsAccordion></PdsAccordion>
```

```Web Component
<pds-accordion></pds-accordion>
```

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

### PDS Input Error Example in React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-input/docs/pds-input.mdx

This React example demonstrates how to use the `invalid` prop to display an error message for an invalid email address. The `errorMessage` prop is used to specify the error message to be displayed.

```React
<PdsInput componentId="pds-input-error-example" label="Email address" type="email" errorMessage="Please provide a valid email address" value="Frank Dux" invalid></PdsInput>
```

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

### PDS Input Error Example as Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-input/docs/pds-input.mdx

This Web Component example demonstrates how to use the `invalid` attribute to display an error message for an invalid email address. The `error-message` attribute is used to specify the error message to be displayed.

```HTML
<pds-input component-id="pds-input-error-example" label="Email address" type="email" error-message="Please provide a valid email address" value="Frank Dux" invalid></pds-input>
```

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

### Handling pdsCheckboxChange event in Vanilla JS

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/guides/events.docs.mdx

This example demonstrates how to listen for the `pdsCheckboxChange` event on a `pds-checkbox` element using Vanilla JavaScript. It attaches an event listener to the element with the ID 'example' and logs a message to the console when the event is triggered.

```html
<pds-checkbox component-id="example" />

<script>
const handleChange = () => {
  console.log('changed!')
}

document.getElementById("example").addEventListener('pdsCheckboxChange', handleChange)
</script>
```

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

### Initializing PdsSelect with Multiple Selection in Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-select/docs/pds-select.mdx

This example shows how to initialize the PdsSelect component with the `multiple` attribute enabled in a Web Component. When the `multiple` attribute is enabled, the `value` property should be an array of selected values. The component allows users to select multiple options from the list.

```html
<pds-select multiple component-id="pds-select-multiple-example" label="Name">
  <option value="paul">Paul McCartney</option>
  <option value="john">John Lennon</option>
  <option value="george">George Harrison</option>
  <option value="ringo">Ringo Starr</option>
</pds-select>
```

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

### Initializing Preset Size Loader - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-loader/docs/pds-loader.mdx

This snippet initializes a Loader web component with a preset size. The `is-loading` attribute is set to true, `size` is set to "xs", and the `variant` attribute is set to "spinner".

```Web Component
<pds-loader is-loading="true" size="xs" variant="spinner"></pds-loader>
```

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

### CSS with Semantic Tokens

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/tokens/tokens.docs.mdx

Example of CSS using semantic tokens for background colors. Updating the semantic token updates all components referencing it.

```css
/* Card */
background-color: var(--pine-color-background-container);
/* Table */
background-color: var(--pine-color-background-container);
/* Box */
background-color: var(--pine-color-background-container);
```

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

### Implementing Responsive Images with Srcset and Sizes

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-image/docs/pds-image.mdx

Illustrates how to implement responsive images using the PdsImage component with the srcset and sizes attributes. This allows the browser to select the appropriate image based on viewport size, optimizing performance and user experience.

```react
<PdsImage
  alt="Random Bear"
  sizes="(max-width: 450px) 150px, 600px"
  src="https://placebear.com/600/200"
  srcset="https://placebear.com/150/150 400w, https://placebear.com/600/200"
></PdsImage>
```

```webComponent
<pds-image
  alt="Random Bear"
  sizes="(max-width: 450px) 150px, 600px"
  src="https://placebear.com/600/200"
  srcset="https://placebear.com/150/150 400w, https://placebear.com/600/200"
></pds-image>
```

```HTML
<pds-image
    alt="Random Bear"
    sizes="(max-width: 450px) 150px, 600px"
    src="https://placebear.com/600/200"
    srcset="https://placebear.com/150/150 400w, https://placebear.com/600/200"
  ></pds-image>
```

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

### Creating Transaction Boxes Layout with Web Components

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/guides/layout.docs.mdx

This HTML code snippet demonstrates the creation of a similar layout using web components. It utilizes pds-box, pds-row, and pds-icon to structure the content. The layout includes three transaction boxes with titles, transaction counts, and icons, mirroring the React example.

```HTML
<pds-box display="block">
  <pds-row col-gap="md">
    <pds-box size-md="4">
      <pds-box
        border="true"
        border-radius="lg"
        direction="column"
        padding="sm"
      >
        <h3>Transactions</h3>
        <pds-box gap="sm" justify-content="space-between">
          <pds-box direction="column">
            <span>0</span>
            <span>Successful transactions</span>
          </pds-box>
          <pds-box auto="true" align-items="center">
            <pds-icon name="caret-right"></pds-icon>
          </pds-box>
        </pds-box>
      </pds-box>
    </pds-box>
    <pds-box size-md="4">
      <pds-box
        border="true"
        border-radius="lg"
        direction="column"
        padding="sm"
      >
        <h3>Transactions</h3>
        <pds-box gap="sm" justify-content="space-between">
          <pds-box direction="column">
            <span>0</span>
            <span>Successful transactions</span>
          </pds-box>
          <pds-box auto="true" align-items="center">
            <pds-icon name="caret-right"></pds-icon>
          </pds-box>
        </pds-box>
      </pds-box>
    </pds-box>
    <pds-box size-md="4">
      <pds-box
        border="true"
        border-radius="lg"
        direction="column"
        padding="sm"
      >
        <h3>Transactions</h3>
        <pds-box gap="sm" justify-content="space-between">
          <pds-box direction="column">
            <span>0</span>
            <span>Successful transactions</span>
          </pds-box>
          <pds-box auto="true" align-items="center">
            <pds-icon name="caret-right"></pds-icon>
          </pds-box>
        </pds-box>
      </pds-box>
    </pds-box>
  </pds-row>
</pds-box>
```

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

### Disclosure Button Variant

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-button/docs/pds-button.mdx

Demonstrates the disclosure button variant for toggling the visibility of content. Includes examples with enabled and disabled states.

```webComponent
<pds-button variant="disclosure">Disclosure</pds-button>
<pds-button variant="disclosure" disabled="true">Disabled</pds-button>
```

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

### Importing Storybook and Doc Components

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/tokens/core/box-shadow.docs.mdx

This code imports necessary modules from Storybook and a custom documentation component library. It imports Meta and Story from '@storybook/blocks' for defining Storybook stories and DocTokenTable from '@pine-ds/doc-components' for rendering a table of design tokens.

```JavaScript
import { Meta, Story } from '@storybook/blocks';
import {DocTokenTable} from '@pine-ds/doc-components';
```

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

### Adding Pine via CDN

Source: https://github.com/kajabi/pine/blob/main/README.md

Adds Pine Design System to a project via CDN. Include the stylesheet and script tags in the <head> of the HTML document. Replace [VERSION] with the desired version number or 'latest'.

```HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@pine-ds/core@[VERSION]/dist/pine-core/pine-core.css" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@pine-ds/core@[VERSION]/dist/pine-core/pine-core.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@pine-ds/core@[VERSION]/dist/pine-core/index.esm.js"></script>
```

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

### Disclosure Button Variant

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-button/docs/pds-button.mdx

Demonstrates the disclosure button variant for toggling the visibility of content. Includes examples with enabled and disabled states.

```react
<PdsButton variant="disclosure">Disclosure</PdsButton>
<PdsButton variant="disclosure" disabled="true">Disabled</PdsButton>
```

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

### Icon Only Button Variant

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-button/docs/pds-button.mdx

Demonstrates the icon-only button variant, which displays only an icon. Includes examples with primary, secondary, accent, and destructive variants.

```webComponent
<pds-button variant="primary" icon-only="true"><pds-icon slot="start" aria-hidden="true" name="favorite"></pds-icon>Icon Only</pds-button>
<pds-button variant="secondary" icon-only="true"><pds-icon slot="start" aria-hidden="true" name="favorite"></pds-icon>Icon Only</pds-button>
<pds-button variant="accent" icon-only="true"><pds-icon slot="start" aria-hidden="true" name="favorite"></pds-icon>Icon Only</pds-button>
<pds-button variant="destructive" icon-only="true"><pds-icon slot="start" aria-hidden="true" name="favorite"></pds-icon>Icon Only</pds-button>
```

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

### Initializing Visible Label Loader - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-loader/docs/pds-loader.mdx

This snippet initializes a Loader web component with a visible label. The `is-loading` attribute is set to true, `show-label` is set to true, and the `variant` attribute is set to "spinner".

```Web Component
<pds-loader is-loading="true" show-label="true" variant="spinner"></pds-loader>
```

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

### Icon Only Button Variant

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-button/docs/pds-button.mdx

Demonstrates the icon-only button variant, which displays only an icon. Includes examples with primary, secondary, accent, and destructive variants.

```react
<PdsButton variant="primary" iconOnly="true"><PdsIcon slot="start" aria-hidden="true" name="favorite"></PdsIcon>Icon Only
</PdsButton>
<PdsButton variant="secondary" iconOnly="true"><PdsIcon slot="start" aria-hidden="true" name="favorite"></PdsIcon>Icon Only
</PdsButton>
<PdsButton variant="accent" iconOnly="true"><PdsIcon slot="start" aria-hidden="true" name="favorite"></PdsIcon>Icon Only</PdsButton>
<PdsButton variant="destructive" iconOnly="true"><PdsIcon slot="start" aria-hidden="true" name="favorite"></PdsIcon>Icon Only</PdsButton>
```

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

### Custom Avatar Size

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-avatar/docs/pds-avatar.mdx

Illustrates how to customize the size of the avatar using the `size` property. This example sets the size to `128px` in both React and Web Components.

```React
<PdsAvatar size="128px"></PdsAvatar>
```

```Web Components
<pds-avatar size="128px"></pds-avatar>
```

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

### Text Alignment - React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-text/docs/pds-text.mdx

Shows how to align text within the PdsText component using the `align` prop in a React environment. The example aligns the text to the center.

```javascript
<PdsText align="center" tag="p">"Had to be me. Someone else might have gotten it wrong."</PdsText>
```

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

### Initializing Default Loader - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-loader/docs/pds-loader.mdx

This snippet initializes a default Loader component as a web component with the `is-loading` attribute set to true, displaying a spinner. The `variant` attribute is set to "spinner".

```Web Component
<pds-loader is-loading="true" variant="spinner"></pds-loader>
```

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

### Borderless Copy Text - React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-copytext/docs/pds-copytext.mdx

This example shows the copy text component without a border. The `border` prop is set to `false` to remove the border.

```React
<PdsCopytext value="Copy that text" border="false"></PdsCopytext>
```

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

### Updating main branch

Source: https://github.com/kajabi/pine/blob/main/CONTRIBUTING.md

These commands update the local main branch with the latest changes from the upstream repository. This is a prerequisite for rebasing your feature branch.

```zsh
git checkout main
git pull upstream main
```

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

### Importing Storybook and Doc Components

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/tokens/core/colors.docs.mdx

Imports necessary modules from Storybook and a custom documentation component library. Meta and Story are from '@storybook/blocks', and DocTokenTable is from '@pine-ds/doc-components'.

```javascript
import { Meta, Story } from '@storybook/blocks';
import {DocTokenTable} from '@pine-ds/doc-components';
```

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

### Initializing Default PdsSelect Component - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-select/docs/pds-select.mdx

This code initializes a default PdsSelect component as a web component with a label and a set of options. The component allows users to select one of the predefined options from the dropdown list. The 'value' attribute sets the initially selected option.

```Web Component
<pds-select component-id="pds-select-default-example" label="Name" value="paul">
  <option value="paul">Paul McCartney</option>
  <option value="john">John Lennon</option>
  <option value="george">George Harrison</option>
  <option value="ringo">Ringo Starr</option>
</pds-select>
```

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

### Default Checkbox Implementation - React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-checkbox/docs/pds-checkbox.mdx

Demonstrates the basic implementation of a PdsCheckbox component in React with a default label. This example shows how to create a simple, unchecked checkbox.

```jsx
<PdsCheckbox componentId="default" label="Label" />
```

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

### Include Documentation

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-input/stories/pds-input.docs.mdx

Includes the imported MDX documentation within the Storybook page, displaying the component's documentation and usage guidelines.

```MDX
<Docs />
```

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

### Destructive Button Variant

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-button/docs/pds-button.mdx

Demonstrates the destructive button variant for actions like deleting or removing items. Includes examples with and without icons, and a disabled state.

```webComponent
<pds-button variant="destructive">Destructive</pds-button>
<pds-button variant="destructive" disabled="true">Disabled</pds-button>
<pds-button variant="destructive"><pds-icon slot="start" aria-hidden="true" name="trash"></pds-icon>Icon</pds-button>
```

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

### Destructive Button Variant

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-button/docs/pds-button.mdx

Demonstrates the destructive button variant for actions like deleting or removing items. Includes examples with and without icons, and a disabled state.

```react
<PdsButton variant="destructive">Destructive</PdsButton>
<PdsButton variant="destructive" disabled="true">Disabled</PdsButton>
<PdsButton variant="destructive"><PdsIcon slot="start" aria-hidden="true" name="trash"></PdsIcon>Icon</PdsButton>
```

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

### Render Canvas Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-text/stories/pds-text.docs.mdx

Renders the Canvas component, which displays a live, interactive example of the 'Default' story from the imported stories. This allows users to see the component in action.

```MDX
<Canvas of={stories.Default} />
```

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

### Initializing Custom Size Loader - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-loader/docs/pds-loader.mdx

This snippet initializes a Loader web component with a custom size. The `is-loading` attribute is set to true, `size` is set to "128px", and the `variant` attribute is set to "spinner".

```Web Component
<pds-loader is-loading="true" size="128px" variant="spinner"></pds-loader>
```

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

### Text Alignment - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-text/docs/pds-text.mdx

Shows how to align text within the PdsText component using the `align` prop in a web component environment. The example aligns the text to the center.

```html
<pds-text align="center" tag="p">"Had to be me. Someone else might have gotten it wrong."</pds-text>
```

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

### Initializing Typing Loader - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-loader/docs/pds-loader.mdx

This snippet initializes a Loader web component with the `typing` variant. The `is-loading` attribute is set to true, and the `variant` attribute is set to "typing".

```Web Component
<pds-loader is-loading="true" variant="typing"></pds-loader>
```

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

### Default Horizontal Divider - React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-divider/docs/pds-divider.mdx

This example demonstrates the default horizontal divider using the PdsDivider React component. It displays a simple horizontal line to visually separate content.

```React
<PdsDivider />
```

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

### Box with Border Color - React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-box/docs/pds-box.mdx

Demonstrates how to change the border color of the Box component using the `border-color` property in React. Several examples are provided with different color values.

```React
<PdsBox border="true">Border Color</PdsBox>
<PdsBox border="true" border-color="#0072EF">Border Color</PdsBox>
<PdsBox border="true" border-color="#CF3C32">Border Color</PdsBox>
<PdsBox border="true" border-color="#FFC505">Border Color</PdsBox>
```

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

### Import PDS Chip Documentation

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-chip/stories/pds-chip.docs.mdx

Imports the documentation for the PDS Chip component from the '../docs/pds-chip.mdx' file. This documentation is written in MDX format and provides detailed information about the component's usage and properties.

```javascript
import Docs from '../docs/pds-chip.mdx';
```

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

### Admin Avatar Variant

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-avatar/docs/pds-avatar.mdx

Shows the admin avatar variant, which features less-rounded borders for distinction. This example illustrates how to set the `variant` property to `admin` in both React and Web Components.

```React
<PdsAvatar variant="admin"></PdsAvatar>
```

```Web Components
<pds-avatar variant="admin"></pds-avatar>
```

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

### Switch with Helper Message - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-switch/docs/pds-switch.mdx

Illustrates how to display a helper message under the switch label using the `helper-message` property in the web component.

```HTML
<pds-switch component-id="pds-switch-helper-example" helper-message="Save my login details for next time." label="Remember me" name="pds-switch-helper"></pds-switch>
```

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

### Setting Asset Path in Window Object

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/guides/assets.docs.mdx

Specify the asset path by setting the `__PINE_ASSET_PATH__` variable on the `window` object. This is particularly useful in server-side rendering contexts.

```typescript
// main.tsx
// if-clause only required in server-side rendering context
if (typeof window !== 'undefined') {
  window.__PINE_ASSET_PATH__ = '/assets/pine-ds/'
}
```

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

### Import PDS Button Documentation

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-button/stories/pds-button.docs.mdx

Imports the MDX documentation file for the PDS Button component. This file likely contains detailed information about the component's usage, props, and design guidelines.

```javascript
import Docs from '../docs/pds-button.mdx';
```

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

### Default Horizontal Divider - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-divider/docs/pds-divider.mdx

This example demonstrates the default horizontal divider using the pds-divider web component. It displays a simple horizontal line to visually separate content.

```HTML
<pds-divider></pds-divider>
```

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

### Initializing Default Radio Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-radio/docs/pds-radio.mdx

This snippet demonstrates how to initialize a default Radio component with a label. It shows the basic implementation in both React and Web Components.

```React
<PdsRadio componentId="default" label="Label" />
```

```Web Components
<pds-radio component-id="default" label="Label"></pds-radio>
```

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

### Include Documentation

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-button/stories/pds-button.docs.mdx

Includes the imported MDX documentation within the Storybook page. This renders the content of the MDX file, providing detailed information about the component.

```mdx
<Docs />
```

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

### Row Wrapping with React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-row/docs/pds-row.mdx

Illustrates how `PdsBox` components wrap to the next line within a `PdsRow` when the sum of their `size-xs` values exceeds 12.  The example uses `size-xs` values of 4 and 10.

```JavaScript
<PdsRow>
  <PdsBox border size-xs="4">size-xs 4</PdsBox>
  <PdsBox border size-xs="10">size-xs 10</PdsBox>
</PdsRow>
```

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

### Default Switch Implementation - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-switch/docs/pds-switch.mdx

Demonstrates the default switch style using the web component. It behaves like a standard checkbox input with a label.

```HTML
<pds-switch component-id="pds-switch-default-example" label="Default Switch" name="pds-switch-default"></pds-switch>
```

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

### Offset Vertical Divider - React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-divider/docs/pds-divider.mdx

This example demonstrates how to create a vertical divider with an offset using the PdsDivider React component. The `offset` prop is set to `lg` (large), and `vertical` is set to `true`.

```React
<div style={{ height: '150px' }}>
  <PdsDivider offset="lg" vertical="true" />
</div>
```

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

### Offset Horizontal Divider - React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-divider/docs/pds-divider.mdx

This example demonstrates how to create a horizontal divider with an offset using the PdsDivider React component. The `offset` prop is set to `lg` (large), which applies a spacing of 32px.

```React
<PdsDivider offset="lg" />
```

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

### Using Pine Component in React

Source: https://github.com/kajabi/pine/blob/main/README.md

Demonstrates how to use a Pine component within a React file. Components should follow PascalCase to match React component convention.

```HTML
<PdsCopytext value="Copy this text" fullWidth="true"></PdsCopytext>
```

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

### Box with Border Color - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-box/docs/pds-box.mdx

Demonstrates how to change the border color of the Box component using the `border-color` property in a Web Component. Several examples are provided with different color values.

```WebComponent
<pds-box border="true">Border Color</pds-box>
<pds-box border="true" border-color="#0072EF">Border Color</pds-box>
<pds-box border="true" border-color="#CF3C32">Border Color</pds-box>
<pds-box border="true" border-color="#FFC505">Border Color</pds-box>
```

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

### Row Wrapping with Web Components

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-row/docs/pds-row.mdx

Illustrates how `pds-box` components wrap to the next line within a `pds-row` when the sum of their `size-xs` values exceeds 12. The example uses `size-xs` values of 4 and 10.

```HTML
<pds-row>
  <pds-box border size-xs="4">size-xs 4</pds-box>
  <pds-box border size-xs="10">size-xs 10</pds-box>
</pds-row>
```

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

### Import PDS Popover Documentation

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-popover/stories/pds-popover.docs.mdx

Imports the PDS Popover documentation from the specified MDX file. This documentation likely contains detailed information about the component's props, usage, and behavior.

```javascript
import Docs from '../docs/pds-popover.mdx';
```

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

### Readonly Email Input Example - React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-input/docs/pds-input.mdx

Demonstrates a readonly email input field. The `readonly` attribute prevents modification of the input value, but the value is still submitted with the form. The `type` is set to `email`.

```React
<PdsInput componentId="pds-input-readonly-example" label="Name" type="email" readonly="true" value="Frank Dux"></PdsInput>
```

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

### Initializing Default Progress Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-progress/docs/pds-progress.mdx

This snippet initializes a default Progress component with a label and a fixed percentage. The `percent` value is set to 15 for demonstration purposes to make the progress bar visible.

```react
<PdsProgress componentId="default" label="Default" percent="15"></PdsProgress>
```

```webComponent
<pds-progress component-id="default" label="Default" percent="15"></pds-progress>
```

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

### Importing Meta and Story from Storybook

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/stories/tokens/core/spacing.docs.mdx

Imports the Meta and Story components from the @storybook/blocks library. These components are used for structuring and defining stories within Storybook.

```JavaScript
import { Meta, Story } from '@storybook/blocks';
```

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

### Disabled Email Input Example - React

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-input/docs/pds-input.mdx

Shows a disabled email input field. The `disabled` attribute prevents user interaction and provides a visual indication of its disabled state. The `type` is set to `email`.

```React
<PdsInput componentId="pds-input-disabled-example" label="Name" type="email" disabled="true" value="Frank Dux"></PdsInput>
```

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

### Using docCanvas Component

Source: https://github.com/kajabi/pine/blob/main/libs/doc-components/readme.md

This code snippet demonstrates how to use the `DocCanvas` component to display source code snippets for a component in different formats (React and Web Component). It imports the `DocCanvas` component and provides an `mdxSource` object containing the source code for each format. The component then renders the specified component within the canvas.

```JavaScript
import { DocCanvas } from '@pine-ds/doc-components';

<DocCanvas mdxSource={{
  react: `<PdsRadio componentId="message1" label="Label" helperMessage="This is short message text." />`,
  webComponent: `<pds-radio component-id="message1" label="Label" helper-message="This is short message text." />`
}}>
  <pds-radio component-id="message1" label="Label" helper-message="This is short message text." />
</DocCanvas>
```

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

### Offset Vertical Divider - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-divider/docs/pds-divider.mdx

This example demonstrates how to create a vertical divider with an offset using the pds-divider web component. The `offset` attribute is set to `lg` (large), and `vertical` is set to `true`.

```HTML
<div style={{ height: '150px' }}>
  <pds-divider offset="lg" vertical="true"></pds-divider>
</div>
```

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

### Offset Horizontal Divider - Web Component

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-divider/docs/pds-divider.mdx

This example demonstrates how to create a horizontal divider with an offset using the pds-divider web component. The `offset` attribute is set to `lg` (large), which applies a spacing of 32px.

```HTML
<pds-divider offset="lg"></pds-divider>
```

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

### Creating a Compact Table with Web Components

Source: https://github.com/kajabi/pine/blob/main/libs/core/src/components/pds-table/docs/pds-table.mdx

This code snippet demonstrates how to create a compact table using Web Components. The `pds-table` component is used with the `compact` attribute to reduce row spacing. The table includes a header and body with sample data.

```Web Component
<pds-table component-id="compact" compact>
    <pds-table-head>
      <pds-table-head-cell>Column Title</pds-table-head-cell>
      <pds-table-head-cell>Column Title</pds-table-head-cell>
      <pds-table-head-cell>Column Title</pds-table-head-cell>
    </pds-table-head>
    <pds-table-body>
      <pds-table-row>
        <pds-table-cell>Row Item Alpha</pds-table-cell>
        <pds-table-cell>Row Item Beta</pds-table-cell>
        <pds-table-cell>Row Item Charlie</pds-table-cell>
      </pds-table-row>
      <pds-table-row>
        <pds-table-cell>Row Item Alpha</pds-table-cell>
        <pds-table-cell>Row Item Beta</pds-table-cell>
        <pds-table-cell>Row Item Charlie</pds-table-cell>
      </pds-table-row>
      <pds-table-row>
        <pds-table-cell>Row Item Alpha</pds-table-cell>
        <pds-table-cell>Row Item Beta</pds-table-cell>
        <pds-table-cell>Row Item Charlie</pds-table-cell>
      </pds-table-row>
    </pds-table-body>
  </pds-table>

```