playbook_ui 15.6.0.pre.alpha.play265012993 → 15.6.0.pre.rc.0

data/lib/playbook/forms/builder/collection_select_field.rb

@@ -4,18 +4,10 @@ module Playbook
   module Forms
     class Builder
       def collection_select(name, collection, value_method, text_method, options = {}, html_options = {}, props: {})
-        props[:input_options] ||= {}
-        props[:input_options][:id] ||= "#{@object_name}_#{name}"
-
-        props[:label] = @template.label(@object_name, name, for: props[:input_options][:id]) if props[:label] == true
-
+        props[:label] = @template.label(@object_name, name) if props[:label] == true
         options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
         options[:prompt] = props[:blank_selection] || ""
         html_options[:required] = "required" if props[:required]
-        html_options[:id] = props[:input_options][:id]
-        html_options[:class] = props[:input_options][:class] if props[:input_options][:class]
-        html_options[:data] = (html_options[:data] || {}).merge(props[:input_options][:data] || {})
-
         input = super(name, collection, value_method, text_method, options, html_options)
 
         @template.pb_rails("select", props: props) do

data/lib/playbook/forms/builder/select_field.rb

@@ -4,18 +4,10 @@ module Playbook
   module Forms
     class Builder
       def select(name, choices = nil, options = {}, html_options = {}, props: {}, &block)
-        props[:input_options] ||= {}
-        props[:input_options][:id] ||= "#{@object_name}_#{name}"
-
-        props[:label] = @template.label(@object_name, name, for: props[:input_options][:id]) if props[:label] == true
-
+        props[:label] = @template.label(@object_name, name) if props[:label] == true
         options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
         options[:prompt] = props[:blank_selection] || ""
         html_options[:required] = "required" if props[:required]
-        html_options[:id] = props[:input_options][:id]
-        html_options[:class] = props[:input_options][:class] if props[:input_options][:class]
-        html_options[:data] = (html_options[:data] || {}).merge(props[:input_options][:data] || {})
-
         input = super(name, choices, options, html_options, &block)
 
         @template.pb_rails("select", props: props) do

data/lib/playbook/forms/builder/time_zone_select_field.rb

@@ -4,18 +4,10 @@ module Playbook
   module Forms
     class Builder
       def time_zone_select_field(name, choices = {}, options = {}, html_options = {}, props: {})
-        props[:input_options] ||= {}
-        props[:input_options][:id] ||= "#{@object_name}_#{name}"
-
-        props[:label] = @template.label(@object_name, name, for: props[:input_options][:id]) if props[:label] == true
-
+        props[:label] = @template.label(@object_name, name) if props[:label] == true
         options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
         options[:prompt] = props[:blank_selection] || ""
         html_options[:required] = "required" if props[:required]
-        html_options[:id] = props[:input_options][:id]
-        html_options[:class] = props[:input_options][:class] if props[:input_options][:class]
-        html_options[:data] = (html_options[:data] || {}).merge(props[:input_options][:data] || {})
-
         input = @template.time_zone_select(@object_name, name, choices, options, html_options)
 
         @template.pb_rails("select", props: props) do

data/lib/playbook/pb_kit_helper.rb

@@ -13,40 +13,5 @@ module Playbook
         render kit.new(props, &block), &block
       end
     end
-
-    def deprecated_kit_warning(kit_name, message = nil)
-      # Skip in test and production environments
-      return "".html_safe if Rails.env.test? || Rails.env.production?
-
-      # Build the warning message
-      base_message = "PLAYBOOK DEPRECATION WARNING\\n  ----------------------------\\n  The \\\"#{kit_name}\\\" kit is deprecated and will be removed in a future version."
-
-      full_message = if message
-                       "#{base_message} #{message}"
-                     else
-                       "#{base_message} Please migrate to the recommended alternative"
-                     end
-
-      # Escape the message for JavaScript
-      escaped_message = full_message.gsub("'", "\\\\'").gsub("\n", "\\n")
-
-      # Return a self-executing script that checks if we're already warned
-      # Uses client-side tracking to ensure one warning per page load
-      # Only shows warnings on localhost (matching React behavior)
-      script = "<script type=\"text/javascript\">\n"
-      script += "(function() {\n"
-      script += "  var hostname = window.location.hostname;\n"
-      script += "  var isLocalDev = hostname === 'localhost' || hostname === '127.0.0.1' || hostname.endsWith('.local') || hostname.includes('local.') || !hostname;\n"
-      script += "  if (!isLocalDev) return;\n"
-      script += "  if (!window.__PB_WARNED_KITS__) window.__PB_WARNED_KITS__ = new Set();\n"
-      script += "  if (!window.__PB_WARNED_KITS__.has('#{kit_name}')) {\n"
-      script += "    window.__PB_WARNED_KITS__.add('#{kit_name}');\n"
-      script += "    console.warn('#{escaped_message}');\n"
-      script += "  }\n"
-      script += "})();\n"
-      script += "</script>"
-
-      script.html_safe
-    end
   end
 end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "15.6.0"
