playbook_ui 14.11.0.pre.rc.16 → 14.11.0.pre.rc.17

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f633dbdcb566f07aaee2a0db73f298f28aea93dc273c131deb2c116f99979dd5
-  data.tar.gz: 2cc38ae0603b11b9726761391f3224fe8c2040f24015bd7c38106e11039261fe
+  metadata.gz: f599fa0970fcb3140d297268f529a3d03495f21b515eaac87f1d7139bf3b84ff
+  data.tar.gz: 494f5ec517ef6e7fbf7f5549003e2e43112654f415d932756b13cadee015b085
 SHA512:
-  metadata.gz: 43a49b42952c6ac029e4d51a6f20ea7edd230b9d9001e15be40de1bd7d00bbb0ee6332ced2b9c4c3ec1dee5ddaa97c356cde57a1e3d3e67a477e4a8a3a9d3b79
-  data.tar.gz: 724a6934873b86343459f05368b166d6d7c847fe2e1be8b4395958354303f515a5635a3c2d6bb106b620ad3e2f3f486a5eca3bd40fa34e54ab50fa86941a5a31
+  metadata.gz: 7665f9d805d6199cedbccf11052e936a78b7cff00575c27f146ad3a08d5bd0f36da1d5f32a7a849f80f41ac39681956668efdffb6945415a5d4766b5405a7495
+  data.tar.gz: 2f8c3da2c45bdd8cced277e3329b188dec90ec6fd271cbfb0ef7b63058a93c8faf99d70bcaf6a68c779fce93a1e53d33ced703dbdc07788236fd88b89f714ac2

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 [class^=pb_avatar_action_button_kit] {
 
   $icon_size: 0px;
@@ -15,7 +13,7 @@
       color: $value;
     }
   }
-
+  
   @mixin icon-base {
     &.dark{
         background-color: $bg_dark
@@ -33,22 +31,22 @@
   }
 
   @each $name, $size in $avatar-sizes {
-
+    
     &[class*=_#{$name}] {
-
+      
       $avatar_size: map-get($avatar-sizes, $name);
-      $icon_size: math.div($avatar_size, 2);
-      $border_size: math.div($icon_size, 10);
+      $icon_size: $avatar_size / 2;
+      $border_size: $icon_size / 10;
 
       position: relative;
       width: $avatar_size * 1.25;
       height: $avatar_size * 1.1;
       display: flex;
-
+    
       [class^=pb_tooltip_kit] {
         justify-self: center;
       }
-
+    
       &[class*=_bottom] .icon {
         @include icon-base;
         top: $icon_size * 1.27;
@@ -61,8 +59,8 @@
         left: $icon_size * 1.5;
       }
       &[class*=_left] [class^=pb_avatar_kit] {
-        padding-left: math.div($icon_size , 2);
+        padding-left: $icon_size / 2;
       }
     }
   }
-}
+}

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/border_radius";
 @import "../tokens/colors";
 @import "../tokens/opacity";
@@ -13,7 +11,7 @@
   align-items: center;
   justify-content: center;
   border-radius: $border_rad_light;
-  padding: 0 math.div($space_xs, 2);
+  padding: 0 $space_xs/2;
   border-width: 1px;
   border-style: solid;
   border-color: $card_light;
@@ -36,7 +34,7 @@
     height: $pb_badge_height;
     min-height: $pb_badge_height;
     min-width: $pb_badge_height;
