playbook_ui_docs 14.15.0.pre.rc.3 → 14.16.0.pre.alpha.PLAY1938completetooltipfloatinguitransition6830

data/app/pb_kits/playbook/pb_empty_state/docs/default_image/utils.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+
+const computer = (
+  <svg
+      fill="none"
+      height={251}
+      width={341}
+      xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+        d="M13.131 233.77c8.809-2.023 18.518-1.86 26.426-6.068 17.42-9.269 21.361-45.131 10.744-58.369-15.926-19.858-33.825-2.383-25.724 10.342 2.817 4.425 9.208 7.26 14.112 8.505 40.222 10.212 62.266-21.411 91.212-43.379 8.325-6.318 16.972-12.289 25.976-17.712 7.597-4.575 15.571-8.608 23.725-12.22 8.436-3.738 16.866-7.895 25.954-9.791 19.121-3.989 30.617-6.438 50.156-7.193 6.868-.265 21.421 2.154 27.93 4.179a73.8 73.8 0 0 1 13.162 5.561c4.289 2.319 8.378 5.018 12.09 8.093 3.993 3.307 7.64 7.011 10.912 10.96 2.894 3.491 5.521 7.237 7.503 11.258 2.173 4.41 3.901 9.072 4.873 13.855.896 4.408-.929 18.105-2.018 22.49-2.446 9.854-26.142 9.975-33.36 5.394-17.25-10.948 2.072-41.177 8.585-49.299 15.495-19.328 29.66-28.821 24.775-54.869-.21-1.121-5.837-23.386-11.566-27.894-5.729-4.509-16.046-17.098-28.713-17.486"
+        stroke="#DFE3E8"
+        strokeDasharray="5 9"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={3}
+    />
+    <path d="M12.034 231.969h240.667v16.979H12.034z"
+        fill="#fff"
+    />
+    <path
+        clipRule="evenodd"
+        d="M24.04 232c1.59 9.986 50.66 18 110.96 18s109.37-8.014 110.96-18H24.04Z"
+        fill="#EFEFEF"
+        fillRule="evenodd"
+        opacity={0.398}
+    />
+    <path d="M12.028 233.803h240.726v-3.26H12.028v3.26Z"
+        fill="#DFE3E8"
+    />
+    <path
+        clipRule="evenodd"
+        d="M111.452 145.308h124.137c3 0 5.432 2.432 5.432 5.433v83.244a5.432 5.432 0 0 1-5.432 5.433H111.452c-3 0-5.432-2.432-5.432-5.433v-83.244a5.432 5.432 0 0 1 5.432-5.433Z"
+        fill="#E6EBEF"
+        fillRule="evenodd"
+    />
+    <mask
+        height={95}
+        id="a"
+        maskUnits="userSpaceOnUse"
+        style={{
+        maskType: "luminance",
+      }}
+        width={136}
+        x={106}
+        y={145}
+    >
+      <path
+          clipRule="evenodd"
+          d="M111.452 145.308h124.137c3 0 5.432 2.432 5.432 5.433v83.244a5.432 5.432 0 0 1-5.432 5.433H111.452c-3 0-5.432-2.432-5.432-5.433v-83.244a5.432 5.432 0 0 1 5.432-5.433Z"
+          fill="#fff"
+          fillRule="evenodd"
+      />
+    </mask>
+    <g mask="url(#a)">
+      <path
+          clipRule="evenodd"
+          d="m233.81 130.202-98.487 126.253H90.747l-9.791-155.738 152.854 29.485Z"
+          fill="#EFF3F6"
+          fillRule="evenodd"
+      />
+    </g>
+    <path
+        clipRule="evenodd"
+        d="m190.054 195.575-15.874 11.326v4.703a.423.423 0 0 1-.669.348l-15.206-10.848-.018-.013a.596.596 0 0 1-.249-.486v-11.039c0-.193.093-.375.25-.486l.017-.013 15.875-11.326v-4.703c0-.347.387-.549.668-.348l15.206 10.848.018.013c.157.111.25.293.25.485V195.076a.596.596 0 0 1-.251.486l-.017.013Z"
+        fill="#F9F9F9"
+        fillRule="evenodd"
+    />
+    <path
+        d="m174.18 206.901-.872-1.222a1.503 1.503 0 0 0-.628 1.222h1.5Zm15.874-11.326.871 1.221.02-.014-.891-1.207Zm-16.543 16.377.872-1.22-.001-.001-.871 1.221Zm-15.206-10.848-.88 1.215.009.006.871-1.221Zm-.018-.013.88-1.215-.008-.006-.872 1.221Zm.001-12.011.87 1.222.021-.016-.891-1.206Zm.017-.013-.871-1.221-.02.014.891 1.207Zm15.875-11.326.871 1.221a1.5 1.5 0 0 0 .629-1.221h-1.5Zm.668-5.051-.872 1.22.001.001.871-1.221Zm15.206 10.848.88-1.215-.009-.006-.871 1.221Zm.018.013-.88 1.215.011.008.869-1.223Zm-.001 12.011-.87-1.222-.02.015.89 1.207Zm-15.02 12.56 15.874-11.326-1.742-2.442-15.875 11.325 1.743 2.443Zm.629 3.482v-4.703h-3v4.703h3Zm-3.041 1.569c1.29.921 3.041-.023 3.041-1.569h-3c0-.853.974-1.393 1.703-.872l-1.744 2.441Zm-15.205-10.848 15.206 10.848 1.742-2.442-15.206-10.848-1.742 2.442Zm-.027-.02.018.014 1.76-2.43-.018-.013-1.76 2.429Zm-.869-1.7c0 .676.325 1.312.877 1.707l1.744-2.442a.905.905 0 0 1 .379.735h-3Zm0-.005v.005h3v-.005h-3Zm0-11.03v11.03h3v-11.03h-3Zm0-.004v.004h3v-.004h-3Zm.88-1.709a2.098 2.098 0 0 0-.88 1.709h3c0 .29-.14.565-.38.736l-1.74-2.445Zm-.004.003-.017.013 1.782 2.413.017-.012-1.782-2.414Zm15.894-11.34-15.874 11.326 1.742 2.442 15.875-11.326-1.743-2.442Zm-.628-3.482v4.703h3v-4.703h-3Zm3.04-1.569c-1.29-.921-3.04.023-3.04 1.569h3c0 .853-.975 1.393-1.704.872l1.744-2.441Zm15.205 10.848-15.206-10.848-1.742 2.442 15.206 10.848 1.742-2.442Zm.028.02-.019-.014-1.76 2.43.018.013 1.761-2.429Zm.869 1.699c0-.673-.324-1.312-.881-1.708l-1.738 2.446a.906.906 0 0 1-.381-.738h3Zm0 .006v-.006h-3v.006h3Zm0 11.029v-11.029h-3v11.029h3Zm0 .005v-.005h-3v.005h3Zm-.881 1.709a2.1 2.1 0 0 0 .881-1.709h-3c0-.29.139-.565.379-.736l1.74 2.445Zm.004-.003.017-.013-1.781-2.414-.017.013 1.781 2.414Z"
+        fill="#DFE3E8"
+    />
+    <path
+        clipRule="evenodd"
+        d="M236.947 145.308H111.452c-3 0-5.432 2.432-5.432 5.433v83.244a5.432 5.432 0 0 0 5.432 5.433h125.495c3 0 5.433-2.432 5.433-5.433v-83.244a5.433 5.433 0 0 0-5.433-5.433Zm-127.668 5.433c0-1.2.973-2.173 2.173-2.173h125.495c1.2 0 2.173.973 2.173 2.173v83.244c0 1.2-.973 2.173-2.173 2.173H111.452c-1.2 0-2.173-.973-2.173-2.173v-83.244Z"
+        fill="#DFE3E8"
+        fillRule="evenodd"
+    />
+    <circle
+        cx={272.814}
+        cy={31.086}
+        r={6.5}
+        stroke="#DFE3E8"
+        strokeWidth={3}
+        transform="rotate(-58 272.814 31.086)"
+    />
+    <path
+        d="m269.32 17.808 1.156-1.85c.435-.697 1.284-.86 1.869-.494l15.564 9.725c.584.366.811 1.2.376 1.897l-1.156 1.85c-.435.696-1.285.859-1.87.494l-15.564-9.726c-.584-.365-.81-1.2-.375-1.896Z"
+        stroke="#DFE3E8"
+        strokeWidth={3}
+    />
+    <path
+        d="m271.277 14.944-.852-6.723"
+        stroke="#DFE3E8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={4}
+    />
+    <path
+        clipRule="evenodd"
+        d="m268.414 18.314-6.042 2.12 6.042-2.12Z"
+        stroke="#DFE3E8"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={4}
+    />
+    <circle
+        cx={283.883}
+        cy={13.973}
+        r={6.5}
+        stroke="#DFE3E8"
+        strokeWidth={3}
+        transform="rotate(-58 283.883 13.973)"
+    />
+  </svg>
+)
+
+export default computer

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

