playbook_ui 14.15.0.pre.alpha.PBNTR900phonenumberinputhidden6620 → 14.15.0.pre.alpha.PBNTR8996733

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Radio } from 'playbook-ui'
+import Radio from '../../pb_radio/_radio'
 
 const RadioError = (props) => {
   return (

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from 'playbook-ui'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { Button, Card, RichTextEditor } from 'playbook-ui'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Button from '../../pb_button/_button'
+import Card from '../../pb_card/_card'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from 'playbook-ui'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 
 const RichTextEditorAttributes = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { RichTextEditor } from 'playbook-ui'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 
 const RichTextEditorDefault = (props) => {
   const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from 'playbook-ui'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 
 const RichTextEditorFocus = (props) => (
   <>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from 'playbook-ui'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 
 const RichTextEditorInline = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from 'playbook-ui'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx

@@ -1,9 +1,7 @@
 import React, { useState } from 'react'
-import {
-  Button,
-  Card,
-  RichTextEditor,
-} from 'playbook-ui'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Button from '../../pb_button/_button'
+import Card from '../../pb_card/_card'
 
 const RichTextEditorPreview = (props) => {
   const [showPreview, setShowPreview] = useState(false)

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from 'playbook-ui'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 
 const RichTextEditorSimple = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from 'playbook-ui'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 
 const RichTextEditorSticky = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { RichTextEditor, Select } from 'playbook-ui'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import Select from '../../pb_select/_select'
 import { changelog, release } from './templates.js'
 
 const RichTextEditorTemplates = (props) => {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { RichTextEditor } from 'playbook-ui'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 
 const RichTextEditorToolbarBottom = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
 
-import { RichTextEditor } from "playbook-ui";
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 
 import Document from "@tiptap/extension-document";
 import Paragraph from "@tiptap/extension-paragraph";

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { SectionSeparator, Card, Caption } from 'playbook-ui'
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 const children = (
     <Card

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -1,5 +1,8 @@
 import React from "react"
-import { SectionSeparator, Flex, Detail, Icon } from "playbook-ui"
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+import Flex from '../../pb_flex/_flex'
+import Detail from '../../pb_detail/_detail'
+import Icon from '../../pb_icon/_icon'
 
 const children = (
   <Flex padding="xs">

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator } from 'playbook-ui'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 const SectionSeparatorDashed = (props) => {
     return (

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator } from 'playbook-ui'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 const SectionSeparatorLine = (props) => {
   return (

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SectionSeparator } from 'playbook-ui'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 const SectionSeparatorText = (props) => {
   return (

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Body, Select } from 'playbook-ui'
+import Body from '../../pb_body/_body'
+import Select from '../../pb_select/_select'
 
 const SelectError = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Body, Select } from 'playbook-ui'
+import Body from '../../pb_body/_body'
+import Select from '../../pb_select/_select'
 
 const SelectInline = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Body, Select } from 'playbook-ui'
+import Body from '../../pb_body/_body'
+import Select from '../../pb_select/_select'
 
 const SelectInlineCompact = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Body, Select } from 'playbook-ui'
+import Body from '../../pb_body/_body'
+import Select from '../../pb_select/_select'
 
 const SelectInlineShowArrow = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from 'react'
-import { Body, SelectableCard, Title } from 'playbook-ui'
+
+import Body from '../../pb_body/_body'
+import SelectableCard from '../../pb_selectable_card/_selectable_card'
+import Title from '../../pb_title/_title'
 
 const SelectableCardError = (props) => {
   const [football, setFootball] = useState(false)

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SelectableList } from 'playbook-ui'
+import SelectableList from '../../pb_selectable_list/_selectable_list'
 
 const SelectableListDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SelectableList } from 'playbook-ui'
+import SelectableList from '../../pb_selectable_list/_selectable_list'
 
 const SelectableListDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Flex, SkeletonLoading } from "playbook-ui"
 
+import Flex from '../../pb_flex/_flex'
+import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
 
 const SkeletonLoadingBorderRadius = (props) => (
   <Flex justify="evenly">

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Card, SkeletonLoading } from "playbook-ui"
 
+import Card from '../../pb_card/_card'
+import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
 
 const SkeletonLoadingColor = (props) => (
   <div>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { SkeletonLoading } from "playbook-ui"
-
+import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
 
 const SkeletonLoadingDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx

@@ -1,5 +1,12 @@
 import React, { useState } from 'react';
-import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
+
+import Button from '../../pb_button/_button'
+import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
+import Card from '../../pb_card/_card'
+import Filter from '../../pb_filter/_filter'
+import Flex from '../../pb_flex/_flex'
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
 
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Card, SkeletonLoading } from "playbook-ui"
 
+import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
+import Card from '../../pb_card/_card'
 
 const SkeletonLoadingHeightWidth = (props) => (
   <div>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { SkeletonLoading } from "playbook-ui"
-
+import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
 
 const SkeletonLoadingLayout = (props) => (
   <div>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_user.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from 'react';
-import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
+
+import Button from '../../pb_button/_button'
+import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
+import Flex from '../../pb_flex/_flex'
+import User from '../../pb_user/_user'
 
 const SkeletonLoadingUser = (props) => {
   const [isLoading, setIsLoading] = useState(true)

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StatChange } from 'playbook-ui'
+import StatChange from '../../pb_stat_change/_stat_change'
 
 const StatChangeDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StatChange } from 'playbook-ui'
+import StatChange from '../../pb_stat_change/_stat_change'
 
 const StatChangeUnit = (props) => {
   return (

data/app/pb_kits/playbook/pb_stat_change/docs/_stat_change_unit_two.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { StatChange } from 'playbook-ui'
+import StatChange from '../../pb_stat_change/_stat_change'
 
 const StatChangeUnitTwo = (props) => {
   return (

data/app/pb_kits/playbook/pb_table/docs/_table_with_clickable_rows.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Table, Icon } from 'playbook-ui'
+import Table from '../../pb_table/_table'
+import Icon from '../../pb_icon/_icon'
 
 const TableWithClickableRows = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Table, Icon, Body, Card } from 'playbook-ui'
+import Table from '../../pb_table/_table'
+import Icon from '../../pb_icon/_icon'
+import Card from '../../pb_card/_card'
+import Body from '../../pb_body/_body'
 
 const TableWithCollapsible = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Table, Card, Icon, Body } from 'playbook-ui'
+import Table from '../../pb_table/_table'
+import Icon from '../../pb_icon/_icon'
+import Card from '../../pb_card/_card'
+import Body from '../../pb_body/_body'
 
 const TableWithCollapsibleWithCustomClick = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_content.jsx

@@ -1,5 +1,11 @@
 import React from 'react'
-import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
+
+import Table from '../../pb_table/_table'
+import Icon from '../../pb_icon/_icon'
+import Card from '../../pb_card/_card'
+import Body from '../../pb_body/_body'
+import Image from '../../pb_image/_image'
+import Flex from '../../pb_flex/_flex'
 
 const TableWithCollapsibleWithCustomContent = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Table, Background, Icon } from 'playbook-ui'
+
+import Table from '../../pb_table/_table'
+import Icon from '../../pb_icon/_icon'
+import Background from '../../pb_background/_background'
 
 const TableWithCollapsibleWithNestedRows = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import {Pill, Background, Table, Icon} from "playbook-ui"
+
+import Pill from '../../pb_pill/_pill'
+import Background from '../../pb_background/_background'
+import Table from '../../pb_table/_table'
+import Icon from '../../pb_icon/_icon'
 
 const TableWithCollapsibleWithNestedTable = (props) => {
 

data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from 'react'
-import { Table, Checkbox, Image, Flex, Button } from 'playbook-ui'
+import Table from '../../pb_table/_table'
+import Image from '../../pb_image/_image'
+import Flex from '../../pb_flex/_flex'
+import Checkbox from '../../pb_checkbox/_checkbox'
+import Button from '../../pb_button/_button'
 
 const TableWithSelectableRows = (props) => {
     const [checkboxes, setCheckboxes] = useState([

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import { Textarea } from 'playbook-ui'
+import Textarea from '../../pb_textarea/_textarea'
 
 const TextareaError = (props) => {
   const [value, setValue] = useState('default value text')

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <% if object.label.present? %>
     <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
   <% end %>

data/app/pb_kits/playbook/pb_time/time.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%
     # convert deprecated prop values
     size = object.size

data/app/pb_kits/playbook/pb_time_range_inline/docs/_time_range_inline_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { TimeRangeInline } from 'playbook-ui'
+import TimeRangeInline from '../../pb_time_range_inline/_time_range_inline'
 
 const TimeRangeInlineDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_unstyled.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Caption, Timestamp, Title } from 'playbook-ui'
+import Caption from '../../pb_caption/_caption'
+import Timestamp from '../../pb_timestamp/_timestamp'
+import Title from '../../pb_title/_title'
 
 const TimestampUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -1,7 +1,2 @@
-<%= content_tag(object.tag,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %><%= content.presence || object.text %><% end %>
+<%= pb_content_tag(object.tag) do %><%= content.presence || object.text %><% end %>
     

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Toggle } from 'playbook-ui'
+import Toggle from '../../pb_toggle/_toggle'
 
 const ToggleCustom = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { Caption, Title, Toggle } from 'playbook-ui'
+import Caption from '../../pb_caption/_caption'
+import Title from '../../pb_title/_title'
+import Toggle from '../../pb_toggle/_toggle'
 
 const ToggleCustomRadio = () => {
   const [choice, setChoice] = useState('walk')

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Toggle } from 'playbook-ui'
+import Toggle from '../../pb_toggle/_toggle'
 
 const ToggleDefault = () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Toggle } from 'playbook-ui'
+import Toggle from '../../pb_toggle/_toggle'
 
 const ToggleDisabled= () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { Caption, Title, Toggle } from 'playbook-ui'
+import Caption from '../../pb_caption/_caption'
+import Title from '../../pb_title/_title'
+import Toggle from '../../pb_toggle/_toggle'
 
 const ToggleName = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_toggle/toggle.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    aria: object.aria,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <label class="pb_toggle_wrapper">
     <%= content.presence || object.input %>
     <div class="pb_toggle_control"></div>

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -54,7 +54,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       margin-bottom: 50px;
     }
 
-    &.visible, 
+    &.visible,
     &.show {
       z-index: $z_9;
       padding: $space_xs $space_sm;
@@ -117,7 +117,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
         color: $charcoal;
         background-color: $white;
       }
-      .arrow {        
+      .arrow {
         border-color: $white transparent transparent transparent;
         opacity: $opacity_10;
       }

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Tooltip, Flex, FlexItem } from 'playbook-ui';
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipDefaultReact = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
+import Button from '../../pb_button/_button'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipDelay = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Tooltip, Button, Flex } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
 
 const TooltipIcon = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Tooltip, Button, Flex, FlexItem } from 'playbook-ui';
+import Button from '../../pb_button/_button'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipInteraction = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Tooltip, Flex, CircleIconButton } from 'playbook-ui'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 
 const TooltipMargin = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from 'react'
-import {  Button, Body, Flex, FlexItem, Tooltip } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Body from '../../pb_body/_body'
+import Tooltip from '../../pb_tooltip/_tooltip'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipShowTooltipReact = (props) => {
   const [showTooltip, setShowTooltip] = useState(true);