-  VERSION = "15.6.0.pre.alpha.play265012993"
+  PREVIOUS_VERSION = "15.5.0"
+  VERSION = "15.6.0.pre.rc.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 15.6.0.pre.alpha.play265012993
+  version: 15.6.0.pre.rc.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-12-10 00:00:00.000000000 Z
+date: 2025-11-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -487,7 +487,6 @@ files:
 - app/pb_kits/playbook/pb_background/docs/_background_image.md
 - app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_light.jsx
-- app/pb_kits/playbook/pb_background/docs/_background_light.md
 - app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_overlay.md
 - app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
@@ -1331,8 +1330,6 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.html.erb
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_react.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards.html.erb
@@ -2250,8 +2247,6 @@ files:
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
 - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md
-- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx
-- app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md
 - app/pb_kits/playbook/pb_multiple_users/docs/example.yml
 - app/pb_kits/playbook/pb_multiple_users/docs/index.js
 - app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb
@@ -2935,9 +2930,6 @@ files:
 - app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx
-- app/pb_kits/playbook/pb_select/docs/_select_input_options.html.erb
-- app/pb_kits/playbook/pb_select/docs/_select_input_options.jsx
-- app/pb_kits/playbook/pb_select/docs/_select_input_options.md
 - app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb
 - app/pb_kits/playbook/pb_select/docs/_select_multiple.jsx
 - app/pb_kits/playbook/pb_select/docs/_select_multiple.md
@@ -3658,9 +3650,6 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_inline.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb
@@ -3825,7 +3814,6 @@ files:
 - app/pb_kits/playbook/utilities/_truncate.scss
 - app/pb_kits/playbook/utilities/_vertical_align.scss
 - app/pb_kits/playbook/utilities/_width.scss
-- app/pb_kits/playbook/utilities/deprecated.ts
 - app/pb_kits/playbook/utilities/flexbox_global_props/_align_content.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_align_items.scss
 - app/pb_kits/playbook/utilities/flexbox_global_props/_align_self.scss
@@ -3865,9 +3853,9 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-DMyvWpig.js
+- dist/chunks/_typeahead-kRdz5zPn.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-DDDLiZuu.js
+- dist/chunks/lib-CgpqUb6l.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-rails-react-bindings.js

data/app/pb_kits/playbook/pb_background/docs/_background_light.md

@@ -1 +0,0 @@
-By default, the Background kit sets background color to 'light' as seen here. 

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.jsx

