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

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb

@@ -1,3 +1,3 @@
 <%= pb_rails("phone_number_input", props: {
-    id: "hello",
+    id: "hello"
 }) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import { PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInputDefault = (props) => (
     <>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from "react";
-
-import Body from '../../pb_body/_body'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import { PhoneNumberInput, Body } from "playbook-ui";
 
 const PhoneNumberInputFormat = (props) => {
     const [phoneNumber, setPhoneNumber] = useState("");

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import { PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInitialCountry = (props) => (
     <>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import { PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInputOnlyCountries = (props) => (
   <>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import { PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInputPreferredCountries = (props) => (
   <>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from "react";
-
-import Button from '../../pb_button/_button'
-import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import { Button, FixedConfirmationToast, PhoneNumberInput } from "playbook-ui";
 
 const PhoneNumberInputValidation = (props) => {
     const [formErrors, setFormErrors] = useState("");

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

@@ -16,6 +16,4 @@ examples:
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
   - phone_number_input_validation: Form Validation
-  - phone_number_input_format: Format as You Type
-  - phone_number_input_hidden_inputs: Hidden Inputs
-  
+  - phone_number_input_format: Format as You Type

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -23,8 +23,6 @@ module Playbook
                    default: ""
       prop :format_as_you_type, type: Playbook::Props::Boolean,
                                 default: false
-      prop :hidden_inputs, type: Playbook::Props::Boolean,
-                           default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -37,7 +35,6 @@ module Playbook
           disabled: disabled,
           error: error,
           formatAsYouType: format_as_you_type,
-          hiddenInputs: hidden_inputs,
           initialCountry: initial_country,
           label: label,
           name: name,

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -84,7 +84,7 @@ const Popover = (props: PbPopoverProps) => {
   } = props;
 
   const items = globalProps(props).split(' ')
-  const filteredItems = items.filter(item => !item.includes('min-width') && !item.includes('width'))
+  const filteredItems = items.filter(item => !item.includes('min_width'))
   const filteredGlobalProps = filteredItems.join(' ')
   const popoverSpacing =
     filteredGlobalProps.includes("dark") || !filteredGlobalProps

data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx

@@ -1,10 +1,11 @@
 import React, { useState } from 'react'
-
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
-import Flex from '../../pb_flex/_flex'
-import PbReactPopover from '../../pb_popover/_popover'
+import {
+  Body,
+  Button,
+  CircleIconButton,
+  Flex,
+  PbReactPopover,
+} from 'playbook-ui'
 
 const PopoverActionableContent = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-
-import Button from '../../pb_button/_button'
-import Flex from '../../pb_flex/_flex'
-import PbReactPopover from '../../pb_popover/_popover'
+import {
+  Button,
+  Flex,
+  PbReactPopover,
+} from 'playbook-ui'
 
 const PopoverClose = (props) => {
   const [showInsidePopover, setInsideShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react'
-
-import Body from '../../pb_body/_body'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
-import Flex from '../../pb_flex/_flex'
-import PbReactPopover from '../../pb_popover/_popover'
+import {
+  Body,
+  CircleIconButton,
+  Flex,
+  PbReactPopover,
+} from 'playbook-ui'
 
 const PopoverDefault = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react'
-
-import Button from '../../pb_button/_button'
-import Flex from '../../pb_flex/_flex'
-import PbReactPopover from '../../pb_popover/_popover'
-import Icon from '../../pb_icon/_icon'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import {
+  Button,
+  Icon,
+  List,
+  ListItem,
+  PbReactPopover,
+  Flex,
+} from 'playbook-ui'
 
 const PopoverWithButton = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx

@@ -1,9 +1,10 @@
 import React, { useState } from 'react'
-
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import PbReactPopover from '../../pb_popover/_popover'
-import Title from '../../pb_title/_title'
+import {
+  Body,
+  Button,
+  PbReactPopover,
+  Title,
+} from 'playbook-ui'
 
 const PopoverScrollHeight = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import PbReactPopover from '../../pb_popover/_popover'
+import {
+  Body,
+  Button,
+  PbReactPopover,
+} from 'playbook-ui'
 
 const PopoverZIndex = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/popover.test.js

@@ -181,7 +181,7 @@ const PopoverTestClicktoClose3 = () => {
     const btn = screen.getByText(/click me/i)
     fireEvent.click(btn);
     const kit = screen.getByText("Click Anywhere");
-    expect(kit).toHaveClass("pb_popover_body p_sm overflow_handling");
+    expect(kit).toHaveClass("pb_popover_body max_width_240px overflow_handling");
   });
 
   test("closes Popover on click anywhere", async () => {

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

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

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

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

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

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

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/_rich_text_editor.tsx

@@ -32,12 +32,11 @@ type RichTextEditorProps = {
   advancedEditor?: any,
   advancedEditorToolbar?: boolean,
   toolbarBottom?: boolean,
-  children?: React.ReactNode | React.ReactNode[],
+  children?: React.ReactNode | React.ReactNode[]
   className?: string,
   data?: { [key: string]: string },
   focus?: boolean,
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
-  inputOptions?: { [key: string]: string | number | boolean | (() => void) },
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inline?: boolean,
   extensions?: { [key: string]: string }[],
@@ -62,7 +61,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     data = {},
     focus = false,
     htmlOptions = {},
-    inputOptions = {},
     inline = false,
     extensions,
     name,
@@ -72,7 +70,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     sticky = false,
     template = '',
     value = '',
-    maxWidth = "md"
+    maxWidth="md"
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -81,28 +79,12 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   const htmlProps = buildHtmlProps(htmlOptions)
   
-  const handleOnEditorReady = (editorInstance: Editor) => {
-    setEditor(editorInstance)
-    setTimeout(() => {
-      const oldId = editorInstance.element.getAttribute('input')
-      if (oldId) {
-        const hiddenInput = document.getElementById(oldId)
-        if (hiddenInput) {
-          const newId = (inputOptions.id as string) || oldId  
-          hiddenInput.id = newId
-          editorInstance.element.setAttribute('input', newId)
-
-          if (inputOptions.name) {
-            hiddenInput.setAttribute('name', inputOptions.name as string)
-          }
-        }
-      }
-    })
-  }
+  const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
+    element = editor?.element
 
   // DOM manipulation must wait for editor to be ready
-  if (editor && editor.element) {
-    const toolbarElement = editor.element.parentElement.querySelector('trix-toolbar') as HTMLElement,
+  if (editor) {
+    const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
       blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
 
     // replace default trix "block code" button with "inline code" button
@@ -136,8 +118,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   }, [editor, template])
 
   useEffect(() => {
-    if (!editor?.element) return
-    editor.element.addEventListener('click', ({ target }: Event) => {
+    if (!element) return
+    element.addEventListener('click', ({ target }: Event) => {
       const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
       if (!trixEditorContainer) return
 
@@ -146,7 +128,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
       if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
     })
-  }, [editor])
+  }, [element])
 
   const richTextEditorClass = 'pb_rich_text_editor_kit',
     simpleClass = simple ? 'simple' : '',
@@ -155,7 +137,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     inlineClass = inline ? 'inline' : '',
     toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
 
-  let css = classnames(globalProps(props, { maxWidth }), className)
+  let css = classnames(globalProps(props, {maxWidth}), className)
   css = classnames(
     richTextEditorClass,
     simpleClass,

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_rich_text_editor/rich_text_editor.html.erb

@@ -1,5 +1,5 @@
 <%= react_component('RichTextEditor',
-                    object.rich_text_options,
-                    aria: object.aria,
-                    data: object.data
-                   ) %>
+  object.rich_text_options,
+  aria: object.aria,
+  data: object.data
+) %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb

@@ -20,7 +20,6 @@ module Playbook
       prop :value
       prop :template
       prop :placeholder
-      prop :input_options
 
       def classname
         generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
@@ -50,7 +49,6 @@ module Playbook
           value: value,
           template: template,
           placeholder: placeholder,
-          inputOptions: input_options,
         }
       end
     end

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)