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

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import Body from '../../pb_body/_body'
-import MultipleUsers from '../../pb_multiple_users/_multiple_users'
+import { Body, MultipleUsers } from 'playbook-ui'
 
 const MultipleUsersSize = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx

@@ -1,6 +1,5 @@
 import React from "react";
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Nav, NavItem } from 'playbook-ui'
 
 const CollapsibleNav = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx

@@ -1,8 +1,5 @@
 import React from "react"
-
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
+import { Nav, NavItem, useCollapsible } from "playbook-ui"
 
 const CollapsibleNavCustom = (props) => {
   const navItems = ["Overview", "Albums", "Similar Artists"]

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.jsx

@@ -1,6 +1,5 @@
 import React from "react";
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Nav, NavItem } from 'playbook-ui'
 
 const CollapsibleNavItemSpacing = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon.jsx

@@ -1,6 +1,5 @@
 import React from "react";
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Nav, NavItem } from 'playbook-ui'
 
 const CollapsibleNavNoIcon = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.jsx

@@ -1,6 +1,5 @@
 import React from "react"
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Nav, NavItem } from "playbook-ui"
 
 const CollapsibleNavWithAllOptions = (props) => {
   const navItems = ["Overview", "Albums", "Similar Artists"]

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.jsx

@@ -1,6 +1,5 @@
 import React from "react";
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Nav, NavItem } from 'playbook-ui'
 
 const NavWithFontControl = (props) => {
   return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Table from '../../pb_table/_table'
-
+import {
+    Overlay,
+    Table,
+} from 'playbook-ui'
 
 const TableExample = () => {
     return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Card from '../../pb_card/_card'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from 'playbook-ui'
 
 const InlineCardsExample = () => {
     return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
-import Overlay from '../../pb_overlay/_overlay'
-import Card from '../../pb_card/_card'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from 'playbook-ui'
 
 const InlineCardsExample = () => {
     return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx

@@ -1,9 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from "react";
-
-import Overlay from '../../pb_overlay/_overlay'
-import Button from '../../pb_button/_button'
-import Table from '../../pb_table/_table'
+import { Overlay, Table, Button } from "playbook-ui";
 
 const TableExample = () => {
     return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx

@@ -1,8 +1,10 @@
 import React, { forwardRef } from 'react'
-import Overlay from '../../pb_overlay/_overlay'
-import Card from '../../pb_card/_card'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from 'playbook-ui'
 
 const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
     return (

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
-import Table from '../../pb_table/_table'
-import Pagination from '../../pb_pagination/_pagination'
+import { Table, Pagination } from 'playbook-ui'
 
 
 import { data } from "./data";

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx

@@ -1,8 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-import Passphrase from '../../pb_passphrase/_passphrase'
-import Caption from '../../pb_caption/_caption'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import { Caption, Passphrase, ProgressSimple } from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 const PassphraseBreached = (props) => {

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx

@@ -1,9 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-import Body from '../../pb_body/_body'
-import Passphrase from '../../pb_passphrase/_passphrase'
-import Caption from '../../pb_caption/_caption'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import {Body, Caption, Passphrase, ProgressSimple} from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 const PassphraseCommon = (props) => {

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 
-import Body from '../../pb_body/_body'
-import Passphrase from '../../pb_passphrase/_passphrase'
+import {Body, Passphrase} from 'playbook-ui'
 
 const PassphraseConfirmation = (props) => {
   const [input, setInput] = useState('')

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx

@@ -1,11 +1,6 @@
 import React, { useState } from 'react'
 
-import Body from '../../pb_body/_body'
-import Passphrase from '../../pb_passphrase/_passphrase'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
-import Caption from '../../pb_caption/_caption'
-import TextInput from '../../pb_text_input/_text_input'
-
+import { Body, Caption, Passphrase, ProgressSimple, TextInput } from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx

@@ -1,11 +1,7 @@
 import React, { useState } from 'react'
 import { useEffect } from 'react'
 
-import Passphrase from '../../pb_passphrase/_passphrase'
-import Caption from '../../pb_caption/_caption'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
-import TextInput from '../../pb_text_input/_text_input'
-
+import { Caption, Passphrase, ProgressSimple, TextInput} from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 const PassphraseStrengthChange = (props) => {

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

@@ -1,7 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-
-import Body from '../../pb_body/_body'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import { Body, PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInputAccessInputElement = (props) => {
     // 1. Create a ref - this accesses the kit's input element.

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

@@ -1,7 +1,5 @@
 import React, { useRef } from 'react'
-
-import Button from '../../pb_button/_button'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import { Button, PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInputClearField = (props) => {
     // 1. Create a ref - this accesses the kit's input element.

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_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_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/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.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