playbook_ui 13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3370 → 13.34.0.pre.alpha.PLAY14143357

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 58946c7b39d353c64369e3ddf57672608c5466b37c43d2567707be28d3079459
-  data.tar.gz: 22e68f0e4fa382144312af2e6d87d5b9bc821bea5ccf67f6ef24e671a1686e9b
+  metadata.gz: 9a9269f66e74f7ddc4422caa3aa457d8c3c4dba247230788d2df2c6713541cf9
+  data.tar.gz: edcd99d9d6ebc33090a1c05b99059505ab4a61f8e91726663b8a784b7a70a161
 SHA512:
-  metadata.gz: b4115f135f7df306a625d4cd1428c40f980d6ec7909639a40fe1b50f78d7533b8097a5a3cab6259905cc6ebd8f4779c8ec7fcc72ed7ca954c8e8e322d15bdecf
-  data.tar.gz: 1ad738f28458b63c70d5e3c5362b3021c31432c21e2db9d2c62785f450502eb51a30d866805ab930da9df555a8d3bde1112c03f3f372eaddeddb802c69151478
+  metadata.gz: 3fafaf979bea6e5534dd0c67ebc84396efb60615042a5b4666e6fc8264dc6c94600f28dcdc9c33a3b611ed2526daf14951a7557c154f46e1d928639ac7abc032
+  data.tar.gz: c5b98d61f67d46e9a4ac26091bb8c1a9b3f2e8f664802e9c2d22e5bfbf45c3343d41bbfde24a9f1a04fa74705b9295f70675eba48c2b383d21e830ce9734963e

data/app/pb_kits/playbook/_playbook.scss

@@ -104,20 +104,20 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import './utilities/mixins';
-@import './utilities/spacing';
-@import './utilities/cursor';
-@import './utilities/max_width';
-@import './utilities/positioning';
-@import './utilities/number_spacing';
-@import './utilities/shadow';
-@import './utilities/line_height';
-@import './utilities/display';
-@import './utilities/flexbox';
-@import './utilities/focus';
-@import './utilities/border_radius';
-@import './utilities/hover';
-@import './utilities/text_align';
-@import './utilities/overflow';
-@import './utilities/truncate';
-@import './utilities/vertical_align';
+@import 'utilities/mixins';
+@import 'utilities/spacing';
+@import 'utilities/cursor';
+@import 'utilities/max_width';
+@import 'utilities/positioning';
+@import 'utilities/number_spacing';
+@import 'utilities/shadow';
+@import 'utilities/line_height';
+@import 'utilities/display';
+@import 'utilities/flexbox';
+@import 'utilities/focus';
+@import 'utilities/border_radius';
+@import 'utilities/hover';
+@import 'utilities/text_align';
+@import 'utilities/overflow';
+@import 'utilities/truncate';
+@import 'utilities/vertical_align';

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -21,7 +21,6 @@ type TableHeaderCellProps = {
   handleExpandOrCollapse?: () => void
   header?: Header<GenericObject, unknown>
   headerChildren?: React.ReactNode | React.ReactNode[]
-  isPinnedLeft?: boolean
   loading?: boolean
   sortIcon?: string | string[]
 } & GlobalProps
