playbook_ui 13.33.1.pre.alpha.PLAY14063320 → 13.33.1.pre.alpha.PLAY14143336

data/app/pb_kits/playbook/pb_label_value/_label_value.scss

@@ -2,6 +2,6 @@
 
 [class^=pb_label_value_kit] {
   [class^=pb_caption_kit]  {
-    margin-bottom: $space-xs/1.5;
+    margin-bottom: calc($space-xs/1.5);
   }
 }

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_default.jsx

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

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details.jsx

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

data/app/pb_kits/playbook/pb_label_value/docs/_label_value_details_examples.jsx

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

data/app/pb_kits/playbook/pb_layout/layout.test.js

@@ -1,6 +1,6 @@
 import React from "react"
 import { render, cleanup } from "../utilities/test-utils"
-import { Layout, Card } from ".."
+import { Layout, Card } from "playbook-ui"
 
 function LayoutTest(props) {
   return (

data/app/pb_kits/playbook/pb_legend/docs/_legend_colors.jsx

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

data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx

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

data/app/pb_kits/playbook/pb_legend/docs/_legend_prefix.jsx

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

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import { noop } from 'lodash'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx

@@ -1,5 +1,3 @@
-/* @flow */
-
 import { noop } from 'lodash'
 import React, { useState } from 'react'
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'

data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-multi-comp */
-/* @flow */
 import React, { useContext } from "react";
 import classnames from "classnames";
 import {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx

@@ -1,7 +1,6 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image } from '../../'
+import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxCompoundComponent = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx

@@ -1,7 +1,6 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image, Button, Body, FlexItem } from '../../'
+import { Flex, Image, Button, Body, FlexItem } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxCurrentPhoto = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx

@@ -1,7 +1,6 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from "react";
-import { Flex, Image, Title, Pill } from "../../";
+import { Flex, Image, Title, Pill } from "playbook-ui";
 import Lightbox from "../_lightbox.tsx";
 
 const LightboxCustomHeader = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx

@@ -1,7 +1,6 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image } from '../../'
+import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxDefault = (props) => {

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx

@@ -1,7 +1,6 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
-import { Flex, Image } from '../../'
+import { Flex, Image } from 'playbook-ui'
 import Lightbox from '../_lightbox.tsx'
 
 const LightboxMultiple = (props) => {

data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { cleanup, fireEvent, render, screen } from '../utilities/test-utils'
 
-import { Lightbox } from '../'
+import { Lightbox } from 'playbook-ui'
 
 const testId = 'customId',
   kitClass = 'pb_lightbox_kit',

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LineGraph } from '../..'
+import { LineGraph } from 'playbook-ui'
 
 const data = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_nonclickable.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LineGraph } from '../..'
