playbook_ui 15.4.0.pre.alpha.PLAY2582rails722112532 → 15.4.0.pre.alpha.PLAY2627requiredmultiselectdropdownbug12416

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 707a9a3553c2813cb3297123f4a4f44c1c7d766cec8f3af6bc0c3d269a632e21
-  data.tar.gz: e7884a7c8be2f43ef9d3a37a25f6a3a6cc72834486c592b0d6d941c9092182a9
+  metadata.gz: ccec73ff9da24371018279eed782db5b535c23fa452eed663389ef339ec64257
+  data.tar.gz: 16ed40f32b267d471031f73b72b48b5beaaa8f872d6e1923e2248c6c72bb234f
 SHA512:
-  metadata.gz: c96cce1ab96980e86fc78ce13b394860410986add89fd48814f332e2e1459dead8b9fd86146f76b53bfd595ec143241eb539d14cd9f43388a47a9e5b51489d37
-  data.tar.gz: eeaff59ae0aa931d6e4358cee1fa7fc5d3b803cfa3fce18d728be8926f97af4105d023813b4a92416bf64315a17acc11970ab723663b7482c0e310bd0e7353b7
+  metadata.gz: 68d0361d59daead7dc1a5d010dc5a07ca80ea2b268d1bdb6220242b41973f7a80432e735ada36f12e3dbc6585bf6b41728c1a026a3f1403fc38a184720275877
+  data.tar.gz: f7084f65225e083853a288d1323d80f9781cb794f432064839a535e26087cad177fa4de396cd6de13082099c945df5e7111f7b361b4c3e87d0cd98f6b2cdc77d

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_copy_button/_copy_button.tsx

@@ -5,7 +5,6 @@ import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
 import Tooltip from '../pb_tooltip/_tooltip'
-import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
 
 import usePBCopy from './usePBCopy'
 
@@ -19,7 +18,6 @@ type CopyButtonProps = {
   tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left'
   tooltipText?: string
   value?: string
-  variant?: 'button' | 'icon'
   timeout?: number
 }
 
@@ -30,12 +28,11 @@ const CopyButton = (props: CopyButtonProps) => {
     data = {},
     from = '',
     id,
-    text = 'Copy',
+    text= 'Copy',
     timeout = 1000,
-    tooltipPlacement = 'bottom',
+    tooltipPlacement= 'bottom',
     tooltipText = 'Copied!',
     value = '',
-    variant = 'icon',
   } = props
 
   const [copied, copy] = usePBCopy({ value, from, timeout })
