playbook_ui 14.18.0.pre.alpha.PLAY20397473 → 14.18.0.pre.alpha.PLAY20787400

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.18.0"
-  VERSION = "14.18.0.pre.alpha.PLAY20397473"
+  VERSION = "14.18.0.pre.alpha.PLAY20787400"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.18.0.pre.alpha.PLAY20397473
+  version: 14.18.0.pre.alpha.PLAY20787400
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-05-01 00:00:00.000000000 Z
+date: 2025-04-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -330,18 +330,18 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_react.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_react.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
@@ -374,7 +374,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_pagination_mock_data.json
 - app/pb_kits/playbook/pb_advanced_table/docs/example.yml
 - app/pb_kits/playbook/pb_advanced_table/docs/index.js
-- app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js
 - app/pb_kits/playbook/pb_advanced_table/index.js
 - app/pb_kits/playbook/pb_advanced_table/scss_partials/_chrome_styles.scss
 - app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss
@@ -1219,15 +1218,12 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_default_react.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_react.md
+- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
@@ -1427,8 +1423,6 @@ files:
 - app/pb_kits/playbook/pb_filter/docs/_filter_popover_props_react.md
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx
-- app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb
-- app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md
 - app/pb_kits/playbook/pb_filter/docs/_sort_only.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_sort_only.jsx
 - app/pb_kits/playbook/pb_filter/docs/example.yml
@@ -1940,13 +1934,10 @@ files:
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.html.erb
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.md
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md
 - app/pb_kits/playbook/pb_line_graph/docs/example.yml
 - app/pb_kits/playbook/pb_line_graph/docs/index.js
 - app/pb_kits/playbook/pb_line_graph/lineGraph.test.js
 - app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js
-- app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts
 - app/pb_kits/playbook/pb_line_graph/line_graph.html.erb
 - app/pb_kits/playbook/pb_line_graph/line_graph.rb
 - app/pb_kits/playbook/pb_link/_link.scss
@@ -2352,9 +2343,6 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
@@ -2403,8 +2391,6 @@ files:
 - app/pb_kits/playbook/pb_popover/docs/_description.md
 - app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx
-- app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb
-- app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
@@ -3535,11 +3521,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-D8CsVBZO.js
-- dist/chunks/_weekday_stacked-CHQsoCdP.js
+- dist/chunks/_typeahead-BX8IifKY.js
+- dist/chunks/_weekday_stacked-DfMD7HJz.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-BmTAc7Nc.js
-- dist/chunks/pb_form_validation-BWjy4bFn.js
+- dist/chunks/lib-96_ZmvAo.js
+- dist/chunks/pb_form_validation-Vv2TqXVC.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js

