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

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/_icon_button.tsx

@@ -49,7 +49,7 @@ const IconButton = (props: IconButtonProps) => {
         id={id}
     >
       <Button
-          borderRadius="xs"
+          borderRadius="lg"
           htmlType={htmlType}
           link={link}
           newWindow={newWindow}

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/icon_button.html.erb

@@ -4,7 +4,7 @@
                                   new_window:object.new_window,
                                   target: object.target,
                                   dark: object.dark,
-                                  border_radius: "xs" }) do %>
+                                  border_radius: "lg" }) do %>
   <%= pb_rails("icon", props: { icon: object.icon,
                                 fixed_width: true,
                                 dark: object.dark,

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/_helper_functions.tsx

@@ -88,11 +88,7 @@ export const getDefaultCheckedItems = (
     items.forEach((item: { [key: string]: any }) => {
       if (item.checked) {
         if (item.children && item.children.length > 0) {
-           // Filter out disabled children (only consider selectable items)
-           const selectableChildren = item.children.filter(
-            (child: { [key: string]: any }) => !child.disabled
-          );
-          const uncheckedChildren = selectableChildren.filter(
+          const uncheckedChildren = item.children.filter(
             (child: { [key: string]: any }) => !child.checked
           );
           if (uncheckedChildren.length === 0) {

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -113,9 +113,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
       return;
     }
     return tree.map((item: { [key: string]: any }) => {
-      if (!item.disabled) {
-        item.checked = check;
-      }
+      item.checked = check;
       item.children = modifyRecursive(item.children, check);
       return item;
     });
@@ -126,16 +124,12 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     treeData: { [key: string]: any }[],
     selectedIds: string[],
     parent_id: string | null = null,
-    depth = 0,
-    parentDisabled = false
+    depth = 0
   ) => {
     if (!Array.isArray(treeData)) {
       return;
     }
     return treeData.map((item: { [key: string]: any } | any) => {
-      // An item is disabled if it is explicitly set as disabled or if its parent is disabled
-      const isDisabled = item.disabled || (parentDisabled && !returnAllSelected);
-
       const newItem = {
         ...item,
         checked: Boolean(
@@ -143,7 +137,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         ),
         parent_id,
         depth,
-        disabled: isDisabled,
       };
       if (newItem.children && newItem.children.length > 0) {
         const children =
@@ -154,8 +147,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
           children,
           selectedIds,
           newItem.id,
-          depth + 1,
-          isDisabled
+          depth + 1
         );
       }
       return newItem;
@@ -252,9 +244,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     return tree.map((item: any) => {
       if (item.id != id) item.children = modifyValue(id, item.children, check);
       else {
-        if (!item.disabled) {
-          item.checked = check;
-        }
+        item.checked = check;
+
         if (variant === "single") {
           // Single select: no children should be checked
           item.children = modifyRecursive(item.children, !check);

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,11 +8,7 @@ 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_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
@@ -24,8 +20,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_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

@@ -8,7 +8,3 @@ export { default as MultiLevelSelectWithChildren } from './_multi_level_select_w
 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 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'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx

@@ -118,7 +118,6 @@ const classes = classnames(
                     >
                         <input
                             checked={item.checked}
-                            disabled={item.disabled}
                             name={item.label}
                             onChange={(e) => {
                               handledropdownItemClick(e, !item.checked);

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) => {