playbook_ui 7.13.0 → 7.14.0.pre.alpha1

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

@@ -0,0 +1 @@
+Use `valueComponent` props to pass your desire custom options. `valueComponent` will be displayed if present. 

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

@@ -22,4 +22,4 @@
       }
     })
   }
-<% end %>
+<% end %>

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

@@ -75,6 +75,7 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
         >
           <User
               align="left"
+              avatar
               avatarUrl={user.imageUrl}
               key={user.value}
               marginBottom="md"

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

@@ -1,7 +1,7 @@
 examples:
   rails:
     - typeahead_default: Default
-    - typeahead_with_context_dark: With Context
+    - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
@@ -10,4 +10,5 @@ examples:
     - typeahead_default: Default
     - typeahead_with_pills: With Pills
     - typeahead_with_pills_async: With Pills (Async Data)
-    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
+    - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
+    - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)

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

@@ -2,3 +2,4 @@ export { default as TypeaheadDefault } from './_typeahead_default'
 export { default as TypeaheadWithPills } from './_typeahead_with_pills'
 export { default as TypeaheadWithPillsAsync } from './_typeahead_with_pills_async'
 export { default as TypeaheadWithPillsAsyncUsers } from './_typeahead_with_pills_async_users'
+export { default as TypeaheadWithPillsAsyncCustomOptions } from './_typeahead_with_pills_async_custom_options'

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -39,12 +39,13 @@ module Playbook
 
       def typeahead_with_pills_options
         base_options = {
+          dark: dark,
           defaultValue: default_options,
           id: id,
           isMulti: true,
           label: label,
           options: options,
-          placeholder: placeholder
+          placeholder: placeholder,
         }
 
         base_options.merge!({getOptionLabel: get_option_label}) if get_option_label.present?

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

@@ -1,3 +1,2 @@
 export { default as UserBadgeDefault } from './_user_badge_default.jsx'
 export { default as UserBadgeSize } from './_user_badge_size.jsx'
-export { default as UserBadgeSizeDark } from './_user_badge_size_dark.jsx'

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

@@ -9,14 +9,28 @@ $border_rad_heavy:        5px;
 $border_rad_heavier:      6px;
 $border_rad_heaviest:     7px;
 $border_rad_mega:         1000px;
+$border_radius_xs:        4px;
+$border_radius_sm:        4px;
+$border_radius_md:        6px;
+$border_radius_lg:        8px;
+$border_radius_xl:        16px;
+$border_radius_rounded:   1000px;
+$border_radius_none:      0;
 $border_radius: (
-  lightest: $border_rad_lightest,
-  lighter: $border_rad_lighter,
-  light: $border_rad_light,
-  normal: $border_rad_normal,
-  heavy: $border_rad_heavy,
-  heavier: $border_rad_heavier,
-  heaviest: $border_rad_heaviest
+  lightest:              $border_rad_lightest,
+  lighter:               $border_rad_lighter,
+  light:                 $border_rad_light,
+  normal:                $border_rad_normal,
+  heavy:                 $border_rad_heavy,
+  heavier:               $border_rad_heavier,
+  heaviest:              $border_rad_heaviest,
+  border_radius_xs:      $border_radius_xs,
+  border_radius_sm:      $border_radius_sm,
+  border_radius_md:      $border_radius_md,
+  border_radius_lg:      $border_radius_lg,
+  border_radius_xl:      $border_radius_xl,
+  border_radius_none:    $border_radius_none,
+  border_radius_rounded: $border_radius_rounded
 );
 
 

data/app/pb_kits/playbook/utilities/_max_width.scss

@@ -0,0 +1,15 @@
+.max_width_sm {
+  max-width: 540px;
+}
+
+.max_width_md {
+  max-width: 720px;
+}
+
+.max_width_lg {
+  max-width: 960px;
+}
+
+.max_width_xl {
+  max-width: 1140px;
+}

data/app/pb_kits/playbook/utilities/_spacing.scss

@@ -1,28 +1,28 @@
 @import "../tokens/spacing";
 
