playbook_ui 13.33.1 → 13.34.0.pre.alpha.PLAY14143357

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

@@ -1,8 +1,7 @@
 /* eslint-disable react/jsx-handler-names */
-/* @flow */
 
 import React, { useState } from "react"
-import { Button, Dialog, Flex } from "../.."
+import { Button, Dialog, Flex } from "playbook-ui"
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)
@@ -133,33 +132,35 @@ const DialogStatus = () => {
               text={dialog.text}
               title={dialog.title}
           >
-          <Dialog.Footer
-              paddingBottom="md"
-              paddingX="md"
-          >
-            <If condition={!dialog.buttonTwoText}>
-              <Button
-                  fullWidth
-                  onClick={dialog.toggle}
-              >
-              {dialog.buttonOneText}
-              </Button>
-            </If>
-            <If condition={dialog.buttonTwoText}>
-              <Button
-                  onClick={dialog.toggle}
-                  paddingRight="xl"
-              >
-              {dialog.buttonOneText}
-              </Button>
-              <Button
-                  onClick={dialog.toggle}
-                  variant="secondary"
-              >
-              {dialog.buttonTwoText}
-              </Button>
-            </If>
-          </Dialog.Footer>
+            <Dialog.Footer
+                paddingBottom="md"
+                paddingX="md"
+            >
+              {!dialog.buttonTwoText && (
+                <Button
+                    fullWidth
+                    onClick={dialog.toggle}
+                >
+                {dialog.buttonOneText}
+                </Button>
+              )}
+              {dialog.buttonTwoText && (
+                <React.Fragment>
+                  <Button
+                      onClick={dialog.toggle}
+                      paddingRight="xl"
+                  >
+                  {dialog.buttonOneText}
+                  </Button>
+                  <Button
+                      onClick={dialog.toggle}
+                      variant="secondary"
+                  >
+                  {dialog.buttonTwoText}
+                  </Button>
+                </React.Fragment>
+              )}
+            </Dialog.Footer>
           </Dialog>
         ))}
       </Flex>

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Flex, Image, Draggable, DraggableProvider } from "../../";
+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

@@ -10,7 +10,7 @@ import {
   Body,
   Draggable,
   DraggableProvider,
-} from "../../";
+} 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

