playbook_ui 13.34.0.pre.alpha.PLAY14143373 → 13.34.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 36b22bcec044ccc2dc38617892d16d11d3315798c45ba1c6eb4eb917859c4a11
-  data.tar.gz: 812f6f8cc2ec0fb4d270fee84a70fd9462dc7aea2ced21591f4592db402e0576
+  metadata.gz: 7f2cb628a1802af0ae043163aec1b56821b21a2d91c1c17cc00154f2abc14e7e
+  data.tar.gz: cbbe7f33a75536e453823c0ca0a4645602165848eddc1d482a1b57c5236780cb
 SHA512:
-  metadata.gz: b34badff8320ee92ed636ca67bd3744933624f58f20811be0e8cc4a575dbc7b9e07fd34a7108675deb87fd126341e5f12e450806e806d5b93dc545b7942b1b8c
-  data.tar.gz: b6e00cfb7a261f9c9539a9ef976100f22771f00a5a34d483320f24bf445213ae936b5edeb12478f545a0dbf5b841448daceb7fac06ab3107f4dfb1a794650469
+  metadata.gz: ab5b25504dd6804769c95fad71a87a158bcb6f4832a4847a279b3eec324ff6376fb60a2148d5eb9a1be3ef5fab9fc27e81c676df6b32b76e40c4e74ee6bf1477
+  data.tar.gz: 7d5c990c0b0302c5844182adccaafd191a9f216d862d28843c4a4976be04483d6e5bb88995d19264a6707319aede8b05c11f2e78c3e7ee9e6b17220b7b300b05

data/app/pb_kits/playbook/_playbook.scss

@@ -104,20 +104,20 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import 'utilities/mixins';
-@import 'utilities/spacing';
-@import 'utilities/cursor';
-@import 'utilities/max_width';
-@import 'utilities/positioning';
-@import 'utilities/number_spacing';
-@import 'utilities/shadow';
-@import 'utilities/line_height';
-@import 'utilities/display';
-@import 'utilities/flexbox';
-@import 'utilities/focus';
-@import 'utilities/border_radius';
-@import 'utilities/hover';
-@import 'utilities/text_align';
-@import 'utilities/overflow';
-@import 'utilities/truncate';
-@import 'utilities/vertical_align';
+@import './utilities/mixins';
+@import './utilities/spacing';
+@import './utilities/cursor';
+@import './utilities/max_width';
+@import './utilities/positioning';
+@import './utilities/number_spacing';
+@import './utilities/shadow';
+@import './utilities/line_height';
+@import './utilities/display';
+@import './utilities/flexbox';
+@import './utilities/focus';
+@import './utilities/border_radius';
+@import './utilities/hover';
+@import './utilities/text_align';
+@import './utilities/overflow';
+@import './utilities/truncate';
+@import './utilities/vertical_align';

data/app/pb_kits/playbook/index.js

