playbook_ui 13.31.0 → 13.32.0.pre.alpha.PLAY14143251

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c02852f26be30f0f9abff5ba3089c03c4d9f6878880b2e3f59827e7b556f8c3d
-  data.tar.gz: a5c30e259ea3d6a77135c2f6172d607ddb105732e20caf60f68d1d1f014bf468
+  metadata.gz: 3e970b94e363d380c35c1c1efc6d25bf4c8a42fe89b9ccc2902b2966f1d3bcff
+  data.tar.gz: 6ec1d86be7f216e65f7d7a19a654fa204e8dcbf24443bab5832ddf50b33adf57
 SHA512:
-  metadata.gz: d14c183e1ef95272881479defd28dec0aa49a6ee8539af55aa630cdd493aa48918830906465d6a46c0caf405a1c2a8b2b7dd5fc894f0031feb62bbd21341ae22
-  data.tar.gz: 26cd7b2d68304e1c80c4bf3e1bc9ce5cc07cf5c378c82e52bac4541abd61ca0a5a817ded5c6abde4282cb7c785b484778902afa96c3e83e0e7f3fcd84e68872b
+  metadata.gz: fcbd60dc742e4d8ee8cd6fd34a2a0d0611dd7e739de75067af45c9e33fe2ad362c00a0f106ca6cadf7a01c00b3e44cdf9d21805cb47fb5222975e1676aaa9868
+  data.tar.gz: 89e6cee619d2b657dbd82cec4aafcf3acf5f4d0f36ad2a441bf8792a5f28f31bf6eefe4e015f3a129656803d04911d8c15d81b4dbe4b79bca4cf59d40fc32a45

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 "../"
+import { AdvancedTable } from "playbook-ui"
 
 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 "../../"
+import { AdvancedTable } from "playbook-ui"
 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 "../../"
+import { AdvancedTable } from "playbook-ui"
 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 "../../"
+import { AdvancedTable } from "playbook-ui"
 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 "../.."
+import { AdvancedTable } from "playbook-ui"
 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 "../../"
-import { Button } from "../../"
+import { AdvancedTable } from "playbook-ui"
+import { Button } from "playbook-ui"
 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 "../.."
+import { AdvancedTable } from "playbook-ui"
 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 "../.."
+import { AdvancedTable } from "playbook-ui"
 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 "../.."
+import { AdvancedTable } from "playbook-ui"
 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 "../../"
+import { AdvancedTable } from "playbook-ui"
 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 "../../"
+import { AdvancedTable } from "playbook-ui"
 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 '../..'
+import { Avatar } from 'playbook-ui'
 
 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 '../..'
+import { Avatar } from 'playbook-ui'
 
 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 '../../'
+import { Avatar } from 'playbook-ui'
 
 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 '../../'
+import { Avatar } from 'playbook-ui'
 
 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 '../../'
+import { Avatar } from 'playbook-ui'
 
 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 '../../'