-$space_classes: ( 
-	xs: $space_xs, 
-	sm: $space_sm, 
-	md: $space_md, 
-	lg: $space_lg, 
-	xl: $space_xl, 
+$space_classes: (
+	xs: $space_xs,
+	sm: $space_sm,
+	md: $space_md,
+	lg: $space_lg,
+	xl: $space_xl,
 	none: 0
 );
 
-$positions: ( 
-	m: "margin", 
-	mr: "margin-right", 
-	ml: "margin-left", 
-	mt: "margin-top", 
-	mb: "margin-bottom", 
-	mx: ("margin-left", "margin-right"), 
+$positions: (
+	m: "margin",
+	mr: "margin-right",
+	ml: "margin-left",
+	mt: "margin-top",
+	mb: "margin-bottom",
+	mx: ("margin-left", "margin-right"),
 	my: ("margin-top", "margin-bottom"),
-	p: "padding", 
-	pr: "padding-right", 
-	pl: "padding-left", 
-	pt: "padding-top", 
-	pb: "padding-bottom", 
-	px: ("padding-left", "padding-right"), 
+	p: "padding",
+	pr: "padding-right",
+	pl: "padding-left",
+	pt: "padding-top",
+	pb: "padding-bottom",
+	px: ("padding-left", "padding-right"),
 	py: ("padding-top", "padding-bottom")
 );
 
@@ -39,4 +39,4 @@ $positions: (
 			}
 		}
 	}
-}
+}

data/app/pb_kits/playbook/utilities/globalProps.js

@@ -39,10 +39,16 @@ const darkProps = ({ dark }) => {
   return css
 }
 
+const maxWidthProps = ({ maxWidth }) => {
+  let css = ''
+  css += maxWidth  ? `max_width_${maxWidth } ` : ''
+  return css
+}
+
 // All Exported as a single function
 export const globalProps = (props, defaultProps = {}) => {
   const allProps = { ...props, ...defaultProps }
-  return spacingProps(allProps) + darkProps(allProps)
+  return spacingProps(allProps) + darkProps(allProps) + maxWidthProps(allProps)
 }
 
 export const deprecatedProps = (kit, props = []) => {

data/lib/playbook.rb

@@ -11,6 +11,17 @@ require "playbook/engine" if defined?(Rails)
 require "playbook/markdown/template_handler"
 
 module Playbook
+  ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
+
   class ConflictingPropsError < StandardError; end
   class MissingPropError < StandardError; end
+
+  class << self
+    def webpacker
+      @webpacker ||= ::Webpacker::Instance.new(
+        root_path: ROOT_PATH,
+        config_path: ROOT_PATH.join("config/webpacker.yml")
+      )
+    end
+  end
 end

data/lib/playbook/engine.rb

@@ -23,5 +23,20 @@ module Playbook
         append_view_path "#{Gem.loaded_specs['playbook_ui'].full_gem_path}/app/pb_kits/playbook/config"
       end
     end
+
+    initializer "webpacker.proxy" do |app|
+      insert_middleware = begin
+                          Playbook.webpacker.config.dev_server.present?
+                          rescue
+                            nil
+                        end
+      next unless insert_middleware
+
+      app.middleware.insert_before(
+        0, Webpacker::DevServerProxy,
+        ssl_verify_none: true,
+        webpacker: Playbook.webpacker
+      )
+    end
   end
 end

data/lib/playbook/props.rb

@@ -47,12 +47,23 @@ module Playbook
       dark ? "dark" : nil
     end
 
+    def max_width_props
+      selected_mw_props = max_width_options.keys.select { |sk| try(sk) }
+      return nil unless selected_mw_props.present?
+
+      selected_mw_props.map do |k|
+        width_value = send(k)
+        "max_width_#{width_value}" if max_width_values.include? width_value
+      end.compact.join(" ")
+    end
+
     def generate_classname(*name_parts, separator: "_")
       [
         name_parts.compact.join(separator),
         prop(:classname),
         spacing_props,
-        dark_props
+        dark_props,
+        max_width_props,
       ].compact.join(" ")
     end
 
@@ -79,6 +90,7 @@ module Playbook
       prop :margin_top
       prop :margin_x
       prop :margin_y
+      prop :max_width
       prop :padding
       prop :padding_bottom
       prop :padding_left
@@ -108,6 +120,16 @@ module Playbook
       }
     end
 
+    def max_width_options
+      {
+        max_width: "mw",
+      }
+    end
+
+    def max_width_values
+      %w[sm md lg xl]
+    end
+
     def spacing_values
       %w[none xs sm md lg xl]
     end

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "7.13.0"
+  VERSION = "7.14.0.pre.alpha1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 7.13.0
+  version: 7.14.0.pre.alpha1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-01-12 00:00:00.000000000 Z
+date: 2021-02-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -105,14 +105,14 @@ dependencies:
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 3.4.0
+        version: 3.5.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - '='
       - !ruby/object:Gem::Version