@@ -1,106 +0,0 @@
-import PbEnhancedElement from "../pb_enhanced_element";
-
-const FLAT_ADVANCED_TABLE_SELECTOR = "[data-flat-advanced-table-select]";
-
-export default class PbFlatAdvancedTable extends PbEnhancedElement {
-  static get selector() {
-    return FLAT_ADVANCED_TABLE_SELECTOR;
-  }
-
-  get target() {
-    const table = this.element.closest("table");
-    return table.querySelectorAll(
-      `"label[data-flat-advanced-table-select='true']"`
-    );
-  }
-
-  static selectedRows = new Set();
-
-  connect() {
-    const table = this.element.closest("table");
-    if (!table) return;
-    const mainTable = this.element.closest(".pb_advanced_table");
-    // Prevent double-init
-    if (table.dataset.flatAdvancedTableInitialized) return;
-    table.dataset.flatAdvancedTableInitialized = "true";
-
-    const checkboxLabels = table.querySelectorAll(
-      "label[data-flat-advanced-table-select='true']"
-    );
-    checkboxLabels.forEach((label) => {
-      const checkbox = label.querySelector("input[type='checkbox']");
-      if (!checkbox) return;
-      checkbox.addEventListener("change", () => {
-        const rowId = checkbox.id;
-        const isChecked = checkbox.checked;
-      
-        if (isChecked) {
-          PbFlatAdvancedTable.selectedRows.add(rowId);
-        } else {
-          PbFlatAdvancedTable.selectedRows.delete(rowId);
-        }
-      
-        // Update row background color based on checkbox state
-        const rowEl = checkbox.closest("tr");
-        if (rowEl) {
-          if (isChecked) {
-            rowEl.classList.add("bg-row-selection");
-            rowEl.classList.remove("bg-white");
-          } else {
-            rowEl.classList.remove("bg-row-selection");
-            rowEl.classList.add("bg-white");
-          }
-        }
-        const allCheckboxes = table.querySelectorAll(
-          "label[data-flat-advanced-table-select='true'] input[type='checkbox']"
-        );
-      
-        const selectAllInput = table.querySelector(
-          "#select-all-rows input[type='checkbox']"
-        );
-      
-        if (selectAllInput) {
-          const allChecked = Array.from(allCheckboxes).every(cb => cb.checked);
-          selectAllInput.checked = allChecked;
-        }
-      
-        mainTable.dataset.selectedRows = JSON.stringify(
-          Array.from(PbFlatAdvancedTable.selectedRows)
-        );
-      });
-      
-    });
-
-    // Handle select-all checkbox
-    const selectAllWrapper = table.querySelector("#select-all-rows");
-    if (selectAllWrapper) {
-      const selectAllInput = selectAllWrapper.querySelector(
-        'input[type="checkbox"]'
-      );
-      selectAllInput.addEventListener("change", () => {
-        const checkAll = selectAllInput.checked;
-
-        checkboxLabels.forEach((label) => {
-          const cb = label.querySelector("input[type='checkbox']");
-          cb.checked = checkAll;
-          const rowId = cb.id;
-          const rowEl = cb.closest("tr");
-
-          if (checkAll) {
-            PbFlatAdvancedTable.selectedRows.add(rowId);
-            rowEl?.classList.add("bg-row-selection");
-            rowEl?.classList.remove("bg-white");
-          } else {
-            PbFlatAdvancedTable.selectedRows.delete(rowId);
-            rowEl?.classList.remove("bg-row-selection");
-            rowEl?.classList.add("bg-white");
-          }
-        });
-
-        mainTable.dataset.selectedRows = JSON.stringify(
-          Array.from(PbFlatAdvancedTable.selectedRows)
-        );
-      });
-    }
-  }
-}

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb

@@ -1,43 +0,0 @@
-<% data_shadow = [
-  { id: "51", text: "Task 1" },
-  { id: "52", text: "Task 2" },
-  { id: "53", text: "Task 3" }
-] %>
-
-<% data_outline = [
-  { id: "61", text: "Task 1" },
-  { id: "62", text: "Task 2" },
-  { id: "63", text: "Task 3" }
-] %>
-
-<%= pb_rails("flex", props: { justify: "around" }) do %>
-  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
-    <%= pb_rails("draggable", props: { drop_zone_type: "shadow", initial_items: data_shadow }) do %>
-      <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Shadow", text_align: "center" }) %>
-      <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
-        <% data_shadow.each do |item| %>
-          <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
-            <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
-              <%= pb_rails("body", props: { text: item[:text] }) %>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("flex/flex_item", props: { margin_right: "xl" }) do %>
-    <%= pb_rails("draggable", props: { drop_zone_type: "outline", initial_items: data_outline }) do %>
-      <%= pb_rails("caption", props: { margin_bottom: "xs", text: "Outline", text_align: "center" }) %>
-      <%= pb_rails("draggable/draggable_container", props: { html_options: { style: { width: "200px" } } }) do %>
-        <% data_outline.each do |item| %>
-          <%= pb_rails("card", props: { drag_id: item[:id], draggable_item: true, margin_bottom: "xs", padding: "xs", padding_right: "xl" }) do %>
-            <%= pb_rails("flex", props: { align_items: "stretch", flex_direction: "column" }) do %>
-              <%= pb_rails("body", props: { text: item[:text] }) %>
-            <% end %>
-          <% end %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb

