playbook_ui 12.1.0 → 12.3.0.pre.alpha.patchtest1

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import Timestamp from '../_timestamp'
 
 const todaysDate = new Date()
 const futureYear = new Date().getFullYear() + 4

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import Timestamp from '../_timestamp'
 
 const todaysDate = new Date()
 const year = new Date().getFullYear()

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import Timestamp from '../_timestamp'
 
 const todaysDate = new Date()
 const futureYear = new Date().getFullYear() + 4

data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import Timestamp from '../_timestamp.jsx'
+import Timestamp from '../_timestamp'
 
 const todaysDate = new Date()
 

data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx

@@ -17,6 +17,7 @@ import Flex from "../pb_flex/_flex"
 
 type TooltipProps = {
   aria?: { [key: string]: string },
+  className?: string | string[],
   data?: { [key: string]: string },
   text: string,
   icon?: string,
@@ -26,9 +27,10 @@ type TooltipProps = {
   zIndex?: Pick<GlobalProps, "ZIndex">,
 } & GlobalProps
 
-const Tooltip = (props: TooltipProps) => {
+const Tooltip = (props: TooltipProps): React.ReactElement => {
   const {
     aria = {},
+    className,
     children,
     data = {},
     icon = null,
@@ -42,7 +44,10 @@ const Tooltip = (props: TooltipProps) => {
   const dataProps: { [key: string]: any } = buildDataProps(data)
   const ariaProps: { [key: string]: any } = buildAriaProps(aria)
 
-  const css = classnames(globalProps({...rest}))
+  const css = classnames(
+    globalProps({...rest}),
+    className
+  )
   const [open, setOpen] = useState(false)
   const arrowRef = useRef(null)
   const {
@@ -92,44 +97,47 @@ const Tooltip = (props: TooltipProps) => {
   return (
     <>
       <div
-        ref={reference}
-        className={`pb_tooltip_kit ${css}`}
-        style={{ display: "inline-flex" }}
-        role="tooltip_trigger"
-        {...ariaProps}
-        {...dataProps}
+          className={`pb_tooltip_kit ${css}`}
+          ref={reference}
+          role="tooltip_trigger"
+          style={{ display: "inline-flex" }}
+          {...ariaProps}
+          {...dataProps}
       >
         {children}
       </div>
       {open && (
         <div
-          {...getFloatingProps({
-            role: "tooltip",
-            ref: floating,
-            className: `tooltip_tooltip ${placement} visible`,
-            style: {
-              position: strategy,
-              top: y ?? 0,
-              left: x ?? 0,
-              zIndex: zIndex ?? 0,
-            },
-          })}
+            {...getFloatingProps({
+              role: "tooltip",
+              ref: floating,
+              className: `tooltip_tooltip ${placement} visible`,
+              style: {
+                position: strategy,
+                top: y ?? 0,
+                left: x ?? 0,
+                zIndex: zIndex ?? 0,
+              },
+            })}
         >
-          <Flex gap="xs" align="center">
+          <Flex 
+              align="center"
+              gap="xs"
+          >
             {icon && (
             <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
             )}
             {text}
           </Flex>
           <div
-            ref={arrowRef}
-            className="arrow_bg"
-            style={{
-              position: strategy,
-              left: arrowX != null ? `${arrowX}px` : "",
-              top: arrowY != null ? `${arrowY}px` : "",
-              [staticSide]: "-5px",
-            }}
+              className="arrow_bg"
+              ref={arrowRef}
+              style={{
+                position: strategy,
+                left: arrowX != null ? `${arrowX}px` : "",
+                top: arrowY != null ? `${arrowY}px` : "",
+                [staticSide]: "-5px",
+              }}
           />
         </div>
       )}

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default_react.jsx

@@ -14,6 +14,7 @@ const TooltipDefaultReact = (props) => {
    >
     <FlexItem>
       <Tooltip 
+          className={"customClassNameHere"}
           placement='top' 
           text="Whoa. I'm a Tooltip" 
           zIndex={10}

data/app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx

@@ -51,3 +51,17 @@ test("closes on mouseleave", async () => {
     cleanup();
   })
 });
+
+test("closes on mouseleave", async () => {
+  render(
+    <Tooltip
+        className={"Hello World"}
+        data={{ testid: "className-test" }}
+    />
+  );
+
+  const kit = screen.getByTestId("className-test");
+  expect(kit).toHaveClass("Hello World");
+
+  cleanup();
+});

data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx

@@ -18,7 +18,7 @@ import Option from './components/Option'
 import Placeholder from './components/Placeholder'
 import ValueContainer from './components/ValueContainer'
 
-import { noop } from '../utilities/props'
+import { noop, buildDataProps } from '../utilities/props'
 
 /**
  * @typedef {object} Props
@@ -32,6 +32,8 @@ type TypeaheadProps = {
   components?: object,
   createable?: boolean,
   dark?: boolean,
+  data?: object,
+  error?: string,
   id?: string,
   label?: string,
   loadOptions?: string,
@@ -49,6 +51,8 @@ const Typeahead = ({
   async,
   components = {},
   createable,
+  error = "",
+  data = {},
   getOptionLabel,
   getOptionValue,
   id,
@@ -106,13 +110,18 @@ const Typeahead = ({
     }
   }
 
+  const dataProps = buildDataProps(data)
+
   const classes = `pb_typeahead_kit react-select ${globalProps(props)}`
   const inlineClass = selectProps.inline ? 'inline' : null
 
   return (
-    <div className={classnames(classes, inlineClass)}>
+    <div {...dataProps}
+        className={classnames(classes, inlineClass)}
+    >
       <Tag
           classNamePrefix="typeahead-kit-select"
+          error={error}
           onChange={handleOnChange}
           {...selectProps}
       />

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -181,8 +181,6 @@
       }
     }
   }
-
-  
  
   .typeahead-kit-select__menu {
     .typeahead-kit-select__option {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import Typeahead from './_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+test('typeahead classname + label renders as expected', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'typeahead-test' }}
+        defaultValue={[options[0]]}
+        label="Colors"
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('typeahead-test')
+  const label = kit.querySelector(".pb_caption_kit_md.pb_text_input_kit_label")
+  expect(kit).toHaveClass("pb_typeahead_kit")
+  expect(label).toHaveTextContent("Colors")
+})
+
+test('to be error variant', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'error-test' }}
+        error='Please make a valid selection'
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId("error-test")
+  const error = kit.querySelector(".pb_body_kit_negative")
+  expect(error).toBeInTheDocument()
+}) 
+
+test('should be inline variant', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'inline-test' }}
+        inline
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('inline-test')
+  expect(kit).toHaveClass("inline")
+})
+
+test('typeahead with pills', () => {
+  render(
+    <Typeahead
+        data={{ testid: 'pills-test' }}
+        defaultValue={[options[0]]}
+        isMulti
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('pills-test')
+  const pill = kit.querySelector(".pb_form_pill_kit_primary")
+  expect(pill).toBeInTheDocument()
+})
+
+test('typeahead multi select with badges and small pills', () => {
+  render(
+    <>
+    <Typeahead
+        data={{ testid: 'badge-test' }}
+        defaultValue={[options[0]]}
+        isMulti
+        multiKit="badge"
+        options={options}
+    />
+
+    <Typeahead
+        data={{ testid: 'small-pill-test' }}
+        defaultValue={[options[0]]}
+        isMulti
+        multiKit="smallPill"
+        options={options}
+    />
+    </>
+  )
+
+  const kit = screen.getByTestId('small-pill-test')
+  const badge = kit.querySelector(".pb_form_pill_kit_primary.mr_xs.small")
+  expect(badge).toBeInTheDocument()
+})
+

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx

@@ -7,7 +7,7 @@ const ClearContainer = (props: any) => {
   const { selectProps, clearValue } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
-  }, true)
+  }, [true])
 
   return (
     <components.ClearIndicator

data/app/pb_kits/playbook/pb_typeahead/components/Control.jsx

@@ -14,6 +14,7 @@ const TypeaheadControl = (props: Props) => (
   <div className="pb_typeahead_wrapper">
     <TextInput
         dark={props.selectProps.dark}
+        error={props.selectProps.error}
         label={props.selectProps.label}
     >
       <Flex>

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

@@ -0,0 +1,19 @@
+<%
+  options = [
+    { label: 'Windows', value: '#FFA500' },
+    { label: 'Siding', value: '#FF0000' },
+    { label: 'Doors', value: '#00FF00' },
+    { label: 'Roofs', value: '#0000FF' },
+  ]
+
+%>
+
+<%= pb_rails("typeahead", props: { id: "typeahead-error-example", options: options, error: "Please make a valid selection", label: "Products", name: :foo, is_multi: false }) %>
+
+<!-- This section is an example of the available JavaScript event hooks -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-error-example-result-option-select", function(event) {
+    console.log('Option selected')
+    console.dir(event.detail)
+  })
+<% end %>

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

@@ -0,0 +1,39 @@
+// @flow
+
+import React, { useState, useEffect } from 'react'
+
+import Typeahead from '../_typeahead'
+
+const options = [
+  { label: 'Orange', value: '#FFA500' },
+  { label: 'Red', value: '#FF0000' },
+  { label: 'Green', value: '#00FF00' },
+  { label: 'Blue', value: '#0000FF' },
+]
+
+const TypeaheadErrorState = (props) => {
+  const [errorState, setErrorState] = useState("Please make a valid selection");
+  const [searchValue, setSearchValue] = useState(null);
+  
+  const handleOnChange = (value) => setSearchValue(value)
+
+    useEffect(() => {
+      if(searchValue) {
+        setErrorState("")
+      } else {
+        setErrorState("Please make a valid selection")
+      }
+    }, [searchValue])
+  
+  return (
+    <Typeahead
+        error={errorState}
+        label="Colors"
+        onChange={handleOnChange}
+        options={options}
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadErrorState

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

@@ -0,0 +1 @@
+Typeahead w/ Error shows that an option must be selected or the selected option is invalid (i.e., when used in a form it signals a user to fix an error).

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

@@ -8,6 +8,7 @@ examples:
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
+    - typeahead_error_state: Error State
 
   react:
     - typeahead_default: Default
@@ -20,3 +21,4 @@ examples:
     - typeahead_multi_kit: Multi Kit Options
     - typeahead_createable: Createable
     - typeahead_async_createable: Createable (+ Async Data)
+    - typeahead_error_state: Error State

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

@@ -8,3 +8,4 @@ export { default as TypeaheadInline } from './_typeahead_inline.jsx'
 export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
 export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
 export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
+export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'

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

@@ -5,6 +5,8 @@ module Playbook
     class Typeahead < Playbook::KitBase
       prop :async, type: Playbook::Props::Boolean, default: false
       prop :default_options, type: Playbook::Props::HashArray, default: []
+      prop :error, type: Playbook::Props::String,
+                   default: ""
       prop :get_option_label
       prop :get_option_value
       prop :id
@@ -57,6 +59,7 @@ module Playbook
         base_options = {
           dark: dark,
           defaultValue: default_options,
+          error: error,
           id: id,
           inline: inline,
           isMulti: is_multi,

data/app/pb_kits/playbook/playbook-doc.js

@@ -55,6 +55,7 @@ import * as Lightbox from 'pb_lightbox/docs'
 import * as LineGraphDocs from 'pb_line_graph/docs'
 import * as List from 'pb_list/docs'
 import * as LoadingInline from 'pb_loading_inline/docs'
+import * as Map from 'pb_map/docs'
 import * as Message from 'pb_message/docs'
 import * as MultipleUsers from 'pb_multiple_users/docs'
 import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
@@ -152,6 +153,7 @@ WebpackerReact.setup({
   ...LineGraphDocs,
   ...List,
   ...LoadingInline,
+  ...Map,
   ...Message,
   ...MultipleUsers,
   ...MultipleUsersStacked,

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

@@ -59,9 +59,11 @@ $main_colors: (
 Background colors ------------------*/
 $bg_light:            $silver !default;
 $bg_dark:             #0a0527 !default;
+$bg_dark_card:        #231E3D;
 $background_colors: (
   bg_light:           $bg_light,
-  bg_dark:            $bg_dark
+  bg_dark:            $bg_dark,
+  bg_dark_card:       $bg_dark_card 
 );
 
 /* Card colors ------------------*/
@@ -94,11 +96,13 @@ $hover_colors: (
 );
 
 /* Focus colors -----------------------*/
+$focus_color:         $primary;
 $focus_input_light:   rgba($active_light, $opacity_5);
 $focus_input_dark:    rgba(#144075, $opacity_5);
 $focus_input_colors: (
   focus_input_light:        $focus_input_light,
-  focus_input_dark:         $focus_input_dark
+  focus_input_dark:         $focus_input_dark,
+  focus_color:              $focus_color
 );
 
 /* Border colors ----------------------*/

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

@@ -0,0 +1,12 @@
+@mixin focus {
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0px 0px 0 2px white, 0px 0px 0 4px $primary_action;
+    }
+}
+@mixin focus-dark {
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0px 0px 0 2px $bg_dark_card, 0px 0px 0 4px $primary_action;
+    }
+}

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "12.0.0"
-  VERSION = "12.1.0"
+  PREVIOUS_VERSION = "12.3.0"
+  VERSION = "12.3.0.pre.alpha.patchtest1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.1.0
+  version: 12.3.0.pre.alpha.patchtest1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-02-02 00:00:00.000000000 Z
+date: 2023-02-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1389,6 +1389,15 @@ files:
 - app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb
 - app/pb_kits/playbook/pb_loading_inline/loading_inline.rb
 - app/pb_kits/playbook/pb_logistic/_logistic.jsx
+- app/pb_kits/playbook/pb_map/_map.scss
+- app/pb_kits/playbook/pb_map/_map.tsx
+- app/pb_kits/playbook/pb_map/docs/_map_default.jsx
+- app/pb_kits/playbook/pb_map/docs/_map_default.md
+- app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx
+- app/pb_kits/playbook/pb_map/docs/_map_with_plugin.md
+- app/pb_kits/playbook/pb_map/docs/example.yml
+- app/pb_kits/playbook/pb_map/docs/index.js
+- app/pb_kits/playbook/pb_map/map.test.jsx
 - app/pb_kits/playbook/pb_message/_message.jsx
 - app/pb_kits/playbook/pb_message/_message.scss
 - app/pb_kits/playbook/pb_message/_message_mixins.scss
@@ -1588,8 +1597,8 @@ files:
 - app/pb_kits/playbook/pb_progress_pills/docs/index.js
 - app/pb_kits/playbook/pb_progress_pills/progress_pills.html.erb
 - app/pb_kits/playbook/pb_progress_pills/progress_pills.rb
-- app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx
 - app/pb_kits/playbook/pb_progress_simple/_progress_simple.scss
+- app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx
 - app/pb_kits/playbook/pb_progress_simple/docs/_description.md
 - app/pb_kits/playbook/pb_progress_simple/docs/_footer.md
 - app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_align.html.erb
@@ -1609,6 +1618,7 @@ files:
 - app/pb_kits/playbook/pb_progress_simple/docs/index.js
 - app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb
 - app/pb_kits/playbook/pb_progress_simple/progress_simple.rb
+- app/pb_kits/playbook/pb_progress_simple/progress_simple.test.js
 - app/pb_kits/playbook/pb_progress_step/_progress_step.jsx
 - app/pb_kits/playbook/pb_progress_step/_progress_step.scss
 - app/pb_kits/playbook/pb_progress_step/_progress_step_item.jsx
@@ -1812,8 +1822,8 @@ files:
 - app/pb_kits/playbook/pb_star_rating/docs/index.js
 - app/pb_kits/playbook/pb_star_rating/star_rating.html.erb
 - app/pb_kits/playbook/pb_star_rating/star_rating.rb
-- app/pb_kits/playbook/pb_stat_change/_stat_change.jsx
 - app/pb_kits/playbook/pb_stat_change/_stat_change.scss
+- app/pb_kits/playbook/pb_stat_change/_stat_change.tsx
 - app/pb_kits/playbook/pb_stat_change/docs/_description.md
 - app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.html.erb
 - app/pb_kits/playbook/pb_stat_change/docs/_stat_change_default.jsx
@@ -1826,8 +1836,9 @@ files:
 - app/pb_kits/playbook/pb_stat_change/docs/index.js
 - app/pb_kits/playbook/pb_stat_change/stat_change.html.erb
 - app/pb_kits/playbook/pb_stat_change/stat_change.rb
-- app/pb_kits/playbook/pb_stat_value/_stat_value.jsx
+- app/pb_kits/playbook/pb_stat_change/stat_change.test.js
 - app/pb_kits/playbook/pb_stat_value/_stat_value.scss
+- app/pb_kits/playbook/pb_stat_value/_stat_value.tsx
 - app/pb_kits/playbook/pb_stat_value/docs/_description.md
 - app/pb_kits/playbook/pb_stat_value/docs/_footer.md
 - app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.html.erb
@@ -1841,6 +1852,7 @@ files:
 - app/pb_kits/playbook/pb_stat_value/docs/index.js
 - app/pb_kits/playbook/pb_stat_value/stat_value.html.erb
 - app/pb_kits/playbook/pb_stat_value/stat_value.rb
+- app/pb_kits/playbook/pb_stat_value/stat_value.test.js
 - app/pb_kits/playbook/pb_table/_table.jsx
 - app/pb_kits/playbook/pb_table/_table.scss
 - app/pb_kits/playbook/pb_table/_table_row.jsx
@@ -1998,8 +2010,8 @@ files:
 - app/pb_kits/playbook/pb_time_range_inline/docs/index.js
 - app/pb_kits/playbook/pb_time_range_inline/time_range_inline.html.erb
 - app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb
-- app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx
 - app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss
+- app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx
 - app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.html.erb
 - app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx
 - app/pb_kits/playbook/pb_time_stacked/docs/example.yml
@@ -2025,8 +2037,8 @@ files:
 - app/pb_kits/playbook/pb_timeline/timeline.html.erb
 - app/pb_kits/playbook/pb_timeline/timeline.rb
 - app/pb_kits/playbook/pb_timestamp/_timestamp-mixins.scss
-- app/pb_kits/playbook/pb_timestamp/_timestamp.jsx
 - app/pb_kits/playbook/pb_timestamp/_timestamp.scss
+- app/pb_kits/playbook/pb_timestamp/_timestamp.tsx
 - app/pb_kits/playbook/pb_timestamp/docs/_description.md
 - app/pb_kits/playbook/pb_timestamp/docs/_footer.md
 - app/pb_kits/playbook/pb_timestamp/docs/_time_stamp_default.md
@@ -2149,6 +2161,7 @@ files:
 - app/pb_kits/playbook/pb_treemap_chart/treemap_chart.rb
 - app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
 - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
+- app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx
 - app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
 - app/pb_kits/playbook/pb_typeahead/components/Control.jsx
 - app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx
@@ -2163,6 +2176,9 @@ files:
 - app/pb_kits/playbook/pb_typeahead/docs/_typeahead_createable.jsx
 - 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_error_state.html.erb
+- app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx
+- 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_multi_kit.html.erb
@@ -2283,6 +2299,7 @@ files:
 - app/pb_kits/playbook/utilities/_cursor.scss
 - app/pb_kits/playbook/utilities/_display.scss
 - app/pb_kits/playbook/utilities/_flexbox.scss
+- app/pb_kits/playbook/utilities/_focus.scss
 - app/pb_kits/playbook/utilities/_line_height.scss
 - app/pb_kits/playbook/utilities/_max_width.scss
 - app/pb_kits/playbook/utilities/_mixins.scss
@@ -2389,9 +2406,9 @@ 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: []
 rubygems_version: 3.3.7
 signing_key: