playbook_ui 14.16.0.pre.rc.2 → 14.16.0.pre.rc.3

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -23,6 +23,7 @@ type PhoneNumberInputProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   error?: string,
+  hiddenInputs?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   initialCountry?: string,
@@ -72,6 +73,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     dark = false,
     data = {},
     disabled = false,
+    hiddenInputs = false,
     htmlOptions = {},
     id = "",
     initialCountry = "",
@@ -243,6 +245,10 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       countrySearch: false,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
+      hiddenInput: hiddenInputs ? () => ({
+        phone: `${name}_full`,
+        country: `${name}_country_code`,
+      }) : null,
     })
 
     itiRef.current = telInputInit;

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

@@ -1,5 +1,7 @@
 import React, { useEffect, useRef } from 'react'
-import { Body, PhoneNumberInput } from 'playbook-ui'
+
+import Body from '../../pb_body/_body'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 
 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,5 +1,7 @@
 import React, { useRef } from 'react'
-import { Button, PhoneNumberInput } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 
 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 'playbook-ui'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 
 const PhoneNumberInputDefault = (props) => (
     <>

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

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

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

@@ -0,0 +1,5 @@
+<%= pb_rails("phone_number_input", props: {
+    hidden_inputs: true,
+    id: "hidden_inputs",
+    name: "hidden_inputs",
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md

@@ -0,0 +1 @@
+The `hidden_inputs` boolean prop generates two hidden input fields, {field_name}_full and {field_name}_country_code. The value passed when the form is submitted contains the full phone number including the country code. Because it requires the submission of a form to function, only use this prop on Rails phone number elements within html form tags `<form>/<form>` or [pb_forms](https://playbook.powerapp.cloud/kits/form). Read the [intl-tel-input](https://intl-tel-input.com/examples/hidden-input.html) docs for more information.

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 'playbook-ui'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 
 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 'playbook-ui'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 
 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 'playbook-ui'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 
 const PhoneNumberInputPreferredCountries = (props) => (
   <>

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

@@ -1,5 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { Button, FixedConfirmationToast, PhoneNumberInput } from "playbook-ui";
+
+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'
 
 const PhoneNumberInputValidation = (props) => {
     const [formErrors, setFormErrors] = useState("");

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

@@ -16,4 +16,6 @@ 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_format: Format as You Type
+  - phone_number_input_hidden_inputs: Hidden Inputs
+  

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

@@ -23,6 +23,8 @@ 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")
@@ -35,6 +37,7 @@ 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/docs/_popover_actionable_content.jsx

@@ -1,11 +1,10 @@
 import React, { useState } from 'react'
-import {
-  Body,
-  Button,
-  CircleIconButton,
-  Flex,
-  PbReactPopover,
-} from 'playbook-ui'
+
+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'
 
 const PopoverActionableContent = (props) => {
   const [showPopover, setShowPopover] = useState(false)

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

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

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

@@ -1,10 +1,9 @@
 import React, { useState } from 'react'
-import {
-  Body,
-  CircleIconButton,
-  Flex,
-  PbReactPopover,
-} from 'playbook-ui'
+
+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'
 
 const PopoverDefault = (props) => {
   const [showPopover, setShowPopover] = useState(false)

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

@@ -1,12 +1,11 @@
 import React, { useState } from 'react'
-import {
-  Button,
-  Icon,
-  List,
-  ListItem,
-  PbReactPopover,
-  Flex,
-} from 'playbook-ui'
+
+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'
 
 const PopoverWithButton = (props) => {
   const [showPopover, setShowPopover] = useState(false)

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

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

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

@@ -1,9 +1,8 @@
 import React, { useState } from 'react'
-import {
-  Body,
-  Button,
-  PbReactPopover,
-} from 'playbook-ui'
+
+import Body from '../../pb_body/_body'
+import Button from '../../pb_button/_button'
+import PbReactPopover from '../../pb_popover/_popover'
 
 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 'playbook-ui'
+import ProgressSimple from '../../pb_progress_simple/_progress_simple'
 
 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 'playbook-ui'
+import ProgressSimple from '../../pb_progress_simple/_progress_simple'
 
 const ProgressSimpleDefault = () => {
   return (

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

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

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

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Flex, Radio } from 'playbook-ui'
+
+import Flex from '../../pb_flex/_flex'
+import Radio from '../../pb_radio/_radio'
 
 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 '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>