@@ -1,180 +0,0 @@
-import React, { useState } from "react";
-
-import Flex from '../../pb_flex/_flex'
-import Draggable from '../../pb_draggable/_draggable'
-import { DraggableProvider } from '../../pb_draggable/context'
-import Badge from '../../pb_badge/_badge'
-import Title from '../../pb_title/_title'
-import Caption from '../../pb_caption/_caption'
-import Card from '../../pb_card/_card'
-import FlexItem from '../../pb_flex/_flex_item'
-import Avatar from '../../pb_avatar/_avatar'
-import Body from '../../pb_body/_body'
-
-// Initial groups to drag between
-const containers = ["To Do", "In Progress", "Done"];
-
-// Initial items to be dragged
-const data = [
-  {
-    id: "11",
-    container: "To Do",
-    title: "Task 1",
-    description: "Bug fixes",
-    assignee_name: "Terry Miles",
-    assignee_img: "https://randomuser.me/api/portraits/men/44.jpg",
-  },
-  {
-    id: "12",
-    container: "To Do",
-    title: "Task 2",
-    description: "Documentation",
-    assignee_name: "Sophia Miles",
-    assignee_img: "https://randomuser.me/api/portraits/women/8.jpg",
-  },
-  {
-    id: "13",
-    container: "In Progress",
-    title: "Task 3",
-    description: "Add a variant",
-    assignee_name: "Alice Jones",
-    assignee_img: "https://randomuser.me/api/portraits/women/10.jpg",
-  },
-  {
-    id: "14",
-    container: "To Do",
-    title: "Task 4",
-    description: "Add jest tests",
-    assignee_name: "Mike James",
-    assignee_img: "https://randomuser.me/api/portraits/men/8.jpg",
-  },
-  {
-    id: "15",
-    container: "Done",
-    title: "Task 5",
-    description: "Alpha testing",
-    assignee_name: "James Guy",
-    assignee_img: "https://randomuser.me/api/portraits/men/18.jpg",
-  },
-  {
-    id: "16",
-    container: "In Progress",
-    title: "Task 6",
-    description: "Release",
-    assignee_name: "Sally Jones",
-    assignee_img: "https://randomuser.me/api/portraits/women/28.jpg",
-  },
-];
-
-const DraggableMultipleContainersDropzone = (props) => {
-  const [initialState, setInitialState] = useState(data);
-
-  const badgeProperties = (container) => {
-    switch (container) {
-      case "To Do":
-        return { text: "queue", color: "warning" };
-      case "In Progress":
-        return { text: "progress", color: "primary" };
-      default:
-        return { text: "done", color: "success" };
-    }
-  };
-
-  return (
-    <DraggableProvider 
-        dropZone={{type: "outline"}}
-        enableCrossContainerPreview
-        initialItems={data}
-        onDragEnd={(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow) => {
-          console.log(`Dragged Item ID: ${draggedItemId}`);
-          console.log(`Final Container: ${finalContainer}`);
-          console.log(`Original Container: ${originalContainer}`);
-          console.log('Item Above:', itemAbove);
-          console.log('Item Below:', itemBelow);
-        }}
-        onDrop={(draggedItemId, droppedContainer, originalContainer, item, itemAbove, itemBelow) => {
-          console.log(`Dragged Item ID: ${draggedItemId}`);
-          console.log(`Dropped Container: ${droppedContainer}`);
-          console.log(`Original Container: ${originalContainer}`);
-          console.log('Dropped Item:', item);
-          console.log('Item Above:', itemAbove);
-          console.log('Item Below:', itemBelow);
-        }}
-        onReorder={(items) => setInitialState(items)}
-    >
-      <Flex
-          justifyContent="center"
-          {...props}
-      >
-          {containers?.map((container) => (
-            <Draggable.Container 
-                container={container}
-                htmlOptions={{style:{ width: "200px", height: "70vh"}}}
-                key={container} 
-                padding="sm"
-            >
-                <Caption textAlign="center">{container}</Caption>
-                <Flex 
-                    alignItems="stretch"
-                    gap="sm"
-                    orientation="column" 
-                >
-                  {initialState
-                    .filter((item) => item.container === container)
-                    .map(
-                      ({
-                        assignee_img,
-                        assignee_name,
-                        description,
-                        id,
-                        title,
-                      }) => (
-                        <Draggable.Item 
-                            container={container}
-                            dragId={id} 
-                            key={id}
-                        >
-                          <Card
-                              padding="sm"
-                              {...props}
-                          >
-                            <Flex justify="between">
-                              <FlexItem>
-                                <Flex>
-                                  <Avatar
-                                      imageUrl={assignee_img}
-                                      name={assignee_name}
-                                      size="xxs"
-                                  />
-                                  <Title paddingLeft="xs" 
-                                      size={4}
-                                      text={title}
-                                      {...props}
-                                  />
-                                </Flex>
-                              </FlexItem>
-                              <Badge
-                                  marginLeft="sm"
-                                  rounded
-                                  text={badgeProperties(container).text}
-                                  variant={badgeProperties(container).color}
-                                  {...props}
-                              />
-                            </Flex>
-                            <Body paddingTop="xs"
-                                text={description} 
-                                {...props}
-                            />
-                          </Card>
-                        </Draggable.Item>
-                      )
-                    )}
-                </Flex>
-            </Draggable.Container>
-          ))}
-      </Flex>
-    </DraggableProvider>
-  );
-};
-
-export default DraggableMultipleContainersDropzone;

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md