-        version: 3.4.0
+        version: 3.5.1
 - !ruby/object:Gem::Dependency
   name: rouge
   requirement: !ruby/object:Gem::Requirement
@@ -455,8 +455,6 @@ files:
 - app/pb_kits/playbook/pb_background/_background.jsx
 - app/pb_kits/playbook/pb_background/_background.scss
 - app/pb_kits/playbook/pb_background/background.rb
-- app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb
-- app/pb_kits/playbook/pb_background/docs/_background_dark.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb
 - app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx
 - app/pb_kits/playbook/pb_background/docs/_background_image.html.erb
@@ -576,6 +574,9 @@ files:
 - app/pb_kits/playbook/pb_card/docs/_card_border_none.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_border_none.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_border_none.md
+- app/pb_kits/playbook/pb_card/docs/_card_border_radius.html.erb
+- app/pb_kits/playbook/pb_card/docs/_card_border_radius.jsx
+- app/pb_kits/playbook/pb_card/docs/_card_border_radius.md
 - app/pb_kits/playbook/pb_card/docs/_card_content.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_content.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_header.html.erb
@@ -586,6 +587,7 @@ files:
 - app/pb_kits/playbook/pb_card/docs/_card_highlight.md
 - app/pb_kits/playbook/pb_card/docs/_card_light.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_light.jsx
+- app/pb_kits/playbook/pb_card/docs/_card_light.md
 - app/pb_kits/playbook/pb_card/docs/_card_padding.html.erb
 - app/pb_kits/playbook/pb_card/docs/_card_padding.jsx
 - app/pb_kits/playbook/pb_card/docs/_card_selected.html.erb
@@ -600,6 +602,7 @@ files:
 - app/pb_kits/playbook/pb_checkbox/_checkbox.jsx
 - app/pb_kits/playbook/pb_checkbox/_checkbox.scss
 - app/pb_kits/playbook/pb_checkbox/checkbox.rb
+- app/pb_kits/playbook/pb_checkbox/checkbox.test.js
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_checked.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.html.erb
@@ -608,6 +611,8 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error.jsx
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb
+- app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx
 - app/pb_kits/playbook/pb_checkbox/docs/_checkbox_options.html.erb
 - app/pb_kits/playbook/pb_checkbox/docs/_description.md
 - app/pb_kits/playbook/pb_checkbox/docs/example.yml
@@ -765,8 +770,6 @@ files:
 - app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx
 - app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.scss
 - app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.rb
-- app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.html.erb
-- app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.jsx
 - app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml
@@ -777,8 +780,6 @@ files:
 - app/pb_kits/playbook/pb_date_stacked/date_stacked.rb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.html.erb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_align.jsx
-- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.html.erb
-- app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.jsx
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_not_current_year.html.erb
@@ -808,8 +809,6 @@ files:
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx
 - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
 - app/pb_kits/playbook/pb_date_time_stacked/date_time_stacked.rb
-- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.html.erb
-- app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx
 - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml
@@ -818,8 +817,6 @@ files:
 - app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx
 - app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.scss
 - app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.rb
-- app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.html.erb
-- app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.jsx
 - app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.html.erb
 - app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.jsx
 - app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_default.md
@@ -832,6 +829,9 @@ files:
 - app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss
 - app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb
 - app/pb_kits/playbook/pb_distribution_bar/docs/_description.md
+- app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.html.erb
+- app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.jsx
+- app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md
 - app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.html.erb
 - app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_default.jsx
 - app/pb_kits/playbook/pb_distribution_bar/docs/example.yml
@@ -858,8 +858,10 @@ files:
 - app/pb_kits/playbook/pb_filter/_filter.jsx
 - app/pb_kits/playbook/pb_filter/_filter.scss
 - app/pb_kits/playbook/pb_filter/docs/_description.md
+- app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
+- app/pb_kits/playbook/pb_filter/docs/_filter_default.md
 - app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb
 - app/pb_kits/playbook/pb_filter/docs/_filter_min_width.jsx
 - app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb
@@ -885,15 +887,11 @@ files:
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_description.md
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_close.jsx
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.html.erb
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_default.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb
-- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js
 - app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb
@@ -905,22 +903,33 @@ files:
 - app/pb_kits/playbook/pb_flex/_flex_item.jsx
 - app/pb_kits/playbook/pb_flex/_flex_item.scss
 - app/pb_kits/playbook/pb_flex/docs/_description.md
