playbook_ui 12.5.0 → 12.6.0.pre.alpha.cssphone1

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

@@ -4,29 +4,29 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 import intlTelInput from 'intl-tel-input'
-import 'intl-tel-input/build/css/intlTelInput.css'
 import TextInput from '../pb_text_input/_text_input'
+import 'intl-tel-input/build/js/utils.js'
 
 declare global {
   interface Window {
-    intlTelInputGlobals: any,
+    intlTelInputGlobals: any
   }
 }
 
 type PhoneNumberInputProps = {
-  aria?: { [key: string]: string },
-  className?: string,
-  data?: { [key: string]: string },
-  disabled?: boolean,
-  id?: string,
-  initialCountry?: string,
-  isValid?: (valid: boolean) => void,
-  label?: string,
-  name?: string,
-  onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
-  onlyCountries: string[],
-  preferredCountries?: string[],
-  value?: string,
+  aria?: { [key: string]: string }
+  className?: string
+  data?: { [key: string]: string }
+  disabled?: boolean
+  id?: string
+  initialCountry?: string
+  isValid?: (valid: boolean) => void
+  label?: string
+  name?: string
+  onChange?: (e: React.FormEvent<HTMLInputElement>) => void
+  onlyCountries: string[]
+  preferredCountries?: string[]
+  value?: string
 }
 
 enum ValidationError {
@@ -35,19 +35,22 @@ enum ValidationError {
 }
 
 const formatToGlobalCountryName = (countryName: string) => {
-  return countryName.split('(')[0].trim()
+  return countryName.split("(")[0].trim()
 }
 
 const formatAllCountries = () => {
   let countryData = window.intlTelInputGlobals.getCountryData()
+
   for (let i = 0; i < countryData.length; i++) {
     let country = countryData[i]
     country.name = formatToGlobalCountryName(country.name)
   }
 }
 
+formatAllCountries()
+
 const containOnlyNumbers = (value: string) => {
-  return /^(\++)*(\d+)$/.test(value)
+  return /^[()+\-\ .\d]*$/g.test(value)
 }
 
 const PhoneNumberInput = (props: PhoneNumberInputProps) => {
@@ -56,25 +59,34 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     className,
     data = {},
     disabled = false,
-    id = '',
-    initialCountry = '',
-    isValid = () => {void 0 },
-    label = '',
-    name = '',
-    onChange = () => { void 0 },
+    id = "",
+    initialCountry = "",
+    isValid = () => {
+      void 0
+    },
+    label = "",
+    name = "",
+    onChange = () => {
+      void 0
+    },
     onlyCountries = [],
     preferredCountries = [],
-    value = '',
+    value = "",
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
-  const classes = classnames(buildCss('pb_phone_number_input'), globalProps(props), className)
+  const classes = classnames(
+    buildCss("pb_phone_number_input"),
+    globalProps(props),
+    className
+  )
 
   const inputRef = useRef<HTMLInputElement>()
   const [inputValue, setInputValue] = useState(value)
   const [itiInit, setItiInit] = useState<any>()
   const [error, setError] = useState('')
+  const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
 
   const validateTooLongNumber = (itiInit: any) => {
     const error = itiInit.getValidationError()
@@ -83,7 +95,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
       const countryName = itiInit.getSelectedCountryData().name
       setError(`Invalid ${countryName} phone number (too long)`)
     } else {
-      setError('')
+      setError("")
     }
   }
 
@@ -98,7 +110,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
 
   const validateOnlyNumbers = () => {
     if (inputValue && !containOnlyNumbers(inputValue)) {
-      setError('Invalid phone number. Enter numbers only.')
+      setError("Invalid phone number. Enter numbers only.")
     }
   }
 
@@ -114,11 +126,14 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     isValid(itiInit.isValidNumber())
   }
 
+  // Separating Concerns as React Docs Recommend
+  // This also Fixes things for our react_component rendering on the Rails Side
   useEffect(() => {
     formatAllCountries()
+  }, [])
 