@@ -1,22 +0,0 @@
-The multiple container functionality also supports customized dropzone styling as shown here. 
-
-In addition to this, the `enableCrossContainerPreview` prop can be used on the `DraggableProvider` as shown here to enable dropzone preview for cross-container dragging. 
-
-With `enableCrossContainerPreview`, the `onDrop` and `onDragEnd` event listeners will also provide several arguments to allow developers more context from the drag event.
-
-The `onDrop` callback is triggered when an item is successfully dropped into a container. It provides the following arguments:
-
-- `draggedItemId` - The ID of the item that was dragged
-- `droppedContainer` - The container where the item was dropped
-- `originalContainer` - The container where the drag started
-- `item` - The complete item object with all properties (including the updated container)
-- `itemAbove` - The item directly above the dropped item in the final position (null if at the top)
-- `itemBelow` - The item directly below the dropped item in the final position (null if at the bottom)
-
-The `onDragEnd` callback is triggered when a drag operation ends, whether it was dropped or cancelled. It provides the following arguments:
-
-- `draggedItemId` - The ID of the item that was dragged
-- `finalContainer` - The container where the item ended up (could be same as original if drag was cancelled)
-- `originalContainer` - The container where the drag started
-- `itemAbove` - The item directly above the dragged item in the final position (null if at the top)
-- `itemBelow` - The item directly below the dragged item in the final position (null if at the bottom)

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import MultipleUsers from '../../pb_multiple_users/_multiple_users'
-
-const MultipleUsersWithTooltip = (props) => {
-    return (
-        <div>
-            <MultipleUsers
-                users={[
-                    {
-                        name: 'Patrick Welch',
-                        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
-                        tooltip: "Patrick Welch - Online"
-                    },
-                    {
-                        name: 'Lucille Sanchez',
-                        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
-                        tooltip: "Lucille Sanchez - Offline"
-                    },
-                    {
-                        name: 'Beverly Reyes',
-                        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
-                        tooltip: "Beverly Reyes - Online"
-                    },
-                    {
-                        name: 'Keith Craig',
-                        imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
-                        tooltip: "Keith Craig - Away"
-                    },
-                    {
-                        name: 'Alicia Cooper',
-                        imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
-                        tooltip: "Alicia Cooper - Busy"
-                    },
-                ]}
-                withTooltip
-                {...props}
-            />
-        </div>
-    )
-}
-``
-export default MultipleUsersWithTooltip

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md

@@ -1 +0,0 @@
-Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.html.erb

@@ -1,16 +0,0 @@
-<%= pb_rails("select", props: {
-  label: "Favorite Food",
-  name: "favorite_food",
-  options: [
-    { value: "pizza", value_text: "Pizza" },
-    { value: "tacos", value_text: "Tacos" },
-    { value: "sushi", value_text: "Sushi" }
-  ],
-  input_options: {
-    'aria-label': "Select your favorite food",
-    class: "custom-select-class",
-    data: { controller: "search", action: "change->search#filter" },
-    id: "favorite-food-select"
-  }
-}) %>
-

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.jsx

@@ -1,30 +0,0 @@
-import React from 'react'
-
-import Select from '../_select'
-
-const SelectInputOptions = (props) => {
-  const options = [
-    { value: 'pizza', text: 'Pizza' },
-    { value: 'tacos', text: 'Tacos' },
-    { value: 'sushi', text: 'Sushi' },
-  ]
-
-  return (
-    <>
-      <Select
-          inputOptions={{
-            'aria-label': 'Select your favorite food',
-            className: 'custom-select-class',
-            id: 'favorite-food-select',
-          }}
-          label="Favorite Food"
-          name="favorite_food"
-          options={options}
-          {...props}
-      />
-    </>
-  )
-}
-
-export default SelectInputOptions
-

data/app/pb_kits/playbook/pb_select/docs/_select_input_options.md

@@ -1 +0,0 @@
-Use the `input_options` / `inputOptions` prop to pass additional attributes directly to the underlying `<select>` element instead of the outer wrapper. This is useful for applying data attributes, custom IDs, or other HTML attributes that need to be on the select element itself.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.html.erb