-    border-radius: math.div($pb_badge_height, 2);
+    border-radius: $pb_badge_height / 2;
   }
 
   &[class*=_notification] {

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../tokens/opacity";
 @import "../tokens/spacing";
@@ -11,7 +9,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0 math.div($space_xs, 2);
+  padding: 0 $space_xs/2;
 
   svg {
    margin-right: 8px;

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "./button_mixins";
 @import "../tokens/colors";
 @import "../tokens/border_radius";
@@ -19,7 +17,7 @@ $pb_button_sizes: (
   @each $name, $size in $pb_button_sizes {
     &[class*=size_#{$name}] {
       font-size: $size;
-      padding: math.div($size, 2) $size * 2.42;
+      padding: $size / 2 $size * 2.42;
       @if $name == "sm" {
         min-height: 0;
       }

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../pb_button/button";
 @import "../pb_button/button_mixins";
 
@@ -18,7 +16,7 @@ $pb_button_styles: (
   flex-grow: 0;
   width: $pb_button_size;
   height: $pb_button_size;
-  border-radius: math.div($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;
@@ -55,4 +53,4 @@ $pb_button_styles: (
       }
     }
   }
-}
+}

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../../pb_textarea/textarea_mixin";
 
 [class^=pb_date_picker_kit] {
@@ -43,7 +41,7 @@
   &.error {
     .date_picker_input_wrapper {
       [class*=pb_body_kit] {
-        margin-top: math.div($space_xs, 2);
+        margin-top: $space_xs / 2;
       }
 
       input,

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @media (min-width: 500px) {
   .flatpickr-calendar {
     padding: $space_xs;
@@ -8,8 +6,8 @@
     width: 315.88px
   }
   .flatpickr-months {
-    margin-left: math.div($space_xs, 4);
-    margin-top: math.div($space_xs, 3);
+    margin-left: $space_xs / 4;
+    margin-top: $space_xs / 3;
   }
 }
 @media (max-width: 499px) {
@@ -21,7 +19,7 @@
   }
 }
 // Firefox Header Adjustments
-@supports (-moz-appearance:none) {
+@supports (-moz-appearance:none) { 
   select.flatpickr-monthDropdown-months {
       width: 97px !important;
       margin-left: $space_xs + 3;

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 [class^=pb_date_range_inline_kit] {
   &[class*=_center]  {
     & > [class^=pb_caption],
@@ -23,14 +21,14 @@
     display: flex;
     align-items: center;
     [class*=pb_date_range_inline_arrow] {
-      margin-left: math.div($space_xs, 2);
-      margin-right: math.div($space_xs, 2);
+      margin-left: $space_xs/2;
+      margin-right: $space_xs/2;
     }
     [class*=pb_date_range_inline_timezone] {
-      margin-left: math.div($space_xs, 2);
+      margin-left: $space_xs/2;
     }
     [class*=pb_date_range_inline_icon] {
-      margin-right: math.div($space_xs, 2);
+      margin-right: $space_xs/2;
     }
   }
 }

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 [class^=pb_date_time_stacked] {
 
   [class^=padding_month] {
@@ -21,7 +19,7 @@
 
 }
 .date-time-padding {
-  padding-right: math.div($space_xs, 2);
-  padding-left: math.div($space_xs, 2);
+  padding-right: $space_xs / 2;
+  padding-left: $space_xs / 2;
 }
 

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../tokens/spacing";
 @import "../tokens/typography";
@@ -124,7 +122,7 @@
 
     &.error {
       [class*=pb_body_kit] {
-        margin-top: math.div($space_xs, 2);
+        margin-top: $space_xs / 2;
       }
 
       [class*="dropdown_trigger_wrapper"] {
@@ -148,7 +146,7 @@
   &[class*="subtle"] {
     .dropdown_wrapper {
       .pb_dropdown_container {
-
+        
         [class*="pb_dropdown_option"]:first-child {
           margin-top: $space_xs;
         }
@@ -163,7 +161,7 @@
           border-radius: $border_radius_md;
           border-bottom: none;
           position: relative;
-
+        
           &::after {
             content: "";
             position: absolute;
@@ -174,20 +172,20 @@
             background: $border_light;
           }
         }
-
+        
         [class*="pb_dropdown_option"]:last-child::after {
-          display: none;
+          display: none; 
         }
       }
     }
-
+  
     &[class*="separators_hidden"] {
       .dropdown_wrapper {
         .pb_dropdown_container {
           [class*="pb_dropdown_option"]:first-child {
             margin-top: $space_xs;
           }
-
+  
           [class*="pb_dropdown_option"]:last-child {
             margin-bottom: $space_xs;
           }
@@ -195,7 +193,7 @@
           [class*="pb_dropdown_option"] {
             padding: $space_xxs $space_xs;
             margin: $space_xxs $space_xs;
-
+     
             &::after {
               height: 0px;
             }

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/spacing";
 @import "../tokens/colors";
 @import "../tokens/opacity";
@@ -16,9 +14,9 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 math.div($space-md, 2);
+  padding: 0 $space-md/2;
   height: $pb_form_pill_height;
-  border-radius: math.div($pb_form_pill_height, 2);
+  border-radius: $pb_form_pill_height/2;
   margin-bottom: 2px;
   margin-top: 2px;
   cursor: pointer;
@@ -144,7 +142,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     height: 12px !important;
     width: 12px !important;
     padding-right: $space_xs;
-    + .pb_form_pill_text, + .pb_form_pill_tag,
+    + .pb_form_pill_text, + .pb_form_pill_tag, 
     + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
     + div .pb_form_pill_text, + div .pb_form_pill_tag {
       padding-left: 0;
@@ -173,7 +171,7 @@ $form_pill_colors: map-merge($status_color_text, map-merge($data_colors, $produc
     }
     .pb_form_pill_icon {
       padding-right: $space_xxs;
-      + .pb_form_pill_text, + .pb_form_pill_tag,
+      + .pb_form_pill_text, + .pb_form_pill_tag, 
       + .pb_tooltip_kit .pb_form_pill_text, + .pb_tooltip_kit .pb_form_pill_tag,
       + div .pb_form_pill_text, + div .pb_form_pill_tag {
         padding-left: 0;

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/border_radius";
 @import "../tokens/colors";
 @import "../tokens/typography";
@@ -46,7 +44,7 @@ $pb_icon_circle_sizes: (
     &[class*=_size_#{$name}] {
       width: $size;
       height: $size;
-      border-radius: math.div($size, 2);
+      border-radius: $size/2;
       background: $silver;
       color: $text_lt_light;
       font-size: if($name == "xxs", $size - 6px, $size * 0.38);

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

@@ -1,9 +1,7 @@
-@use "sass:math";
-
 @import "../tokens/spacing";
 
 [class^=pb_label_value_kit] {
   [class^=pb_caption_kit]  {
-    margin-bottom: math.div($space-xs, 1.5);
+    margin-bottom: $space-xs/1.5;
   }
-}
+}

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/spacing";
 
 @mixin pb_message {
@@ -19,7 +17,7 @@
     }
 
     .message_text {
-      margin: 0 0 math.div($space-xs, 2);
+      margin: 0 0 $space-xs/2;
     }
 
     .message_title {

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../utilities/colors";
 @import "../tokens/opacity";
@@ -20,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: math.div($pb_multiple_users_size, 2) + 2;
+    border-radius: $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_passphrase/_passphrase.scss

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../tokens/spacing";
 @import "../tokens/screen_sizes";
@@ -23,14 +21,14 @@
   }
 
   .passphrase-label {
-    margin-right: math.div($space_xs, 2);
+    margin-right: $space_xs / 2;
   }
 
   .passphrase-text-input-wrapper {
     position: relative;
 
     .pb_text_input_kit_label {
-      margin-bottom: math.div($space_xs, 2);
+      margin-bottom: $space_xs / 2;
     }
 
     .passphrase-text-input input {
@@ -59,7 +57,7 @@
   }
 
   .pb_progress_simple_wrapper, .pb_progress_simple_wrapper_dark {
-    margin-bottom: math.div($space_xs, 2);
+    margin-bottom: $space_xs/2;
 
     &.progress-empty-input {
       visibility: hidden;

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "./intlTelInput";
 @import "../tokens/colors";
 
@@ -41,7 +39,7 @@ $flag-min-resolution: 192dpi;
     color: $charcoal;
   }
 
-  // iti-spacer-horizontal's default is 8px, or $space_xs
+  // iti-spacer-horizontal's default is 8px, or $space_xs 
   .iti__country-list .iti__flag, .iti__country-name {
     margin-right: $space_xs;
   }
@@ -75,7 +73,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__divider {
-    border-bottom: 1px solid $border_light !important;
+    border-bottom: 1px solid $border_light !important;  
   }
 
   .iti__selected-country-primary {
@@ -95,7 +93,7 @@ $flag-min-resolution: 192dpi;
     justify-content: center;
     align-items: center;
     border-width: 0;
-    border-radius: $space_xxs;
+    border-radius: $space_xxs; 
 
     &[aria-expanded="true"] {
       color: $primary_action;
@@ -165,7 +163,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__arrow.iti__arrow--up::before {
-    transform: rotate(-(math.div($transform-rotate-deg, 3)));
+    transform: rotate(-($transform-rotate-deg/3));
     top: $space_xs + 4px;
     color: $primary_action;
   }
@@ -198,7 +196,7 @@ $flag-min-resolution: 192dpi;
   }
 
   .iti__dropdown-content {
-    border-radius: $space_xs;
+    border-radius: $space_xs; 
     border: 1px solid $border_light !important;
     position: absolute;
     top: 100%;
@@ -227,12 +225,12 @@ $flag-min-resolution: 192dpi;
     }
 
     .iti__dropdown-content {
-      border-radius: $space_xs;
+      border-radius: $space_xs; 
       border: 1px solid $border_dark !important;
     }
 
     .iti__divider {
-      border-bottom: 1px solid $border_dark !important;
+      border-bottom: 1px solid $border_dark !important;  
     }
 
     .iti__country-list {
@@ -267,7 +265,7 @@ $flag-min-resolution: 192dpi;
       color: $white;
     }
   }
-
+  
   @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: $flag-min-resolution) {
     .iti__flag {
       background-image: url("https://unpkg.com/intl-tel-input@24.6.0/build/img/flags@2x.png");

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/spacing";
 @import "../tokens/colors";
 @import "../tokens/opacity";
@@ -11,9 +9,9 @@ $pb_pill_height: 22px;
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: 0 math.div($space-sm, 1.8);
+  padding: 0 $space-sm/1.8;
   height: $pb_pill_height;
-  border-radius: math.div($pb_pill_height, 2);
+  border-radius: $pb_pill_height/2;
   white-space: nowrap;
 
   &[class*=lowercase] {

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../tokens/opacity";
 @import "../tokens/colors";
@@ -23,7 +21,7 @@ $pb_progress_simple_height: 4px;
 [class^=pb_progress_simple_kit] {
   width: 100%;
   height: $pb_progress_simple_height;
-  border-radius: math.div($pb_progress_simple_height, 2);
+  border-radius: $pb_progress_simple_height/2;
   background: rgba($primary, $opacity-1);
     &[class*=_positive] {
       .progress_simple_value {
@@ -44,7 +42,7 @@ $pb_progress_simple_height: 4px;
   [class^=progress_simple_value] {
     width: 0%;
     height: 100%;
-    border-radius: math.div($pb_progress_simple_height, 2);
+    border-radius: $pb_progress_simple_height/2;
     background: $primary;
   }
 

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../pb_textarea/textarea_mixin";
 @import "../pb_button/_button_mixins";
 @import "../tokens/border_radius";
@@ -96,7 +94,7 @@
     .trix-button--icon {
       height: $space_lg;
       width: $space_lg;
-      margin: math.div($space_xs, 2);
+      margin: $space_xs / 2;
       border-radius: $border_rad_heavier;
       &::before {
         background-size: auto;
@@ -106,7 +104,7 @@
       background: $white;
       border: 1px solid #E4E8F0;
       border-bottom: none;
-      padding: math.div($space_xs, 2);
+      padding: $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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../pb_body/body_mixins";
 @import "../pb_textarea/textarea_mixin";
 @import "../tokens/titles";
@@ -83,7 +81,7 @@
     display: block;
     &.error {
       [class*=pb_body_kit] {
-        margin-top: math.div($space_xs, 2);
+        margin-top: $space_xs / 2;
       }
       > select:first-child {
         border-color: $error;
@@ -135,7 +133,7 @@
       box-shadow: none;
       border-color: transparent;
       padding: 4px 8px;
-      padding-right: $space_lg;
+      padding-right: $space_lg; 
       border-radius: 4px;
       option {
         background-color: $white;
@@ -242,7 +240,7 @@
       border-color: transparent;
       background: transparent;
       padding: 4px 8px;
-      padding-right: $space_lg;
+      padding-right: $space_lg; 
       border-radius: 4px;
       option {
         background-color: $white;

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/animation-curves";
 @import "../tokens/colors";
 @import "../tokens/opacity";
@@ -62,7 +60,7 @@ $pb_selectable_paddings: (
       align-items: center;
       height: $pb_selectable_card_indicator_size;
       width: $pb_selectable_card_indicator_size;
-      border-radius: (math.div($pb_selectable_card_indicator_size, 2)) + (math.div($pb_selectable_card_border, 2));
+      border-radius: $pb_selectable_card_indicator_size/2 + $pb_selectable_card_border/2;
       border-width: $pb_selectable_card_border;
       border-style: solid;
       border-color: $white;
@@ -71,8 +69,8 @@ $pb_selectable_paddings: (
       font-size: $font_smaller;
       text-align: center;
       position: absolute;
-      top: -(math.div($pb_selectable_card_indicator_size, 2));
-      right: -(math.div($pb_selectable_card_indicator_size, 2));
+      top: -($pb_selectable_card_indicator_size/2);
+      right: -($pb_selectable_card_indicator_size/2);
       opacity: 0;
     }
   }

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../pb_textarea/textarea_mixin";
 @import "../tokens/titles";
 @import "../tokens/colors";
@@ -102,7 +100,7 @@
   &.error {
     .text_input_wrapper {
       [class*="pb_body_kit"] {
-        margin-top: math.div($space_xs, 2);
+        margin-top: $space_xs / 2;
       }
       input,
       .text_input {

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../pb_body/body_mixins";
 @import "./textarea_mixin";
 @import "../tokens/spacing";
@@ -62,7 +60,7 @@
 
   &.error {
     [class*=pb_body_kit] {
-      margin-top: math.div($space_xs, 2);
+      margin-top: $space_xs / 2;
     }
     textarea {
       border-color: $error;

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

@@ -1,4 +1,3 @@
-@use "sass:math";
 
 [class^=pb_time_range_inline_kit] {
   &[class*=_center]  {
@@ -23,14 +22,14 @@
     display: flex;
     align-items: center;
     [class*=pb_time_range_inline_arrow] {
-      margin-left: math.div($space_xs, 2);
-      margin-right:math.div($space_xs, 2);
+      margin-left: $space_xs/2;
+      margin-right: $space_xs/2;
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: math.div($space_xs, 2);
+      margin-left: $space_xs/2;
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: math.div($space_xs, 2);
+      margin-right: $space_xs/2;
     }
   }
 }

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

@@ -1,14 +1,12 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 @import "../tokens/spacing";
 @import "../tokens/opacity";
 @import "../tokens/typography";
 
 $connector_width: 2px;
-$icon_margin: math.div($space_xs, 2);
+$icon_margin: $space_xs/2;
 $icon_height: 28px;
-$height_from_top: (math.div($icon_height, 2)) - (math.div($connector_width, 2));
+$height_from_top: $icon_height/2 - $connector_width/2;
 
 // Add gap variables
 $gap_xs: $height_from_top + $space_xs;

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

@@ -1,5 +1,3 @@
-@use "sass:math";
-
 @import "../tokens/colors";
 
 $color_checkbox_success: $data_1;
@@ -10,7 +8,7 @@ $transition: .2s ease-in-out;
 [class^=pb_toggle_kit] {
   position: relative;
   $width: 44px;
-  $height: math.div($width, 2);
+  $height: $width / 2;
   $border_success: 3px solid $color_checkbox_success;
   $border_default: 3px solid $color_checkbox_default;
 
@@ -29,7 +27,7 @@ $transition: .2s ease-in-out;
       &:after {
         transition: $transition;
         content: "";
-        width: math.div($width, 2) - 4px;
+        width: $width / 2 - 4px;
         height: $height - 4px;
         background-color: $color_checkbox_default;
         border-radius: 50%;
@@ -70,7 +68,7 @@ $transition: .2s ease-in-out;
         background-color: $color_checkbox_success;
 
         &:after {
-          left: math.div($width, 2) + 2px;
+          left: $width / 2 + 2px;
           background-color: $white;
         }
       }

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.10.0"
-  VERSION = "14.11.0.pre.rc.16"
+  VERSION = "14.11.0.pre.rc.17"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.11.0.pre.rc.16
+  version: 14.11.0.pre.rc.17
 platform: ruby
 authors:
 - Power UX