playbook_ui 14.16.0.pre.alpha.play1964tablekitheadertextstylefix7091 → 14.16.0.pre.rc.0

data/app/pb_kits/playbook/pb_draggable/_draggable.tsx

@@ -10,8 +10,6 @@ type DraggableProps = {
   className?: string;
   children?: React.ReactNode;
   data?: { [key: string]: string };
-  dropZone?: 'ghost' | 'outline' | 'shadow' | 'line';
-  dropZoneColor?: 'primary' | 'neutral' | 'purple';
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
 };
@@ -26,6 +24,7 @@ const Draggable = (props: DraggableProps) => {
     id,
   } = props;
 
+
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
@@ -37,11 +36,10 @@ const Draggable = (props: DraggableProps) => {
   );
 
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
+    <div {...ariaProps} 
+        {...dataProps} 
         {...htmlProps}
-        className={classes}
+        className={classes} 
         id={id}
     >
       {children}

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -1,11 +1,11 @@
-import React, { createContext, useReducer, useContext, useEffect, useMemo, useRef, useState } from "react";
+import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
 import { InitialStateType, ActionType, DraggableProviderType } from "./types";
 
 const initialState: InitialStateType = {
   items: [],
   dragData: { id: "", initialGroup: "" },
   isDragging: "",
-  activeContainer: "",
+  activeContainer: ""
 };
 
 const reducer = (state: InitialStateType, action: ActionType) => {
@@ -31,23 +31,9 @@ const reducer = (state: InitialStateType, action: ActionType) => {
       const { dragId, targetId } = action.payload;
       const newItems = [...state.items];
       const draggedItem = newItems.find(item => item.id === dragId);
-      const targetItem = newItems.find(item => item.id === targetId);
-    
-      if (!draggedItem || !targetItem || draggedItem.container !== targetItem.container) {
-        return state;
-      }
-
-      if (dragId === targetId) {
-        return state;
-      }
-
-      const draggedIndex = newItems.findIndex(item => item.id === dragId);
+      const draggedIndex = newItems.indexOf(draggedItem);
       const targetIndex = newItems.findIndex(item => item.id === targetId);
 
-      if (draggedIndex === -1 || targetIndex === -1) {
-        return state;
-      }
-
       newItems.splice(draggedIndex, 1);
       newItems.splice(targetIndex, 0, draggedItem);
 
@@ -62,130 +48,77 @@ const reducer = (state: InitialStateType, action: ActionType) => {
 const DragContext = createContext<any>({});
 
 export const DraggableContext = () => {
-  const context = useContext(DragContext);
-  if (context === undefined) {
-    throw new Error('DraggableContext must be used within a DraggableProvider');
-  }
-  return context;
+  return useContext(DragContext);
 };
 
-export const DraggableProvider = ({
-  children,
-  initialItems,
+export const DraggableProvider = ({ 
+  children, 
+  initialItems, 
   onReorder,
-  onDragStart,
-  onDragEnter,
-  onDragEnd,
-  onDrop,
-  onDragOver,
-  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
+  onDragStart, 
+  onDragEnter, 
+  onDragEnd, 
+  onDrop, 
+  onDragOver 
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
-  
-  // Store initial items in a ref to use if needed (for consistency when needed in future updates)
-  const initialItemsRef = useRef(initialItems);
-  const [isDragging, setIsDragging] = useState(false);
-  
-  // Parse dropZone prop - handle both string format (backward compatibility) and object format
-  let dropZoneType = 'ghost';
-  let dropZoneColor = 'neutral';
-  let dropZoneDirection = 'vertical';
-
-  if (typeof dropZone === 'string') {
-    // Legacy format - just the type is provided as a string
-    dropZoneType = dropZone;
-  } else {
-    // New object format
-    dropZoneType = dropZone.type || 'ghost';
-    // Line default is set to primary. Other types default to neutral.
-    dropZoneColor = dropZone.type === 'line' ? (dropZone.color || 'primary') : (dropZone.color || 'neutral');
-
-    // Only use direction if the type is 'line'
-    if (dropZoneType === 'line') {
-      dropZoneDirection = dropZone.direction || 'vertical';
-    }
-  }
 
   useEffect(() => {
     dispatch({ type: 'SET_ITEMS', payload: initialItems });
-    initialItemsRef.current = initialItems;
   }, [initialItems]);
 
   useEffect(() => {
-    if (onReorder) {
-      onReorder(state.items);
-    }
-  }, [state.items, onReorder]);
+    onReorder(state.items);
+  }, [state.items]);
 
   const handleDragStart = (id: string, container: string) => {
-    setIsDragging(true);
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id, initialGroup: container } });
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
     dispatch({ type: 'SET_IS_DRAGGING', payload: id });
-    dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     if (onDragStart) onDragStart(id, container);
   };
 
   const handleDragEnter = (id: string, container: string) => {
-    if (!isDragging || container !== state.activeContainer) return;
-
-    if (state.dragData.id === id) return;
-
-    const draggedItem = state.items.find(item => item.id === state.dragData.id);
-    const targetItem = state.items.find(item => item.id === id);
-
-    if (!draggedItem || !targetItem || draggedItem.container !== targetItem.container) {
-      return;
+    if (state.dragData.id !== id) {
+      dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
     }
-
-    dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
-    
     if (onDragEnter) onDragEnter(id, container);
   };
 
   const handleDragEnd = () => {
-    setIsDragging(false);
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     if (onDragEnd) onDragEnd();
   };
 
-  const handleDrop = (container: string) => {
-    const draggedItem = state.items.find(item => item.id === state.dragData.id);
-    
-    if (draggedItem && draggedItem.container !== container) {
-      dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId: state.dragData.id, container } });
-    }
+  const changeCategory = (itemId: string, container: string) => {
+    dispatch({ type: 'CHANGE_CATEGORY', payload: { itemId, container } });
+  };
 
+  const handleDrop = (container: string) => {
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-
-    setIsDragging(false);
+    changeCategory(state.dragData.id, container);
     if (onDrop) onDrop(container);
   };
 
   const handleDragOver = (e: Event, container: string) => {
     e.preventDefault();
-    e.stopPropagation();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     if (onDragOver) onDragOver(e, container);
   };
 
-  // Include direction in contextValue only if type is 'line'
   const contextValue = useMemo(() => ({
     items: state.items,
     dragData: state.dragData,
     isDragging: state.isDragging,
     activeContainer: state.activeContainer,
-    dropZone: dropZoneType,
-    dropZoneColor,
-    // Only include direction when type is 'line'
-    ...(dropZoneType === 'line' ? { direction: dropZoneDirection } : {}),
     handleDragStart,
     handleDragEnter,
     handleDragEnd,
     handleDrop,
     handleDragOver
-  }), [state, dropZoneType, dropZoneColor, dropZoneDirection,  handleDragStart, handleDragEnter, handleDragEnd, handleDrop, handleDragOver]);
+  }), [state]);
 
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>

