playbook_ui 13.27.0.pre.alpha.PLAY1250fixTextInpputaddonborderradiusformgroup2862 → 13.27.0.pre.alpha.powercentrainplaybookpt22905

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

@@ -9,7 +9,7 @@
 
 $pb_button_size: 40px;
 $pb_button_v_padding: 7px;
-$pb_button_h_padding: 34px;
+$pb_button_h_padding: 28px;
 $pb_button_hover_darken: 4%;
 $pb_button_border_width: 0px;
 
@@ -27,12 +27,13 @@ $pb_button_border_width: 0px;
   text-rendering: optimizeLegibility;
   font-size: $font_small;
   font-weight: $bold;
+  letter-spacing: $lspace_loose;
   text-align: center;
   vertical-align: middle;
   text-transform: none;
   border-width: $pb_button_border_width;
   border-style: solid;
-  border-radius: $border_rad_light;
+  border-radius: $border_rad_heavy;
   min-height: $pb_button_size;
   line-height: 1.5;
   padding: $pb_button_v_padding $pb_button_h_padding;
@@ -197,16 +198,16 @@ $pb_button_border_width: 0px;
 
 // Dark Link =============
 @mixin pb_button_link_dark {
-  @include pb_button_variant($transparent, $white);
+  @include pb_button_variant($transparent, $active_dark);
 
   @media (hover:hover) {
     &:hover {
       @include pb_button_hover($transparent);
-      color: rgba($white, $opacity_6)
+      color: rgba($active_dark, $opacity_6)
     }
     &:active {
       transition: none;
-      @include pb_button_variant($transparent, $white);
+      @include pb_button_variant($transparent, $active_dark);
     }
   }
 }

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -13,7 +13,7 @@ $pb_caption_colors: (
 $pb_dark_caption_colors: (
   default:        $text_dk_default,
   light:          $text_dk_light,
-  link:           $primary,
+  link:           $active_dark,
   success:        $text_dk_success_sm,
   error:          $error,
 );
@@ -24,7 +24,7 @@ $pb_dark_caption_colors: (
   color: $text_lt_light;
   text-transform: uppercase;
   font-size: $font_size;
-  letter-spacing: $lspace_looser;
+  letter-spacing: $lspace_loosest;
 }
 
 @mixin caption_color($color: $text_lt_light) {

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -17,6 +17,11 @@ $additional_colors: (
   "light": $bg_light,
   "white": $white,
   "none": none,
+  "success_subtle": $success_subtle,
+  "warning_subtle": $warning_subtle,
+  "error_subtle": $error_subtle,
+  "info_subtle": $info_subtle,
+  "neutral_subtle": $neutral_subtle,
 );
 $background_colors: map-merge($product_colors, $additional_colors);
 $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors), $category_colors);

data/app/pb_kits/playbook/pb_card/card.rb

@@ -15,7 +15,7 @@ module Playbook
                            values: %w[xs sm md lg xl none rounded],
                            default: "md"
       prop :background, type: Playbook::Props::Enum,
-                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none],
+                        values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
                         default: "none"
 
       def classname

data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb

@@ -42,3 +42,23 @@
     dark: true
   }) %>
 <% end %>
