playbook_ui 13.30.0.pre.alpha.20240515remotebuildkitconversion3150 → 13.30.0

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "13.30.0"
-  VERSION = "13.30.0.pre.alpha.20240515remotebuildkitconversion3150"
+  PREVIOUS_VERSION = "13.29.0"
+  VERSION = "13.30.0"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.30.0.pre.alpha.20240515remotebuildkitconversion3150
+  version: 13.30.0
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-06-27 00:00:00.000000000 Z
+date: 2024-06-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -263,8 +263,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx
@@ -979,8 +977,6 @@ files:
 - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js
 - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx
-- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default_swift.md
-- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_props_swift.md
 - app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_date_time_stacked/docs/index.js
 - app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.scss
@@ -1082,7 +1078,6 @@ files:
 - app/pb_kits/playbook/pb_draggable/_draggable.scss
 - app/pb_kits/playbook/pb_draggable/_draggable.tsx
 - app/pb_kits/playbook/pb_draggable/context/index.tsx
-- app/pb_kits/playbook/pb_draggable/context/types.ts
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
@@ -1092,7 +1087,6 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md
 - app/pb_kits/playbook/pb_draggable/docs/example.yml
 - app/pb_kits/playbook/pb_draggable/docs/index.js
 - app/pb_kits/playbook/pb_draggable/draggable.test.jsx
@@ -1104,8 +1098,6 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.html.erb
@@ -1227,8 +1219,6 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.html.erb
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md
@@ -1245,7 +1235,6 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js
 - app/pb_kits/playbook/pb_flex/_flex.scss
 - app/pb_kits/playbook/pb_flex/_flex.tsx
@@ -1459,8 +1448,6 @@ files:
 - app/pb_kits/playbook/pb_icon/icon.html.erb
 - app/pb_kits/playbook/pb_icon/icon.rb
 - app/pb_kits/playbook/pb_icon/icon.test.js
-- app/pb_kits/playbook/pb_icon/icon_aliases.json
-- app/pb_kits/playbook/pb_icon/types.d.ts
 - app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss
 - app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx
 - app/pb_kits/playbook/pb_icon_circle/docs/_description.md
@@ -1895,16 +1882,12 @@ files:
 - app/pb_kits/playbook/pb_online_status/online_status.rb
 - app/pb_kits/playbook/pb_overlay/_overlay.scss
 - app/pb_kits/playbook/pb_overlay/_overlay.tsx
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_default.md
-- app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx
 - app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.md
 - app/pb_kits/playbook/pb_overlay/docs/example.yml
 - app/pb_kits/playbook/pb_overlay/docs/index.js
-- app/pb_kits/playbook/pb_overlay/overlay.html.erb
-- app/pb_kits/playbook/pb_overlay/overlay.rb
 - app/pb_kits/playbook/pb_overlay/overlay.test.jsx
 - app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_percentage.tsx
 - app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx
@@ -3051,7 +3034,7 @@ homepage: https://playbook.powerapp.cloud/
 licenses:
 - ISC
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -3067,7 +3050,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.5.3
-signing_key: 
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb

@@ -1,59 +0,0 @@
-<%# Example sort method for demonstration purposes %>
-<% if params["sort"] %>
-  <% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
-  <% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
-  <% @table_data.sort! do |a, b|
-    value_a = a[sort_param]
-    value_b = b[sort_param]
-
-    value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
-    value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
-
-    sort_direction * (value_a <=> value_b)
-  end %>
-<% end %>
-
-<% 
-  column_definitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-      sort_menu: [
-        { item: "Year", link: "?sort=year_asc#table-sort", active: params["sort"] == "year_asc", direction: "asc" },
-        { item: "Year", link: "?sort=year_desc#table-sort", active: params["sort"] == "year_desc", direction: "desc" }
-      ],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    }
-  ]
-
-  subrow_headers = ["Quarter", "Month", "Day"]
-%>
-
-<%= pb_rails("advanced_table", props: { table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { id: "subrow_headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
-<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.md

@@ -1,6 +0,0 @@
-Optionally enable sorting by passing `sort_menu` to any `column_definition`(s). Sort options are determined by an array of `item` objects passed to the `sort_menu` prop. 
-
-</br>
-<div class="pb_pill_kit_warning"><div class="pb_title_kit_size_4 pb_pill_text">Disclaimer</div></div>
-
-This example uses a custom sort method that may need to be modified or replaced within your project.

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default_swift.md

@@ -1,33 +0,0 @@
-![Date-Time-Stacked-Default](https://github.com/powerhome/playbook/assets/54749071/b877dd01-32fa-49ff-af2d-1f8d819f6f39)
-
-```swift
-VStack(alignment: .leading, spacing: Spacing.small) {
-  PBDateTimeStacked(
-    timeZoneIdentifier: "EDT",
-    isLowercase: true,
-    isMonthStacked: true,
-    isMonthBold: true
-  )
-  PBDateTimeStacked(
-    timeZoneIdentifier: "EDT",
-    isYearDisplayed: true,
-    isLowercase: true,
-    isMonthStacked: true,
-    isMonthBold: true,
-    isYearBold: true,
-    dateVariant: .standard
-  )
-  PBDateTimeStacked(
-    timeZoneIdentifier: "GMT+9",
-    isLowercase: true,
-    isMonthStacked: true,
-    isMonthBold: true
-  )
-  PBDateTimeStacked(
-    timeZoneIdentifier: "MDT",
-    isLowercase: true,
-    isMonthStacked: true,
-    isMonthBold: true
-  )
-}
-```

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_props_swift.md

@@ -1,18 +0,0 @@
-### Props
-| Name | Type | Description | Default | Values |
-| --- | ----------- | --------- | --------- | --------- |
-| **dateTime** | `Date` | Takes a date type to calculate the current date | `Date()` |  |
-| **timeDate** | `Date` | Takes a date type to calculate the current time | `Date()` |  |
-| **timeZoneIdentifier** | `String` | A string value that is used in a function to get the correct time in the corrresponding time zone. This value is also used to display the time zone next to the time |  |  |
-| **isYearDisplayed** | `Bool` | Determines whether or not the year is displayed with the month and day | `false` | `true` `false` |
-| **isLowercase** | `Bool` | Determines whether or not am/pm is capitalized | `false` | `true` `false` |
-| **isMonthStacked** | `Bool` | Determines whether or not the value for month is stacked over the date | `false` | `true` `false` |
-| **isMonthBold** | `Bool` | Determines whether or not the month is in bold | `false` | `true` `false` |
-| **isYearBold** | `Bool` | Determines whether or not the year is in bold | `false` | `true` `false` |
-| **dateAlignment** | `HorizontalAlignment` | Sets alignment of date | `.trailing` | `leading` `center` `trailing` |
-| **timeAlignment** | `HorizontalAlignment` | Sets alignment of the time zone | `.leading` | `leading` `center` `trailing` |
-| **dateVariant** | `Variant` | Allows user to choose the style in which the date is displayed | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate(showYear: false)` `.standard` ` .withIcon(isStandard: true)` `.withIcon(isStandard: false)` |
-| **timeVariant** | `Variant` | Allows user to choose the style in which the time is displayed | `.time` | `.time` `.iconTimeZone` `.withTimeZoneHeader` |
-| **dateSize** | `String` | Allows user to choose the size of the date that is being displayed  | `.title4` | `title4` `body` `caption` `large` `subcaption` |
-| **timeStyle** | `PBFont` | Allows user to choose the size of the time that is being displayed | `.caption` | `body` `caption` `large` `subcaption`|
-| **timeZoneStyle** | `PBFont` | Allows user to choose the size of the time zone that is being displayed | `.caption` | `body` `caption` `large` `subcaption`|

data/app/pb_kits/playbook/pb_draggable/context/types.ts

@@ -1,26 +0,0 @@
-export interface ItemType {
-    id: string;
-    container: string;
-    [key: string]: any;
-  }
-  
-  export interface InitialStateType {
-    items: ItemType[];
-    dragData: { id: string; initialGroup: string };
-    isDragging: string;
-    activeContainer: string;
-  }
-  
-  export type ActionType =
-    | { type: 'SET_ITEMS'; payload: ItemType[] }
-    | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
-    | { type: 'SET_IS_DRAGGING'; payload: string }
-    | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
-    | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
-    | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
-
-    export interface DraggableProviderType {
-      children: React.ReactNode;
-      initialItems: ItemType[];
-      onReorder: (items: ItemType[]) => void;
-    }

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md

@@ -1,7 +0,0 @@
-For a simplified version of the Draggable API for the SelectableList kit, use the DraggableProvider to wrap the SelectableList kit and use the `enableDrag` prop. 
-
-In addition to the above `dragId` is a REQUIRED prop to be passed to the SelectableList kit when implementing dragging.
-
-The dev must manage state as shown.
-
-The dragHandle is added by default but this can be opted out of by setting `dragHandle` to false on the SelectableList kit.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb

@@ -1,9 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'United States', id: 'us' },
-    { label: 'Canada', value: 'Canada', id: 'ca' },
-    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
-  ]
-%>
-
-<%= pb_rails("dropdown", props: { error: "Please make a valid selection", options: options }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx

@@ -1,34 +0,0 @@
-import React, { useState } from 'react'
-import { Dropdown } from '../../'
-
-const DropdownError = (props) => {
-    const [selectedOption, setSelectedOption] = useState()
-    const error = selectedOption?.value ? null : "Please make a valid selection"
-    const options = [
-        {
-            label: "United States",
-            value: "United States",
-        },
-        {
-            label: "Canada",
-            value: "Canada",
-        },
-        {
-            label: "Pakistan",
-            value: "Pakistan",
-        }
-    ]
-
-    return (
-        <>
-            <Dropdown
-                error={error}
-                onSelect={(selectedItem) => setSelectedOption(selectedItem)}
-                options={options}
-                {...props}
-            />
-        </>
-    )
-}
-
-export default DropdownError

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.html.erb

@@ -1,32 +0,0 @@
-<div>
-  <%= pb_rails("fixed_confirmation_toast", props: {
-    icon: "wrench",
-    text: "Fix before proceeding",
-    status: "error",
-    closeable: true,
-    margin_bottom: "md"
-  })%>
-</div>
-<div>
-  <%= pb_rails("fixed_confirmation_toast", props: {
-    icon: "star",
-    text: "Thank you for completing the form!",
-    status: "success",
-    margin_bottom: "md"
-  })%>
-</div>
-<div>
-  <%= pb_rails("fixed_confirmation_toast", props: {
-    icon: "file-pdf",
-    text: "Saved as PDF",
-    status: "neutral",
-    margin_bottom: "md"
-  })%>
-</div>
-<div>
-  <%= pb_rails("fixed_confirmation_toast", props: {
-    icon: "arrow-down",
-    text: "New Messages",
-    status: "tip"
-  })%>
-</div>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_custom_icon.jsx

@@ -1,48 +0,0 @@
-import React from 'react'
-
-import FixedConfirmationToast from '../_fixed_confirmation_toast'
-
-const FixedConfirmationToastCustomIcon = (props) => {
-  return (
-    <div>
-      <div>
-        <FixedConfirmationToast
-            closeable
-            icon="wrench"
-            marginBottom="md"
-            status="error"
-            text="Fix before proceeding"
-            {...props}
-        />
-      </div>
-      <div>
-        <FixedConfirmationToast
-            icon="star"
-            marginBottom="md"
-            status="success"
-            text="Thank you for completing the form!"
-            {...props}
-        />
-      </div>
-      <div>
-        <FixedConfirmationToast
-            icon="file-pdf"
-            marginBottom="md"
-            status="neutral"
-            text="Saved as PDF"
-            {...props}
-        />
-      </div>
-      <div>
-        <FixedConfirmationToast
-            icon="arrow-down"
-            status="tip"
-            text="New Messages"
-            {...props}
-        />
-      </div>
-    </div>
-  )
-}
-
-export default FixedConfirmationToastCustomIcon

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -1,72 +0,0 @@
-import React from 'react'
-import { render, waitFor } from '../utilities/test-utils'
-
-import { FixedConfirmationToast } from '../'
-
-beforeEach(() => {
-    // Silences error logs within the test suite.
-    jest.spyOn(console, 'error')
-    // eslint-disable-next-line
-    console.error.mockImplementation(() => {})
-})
-  
-afterEach(() => {
-    // eslint-disable-next-line
-    console.error.mockRestore()
-})
-
-test('renders with default props', () => {
-    const { container } = render(<FixedConfirmationToast />);
-    expect(container.firstChild).toBeInTheDocument();
-});
-
-test('renders with text', () => {
-    const { getByText } = render(<FixedConfirmationToast text="Message Text" />);
-    expect(getByText('Message Text')).toBeInTheDocument();
-});
-
-test('does not render if open prop is false', () => {
-    const { container } = render(<FixedConfirmationToast open={false} />);
-    expect(container.firstChild).toBeNull();
-});
-
-test('closes after autoClose duration', async () => {
-    jest.useFakeTimers();
-    const onCloseMock = jest.fn();
-    render(
-        <FixedConfirmationToast 
-            autoClose={1000} 
-            onClose={onCloseMock}
-            open
-        />
-    );
-    
-    jest.advanceTimersByTime(1000);
-    await waitFor(() => expect(onCloseMock).toHaveBeenCalled());
-});
-
-test('renders success status with icon', () => {
-    const { container } = render(<FixedConfirmationToast status="success" />);
-    expect(container.querySelector('.pb_fixed_confirmation_toast_kit_success')).toBeInTheDocument();
-    expect(container.querySelector('.pb_icon')).toBeInTheDocument();
-});
-  
-test('renders custom icon when provided', () => {
-    const { container } = render(<FixedConfirmationToast icon="wrench" />);
-    expect(container.querySelector('.custom_icon')).toBeInTheDocument();
-});
-
-test('renders correctly with multiLine prop', () => {
-    const { container } = render(<FixedConfirmationToast multiLine />);
-    expect(container.querySelector('._multi_line')).toBeInTheDocument();
-});
-
-test('renders position when provided', () => {
-    const { container } = render(
-        <FixedConfirmationToast 
-            horizontal="right"
-            vertical="bottom" 
-        />
-    );
-    expect(container.querySelector('.positioned_toast')).toBeInTheDocument();
-});

data/app/pb_kits/playbook/pb_icon/icon_aliases.json

@@ -1,39 +0,0 @@
-{
-    "aliases": {
-      "arrow-alt-circle-right": "circle-right",
-      "angles-down": "angle-double-down",
-      "arrow-alt-down": "down",
-      "arrow-alt-up": "up",
-      "arrow-right-long": "long-arrow-right",
-      "arrow-to-bottom": "arrow-down-to-line",
-      "arrows-h": "arrows-left-right",
-      "calendar-days": "calendar-alt",
-      "circle-arrow-right": "arrow-circle-right",
-      "clock-rotate-left": "history",
-      "close": [
-        "times",
-        "xmark"
-      ],
-      "ellipsis-h": "ellipsis",
-      "exclamation-circle": "circle-exclamation",
-      "external-link": "arrow-up-right-from-square",
-      "file-lines": "file-alt",
-      "gear": "cog",
-      "home": "house",
-      "info-circle": "circle-info",
-      "map-o": "map",
-      "message": "comment-alt",
-      "minus-circle": "circle-minus",
-      "money": "money-bill",
-      "mouse-pointer": "arrow-pointer",
-      "nitro": "nitro-n",
-      "play-circle": "circle-play",
-      "plus-circle": "circle-plus",
-      "plus-square": "square-plus",
-      "powergon": "powergon-p",
-      "question-circle": "circle-question",
-      "roofing": "product-roofing",
-      "shelves": "inventory",
-      "th-list": "table-list"
-    }
-  }

data/app/pb_kits/playbook/pb_icon/types.d.ts

@@ -1 +0,0 @@
-declare module 'js-yaml'

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.html.erb

@@ -1,24 +0,0 @@
-<%= pb_rails("overlay") do %>
-    <%= pb_rails("table", props: { size: "sm" }) do %>
-        <thead>
-            <tr>
-                <th>Column 1</th>
-                <th>Column 2</th>
-                <th>Column 3</th>
-                <th>Column 4</th>
-                <th>Column 5</th>
-            </tr>
-        </thead>
-        <tbody>
-            <% 7.times do %>
-                <tr>
-                    <td>Value 1</td>
-                    <td>Value 2</td>
-                    <td>Value 3</td>
-                    <td>Value 4</td>
-                    <td>Value 5</td>
-                </tr>
-            <% end %>   
-        </tbody>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.html.erb

@@ -1,11 +0,0 @@
-<%= pb_rails("overlay", props: { layout: { "x": "xl" }, color: "card_light" }) do %>
-    <%= pb_rails("flex", props: { column_gap: "lg", orientation: "row", overflow_x: "auto" }) do %>
-        <% 15.times do %>
-            <%= pb_rails("flex/flex_item") do %>
-                <%= pb_rails("card") do %>
-                    Card content
-                <% end %>
-            <% end %>
-        <% end %>
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_overlay/overlay.html.erb

@@ -1,27 +0,0 @@
-<%= pb_content_tag(:div,
-aria: object.aria,
-class: object.classname,
-data: object.data,
-id: object.id,
-**combined_html_options) do %>
-    <% if is_size_percentage %>
-        <div class="overlay_linear_gradient"
-        style="background: <%= previous_overlay %>"></div>
-
-        <%= content.presence %>
-
-        <% if has_subsequent_overlay %>
-            <div class="overlay_linear_gradient"
-            style="background: <%= subsequent_overlay %>"></div>
-        <% end %>
-
-    <% else %>
-        <div class="<%= previous_overlay_class_name %>"></div>
-
-        <%= content.presence %>
-
-        <% if has_subsequent_overlay %>
-            <div class="<%= subsequent_overlay_class_name %>"></div>
-        <% end %>
-    <% end %>
-<% end %>