playbook_ui 15.5.0.pre.alpha.draggablefix12589 → 15.5.0.pre.rc.0

data/app/pb_kits/playbook/pb_date_time/date_time.html.erb

@@ -9,7 +9,6 @@
         dark: object.dark,
         date: object.date,
         show_day_of_week: object.show_day_of_week,
-        show_current_year: object.show_current_year,
         size: object.size,
         timezone: object.timezone,
       }) %>

data/app/pb_kits/playbook/pb_date_time/date_time.rb

@@ -16,7 +16,6 @@ module Playbook
       prop :dark, type: Playbook::Props::Boolean, default: false
       prop :show_icon, type: Playbook::Props::Boolean, default: false
       prop :show_day_of_week, type: Playbook::Props::Boolean, default: false
-      prop :show_current_year, type: Playbook::Props::Boolean, default: false
 
       def classname
         generate_classname("pb_date_time_kit", align)

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

@@ -1,16 +1,14 @@
 examples:
-
+  
   rails:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
-  - date_time_show_current_year: Show Current Year
 
   react:
   - date_time_default: Default
   - date_time_align: Alignment
   - date_time_size: Size
-  - date_time_show_current_year: Show Current Year
 
   swift:
   - date_time_default_swift: Default

data/app/pb_kits/playbook/pb_date_time/docs/index.js

@@ -1,4 +1,3 @@
 export { default as DateTimeDefault } from './_date_time_default.jsx'
 export { default as DateTimeAlign } from './_date_time_align.jsx'
 export { default as DateTimeSize } from './_date_time_size.jsx'
-export { default as DateTimeShowCurrentYear } from './_date_time_show_current_year.jsx'

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -17,7 +17,6 @@ type DateTimeStackedProps = {
   datetime: Date,
   dark: boolean,
   timeZone?: string,
-  showCurrentYear?: boolean,
 }
 
 const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
@@ -29,7 +28,6 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
     dark,
     htmlOptions = {},
     timeZone = 'America/New_York',
-    showCurrentYear = false,
   } = props
 
   const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
@@ -48,7 +46,6 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
             bold
             dark={dark}
             date={date || datetime}
-            showCurrentYear={showCurrentYear}
         />
       </FlexItem>
 

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.html.erb

@@ -1,8 +1,8 @@
-  <%= pb_content_tag do %>
+<%= pb_content_tag do %>
 
   <%= pb_rails("flex", props: {classname: "flex-container", vertical: "stretch"}) do %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>
-        <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark, show_current_year: object.show_current_year }) %>
+        <%= pb_rails("date_stacked", props: { date: object.date_time_value, size: "sm", align: "right", bold: true, dark: object.dark }) %>
       <% end %>
       <%= pb_rails("section_separator", props: { orientation: "vertical", classname: "date-time-padding" }) %>
       <%= pb_rails("body", props: {classname: "flex-item"}) do %>

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb

@@ -10,8 +10,6 @@ module Playbook
                   default: false
       prop :timezone, type: Playbook::Props::String,
                       default: "America/New_York"
-      prop :show_current_year, type: Playbook::Props::Boolean,
-                               default: false
 
       def date_time_value
         date || date_time

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -41,36 +41,3 @@ test('renders time in timezone', () => {
   const kit = renderKit(DateTimeStacked, props)
   expect(kit).toHaveTextContent(`${monthDayYear}11:00aMDT`)
 })
-
-test('renders current year when showCurrentYear is true', () => {
-  const currentYearDate = new Date()
-  const currentYear = currentYearDate.getFullYear()
-  
-  const kit = renderKit(DateTimeStacked, {
-    data: { testid: 'datetimestacked-current-year' },
-    datetime: currentYearDate,
-    dark: false,
-    showCurrentYear: true,
-  })
-  expect(kit).toHaveTextContent(currentYear.toString())
-})
-
-test('hides current year by default', () => {
-  const currentYearDate = new Date()
-  const currentYear = currentYearDate.getFullYear()
-  
-  const kit = renderKit(DateTimeStacked, {
-    data: { testid: 'datetimestacked-hide-year' },
-    datetime: currentYearDate,
-    dark: false,
-  })
- 
-  const yearElement = kit.querySelector('.pb_caption_kit_xs')
-
-  if (yearElement) {
-    expect(yearElement.textContent).not.toBe(currentYear.toString())
-  } else {
-
-    expect(yearElement).toBeNull()
-  }
-})

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

