RubyGems - playbook_ui - Versions diffs - 13.34.1 → 14.0.0.pre.alpha.PA1477timestampkit3502 - Mend

playbook_ui 13.34.1 → 14.0.0.pre.alpha.PA1477timestampkit3502

Files changed (462) hide show

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible } from '../..'
+import { Collapsible } from 'playbook-ui'
 const CollapsibleColor = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
 const CollapsibleCustomMain = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
 const CollapsibleCustomMainWithIcon = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible } from '../..'
+import { Collapsible } from 'playbook-ui'
 const CollapsibleSize = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { Collapsible, useCollapsible, Button } from '../..'
+import { Collapsible, useCollapsible, Button } from 'playbook-ui'
 const CollapsibleState = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_currency/docs/_currency_unstyled.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.scss'
-import typography from '../tokens/exports/_typography.scss'
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
 const dataColors = [
   colors.data_1,

data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import colors from "../tokens/exports/_colors.scss";
+import colors from "../tokens/exports/_colors.module.scss";
 // Map Data Color String Props to our SCSS Variables

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.scss'
-import typography from '../tokens/exports/_typography.scss'
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
 import { ThemeProps } from './themeTypes'

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.scss'
-import typography from '../tokens/exports/_typography.scss'
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
 import { ThemeProps } from './themeTypes'

data/app/pb_kits/playbook/pb_dashboard_value/dashboardValueSettings.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.scss'
-import typography from '../tokens/exports/_typography.scss'
+import colors from '../tokens/exports/_colors.module.scss'
+import typography from '../tokens/exports/_typography.module.scss'
 const pbIndicator = {
   title: {

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate } from '../..'
+import { Date as FormattedDate } from 'playbook-ui'
 const DateAlignment = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate, Caption, Title } from '../../'
+import { Date as FormattedDate, Caption, Title } from 'playbook-ui'
 const DateDefault = (props) => {
   return (
@@ -80,4 +80,4 @@ const DateDefault = (props) => {
 export default DateDefault
 // *Development Note* -  We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
-// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'
+// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from 'playbook-ui'

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Caption, Date as FormattedDate, Title } from '../../'
+import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
 const DateUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate } from '../..'
+import { Date as FormattedDate } from 'playbook-ui'
 const DateVariants = (props) => {
   return (

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { DatePicker, LabelValue } from '../..'
+import { DatePicker, LabelValue } from 'playbook-ui'
 const DatePickerOnChange = (props) => {
   const today = new Date()

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
-import { DatePicker,LabelValue } from '../..'
+import { DatePicker,LabelValue } from 'playbook-ui'
 const DatePickerOnClose = (props) => {

data/app/pb_kits/playbook/pb_date_picker/docs/_description.md CHANGED Viewed

@@ -6,4 +6,6 @@ Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a
 To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.
-The Date Picker works best with Javascript Date Objects or ISO Date strings.  If you're programming in js use Date Objects.  If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string.  For example, `DateTime.now.utc.iso8601`.  This ensures that the string passed to the Date Picker kit behaves as expected.
+The Date Picker works best with Javascript Date Objects or ISO Date strings.  If you're programming in js use Date Objects.  If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string.  For example, `DateTime.now.utc.iso8601`.  This ensures that the string passed to the Date Picker kit behaves as expected.
+The Date Picker expects a date format of `MM/DD/YYYY` by default. If a different date format (e.g. `DD/MM/YYYY`, `m/d/y`, etc.) is used, the component will not know how to handle it and use a default date instead. To change the date format used, read more [here](#format).

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss CHANGED Viewed

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

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss CHANGED Viewed

@@ -1,15 +1,13 @@
 @media (min-width: 500px) {
   .flatpickr-calendar {
     padding: $space_xs;
-    // width: 323.88px;
   }
   .dayContainer {
     width: 315.88px
   }
   .flatpickr-months {
-    margin-left: $space_xs / 4;
-    margin-top: $space_xs / 3;
-    // width: 323.88px;
+    margin-left: calc($space_xs / 4);
+    margin-top: calc($space_xs / 3);
   }
 }
 @media (max-width: 499px) {

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss CHANGED Viewed

@@ -21,14 +21,14 @@
     display: flex;
     align-items: center;
     [class*=pb_date_range_inline_arrow] {
-      margin-left: $space_xs/2;
-      margin-right: $space_xs/2;
+      margin-left: calc($space_xs/2);
+      margin-right: calc($space_xs/2);
     }
     [class*=pb_date_range_inline_timezone] {
-      margin-left: $space_xs/2;
+      margin-left: calc($space_xs/2);
     }
     [class*=pb_date_range_inline_icon] {
-      margin-right: $space_xs/2;
+      margin-right: calc($space_xs/2);
     }
   }
 }

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { DateRangeStacked } from '../../'
+import { DateRangeStacked } from 'playbook-ui'
 const DateRangeStackedDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss CHANGED Viewed

@@ -1,11 +1,11 @@
 [class^=pb_date_time_stacked] {
   [class^=padding_month] {
-    padding-bottom: ($space_xs + 2) !important;
+    padding-bottom: calc($space_xs + 2px) !important;
     }
   [class^=padding_day] {
-    padding-bottom: ($space_xs + 2) !important;
+    padding-bottom: calc($space_xs + 2px) !important;
   }
   &[class*=_dark] {
@@ -19,7 +19,7 @@
 }
 .date-time-padding {
-  padding-right: ($space_xs / 2);
-  padding-left: ($space_xs / 2);
+  padding-right: calc($space_xs / 2);
+  padding-left: calc($space_xs / 2);
 }

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

@@ -1,7 +1,6 @@
 import { ensureAccessible, renderKit } from '../utilities/test-utils'
-import { DateTimeStacked } from '../'
+import { DateTimeStacked } from 'playbook-ui'
-/* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
 const currentDate = new Date()
 const datetime = new Date('Wed Mar 31 2021 12:00:00 GMT-0500'),

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from '../..'
+import { Detail } from 'playbook-ui'
 const DetailBold = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from '../..'
+import { Detail } from 'playbook-ui'
 const DetailColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from '../..'
+import { Detail } from 'playbook-ui'
 const DetailDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React, {useState} from 'react'
 import { render, cleanup, waitFor, fireEvent } from "../utilities/test-utils";
-import { Dialog, Button } from '../'
+import { Dialog, Button } from 'playbook-ui'
 const text="Hello Body Text, Nice to meet ya."
 const title="Header Title is the Title Prop"

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx CHANGED Viewed

@@ -6,7 +6,7 @@ import {
   Dialog,
   RichTextEditor,
   Typeahead,
-} from '../../'
+} from 'playbook-ui'
 const DialogCompound = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from '../../'
+import { Button, Dialog } from 'playbook-ui'
 const DialogDefault = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx CHANGED Viewed

@@ -7,7 +7,7 @@ import {
   Flex,
   RichTextEditor,
   Typeahead,
-} from "../..";
+} from "playbook-ui";
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx CHANGED Viewed

@@ -7,7 +7,7 @@ import {
   Flex,
   RichTextEditor,
   Typeahead,
-} from "../..";
+} from "playbook-ui";
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from '../../'
+import { Button, Dialog } from 'playbook-ui'
 const DialogScrollable = () => {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
-/* @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)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from '../../'
+import { Button, Dialog } from 'playbook-ui'
 const DialogShouldCloseOnOverlay = () => {
   const [isOpen, setIsOpen] = useState(false)

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

@@ -1,7 +1,6 @@
-/* @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)

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-handler-names */
 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)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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();