playbook_ui 15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11644 → 15.2.0.pre.alpha.PLAY236711331

data/lib/playbook/pb_forms_helper.rb

@@ -41,13 +41,12 @@ module Playbook
         builder: ::Playbook::Forms::Builder
       )
 
-      capture do
-        concat form_with(**options, &block)
-        concat javascript_tag(<<~JS)
-          window.addEventListener("DOMContentLoaded", function() { PbFormValidation.start() })
-          window.addEventListener("DOMContentLoaded", () => formHelper())
-        JS
-      end
+      content_for(:pb_js, javascript_tag(<<~JS))
+        window.addEventListener("DOMContentLoaded", function() { PbFormValidation.start() })
+        window.addEventListener("DOMContentLoaded", () => formHelper())
+      JS
+
+      form_with(**options, &block)
     end
   end
 end

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "15.2.0"
-  VERSION = "15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11644"
+  VERSION = "15.2.0.pre.alpha.PLAY236711331"
 end

data/lib/playbook/z_index.rb

@@ -7,7 +7,7 @@ module Playbook
     end
 
     def z_index_values
-      %w[1 2 3 4 5 6 7 8 9 10 max]
+      %w[1 2 3 4 5 6 7 8 9 10]
     end
 
     def z_index_options

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 15.2.0.pre.alpha.PLAY2589advancedtableinlinerowloadingtoggleicon11644
+  version: 15.2.0.pre.alpha.PLAY236711331
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-10-23 00:00:00.000000000 Z
+date: 2025-10-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -273,8 +273,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/advanced_table.rb
 - app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx
 - app/pb_kits/playbook/pb_advanced_table/advanced_table_action_bar.js
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md
 - 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
@@ -344,10 +342,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_per_row_rails.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.html.erb
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx
@@ -414,7 +408,6 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js
-- app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading_empty_children.js
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data.json
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_no_subrows.json
@@ -2419,7 +2412,6 @@ files:
 - app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx
 - app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss
 - app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx
-- app/pb_kits/playbook/pb_pb_bar_graph/docs/_description.md
 - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb
 - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx
 - app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md
@@ -2453,7 +2445,6 @@ files:
 - app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx
 - app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss
 - app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md
 - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb
 - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx
 - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb
@@ -2484,41 +2475,6 @@ files:
 - app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb
 - app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb
 - app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx
-- app/pb_kits/playbook/pb_pb_gauge_chart/_pb_gauge_chart.scss
-- app/pb_kits/playbook/pb_pb_gauge_chart/_pb_gauge_chart.tsx
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_description.md
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.html.erb
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.jsx
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.md
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.html.erb
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.jsx
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.md
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.html.erb
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_default.jsx
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_disable_animation.html.erb
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_disable_animation.jsx
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.html.erb
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.jsx
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.html.erb
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.jsx
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_live_data.jsx
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.html.erb
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.jsx
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.md
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.html.erb
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.jsx
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_sizing.md
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_title.html.erb
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_title.jsx
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.html.erb
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.jsx
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.md
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/example.yml
-- app/pb_kits/playbook/pb_pb_gauge_chart/docs/index.js
-- app/pb_kits/playbook/pb_pb_gauge_chart/pbGaugeGraphTheme.ts
-- app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.html.erb
-- app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.rb
-- app/pb_kits/playbook/pb_pb_gauge_chart/pb_gauge_chart.test.jsx
 - app/pb_kits/playbook/pb_pb_line_graph/_pb_line_graph.scss
 - app/pb_kits/playbook/pb_pb_line_graph/_pb_line_graph.tsx
 - app/pb_kits/playbook/pb_pb_line_graph/docs/_description.md
@@ -2768,20 +2724,9 @@ files:
 - app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss
 - app/pb_kits/playbook/pb_rich_text_editor/_trix_styles.scss
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_description.md
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_attributes.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.md
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_focus.md
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_inline.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.jsx
-- app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_templates.md
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.html.erb
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx
 - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb
@@ -3573,10 +3518,6 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.html.erb
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_options.md
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default_value.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_disabled.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_dynamic_options.html.erb
@@ -3791,9 +3732,9 @@ 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/_line_graph-D5MBnrO9.js
-- dist/chunks/_typeahead-BjYBazGq.js
-- dist/chunks/_weekday_stacked-BQrF2byq.js
+- dist/chunks/_line_graph-AKTV-rqw.js
+- dist/chunks/_typeahead-DCInCM2E.js
+- dist/chunks/_weekday_stacked-ByJl1kOQ.js
 - dist/chunks/componentRegistry-DzmmLR2x.js
 - dist/chunks/lazysizes-B7xYodB-.js
 - dist/chunks/lib-QZuu1ltS.js

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

