playbook_ui_docs 14.23.0 → 14.24.0.pre.alpha.PLAY1984responsivegapprops9652

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.23.0
+  version: 14.24.0.pre.alpha.PLAY1984responsivegapprops9652
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-07-15 00:00:00.000000000 Z
+date: 2025-08-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -54,6 +54,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
@@ -96,6 +98,10 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx
+- 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_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
@@ -105,8 +111,10 @@ 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_row_styling.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_rails.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_scrollbar_none.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx
@@ -129,6 +137,10 @@ files:
 - 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
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_columns_and_header.jsx
@@ -151,6 +163,10 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.md
+- 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/advanced_table_mock_data.json
 - app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_mock_data_infinite_scroll.json
@@ -446,6 +462,8 @@ files:
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.html.erb
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_default.jsx
+- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.html.erb
+- app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_input_options.md
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.html.erb
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.jsx
 - app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_link.md
@@ -565,6 +583,9 @@ files:
 - app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
 - app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
 - app/pb_kits/playbook/pb_date/docs/_date_variants_swift.md
+- app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.html.erb
+- app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.jsx
+- app/pb_kits/playbook/pb_date/docs/_date_with_show_current_year.md
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
@@ -876,6 +897,8 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb
@@ -992,6 +1015,9 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx
+- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md
@@ -1007,7 +1033,8 @@ files:
 - app/pb_kits/playbook/pb_flex/docs/_flex_default.md
 - app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb
 - app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
-- app/pb_kits/playbook/pb_flex/docs/_flex_gap.md
+- app/pb_kits/playbook/pb_flex/docs/_flex_gap_rails.md
+- app/pb_kits/playbook/pb_flex/docs/_flex_gap_react.md
 - app/pb_kits/playbook/pb_flex/docs/_flex_inline.html.erb
 - app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
 - app/pb_kits/playbook/pb_flex/docs/_flex_inline.md
@@ -1082,12 +1109,15 @@ files:
 - app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.md
 - app/pb_kits/playbook/pb_form_pill/docs/example.yml
 - app/pb_kits/playbook/pb_form_pill/docs/index.js
+- app/pb_kits/playbook/pb_gauge/docs/_description.md
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors_rails.md
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_colors_react.md
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.html.erb
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.md
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_rails.md
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_complex_react.md
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_default.html.erb
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.html.erb
@@ -1100,8 +1130,6 @@ files:
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.html.erb
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.jsx
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_min_max.md
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx
-- app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.html.erb
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.jsx
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_sizing.md
@@ -1109,6 +1137,7 @@ files:
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_title.jsx
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_units.html.erb
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_units.jsx
+- app/pb_kits/playbook/pb_gauge/docs/_gauge_units_react.md
 - app/pb_kits/playbook/pb_gauge/docs/example.yml
 - app/pb_kits/playbook/pb_gauge/docs/index.js
 - app/pb_kits/playbook/pb_hashtag/docs/_description.md
@@ -1321,11 +1350,13 @@ files:
 - app/pb_kits/playbook/pb_line_graph/docs/_description.md
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx
-- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.md
+- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors_rails.md
+- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors_react.md
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.html.erb
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_default.jsx
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.html.erb
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx
+- app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.md
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.html.erb
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.html.erb
@@ -1333,8 +1364,6 @@ 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_link/docs/_link_color.html.erb
@@ -1437,6 +1466,9 @@ files:
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.html.erb
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.jsx
+- app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.md
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx
 - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.md
@@ -1584,6 +1616,8 @@ files:
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md
+- app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx
+- app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control_react.md
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx
 - app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md
 - app/pb_kits/playbook/pb_pagination/docs/data.js
@@ -1661,6 +1695,9 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx
+- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/example.yml
@@ -2411,14 +2448,6 @@ files:
 - app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.jsx
 - app/pb_kits/playbook/pb_user_badge/docs/example.yml
 - app/pb_kits/playbook/pb_user_badge/docs/index.js
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/example.yml
-- app/pb_kits/playbook/pb_walkthrough/docs/index.js
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.html.erb
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.jsx
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_default.html.erb

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.md

@@ -1,9 +0,0 @@
-##### Prop
-
-*  `gap` | `row_gap` | `rowGap` | `column_gap` | `columnGap` | **Type**: String | **Values**: xxs | xs | sm | md | lg | xl | none
-
-- Setting the gap prop sets the row_gap || rowGap and the column_gap || columnGap props to the same size and creates equal space within a flex container.
-
-- Setting the row_gap || rowGap prop creates space between rows in a flex container.
-
-- Setting the column_gap || columnGap prop creates space between columns in a flex container.

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import gaugeTheme from '../gaugeTheme'
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-import HighchartsMore from "highcharts/highcharts-more"
-import SolidGauge from "highcharts/modules/solid-gauge"
-
-HighchartsMore(Highcharts);
-SolidGauge(Highcharts);
-
-const data = [{ name: "Name", y: 45 }]
-
-const baseOptions = {
-  series: [{ data: data }],
-};
-
-const GaugePbStyles = () => {
-  const options = Highcharts.merge({}, gaugeTheme, baseOptions);
-
-  return (
-    <div>
-      <HighchartsReact
-          highcharts={Highcharts}
-          options={options}
-      />
-    </div>
-  );
-};
-
-export default GaugePbStyles;

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.md

@@ -1 +0,0 @@
-You don't need to use the Gauge Kit to apply Playbook styles to your Highcharts gauge chart. Just import gaugeTheme.ts and merge it with your chart options—Playbook’s styling will apply automatically.

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_walkthrough/docs/_walkthrough_continuous.jsx

