playbook_ui_docs 14.15.0.pre.alpha.play1907passglobalpropstotooltiprails6706 → 14.15.0.pre.alpha.play1910emptystatekitreactbeta6579

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_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_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/example.yml

@@ -12,7 +12,6 @@ examples:
 
   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

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

@@ -7,4 +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'

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 (

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

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

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx

@@ -1,6 +1,5 @@
 import React from "react";
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Nav, NavItem } from 'playbook-ui'
 
 const CollapsibleNav = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx

@@ -1,8 +1,5 @@
 import React from "react"
-
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
-import useCollapsible from '../../pb_collapsible/useCollapsible'
+import { Nav, NavItem, useCollapsible } from "playbook-ui"
 
 const CollapsibleNavCustom = (props) => {
   const navItems = ["Overview", "Albums", "Similar Artists"]

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.jsx

@@ -1,6 +1,5 @@
 import React from "react";
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Nav, NavItem } from 'playbook-ui'
 
 const CollapsibleNavItemSpacing = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_no_icon.jsx

@@ -1,6 +1,5 @@
 import React from "react";
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Nav, NavItem } from 'playbook-ui'
 
 const CollapsibleNavNoIcon = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.jsx

@@ -1,6 +1,5 @@
 import React from "react"
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Nav, NavItem } from "playbook-ui"
 
 const CollapsibleNavWithAllOptions = (props) => {
   const navItems = ["Overview", "Albums", "Similar Artists"]

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.jsx

@@ -1,6 +1,5 @@
 import React from "react";
-import Nav from '../../pb_nav/_nav'
-import NavItem from '../../pb_nav/_item'
+import { Nav, NavItem } from 'playbook-ui'
 
 const NavWithFontControl = (props) => {
   return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Table from '../../pb_table/_table'
-
+import {
+    Overlay,
+    Table,
+} from 'playbook-ui'
 
 const TableExample = () => {
     return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_hide_scroll_bar.jsx

@@ -1,9 +1,10 @@
 import React from 'react'
-
-import Overlay from '../../pb_overlay/_overlay'
-import Card from '../../pb_card/_card'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from 'playbook-ui'
 
 const InlineCardsExample = () => {
     return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx

@@ -1,8 +1,10 @@
 import React from 'react'
-import Overlay from '../../pb_overlay/_overlay'
-import Card from '../../pb_card/_card'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from 'playbook-ui'
 
 const InlineCardsExample = () => {
     return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx

@@ -1,9 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from "react";
-
-import Overlay from '../../pb_overlay/_overlay'
-import Button from '../../pb_button/_button'
-import Table from '../../pb_table/_table'
+import { Overlay, Table, Button } from "playbook-ui";
 
 const TableExample = () => {
     return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx

@@ -1,8 +1,10 @@
 import React, { forwardRef } from 'react'
-import Overlay from '../../pb_overlay/_overlay'
-import Card from '../../pb_card/_card'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import {
+    Overlay,
+    Card,
+    Flex,
+    FlexItem,
+} from 'playbook-ui'
 
 const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
     return (

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
-import Table from '../../pb_table/_table'
-import Pagination from '../../pb_pagination/_pagination'
+import { Table, Pagination } from 'playbook-ui'
 
 
 import { data } from "./data";

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.jsx

@@ -1,8 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-import Passphrase from '../../pb_passphrase/_passphrase'
-import Caption from '../../pb_caption/_caption'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import { Caption, Passphrase, ProgressSimple } from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 const PassphraseBreached = (props) => {

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_common.jsx

@@ -1,9 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-import Body from '../../pb_body/_body'
-import Passphrase from '../../pb_passphrase/_passphrase'
-import Caption from '../../pb_caption/_caption'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import {Body, Caption, Passphrase, ProgressSimple} from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 const PassphraseCommon = (props) => {

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_confirmation.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 
-import Body from '../../pb_body/_body'
-import Passphrase from '../../pb_passphrase/_passphrase'
+import {Body, Passphrase} from 'playbook-ui'
 
 const PassphraseConfirmation = (props) => {
   const [input, setInput] = useState('')