playbook_ui 13.34.1.pre.alpha.play1407statvaluekitinconsistencies3388 → 13.34.1.pre.alpha.play1447addrequiredicons3451

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4696ad3a7d577ec515cef7040a725588c021d717703d1ec6252a07a6cd39041b
-  data.tar.gz: d8bc4a8a096d9191d640c0754ae6c3233cc64f6feed80851d095ee081ed40c4a
+  metadata.gz: c089ba5567811020a4920799aefabe8dfcf5b8308d105feff962e2f462bdd929
+  data.tar.gz: 57a76acfac06bacf15e725c1bf4c27109baac7913a98996886cec1ef6dd80ccd
 SHA512:
-  metadata.gz: 12be78c7413d7aaeb61a4d19fa185efd3b667da549d9d4a2d4413afa4e4f292fba1c93f913b58c786fad8f20ac8aa333c1eccac9fdf2482e4d7f3859f2955194
-  data.tar.gz: e1542d50c4532207aa7a91e43ae37049f0cb480f38fab15d8f22e7a17df0e110340849aa921456954e2f4c11917980388782f55c30111b9dc448cdc3c333244b
+  metadata.gz: 1e635e8bdd020782e5e3db9d89a41c9dbd099bc46d6b1e02d6cbe7d426a92e61aea5099b4d9f61bf3b962177e568190dff434c9d1c8c7006a77f8467b543ff49
+  data.tar.gz: 8566c49f66a63fce8becd1438009ff9b6b6ffd6e0d21b9873560f1f1811f1b3be08bf5310d1174b796596b4de807141c27796dccbad43f022cb088b1998d1d3a

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/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_avatar_action_button/_avatar_action_button.scss

@@ -35,8 +35,8 @@
     &[class*=_#{$name}] {
       
       $avatar_size: map-get($avatar-sizes, $name);
-      $icon_size: $avatar_size / 2;
-      $border_size: $icon_size / 10;
+      $icon_size: calc($avatar_size / 2);
+      $border_size: calc($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: $icon_size / 2;
+        padding-left: calc($icon_size / 2);
       }
     }
   }

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

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

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_badge/_badge.scss

@@ -11,7 +11,7 @@
   align-items: center;
   justify-content: center;
   border-radius: $border_rad_light;
-  padding: 0 $space_xs/2;
+  padding: 0 calc($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: $pb_badge_height / 2;
+    border-radius: calc($pb_badge_height / 2);
   }
 
   &[class*=_notification] {

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

@@ -7,6 +7,7 @@ import {
   buildCss,
   buildDataProps,
   buildHtmlProps } from '../utilities/props'
+import { getAllIcons } from "../utilities/icons/allicons"
 
 import Icon from '../pb_icon/_icon'
 
@@ -49,6 +50,7 @@ const Badge = (props: BadgeProps): React.ReactElement => {
     globalProps(props),
     className
   )
+  const timesIcon = getAllIcons()["times"]
 
   return (
     <div
@@ -67,8 +69,10 @@ const Badge = (props: BadgeProps): React.ReactElement => {
               {...closeProps}
           >
             <Icon
+                className="svg-inline--fa"
+                customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
                 fixedWidth
-                icon="times"
+                icon=""
             />
           </span>
         )}

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/_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 '../..'
+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_crumb_item.tsx

@@ -1,5 +1,3 @@
-/* @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 $space_xs/2;
+  padding: 0 calc($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 '../'
+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.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
 import { isValidEmoji } from '../utilities/validEmojiChecker'
+import { getAllIcons } from "../utilities/icons/allicons"
 
 import Icon from '../pb_icon/_icon'
 import Caption from "../pb_caption/_caption"
@@ -65,6 +66,7 @@ const buttonClassName = (props: ButtonPropTypes) => {
 
   return className
 }
+const spinnerIcon = getAllIcons()["spinner"]
 
 const Button = (props: ButtonPropTypes): React.ReactElement => {
   const {
@@ -103,8 +105,10 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
   const loadingIcon = (
     <div className="loading-icon">
       <Icon
+          className="svg-inline--fa"
+          customIcon={spinnerIcon.icon as unknown as { [key: string]: SVGElement }}
           fixedWidth
-          icon="spinner"
+          icon=""
           pulse
       />
     </div>

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -22,7 +22,7 @@
             <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs", font_style: object.icon_font_family }) %>
         </span>
     <% end %>
-    <%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, classname: "loading-icon" }) %>
+    <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(spinner_path), pulse: true, fixed_width: true, classname: "loading-icon" }) %>
     <span class="pb_button_content"><%= content.presence || object.text %></span>
     <% if object.icon && object.icon_right %>
         <span>

data/app/pb_kits/playbook/pb_button/button.rb

@@ -103,6 +103,10 @@ module Playbook
       def highlight_active
         variant === "reaction" && object.highlight ? " active" : ""
       end
+
+      def spinner_path
+        "app/pb_kits/playbook/utilities/icons/spinner.svg"
+      end
     end
   end
 end

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) => {