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

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleMuted = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleValue = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleVariants = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import { ProgressSimple } from 'playbook-ui'
 
 const ProgressSimpleValue = () => {
   return (

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import Radio from '../../pb_radio/_radio'
+import { Radio } from 'playbook-ui'
 
 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 '../../pb_rich_text_editor/_rich_text_editor'
+import { RichTextEditor } from 'playbook-ui'
 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,7 +1,5 @@
 import React, { useState } from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Button from '../../pb_button/_button'
-import Card from '../../pb_card/_card'
+import { Button, Card, RichTextEditor } from 'playbook-ui'
 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 '../../pb_rich_text_editor/_rich_text_editor'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorAttributes = (props) => (
   <div>

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("rich_text_editor", props: {input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>
+<%= pb_rails("rich_text_editor", props: {id: "default", value: "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_default.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { RichTextEditor } from 'playbook-ui'
 
 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 '../../pb_rich_text_editor/_rich_text_editor'
+import { RichTextEditor } from 'playbook-ui'
 
 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 '../../pb_rich_text_editor/_rich_text_editor'
+import { RichTextEditor } from 'playbook-ui'
 
 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 '../../pb_rich_text_editor/_rich_text_editor'
+import { RichTextEditor } from 'playbook-ui'
 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,7 +1,9 @@
 import React, { useState } from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Button from '../../pb_button/_button'
-import Card from '../../pb_card/_card'
+import {
+  Button,
+  Card,
+  RichTextEditor,
+} from 'playbook-ui'
 
 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 '../../pb_rich_text_editor/_rich_text_editor'
+import { RichTextEditor } from 'playbook-ui'
 
 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 '../../pb_rich_text_editor/_rich_text_editor'
+import { RichTextEditor } from 'playbook-ui'
 
 const RichTextEditorSticky = (props) => (
   <div>

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

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Select from '../../pb_select/_select'
+import { RichTextEditor, Select } from 'playbook-ui'
 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 '../../pb_rich_text_editor/_rich_text_editor'
+import { RichTextEditor } from 'playbook-ui'
 
 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 '../../pb_rich_text_editor/_rich_text_editor'
+import { RichTextEditor } from "playbook-ui";
 
 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,7 +1,5 @@
 import React from 'react'
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
+import { SectionSeparator, Card, Caption } from 'playbook-ui'
 
 const children = (
     <Card

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

@@ -1,8 +1,5 @@
 import React from "react"
-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'
+import { SectionSeparator, Flex, Detail, Icon } from "playbook-ui"
 
 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 '../../pb_section_separator/_section_separator'
+import { SectionSeparator } from 'playbook-ui'
 
 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 '../../pb_section_separator/_section_separator'
+import { SectionSeparator } from 'playbook-ui'
 
 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 '../../pb_section_separator/_section_separator'
+import { SectionSeparator } from 'playbook-ui'
 
 const SectionSeparatorText = (props) => {
   return (

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

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

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

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

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

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

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

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

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

@@ -1,8 +1,5 @@
 import React, { useState } from 'react'
-
-import Body from '../../pb_body/_body'
-import SelectableCard from '../../pb_selectable_card/_selectable_card'
-import Title from '../../pb_title/_title'
+import { Body, SelectableCard, Title } from 'playbook-ui'
 
 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 '../../pb_selectable_list/_selectable_list'
+import { SelectableList } from 'playbook-ui'
 
 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 '../../pb_selectable_list/_selectable_list'
+import { SelectableList } from 'playbook-ui'
 
 const SelectableListDefault = (props) => {
   return (

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

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

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

@@ -1,12 +1,5 @@
 import React, { useState } from 'react';
-
-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'
+import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
 
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

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

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

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

@@ -1,9 +1,5 @@
 import React, { useState } from 'react';
-
-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'
+import { Button, Flex, SkeletonLoading, User } from "playbook-ui";
 
 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 '../../pb_stat_change/_stat_change'
+import { StatChange } from 'playbook-ui'
 
 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 '../../pb_stat_change/_stat_change'
+import { StatChange } from 'playbook-ui'
 
 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 '../../pb_stat_change/_stat_change'
+import { StatChange } from 'playbook-ui'
 
 const StatChangeUnitTwo = (props) => {
   return (

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

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

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

@@ -1,8 +1,5 @@
 import React from 'react'
-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 { Table, Icon, Body, Card } from 'playbook-ui'
 
 const TableWithCollapsible = (props) => {
 

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

@@ -1,8 +1,5 @@
 import React from 'react'
-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 { Table, Card, Icon, Body } from 'playbook-ui'
 
 const TableWithCollapsibleWithCustomClick = (props) => {
 

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

@@ -1,11 +1,5 @@
 import React from 'react'
-
-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'
+import { Table, Icon, Card, Body, Image, Flex } from 'playbook-ui'
 
 const TableWithCollapsibleWithCustomContent = (props) => {
 

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

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

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

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

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

@@ -1,9 +1,5 @@
 import React, { useState } from 'react'
-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'
+import { Table, Checkbox, Image, Flex, Button } from 'playbook-ui'
 
 const TableWithSelectableRows = (props) => {
     const [checkboxes, setCheckboxes] = useState([

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

@@ -75,5 +75,3 @@ examples:
     - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table
     - table_with_clickable_rows: Table with Clickable Rows
     - table_with_selectable_rows: Table with Selectable Rows
-    - table_with_header_style_borderless: Header Style Borderless
-    - table_with_header_style_floating: Header Style Floating

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

@@ -35,5 +35,3 @@ export { default as TableWithCollapsibleWithNestedRows } from './_table_with_col
 export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'
 export { default as TableWithSelectableRows } from './_table_with_selectable_rows.jsx'
 export { default as TableWithClickableRows } from './_table_with_clickable_rows.jsx'
-export { default as TableWithHeaderStyleBorderless } from './_table_with_header_style_borderless.jsx'
-export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'

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

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

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 '../../pb_time_range_inline/_time_range_inline'
+import { TimeRangeInline } from 'playbook-ui'
 
 const TimeRangeInlineDefault = (props) => (
   <div>

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

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

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

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

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

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import Caption from '../../pb_caption/_caption'
-import Title from '../../pb_title/_title'
-import Toggle from '../../pb_toggle/_toggle'
+import { Caption, Title, Toggle } from 'playbook-ui'
 
 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 '../../pb_toggle/_toggle'
+import { Toggle } from 'playbook-ui'
 
 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 '../../pb_toggle/_toggle'
+import { Toggle } from 'playbook-ui'
 
 const ToggleDisabled= () => {
   return (

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

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

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

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

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

@@ -1,8 +1,5 @@
 import React from 'react'
-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'
+import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
 
 const TooltipDelay = (props) => {
 

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

@@ -0,0 +1,10 @@
+<%= pb_rails("icon_circle", props: { icon: "paper-plane", id: "result-1-sample-email-link" }) %>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_id: "result-1-sample-email-link",
+  tooltip_id: "sample-email-tooltip-result-1",
+  position: "top",
+  dark: true
+}) do %>
+  Send Email
+<% end %>

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

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

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

@@ -1,8 +1,5 @@
 import React from 'react'
-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'
+import { Tooltip, Button, Flex, FlexItem } from 'playbook-ui';
 
 const TooltipInteraction = (props) => {
 

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

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