playbook_ui 15.1.0.pre.alpha.testingtiptap11043 → 15.1.0.pre.alpha.timelinescss11189

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4f802cf7b82f39892f78a8f9d81868f16818697e20e3284ce1acb3e19622eac1
-  data.tar.gz: 95b5a6b1487a2d77218762c92be71313e0eb8da41e375679bca8097e50f6013e
+  metadata.gz: 18b16d003e09f227fdaa17123c1b08e423071f708f49ca524fb7e2e216c714fc
+  data.tar.gz: ac831c8bb1bdd89eae2244be43c19974c19d1f8cc8019b7d01ec3cc18152427a
 SHA512:
-  metadata.gz: '099f0866c706c372624fb2c28cd02af78610a1b25327bf69ff069bdbdd5223b942141ae1626c9376f59283e6bc46c5234ba7f4b1489f054aa9473ded54d3635b'
-  data.tar.gz: db2cddd5a53b1e7edf83afe003149a62a0e2169458dbf17a8353f7474ee50a8fb2a3b79087ef20770d4d03f04f4d58aa5fe457032c3e13c70ec523b1e8cf07f1
+  metadata.gz: 120b76c6266f100da5befbcc326f54af6f4db972aad12fb97042abecc17f54d593b87764216a11e23dad84ec853d5976ff713a2c86891395b5a70a980b49cbee
+  data.tar.gz: 3b6a97952ca69f967cf9d445391c6a67de36ae76ec5534590fcaf2643946b6cd530080a5902d2072be73026acd6022407a73a9181353893b6f6bed0b43e416bc

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -146,6 +146,8 @@ export function useTableState({
 
   // Pagination configuration
   const paginationInitializer = useMemo(() => {
+    if (!pagination) return {};
+
     return {
       getPaginationRowModel: getPaginationRowModel(),
       paginateExpandedRows: false,
@@ -201,6 +203,13 @@ export function useTableState({
     onRowPinningChange({ top: allPinned });
   }, [table, pinnedRows?.value?.top?.join(',')]);
 
+  // Set pagination state when pagination is enabled
+  useEffect(() => {
+    if (pagination && paginationProps?.pageSize) {
+      table.setPageSize(paginationProps.pageSize);
+    }
+  }, [pagination, paginationProps?.pageSize, table]);
+
   // Check if table has any sub-rows
   const hasAnySubRows = table.getRowModel().rows.some(row => row.subRows && row.subRows.length > 0);
   const selectedRowsLength = Object.keys(table.getState().rowSelection).length;

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

@@ -10,9 +10,15 @@
 @import "./scss_partials/dropdown_animation";
 @import "dropdown_mixin";
 
-[class*="pb_dropdown"] {
+.pb_dropdown_default,
+.pb_dropdown_subtle,
+.pb_dropdown_default_separators_hidden,
+.pb_dropdown_subtle_separators_hidden {
   .dropdown_wrapper {
-    [class*="dropdown_trigger_wrapper"] {
+    .dropdown_trigger_wrapper,
+    .dropdown_trigger_wrapper_focus,
+    .dropdown_trigger_wrapper_focus_select_only,
+    .dropdown_trigger_wrapper_select_only {
       @include pb_body;
       border: 1px solid $border_light;
       background-color: $white;
@@ -48,11 +54,11 @@
         transition: box-shadow 0.15s ease-in-out;
       }
 
-      &[class*="_select_only"] {
+      &.dropdown_trigger_wrapper_select_only {
         box-shadow: inset 0 -11px 20px rgba($primary, 0.05);
       }
 
-      &[class*="_focus"] {
+      &.dropdown_trigger_wrapper_focus {
         box-shadow: 0px 0px 0 1px $primary !important;
         transition: box-shadow 0.1s ease-in-out;
       }
@@ -69,7 +75,12 @@
       z-index: $z_1;
       width: 100%;
 
-      [class*="pb_dropdown_option"] {
+      .pb_dropdown_option,
+      .pb_dropdown_option_list,
+      .pb_dropdown_option_selected,
+      .pb_dropdown_option_focused,
+      .pb_dropdown_option_list_focused,
+      .pb_dropdown_option_selected_focused {
         padding-left: $space_sm;
         padding-right: $space_sm;
         padding-top: $space_xs;
@@ -79,11 +90,14 @@
           background-color: $bg_light;
         }
 
-        &[class*="_focused"] {
+        &.pb_dropdown_option_focused,
+        &.pb_dropdown_option_list_focused,
+        &.pb_dropdown_option_selected_focused {
           background-color: $bg_light;
         }
 
-        &[class*="_list"] {
+        &.pb_dropdown_option_list,
+        &.pb_dropdown_option_list_focused {
           border-bottom: 1px solid $border_light;
 
           &:hover, &:focus {
@@ -92,7 +106,8 @@
             }
           }
         }
-        &[class*="selected"] {
+        &.pb_dropdown_option_selected,
+        &.pb_dropdown_option_selected_focused {
           background-color: $primary;
           color: $white;
           [class^="pb_body"],
@@ -141,41 +156,66 @@
     }
 
     &.error {
-      [class*=pb_body_kit] {
+      .pb_body_kit_negative {
         margin-top: $space_xs / 2;
       }
 
-      [class*="dropdown_trigger_wrapper"] {
+      .dropdown_trigger_wrapper,
+      .dropdown_trigger_wrapper_focus,
+      .dropdown_trigger_wrapper_focus_select_only,
+      .dropdown_trigger_wrapper_select_only {
         border-color: $error;
         box-shadow: none !important;
       }
     }
   }
 
-  &[class*="separators_hidden"] {
+  &.pb_dropdown_default_separators_hidden,
+  &.pb_dropdown_subtle_separators_hidden {
     .dropdown_wrapper {
       .pb_dropdown_container {
 
-        [class*="pb_dropdown_option"] {
+        .pb_dropdown_option,
+        .pb_dropdown_option_list,
+        .pb_dropdown_option_selected,
+        .pb_dropdown_option_focused,
+        .pb_dropdown_option_list_focused,
+        .pb_dropdown_option_selected_focused {
           border: none;
         }
       }
     }
   }
 
-  &[class*="subtle"] {
+  &.pb_dropdown_subtle,
+  &.pb_dropdown_subtle_separators_hidden {
     .dropdown_wrapper {
       .pb_dropdown_container {
         
-        [class*="pb_dropdown_option"]:first-child {
+        .pb_dropdown_option:first-child,
+        .pb_dropdown_option_list:first-child,
+        .pb_dropdown_option_selected:first-child,
+        .pb_dropdown_option_focused:first-child,
+        .pb_dropdown_option_list_focused:first-child,
+        .pb_dropdown_option_selected_focused:first-child {
           margin-top: $space_xs;
         }
 
-        [class*="pb_dropdown_option"]:last-child {
+        .pb_dropdown_option:last-child,
+        .pb_dropdown_option_list:last-child,
+        .pb_dropdown_option_selected:last-child,
+        .pb_dropdown_option_focused:last-child,
+        .pb_dropdown_option_list_focused:last-child,
+        .pb_dropdown_option_selected_focused:last-child {
           margin-bottom: $space_xs;
         }
 
-        [class*="pb_dropdown_option"] {
+        .pb_dropdown_option,
+        .pb_dropdown_option_list,
+        .pb_dropdown_option_selected,
+        .pb_dropdown_option_focused,
+        .pb_dropdown_option_list_focused,
+        .pb_dropdown_option_selected_focused {
           margin: $space_xs;
           padding: $space_xs;
           border-radius: $border_radius_md;
@@ -193,24 +233,44 @@
           }
         }
         
-        [class*="pb_dropdown_option"]:last-child::after {
+        .pb_dropdown_option:last-child::after,
+        .pb_dropdown_option_list:last-child::after,
+        .pb_dropdown_option_selected:last-child::after,
+        .pb_dropdown_option_focused:last-child::after,
+        .pb_dropdown_option_list_focused:last-child::after,
+        .pb_dropdown_option_selected_focused:last-child::after {
           display: none; 
         }
       }
     }
   
-    &[class*="separators_hidden"] {
+    &.pb_dropdown_subtle_separators_hidden {
       .dropdown_wrapper {
         .pb_dropdown_container {
-          [class*="pb_dropdown_option"]:first-child {
+          .pb_dropdown_option:first-child,
+          .pb_dropdown_option_list:first-child,
+          .pb_dropdown_option_selected:first-child,
+          .pb_dropdown_option_focused:first-child,
+          .pb_dropdown_option_list_focused:first-child,
+          .pb_dropdown_option_selected_focused:first-child {
             margin-top: $space_xs;
           }
   
-          [class*="pb_dropdown_option"]:last-child {
+          .pb_dropdown_option:last-child,
+          .pb_dropdown_option_list:last-child,
+          .pb_dropdown_option_selected:last-child,
+          .pb_dropdown_option_focused:last-child,
+          .pb_dropdown_option_list_focused:last-child,
+          .pb_dropdown_option_selected_focused:last-child {
             margin-bottom: $space_xs;
           }
 
-          [class*="pb_dropdown_option"] {
+          .pb_dropdown_option,
+          .pb_dropdown_option_list,
+          .pb_dropdown_option_selected,
+          .pb_dropdown_option_focused,
+          .pb_dropdown_option_list_focused,
+          .pb_dropdown_option_selected_focused {
             padding: $space_xxs $space_xs;
             margin: $space_xxs $space_xs;
      
@@ -218,7 +278,8 @@
               height: 0px;
             }
 
-            &[class*="selected"] {
+            &.pb_dropdown_option_selected,
+            &.pb_dropdown_option_selected_focused {
               border-bottom: none;
             }
           }
@@ -229,7 +290,10 @@
 
   &.dark {
     .dropdown_wrapper {
-      [class*="dropdown_trigger_wrapper"] {
+      .dropdown_trigger_wrapper,
+      .dropdown_trigger_wrapper_focus,
+      .dropdown_trigger_wrapper_focus_select_only,
+      .dropdown_trigger_wrapper_select_only {
         @include pb_body_light_dark;
         background-color: rgba($white, 0.1) !important;
         background: none;
@@ -244,7 +308,7 @@
         [class^="pb_body"] {
           color: $white;
         }
-        &[class*="_select_only"] {
+        &.dropdown_trigger_wrapper_select_only {
           box-shadow: inset 0 -11px 20px rgba($white, 0.05);
         }
         .dropdown_input {
@@ -254,7 +318,10 @@
       }
 
       &.error {
-        [class*="dropdown_trigger_wrapper"] {
+        .dropdown_trigger_wrapper,
+        .dropdown_trigger_wrapper_focus,
+        .dropdown_trigger_wrapper_focus_select_only,
+        .dropdown_trigger_wrapper_select_only {
           border-color: $error_dark;
         }
       }
@@ -268,19 +335,28 @@
         color: $white !important;
       }
 
-      [class*="pb_dropdown_option"] {
+      .pb_dropdown_option,
+      .pb_dropdown_option_list,
+      .pb_dropdown_option_selected,
+      .pb_dropdown_option_focused,
+      .pb_dropdown_option_list_focused,
+      .pb_dropdown_option_selected_focused {
         &:hover {
           background-color: $hover_dark;
         }
 
-        &[class*="_focused"] {
+        &.pb_dropdown_option_focused,
+        &.pb_dropdown_option_list_focused,
+        &.pb_dropdown_option_selected_focused {
           background-color: $hover_dark;
         }
 
-        &[class*="_list"] {
+        &.pb_dropdown_option_list,
+        &.pb_dropdown_option_list_focused {
           border-color: rgba($white, 0.15);
         }
-        &[class*="selected"] {
+        &.pb_dropdown_option_selected,
+        &.pb_dropdown_option_selected_focused {
           background-color: $primary;
           border-bottom: rgba($white, 0.15);
         }

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -21,6 +21,15 @@
   ]
 %>
 
+<%
+  example_typeahead_options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
 <% treeData = [{
     label: "Power Home Remodeling",
     value: "Power Home Remodeling",
@@ -89,6 +98,8 @@
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
+  <%= form.typeahead :example_typeahead_validation_react, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead (React Rendered)", placeholder: "Search for a user", required: true, validation: { message: "Please select a color." } } %>
+  <%= form.typeahead :example_typeahead_validation_react_2, props: { options: example_typeahead_options, pills: true, label: "Example Typeahead 2 (React Rendered)", placeholder: "Search for a user", required: true } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
   <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>

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

@@ -3,7 +3,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Icon from '../pb_icon/_icon'
 
@@ -26,7 +26,7 @@ type IconCircleProps = {
     | "orange"
     | "green"
     | "lighter",
-}
+} & GlobalProps
 
 const IconCircle = (props: IconCircleProps) => {
   const {

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss

@@ -3,51 +3,45 @@
 @import "../tokens/spacing";
 @import "../pb_icon_circle/icon_circle";
 
-[class^=pb_icon_stat_value_kit]{
+.pb_icon_stat_value_kit_horizontal,
+.pb_icon_stat_value_kit_vertical
+ {
   display: flex;
   align-items: baseline;
 
-  &[class*=_vertical]  {
+  &.pb_icon_stat_value_kit_vertical {
     flex-direction: column;
 
-    &[class*=_center]  {
+    &.text_align_center {
       align-items: center;
 
-      [class^=pb_title],
-      [class^=pb_body],
-      [class^=pb_caption] {
+      .pb_title_kit,
+      .pb_body_kit,
+      .pb_caption_kit_md {
         text-align: center;
       }
     }
 
-    &[class*=_right]  {
+    &.text_align_right {
       align-items: flex-end;
 
-      [class^=pb_title],
-      [class^=pb_body],
-      [class^=pb_caption] {
+      .pb_title_kit,
+      .pb_body_kit,
+      .pb_caption_kit_md {
         text-align: right;
       }
     }
-
-    [class^=pb_icon_circle] {
-      margin-bottom: $space-xs;
-    }
   }
 
-  &[class*=_horizontal]  {
+  &.pb_icon_stat_value_kit_horizontal {
     align-items: center;
 
-    &[class*=_center]  {
+    &.text_align_center {
       justify-content: center;
     }
 
-    &[class*=_right]  {
+    &.text_align_right {
       justify-content: flex-end;
     }
-
-    [class^=pb_icon_circle] {
-      margin-right: $space-sm;
-    }
   }
 }

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
-import { globalProps } from '../utilities/globalProps'
+import { globalProps, GlobalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -33,8 +33,7 @@ type IconStatValueProps = {
     | "yellow"
     | "orange"
     | "green"
-    | "lighter",
-}
+} & GlobalProps
 
 const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
   const {
@@ -50,13 +49,13 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
     text = '',
     unit = '',
     value = 0,
-    variant = 'lighter',
+    variant = 'default',
   } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
-    buildCss('pb_icon_stat_value_kit', orientation, size, variant), globalProps(props),
+    buildCss('pb_icon_stat_value_kit', orientation), globalProps(props),
     className
   )
   const titleSize = function(size: "sm" | "md" | "lg") {
@@ -101,6 +100,8 @@ const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
       <IconCircle
           dark={dark}
           icon={icon}
+          marginBottom={orientation == 'vertical' ? 'xs' : undefined}
+          marginRight={orientation == 'horizontal' ? 'sm' : undefined}
           size={size}
           variant={variant}
       />

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.html.erb

@@ -3,6 +3,8 @@
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,
         icon: object.icon,
+        margin_right: object.icon_margin_right,
+        margin_bottom: object.icon_margin_bottom,
         size: object.size,
         variant: object.variant }) %>
 

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb

@@ -9,8 +9,8 @@ module Playbook
                   values: %w[sm md lg],
                   default: "sm"
       prop :variant, type: Playbook::Props::Enum,
-                     values: %w[default royal blue purple teal red yellow green orange lighter],
-                     default: "lighter"
+                     values: %w[default royal blue purple teal red yellow green orange],
+                     default: "default"
 
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
@@ -25,7 +25,7 @@ module Playbook
       prop :value
 
       def classname
-        generate_classname("pb_icon_stat_value_kit", orientation, size, variant)
+        generate_classname("pb_icon_stat_value_kit", orientation)
       end
 
       def value_string
@@ -41,6 +41,14 @@ module Playbook
           3
         end
       end
+
+      def icon_margin_right
+        orientation === "horizontal" && "sm"
+      end
+
+      def icon_margin_bottom
+        orientation === "vertical" && "xs"
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js

@@ -18,7 +18,7 @@ describe("IconStatValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal_sm_lighter")
+        expect(kit).toHaveClass("pb_icon_stat_value_kit_horizontal")
     })
 
     test("renders icon", () => {
@@ -99,9 +99,10 @@ describe("IconStatValue Kit", () => {
                     value={64.18}
           />
             )
-    
+            const size = sizeProp === "sm" ? "3" : sizeProp === "md" ? "2" : "1"
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_${sizeProp}_lighter`)
+            const title = kit.querySelector(".pb_title_kit")
+            expect(title).toHaveClass(`pb_title_${size}`)
 
             cleanup()
         })
@@ -115,8 +116,7 @@ describe("IconStatValue Kit", () => {
         "teal",
         "red",
         "yellow",
-        "green",
-        "lighter"].forEach(
+        "green"].forEach(
             (colorProp) => {
             render(
                 <IconStatValue
@@ -128,9 +128,10 @@ describe("IconStatValue Kit", () => {
                     variant={colorProp}
           />
             )
-    
+
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass(`pb_icon_stat_value_kit_horizontal_sm_${colorProp}`)
+            const iconCircle = kit.querySelector(`.pb_icon_circle_kit_size_sm_${colorProp}`)
+            expect(iconCircle).toBeInTheDocument()
 
             cleanup()
         }) 
@@ -149,7 +150,7 @@ describe("IconStatValue Kit", () => {
             )
     
             const kit = screen.getByTestId(testId)
-            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical_sm_lighter")
+            expect(kit).toHaveClass("pb_icon_stat_value_kit_vertical")
     })
 
 })

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss

@@ -89,7 +89,18 @@ $positions: (
   }
 }
 
-[class^=pb_multiple_users_stacked_kit] {
+.pb_multiple_users_stacked_kit,
+.pb_multiple_users_stacked_kit_single,
+.pb_multiple_users_stacked_kit_bubble,
+.pb_multiple_users_stacked_kit_single_bubble,
+.pb_multiple_users_stacked_kit_bubble_size_sm,
+.pb_multiple_users_stacked_kit_bubble_size_md,
+.pb_multiple_users_stacked_kit_bubble_size_lg,
+.pb_multiple_users_stacked_kit_bubble_size_xl,
+.pb_multiple_users_stacked_kit_single_bubble_size_sm,
+.pb_multiple_users_stacked_kit_single_bubble_size_md,
+.pb_multiple_users_stacked_kit_single_bubble_size_lg,
+.pb_multiple_users_stacked_kit_single_bubble_size_xl {
   $container_size: map-get($avatar-sizes, "xs");
   $bubble_container_size: map-get($avatar-sizes, "sm");
   $overlap: -15px;
@@ -103,7 +114,8 @@ $positions: (
   position: relative;
   flex-shrink: 0;
   flex-grow: 0;
-  [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
+  .pb_avatar_kit_size_xs.pb_multiple_users_stacked_item,
+  .pb_avatar_kit_size_md.pb_multiple_users_stacked_item {
     @include avatar-size($stacked_size);
     &.dark {
       .avatar_wrapper {
@@ -117,10 +129,17 @@ $positions: (
       }
     }
   }
-  &[class*=_single] .pb_multiple_users_stacked_item {
+  &.pb_multiple_users_stacked_kit_single .pb_multiple_users_stacked_item,
+  &.pb_multiple_users_stacked_kit_single_bubble .pb_multiple_users_stacked_item,
+  &.pb_multiple_users_stacked_kit_single_bubble_size_sm .pb_multiple_users_stacked_item,
+  &.pb_multiple_users_stacked_kit_single_bubble_size_md .pb_multiple_users_stacked_item,
+  &.pb_multiple_users_stacked_kit_single_bubble_size_lg .pb_multiple_users_stacked_item,
+  &.pb_multiple_users_stacked_kit_single_bubble_size_xl .pb_multiple_users_stacked_item {
     @include avatar-size(28px);
   }
-  [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
+  .pb_avatar_kit_size_xs.second_item,
+  .pb_avatar_kit_size_md.second_item, 
+  .pb_badge_kit_primary_rounded.second_item {
     @include position((bottom: 0, right: 0));
     z-index: 2;
     background: tint($primary, 90%);
@@ -143,7 +162,8 @@ $positions: (
 
   // Iterate over each size to adjust the bubble container only when class contains "_bubble_"
   @each $size_name, $size_value in $avatar-sizes {
-      &[class*=_bubble_][class*=_size_#{$size_name}] {
+      &.pb_multiple_users_stacked_kit_bubble_size_#{$size_name},
+      &.pb_multiple_users_stacked_kit_single_bubble_size_#{$size_name} {
         // Set bubble container size based on the class
         $bubble_container_size: $size_value;
         $container_size: $size_value;
@@ -161,7 +181,8 @@ $positions: (
           background-color: $card_dark;
         }
   
-        [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
+        .pb_avatar_kit_size_xs.pb_multiple_users_stacked_item,
+        .pb_avatar_kit_size_md.pb_multiple_users_stacked_item {
           @include avatar-size($bubble_container_size * 0.45); // Adjust the size of stacked avatars
   
           &.dark {
@@ -175,7 +196,8 @@ $positions: (
           }
         }
   
-        [class^=pb_avatar_kit] {
+        .pb_avatar_kit_size_xs,
+        .pb_avatar_kit_size_md {
           // First Item
           &.first_item {
             @include position(map-get(map-get($positions, 'first-item-double'), $size_name));
@@ -235,8 +257,13 @@ $positions: (
           }
         }
         
-        &[class*=_single_bubble] {
-          [class^=pb_avatar_kit].first_item {
+        &.pb_multiple_users_stacked_kit_single_bubble,
+        &.pb_multiple_users_stacked_kit_single_bubble_size_sm,
+        &.pb_multiple_users_stacked_kit_single_bubble_size_md,
+        &.pb_multiple_users_stacked_kit_single_bubble_size_lg,
+        &.pb_multiple_users_stacked_kit_single_bubble_size_xl {
+          .pb_avatar_kit_size_xs.first_item,
+          .pb_avatar_kit_size_md.first_item {
             @include position((top: 0, left: 0));
             @include avatar-size($bubble_container_size);
           }