data/app/pb_kits/playbook/pb_draggable/context/types.ts

@@ -1,38 +1,31 @@
 export interface ItemType {
-  id: string;
-  container: string;
-  [key: string]: any;
-}
-
-export interface InitialStateType {
-  items: ItemType[];
-  dragData: { id: string; initialGroup: string };
-  isDragging: string;
-  activeContainer: string;
-}
-
-export type ActionType =
-  | { type: 'SET_ITEMS'; payload: ItemType[] }
-  | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
-  | { type: 'SET_IS_DRAGGING'; payload: string }
-  | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
-  | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
-  | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
-
-  export interface DropZoneConfig {
-    type?: 'ghost' | 'outline' | 'shadow' | 'line';
-    color?: 'primary' | 'neutral' | 'purple';
-    direction?: 'horizontal' | 'vertical';
+    id: string;
+    container: string;
+    [key: string]: any;
+  }
+  
+  export interface InitialStateType {
+    items: ItemType[];
+    dragData: { id: string; initialGroup: string };
+    isDragging: string;
+    activeContainer: string;
   }
+  
+  export type ActionType =
+    | { type: 'SET_ITEMS'; payload: ItemType[] }
+    | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
+    | { type: 'SET_IS_DRAGGING'; payload: string }
+    | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
+    | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
+    | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
 
-  export interface DraggableProviderType {
-    children: React.ReactNode;
-    initialItems: ItemType[];
-    onReorder: (items: ItemType[]) => void;
-    onDragStart?: (id: string, container: string) => void;
-    onDragEnter?: (id: string, container: string) => void;
-    onDragEnd?: () => void;
-    onDrop?: (container: string) => void;
-    onDragOver?: (e: Event, container: string) => void;
-    dropZone?: DropZoneConfig | string; // Can accept string for backward compatibility
-  }
+    export interface DraggableProviderType {
+      children: React.ReactNode;
+      initialItems: ItemType[];
+      onReorder: (items: ItemType[]) => void;
+      onDragStart?: (id: string, container: string) => void; 
+      onDragEnter?: (id: string, container: string) => void;
+      onDragEnd?: () => void; 
+      onDrop?: (container: string) => void; 
+      onDragOver?: (e: Event, container: string) => void;
+    }

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_draggable/draggable.test.jsx

@@ -165,7 +165,7 @@ test("generated dragHandle with List", () => {
 
   const list = kit.querySelector(".pb_list_kit");
   expect(list).toBeInTheDocument();
-  const dragHandle = list.querySelector(".pb_custom_icon");
+  const dragHandle = list.querySelector(".fa-grip-dots-vertical");
   expect(dragHandle).toBeInTheDocument();
 });
 
@@ -175,7 +175,7 @@ test("generated dragHandle with SelectableList", () => {
 
   const selectabellist = kit.querySelector(".pb_selectable_list_kit");
   expect(selectabellist).toBeInTheDocument();
-  const dragHandle = selectabellist.querySelector(".pb_custom_icon");
+  const dragHandle = selectabellist.querySelector(".fa-grip-dots-vertical");
   expect(dragHandle).toBeInTheDocument();
 });
 
