RubyGems - playbook_ui - Versions diffs - 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795 → 14.15.0.pre.rc.0 - Mend

playbook_ui 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795 → 14.15.0.pre.rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (562) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -36,5 +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_selectable_rows_header: Selectable Rows (No Actions Bar)

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

@@ -20,5 +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 AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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',

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx CHANGED Viewed

@@ -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',

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React from 'react'
-import BarGraph from "../../pb_bar_graph/_bar_graph"
-import Title from "../../pb_title/_title"
+import { BarGraph, Title } from 'playbook-ui'
 const chartData = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_body/docs/_body_articles.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Body from "../../pb_body/_body"
+import { Body } from 'playbook-ui'
 const BodyBlock = (props) => {
     return (

data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Body from "../../pb_body/_body"
+import { Body } from 'playbook-ui'
 const BodyBlock = (props) => {
   return (

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Body from "../../pb_body/_body"
+import { Body } from 'playbook-ui'
 const BodyLight = (props) => {
   return (

data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Body from "../../pb_body/_body"
+import { Body } from 'playbook-ui'
 const BodyStyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx CHANGED Viewed

@@ -1,7 +1,6 @@
 import React from 'react'
 import BreadCrumbs from '../_bread_crumbs'
-import Icon from "../../pb_icon/_icon"
-import Title from "../../pb_title/_title"
+import { Icon, Title } from 'playbook-ui'
 import BreadCrumbItem from '../_bread_crumb_item'
 const Link = (props) => <BreadCrumbItem {...props} />

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Button from "../../pb_button/_button"
+import { Button } from 'playbook-ui'
 const ButtonAccessibility = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React from "react";
-import Button from '../../pb_button/_button'
-import Pill from '../../pb_pill/_pill'
+import { Button, Pill } from "playbook-ui";
 const ButtonBlockContent = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react"
-import Button from "../../pb_button/_button"
+import { Button } from "playbook-ui"
 const ButtonDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Button from "../../pb_button/_button"
+import { Button } from 'playbook-ui'
 const ButtonForm = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Button from "../../pb_button/_button"
+import { Button } from 'playbook-ui'
 const ButtonFullWidth = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from "react"
-import Button from "../../pb_button/_button"
+import { Button } from "playbook-ui"
 const ButtonHover = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Button from "../../pb_button/_button"
+import { Button } from 'playbook-ui'
 const ButtonIconOptions = (props) => (
     <div>

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Button from "../../pb_button/_button"
+import { Button } from 'playbook-ui'
 const ButtonLink = (props) => (
   <>

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Button from "../../pb_button/_button"
+import { Button } from 'playbook-ui'
 const ButtonLoading = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, {useState} from "react"
-import Button from "../../pb_button/_button"
+import { Button } from "playbook-ui"
 const ButtonReaction = (props) => {

data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Button from "../../pb_button/_button"
+import { Button } from 'playbook-ui'
 const ButtonSize = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import ButtonToolbar from '../../pb_button_toolbar/_button_toolbar'
+import { Button, ButtonToolbar } from 'playbook-ui'
 const ButtonToolbarDefault = (props) => (
   <div className="pb--doc-demo-row">

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React from 'react'
-import { default as Button } from "../../pb_button/_button"
-import { default as ButtonToolbar } from "../../pb_button_toolbar/_button_toolbar"
+import { Button, ButtonToolbar } from 'playbook-ui'
 const ButtonToolbarSecondary = (props) => (
   <div className="pb--doc-demo-row">

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Caption from "../../pb_caption/_caption"
+import { Caption } from 'playbook-ui'
 const CaptionBlock = (props) => {
   return (

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Caption from "../../pb_caption/_caption"
+import { Caption } from 'playbook-ui'
 const CaptionColors = (props) => {
   return (

data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Caption from "../../pb_caption/_caption"
+import { Caption } from 'playbook-ui'
 const CaptionLight = (props) => {
   return (

data/app/pb_kits/playbook/pb_card/_card.tsx CHANGED Viewed

@@ -1,8 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
-import { get } from '../utilities/object'
+import { get } from 'lodash'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react'
 import Title from '../../pb_title/_title'
-import Body from "../../pb_body/_body"
+import { Body } from 'playbook-ui'
 import Card from '../_card'
 const CardBackground = (props) => {

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Checkbox from "../../pb_checkbox/_checkbox"
+import { Checkbox } from 'playbook-ui'
 const CheckboxError = (props) => {
   return (

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Checkbox from '../../pb_checkbox/_checkbox'
-import Table from '../../pb_table/_table'
+import { Checkbox, Table } from 'playbook-ui'
 const CheckboxIndeterminate = (props) => {
   const [checkboxes, setCheckboxes] = useState([

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx CHANGED Viewed

@@ -1,9 +1,6 @@
 import React, { useState } from "react"
 import { useForm } from "react-hook-form"
-import Button from '../../pb_button/_button'
-import Checkbox from '../../pb_checkbox/_checkbox'
-import Flex from '../../pb_flex/_flex'
-import Body from '../../pb_body/_body'
+import { Button, Checkbox, Flex, Body } from "playbook-ui"
 const CheckboxReactHook = () => {
   const { register, handleSubmit } = useForm({

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { merge } from '../utilities/object'
+import { merge } from 'lodash'
 type CircleChartProps = {
   align?: "left" | "right" | "center";

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React from 'react'
 import CircleChart from '../_circle_chart'
-import Title from '../../pb_title/_title'
+import {Title} from 'playbook-ui'
 const data = [
   {

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button"
+import { CircleIconButton } from 'playbook-ui'
 const CircleIconButtonClick = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 const CollapsibleColor = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx CHANGED Viewed

@@ -1,12 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Collapsible from '../../pb_collapsible/_collapsible'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
-import Flex from '../../pb_flex/_flex'
-import Title from '../../pb_title/_title'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
 const CollapsibleCustomMain = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx CHANGED Viewed

@@ -1,12 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Collapsible from '../../pb_collapsible/_collapsible'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
-import Flex from '../../pb_flex/_flex'
-import Title from '../../pb_title/_title'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
 const CollapsibleCustomMainWithIcon = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 const CollapsibleDefault = (props) => (
   <Collapsible >

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 const CollapsibleIcons = (props) => {

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_no_icon.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 const CollapsibleNoIcon = (props) => (
   <Collapsible

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 const CollapsibleSize = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx CHANGED Viewed

@@ -1,9 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import Collapsible from '../../pb_collapsible/_collapsible'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
-import Button from '../../pb_button/_button'
+import { Collapsible, useCollapsible, Button } from 'playbook-ui'
 const CollapsibleState = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Contact from "../../pb_contact/_contact"
+import { Contact } from 'playbook-ui'
 const ContactDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Contact from "../../pb_contact/_contact"
+import { Contact } from 'playbook-ui'
 const ContactDefault = (props) => {
   return (

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

@@ -1,7 +1,5 @@
 import React from 'react'
-import CopyButton from '../../pb_copy_button/_copy_button'
-import Textarea from '../../pb_textarea/_textarea'
+import { CopyButton, Textarea } from 'playbook-ui'
 const CopyButtonDefault = (props) => (
   <div>

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

@@ -1,9 +1,5 @@
 import React, { useState } from 'react'
-import CopyButton from '../../pb_copy_button/_copy_button'
-import Body from '../../pb_body/_body'
-import TextInput from '../../pb_text_input/_text_input'
-import Textarea from '../../pb_textarea/_textarea'
+import { CopyButton, Body, TextInput, Textarea } from 'playbook-ui'
 const CopyButtonFrom = (props) => {
   const [text, setText] = useState("Copy this text input text")

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import Currency from "../../pb_currency/_currency"
+import { Currency } from 'playbook-ui'
 const CurrencyNullDisplay = (props) => {
   return (