+- app/pb_kits/playbook/pb_flex/docs/_flex_align.html.erb
+- app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx
+- app/pb_kits/playbook/pb_flex/docs/_flex_align.md
 - app/pb_kits/playbook/pb_flex/docs/_flex_default.html.erb
 - app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx
 - app/pb_kits/playbook/pb_flex/docs/_flex_default.md
-- app/pb_kits/playbook/pb_flex/docs/_flex_horizontal.html.erb
-- app/pb_kits/playbook/pb_flex/docs/_flex_horizontal.jsx
+- app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb
+- app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx
+- app/pb_kits/playbook/pb_flex/docs/_flex_gap.md
 - app/pb_kits/playbook/pb_flex/docs/_flex_inline.html.erb
 - app/pb_kits/playbook/pb_flex/docs/_flex_inline.jsx
 - app/pb_kits/playbook/pb_flex/docs/_flex_inline.md
+- app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb
+- app/pb_kits/playbook/pb_flex/docs/_flex_item.md
+- app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx
+- app/pb_kits/playbook/pb_flex/docs/_flex_justify.html.erb
+- app/pb_kits/playbook/pb_flex/docs/_flex_justify.jsx
+- app/pb_kits/playbook/pb_flex/docs/_flex_justify.md
 - app/pb_kits/playbook/pb_flex/docs/_flex_reverse.html.erb
 - app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx
+- app/pb_kits/playbook/pb_flex/docs/_flex_reverse.md
 - app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb
 - app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx
-- app/pb_kits/playbook/pb_flex/docs/_flex_vertical.html.erb
-- app/pb_kits/playbook/pb_flex/docs/_flex_vertical.jsx
+- app/pb_kits/playbook/pb_flex/docs/_flex_spacing.md
 - app/pb_kits/playbook/pb_flex/docs/_flex_wrap.html.erb
 - app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx
+- app/pb_kits/playbook/pb_flex/docs/_flex_wrap.md
 - app/pb_kits/playbook/pb_flex/docs/example.yml
 - app/pb_kits/playbook/pb_flex/docs/index.js
 - app/pb_kits/playbook/pb_flex/flex.rb
@@ -1056,8 +1065,6 @@ files:
 - app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx
 - app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx
-- app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb
-- app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx
 - app/pb_kits/playbook/pb_icon/docs/_icon_flip.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_flip.jsx
 - app/pb_kits/playbook/pb_icon/docs/_icon_pull.html.erb
@@ -1077,16 +1084,10 @@ files:
 - app/pb_kits/playbook/pb_icon_circle/docs/_footer.md
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.html.erb
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color.jsx
-- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.html.erb
-- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.jsx
-- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.html.erb
-- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.jsx
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.html.erb
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_default.jsx
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.html.erb
 - app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes.jsx
-- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.html.erb
-- app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.jsx
 - app/pb_kits/playbook/pb_icon_circle/docs/example.yml
 - app/pb_kits/playbook/pb_icon_circle/docs/index.js
 - app/pb_kits/playbook/pb_icon_circle/icon_circle.rb
@@ -1110,10 +1111,6 @@ files:
 - app/pb_kits/playbook/pb_icon_value/docs/_description.md
 - app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.html.erb
 - app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align.jsx
-- app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.html.erb
-- app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.jsx
-- app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.html.erb
-- app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.jsx
 - app/pb_kits/playbook/pb_icon_value/docs/_icon_value_default.html.erb
 - app/pb_kits/playbook/pb_icon_value/docs/_icon_value_default.jsx
 - app/pb_kits/playbook/pb_icon_value/docs/example.yml
@@ -1173,6 +1170,7 @@ files:
 - app/pb_kits/playbook/pb_layout/docs/_description.md
 - app/pb_kits/playbook/pb_layout/docs/_layout_collection.html.erb
 - app/pb_kits/playbook/pb_layout/docs/_layout_collection.jsx
+- app/pb_kits/playbook/pb_layout/docs/_layout_collection.md
 - app/pb_kits/playbook/pb_layout/docs/_layout_collection_detail.html.erb
 - app/pb_kits/playbook/pb_layout/docs/_layout_collection_detail.jsx
 - app/pb_kits/playbook/pb_layout/docs/_layout_collection_detail.md