+import { LineGraph } from 'playbook-ui'
 
 const data = [{
   name: 'Number of Installations',

data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_legend_position.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { LineGraph, Title } from '../..'
+import { LineGraph, Title } from 'playbook-ui'
 
 const data = [{
   name: 'Installation',

data/app/pb_kits/playbook/pb_line_graph/lineGraphSettings.js

@@ -1,5 +1,5 @@
 import { commonSettings } from '../pb_dashboard/commonSettings.js'
-import typography from '../tokens/exports/_typography.scss'
+import typography from '../tokens/exports/_typography.module.scss'
 
 const markerStyles = (highchart) => {
   highchart.plotOptions.line.marker.enabled = true

data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
-import { Map, mapTheme } from '../../'
+import { Map, mapTheme } from 'playbook-ui'
 import maplibregl from 'maplibre-gl'
 
 const MapDefault = (props) => {

data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
-import { Map, mapTheme, MapCustomButton } from '../..'
+import { Map, mapTheme, MapCustomButton } from 'playbook-ui'
 import maplibregl from 'maplibre-gl'
 
 const MapWithCustomButton = (props) => {

data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx

@@ -1,5 +1,5 @@
 import React, { useRef, useEffect, useState } from 'react'
-import { Map, mapTheme } from '../../'
+import { Map, mapTheme } from 'playbook-ui'
 import maplibregl from 'maplibre-gl'
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
 

data/app/pb_kits/playbook/pb_map/map.test.jsx

@@ -1,6 +1,6 @@
 import { renderKit } from '../utilities/test-utils'
 
-import { Map } from '../'
+import { Map } from 'playbook-ui'
 
 /* See these resources for more testing info:
   - https://github.com/testing-library/jest-dom#usage for useage and examples

data/app/pb_kits/playbook/pb_map/pbMapTheme.ts

@@ -1,4 +1,4 @@
-import colors from '../tokens/exports/_colors.scss'
+import colors from '../tokens/exports/_colors.module.scss'
 
 const mapTheme = {
     marker : colors.primary_action,

data/app/pb_kits/playbook/pb_message/_message.tsx

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

data/app/pb_kits/playbook/pb_message/_message_mixins.scss

@@ -17,7 +17,7 @@
     }
 
     .message_text {
-      margin: 0 0 $space-xs/2;
+      margin: 0 0 calc($space-xs/2);
     }
 
     .message_title {

data/app/pb_kits/playbook/pb_message/docs/_message_timestamp.jsx

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

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen } from '../utilities/test-utils'
 
-import { MultiLevelSelect } from '../'
+import { MultiLevelSelect } from 'playbook-ui'
 
 const treeData = {
   label: 'search me',

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -18,7 +18,7 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     justify-content: center;
     width: $pb_multiple_users_size;
     height: $pb_multiple_users_size;
-    border-radius: ($pb_multiple_users_size/2) + 2;
+    border-radius: calc($pb_multiple_users_size/2) + 2;
     background: tint($primary, 90%);
     border: $pb_multiple_users_border_size solid $white;
     color: $primary;

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx

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

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default.jsx

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

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse.jsx

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

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx

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

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Nav, NavItem } from '../..'
+import { Nav, NavItem } from 'playbook-ui'
 
 const CollapsibleNav = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Nav, NavItem, useCollapsible } from "../.."
+import { Nav, NavItem, useCollapsible } from "playbook-ui"
 
 const CollapsibleNavCustom = (props) => {
   const navItems = ["Overview", "Albums", "Similar Artists"]

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_item_spacing.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Nav, NavItem } from '../..'
+import { Nav, NavItem } from 'playbook-ui'
 
 const CollapsibleNavItemSpacing = (props) => {
   return (

data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_with_all_options.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Nav, NavItem } from "../.."
+import { Nav, NavItem } from "playbook-ui"
 
 const CollapsibleNavWithAllOptions = (props) => {
   const navItems = ["Overview", "Albums", "Similar Artists"]

data/app/pb_kits/playbook/pb_nav/docs/_nav_with_font_control.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Nav, NavItem } from '../..'
+import { Nav, NavItem } from 'playbook-ui'
 
 const NavWithFontControl = (props) => {
   return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_default.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import {
     Overlay,
     Table,
-} from '../..'
+} from 'playbook-ui'
 
 const TableExample = () => {
     return (

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_multi_directional.jsx

@@ -4,7 +4,7 @@ import {
     Card,
     Flex,
     FlexItem,
-} from '../..'
+} from 'playbook-ui'
 
 const InlineCardsExample = () => {
     return (

data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { render, screen } from '../utilities/test-utils'
-import { Overlay } from '..'
+import { Overlay } from 'playbook-ui'
 
 const testId = "overlay"
 const children = "This is the Overlay children"

data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_percentage.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import defaultColors from "../../tokens/exports/_colors.scss";
+import defaultColors from "../../tokens/exports/_colors.module.scss";
 import { OverlayChildrenProps } from '../_overlay';
 
 

data/app/pb_kits/playbook/pb_passphrase/_passphrase.scss

@@ -21,14 +21,14 @@
   }
 
   .passphrase-label {
-    margin-right: ($space_xs/2);
+    margin-right: calc($space_xs/2);
   }
 
   .passphrase-text-input-wrapper {
     position: relative;
 
     .pb_text_input_kit_label {
-      margin-bottom: ($space_xs/2);
+      margin-bottom: calc($space_xs/2);
     }
 
     .passphrase-text-input input {
@@ -57,7 +57,7 @@
   }
 
   .pb_progress_simple_wrapper, .pb_progress_simple_wrapper_dark {
-    margin-bottom: ($space_xs/2);
+    margin-bottom: calc($space_xs/2);
 
     &.progress-empty-input {
       visibility: hidden;

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React, { useCallback, useMemo, useState } from "react"
 import classnames from "classnames"
 

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-import { Caption, Passphrase, ProgressSimple } from '../..'
+import { Caption, Passphrase, ProgressSimple } from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 const PassphraseBreached = (props) => {

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

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 
-import {Body, Caption, Passphrase, ProgressSimple} from '../..'
+import {Body, Caption, Passphrase, ProgressSimple} from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 const PassphraseCommon = (props) => {

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import {Body, Passphrase} from '../..'
+import {Body, Passphrase} from 'playbook-ui'
 
 const PassphraseConfirmation = (props) => {
   const [input, setInput] = useState('')

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import { Body, Caption, Passphrase, ProgressSimple, TextInput } from '../..'
+import { Body, Caption, Passphrase, ProgressSimple, TextInput } from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { useEffect } from 'react'
 
-import { Caption, Passphrase, ProgressSimple, TextInput} from '../..'
+import { Caption, Passphrase, ProgressSimple, TextInput} from 'playbook-ui'
 import zxcvbn from 'zxcvbn'
 
 const PassphraseStrengthChange = (props) => {

data/app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, screen } from '../utilities/test-utils'
-import { Passphrase } from '../'
+import { Passphrase } from 'playbook-ui'
 
 const testId = 'text-input1',
   kitClass = 'pb_passphrase'

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss

@@ -1,3 +1,4 @@
+@import "intl-tel-input/build/css/intlTelInput.css";
 @import "../tokens/colors";
 
 $transform-rotate-deg: 135deg;
@@ -100,7 +101,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__arrow.iti__arrow--up::before {
-    transform: rotate(-($transform-rotate-deg/3));
+    transform: rotate(-(calc($transform-rotate-deg/3)));
     top: $space_xs + 4px;
     color: $primary_action;
   }

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -2,7 +2,6 @@ import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } f
 import classnames from 'classnames'
 
 import intlTelInput from 'intl-tel-input'
-import 'intl-tel-input/build/css/intlTelInput.css'
 import 'intl-tel-input/build/js/utils.js'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react'
-import { Body, PhoneNumberInput } from '../..'
+import { Body, PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInputAccessInputElement = (props) => {
     // 1. Create a ref - this accesses the kit's input element.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react'
-import { Button, PhoneNumberInput } from '../..'
+import { Button, PhoneNumberInput } from 'playbook-ui'
 
 const PhoneNumberInputClearField = (props) => {
     // 1. Create a ref - this accesses the kit's input element.

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx

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

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx

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

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx

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

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx

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

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Button, FixedConfirmationToast, PhoneNumberInput } from "../../";
+import { Button, FixedConfirmationToast, PhoneNumberInput } from "playbook-ui";
 
 const PhoneNumberInputValidation = (props) => {
     const [formErrors, setFormErrors] = useState("");

data/app/pb_kits/playbook/pb_pill/_pill.scss

@@ -9,9 +9,9 @@ $pb_pill_height: 22px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 $space-sm/1.8;
+  padding: 0 calc($space-sm/1.8);
   height: $pb_pill_height;
-  border-radius: $pb_pill_height/2;
+  border-radius: calc($pb_pill_height/2);
   white-space: nowrap;
 
   &[class*=lowercase] {

data/app/pb_kits/playbook/pb_popover/docs/_popover_actionable_content.jsx

@@ -5,7 +5,7 @@ import {
   CircleIconButton,
   Flex,
   PbReactPopover,
-} from '../..'
+} from 'playbook-ui'
 
 const PopoverActionableContent = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx

@@ -3,7 +3,7 @@ import {
   Button,
   Flex,
   PbReactPopover,
-} from '../..'
+} from 'playbook-ui'
 
 const PopoverClose = (props) => {
   const [showInsidePopover, setInsideShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx

@@ -4,7 +4,7 @@ import {
   CircleIconButton,
   Flex,
   PbReactPopover,
-} from '../..'
+} from 'playbook-ui'
 
 const PopoverDefault = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx

@@ -6,7 +6,7 @@ import {
   ListItem,
   PbReactPopover,
   Flex,
-} from '../..'
+} from 'playbook-ui'
 
 const PopoverWithButton = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx

@@ -4,7 +4,7 @@ import {
   Button,
   PbReactPopover,
   Title,
-} from '../..'
+} from 'playbook-ui'
 
 const PopoverScrollHeight = (props) => {
   const [showPopover, setShowPopover] = useState(false)

data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx

@@ -3,7 +3,7 @@ import {
   Body,
   Button,
   PbReactPopover,
-} from '../..'
+} from 'playbook-ui'
 
 const PopoverZIndex = (props) => {
   const [showPopover, setShowPopover] = useState(false)