playbook_ui 13.32.0.pre.alpha.PLAY14143297 → 13.32.0.pre.alpha.play1416movealiaslogic3239

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

@@ -1,6 +1,7 @@
+/* @flow */
 
 import React, { useState } from 'react'
-import { Button, Dialog, Flex } from 'playbook-ui'
+import { Button, Dialog, Flex } from '../../'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useState } from "react"
-import { Button, Dialog, Flex} from "playbook-ui"
+import { Button, Dialog, Flex} from "../.."
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

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

@@ -1,7 +1,8 @@
 /* eslint-disable react/jsx-handler-names */
+/* @flow */
 
 import React, { useState } from "react"
-import { Button, Dialog, Flex } from "playbook-ui"
+import { Button, Dialog, Flex } from "../.."
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)
@@ -132,35 +133,33 @@ const DialogStatus = () => {
               text={dialog.text}
               title={dialog.title}
           >
-            <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.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>
         ))}
       </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 "playbook-ui";
+import { Flex, Image, Draggable, DraggableProvider } from "../../";
 
 // 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 "playbook-ui";
+} from "../../";
 
 // 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 "playbook-ui";
+} from "../../";
 
 // 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 "playbook-ui";
+import { DraggableProvider, List, ListItem } from "../../";
 
 // 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 "playbook-ui";
+import { SelectableList, DraggableProvider } from "../../";
 
 // 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 "playbook-ui";
+} from "../";
 
 const testId = "draggable";
 

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

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

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