@@ -32,11 +31,10 @@ export const TableHeaderCell = ({
   handleExpandOrCollapse,
   header,
   headerChildren,
-  isPinnedLeft = false,
   loading,
   sortIcon,
 }: TableHeaderCellProps) => {
-  const { sortControl, responsive } = useContext(AdvancedTableContext)
+  const { sortControl } = useContext(AdvancedTableContext)
 
   const toggleSortButton = (event: React.SyntheticEvent) => {
     if (sortControl) {
@@ -51,8 +49,7 @@ export const TableHeaderCell = ({
 
 const cellClassName = classnames("table-header-cells", 
   `${isChrome() ? "chrome-styles" : ""}`, 
-  `${enableSorting ? "table-header-cells-active" : ""}`,
-  { 'pinned-left': responsive === "scroll" && isPinnedLeft },
+  `${enableSorting ? "table-header-cells-active" : ""}`
 )
 
 const cellId = `${loading ? 

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -20,7 +20,6 @@ type TableBodyProps = {
   className?: string
   collapsibleTrail?: boolean
   dark?: boolean
-  isPinnedLeft?: boolean,
   id?: string
   subRowHeaders?: string[]
 }
@@ -38,22 +37,17 @@ export const TableBody = ({
     columnDefinitions,
     enableToggleExpansion,
     handleExpandOrCollapse,
-    isPinnedLeft = false,
     inlineRowLoading,
     loading,
-    responsive,
     table,
   } = useContext(AdvancedTableContext)
 
   const classes = classnames(
     buildCss("pb_advanced_table_body"),
-    { 'pinned-left': responsive === "scroll" && isPinnedLeft },
     globalProps(props),
     className
   )
 
-  const columnPinning = table.getState().columnPinning;
-
   return (
     <>
       <tbody className={classes} 
@@ -79,37 +73,38 @@ export const TableBody = ({
                     table={table}
                 />
               )}
-            <tr
-                className={`${rowBackground ? "bg-silver" : "bg-white"} ${
-                  row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
-              }`}
-                id={`${row.index}-${row.id}-${row.depth}-row`}
-            >
-              {row.getVisibleCells().map((cell, i) => {
-                const isPinnedLeft = columnPinning.left.includes(cell.column.id)
 
-                return (
+              <tr
+                  className={`${rowBackground ? "bg-silver" : "bg-white"} ${
+                    row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
+                  }`}
+                  id={`${row.index}-${row.id}-${row.depth}-row`}
+              >
+                {row.getVisibleCells().map((cell, i) => (
                   <td
                       align="right"
-                      className={classnames(
-                        `${cell.id}-cell`,
-                        isPinnedLeft && 'pinned-left',
-                        isChrome() ? "chrome-styles" : ""
-                      )}
+                      className={`${cell.id}-cell position_relative ${
+                      isChrome() ? "chrome-styles" : ""
+                      }`}
                       key={`${cell.id}-data`}
                   >
-                    {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
+                    {collapsibleTrail &&
+                      i === 0 &&
+                      row.depth > 0 &&
+                      renderCollapsibleTrail(row.depth)}
                     <span id={`${cell.id}-span`}>
                       {loading ? (
                         <LoadingCell />
                       ) : (
-                        flexRender(cell.column.columnDef.cell, cell.getContext())
+                        flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )
                       )}
                     </span>
                   </td>
-                )
-              })}
-            </tr>
+                ))}
+              </tr>
 
               {/* Display LoadingInline if Row Data is querying and there are no children already */}
               {isDataLoading ? (

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -42,7 +42,6 @@ export const TableHeader = ({
     className
   )
 
-  const columnPinning = table.getState().columnPinning;
 
   return (
     <>
@@ -52,22 +51,18 @@ export const TableHeader = ({
         {/* Get the header groups (only one in this example) */}
         {table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
           <tr key={`${headerGroup.id}-headerGroup`}>
-            {headerGroup.headers.map(header => {
-              const isPinnedLeft = columnPinning.left.includes(header.id)
-              return (
-                <TableHeaderCell
-                    enableSorting={enableSorting}
-                    enableToggleExpansion={enableToggleExpansion}
-                    handleExpandOrCollapse={handleExpandOrCollapse}
-                    header={header}
-                    headerChildren={children}
-                    isPinnedLeft={isPinnedLeft}
-                    key={`${header.id}-header`}
-                    loading={loading}
-                    sortIcon={sortIcon}
-                />
-              )
-            })}
+            {headerGroup.headers.map(header => (
+              <TableHeaderCell
+                  enableSorting={enableSorting}
+                  enableToggleExpansion={enableToggleExpansion}
+                  handleExpandOrCollapse={handleExpandOrCollapse}
+                  header={header}
+                  headerChildren={children}
+                  key={`${header.id}-header`}
+                  loading={loading}
+                  sortIcon={sortIcon}
+              />
+            ))}
           </tr>
         ))}
       </thead>

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -5,8 +5,6 @@
 @import "./scss_partials/loading";
 @import "./scss_partials/pseudo_states";
 @import "./scss_partials/chrome_styles";
-@import "../tokens/screen_sizes";
-@import "../tokens/shadows";
 
 .pb_advanced_table {
   $border-color: 1px solid $border_light !important;
@@ -110,36 +108,6 @@
     height: auto;
   }
 
-  // Responsive Styles
-  @media only screen and (max-width: $screen-xl-min) {  
-    &[class*="table-responsive-scroll"] {
-      display: block;
-      overflow-x: scroll;
-      width: 100%;
-      .table-header-cells:first-child,
-      td:first-child,
-      .pb_table_td:first-child,
-      [class*="pinned-left"] {
-          background-color: $white;
-          box-shadow: $shadow_deep !important;
-          position: sticky !important;
-          left: 0;
-          z-index: 2;
-      }
-      .bg-silver td:first-child {
-        background-color: lighten($silver, $opacity_7);
-      }
-      .bg-white td:first-child {
-          background-color: $white;
-      }
-    }
-  }
-  @media only screen and (min-width: $screen-xl-min) {
-    &[class*="table-responsive-scroll"] {
-      overflow-x: visible;
-    }
-  }
-
   &.dark {
     .bg-white {
       background: $bg_dark_card;
@@ -183,28 +151,5 @@
         ) !important;
       }
     }
-    // Dark Mode Responsive Styles
-    @media only screen and (max-width: $screen-xl-min) {
-      &[class*="table-responsive-scroll"] {
-        display: block;
-        overflow-x: scroll;
-        width: 100%;
-        .table-header-cells:first-child,
-        td:first-child,
-        .pb_table_td:first-child,
-        [class*="pinned-left"] {
-          background: $bg_dark_card;
-          border-right: $border_dark;
-          box-shadow: $shadow_deep !important;
-          position: sticky !important;
-        }
-        .bg-silver td:first-child {
-          background-color: $bg_dark;
-        }
-        .bg-white td:first-child {
-          background-color: $bg_dark_card;
-        }
-      }
-    }
   }
 }

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -42,7 +42,6 @@ type AdvancedTableProps = {
   loading?: boolean | string
   onRowToggleClick?: (arg: Row<GenericObject>) => void
   onToggleExpansionClick?: (arg: Row<GenericObject>) => void
-  responsive?: "scroll" | "none",
   sortControl?: GenericObject
   tableData: GenericObject[]
   tableOptions?: GenericObject
@@ -67,7 +66,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     loading,
     onRowToggleClick,
     onToggleExpansionClick,
-    responsive = "scroll",
     sortControl,
     tableData,
     tableOptions,
@@ -134,7 +132,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   //Create column array in format needed by Tanstack
   const columns =
     columnDefinitions &&
-      columnDefinitions.map((column) => {
+    columnDefinitions.map((column) => {
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
@@ -211,7 +209,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     buildCss("pb_advanced_table"),
-    `table-responsive-${responsive}`,
     globalProps(props),
     className
   )
@@ -232,7 +229,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             handleExpandOrCollapse,
             inlineRowLoading,
             loading,
-            responsive,
             setExpanded,
             sortControl,
             table,

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from "react"
 import { render, screen, waitFor } from "../utilities/test-utils"
 
-import { AdvancedTable } from "../"
+import { AdvancedTable } from "playbook-ui"
 
 const MOCK_DATA = [
   {
@@ -432,34 +432,4 @@ test("inlineRowLoading prop renders inline loading if true", () => {
   rowButton.click()
   const inlineLoading = kit.querySelector(".fa-spinner")
   expect(inlineLoading).toBeInTheDocument()
-})
-
-test("responsive prop functions as expected", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        responsive="scroll"
-        tableData={MOCK_DATA}
-        tableProps={tableProps}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table table-responsive-scroll")
-})
-
-test("responsive none prop functions as expected", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        responsive="none"
-        tableData={MOCK_DATA}
-        tableProps={tableProps}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
 })

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

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

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

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

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 "../../"
+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 "../.."
+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 "../../"
-import { Button } from "../../"
+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_sort.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "../.."
+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 "../.."
+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 "../.."
+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 "../../"
+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 "../../"
+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/example.yml

@@ -14,4 +14,3 @@ examples:
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
-  - advanced_table_responsive: Responsive Tables

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

@@ -7,5 +7,4 @@ export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_
 export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
 export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
 export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
-export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
-export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
+export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { Avatar } from '../..'
+import { Avatar } from 'playbook-ui'
 
 const AvatarBadgeComponentOverlay = () => {
     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 '../..'
+import { Avatar } from 'playbook-ui'
 
 const AvatarCircleIconComponentOverlay = () => {
     return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Avatar } from '../../'
+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 '../../'
+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 '../../'
+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 '../../'
+import { Avatar } from 'playbook-ui'
 
 const AvatarStatus = (props) => {
   return (

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss

@@ -35,8 +35,8 @@
     &[class*=_#{$name}] {
       
       $avatar_size: map-get($avatar-sizes, $name);
-      $icon_size: $avatar_size / 2;
-      $border_size: $icon_size / 10;
+      $icon_size: calc($avatar_size / 2);
+      $border_size: calc($icon_size / 10);
 
       position: relative;
       width: $avatar_size * 1.25;
@@ -59,7 +59,7 @@
         left: $icon_size * 1.5;
       }
       &[class*=_left] [class^=pb_avatar_kit] {
-        padding-left: $icon_size / 2;
+        padding-left: calc($icon_size / 2);
       }
     }
   }

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -3,10 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
-type BackgroundProps = {
-  alt?: string,
-  aria?: {[key: string]: string},
-  backgroundColor?: ResponsiveProp<string> | 'gradient' |
+type BackgroundColors = 'gradient' |
   'dark' |'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'shadow' |
   'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' |
   'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' |
@@ -14,10 +11,19 @@ type BackgroundProps = {
   'text_lt_default' | 'text_lt_light' | 'text_lt_lighter' | 'text_dk_default' | 'text_dk_light' | 'text_dk_lighter' |
   'card_light' | 'card_dark' | 'data_1' | 'data_2' | 'data_3' | 'data_4' | 'data_5' | 'data_6' | 'data_7' | 'data_8' |
   'border_light' | 'border_dark' | 'success_secondary' | 'error_secondary' | 'info_secondary' | 'warning_secondary' |
-  'neutral_secondary' | 'primary_secondary' | 'success_subtle' | 'warning_subtle' | 'error_subtle' | 'info_subtle' | 'neutral_subtle',
-  backgroundSize?: ResponsiveProp<string> | 'auto' | 'cover' | 'contain',
+  'neutral_secondary' | 'primary_secondary' | 'success_subtle' | 'warning_subtle' | 'error_subtle' | 'info_subtle' | 'neutral_subtle'
+
+type BackgroundSizes = 'auto' | 'cover' | 'contain'
+
+type BackgroundRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit'
+
+type BackgroundProps = {
+  alt?: string,
+  aria?: {[key: string]: string},
+  backgroundColor?: ResponsiveProp<BackgroundColors> | BackgroundColors,
+  backgroundSize?: ResponsiveProp<BackgroundSizes> | BackgroundSizes,
   backgroundPosition?: ResponsiveProp<string> | string,
-  backgroundRepeat?: ResponsiveProp<string> | 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit',
+  backgroundRepeat?: ResponsiveProp<BackgroundRepeat> | BackgroundRepeat,
   imageUrl?: ResponsiveProp<string> | string,
   children?: React.ReactChild[] | React.ReactNode,
   className?: string,

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Background } from '../..'
-import { Flex } from '../..'
+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 '../..'
+import { Background } from 'playbook-ui'
 
 const BackgroundGradient = (props) => (
   <Background

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { Background } from '../..'
-import { Card, Flex, FlexItem, Select, Title } from '../..'
+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 '../..'
+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 '../..'
+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 '../..'
-import { Flex } from '../..'
+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 '../..'
-import { Flex } from '../..'
+import { Background } from 'playbook-ui'
+import { Flex } from 'playbook-ui'
 
 const BackgroundStatusSubtle = (props) => (
 <Flex