playbook_ui 13.34.0.pre.alpha.PLAY14143373 → 13.34.0

data/app/pb_kits/playbook/pb_button/docs/_button_block_content.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Pill } from "playbook-ui";
+import { Button, Pill } from "../../";
 
 const ButtonBlockContent = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Button } from "playbook-ui"
+import { Button } from "../../"
 
 const ButtonDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import { Button } from '../../'
 
 const ButtonForm = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_full_width.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import { Button } from '../../'
 
 const ButtonFullWidth = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_hover.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Button } from "playbook-ui"
+import { Button } from "../../"
 
 const ButtonHover = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import { Button } from '../../'
 
 const ButtonIconOptions = (props) => (
     <div>

data/app/pb_kits/playbook/pb_button/docs/_button_link.jsx

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

data/app/pb_kits/playbook/pb_button/docs/_button_loading.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import { Button } from '../../'
 
 const ButtonLoading = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button/docs/_button_reaction.jsx

@@ -1,5 +1,5 @@
 import React, {useState} from "react"
-import { Button } from "playbook-ui"
+import { Button } from "../../"
 
 const ButtonReaction = (props) => {
 

data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button } from 'playbook-ui'
+import { Button } from '../../'
 
 const ButtonSize = (props) => (
   <div>

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx

@@ -1,3 +1,5 @@
+/* @flow */
+
 import React from 'react'
 import classnames from 'classnames'
 

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.test.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '../utilities/test-utils'
 
-import { Button, ButtonToolbar } from 'playbook-ui'
+import { Button, ButtonToolbar } from '../'
 
 test('default test', () => {
   render(

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, ButtonToolbar } from 'playbook-ui'
+import { Button, ButtonToolbar } from '../..'
 
 const ButtonToolbarDefault = (props) => (
   <div className="pb--doc-demo-row">

data/app/pb_kits/playbook/pb_button_toolbar/docs/_button_toolbar_secondary.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, ButtonToolbar } from 'playbook-ui'
+import { Button, ButtonToolbar } from '../..'
 
 const ButtonToolbarSecondary = (props) => (
   <div className="pb--doc-demo-row">

data/app/pb_kits/playbook/pb_caption/docs/_caption_block.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Caption } from 'playbook-ui'
+import { Caption } from '../../'
 
 const CaptionBlock = (props) => {
   return (

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Caption } from 'playbook-ui'
+import { Caption } from '../../'
 
 const CaptionColors = (props) => {
   return (

data/app/pb_kits/playbook/pb_caption/docs/_caption_light.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Caption } from 'playbook-ui'
+import { Caption } from '../../'
 
 const CaptionLight = (props) => {
   return (

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -30,7 +30,7 @@
     border: 0;
     border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
     @each $color_name, $color_value in $pb_card_header_colors {
-      &[class*=_#{"" + $color_name}] {
+      &[class*=_#{$color_name}] {
         @include pb_card_header_color($color_value);
         color: lightenText($color_value);
       }

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Title from '../../pb_title/_title'
-import { Body } from 'playbook-ui'
+import { Body } from '../../'
 import Card from '../_card'
 
 const CardBackground = (props) => {

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Checkbox } from 'playbook-ui'
+import { Checkbox } from '../..'
 
 const CheckboxError = (props) => {
   return (

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Checkbox, Table } from 'playbook-ui'
+import { Checkbox, Table } from '../..'
 
 const CheckboxIndeterminate = (props) => {
   const [checkboxes, setCheckboxes] = useState([

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import CircleChart from '../_circle_chart'
 
-import {Title} from 'playbook-ui'
+import {Title} from '../..'
 
 const data = [
   {

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss

@@ -1,11 +1,11 @@
 @import "../pb_button/button";
 @import "../pb_button/button_mixins";
 
-$pb_button_styles: (
+$pb_button_styles: [
   "primary",
   "secondary",
   "link",
-);
+];
 
 @mixin pb_circle_icon_button {
   position: relative;
@@ -16,7 +16,7 @@ $pb_button_styles: (
   flex-grow: 0;
   width: $pb_button_size;
   height: $pb_button_size;
-  border-radius: calc($pb_button_size/2);
+  border-radius: $pb_button_size/2;
   line-height: $pb_button_size;
   flex-basis: $pb_button_size;
   min-width: $pb_button_size;

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_click.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { CircleIconButton } from 'playbook-ui'
+import { CircleIconButton } from '../..'
 
 const CircleIconButtonClick = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible } from 'playbook-ui'
+import { Collapsible } from '../..'
 
 const CollapsibleColor = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
 
 const CollapsibleCustomMain = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from 'playbook-ui'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
 
 const CollapsibleCustomMainWithIcon = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx

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

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible } from 'playbook-ui'
+import { Collapsible } from '../..'
 
 const CollapsibleIcons = (props) => {
 

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Collapsible } from 'playbook-ui'
+import { Collapsible } from '../..'
 
 const CollapsibleSize = (props) => (
   <div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types';
-import { Collapsible, useCollapsible, Button } from 'playbook-ui'
+import { Collapsible, useCollapsible, Button } from '../..'
 
 const CollapsibleState = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Contact } from 'playbook-ui'
+import { Contact } from '../../'
 
 const ContactDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Contact } from 'playbook-ui'
+import { Contact } from '../../'
 
 const ContactDefault = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Currency, Title } from 'playbook-ui'
+import { Currency, Title } from '../..'
 
 const CurrencyUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
+import colors from '../tokens/exports/_colors.scss'
+import typography from '../tokens/exports/_typography.scss'
 
 const dataColors = [
   colors.data_1,

data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts

@@ -1,4 +1,4 @@
-import colors from "../tokens/exports/_colors.module.scss";
+import colors from "../tokens/exports/_colors.scss";
 
 
 // Map Data Color String Props to our SCSS Variables

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
+import colors from '../tokens/exports/_colors.scss'
+import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
+import colors from '../tokens/exports/_colors.scss'
+import typography from '../tokens/exports/_typography.scss'
 
 import { ThemeProps } from './themeTypes'
 

data/app/pb_kits/playbook/pb_dashboard_value/dashboardValueSettings.ts

@@ -1,5 +1,5 @@
-import colors from '../tokens/exports/_colors.module.scss'
-import typography from '../tokens/exports/_typography.module.scss'
+import colors from '../tokens/exports/_colors.scss'
+import typography from '../tokens/exports/_typography.scss'
 
 const pbIndicator = {
   title: {

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate } from 'playbook-ui'
+import { Date as FormattedDate } from '../..'
 
 const DateAlignment = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate, Caption, Title } from 'playbook-ui'
+import { Date as FormattedDate, Caption, Title } from '../../'
 
 const DateDefault = (props) => {
   return (
@@ -80,4 +80,4 @@ const DateDefault = (props) => {
 export default DateDefault
 
 // *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 'playbook-ui'
+// 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/docs/_date_unstyled.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Caption, Date as FormattedDate, Title } from 'playbook-ui'
+import { Caption, Date as FormattedDate, Title } from '../../'
 
 const DateUnstyled = (props) => {
   return (

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate } from 'playbook-ui'
+import { Date as FormattedDate } from '../..'
 
 const DateVariants = (props) => {
   return (

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { DatePicker, LabelValue } from 'playbook-ui'
+import { DatePicker, LabelValue } from '../..'
 
 const DatePickerOnChange = (props) => {
   const today = new Date()

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

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
-import { DatePicker,LabelValue } from 'playbook-ui'
+import { DatePicker,LabelValue } from '../..'
 
 
 const DatePickerOnClose = (props) => {

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

@@ -41,7 +41,7 @@
   &.error {
     .date_picker_input_wrapper {
       [class*=pb_body_kit] {
-        margin-top: calc($space_xs / 2);
+        margin-top: $space_xs / 2;
       }
 
       input,

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

@@ -1,13 +1,15 @@
 @media (min-width: 500px) {
   .flatpickr-calendar {
     padding: $space_xs;
+    // width: 323.88px;
   }
   .dayContainer {
     width: 315.88px
   }
   .flatpickr-months {
-    margin-left: calc($space_xs / 4);
-    margin-top: calc($space_xs / 3);
+    margin-left: $space_xs / 4;
+    margin-top: $space_xs / 3;
+    // width: 323.88px;
   }
 }
 @media (max-width: 499px) {

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

@@ -21,14 +21,14 @@
     display: flex;
     align-items: center;
     [class*=pb_date_range_inline_arrow] {
-      margin-left: calc($space_xs/2);
-      margin-right: calc($space_xs/2);
+      margin-left: $space_xs/2;
+      margin-right: $space_xs/2;
     }
     [class*=pb_date_range_inline_timezone] {
-      margin-left: calc($space_xs/2);
+      margin-left: $space_xs/2;
     }
     [class*=pb_date_range_inline_icon] {
-      margin-right: calc($space_xs/2);
+      margin-right: $space_xs/2;
     }
   }
 }

data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { DateRangeStacked } from 'playbook-ui'
+import { DateRangeStacked } from '../../'
 
 const DateRangeStackedDefault = (props) => (
   <div>

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

@@ -1,11 +1,11 @@
 [class^=pb_date_time_stacked] {
 
   [class^=padding_month] {
-    padding-bottom: calc($space_xs + 2px) !important;
+    padding-bottom: ($space_xs + 2) !important;
     }
 
   [class^=padding_day] {
-    padding-bottom: calc($space_xs + 2px) !important;
+    padding-bottom: ($space_xs + 2) !important;
   }
 
   &[class*=_dark] {
@@ -19,7 +19,7 @@
 
 }
 .date-time-padding {
-  padding-right: calc($space_xs / 2);
-  padding-left: calc($space_xs / 2);
+  padding-right: ($space_xs / 2);
+  padding-left: ($space_xs / 2);
 }
 

data/app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.test.js

@@ -1,5 +1,5 @@
 import { ensureAccessible, renderKit } from '../utilities/test-utils'
-import { DateTimeStacked } from 'playbook-ui'
+import { DateTimeStacked } from '../'
 
 /* eslint-disable jsx-control-statements/jsx-jcs-no-undef */
 const currentDate = new Date()

data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { DateYearStacked } from 'playbook-ui'
+import { DateYearStacked } from '../../'
 
 const DateYearStackedDefault = (props) => {
   return (

data/app/pb_kits/playbook/pb_detail/docs/_detail_bold.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from 'playbook-ui'
+import { Detail } from '../..'
 
 const DetailBold = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_colors.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from 'playbook-ui'
+import { Detail } from '../..'
 
 const DetailColors = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Detail } from 'playbook-ui'
+import { Detail } from '../..'
 
 const DetailDefault = (props) => (
   <div>

data/app/pb_kits/playbook/pb_detail/docs/_detail_styled.jsx

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

data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx

@@ -1,6 +1,6 @@
 import React, {useState} from 'react'
 import { render, cleanup, waitFor, fireEvent } from "../utilities/test-utils";
-import { Dialog, Button } from 'playbook-ui'
+import { Dialog, Button } from '../'
 
 const text="Hello Body Text, Nice to meet ya."
 const title="Header Title is the Title Prop"

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx

@@ -6,7 +6,7 @@ import {
   Dialog,
   RichTextEditor,
   Typeahead,
-} from 'playbook-ui'
+} from '../../'
 
 const DialogCompound = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from 'playbook-ui'
+import { Button, Dialog } from '../../'
 
 const DialogDefault = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx

@@ -7,7 +7,7 @@ import {
   Flex,
   RichTextEditor,
   Typeahead,
-} from "playbook-ui";
+} from "../..";
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx

@@ -7,7 +7,7 @@ import {
   Flex,
   RichTextEditor,
   Typeahead,
-} from "playbook-ui";
+} from "../..";
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible);

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from 'playbook-ui'
+import { Button, Dialog } from '../../'
 
 const DialogScrollable = () => {
 

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx

@@ -1,5 +1,7 @@
+/* @flow */
+
 import React, { useState } from 'react'
-import { Button, Dialog, Flex } from 'playbook-ui'
+import { Button, Dialog, Flex } from '../../'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Button, Dialog } from 'playbook-ui'
+import { Button, Dialog } from '../../'
 
 const DialogShouldCloseOnOverlay = () => {
   const [isOpen, setIsOpen] = useState(false)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx

@@ -1,6 +1,7 @@
+/* @flow */
 
 import React, { useState } from 'react'
-import { Button, Dialog, Flex } from 'playbook-ui'
+import { Button, Dialog, Flex } from '../../'
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useState } from "react"
-import { Button, Dialog, Flex} from "playbook-ui"
+import { Button, Dialog, Flex} from "../.."
 
 const useDialog = (visible = false) => {
   const [opened, setOpened] = useState(visible)