playbook_ui 14.16.0.pre.rc.1 → 14.16.0.pre.rc.3

data/app/pb_kits/playbook/pb_docs/kit_example.rb

@@ -60,6 +60,20 @@ module Playbook
                                            .gsub("'../..'", "'playbook-ui'")
                                            .gsub(%r{from "../.*}, "from 'playbook-ui'")
                                            .gsub(%r{from '../.*}, "from 'playbook-ui'")
+        stringified_code = stringified_code.gsub(/import\s+(\w+)\s+from\s+['"]playbook-ui['"]/) do
+          "import { #{::Regexp.last_match(1)} } from 'playbook-ui'"
+        end
+        stringified_code = stringified_code.gsub("import { FormattedDate }", "import { Date as FormattedDate }")
+        # Combine separate playbook-ui import statements into one
+        imports = stringified_code.scan(/^\s*import\s+{([^}]+)}\s+from\s+['"]playbook-ui['"]/)
+        components = imports.flatten.join(", ").split(",").map(&:strip).uniq
+        if components.any?
+          new_import_statement = "import { #{components.join(', ')} } from 'playbook-ui'"
+          stringified_code.gsub!(/^\s*import\s+{([^}]+)}\s+from\s+['"]playbook-ui['"]/, "")
+          stringified_code = stringified_code.sub(/import\s+React[\s\S]+?\n/, "\\0\n#{new_import_statement}")
+        end
+        # Replace several empty lines with one empty line
+        stringified_code.gsub!(/\n\s*\n{2,}/, "\n\n")
         stringified_code = dark ? stringified_code.gsub("{...props}", "dark") : stringified_code.gsub(/\s*{...props}\s*\n/, "\n")
         if stringified_code.include?("props: { ")
           stringified_code = stringified_code.gsub("props: {", "props: {dark: true,") if type == "rails" && dark

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_default.jsx

@@ -1,5 +1,9 @@
 import React, { useState } from "react";
-import { Flex, Image, Draggable, DraggableProvider } from "playbook-ui";
+
+import Flex from '../../pb_flex/_flex'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx

@@ -1,16 +1,15 @@
 import React, { useState } from "react";
-import {
-  Flex,
-  Caption,
-  Card,
-  FlexItem,
-  Badge,
-  Avatar,
-  Title,
-  Body,
-  Draggable,
-  DraggableProvider,
-} from "playbook-ui";
+
+import Flex from '../../pb_flex/_flex'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+import Badge from '../../pb_badge/_badge'
+import Title from '../../pb_title/_title'
+import Caption from '../../pb_caption/_caption'
+import Card from '../../pb_card/_card'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import Body from '../../pb_body/_body'
 
 // Initial groups to drag between
 const containers = ["To Do", "In Progress", "Done"];

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.jsx

@@ -1,14 +1,13 @@
 import React, { useState } from "react";
-import {
-  Flex,
-  Badge,
-  Title,
-  Icon,
-  Draggable,
-  DraggableProvider,
-  Card,
-  Caption,
-} from "playbook-ui";
+
+import Flex from '../../pb_flex/_flex'
+import Draggable from '../../pb_draggable/_draggable'
+import { DraggableProvider } from '../../pb_draggable/context'
+import Badge from '../../pb_badge/_badge'
+import Title from '../../pb_title/_title'
+import Icon from '../../pb_icon/_icon'
+import Caption from '../../pb_caption/_caption'
+import Card from '../../pb_card/_card'
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { DraggableProvider, List, ListItem } from "playbook-ui";
+
+import { DraggableProvider } from '../../pb_draggable/context'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
-import { SelectableList, DraggableProvider } from "playbook-ui";
+
+import SelectableList from '../../pb_selectable_list/_selectable_list'
+import { DraggableProvider } from '../../pb_draggable/context'
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_table_react.jsx

@@ -1,5 +1,10 @@
 import React, { useState } from "react";
-import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
+
+import Flex from '../../pb_flex/_flex'
+import { DraggableProvider } from '../../pb_draggable/context'
+import Avatar from '../../pb_avatar/_avatar'
+import Body from '../../pb_body/_body'
+import Table from '../../pb_table/_table'
 
 // Initial items to be dragged
 const data = [

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react"
-import { Button, Drawer, Flex } from "playbook-ui"
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 const useDrawer = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 const DrawerBorders = () => {
   // Individual state variables for each drawer size

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { Button, Body } from "playbook-ui"
+import Button from '../../pb_button/_button'
+import Body from "../../pb_body/_body"
 
 const DrawerMenu = () => {
   return (

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 const useDrawer = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx

@@ -1,5 +1,10 @@
 import React, { useState, useEffect } from "react"
-import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Icon from '../../pb_icon/_icon'
+import Nav from '../../pb_nav/_nav'
+import NavItem from '../../pb_nav/_item'
 
 const DrawerMenu = () => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react"
-import { Button, Drawer, Flex } from "playbook-ui"
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 const DrawerSizes = () => {
   // Individual state variables for each drawer size

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { Button, Drawer, Flex } from "playbook-ui";
+
+import Button from '../../pb_button/_button'
+import Drawer from '../../pb_drawer/_drawer'
+import Flex from '../../pb_flex/_flex'
 
 const DrawerSizes = () => {
   // Individual state variables for each drawer size

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownBlankSelection = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx

@@ -1,5 +1,7 @@
 import React, { useRef } from 'react'
-import { Button, Dropdown } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const options = [
     {

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownDefault = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownDefaultValue = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownError = (props) => {
     const [selectedOption, setSelectedOption] = useState()

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownSeparatorsHidden = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownSubcomponentStructure = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownSubtleVariant = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Dropdown, User, Badge, FlexItem } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import FlexItem from '../../pb_flex/_flex_item'
+import User from '../../pb_user/_user'
 
 const DropdownWithAutocomplete = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx

@@ -1,5 +1,11 @@
 import React, { useState } from 'react'
-import { Dropdown, User, Badge, FlexItem, Avatar } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import User from '../../pb_user/_user'
+
 
 const DropdownWithAutocompleteAndCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx

@@ -1,5 +1,11 @@
 import React, { useState } from 'react'
-import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import User from '../../pb_user/_user'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx

@@ -1,5 +1,11 @@
 import React from 'react'
-import { Dropdown, Icon, Body, FlexItem, Flex } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import FlexItem from '../../pb_flex/_flex_item'
+import Icon from '../../pb_icon/_icon'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+
 
 const DropdownWithCustomOptions = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownWithCustomPadding = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx

@@ -1,5 +1,11 @@
 import React, { useState } from 'react'
-import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import FlexItem from '../../pb_flex/_flex_item'
+import Icon from '../../pb_icon/_icon'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+import IconCircle from '../../pb_icon_circle/_icon_circle'
 
 const DropdownWithCustomTrigger = (props) => {
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Dropdown, useDropdown, Button } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import useDropdown from '../../pb_dropdown/hooks/useDropdown'
+
+import Button from '../../pb_button/_button'
 
 const DropdownWithExternalControl = (props) => {
 const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx

@@ -1,5 +1,12 @@
 import React, { useRef } from 'react'
-import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex  } from 'playbook-ui'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import useDropdown from '../../pb_dropdown/hooks/useDropdown'
+import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import FlexItem from '../../pb_flex/_flex_item'
+import Icon from '../../pb_icon/_icon'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
 
 const DropdownWithHook = (props) => {
 const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import Dropdown from '../../pb_dropdown/_dropdown'
 
 const DropdownDefault = (props) => {
 

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx

@@ -1,10 +1,9 @@
 
 import React, { useState } from 'react'
-import {
-  FileUpload,
-  List,
-  ListItem,
-} from 'playbook-ui'
+
+import FileUpload from '../../pb_file_upload/_file_upload'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 
 const AcceptedFilesList = ({ files }) => (
   <List>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx

@@ -1,7 +1,9 @@
 /* eslint-disable react/no-multi-comp */
 
 import React, { useState } from "react";
-import { FileUpload, List, ListItem } from "playbook-ui";
+import FileUpload from '../../pb_file_upload/_file_upload'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 
 const AcceptedFilesList = ({ files }) => (
   <List>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx

@@ -1,10 +1,8 @@
 
 import React, { useState } from 'react'
-import {
-  FileUpload,
-  List,
-  ListItem,
-} from 'playbook-ui'
+import FileUpload from '../../pb_file_upload/_file_upload'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 
 const AcceptedFilesList = ({ files }) => (
   <List>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx

@@ -1,10 +1,8 @@
 
 import React, { useState } from 'react'
-import {
-  FileUpload,
-  List,
-  ListItem,
-} from 'playbook-ui'
+import FileUpload from '../../pb_file_upload/_file_upload'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 
 const AcceptedFilesList = ({ files }) => (
   <List>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx

@@ -1,12 +1,11 @@
 /* eslint-disable react/no-multi-comp */
 
 import React, { useState } from 'react'
-import {
-  Body,
-  FileUpload,
-  List,
-  ListItem,
-} from 'playbook-ui'
+
+import Body from '../../pb_body/_body'
+import FileUpload from '../../pb_file_upload/_file_upload'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 
 const AcceptedFilesList = ({ files }) => (
   <List>

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -1,5 +1,10 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+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_filter/docs/_filter_max_height.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+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 FilterMaxHeight = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Button, Filter, Flex, Select } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+import Filter from '../../pb_filter/_filter'
+import Flex from '../../pb_flex/_flex'
+import Select from '../../pb_select/_select'
 
 const FilterMaxWidth = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx

@@ -1,5 +1,10 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+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 FilterNoBackground = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+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 FilterNoSort = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+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 FilterOnly = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx

@@ -1,5 +1,10 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+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_filter/docs/_filter_popover_props.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+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 FilterPopoverProps = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from 'playbook-ui'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
 
 const FlexAlign = (props) => {
   return (

data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from  'playbook-ui'
+import Title from '../../pb_title/_title'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const FlexDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Flex, FlexItem } from 'playbook-ui'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const FlexGap = (props) => {
   const count = () => {

data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from 'playbook-ui'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
 
 const FlexInline = (props) => {
   return (

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from 'playbook-ui'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
 
 const FlexItemAlignSelf = (props) => {
   return (

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from 'playbook-ui'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
 
 const FlexItemExample = (props) => {
   return (

data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from 'playbook-ui'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
 
 const FlexJustify = (props) => {
   return (