playbook_ui 13.27.0 → 13.28.0

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_children_swift.md

@@ -0,0 +1,23 @@
+![Children-Toast](https://github.com/powerhome/playbook-swift/assets/54749071/55aebd12-43c4-4061-92d3-6aebb07ff349)
+
+```swift
+VStack(alignment: .leading) {
+  PBToast(
+    text: message,
+    variant: .success,
+    actionView: .custom(AnyView(Text("Undo").pbFont(.title4, color: .white))),
+    dismissAction: closeToast
+  )
+  PBToast(
+    variant: .custom(nil, .pbPrimary),
+    actionView: .custom(
+    AnyView(
+      HStack {
+        Text("Undo action").pbFont(.caption, color: .white)
+        PBButton(variant: .primary, title: "Undo").disabled(true)
+      }
+    )),
+    dismissAction: closeToast
+  )
+}
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close_swift.md

@@ -0,0 +1,7 @@
+```swift
+VStack(alignment: .leading) {
+  PBToast(text: "Error Message", variant: .error, actionView: .default, dismissAction: closeToast)
+  PBToast(text: "Items Successfully Moved", variant: .success, actionView: .default, dismissAction: closeToast)
+  PBToast(text: "Scan to Assign Selected Items", variant: .neutral, actionView: .default, dismissAction: closeToast)
+}
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default_swift.md

@@ -0,0 +1,9 @@
+![Default-Toast](https://github.com/powerhome/playbook-swift/assets/54749071/cc465b1b-85ba-4492-a832-b06b842a1555)
+
+```swift
+VStack(alignment: .leading) {
+  PBToast(text: "Error Message", variant: .error, dismissAction: closeToast)
+  PBToast(text: "Items Successfully Moved", variant: .success, dismissAction: closeToast)
+  PBToast(text: "Scan to Assign Selected Items", variant: .neutral, dismissAction: closeToast)
+}
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dismiss_with_timer_swift.md

@@ -0,0 +1,22 @@
+```swift
+HStack {
+  PBButton(variant: .secondary, title: "Top Center") {
+    position = .top
+    toastView = PBToast(
+    text: "Top Center",
+    variant: .neutral,
+    actionView: .withTimer(3),
+    dismissAction: closeToast
+    )
+  }
+  PBButton(variant: .secondary, title: "Bottom Center") {
+    position = .bottom
+    toastView = PBToast(
+    text: "Bottom Center",
+    variant: .neutral,
+    actionView: .withTimer(2),
+    dismissAction: closeToast
+    )
+  }
+}
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md

@@ -0,0 +1,9 @@
+![Multiline-Toast](https://github.com/powerhome/playbook-swift/assets/54749071/df7bb8da-89ee-477e-8001-7262e48ce03a)
+
+```swift
+PBToast(
+  text: message,
+  variant: .custom(.infoCircle, .pbPrimary),
+  dismissAction: closeToast
+)
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions_swift.md

@@ -0,0 +1,62 @@
+```swift
+GridRow {
+  PBButton(variant: .secondary, title: "Top Left") {
+    position = .topLeft
+    toastView = PBToast(
+    text: "Top Left",
+    variant: .neutral,
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+  PBButton(variant: .secondary, title: "Top Right") {
+    position = .topRight
+    toastView = PBToast(
+    text: "Top Right",
+    variant: .neutral,
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+}
+GridRow {
+  PBButton(variant: .secondary, title: "Top Center") {
+    position = .top
+    toastView = PBToast(
+    text: "Top Center",
+    variant: .neutral,
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+  PBButton(variant: .secondary, title: "Bottom Center") {
+    position = .bottom
+    toastView = PBToast(
+    text: "Bottom Center",
+    variant: .custom(.user, .status(.neutral)),
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+}
+GridRow {
+  PBButton(variant: .secondary, title: "Bottom Left") {
+    position = .bottomLeft
+    toastView = PBToast(
+    text: "Bottom Left",
+    variant: .custom(.user, .status(.neutral)),
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+  PBButton(variant: .secondary, title: "Bottom Right") {
+    position = .bottomRight
+    toastView = PBToast(
+    text: "Bottom Right",
+    variant: .custom(.user, .status(.neutral)),
+    actionView: .default,
+    dismissAction: closeToast
+    )
+  }
+}
+```

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_props_swift.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **text** | `String` |`Value for the toast message` | `nil` |   |
+| **variant** | `Variant` | `Determines the type pf toast message being displayed` | `.custom()` |  `error`, `success`, 
+`neutral`, `custom()` |
+| **actionView** | `dismissAction` | Dismisses the toast message | `.default` | `default` `custom()` `withTimer()` |
+| **dismissAction** | `(() -> Void)` | `Triggers the dismiss action` |  |  |

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

@@ -14,3 +14,12 @@ examples:
   - fixed_confirmation_toast_positions: Click to Show Positions
   - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
+
+  swift:
+  - fixed_confirmation_toast_default_swift: Default
+  - fixed_confirmation_toast_multi_line_swift: Multi Line
+  #- fixed_confirmation_toast_close_swift: Click to Close
+  #- fixed_confirmation_toast_positions_swift: Click to Show Positions
+  - fixed_confirmation_toast_children_swift: Children
+  #- fixed_confirmation_toast_dismiss_with_timer_swift: Timer
+  - fixed_confirmation_toast_props_swift: ""

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
 
     <% if content %>

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

@@ -16,7 +16,7 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.telephone_field :example_phone_field, props: { label: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>

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

@@ -15,7 +15,7 @@
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>
-  <%= form.telephone_field :example_phone_field, props: { label: true, required: true, validation: { pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}", message: "Please enter a valid phone number (example: 888-888-8888)." } } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

data/app/pb_kits/playbook/pb_form_group/_form_group.scss

@@ -33,6 +33,17 @@
         outline-offset: -1px;
       }
     }
+    .text_input_wrapper_add_on .add-on-right [class^=pb_card_kit] {
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
+    }
+    .text_input_wrapper_add_on .add-on-right.border_left_on .card-right-aligned {
+      border-left: 1px $border_light solid;
+      &.dark {
+        border-left: 1px rgba($white, 0.15) solid;
+      }
+    }
   }
 
   & > [class^=pb_text_input_kit]:not(:first-child) {
@@ -40,6 +51,10 @@
       border-bottom-left-radius: 0;
       border-top-left-radius: 0;
     }
+    .text_input_wrapper_add_on .add-on-left [class^=pb_card_kit] {
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+    }
   }
 
   & > [class^=pb_button_kit]:not(:last-child) {

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
 <% end %>

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

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
     <%= pb_rails("icon_circle", props: {
         dark: object.dark,

data/app/pb_kits/playbook/pb_icon_value/icon_value.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
-  data: object.data,
-  id: object.id,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
     <%= pb_rails("icon", props: { icon: object.icon, fixed_width: true }) %>
     <%= object.text %>

data/app/pb_kits/playbook/pb_label_pill/label_pill.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
       <%= pb_rails("caption", props: { text: object.label, classname: "pb_label_pill_label"}) %>
       <%= pb_rails("pill", props: { text: object.pill_value, variant: object.variant, classname: "pb_label_pill_pill" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_label_value/label_value.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     <% if object.variant == "details" %>
         <%= pb_rails("flex", props: {inline: true, vertical: "center"}) do %>

data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
   <%= pb_rails("body", props: { color: "light", dark: object.dark }) do %>
     <%= pb_rails("icon", props: { aria: { label: "loading icon" }, fixed_width: true, icon: "spinner", pulse: true }) %> <%= object.text %>

data/app/pb_kits/playbook/pb_message/message_mention.html.erb

@@ -1,8 +1,8 @@
 <%= content_tag(:div,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  aria: object.aria,
-  **combined_html_options) do %>
-    <%= content %>
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    aria: object.aria,
+    **combined_html_options) do %>
+        <%= content %>
 <% end %>

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_multiple_users/multiple_users.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% object.users.take(object.display_count).each do |user| %>
       <%= pb_rails("avatar", props: user.merge({size: object.size, classname: "pb_multiple_users_item", dark: object.dark}) ) %>
     <% end %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  class: object.classname,
-  data: object.data,
-  id: object.id,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("avatar", props: object.users[0].merge({size: "xs", classname: "pb_multiple_users_stacked_item", dark: object.dark}) ) %>
 
   <% unless object.only_one %>

data/app/pb_kits/playbook/pb_pagination/_pagination.scss

@@ -11,7 +11,7 @@ $top_bottom_radius: 0px;
   border-radius: $border_rad_light;
   border: $border_rad_lightest solid $border_light;
   background-color: $white;
-  padding: $space_xxs 0px;
+  padding: $space_xxs 0px !important;
   li {
     display: inline;
     > a, li > span {

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
      <%= will_paginate object.model, renderer: Playbook::Pagination::Rails %>
 <% end %>

data/app/pb_kits/playbook/pb_person/person.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
       <%= pb_rails("body", props: {
         tag: "span",
         classname: "pb_person_first" }) { object.first_name } %>

data/app/pb_kits/playbook/pb_person_contact/person_contact.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("person", props: {
       first_name: object.first_name,
       last_name: object.last_name,

data/app/pb_kits/playbook/pb_pill/pill.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("title", props: { text: object.display_text, tag: "div", size: 4, classname: "pb_pill_text" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_section_separator/section_separator.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.orientation === 'horizontal' %>
         <% if content %>
             <%= content %>

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

@@ -102,6 +102,9 @@
     pointer-events: none;
   }
   &.inline {
+    svg {
+      right: 6px;
+    }
     @mixin active_arrow_style {
       svg {
         color: $primary !important;
@@ -130,6 +133,7 @@
       box-shadow: none;
       border-color: transparent;
       padding: 4px 8px;
+      padding-right: $space_lg; 
       border-radius: 4px;
       option {
         background-color: $white;
@@ -213,6 +217,9 @@
     }
   }
   &.inline {
+    svg {
+      right: 6px;
+    }
     &:not(:hover) {
       svg {
         display: none;
@@ -233,6 +240,7 @@
       border-color: transparent;
       background: transparent;
       padding: 4px 8px;
+      padding-right: $space_lg; 
       border-radius: 4px;
       option {
         background-color: $white;

data/app/pb_kits/playbook/pb_source/source.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="pb__source_layout">
     <% if !object.hide_icon %>
       <% if object.show_icon? %>

data/app/pb_kits/playbook/pb_stat_change/stat_change.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
       <%= pb_rails("body", props: { status: object.status }) do %>
         <%= pb_rails("icon", props: { fixed_width: true, icon: object.returned_icon }) if object.returned_icon %>
         <%= "#{object.value}%" if object.value %>

data/app/pb_kits/playbook/pb_stat_value/stat_value.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <div class="pb_stat_value_wrapper">
     <%= pb_rails "title", props: {
       classname: "pb_stat_value_kit",

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

@@ -76,6 +76,25 @@
         .text_input {
           border-color: $error_dark;
         }
+        [class*=pb_body_kit_negative] {
+          color: $error_dark;
+        }
+      }
+      .text_input_wrapper_add_on {
+        .add-on {
+          &-right {
+            .add-on-card {
+              border: 1px solid $error_dark;
+              border-left: 0;
+            }
+          }
+          &-left {
+            .add-on-card {
+              border: 1px solid $error_dark;
+              border-right: 0;
+            }
+          }
+        }
       }
     }
   }

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
       <div class="pb_time_range_inline_wrapper">
         <% if object.icon == true %>
           <%= pb_rails(object.text_kit, props: { tag: "span", dark: object.dark, color: object.icon_color, text: pb_rails("icon", props: { icon: "clock", dark: object.dark, classname:"pb_time_range_inline_icon", fixed_width: true, size: object.size }) }) %>

data/app/pb_kits/playbook/pb_time_stacked/time_stacked.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
 
     <%= pb_rails("body", props: { color: "light", dark: object.dark, classname: "pb_time_stacked time-spacing" }) do %>
       <time>

data/app/pb_kits/playbook/pb_timeline/item.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
 
   <div class="pb_timeline_item_left_block">
     <% if object.date.present? %>

data/app/pb_kits/playbook/pb_timeline/timeline.html.erb

@@ -1,7 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_timestamp/timestamp.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-  aria: object.aria,
-  id: object.id,
-  data: object.data,
-  class: object.classname,
-  **combined_html_options) do %>
+<%= pb_content_tag do %>
 
   <% if object.unstyled %>
     <div><%= object.timestamp_text %></div>

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/pb_title_count/title_count.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("title", props: {
     dark: object.dark,
     size: object.title_size,

data/app/pb_kits/playbook/pb_title_detail/title_detail.html.erb

@@ -1,8 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
   <%= pb_rails("title", props: { text: object.title, size: 4 }) %>
   <%= pb_rails("body", props: { text: object.detail, color: "light" }) %>
 <% end %>

data/app/pb_kits/playbook/pb_weekday_stacked/weekday_stacked.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("caption", props: {dark: object.dark, text: object.day_of_week}) %>
     <%= pb_rails("title", props: {dark: object.dark, size: 4, tag: "span", text: object.formatted_month_and_day}) %>
 <% end %>

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

@@ -34,7 +34,11 @@
 }
 
 @mixin pb_title_dark {
-  color: $text_dk_default;
+    color: $text_dk_default;
+} 
+
+@mixin pb_title_dark_link {
+    color: $active_dark;
 }
 
 @mixin pb_title_bold {

data/dist/menu.yml

@@ -255,9 +255,9 @@ kits:
         description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
         status: "stable"
       - name: dropdown
-        platforms: *react_only
+        platforms: *web
         description: ""
-        status: "beta"
+        status: "stable"
       - name: "multi_level_select"
         platforms: *web
         description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.