@@ -185,6 +185,6 @@ test("generated dragHandle with Card", () => {
 
   const card = kit.querySelector(".pb_card_kit_deselected_border_radius_md");
   expect(card).toBeInTheDocument();
-  const dragHandle = card.querySelector(".pb_custom_icon");
+  const dragHandle = card.querySelector(".fa-grip-dots-vertical");
   expect(dragHandle).toBeInTheDocument();
 });

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableContainer.tsx

@@ -22,27 +22,18 @@ type DraggableContainerProps = {
 
 const DraggableContainer = (props: DraggableContainerProps) => {
   const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, tag="div" } = props;
-  const contextValues = DraggableContext();
-  const {
-    handleDragOver,
-    handleDrop,
-    activeContainer,
-    dropZone
-  } = contextValues;
 
-  // Only get direction if dropZone is 'line'
-  const direction = dropZone === 'line' ? (contextValues.direction || 'vertical') : 'vertical';
+  const { handleDragOver, handleDrop, activeContainer } = DraggableContext();
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
+
   const Tag: React.ReactElement | any = `${tag}`;
 
   const classes = classnames(
     buildCss("pb_draggable_container"),
     `${activeContainer === container ? "active" : ""}`,
-    // Only add vertical class if dropZone is 'line' and direction is 'vertical'
-    (dropZone === 'line' && direction === 'vertical') ? 'vertical' : '',
     globalProps(props),
     className
   );

data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx

@@ -22,82 +22,24 @@ type DraggableItemProps = {
 };
 
 const DraggableItem = (props: DraggableItemProps) => {
-  const {
-    aria = {},
-    children,
-    className,
-    container,
-    data = {},
-    htmlOptions = {},
-    id,
-    dragId,
-    tag="div"
-  } = props;
+  const { aria = {}, children, className, container, data = {}, htmlOptions = {},  id, dragId, tag="div" } = props;
 
-  const {
-    isDragging,
-    handleDragStart,
-    handleDragEnter,
-    handleDragEnd,
-    dropZone = 'ghost',
-    dropZoneColor = 'neutral',
-    direction = 'horizontal'
-  } = DraggableContext();
-
-  const itemRef = React.useRef<HTMLElement>(null);
+  const { isDragging, handleDragStart, handleDragEnter, handleDragEnd } =
+    DraggableContext();
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
   const htmlProps = buildHtmlProps(htmlOptions);
-  const Tag: React.ReactElement | any = `${tag}`;
 
+  const Tag: React.ReactElement | any = `${tag}`;
+  
   const classes = classnames(
     buildCss("pb_draggable_item"),
     `${isDragging === dragId ? "is_dragging" : ""}`,
-    isDragging === dragId ? `drop_zone_${dropZone}` : "",
-    isDragging === dragId && dropZone !== 'ghost' ? `drop_zone_color_${dropZoneColor}` : '',
     globalProps(props),
     className
   );
 
-  // Enhanced drag start handler that preserves dimensions
-  const onDragStart = (e: React.DragEvent) => {
-    if (dropZone !== 'ghost' && itemRef.current) {
-      // Create a clone for the drag image
-      const clone = itemRef.current.cloneNode(true) as HTMLElement;
-
-      // Remove any classes that might affect appearance
-      clone.className = clone.className.replace(/drop_zone_[^ ]*/g, '');
-      clone.className = clone.className.replace(/is_dragging/g, '');
-
-      // Get the original dimensions
-      const rect = itemRef.current.getBoundingClientRect();
-
-      // Ensure it's styled properly but invisible on the page
-      clone.style.position = 'fixed';
-      clone.style.top = '-9999px';
-      clone.style.left = '-9999px';
-      clone.style.width = `${rect.width}px`;  // Preserve width
-      clone.style.height = `${rect.height}px`; // Preserve height
-      clone.style.opacity = '1';
-      clone.style.pointerEvents = 'none';
-
-      // Add to document temporarily
-      document.body.appendChild(clone);
-
-      // Set as drag image
-      e.dataTransfer.setDragImage(clone, e.clientX - rect.left, e.clientY - rect.top);
-
-      // Remove after a short delay
-      setTimeout(() => {
-        document.body.removeChild(clone);
-      }, 0);
-    }
-
-    // Call the original handler
-    handleDragStart(dragId, container);
-  };
-
   return (
     <Tag
         {...ariaProps}
@@ -109,8 +51,7 @@ const DraggableItem = (props: DraggableItemProps) => {
         key={dragId}
         onDragEnd={() => handleDragEnd()}
         onDragEnter={() => handleDragEnter(dragId, container)}
-        onDragStart={onDragStart}
-        ref={itemRef}
+        onDragStart={() => handleDragStart(dragId, container)}
     >
       {children}
     </Tag>

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

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

@@ -6,7 +6,6 @@ examples:
   - drawer_menu: Within Element
   - drawer_sizes: Sizes
   - drawer_overlay: Overlay
-  - drawer_breakpoints: Breakpoints
   - drawer_borders: Borders 
   
   

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

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

@@ -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 = [
     {