playbook_ui_docs 15.5.0.pre.rc.3 → 15.5.0.pre.rc.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 67521f39b3bf3e61512adc17e8bac9e1038f17adebe8ead35fac4f256e4c1a5d
-  data.tar.gz: 499f18183db76bd3e1dee73d53c1918829a82082ac829448127ced136bf8f367
+  metadata.gz: af00cd3fc18aefb39eaf7ba577772570855d794b4ecbaf08665c175a9546973c
+  data.tar.gz: ac0fb987fc17827771cde153ce1ffae24c135b86ac25644eef1420abf4c595ca
 SHA512:
-  metadata.gz: ab6215c0a3811cc649c1b961a5a97bbe9a65831611fa59295edaf9f12017350d469d979642fcc0e6e46b719aeafdf66da83cf33b0217fbd67988c0f16d617bed
-  data.tar.gz: 87c3cff9e2433d5d76b8c34229619b02dc28e78c3285b98022ef4cc82634af5431134d00dd4e49984fd0eb425e2a8f1c7790ef8a42a3979ec180dc2b16b23e0a
+  metadata.gz: 158d6841f548c55e846d7396ac72b8ba9df8195237b6524e665a34ce57427c7bb37dd79170aa20851f7a861c4fc1093cddc2a60b2d622433574e33fb6183aa5d
+  data.tar.gz: 14e84a3a896a7b7900830e63c5bef8749815d09cacbe86ee1436955af69aa311fd4631e81993e78a21d82d43f8dca7a065906e71a0e15f052efa09965d56a86e

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx

@@ -1,5 +1,6 @@
 import React from "react"
-import { AdvancedTable, colors } from "playbook-ui"
+import AdvancedTable from '../_advanced_table'
+import colors from '../../tokens/exports/_colors.module.scss'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AdvancedTable } from "playbook-ui";
+import AdvancedTable from '../_advanced_table';
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnStylingColumnHeaders = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react"
-import { AdvancedTable, Button, Flex } from "playbook-ui"
+import AdvancedTable from '../_advanced_table'
+import Flex from '../../pb_flex/_flex'
+import Button from '../../pb_button/_button'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
 
 const AdvancedTableInfiniteScroll = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
-import { AdvancedTable, TextInput, Body } from "playbook-ui";
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import TextInput from '../../pb_text_input/_text_input'
+import Body from '../../pb_body/_body'
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableInlineEditing = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.jsx

@@ -1,7 +1,8 @@
 import React from "react"
 import AdvancedTable from '../_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
-import { colors } from "playbook-ui"
+import colors from '../../tokens/exports/_colors.module.scss'
+
 
 const AdvancedTableRowStyling = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("copy_button", props: {
+  text: "Copy Text",
+  tooltip_position: "right",
+  tooltip_text: "Text copied!",
+  value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook's 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease.",
+  variant: "button",
+}) %>
+
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/{_copy_button_icon_variant.jsx → _copy_button_button_variant.jsx}

@@ -1,9 +1,9 @@
 import React from 'react'
 
-import CopyButton from '../../pb_copy_button/_copy_button'
+import CopyButton from '../_copy_button'
 import Textarea from '../../pb_textarea/_textarea'
 
