playbook_ui 14.15.0.pre.alpha.play1917lodashremoval2of36615 → 14.15.0.pre.alpha.play1949lodashremoval3of36758

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

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

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

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

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

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

@@ -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_multi_level_select/_multi_level_select.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect, useRef, forwardRef } from "react";
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import {
@@ -9,7 +9,7 @@ import {
 } from "../utilities/props";
 import Icon from "../pb_icon/_icon";
 import FormPill from "../pb_form_pill/_form_pill";
-import { cloneDeep } from "lodash";
+import { cloneDeep } from "../utilities/object";
 import MultiLevelSelectOptions from "./multi_level_select_options";
 import MultiLevelSelectContext from "./context";
 
@@ -23,6 +23,13 @@ import {
   getExpandedItems,
 } from "./_helper_functions";
 
+interface MultiLevelSelectComponent
+  extends React.ForwardRefExoticComponent<
+    MultiLevelSelectProps & React.RefAttributes<HTMLInputElement>
+  > {
+  Options: typeof MultiLevelSelectOptions;
+}
+
 type MultiLevelSelectProps = {
   aria?: { [key: string]: string }
   className?: string
@@ -35,6 +42,7 @@ type MultiLevelSelectProps = {
   name?: string
   returnAllSelected?: boolean
   treeData?: { [key: string]: string; }[] | any
+  onChange?: (event: { target: { name?: string; value: any } }) => void
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[] | any
   variant?: "multi" | "single"
@@ -42,7 +50,7 @@ type MultiLevelSelectProps = {
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
-const MultiLevelSelect = (props: MultiLevelSelectProps) => {
+const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((props) => {
   const {
     aria = {},
     className,
@@ -55,6 +63,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     name,
     returnAllSelected = false,
     treeData,
+    onChange = () => null,
     onSelect = () => null,
     selectedIds,
     variant = "multi",
@@ -287,8 +296,10 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     // Logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
+      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
+      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
 
@@ -314,8 +325,10 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     const updatedTree = changeItem(filtered[0], check);
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
+      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
+      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
 
@@ -348,6 +361,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     setIsDropdownClosed(true);
 
     onSelect(selectedItem);
+    onChange({ target: { name, value: selectedItem } });
   };
 
   // Single select: reset the tree state upon typing
@@ -389,12 +403,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   // Rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: string; }[] | any ) => {
     const hasOptionsChild = React.Children.toArray(props.children).some(
-      (child: any) => child.type === MultiLevelSelect.Options
+      (child) => React.isValidElement(child) && child.type === MultiLevelSelect.Options
     );
 
     if (hasOptionsChild) {
       return React.Children.map(props.children, (child) => {
-        if (child.type === MultiLevelSelect.Options) {
+        if (React.isValidElement(child) && child.type === MultiLevelSelect.Options) {
           return React.cloneElement(child, { items });
         }
         return null;
@@ -459,6 +473,18 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                     ))
                   : null}
 
+                {!returnAllSelected
+                  ? defaultReturn.map((item) => (
+                      <input
+                          disabled={disabled}
+                          key={item.id} 
+                          name={`${name}[]`}
+                          type="hidden"
+                          value={item.id}
+                      />
+                    ))
+                  : null}
+
                 {returnAllSelected &&
                 returnedArray.length !== 0 &&
                 inputDisplay === "pills"
@@ -547,8 +573,9 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
       </MultiLevelSelectContext.Provider>
     </div>
   );
-};
+}) as MultiLevelSelectComponent;
 
+MultiLevelSelect.displayName = "MultiLevelSelect";
 MultiLevelSelect.Options = MultiLevelSelectOptions;
 
 export default MultiLevelSelect;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx

@@ -0,0 +1,91 @@
+import React from "react"
+import MultiLevelSelect from "../_multi_level_select"
+import { useForm } from "react-hook-form"
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const MultiLevelSelectReactHook = (props) => {
+  const { register, watch } = useForm()
+  const selectedItems = watch("departments")
+  selectedItems && console.log("Selected Items", selectedItems)
+
+  return (
+    <div>
+      <MultiLevelSelect
+          id="multiselect-default"
+          marginBottom="md"
+          treeData={treeData}
+          {...register("departments")}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default MultiLevelSelectReactHook

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.md

@@ -0,0 +1 @@
+You can pass `react-hook-form` props to the MultiLevelSelect kit. Check your console to see the full data selected from this example.

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

@@ -12,6 +12,7 @@ examples:
 
   react:
   - multi_level_select_default: Default
+  - multi_level_select_react_hook: React Hook
   - multi_level_select_single: Single Select
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected

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

@@ -7,3 +7,4 @@ export { default as MultiLevelSelectColor } from './_multi_level_select_color.js
 export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
 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'

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -40,7 +40,7 @@ module Playbook
           treeData: tree_data,
           returnAllSelected: return_all_selected,
           selectedIds: selected_ids,
-          input_name: input_name,
+          inputName: input_name,
           variant: variant,
           pillColor: pill_color,
           wrapped: wrapped,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -23,6 +23,7 @@ type PhoneNumberInputProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   error?: string,
+  hiddenInputs?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   initialCountry?: string,
@@ -72,6 +73,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     dark = false,
     data = {},
     disabled = false,
+    hiddenInputs = false,
     htmlOptions = {},
     id = "",
     initialCountry = "",
@@ -243,6 +245,10 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       countrySearch: false,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
+      hiddenInput: hiddenInputs ? () => ({
+        phone: `${name}_full`,
+        country: `${name}_country_code`,
+      }) : null,
     })
 
     itiRef.current = telInputInit;

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

@@ -1,5 +1,7 @@
 import React, { useEffect, useRef } from 'react'
-import { Body, PhoneNumberInput } from 'playbook-ui'
+
+import Body from '../../pb_body/_body'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 
 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

@@ -1,5 +1,7 @@
 import React, { useRef } from 'react'
-import { Button, PhoneNumberInput } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
 
 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.html.erb

@@ -1,3 +1,3 @@
 <%= pb_rails("phone_number_input", props: {
-    id: "hello"
+    id: "hello",
 }) %>

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

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

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

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

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.html.erb

@@ -0,0 +1,5 @@
+<%= pb_rails("phone_number_input", props: {
+    hidden_inputs: true,
+    id: "hidden_inputs",
+    name: "hidden_inputs",
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_hidden_inputs.md

@@ -0,0 +1 @@
+The `hidden_inputs` boolean prop generates two hidden input fields, {field_name}_full and {field_name}_country_code. The value passed when the form is submitted contains the full phone number including the country code. Because it requires the submission of a form to function, only use this prop on Rails phone number elements within html form tags `<form>/<form>` or [pb_forms](https://playbook.powerapp.cloud/kits/form). Read the [intl-tel-input](https://intl-tel-input.com/examples/hidden-input.html) docs for more information.

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

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

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

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

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

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