@@ -0,0 +1,151 @@
+// !!! IMPORTANT: This file is autogenerated. Please do not edit.!!!
+import './_playbook.scss'
+import 'lazysizes/plugins/attrchange/ls.attrchange'
+import 'lazysizes'
+
+// vvv React Component JSX Imports from the React Kits vvv
+export { default as AdvancedTable} from './pb_advanced_table/_advanced_table'
+export { default as Avatar } from './pb_avatar/_avatar'
+export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
+export { default as Background } from './pb_background/_background'
+export { default as Badge } from './pb_badge/_badge'
+export { default as BarGraph } from './pb_bar_graph/_bar_graph'
+export { default as Body } from './pb_body/_body'
+export { default as BreadCrumbItem } from './pb_bread_crumbs/_bread_crumb_item'
+export { default as BreadCrumbs } from './pb_bread_crumbs/_bread_crumbs'
+export { default as Button } from './pb_button/_button'
+export { default as ButtonToolbar } from './pb_button_toolbar/_button_toolbar'
+export { default as Caption } from './pb_caption/_caption'
+export { default as Card } from './pb_card/_card'
+export { default as Checkbox } from './pb_checkbox/_checkbox'
+export { default as CircleChart } from './pb_circle_chart/_circle_chart'
+export { default as CircleIconButton } from './pb_circle_icon_button/_circle_icon_button'
+export { default as Collapsible } from './pb_collapsible/_collapsible'
+export { default as Contact } from './pb_contact/_contact'
+export { default as Currency } from './pb_currency/_currency'
+export { default as DashboardValue } from './pb_dashboard_value/_dashboard_value'
+export { default as Date } from './pb_date/_date'
+export { default as DatePicker } from './pb_date_picker/_date_picker'
+export { default as DateRangeInline } from './pb_date_range_inline/_date_range_inline'
+export { default as DateRangeStacked } from './pb_date_range_stacked/_date_range_stacked'
+export { default as DateStacked } from './pb_date_stacked/_date_stacked'
+export { default as DateTime } from './pb_date_time/_date_time'
+export { default as DateTimeStacked } from './pb_date_time_stacked/_date_time_stacked'
+export { default as DateYearStacked } from './pb_date_year_stacked/_date_year_stacked'
+export { default as Detail} from './pb_detail/_detail'
+export { default as Dialog } from './pb_dialog/_dialog'
+export { default as DistributionBar } from './pb_distribution_bar/_distribution_bar'
+export { default as Draggable} from './pb_draggable/_draggable'
+export { DraggableProvider} from './pb_draggable/context'
+export { default as Dropdown} from './pb_dropdown/_dropdown'
+export { default as FileUpload } from './pb_file_upload/_file_upload'
+export { default as Filter } from './pb_filter/_filter'
+export { default as FixedConfirmationToast } from './pb_fixed_confirmation_toast/_fixed_confirmation_toast'
+export { default as Flex } from './pb_flex/_flex'
+export { default as FlexItem } from './pb_flex/_flex_item'
+export { default as FormGroup } from './pb_form_group/_form_group'
+export { default as FormPill } from './pb_form_pill/_form_pill'
+export { default as Gauge } from './pb_gauge/_gauge'
+export { default as Hashtag } from './pb_hashtag/_hashtag'
+export { default as Highlight } from './pb_highlight/_highlight'
+export { default as HomeAddressStreet } from './pb_home_address_street/_home_address_street'
+export { default as Icon } from './pb_icon/_icon'
+export { default as IconCircle } from './pb_icon_circle/_icon_circle'
+export { default as IconStatValue } from './pb_icon_stat_value/_icon_stat_value'
+export { default as IconValue } from './pb_icon_value/_icon_value'
+export { default as Image } from './pb_image/_image'
+export { default as LabelPill } from './pb_label_pill/_label_pill'
+export { default as LabelValue } from './pb_label_value/_label_value'
+export { default as Layout } from './pb_layout/_layout'
+export { default as Legend } from './pb_legend/_legend'
+export { default as Lightbox } from './pb_lightbox/_lightbox'
+export { default as LineGraph } from './pb_line_graph/_line_graph'
+export { default as List } from './pb_list/_list'
+export { default as ListItem } from './pb_list/_list_item'
+export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
+export { default as MapCustomButton } from './pb_map/_map_custom_button'
+export { default as Map} from './pb_map/_map'
+export { default as Message } from './pb_message/_message'
+export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
+export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'
+export { default as MultipleUsersStacked } from './pb_multiple_users_stacked/_multiple_users_stacked'
+export { default as Nav } from './pb_nav/_nav'
+export { default as NavItem } from './pb_nav/_item'
+export { default as OnlineStatus } from './pb_online_status/_online_status'
+export { default as Overlay} from './pb_overlay/_overlay'
+export { default as Passphrase } from './pb_passphrase/_passphrase'
+export { default as PbReactPopover } from './pb_popover/_popover'
+export { default as Person } from './pb_person/_person'
+export { default as PersonContact } from './pb_person_contact/_person_contact'
+export { default as PhoneNumberInput} from './pb_phone_number_input/_phone_number_input'
+export { default as Pill } from './pb_pill/_pill'
+export { default as ProgressPills } from './pb_progress_pills/_progress_pills'
+export { default as ProgressSimple } from './pb_progress_simple/_progress_simple'
+export { default as ProgressStep } from './pb_progress_step/_progress_step'
+export { default as ProgressStepItem } from './pb_progress_step/_progress_step_item'
+export { default as Radio } from './pb_radio/_radio'
+export { default as RichTextEditor } from './pb_rich_text_editor/_rich_text_editor'
+export { default as SectionSeparator } from './pb_section_separator/_section_separator'
+export { default as Select } from './pb_select/_select'
+export { default as SelectableCard } from './pb_selectable_card/_selectable_card'
+export { default as SelectableCardIcon } from './pb_selectable_card_icon/_selectable_card_icon'
+export { default as SelectableIcon } from './pb_selectable_icon/_selectable_icon'
+export { default as SelectableList } from './pb_selectable_list/_selectable_list'
+export { default as SelectableListItem } from './pb_selectable_list/_item'
+export { default as Source } from './pb_source/_source'
+export { default as StarRating } from './pb_star_rating/_star_rating'
+export { default as StatChange } from './pb_stat_change/_stat_change'
+export { default as StatValue } from './pb_stat_value/_stat_value'
+export { default as Table } from './pb_table/_table'
+export { default as TableRow } from './pb_table/subcomponents/_table_row'
+export { default as TextInput } from './pb_text_input/_text_input'
+export { default as Textarea } from './pb_textarea/_textarea'
+export { default as Time } from './pb_time/_time'
+export { default as TimeRangeInline } from './pb_time_range_inline/_time_range_inline'
+export { default as TimeStacked } from './pb_time_stacked/_time_stacked'
+export { default as Timeline } from './pb_timeline/_timeline'
+export { default as Timestamp } from './pb_timestamp/_timestamp'
+export { default as Title } from './pb_title/_title'
+export { default as TitleCount } from './pb_title_count/_title_count'
+export { default as TitleDetail } from './pb_title_detail/_title_detail'
+export { default as Toggle } from './pb_toggle/_toggle'
+export { default as Tooltip } from './pb_tooltip/_tooltip'
+export { default as TreemapChart } from './pb_treemap_chart/_treemap_chart'
+export { default as Typeahead } from './pb_typeahead/_typeahead'
+export { default as User } from './pb_user/_user'
+export { default as UserBadge } from './pb_user_badge/_user_badge'
+export { default as Walkthrough } from './pb_walkthrough/_walkthrough'
+export { default as WeekdayStacked } from './pb_weekday_stacked/_weekday_stacked'
+// ^^^ React Component JSX Imports from the React Kits ^^^
+
+// Dashboard Settings
+export { commonSettings, dataColors } from './pb_dashboard/commonSettings'
+export { default as lineGraphSettings } from './pb_line_graph/lineGraphSettings'
+export { default as barGraphSettings } from './pb_bar_graph/barGraphSettings'
+export { default as dashboardValueSettings } from './pb_dashboard_value/dashboardValueSettings'
+
+// Other JS/Plugins
+export { default as datePickerHelper } from './pb_date_picker/date_picker_helper'
+export { default as PbPopover } from './pb_popover'
+export { default as PbTable } from './pb_table'
+export { default as PbTextarea } from './pb_textarea'
+export { default as PbTooltip } from './pb_tooltip'
+export { default as PbTypeahead } from './pb_typeahead'
+export { default as dialogHelper } from './pb_dialog/dialogHelper'
+
+//Theming
+export {default as mapTheme} from './pb_map/pbMapTheme'
+export {default as useCollapsible} from './pb_collapsible/useCollapsible'
+export {default as useDropdown } from './pb_dropdown/hooks/useDropdown'
+
+// CSS Tokens
+export { default as borderRadius } from './tokens/exports/_border_radius.scss'
+export { default as colors } from './tokens/exports/_colors.scss'
+export { default as lineHeight } from './tokens/exports/_line_height.scss'
+export { default as opacity } from './tokens/exports/_opacity.scss'
+export { default as positioning } from './tokens/exports/_positioning.scss'
+export { default as scale } from './tokens/exports/_scale.scss'
+export { default as screenSizes } from './tokens/exports/_screen_sizes.scss'
+export { default as shadows } from './tokens/exports/_shadows.scss'
+export { default as spacing } from './tokens/exports/_spacing.scss'
+export { default as typography } from './tokens/exports/_typography.scss'

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1,7 +1,7 @@
 import React, {useState} from "react"
 import { render, screen, waitFor } from "../utilities/test-utils"
 
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../"
 
 const MOCK_DATA = [
   {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../../"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCollapsibleTrail = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../../"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableDefault = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../../"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableExpandedControl = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../.."
 import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
 
 const AdvancedTableInlineRowLoading = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
-import { AdvancedTable } from "playbook-ui"
-import { Button } from "playbook-ui"
+import { AdvancedTable } from "../../"
+import { Button } from "../../"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableLoading = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../.."
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableSort = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../.."
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableSortControl = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../.."
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableSubrowHeaders = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../../"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTableOptions = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import { AdvancedTable } from "../../"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTableProps = (props) => {

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Avatar } from 'playbook-ui'
+import { Avatar } from '../..'
 
 const AvatarBadgeComponentOverlay = () => {
     return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Avatar } from 'playbook-ui'
+import { Avatar } from '../..'
 
 const AvatarCircleIconComponentOverlay = () => {
     return (

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx

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

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_monogram.jsx

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

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_no_image.jsx

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

data/app/pb_kits/playbook/pb_avatar/docs/_avatar_status.jsx

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

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss

@@ -35,8 +35,8 @@
     &[class*=_#{$name}] {
       
       $avatar_size: map-get($avatar-sizes, $name);
-      $icon_size: calc($avatar_size / 2);
-      $border_size: calc($icon_size / 10);
+      $icon_size: $avatar_size / 2;
+      $border_size: $icon_size / 10;
 
       position: relative;
       width: $avatar_size * 1.25;
@@ -59,7 +59,7 @@
         left: $icon_size * 1.5;
       }
       &[class*=_left] [class^=pb_avatar_kit] {
-        padding-left: calc($icon_size / 2);
+        padding-left: $icon_size / 2;
       }
     }
   }

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
 

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -3,7 +3,10 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
-type BackgroundColors = 'gradient' |
+type BackgroundProps = {
+  alt?: string,
+  aria?: {[key: string]: string},
+  backgroundColor?: ResponsiveProp<string> | 'gradient' |
   'dark' |'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'shadow' |
   'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' |
   'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' |
@@ -11,19 +14,10 @@ type BackgroundColors = 'gradient' |
   'text_lt_default' | 'text_lt_light' | 'text_lt_lighter' | 'text_dk_default' | 'text_dk_light' | 'text_dk_lighter' |
   'card_light' | 'card_dark' | 'data_1' | 'data_2' | 'data_3' | 'data_4' | 'data_5' | 'data_6' | 'data_7' | 'data_8' |
   'border_light' | 'border_dark' | 'success_secondary' | 'error_secondary' | 'info_secondary' | 'warning_secondary' |
-  'neutral_secondary' | 'primary_secondary' | 'success_subtle' | 'warning_subtle' | 'error_subtle' | 'info_subtle' | 'neutral_subtle'
-
-type BackgroundSizes = 'auto' | 'cover' | 'contain'
-
-type BackgroundRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit'
-
-type BackgroundProps = {
-  alt?: string,
-  aria?: {[key: string]: string},
-  backgroundColor?: ResponsiveProp<BackgroundColors> | BackgroundColors,
-  backgroundSize?: ResponsiveProp<BackgroundSizes> | BackgroundSizes,
+  'neutral_secondary' | 'primary_secondary' | 'success_subtle' | 'warning_subtle' | 'error_subtle' | 'info_subtle' | 'neutral_subtle',
+  backgroundSize?: ResponsiveProp<string> | 'auto' | 'cover' | 'contain',
   backgroundPosition?: ResponsiveProp<string> | string,
-  backgroundRepeat?: ResponsiveProp<BackgroundRepeat> | BackgroundRepeat,
+  backgroundRepeat?: ResponsiveProp<string> | 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit',
   imageUrl?: ResponsiveProp<string> | string,
   children?: React.ReactChild[] | React.ReactNode,
   className?: string,

data/app/pb_kits/playbook/pb_background/docs/_background_category.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
-import { Flex } from 'playbook-ui'
+import { Background } from '../..'
+import { Flex } from '../..'
 
 const BackgroundCategory = (props) => (
   <Flex

data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx

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

data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
-import { Background } from 'playbook-ui'
-import { Card, Flex, FlexItem, Select, Title } from 'playbook-ui'
+import { Background } from '../..'
+import { Card, Flex, FlexItem, Select, Title } from '../..'
 
 const BackgroundImage = (props) => {
   const [transition, setTransition] = useState('')

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

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

data/app/pb_kits/playbook/pb_background/docs/_background_size.jsx

@@ -1,5 +1,5 @@
 import React, { Fragment as F } from 'react'
-import { Background } from 'playbook-ui'
+import { Background } from '../..'
 
 const BackgroundSize = (props) => (
   <F>

data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
-import { Flex } from 'playbook-ui'
+import { Background } from '../..'
+import { Flex } from '../..'
 
 const BackgroundStatus = (props) => (
 <Flex

data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Background } from 'playbook-ui'
-import { Flex } from 'playbook-ui'
+import { Background } from '../..'
+import { Flex } from '../..'
 
 const BackgroundStatusSubtle = (props) => (
 <Flex

data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx

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

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -11,7 +11,7 @@
   align-items: center;
   justify-content: center;
   border-radius: $border_rad_light;
-  padding: 0 calc($space_xs/2);
+  padding: 0 $space_xs/2;
   border-width: 1px;
   border-style: solid;
   border-color: $card_light;
@@ -34,7 +34,7 @@
     height: $pb_badge_height;
     min-height: $pb_badge_height;
     min-width: $pb_badge_height;
-    border-radius: calc($pb_badge_height / 2);
+    border-radius: $pb_badge_height / 2;
   }
 
   &[class*=_notification] {

data/app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js

@@ -1,5 +1,5 @@
 import { commonSettings } from '../pb_dashboard/commonSettings.js'
-import typography from '../tokens/exports/_typography.module.scss'
+import typography from '../tokens/exports/_typography.scss'
 
 const sizeColumns = function(highchart) {
   const column = highchart.plotOptions.column

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BarGraph } from 'playbook-ui'
+import { BarGraph } from '../..'
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_non_clickable.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BarGraph } from 'playbook-ui'
+import { BarGraph } from '../..'
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_legend_position.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BarGraph, Title } from 'playbook-ui'
+import { BarGraph, Title } from '../..'
 
 const chartData = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -4,7 +4,7 @@
 [class^=pb_body_kit]{
   @include pb_body($text_lt_default);
   @each $color_name, $color_value in $pb_body_colors {
-    &[class*=_#{"" + $color_name}] {
+    &[class*=_#{$color_name}] {
       @include pb_body($color_value);
     }
     @each $status_name, $status_value in $pb_body_status {

data/app/pb_kits/playbook/pb_body/docs/_body_articles.jsx

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

data/app/pb_kits/playbook/pb_body/docs/_body_block.jsx

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

data/app/pb_kits/playbook/pb_body/docs/_body_light.jsx

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

data/app/pb_kits/playbook/pb_body/docs/_body_styled.jsx

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

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps, domSafeProps } from '../utilities/globalProps'

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss

@@ -9,7 +9,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 calc($space_xs/2);
+  padding: 0 $space_xs/2;
 
   svg {
    margin-right: 8px;

data/app/pb_kits/playbook/pb_bread_crumbs/bread_crumbs.test.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { render, screen } from '../utilities/test-utils'
 import BreadCrumbs from './_bread_crumbs'
 import BreadCrumbItem from './_bread_crumb_item'
-import { Icon, Title } from 'playbook-ui'
+import { Icon, Title } from '../'
 
 it('should render bread crumbs', () => {
   const testId = 'breadCrumbs'

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import BreadCrumbs from '../_bread_crumbs'
-import { Icon, Title } from 'playbook-ui'
+import { Icon, Title } from '../../'
 import BreadCrumbItem from '../_bread_crumb_item'
 
 const Link = (props) => <BreadCrumbItem {...props} />

data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.jsx

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