@@ -45,8 +42,7 @@ const CopyButton = (props: CopyButtonProps) => {
   const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
 
   return (
-    <div 
-        {...ariaProps}
+    <div {...ariaProps}
         {...dataProps}
         className={classes}
         id={id}
@@ -57,20 +53,11 @@ const CopyButton = (props: CopyButtonProps) => {
           showTooltip={false}
           text={tooltipText}
       >
-        {variant === 'icon' ? (
-          <CircleIconButton 
-              icon="copy" 
-              onClick={copy} 
-              variant="link" 
-          />
-        ) : (
-          <Button 
-              icon="copy"
-              onClick={copy}
-          >
-            {text}
-          </Button>
-        )}
+        <Button icon="copy"
+            onClick={copy}
+        >
+          {text}
+        </Button>
       </Tooltip>
     </div>
   )

data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb

@@ -1,10 +1,6 @@
 <%= pb_content_tag do %>
-    <% if object.variant == "icon" %>
-      <%= pb_rails("circle_icon_button", props: { icon: "copy", variant: "link" }) %>
-    <% else %>
-      <%= pb_rails("button", props: { icon: "copy" }) do %>
-        <%= object.text %>
-      <% end %>
+    <%= pb_rails("button", props: { icon: "copy" }) do %>
+      <%= object.text %>
     <% end %>
   <% if object.id %> 
   <%= pb_rails("tooltip", props: {

data/app/pb_kits/playbook/pb_copy_button/copy_button.rb

@@ -12,9 +12,6 @@ module Playbook
                           default: "Copied!"
       prop :value
       prop :from
-      prop :variant, type: Playbook::Props::Enum,
-                     values: %w[button icon],
-                     default: "icon"
 
       def classname
         generate_classname("pb_copy_button_kit")

data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx

@@ -37,29 +37,6 @@ it('copies the value to clipboard and pastes it into an input', async () => {
   expect(navigator.clipboard.writeText).toHaveBeenCalledWith("copy");
 })
 
-test('passes text and tooltip props to icon variant', () => {
-  render(
-      <CopyButton
-          data={{ testid: 'text-test' }}
-          tooltipPlacement="right"
-          tooltipText="Text copied!"
-          value="copy"
-      />
-  )
-
-  const kit = screen.getByTestId('text-test')
-  const button = kit.querySelector('.pb_button_kit.pb_button_link.pb_button_inline.pb_button_enabled')
-  expect(button).toBeInTheDocument()
-
-  fireEvent.click(button)
-  const tooltipContent = screen.getByText("Text copied!")
-  expect(tooltipContent).toHaveTextContent("Text copied!")
-
-  const tooltip = kit.querySelector('.pb_tooltip_kit')
-  expect(tooltip).toBeInTheDocument()
-})
-
-
 test('passes text and tooltip props to button', () => {
   render(
       <CopyButton
@@ -68,7 +45,6 @@ test('passes text and tooltip props to button', () => {
           tooltipPlacement="right"
           tooltipText="Text copied!"
           value="copy"
-          variant="button"
       />
   )
 

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_date_time/_date_time.tsx

@@ -17,7 +17,6 @@ type DateTimeProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: "sm" | "md",
-  showCurrentYear?: boolean,
   showDayOfWeek: boolean,
   showIcon?: boolean,
   timeZone?: string
@@ -33,7 +32,6 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
     showDayOfWeek = false,
     datetime,
     id,
-    showCurrentYear = false,
     showIcon = false,
     size = 'md',
     timeZone = 'America/New_York',
@@ -61,7 +59,6 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
           vertical="baseline"
       >
         <FormattedDate
-            showCurrentYear={showCurrentYear}
             showDayOfWeek={showDayOfWeek}
             size={size}
             value={datetime}

data/app/pb_kits/playbook/pb_date_time/date_time.html.erb

@@ -9,7 +9,6 @@
         dark: object.dark,
         date: object.date,
         show_day_of_week: object.show_day_of_week,
-        show_current_year: object.show_current_year,
         size: object.size,
         timezone: object.timezone,
       }) %>

data/app/pb_kits/playbook/pb_date_time/date_time.rb

@@ -16,7 +16,6 @@ module Playbook
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :show_icon, type: Playbook::Props::Boolean, default: false
       prop :show_day_of_week, type: Playbook::Props::Boolean, default: false
-      prop :show_current_year, type: Playbook::Props::Boolean, default: false
 
       def classname
         generate_classname("pb_date_time_kit", align)

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/_date_time_stacked.tsx

@@ -17,7 +17,6 @@ type DateTimeStackedProps = {
   datetime: Date,
   dark: boolean,
   timeZone?: string,
-  showCurrentYear?: boolean,
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
@@ -29,7 +28,6 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
     dark,
     htmlOptions = {},
     timeZone = 'America/New_York',
-    showCurrentYear = false,
   } = props
 
   const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
@@ -48,7 +46,6 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
             bold
             dark={dark}
             date={date || datetime}
-            showCurrentYear={showCurrentYear}
         />
       </FlexItem>
 

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb

@@ -1,8 +1,8 @@
-  <%= pb_content_tag do %>
+<%= pb_content_tag do %>
 
   <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>
-        <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark, show_current_year: object.show_current_year }) %>
+        <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>
       <% end %>
       <%= pb_rails("section_separator", props: { orientation: "vertical", classname: "date-time-padding" }) %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb

@@ -10,8 +10,6 @@ module Playbook
                   default: false
       prop :timezone, type: Playbook::Props::String,
                       default: "America/New_York"
-      prop :show_current_year, type: Playbook::Props::Boolean,
-                               default: false
 
       def date_time_value
         date || date_time

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -41,36 +41,3 @@ test('renders time in timezone', () => {
   const kit = renderKit(DateTimeStacked, props)
   expect(kit).toHaveTextContent(`${monthDayYear}11:00aMDT`)
 })
-
-test('renders current year when showCurrentYear is true', () => {
-  const currentYearDate = new Date()
-  const currentYear = currentYearDate.getFullYear()
-  
-  const kit = renderKit(DateTimeStacked, {
-    data: { testid: 'datetimestacked-current-year' },
-    datetime: currentYearDate,
-    dark: false,
-    showCurrentYear: true,
-  })
-  expect(kit).toHaveTextContent(currentYear.toString())
-})
-
-test('hides current year by default', () => {
-  const currentYearDate = new Date()
-  const currentYear = currentYearDate.getFullYear()
-  
-  const kit = renderKit(DateTimeStacked, {
-    data: { testid: 'datetimestacked-hide-year' },
-    datetime: currentYearDate,
-    dark: false,
-  })
- 
-  const yearElement = kit.querySelector('.pb_caption_kit_xs')
-
-  if (yearElement) {
-    expect(yearElement.textContent).not.toBe(currentYear.toString())
-  } else {
-
-    expect(yearElement).toBeNull()
-  }
-})

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_dropdown/index.js

@@ -33,8 +33,6 @@ export default class PbDropdown extends PbEnhancedElement {
     this.formPillProps = this.element.dataset.formPillProps
       ? JSON.parse(this.element.dataset.formPillProps)
       : {};
-    const baseInput = this.element.querySelector(DROPDOWN_INPUT);
-    this.wasOriginallyRequired = baseInput && baseInput.hasAttribute("required");
     this.setDefaultValue();
     this.bindEventListeners();
     this.bindSearchInput();
@@ -589,9 +587,7 @@ export default class PbDropdown extends PbEnhancedElement {
     // for multi_select, for each selectedOption, create a hidden input
     const name = baseInput.getAttribute("name");
     this.selectedOptions.forEach((raw) => {
-      const optionData = JSON.parse(raw);
-      // Use id if available, otherwise fall back to value
-      const id = optionData.id || optionData.value;
+      const id = JSON.parse(raw).id;
       const inp = document.createElement("input");
       inp.type = "hidden";
       inp.name = name;
@@ -599,19 +595,7 @@ export default class PbDropdown extends PbEnhancedElement {
       inp.dataset.generated = "true";
       baseInput.insertAdjacentElement("afterend", inp);
     });
-    
-    // For multi-select, remove required from base input when there are selections
-    // The generated inputs handle the form submission with actual values
-    // Restore required attribute when there are no selections (if it was originally required)
-    if (this.selectedOptions.size > 0) {
-      baseInput.value = "";
-      baseInput.removeAttribute("required");
-    } else {
-      baseInput.value = "";
-      if (this.wasOriginallyRequired) {
-        baseInput.setAttribute("required", "");
-      }
-    }
+    baseInput.value = "";
   }
 
   handleBackspaceClear() {

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/_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.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/_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= [
         {