playbook_ui 13.32.0.pre.alpha.PLAY14143251 → 13.32.0.pre.alpha.PLAY14143260

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3e970b94e363d380c35c1c1efc6d25bf4c8a42fe89b9ccc2902b2966f1d3bcff
-  data.tar.gz: 6ec1d86be7f216e65f7d7a19a654fa204e8dcbf24443bab5832ddf50b33adf57
+  metadata.gz: fee01f07cee2241aebd6b605a7d87d7201aff3de3e009c3f2c68795b747b57e1
+  data.tar.gz: 5dd68db37205e90e7f15f86074157cc446de9f3ab2798c61d2bf0df2cda12bb4
 SHA512:
-  metadata.gz: fcbd60dc742e4d8ee8cd6fd34a2a0d0611dd7e739de75067af45c9e33fe2ad362c00a0f106ca6cadf7a01c00b3e44cdf9d21805cb47fb5222975e1676aaa9868
-  data.tar.gz: 89e6cee619d2b657dbd82cec4aafcf3acf5f4d0f36ad2a441bf8792a5f28f31bf6eefe4e015f3a129656803d04911d8c15d81b4dbe4b79bca4cf59d40fc32a45
+  metadata.gz: '01085972521787fdcbf1b3c708cd93ef4e203cd7a6ab7c6e17ae2a484a8c44487bcd3de28f3bf2e9a1d420c68462693a64230cc9d60498366234a2764efacd1f'
+  data.tar.gz: aa0d8830c214851dae0322bbbf7d762caf12940340d6fd805e0f896353236bf1d8c1f98307d6354c3ade7a8a24e9e73aa2fb7e1b171e81d6c8d259eed4f183a0

data/app/pb_kits/playbook/_playbook.scss

