RubyGems - playbook_ui_docs - Versions diffs - 14.15.0.pre.alpha.PBNTR477draggabledropzone6743 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700 - Mend

playbook_ui_docs 14.15.0.pre.alpha.PBNTR477draggabledropzone6743 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (346) hide show

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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_on_change.jsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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_range_stacked/docs/_date_range_stacked_default.jsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,9 +1,5 @@
 import React, { useState } from "react";
-import Flex from '../../pb_flex/_flex'
-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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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_draggable/docs/example.yml CHANGED Viewed

@@ -5,8 +5,6 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table_react: Draggable with Table
-  - draggable_drop_zones: Drop Zone
-  - draggable_drop_zone_colors: Drop Zone Colors
   - draggable_multiple_containers: Dragging Across Multiple Containers
   rails:

data/app/pb_kits/playbook/pb_draggable/docs/index.js CHANGED Viewed

@@ -3,6 +3,4 @@ export { default as DraggableWithCards } from './_draggable_with_cards.jsx'
 export { default as DraggableWithList } from './_draggable_with_list.jsx'
 export { default as DraggableWithSelectableList } from './_draggable_with_selectable_list.jsx'
 export { default as DraggableMultipleContainers } from './_draggable_multiple_containers.jsx'
-export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
-export { default as DraggableDropZoneColors } from './_draggable_drop_zones_colors.jsx'
 export { default as DraggableWithTableReact } from './_draggable_with_table_react.jsx'

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

@@ -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 CHANGED Viewed

@@ -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.jsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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_dropdown/docs/_dropdown_blank_selection.jsx CHANGED Viewed

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

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

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

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

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

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

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