playbook_ui 14.15.0.pre.alpha.PBNTR477draggabledropzone6743 → 14.15.0.pre.alpha.PBNTR617addgriddisplayglobalprop6700

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

@@ -1,195 +1,11 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
 
-// Mixin for color variants
-@mixin drop-zone-colors($property) {
-  &.drop_zone_color_primary { #{$property}: $primary; }
-  &.drop_zone_color_secondary { #{$property}: $secondary; }
-  &.drop_zone_color_tertiary { #{$property}: $tertiary; }
-  &.drop_zone_color_success { #{$property}: $success; }
-  &.drop_zone_color_warning { #{$property}: $warning; }
-  &.drop_zone_color_error { #{$property}: $error; }
-  &.drop_zone_color_info { #{$property}: $info; }
-  &.drop_zone_color_royal { #{$property}: $royal; }
-  &.drop_zone_color_purple { #{$property}: $purple; }
-  &.drop_zone_color_teal { #{$property}: $teal; }
-  &.drop_zone_color_red { #{$property}: $red; }
-  &.drop_zone_color_yellow { #{$property}: $yellow; }
-  &.drop_zone_color_green { #{$property}: $green; }
-  &.drop_zone_color_orange { #{$property}: $orange; }
-}
-
-// Mixin for rgba color variants
-@mixin drop-zone-rgba-colors($property) {
-  &.drop_zone_color_primary { #{$property}: rgba($primary, $opacity_3); }
-  &.drop_zone_color_secondary { #{$property}: rgba($secondary, $opacity_3); }
-  &.drop_zone_color_tertiary { #{$property}: rgba($tertiary, $opacity_3); }
-  &.drop_zone_color_success { #{$property}: rgba($success, $opacity_3); }
-  &.drop_zone_color_warning { #{$property}: rgba($warning, $opacity_3); }
-  &.drop_zone_color_error { #{$property}: rgba($error, $opacity_3); }
-  &.drop_zone_color_info { #{$property}: rgba($info, $opacity_3); }
-  &.drop_zone_color_royal { #{$property}: rgba($royal, $opacity_3); }
-  &.drop_zone_color_purple { #{$property}: rgba($purple, $opacity_3); }
-  &.drop_zone_color_teal { #{$property}: rgba($teal, $opacity_3); }
-  &.drop_zone_color_red { #{$property}: rgba($red, $opacity_3); }
-  &.drop_zone_color_yellow { #{$property}: rgba($yellow, $opacity_3); }
-  &.drop_zone_color_green { #{$property}: rgba($green, $opacity_3); }
-  &.drop_zone_color_orange { #{$property}: rgba($orange, $opacity_3); }
-}
-
 .pb_draggable_container {
-  .pb_draggable_item {
-    &:hover {
-      cursor: grab;
-    }
-
-    &.is_dragging {
-      position: relative;
-
-      // Ghost variant - show the item at 50% opacity. Default behavior.
-      &.drop_zone_ghost {
-        opacity: $opacity_4;
-      }
-
-      // Outline variant
-      &.drop_zone_outline {
-        // Don't hide the content, only make it transparent
-        // This allows the browser to create a proper drag image
-        opacity: $opacity_5;
-
-        // Add outline
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          border: 2px dashed $neutral;
-          border-radius: $border-radius-sm;
-          box-sizing: border-box;
-          z-index: 10;
-        }
-
-        // Apply color variants to the ::before element
-        &.drop_zone_color_primary::before { border-color: $primary; }
-        &.drop_zone_color_secondary::before { border-color: $secondary; }
-        &.drop_zone_color_tertiary::before { border-color: $tertiary; }
-        &.drop_zone_color_success::before { border-color: $success; }
-        &.drop_zone_color_warning::before { border-color: $warning; }
-        &.drop_zone_color_error::before { border-color: $error; }
-        &.drop_zone_color_info::before { border-color: $info; }
-        &.drop_zone_color_royal::before { border-color: $royal; }
-        &.drop_zone_color_purple::before { border-color: $purple; }
-        &.drop_zone_color_teal::before { border-color: $teal; }
-        &.drop_zone_color_red::before { border-color: $red; }
-        &.drop_zone_color_yellow::before { border-color: $yellow; }
-        &.drop_zone_color_green::before { border-color: $green; }
-        &.drop_zone_color_orange::before { border-color: $orange; }
-      }
-
-      // Shadow variant
-      &.drop_zone_shadow {
-        // Don't hide the content, only make it transparent
-        // This allows the browser to create a proper drag image
-        & > * {
-          opacity: 0;
-        }
-
-        // Add shadow background
-        &::before {
-          content: '';
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          background-color: rgba($neutral, $opacity_5);
-          border-radius: $border-radius-sm;
-          z-index: 10;
-        }
-
-        // Apply rgba color variants to the ::before element
-        &.drop_zone_color_primary::before { background-color: rgba($primary, $opacity_5); }
-        &.drop_zone_color_secondary::before { background-color: rgba($secondary, $opacity_5); }
-        &.drop_zone_color_tertiary::before { background-color: rgba($tertiary, $opacity_5); }
-        &.drop_zone_color_success::before { background-color: rgba($success, $opacity_5); }
-        &.drop_zone_color_warning::before { background-color: rgba($warning, $opacity_5); }
-        &.drop_zone_color_error::before { background-color: rgba($error, $opacity_5); }
-        &.drop_zone_color_info::before { background-color: rgba($info, $opacity_5); }
-        &.drop_zone_color_royal::before { background-color: rgba($royal, $opacity_5); }
-        &.drop_zone_color_purple::before { background-color: rgba($purple, $opacity_5); }
-        &.drop_zone_color_teal::before { background-color: rgba($teal, $opacity_5); }
-        &.drop_zone_color_red::before { background-color: rgba($red, $opacity_5); }
-        &.drop_zone_color_yellow::before { background-color: rgba($yellow, $opacity_5); }
-        &.drop_zone_color_green::before { background-color: rgba($green, $opacity_5); }
-        &.drop_zone_color_orange::before { background-color: rgba($orange, $opacity_5); }
-      }
-
-      // Line variant - vertical by default (for horizontal layouts)
-      &.drop_zone_line {
-        // Keep original height but reduce width
-        width: 10% !important;
-        max-width: 10px !important;
-        position: relative;
-
-        // Hide all content
-        & > * {
-          opacity: 0;
-        }
-
-        // Add vertical line that takes the full height
-        &::before {
-          content: '';
-          position: absolute;
-          left: 0;
-          top: 0;
-          width: 4px;
-          height: 100%;
-          background-color: $neutral;
-          border-radius: 1000px;
-        }
-
-        // Apply color variants to the ::before element
-        &.drop_zone_color_primary::before { background-color: $primary; }
-        &.drop_zone_color_secondary::before { background-color: $secondary; }
-        &.drop_zone_color_tertiary::before { background-color: $tertiary; }
-        &.drop_zone_color_success::before { background-color: $success; }
-        &.drop_zone_color_warning::before { background-color: $warning; }
-        &.drop_zone_color_error::before { background-color: $error; }
-        &.drop_zone_color_info::before { background-color: $info; }
-        &.drop_zone_color_royal::before { background-color: $royal; }
-        &.drop_zone_color_purple::before { background-color: $purple; }
-        &.drop_zone_color_teal::before { background-color: $teal; }
-        &.drop_zone_color_red::before { background-color: $red; }
-        &.drop_zone_color_yellow::before { background-color: $yellow; }
-        &.drop_zone_color_green::before { background-color: $green; }
-        &.drop_zone_color_orange::before { background-color: $orange; }
-      }
-    }
+  .is_dragging {
+    opacity: $opacity_4;
   }
-}
-
-// Support for vertical layouts (horizontal line)
-.pb_draggable_container.vertical {
-  .pb_draggable_item {
-    &.is_dragging {
-      // Line variant for vertical layouts (horizontal line)
-      &.drop_zone_line {
-        // Keep original width but reduce height
-        width: 100% !important;
-        max-width: 200px !important;
-        height: 10% !important;
-        max-height: 10px !important;
-
-        // Add horizontal line that takes the full width
-        &::before {
-          width: 100%;
-          height: 4px;
-        }
-
-        // The color variants are already applied from above
-      }
-    }
+  .pb_draggable_item:hover {
+    cursor: grab;
   }
-}
+}

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?: string; // This will accept color tokens like 'neutral', 'primary', etc.
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
 };
@@ -22,10 +20,8 @@ const Draggable = (props: DraggableProps) => {
     className,
     children,
     data = {},
-    dropZone = 'ghost',
-    dropZoneColor = 'neutral',
     htmlOptions = {},
-    id
+    id,
   } = props;
 
 
@@ -39,23 +35,14 @@ const Draggable = (props: DraggableProps) => {
     className
   );
 
-  // Pass down the dropZone and dropZoneColor props to children
-  const childrenWithProps = React.Children.map(children, child => {
-    if (React.isValidElement(child)) {
-      return React.cloneElement(child, { dropZone, dropZoneColor });
-    }
-    return child;
-  });
-
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
+    <div {...ariaProps} 
+        {...dataProps} 
         {...htmlProps}
-        className={classes}
+        className={classes} 
         id={id}
     >
-      {childrenWithProps}
+      {children}
     </div>
   );
 };

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

@@ -51,18 +51,15 @@ export const DraggableContext = () => {
   return useContext(DragContext);
 };
 
-export const DraggableProvider = ({
-  children,
-  initialItems,
+export const DraggableProvider = ({ 
+  children, 
+  initialItems, 
   onReorder,
-  onDragStart,
-  onDragEnter,
-  onDragEnd,
-  onDrop,
-  onDragOver,
-  dropZone = 'ghost',
-  dropZoneColor = 'neutral',
-  dropZoneDirection = 'horizontal'
+  onDragStart, 
+  onDragEnter, 
+  onDragEnd, 
+  onDrop, 
+  onDragOver 
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -116,15 +113,12 @@ export const DraggableProvider = ({
     dragData: state.dragData,
     isDragging: state.isDragging,
     activeContainer: state.activeContainer,
-    dropZone,
-    dropZoneColor,
-    dropZoneDirection,
     handleDragStart,
     handleDragEnter,
     handleDragEnd,
     handleDrop,
     handleDragOver
-  }), [state, dropZone, dropZoneColor, dropZoneDirection]);
+  }), [state]);
 
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>

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

@@ -1,34 +1,31 @@
 export interface ItemType {
-  id: string;
-  container: string;
-  [key: string]: any;
-}
+    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 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?: 'ghost' | 'outline' | 'shadow' | 'line';
-    dropZoneColor?: string;
-    dropZoneDirection?: 'horizontal' | 'vertical';
-  }
+    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,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

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

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

@@ -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_draggable/subcomponents/DraggableContainer.tsx

@@ -22,17 +22,18 @@ type DraggableContainerProps = {
 
 const DraggableContainer = (props: DraggableContainerProps) => {
   const { aria = {}, children, className, container, data = {}, htmlOptions = {}, id, tag="div" } = props;
-  const { handleDragOver, handleDrop, activeContainer, dropZoneDirection = 'horizontal' } = DraggableContext();
+
+  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" : ""}`,
-    dropZoneDirection === 'vertical' ? 'vertical' : '',
     globalProps(props),
     className
   );

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

@@ -22,52 +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'
-  } = 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
   );
 
-  // Custom drag start handler
-  const onDragStart = (e: React.DragEvent) => {
-    // Call the original handler
-    handleDragStart(dragId, container);
-
-    // For dropZone="ghost", we don't need to do anything special
-    // For other variants, we'll let the CSS handle it
-  };
-
   return (
     <Tag
         {...ariaProps}
@@ -79,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.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_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 = [
     {