@@ -8,7 +8,7 @@ import {
   DraggableProvider,
   Card,
   Caption,
-} from "../../";
+} from "playbook-ui";
 
 // Initial items to be dragged
 const data = [

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { DraggableProvider, List, ListItem } from "../../";
+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,5 +1,5 @@
 import React, { useState } from "react";
-import { SelectableList, DraggableProvider } from "../../";
+import { SelectableList, DraggableProvider } from "playbook-ui";
 
 // Initial items to be dragged
 const data = [

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

@@ -8,7 +8,7 @@ import {
   List,
   ListItem,
   Card,
-} from "../";
+} from "playbook-ui";
 
 const testId = "draggable";
 

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -115,7 +115,7 @@
 
     &.error {
       [class*=pb_body_kit] {
-        margin-top: $space_xs / 2;
+        margin-top: calc($space_xs / 2);
       }
 
       [class*="dropdown_trigger_wrapper"] {

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown } from '../../'
+import { Dropdown } from 'playbook-ui'
 
 const DropdownError = (props) => {
     const [selectedOption, setSelectedOption] = useState()

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown, User, Badge, FlexItem } from '../..'
+import { Dropdown, User, Badge, FlexItem } from 'playbook-ui'
 
 const DropdownWithAutocomplete = (props) => {
 

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown, User, Badge, FlexItem, Avatar } from '../..'
+import { Dropdown, User, Badge, FlexItem, Avatar } from 'playbook-ui'
 
 const DropdownWithAutocompleteAndCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from '../../'
+import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from 'playbook-ui'
 
 const DropdownWithCustomDisplay = (props) => {
   const [selectedOption, setSelectedOption] = useState();

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
+import { Dropdown, Icon, Body, FlexItem, Flex } from 'playbook-ui'
 
 const DropdownWithCustomOptions = (props) => {
 

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

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

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from '../..'
+import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from 'playbook-ui'
 
 const DropdownWithCustomTrigger = (props) => {
 

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown, useDropdown, Button } from '../../'
+import { Dropdown, useDropdown, Button } from 'playbook-ui'
 
 const DropdownWithExternalControl = (props) => {
 const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);

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

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex  } from '../..'
+import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex  } from 'playbook-ui'
 
 const DropdownWithHook = (props) => {
 const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);

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

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

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -8,9 +8,13 @@
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value="<%= input_default_value %>" />
-        <input id="dropdown-form-validation" name="<%= object.name %>_form_validation" value="<%= input_default_value %>" style="display: none" <%= object.required ? "required" : ""%> />
-
+        <input 
+            data-default-value="<%= input_default_value %>" 
+            id="dropdown-selected-option" 
+            name="<%= object.name %>" 
+            style="display: none" 
+            <%= object.required ? "required" : ""%> 
+        />
         <% if content.present? %>
             <%= content.presence %>
             <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -29,7 +29,7 @@ module Playbook
       end
 
       def input_default_value
-        default_value.present? ? default_value.transform_keys(&:to_s) : ""
+        default_value.present? ? default_value.transform_keys(&:to_s)["id"] : ""
       end
 
       def options_with_blank

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -1,7 +1,7 @@
 import React from "react"
 import { render, screen } from "../utilities/test-utils"
 
-import { Dropdown, Icon } from '../'
+import { Dropdown, Icon } from 'playbook-ui'
 
 
 const testId = 'dropdown'

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

@@ -8,9 +8,9 @@ const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
 const UP_ARROW_SELECTOR = "#dropdown_close_icon";
 const OPTION_SELECTOR = "[data-dropdown-option-label]";
 const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
-const INPUT_FORM_VALIDATION = "#dropdown-form-validation";
 const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
 const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
+const DROPDOWN_INPUT = "#dropdown-selected-option";
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
@@ -47,14 +47,13 @@ export default class PbDropdown extends PbEnhancedElement {
 
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
-    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
-    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
 
     if (option) {
       const value = option.dataset.dropdownOptionLabel;
       hiddenInput.value = JSON.parse(value).id;
-      inputFormValidation.value = JSON.parse(value).id;
-      this.clearFormValidation(inputFormValidation);
+      this.clearFormValidation(hiddenInput);
+
       this.onOptionSelected(value, option);
     }
   }
@@ -160,14 +159,18 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   handleFormValidation() {
-    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
-
-    inputFormValidation.addEventListener("invalid", function (event) {
-      if (inputFormValidation.hasAttribute("required") && inputFormValidation.value === "") {
-        event.preventDefault();
-        inputFormValidation.closest(".dropdown_wrapper").classList.add("error");
-      }
-    }, true);
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+
+    hiddenInput.addEventListener(
+      "invalid",
+      function (event) {
+        if (hiddenInput.hasAttribute("required") && hiddenInput.value === "") {
+          event.preventDefault();
+          hiddenInput.closest(".dropdown_wrapper").classList.add("error");
+        }
+      },
+      true
+    );
   }
 
   clearFormValidation(input) {
@@ -175,7 +178,9 @@ export default class PbDropdown extends PbEnhancedElement {
       const dropdownWrapperElement = input.closest(".dropdown_wrapper");
       dropdownWrapperElement.classList.remove("error");
 
-      const errorLabelElement = dropdownWrapperElement.querySelector(".pb_body_kit_negative");
+      const errorLabelElement = dropdownWrapperElement.querySelector(
+        ".pb_body_kit_negative"
+      );
       if (errorLabelElement) {
         errorLabelElement.remove();
       }
@@ -183,23 +188,22 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   setDefaultValue() {
-    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+    const options = this.element.querySelectorAll(OPTION_SELECTOR);
 
-    if (hiddenInput.value) {
-      const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
-      const defaultValue = JSON.parse(hiddenInput.value.replaceAll("=>", ":"));
-      const options = this.element.querySelectorAll(OPTION_SELECTOR);
+    const defaultValue = hiddenInput.dataset.defaultValue || "";
+    hiddenInput.value = defaultValue;
 
-      options.forEach((option) => {
-        if (defaultValue.id === JSON.parse(option.dataset.dropdownOptionLabel).id) {
-          option.classList.add("pb_dropdown_option_selected");
-        }
+    if (defaultValue) {
+      const selectedOption = Array.from(options).find((option) => {
+        return (
+          JSON.parse(option.dataset.dropdownOptionLabel).id === defaultValue
+        );
       });
-
-      this.setTriggerElementText(defaultValue.label);
-
-      hiddenInput.value = defaultValue.id;
-      inputFormValidation.value = defaultValue.id;
+      selectedOption.classList.add("pb_dropdown_option_selected");
+      this.setTriggerElementText(
+        JSON.parse(selectedOption.dataset.dropdownOptionLabel).label
+      );
     }
   }
 
@@ -214,11 +218,13 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   resetDropdownValue() {
-    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
-    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
+    const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
+    const options = this.element.querySelectorAll(OPTION_SELECTOR);
+    options.forEach((option) => {
+      option.classList.remove("pb_dropdown_option_selected");
+    });
 
     hiddenInput.value = "";
-    inputFormValidation.value = "";
 
     const defaultPlaceholder = this.element.querySelector(DROPDOWN_PLACEHOLDER);
     this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder);

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx

@@ -1,13 +1,12 @@
-/* @flow */
 
 import React, { useState } from 'react'
 import {
   FileUpload,
   List,
   ListItem,
-} from '../..'
+} from 'playbook-ui'
 
-const AcceptedFilesList = ({ files }: FileList) => (
+const AcceptedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}>{file.name}</ListItem>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx

@@ -1,10 +1,9 @@
 /* eslint-disable react/no-multi-comp */
-/* @flow */
 
 import React, { useState } from "react";
-import { FileUpload, List, ListItem } from "../..";
+import { FileUpload, List, ListItem } from "playbook-ui";
 
-const AcceptedFilesList = ({ files }: FileList) => (
+const AcceptedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}>{file.name}</ListItem>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx

@@ -1,13 +1,12 @@
-/* @flow */
 
 import React, { useState } from 'react'
 import {
   FileUpload,
   List,
   ListItem,
-} from '../..'
+} from 'playbook-ui'
 
-const AcceptedFilesList = ({ files }: FileList) => (
+const AcceptedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}>{file.name}</ListItem>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx

@@ -1,13 +1,12 @@
-/* @flow */
 
 import React, { useState } from 'react'
 import {
   FileUpload,
   List,
   ListItem,
-} from '../..'
+} from 'playbook-ui'
 
-const AcceptedFilesList = ({ files }: FileList) => (
+const AcceptedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}>{file.name}</ListItem>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx

@@ -1,4 +1,3 @@
-/* @flow */
 /* eslint-disable react/no-multi-comp */
 
 import React, { useState } from 'react'
@@ -7,16 +6,16 @@ import {
   FileUpload,
   List,
   ListItem,
-} from '../..'
+} from 'playbook-ui'
 
-const AcceptedFilesList = ({ files }: FileList) => (
+const AcceptedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}>{file.name}</ListItem>
     ))}
   </List>
 )