@@ -2,11 +2,9 @@ examples:
 
   rails:
   - date_time_stacked_default: Default
-  - date_time_stacked_show_current_year: Show Current Year
-
+  
   react:
   - date_time_stacked_default: Default
-  - date_time_stacked_show_current_year: Show Current Year
   
   swift:
   - date_time_stacked_default_swift: Default

data/app/pb_kits/playbook/pb_date_time_stacked/docs/index.js

@@ -1,2 +1 @@
 export { default as DateTimeStackedDefault } from './_date_time_stacked_default.jsx'
-export { default as DateTimeStackedShowCurrentYear } from './_date_time_stacked_show_current_year.jsx'

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,7 +1,7 @@
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
-  <%= pb_form_with(scope: :example, method: :get, url: "", options: { remote: true }) do |form| %>
+  <form>
     <%= pb_rails("dialog/dialog_header", props: { id: "dialog-complex" } ) do %>
         <%= pb_rails("body", props: { text: "What do you need us to take care of?" }) %>
     <% end %>
@@ -13,5 +13,5 @@
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>
-  <% end %>
+  </form>
 <% end %>

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

@@ -39,59 +39,6 @@ const reducer = (state: InitialStateType, action: ActionType) => {
 
       return { ...state, items: newItems };
     }
-
-    // Used only when enableCrossContainerPreview is true
-    case "REORDER_ITEMS_CROSS_CONTAINER": {
-      const { dragId, targetId, newContainer } = action.payload;
-      const newItems = [...state.items];
-      const draggedItem = newItems.find((item) => item && item.id === dragId);
-
-      if (!draggedItem) return state;
-
-      const draggedIndex = newItems.indexOf(draggedItem);
-      const targetIndex = newItems.findIndex(
-        (item) => item && item.id === targetId
-      );
-
-      if (draggedIndex === -1 || targetIndex === -1) return state;
-
-      const updatedItem = { ...draggedItem, container: newContainer };
-      newItems.splice(draggedIndex, 1);
-      newItems.splice(targetIndex, 0, updatedItem);
-
-      return { ...state, items: newItems };
-    }
-
-    // Used only when enableCrossContainerPreview is true
-    case "MOVE_TO_CONTAINER_END": {
-      const { dragId, newContainer } = action.payload;
-      const newItems = [...state.items];
-      const draggedItem = newItems.find((item) => item && item.id === dragId);
-
-      if (!draggedItem) return state;
-
-      const draggedIndex = newItems.indexOf(draggedItem);
-      if (draggedIndex === -1) return state;
-
-      const updatedItem = { ...draggedItem, container: newContainer };
-
-      // Remove from current position
-      newItems.splice(draggedIndex, 1);
-
-      // Insert at end of target container
-      const lastIndexInContainer = newItems
-        .map((item) => item && item.container)
-        .lastIndexOf(newContainer);
-
-      if (lastIndexInContainer === -1) {
-        newItems.push(updatedItem);
-      } else {
-        newItems.splice(lastIndexInContainer + 1, 0, updatedItem);
-      }
-
-      return { ...state, items: newItems };
-    }
-
     default:
       return state;
   }
