playbook_ui_docs 16.1.0.pre.alpha.play2771passphraseaccessibility14033 → 16.1.0.pre.alpha.play264213817

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 915ce87438a0738bdd314b31e723ebb66da44ec024d2f52859666b2c64aea4ba
-  data.tar.gz: de815161c5478ed1dd8bd9451a93d479183a8759a004d43344b7345e7e6aa3c8
+  metadata.gz: 81f0fec559472c2061a223677f8339ece322075c26253a72c86969c619dcea76
+  data.tar.gz: d77a023ee1d62ce896faace3f86bbc6277caa40f4bf5019cebf840c1b7b3386e
 SHA512:
-  metadata.gz: 2bd9e94e79ae341b5218c098b91d17c5b7954544906377ff42f276d1c9b462e6f4e0872e9eae23b26923a4170333fe2acf511d10f02de20b8016f1cc3198278d
-  data.tar.gz: f0a236c89bd8893292aaafec6b8949d96912aeaf91b3087f5867c8a02c521483d0e3e6851dbd5771ec31b211ef850a98e47c389ba4479045dda217eb2ccec845
+  metadata.gz: 21c66ff7dc3bc5911c71e3dd81dd338a30390325a4641bbc9037920d83207eaf651c148a2e2b9396204ac420be2ad0744a8ad7ba43cc82fce8787cdcf21ad3c4
+  data.tar.gz: b23d4e6399598b3c983b5eeb957e2f01e234ee93ec4c01740aec610baaaf3921c5068e42026b3ec9f54bb6091f429687182b0356a965083f9b56c651b76a3bab

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

@@ -1,4 +1,36 @@
-<%= pb_rails("card", props: {
-})  do %>
-  Card content
+<%= pb_rails("flex", props: {
+  gap: "md",
+  orientation: "column"
+}) do %>
+
+  <%= pb_rails("caption", props: { text: "flex direction responsive: row on md + xl, column as default" }) %>
+  <%= pb_rails("card", props: {
+    flex_direction: { default: "column", md: "row", xl:"row" }
+  })  do %>
+      <%= pb_rails("body", props: { text: "Item 1", color: "default" }) %>
+    <%= pb_rails("body", props: { text: "Item 2", color: "default" }) %>
+    <%= pb_rails("body", props: { text: "Item 3", color: "default" }) %>
+  <% end %>
+
+  <%= pb_rails("caption", props: { text: "align items responsive: start on default, center on md, end on lg" }) %>
+  <%= pb_rails("card", props: {
+    display: "flex",
+    flex_direction: "row",
+    align_items: { default: "start", md: "center", lg: "end" },
+  })  do %>
+    <%= pb_rails("card", props: {height:"xs" }) do %> Card 1 <% end %>
+    <%= pb_rails("card", props: { height:"sm" }) do %> Card 2 <% end %>
+    <%= pb_rails("card", props: { height:"xs" }) do %> Card 3 <% end %>
+  <% end %>
+
+<%= pb_rails("caption", props: { text: "Text Align responsive: left on default, center on md, right on lg" }) %>
+  <%= pb_rails("card", props: {
+    text_align: { default: "left", md: "center", lg: "right" },
+    width: "100%"
+  })  do %>
+    <%= pb_rails("body", props: { }) do %> text 1 <% end %>
+    <%= pb_rails("body", props: { }) do %> text 2 <% end %>
+    <%= pb_rails("body", props: { }) do %> text 3 <% end %>
+  <% end %>
 <% end %>
+

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

@@ -21,10 +21,7 @@ examples:
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
-  - dropdown_with_placeholder: Placeholder
   - dropdown_separators_hidden: Separators Hidden
-  - dropdown_with_clearable: Clearable
-  - dropdown_with_constrain_height_rails: Constrain Height
   - dropdown_quickpick_rails: Quick Pick Variant
   - dropdown_quickpick_range_end_rails: Quick Pick Variant (Range Ends Today)
   - dropdown_quickpick_default_dates: Quick Pick Variant (Default Dates)
@@ -55,10 +52,7 @@ examples:
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
   - dropdown_blank_selection: Blank Selection
-  - dropdown_with_placeholder: Placeholder
   - dropdown_clear_selection: Clear Selection
