playbook_ui_docs 14.16.0.pre.alpha.play1960buttonkitdisablenotworkingdanger6850 → 14.16.0.pre.rc.0

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-
-import FormPill from '../../pb_form_pill/_form_pill'
-import Title from '../../pb_title/_title'
+import { FormPill, Title } from 'playbook-ui'
 
 const FormPillColors = (props) => {
   return (

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -1,9 +1,5 @@
 import React from 'react'
-
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-import FormPill from '../../pb_form_pill/_form_pill'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import GanttChart from '../../pb_gantt_chart/_gantt_chart'
+import { GanttChart } from "playbook-ui";
 
 const mockOptions = {
   title: {

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

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

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

@@ -1,13 +1,14 @@
 import React from "react";
-
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Gauge from '../../pb_gauge/_gauge'
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-import Body from '../../pb_body/_body'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
-import Title from '../../pb_title/_title'
+import {
+  Title,
+  Card,
+  Gauge,
+  Flex,
+  FlexItem,
+  SectionSeparator,
+  Body,
+  Caption,
+} from "playbook-ui";
 
 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 '../../pb_gauge/_gauge'
+import { Gauge } from 'playbook-ui'
 
 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 '../../pb_gauge/_gauge'
+import { Gauge } from 'playbook-ui'
 
 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 '../../pb_gauge/_gauge'
+import { Gauge } from 'playbook-ui'
 
 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 '../../pb_gauge/_gauge'
+import { Gauge } from 'playbook-ui'
 
 const GaugeHeight = (props) => (
   <div>

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

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-
-import Button from '../../pb_button/_button'
-import Gauge from '../../pb_gauge/_gauge'
+import { Button, Gauge } from 'playbook-ui'
 
 const GaugeLiveData = (props) => {
   const [value, setValue] = useState(50)

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

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

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

@@ -1,8 +1,5 @@
 import React from 'react'
-
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
-import Gauge from '../../pb_gauge/_gauge'
+import { Flex, FlexItem, Gauge } from 'playbook-ui'
 
 const GaugeSizing = (props) => (
   <div>

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import Gauge from '../../pb_gauge/_gauge'
+import { Gauge } from 'playbook-ui'
 
 const data1 = [
   { name: 'Data Used', value: 32 },

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_default.jsx

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

data/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx

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

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb

@@ -1,11 +1,5 @@
-<%= pb_rails("flex", props: { margin_bottom: "sm" }) do %>
-    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", size: "2x" }) %>
-    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", size: "2x" }) %>
+<%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", padding_bottom: "sm", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "data_4", padding_bottom: "sm", size: "2x" }) %>
     <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "product_5_background", size: "2x" }) %>
-<% end %>
-
-<%= pb_rails("flex", props: {}) do %>
-    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "light", size: "2x" }) %>
-    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "lighter", size: "2x" }) %>
-    <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "link", size: "2x" }) %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx

@@ -1,57 +1,32 @@
 import React from "react"
 import Icon from "../_icon"