@@ -114,9 +61,7 @@ export const DraggableProvider = ({
   onDrop,
   onDragOver,
   dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' },
-  providerId = 'default', // fallback provided for backward compatibility
-  // Opt-in flag for cross-container preview
-  enableCrossContainerPreview = false,
+  providerId = 'default', // fallback provided for backward compatibility, so this does not become a required prop
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -158,74 +103,17 @@ export const DraggableProvider = ({
     if (state.dragData.originId !== providerId) return; // Ignore drag events from other providers
 
     if (state.dragData.id !== id) {
-      if (enableCrossContainerPreview) {
-        // Used only when enableCrossContainerPreview is true
-        const draggedItem = state.items.find(
-          (item) => item && item.id === state.dragData.id
-        );
-        const currentContainer =
-          draggedItem && draggedItem.container
-            ? draggedItem.container
-            : state.dragData.initialGroup;
-
-        const isCrossContainer =
-          currentContainer !== container &&
-          (currentContainer !== undefined || container !== undefined);
-
-        if (isCrossContainer) {
-          dispatch({
-            type: "REORDER_ITEMS_CROSS_CONTAINER",
-            payload: {
-              dragId: state.dragData.id,
-              targetId: id,
-              newContainer: container,
-            },
-          });
-        } else {
-          // Same container: keep original behavior
-          dispatch({
-            type: "REORDER_ITEMS",
-            payload: { dragId: state.dragData.id, targetId: id },
-          });
-        }
-      } else {
-        // Original behavior (no preview across containers)
-        dispatch({type: "REORDER_ITEMS", payload: { dragId: state.dragData.id, targetId: id }});
-      }
-
-      dispatch({type: "SET_DRAG_DATA",payload: {id: state.dragData.id, initialGroup: container, originId: providerId}});
+      dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
     }
     if (onDragEnter) onDragEnter(id, container);
   };
 
   const handleDragEnd = () => {
-    const draggedItemId = state.dragData.id;
-    const originalContainer = state.dragData.initialGroup;
-    
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
-    if (onDragEnd) {
-      if (!enableCrossContainerPreview) {
-        onDragEnd();
-      } else {
-        const draggedItem = state.items.find(item => item && item.id === draggedItemId);
-        const finalContainer = draggedItem ? draggedItem.container : originalContainer;
-        
-        const itemsInContainer = state.items.filter(item => item && item.container === finalContainer);
-        const indexInContainer = itemsInContainer.findIndex(item => item && item.id === draggedItemId);
-        const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
-        const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
-        
-        onDragEnd(
-          draggedItemId,
-          finalContainer,
-          originalContainer,
-          itemAbove,
-          itemBelow
-        );
-      }
-    }
+    if (onDragEnd) onDragEnd();
   };
 
   const changeCategory = (itemId: string, container: string) => {
@@ -235,34 +123,10 @@ export const DraggableProvider = ({
   const handleDrop = (container: string) => {
     if (state.dragData.originId !== providerId) return; // Ignore drop events from other providers
 
-    const draggedItemId = state.dragData.id;
-    const originalContainer = state.dragData.initialGroup;
-
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     changeCategory(state.dragData.id, container);
-    if (onDrop) {
-      if (!enableCrossContainerPreview) {
-        onDrop(container);
-      } else {
-        const draggedItem = state.items.find(item => item && item.id === draggedItemId);
-        const updatedItem = draggedItem ? { ...draggedItem, container } : null;
-        
-        const itemsInContainer = state.items.filter(item => item && item.container === container);
-        const indexInContainer = itemsInContainer.findIndex(item => item && item.id === draggedItemId);
-        const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
-        const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
-        
-        onDrop(
-          draggedItemId,
-          container,
-          originalContainer,
-          updatedItem,
-          itemAbove,
-          itemBelow
-        );
-      }
-    }
+    if (onDrop) onDrop(container);
   };
 
   const handleDragOver = (e: Event, container: string) => {
@@ -270,20 +134,6 @@ export const DraggableProvider = ({
 
     e.preventDefault();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
-
-    if (enableCrossContainerPreview && state.dragData.id) {
-      // Only when enableCrossContainerPreview is true: when hovering over a different container, move item to end
-      const draggedItem = state.items.find(
-        (item) => item && item.id === state.dragData.id
-      );
-      if (draggedItem && draggedItem.container !== container) {
-        dispatch({
-          type: "MOVE_TO_CONTAINER_END",
-          payload: { dragId: state.dragData.id, newContainer: container },
-        });
-      }
-    }
-
     if (onDragOver) onDragOver(e, container);
   };
 
@@ -307,4 +157,4 @@ export const DraggableProvider = ({
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
   );
-};
+};

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

@@ -18,12 +18,8 @@ export type ActionType =
 } }
   | { type: 'SET_IS_DRAGGING'; payload: string }
   | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
-  | { type: 'SET_CROSS_CONTAINER_PREVIEW'; payload: boolean }
   | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
-  | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } }
-  | { type: 'REORDER_ITEMS_CROSS_CONTAINER'; payload: { dragId: string; targetId: string; newContainer: string } }
-  | { type: 'MOVE_TO_CONTAINER_END'; payload: { dragId: string; newContainer: string } }
-  | { type: 'RESET_DRAG_CONTAINER'; payload: { itemId: string; originalContainer: string } };
+  | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
 
   export interface DropZoneConfig {
     type?: 'ghost' | 'outline' | 'shadow' | 'line';
@@ -37,10 +33,9 @@ export type ActionType =
     onReorder: (items: ItemType[]) => void;
     onDragStart?: (id: string, container: string) => void;
     onDragEnter?: (id: string, container: string) => void;
-    onDragEnd?: (...args: any[]) => void;
-    onDrop?: (...args: any[]) => void;
+    onDragEnd?: () => void;
+    onDrop?: (container: string) => void;
     onDragOver?: (e: Event, container: string) => void;
     dropZone?: DropZoneConfig | string; // Can accept string for backward compatibility
     providerId?: string;
-    enableCrossContainerPreview?: boolean;
   }

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

@@ -5,12 +5,11 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
+  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
-  - draggable_multiple_containers: Dragging Across Multiple Containers
-  - draggable_multiple_containers_dropzone: Dragging Across Multiple Containers with Dropzones
 
   rails:
   - draggable_default: Default
@@ -18,8 +17,8 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
+  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
-  - draggable_multiple_containers: Dragging Across Multiple Containers

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

@@ -7,5 +7,4 @@ export { default as DraggableWithTable } from './_draggable_with_table.jsx'
 export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
 export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
 export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
-export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
-export { default as DraggableMultipleContainersDropzone } from './_draggable_multiple_containers_dropzone.jsx'
+export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -255,80 +255,4 @@ test("line dropZone with horizontal direction applies 'line_horizontal' class to
   const container = kit.querySelector(".pb_draggable_container");
   
   expect(container).toHaveClass("line_horizontal");
-});
-
-// Cross-container drag tests
-const multiContainerData = [
-  { id: "1", container: "To Do", text: "Task 1" },
-  { id: "2", container: "To Do", text: "Task 2" },
-  { id: "3", container: "In Progress", text: "Task 3" },
-  { id: "4", container: "Done", text: "Task 4" },
-];
-
-const containers = ["To Do", "In Progress", "Done"];
-
-const DraggableMultipleContainers = () => {
-  const [initialState, setInitialState] = useState(multiContainerData);
-
-  return (
-    <div data-testid={testId}>
-      <DraggableProvider
-          dropZone={{ type: "outline" }}
-          initialItems={multiContainerData}
-          onReorder={(items) => setInitialState(items)}
-      >
-        {containers.map((container) => (
-          <Draggable.Container
-              container={container}
-              data={{testid:`container-${container}`}}
-              key={container}
-          >
-            {initialState
-              .filter((item) => item.container === container)
-              .map(({ id, text }) => (
-                <Draggable.Item
-                    container={container}
-                    data-testid={`item-${id}`}
-                    dragId={id}
-                    key={id}
-                >
-                  {text}
-                </Draggable.Item>
-              ))}
-          </Draggable.Container>
-        ))}
-      </DraggableProvider>
-    </div>
-  );
-};
-
-test("renders multiple containers with correct items", () => {
-  render(<DraggableMultipleContainers />);
-  
-  const kit = screen.getByTestId(testId);
-  expect(kit).toBeInTheDocument();
-  
-  containers.forEach((container) => {
-    const containerEl = kit.querySelector(`[data-testid="container-${container}"]`);
-    expect(containerEl).toBeInTheDocument();
-  });
-  
-  // Check items are in correct containers
-  expect(screen.getByText("Task 1")).toBeInTheDocument();
-  expect(screen.getByText("Task 2")).toBeInTheDocument();
-  expect(screen.getByText("Task 3")).toBeInTheDocument();
-  expect(screen.getByText("Task 4")).toBeInTheDocument();
-});
-
-test("items have correct container association", () => {
-  const { container } = render(<DraggableMultipleContainers />);
-  
-  // items rendered within their respective containers
-  const todoContainer = container.querySelector('[data-testid="container-To Do"]');
-  const inProgressContainer = container.querySelector('[data-testid="container-In Progress"]');
-  const doneContainer = container.querySelector('[data-testid="container-Done"]');
-  
-  expect(todoContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(2);
-  expect(inProgressContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(1);
-  expect(doneContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(1);
-})
+});

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -33,8 +33,6 @@ export default class PbDropdown extends PbEnhancedElement {
     this.formPillProps = this.element.dataset.formPillProps
       ? JSON.parse(this.element.dataset.formPillProps)
       : {};
-    const baseInput = this.element.querySelector(DROPDOWN_INPUT);
-    this.wasOriginallyRequired = baseInput && baseInput.hasAttribute("required");
     this.setDefaultValue();
     this.bindEventListeners();
     this.bindSearchInput();
@@ -358,6 +356,17 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   clearFormValidation(input) {
+    if (input.checkValidity()) {
+      const dropdownWrapperElement = input.closest(".dropdown_wrapper");
+      dropdownWrapperElement.classList.remove("error");
+
+      const errorLabelElement = dropdownWrapperElement.querySelector(
+        ".pb_body_kit_negative"
+      );
+      if (errorLabelElement) {
+        errorLabelElement.remove();
+      }
+    }
     if (this.isMultiSelect) {
       if (this.selectedOptions.size > 0) {
         const dropdownWrapperElement = input.closest(".dropdown_wrapper");
@@ -368,19 +377,6 @@ export default class PbDropdown extends PbEnhancedElement {
         if (errorLabelElement) {
           errorLabelElement.remove();
         }
-        return;
-      }
-    }
-    
-    if (input.checkValidity()) {
-      const dropdownWrapperElement = input.closest(".dropdown_wrapper");
-      dropdownWrapperElement.classList.remove("error");
-
-      const errorLabelElement = dropdownWrapperElement.querySelector(
-        ".pb_body_kit_negative"
-      );
-      if (errorLabelElement) {
-        errorLabelElement.remove();
       }
     }
   }
@@ -589,9 +585,7 @@ export default class PbDropdown extends PbEnhancedElement {
     // for multi_select, for each selectedOption, create a hidden input
     const name = baseInput.getAttribute("name");
     this.selectedOptions.forEach((raw) => {
-      const optionData = JSON.parse(raw);
-      // Use id if available, otherwise fall back to value
-      const id = optionData.id || optionData.value;
+      const id = JSON.parse(raw).id;
       const inp = document.createElement("input");
       inp.type = "hidden";
       inp.name = name;
@@ -599,19 +593,7 @@ export default class PbDropdown extends PbEnhancedElement {
       inp.dataset.generated = "true";
       baseInput.insertAdjacentElement("afterend", inp);
     });
-    
-    // For multi-select, remove required from base input when there are selections
-    // The generated inputs handle the form submission with actual values
-    // Restore required attribute when there are no selections (if it was originally required)
-    if (this.selectedOptions.size > 0) {
-      baseInput.value = "";
-      baseInput.removeAttribute("required");
-    } else {
-      baseInput.value = "";
-      if (this.wasOriginallyRequired) {
-        baseInput.setAttribute("required", "");
-      }
-    }
+    baseInput.value = "";
   }
 
   handleBackspaceClear() {

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import EmptyState from '../_empty_state'
-import Flex from '../../pb_flex/_flex'
+import { EmptyState, Flex } from 'playbook-ui'
 
 const EmptyStateAlignment = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import EmptyState from '../_empty_state'
-import Flex from '../../pb_flex/_flex'
+import { EmptyState, Flex } from 'playbook-ui'
 
 const EmptyStateDefault = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import EmptyState from '../_empty_state'
-import Flex from '../../pb_flex/_flex'
+import { EmptyState, Flex } from 'playbook-ui'
 
 const EmptyStateOrientation = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import EmptyState from '../_empty_state'
-import Flex from '../../pb_flex/_flex'
+import { EmptyState, Flex } from 'playbook-ui'
 
 const EmptyStateSize = (props) => (
   <Flex align="center"

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

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

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import LoadingInline from '../_loading_inline'
+import { LoadingInline } from 'playbook-ui'
 
 const LoadingInlineVariant = (props) => {
   return (

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_description.md

@@ -1,5 +1,3 @@
-**In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo.**
-
-This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. Once 'highcharts' and 'highcharts-react-official are installed into your repo, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
+This kit is a wrapper around the Highcharts library. It applies styling and default settings but does NOT ship Highcharts. In order to use this kit, 'highcharts' and 'highcharts-react-official' must be installed in your repo. Once done, any prop or functionality provided by Highcharts can be used with this kit without requiring specific props from Playbook. The doc examples below showcase a few common usecases but are not a comprehensive list of all the functionalities possible. 
 
 See the [highcharts API docs](https://api.highcharts.com/highcharts/) for a comprehensive look at what is possible.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import PbBarGraph from '../_pb_bar_graph'
+import { PbBarGraph } from 'playbook-ui'
 import colors from '../../tokens/exports/_colors.module.scss'
 
 const chartData = [{