playbook_ui_docs 13.34.1.pre.alpha.PLAY14633399 → 13.34.1.pre.alpha.PLAY14703378

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +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_should_close_on_overlay.jsx

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

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_dropdown/docs/_dropdown_blank_selection.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Dropdown } from 'playbook-ui'
+import { Dropdown } from '../../'
 
 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 'playbook-ui'
+import { Dropdown } from '../../'
 
 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 'playbook-ui'
+import { Dropdown } from '../../'
 
 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 '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_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 = [

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 'playbook-ui'
+import { Button, Filter, Flex, Select, TextInput } from '../..'
 
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

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

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

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from 'playbook-ui'
+import { Gauge } from '../../'
 
 const data = [
   { name: 'Name', value: 67 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -8,7 +8,7 @@ import {
   SectionSeparator,
   Body,
   Caption,
-} from "playbook-ui";
+} from "../..";
 
 const data = [{ name: "Name", value: 10 }];
 

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from 'playbook-ui'
+import { Gauge } from '../../'
 
 const data = [
   { name: 'Name', value: 45 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_disable_animation.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from 'playbook-ui'
+import { Gauge } from '../../'
 
 const data = [
   { name: 'Participants', value: 84 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Gauge } from 'playbook-ui'
+import { Gauge } from '../../'
 
 const data = [
   { name: 'Capacity', value: 75 },

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_height.jsx

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