@@ -1,69 +0,0 @@
-import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
-
-const WalkthroughContinuous = (props) => {
-  const [state, setState] = useState({
-    run: false,
-    steps: [
-      {
-        title: 'Example Title',
-        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
-        target: '.examplePaused',
-      },
-      {
-        title: 'Toggle',
-        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
-        target: '.pb_toggle_control',
-      },
-      {
-        title: 'Top Nav',
-        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
-        target: '.pb--page--topNav',
-      },
-    ],
-  })
-
-  return (
-    <div>
-      <div
-          className="examplePaused"
-          style={{ 'display': 'inline' }}
-      >
-        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
-      </div>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-            setState({ ...state,
-              run: true,
-            })
-          }}
-      >
-        {'Start Tour'}
-      </Button>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-          setState({
-            ...state,
-            run: false,
-          })
-        }}
-      >
-        {'Reset/Stop Tour'}
-      </Button>
-
-      <Walkthrough
-          run={state.run}
-          steps={state.steps}
-          {...props}
-          continuous
-      />
-    </div>
-  )
-}
-
-export default WalkthroughContinuous

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx

@@ -1,71 +0,0 @@
-import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
-
-const WalkthroughDefault = (props) => {
-  const [state, setState] = useState({
-    run: false,
-    steps: [
-      {
-        title: 'Example title',
-        content:
-      'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
-        target: '.example',
-      },
-      {
-        title: 'Toggle',
-        content:
-        'By default the walkthrough kit will cycle through each step provided.',
-        target: '.pb_toggle_control',
-      },
-      {
-        title: 'Top Nav',
-        content:
-          'By default the walkthrough kit will cycle through each step provided.',
-        target: '.pb--page--topNav',
-      },
-    ],
-  })
-
-  return (
-    <div>
-      <div
-          className="example"
-          style={{ 'display': 'inline' }}
-      >
-        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
-      </div>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-            setState({ ...state,
-              run: true,
-            })
-          }}
-      >
-        {'Start Tour'}
-      </Button>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-          setState({
-            ...state,
-            run: false,
-          })
-        }}
-      >
-        {'Reset/Stop Tour'}
-      </Button>
-
-      <Walkthrough
-          run={state.run}
-          steps={state.steps}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default WalkthroughDefault

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx

@@ -1,110 +0,0 @@
-import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
-
-const WalkthroughMultiBeacon = (props) => {
-  const [stateA, setStateA] = useState({
-    run: false,
-    steps: [
-      {
-        title: 'Example title',
-        content:
-          'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
-        target: '.exampleMulti',
-      },
-    ],
-  })
-
-  const [stateB, setStateB] = useState({
-    run: false,
-    steps: [
-      {
-        title: 'Toggle',
-        content:
-          'By default the walkthrough kit will cycle through each step provided.',
-        target: '.pb_toggle_control',
-      },
-    ],
-  })
-
-  const [stateC, setStateC] = useState({
-    run: false,
-    steps: [
-      {
-        title: 'Top Nav',
-        content:
-          'By default the walkthrough kit will cycle through each step provided.',
-        target: '.pb--page--topNav',
-      },
-    ],
-  })
-
-  return (
-    <div>
-      <div
-          className="exampleMulti"
-          style={{ 'display': 'inline' }}
-      >
-        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
-      </div>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-          setStateA({
-            ...stateA,
-            run: true,
-          })
-          setStateB({
-            ...stateB,
-            run: true,
-          })
-          setStateC({
-            ...stateC,
-            run: true,
-          })
-          }}
-      >
-        {'Start Tour'}
-      </Button>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-          setStateA({
-            ...stateA,
-            run: false,
-          })
-          setStateB({
-            ...stateB,
-            run: false,
-          })
-          setStateC({
-            ...stateC,
-            run: false,
-          })
-        }}
-      >
-        {'Reset/Stop Tour'}
-      </Button>
-
-      <Walkthrough
-          run={stateA.run}
-          steps={stateA.steps}
-          {...props}
-      />
-      <Walkthrough
-          run={stateB.run}
-          steps={stateB.steps}
-          {...props}
-      />
-      <Walkthrough
-          run={stateC.run}
-          steps={stateC.steps}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default WalkthroughMultiBeacon

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx

@@ -1,76 +0,0 @@
-import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
-
-const WalkthroughNoBeacon = (props) => {
-  const [state, setState] = useState({
-    callback: (data) => {
-      if (data.action === 'close' && data.type === 'step:after') {
-        // This explicitly stops the tour (otherwise it displays a "beacon" to resume the tour)
-        setState({ ...state, run: false })
-      }
-    },
-    run: false,
-    steps: [
-      {
-        title: 'Example Title',
-        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
-        target: '.exampleNoBeacon',
-        disableBeacon: true,
-      },
-      {
-        title: 'Toggle',
-        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
-        target: '.pb_toggle_control',
-      },
-      {
-        title: 'Top Nav',
-        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
-        target: '.pb--page--topNav',
-      },
-    ],
-  })
-
-  return (
-    <div>
-      <div
-          className="exampleNoBeacon"
-          style={{ 'display': 'inline' }}
-      >
-        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
-      </div>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-            setState({ ...state,
-              run: true,
-            })
-          }}
-      >
-        {'Start Tour'}
-      </Button>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-          setState({
-            ...state,
-            run: false,
-          })
-        }}
-      >
-        {'Reset/Stop Tour'}
-      </Button>
-
-      <Walkthrough
-          run={state.run}
-          steps={state.steps}
-          {...props}
-          continuous
-      />
-    </div>
-  )
-}
-
-export default WalkthroughNoBeacon