Search Bar component

.changeset/real-beds-punch.md

@@ -0,0 +1,5 @@
+---
+'@autoguru/overdrive': minor
+---
+
+Introduced Search Bar component beta

lib/components/Actions/__snapshots__/Actions.spec.jsx.snap

@@ -2,6 +2,6 @@
 
 exports[`<Actions /> should match the snapshot 1`] = `
 <div
-  class="reset_block__1oah0223 useBoxStyles_display_flex__3xgq1lfu useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lgr useNegativeMarginLeft_makeResponsiveStyle_key_bp__10sqwm28 useNegativeMarginTop_makeResponsiveStyle_key_bp__rvovxw8 Columns_align_stretch__15fwc182b Columns_wrapping_wrap__15fwc1828"
+  class="reset_block__1oah0223 useBoxStyles_display_flex__3xgq1lfy useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lgv useNegativeMarginLeft_makeResponsiveStyle_key_bp__10sqwm28 useNegativeMarginTop_makeResponsiveStyle_key_bp__rvovxw8 Columns_align_stretch__15fwc182b Columns_wrapping_wrap__15fwc1828"
 />
 `;

lib/components/Alert/__snapshots__/Alert.spec.jsx.snap

@@ -2,27 +2,27 @@
 
 exports[`<Alert /> should match the snapshot 1`] = `
 <div
-  class="reset_block__1oah0223 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l4 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l18 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l2c useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l3g useBoxStyles_position_relative__3xgq1lfk useBoxStyles_overflow_hidden__3xgq1lfo useBoxStyles_border_style__3xgq1l9k useBoxStyles_border_colour_top_gray__3xgq1l9m useBoxStyles_border_colour_right_gray__3xgq1l9y useBoxStyles_border_colour_bottom_gray__3xgq1laa useBoxStyles_border_colour_left_gray__3xgq1lam useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lax useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lbd useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lbt useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lc9 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l98 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lcp useBoxStyles_backgroundColours_white__3xgq1lev useTextStyles_root__1xnpmd70 reset_block__1oah0223 useTextStyles_colours_success__1xnpmd7m Alert_contained__19auxx40"
+  class="reset_block__1oah0223 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l4 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l18 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l2c useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l3g useBoxStyles_position_relative__3xgq1lfo useBoxStyles_overflow_hidden__3xgq1lfs useBoxStyles_border_style__3xgq1l9k useBoxStyles_border_colour_top_gray__3xgq1l9m useBoxStyles_border_colour_right_gray__3xgq1l9y useBoxStyles_border_colour_bottom_gray__3xgq1laa useBoxStyles_border_colour_left_gray__3xgq1lam useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lax useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lbd useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lbt useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lc9 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l98 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lcp useBoxStyles_backgroundColours_white__3xgq1lez useTextStyles_root__1xnpmd70 reset_block__1oah0223 useTextStyles_colours_success__1xnpmd7m Alert_contained__19auxx40"
   role="alert"
 >
   <div
-    class="reset_block__1oah0223 useBoxStyles_height_full__3xgq1lfh useBoxStyles_position_absolute__3xgq1lfi useBoxStyles_backgroundColours_success__3xgq1lf3 IntentStripe_intentBox__1n5wa370"
+    class="reset_block__1oah0223 useBoxStyles_height_full__3xgq1lfl useBoxStyles_position_absolute__3xgq1lfm useBoxStyles_backgroundColours_success__3xgq1lf7 IntentStripe_intentBox__1n5wa370"
   />
   <div
-    class="reset_block__1oah0223 useBoxStyles_display_flex__3xgq1lfu useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lgr useNegativeMarginLeft_makeResponsiveStyle_key_bp__10sqwm24 useNegativeMarginTop_makeResponsiveStyle_key_bp__rvovxw10 useNegativeMarginTop_makeResponsiveStyle_key_bp__rvovxw11 useNegativeMarginTop_makeResponsiveStyle_key_bp__rvovxw12 useNegativeMarginTop_makeResponsiveStyle_key_bp__rvovxw13 Columns_align_stretch__15fwc182b Columns_wrapping_noWrap__15fwc1829"
+    class="reset_block__1oah0223 useBoxStyles_display_flex__3xgq1lfy useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lgv useNegativeMarginLeft_makeResponsiveStyle_key_bp__10sqwm24 useNegativeMarginTop_makeResponsiveStyle_key_bp__rvovxw10 useNegativeMarginTop_makeResponsiveStyle_key_bp__rvovxw11 useNegativeMarginTop_makeResponsiveStyle_key_bp__rvovxw12 useNegativeMarginTop_makeResponsiveStyle_key_bp__rvovxw13 Columns_align_stretch__15fwc182b Columns_wrapping_noWrap__15fwc1829"
   >
     <div
-      class="reset_block__1oah0223 useBoxStyles_flexGrow_0__3xgq1lh7 useBoxStyles_flexShrink_0__3xgq1lh9 Columns_makeResponsiveStyle_key_bp__15fwc184 Columns_makeResponsiveStyle_key_bp__15fwc1824 Columns_makeResponsiveStyle_key_bp__15fwc1825 Columns_makeResponsiveStyle_key_bp__15fwc1826 Columns_makeResponsiveStyle_key_bp__15fwc1827 Column_align_top__1ycz12q19"
+      class="reset_block__1oah0223 useBoxStyles_flexGrow_0__3xgq1lhb useBoxStyles_flexShrink_0__3xgq1lhd Columns_makeResponsiveStyle_key_bp__15fwc184 Columns_makeResponsiveStyle_key_bp__15fwc1824 Columns_makeResponsiveStyle_key_bp__15fwc1825 Columns_makeResponsiveStyle_key_bp__15fwc1826 Columns_makeResponsiveStyle_key_bp__15fwc1827 Column_align_top__1ycz12q19"
     >
       <div
-        class="reset_block__1oah0223 useBoxStyles_display_flex__3xgq1lfu useBoxStyles_width_full__3xgq1lff useBoxStyles_height_full__3xgq1lfh"
+        class="reset_block__1oah0223 useBoxStyles_display_flex__3xgq1lfy useBoxStyles_width_full__3xgq1lfj useBoxStyles_height_full__3xgq1lfl"
       >
         <div
-          class="reset_block__1oah0223 useBoxStyles_display_block__3xgq1lft Icon_makeResponsiveStyle_key_bp__1gy3ire4 reset_block__1oah0223 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l4k useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l6s useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l7w"
+          class="reset_block__1oah0223 useBoxStyles_display_block__3xgq1lfx Icon_makeResponsiveStyle_key_bp__1gy3ire4 reset_block__1oah0223 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l4k useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l6s useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l7w"
         >
           <svg
             aria-hidden="true"
-            class="useBoxStyles_display_block__3xgq1lft useBoxStyles_width_full__3xgq1lff useBoxStyles_height_full__3xgq1lfh"
+            class="useBoxStyles_display_block__3xgq1lfx useBoxStyles_width_full__3xgq1lfj useBoxStyles_height_full__3xgq1lfl"
             fill="currentColor"
             focusable="false"
             viewBox="0 0 24 24"
@@ -36,32 +36,32 @@ exports[`<Alert /> should match the snapshot 1`] = `
       </div>
     </div>
     <div