@@ -0,0 +1,123 @@
+@import 'kits/pb_advanced_table/advanced_table';
+@import 'kits/pb_avatar/avatar';
+@import 'kits/pb_avatar_action_button/avatar_action_button';
+@import 'kits/pb_background/background';
+@import 'kits/pb_badge/badge';
+@import 'kits/pb_bar_graph/bar_graph';
+@import 'kits/pb_body/body';
+@import 'kits/pb_bread_crumbs/bread_crumbs';
+@import 'kits/pb_button/button';
+@import 'kits/pb_button_toolbar/button_toolbar';
+@import 'kits/pb_caption/caption';
+@import 'kits/pb_card/card';
+@import 'kits/pb_checkbox/checkbox';
+@import 'kits/pb_circle_chart/circle_chart';
+@import 'kits/pb_circle_icon_button/circle_icon_button';
+@import 'kits/pb_collapsible/collapsible';
+@import 'kits/pb_contact/contact';
+@import 'kits/pb_currency/currency';
+@import 'kits/pb_dashboard_value/dashboard_value';
+@import 'kits/pb_date/date';
+@import 'kits/pb_date_picker/date_picker';
+@import 'kits/pb_date_range_inline/date_range_inline';
+@import 'kits/pb_date_range_stacked/date_range_stacked';
+@import 'kits/pb_date_stacked/date_stacked';
+@import 'kits/pb_date_time/date_time';
+@import 'kits/pb_date_time_stacked/date_time_stacked';
+@import 'kits/pb_date_year_stacked/date_year_stacked';
+@import 'kits/pb_detail/detail';
+@import 'kits/pb_dialog/dialog';
+@import 'kits/pb_distribution_bar/distribution_bar';
+@import 'kits/pb_draggable/draggable';
+@import 'kits/pb_dropdown/dropdown';
+@import 'kits/pb_file_upload/file_upload';
+@import 'kits/pb_filter/filter';
+@import 'kits/pb_fixed_confirmation_toast/fixed_confirmation_toast';
+@import 'kits/pb_flex/flex';
+@import 'kits/pb_form/form';
+@import 'kits/pb_form_group/form_group';
+@import 'kits/pb_form_pill/form_pill';
+@import 'kits/pb_gauge/gauge';
+@import 'kits/pb_hashtag/hashtag';
+@import 'kits/pb_highlight/highlight';
+@import 'kits/pb_home_address_street/home_address_street';
+@import 'kits/pb_icon/icon';
+@import 'kits/pb_icon_circle/icon_circle';
+@import 'kits/pb_icon_stat_value/icon_stat_value';
+@import 'kits/pb_icon_value/icon_value';
+@import 'kits/pb_image/image';
+@import 'kits/pb_label_pill/label_pill';
+@import 'kits/pb_label_value/label_value';
+@import 'kits/pb_layout/layout';
+@import 'kits/pb_legend/legend';
+@import 'kits/pb_lightbox/lightbox';
+@import 'kits/pb_line_graph/line_graph';
+@import 'kits/pb_list/list';
+@import 'kits/pb_loading_inline/loading_inline';
+@import 'kits/pb_map/map';
+@import 'kits/pb_map/pb_map_button_mixin';
+@import 'kits/pb_message/message';
+@import 'kits/pb_multi_level_select/multi_level_select';
+@import 'kits/pb_multiple_users/multiple_users';
+@import 'kits/pb_multiple_users_stacked/multiple_users_stacked';
+@import 'kits/pb_nav/nav';
+@import 'kits/pb_online_status/online_status';
+@import 'kits/pb_overlay/overlay';
+@import 'kits/pb_pagination/pagination';
+@import 'kits/pb_passphrase/passphrase';
+@import 'kits/pb_person/person';
+@import 'kits/pb_person_contact/person_contact';
+@import 'kits/pb_phone_number_input/phone_number_input';
+@import 'kits/pb_pill/pill';
+@import 'kits/pb_popover/popover';
+@import 'kits/pb_progress_pills/progress_pills';
+@import 'kits/pb_progress_simple/progress_simple';
+@import 'kits/pb_progress_step/progress_step';
+@import 'kits/pb_radio/radio';
+@import 'kits/pb_rich_text_editor/rich_text_editor';
+@import 'kits/pb_section_separator/section_separator';
+@import 'kits/pb_select/select';
+@import 'kits/pb_selectable_card/selectable_card';
+@import 'kits/pb_selectable_card_icon/selectable_card_icon';
+@import 'kits/pb_selectable_icon/selectable_icon';
+@import 'kits/pb_selectable_list/selectable_list';
+@import 'kits/pb_source/source';
+@import 'kits/pb_star_rating/star_rating';
+@import 'kits/pb_stat_change/stat_change';
+@import 'kits/pb_stat_value/stat_value';
+@import 'kits/pb_table/table';
+@import 'kits/pb_text_input/text_input';
+@import 'kits/pb_textarea/textarea';
+@import 'kits/pb_time/time';
+@import 'kits/pb_time_range_inline/time_range_inline';
+@import 'kits/pb_time_stacked/time_stacked';
+@import 'kits/pb_timeline/timeline';
+@import 'kits/pb_timestamp/timestamp';
+@import 'kits/pb_title/title';
+@import 'kits/pb_title_count/title_count';
+@import 'kits/pb_title_detail/title_detail';
+@import 'kits/pb_toggle/toggle';
+@import 'kits/pb_tooltip/tooltip';
+@import 'kits/pb_treemap_chart/treemap_chart';
+@import 'kits/pb_typeahead/typeahead';
+@import 'kits/pb_user/user';
+@import 'kits/pb_user_badge/user_badge';
+@import 'kits/pb_walkthrough/walkthrough';
+@import 'kits/pb_weekday_stacked/weekday_stacked';
+@import 'utilities/mixins';
+@import 'utilities/spacing';
+@import 'utilities/cursor';
+@import 'utilities/max_width';
+@import 'utilities/positioning';
+@import 'utilities/number_spacing';
+@import 'utilities/shadow';
+@import 'utilities/line_height';
+@import 'utilities/display';
+@import 'utilities/flexbox';
+@import 'utilities/focus';
+@import 'utilities/border_radius';
+@import 'utilities/hover';
+@import 'utilities/text_align';
+@import 'utilities/overflow';
+@import 'utilities/truncate';
+@import 'utilities/vertical_align';

