playbook_ui_docs 14.14.0.pre.rc.5 → 14.15.0.pre.alpha.PBNTR477draggabledropzone6743

data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.jsx

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx

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

data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Body, Flex, FlexItem, Title } from 'playbook-ui'
+import Body from '../../pb_body/_body'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Title from '../../pb_title/_title'
 
 const FlexWrap = (props) => {
   return (

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -25,7 +25,7 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>
@@ -46,6 +46,7 @@
   %>
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
+  <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -24,7 +24,7 @@
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
@@ -32,11 +32,12 @@
   <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
   <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
   <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
   <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
-  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
+  <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
+  <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

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

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

@@ -1,5 +1,9 @@
 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 '../../pb_form_pill/_form_pill'
+import Typeahead from '../../pb_typeahead/_typeahead'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_wrapped.html.erb

@@ -0,0 +1,40 @@
+<%
+  names = [
+    { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+    { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+    { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+    { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+    { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    html_options: { style: { maxWidth: "240px" }},
+    id: "typeahead-form-pill",
+    is_multi: true,
+    options: names,
+    label: "Wrapped Within Typeahead",
+    pills: true,
+    wrapped: true,
+}) %>
+
+<%= pb_rails("caption", props: { text: "Form Pill Wrapped Text" }) %>
+<%= pb_rails("card", props: { max_width: "xs" })  do %>
+  <%= pb_rails("form_pill", props: {
+      name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
+      avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
+      tabindex: 0,
+      wrapped: true,
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      icon: "badge-check",
+      text: "icon and a very long tag to show wrapped text",
+      tabindex: 0,
+      wrapped: true,
+  }) %>
+  <%= pb_rails("form_pill", props: {
+      text: "form pill long tag no tooltip show wrapped text",
+      tabindex: 0,
+      wrapped: true,
+  }) %>
+<% end %>

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

@@ -0,0 +1,50 @@
+import React from 'react'
+import { Card, Caption, FormPill, Typeahead } from 'playbook-ui'
+
+const names = [
+  { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },
+  { label: 'Isabella Anastasia Wellington', value: 'Isabella Anastasia Wellington' },
+  { label: 'Christopher Maximilian Harrington', value: 'Christopher Maximilian Harrington' },
+  { label: 'Elizabeth Seraphina Kensington', value: 'Elizabeth Seraphina Kensington' },
+  { label: 'Theodore Jonathan Abernathy', value: 'Theodore Jonathan Abernathy' },
+]
+
+const FormPillWrapped = (props) => {
+  return (
+    <>
+      <Typeahead
+          htmlOptions={{ style: { maxWidth: "240px" } }}
+          isMulti
+          label="Wrapped Within Typeahead"
+          options={names}
+          wrapped
+          {...props}
+      />
+      <Caption text="Form Pill Wrapped Text"/>
+      <Card maxWidth="xs">
+        <FormPill
+            avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
+            name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
+            onClick={() => alert('Click!')}
+            tabIndex={0}
+            wrapped
+        />
+        <FormPill
+            icon="badge-check"
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="icon and a very long tag to show wrapped text"
+            wrapped
+        />
+        <FormPill
+            onClick={() => {alert('Click!')}}
+            tabIndex={0}
+            text="form pill with a very long tag to show wrapped text"
+            wrapped
+        />
+      </Card>
+    </>
+  )
+}
+
+export default FormPillWrapped

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

@@ -0,0 +1,3 @@
+For Form Pills with longer text, the `wrapped` prop can be used to wrap the label within each Form Pill.
+
+**Note**: Avoid using the `wrapped` and `small` props together, as their styles conflict and may cause functionality issues.

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

@@ -4,6 +4,7 @@ examples:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_truncated_text: Truncated Text
+  - form_pill_wrapped: Wrapped Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
@@ -13,6 +14,7 @@ examples:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
   - form_pill_truncated_text: Truncated Text
+  - form_pill_wrapped: Wrapped Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon

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

@@ -5,3 +5,4 @@ export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
 export { default as FormPillColors } from './_form_pill_colors.jsx'
 export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'
+export { default as FormPillWrapped } from './_form_pill_wrapped.jsx'

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { GanttChart } from "playbook-ui";
+import GanttChart from '../../pb_gantt_chart/_gantt_chart'
 
 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 'playbook-ui'
+import Gauge from '../../pb_gauge/_gauge'
 
 const data = [
   { name: 'Name', value: 67 },

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

@@ -1,14 +1,13 @@
 import React from "react";
-import {
-  Title,
-  Card,
-  Gauge,
-  Flex,
-  FlexItem,
-  SectionSeparator,
-  Body,
-  Caption,
-} from "playbook-ui";
+
+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'
 
 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 'playbook-ui'
+import Gauge from '../../pb_gauge/_gauge'
 
 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 'playbook-ui'
+import Gauge from '../../pb_gauge/_gauge'
 
 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 'playbook-ui'
+import Gauge from '../../pb_gauge/_gauge'
 
 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 'playbook-ui'
+import Gauge from '../../pb_gauge/_gauge'
 
 const GaugeHeight = (props) => (
   <div>

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

@@ -1,5 +1,7 @@
 import React, { useState } from 'react'
-import { Button, Gauge } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+import Gauge from '../../pb_gauge/_gauge'
 
 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 'playbook-ui'
+import Gauge from '../../pb_gauge/_gauge'
 
 const data = [{
   name: 'Rating', value: 4.5,

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

@@ -1,5 +1,8 @@
 import React from 'react'
-import { Flex, FlexItem, Gauge } from 'playbook-ui'
+
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Gauge from '../../pb_gauge/_gauge'
 
 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 'playbook-ui'
+import Gauge from '../../pb_gauge/_gauge'
 
 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 'playbook-ui'
+import Gauge from '../../pb_gauge/_gauge'
 
 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 'playbook-ui'
+import Hashtag from '../../pb_hashtag/_hashtag'
 
 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 'playbook-ui'
+import Hashtag from '../../pb_hashtag/_hashtag'
 
 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 'playbook-ui'
+import Icon from '../../pb_icon/_icon'
 
 const config = {
   icon: (

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import IconButton from '../../pb_icon_button/_icon_button'
+
+const IconButtonDefault = (props) => (
+  <div>
+    <IconButton
+        {...props}
+    />
+    <IconButton
+        {...props}
+        marginTop="md"
+        variant="link"
+    />
+  </div>
+)
+
+export default IconButtonDefault

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

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import IconButton from '../../pb_icon_button/_icon_button'
+import Flex from '../../pb_flex/_flex'
+
+const IconButtonSizes = (props) => (
+  <div>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="lg"
+      />
+      <span>Large</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="sm"
+      />
+      <span>Small</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="xs"
+      />
+      <span>XSmall</span>
+    </Flex>
+    <Flex
+        align="center"
+        marginTop="md"
+    >
+      <IconButton
+          {...props}
+          size="1x"
+      />
+      <span>1x</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="2x"
+      />
+      <span>2x</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="3x"
+      />
+      <span>3x</span>
+    </Flex>
+    <Flex align="center">
+      <IconButton
+          {...props}
+          size="4x"
+      />
+      <span>4x</span>
+    </Flex>
+  </div>
+)
+
+export default IconButtonSizes

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

@@ -3,3 +3,7 @@ examples:
   rails:
   - icon_button_default: Default
   - icon_button_sizes: Sizes
+
+  react:
+  - icon_button_default: Default
+  - icon_button_sizes: Sizes

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

@@ -0,0 +1,2 @@
+export { default as IconButtonDefault } from './_icon_button_default.jsx'
+export { default as IconButtonSizes } from './_icon_button_sizes.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 'playbook-ui'
+import IconCircle from '../../pb_icon_circle/_icon_circle'
 
 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 'playbook-ui'
+import IconStatValue from '../../pb_icon_stat_value/_icon_stat_value'
 
 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 'playbook-ui'
+import IconStatValue from '../../pb_icon_stat_value/_icon_stat_value'
 
 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 'playbook-ui'
+import IconStatValue from '../../pb_icon_stat_value/_icon_stat_value'
 
 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 'playbook-ui'
+import IconStatValue from '../../pb_icon_stat_value/_icon_stat_value'
 
 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 'playbook-ui'
+import LabelValue from '../../pb_label_value/_label_value'
 
 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 'playbook-ui'
+import LabelValue from '../../pb_label_value/_label_value'
 
 const LabelValueDetails = (props) => {
   return (

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

@@ -1,5 +1,7 @@
 import React from 'react'
-import { Flex, LabelValue, Title } from 'playbook-ui'
+import Flex from '../../pb_flex/_flex'
+import LabelValue from '../../pb_label_value/_label_value'
+import Title from '../../pb_title/_title'
 
 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 'playbook-ui'
+import Legend from '../../pb_legend/_legend'
 
 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 'playbook-ui'
+import Legend from '../../pb_legend/_legend'
 
 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 'playbook-ui'
+import Legend from '../../pb_legend/_legend'
 
 const LegendPrefix = (props) => (
   <div>

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

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

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

@@ -1,5 +1,10 @@
 import React, { useState } from 'react'
-import { Flex, Image, Button, Body, FlexItem } from 'playbook-ui'
+
+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 Lightbox from '../_lightbox.tsx'
 
 const LightboxCurrentPhoto = (props) => {

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

@@ -1,5 +1,8 @@
 import React, { useState } from "react";
-import { Flex, Image, Title, Pill } from "playbook-ui";
+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 Lightbox from "../_lightbox.tsx";
 
 const LightboxCustomHeader = (props) => {

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

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

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Flex, Image } from 'playbook-ui'
+import Flex from '../../pb_flex/_flex'
+import Image from '../../pb_image/_image'
 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 'playbook-ui'
+import LineGraph from '../../pb_line_graph/_line_graph'
 
 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 'playbook-ui'
+import LineGraph from '../../pb_line_graph/_line_graph'
 
 const data = [{
   name: 'Number of Installations',