@@ -0,0 +1,8 @@
+examples:
+
+
+  react:
+  - empty_state_default: Default
+  - empty_state_size: Size
+  - empty_state_orientation: Orientation
+  - empty_state_alignment: Alignment

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

@@ -0,0 +1,4 @@
+export { default as EmptyStateDefault } from './_empty_state_default.jsx'
+export { default as EmptyStateOrientation } from './_empty_state_orientation.jsx'
+export { default as EmptyStateSize } from './_empty_state_size.jsx'
+export { default as EmptyStateAlignment } from './_empty_state_alignment.jsx'

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx

@@ -1,10 +1,9 @@
 
 import React, { useState } from 'react'
-import {
-  FileUpload,
-  List,
-  ListItem,
-} from 'playbook-ui'
+
+import FileUpload from '../../pb_file_upload/_file_upload'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 
 const AcceptedFilesList = ({ files }) => (
   <List>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx

@@ -1,7 +1,9 @@
 /* eslint-disable react/no-multi-comp */
 
 import React, { useState } from "react";
-import { FileUpload, List, ListItem } from "playbook-ui";
+import FileUpload from '../../pb_file_upload/_file_upload'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 
 const AcceptedFilesList = ({ files }) => (
   <List>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx

@@ -1,10 +1,8 @@
 
 import React, { useState } from 'react'
-import {
-  FileUpload,
-  List,
-  ListItem,
-} from 'playbook-ui'
+import FileUpload from '../../pb_file_upload/_file_upload'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 
 const AcceptedFilesList = ({ files }) => (
   <List>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx

@@ -1,10 +1,8 @@
 
 import React, { useState } from 'react'
-import {
-  FileUpload,
-  List,
-  ListItem,
-} from 'playbook-ui'
+import FileUpload from '../../pb_file_upload/_file_upload'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 
 const AcceptedFilesList = ({ files }) => (
   <List>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx

@@ -1,12 +1,11 @@
 /* eslint-disable react/no-multi-comp */
 
 import React, { useState } from 'react'
-import {
-  Body,
-  FileUpload,
-  List,
-  ListItem,
-} from 'playbook-ui'
+
+import Body from '../../pb_body/_body'
+import FileUpload from '../../pb_file_upload/_file_upload'
+import List from '../../pb_list/_list'
+import ListItem from '../../pb_list/_list_item'
 
 const AcceptedFilesList = ({ files }) => (
   <List>

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -1,5 +1,10 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+import Filter from '../../pb_filter/_filter'
+import Flex from '../../pb_flex/_flex'
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
 
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Filter from '../../pb_filter/_filter'
+import Flex from '../../pb_flex/_flex'
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
 
 const FilterMaxHeight = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Button, Filter, Flex, Select } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+import Filter from '../../pb_filter/_filter'
+import Flex from '../../pb_flex/_flex'
+import Select from '../../pb_select/_select'
 
 const FilterMaxWidth = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx

@@ -1,5 +1,10 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+import Filter from '../../pb_filter/_filter'
+import Flex from '../../pb_flex/_flex'
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
 
 const FilterNoBackground = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Filter from '../../pb_filter/_filter'
+import Flex from '../../pb_flex/_flex'
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
 
 const FilterNoSort = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Filter from '../../pb_filter/_filter'
+import Flex from '../../pb_flex/_flex'
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
 
 const FilterOnly = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx

@@ -1,5 +1,10 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+
+import Button from '../../pb_button/_button'
+import Filter from '../../pb_filter/_filter'
+import Flex from '../../pb_flex/_flex'
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
 
 const SortingChangeCallback = (sortOptions) => {
   alert(JSON.stringify(sortOptions[0]))

data/app/pb_kits/playbook/pb_filter/docs/_filter_popover_props.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Button, Filter, Flex, Select, TextInput } from 'playbook-ui'
+import Button from '../../pb_button/_button'
+import Filter from '../../pb_filter/_filter'
+import Flex from '../../pb_flex/_flex'
+import Select from '../../pb_select/_select'
+import TextInput from '../../pb_text_input/_text_input'
 
 const FilterPopoverProps = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_flex/docs/_flex_align.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 FlexAlign = (props) => {
   return (

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

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

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Flex, FlexItem } from 'playbook-ui'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const FlexGap = (props) => {
   const count = () => {

data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.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 FlexInline = (props) => {
   return (

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_align_self.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 FlexItemAlignSelf = (props) => {
   return (

data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.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 FlexItemExample = (props) => {
   return (

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

@@ -22,10 +22,76 @@
 
 %>
 
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
 <%= 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 } %>
@@ -47,6 +113,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.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form-default", tree_data: treeData, margin_bottom: "sm", label: "Example Multi Level Select field" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -21,10 +21,76 @@
   ]
 %>
 
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
 <%= 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)." } } %>
@@ -35,9 +101,10 @@
   <%= 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.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
 
   <%= 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 %>