data/app/pb_kits/playbook/_reset.scss

@@ -0,0 +1,42 @@
+@import "tokens/typography";
+@import "tokens/colors";
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  &:before,
+  &:after {
+    box-sizing: border-box;
+  }
+}
+
+html {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  height: 100vh;
+  overflow-x: hidden;
+}
+
+body {
+  font-family: $font_family_base;
+  font-size: $font_base;
+  line-height: 1.5;
+  background-color: $bg-light;
+  height: 100%;
+  letter-spacing: $lspace_normal;
+  font-weight: $regular;
+  font-style: normal;
+  text-rendering: optimizeLegibility;
+  -moz-font-feature-settings: "liga" on;
+  color: $charcoal;
+  margin: 0 !important;
+  padding: 0 !important;
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 50px; // REMOVE AFTER STYLED
+}
+
+a {
+  text-decoration: none;
+  color: $primary;
+}

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.scss

@@ -35,8 +35,8 @@
     &[class*=_#{$name}] {
       
       $avatar_size: map-get($avatar-sizes, $name);
-      $icon_size: $avatar_size / 2;
-      $border_size: $icon_size / 10;
+      $icon_size: calc($avatar_size / 2);
+      $border_size: calc($icon_size / 10);
 
       position: relative;
       width: $avatar_size * 1.25;
@@ -59,7 +59,7 @@
         left: $icon_size * 1.5;
       }
       &[class*=_left] [class^=pb_avatar_kit] {
-        padding-left: $icon_size / 2;
+        padding-left: calc($icon_size / 2);
       }
     }
   }

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx

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

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -11,7 +11,7 @@
   align-items: center;
   justify-content: center;
   border-radius: $border_rad_light;
-  padding: 0 $space_xs/2;
+  padding: 0 calc($space_xs/2);
   border-width: 1px;
   border-style: solid;
   border-color: $card_light;
@@ -34,7 +34,7 @@
     height: $pb_badge_height;
     min-height: $pb_badge_height;
     min-width: $pb_badge_height;