@@ -1,55 +0,0 @@
-<% initial_items = [
-  {
-    id: "141",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "142",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "143",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-] %>
-
-<% next_init_items = [
-  {
-    id: "151",
-    url: "https://unsplash.it/500/400/?image=633",
-  },
-  {
-    id: "152",
-    url: "https://unsplash.it/500/400/?image=634",
-  },
-  {
-    id: "153",
-    url: "https://unsplash.it/500/400/?image=637",
-  },
-] %>
-
-<%= pb_rails("draggable", props: {initial_items: initial_items, drop_zone_type: "shadow", drop_zone_color: "primary"}) do %>
-  <%= pb_rails("draggable/draggable_container") do %>
-    <%= pb_rails("flex", props: { gap: "sm" }) do %>
-      <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>
-
-<br/>
-
-<%= pb_rails("draggable", props: {initial_items: next_init_items, drop_zone_type: "outline", drop_zone_color: "purple"}) do %>
-  <%= pb_rails("draggable/draggable_container") do %>
-    <%= pb_rails("flex", props: { gap: "sm" }) do %>
-      <% initial_items.each do |item| %>
-        <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-          <%= pb_rails("image", props: { alt: item[:id], size: "md", url: item[:url] }) %>
-        <% end %>
-      <% end %>
-    <% end %>
-  <% end %>
-<% end %>

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

@@ -1 +0,0 @@
-  The default `color` for Draggable kit drop zones is "neutral", with "primary" or "purple" as additional options.

data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb

@@ -1,41 +0,0 @@
-<%=
-  pb_rails("filter", props: {
-    id: "filter_within_trubo_frames",
-    position: "top",
-    filters: [
-      { name: "name", value: "John Wick" },
-      { name: "city", value: "San Francisco"}
-    ],
-    sort_menu: [
-      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
-      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
-      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
-    ],
-    template: "default",
-    results: 1,
-    popover_props: { append_to: "parent"  },
-  }) do
-%>
-  <%
-   example_collection = [
-      OpenStruct.new(name: "USA", value: 1),
-      OpenStruct.new(name: "Canada", value: 2),
-      OpenStruct.new(name: "Brazil", value: 3),
-      OpenStruct.new(name: "Philippines", value: 4),
-      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
-    ]
-  %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
-    <%= form.text_field :example_text_field, props: { label: true } %>
-    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
-
-    <%= form.actions do |action| %>
-      <%= action.submit props: {
-        text: "Apply",
-        data: {
-          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
-      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md

@@ -1 +0,0 @@
-By default, the filter popover attaches to the `<body>`. To attach it elsewhere, like inside a Turbo Frame, pass the `append_to` prop through `popover_props`. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import lineGraphTheme from '../lineGraphTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-const data = [{
-  name: 'Installation',
-  data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
-}, {
-  name: 'Manufacturing',
-  data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
-}, {
-  name: 'Sales & Distribution',
-  data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
-}, {
-  name: 'Project Development',
-  data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
-}, {
-  name: 'Other',
-  data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
-}]
-
-const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
-
-const baseOptions = {
-  series: data,
-  title: { text: "Solar Employment Growth by Sector, 2010-2016" },
-  subtitle: { text: "Source: thesolarfoundation.com" },
-  xAxis: {
-    categories: categories,
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-}
-
-const LineGraphPbStyles = () => {
-  const options = Highcharts.merge({}, lineGraphTheme, baseOptions)
-
-  return(
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  )
-}
-
-export default LineGraphPbStyles

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md

@@ -1 +0,0 @@
-You don't need to use the Line Graph Kit to apply Playbook styles to your Highcharts line graph. Just import lineGraphTheme.ts and merge it with your graph options—Playbook’s styling will apply automatically.

data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts

@@ -1,110 +0,0 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
-
-const lineGraphTheme = {
-  title: {
-    text: "",
-    style: {
-      color: colors.text_lt_default,
-      fontFamily: typography.font_family_base,
-      fontWeight: typography.bold,
-      fontSize: typography.heading_3,
-    },
-  },
-  subtitle: {
-    text: "" ,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_lt_light,
-      fontWeight: typography.regular,
-      fontSize: typography.text_base,
-    },
-  },
-  chart: {
-    type: "line",
-  },
-  tooltip: {
-    backgroundColor: {
-      linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-      stops: [
-        [0, colors.bg_dark],
-        [1, colors.bg_dark],
-      ],
-    },
-    followPointer: true,
-    shadow: false,
-    borderWidth: 0,
-    borderRadius: 10,
-    style: {
-      fontFamily: typography.font_family_base,
-      color: colors.text_dk_default,
-      fontWeight: typography.regular,
-      fontSize: typography.text_smaller,
-    },
-  },
-  plotOptions: {
-    line: {
-      dataLabels: {
-        enabled: false,
-      },
-    },
-  },
-  credits: { enabled: false },
-  legend: { enabled: false },
-  colors: [
-    colors.data_1,
-    colors.data_2,
-    colors.data_3,
-    colors.data_4,
-    colors.data_5,
-    colors.data_6,
-    colors.data_7,
-  ],
-  xAxis: {
-    gridLineWidth: 0,
-    lineColor: colors.border_light,
-    tickColor: colors.border_light,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        color: colors.text_lt_default,
-        fontFamily: typography.font_family_base,
-        fontWeight: typography.regular,
-        fontSize: typography.heading_4,
-      },
-    },
-  },
-  yAxis: {
-    alternateGridColor: undefined as string | undefined,
-    minorTickInterval: null as number | null,
-    gridLineColor: colors.border_light,
-    minorGridLineColor: colors.border_light,
-    lineWidth: 0,
-    tickWidth: 0,
-    labels: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-    title: {
-      style: {
-        fontFamily: typography.font_family_base,
-        color: colors.text_lt_lighter,
-        fontWeight: typography.bold,
-        fontSize: typography.text_smaller,
-      },
-    },
-  },
-}
-
-export default lineGraphTheme;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb

