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

data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss

@@ -21,7 +21,7 @@ $pb_progress_simple_height: 4px;
 [class^=pb_progress_simple_kit] {
   width: 100%;
   height: $pb_progress_simple_height;
-  border-radius: $pb_progress_simple_height/2;
+  border-radius: calc($pb_progress_simple_height/2);
   background: rgba($primary, $opacity-1);
     &[class*=_positive] {
       .progress_simple_value {
@@ -42,7 +42,7 @@ $pb_progress_simple_height: 4px;
   [class^=progress_simple_value] {
     width: 0%;
     height: 100%;
-    border-radius: $pb_progress_simple_height/2;
+    border-radius: calc($pb_progress_simple_height/2);
     background: $primary;
   }
 

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

@@ -106,7 +106,7 @@
     .trix-button--icon {
       height: $space_lg;
       width: $space_lg;
-      margin: $space_xs / 2;
+      margin: calc($space_xs / 2);
       border-radius: $border_rad_heavier;
       &::before {
         background-size: auto;
@@ -116,7 +116,7 @@
       background: $white;
       border: 1px solid #E4E8F0;
       border-bottom: none;
-      padding: $space_xs / 2;
+      padding: calc($space_xs / 2);
       border-top-left-radius: $border_rad_heavier;
       border-top-right-radius: $border_rad_heavier;
       .trix-button-group {

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

@@ -81,7 +81,7 @@
     display: block;
     &.error {
       [class*=pb_body_kit] {
-        margin-top: $space_xs / 2;
+        margin-top: calc($space_xs / 2);
       }
       > select:first-child {
         border-color: $error;

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

@@ -28,7 +28,7 @@ $pb_selectable_card_border: 2px;
     padding: $space_sm;
     margin-bottom: $space_sm;
     cursor: pointer;
-    outline: 1px solid transparent; 
+    outline: 1px solid transparent;
 
     @media (hover:hover) {
       &:hover {
@@ -43,7 +43,7 @@ $pb_selectable_card_border: 2px;
       align-items: center;
       height: $pb_selectable_card_indicator_size;
       width: $pb_selectable_card_indicator_size;
-      border-radius: ($pb_selectable_card_indicator_size/2) + ($pb_selectable_card_border/2);
+      border-radius: calc($pb_selectable_card_indicator_size/2) + calc($pb_selectable_card_border/2);
       border-width: $pb_selectable_card_border;
       border-style: solid;
       border-color: $white;
@@ -52,8 +52,8 @@ $pb_selectable_card_border: 2px;
       font-size: $font_smaller;
       text-align: center;
       position: absolute;
-      top: -($pb_selectable_card_indicator_size/2);
-      right: -($pb_selectable_card_indicator_size/2);
+      top: -(calc($pb_selectable_card_indicator_size/2));
+      right: -(calc($pb_selectable_card_indicator_size/2));
       opacity: 0;
     }
   }

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

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

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx

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

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

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

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -60,7 +60,7 @@
 
   &.error {
     [class*=pb_body_kit] {
-      margin-top: $space_xs / 2;
+      margin-top: calc($space_xs / 2);
     }
     textarea {
       border-color: $error;

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -22,14 +22,14 @@
     display: flex;
     align-items: center;
     [class*=pb_time_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_time_range_inline_timezone] {
-      margin-left: $space_xs/2;
+      margin-left: calc($space_xs/2);
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: $space_xs/2;
+      margin-right: calc($space_xs/2);
     }
   }
 }

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -4,9 +4,9 @@
 @import "../tokens/typography";
 
 $connector_width: 2px;
-$icon_margin: $space_xs/2;
+$icon_margin: calc($space_xs/2);
 $icon_height: 28px;
-$height_from_top: $icon_height/2 - $connector_width/2;
+$height_from_top: calc($icon_height/2) - calc($connector_width/2);
 
 @mixin pb_timeline_line_solid($width, $height, $margin) {
     width: $width;

data/app/pb_kits/playbook/pb_title_count/_title_count.tsx

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

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -8,7 +8,7 @@ $transition: .2s ease-in-out;
 [class^=pb_toggle_kit] {
   position: relative;
   $width: 44px;
-  $height: $width / 2;
+  $height: calc($width / 2);
   $border_success: 3px solid $color_checkbox_success;
   $border_default: 3px solid $color_checkbox_default;
 
@@ -27,7 +27,7 @@ $transition: .2s ease-in-out;
       &:after {
         transition: $transition;
         content: "";
-        width: $width / 2 - 4px;
+        width: calc($width / 2) - 4px;
         height: $height - 4px;
         background-color: $color_checkbox_default;
         border-radius: 50%;
@@ -50,7 +50,7 @@ $transition: .2s ease-in-out;
 
       &:disabled + .pb_toggle_control {
         cursor: not-allowed;
-        opacity: 0.5; 
+        opacity: 0.5;
         border: 3px solid $border_light;
         background-color: $border_light;
 
@@ -68,14 +68,14 @@ $transition: .2s ease-in-out;
         background-color: $color_checkbox_success;
 
         &:after {
-          left: $width / 2 + 2px;
+          left: calc($width / 2) + 2px;
           background-color: $white;
         }
       }
 
       &:disabled + .pb_toggle_control {
         cursor: not-allowed;
-        opacity: 0.5; 
+        opacity: 0.5;
         border: 3px solid $text_lt_light;
         background-color: $text_lt_light;
 

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom.jsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React, { useState } from 'react'
 import { Toggle } from 'playbook-ui'
 

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_custom_radio.jsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React, { useState } from 'react'
 import { Caption, Title, Toggle } from 'playbook-ui'
 

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default.jsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react'
 import { Toggle } from 'playbook-ui'
 

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_disabled.jsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react'
 import { Toggle } from 'playbook-ui'
 

data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name.jsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React, { useState } from 'react'
 import { Caption, Title, Toggle } from 'playbook-ui'
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react'
 import { Tooltip, Flex, FlexItem } from 'playbook-ui';
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_delay.jsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react'
 import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui';
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_icon.jsx

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

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_interaction.jsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react'
 import { Tooltip, Button, Flex, FlexItem } from 'playbook-ui';
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_margin.jsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react'
 import { Tooltip, Flex, CircleIconButton } from 'playbook-ui'
 

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_show_tooltip_react.jsx

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

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_async_createable.jsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react'
 import { Typeahead } from 'playbook-ui'
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react'
 import { Typeahead } from 'playbook-ui'
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react'
 
 import Typeahead from '../_typeahead'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React, { useState, useEffect } from 'react'
 
 import Typeahead from '../_typeahead'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react'
 
 import Typeahead from '../_typeahead'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.jsx

@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react'
 
 import Typeahead from '../_typeahead'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/no-danger */
 /* eslint-disable react/no-multi-comp */
-/* @flow */
 
 import React, { useState } from 'react'
 import { components } from 'react-select'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import { Typeahead } from 'playbook-ui'
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx

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

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx

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

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx

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

data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx

@@ -1,5 +1,3 @@
-/* @flow */
-
 import React from 'react'
 import classnames from 'classnames'
 import { globalProps } from '../utilities/globalProps'
@@ -8,13 +6,14 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 import Caption from '../pb_caption/_caption'
 import Title from '../pb_title/_title'
 import DateTime from '../pb_kit/dateTime';
+import { GenericObject } from '../types'
 
 type WeekdayStackedProps = {
   align?: "left" | "center" | "right",
   aria?: {[key:string]:string },
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: GenericObject,
   date: Date,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,

data/app/pb_kits/playbook/tokens/exports/_colors.module.scss

@@ -3,7 +3,7 @@
 :export {
   @mixin export-colors($colors-list) {
     @each $name, $color in $colors-list {
-      #{$name}: $color;
+      #{"" + $name}: $color;
     }
   }
   @include export-colors($product_colors);

data/app/pb_kits/playbook/utilities/_hover.scss

@@ -2,11 +2,11 @@
 
 @mixin hover-color-classes($colors-list) {
     @each $name, $color in $colors-list {
-      .hover_background_#{$name}:hover {
+      .hover_background_#{"" + $name}:hover {
         background-color: $color !important;
         transition: background-color $transition-speed ease;
       }
-      .hover_color_#{$name}:hover {
+      .hover_color_#{"" + $name}:hover {
         color: $color !important;
         transition: color $transition-speed ease;
       }
@@ -15,7 +15,7 @@
   
   @mixin hover-shadow-classes($shadows-list) {
     @each $name, $shadow in $shadows-list {
-      .hover_#{$name}:hover {
+      .hover_#{"" + $name}:hover {
         box-shadow: $shadow;
         transition: box-shadow $transition-speed ease;
       }
@@ -24,7 +24,7 @@
   
   @mixin hover-scale-classes($scales-list) {
     @each $name, $scale in $scales-list {
-      .hover_#{$name}:hover {
+      .hover_#{"" + $name}:hover {
         transform: $scale;
         transition: transform $transition-speed ease;
       }