@@ -1,39 +0,0 @@
-<% column_definitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      column_styling: { 
-        cell_background_color: ->(row) { row[:newEnrollments].to_i > 20 ? "success_secondary" : "warning_secondary" }
-      }
-    },
-    {
-      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",
-    }
-] %>
-
-<%= pb_rails("advanced_table", props: { id: "background-control", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "background-control", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "background-control", table_data: @table_data, column_definitions: column_definitions }) %>
-<% end %>

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

@@ -1 +0,0 @@
-`column_styling` can also be used to control the background color on all cells in a given column via the use of the `cell_background_color` key/value pair. Use `cell_background_color` to achieve custom background colors for individual cells as seen here.

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

@@ -1,51 +0,0 @@
-<% column_definitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      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",
-    }
-] %>
-
-<% row_styling = [
-  {
-    row_id: "1",
-    cell_padding: "md"
-  },
-  {
-    row_id: "3",
-    cell_padding: "lg"
-  },
-  {
-    row_id: "5",
-    cell_padding: "none"
-  },
-] %>
-
-<%= pb_rails("advanced_table", props: { id: "padding-control-per-row", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "padding-control-per-row", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "padding-control-per-row", table_data: @table_data_with_id, column_definitions: column_definitions, row_styling: row_styling }) %>
-<% end %>

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

@@ -1 +0,0 @@
-`row_styling` can also be used to control padding on all cells in a given row via the use of the `cell_padding` key/value pair as shown here. `cell_padding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.

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

@@ -1,40 +0,0 @@
-<% column_definitions = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      column_styling: { 
-        cell_padding: "none",
-      }
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-    {
-      accessor: "attendanceRate",
-      label: "Attendance Rate",
-      column_styling: { cell_padding: "md" },
-    },
-    {
-      accessor: "completedClasses",
-      label: "Completed Classes",
-    },
-    {
-      accessor: "classCompletionRate",
-      label: "Class Completion Rate",
-    },
-    {
-      accessor: "graduatedStudents",
-      label: "Graduated Students",
-    }
-] %>
-
-<%= pb_rails("advanced_table", props: { id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) do %>
-  <%= pb_rails("advanced_table/table_header", props: { table_id: "padding-control", column_definitions: column_definitions }) %>
-  <%= pb_rails("advanced_table/table_body", props: { table_id: "padding-control", table_data: @table_data, column_definitions: column_definitions }) %>
-<% end %>

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

@@ -1 +0,0 @@
-`column_styling` can also be used to control padding on all cells in a given column via the use of the `cell_padding` key/value pair. `cell_padding` lets you use 'xxs', 'xs', 'sm', 'md', 'lg', 'xl' and 'none'.

data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading_empty_children.js

@@ -1,42 +0,0 @@
-export const MOCK_DATA_INLINE_LOADING_EMPTY_CHILDREN = [
-    {
-      year: "2021",
-      quarter: null,
-      month: null,
-      day: null,
-      newEnrollments: "20",
-      scheduledMeetings: "10",
-      attendanceRate: "51%",
-      completedClasses: "3",
-      classCompletionRate: "33%",
-      graduatedStudents: "19",
-      children: [],
-    },
-    {
-      year: "2022",
-      quarter: null,
-      month: null,
-      day: null,
-      newEnrollments: "25",
-      scheduledMeetings: "17",
-      attendanceRate: "75%",
-      completedClasses: "5",
-      classCompletionRate: "45%",
-      graduatedStudents: "32",
-      children: [],
-    },
-    {
-      year: "2023",
-      quarter: null,
-      month: null,
-      day: null,
-      newEnrollments: "10",
-      scheduledMeetings: "15",
-      attendanceRate: "65%",
-      completedClasses: "4",
-      classCompletionRate: "49%",
-      graduatedStudents: "29",
-      children: [],
-    },
-  ]
-  

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_description.md

@@ -1,3 +0,0 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
-
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md

@@ -1,3 +0,0 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
-
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_gauge_chart/_pb_gauge_chart.scss

@@ -1,3 +0,0 @@
-.pb_pb_gauge_chart {
-
-}

data/app/pb_kits/playbook/pb_pb_gauge_chart/_pb_gauge_chart.tsx

@@ -1,69 +0,0 @@
-
-import React, { useMemo } from 'react'
-import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import pbGaugeGraphTheme from './pbGaugeGraphTheme'
-import highchartsMore from "highcharts/highcharts-more";
-import solidGauge from "highcharts/modules/solid-gauge";
-import { globalProps } from '../utilities/globalProps'
-
-type PbGaugeChartProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) | ((arg?: Event) => void) },
-  id?: string,
-  ref?: React.RefObject<any>,
-  options: Record<string, unknown>
-}
-
-const PbGaugeChart = (props: PbGaugeChartProps) => {
-  const {
-    aria = {},
-  className,
-  data = {},
-  htmlOptions = {},
-  id,
-  ref,
-  options = {},
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
-  const classes = classnames(buildCss('pb_pb_gauge_chart'), globalProps(props), className)
-
-  const mergedOptions = useMemo(() => {
-    if (!options || typeof options !== "object") {
-      // eslint-disable-next-line no-console
-      console.error("❌ Invalid options passed to <PbLineGraph />", options)
-      return {}
-    }
-
-    return Highcharts.merge({}, pbGaugeGraphTheme, options)
-  }, [options])
-
-  highchartsMore(Highcharts);
-  solidGauge(Highcharts);
-
-  return (
-    <div>
-        <HighchartsReact
-            containerProps={{
-                    className: classnames(classes),
-                    id: id,
-                    ref: ref,
-                    ...ariaProps,
-                    ...dataProps,
-                    ...htmlProps
-                  }}
-            highcharts={Highcharts}
-            options={mergedOptions}
-        />
-    </div>
-  )
-}
-
-export default PbGaugeChart

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_description.md

@@ -1,3 +0,0 @@
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
-
-See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.html.erb

@@ -1,12 +0,0 @@
-<% data = [{ name: "Name", y: 67 }] %>
-
-<% chart_options = {
-  series: [{ data: data }],
-  plotOptions: {
-    solidgauge: {
-      borderColor: '#00C4D7',
-    }
-  },
-} %>
-
-<%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.jsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors } from 'playbook-ui'
-
-const data = [{ name: "Name", y: 67 }]
-
-const chartOptions = {
-  series: [{ data: data }],
-  plotOptions: {
-    solidgauge: {
-      borderColor: colors.data_7,
-    }
-  },
-};
-const PbGaugeChartColor = (props) => (
-  <div>
-    <PbGaugeChart
-        options={chartOptions}
-        {...props}
-    />
-  </div>
-)
-
-export default PbGaugeChartColor

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.md

@@ -1,5 +0,0 @@
-Highcharts allows for any custom colors to be used. Custom data colors allow for color customization to match the needs of business requirements.
-
-For React, pass the prop `plotOptions.solidgauge.borderColor` with a Playbook token like `colors.` + `data_1 | data_2 | data_3 | data_4 | data_5 | data_6 | data_7 | data_8`. HEX colors are also available `eg: #CA0095`
-
-For Rails, the prop `plotOptions.solidgauge.borderColor` can only be used with HEX values as shown.

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.html.erb