@@ -1186,8 +1184,6 @@ files:
 - app/pb_kits/playbook/pb_layout/docs/_layout_kanban_responsive.jsx
 - app/pb_kits/playbook/pb_layout/docs/_layout_sizes.html.erb
 - app/pb_kits/playbook/pb_layout/docs/_layout_sizes.jsx
-- app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.html.erb
-- app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.jsx
 - app/pb_kits/playbook/pb_layout/docs/_layout_transparent.html.erb
 - app/pb_kits/playbook/pb_layout/docs/_layout_transparent.jsx
 - app/pb_kits/playbook/pb_layout/docs/example.yml
@@ -1383,25 +1379,15 @@ files:
 - app/pb_kits/playbook/pb_popover/docs/_description.md
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx
-- app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.html.erb
-- app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.jsx
-- app/pb_kits/playbook/pb_popover/docs/_popover_dark.html.erb
-- app/pb_kits/playbook/pb_popover/docs/_popover_dark.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_default.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_default.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_list.md
-- app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.html.erb
-- app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height.jsx
-- app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.html.erb
-- app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.jsx
 - app/pb_kits/playbook/pb_popover/docs/_popover_z_index.html.erb
 - app/pb_kits/playbook/pb_popover/docs/_popover_z_index.jsx
-- app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.html.erb
-- app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.jsx
 - app/pb_kits/playbook/pb_popover/docs/example.yml
 - app/pb_kits/playbook/pb_popover/docs/index.js
 - app/pb_kits/playbook/pb_popover/index.js
@@ -1551,6 +1537,9 @@ files:
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.html.erb
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.jsx
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_image.md
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.html.erb
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.jsx
+- app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.md
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_options.html.erb
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.html.erb
 - app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_single_select.jsx
@@ -1709,15 +1698,18 @@ files:
 - app/pb_kits/playbook/pb_table/styles/_all.scss
 - app/pb_kits/playbook/pb_table/styles/_as-cards.scss
 - app/pb_kits/playbook/pb_table/styles/_content.scss
+- app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss
 - app/pb_kits/playbook/pb_table/styles/_headers.scss
 - app/pb_kits/playbook/pb_table/styles/_hover.scss
 - app/pb_kits/playbook/pb_table/styles/_mobile.scss
+- app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss
 - app/pb_kits/playbook/pb_table/styles/_reset.scss
 - app/pb_kits/playbook/pb_table/styles/_side_highlight.scss
 - app/pb_kits/playbook/pb_table/styles/_single-line.scss
 - app/pb_kits/playbook/pb_table/styles/_structure.scss
 - app/pb_kits/playbook/pb_table/styles/_table-card.scss
 - app/pb_kits/playbook/pb_table/styles/_table-dark.scss
+- app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss
 - app/pb_kits/playbook/pb_table/styles/_variables.scss
 - app/pb_kits/playbook/pb_table/table.rb
 - app/pb_kits/playbook/pb_table/table_row.rb
@@ -1824,16 +1816,10 @@ files:
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb
 - app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb
-- app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx
 - app/pb_kits/playbook/pb_timestamp/docs/example.yml
 - app/pb_kits/playbook/pb_timestamp/docs/index.js
 - app/pb_kits/playbook/pb_timestamp/timestamp.rb
@@ -1916,13 +1902,15 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_footer.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx
-- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context_dark.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_context.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.md
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.md
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.html.erb
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.md
@@ -1960,8 +1948,6 @@ files:
 - app/pb_kits/playbook/pb_user_badge/docs/_user_badge_default.md
 - app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.html.erb
 - app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size.jsx
-- app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.html.erb
-- app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.jsx
 - app/pb_kits/playbook/pb_user_badge/docs/example.yml
 - app/pb_kits/playbook/pb_user_badge/docs/index.js
 - app/pb_kits/playbook/pb_user_badge/user_badge.rb
@@ -1995,6 +1981,7 @@ files:
 - app/pb_kits/playbook/types.js
 - app/pb_kits/playbook/utilities/_background_colors.scss
 - app/pb_kits/playbook/utilities/_colors.scss
+- app/pb_kits/playbook/utilities/_max_width.scss
 - app/pb_kits/playbook/utilities/_spacing.scss
 - app/pb_kits/playbook/utilities/globalProps.js
 - app/pb_kits/playbook/utilities/props.js
@@ -2037,12 +2024,11 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
-rubyforge_project:
-rubygems_version: 2.7.3
+rubygems_version: 3.1.4
 signing_key:
 specification_version: 4
 summary: Playbook Design System