-const CopyIconVariant = (props) => (
+const CopyButtonVariant = (props) => (
   <div>
     <CopyButton
         {...props}
@@ -11,7 +11,7 @@ const CopyIconVariant = (props) => (
         tooltipPlacement="right"
         tooltipText="Text copied!"
         value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
-        variant="icon"
+        variant="button"
     />
 
     <Textarea
@@ -21,4 +21,4 @@ const CopyIconVariant = (props) => (
   </div>
 )
 
-export default CopyIconVariant
+export default CopyButtonVariant

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_rails.md

@@ -0,0 +1 @@
+Pass in `variant: "button"` to replace the Circle Icon Button with the Button kit. Set the button's text with the `text` prop.

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_react.md

@@ -0,0 +1 @@
+Pass in `variant="button"` to replace the Circle Icon Button with the Button kit. Set the button's text with the `text` prop.

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb

@@ -1,2 +1,2 @@
-<%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
-<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
+<%= pb_rails("copy_button", props: { id: "default-copy-button", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Click the icon above to copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx

@@ -7,7 +7,6 @@ const CopyButtonDefault = (props) => (
   <div>
     <CopyButton
         {...props}
-        text="Copy Text"
         tooltipPlacement="right"
         tooltipText="Text copied!"
         value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
@@ -15,7 +14,7 @@ const CopyButtonDefault = (props) => (
 
     <Textarea
         {...props}
-        placeholder="Copy and paste here"
+        placeholder="Click the icon above to copy and paste here"
     />
   </div>
 )

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
-<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
+<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button", variant: "button" }) %>
 <%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
-<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
+<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button", variant: "button" }) %>
 <%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx

@@ -21,6 +21,7 @@ const CopyButtonFrom = (props) => {
         text="Copy Body text"
         tooltipPlacement="right"
         tooltipText="Body text copied!"
+        variant="button"
     />
 
     <TextInput
@@ -36,6 +37,7 @@ const CopyButtonFrom = (props) => {
         text="Copy Text Input"
         tooltipPlacement="right"
         tooltipText="Text input copied!"
+        variant="button"
     />
 
     <Textarea

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

@@ -1,11 +1,12 @@
 examples:
   rails:
   - copy_button_default: Default
+  - copy_button_button_variant: Button Variant
   - copy_button_from: Copy From
   - copy_button_hook_rails: Copy Hook
   
   react:
   - copy_button_default: Default
+  - copy_button_button_variant: Button Variant
   - copy_button_from: Copy From
   - copy_button_hook: Copy Hook
-  - copy_button_icon_variant: Icon Variant

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

@@ -1,4 +1,4 @@
 export { default as CopyButtonDefault } from './_copy_button_default.jsx'
 export { default as CopyButtonFrom } from './_copy_button_from.jsx' 
 export { default as CopyButtonHook } from './_copy_button_hook.jsx'
-export { default as CopyButtonIconVariant } from './_copy_button_icon_variant.jsx'
+export { default as CopyButtonButtonVariant } from './_copy_button_button_variant.jsx'

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateAlignment = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateDefault = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateOrientation = (props) => (
   <Flex align="center"

data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { EmptyState, Flex } from 'playbook-ui'
+import EmptyState from '../_empty_state'
+import Flex from '../../pb_flex/_flex'
 
 const EmptyStateSize = (props) => (
   <Flex align="center"

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

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

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx

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

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 import colors from '../../tokens/exports/_colors.module.scss'
 
 const chartData = [{

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
   const chartData = [{
     name: 'Installation',

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
 
 const chartOptions = {

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
 
 const chartData = [{

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
+import PbBarGraph from '../_pb_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 import Title from "../../pb_title/_title"
 
 

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
 
 const chartData = [{

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
+import PbBarGraph from '../_pb_bar_graph'
 
 import colors from '../../tokens/exports/_colors.module.scss'
 import typography from '../../tokens/exports/_typography.module.scss'

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
+import PbBarGraph from '../_pb_bar_graph'
 
 const chartData = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
+import PbBarGraph from '../_pb_bar_graph'
 
 const chartData = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { PbCircleChart, Title } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
+import Title from "../../pb_title/_title";
 
 const data= [
         {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { PbCircleChart, colors } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
+import colors from '../../tokens/exports/_colors.module.scss';
 
 const data= [
         {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PbCircleChart } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
 
 const data = [
   {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { PbCircleChart, Title } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
+import Title from "../../pb_title/_title";
 
 const dataFirst = [
   {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PbCircleChart } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
 
 const data = [
   {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PbCircleChart } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
 
 const data = [{
   name: 'Bugs',

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PbCircleChart } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
 
 const chartOptions = {
   series: [

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PbCircleChart } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
 
 const dataFirst = [
   {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import { PbCircleChart, Button } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
+import Button from "../../pb_button/_button";
 
 const chartData = [
   {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PbCircleChart } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
 
 const data= [
         {

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PbCircleChart } from "playbook-ui";
+import PbCircleChart from "../_pb_circle_chart";
 
 const data= [
 {

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_color.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
 
 const data = [{ name: "Name", y: 67 }]
 

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_complex.jsx

@@ -7,7 +7,8 @@ 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 { colors, typography } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 const data = [{ name: "Name", y: 10 }];
 

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_full_circle.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors, typography } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 const data = [{ name: "Capacity", y: 75 }]
 

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_height.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors, typography } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 const chartOptions = {
   title: {

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_min_max.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors, typography } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 const data = [{ name: "Rating", y: 4.5 }]
 

data/app/pb_kits/playbook/pb_pb_gauge_chart/docs/_pb_gauge_chart_units.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import PbGaugeChart from '../../pb_pb_gauge_chart/_pb_gauge_chart'
-import { colors, typography } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
+import typography from '../../tokens/exports/_typography.module.scss'
 
 
 const data1 = [

data/app/pb_kits/playbook/pb_pb_line_graph/docs/_pb_line_graph_colors.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PbLineGraph from '../../pb_pb_line_graph/_pb_line_graph'
-import { colors } from 'playbook-ui'
+import colors from '../../tokens/exports/_colors.module.scss'
 
 const data = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.jsx

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { PbReactPopover, CircleIconButton, Body, Flex } from "playbook-ui";
+import PbReactPopover from "../_popover";
+import Body from "../../pb_body/_body";
+import Flex from "../../pb_flex/_flex";
+import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button";
 
 const PopoverAppendTo = (props) => {
   const [showParentPopover, setShowParentPopover] = useState(false);

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx

@@ -1,6 +1,8 @@
 import React from "react"
 import { useForm } from "react-hook-form"
-import { Radio, Flex, Body } from "playbook-ui"
+import Radio from "../_radio"
+import Body from "../../pb_body/_body"
+import Flex from "../../pb_flex/_flex"
 
 const RadioReactHook = () => {
   const { register, watch } = useForm({

data/app/pb_kits/playbook/pb_select/docs/_select_react_hook.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react"
 import { useForm } from "react-hook-form"
-import { Button, Body, Select } from "playbook-ui"
+import Select from "../_select"
+import Body from "../../pb_body/_body"
+import Button from "../../pb_button/_button"
 
 const SelectReactHook = (props) => {
   const { register, handleSubmit, formState: { errors } } = useForm({

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_sizing.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
+import Tooltip from '../_tooltip'
+import Button from '../../pb_button/_button'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const TooltipSizing = (props) => {
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_react_hook.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
-import { Typeahead, Title } from 'playbook-ui'
+import Typeahead from '../_typeahead'
+import Title from '../../pb_title/_title'
 import { useForm } from 'react-hook-form'
 
 const languages = [

data/app/pb_kits/playbook/pb_user/docs/_user_font_options.jsx

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 15.5.0.pre.rc.3
+  version: 15.5.0.pre.rc.4
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-11-19 00:00:00.000000000 Z
+date: 2025-11-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -533,6 +533,10 @@ files:
 - app/pb_kits/playbook/pb_contact/docs/_description.md
 - app/pb_kits/playbook/pb_contact/docs/example.yml
 - app/pb_kits/playbook/pb_contact/docs/index.js
+- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.html.erb
+- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant.jsx
+- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_rails.md
+- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_button_variant_react.md
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb
@@ -542,8 +546,6 @@ files:
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb
 - app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md
-- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_icon_variant.jsx
-- app/pb_kits/playbook/pb_copy_button/docs/_copy_button_icon_variant_react.md
 - app/pb_kits/playbook/pb_copy_button/docs/example.yml
 - app/pb_kits/playbook/pb_copy_button/docs/index.js
 - app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.html.erb
@@ -2658,7 +2660,6 @@ files:
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_variant.jsx
 - app/pb_kits/playbook/pb_weekday_stacked/docs/example.yml
 - app/pb_kits/playbook/pb_weekday_stacked/docs/index.js
-- dist/playbook-doc.js
 homepage: https://playbook.powerapp.cloud/
 licenses:
 - ISC

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_icon_variant_react.md

@@ -1 +0,0 @@
-Pass in `variant="icon"` to replace the Button with the Circle Icon Button kit.