@@ -1,10 +0,0 @@
-<%= pb_rails("phone_number_input", props: {
-    country_search: true, 
-    id: "country-search",
-}) %>
-
-<%= pb_rails("phone_number_input", props: {
-    country_search: true, 
-    id: "country-search-limited",
-    only_countries: ["br", "us", "ph", "gb"],
-}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx

@@ -1,20 +0,0 @@
-import React from 'react'
-import PhoneNumberInput from '../_phone_number_input'
-
-const PhoneNumberInputCountrySearch = (props) => (
-    <>
-        <PhoneNumberInput
-            countrySearch
-            id='country-search'
-            {...props} 
-        />
-        <PhoneNumberInput
-            countrySearch
-            id='country-search-limited'
-            onlyCountries={["br", "us", "ph", "gb"]}
-            {...props} 
-        />
-    </>
-)
-
-export default PhoneNumberInputCountrySearch

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md

@@ -1 +0,0 @@
-Set `country_search` / `countrySearch` to true to allow users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb

@@ -1,46 +0,0 @@
-<%= pb_rails("flex", props: {
-    dark: true,
-    orientation: "row",
-    vertical: "center",
-    margin_bottom: "md"
-    }) do %>
-    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
-    &nbsp;
-    <%= pb_rails("circle_icon_button", props: {
-        variant: "secondary",
-        icon: "info",
-        id: "append-to-popover-1"
-    }) %>
-    <%= pb_rails("popover", props: {
-        trigger_element_id: "append-to-popover-1",
-        tooltip_id: "append-to-tooltip-1",
-        offset: true,
-        position: "top",
-        append_to: "parent",
-    }) do %>
-        I'm a popover. I have been appended to my parent element.
-    <% end %>
-<% end %>
-
-<%= pb_rails("flex", props: {
-    dark: true,
-    orientation: "row",
-    vertical: "center"
-    }) do %>
-    <%= pb_rails("body", props: { text: "Click info for more details" }) %>
-    &nbsp;
-    <%= pb_rails("circle_icon_button", props: {
-        variant: "secondary",
-        icon: "info",
-        id: "append-to-popover-2"
-    }) %>
-    <%= pb_rails("popover", props: {
-        trigger_element_id: "append-to-popover-2",
-        tooltip_id: "append-to-tooltip-2",
-        offset: true,
-        position: "top",
-        append_to: ".kit-show-wrapper",
-    }) do %>
-        I'm a popover. I have been appended to the .kit-show-wrapper.
-    <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md

@@ -1 +0,0 @@
-By default, the popover tooltip attaches to the `<body>`. To attach it elsewhere, use the `append_to` prop. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.