playbook_ui 9.19.0 → 10.0.0.pre.alphafonts

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Passphrase } from '../../'
+
+import Passphrase from '../_passphrase'
 
 const PassphraseBreached = (props) => {
   const [input, setInput] = useState('')

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

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

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Passphrase } from '../../'
+
+import Passphrase from '../_passphrase'
 
 const PassphraseDefault = (props) => {
   const [input, setInput] = useState('')

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_input_props.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Passphrase } from '../../'
+
+import Passphrase from '../../pb_passphrase/_passphrase'
 
 const PassphraseInputProps = (props) => {
   const [input, setInput] = useState('')

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

@@ -1,5 +1,8 @@
 import React, { useState } from 'react'
-import { Body, Passphrase, TextInput } from '../../'
+
+import Body from '../../pb_body/_body'
+import Passphrase from '../../pb_passphrase/_passphrase'
+import TextInput from '../../pb_text_input/_text_input'
 
 const PassphraseMeterSettings = (props) => {
   const [input, setInput] = useState('')

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

@@ -1,5 +1,8 @@
 import React, { useState } from 'react'
-import { Passphrase, TextInput } from '../../'
+
+import Passphrase from '../_passphrase'
+
+import TextInput from '../../pb_text_input/_text_input'
 
 const PassphraseStrengthChange = (props) => {
   const [input, setInput] = useState('')

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_tips.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Passphrase } from '../../'
+
+import Passphrase from '../_passphrase'
 
 const PassphraseTips = (props) => {
   const [input, setInput] = useState('')

data/app/pb_kits/playbook/pb_person/_person.jsx

@@ -2,15 +2,16 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { globalProps } from '../utilities/globalProps.js'
 
+import { globalProps } from '../utilities/globalProps'
 import {
   buildAriaProps,
   buildCss,
   buildDataProps,
 } from '../utilities/props'
 
-import { Body, Title } from '../'
+import Body from '../pb_body/_body'
+import Title from '../pb_title/_title'
 
 type PersonProps = {
   aria?: object,

data/app/pb_kits/playbook/pb_person/docs/_person_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Person } from '../../'
+
+import Person from '../_person'
 
 const PersonDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_person_contact/_person_contact.jsx

@@ -3,15 +3,12 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-} from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
 
-import { globalProps } from '../utilities/globalProps.js'
-
-import { Caption, Contact, Person } from '../'
+import Caption from '../pb_caption/_caption'
+import Contact from '../pb_contact/_contact'
+import Person from '../pb_person/_person'
 
 type ContactItem = {
   contactType: string,

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { PersonContact } from '../../'
+
+import PersonContact from '../_person_contact'
 
 const PersonContactDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_multiple.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { PersonContact } from '../../'
+
+import PersonContact from '../_person_contact'
 
 const PersonContactMultiple = (props) => {
   return (

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_detail.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { PersonContact } from '../../'
+
+import PersonContact from '../_person_contact'
 
 const PersonContactWithDetail = (props) => {
   return (

data/app/pb_kits/playbook/pb_person_contact/docs/_person_contact_with_wrong_numbers.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { PersonContact } from '../../'
+
+import PersonContact from '../_person_contact'
 
 const PersonContactWithWrongNumbers = (props) => {
   return (

data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.jsx

@@ -1,16 +1,13 @@
 /* @flow */
 
 import React from 'react'
-import { Body, Title } from '../'
 import classnames from 'classnames'
 
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-} from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
 
-import { globalProps } from '../utilities/globalProps.js'
+import Body from '../pb_body/_body'
+import Title from '../pb_title/_title'
 
 type ProgressPillsProps = {
   active?: number,

data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx

@@ -2,8 +2,10 @@
 
 import React from 'react'
 import classnames from 'classnames'
+
 import { buildCss } from '../utilities/props'
-import { Icon } from '..'
+
+import Icon from '../pb_icon/_icon'
 
 type ProgressStepItemProps = {
   className?: string,

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_default.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import ProgressStep from '../_progress_step.jsx'
 import ProgressStepItem from '../_progress_step_item.jsx'
 

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker.jsx

@@ -1,7 +1,10 @@
 import React from 'react'
+
 import ProgressStep from '../_progress_step.jsx'
-import ProgressStepItem from '../_progress_step_item.jsx'
-import { Caption } from '../../'
+import ProgressStepItem from '../_progress_step_item'
+
+import Caption from '../../pb_caption/_caption'
+
 const ProgressStepTracker = (props) => (
   <div>
     <br />

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_tracker_click_events.jsx

@@ -1,7 +1,11 @@
 import React, { useState } from 'react'
+
 import ProgressStep from '../_progress_step.jsx'
-import ProgressStepItem from '../_progress_step_item.jsx'
-import { Button, Caption } from '../../'
+import ProgressStepItem from '../_progress_step_item'
+
+import Caption from '../../pb_caption/_caption'
+import Button from '../../pb_button/_button'
+
 const ProgressStepTrackerClickEvents = (props) => {
   const [warning, setWarning] = useState(false)
   const showWarning = warning == true

data/app/pb_kits/playbook/pb_progress_step/docs/_progress_step_vertical.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import ProgressStep from '../_progress_step.jsx'
 import ProgressStepItem from '../_progress_step_item.jsx'
 

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { Radio } from '../../'
+
+import Radio from '../_radio'
 
 const RadioCustom = (props) => {
   const [choice, setChoice] = useState('power')

data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Radio } from '../../'
+
+import Radio from '../_radio'
 
 const RadioDefault = () => {
   const ref = React.createRef()

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx

@@ -2,11 +2,18 @@
 
 import React, { useEffect, useRef } from 'react'
 import classnames from 'classnames'
-import useFocus from './useFocus.js'
-import Trix from 'trix'
-import { globalProps } from '../utilities/globalProps.js'
+import useFocus from './useFocus'
+import { globalProps } from '../utilities/globalProps'
 import { buildAriaProps, buildDataProps } from '../utilities/props'
 
+try {
+  const Trix = require('trix')
+  Trix.config.textAttributes.inlineCode = {
+    tagName: 'code',
+    inheritable: true,
+  }
+} catch (_e) { /* do nothing */ }
+
 type RichTextEditorProps = {
   aria?: object,
   toolbarBottom?: Boolean,
@@ -46,11 +53,6 @@ const RichTextEditor = (props: RichTextEditorProps) => {
   const dataProps = buildDataProps(data)
 
   useEffect(() => {
-    Trix.config.textAttributes.inlineCode = {
-      tagName: 'code',
-      inheritable: true,
-    }
-
     trixRef.current.addEventListener('trix-initialize', (event) => {
       const element = event.target
 

data/app/pb_kits/playbook/pb_section_separator/_section_separator.jsx

@@ -1,9 +1,11 @@
 /* @flow */
 import React from 'react'
 import classnames from 'classnames'
-import { Caption } from '../'
+
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps.js'
+import { globalProps } from '../utilities/globalProps'
+
+import Caption from '../pb_caption/_caption'
 
 type SectionSeparatorProps = {
   aria: object,

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical.jsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Flex, FlexItem, SectionSeparator } from '../../'
+
+import SectionSeparator from '../_section_separator'
+
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
 
 const SectionSeparatorVertical = (props) => {
   return (

data/app/pb_kits/playbook/pb_select/_select.jsx

@@ -2,22 +2,15 @@
 
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
-import {
-  Body,
-  Caption,
-  Icon,
-} from '../'
-
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-} from '../utilities/props'
-
-import { globalProps } from '../utilities/globalProps.js'
 
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
 import type { InputCallback } from '../types'
 
+import Body from '../pb_body/_body'
+import Caption from '../pb_caption/_caption'
+import Icon from '../pb_icon/_icon'
+
 type SelectOption = {
   value: string,
   text: string,

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -1,6 +1,6 @@
 @import "../pb_body/body_mixins";
 @import "../pb_textarea/textarea_mixin";
-@import "../pb_title/title_mixin";
+@import "../tokens/titles";
 @import "../tokens/colors";
 
 [class^=pb_select] {

data/app/pb_kits/playbook/pb_select/docs/_select_blank.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Select } from '../../'
+
+import Select from '../_select'
 
 const SelectBlank = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Select } from '../../'
+
+import Select from '../_select'
 
 const SelectCustomSelect = (props) => {
   return (

data/app/pb_kits/playbook/pb_select/docs/_select_default.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Select } from '../../'
+
+import Select from '../_select'
 
 const SelectDefault = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_disabled.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Select } from '../../'
+
+import Select from '../_select'
 
 const SelectDisabled = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_disabled_options.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Select } from '../../'
+
+import Select from '../_select'
 
 const SelectDisabledOptions = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_required.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Select } from '../../'
+
+import Select from '../_select'
 
 const SelectRequired = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_select/docs/_select_value_text_same.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Select } from '../../'
+
+import Select from '../_select'
 
 const SelectValueTextSame = (props) => {
   const options = [

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.jsx

@@ -2,10 +2,9 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { Card, Checkbox, Flex, Icon, Radio } from '../'
 
 import type { InputCallback } from '../types'
-
+import { globalProps } from '../utilities/globalProps'
 import {
   buildAriaProps,
   buildCss,
@@ -13,7 +12,11 @@ import {
   noop,
 } from '../utilities/props'
 
-import { globalProps } from '../utilities/globalProps.js'
+import Icon from '../pb_icon/_icon'
+import Checkbox from '../pb_checkbox/_checkbox'
+import Card from '../pb_card/_card'
+import Flex from '../pb_flex/_flex'
+import Radio from '../pb_radio/_radio'
 
 type SelectableCardProps = {
   aria?: object,