+import { Avatar } from 'playbook-ui'
 
 const AvatarStatus = (props) => {
   return (

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

@@ -3,10 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 
-type BackgroundProps = {
-  alt?: string,
-  aria?: {[key: string]: string},
-  backgroundColor?: ResponsiveProp<string> | 'gradient' |
+type BackgroundColors = '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' |
@@ -14,10 +11,19 @@ type BackgroundProps = {
   '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',
-  backgroundSize?: ResponsiveProp<string> | 'auto' | 'cover' | 'contain',
+  '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,
   backgroundPosition?: ResponsiveProp<string> | string,
-  backgroundRepeat?: ResponsiveProp<string> | 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit',
+  backgroundRepeat?: ResponsiveProp<BackgroundRepeat> | BackgroundRepeat,
   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 '../..'
-import { Flex } from '../..'
+import { Background } from 'playbook-ui'
+import { Flex } from 'playbook-ui'
 
 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 '../..'
+import { Background } from 'playbook-ui'
 
 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 '../..'
-import { Card, Flex, FlexItem, Select, Title } from '../..'
+import { Background } from 'playbook-ui'
+import { Card, Flex, FlexItem, Select, Title } from 'playbook-ui'
 
 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 '../..'
+import { Background } from 'playbook-ui'
 
 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 '../..'
+import { Background } from 'playbook-ui'
 
 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 '../..'
-import { Flex } from '../..'
+import { Background } from 'playbook-ui'
+import { Flex } from 'playbook-ui'
 
 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 '../..'
-import { Flex } from '../..'
+import { Background } from 'playbook-ui'
+import { Flex } from 'playbook-ui'
 
 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 '../..'
+import { Background } from 'playbook-ui'
 
 const BackgroundWhite = (props) => (
   <div>

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.scss'
+import typography from '../tokens/exports/_typography.module.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 '../..'
+import { BarGraph } from 'playbook-ui'
 
 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 '../..'
+import { BarGraph } from 'playbook-ui'
 
 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 '../..'
+import { BarGraph, Title } from 'playbook-ui'
 
 const chartData = [{
   name: 'Installation',

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

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

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 '../'
+import { Icon, Title } from 'playbook-ui'
 
 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 '../../'
+import { Icon, Title } from 'playbook-ui'
 import BreadCrumbItem from '../_bread_crumb_item'
 
 const Link = (props) => <BreadCrumbItem {...props} />

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -6,9 +6,9 @@
 @import "../tokens/typography";
 
 $pb_button_sizes: (
-  "sm":   0.75rem,
-  "md":   0.875rem,
-  "lg":   1.125rem,
+  "sm":   $font_smaller,
+  "md":   $font_small,
+  "lg":   ($font_large - 2px),
 );
 
 [class*=pb_button_kit]{

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -9,7 +9,7 @@
 
 $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
-$pb_button_h_padding: 34px;
+$pb_button_h_padding: 28px;
 $pb_button_hover_darken: 4%;
 $pb_button_border_width: 0px;
 
@@ -27,13 +27,14 @@ $pb_button_border_width: 0px;
   text-rendering: optimizeLegibility;
   font-size: $font_small;
   font-weight: $bold;
+  letter-spacing: $lspace_loose;
   text-align: center;
   text-decoration: none;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;
   border-style: solid;
-  border-radius: $border_rad_light;
+  border-radius: $border_rad_heavy;
   min-height: $pb_button_size;
   line-height: 1.5;
   padding: $pb_button_v_padding $pb_button_h_padding;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import React, {useState} from "react"
-import { Button } from "../../"
+import { Button } from "playbook-ui"
 
 const ButtonReaction = (props) => {
 

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

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

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.test.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '../utilities/test-utils'
 
-import { Button, ButtonToolbar } from '../'
+import { Button, ButtonToolbar } from 'playbook-ui'
 
 test('default test', () => {
   render(

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, ButtonToolbar } from '../..'
+import { Button, ButtonToolbar } from 'playbook-ui'
 
 const ButtonToolbarDefault = (props) => (
   <div className="pb--doc-demo-row">

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, ButtonToolbar } from '../..'
+import { Button, ButtonToolbar } from 'playbook-ui'
 
 const ButtonToolbarSecondary = (props) => (
   <div className="pb--doc-demo-row">

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -24,7 +24,7 @@ $pb_dark_caption_colors: (
   color: $text_lt_light;
   text-transform: uppercase;
   font-size: $font_size;
-  letter-spacing: $lspace_looser;
+  letter-spacing: $lspace_loosest;
 }
 
 @mixin caption_color($color: $text_lt_light) {

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx

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

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx

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

data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx

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

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Title from '../../pb_title/_title'
-import { Body } from '../../'
+import { Body } from 'playbook-ui'
 import Card from '../_card'
 
 const CardBackground = (props) => {

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx

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

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Checkbox, Table } from '../..'
+import { Checkbox, Table } from 'playbook-ui'
 
 const CheckboxIndeterminate = (props) => {
   const [checkboxes, setCheckboxes] = useState([

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import CircleChart from '../_circle_chart'
 
-import {Title} from '../..'
+import {Title} from 'playbook-ui'
 
 const data = [
   {

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx

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

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

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

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

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

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

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

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