@@ -1,30 +0,0 @@
-<% 
-options = [
-  { label: 'Orange', value: '#FFA500' },
-  { label: 'Red', value: '#FF0000' },
-  { label: 'Green', value: '#00FF00' },
-  { label: 'Blue', value: '#0000FF' },
-  { label: 'Yellow', value: '#FFFF00' },
-  { label: 'Purple', value: '#800080' },
-  { label: 'Cyan', value: '#00FFFF' },
-  { label: 'Magenta', value: '#FF00FF' }
-] 
-%>
-
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-input-display-none",
-    label: "With Input Display None",
-    options: options,
-    name: :foo,
-    input_display: "none",
-    })
-%>
-<br/>
-<%= pb_rails("typeahead", props: {
-    id: "typeahead-input-display-pills",
-    label: "With Input Display Pills (Default)",
-    options: options,
-    name: :foo,
-    pills: true,
-    })
-%>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.jsx

@@ -1,37 +0,0 @@
-import React from 'react'
-
-import Typeahead from '../_typeahead'
-
-const options = [
-  { label: 'Orange', value: '#FFA500' },
-  { label: 'Red', value: '#FF0000' },
-  { label: 'Green', value: '#00FF00' },
-  { label: 'Blue', value: '#0000FF' },
-  { label: 'Yellow', value: '#FFFF00' },
-  { label: 'Purple', value: '#800080' },
-  { label: 'Cyan', value: '#00FFFF' },
-  { label: 'Magenta', value: '#FF00FF' }
-]
-
-const TypeaheadInputDisplay = (props) => {
-  return (
-    <>
-      <Typeahead
-          inputDisplay="none"
-          isMulti
-          label="With Input Display None"
-          options={options}
-          {...props}
-      />
-      <br/>
-      <Typeahead
-          isMulti
-          label="With Input Display Pills (Default)"
-          options={options}
-          {...props}
-      />
-    </>
-  )
-}
-
-export default TypeaheadInputDisplay

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_input_display.md

@@ -1,3 +0,0 @@
-Use the `inputDisplay`/`input_display` prop to optionally display only the count in the display as opposed to multiple pills. This prop is set to 'pills' by default. 
-
-**NOTE**: `inputDisplay`/`input_display` should only be used with typeaheads that allow multi selection.

data/app/pb_kits/playbook/utilities/deprecated.ts

@@ -1,73 +0,0 @@
-/**
- * Tracks which deprecated kits have already logged warnings in this session
- * to ensure we only log once per page load per kit
- */
-const warnedKits = new Set<string>();
-
-/**
- * Logs a deprecation warning for a Playbook kit
- * - Only logs once per kit per page load (prevents spam on re-renders)
- * - Only logs in development mode (not in production or test environments)
- * 
- * @param kitName - The name of the deprecated kit (e.g., 'BarGraph', 'RichTextEditor')
- * @param message - Optional custom deprecation message. If not provided, uses a default message.
- * 
- * @example
- * // In your kit component:
- * useEffect(() => {
- *   deprecatedKitWarning('BarGraph');
- * }, []);
- */
-export const deprecatedKitWarning = (
-  kitName: string,
-  message?: string
-): void => {
-  // Skip in test environments (Jest sets NODE_ENV to 'test')
-  if (typeof process !== 'undefined' && process.env?.NODE_ENV === 'test') {
-    return;
-  }
-
-  // In browser environments, check if we're on localhost/dev
-  if (typeof window !== 'undefined') {
-    const hostname = window.location?.hostname;
-    const isLocalDev = hostname === 'localhost' || 
-                       hostname === '127.0.0.1' ||
-                       hostname?.endsWith('.local') ||
-                       hostname?.includes('local.') ||
-                       !hostname; // file:// protocol
-    
-    // Only show warnings in local development
-    if (!isLocalDev) {
-      return;
-    }
-  }
-
-  // Only warn once per kit per page load
-  if (warnedKits.has(kitName)) {
-    return;
-  }
-
-  // Mark this kit as warned
-  warnedKits.add(kitName);
-
-  // Build the warning message
-  const baseMessage = `PLAYBOOK DEPRECATION WARNING
-  ----------------------------
-  The "${kitName}" kit is deprecated and will be removed in a future version.`;
-  
-  const fullMessage = message 
-    ? `${baseMessage} ${message}`
-    : `${baseMessage} Please migrate to the recommended alternative
- 
-  `;
-  
-  console.warn(fullMessage);
-};
-
-/**
- * Resets the warned kits tracker (useful for testing)
- * @internal
- */
-export const resetDeprecationWarnings = (): void => {
-  warnedKits.clear();
-};