playbook_ui 14.16.0.pre.alpha.play1964tablekitheadertextstylefix7091 → 14.16.0.pre.rc.0

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

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

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
 
 const AdvancedTableInlineRowLoading = (props) => {

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import Button from "../../pb_button/_button"
+import { AdvancedTable } from "playbook-ui"
+import { Button } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableLoading = (props) => {

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

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

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
 
 const AdvancedTablePagination = (props) => {
@@ -40,6 +40,7 @@ const AdvancedTablePagination = (props) => {
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           pagination
+          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
 
 const AdvancedTablePaginationWithProps = (props) => {

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import Title from '../../pb_title/_title'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 

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

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

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

@@ -1,7 +1,5 @@
 import React, {useState} from "react"
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button"
-import Flex from "../../pb_flex/_flex"
+import { AdvancedTable, CircleIconButton, Flex } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 
 const AdvancedTableSelectableRowsActions = (props) => {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -11,8 +11,6 @@ examples:
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
-  # - advanced_table_selectable_rows: Selectable Rows
-  # - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
 
 
   react:
@@ -38,6 +36,4 @@ examples:
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
-  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
-  - advanced_table_inline_editing: Inline Cell Editing
-  - advanced_table_fullscreen: Fullscreen
+  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)

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

@@ -20,6 +20,4 @@ export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
 export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
-export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
-export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
-export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
+export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'

data/app/pb_kits/playbook/pb_advanced_table/index.js

@@ -231,4 +231,4 @@ window.expandAllRows = (element) => {
 
 window.expandAllSubRows = (element, rowDepth) => {
   PbAdvancedTable.handleToggleAllSubRows(element, rowDepth);
-};
+};

data/app/pb_kits/playbook/pb_advanced_table/table_body.rb

@@ -21,8 +21,6 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
-      prop :selectable_rows, type: Playbook::Props::Boolean,
-                             default: false
 
       def flatten_columns(columns)
         columns.flat_map do |col|
@@ -58,7 +56,7 @@ module Playbook
         current_data_attributes = current_depth.zero? ? { row_depth: 0 } : table_data_attributes
 
         # Additional class and data attributes needed for toggle logic
-        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading, selectable_rows: selectable_rows, row_id: row[:id], enable_toggle_expansion: enable_toggle_expansion })
+        output << pb_rails("advanced_table/table_row", props: { id: id, row: row, column_definitions: leaf_columns, depth: current_depth, collapsible_trail: collapsible_trail, classname: additional_classes, table_data_attributes: current_data_attributes, responsive: responsive, loading: loading })
 
         if row[:children].present?
           row[:children].each do |child_row|
@@ -83,7 +81,7 @@ module Playbook
       def classname
         additional_classes = []
         additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
-        additional_classes << "selectable-rows-enabled" if selectable_rows && enable_toggle_expansion == "none"
+
         generate_classname("pb_advanced_table_body", *additional_classes, separator: " ")
       end
 

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -1,29 +1,19 @@
 <%= pb_content_tag(:thead) do %>
   <% object.header_rows.each_with_index do |header_row, row_index| %>
     <%= pb_rails("table/table_row") do %>
-      <% if row_index == 0 && object.selectable_rows && object.enable_toggle_expansion == "none" %>
-        <%= object.render_select_all_header %>
-      <% end %>
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_id = cell[:accessor].present? ? cell[:accessor] : "header_#{row_index}_#{cell_index}" %>
         <%= pb_rails("table/table_header", props: { id: header_id, colspan: cell[:colspan], classname: [object.th_classname(is_first_column: cell_index.zero?), ('last-header-cell' if cell[:is_last_in_group] && cell_index != 0)].compact.join(' '), sort_menu: cell[:accessor] ? cell[:sort_menu] : nil }) do %>
           <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: "end" }) do %>
-            <% if cell_index.zero? && row_index === header_rows.size - 1 %>
-              <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
-                <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
-                  <%= object.render_select_all_checkbox %>
-                <% end %>
-              <% end %>
-              <% if object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all" %>
-                <% if loading %>
-                  <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
-                <% else %>
-                  <button
-                    class="gray-icon toggle-all-icon"
-                    onclick="expandAllRows(this); event.preventDefault();">
-                    <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
-                  </button>
-                <% end %>
+            <% if cell_index.zero? && (object.enable_toggle_expansion == "header" || object.enable_toggle_expansion == "all") && row_index === header_rows.size - 1 %>
+              <% if loading %>
+                <div class="<%= object.loading ? 'loading-toggle-icon' : '' %>"></div>
+              <% else %>
+                <button
+                  class="gray-icon toggle-all-icon"
+                  onclick="expandAllRows(this); event.preventDefault();">
+                  <%= pb_rails("icon", props: { icon: "arrows-from-line", cursor: "pointer", fixed_width: true, padding_right: "xs" }) %>
+                </button>
               <% end %>
             <% end %>
             <%= cell[:label] %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -13,20 +13,17 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "scroll"
-      prop :selectable_rows, type: Playbook::Props::Boolean,
-                             default: false
 
       def classname
         additional_classes = []
         additional_classes << "advanced-table-responsive-#{responsive} pinned-left" if responsive == "scroll"
-        additional_classes << "selectable-rows-enabled" if selectable_rows && enable_toggle_expansion == "none"
 
         generate_classname("pb_advanced_table_header", "pb_table_thead", *additional_classes, separator: " ")
       end
 
       def th_classname(is_first_column: false)
         additional_classes = []
-        additional_classes << "pinned-left" if is_first_column && responsive == "scroll" && !selectable_rows
+        additional_classes << "pinned-left" if is_first_column && responsive == "scroll"
 
         generate_classname("table-header-cells", *additional_classes, separator: " ")
       end
@@ -41,40 +38,6 @@ module Playbook
         rows
       end
 
-      # Selectable Rows No Subrows - checkboxes in their own first cell
-      def render_select_all_header
-        if selectable_rows
-          additional_classes = []
-          additional_classes << "table-header-cells-custom"
-          additional_classes << "checkbox-cell-header"
-          additional_classes << "pinned-left" if responsive == "scroll"
-          pb_rails("table/table_header", props: {
-                     classname: additional_classes.join(" "),
-                   }) do
-            pb_rails("checkbox", props: {
-                       id: "select-all-rows",
-                       name: "select-all-rows",
-                       data: {
-                         action: "click->pb-advanced-table#toggleAllRowSelection",
-                       },
-                     })
-          end
-        end
-      end
-
-      # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
-      def render_select_all_checkbox
-        if selectable_rows
-          pb_rails("checkbox", props: {
-                     id: "select-all-rows",
-                     name: "select-all-rows",
-                     data: {
-                       action: "click->pb-advanced-table#toggleAllRowSelection",
-                     },
-                   })
-        end
-      end
-
     private
 
       def compute_max_depth(columns)

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -1,60 +1,48 @@
 <%= pb_content_tag(:tr) do %>
-    <% has_separate_checkbox = object.selectable_rows && object.enable_toggle_expansion == "none" %>
-    <% if has_separate_checkbox %>
-        <%= object.render_checkbox_cell %>
-    <% end %>
-    <% object.column_definitions.each_with_index do |column, index| %>
-        <% next unless column[:accessor].present? %>
-        <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
-            <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
-                <% if collapsible_trail && index.zero? %>
-                    <% (1..depth).each do |i| %>
-                        <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
-                        <% left_offset = i * 1.0 + additional_offset %>
-                        <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
+        <% object.column_definitions.each_with_index do |column, index| %>
+            <% next unless column[:accessor].present? %>
+            <%= pb_rails("table/table_cell", props: { classname:object.td_classname(column, index)}) do %>
+                <%= pb_rails("flex", props:{ align: "center", justify: index.zero? ? "start" : "end", classname: object.loading ? "loading-cell" : "" }) do %>
+                    <% if collapsible_trail && index.zero? %>
+                        <% (1..depth).each do |i| %>
+                            <% additional_offset = i > 1 ? (i - 1) * 0.25 : 0 %>
+                            <% left_offset = i * 1.0 + additional_offset %>
+                            <div class="collapsible-trail" style="left: <%= left_offset %>em"></div>
+                        <% end %>
                     <% end %>
-                <% end %>
 
-                <div style="padding-left: <%= depth * 1.25 %>em">
-                    <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
-                        <% if index.zero? %>
-                            <% has_integrated_checkbox = object.selectable_rows && object.enable_toggle_expansion != "none" %>
-                            <% if has_integrated_checkbox %>
-                                <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>
-                                    <%= object.render_row_checkbox %>
-                                <% end %>
+                    <div style="padding-left: <%= depth * 1.25 %>em">
+                        <%= pb_rails("flex", props:{align: "center", column_gap: "xs"}) do %>
+                            <% if index.zero? && object.row[:children].present? %>
+                              <button
+                                id="<%= "#{object.id}_#{object.row.object_id}" %>"
+                                class="gray-icon expand-toggle-icon"
+                                data-advanced-table="true">
+                                <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
+                                <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                              </button>
                             <% end %>
-                            <% if object.row[:children].present? %>
-                                <button
-                                    id="<%= "#{object.id}_#{object.row.object_id}" %>"
-                                    class="gray-icon expand-toggle-icon"
-                                    data-advanced-table="true">
-                                    <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
-                                </button>
-                            <% end %>
-                        <% end %>
-                        <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && (object.row[:children].present? || has_integrated_checkbox) ? "none" : "xs"}) do %>       
-                            <% if column[:custom_renderer].present? %>
-                                <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
-                            <% elsif index.zero? %>
-                                <% if object.depth.zero? %>
-                                    <%= object.row[column[:accessor].to_sym] %>
-                                <% else %>
-                                    <% object.depth_accessors.each_with_index do |item, accessor_index| %>
-                                        <% if object.depth - 1 == accessor_index %>
-                                            <% key = item.to_sym %>
-                                            <%= object.row[key] %>
+                            <%= pb_rails("flex/flex_item", props:{padding_left: index.zero? && object.row[:children].present? ? "none" : "xs"}) do %>
+                                <% if column[:custom_renderer].present? %>
+                                    <%= raw(column[:custom_renderer].call(object.row, custom_renderer_value(column, index))) %>
+                                <% elsif index.zero? %>
+                                    <% if object.depth.zero? %>
+                                        <%= object.row[column[:accessor].to_sym] %>
+                                    <% else %>
+                                        <% object.depth_accessors.each_with_index do |item, accessor_index| %>
+                                            <% if object.depth - 1 == accessor_index %>
+                                                <% key = item.to_sym %>
+                                                <%= object.row[key] %>
+                                            <% end %>
                                         <% end %>
                                     <% end %>
