playbook_ui 15.0.0.pre.alpha.PLAY2468phonenuminputvalidation10790 → 15.0.0.pre.alpha.PLAY2473rowhighlightfix10510

data/lib/playbook/engine.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require "action_view/railtie"
+require "webpacker/react"
 require "view_component"
 
 module Playbook

data/lib/playbook/forms/builder/form_field_builder.rb

@@ -4,15 +4,6 @@ module Playbook
   module Forms
     class Builder
       class FormFieldBuilder < Module
-        MASK_PATTERNS = {
-          "currency" => '^\$\d{1,3}(?:,\d{3})*(?:\.\d{2})?$',
-          "zip_code" => '\d{5}',
-          "postal_code" => '\d{5}-\d{4}',
-          "ssn" => '\d{3}-\d{2}-\d{4}',
-          "credit_card" => '\d{4} \d{4} \d{4} \d{4}',
-          "cvv" => '\d{3,4}',
-        }.freeze
-
         def initialize(method_name, kit_name:)
           define_method method_name do |name, props: {}, **options, &block|
             props   = props.dup
@@ -21,29 +12,11 @@ module Playbook
             options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
             options[:required] = true if props[:required]
             options[:placeholder] = props[:placeholder] || ""
-            options[:type] = props[:type] if props.key?(:type)
-            options[:value] = props[:value] if props.key?(:value)
-            options[:disabled] = true if props.key?(:disabled) && props[:disabled]
-            if props.key?(:disabled)
-              cursor_style = props[:disabled] ? "not-allowed" : "pointer"
-              existing_style = options[:style] || ""
-
-              options[:style] =
-                existing_style.empty? ? "cursor: #{cursor_style}" : "#{existing_style}; cursor: #{cursor_style}"
-            end
-            if props.key?(:autocomplete)
-              options[:autocomplete] = props[:autocomplete] == true ? nil : (props[:autocomplete].presence || "off")
-            end
-            if props.key?(:mask) && props[:mask].present?
-              options[:mask] = props[:mask]
-              options[:data] = (options[:data] || {}).merge(pb_input_mask: true)
-              options[:pattern] = MASK_PATTERNS[props[:mask]]
-            end
 
             if props.key?(:validation)
               validation = props[:validation]
               options[:pattern] = validation[:pattern] if validation[:pattern].present?
-              options[:data] = (options[:data] || {}).merge(message: validation[:message]) if validation[:message].present?
+              options[:data] = { message: validation[:message] } if validation[:message].present?
             end
 
             input = super(name, **options, &block)

data/lib/playbook/kit_base.rb

@@ -122,7 +122,7 @@ module Playbook
       html_options.each do |key, value|
         if key == :style && value.is_a?(Hash)
           # Convert style hash to CSS string
-          merged[:style] = value.map { |k, v| "#{k.to_s.tr('_', '-')}: #{v}" }.join("; ")
+          merged[:style] = value.map { |k, v| "#{k.to_s.gsub('_', '-')}: #{v}" }.join("; ")
         else
           merged[key] = value
         end
@@ -136,27 +136,6 @@ module Playbook
       merged.deep_merge(data_attributes)
     end
 
