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

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import CircleChart from '../_circle_chart'
 
-import Title from '../../pb_title/_title'
+import {Title} from 'playbook-ui'
 
 const data = [
   {

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button"
+import { CircleIconButton } from 'playbook-ui'
 
 const CircleIconButtonClick = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 
 const CollapsibleColor = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx

@@ -1,12 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
-import Collapsible from '../../pb_collapsible/_collapsible'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
-import Flex from '../../pb_flex/_flex'
-import Title from '../../pb_title/_title'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
 
 const CollapsibleCustomMain = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx

@@ -1,12 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-
-import Collapsible from '../../pb_collapsible/_collapsible'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
-import Flex from '../../pb_flex/_flex'
-import Title from '../../pb_title/_title'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
 
 const CollapsibleCustomMainWithIcon = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 
 const CollapsibleDefault = (props) => (
   <Collapsible >

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 
 const CollapsibleIcons = (props) => {
 

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_no_icon.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 
 const CollapsibleNoIcon = (props) => (
   <Collapsible 

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Collapsible from "../../pb_collapsible/_collapsible"
+import { Collapsible } from 'playbook-ui'
 
 const CollapsibleSize = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx

@@ -1,9 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-
-import Collapsible from '../../pb_collapsible/_collapsible'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
-import Button from '../../pb_button/_button'
+import { Collapsible, useCollapsible, Button } from 'playbook-ui'
 
 const CollapsibleState = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Contact from "../../pb_contact/_contact"
+import { Contact } from 'playbook-ui'
 
 const ContactDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Contact from "../../pb_contact/_contact"
+import { Contact } from 'playbook-ui'
 
 const ContactDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-
-import CopyButton from '../../pb_copy_button/_copy_button'
-import Textarea from '../../pb_textarea/_textarea'
+import { CopyButton, Textarea } from 'playbook-ui'
 
 const CopyButtonDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx

@@ -1,9 +1,5 @@
 import React, { useState } from 'react'
-
-import CopyButton from '../../pb_copy_button/_copy_button'
-import Body from '../../pb_body/_body'
-import TextInput from '../../pb_text_input/_text_input'
-import Textarea from '../../pb_textarea/_textarea'
+import { CopyButton, Body, TextInput, Textarea } from 'playbook-ui'
 
 const CopyButtonFrom = (props) => {
   const [text, setText] = useState("Copy this text input text")

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Currency from "../../pb_currency/_currency"
+import { Currency } from 'playbook-ui'
 
 const CurrencyNullDisplay = (props) => {
   return (

data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-
-import Currency from '../../pb_currency/_currency'
-import Title from '../../pb_title/_title'
+import { Currency, Title } from 'playbook-ui'
 
 const CurrencyUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import FormattedDate from '../../pb_date/_date'
+import { Date as FormattedDate } from 'playbook-ui'
 
 const DateAlignment = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-
-import FormattedDate from '../../pb_date/_date'
-import Caption from '../../pb_caption/_caption'
-import Title from '../../pb_title/_title'
+import { Date as FormattedDate, Caption, Title } from 'playbook-ui'
 
 const DateDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-
-import Caption from '../../pb_caption/_caption'
-import FormattedDate from '../../pb_date/_date'
-import Title from '../../pb_title/_title'
+import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
 
 const DateUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import FormattedDate from '../../pb_date/_date'
+import { Date as FormattedDate } from 'playbook-ui'
 
 const DateVariants = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md

@@ -1,3 +1 @@
-You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).
-
-Use `window.addEventListener("DOMContentLoaded", () => {})`, not `document.addEventListener("DOMContentLoaded", () => {})`.
+You can find a full list of flatpickr events and hooks in their [documentation](https://flatpickr.js.org/events/).

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-
-import DatePicker from '../../pb_date_picker/_date_picker'
-import LabelValue from '../../pb_label_value/_label_value'
+import { DatePicker, LabelValue } from 'playbook-ui'
 
 const DatePickerOnChange = (props) => {
   const today = new Date()

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx

@@ -1,8 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
-
-import DatePicker from '../../pb_date_picker/_date_picker'
-import LabelValue from '../../pb_label_value/_label_value'
+import { DatePicker,LabelValue } from 'playbook-ui'
 
 
 const DatePickerOnClose = (props) => {

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

@@ -7,8 +7,6 @@ examples:
   - date_picker_allow_input: Allow Input
   - date_picker_input: Input Field
   - date_picker_label: Label
-  - date_picker_on_change: onChange
-  - date_picker_on_close: onClose
   # - date_picker_range: Range
   - date_picker_quick_pick_rails: Range (Quick Pick)
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateRangeStacked from '../../pb_date_range_stacked/_date_range_stacked'
+import { DateRangeStacked } from 'playbook-ui'
 
 const DateRangeStackedDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import DateYearStacked from '../../pb_date_year_stacked/_date_year_stacked'
+import { DateYearStacked } from 'playbook-ui'
 
 const DateYearStackedDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Detail from '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 
 const DetailBold = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Detail from '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 
 const DetailColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Detail from '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 
 const DetailDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Detail from '../../pb_detail/_detail'
+import { Detail } from 'playbook-ui'
 
 const DetailStyled = (props) => (
   <>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react'
-
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import Caption from '../../pb_caption/_caption'
-import Dialog from '../../pb_dialog/_dialog'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  RichTextEditor,
+  Typeahead,
+} from 'playbook-ui'
 
 const DialogCompound = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-
+import { Button, Dialog } from 'playbook-ui'
 
 const DialogDefault = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx

@@ -1,12 +1,13 @@
 import React, { useState } from "react";
-
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
-import Caption from '../../pb_caption/_caption'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  Flex,
+  RichTextEditor,
+  Typeahead,
+} from "playbook-ui";
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx

@@ -1,12 +1,13 @@
 import React, { useState } from "react";
-
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
-import Caption from '../../pb_caption/_caption'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import {
+  Body,
+  Button,
+  Caption,
+  Dialog,
+  Flex,
+  RichTextEditor,
+  Typeahead,
+} from "playbook-ui";
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
+import { Button, Dialog } from 'playbook-ui'
 
 const DialogLoading = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
+import { Button, Dialog } from 'playbook-ui'
 
 const DialogScrollable = () => {
 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
+import { Button, Dialog, Flex } from 'playbook-ui'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
+import { Button, Dialog } from 'playbook-ui'
 
 const DialogShouldCloseOnOverlay = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx

@@ -1,8 +1,6 @@
 
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
+import { Button, Dialog, Flex } from 'playbook-ui'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -1,8 +1,6 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useState } from "react"
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
+import { Button, Dialog, Flex} from "playbook-ui"
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx

@@ -1,10 +1,7 @@
 /* eslint-disable react/jsx-handler-names */
 
 import React, { useState } from "react"
-
-import Button from '../../pb_button/_button'
-import Dialog from '../../pb_dialog/_dialog'
-import Flex from '../../pb_flex/_flex'
+import { Button, Dialog, Flex } from "playbook-ui"
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

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

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

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

@@ -1,15 +1,16 @@
 import React, { useState } from "react";
-
-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'
+import {
+  Flex,
+  Caption,
+  Card,
+  FlexItem,
+  Badge,
+  Avatar,
+  Title,
+  Body,
+  Draggable,
+  DraggableProvider,
+} from "playbook-ui";
 
 // 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,13 +1,14 @@
 import React, { useState } from "react";
-
-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'
+import {
+  Flex,
+  Badge,
+  Title,
+  Icon,
+  Draggable,
+  DraggableProvider,
+  Card,
+  Caption,
+} from "playbook-ui";
 
 // Initial items to be dragged
 const data = [

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

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

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

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

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

@@ -1,10 +1,5 @@
 import React, { useState } from "react";
-
-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'
+import { Flex, Table, Body, Avatar, DraggableProvider } from "playbook-ui";
 
 // Initial items to be dragged
 const data = [

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

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

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

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

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.html.erb

@@ -1,3 +0,0 @@
-
-<%= pb_rails("body", props: { text: " The breakpoint prop determines when the Drawer is always visible. Above the specified breakpoint, the Drawer remains open on the page. Below it, only the trigger element is shown, allowing you to toggle the drawer open and closed. To see this in action, click the button below and resize your window.", padding_bottom: "md" }) %>
-<%= pb_rails("button", props: { text: "Open Doc Example in New Tab", new_window: true, link: "/drawer_page", margin_right: "lg" }) %>

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

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

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

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

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

@@ -1,10 +1,5 @@
 import React, { useState, useEffect } from "react"
-
-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'
+import { Button, Drawer, Icon, Nav, NavItem } from "playbook-ui"
 
 const DrawerMenu = () => {
   const [isSmallScreen, setIsSmallScreen] = useState(false)

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

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

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

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