+                                <% else %>
+                                    <%= object.row[column[:accessor].to_sym] %>
                                 <% end %>
-                            <% else %>
-                                <%= object.row[column[:accessor].to_sym] %>
                             <% end %>
                         <% end %>
-                    <% end %>
-                </div>
+                    </div>
+                <% end %>
             <% end %>
         <% end %>
-    <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/table_row.rb

@@ -20,13 +20,6 @@ module Playbook
                         default: "scroll"
       prop :is_pinned_left, type: Playbook::Props::Boolean,
                             default: false
-      prop :selectable_rows, type: Playbook::Props::Boolean,
-                             default: false
-      prop :row_id, type: Playbook::Props::String,
-                    default: ""
-      prop :enable_toggle_expansion, type: Playbook::Props::Enum,
-                                     values: %w[all header none],
-                                     default: "header"
 
       def data
         Hash(prop(:data)).merge(table_data_attributes)
@@ -49,38 +42,6 @@ module Playbook
         end.compact
       end
 
-      # Selectable Rows No Subrows - checkboxes in their own first cell
-      def render_checkbox_cell
-        if selectable_rows
-          pb_rails("table/table_cell", props: {
-                     classname: "checkbox-cell",
-                   }) do
-            pb_rails("checkbox", props: {
-                       id: "select-row-#{row_id || row.object_id}",
-                       name: "select-row-#{row_id || row.object_id}",
-                       data: {
-                         row_id: row_id || row.object_id.to_s,
-                         action: "click->pb-advanced-table#toggleRowSelection",
-                       },
-                     })
-          end
-        end
-      end
-
-      # Selectable Rows w/ Subrows - checkboxes part of toggleable first cell
-      def render_row_checkbox
-        if selectable_rows
-          pb_rails("checkbox", props: {
-                     id: "select-row-#{row_id || row.object_id}",
-                     name: "select-row-#{row_id || row.object_id}",
-                     data: {
-                       row_id: row_id || row.object_id.to_s,
-                       action: "click->pb-advanced-table#toggleRowSelection",
-                     },
-                   })
-        end
-      end
-
     private
 
       def custom_renderer_value(column, index)

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Avatar from '../../pb_avatar/_avatar'
+import { Avatar } from 'playbook-ui'
 
 const AvatarBadgeComponentOverlay = (props) => {
     return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Avatar from '../../pb_avatar/_avatar'
+import { Avatar } from 'playbook-ui'
 
 const AvatarCircleIconComponentOverlay = (props) => {
     return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Avatar from '../../pb_avatar/_avatar'
+import { Avatar } from 'playbook-ui'
 
 const AvatarDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Avatar from '../../pb_avatar/_avatar'
+import { Avatar } from 'playbook-ui'
 
 const AvatarDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Avatar from '../../pb_avatar/_avatar'
+import { Avatar } from 'playbook-ui'
 
 const AvatarNoImage = (props) => {
   return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Avatar from '../../pb_avatar/_avatar'
+import { Avatar } from 'playbook-ui'
 
 const AvatarStatus = (props) => {
   return (

data/app/pb_kits/playbook/pb_background/docs/_background_category.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import Background from '../../pb_background/_background'
-import Flex from "../../pb_flex/_flex"
+import { Background } from 'playbook-ui'
+import { Flex } from 'playbook-ui'
 
 const BackgroundCategory = (props) => (
   <Flex

data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Background from '../../pb_background/_background'
+import { Background } from 'playbook-ui'
 
 const BackgroundGradient = (props) => (
   <Background

data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx

@@ -1,10 +1,6 @@
 import React, { useState } from 'react'
-import Background from "../../pb_background/_background"
-import Card from "../../pb_card/_card"
-import Flex from "../../pb_flex/_flex"
-import FlexItem from "../../pb_flex/_flex_item"
-import Select from "../../pb_select/_select"
-import Title from "../../pb_title/_title"
+import { Background } from 'playbook-ui'
+import { Card, Flex, FlexItem, Select, Title } from 'playbook-ui'
 
 const BackgroundImage = (props) => {
   const [transition, setTransition] = useState('')

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Background from '../../pb_background/_background'
+import { Background } from 'playbook-ui'
 
 const BackgroundLight = (props) => (
   <Background

data/app/pb_kits/playbook/pb_background/docs/_background_size.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment as F } from 'react'
-import Background from '../../pb_background/_background'
+import { Background } from 'playbook-ui'
 
 const BackgroundSize = (props) => (
   <F>

data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import Background from '../../pb_background/_background'
-import Flex from "../../pb_flex/_flex"
+import { Background } from 'playbook-ui'
+import { Flex } from 'playbook-ui'
 
 const BackgroundStatus = (props) => (
 <Flex

data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import Background from '../../pb_background/_background'
-import Flex from "../../pb_flex/_flex"
+import { Background } from 'playbook-ui'
+import { Flex } from 'playbook-ui'
 
 const BackgroundStatusSubtle = (props) => (
 <Flex

data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Background from '../../pb_background/_background'
+import { Background } from 'playbook-ui'
 
 const BackgroundWhite = (props) => (
   <div>

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -7,7 +7,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { merge } from '../utilities/object'
+import { merge } from 'lodash'
 
 import classnames from "classnames";
 

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx

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