playbook_ui_docs 15.5.0.pre.alpha.typeaheadfix12605 → 15.5.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1bec13ccbabaf58119f5debd509cdb34ce179d3e54486eadafaf1c3089748c4e
-  data.tar.gz: cec4da25a4b4391cd40f76116c481283398b40de26ebb72126ff348da47c3177
+  metadata.gz: 3251b709fdb1f49c81517f7ef6e60d3c8d83ce4da554b6f646e03ea94966d4fd
+  data.tar.gz: '070835678f96480adb51ec83b0b4bae26b07ff9760a57ca7be485955d6699d35'
 SHA512:
-  metadata.gz: 218454ec88593328445ec69ae2ed20eae9b0fa3ff8fbd9e3a0161868a8f0fc055c18e41bc2765caad296f67696f242a2b6975b1322b8f59439bcc7ebd3b1ca4c
-  data.tar.gz: e1adf27bc836bebd4696fab554be89e820f4ace94795b8a711e900a15b431db94045b20d3640b5a1ae83741423c258a8d71f5cf8a3f5aed6aa62f98e94b19056
+  metadata.gz: b211e59843101d9837123ff1397be65a1e5c5f62716e1701685c5afb7f0a0ef56cd92dfeb0dc5bab369c90c05e6732f6b13ff2f3a8016b96d13d27878d351577
+  data.tar.gz: 1601b6e0bf78c791c880ef18e5dffd7d1c1140d009c54592c3311f38d8f2e64eae124075dd27116e456eb75471825895c58e1312ceaa98cb9479e60ffdbdd6d6

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx

@@ -1,6 +1,5 @@
 import React from "react"
-import AdvancedTable from '../_advanced_table'
-import colors from '../../tokens/exports/_colors.module.scss'
+import { AdvancedTable, colors } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import AdvancedTable from '../_advanced_table';
+import { AdvancedTable } from "playbook-ui";
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnStylingColumnHeaders = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from "react"
-import AdvancedTable from '../_advanced_table'
-import Flex from '../../pb_flex/_flex'
-import Button from '../../pb_button/_button'
+import { AdvancedTable, Button, Flex } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
 
 const AdvancedTableInfiniteScroll = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from "react";
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import TextInput from '../../pb_text_input/_text_input'
-import Body from '../../pb_body/_body'
+import { AdvancedTable, TextInput, Body } from "playbook-ui";
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableInlineEditing = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx

@@ -1,8 +1,7 @@
 import React from "react"
 import AdvancedTable from '../_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