@@ -22,12 +22,10 @@ import {
 type DropdownProps = {
     aria?: { [key: string]: string };
     autocomplete?: boolean;
-    blankSelection?: string;
     children?: React.ReactChild[] | React.ReactChild | React.ReactElement[];
     className?: string;
     dark?: boolean;
     data?: { [key: string]: string };
-    defaultValue?: GenericObject;
     error?: string;
     htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
     id?: string;
@@ -42,12 +40,10 @@ const Dropdown = (props: DropdownProps) => {
     const {
         aria = {},
         autocomplete = false,
-        blankSelection = '',
         children,
         className,
         dark = false,
         data = {},
-        defaultValue = {},
         error,
         htmlOptions = {},
         id,
@@ -70,7 +66,7 @@ const Dropdown = (props: DropdownProps) => {
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
     const [filterItem, setFilterItem] = useState("");
-    const [selected, setSelected] = useState<GenericObject>(defaultValue);
+    const [selected, setSelected] = useState<GenericObject>({});
     const [isInputFocused, setIsInputFocused] = useState(false);
     const [hasTriggerSubcomponent, setHasTriggerSubcomponent] = useState(true);
     const [hasContainerSubcomponent, setHasContainerSubcomponent] =
@@ -120,12 +116,11 @@ const Dropdown = (props: DropdownProps) => {
         setIsDropDownClosed(isClosed)
     }, [isClosed])
 
-    const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
-    const optionsWithBlankSelection = blankSelectionOption.concat(options);
-    const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
+    const filteredOptions = options?.filter((option: GenericObject) => {
         const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
         return String(label).toLowerCase().includes(filterItem.toLowerCase());
-    });    
+    }
+    );
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
@@ -199,7 +194,7 @@ const Dropdown = (props: DropdownProps) => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
-                    optionsWithBlankSelection,
+                    options,
                     selected,
                     setFocusedOptionIndex,
                     setIsDropDownClosed,
@@ -238,8 +233,8 @@ const Dropdown = (props: DropdownProps) => {
                         <>
                             <DropdownTrigger />
                             <DropdownContainer>
-                                {optionsWithBlankSelection &&
-                                    optionsWithBlankSelection?.map((option: GenericObject) => (
+                                {options &&
+                                    options?.map((option: GenericObject) => (
                                         <Dropdown.Option key={option.id}
                                             option={option}
                                         />

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

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

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Dropdown } from 'playbook-ui'
+import { Dropdown } from '../../'
 
 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 'playbook-ui'
+import { Dropdown } from '../..'
 
 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 'playbook-ui'
+import { Dropdown, User, Badge, FlexItem } from '../..'
 
 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 'playbook-ui'
+import { Dropdown, User, Badge, FlexItem, Avatar } from '../..'
 
 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 'playbook-ui'
+import { Dropdown, User, Flex, FlexItem, Badge, Avatar } from '../../'
 
 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 'playbook-ui'
+import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
 
 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 'playbook-ui'
+import { Dropdown } from '../..'
 
 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 'playbook-ui'
+import { Dropdown, Icon, Body, FlexItem, Flex, IconCircle } from '../..'
 
 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 'playbook-ui'
+import { Dropdown, useDropdown, Button } from '../../'
 
 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 'playbook-ui'
+import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex  } from '../..'
 
 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 'playbook-ui'
+import { Dropdown } from '../..'
 
 const DropdownDefault = (props) => {
 

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

@@ -8,8 +8,6 @@ examples:
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
-  - dropdown_default_value: Default Value
-  - dropdown_blank_selection: Blank Selection
 
   react:
   - dropdown_default: Default
@@ -20,8 +18,6 @@ examples:
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
-  - dropdown_default_value: Default Value
-  - dropdown_blank_selection: Blank Selection
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

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

@@ -9,6 +9,4 @@ export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
 export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
 export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
 export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
-export { default as DropdownError } from './_dropdown_error.jsx'
-export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
-export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
+export { default as DropdownError } from './_dropdown_error.jsx'

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

@@ -8,8 +8,8 @@
         <%= 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 type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value="" />
+        <input id="dropdown-form-validation" name="<%= object.name %>_form_validation" value="" style="display: none" <%= object.required ? "required" : ""%> />
 
         <% if content.present? %>
             <%= content.presence %>
@@ -17,8 +17,8 @@
         <% else %>
             <%= pb_rails("dropdown/dropdown_trigger") %>
             <%= pb_rails("dropdown/dropdown_container") do %>
-                <% if options_with_blank.present? %>
-                    <% options_with_blank.each do |option| %>
+                <% if object.options.present? %>
+                    <% object.options.each do |option| %>
                         <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
                     <% end %>
                 <% end %>

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

@@ -10,9 +10,6 @@ module Playbook
       prop :error, type: Playbook::Props::String
       prop :required, type: Playbook::Props::Boolean,
                       default: false
-      prop :default_value
-      prop :blank_selection, type: Playbook::Props::String,
-                             default: ""
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)
@@ -27,14 +24,6 @@ module Playbook
       def error_class
         error.present? ? " error" : ""
       end
-
-      def input_default_value
-        default_value.present? ? default_value.transform_keys(&:to_s) : ""
-      end
-
-      def options_with_blank
-        blank_selection.present? ? [{ id: "", value: "", label: blank_selection }] + options : options
-      end
     end
   end
 end

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 'playbook-ui'
+import { Dropdown, Icon } from '../'
 
 
 const testId = 'dropdown'

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

@@ -11,7 +11,7 @@ module Playbook
       prop :custom_display
 
       def data
-        Hash(prop(:data)).merge(dropdown_trigger: true, dropdown_placeholder: default_display_placeholder)
+        Hash(prop(:data)).merge(dropdown_trigger: true)
       end
 
       def classname

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

@@ -9,8 +9,6 @@ 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]";
 
 export default class PbDropdown extends PbEnhancedElement {
   static get selector() {
@@ -23,11 +21,9 @@ export default class PbDropdown extends PbEnhancedElement {
 
   connect() {
     this.keyboardHandler = new PbDropdownKeyboard(this);
-    this.setDefaultValue();
     this.bindEventListeners();
     this.updateArrowDisplay(false);
     this.handleFormValidation();
-    this.handleFormReset();
   }
 
   bindEventListeners() {
@@ -87,7 +83,9 @@ export default class PbDropdown extends PbEnhancedElement {
   }
 
   onOptionSelected(value, selectedOption) {
-    const triggerElement = this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);
+    const triggerElement = this.element.querySelector(
+      "#dropdown_trigger_display"
+    );
     const customDisplayElement = this.element.querySelector(
       "#dropdown_trigger_custom_display"
     );
@@ -181,53 +179,4 @@ export default class PbDropdown extends PbEnhancedElement {
       }
     }
   }
-
-  setDefaultValue() {
-    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
-
-    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);
-
-      options.forEach((option) => {
-        if (defaultValue.id === JSON.parse(option.dataset.dropdownOptionLabel).id) {
-          option.classList.add("pb_dropdown_option_selected");
-        }
-      });
-
-      this.setTriggerElementText(defaultValue.label);
-
-      hiddenInput.value = defaultValue.id;
-      inputFormValidation.value = defaultValue.id;
-    }
-  }
-
-  handleFormReset() {
-    const form = this.element.closest("form");
-
-    if (form) {
-      form.addEventListener("reset", () => {
-        this.resetDropdownValue();
-      });
-    }
-  }
-
-  resetDropdownValue() {
-    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
-    const inputFormValidation = this.element.querySelector(INPUT_FORM_VALIDATION);
-
-    hiddenInput.value = "";
-    inputFormValidation.value = "";
-
-    const defaultPlaceholder = this.element.querySelector(DROPDOWN_PLACEHOLDER);
-    this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder);
-  }
-
-  setTriggerElementText(text) {
-    const triggerElement = this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);
-    if (triggerElement) {
-      triggerElement.textContent = text;
-    }
-  }
 }

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

@@ -1,12 +1,13 @@
+/* @flow */
 
 import React, { useState } from 'react'
 import {
   FileUpload,
   List,
   ListItem,
-} from 'playbook-ui'
+} from '../..'
 
-const AcceptedFilesList = ({ files }) => (
+const AcceptedFilesList = ({ files }: FileList) => (
   <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,9 +1,10 @@
 /* eslint-disable react/no-multi-comp */
+/* @flow */
 
 import React, { useState } from "react";
-import { FileUpload, List, ListItem } from "playbook-ui";
+import { FileUpload, List, ListItem } from "../..";
 
-const AcceptedFilesList = ({ files }) => (
+const AcceptedFilesList = ({ files }: FileList) => (
   <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,12 +1,13 @@
+/* @flow */
 
 import React, { useState } from 'react'
 import {
   FileUpload,
   List,
   ListItem,
-} from 'playbook-ui'
+} from '../..'
 
-const AcceptedFilesList = ({ files }) => (
+const AcceptedFilesList = ({ files }: FileList) => (
   <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,12 +1,13 @@
+/* @flow */
 
 import React, { useState } from 'react'
 import {
   FileUpload,
   List,
   ListItem,
-} from 'playbook-ui'
+} from '../..'
 
-const AcceptedFilesList = ({ files }) => (
+const AcceptedFilesList = ({ files }: FileList) => (
   <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,3 +1,4 @@
+/* @flow */
 /* eslint-disable react/no-multi-comp */
 
 import React, { useState } from 'react'
@@ -6,16 +7,16 @@ import {
   FileUpload,
   List,
   ListItem,
-} from 'playbook-ui'
+} from '../..'
 
-const AcceptedFilesList = ({ files }) => (
+const AcceptedFilesList = ({ files }: FileList) => (
   <List>
     {files.map((file) => (
       <ListItem key={file.name}>{file.name}</ListItem>
     ))}
   </List>
 )
-const RejectedFilesList = ({ files }) => (
+const RejectedFilesList = ({ files }: FileList) => (
   <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 'playbook-ui'
+import { Button, Filter, Flex, Select, TextInput } from '../../'
 
 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 'playbook-ui'
+import { Button, Filter, Flex, Select, TextInput } from '../..'
 
 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 'playbook-ui'
+import { Button, Filter, Flex, Select } from '../../'
 
 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 'playbook-ui'
+import { Button, Filter, Flex, Select, TextInput } from '../../'
 
 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 'playbook-ui'
+import { Button, Filter, Flex, Select, TextInput } from '../../'
 
 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 'playbook-ui'
+import { Button, Filter, Flex, Select, TextInput } from '../../'
 
 const FilterOnly = (props) => {
   const options = [