+  useEffect(() => {
     const telInputInit = new intlTelInput(inputRef.current, {
-        utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.19/js/utils.js',
         separateDialCode: true,
         preferredCountries,
         allowDropdown: !disabled,
@@ -128,16 +143,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     )
     
     inputRef.current.addEventListener("countrychange", () => validateTooLongNumber(telInputInit))
+    inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
+    inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
+
     setItiInit(telInputInit)
   }, [])
 
   return (
-    <div
-      {...ariaProps}
-      {...dataProps}
-      className={classes}
-    >
+    <div {...ariaProps} {...dataProps} className={classes}>
       <TextInput
+        className={dropDownIsOpen ? 'dropdown_open' : ''}
         disabled={disabled}
         error={error}
         id={id}

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import { PhoneNumberInput } from '../../'
+import "intl-tel-input/build/css/intlTelInput.min.css"
 
 const PhoneNumberInputDefault = () => (
   <>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("phone_number_input", props: {
+    initial_country: "br"
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("phone_number_input", props: {
+    initial_country: "br",
+    only_countries: ['us', 'br']
+}) %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("phone_number_input", props: {
+    initial_country: "br",
+    preferred_countries: ['us', 'br', 'ph', 'gb']
+}) %>  

data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml

@@ -7,4 +7,7 @@ examples:
   - phone_number_input_only_countries: Limited Countries
 
   rails:
-  - phone_number_input_default: Default
+  - phone_number_input_default: Default
+  - phone_number_input_preferred_countries: Preferred Countries
+  - phone_number_input_initial_country: Initial Country
+  - phone_number_input_only_countries: Limited Countries

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.html.erb

@@ -1,15 +1 @@
-<%= react_component("PhoneNumberInput", object.phone_number_input_options) %>
-
-<script>
-  const formatToGlobalCountryName = () => {
-    return countryName.split('(')[0].trim()
-  }
-  
-  const formatAllCountries = () => {
-    let countryData = window.intlTelInputGlobals.getCountryData()
-    for (let i = 0; i < countryData.length; i++) {
-      let country = countryData[i]
-      country.name = formatToGlobalCountryName(country.name)
-    }
-  }
-  </script>
+<%= react_component("PhoneNumberInput", object.phone_number_input_options) %>

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
-
 import {
   Popper,
   Manager as PopperManager,
@@ -23,7 +22,7 @@ type PbPopoverProps = {
   aria?: { [key: string]: string };
   className?: string;
   closeOnClick?: "outside" | "inside" | "any";
-  data?: object;
+  data?: { [key: string]: string },
   id?: string;
   offset?: boolean;
   reference: PopperReference & any;
@@ -100,31 +99,31 @@ const Popover = (props: PbPopoverProps) => {
 
   return (
     <Popper
-      modifiers={popoverModifiers({ modifiers, offset })}
-      placement={placement}
-      referenceElement={referenceElement}
+        modifiers={popoverModifiers({ modifiers, offset })}
+        placement={placement}
+        referenceElement={referenceElement}
     >
       {({ placement, ref, style }) => {
         return (
           <div
-            {...ariaProps}
-            {...dataProps}
-            className={classes}
-            data-placement={placement}
-            id={id}
-            ref={ref}
-            style={Object.assign({}, style, zIndexStyle)}
+              {...ariaProps}
+              {...dataProps}
+              className={classes}
+              data-placement={placement}
+              id={id}
+              ref={ref}
+              style={Object.assign({}, style, zIndexStyle)}
           >
             <div
-              className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
+                className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
             >
               <div
-                className={classnames(
-                  "pb_popover_body",
-                  popoverSpacing,
-                  overflowHandling
-                )}
-                style={widthHeightStyles()}
+                  className={classnames(
+                    "pb_popover_body",
+                    popoverSpacing,
+                    overflowHandling
+                  )}
+                  style={widthHeightStyles()}
               >
                 {children}
               </div>
@@ -192,17 +191,17 @@ const PbReactPopover = (props: PbPopoverProps) => {
 
   const popoverComponent = (
     <Popover
-      className={className}
-      maxHeight={maxHeight}
-      maxWidth={maxWidth}
-      minHeight={minHeight}
-      minWidth={minWidth}
-      modifiers={modifiers}
-      offset={offset}
-      placement={placement}
-      referenceElement={referenceElement}
-      zIndex={zIndex}
-      {...props}
+        className={className}
+        maxHeight={maxHeight}
+        maxWidth={maxWidth}
+        minHeight={minHeight}
+        minWidth={minWidth}
+        modifiers={modifiers}
+        offset={offset}
+        placement={placement}
+        referenceElement={referenceElement}
+        zIndex={zIndex}
+        {...props}
     >
       {children}
     </Popover>
@@ -214,7 +213,9 @@ const PbReactPopover = (props: PbPopoverProps) => {
         {reference && !referenceElement && (
           <PopperReference>
             {({ ref }) => (
-              <span className="pb_popover_reference_wrapper" ref={ref}>
+              <span
+                  className="pb_popover_reference_wrapper"
+                  ref={ref}>
                 <reference.type {...reference.props} />
               </span>
             )}
@@ -236,4 +237,4 @@ const PbReactPopover = (props: PbPopoverProps) => {
   );
 };
 
-export default PbReactPopover;
+export default PbReactPopover;

data/app/pb_kits/playbook/playbook-doc.js

@@ -57,6 +57,7 @@ import * as List from 'pb_list/docs'
 import * as LoadingInline from 'pb_loading_inline/docs'
 import * as Map from 'pb_map/docs'
 import * as Message from 'pb_message/docs'
+import * as MultiLevelSelect from 'pb_multi_level_select/docs'
 import * as MultipleUsers from 'pb_multiple_users/docs'
 import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
 import * as Nav from 'pb_nav/docs'
@@ -156,6 +157,7 @@ WebpackerReact.setup({
   ...LoadingInline,
   ...Map,
   ...Message,
+  ...MultiLevelSelect,
   ...MultipleUsers,
   ...MultipleUsersStacked,
   ...Nav,

data/app/pb_kits/playbook/tokens/_animation-curves.scss

@@ -1,37 +1,37 @@
-$bezier: cubic-bezier(.64, 0, .35, 1);
+$bezier: cubic-bezier(.64, 0, .35, 1) !default;
 // +transition-timing-function(cubic-bezier(0.7, 0, 0.3, 1))
 
 /* Default Equations */
-$linear: cubic-bezier(0.250, 0.250, 0.750, 0.750);
-$ease: cubic-bezier(0.250, 0.100, 0.250, 1.000);
-$easeIn: cubic-bezier(0.420, 0.000, 1.000, 1.000);
-$easeOut: cubic-bezier(0.000, 0.000, 0.580, 1.000);
-$easeInOut: cubic-bezier(0.420, 0.000, 0.580, 1.000);
+$linear: cubic-bezier(0.250, 0.250, 0.750, 0.750) !default;
+$ease: cubic-bezier(0.250, 0.100, 0.250, 1.000) !default;
+$easeIn: cubic-bezier(0.420, 0.000, 1.000, 1.000) !default;
+$easeOut: cubic-bezier(0.000, 0.000, 0.580, 1.000) !default;
+$easeInOut: cubic-bezier(0.420, 0.000, 0.580, 1.000) !default;
 
 /* Penner Equations (approximated) originally created by @robpenner */
-$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
-$easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
-$easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
-$easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
-$easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
-$easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
-$easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335);
-$easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+$easeInQuad: cubic-bezier(0.550, 0.085, 0.680, 0.530) !default;
+$easeInCubic: cubic-bezier(0.550, 0.055, 0.675, 0.190) !default;
+$easeInQuart: cubic-bezier(0.895, 0.030, 0.685, 0.220) !default;
+$easeInQuint: cubic-bezier(0.755, 0.050, 0.855, 0.060) !default;
+$easeInSine: cubic-bezier(0.470, 0.000, 0.745, 0.715) !default;
+$easeInExpo: cubic-bezier(0.950, 0.050, 0.795, 0.035) !default;
+$easeInCirc: cubic-bezier(0.600, 0.040, 0.980, 0.335) !default;
+$easeInBack: cubic-bezier(0.600, -0.280, 0.735, 0.045) !default;
 
-$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
-$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
-$easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
-$easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
-$easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
-$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
-$easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000);
-$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+$easeOutQuad: cubic-bezier(0.250, 0.460, 0.450, 0.940) !default;
+$easeOutCubic: cubic-bezier(0.215, 0.610, 0.355, 1.000) !default;
+$easeOutQuart: cubic-bezier(0.165, 0.840, 0.440, 1.000) !default;
+$easeOutQuint: cubic-bezier(0.230, 1.000, 0.320, 1.000) !default;
+$easeOutSine: cubic-bezier(0.390, 0.575, 0.565, 1.000) !default;
+$easeOutExpo: cubic-bezier(0.190, 1.000, 0.220, 1.000) !default;
+$easeOutCirc: cubic-bezier(0.075, 0.820, 0.165, 1.000) !default;
+$easeOutBack: cubic-bezier(0.175, 0.885, 0.320, 1.275) !default;
 
-$easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
-$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
-$easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
-$easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
-$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
-$easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
-$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860);
-$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550);
+$easeInOutQuad: cubic-bezier(0.455, 0.030, 0.515, 0.955) !default;
+$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1.000) !default;
+$easeInOutQuart: cubic-bezier(0.770, 0.000, 0.175, 1.000) !default;
+$easeInOutQuint: cubic-bezier(0.860, 0.000, 0.070, 1.000) !default;
+$easeInOutSine: cubic-bezier(0.445, 0.050, 0.550, 0.950) !default;
+$easeInOutExpo: cubic-bezier(1.000, 0.000, 0.000, 1.000) !default;
+$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.150, 0.860) !default;
+$easeInOutBack: cubic-bezier(0.680, -0.550, 0.265, 1.550) !default;

data/app/pb_kits/playbook/tokens/_border_radius.scss

@@ -1,20 +1,19 @@
-
 // Border Radius
-$border_rad_lightest:     1px;
-$border_rad_lighter:      2px;
-$border_rad_light:        4px;
-$border_rad_normal:       0;
-$border_rad_heavy:        5px;
-$border_rad_heavier:      6px;
-$border_rad_heaviest:     7px;
-$border_rad_mega:         1000px;
-$border_radius_xs:        4px;
-$border_radius_sm:        4px;
-$border_radius_md:        6px;
-$border_radius_lg:        8px;
-$border_radius_xl:        16px;
-$border_radius_rounded:   1000px;
-$border_radius_none:      0;
+$border_rad_lightest:     1px !default;
+$border_rad_lighter:      2px !default;
+$border_rad_light:        4px !default;
+$border_rad_normal:       0 !default;
+$border_rad_heavy:        5px !default;
+$border_rad_heavier:      6px !default;
+$border_rad_heaviest:     7px !default;
+$border_rad_mega:         1000px !default;
+$border_radius_xs:        4px !default;
+$border_radius_sm:        4px !default;
+$border_radius_md:        6px !default;
+$border_radius_lg:        8px !default;
+$border_radius_xl:        16px !default;
+$border_radius_rounded:   1000px !default;
+$border_radius_none:      0 !default;
 $border_radius: (
   lightest:              $border_rad_lightest,
   lighter:               $border_rad_lighter,

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

@@ -11,7 +11,7 @@ $teal:                #00C4D7 !default;
 $red:                 #DA0014 !default;
 $red_dark:            #ff4a50 !default;
 $yellow:              #F9BB00 !default;
-$green:               #00CA74 !default;
+$green:               #1CA05C !default;
 $orange:              #FD804C !default;
 $default:             #93a8b8 !default;
 $colors: (
@@ -75,6 +75,8 @@ $card_colors: (
 );
 
 $primary-action:      $primary !default;
+$secondary-action:    rgba($primary_action, 0.05) !default;
+
 $action_colors: (
   primary_action:            $primary-action
 );

data/app/pb_kits/playbook/tokens/_display.scss

@@ -1,9 +1,9 @@
-$display_inline: inline;
-$display_block: block;
-$display_inline_block: inline-block;
-$display_flex: flex;
-$display_none: none;
-$display_inline_flex: inline-flex;
+$display_inline: inline !default;
+$display_block: block !default;
+$display_inline_block: inline-block !default;
+$display_flex: flex !default;
+$display_none: none !default;
+$display_inline_flex: inline-flex !default;
 $displays: (
   display_none:   $display_none,
   display_flex: $display_flex,

data/app/pb_kits/playbook/tokens/_line_height.scss

@@ -1,10 +1,10 @@
-$lh_tightest: 1;
-$lh_tighter:  1.2;
-$lh_tight:    1.4;
-$lh_normal:   1.5;
-$lh_loose:    1.6;
-$lh_looser:   1.8;
-$lh_loosest:  2;
+$lh_tightest: 1 !default;
+$lh_tighter:  1.2 !default;
+$lh_tight:    1.4 !default;
+$lh_normal:   1.5 !default;
+$lh_loose:    1.6 !default;
+$lh_looser:   1.8 !default;
+$lh_loosest:  2 !default;
 $line_height: (
   tightest: $lh_tightest,
   tighter: $lh_tighter,

data/app/pb_kits/playbook/tokens/_opacity.scss

@@ -1,13 +1,13 @@
-$opacity_1: .1;
-$opacity_2: .2;
-$opacity_3: .3;
-$opacity_4: .4;
-$opacity_5: .5;
-$opacity_6: .6;
-$opacity_7: .7;
-$opacity_8: .8;
-$opacity_9: .9;
-$opacity_10: 1;
+$opacity_1: .1 !default;
+$opacity_2: .2 !default;
+$opacity_3: .3 !default;
+$opacity_4: .4 !default;
+$opacity_5: .5 !default;
+$opacity_6: .6 !default;
+$opacity_7: .7 !default;
+$opacity_8: .8 !default;
+$opacity_9: .9 !default;
+$opacity_10: 1 !default;
 $opacity: (
   opacity_1: $opacity_1,
   opacity_2: $opacity_2,

data/app/pb_kits/playbook/tokens/_positioning.scss

@@ -1,14 +1,14 @@
 // z_index variables
-$z_1: 100;
-$z_2: 200;
-$z_3: 300;
-$z_4: 400;
-$z_5: 500;
-$z_6: 600;
-$z_7: 700;
-$z_8: 800;
-$z_9: 900;
-$z_10: 1000;
+$z_1: 100 !default;
+$z_2: 200 !default;
+$z_3: 300 !default;
+$z_4: 400 !default;
+$z_5: 500 !default;
+$z_6: 600 !default;
+$z_7: 700 !default;
+$z_8: 800 !default;
+$z_9: 900 !default;
+$z_10: 1000 !default;
 $z_index: (
   zindex_1: $z_1,
   zindex_2: $z_1,
@@ -26,7 +26,7 @@ $z_layers: (
   "default": 0
 );
 
-$offscreen: -9999px;
+$offscreen: -9999px !default;
 
 @function z_index_for($layer) {
   @if not map-has-key($z_layers, $layer) {

data/app/pb_kits/playbook/tokens/_screen_sizes.scss

@@ -1,13 +1,13 @@
-$screen-xs-min: 575px;
-$screen-xs-max: $screen-xs-min - 1;
-$screen-sm-min: 576px;
-$screen-sm-max: $screen-sm-min - 1;
-$screen-md-min: 768px;
-$screen-md-max: $screen-md-min - 1;
-$screen-lg-min: 992px;
-$screen-lg-max: $screen-lg-min - 1;
-$screen-xl-min: 1200px;
-$screen-xl-max: $screen-xl-min - 1;
+$screen-xs-min: 575px !default;
+$screen-xs-max: $screen-xs-min - 1 !default;
+$screen-sm-min: 576px !default;
+$screen-sm-max: $screen-sm-min - 1 !default;
+$screen-md-min: 768px !default;
+$screen-md-max: $screen-md-min - 1 !default;
+$screen-lg-min: 992px !default;
+$screen-lg-max: $screen-lg-min - 1 !default;
+$screen-xl-min: 1200px !default;
+$screen-xl-max: $screen-xl-min - 1 !default;
 
 $breakpoints: (
   xs: $screen-xs-min,

data/app/pb_kits/playbook/tokens/_shadows.scss

@@ -1,10 +1,10 @@
 @import "colors";
 @import "opacity";
 
-$shadow_none: 0 0 0 0 transparent;
-$shadow_deep: 0 4px 10px 0 rgba($shadow, 0.16);
-$shadow_deeper: 0 12px 28px 0 rgba($shadow, 0.18);
-$shadow_deepest: 0 30px 38px 4px $shadow, 0 2px 14px 4px rgba($shadow, 0.1);
+$shadow_none: 0 0 0 0 transparent !default;
+$shadow_deep: 0 4px 10px 0 rgba($shadow, 0.16) !default;
+$shadow_deeper: 0 12px 28px 0 rgba($shadow, 0.18) !default;
+$shadow_deepest: 0 30px 38px 4px $shadow, 0 2px 14px 4px rgba($shadow, 0.1) !default;
 $box_shadows: (
   shadow_none: $shadow_none,
   shadow_deep: $shadow_deep,

data/app/pb_kits/playbook/tokens/_spacing.scss

@@ -1,9 +1,9 @@
-$space_xxs:   4px;
-$space_xs:    8px;
-$space_sm:    16px;
-$space_md:    24px;
-$space_lg:    32px;
-$space_xl:    40px;
+$space_xxs:   4px !default;
+$space_xs:    8px !default;
+$space_sm:    16px !default;
+$space_md:    24px !default;
+$space_lg:    32px !default;
+$space_xl:    40px !default;
 $spaces:(
   space_xxs:  $space_xxs,
   space_xs:   $space_xs,

data/app/pb_kits/playbook/tokens/_transition.scss

@@ -1,3 +1,3 @@
-$transition_default: 0.3s;
-$transition_short: 0.15s;
-$transition_cubic: 0.2s cubic-bezier(0.95, 0.05, 0.795, 0.035);
+$transition_default: 0.3s !default;
+$transition_short: 0.15s !default;
+$transition_cubic: 0.2s cubic-bezier(0.95, 0.05, 0.795, 0.035) !default;