-      class="reset_block__1oah0223 useBoxStyles_flexGrow_1__3xgq1lh8 Columns_makeResponsiveStyle_key_bp__15fwc184 Columns_makeResponsiveStyle_key_bp__15fwc1824 Columns_makeResponsiveStyle_key_bp__15fwc1825 Columns_makeResponsiveStyle_key_bp__15fwc1826 Columns_makeResponsiveStyle_key_bp__15fwc1827 Column_makeResponsiveStyle_key_bp__1ycz12q14 Column_align_centre__1ycz12q1a"
+      class="reset_block__1oah0223 useBoxStyles_flexGrow_1__3xgq1lhc Columns_makeResponsiveStyle_key_bp__15fwc184 Columns_makeResponsiveStyle_key_bp__15fwc1824 Columns_makeResponsiveStyle_key_bp__15fwc1825 Columns_makeResponsiveStyle_key_bp__15fwc1826 Columns_makeResponsiveStyle_key_bp__15fwc1827 Column_makeResponsiveStyle_key_bp__1ycz12q14 Column_align_centre__1ycz12q1a"
     >
       <div
-        class="reset_block__1oah0223 useBoxStyles_display_flex__3xgq1lfu useBoxStyles_width_full__3xgq1lff useBoxStyles_height_full__3xgq1lfh useTextStyles_root__1xnpmd70 reset_block__1oah0223 useTextStyles_colours_dark__1xnpmd7f"
+        class="reset_block__1oah0223 useBoxStyles_display_flex__3xgq1lfy useBoxStyles_width_full__3xgq1lfj useBoxStyles_height_full__3xgq1lfl useTextStyles_root__1xnpmd70 reset_block__1oah0223 useTextStyles_colours_dark__1xnpmd7f"
       />
     </div>
     <div
