RubyGems - playbook_ui - Versions diffs - 14.16.0.pre.rc.2 → 14.16.0.pre.rc.3 - Mend

playbook_ui 14.16.0.pre.rc.2 → 14.16.0.pre.rc.3

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 (358) hide show

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_full_circle.jsx CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { IconButton } from 'playbook-ui'
+import IconButton from '../../pb_icon_button/_icon_button'
 const IconButtonDefault = (props) => (
   <div>

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

@@ -1,5 +1,7 @@
 import React from 'react'
-import { IconButton, Flex } from 'playbook-ui'
+import IconButton from '../../pb_icon_button/_icon_button'
+import Flex from '../../pb_flex/_flex'
 const IconButtonSizes = (props) => (
   <div>

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb CHANGED Viewed

@@ -4,7 +4,7 @@
                                   new_window:object.new_window,
                                   target: object.target,
                                   dark: object.dark,
-                                  border_radius: "lg" }) do %>
+                                  border_radius: "xs" }) 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 CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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_position.jsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react'
-import { LineGraph, Title } from 'playbook-ui'
+import LineGraph from '../../pb_line_graph/_line_graph'
+import Title from '../../pb_title/_title'
 const data = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_link/docs/_link_color.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'playbook-ui'
+import Link from '../../pb_link/_link'
 const LinkColor = (props) => (
   <div>

data/app/pb_kits/playbook/pb_link/docs/_link_disabled.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'playbook-ui'
+import Link from '../../pb_link/_link'
 const LinkDisabled = (props) => (
   <div>

data/app/pb_kits/playbook/pb_link/docs/_link_icon.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'playbook-ui'
+import Link from '../../pb_link/_link'
 const LinkIcon = (props) => (
   <div>

data/app/pb_kits/playbook/pb_link/docs/_link_tag.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'playbook-ui'
+import Link from '../../pb_link/_link'
 const LinkTag = (props) => (
   <div>

data/app/pb_kits/playbook/pb_link/docs/_link_target.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'playbook-ui'
+import Link from '../../pb_link/_link'
 const LinkTarget = (props) => (
   <div>

data/app/pb_kits/playbook/pb_link/docs/_link_underline.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from 'playbook-ui'
+import Link from '../../pb_link/_link'
 const LinkUnderline = (props) => (
   <div>

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect, useState } from 'react'
-import { Map, mapTheme } from 'playbook-ui'
+import Map from '../../pb_map/_map'
+import mapTheme from '../../pb_map/pbMapTheme'
 import maplibregl from 'maplibre-gl'
 const MapDefault = (props) => {

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx CHANGED Viewed

@@ -1,5 +1,9 @@
 import React, { useRef, useEffect, useState } from 'react'
-import { Map, mapTheme, MapCustomButton } from 'playbook-ui'
+import Map from '../../pb_map/_map'
+import mapTheme from '../../pb_map/pbMapTheme'
+import MapCustomButton from '../../pb_map/_map_custom_button'
 import maplibregl from 'maplibre-gl'
 const MapWithCustomButton = (props) => {

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect, useState } from 'react'
-import { Map, mapTheme } from 'playbook-ui'
+import Map from '../../pb_map/_map'
+import mapTheme from '../../pb_map/pbMapTheme'
 import maplibregl from 'maplibre-gl'
 import MapboxDraw from "@mapbox/mapbox-gl-draw";

data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Message } from 'playbook-ui'
+import Message from '../../pb_message/_message'
 const MessageTimestamp = (props) => {
   return (

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx CHANGED Viewed

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

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx CHANGED Viewed

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,10 +1,9 @@
 import React from 'react'
-import {
-    Overlay,
-    Card,
-    Flex,
-    FlexItem,
-} from 'playbook-ui'
+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'
 const InlineCardsExample = () => {
     return (

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

@@ -1,10 +1,8 @@
 import React from 'react'
-import {
-    Overlay,
-    Card,
-    Flex,
-    FlexItem,
-} from 'playbook-ui'
+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'
 const InlineCardsExample = () => {
     return (

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

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

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

@@ -1,10 +1,8 @@
 import React, { forwardRef } from 'react'
-import {
-    Overlay,
-    Card,
-    Flex,
-    FlexItem,
-} from 'playbook-ui'
+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'
 const InlineCardsExample = forwardRef(function InlineCardsExample(ref) {
     return (

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

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

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

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

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

@@ -1,6 +1,9 @@
 import React, { useState, useEffect } from 'react'
-import {Body, Caption, Passphrase, ProgressSimple} from 'playbook-ui'
+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 zxcvbn from 'zxcvbn'
 const PassphraseCommon = (props) => {

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

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

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

@@ -1,6 +1,11 @@
 import React, { useState } from 'react'
-import { Body, Caption, Passphrase, ProgressSimple, TextInput } from 'playbook-ui'
+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 zxcvbn from 'zxcvbn'

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

@@ -1,7 +1,11 @@
 import React, { useState } from 'react'
 import { useEffect } from 'react'
-import { Caption, Passphrase, ProgressSimple, TextInput} from 'playbook-ui'
+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 zxcvbn from 'zxcvbn'
 const PassphraseStrengthChange = (props) => {