-    # Custom react_component helper to replace Webpacker React
-    # This will render a div with data attributes for the component name and props
-    # The mounting script will look for these divs and mount the appropriate React components
-    # Sister def in app/helpers/react_helper in playbook-website. Any changes here should be reflected there.
-    def react_component(component_name, props = {}, html_options = {})
-      # Convert props to JSON for the data attribute
-      props_json = props.to_json
-
-      # Build the HTML attributes
-      html_attrs = {
-        "data-pb-react-component" => component_name,
-        "data-pb-react-props" => props_json,
-      }
-
-      # Merge with any additional HTML options
-      html_attrs.merge!(html_options)
-
-      # Return the div element
-      content_tag(:div, "", html_attrs)
-    end
-
     def global_inline_props
       {
         height: height,
@@ -193,7 +172,7 @@ module Playbook
     end
 
     def dynamic_inline_props
-      styles = global_inline_props.map { |key, value| "#{key.to_s.tr('_', '-')}: #{value}" if inline_validator(key, value) }.compact
+      styles = global_inline_props.map { |key, value| "#{key.to_s.gsub('_', '-')}: #{value}" if inline_validator(key, value) }.compact
       styles.join("; ").presence
     end
 

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "15.0.0"
-  VERSION = "15.0.0.pre.alpha.PLAY2468phonenuminputvalidation10790"
+  VERSION = "15.0.0.pre.alpha.PLAY2473rowhighlightfix10510"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 15.0.0.pre.alpha.PLAY2468phonenuminputvalidation10790
+  version: 15.0.0.pre.alpha.PLAY2473rowhighlightfix10510
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-09-26 00:00:00.000000000 Z
+date: 2025-09-16 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -53,6 +53,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 5.2.4.5
+- !ruby/object:Gem::Dependency
+  name: react-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.6.1
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '='
+      - !ruby/object:Gem::Version
+        version: 2.6.1
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -68,19 +82,19 @@ dependencies:
       - !ruby/object:Gem::Version
         version: 2.83.0
 - !ruby/object:Gem::Dependency
-  name: vite_rails
+  name: webpacker-react
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 0.3.2
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: 0.3.2
 - !ruby/object:Gem::Dependency
   name: brakeman
   requirement: !ruby/object:Gem::Requirement
@@ -875,7 +889,6 @@ files:
 - app/pb_kits/playbook/pb_contact/contact.test.js
 - app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb
 - app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx
-- app/pb_kits/playbook/pb_contact/docs/_contact_default.md
 - app/pb_kits/playbook/pb_contact/docs/_contact_default_swift.md
 - app/pb_kits/playbook/pb_contact/docs/_contact_props_swift.md
 - app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb
@@ -2264,9 +2277,6 @@ files:
 - app/pb_kits/playbook/pb_nav/docs/_description.md
 - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.html.erb
 - app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.jsx
-- app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb
-- app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx
-- app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md
 - app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_bold_swift.md
 - app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_default_swift.md
 - app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_no_highlight_swift.md
@@ -2438,38 +2448,6 @@ files:
 - app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb
 - app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb
 - 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/_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
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml
-- app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js
-- app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts
-- 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_person/_person.scss
 - app/pb_kits/playbook/pb_person/_person.tsx
 - app/pb_kits/playbook/pb_person/docs/_description.md
@@ -2760,7 +2738,6 @@ files:
 - app/pb_kits/playbook/pb_section_separator/docs/index.js
 - app/pb_kits/playbook/pb_section_separator/section_separator.html.erb
 - app/pb_kits/playbook/pb_section_separator/section_separator.rb
-- app/pb_kits/playbook/pb_section_separator/section_separator.test.js
 - app/pb_kits/playbook/pb_select/_select.scss
 - app/pb_kits/playbook/pb_select/_select.tsx
 - app/pb_kits/playbook/pb_select/docs/_description.md
@@ -3308,47 +3285,25 @@ files:
 - app/pb_kits/playbook/pb_timestamp/_timestamp.tsx
 - app/pb_kits/playbook/pb_timestamp/docs/_description.md
 - app/pb_kits/playbook/pb_timestamp/docs/_footer.md
+- app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align_swift.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default_swift.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_swift.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_props_swift.md
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_current_year.md
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_date.md
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_show_time.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_swift.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.md
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_current_year.md
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_date.md
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_show_time.md
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_swift.md
 - app/pb_kits/playbook/pb_timestamp/docs/example.yml
 - app/pb_kits/playbook/pb_timestamp/docs/index.js
@@ -3702,13 +3657,12 @@ 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-CspDMr9b.js
-- dist/chunks/_typeahead-B_wpgm_J.js
-- dist/chunks/_weekday_stacked-CXzARuTy.js
-- dist/chunks/componentRegistry-DzmmLR2x.js
+- dist/chunks/_line_graph-BBny-YYZ.js
+- dist/chunks/_typeahead-CeyJ6-GF.js
+- dist/chunks/_weekday_stacked-Dfq9Ls3V.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-QZuu1ltS.js
-- dist/chunks/pb_form_validation-W63gNcnu.js
+- dist/chunks/lib-BTs5acfO.js
+- dist/chunks/pb_form_validation-CKkaQFX3.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.md

@@ -1,5 +0,0 @@
-The Contact kit automatically formats US phone numbers when the `contactType` / `contact_type` is one of: `home` (default), `work`, `cell`, `work-cell`, `wrong-phone`.
-
-- Use `email` to display emails.
-- Use `international` to display International phone numbers exactly as provided (no formatting applied).
-- Use `extension` to display four digit phone extensions.

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.html.erb

@@ -1,6 +0,0 @@
-<%= pb_rails("nav", props: { orientation: "horizontal", extended_underline: true }) do %>
-  <%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
-  <%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
-  <%= pb_rails("nav/item", props: { text: "Service ", link: "#" }) %>
-  <%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
-<% end %>

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.jsx

@@ -1,39 +0,0 @@
-import React from 'react'
-
-import Nav from '../_nav'
-import NavItem from '../_item'
-
-const HorizontalNavExtendedunderline = (props) => {
-  return (
-    <Nav
-        extendedUnderline
-        link="#"
-        orientation="horizontal"
-        {...props}
-    >
-      <NavItem
-          link="#"
-          text="About"
-          {...props}
-      />
-      <NavItem
-          active
-          link="#"
-          text="Case Studies"
-          {...props}
-      />
-      <NavItem
-          link="#"
-          text="Service"
-          {...props}
-      />
-      <NavItem
-          link="#"
-          text="Contacts"
-          {...props}
-      />
-    </Nav>
-  )
-}
-
-export default HorizontalNavExtendedunderline

data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_extendedunderline.md

@@ -1 +0,0 @@
-The optional `extendedUnderline`/`extended_underline` prop can be used with the default `normal` variant of the horizontal orientation of the nav to extend the underline to take up the full width of the container. 

data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss

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

data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx

@@ -1,62 +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 pbCircleGraphTheme from './pbCircleChartTheme'
-import { globalProps } from '../utilities/globalProps'
-
-type PbCircleChartProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  id?: string,
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
-  options: Record<string, unknown>
-}
-
-const PbCircleChart = (props: PbCircleChartProps) => {
-  const {
-    aria = {},
-  className,
-  data = {},
-  id,
-  htmlOptions = {},
-  options
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
-  const classes = classnames(buildCss('pb_pb_circle_chart'), globalProps(props), className)
-
-  const mergedOptions = useMemo(() => {
-    if (!options || typeof options !== "object") {
-      // eslint-disable-next-line no-console
-      console.error("❌ Invalid options passed to <PbCircleChart />", options)
-      return {}
-    }
-
-    return Highcharts.merge({}, pbCircleGraphTheme, options)
-  }, [options])
-
-  return (
-
-    <div>
-      <HighchartsReact
-          containerProps={{
-                  className: classnames(globalProps, className),
-                  id: id,
-                  ...ariaProps,
-                  ...dataProps,
-                  ...htmlProps
-                }}
-          highcharts={Highcharts}
-          options={mergedOptions}
-      />
-    </div>
-  )
-}
-
-export default PbCircleChart

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb

@@ -1,31 +0,0 @@
-<% data = [
-        {
-          name: "Waiting for Calls",
-          y: 41,
-        },
-        {
-          name: "On Call",
-          y: 49,
-        },
-        {
-          name: "After Call",
-          y: 10,
-        },
-      ] %>
-
-<% chart_options = {
-    series: [{
-      data: data,
-      innerSize: '100%',
-      borderWidth: '20',
-    }],
-  } %>
-
-<div style="position: relative;">
-  <%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
-
-  <div class="pb-circle-chart-block"
-       style="position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 1; text-align: center; pointer-events: none;">
-    <%= pb_rails("title", props: { size: 1, tag: "div", text: "83" }) %>
-  </div>
-</div>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx

@@ -1,81 +0,0 @@
-import React from "react";
-import { PbCircleChart, Title } from "playbook-ui";
-
-const data= [
-        {
-          name: "Waiting for Calls",
-          y: 41,
-        },
-        {
-          name: "On Call",
-          y: 49,
-        },
-        {
-          name: "After Call",
-          y: 10,
-        },
-      ]
-
-
-const PbCircleChartBlockContent = (props) => {
-const chartOptions = {
-    series: [{
-      data: data,
-      innerSize: '100%',
-      borderWidth: 20,
-      borderColor: null,
-    }],
-    chart: {
-      events: {
-        render: function() {
-          const chart = this;
-          const blockElement = document.querySelector('.pb-circle-chart-block');
-          if (blockElement) {
-            blockElement.style.width = chart.chartWidth + 'px';
-            blockElement.style.height = chart.chartHeight + 'px';
-          }
-        },
-        redraw: function() {
-          const chart = this;
-          const blockElement = document.querySelector('.pb-circle-chart-block');
-          if (blockElement) {
-            blockElement.style.width = chart.chartWidth + 'px';
-            blockElement.style.height = chart.chartHeight + 'px';
-          }
-        }
-      }
-    }
-  }
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <PbCircleChart
-          options={chartOptions}
-          {...props}
-      />
-      <div 
-          className="pb-circle-chart-block"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            zIndex: 1,
-            textAlign: 'center',
-            pointerEvents: 'none'
-          }}
-      >
-        <Title
-            size={1}
-            tag="div"
-        >
-          {'83'}
-        </Title>
-      </div>
-    </div>
-  );
-};
-
-export default PbCircleChartBlockContent;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb

@@ -1,25 +0,0 @@
-<% data = [
-        {
-          name: "Waiting for Calls",
-          y: 41,
-        },
-        {
-          name: "On Call",
-          y: 49,
-        },
-        {
-          name: "After Call",
-          y: 10,
-        },
-      ] %>
-
-<% chart_options = {
-    series: [{ data: data }],
-    plotOptions: {
-      pie: {
-        colors: ["#144075", "#1CA05C", "#F9BB00"],
-      },
-    },
-  } %>
-
-<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx

@@ -1,40 +0,0 @@
-import React from "react";
-import { PbCircleChart, colors } from "playbook-ui";
-
-const data= [
-        {
-          name: "Waiting for Calls",
-          y: 41,
-        },
-        {
-          name: "On Call",
-          y: 49,
-        },
-        {
-          name: "After Call",
-          y: 10,
-        },
-      ]
-
-
-const PbCircleChartColorOverrides = (props) => {
-const chartOptions = {
-    series: [{ data: data }],
-    plotOptions: {
-      pie: {
-        colors: ["#144075", colors.data_4, colors.data_2], // Custom colors via hex OR Playbook color tokens
-      },
-    },
-  };
-
-  return (
-  <div>
-    <PbCircleChart
-        options={chartOptions}
-        {...props}
-    />
-  </div>
-);
-}
-
-export default PbCircleChartColorOverrides;

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

@@ -1,5 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements.
-
-For React, import the colors from Playbook's tokens, then set custom colors in the plotOptions.pie.colors array using the desired color variables. 
-
-For Rails, only HEX colors can be used eg: `#CA0095`

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb

@@ -1,27 +0,0 @@
-
-<% data = [
-{
-    name: 'Waiting for Calls',
-    y: 41,
-  },
-  {
-    name: 'On Call',
-    y: 49,
-  },
-  {
-    name: 'After Call',
-    y: 10,
-  },
-] %>
-
-<% chart_options = {
-  series: [{ data: data }],
-  tooltip: {
-      headerFormat: nil,
-      pointFormat: '<p>Custom tooltip for {point.name} <br/>with value: {point.y}</p>',
-      useHTML: true,
-    },
-  } %>
-
-
-<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>