-      class="reset_block__1oah0223 useBoxStyles_flexGrow_0__3xgq1lh7 useBoxStyles_flexShrink_0__3xgq1lh9 Columns_makeResponsiveStyle_key_bp__15fwc184 Columns_makeResponsiveStyle_key_bp__15fwc1824 Columns_makeResponsiveStyle_key_bp__15fwc1825 Columns_makeResponsiveStyle_key_bp__15fwc1826 Columns_makeResponsiveStyle_key_bp__15fwc1827 Column_align_top__1ycz12q19"
+      class="reset_block__1oah0223 useBoxStyles_flexGrow_0__3xgq1lhb useBoxStyles_flexShrink_0__3xgq1lhd Columns_makeResponsiveStyle_key_bp__15fwc184 Columns_makeResponsiveStyle_key_bp__15fwc1824 Columns_makeResponsiveStyle_key_bp__15fwc1825 Columns_makeResponsiveStyle_key_bp__15fwc1826 Columns_makeResponsiveStyle_key_bp__15fwc1827 Column_align_top__1ycz12q19"
     >
       <div
-        class="reset_block__1oah0223 useBoxStyles_display_flex__3xgq1lfu useBoxStyles_width_full__3xgq1lff useBoxStyles_height_full__3xgq1lfh"
+        class="reset_block__1oah0223 useBoxStyles_display_flex__3xgq1lfy useBoxStyles_width_full__3xgq1lfj useBoxStyles_height_full__3xgq1lfl"
       >
         <button
           aria-label="close"
-          class="reset_appearance__1oah0220 reset_cursorPointer__1oah0221 reset_trimmedBlockElement__1oah0225 reset_button__1oah0226 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l10 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l1c useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l38 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l3k useBoxStyles_display_inlineBlock__3xgq1lfy useBoxStyles_overflow_hidden__3xgq1lfo useBoxStyles_textAlign_center__3xgq1lfm useBoxStyles_border_style__3xgq1l9k useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lb9 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lbp useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lc5 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lcl useBoxStyles_makeResponsiveStyle_key_bp__3xgq1ld5 useTextStyles_root__1xnpmd70 reset_block__1oah0223 useTextStyles_colours_white__1xnpmd7g useTextStyles_fontWeight_semiBold__1xnpmd7p useTextStyles_sizes_3__1xnpmd73 Button_root__p2yon50 Button_minimal_defaults__p2yon5r Button_minimalStates_secondary__p2yon5v Button_size_small_default__p2yon57 Button_size_small_rounded__p2yon58 Button_size_small_iconOnly__p2yon59 Button_enabled__p2yon54"
+          class="reset_appearance__1oah0220 reset_cursorPointer__1oah0221 reset_trimmedBlockElement__1oah0225 reset_button__1oah0226 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l10 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l1c useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l38 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1l3k useBoxStyles_display_inlineBlock__3xgq1lg2 useBoxStyles_overflow_hidden__3xgq1lfs useBoxStyles_textAlign_center__3xgq1lfq useBoxStyles_border_style__3xgq1l9k useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lb9 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lbp useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lc5 useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lcl useBoxStyles_makeResponsiveStyle_key_bp__3xgq1ld9 useTextStyles_root__1xnpmd70 reset_block__1oah0223 useTextStyles_colours_white__1xnpmd7g useTextStyles_fontWeight_semiBold__1xnpmd7p useTextStyles_sizes_3__1xnpmd73 Button_root__p2yon50 Button_minimal_defaults__p2yon5r Button_minimalStates_secondary__p2yon5v Button_size_small_default__p2yon57 Button_size_small_rounded__p2yon58 Button_size_small_iconOnly__p2yon59 Button_enabled__p2yon54"
           type="button"
         >
           <div
-            class="reset_block__1oah0223 useBoxStyles_height_full__3xgq1lfh useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lgj useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lhg Button_body__p2yon51"
+            class="reset_block__1oah0223 useBoxStyles_height_full__3xgq1lfl useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lgn useBoxStyles_makeResponsiveStyle_key_bp__3xgq1lhk Button_body__p2yon51"
           >
             <div
-              class="reset_block__1oah0223 useBoxStyles_display_block__3xgq1lft Icon_makeResponsiveStyle_key_bp__1gy3ire4 useTextStyles_root__1xnpmd70 reset_block__1oah0223 useTextStyles_colours_muted__1xnpmd7h"
+              class="reset_block__1oah0223 useBoxStyles_display_block__3xgq1lfx Icon_makeResponsiveStyle_key_bp__1gy3ire4 useTextStyles_root__1xnpmd70 reset_block__1oah0223 useTextStyles_colours_muted__1xnpmd7h"
             >
               <svg
                 aria-hidden="true"
-                class="useBoxStyles_display_block__3xgq1lft useBoxStyles_width_full__3xgq1lff useBoxStyles_height_full__3xgq1lfh"
+                class="useBoxStyles_display_block__3xgq1lfx useBoxStyles_width_full__3xgq1lfj useBoxStyles_height_full__3xgq1lfl"
                 fill="currentColor"
                 focusable="false"
                 viewBox="0 0 24 24"