+
+<%= pb_rails("title", props: { text: "Subtle Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
+
+<%= pb_rails("card", props: { background: "success_subtle", margin_bottom: "sm" })  do %>
+  <%= pb_rails("body", props: {
+    text: "Success Subtle"
+  }) %>
+<% end %>
+
+<%= pb_rails("card", props: { background: "warning_subtle", margin_bottom: "sm" })  do %>
+  <%= pb_rails("body", props: {
+    text: "Warning Subtle"
+  }) %>
+<% end %>
+
+<%= pb_rails("card", props: { background: "info_subtle", margin_bottom: "sm" })  do %>
+  <%= pb_rails("body", props: {
+    text: "Info Subtle"
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -90,7 +90,47 @@ const CardBackground = (props) => {
         />
       </Card>
 
-      
+
+      <Title
+          {...props}
+          marginBottom="sm"
+          size={4}
+          tag="h4"
+          text="Subtle Status Colors"
+      />
+
+      <Card
+          background="success_subtle"
+          marginBottom="sm"
+          {...props}
+      >
+        <Body
+            text="Success Subtle"
+            {...props}  
+        />
+      </Card>
+
+      <Card
+          background="warning_subtle"
+          marginBottom="sm"
+          {...props}
+      >
+        <Body
+            text="Warning Subtle"
+            {...props}
+        />
+      </Card>
+
+      <Card
+          background="info_subtle"
+          marginBottom="sm"
+          {...props}
+      >
+        <Body
+            text="Info Subtle"
+            {...props}
+        />
+      </Card>
     </div>
   )
 }

data/app/pb_kits/playbook/pb_card/docs/_card_background.md

@@ -1 +1 @@
-Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors.
+Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.

data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb

@@ -67,4 +67,4 @@
   <%= pb_rails("card/card_body", props: { padding: "md",  }) do %>
     Body
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_header.md

@@ -1 +1 @@
-Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
+Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md

@@ -1 +1 @@
-Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
+Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.

data/app/pb_kits/playbook/pb_dashboard/commonSettings.js

@@ -53,7 +53,7 @@ const adjustAxisStyle = (axis) => {
   /* Change axis label styles */
   axis.labels.style.fontFamily = typography.font_family_base
   axis.labels.style.color = colors.charcoal
-  axis.labels.style.fontWeight = typography.light
+  axis.labels.style.fontWeight = typography.regular
   axis.labels.style.fontSize = typography.font_small
 }
 

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -27,7 +27,7 @@ const highchartsDarkTheme: ThemeProps = {
     style: {
       color: colors.text_dk_default,
       fontFamily: typography.font_family_base,
-      fontWeight: typography.regular,
+      fontWeight: typography.bold,
       fontSize: typography.heading_3,
     },
   },

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -27,7 +27,7 @@ const highchartsTheme: ThemeProps = {
     style: {
       color: colors.text_lt_default,
       fontFamily: typography.font_family_base,
-      fontWeight: typography.regular,
+      fontWeight: typography.bold,
       fontSize: typography.heading_3,
     },
   },

data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss

@@ -15,7 +15,7 @@ $pb_dark_detail_colors: (
   light:          $text_dk_light,
   default:        $text_dk_default,
   lighter:        $text_dk_lighter,
-  link:           $primary,
+  link:           $active_dark,
   error:          $error_dark,
   success:        $text_dk_success_sm,
 );

data/app/pb_kits/playbook/pb_docs/kit_example.html.erb

@@ -23,11 +23,11 @@
         <ul>
           <% hide_button = type == "rails" ? 'flex' : 'none' %>
             <li>
-            <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", variant: "link", size: "sm", display: hide_button }) %>
+            <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", classname: dark ? "dark" : "", variant: "link", size: "sm", display: hide_button }) %>
             </li>
           <li>
-            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
-            <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
+            <%= pb_rails("button", props: { icon: "code", classname: dark ? "dark" : "", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
+            <%= pb_rails("button", props: { icon: "code", classname: dark ? "dark" : "", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
           </li>
         </ul>
       </div>

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

@@ -77,8 +77,9 @@
         }
         &[class*="selected"] {
           background-color: $primary;
+          color: $white;
           [class^="pb_body"],
-          [class^="pb_title_kit"] {
+          [class^="pb_title_kit"], a {
             color: $white !important;
           }
           &:hover {

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

@@ -114,8 +114,10 @@ const Dropdown = (props: DropdownProps) => {
     setIsDropDownClosed(isClosed)
    },[isClosed])
 
-  const filteredOptions = options?.filter((option: GenericObject) =>
-    option.label.toLowerCase().includes(filterItem.toLowerCase())
+  const filteredOptions = options?.filter((option: GenericObject) => {
+    const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
+    return String(label).toLowerCase().includes(filterItem.toLowerCase());
+  }
   );
 
 // For keyboard accessibility: Set focus within dropdown to selected item if it exists

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States' },
-    { label: 'Canada', value: 'Canada' },
-    { label: 'Pakistan', value: 'Pakistan' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md

@@ -1 +1 @@
-The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.
+This kit's `options` prop requires an array of objects, each of which will be used as the selectable options within the dropdown. Each option object can support any number of key-value pairs, but each must contain `label` and `value`.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md

@@ -1,7 +1,6 @@
-The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
+The dropdown is built using all of the following subcomponents:
 
-`Dropdown. Trigger` / `dropdown/dropdown_trigger`
-`Dropdown.Container`/ `dropdown/dropdown_container`
-`Dropdown.Option` / `dropdown/dropdown_option`
-
-See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props. 
+`Dropdown.Trigger` is the UI component that users interact with to toggle the dropdown. 
+`Dropdown.Container` is the floating container that wraps the list of dropdown options. 
+`Dropdown.Option` renders options that are passed to the container. 
+Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_subcomponent_structure.html.erb → _dropdown_subcomponent_structure_rails.html.erb}

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States' },
-    { label: 'Canada', value: 'Canada' },
-    { label: 'Pakistan', value: 'Pakistan' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.md

@@ -0,0 +1,6 @@
+The dropdown is built using all of the following required subcomponents:
+
+`dropdown/dropdown_trigger` is the UI component that users interact with to toggle the dropdown. 
+`dropdown/dropdown_container` is the floating container that wraps the list of dropdown options.
+`dropdown/dropdown_option` renders options that are passed to the container. 
+Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md

@@ -1,5 +1,5 @@
-The `customDisplay` prop can be used to customize the display of the selected item by allowing devs to pass in a component that will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
 
-The `placeholder` prop can also be used to customize the placeholder text for the default Trigger. 
+The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`. 
 
-The `onSelect` prop is a function that gives the dev one argument: the selected option. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.
+The `onSelect` prop returns the selected option as an object to be utilized by the dev. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md

@@ -0,0 +1,5 @@
+Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
+
+The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`. 
+
+The dropdown follows the typical rails pattern of utilizing hidden inputs for form submission. The hidden input value is the selected options' id.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md

@@ -1 +1 @@
-The Dropdown also allows for custom options that can be passed in as children to the `Dropdown.Option` subcomponent. If no children are passed to `Dropdown.Option`, the kit will render each option as text within a Body kit by default. 
+`Dropdown.Option` subcomponent accepts any child components to customize the options' contents and display. By default, options are Body kit text that is set by the `label` value from the `option` object.

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_options.html.erb → _dropdown_with_custom_options_rails.html.erb}

@@ -5,21 +5,21 @@
       value: "United States",
       areaCode: "+1",
       icon: "🇺🇸",
-      id: "United-states"
+      id: "us"
     },
     {
       label: "Canada",
       value: "Canada",
       areaCode: "+1",
       icon: "🇨🇦",
-      id: "canada"
+      id: "ca"
     },
     {
       label: "Pakistan",
       value: "Pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
-      id: "pakistan"
+      id: "pk"
     }
   ]
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.md

@@ -0,0 +1 @@
+`dropdown/dropdown_option` subcomponent accepts any child components to customize the options' contents and display. By default, options are Body kit text that is set by the `label` value from the `option` object.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States' },
-    { label: 'Canada', value: 'Canada' },
-    { label: 'Pakistan', value: 'Pakistan' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md

@@ -1 +1 @@
-By default, the padding on each option in the dropdown is set to `xs`. The `padding` Global Props however can be used to override this default. In this example, we are setting padding to `sm`.
+By default, dropdown option padding is set to `xs`, but this padding can be overridden using our global prop spacing token. In this example we are increasing the option padding to `sm`.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md

@@ -1 +1 @@
-The Dropdown can also be given a custom Trigger by passing children to the `Dropdown.Trigger` subcomponent as shown in this example. Here we are using the IconCircle kit. 
+Optionally replace the default trigger's select element by passing child components directly to the `Dropdown.Trigger`.

data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_custom_trigger.html.erb → _dropdown_with_custom_trigger_rails.html.erb}

@@ -5,21 +5,21 @@
       value: "United States",
       areaCode: "+1",
       icon: "🇺🇸",
-      id: "United-states"
+      id: "us"
     },
     {
       label: "Canada",
       value: "Canada",
       areaCode: "+1",
       icon: "🇨🇦",
-      id: "canada"
+      id: "ca"
     },
     {
       label: "Pakistan",
       value: "Pakistan",
       areaCode: "+92",
       icon: "🇵🇰",
-      id: "pakistan"
+      id: "pk"
     }
   ]
 

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.md

@@ -0,0 +1 @@
+Optionally replace the default trigger's select element by passing child components directly to the `dropdown/dropdown_trigger`.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb

@@ -1,8 +1,8 @@
 <% 
   options = [
-    { label: 'United States', value: 'United States' },
-    { label: 'Canada', value: 'Canada' },
-    { label: 'Pakistan', value: 'Pakistan' },
+    { label: 'United States', value: 'United States', id: 'us' },
+    { label: 'Canada', value: 'Canada', id: 'ca' },
+    { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
   ]
 
 %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md

@@ -1 +1 @@
-The optional `label` prop takes a string value that if present will render that string as the label for the Dropdown.
+The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.

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

@@ -1,12 +1,12 @@
 examples:
   rails:
   - dropdown_default: Default
-  - dropdown_subcomponent_structure: Subcomponent Structure
+  - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_label: With Label
-  - dropdown_with_custom_options: Custom Options
-  - dropdown_with_custom_display: Custom Display
-  - dropdown_with_custom_trigger: Custom Trigger
-  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
+  - dropdown_with_custom_options_rails: Custom Options
+  - dropdown_with_custom_display_rails: Custom Display
+  - dropdown_with_custom_trigger_rails: Custom Trigger
+  - dropdown_with_custom_padding: Custom Option Padding
 
   react:
   - dropdown_default: Default
@@ -15,7 +15,7 @@ examples:
   - dropdown_with_custom_options: Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
-  - dropdown_with_custom_padding: Custom Padding for Dropdown Options
+  - dropdown_with_custom_padding: Custom Option Padding
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -8,6 +8,7 @@
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper" style="position: relative">
+    <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value=""/>
     <% if content.present? %>
         <%= content.presence %>
     <% else %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -6,6 +6,7 @@ module Playbook
       prop :options, type: Playbook::Props::Array,
                      default: []
       prop :label, type: Playbook::Props::String
+      prop :name, type: Playbook::Props::String
 
       def data
         Hash(prop(:data)).merge(pb_dropdown: true)

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb

@@ -2,7 +2,7 @@
     aria: object.aria,
     class: object.classname,
     data: object.data,
-    id: object.id,
+    id: object.option[:id],
     **combined_html_options) do %>
     <%= pb_rails("list/item", props: {
         display: "flex", 

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb

@@ -3,7 +3,7 @@
 module Playbook
   module PbDropdown
     class DropdownOption < Playbook::KitBase
-      prop :option, type: Playbook::Props::String
+      prop :option, type: Playbook::Props::HashProp
       prop :id, type: Playbook::Props::String
 
       def data

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -37,8 +37,10 @@ export default class PbDropdown extends PbEnhancedElement {
 
   handleOptionClick(event) {
     const option = event.target.closest(OPTION_SELECTOR);
+    const hiddenInput = this.element.querySelector("#dropdown-selected-option");
     if (option) {
       const value = option.dataset.dropdownOptionLabel;
+      hiddenInput.value = JSON.parse(value).id;
       this.onOptionSelected(value, option);
     }
   }
@@ -99,7 +101,6 @@ export default class PbDropdown extends PbEnhancedElement {
       option.classList.remove("pb_dropdown_option_selected");
     });
     selectedOption.classList.add("pb_dropdown_option_selected");
-    console.log(`Selected value: ${value}`);
   }
 
   get target() {

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -50,8 +50,10 @@ const DropdownOption = (props: DropdownOptionProps) => {
     selected,
   } = useContext(DropdownContext);
 
-  const isItemMatchingFilter = (option: GenericObject) =>
-    option?.label.toLowerCase().includes(filterItem.toLowerCase());
+  const isItemMatchingFilter = (option: GenericObject) => {
+    const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
+    return String(label).toLowerCase().includes(filterItem.toLowerCase());
+  }
 
   if (!isItemMatchingFilter(option)) {
     return null;

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

@@ -55,7 +55,7 @@ $form_pill_colors: (
     height: fit-content;
     height: -moz-fit-content;
     .pb_form_pill_text, .pb_form_pill_close, .pb_form_pill_tag {
-      font-size: 16px;
+      font-size: $font_base;
       font-weight: $regular;
     }
     .pb_form_pill_text, .pb_form_pill_tag {

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

@@ -35,6 +35,10 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     margin-left: $pb_multiple_users_overlap;
     margin-right: 0;
 
+    &:first-of-type {
+      margin-left: 0;
+    }
+
     &.dark {
       .avatar_wrapper {
         border: $pb_multiple_users_border_size solid $bg_dark;
@@ -58,6 +62,10 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     .pb_multiple_users_item {
       margin-left: 0;
       margin-right: $pb_multiple_users_overlap;
+
+      &:first-of-type {
+        margin-right: 0;
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -49,6 +49,10 @@
   }
 
   &.dark {
-    @include pb_title_dark;
+    @include pb_title_dark; 
+  }
+
+  &.dark[class*=_link] { 
+    @include pb_title_dark_link; 
   }
 }

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

@@ -5,10 +5,11 @@
 @mixin pb_title(
     $fontSize: $heading_1,
     $fontWeight: $lighter,
-    $lineHeight: $lh_tighter
+    $lineHeight: $lh_tighter,
+    $letterSpacing: $lspace_tight
 ){
   font-size: $fontSize;
-  letter-spacing: $lspace_tight;
+  letter-spacing: $letterSpacing;
   font-weight: $fontWeight;
   color: $text_lt_default;
   margin: 0;
@@ -29,12 +30,15 @@
 }
 
 @mixin pb_title_4 {
-  @include pb_title($heading_4, $bolder);
-  letter-spacing: -0.03em;
+  @include pb_title($heading_4, $bolder, $letterSpacing: $lspace_normal);
 }
 
 @mixin pb_title_dark {
-  color: $text_dk_default;
+    color: $text_dk_default;
+} 
+
+@mixin pb_title_dark_link {
+    color: $active_dark;
 }
 
 @mixin pb_title_bold {