From 8a1b552f8dbc3a9b321d888f4a7e9dc9af2922cf Mon Sep 17 00:00:00 2001
From: Tasso Evangelista <tasso.evangelista@rocket.chat>
Date: Fri, 22 Jan 2021 23:51:57 -0300
Subject: [PATCH] fix: Pass appId and blockId from blocks to elements (#366)

---
 .../src/blocks/ActionsBlock.js                |  32 +++++++++++-------
 .../src/blocks/ContextBlock.js                |  27 ++++++++++-----
 .../src/blocks/DividerBlock.js                |   4 +--
 .../fuselage-ui-kit/src/blocks/ImageBlock.js  |  22 ++++++------
 .../fuselage-ui-kit/src/blocks/InputBlock.js  |  23 ++++++++-----
 .../src/blocks/SectionBlock.js                |  12 +++----
 .../src/elements/ButtonElement.js             |   4 +--
 .../src/elements/DatePickerElement.js         |   4 +--
 .../src/elements/MultiStaticSelectElement.js  |   4 +--
 .../src/elements/OverflowElement.js           |   4 +--
 .../src/elements/PlainInputElement.js         |   4 +--
 .../src/elements/StaticSelectElement.js       |   4 +--
 packages/fuselage-ui-kit/src/hooks.js         |   4 +--
 packages/fuselage-ui-kit/src/renderers.js     |  27 ++++++---------
 ...one7_Forms_Inputs_AutoComplete_Example.png | Bin 1047 -> 967 bytes
 ...ptop_Forms_Inputs_AutoComplete_Example.png | Bin 535 -> 503 bytes
 16 files changed, 95 insertions(+), 80 deletions(-)

diff --git a/packages/fuselage-ui-kit/src/blocks/ActionsBlock.js b/packages/fuselage-ui-kit/src/blocks/ActionsBlock.js
index 3b1c6f6b33..035ce09ae1 100644
--- a/packages/fuselage-ui-kit/src/blocks/ActionsBlock.js
+++ b/packages/fuselage-ui-kit/src/blocks/ActionsBlock.js
@@ -1,12 +1,12 @@
 import { Box, Button } from '@rocket.chat/fuselage';
 import { BlockContext, ElementType } from '@rocket.chat/ui-kit';
-import React, { useCallback, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 
 import { useSurfaceType } from '../surfaces/SurfaceContext';
 
-const Action = ({ blockId, appId, element, parser }) => {
+const Action = ({ element, parser }) => {
   const renderedElement = parser.renderActions(
-    { blockId, appId, ...element },
+    element,
     BlockContext.ACTION,
     parser
   );
@@ -27,9 +27,11 @@ const Action = ({ blockId, appId, element, parser }) => {
   );
 };
 
-const ActionsBlock = ({ className, blockId, appId, elements, parser }) => {
+const ActionsBlock = ({ className, blockElement, parser }) => {
   const surfaceType = useSurfaceType();
 
+  const { appId, blockId, elements } = blockElement;
+
   const [showMoreVisible, setShowMoreVisible] = useState(
     () => elements.length > 5 && surfaceType !== 'banner'
   );
@@ -38,16 +40,20 @@ const ActionsBlock = ({ className, blockId, appId, elements, parser }) => {
     setShowMoreVisible(false);
   }, []);
 
+  const actionElements = useMemo(
+    () =>
+      (showMoreVisible ? elements.slice(0, 5) : elements).map((element) => ({
+        appId,
+        blockId,
+        ...element,
+      })),
+    [appId, blockId, elements, showMoreVisible]
+  );
+
   return (
     <Box className={className} display='flex' flexWrap='wrap' margin={-4}>
-      {(showMoreVisible ? elements.slice(0, 5) : elements).map((element, i) => (
-        <Action
-          key={i}
-          blockId={blockId}
-          appId={appId}
-          element={element}
-          parser={parser}
-        />
+      {actionElements.map((element, i) => (
+        <Action key={i} element={element} parser={parser} />
       ))}
       {showMoreVisible && (
         <Box display='flex' margin={4}>
@@ -64,4 +70,4 @@ const ActionsBlock = ({ className, blockId, appId, elements, parser }) => {
   );
 };
 
-export default ActionsBlock;
+export default memo(ActionsBlock);
diff --git a/packages/fuselage-ui-kit/src/blocks/ContextBlock.js b/packages/fuselage-ui-kit/src/blocks/ContextBlock.js
index bc717a79d1..cea005300b 100644
--- a/packages/fuselage-ui-kit/src/blocks/ContextBlock.js
+++ b/packages/fuselage-ui-kit/src/blocks/ContextBlock.js
@@ -1,6 +1,6 @@
 import { Box } from '@rocket.chat/fuselage';
 import { BlockContext, ElementType } from '@rocket.chat/ui-kit';
-import React from 'react';
+import React, { memo, useMemo } from 'react';
 
 const Item = ({ element, parser }) => {
   const renderedElement = parser.renderContext(
@@ -27,12 +27,21 @@ const Item = ({ element, parser }) => {
   }
 };
 
-const ContextBlock = ({ className, elements, parser }) => (
-  <Box className={className} display='flex' alignItems='center' margin={-4}>
-    {elements.map((element, i) => (
-      <Item key={i} element={element} parser={parser} />
-    ))}
-  </Box>
-);
+const ContextBlock = ({ className, blockElement, parser }) => {
+  const { appId, blockId, elements } = blockElement;
 
-export default ContextBlock;
+  const itemElements = useMemo(
+    () => elements.map((element) => ({ appId, blockId, ...element })),
+    [appId, blockId, elements]
+  );
+
+  return (
+    <Box className={className} display='flex' alignItems='center' margin={-4}>
+      {itemElements.map((element, i) => (
+        <Item key={i} element={element} parser={parser} />
+      ))}
+    </Box>
+  );
+};
+
+export default memo(ContextBlock);
diff --git a/packages/fuselage-ui-kit/src/blocks/DividerBlock.js b/packages/fuselage-ui-kit/src/blocks/DividerBlock.js
index 0038050c52..e982ebd23c 100644
--- a/packages/fuselage-ui-kit/src/blocks/DividerBlock.js
+++ b/packages/fuselage-ui-kit/src/blocks/DividerBlock.js
@@ -1,8 +1,8 @@
 import { Divider } from '@rocket.chat/fuselage';
-import React from 'react';
+import React, { memo } from 'react';
 
 const DividerBlock = ({ className }) => (
   <Divider className={className} marginBlock='x24' />
 );
 
-export default DividerBlock;
+export default memo(DividerBlock);
diff --git a/packages/fuselage-ui-kit/src/blocks/ImageBlock.js b/packages/fuselage-ui-kit/src/blocks/ImageBlock.js
index 6856022459..47d0c24ba9 100644
--- a/packages/fuselage-ui-kit/src/blocks/ImageBlock.js
+++ b/packages/fuselage-ui-kit/src/blocks/ImageBlock.js
@@ -1,5 +1,5 @@
 import { Box, Skeleton } from '@rocket.chat/fuselage';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { memo, useEffect, useMemo, useState } from 'react';
 
 import { useSurfaceType } from '../surfaces/SurfaceContext';
 
@@ -28,7 +28,7 @@ const fetchImageState = (img) => {
   };
 };
 
-const ImageBlock = ({ className, element, parser }) => {
+const ImageBlock = ({ className, blockElement, parser }) => {
   const surface = useSurfaceType();
 
   const alignment =
@@ -36,7 +36,7 @@ const ImageBlock = ({ className, element, parser }) => {
 
   const [{ loading, width, height }, setState] = useState(() => {
     const img = document.createElement('img');
-    img.src = element.imageUrl;
+    img.src = blockElement.imageUrl;
     return fetchImageState(img);
   });
 
@@ -48,7 +48,7 @@ const ImageBlock = ({ className, element, parser }) => {
     };
 
     img.addEventListener('load', handleLoad);
-    img.src = element.imageUrl;
+    img.src = blockElement.imageUrl;
 
     if (img.complete) {
       img.removeEventListener('load', handleLoad);
@@ -58,7 +58,7 @@ const ImageBlock = ({ className, element, parser }) => {
     return () => {
       img.removeEventListener('load', handleLoad);
     };
-  }, [element.imageUrl]);
+  }, [blockElement.imageUrl]);
 
   const style = useMemo(
     () => ({
@@ -67,9 +67,9 @@ const ImageBlock = ({ className, element, parser }) => {
       backgroundPosition: '50%',
       backgroundSize: 'cover',
       backgroundColor: 'rgba(204, 204, 204, 38%)',
-      backgroundImage: `url(${element.imageUrl})`,
+      backgroundImage: `url(${blockElement.imageUrl})`,
     }),
-    [element.imageUrl]
+    [blockElement.imageUrl]
   );
 
   return (
@@ -81,9 +81,9 @@ const ImageBlock = ({ className, element, parser }) => {
       alignItems={alignment}
     >
       <Box overflow='hidden' width={width}>
-        {element.title && (
+        {blockElement.title && (
           <Box fontScale='c1' color='info' withTruncatedText marginBlockEnd={4}>
-            {parser.plainText(element.title, -1, 0)}
+            {parser.plainText(blockElement.title, -1, 0)}
           </Box>
         )}
         {loading ? (
@@ -95,7 +95,7 @@ const ImageBlock = ({ className, element, parser }) => {
             width={width}
             height={height}
             style={style}
-            aria-label={element.altText}
+            aria-label={blockElement.altText}
           />
         )}
       </Box>
@@ -103,4 +103,4 @@ const ImageBlock = ({ className, element, parser }) => {
   );
 };
 
-export default ImageBlock;
+export default memo(ImageBlock);
diff --git a/packages/fuselage-ui-kit/src/blocks/InputBlock.js b/packages/fuselage-ui-kit/src/blocks/InputBlock.js
index 9fdbfe3cde..f6bb621dda 100644
--- a/packages/fuselage-ui-kit/src/blocks/InputBlock.js
+++ b/packages/fuselage-ui-kit/src/blocks/InputBlock.js
@@ -1,22 +1,27 @@
 import { Field } from '@rocket.chat/fuselage';
 import { BlockContext } from '@rocket.chat/ui-kit';
-import React, { memo } from 'react';
+import React, { memo, useMemo } from 'react';
 
-import { useBlockContext } from '../hooks';
+import { useUiKitState } from '../hooks';
 
-const InputBlock = ({ className, element, parser, context }) => {
-  const [{ error }] = useBlockContext(element.element, context);
+const InputBlock = ({ className, blockElement, parser, context }) => {
+  const { appId, blockId, element, label, hint } = blockElement;
+  const inputElement = useMemo(() => ({ appId, blockId, ...element }), [
+    appId,
+    blockId,
+    element,
+  ]);
+
+  const [{ error }] = useUiKitState(inputElement, context);
 
   return (
     <Field className={className}>
-      {element.label && (
-        <Field.Label>{parser.plainText(element.label)}</Field.Label>
-      )}
+      {label && <Field.Label>{parser.plainText(label)}</Field.Label>}
       <Field.Row>
-        {parser.renderInputs(element.element, BlockContext.FORM, parser, 0)}
+        {parser.renderInputs(inputElement, BlockContext.FORM, parser, 0)}
       </Field.Row>
       {error && <Field.Error>{error}</Field.Error>}
-      {element.hint && <Field.Hint>{element.hint}</Field.Hint>}
+      {hint && <Field.Hint>{hint}</Field.Hint>}
     </Field>
   );
 };
diff --git a/packages/fuselage-ui-kit/src/blocks/SectionBlock.js b/packages/fuselage-ui-kit/src/blocks/SectionBlock.js
index 48e6b33f42..a021a799c2 100644
--- a/packages/fuselage-ui-kit/src/blocks/SectionBlock.js
+++ b/packages/fuselage-ui-kit/src/blocks/SectionBlock.js
@@ -1,6 +1,6 @@
 import { Box, Flex, Grid } from '@rocket.chat/fuselage';
 import { BlockContext } from '@rocket.chat/ui-kit';
-import React, { useMemo } from 'react';
+import React, { memo, useMemo } from 'react';
 
 const Accessory = ({ blockId, appId, element, parser }) =>
   parser.renderAccessories(
@@ -27,12 +27,12 @@ const Fields = ({ fields, parser }) => (
   </Grid>
 );
 
-const SectionBlock = ({ className, element, parser }) => {
-  const { blockId, appId, text, fields, accessory } = element;
+const SectionBlock = ({ className, blockElement, parser }) => {
+  const { blockId, appId, text, fields, accessory } = blockElement;
 
-  const accessoryElement = useMemo(() => ({ blockId, appId, ...accessory }), [
-    blockId,
+  const accessoryElement = useMemo(() => ({ appId, blockId, ...accessory }), [
     appId,
+    blockId,
     accessory,
   ]);
 
@@ -57,4 +57,4 @@ const SectionBlock = ({ className, element, parser }) => {
   );
 };
 
-export default SectionBlock;
+export default memo(SectionBlock);
diff --git a/packages/fuselage-ui-kit/src/elements/ButtonElement.js b/packages/fuselage-ui-kit/src/elements/ButtonElement.js
index 4060aa5e72..0390832376 100644
--- a/packages/fuselage-ui-kit/src/elements/ButtonElement.js
+++ b/packages/fuselage-ui-kit/src/elements/ButtonElement.js
@@ -1,10 +1,10 @@
 import { Button, Throbber } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import { useBlockContext } from '../hooks';
+import { useUiKitState } from '../hooks';
 
 const ButtonElement = ({ element, context, parser }) => {
-  const [{ loading }, action] = useBlockContext(element, context);
+  const [{ loading }, action] = useUiKitState(element, context);
 
   return (
     <Button
diff --git a/packages/fuselage-ui-kit/src/elements/DatePickerElement.js b/packages/fuselage-ui-kit/src/elements/DatePickerElement.js
index 2af8b1b234..a2d0d2936a 100644
--- a/packages/fuselage-ui-kit/src/elements/DatePickerElement.js
+++ b/packages/fuselage-ui-kit/src/elements/DatePickerElement.js
@@ -1,10 +1,10 @@
 import { InputBox } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import { useBlockContext } from '../hooks';
+import { useUiKitState } from '../hooks';
 
 const DatePickerElement = ({ element, context, parser }) => {
-  const [{ loading, value, error }, action] = useBlockContext(element, context);
+  const [{ loading, value, error }, action] = useUiKitState(element, context);
   const { actionId, placeholder } = element;
   return (
     <InputBox
diff --git a/packages/fuselage-ui-kit/src/elements/MultiStaticSelectElement.js b/packages/fuselage-ui-kit/src/elements/MultiStaticSelectElement.js
index 3bcdeda1b1..40ebd8764c 100644
--- a/packages/fuselage-ui-kit/src/elements/MultiStaticSelectElement.js
+++ b/packages/fuselage-ui-kit/src/elements/MultiStaticSelectElement.js
@@ -1,10 +1,10 @@
 import { MultiSelectFiltered } from '@rocket.chat/fuselage';
 import React, { memo, useCallback, useMemo } from 'react';
 
-import { useBlockContext } from '../hooks';
+import { useUiKitState } from '../hooks';
 
 export const MultiStaticSelectElement = ({ element, context, parser }) => {
-  const [{ loading, value, error }, action] = useBlockContext(element, context);
+  const [{ loading, value, error }, action] = useUiKitState(element, context);
 
   const { options, placeholder } = element;
 
diff --git a/packages/fuselage-ui-kit/src/elements/OverflowElement.js b/packages/fuselage-ui-kit/src/elements/OverflowElement.js
index 0029590828..0e0089bfa0 100644
--- a/packages/fuselage-ui-kit/src/elements/OverflowElement.js
+++ b/packages/fuselage-ui-kit/src/elements/OverflowElement.js
@@ -7,13 +7,13 @@ import {
 } from '@rocket.chat/fuselage';
 import React, { useRef, useCallback } from 'react';
 
-import { useBlockContext } from '../hooks';
+import { useUiKitState } from '../hooks';
 
 const convertOptions = (options, parser) =>
   options.map(({ text, value }) => [value, parser(text)]);
 
 const OverflowElement = ({ element, context, parser }) => {
-  const [{ loading }, action] = useBlockContext(element, context);
+  const [{ loading }, action] = useUiKitState(element, context);
 
   const { options } = element;
 
diff --git a/packages/fuselage-ui-kit/src/elements/PlainInputElement.js b/packages/fuselage-ui-kit/src/elements/PlainInputElement.js
index 32407e7bc0..8ec7950526 100644
--- a/packages/fuselage-ui-kit/src/elements/PlainInputElement.js
+++ b/packages/fuselage-ui-kit/src/elements/PlainInputElement.js
@@ -1,10 +1,10 @@
 import { TextAreaInput, TextInput } from '@rocket.chat/fuselage';
 import React, { memo } from 'react';
 
-import { useBlockContext } from '../hooks';
+import { useUiKitState } from '../hooks';
 
 const PlainInputElement = ({ element, context, parser }) => {
-  const [{ loading, value, error }, action] = useBlockContext(element, context);
+  const [{ loading, value, error }, action] = useUiKitState(element, context);
   const { multiline, actionId, placeholder } = element;
   const Component = multiline ? TextAreaInput : TextInput;
   return (
diff --git a/packages/fuselage-ui-kit/src/elements/StaticSelectElement.js b/packages/fuselage-ui-kit/src/elements/StaticSelectElement.js
index 71be476ce8..0827ecd60e 100644
--- a/packages/fuselage-ui-kit/src/elements/StaticSelectElement.js
+++ b/packages/fuselage-ui-kit/src/elements/StaticSelectElement.js
@@ -1,10 +1,10 @@
 import { SelectFiltered } from '@rocket.chat/fuselage';
 import React, { memo, useCallback, useMemo } from 'react';
 
-import { useBlockContext } from '../hooks';
+import { useUiKitState } from '../hooks';
 
 export const StaticSelectElement = ({ element, context, parser }) => {
-  const [{ loading, value, error }, action] = useBlockContext(element, context);
+  const [{ loading, value, error }, action] = useUiKitState(element, context);
 
   const { options, placeholder } = element;
 
diff --git a/packages/fuselage-ui-kit/src/hooks.js b/packages/fuselage-ui-kit/src/hooks.js
index 846de66676..2a4efb4b1a 100644
--- a/packages/fuselage-ui-kit/src/hooks.js
+++ b/packages/fuselage-ui-kit/src/hooks.js
@@ -11,7 +11,7 @@ export const defaultContext = {
 
 export const kitContext = createContext(defaultContext);
 
-export const useBlockContext = (
+export const useUiKitState = (
   { blockId, actionId, appId, initialValue },
   context
 ) => {
@@ -45,7 +45,7 @@ export const useBlockContext = (
 
   const stateFunction = useMutableCallback(async ({ target: { value } }) => {
     setValue(value);
-    await state({ blockId, appId, actionId, value });
+    await state({ blockId, appId: appId || appIdFromContext, actionId, value });
   });
 
   const result = useMemo(() => ({ loading, setLoading, error, value }), [
diff --git a/packages/fuselage-ui-kit/src/renderers.js b/packages/fuselage-ui-kit/src/renderers.js
index 8af767ed21..aa693fc9cc 100644
--- a/packages/fuselage-ui-kit/src/renderers.js
+++ b/packages/fuselage-ui-kit/src/renderers.js
@@ -41,7 +41,7 @@ export function section(element, context, index) {
   return (
     <SectionBlock
       key={index}
-      element={element}
+      blockElement={element}
       context={context}
       parser={this}
     />
@@ -51,7 +51,7 @@ export function section(element, context, index) {
 export function image(element, context, index) {
   switch (context) {
     case BlockContext.BLOCK:
-      return <ImageBlock key={index} element={element} parser={this} />;
+      return <ImageBlock key={index} blockElement={element} parser={this} />;
 
     case BlockContext.SECTION:
     case BlockContext.CONTEXT:
@@ -67,25 +67,15 @@ export function actions(element, context, index) {
     return null;
   }
 
-  const { blockId, appId, elements } = element;
-
-  return (
-    <ActionsBlock
-      key={index}
-      blockId={blockId}
-      appId={appId}
-      elements={elements}
-      parser={this}
-    />
-  );
+  return <ActionsBlock key={index} blockElement={element} parser={this} />;
 }
 
-export function context({ elements }, context, index) {
+export function context(element, context, index) {
   if (context !== BlockContext.BLOCK) {
     return null;
   }
 
-  return <ContextBlock key={index} elements={elements} parser={this} />;
+  return <ContextBlock key={index} blockElement={element} parser={this} />;
 }
 
 export function input(element, context, index) {
@@ -94,7 +84,12 @@ export function input(element, context, index) {
   }
 
   return (
-    <InputBlock key={index} context={context} parser={this} element={element} />
+    <InputBlock
+      key={index}
+      blockElement={element}
+      context={context}
+      parser={this}
+    />
   );
 }
 
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_AutoComplete_Example.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_AutoComplete_Example.png
index 6bfbf135e88a203c0c6e7c3cd361722bdb53a18f..d4fa03d321ff82a1bf1765e2035b37c29589bcb8 100644
GIT binary patch
literal 967
zcmeAS@N?(olHy`uVBq!ia0y~yV3Gr}131`#WEfvfJ&<B74sv&5Sa(k5C6L2X?Bp53
z0R%N1DIE+9%!QsVjv*Cu-rlnHPDz(I{_yrp*(-<cI(6vBazwE){bc&gxJ7X8PoZsE
zS*sV-F<NIkx*T;2(8+Oja@ytKF*R1#MZD8ZR^9c$8$F><i@sm{xNB9g4ga6h^3UgN
zOWS<Y#<p7ieP7?>M~{r8wr^)-_#kj<X;4X7nM-`W|DMXbqPfeLr=Oi)_iyQoSO$k~
z=^u|iYwWeP(yL-;_`tNMwp?WCeLcPIdyEWw7{sUVKfe05|G$?%ey!H$p2f_tWmf*a
z-w)sIyqMv#@_;VG0d8d*h6a;E%nTj_%HRrGeRa|9-PUGiX8$h#y?OKIi&w9@rcRy8
z9`~)Hg`GhprM}+Y&(CjB*y_Kpf6SOMqhsgJofh`?{d@QBb&vY-0j#97)KqJ#*PT0e
zT=vHGpFMlFz9he>$Y|R1>B>rr_V2eB6BCmwe%34`#}F`K;lhOx@$vm$ONFjqziwz|
zCKeqXU0<D^m8CUp+BBs{=U-S@SadWtHumh~cdB4;Xl!e5x9{q|c=6(md-wKzfAi%_
ziH@G0+mZN-h87kxEWg(a0}b8q`%!Xw`t!xcKu|tEWL|cO3kN?#g^*oO|LWDNB_t(x
zcJ~84He>$${*LFevVy=cpV#yI(c-xE$M4*Uak2UTqC-HA;lq*|Df#T|Y{83C7X=k<
z7#^JbX<(-mrEaAJ^rMaE;lqbF?%pl^`0?Yyii#UT7X<}Bu6n`9aNzH%t63qyAWXN>
z$RGF!&AnguKY8=T43WLe3>k$_i!8n7%D#1d&%hAZaIWv0#@DYkVPE(d9<aW6{k9XF
z-mR<U_shv1KYBFv&b@nLd$}1h1cAD&tZyw|zg_*_o_AgL41128C^~HEWCqNP44$rj
JF6*2UngGs>e3JkG

literal 1047
zcmeAS@N?(olHy`uVBq!ia0y~yVA2D!6FAs_q*eRRS3rufILO_JVcj{Imp~3nv6E*A
z2N2Y7q;xPaFdy`EaSW-L^Y+$$uat6$;}5SFy6WE1ZTYdB+wru6g1LeC1CvF@=83Bp
zZCkv;JRx1TW5o@QuGU-+4-avUm77+#zEF}}e9ot<_3W;WG~v4^t!?~EyFNGP|9tqz
z&wcaFoO$tkdd=0B2d<8F-FuOPq2Yh?IVZ)c>guG70)@D}Z@T+Ff9`&!zyII0SFsEX
z{8B$(oz~c6XPNtzkD<YRZ(Xrat9@4Z+Ix%)A6DGDI{)LMj~DHA@7H}U?S96<aOdk?
ze*3-k>#n~J%y=lq(BQ8W!_Z*T!p$(Dt$>l?l7JqAgVZ5b1`p>Q3=EkZ;tUGB51AO2
zC=M1y4na?gEPws}ot&NhI(}|^L`28FefuJ!qpKgKo_F8D;1JZ_-d<Q%Cib-G=j6w!
zRaI82u4cu=#T`3%@Sw47O%>2*lcM6|``4{ow`1?#UazG>w{PG6|KiS>Gd^q9t#flZ
z^5H{)j;^ll^E2wIF$@YTH*VZ`<IbHPkn){7J5QcGdE@5I$`5DWyvbR!W{t~{-5Hiv
zR$UV(PCRe;-4hsC9&19h?siV^?CiX8_wL^BcX#gG84(xP*Rg+bYDvkL;&Xq`0|Q#6
zJburcw{P!Orq|W|`#Uw@T1F=@)GvtH^-O>L`n80-e7(FrH#hgj9XlihcP>_S0{ZIq
z4*fW-sa_$guXdb}*A)c%;?}9-A2)5>C@A<=5W+v#{!!?n-9;f_OfArz>b3O7{rmkZ
zSFW_Mv&-ww=<KMt_==I?z-JAy?m!)}Xxqo0KOYUIXvLq@Wbgm~QM@^B{q`z$h6Bx3
z*4B$J+`fGGl`I28|Esqz`wm?=AP!0G3lBEF$S|9Iw!3@#$KNM2uVjT^%rJ@C%gvym
qbT5|w>$j5Q7aln5sk$j%&uIDX#H2qH{-gmjH-o3EpUXO@geCwl^{F-h

diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_AutoComplete_Example.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_AutoComplete_Example.png
index 9d06ff43d2fedbcec54875188709695b11f14409..481797781c02f528c53aa5dc629fc61a76520069 100644
GIT binary patch
literal 503
zcmeAS@N?(olHy`uVBq!ia0y~yVB`m~H8|LS<b#j(EI^8}ILO_JVcj{Imp~3nv6E*A
z2N2Y7q;vq~7J9lkhE&XXd(AM5DNw}i;eCb5&5ew`-U3V$8}=r@mAliX@U5xWd&34v
z7HjKp0S*@d@dPJ<T2IU16)Sy&oes4Ix}6I@*SvGP)t#pQKWz5x+pFyv%y=N4>3PUb
z?UfrM*7bQhSup&G7qAfZe^^noWB&&$hEES({&e-6^y=BAZiW-;j~EZMR4^DQ$}#wK
zurmk~!?iS%>fLfTufA5k|M;yOvzceq<Q)2V+nrqlm)y<!{&?->mn-h(W$%qkH=13+
zU}-k{Y>9=8i0i~X-|yeweRmyObK@h6u(e^QQ_Max6zT9dpM75Z_ItJIY~RZFS6_d<
z^8UN%@r_Yy!_qc)&-^QSAaV}Vr3{mhwP8>9p0|+^n$BJz>c_b9`s-OfYBSrNAAMq2
z=O)oM%Wrx5?Bh>K_lkk0&a~CZla@@s$L!F@(s<c-Y0RYJ?bGkEI{2}iTN$MHl6!wy
W^7Tb(lbL~$$KdJe=d#Wzp$P!3*vEnZ

literal 535
zcmeAS@N?(olHy`uVBq!ia0y~yU=#<k4LI0<q&2VIJ0Qha9OUlAu<o49OCX1(*vT`5
z0|;t3QaXTg2R&UJLn`LHy=IstohZ<7aiZbPy$ue1eF+>#SgusZ{^r}&=D5Oq#Ye%I
z9g!^W?!07abl^G0Uf?8fP3`Hb4RgFQomN#W+EBOtj(pj&Uo+x9|2_VB`uh8eV%IZ2
z$e-#eczApBi@W#k+HYUGfkA({PWO%bZBGyXF1L<jf6>%G-_HH^y5#)p-3)hC^c=Vf
z8G|~wCpg74h&*CiA|S5Nx`RRU2&;!80jWm5-Fx=*96x^CeqVfS?9rl~J~MUoE+mSJ
ziwA~=t_fRx|K7QC=aOvXjvqekd@839sC?(n&a-L4p`osqP4@5eSDQTJY+B&;QW;s<
zrDw#%Uu>w`FW-GsY2LhfkDfeHnYFC*Wr@`D=g)yE=FFS7?Cd@N-^L%}Z?HZ4@xy|T
zpMP=YtS=i}cEmggy}_1dB6YOJ&Y$1A<uq$tFVL9l*RTK2nRlA7A8`7->)zYDe~WLg
zE8ok0K`}M*$h{8<0<Is^uJ2}$4HR?b;b;3O+#r(tT<+G#CBVpK@O1TaS?83{1OS`X
B;eP-C