@@ -1,45 +0,0 @@
-<% chart_options = {
-  series:[{data:[{ name: "Name", y: 10 }]}],
-    chart: {
-    height: "150",
-  },
-  plotOptions: {
-    series: {
-      animation: false,
-    },
-    solidgauge: {
-      dataLabels: {
-        format:
-          '<span class="fix">{y:,f}</span>' +
-          '<span style="fill: #687887; font-size: 27px;">%</span>',
-      },
-    },
-  },
-} %>
-
-<%= pb_rails("flex", props: {wrap: true, padding: "xl", gap: "sm"}) do %>
-  <%= pb_rails("flex/flex_item", props: {flex: 1, grow: true }) do %>
-    <%= pb_rails("card", props: {max_width: "xs", padding: "md", }) do %>
-      <%= pb_rails("title", props: {padding_bottom: "sm", size: 4, text: "Abandoned Calls" })%>
-      <%= pb_rails("flex", props: {align: "stretch"}) do %>
-        <%= pb_rails("flex", props: {margin_right: "sm", orientation: "column"}) do %>
-          <%= pb_rails("body", props: {color: "light", padding_bottom: "sm",text: "Total Abandoned"}) %>
-          <%= pb_rails("flex", props: {align: "baseline", padding_bottom: "sx"}) do %>
-            <%= pb_rails("title", props: {size: 1, text: "39"})%>
-            <%= pb_rails("title", props: {color: "light", size: 3, text: "calls"}) %>
-          <% end %>
-          <%= pb_rails("caption", props: {size: "xs", text: "of 390" }) %>
-        <%end %>
-        <%= pb_rails("section_separator", props: {align_self: "stretch", margin_right: "sm", orientation: "vertical" }) %>
-        <%= pb_rails("flex", props: {orientation: "column", wrap: true}) do %>
-          <%= pb_rails("body", props: {color: "light", text: "% Abandoned"}) %>
-          <%= pb_rails("flex", props: {wrap: true}) do %>
-            <%= pb_rails("flex/flex_item", props: {fixed_size: "150px", overflow: "hidden", shrink: true}) do %>
-              <%= pb_rails("pb_gauge_chart", props: { options: chart_options }) %>
-            <% end %>
-          <% end %>
-        <% end %>
-      <%end %>
-    <% end %>
-  <% end %>
-<% end %>