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

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 (

data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.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 FlexReverse = (props) => {
   return (

data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.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 FlexSpacing = (props) => {
   return (

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

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

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -25,7 +25,7 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -24,7 +24,7 @@
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx

@@ -1,5 +1,7 @@
 import React from 'react'
-import { FormPill, Title } from 'playbook-ui'
+
+import FormPill from '../../pb_form_pill/_form_pill'
+import Title from '../../pb_title/_title'
 
 const FormPillColors = (props) => {
   return (

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
+
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
+import FormPill from '../../pb_form_pill/_form_pill'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { GanttChart } from "playbook-ui";
+import GanttChart from '../../pb_gantt_chart/_gantt_chart'
 
 const mockOptions = {
   title: {

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from 'playbook-ui'
+import Gauge from '../../pb_gauge/_gauge'
 
 const data = [
   { name: 'Name', value: 67 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -1,14 +1,13 @@
 import React from "react";
-import {
-  Title,
-  Card,
-  Gauge,
-  Flex,
-  FlexItem,
-  SectionSeparator,
-  Body,
-  Caption,
-} from "playbook-ui";
+
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Gauge from '../../pb_gauge/_gauge'
+import Card from '../../pb_card/_card'
+import Caption from '../../pb_caption/_caption'
+import Body from '../../pb_body/_body'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+import Title from '../../pb_title/_title'
 
 const data = [{ name: "Name", value: 10 }];
 

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from 'playbook-ui'
+import Gauge from '../../pb_gauge/_gauge'
 
 const data = [
   { name: 'Name', value: 45 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from 'playbook-ui'
+import Gauge from '../../pb_gauge/_gauge'
 
 const data = [
   { name: 'Participants', value: 84 },