-    border-radius: $pb_badge_height / 2;
+    border-radius: calc($pb_badge_height / 2);
   }
 
   &[class*=_notification] {

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -4,7 +4,7 @@
 [class^=pb_body_kit]{
   @include pb_body($text_lt_default);
   @each $color_name, $color_value in $pb_body_colors {
-    &[class*=_#{$color_name}] {
+    &[class*=_#{"" + $color_name}] {
       @include pb_body($color_value);
     }
     @each $status_name, $status_value in $pb_body_status {

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps, domSafeProps } from '../utilities/globalProps'

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss

@@ -9,7 +9,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 $space_xs/2;
+  padding: 0 calc($space_xs/2);
 
   svg {
    margin-right: 8px;

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

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

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_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: $pb_button_size/2;
+  border-radius: calc($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_date_picker/sass_partials/_input_styles.scss

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

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

@@ -1,15 +1,13 @@
 @media (min-width: 500px) {
   .flatpickr-calendar {
     padding: $space_xs;
-    // width: 323.88px;
   }
   .dayContainer {
     width: 315.88px
   }
   .flatpickr-months {
-    margin-left: $space_xs / 4;
-    margin-top: $space_xs / 3;
-    // width: 323.88px;
+    margin-left: calc($space_xs / 4);
+    margin-top: calc($space_xs / 3);
   }
 }
 @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: $space_xs/2;
-      margin-right: $space_xs/2;
+      margin-left: calc($space_xs/2);
+      margin-right: calc($space_xs/2);
     }
     [class*=pb_date_range_inline_timezone] {
-      margin-left: $space_xs/2;
+      margin-left: calc($space_xs/2);
     }
     [class*=pb_date_range_inline_icon] {
-      margin-right: $space_xs/2;
+      margin-right: calc($space_xs/2);
     }
   }
 }

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: ($space_xs + 2) !important;
+    padding-bottom: calc($space_xs + 2px) !important;
     }
 
   [class^=padding_day] {
-    padding-bottom: ($space_xs + 2) !important;
+    padding-bottom: calc($space_xs + 2px) !important;
   }
 
   &[class*=_dark] {
@@ -19,7 +19,7 @@
 
 }
 .date-time-padding {
-  padding-right: ($space_xs / 2);
-  padding-left: ($space_xs / 2);
+  padding-right: calc($space_xs / 2);
+  padding-left: calc($space_xs / 2);
 }
 

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

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React, { useState } from 'react'
 import { Button, Dialog, Flex } from 'playbook-ui'
 

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

@@ -1,4 +1,3 @@
-/* @flow */
 
 import React, { useState } from 'react'
 import { Button, Dialog, Flex } from 'playbook-ui'

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

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-handler-names */
-/* @flow */
 
 import React, { useState } from "react"
 import { Button, Dialog, Flex } from "playbook-ui"

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

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

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_accept.jsx

@@ -1,4 +1,3 @@
-/* @flow */
 
 import React, { useState } from 'react'
 import {

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/no-multi-comp */
-/* @flow */
 
 import React, { useState } from "react";
 import { FileUpload, List, ListItem } from "playbook-ui";

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_message.jsx

@@ -1,4 +1,3 @@
-/* @flow */
 
 import React, { useState } from 'react'
 import {

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx

@@ -1,4 +1,3 @@
-/* @flow */
 
 import React, { useState } from 'react'
 import {

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx

@@ -1,4 +1,3 @@
-/* @flow */
 /* eslint-disable react/no-multi-comp */
 
 import React, { useState } from 'react'

data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss

@@ -15,9 +15,9 @@ $form_pill_colors: (
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 $space-sm/3;
+  padding: 0 calc($space-sm/3);
   height: $pb_form_pill_height;
-  border-radius: $pb_form_pill_height/2;
+  border-radius: calc($pb_form_pill_height/2);
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
@@ -34,12 +34,12 @@ $form_pill_colors: (
       #{$selector}_text {
         color: $color_value;
         padding-left: $space-sm;
-        padding-right: $space-sm/4;
+        padding-right: calc($space-sm/4);
       }
       #{$selector}_close {
         color: $color_value;
-        padding-left: $space-sm/2;
-        padding-right: $space-sm/4;
+        padding-left: calc($space-sm/2);
+        padding-right: calc($space-sm/4);
         display: flex;
         align-items: center;
         height: 100%;

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -1,4 +1,3 @@
-/* @flow */
 import React from 'react'
 import classnames from 'classnames'
 import Title from '../pb_title/_title'

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -54,7 +54,7 @@ $pb_icon_circle_sizes: (
     &[class*=_size_#{$name}] {
       width: $size;
       height: $size;
-      border-radius: $size/2;
+      border-radius: calc($size/2);
       background: $silver;
       color: $text_lt_light;
       font-size: $size * 0.38;
@@ -68,7 +68,7 @@ $pb_icon_circle_sizes: (
   }
 
   @each $color_name, $color_value in $colors {
-    &[class*=_#{$color_name}] {
+    &[class*=_#{"" + $color_name}] {
       color: $color_value;
       background: rgba(mix($bg_dark, $color_value, 10%), $opacity_1);
       &.dark {

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_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,4 +1,3 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
 import { Flex, Image } from 'playbook-ui'

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

@@ -1,4 +1,3 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
 import { Flex, Image, Button, Body, FlexItem } from 'playbook-ui'

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

@@ -1,4 +1,3 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from "react";
 import { Flex, Image, Title, Pill } from "playbook-ui";

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

@@ -1,4 +1,3 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
 import { Flex, Image } from 'playbook-ui'

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

@@ -1,4 +1,3 @@
-/* @flow */
 /* eslint-disable jsx-control-statements/jsx-use-if-tag */
 import React, { useState } from 'react'
 import { Flex, Image } from 'playbook-ui'

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_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_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_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_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] {