-import colors from '../../tokens/exports/_colors.module.scss'
-
+import { colors } from "playbook-ui"
 
 const AdvancedTableRowStyling = (props) => {
   const columnDefinitions = [

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

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb

@@ -1,2 +1,2 @@
-<%= pb_rails("copy_button", props: { id: "default-copy-button", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
-<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Click the icon above to copy and paste here" }) %>
+<%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx

@@ -7,6 +7,7 @@ const CopyButtonDefault = (props) => (
   <div>
     <CopyButton
         {...props}
+        text="Copy Text"
         tooltipPlacement="right"
         tooltipText="Text copied!"
         value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
@@ -14,7 +15,7 @@ const CopyButtonDefault = (props) => (
 
     <Textarea
         {...props}
-        placeholder="Click the icon above to copy and paste here"
+        placeholder="Copy and paste here"
     />
   </div>
 )

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
-<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button", variant: "button" }) %>
+<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
 <%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
-<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button", variant: "button" }) %>
+<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
 <%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx

@@ -21,7 +21,6 @@ const CopyButtonFrom = (props) => {
         text="Copy Body text"
         tooltipPlacement="right"
         tooltipText="Body text copied!"
-        variant="button"
     />
 
     <TextInput
@@ -37,7 +36,6 @@ const CopyButtonFrom = (props) => {
         text="Copy Text Input"
         tooltipPlacement="right"
         tooltipText="Text input copied!"
-        variant="button"
     />
 
     <Textarea

data/app/pb_kits/playbook/pb_copy_button/docs/example.yml

@@ -1,12 +1,10 @@
 examples:
   rails:
   - copy_button_default: Default
-  - copy_button_button_variant: Button Variant
   - copy_button_from: Copy From
   - copy_button_hook_rails: Copy Hook
   
   react:
   - copy_button_default: Default
-  - copy_button_button_variant: Button Variant
   - copy_button_from: Copy From
   - copy_button_hook: Copy Hook

data/app/pb_kits/playbook/pb_copy_button/docs/index.js

@@ -1,4 +1,3 @@
 export { default as CopyButtonDefault } from './_copy_button_default.jsx'
 export { default as CopyButtonFrom } from './_copy_button_from.jsx' 
 export { default as CopyButtonHook } from './_copy_button_hook.jsx'
-export { default as CopyButtonButtonVariant } from './_copy_button_button_variant.jsx'

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.html.erb

@@ -1,14 +1,4 @@
 <%= pb_rails("currency", props: {
   amount: "-2,000.50",
   size: "sm",
-}) %>
-
-<%= pb_rails("currency", props: {
-  amount: "-2,000.50",
-  size: "md",
-}) %>
-
-<%= pb_rails("currency", props: {
-  amount: "-2,000.50",
-  size: "lg",
 }) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.jsx

@@ -9,16 +9,6 @@ const CurrencyNegative = (props) => {
           amount="-2,000.50"
           {...props}
       />
-      <Currency
-          amount="-2,000.50"
-          size="md"
-          {...props}
-      />
-      <Currency
-          amount="-2,000.50"
-          size="lg"
-          {...props}
-      />
     </>
   )
 }

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -1,10 +1,3 @@
-<%= pb_rails("currency", props: {
-  amount: "30,327.43",
-  label: "Default",
-  size: "sm",
-  margin_bottom: "md",
-}) %>
-
 <%= pb_rails("currency", props: {
   amount: "2,000.50",
   emphasized: false,

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -5,13 +5,6 @@ import Currency from '../_currency'
 const CurrencyVariants = (props) => {
   return (
     <>
-      <Currency
-          amount="30,327.43"
-          label="Default"
-          marginBottom="md"
-          size="sm"
-          {...props}
-      />
       <Currency
           amount="2,000.50"
           emphasized={false}

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

@@ -1,2 +1,2 @@
-Use this kit to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. Pairing it with labels improves user understanding.
-Cents are automatically ".00" unless otherwise overwritten (i.e. `unit` prop).
+Use to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. User understanding increase when paired with labels. 
+Cents is automatically ".00" unless other wise overwritten (i.e. unit prop).

data/app/pb_kits/playbook/pb_date_time/docs/example.yml

@@ -1,16 +1,14 @@
 examples:
-
+  
   rails:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
-  - date_time_show_current_year: Show Current Year
 
   react:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
-  - date_time_show_current_year: Show Current Year
 
   swift:
   - date_time_default_swift: Default

data/app/pb_kits/playbook/pb_date_time/docs/index.js

@@ -1,4 +1,3 @@
 export { default as DateTimeDefault } from './_date_time_default.jsx'
 export { default as DateTimeAlign } from './_date_time_align.jsx'
 export { default as DateTimeSize } from './_date_time_size.jsx'
-export { default as DateTimeShowCurrentYear } from './_date_time_show_current_year.jsx'

data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml

@@ -2,11 +2,9 @@ examples:
 
   rails:
   - date_time_stacked_default: Default
-  - date_time_stacked_show_current_year: Show Current Year
-
+  
   react:
   - date_time_stacked_default: Default
-  - date_time_stacked_show_current_year: Show Current Year
   
   swift:
   - date_time_stacked_default_swift: Default

data/app/pb_kits/playbook/pb_date_time_stacked/docs/index.js

@@ -1,2 +1 @@
 export { default as DateTimeStackedDefault } from './_date_time_stacked_default.jsx'
-export { default as DateTimeStackedShowCurrentYear } from './_date_time_stacked_show_current_year.jsx'

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,28 +1,7 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "United Kingdom",
-      value: "unitedKingdom",
-      id: "gb"
-    },
-    {
-      label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
-    }
-  ]
-%>
-
-
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
-  <%= pb_form_with(scope: :example, method: :get, url: "", options: { remote: true }) do |form| %>
+  <form>
     <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
         <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
     <% end %>
@@ -31,18 +10,8 @@
         <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
-        <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
-        <%= pb_rails("typeahead", props: {
-        id: "typeahead-default",
-        placeholder: "Select one...",
-        options: options,
-        name: :foo,
-        margin_top: "sm",
-        is_multi: false
-      })
-%>
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
-  <% end %>
+  </form>
 <% end %>

data/app/pb_kits/playbook/pb_draggable/docs/example.yml

@@ -5,12 +5,11 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
+  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
-  - draggable_multiple_containers: Dragging Across Multiple Containers
-  - draggable_multiple_containers_dropzone: Dragging Across Multiple Containers with Dropzones
 
   rails:
   - draggable_default: Default
@@ -18,8 +17,8 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
+  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
-  - draggable_multiple_containers: Dragging Across Multiple Containers

data/app/pb_kits/playbook/pb_draggable/docs/index.js

@@ -7,5 +7,4 @@ export { default as DraggableWithTable } from './_draggable_with_table.jsx'
 export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
 export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
 export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
-export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
-export { default as DraggableMultipleContainersDropzone } from './_draggable_multiple_containers_dropzone.jsx'
+export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import EmptyState from '../_empty_state'
-import Flex from '../../pb_flex/_flex'
+import { EmptyState, Flex } from 'playbook-ui'
 
 const EmptyStateAlignment = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import EmptyState from '../_empty_state'
-import Flex from '../../pb_flex/_flex'
+import { EmptyState, Flex } from 'playbook-ui'
 
 const EmptyStateDefault = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import EmptyState from '../_empty_state'
-import Flex from '../../pb_flex/_flex'
+import { EmptyState, Flex } from 'playbook-ui'
 
 const EmptyStateOrientation = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import EmptyState from '../_empty_state'
-import Flex from '../../pb_flex/_flex'
+import { EmptyState, Flex } from 'playbook-ui'
 
 const EmptyStateSize = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-import FormPill from '../_form_pill'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import LoadingInline from '../_loading_inline'
+import { LoadingInline } from 'playbook-ui'
 
 const LoadingInlineVariant = (props) => {
   return (

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

@@ -1,5 +1,3 @@
-**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
-
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, 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. 
+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_bar_graph/docs/_pb_bar_graph_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import PbBarGraph from '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
 import colors from '../../tokens/exports/_colors.module.scss'
 
 const chartData = [{

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import PbBarGraph from '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
 
   const chartData = [{
     name: 'Installation',

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import PbBarGraph from '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import PbBarGraph from '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
 
 
 const chartOptions = {

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import PbBarGraph from '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
 
 
 const chartData = [{

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import PbBarGraph from '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
+
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb

@@ -36,7 +36,7 @@
 }
 %>
 
-<%= pb_rails("title", props: {size: 4, text: "align | verticalAlign", padding_top: "sm", padding_bottom: "sm"})%>
+<%= pb_rails("title", props: {size: 4, text: "align | vertical_align", padding_top: "sm", padding_bottom: "sm"})%>
 
 
 <%= pb_rails("pb_bar_graph", props: {options: chart_options_right}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import PbBarGraph from '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
 import Title from "../../pb_title/_title"
 
 

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import PbBarGraph from '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
 
 
 const chartData = [{

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import PbBarGraph from '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
 
 import colors from '../../tokens/exports/_colors.module.scss'
 import typography from '../../tokens/exports/_typography.module.scss'

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import PbBarGraph from '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
+
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import PbBarGraph from '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
+
 
 const chartData = [{
   name: 'Installation',

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

@@ -1,5 +1,3 @@
-**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
-
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, 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. 
+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/_pb_circle_chart_block_content.jsx

@@ -1,6 +1,5 @@
 import React from "react";
-import PbCircleChart from "../_pb_circle_chart";
-import Title from "../../pb_title/_title";
+import { PbCircleChart, Title } from "playbook-ui";
 
 const data= [
         {

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

@@ -1,6 +1,5 @@
 import React from "react";
-import PbCircleChart from "../_pb_circle_chart";
-import colors from '../../tokens/exports/_colors.module.scss';
+import { PbCircleChart, colors } from "playbook-ui";
 
 const data= [
         {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import PbCircleChart from "../_pb_circle_chart";
+import { PbCircleChart } from "playbook-ui";
 
 const data = [
   {

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

@@ -1,5 +1,4 @@
-Tooltip options from Highcharts:
-
+Custom tooltip formatting is configured through the tooltip object in the options passed to the kit: 
 `headerFormat` **Type**: String | when set to null will disable the header.
 `pointFormat` **Type**: String | defines the HTML template for each data point and supports custom HTML when `useHTML` is enabled.
 `useHTML` **Type**: boolean (default false) | enables HTML rendering in tooltips.

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

@@ -1,6 +1,5 @@
 import React from "react";
-import PbCircleChart from "../_pb_circle_chart";
-import Title from "../../pb_title/_title";
+import { PbCircleChart, Title } from "playbook-ui";
 
 const dataFirst = [
   {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import PbCircleChart from "../_pb_circle_chart";
+import { PbCircleChart } from "playbook-ui";
 
 const data = [
   {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import PbCircleChart from "../_pb_circle_chart";
+import { PbCircleChart } from "playbook-ui";
 
 const data = [{
   name: 'Bugs',

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

@@ -1,5 +1,5 @@
 import React from "react";
-import PbCircleChart from "../_pb_circle_chart";
+import { PbCircleChart } from "playbook-ui";
 
 const chartOptions = {
   series: [

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

@@ -1,5 +1,5 @@
 import React from "react";
-import PbCircleChart from "../_pb_circle_chart";
+import { PbCircleChart } from "playbook-ui";
 
 const dataFirst = [
   {

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

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
-import PbCircleChart from "../_pb_circle_chart";
-import Button from "../../pb_button/_button";
+import { PbCircleChart, Button } from "playbook-ui";
 
 const chartData = [
   {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import PbCircleChart from "../_pb_circle_chart";
+import { PbCircleChart } from "playbook-ui";
 
 const data= [
         {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import PbCircleChart from "../_pb_circle_chart";
+import { PbCircleChart } from "playbook-ui";
 
 const data= [
 {