-const RejectedFilesList = ({ files }: FileList) => (
+const RejectedFilesList = ({ files }) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../..'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 
 const FilterMaxHeight = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select } from '../../'
+import { Button, Filter, Flex, Select } from 'playbook-ui'
 
 const FilterMaxWidth = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 
 const FilterNoBackground = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 
 const FilterNoSort = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../../'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 
 const FilterOnly = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from '../..'
+import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
 
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

data/app/pb_kits/playbook/pb_filter/filter.test.js

@@ -4,7 +4,7 @@ import {
   screen,
   fireEvent,
 } from "../utilities/test-utils";
-import { Button, Filter, Flex, Select, TextInput } from "..";
+import { Button, Filter, Flex, Select, TextInput } from "playbook-ui";
 
 function FilterTest(props) {
   const SortingChangeCallback = (sortOptions) => {

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.test.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, waitFor } from '../utilities/test-utils'
 
-import { FixedConfirmationToast } from '../'
+import { FixedConfirmationToast } from 'playbook-ui'
 
 beforeEach(() => {
     // Silences error logs within the test suite.

data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from  '../..'
+import { Flex, FlexItem, Title } from 'playbook-ui'
 
 const FlexAlign = (props) => {
   return (

data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from  '../../'
+import { Flex, FlexItem, Title } from  'playbook-ui'
 
 const FlexDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem } from  '../../'
+import { Flex, FlexItem } from 'playbook-ui'
 
 const FlexGap = (props) => {
   const count = () => {

data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from  '../..'
+import { Flex, FlexItem, Title } from 'playbook-ui'
 
 const FlexInline = (props) => {
   return (

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from  '../..'
+import { Flex, FlexItem, Title } from 'playbook-ui'
 
 const FlexItemAlignSelf = (props) => {
   return (

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from  '../..'
+import { Flex, FlexItem, Title } from 'playbook-ui'
 
 const FlexItemExample = (props) => {
   return (

data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Flex, FlexItem, Title } from  '../..'
+import { Flex, FlexItem, Title } from 'playbook-ui'
 
 const FlexJustify = (props) => {
   return (