RubyGems - playbook_ui - Versions diffs - 14.15.0.pre.alpha.PBNTR8996733 → 14.15.0.pre.alpha.PLAY1756pbcontenttagpt76661 - Mend

playbook_ui 14.15.0.pre.alpha.PBNTR8996733 → 14.15.0.pre.alpha.PLAY1756pbcontenttagpt76661

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (398) hide show

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

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

@@ -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('')

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx CHANGED Viewed

@@ -1,11 +1,6 @@
 import React, { useState } from 'react'
-import Body from '../../pb_body/_body'
-import Passphrase from '../../pb_passphrase/_passphrase'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
-import Caption from '../../pb_caption/_caption'
-import TextInput from '../../pb_text_input/_text_input'
+import { Body, Caption, Passphrase, ProgressSimple, TextInput } from 'playbook-ui'
 import zxcvbn from 'zxcvbn'

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx CHANGED Viewed

@@ -1,11 +1,7 @@
 import React, { useState } from 'react'
 import { useEffect } from 'react'
-import Passphrase from '../../pb_passphrase/_passphrase'
-import Caption from '../../pb_caption/_caption'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
-import TextInput from '../../pb_text_input/_text_input'
+import { Caption, Passphrase, ProgressSimple, TextInput} from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 const PassphraseStrengthChange = (props) => {

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import Body from '../../pb_body/_body'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import { Body, PhoneNumberInput } from 'playbook-ui'
 const PhoneNumberInputAccessInputElement = (props) => {
     // 1. Create a ref - this accesses the kit's input element.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React, { useRef } from 'react'
-import Button from '../../pb_button/_button'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import { Button, PhoneNumberInput } from 'playbook-ui'
 const PhoneNumberInputClearField = (props) => {
     // 1. Create a ref - this accesses the kit's input element.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React, { useState } from "react";
-import Body from '../../pb_body/_body'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import { PhoneNumberInput, Body } from "playbook-ui";
 const PhoneNumberInputFormat = (props) => {
     const [phoneNumber, setPhoneNumber] = useState("");

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx CHANGED Viewed

@@ -1,8 +1,5 @@
 import React, { useEffect, useState } from "react";
-import Button from '../../pb_button/_button'
-import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+import { Button, FixedConfirmationToast, PhoneNumberInput } from "playbook-ui";
 const PhoneNumberInputValidation = (props) => {
     const [formErrors, setFormErrors] = useState("");

data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx CHANGED Viewed

@@ -1,10 +1,11 @@
 import React, { useState } from 'react'
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
-import Flex from '../../pb_flex/_flex'
-import PbReactPopover from '../../pb_popover/_popover'
+import {
+  Body,
+  Button,
+  CircleIconButton,
+  Flex,
+  PbReactPopover,
+} from 'playbook-ui'
 const PopoverActionableContent = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx CHANGED Viewed

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Flex from '../../pb_flex/_flex'
-import PbReactPopover from '../../pb_popover/_popover'
+import {
+  Button,
+  Flex,
+  PbReactPopover,
+} from 'playbook-ui'
 const PopoverClose = (props) => {
   const [showInsidePopover, setInsideShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx CHANGED Viewed

@@ -1,9 +1,10 @@
 import React, { useState } from 'react'
-import Body from '../../pb_body/_body'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
-import Flex from '../../pb_flex/_flex'
-import PbReactPopover from '../../pb_popover/_popover'
+import {
+  Body,
+  CircleIconButton,
+  Flex,
+  PbReactPopover,
+} from 'playbook-ui'
 const PopoverDefault = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx CHANGED Viewed

@@ -1,11 +1,12 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Flex from '../../pb_flex/_flex'
-import PbReactPopover from '../../pb_popover/_popover'
-import Icon from '../../pb_icon/_icon'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
+import {
+  Button,
+  Icon,
+  List,
+  ListItem,
+  PbReactPopover,
+  Flex,
+} from 'playbook-ui'
 const PopoverWithButton = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx CHANGED Viewed

@@ -1,9 +1,10 @@
 import React, { useState } from 'react'
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import PbReactPopover from '../../pb_popover/_popover'
-import Title from '../../pb_title/_title'
+import {
+  Body,
+  Button,
+  PbReactPopover,
+  Title,
+} from 'playbook-ui'
 const PopoverScrollHeight = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx CHANGED Viewed

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-import Body from '../../pb_body/_body'
-import Button from '../../pb_button/_button'
-import PbReactPopover from '../../pb_popover/_popover'
+import {
+  Body,
+  Button,
+  PbReactPopover,
+} from 'playbook-ui'
 const PopoverZIndex = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import { ProgressSimple } from 'playbook-ui'
 const ProgressSimpleAlign = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import { ProgressSimple } from 'playbook-ui'
 const ProgressSimpleDefault = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React from 'react'
-import Flex from '../../pb_flex/_flex'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import { Flex, ProgressSimple } from 'playbook-ui'
 const ProgressSimpleFlex = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_muted.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import { ProgressSimple } from 'playbook-ui'
 const ProgressSimpleMuted = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_value.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import { ProgressSimple } from 'playbook-ui'
 const ProgressSimpleValue = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_variants.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import { ProgressSimple } from 'playbook-ui'
 const ProgressSimpleVariants = () => {
   return (

data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_width.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import ProgressSimple from '../../pb_progress_simple/_progress_simple'
+import { ProgressSimple } from 'playbook-ui'
 const ProgressSimpleValue = () => {
   return (

data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React from 'react'
-import Flex from '../../pb_flex/_flex'
-import Radio from '../../pb_radio/_radio'
+import { Flex, Radio } from 'playbook-ui'
 const RadioAlignment = (props) => {
   return (

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { RichTextEditor } from 'playbook-ui'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Button from '../../pb_button/_button'
-import Card from '../../pb_card/_card'
+import { Button, Card, RichTextEditor } from 'playbook-ui'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_attributes.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { RichTextEditor } from 'playbook-ui'
 const RichTextEditorDefault = (props) => {
   const [value, setValue] = useState('Add your text here. You can format your text, add links, quotes, and bullets.'),

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_inline.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { RichTextEditor } from 'playbook-ui'
 import { useEditor, EditorContent } from "@tiptap/react"
 import StarterKit from "@tiptap/starter-kit"
 import Link from '@tiptap/extension-link'

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx CHANGED Viewed

@@ -1,7 +1,9 @@
 import React, { useState } from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Button from '../../pb_button/_button'
-import Card from '../../pb_card/_card'
+import {
+  Button,
+  Card,
+  RichTextEditor,
+} from 'playbook-ui'
 const RichTextEditorPreview = (props) => {
   const [showPreview, setShowPreview] = useState(false)

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
-import Select from '../../pb_select/_select'
+import { RichTextEditor, Select } from 'playbook-ui'
 import { changelog, release } from './templates.js'
 const RichTextEditorTemplates = (props) => {

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_bottom.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_toolbar_disabled.jsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from "react";
 import { useEditor, EditorContent } from "@tiptap/react";
-import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { RichTextEditor } from "playbook-ui";
 import Document from "@tiptap/extension-document";
 import Paragraph from "@tiptap/extension-paragraph";

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_children.jsx CHANGED Viewed

@@ -1,7 +1,5 @@
 import React from 'react'
-import Card from '../../pb_card/_card'
-import Caption from '../../pb_caption/_caption'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
+import { SectionSeparator, Card, Caption } from 'playbook-ui'
 const children = (
     <Card

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx CHANGED Viewed

@@ -1,8 +1,5 @@
 import React from "react"
-import SectionSeparator from '../../pb_section_separator/_section_separator'
-import Flex from '../../pb_flex/_flex'
-import Detail from '../../pb_detail/_detail'
-import Icon from '../../pb_icon/_icon'
+import { SectionSeparator, Flex, Detail, Icon } from "playbook-ui"
 const children = (
   <Flex padding="xs">

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React from 'react'
-import Body from '../../pb_body/_body'
-import Select from '../../pb_select/_select'
+import { Body, Select } from 'playbook-ui'
 const SelectError = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React from 'react'
-import Body from '../../pb_body/_body'
-import Select from '../../pb_select/_select'
+import { Body, Select } from 'playbook-ui'
 const SelectInline = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React from 'react'
-import Body from '../../pb_body/_body'
-import Select from '../../pb_select/_select'
+import { Body, Select } from 'playbook-ui'
 const SelectInlineCompact = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React from 'react'
-import Body from '../../pb_body/_body'
-import Select from '../../pb_select/_select'
+import { Body, Select } from 'playbook-ui'
 const SelectInlineShowArrow = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_error.jsx CHANGED Viewed

@@ -1,8 +1,5 @@
 import React, { useState } from 'react'
-import Body from '../../pb_body/_body'
-import SelectableCard from '../../pb_selectable_card/_selectable_card'
-import Title from '../../pb_title/_title'
+import { Body, SelectableCard, Title } from 'playbook-ui'
 const SelectableCardError = (props) => {
   const [football, setFootball] = useState(false)

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb CHANGED Viewed

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <% if enable_drag %>
     <%= pb_rails("draggable", props: {initial_items: object.items}) do %>
       <%= pb_rails("draggable/draggable_container") do %>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_border_radius.jsx CHANGED Viewed

@@ -1,7 +1,6 @@
 import React from 'react'
+import { Flex, SkeletonLoading } from "playbook-ui"
-import Flex from '../../pb_flex/_flex'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
 const SkeletonLoadingBorderRadius = (props) => (
   <Flex justify="evenly">

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_color.jsx CHANGED Viewed

@@ -1,7 +1,6 @@
 import React from 'react'
+import { Card, SkeletonLoading } from "playbook-ui"
-import Card from '../../pb_card/_card'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
 const SkeletonLoadingColor = (props) => (
   <div>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_default.jsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
+import { SkeletonLoading } from "playbook-ui"
 const SkeletonLoadingDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_filter.jsx CHANGED Viewed

@@ -1,12 +1,5 @@
 import React, { useState } from 'react';
-import Button from '../../pb_button/_button'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
-import Card from '../../pb_card/_card'
-import Filter from '../../pb_filter/_filter'
-import Flex from '../../pb_flex/_flex'
-import Select from '../../pb_select/_select'
-import TextInput from '../../pb_text_input/_text_input'
+import { Button, Card, Filter, Flex, Select, SkeletonLoading, TextInput } from "playbook-ui";
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_height_width.jsx CHANGED Viewed

@@ -1,7 +1,6 @@
 import React from 'react'
+import { Card, SkeletonLoading } from "playbook-ui"
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
-import Card from '../../pb_card/_card'
 const SkeletonLoadingHeightWidth = (props) => (
   <div>

data/app/pb_kits/playbook/pb_skeleton_loading/docs/_skeleton_loading_layout.jsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react'
-import SkeletonLoading from '../../pb_skeleton_loading/_skeleton_loading'
+import { SkeletonLoading } from "playbook-ui"
 const SkeletonLoadingLayout = (props) => (
   <div>