playbook_ui 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795 → 14.15.0.pre.rc.0

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

@@ -3,4 +3,3 @@ export { default as TitleLightWeight } from './_title_light_weight.jsx'
 export { default as TitleColors } from './_title_colors.jsx'
 export { default as TitleResponsive } from './_title_responsive.jsx'
 export { default as TitleTruncate } from './_title_truncate.jsx'
-export { default as TitleDisplaySize } from './_title_display_size.jsx'

data/app/pb_kits/playbook/pb_title/title.html.erb

@@ -1,2 +1,7 @@
-<%= pb_content_tag(object.tag) do %><%= content.presence || object.text %><% end %>
+<%= content_tag(object.tag,
+    aria: object.aria,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %><%= content.presence || object.text %><% end %>
     

data/app/pb_kits/playbook/pb_title/title.rb

@@ -16,15 +16,12 @@ module Playbook
                      default: nil,
                      deprecated: true
       prop :bold, type: Playbook::Props::Boolean, default: true
-      prop :display_size, type: Playbook::Props::Enum,
-                          values: [nil, "xs", "sm", "md", "lg", "xl", "xxl"],
-                          default: nil
 
       def classname
         if is_size_responsive
           generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
         else
-          generate_classname("pb_title_kit", size, variant, color, is_bold) + generate_display_size
+          generate_classname("pb_title_kit", size, variant, color, is_bold)
         end
       end
 
@@ -32,12 +29,6 @@ module Playbook
         bold ? nil : "thin"
       end
 
-      def generate_display_size
-        return "" if display_size.nil?
-
-        " pb_title_kit_dynamic_#{display_size}"
-      end
-
       def is_size_responsive
         try(:size).is_a?(::Hash)
       end

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import Toggle from '../../pb_toggle/_toggle'
+import { Toggle } from 'playbook-ui'
 
 const ToggleCustom = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import Caption from '../../pb_caption/_caption'
-import Title from '../../pb_title/_title'
-import Toggle from '../../pb_toggle/_toggle'
+import { Caption, Title, Toggle } from 'playbook-ui'
 
 const ToggleCustomRadio = () => {
   const [choice, setChoice] = useState('walk')

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Toggle from '../../pb_toggle/_toggle'
+import { Toggle } from 'playbook-ui'
 
 const ToggleDefault = () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Toggle from '../../pb_toggle/_toggle'
+import { Toggle } from 'playbook-ui'
 
 const ToggleDisabled= () => {
   return (

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import Caption from '../../pb_caption/_caption'
-import Title from '../../pb_title/_title'
-import Toggle from '../../pb_toggle/_toggle'
+import { Caption, Title, Toggle } from 'playbook-ui'
 
 const ToggleName = () => {
   const [choice, setChoice] = useState(false)

data/app/pb_kits/playbook/pb_toggle/toggle.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    aria: object.aria,
+    class: object.classname,
+    **combined_html_options) do %>
   <label class="pb_toggle_wrapper">
     <%= content.presence || object.input %>
     <div class="pb_toggle_control"></div>

data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss

@@ -54,7 +54,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
       margin-bottom: 50px;
     }
 
-    &.visible,
+    &.visible, 
     &.show {
       z-index: $z_9;
       padding: $space_xs $space_sm;
@@ -117,7 +117,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
         color: $charcoal;
         background-color: $white;
       }
-      .arrow {
+      .arrow {        
         border-color: $white transparent transparent transparent;
         opacity: $opacity_10;
       }
@@ -141,6 +141,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="right"] {
     box-shadow: -8px 0 28px 0 $tooltip_shadow;
+    margin: 0 0 0 $space_sm;
     .arrow {
       left: -18px;
       right: auto;
@@ -155,6 +156,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="bottom"] {
     box-shadow: 0 -12px 28px 0 $tooltip_shadow;
+    margin: $space_sm 0 0 0;
     .arrow {
       top: -18px;
       margin-bottom: 0;
@@ -167,6 +169,7 @@ $tooltip_shadow: rgba(60, 106, 172, 0.18);
 
   &[data-popper-placement="left"] {
     box-shadow: 8px 0 28px 0 $tooltip_shadow;
+    margin: 0 $space_sm 0 0;
     .arrow {
       margin-bottom: 0;
       right: -18px;

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -25,18 +25,12 @@ type TooltipProps = {
   children: JSX.Element,
   data?: { [key: string]: string },
   delay?: number | Partial<{open: number; close: number}>,
-  height?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   icon?: string,
   interaction?: boolean,
-  maxHeight?: string,
-  maxWidth?: string,
-  minHeight?: string,
-  minWidth?: string,
   placement?: Placement,
   position?: "absolute" | "fixed";
   text: string,
-  width: string,
   showTooltip?: boolean,
   forceOpenTooltip?: boolean,
 } & GlobalProps
@@ -48,19 +42,13 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     children,
     data = {},
     delay = 0,
-    height,
     htmlOptions = {},
     icon = null,
     interaction = false,
-    maxHeight,
-    maxWidth,
-    minHeight,
-    minWidth,
     placement: preferredPlacement = "top",
     position = "absolute",
     text,
     showTooltip = true,
-    width,
     zIndex,
     forceOpenTooltip = false,
     ...rest
@@ -127,18 +115,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     top: "bottom",
   }[placement.split("-")[0]]
 
-  const tooltipSizing = () => {
-    return Object.assign(
-      {},
-      height ? { height: height } : {},
-      maxHeight ? { maxHeight: maxHeight } : {},
-      maxWidth ? { maxWidth: maxWidth } : {},
-      minHeight ? { minHeight: minHeight } : {},
-      minWidth ? { minWidth: minWidth } : {},
-      width ? { width: width } : {}
-    );
-};
-
   return (
     <>
       <div
@@ -168,7 +144,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
               ref: refs.setFloating,
               role: "tooltip",
               style: {
-                ...tooltipSizing(),
                 position: strategy,
                 top: y ?? 0,
                 left: x ?? 0,

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import { Tooltip, Flex, FlexItem } from 'playbook-ui';
 
 const TooltipDefaultReact = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
 
 const TooltipDelay = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.erb

@@ -0,0 +1,10 @@
+<%= pb_rails("icon_circle", props: { icon: "paper-plane", id: "result-1-sample-email-link" }) %>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_id: "result-1-sample-email-link",
+  tooltip_id: "sample-email-tooltip-result-1",
+  position: "top",
+  dark: true
+}) do %>
+  Send Email
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
+import { Tooltip, Button, Flex } from 'playbook-ui'
 
 const TooltipIcon = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx

@@ -1,8 +1,5 @@
 import React from 'react'
-import Button from '../../pb_button/_button'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import { Tooltip, Button, Flex, FlexItem } from 'playbook-ui';
 
 const TooltipInteraction = (props) => {
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx

@@ -1,7 +1,5 @@
 import React from 'react'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
+import { Tooltip, Flex, CircleIconButton } from 'playbook-ui'
 
 const TooltipMargin = (props) => {
   return (

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx

@@ -1,9 +1,5 @@
 import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Body from '../../pb_body/_body'
-import Tooltip from '../../pb_tooltip/_tooltip'
-import Flex from '../../pb_flex/_flex'
-import FlexItem from '../../pb_flex/_flex_item'
+import {  Button, Body, Flex, FlexItem, Tooltip } from 'playbook-ui'
 
 const TooltipShowTooltipReact = (props) => {
   const [showTooltip, setShowTooltip] = useState(true);

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

@@ -2,19 +2,15 @@ examples:
 
   rails:
   - tooltip_default: Default
-  - tooltip_interaction: Content Interaction
   - tooltip_selectors: Using Common Selectors
-  - tooltip_sizing: Tooltip Sizing
-  - tooltip_icon_rails: Tooltip with Icon
   - tooltip_with_icon_circle: Icon Circle Tooltip
-  - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
 
   react:
   - tooltip_default_react: Default
   - tooltip_interaction: Content Interaction
   - tooltip_margin: Margin
-  - tooltip_sizing: Tooltip Sizing
   - tooltip_icon: Tooltip with Icon
   - tooltip_delay: Delay
   - tooltip_show_tooltip_react: Show Tooltip
+

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

@@ -1,7 +1,6 @@
 export { default as TooltipDefaultReact } from './_tooltip_default_react'
 export { default as TooltipInteraction } from './_tooltip_interaction'
 export { default as TooltipMargin } from './_tooltip_margin'
-export { default as TooltipSizing } from './_tooltip_sizing'
 export { default as TooltipIcon } from './_tooltip_icon'
 export { default as TooltipDelay } from './_tooltip_delay'
 export { default as TooltipShowTooltipReact } from './_tooltip_show_tooltip_react'

data/app/pb_kits/playbook/pb_tooltip/index.js

@@ -11,7 +11,7 @@ const TOOLTIP_TIMEOUT = 250
 
 export default class PbTooltip extends PbEnhancedElement {
   static get selector() {
-    return '[data-pb-tooltip-kit="true"][data-pb-tooltip-interaction="false"]:not([data-pb-tooltip-delay-open]):not([data-pb-tooltip-delay-close])'
+    return '[data-pb-tooltip-kit]'
   }
 
   connect() {

data/app/pb_kits/playbook/pb_tooltip/tooltip.html.erb

@@ -1,11 +1,10 @@
 <%= content_tag(:div,
-      id: object.id,
-      data: object.data,
-      class: object.classname,
-      style: remove_height_properties(combined_html_options[:style]) || "",
-      **combined_html_options.except(:style)) do %>
-  <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.height_and_width_helper %>">
+  id: object.id,
+  data: object.data,
+  class: object.classname,
+  **combined_html_options) do %>
+  <div class="tooltip_tooltip" id="<%= object.tooltip_id %>" role="tooltip">
     <%= content.presence %>
     <div class="arrow" id="<%= object.tooltip_id %>-arrow"></div>
   </div>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -3,63 +3,30 @@
 module Playbook
   module PbTooltip
     class Tooltip < Playbook::KitBase
-      prop :dark, type: Playbook::Props::Boolean,
-                  default: false
-      prop :delay_open
-      prop :delay_close
-      prop :height
-      prop :interaction, type: Playbook::Props::Boolean,
-                         default: false
-      prop :max_height
-      prop :max_width
-      prop :min_height
-      prop :min_width
       prop :position
-      prop :tooltip_id
       prop :trigger_element_selector
       prop :trigger_element_id, deprecated: true
+      prop :tooltip_id
+      prop :dark, type: Playbook::Props::Boolean,
+                  default: false
       prop :trigger_method, type: Playbook::Props::Enum,
                             values: %w[hover click],
                             default: "hover"
-      prop :width
 
       def classname
         generate_classname("pb_tooltip_kit", dark_class)
       end
 
-      def remove_height_properties(combined_html_options_style)
-        return nil if combined_html_options_style.nil?
-
-        combined_html_options_style.gsub(/\s*(height|min-height|max-height)\s*:[^;]*;?\s*/, "")
-                                   .strip
-                                   .presence
-      end
-
-      def height_and_width_helper
-        out = ""
-        out += "width: #{width};" if width.present?
-        out += "height: #{height};" if height.present?
-        out += "max-height: #{max_height};" if max_height.present?
-        out += "max-width: #{max_width};" if max_width.present?
-        out += "min-height: #{min_height};" if min_height.present?
-        out += "min-width: #{min_width};" if min_width.present?
-        out
-      end
-
       def data
-        data = Hash(values[:data]).merge(
+        Hash(values[:data]).merge(
           pb_tooltip_kit: true,
           pb_tooltip_position: position,
           pb_tooltip_trigger_element_selector: trigger_element_selector,
           pb_tooltip_trigger_element_id: trigger_element_id,
           pb_tooltip_tooltip_id: tooltip_id,
           pb_tooltip_show_tooltip: true,
-          pb_tooltip_trigger_method: trigger_method,
-          pb_tooltip_interaction: interaction
+          pb_tooltip_trigger_method: trigger_method
         )
-        data = data.merge(pb_tooltip_delay_open: delay_open) if delay_open
-        data = data.merge(pb_tooltip_delay_close: delay_close) if delay_close
-        data
       end
 
     private

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -10,7 +10,7 @@ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import treemap from 'highcharts/modules/treemap'
-import { merge } from '../utilities/object'
+import { merge } from 'lodash'
 
 type TreemapChartProps = {
   chartData: {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -126,9 +126,6 @@
         color: $text_lt_default;
       }
       &__control {
-        &--is-disabled {
-          background-color: shade($white, 5%);
-        }
         &--is-focused {
           @include pb_textarea_focus;
           @include transition_default;
@@ -255,7 +252,6 @@
           color: $text_dk_default;
         }
         &__control {
-        
           &--is-focused {
             @include pb_textarea_focus;
             @include transition_default;

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -1,10 +1,9 @@
-import React, { useState, useEffect, forwardRef} from 'react'
+import React from 'react'
 import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
 import AsyncCreateableSelect from 'react-select/async-creatable'
-import { get, isString, uniqueId } from '../utilities/object'
-
+import { get, isString, uniqueId } from 'lodash'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
 
@@ -38,7 +37,6 @@ type TypeaheadProps = {
   createable?: boolean,
   dark?: boolean,
   data?: { [key: string]: string },
-  disabled?: boolean,
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
@@ -47,13 +45,8 @@ type TypeaheadProps = {
   getOptionLabel?: string | (() => string),
   getOptionValue?: string | (() => string),
   name?: string,
-  options?: Array<{ label: string; value?: string }>,
   marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   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",
-  onChange?: any,
-  optionsByContext?: Record<string, Array<{ label: string; value?: string }>>
-  searchContextSelector?: string,
-  clearOnContextChange?: boolean,
 } & GlobalProps
 
 export type SelectValueType = {
@@ -73,26 +66,21 @@ type TagOnChangeValues = {
  * @constant {React.ReactComponent} Typeahead
  * @param {TypeaheadProps} props - props as described at https://react-select.com/props
  */
-const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
+
+const Typeahead = ({
   async,
   className,
   components = {},
   createable,
   error = "",
   data = {},
-  disabled = false,
   getOptionLabel,
   getOptionValue,
   htmlOptions = {},
   id,
-  name,
   loadOptions = noop,
   marginBottom = "sm",
   pillColor,
-  onChange,
-  optionsByContext = {},
-  searchContextSelector,
-  clearOnContextChange = false,
   ...props
 }: TypeaheadProps) => {
   const selectProps = {
@@ -127,32 +115,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     ...props,
   }
 
-  const [contextValue, setContextValue] = useState("")
-
-  useEffect(() => {
-    if (searchContextSelector) {
-      const searchContextElement = document.getElementById(searchContextSelector)
-
-      setContextValue((searchContextElement as HTMLInputElement)?.value)
-      const handleContextChange = (e: Event) => {
-        const target = e.target as HTMLInputElement;
-        setContextValue(target.value);
-        if (clearOnContextChange) document.dispatchEvent(new CustomEvent(`pb-typeahead-kit-${selectProps.id}:clear`))
-      }
-
-      if (searchContextElement) searchContextElement.addEventListener('change', handleContextChange)
-
-      return () => {
-        if (searchContextElement) searchContextElement.removeEventListener('change', handleContextChange)
-      }
-    }
-  }, [searchContextSelector])
-
-  const contextArray = optionsByContext[contextValue]
-  if (Array.isArray(contextArray) && contextArray.length > 0) {
-    selectProps.options = contextArray
-  }
-
   const Tag = (
     createable
       ? (async ? AsyncCreateableSelect : CreateableSelect)
@@ -160,15 +122,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   )
 
   const handleOnChange = (_data: SelectValueType, { action, option, removedValue }: TagOnChangeValues) => {
-    if (onChange) {
-      const isReactHookForm = onChange.toString().includes("target")
-      if (isReactHookForm) {
-        onChange({ target: { name, value: _data } })
-      } else {
-        onChange(_data)
-      }
-    }
-    
     if (action === 'select-option') {
       if (selectProps.onMultiValueClick) selectProps.onMultiValueClick(option)
       const multiValueClearEvent = new CustomEvent(`pb-typeahead-kit-${selectProps.id}-result-option-select`, { detail: option ? option : _data })
@@ -207,17 +160,15 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
       <Tag
           classNamePrefix="typeahead-kit-select"
           error={error}
-          isDisabled={disabled}
           onChange={handleOnChange}
           {...selectProps}
       />
     </div>
   )
-})
+}
 
 Object.keys(kitComponents).forEach((k) => {
   (Typeahead as GenericObject)[k] = (kitComponents as {[key: string]: unknown})[k]
 })
 
-Typeahead.displayName = 'Typeahead'
 export default Typeahead

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -8,17 +8,15 @@ import { SelectValueType } from '../_typeahead'
 type Props = {
   data: SelectValueType,
   multiValueTemplate: any,
-  wrapped?: boolean,
   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",
   removeProps: any,
   selectProps: any,
 }
 
-
 const MultiValue = (props: Props) => {
   const { removeProps } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor, truncate, wrapped } = props.selectProps
+  const { dark, multiKit, pillColor, truncate } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',
@@ -54,7 +52,6 @@ const MultiValue = (props: Props) => {
             size={multiKit === 'smallPill' ? 'small' : ''}
             text=''
             truncate={truncate}
-            wrapped={wrapped}
             {...props}
         />
       }
@@ -69,7 +66,6 @@ const MultiValue = (props: Props) => {
             size={multiKit === 'smallPill' ? 'small' : ''}
             text={label}
             truncate={truncate}
-            wrapped={wrapped}
             {...props}
         />
       }

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 /**
  *

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const options = [
   { label: 'Jardim', value: 'Portuguese' },

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx

@@ -2,7 +2,9 @@
 
 import React, { useState } from 'react'
 
-import Button from '../../pb_button/_button'
+import {
+  Button,
+} from 'playbook-ui'
 
 import Typeahead from '../_typeahead'
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Typeahead from '../../pb_typeahead/_typeahead'
+import { Typeahead } from 'playbook-ui'
 
 const names = [
   { label: 'Alexander Nathaniel Montgomery', value: 'Alexander Nathaniel Montgomery' },