playbook_ui 9.19.0.pre.alpha.pre.fonts2 → 9.19.0

data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import Currency from '../_currency'
+import { Currency } from '../../'
 
 const CurrencyAlignment = (props) => {
   return (

data/app/pb_kits/playbook/pb_currency/docs/_currency_no_symbol.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import Currency from '../_currency'
+import { Currency } from '../../'
 
 const CurrencyNoSymbol = (props) => {
   return (

data/app/pb_kits/playbook/pb_currency/docs/_currency_size.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import Currency from '../_currency'
+import { Currency } from '../../'
 
 const CurrencySize = (props) => {
   return (

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import Currency from '../_currency'
+import { Currency } from '../../'
 
 const CurrencyVariants = (props) => {
   return (

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx

@@ -4,10 +4,11 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
-
-import Body from '../pb_body/_body'
-import StatChange from '../pb_stat_change/_stat_change'
-import StatValue from '../pb_stat_value/_stat_value'
+import {
+  Body,
+  StatChange,
+  StatValue,
+} from '../'
 
 type DashboardValueProps = {
   align?: 'left' | 'center' | 'right',

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_align.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DashboardValue from '../../pb_dashboard_value/_dashboard_value'
+import { DashboardValue } from '../../'
 
 const DashboardValueAlign = (props) => {
   return (

data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DashboardValue from '../../pb_dashboard_value/_dashboard_value'
+import { DashboardValue } from '../../'
 
 const DashboardValueDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/_date.jsx

@@ -1,16 +1,11 @@
 /* @flow */
 
 import React from 'react'
+import DateTime from '../pb_kit/dateTime.js'
+import { Body, Caption, Icon, Title } from '../'
 import classnames from 'classnames'
-
-import DateTime from '../pb_kit/dateTime'
+import { globalProps } from '../utilities/globalProps.js'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import Body from '../pb_body/_body'
-import Caption from '../pb_caption/_caption'
-import Icon from '../pb_icon/_icon'
-import Title from '../pb_title/_title'
 
 type PbDateProps = {
   alignment?: "left" | "center" | "right",

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -2,14 +2,10 @@
 
 import React, { useEffect } from 'react'
 import classnames from 'classnames'
-
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import datePickerHelper from './date_picker_helper'
-
-import Icon from '../pb_icon/_icon'
-import TextInput from '../pb_text_input/_text_input'
+import { globalProps } from '../utilities/globalProps.js'
+import { Icon, TextInput } from '../'
+import datePickerHelper from './date_picker_helper.js'
 
 type DatePickerProps = {
   allowInput?: Boolean,

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DatePicker from '../_date_picker'
+import { DatePicker } from '../../'
 
 const DatePickerDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DatePicker from '../_date_picker'
+import { DatePicker } from '../../'
 
 const DatePickerDefaultDate = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DatePicker from '../_date_picker'
+import { DatePicker } from '../../'
 
 const DatePickerDisabled = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DatePicker from '../_date_picker'
+import { DatePicker } from '../../'
 
 const DatePickerError = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.jsx

@@ -1,8 +1,5 @@
 import React, { useEffect } from 'react'
-
-import DatePicker from '../_date_picker'
-
-import Button from '../../pb_button/_button'
+import { Button, DatePicker } from '../../'
 
 const DatePickerFlatpickrMethods = () => {
   let fpInstance

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DatePicker from '../_date_picker'
+import { DatePicker } from '../../'
 
 const DatePickerFormat = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hide_icon.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DatePicker from '../_date_picker'
+import { DatePicker } from '../../'
 
 const DatePickerHideIcon = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DatePicker from '../_date_picker'
+import { DatePicker } from '../../'
 
 const DatePickerHooks = (props) => {
   // Define hooks

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DatePicker from '../_date_picker'
+import { DatePicker } from '../../'
 
 const DatePickerInput = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DatePicker from '../_date_picker'
+import { DatePicker } from '../../'
 
 const DatePickerLabel = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DatePicker from '../_date_picker'
+import { DatePicker } from '../../'
 
 const DatePickerMinMax = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DatePicker from '../_date_picker'
+import { DatePicker } from '../../'
 
 const DatePickerRange = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_year_range.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DatePicker from '../_date_picker'
+import { DatePicker } from '../../'
 
 const DatePickerYearRange = (props) => (
   <div>

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss

@@ -1,5 +1,4 @@
-@import "../../tokens/titles";
-
+@import "../../pb_title/title_mixin";
 // Header Styles
 .flatpickr-months {
   border-bottom: solid 1px $border_light;

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx

@@ -1,15 +1,11 @@
 /* @flow */
 
 import React from 'react'
+import DateTime from '../pb_kit/dateTime.js'
+import { Body, Caption, Icon } from '../'
 import classnames from 'classnames'
-
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 import { buildCss } from '../utilities/props'
-import DateTime from '../pb_kit/dateTime'
-
-import Body from '../pb_body/_body'
-import Caption from '../pb_caption/_caption'
-import Icon from '../pb_icon/_icon'
 
 type DateRangeInlineProps = {
   className?: string,

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx

@@ -2,15 +2,10 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps } from '../utilities/globalProps.js'
 
-import Body from '../pb_body/_body'
-import Flex from '../pb_flex/_flex'
-import FlexItem from '../pb_flex/_flex_item'
-import DateYearStacked from '../pb_date_year_stacked/_date_year_stacked'
-import Icon from '../pb_icon/_icon'
+import { Body, DateYearStacked, Flex, FlexItem, Icon } from '../'
 
 type DateRangeStackedProps = {
   className?: string | array<string>,

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx

@@ -1,15 +1,11 @@
 /* @flow */
 
 import React from 'react'
-
 import classnames from 'classnames'
-
-import DateTime from '../pb_kit/dateTime'
+import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import Caption from '../pb_caption/_caption'
-import Title from '../pb_title/_title'
+import { Caption, Title } from '../'
+import { globalProps } from '../utilities/globalProps.js'
 
 type DateStackedProps = {
   align?: "left" | "center" | "right",

data/app/pb_kits/playbook/pb_date_time/_date_time.jsx

@@ -2,13 +2,9 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-
-import Flex from '../pb_flex/_flex'
-import Time from '../pb_time/_time'
-import FormattedDate from '../pb_date/_date'
+import { globalProps } from '../utilities/globalProps.js'
+import {  Flex, Date as FormattedDate, Time } from '../'
 
 type DateTimeProps = {
   align?: "left" | "center" | "right",

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx

@@ -2,15 +2,10 @@
 /* @flow */
 
 import React from 'react'
-
 import { buildCss } from '../utilities/props'
-import { deprecatedProps, globalProps } from '../utilities/globalProps'
+import { deprecatedProps, globalProps } from '../utilities/globalProps.js'
 
-import Flex from '../pb_flex/_flex'
-import FlexItem from '../pb_flex/_flex_item'
-import SectionSeparator from '../pb_section_separator/_section_separator'
-import TimeStacked from '../pb_time_stacked/_time_stacked'
-import DateStacked from '../pb_date_stacked/_date_stacked'
+import { DateStacked, Flex, FlexItem, SectionSeparator, TimeStacked } from '../'
 
 type DateTimeStackedProps = {
   id?: string,

data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-
-import DateTimeStacked from '../_date_time_stacked'
+import { DateTimeStacked } from '../../'
 
 const DateTimeStackedDefault = (props) => (
   <div>
@@ -27,3 +26,6 @@ const DateTimeStackedDefault = (props) => (
 )
 
 export default DateTimeStackedDefault
+
+// *Development Note* -  We are reviewing this kit for a potential name change due to naming collisions when `new Date()` is used.
+// To avoid this bug, please use name spacing as shown in the code examples. ie `import { Date as AliasedComponentName } from '../../'

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx

@@ -2,13 +2,11 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
-import DateTime from '../pb_kit/dateTime'
 import { buildCss } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import DateTime from '../pb_kit/dateTime.js'
+import { globalProps } from '../utilities/globalProps.js'
 
-import Body from '../pb_body/_body'
-import Title from '../pb_title/_title'
+import { Body, Title } from '../'
 
 type DateYearStackedProps = {
   align?: "left" | "center" | "right",

data/app/pb_kits/playbook/pb_dialog/_close_icon.jsx

@@ -1,7 +1,7 @@
 /* @flow */
 
 import React from 'react'
-import Icon from '../pb_icon/_icon'
+import { Icon } from '../'
 
 type CloseIconProps = {
   onClose: () => mixed,

data/app/pb_kits/playbook/pb_dialog/_dialog.jsx

@@ -2,12 +2,10 @@
 
 import React, { useState } from 'react'
 import classnames from 'classnames'
-import Modal from 'react-modal'
-
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps.js'
-
-import Button from '../pb_button/_button'
+import Modal from 'react-modal'
+import { Button } from '../'
 import DialogHeader  from './child_kits/_dialog_header'
 import DialogFooter from './child_kits/_dialog_footer'
 import DialogBody from './child_kits/_dialog_body'

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx

@@ -2,12 +2,9 @@
 
 import React from 'react'
 import classnames from 'classnames'
-
 import { buildCss } from '../../utilities/props'
 import { globalProps } from '../../utilities/globalProps.js'
-
-import Flex from '../../pb_flex/_flex'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
+import { Flex, SectionSeparator } from '../../'
 
 // Footer component
 const DialogFooter = (props: DialogFooterProps) => {

data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx

@@ -4,11 +4,9 @@ import React, { useContext } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
 import { globalProps } from '../../utilities/globalProps.js'
-
+import { Flex, SectionSeparator } from '../../'
 import { CloseIcon } from '../_close_icon'
 import { DialogContext } from '../_dialog_context'
-import Flex from '../../pb_flex/_flex'
-import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 type DialogHeaderProps = {
   aria?: object,

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

@@ -26,12 +26,11 @@ export default class PbEnhancedElement {
   }
 
   static addMatch(element) {
-    if (element._pbEnhanced || this.elements.has(element)) return
+    if (this.elements.has(element)) return
 
     const enhansedElement = new this(element)
     enhansedElement.connect()
     this.elements.set(element, enhansedElement)
-    element._pbEnhanced = enhansedElement
   }
 
   static removeMatch(element) {

data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx

@@ -2,14 +2,13 @@
 
 import React, { useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
+import { buildCss, noop } from '../utilities/props'
 import classnames from 'classnames'
+import { globalProps } from '../utilities/globalProps.js'
 
-import { buildCss, noop } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
-import type { Callback } from '../types'
+import type { Callback } from '../types.js'
 
-import Body from '../pb_body/_body'
-import Card from '../pb_card/_card'
+import { Body, Card } from '..'
 
 type FileUploadProps = {
   accept?: array<string>,