-  - dropdown_with_clearable: Clearable
-  - dropdown_with_constrain_height: Constrain Height
   - dropdown_separators_hidden: Separators Hidden
   - dropdown_with_external_control: useDropdown Hook
   - dropdown_quickpick: Quick Pick Variant

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

@@ -11,7 +11,6 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
 export { default as DropdownError } from './_dropdown_error.jsx'
 export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
 export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
-export { default as DropdownWithPlaceholder } from './_dropdown_with_placeholder.jsx'
 export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
 export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
 export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
@@ -28,6 +27,4 @@ export { default as DropdownQuickpick } from './_dropdown_quickpick.jsx'
 export { default as DropdownQuickpickRangeEnd } from './_dropdown_quickpick_range_end.jsx'
 export { default as DropdownQuickpickDefaultDates } from './_dropdown_quickpick_default_dates.jsx'
 export { default as DropdownQuickpickWithDatePickers } from './_dropdown_quickpick_with_date_pickers.jsx'
-export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'
-export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx'
-export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
+export { default as DropdownQuickpickCustom } from './_dropdown_quickpick_custom.jsx'

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -1,7 +1,7 @@
 <%=
   pb_rails("filter", props: {
     min_width: "360px",
-    id: "filter-demo-1",
+    id: "1",
     margin_bottom: "xl",
     filters: [
       { name: "name", value: "John Wick" },
@@ -44,7 +44,7 @@
 <%=
   pb_rails("filter", props: {
     min_width: "360px",
-    id: "filter-demo-2",
+    id: "def2",
     sort_menu: [
       { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
       { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import Button from '../../pb_button/_button'
 import Filter from '../../pb_filter/_filter'
@@ -6,18 +6,11 @@ import Flex from '../../pb_flex/_flex'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
 
-const FilterDefault = (props) => {
-  const [sortValue, setSortValue] = useState([{ name: 'popularity', dir: 'desc' }])
-  const [sortValue2, setSortValue2] = useState([{ name: 'popularity', dir: 'desc' }])
-
-  const handleSortChange = (sortOptions) => {
-    setSortValue(sortOptions)
-    alert(JSON.stringify(sortOptions[0]))
-  }
+const SortingChangeCallback = (sortOptions) => {
+  alert(JSON.stringify(sortOptions[0]))
+}
 
-  const handleSortChange2 = (sortOptions) => {
-    setSortValue2(sortOptions)
-  }
+const FilterDefault = (props) => {
   const options = [
     { value: 'USA' },
     { value: 'Canada' },
@@ -36,7 +29,7 @@ const FilterDefault = (props) => {
           }}
           marginBottom="xl"
           minWidth="375px"
-          onSortChange={handleSortChange}
+          onSortChange={SortingChangeCallback}
           results={1}
           sortOptions={{
             popularity: 'Popularity',
@@ -45,7 +38,7 @@ const FilterDefault = (props) => {
             // eslint-disable-next-line
             manager_name: 'Manager\'s Name',
           }}
-          sortValue={sortValue}
+          sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
       >
       {({ closePopover }) => (
@@ -89,7 +82,7 @@ const FilterDefault = (props) => {
       <Filter
           double
           minWidth="375px"
-          onSortChange={handleSortChange2}
+          onSortChange={SortingChangeCallback}
           results={0}
           sortOptions={{
             popularity: 'Popularity',
@@ -98,7 +91,7 @@ const FilterDefault = (props) => {
             // eslint-disable-next-line
             manager_name: 'Manager\'s Name',
           }}
-          sortValue={sortValue2}
+          sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
       >
       {({ closePopover }) => (

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

@@ -8,8 +8,6 @@
   <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -15,7 +15,7 @@
     options: names,
     label: "Truncation Within Typeahead",
     pills: true,
-    truncate: "1",
+    truncate: 1,
 }) %>
 
 <%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
@@ -24,19 +24,19 @@
       name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
       avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
       tabindex: 0,
-      truncate: "1",
+      truncate: 1,
       id: "truncation-1"
   }) %>
   <%= pb_rails("form_pill", props: {
       icon: "badge-check",
       text: "icon and a very long tag to show truncation",
       tabindex: 0,
-      truncate: "1",
+      truncate: 1,
       id: "truncation-2"
   }) %>
   <%= pb_rails("form_pill", props: {
       text: "form pill long tag no tooltip show truncation",
       tabindex: 0,
-      truncate: "1",
+      truncate: 1,
   }) %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -21,7 +21,7 @@ const FormPillTruncatedText = (props) => {
           isMulti
           label="Truncation Within Typeahead"
           options={names}
-          truncate={"1"}
+          truncate={1}
           {...props}
       />
       <Caption text="Form Pill Truncation"/>
@@ -31,20 +31,20 @@ const FormPillTruncatedText = (props) => {
             name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
             onClick={() => alert('Click!')}
             tabIndex={0}
-            truncate={"1"}
+            truncate={1}
         />
         <FormPill
             icon="badge-check"
             onClick={() => {alert('Click!')}}
             tabIndex={0}
             text="icon and a very long tag to show truncation"
-            truncate={"1"}
+            truncate={1}
         />
         <FormPill
             onClick={() => {alert('Click!')}}
             tabIndex={0}
             text="form pill with a very long tag to show truncation"
-            truncate={"1"}
+            truncate={1}
         />
       </Card>
     </>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx

@@ -120,7 +120,6 @@ const PassphraseMeterSettings = (props) => {
             "These examples will all share the same input value. Type in any of the inputs to see how the strength meter changes in response to different settings."
           }
         </Body>
-        <br/>
         <Passphrase
             label={"Type your passphrase"}
             onChange={handleChange}

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

@@ -9,7 +9,6 @@ examples:
   - passphrase_strength_change: Strength Change
   - passphrase_common: Common Passphrases
   - passphrase_breached: Breached Passphrases
-  - passphrase_required_indicator: Required Indicator
 
   react:
   - passphrase_default: Default
@@ -20,4 +19,3 @@ examples:
   - passphrase_strength_change: Strength Change
   - passphrase_common: Common Passphrases
   - passphrase_breached: Breached Passphrases
-  - passphrase_required_indicator: Required Indicator

data/app/pb_kits/playbook/pb_passphrase/docs/index.js

@@ -6,4 +6,3 @@ export { default as PassphraseTips } from './_passphrase_tips'
 export { default as PassphraseStrengthChange } from './_passphrase_strength_change'
 export { default as PassphraseCommon } from './_passphrase_common'
 export { default as PassphraseBreached } from './_passphrase_breached'
-export { default as PassphraseRequiredIndicator } from './_passphrase_required_indicator.jsx'

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

@@ -12,7 +12,6 @@ examples:
   - phone_number_input_format: Format as You Type
   - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_country_search: Country Search
-  - phone_number_input_required_indicator: Required Indicator
 
   rails:
   - phone_number_input_default: Default
@@ -25,4 +24,3 @@ examples:
   - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search
-  - phone_number_input_required_indicator: Required Indicator

data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js

@@ -9,4 +9,3 @@ export { default as PhoneNumberInputAccessInputElement } from './_phone_number_i
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
 export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
 export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'
-export { default as PhoneNumberInputRequiredIndicator } from './_phone_number_input_required_indicator.jsx'

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb

@@ -1,9 +1,9 @@
-<%= pb_rails("textarea", props: { label: "Label", rows: 4, id: "default-example-1" }) %>
+<%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
 
 <br/>
 
-<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text", id: "default-example-2" }) %>
+<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
 
 <br/>
 
-<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text", id: "default-example-3" }) %>
+<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx

@@ -13,7 +13,6 @@ const TextareaDefault = (props) => {
           label="Label"
           rows={4}
           {...props}
-          id="default-example-1"
       />
 
       <br />
@@ -22,7 +21,6 @@ const TextareaDefault = (props) => {
           label="Label"
           placeholder="Placeholder text"
           {...props}
-          id="default-example-2"
       />
 
       <br />
@@ -34,7 +32,6 @@ const TextareaDefault = (props) => {
           placeholder="Placeholder text"
           value={value}
           {...props}
-          id="default-example-3"
       />
 
     </div>

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import TimePicker from '../../pb_time_picker/_time_picker'
 import Body from '../../pb_body/_body'
-import Flex from '../../pb_flex/_flex'
 
 const TimePickerOnHandler = (props) => {
   const [selectedTime, setSelectedTime] = useState('')
@@ -18,9 +17,7 @@ const TimePickerOnHandler = (props) => {
   return (
     <div>
       {(selectedTime || closedTime) && (
-        <Flex marginBottom="sm" 
-            orientation="column"
-        >
+        <div style={{ marginBottom: '16px' }}>
           {selectedTime && (
             <Body
                 text={`onChange: ${selectedTime}`}
@@ -32,7 +29,7 @@ const TimePickerOnHandler = (props) => {
                 text={`onClose: ${closedTime}`}
             />
           )}
-        </Flex>
+        </div>
       )}
       <TimePicker
           id="time-picker-on-handler"

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

@@ -9,7 +9,6 @@ examples:
   - time_picker_min_max_time: Min & Max Time
   - time_picker_error: Error
   - time_picker_disabled: Disabled
-  - time_picker_required_indicator: Required Indicator
   - time_picker_input_options: Input Options
   
   
@@ -22,5 +21,4 @@ examples:
   - time_picker_min_max_time: Min & Max Time
   - time_picker_error: Error
   - time_picker_disabled: Disabled
-  - time_picker_required_indicator: Required Indicator
   - time_picker_on_handler: onChange & onClose Handlers

data/app/pb_kits/playbook/pb_time_picker/docs/index.js

@@ -7,4 +7,3 @@ export { default as TimePickerOnHandler } from './_time_picker_on_handler.jsx'
 export { default as TimePickerMinMaxTime } from './_time_picker_min_max_time.jsx'
 export { default as TimePickerError } from './_time_picker_error.jsx'
 export { default as TimePickerDisabled } from './_time_picker_disabled.jsx'
-export { default as TimePickerRequiredIndicator } from './_time_picker_required_indicator.jsx'

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

@@ -15,5 +15,5 @@
     options: names,
     label: "Truncation Within Typeahead",
     pills: true,
-    truncate: "1",
+    truncate: 1,
 }) %>

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

@@ -17,7 +17,7 @@ const TypeaheadTruncatedText = (props) => {
           isMulti
           label="Truncation Within Typeahead"
           options={names}
-          truncate={"1"}
+          truncate={1}
           {...props}
       />
     </>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.1.0.pre.alpha.play2771passphraseaccessibility14033
+  version: 16.1.0.pre.alpha.play264213817
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-01-30 00:00:00.000000000 Z
+date: 2026-01-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -576,7 +576,6 @@ files:
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
-- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
 - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
@@ -841,8 +840,6 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/index.js
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
@@ -904,13 +901,6 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
@@ -941,9 +931,6 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx
-- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb
@@ -1628,9 +1615,6 @@ files:
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx
-- app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.md
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md
@@ -1794,9 +1778,6 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md
@@ -2344,7 +2325,6 @@ files:
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
-- app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
 - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
@@ -2405,9 +2385,6 @@ files:
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.md
-- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb
-- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx
-- app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.html.erb
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.jsx
 - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.md

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md

@@ -1 +0,0 @@
-`pickerId`/`picker_id` is a **required prop** to instantiate the Date Picker. The presence of `pickerId`/`picker_id` in your Date Picker also associates the label with the input, providing the ability to focus the Date Picker by clicking the label.

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

@@ -1,3 +0,0 @@
-The `blank_selection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
-
-The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.

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

@@ -1,3 +0,0 @@
-The `blankSelection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
-
-The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.

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

@@ -1,52 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'unitedStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
-  ]
-%>
-
-<%= pb_rails("dropdown", props: {
-  id: "date-range-quickpick-reset-closeable",
-  label: "Quick Pick",
-  variant: "quickpick",
-  clearable: false
-}) %>
-
-<%= pb_rails("button", props: {
-  margin_y: "md",
-  text: "Reset",
-  html_options: {
-    onclick: "handleReset()"
-  }
-}) %>
-
-<%= pb_rails("dropdown", props: {
-  id: "closeable-default",
-  options: options,
-  clearable: false,
-  default_value: options.last,
-  margin_bottom: "md",
-  label: "Default"
-}) %>
-
-<%= pb_rails("dropdown", props: {
-  id: "closeable-subtle",
-  options: options,
-  clearable: false,
-  default_value: options.second,
-  variant: "subtle",
-  separators: false,
-  label: "Subtle"
-}) %>
-
-<script>
-  function handleReset() {
-    const dropdown = document.querySelector("#date-range-quickpick-reset-closeable[data-pb-dropdown]");
-    const instance = dropdown?._pbDropdownInstance;
-    
-    if (instance) {
-      instance.clearSelection();
-    }
-  }
-</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx

@@ -1,72 +0,0 @@
-import React, { useRef } from 'react'
-
-import Button from '../../pb_button/_button'
-import Dropdown from '../../pb_dropdown/_dropdown'
-
-const DropdownWithClearable = (props) => {
-    const dropdownRef = useRef(null)
-
-    const options = [
-        {
-            label: "United States",
-            value: "unitedStates",
-            id: "us"
-        },
-        {
-            label: "Canada",
-            value: "canada",
-            id: "ca"
-        },
-        {
-            label: "Pakistan",
-            value: "pakistan",
-            id: "pk"
-        }
-    ]
-
-    const handleReset = () => {
-        if (dropdownRef.current) {
-            dropdownRef.current.clearSelected()
-        }
-    }
-
-    return (
-        <>
-            <Dropdown
-                clearable={false}
-                label="Quick Pick"
-                onSelect={() => {}}
-                ref={dropdownRef}
-                variant="quickpick"
-                {...props}
-            />
-            <Button
-                marginY="md"
-                onClick={handleReset}
-                text="Reset"
-            />
-
-            <Dropdown
-                clearable={false}
-                defaultValue={options[options.length - 1]}
-                label="Default"
-                marginBottom="md"
-                options={options}
-                variant="default"
-                {...props}
-            />
-
-            <Dropdown
-                clearable={false}
-                defaultValue={options[1]}
-                label="Subtle"
-                options={options}
-                separators={false}
-                variant="subtle"
-                {...props}
-            />
-        </>
-    )
-}
-
-export default DropdownWithClearable

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

@@ -1,5 +0,0 @@
-The `clearable` prop controls whether the clear (X) button appears in the dropdown. When set to `false`, the clear button is hidden.
-
-This is useful in two scenarios:
-1. When you have a separate "Reset" or "Defaults" button that handles clearing the selection (as shown in the Quick Pick example)
-2. When you don't want to provide any way to clear the selection (as shown in the Default and Subtle examples)

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-
-const DropdownWithConstrainHeight = (props) => {
-  // Create a long list of options to demonstrate height constraint
-  const options = Array.from({ length: 30 }, (_, i) => ({
-    label: `Option ${i + 1}`,
-    value: `option_${i + 1}`,
-    id: `opt_${i + 1}`
-  }))
-
-  return (
-    <>
-      <Dropdown
-          data={{ testid: "dropdown-no-constrain" }}
-          label="Without Constrain Height (Default)"
-          marginBottom="md"
-          options={options}
-          {...props}
-      />
-
-      <Dropdown
-          constrainHeight
-          data={{ testid: "dropdown-constrain" }}
-          label="With Constrain Height"
-          options={options}
-          {...props}
-      />
-    </>
-  )
-}
-
-export default DropdownWithConstrainHeight

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

@@ -1,20 +0,0 @@
-<% 
-  # Create a long list of options to demonstrate height constraint
-  options = (1..30).map do |i|
-    { label: "Option #{i}", value: "option_#{i}", id: "opt_#{i}" }
-  end
-%>
-
-<%= pb_rails("dropdown", props: {
-  id: "dropdown-no-constrain",
-  options: options,
-  label: "Without Constrain Height (Default)",
-  margin_bottom: "md"
-}) %>
-
-<%= pb_rails("dropdown", props: {
-  id: "dropdown-constrain",
-  options: options,
-  constrain_height: true,
-  label: "With Constrain Height"
-}) %>

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

@@ -1,8 +0,0 @@
-The `constrain_height` prop limits the dropdown container height to 18em and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.
-
-When `constrain_height` is `true`, the dropdown will:
-- Have a maximum height of 18em
-- Show a scrollbar when content exceeds the max height
-- Prevent the dropdown from extending beyond the viewport
-
-This is particularly useful for dropdowns with many options, such as long lists or quickpick variants with many date range options.

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

@@ -1,8 +0,0 @@
-The `constrainHeight` prop limits the dropdown container height to 18em and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.
-
-When `constrainHeight` is `true`, the dropdown will:
-- Have a maximum height of 18em
-- Show a scrollbar when content exceeds the max height
-- Prevent the dropdown from extending beyond the viewport
-
-This is particularly useful for dropdowns with many options, such as long lists or quickpick variants with many date range options.

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

@@ -1,9 +0,0 @@
-<% 
-  options = [
-    { label: 'United States', value: 'unitedStates', id: 'us' },
-    { label: 'Canada', value: 'canada', id: 'ca' },
-    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
-  ]
-%>
-
-<%= pb_rails("dropdown", props: { options: options, placeholder: "Choose a country" }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import Dropdown from '../../pb_dropdown/_dropdown'
-
-const DropdownWithPlaceholder = (props) => {
-
-  const options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "Canada",
-      value: "canada",
-      id: "ca"
-    },
-    {
-      label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
-    }
-  ];  
-
-  return (
-    <Dropdown
-        options={options}
-        placeholder="Choose a country"
-        {...props}
-    />
-  )
-}
-
-export default DropdownWithPlaceholder

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

@@ -1,3 +0,0 @@
-The `placeholder` prop allows you to customize the placeholder text that appears when no option is selected in the dropdown.
-
-The placeholder prop works with all dropdown variants (`default`, `subtle`, and `quickpick`). When no option is selected, the placeholder text is displayed. When an option is selected, the placeholder is replaced by the selected option's label. The default placeholder text is "Select..." if no placeholder is provided.

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb

@@ -1,7 +0,0 @@
-<%= pb_rails("passphrase", props: {
-  id: "passphrase_required_indicator",
-  label: "Passphrase",
-  placeholder: "Enter passphrase",
-  required_indicator: true,
-  value: "passphrase",
-}) %>

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx

@@ -1,24 +0,0 @@
-import React, { useState } from 'react'
-
-import Passphrase from '../_passphrase'
-
-const PassphraseRequiredIndicator = (props) => {
-  const [passphrase, setPassphrase] = useState('')
-  const handleOnChangePassphrase = (e) => {
-    setPassphrase(e.target ? e.target.value : e)
-  }
-
-  return (
-      <Passphrase
-          id="passphrase_required_indicator"
-          label="Passphrase"
-          name="passphrase"
-          onChange={handleOnChangePassphrase}
-          requiredIndicator
-          value={passphrase}
-          {...props}
-      />
-  )
-}
-
-export default PassphraseRequiredIndicator

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.md

@@ -1,3 +0,0 @@
-The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation. 
-
-You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

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

@@ -1,5 +0,0 @@
-<%= pb_rails("phone_number_input", props: {
-  id: "phone_number_input_required_indicator",
-  label: "Required Phone Number",
-  required_indicator: true,
-}) %>

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

@@ -1,14 +0,0 @@
-import React from 'react'
-import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
-
-const PhoneNumberInputRequiredIndicator = (props) => (
-    <>
-        <PhoneNumberInput
-            id='phone_number_input_required_indicator'
-            label='Phone Number'
-            requiredIndicator
-            {...props} />
-    </>
-)
-
-export default PhoneNumberInputRequiredIndicator

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.md

@@ -1,3 +0,0 @@
-The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation. 
-
-You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md

@@ -1 +0,0 @@
-Add an `id` to your Textarea so that clicking the label will move focus directly to the input.

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb

@@ -1,6 +0,0 @@
-<%= pb_rails("time_picker", props: {
-  id: "time-picker-required-indicator",
-  label: "Select Time",
-  required_indicator: true,
-}) %>
-

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import TimePicker from '../_time_picker'
-
-const TimePickerRequiredIndicator = (props) => (
-  <div>
-    <TimePicker
-        id="time-picker-required-indicator"
-        label="Select Time"
-        requiredIndicator
-        {...props}
-    />
-  </div>
-)
-
-export default TimePickerRequiredIndicator
-

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md

@@ -1,3 +0,0 @@
-The `requiredIndicator`/`required_indicator` prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
-
-You can use `requiredIndicator`/`required_indicator` with any validation approach: HTML5 validation via the `required` prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the `required` prop.