-import Flex from "../../pb_flex/_flex"
 
 const IconDefault = (props) => {
   return (
-    <div>
-      <Flex marginBottom="sm">
-        <Icon
-            color="primary"
-            fixedWidth
-            icon="user"
-            size="2x"
-            {...props}
-        />
-        <Icon
-            color="data_4"
-            fixedWidth
-            icon="recycle"
-            size="2x"
-            {...props}
-        />
-        <Icon
-            color="product_5_background"
-            fixedWidth
-            icon="product-roofing"
-            size="2x"
-            {...props}
-        />
-      </Flex>
-
-      <Flex>
-        <Icon
-            color="light"
-            fixedWidth
-            icon="user"
-            size="2x"
-            {...props}
-        />
-        <Icon
-            color="lighter"
-            fixedWidth
-            icon="recycle"
-            size="2x"
-            {...props}
-        />
-        <Icon
-            color="link"
-            fixedWidth
-            icon="product-roofing"
-            size="2x"
-            {...props}
-        />
-      </Flex>
+    <div style={{ display: "flex", flexDirection: "column"}}>
+      <Icon
+          color="primary"
+          fixedWidth
+          icon="user"
+          paddingBottom="sm"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="data_4"
+          fixedWidth
+          icon="recycle"
+          paddingBottom="sm"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="product_5_background"
+          fixedWidth
+          icon="product-roofing"
+          size="2x"
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Icon from '../../pb_icon/_icon'
+import { Icon } from 'playbook-ui'
 
 const config = {
   icon: (

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.jsx

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

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_sizes.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-
-import IconButton from '../../pb_icon_button/_icon_button'
-import Flex from '../../pb_flex/_flex'
+import { IconButton, Flex } from 'playbook-ui'
 
 const IconButtonSizes = (props) => (
   <div>

data/app/pb_kits/playbook/pb_icon_button/docs/example.yml

@@ -7,4 +7,3 @@ examples:
   react:
   - icon_button_default: Default
   - icon_button_sizes: Sizes
-  - icon_button_click: Click Handler

data/app/pb_kits/playbook/pb_icon_button/docs/index.js

@@ -1,3 +1,2 @@
 export { default as IconButtonDefault } from './_icon_button_default.jsx'
 export { default as IconButtonSizes } from './_icon_button_sizes.jsx'
-export { default as IconButtonClick } from './_icon_button_click.jsx'

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx

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

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx

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

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx

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

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx

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

data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx

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

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx

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

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx

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

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import Flex from '../../pb_flex/_flex'
-import LabelValue from '../../pb_label_value/_label_value'
-import Title from '../../pb_title/_title'
+import { Flex, LabelValue, Title } from 'playbook-ui'
 
 const LabelValueDetailsExamples = (props) => {
   return (

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx

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

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx

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

data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx

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

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Flex from '../../pb_flex/_flex'
-import Image from '../../pb_image/_image'
+import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxCompoundComponent = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx

@@ -1,10 +1,5 @@
 import React, { useState } from 'react'
-
-import Flex from '../../pb_flex/_flex'
-import Image from '../../pb_image/_image'
-import Button from '../../pb_button/_button'
-import Body from '../../pb_body/_body'
-import FlexItem from '../../pb_flex/_flex_item'
+import { Flex, Image, Button, Body, FlexItem } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxCurrentPhoto = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx

@@ -1,8 +1,5 @@
 import React, { useState } from "react";
-import Flex from '../../pb_flex/_flex'
-import Image from '../../pb_image/_image'
-import Title from '../../pb_title/_title'
-import Pill from '../../pb_pill/_pill'
+import { Flex, Image, Title, Pill } from "playbook-ui";
 import Lightbox from "../_lightbox.tsx";
 
 const LightboxCustomHeader = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Flex from '../../pb_flex/_flex'
-import Image from '../../pb_image/_image'
+import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxDefault = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import Flex from '../../pb_flex/_flex'
-import Image from '../../pb_image/_image'
+import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxMultiple = (props) => {

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx

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

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx

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

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import LineGraph from '../../pb_line_graph/_line_graph'
-import Title from '../../pb_title/_title'
+import { LineGraph, Title } from 'playbook-ui'
 
 const data = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx

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

data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx

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

data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx

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

data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx

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

data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx

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

data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx

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

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx

@@ -1,6 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
-import Map from '../../pb_map/_map'
-import mapTheme from '../../pb_map/pbMapTheme'
+import { Map, mapTheme } from 'playbook-ui'
 import maplibregl from 'maplibre-gl'
 
 const MapDefault = (props) => {

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx

@@ -1,9 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
-
-import Map from '../../pb_map/_map'
-import mapTheme from '../../pb_map/pbMapTheme'
-import MapCustomButton from '../../pb_map/_map_custom_button'
-
+import { Map, mapTheme, MapCustomButton } from 'playbook-ui'
 import maplibregl from 'maplibre-gl'
 
 const MapWithCustomButton = (props) => {

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx

@@ -1,6 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
-import Map from '../../pb_map/_map'
-import mapTheme from '../../pb_map/pbMapTheme'
+import { Map, mapTheme } from 'playbook-ui'
 import maplibregl from 'maplibre-gl'
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
 

data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx

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

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb

@@ -66,7 +66,7 @@
 
 <%= pb_rails("multi_level_select", props: {
     disabled: true,
-    id: "multi-level-select-disabled-rails",
+    id: "multi-level-select-default-rails",
     name: "my_array",
     tree_data: treeData
 }) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml

@@ -8,17 +8,10 @@ examples:
   - multi_level_select_with_form: With Form
   - multi_level_select_color: With Pills (Custom Color)
   - multi_level_select_reset: Reset Selection
-  - multi_level_select_label: With Label
-  - multi_level_select_error: Error
-  - multi_level_select_disabled: Disabled Input
-  - multi_level_select_disabled_options_default: Disabled Options (Default)
-  - multi_level_select_disabled_options: Disabled Options (Return All Selected)
-  - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
-  - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
+  - multi_level_select_disabled: Disabled
 
   react:
   - multi_level_select_default: Default
-  - multi_level_select_react_hook: React Hook
   - multi_level_select_single: Single Select
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected
@@ -26,10 +19,4 @@ examples:
   - multi_level_select_color: With Pills (Custom Color)
   - multi_level_select_with_children: Checkboxes With Children
   - multi_level_select_with_children_with_radios: Single Select With Children
-  - multi_level_select_label: With Label
-  - multi_level_select_error: Error
-  - multi_level_select_disabled: Disabled Input
-  - multi_level_select_disabled_options_default: Disabled Options (Default)
-  - multi_level_select_disabled_options: Disabled Options (Return All Selected)
-  - multi_level_select_disabled_options_parent_default: Disabled Parent Option (Default)
-  - multi_level_select_disabled_options_parent: Disabled Parent Option (Return All Selected)
+  - multi_level_select_disabled: Disabled

data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js

@@ -7,10 +7,3 @@ export { default as MultiLevelSelectColor } from './_multi_level_select_color.js
 export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
 export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
 export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
-export { default as MultiLevelSelectReactHook  } from './_multi_level_select_react_hook.jsx'
-export { default as MultiLevelSelectError } from './_multi_level_select_error.jsx'
-export { default as MultiLevelSelectDisabledOptions } from './_multi_level_select_disabled_options.jsx'
-export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level_select_disabled_options_parent.jsx'
-export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
-export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
-export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx

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

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx

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