diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_Square.png b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_Square.png
index 5be8542ce7..0ebeb6832d 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_Square.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_Square.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States.png b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States.png
index 52fb92537a..db11fcdf8e 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Small_Variant.png b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Small_Variant.png
index befc2fbdaf..8be8b9da7b 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Small_Variant.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Small_Variant.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Variant.png b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Variant.png
index f8f9208b9a..e5596e09ab 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Variant.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Ghost_Variant.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Primary_Small_Variant.png b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Primary_Small_Variant.png
index c516ccca94..f0e4591164 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Primary_Small_Variant.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Primary_Small_Variant.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Primary_Variant.png b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Primary_Variant.png
index 716865d227..75dbf3d121 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Primary_Variant.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_Of_Primary_Variant.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_of_Small_Variant.png b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_of_Small_Variant.png
index c5d36e2bb4..1fc0c55fac 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_of_Small_Variant.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_States_of_Small_Variant.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_With_Icon.png b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_With_Icon.png
index 9450c8ea9e..f729635c93 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_With_Icon.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Buttons_Button_With_Icon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Default.png
index 5b56750b3b..8b17e3469d 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Default.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Disabled.png b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Disabled.png
index ad981cdcc9..e54eb2e704 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Disabled.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Disabled.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Enabled.png b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Enabled.png
index f83c3cf2ea..b2e080d436 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Enabled.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Enabled.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Expanded.png b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Expanded.png
index 43a53fa301..91a057b117 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Expanded.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Accordion_Item_Expanded.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Default.png
index 8dbc6b4391..38bf6e0f74 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Default.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Accordion_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Modal_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Modal_Default.png
index de99cd40b3..0d44c13f5b 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Modal_Default.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Containers_Modal_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Pagination_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Pagination_Default.png
index 5725d4cd3e..deb023bf3e 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Pagination_Default.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Pagination_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Pagination_Divider.png b/packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Pagination_Divider.png
index 1370d8b829..e3bc8084c0 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Pagination_Divider.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Data_Display_Pagination_Divider.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_InputBox_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_InputBox_With_Icon_Addon.png
index 29a7ea00ef..919a811370 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_InputBox_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_InputBox_With_Icon_Addon.png differ
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 cb16e6e42f..7f5d91fb9c 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_AutoComplete_Example.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_AutoComplete_Example.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_EmailInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_EmailInput_With_Icon_Addon.png
index 29a7ea00ef..919a811370 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_EmailInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_EmailInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_NumberInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_NumberInput_With_Icon_Addon.png
index 29a7ea00ef..919a811370 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_NumberInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_NumberInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_PasswordInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_PasswordInput_With_Icon_Addon.png
index 29a7ea00ef..919a811370 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_PasswordInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_PasswordInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SearchInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SearchInput_With_Icon_Addon.png
index 29a7ea00ef..919a811370 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SearchInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SearchInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Default.png
index 7a4fafe84d..687d9451b4 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Default.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Disabled.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Disabled.png
index a34e609447..8690c4db47 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Disabled.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Disabled.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Invalid.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Invalid.png
index 22ac66b24b..1ac3734ade 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Invalid.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Invalid.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Multiple_With_Addon.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Multiple_With_Addon.png
index 8879c3ddbc..f4e2b6f18c 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Multiple_With_Addon.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_Multiple_With_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_States.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_States.png
index e350c07358..ff79cafdbb 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_States.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_States.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_With_Addon.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_With_Addon.png
index 7a4fafe84d..687d9451b4 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_With_Addon.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_With_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_With_Placeholder.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_With_Placeholder.png
index ffd0014171..de52c6316c 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_With_Placeholder.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_With_Placeholder.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_With_Value.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_With_Value.png
index 5b35cdd911..51a46a1f7e 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_With_Value.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_SelectInput_With_Value.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Default.png
index a4799e0512..cb7adeb6b0 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Default.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Disabled.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Disabled.png
index 135740c05d..aea8d39895 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Disabled.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Disabled.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Error.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Error.png
index 54476380e8..95f5ad796e 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Error.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Error.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelect.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelect.png
index ad2dff8eeb..2b10e302cf 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelect.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelect.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelectFiltered.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelectFiltered.png
index b0a6dc8cd1..485f80f3cb 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelectFiltered.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelectFiltered.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelectFiltered_disabled.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelectFiltered_disabled.png
index 14d17e9dd2..fea6ecf1ac 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelectFiltered_disabled.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelectFiltered_disabled.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelectFiltered_error.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelectFiltered_error.png
index db48727c29..3b5205dd0c 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelectFiltered_error.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelectFiltered_error.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelect_Disabled.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelect_Disabled.png
index fe847a5c68..169a3d52b6 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelect_Disabled.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelect_Disabled.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelect_Error.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelect_Error.png
index 1d9fedd73c..73aab01597 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelect_Error.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_MultiSelect_Error.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_No_Placeholder.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_No_Placeholder.png
index f3a4535281..129c3a0b31 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_No_Placeholder.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_No_Placeholder.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter.png
index 75ffc41819..8c85dd1970 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter_and_disabled.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter_and_disabled.png
index 1a9742259b..590530b637 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter_and_disabled.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter_and_disabled.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter_and_ellipses.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter_and_ellipses.png
index 0a5737fd23..9bf4674c28 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter_and_ellipses.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter_and_ellipses.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter_and_error.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter_and_error.png
index 82aa7829fb..3d294f7633 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter_and_error.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_Select_Select_with_filter_and_error.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_TelephoneInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_TelephoneInput_With_Icon_Addon.png
index 29a7ea00ef..919a811370 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_TelephoneInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_TelephoneInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_TextAreaInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_TextAreaInput_With_Icon_Addon.png
index 1c29cdcdef..e3bcc082f1 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_TextAreaInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_TextAreaInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_TextInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_TextInput_With_Icon_Addon.png
index 29a7ea00ef..919a811370 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_TextInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_TextInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_UrlInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_UrlInput_With_Icon_Addon.png
index 29a7ea00ef..919a811370 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_UrlInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Forms_Inputs_UrlInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_Default.png
index 97a6e92d3c..ab754e1c22 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_Default.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description.png
index 5dc57ae440..e60041ecc8 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description_Only.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description_Only.png
index fe5eccf9bc..cfbe0c1442 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description_Only.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Callout_With_Description_Only.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Default.png
index c3a3c86c59..aee0e95bc8 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Default.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Down.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Down.png
index b21cfac345..774c01e8d3 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Down.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Down.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Left.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Left.png
index a8dfbf6806..1a0fce02f4 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Left.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Left.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Right.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Right.png
index 4721ab2658..79c67b7132 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Right.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Right.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Size.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Size.png
index 8e8930fd54..f9e6bad75e 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Size.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Size.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Up.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Up.png
index 53b075ce50..e6c8992ff2 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Up.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chevron_Up.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chip_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chip_Default.png
index 8ea1399f2c..610a65c98a 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chip_Default.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Chip_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Icon_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Icon_Default.png
index 9c8a5d2821..f0d8678fe5 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Icon_Default.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Icon_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Menu_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Menu_Default.png
index b0fecad8a2..091e8f0e19 100644
Binary files a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Menu_Default.png and b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_Menu_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_Square.png b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_Square.png
index deebcbe3fc..e4a80eff5f 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_Square.png and b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_Square.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States.png b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States.png
index 094db0e5ce..9919642ff7 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States.png and b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Small_Variant.png b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Small_Variant.png
index 08c66f4422..47375fdb7e 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Small_Variant.png and b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Small_Variant.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Variant.png b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Variant.png
index f3f1485573..61fac6e2a7 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Variant.png and b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Ghost_Variant.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Primary_Small_Variant.png b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Primary_Small_Variant.png
index 3905c339fe..cbfb117ff7 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Primary_Small_Variant.png and b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Primary_Small_Variant.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Primary_Variant.png b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Primary_Variant.png
index 8ff8ea4097..688caeee1f 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Primary_Variant.png and b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_Of_Primary_Variant.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_of_Small_Variant.png b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_of_Small_Variant.png
index 159e4ac3c9..2996cfa487 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_of_Small_Variant.png and b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_States_of_Small_Variant.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_With_Icon.png b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_With_Icon.png
index 7c42f6ab5c..800c67dcae 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_With_Icon.png and b/packages/fuselage/.loki/reference/chrome_laptop_Buttons_Button_With_Icon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Default.png
index 1770b241cc..f593bc0072 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Default.png and b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Disabled.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Disabled.png
index 18426004b7..35c108f22e 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Disabled.png and b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Disabled.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Enabled.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Enabled.png
index 44e9345e2c..5fbaf83abc 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Enabled.png and b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Enabled.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Expanded.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Expanded.png
index f0ff3125ed..5dd26442e1 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Expanded.png and b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Accordion_Item_Expanded.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Default.png
index 314f6e593a..babdc01af9 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Default.png and b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Accordion_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Modal_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Modal_Default.png
index 1b91d66cd5..5a98318643 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Containers_Modal_Default.png and b/packages/fuselage/.loki/reference/chrome_laptop_Containers_Modal_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Data_Display_Pagination_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Data_Display_Pagination_Default.png
index 2edee76729..a6dae8485d 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Data_Display_Pagination_Default.png and b/packages/fuselage/.loki/reference/chrome_laptop_Data_Display_Pagination_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Data_Display_Pagination_Divider.png b/packages/fuselage/.loki/reference/chrome_laptop_Data_Display_Pagination_Divider.png
index 3c301bde96..511ca5d070 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Data_Display_Pagination_Divider.png and b/packages/fuselage/.loki/reference/chrome_laptop_Data_Display_Pagination_Divider.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_InputBox_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_InputBox_With_Icon_Addon.png
index 2e32142ff2..6d43251cb9 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_InputBox_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_InputBox_With_Icon_Addon.png differ
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 d03f0911dc..e42446b7d7 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_AutoComplete_Example.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_AutoComplete_Example.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_EmailInput_States.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_EmailInput_States.png
index e2bc1c1847..ec6304e960 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_EmailInput_States.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_EmailInput_States.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_EmailInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_EmailInput_With_Icon_Addon.png
index 2e32142ff2..6d43251cb9 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_EmailInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_EmailInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_NumberInput_States.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_NumberInput_States.png
index f3c41e0101..46df69dbfc 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_NumberInput_States.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_NumberInput_States.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_NumberInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_NumberInput_With_Icon_Addon.png
index 2e32142ff2..6d43251cb9 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_NumberInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_NumberInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_PasswordInput_States.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_PasswordInput_States.png
index 3bf870298c..daa4ecad6d 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_PasswordInput_States.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_PasswordInput_States.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_PasswordInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_PasswordInput_With_Icon_Addon.png
index 2e32142ff2..6d43251cb9 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_PasswordInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_PasswordInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SearchInput_States.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SearchInput_States.png
index d04307f8fd..5d83d43644 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SearchInput_States.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SearchInput_States.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SearchInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SearchInput_With_Icon_Addon.png
index 2e32142ff2..6d43251cb9 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SearchInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SearchInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Default.png
index aee604eca6..11d9370609 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Default.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Disabled.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Disabled.png
index 709fc77155..26a7f08606 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Disabled.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Disabled.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Invalid.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Invalid.png
index d2d432020a..d211f31af6 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Invalid.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Invalid.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Multiple_With_Addon.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Multiple_With_Addon.png
index 00b41a9a41..59661363b9 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Multiple_With_Addon.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_Multiple_With_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_States.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_States.png
index f7bcff9375..bc69c0085d 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_States.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_States.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_With_Addon.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_With_Addon.png
index aee604eca6..11d9370609 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_With_Addon.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_With_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_With_Placeholder.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_With_Placeholder.png
index 2e03f0a49c..f8d55ba9a9 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_With_Placeholder.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_With_Placeholder.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_With_Value.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_With_Value.png
index b2e4b16b7b..2ac66533b8 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_With_Value.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_SelectInput_With_Value.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Default.png
index 0295cf7554..c307f371f4 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Default.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Disabled.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Disabled.png
index 287aa177a0..3fd57f5d09 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Disabled.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Disabled.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Error.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Error.png
index 6f7d5914f4..990ccb395f 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Error.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Error.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelect.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelect.png
index 6705124558..765c0f788a 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelect.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelect.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelectFiltered.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelectFiltered.png
index c097f81a5b..4c02b95f7d 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelectFiltered.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelectFiltered.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelectFiltered_disabled.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelectFiltered_disabled.png
index ff025db436..0181e98de7 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelectFiltered_disabled.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelectFiltered_disabled.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelectFiltered_error.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelectFiltered_error.png
index 2640bb227f..4cc18d51a5 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelectFiltered_error.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelectFiltered_error.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelect_Disabled.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelect_Disabled.png
index 6fb93f5021..be5711c034 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelect_Disabled.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelect_Disabled.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelect_Error.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelect_Error.png
index 3da02a238b..f879da26df 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelect_Error.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_MultiSelect_Error.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_No_Placeholder.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_No_Placeholder.png
index 83309ea529..f4164aa8e3 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_No_Placeholder.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_No_Placeholder.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter.png
index 0d5a231774..554084a5f8 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter_and_disabled.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter_and_disabled.png
index 5567da7f8f..ae50593904 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter_and_disabled.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter_and_disabled.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter_and_ellipses.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter_and_ellipses.png
index aad4c60125..5088a7858b 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter_and_ellipses.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter_and_ellipses.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter_and_error.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter_and_error.png
index 097f674f55..dd8ed54f0e 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter_and_error.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_Select_Select_with_filter_and_error.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TelephoneInput_States.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TelephoneInput_States.png
index 4032bdfd8a..9cd717f2fb 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TelephoneInput_States.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TelephoneInput_States.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TelephoneInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TelephoneInput_With_Icon_Addon.png
index 2e32142ff2..6d43251cb9 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TelephoneInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TelephoneInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextAreaInput_States.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextAreaInput_States.png
index e9d0592d5b..c184ec963d 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextAreaInput_States.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextAreaInput_States.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextAreaInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextAreaInput_With_Icon_Addon.png
index b763c72029..23ba60e355 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextAreaInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextAreaInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextInput_States.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextInput_States.png
index 5aa889f39e..0ec4df4a3e 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextInput_States.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextInput_States.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextInput_With_Icon_Addon.png
index 2e32142ff2..6d43251cb9 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_TextInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_UrlInput_States.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_UrlInput_States.png
index 73458611da..74bbcd1211 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_UrlInput_States.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_UrlInput_States.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_UrlInput_With_Icon_Addon.png b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_UrlInput_With_Icon_Addon.png
index 2e32142ff2..6d43251cb9 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_UrlInput_With_Icon_Addon.png and b/packages/fuselage/.loki/reference/chrome_laptop_Forms_Inputs_UrlInput_With_Icon_Addon.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_Default.png
index 6ddc281b2b..48cc875b2a 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_Default.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description.png
index 1f15a49cea..e4efbf4fc1 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description_Only.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description_Only.png
index b2d7e2d92f..e1182909f3 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description_Only.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Callout_With_Description_Only.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Default.png
index 74ae0aa839..04d921e5d8 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Default.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Down.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Down.png
index 3371bf4f98..831d3484fb 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Down.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Down.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Left.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Left.png
index 412a6c1c20..df67ea23b2 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Left.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Left.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Right.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Right.png
index a30814536f..ad20015a55 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Right.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Right.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Size.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Size.png
index 6c873219d9..0d3f5d0972 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Size.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Size.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Up.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Up.png
index ad045009bc..1f1722daf5 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Up.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chevron_Up.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chip_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chip_Default.png
index 26078181e0..1d2251c368 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chip_Default.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Chip_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Icon_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Icon_Default.png
index 464646d406..52e8fd8c8c 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Icon_Default.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Icon_Default.png differ
diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Menu_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Menu_Default.png
index 8733e30779..838c86e340 100644
Binary files a/packages/fuselage/.loki/reference/chrome_laptop_Misc_Menu_Default.png and b/packages/fuselage/.loki/reference/chrome_laptop_Misc_Menu_Default.png differ
diff --git a/packages/fuselage/src/components/Chevron/index.js b/packages/fuselage/src/components/Chevron/index.js
index fd869302ba..fdc3908dd9 100644
--- a/packages/fuselage/src/components/Chevron/index.js
+++ b/packages/fuselage/src/components/Chevron/index.js
@@ -13,7 +13,7 @@ export function Chevron({
size,
...props
}) {
- const children = useMemo(() => , [size]);
+ const children = useMemo(() => , [size]);
return
- }/>
+ }/>
<_Options onMouseDown={prevent} multiple filter={filter} renderItem={CheckOption} role='listbox' options={filteredOptions} onSelect={internalChanged} cursor={cursor} />
diff --git a/packages/fuselage/src/components/Select/Select.js b/packages/fuselage/src/components/Select/Select.js
index c333644ff3..8c5b35608b 100644
--- a/packages/fuselage/src/components/Select/Select.js
+++ b/packages/fuselage/src/components/Select/Select.js
@@ -84,7 +84,7 @@ export const Select = ({
}
- }/>
+ }/>
diff --git a/packages/fuselage/src/components/SelectInput/index.js b/packages/fuselage/src/components/SelectInput/index.js
index 7f5e8e8a9a..9197ecf626 100644
--- a/packages/fuselage/src/components/SelectInput/index.js
+++ b/packages/fuselage/src/components/SelectInput/index.js
@@ -30,7 +30,7 @@ export const SelectInput = forwardRef(function SelectInput({
placeholderVisible={isPlaceholderVisible ? !!placeholder : undefined}
ref={ref}
{...props}
- addon={}
+ addon={}
type='select'
onChange={handleChange}
>
diff --git a/packages/icons/glyphsMapping.json b/packages/icons/glyphsMapping.json
new file mode 100644
index 0000000000..fa96667da2
--- /dev/null
+++ b/packages/icons/glyphsMapping.json
@@ -0,0 +1,686 @@
+{
+ "add-reaction": {
+ "start": "\ue000"
+ },
+ "at": {
+ "start": "\ue001"
+ },
+ "back": {
+ "start": "(",
+ "end": ")"
+ },
+ "arrow-down": {
+ "start": "\ue002"
+ },
+ "attachment": {
+ "start": "\ue003"
+ },
+ "ban": {
+ "start": "\ue004"
+ },
+ "bell": {
+ "start": "\ue005"
+ },
+ "bell-off": {
+ "start": "\ue006"
+ },
+ "backspace": {
+ "start": "[",
+ "end": "]"
+ },
+ "book": {
+ "start": "\ue007"
+ },
+ "bold": {
+ "start": "\ue008"
+ },
+ "business": {
+ "start": "\ue009"
+ },
+ "calendar": {
+ "start": "\ue00a"
+ },
+ "card": {
+ "start": "\ue00b"
+ },
+ "chat": {
+ "start": "\ue00d"
+ },
+ "check": {
+ "start": "\ue00e"
+ },
+ "checkmark-circled": {
+ "start": "\ue00f"
+ },
+ "chevron-down": {
+ "start": "\ue010"
+ },
+ "chevron-left": {
+ "start": "{",
+ "end": "}"
+ },
+ "chevron-right": {
+ "start": "\u0f3a",
+ "end": "\u0f3b"
+ },
+ "chevron-up": {
+ "start": "\ue011"
+ },
+ "circle": {
+ "start": "\ue012"
+ },
+ "circle-check": {
+ "start": "\ue013"
+ },
+ "circle-cross": {
+ "start": "\ue014"
+ },
+ "circled-arrow-down": {
+ "start": "\ue015"
+ },
+ "clip": {
+ "start": "\ue016"
+ },
+ "clipboard": {
+ "start": "\ue017"
+ },
+ "clock": {
+ "start": "\ue018"
+ },
+ "cloud-plus": {
+ "start": "\ue019"
+ },
+ "code": {
+ "start": "\ue01a"
+ },
+ "cog": {
+ "start": "\ue01b"
+ },
+ "computer": {
+ "start": "\ue01c"
+ },
+ "copy": {
+ "start": "\ue01d"
+ },
+ "cross": {
+ "start": "\ue01e"
+ },
+ "cube": {
+ "start": "\ue01f"
+ },
+ "customize": {
+ "start": "\ue020"
+ },
+ "dialpad": {
+ "start": "\ue021"
+ },
+ "directory": {
+ "start": "\ue022"
+ },
+ "discover": {
+ "start": "\ue023"
+ },
+ "discussion": {
+ "start": "\ue024"
+ },
+ "download": {
+ "start": "\ue025"
+ },
+ "edit": {
+ "start": "\ue026"
+ },
+ "edit-rounded": {
+ "start": "\ue027"
+ },
+ "emoji": {
+ "start": "\ue028"
+ },
+ "eraser": {
+ "start": "\ue029"
+ },
+ "exit": {
+ "start": "\u0f3c",
+ "end": "\u0f3d"
+ },
+ "eye": {
+ "start": "\ue02a"
+ },
+ "eye-off": {
+ "start": "\ue02b"
+ },
+ "facebook": {
+ "start": "\ue02c"
+ },
+ "file-document": {
+ "start": "\ue02d"
+ },
+ "file-generic": {
+ "start": "\ue02e"
+ },
+ "file-google-drive": {
+ "start": "\ue02f"
+ },
+ "file-keynote": {
+ "start": "\ue030"
+ },
+ "file-pdf": {
+ "start": "\ue031"
+ },
+ "file-sheets": {
+ "start": "\ue032"
+ },
+ "files-audio": {
+ "start": "\ue033"
+ },
+ "files-video": {
+ "start": "\ue034"
+ },
+ "files-zip": {
+ "start": "\ue035"
+ },
+ "filter": {
+ "start": "\ue036"
+ },
+ "fingerprint": {
+ "start": "\ue037"
+ },
+ "flag": {
+ "start": "\ue038"
+ },
+ "folder": {
+ "start": "\ue039"
+ },
+ "game": {
+ "start": "\ue03a"
+ },
+ "github": {
+ "start": "\ue03b"
+ },
+ "gitlab": {
+ "start": "\ue03c"
+ },
+ "google": {
+ "start": "\ue03d"
+ },
+ "group-by-type": {
+ "start": "\ue03e"
+ },
+ "hand-pointer": {
+ "start": "\ue03f"
+ },
+ "hash": {
+ "start": "\ue040"
+ },
+ "hashtag": {
+ "start": "\ue041"
+ },
+ "help": {
+ "start": "\ue042"
+ },
+ "home": {
+ "start": "\ue043"
+ },
+ "import": {
+ "start": "\ue044"
+ },
+ "hubot": {
+ "start": "\ue045"
+ },
+ "info": {
+ "start": "\ue046"
+ },
+ "info-circled": {
+ "start": "\ue047"
+ },
+ "intermediate": {
+ "start": "\ue048"
+ },
+ "italic": {
+ "start": "\ue049"
+ },
+ "jump": {
+ "start": "\u169b",
+ "end": "\u169c"
+ },
+ "key": {
+ "start": "\ue04a"
+ },
+ "keyboard": {
+ "start": "\ue04b"
+ },
+ "language": {
+ "start": "\ue04c"
+ },
+ "link": {
+ "start": "\ue04d"
+ },
+ "linkedin": {
+ "start": "\ue04e"
+ },
+ "list": {
+ "start": "\ue04f"
+ },
+ "list-alt": {
+ "start": "\ue050"
+ },
+ "livechat": {
+ "start": "\ue051"
+ },
+ "loading": {
+ "start": "\ue052"
+ },
+ "lock": {
+ "start": "\ue053"
+ },
+ "mail": {
+ "start": "\ue054"
+ },
+ "magnifier": {
+ "start": "\ue055"
+ },
+ "map-pin": {
+ "start": "\ue056"
+ },
+ "menu": {
+ "start": "\ue057"
+ },
+ "mic": {
+ "start": "\ue058"
+ },
+ "message": {
+ "start": "\ue059"
+ },
+ "mic-off": {
+ "start": "\ue05a"
+ },
+ "modal-warning": {
+ "start": "\ue05b"
+ },
+ "mobile": {
+ "start": "\ue05c"
+ },
+ "multiline": {
+ "start": "\u2045",
+ "end": "\u2046"
+ },
+ "moon": {
+ "start": "\ue05d"
+ },
+ "mute": {
+ "start": "\ue05e"
+ },
+ "new-chat": {
+ "start": "\ue05f"
+ },
+ "new-window": {
+ "start": "\u207d",
+ "end": "\u207e"
+ },
+ "omnichannel": {
+ "start": "\ue060"
+ },
+ "pause": {
+ "start": "\ue061"
+ },
+ "phone": {
+ "start": "\ue062"
+ },
+ "permalink": {
+ "start": "\ue063"
+ },
+ "play": {
+ "start": "\u208d",
+ "end": "\u208e"
+ },
+ "pin": {
+ "start": "\ue064"
+ },
+ "play-solid": {
+ "start": "\ue065"
+ },
+ "plus": {
+ "start": "\ue066"
+ },
+ "podcast": {
+ "start": "\ue067"
+ },
+ "post": {
+ "start": "\ue068"
+ },
+ "quote": {
+ "start": "\ue069"
+ },
+ "queue": {
+ "start": "\ue06a"
+ },
+ "rec": {
+ "start": "\ue06b"
+ },
+ "refresh": {
+ "start": "\ue06c"
+ },
+ "reload": {
+ "start": "\ue06d"
+ },
+ "reply": {
+ "start": "\u2308",
+ "end": "\u2309"
+ },
+ "reply-directly": {
+ "start": "\u230a",
+ "end": "\u230b"
+ },
+ "report": {
+ "start": "\ue06e"
+ },
+ "send": {
+ "start": "\u2329",
+ "end": "\u232a"
+ },
+ "share": {
+ "start": "\ue06f"
+ },
+ "shield": {
+ "start": "\ue070"
+ },
+ "send-active": {
+ "start": "\u2768",
+ "end": "\u2769"
+ },
+ "shield-alt": {
+ "start": "\ue071"
+ },
+ "shield-check": {
+ "start": "\ue072"
+ },
+ "sign-out": {
+ "start": "\u276a",
+ "end": "\u276b"
+ },
+ "snippet": {
+ "start": "\ue073"
+ },
+ "sort": {
+ "start": "\ue074"
+ },
+ "sort-amount-down": {
+ "start": "\ue075"
+ },
+ "star": {
+ "start": "\ue076"
+ },
+ "star-filled": {
+ "start": "\ue077"
+ },
+ "strike": {
+ "start": "\ue078"
+ },
+ "sun": {
+ "start": "\ue079"
+ },
+ "team": {
+ "start": "\ue07a"
+ },
+ "th-list": {
+ "start": "\u276c",
+ "end": "\u276d"
+ },
+ "thread": {
+ "start": "\ue07b"
+ },
+ "threads": {
+ "start": "\ue07c"
+ },
+ "transfer": {
+ "start": "\u276e",
+ "end": "\u276f"
+ },
+ "trash": {
+ "start": "\ue07d"
+ },
+ "twitter": {
+ "start": "\ue07e"
+ },
+ "undo": {
+ "start": "\u2770",
+ "end": "\u2771"
+ },
+ "upload": {
+ "start": "\ue07f"
+ },
+ "user": {
+ "start": "\ue080"
+ },
+ "user-plus": {
+ "start": "\ue081"
+ },
+ "video": {
+ "start": "\u2772",
+ "end": "\u2773"
+ },
+ "user-rounded": {
+ "start": "\ue082"
+ },
+ "video-off": {
+ "start": "\u2774",
+ "end": "\u2775"
+ },
+ "volume-disable": {
+ "start": "\u27c5",
+ "end": "\u27c6"
+ },
+ "volume": {
+ "start": "\u27e6",
+ "end": "\u27e7"
+ },
+ "volume-disabled": {
+ "start": "\u27e8",
+ "end": "\u27e9"
+ },
+ "volume-mute": {
+ "start": "\u27ea",
+ "end": "\u27eb"
+ },
+ "volume-off": {
+ "start": "\u27ec",
+ "end": "\u27ed"
+ },
+ "warning": {
+ "start": "\ue083"
+ },
+ "chevron-expand": {
+ "start": "\ue084"
+ },
+ "underline": {
+ "start": "\ue085"
+ },
+ "doner": {
+ "start": "\ue086"
+ },
+ "kebab": {
+ "start": "\ue087"
+ },
+ "meatballs": {
+ "start": "\ue088"
+ },
+ "condensed-view": {
+ "start": "\u27ee",
+ "end": "\u27ef"
+ },
+ "extended-view": {
+ "start": "\u2983",
+ "end": "\u2984"
+ },
+ "medium-view": {
+ "start": "\u2985",
+ "end": "\u2986"
+ },
+ "audio": {
+ "start": "\ue089"
+ },
+ "camera": {
+ "start": "\ue08a"
+ },
+ "image": {
+ "start": "\ue08b"
+ },
+ "video-disabled": {
+ "start": "\ue08c"
+ },
+ "video-filled": {
+ "start": "\ue08d"
+ },
+ "sort-az": {
+ "start": "\u2987",
+ "end": "\u2988"
+ },
+ "avatar": {
+ "start": "\ue08e"
+ },
+ "globe": {
+ "start": "\ue08f"
+ },
+ "add-user": {
+ "start": "\ue090"
+ },
+ "bag": {
+ "start": "\ue091"
+ },
+ "ball": {
+ "start": "\ue092"
+ },
+ "cancel": {
+ "start": "\ue093"
+ },
+ "canned-response": {
+ "start": "\ue094"
+ },
+ "arrow-collapse": {
+ "start": "\ue095"
+ },
+ "desktop": {
+ "start": "\ue096"
+ },
+ "doc": {
+ "start": "\ue097"
+ },
+ "arrow-expand": {
+ "start": "\ue098"
+ },
+ "arrow-fall": {
+ "start": "\ue099"
+ },
+ "h-bar": {
+ "start": "\ue09a"
+ },
+ "headset": {
+ "start": "\ue09b"
+ },
+ "history": {
+ "start": "\ue09c"
+ },
+ "joystick": {
+ "start": "\ue09d"
+ },
+ "jump-to-message": {
+ "start": "\ue09e"
+ },
+ "live": {
+ "start": "\ue09f"
+ },
+ "pin-map": {
+ "start": "\ue0a0"
+ },
+ "arrow-rise": {
+ "start": "\ue0a1"
+ },
+ "send-filled": {
+ "start": "\ue0a2"
+ },
+ "sheet": {
+ "start": "\ue0a3"
+ },
+ "signal": {
+ "start": "\ue0a4"
+ },
+ "squares": {
+ "start": "\ue0a5"
+ },
+ "zip": {
+ "start": "\ue0a6"
+ },
+ "circle-arrow-down": {
+ "start": "\ue0a7"
+ },
+ "adobe": {
+ "start": "\ue0a8"
+ },
+ "google-drive": {
+ "start": "\ue0a9"
+ },
+ "arrow-back": {
+ "start": "\u2989",
+ "end": "\u298a"
+ },
+ "arrow-jump": {
+ "start": "\u298b",
+ "end": "\u298c"
+ },
+ "emoji-plus": {
+ "start": "\ue0aa"
+ },
+ "musical-note": {
+ "start": "\ue0ab"
+ },
+ "baloon-ellipsis": {
+ "start": "\ue0ac"
+ },
+ "baloons": {
+ "start": "\ue0ad"
+ },
+ "baloon-exclamation": {
+ "start": "\ue0ae"
+ },
+ "baloon-text": {
+ "start": "\ue0af"
+ },
+ "arrow-down-box": {
+ "start": "\ue0b0"
+ },
+ "arrow-return": {
+ "start": "\u298d",
+ "end": "\u298e"
+ },
+ "arrow-loop": {
+ "start": "\ue0b1"
+ },
+ "pencil": {
+ "start": "\u298f",
+ "end": "\u2990"
+ },
+ "pencil-box": {
+ "start": "\u2991",
+ "end": "\u2992"
+ },
+ "new-channel": {
+ "start": "\u2993",
+ "end": "\u2994"
+ },
+ "arrow-up-box": {
+ "start": "\ue0b2"
+ },
+ "file": {
+ "start": "\u2995",
+ "end": "\u2996"
+ },
+ "user-arrow-right": {
+ "start": "\u2997",
+ "end": "\u2998"
+ },
+ "cloud-arrow-up": {
+ "start": "\ue0b3"
+ },
+ "stack": {
+ "start": "\ue0b4"
+ }
+}
\ No newline at end of file
diff --git a/packages/icons/scripts/build.js b/packages/icons/scripts/build.js
index f25a3c1be4..ad11ba98a5 100644
--- a/packages/icons/scripts/build.js
+++ b/packages/icons/scripts/build.js
@@ -4,7 +4,7 @@ const { promisify } = require('util');
const rimraf = require('rimraf');
const pkg = require('../package.json');
-const { writeFile } = require('./files');
+const { encodeEscapedJson, writeFile } = require('./files');
const {
createSvgBuffer,
createTtfBuffer,
@@ -12,7 +12,8 @@ const {
createWoff2Buffer,
createEotBuffer,
} = require('./font');
-const { getIcons } = require('./icons');
+const { glyphsMapping } = require('./glyphs');
+const { getIconDescriptors } = require('./icons');
const { logStep } = require('./log');
const { createSvgSprite, createSvgIcons } = require('./svg');
@@ -29,7 +30,7 @@ const prepareDirectories = async () => {
};
const buildFont = async (icons, distPath) => {
- icons = icons.filter(({ startCharacter }) => !!startCharacter);
+ icons = icons.filter(({ type }) => type !== 'other');
const svgBuffer = await writeFile(distPath, 'font/rocketchat.svg', () => createSvgBuffer(icons));
const ttfBuffer = await writeFile(distPath, 'font/rocketchat.ttf', () => createTtfBuffer(svgBuffer));
@@ -38,6 +39,8 @@ const buildFont = async (icons, distPath) => {
writeFile(distPath, 'font/rocketchat.woff2', () => createWoff2Buffer(ttfBuffer)),
writeFile(distPath, 'font/rocketchat.eot', () => createEotBuffer(ttfBuffer)),
]);
+
+ await writeFile(__dirname, '../glyphsMapping.json', () => glyphsMapping);
};
const buildSvgImages = async (icons, distPath) => {
@@ -51,8 +54,10 @@ const buildSvgImages = async (icons, distPath) => {
const buildScripts = async (icons, distPath) => {
await Promise.all([
writeFile(distPath, path.basename(pkg.main), () => {
- const characters = icons.reduce((obj, { name, startCharacter }) => ({ ...obj, [name]: startCharacter }), {});
- return `module.exports = ${ JSON.stringify(characters, null, 2) };\n`;
+ const characters = icons
+ .filter(({ name }) => !!glyphsMapping[name])
+ .reduce((obj, { name }) => ({ ...obj, [name]: glyphsMapping[name].start }), {});
+ return `module.exports = ${ encodeEscapedJson(characters) };\n`;
}),
writeFile(distPath, 'rocketchat.css', () => [
'@font-face {',
@@ -74,9 +79,15 @@ const buildScripts = async (icons, distPath) => {
};
const buildAll = async () => {
+ process.on('unhandledRejection', (err) => {
+ console.error('unhandledRejection:', err.message);
+ console.error(err.stack);
+ process.exit(1);
+ });
+
const { srcPath, distPath } = await prepareDirectories();
- const icons = await getIcons(srcPath);
+ const icons = await getIconDescriptors(srcPath);
await Promise.all([
buildFont(icons, distPath),
@@ -85,4 +96,6 @@ const buildAll = async () => {
]);
};
-buildAll();
+if (require.main === module) {
+ buildAll();
+}
diff --git a/packages/icons/scripts/files.js b/packages/icons/scripts/files.js
index 4a12a37e46..b3f97f15d5 100644
--- a/packages/icons/scripts/files.js
+++ b/packages/icons/scripts/files.js
@@ -3,24 +3,58 @@ const path = require('path');
const { Readable } = require('stream');
const { promisify } = require('util');
+const glob = require('glob');
+
const { logStep } = require('./log');
+const encodeEscapedJson = (data) => JSON.stringify(data, null, 2)
+ .replace(/[\u007f-\uffff]/g, (c) => `\\u${ `0000${ c.charCodeAt(0).toString(16) }`.slice(-4) }`);
+
const writeFile = async (distPath, filePath, getData) => {
const step = logStep('Write', filePath);
const destPath = path.join(distPath, filePath);
- await promisify(fs.mkdir)(path.dirname(destPath), { recursive: true });
+ await fs.promises.mkdir(path.dirname(destPath), { recursive: true });
const data = await getData();
- await promisify(fs.writeFile)(destPath, data, typeof data === 'string' ? 'utf8' : undefined);
+
+ if (Object(data) === data && Object.getPrototypeOf(data) === Object.prototype) {
+ await fs.promises.writeFile(destPath, encodeEscapedJson(data), { encoding: 'utf8' });
+ } else if (typeof data === 'string') {
+ await fs.promises.writeFile(destPath, data, { encoding: 'utf8' });
+ } else {
+ await fs.promises.writeFile(destPath, data);
+ }
step.resolve();
return data;
};
-const readFile = (path) => promisify(fs.readFile)(path, 'utf8');
+const fixBrokenSymlink = async (_path, rootPath) => {
+ const fs = require('fs');
+ const stat = await fs.promises.lstat(_path);
+ if (!stat.isSymbolicLink()) {
+ return _path;
+ }
+
+ const target = await fs.promises.readlink(_path);
+ const targetBasename = path.basename(target);
+ const newTargetPath = (await promisify(glob)(path.join(rootPath, '**', targetBasename)))[0];
+
+ if (!newTargetPath) {
+ throw Error(`Broken symlink: ${ _path } -> ${ target }`);
+ }
+
+ const relativeTargetPath = path.relative(path.dirname(_path), newTargetPath);
+ await fs.promises.unlink(_path);
+ await fs.promises.symlink(relativeTargetPath, _path);
+
+ return _path;
+};
+
+const readFile = (path) => fs.promises.readFile(path, { encoding: 'utf8' });
const createReadableFromString = (content) => {
const stream = new Readable();
@@ -29,6 +63,8 @@ const createReadableFromString = (content) => {
return stream;
};
+module.exports.encodeEscapedJson = encodeEscapedJson;
+module.exports.fixBrokenSymlink = fixBrokenSymlink;
module.exports.writeFile = writeFile;
module.exports.readFile = readFile;
module.exports.createReadableFromString = createReadableFromString;
diff --git a/packages/icons/scripts/font.js b/packages/icons/scripts/font.js
index 59d01fc3ca..bda6deb2a2 100644
--- a/packages/icons/scripts/font.js
+++ b/packages/icons/scripts/font.js
@@ -4,8 +4,10 @@ const ttf2eot = require('ttf2eot');
const ttf2woff = require('ttf2woff');
const ttf2woff2 = require('ttf2woff2');
+
const pkg = require('../package.json');
const { readFile, createReadableFromString } = require('./files');
+const { nextCharactersFor } = require('./glyphs');
const { mirrorSvg } = require('./svg');
const createSvgBuffer = async (icons) => {
@@ -17,8 +19,9 @@ const createSvgBuffer = async (icons) => {
});
await Promise.all(
- icons.map(async ({ name, path, startCharacter, endCharacter }) => {
+ icons.map(async ({ name, type, path }) => {
const content = await readFile(path);
+ const { start: startCharacter, end: endCharacter } = nextCharactersFor(name, type);
const stream = createReadableFromString(content);
stream.metadata = {
diff --git a/packages/icons/scripts/glyphs.js b/packages/icons/scripts/glyphs.js
new file mode 100644
index 0000000000..1365dbef22
--- /dev/null
+++ b/packages/icons/scripts/glyphs.js
@@ -0,0 +1,60 @@
+const {
+ Ps: punctuationStartCharacters,
+ Pe: punctuationEndCharacters,
+ Pi: initialPunctuationCharacters,
+ Pf: finalPunctuationCharacters,
+} = require('unicode/category');
+
+const glyphsMapping = require('../glyphsMapping.json');
+
+const startCharacters = [
+ ...Object.values(punctuationStartCharacters).filter(({ mirrored }) => mirrored === 'Y').map(({ symbol }) => symbol),
+ ...Object.values(initialPunctuationCharacters).filter(({ mirrored }) => mirrored === 'Y').map(({ symbol }) => symbol),
+];
+
+const endCharacters = [
+ ...Object.values(punctuationEndCharacters).filter(({ mirrored }) => mirrored === 'Y').map(({ symbol }) => symbol),
+ ...Object.values(finalPunctuationCharacters).filter(({ mirrored }) => mirrored === 'Y').map(({ symbol }) => symbol),
+];
+
+let directionalCounter = Math.max(
+ ...Object.values(glyphsMapping)
+ .map(({ start }) => startCharacters.indexOf(start))
+ .filter((index) => index > -1),
+) + 1;
+let neutralCounter = Math.max(
+ ...Object.values(glyphsMapping)
+ .map(({ start }) => start.codePointAt(0))
+ .filter((codePoint) => codePoint >= 0xe000),
+) - 0xe000 + 1;
+
+const nextCharactersFor = (name, type) => {
+ if (glyphsMapping[name]) {
+ return glyphsMapping[name];
+ }
+
+ if (type === 'dir') {
+ const i = directionalCounter++;
+
+ if (startCharacters.length <= i) {
+ throw Error('more directional icons than possible');
+ }
+
+ glyphsMapping[name] = {
+ start: startCharacters[i],
+ end: endCharacters[i],
+ };
+ }
+
+ if (!type) {
+ const i = neutralCounter++;
+ glyphsMapping[name] = {
+ start: String.fromCodePoint(0xe000 + i),
+ };
+ }
+
+ return glyphsMapping[name];
+};
+
+module.exports.nextCharactersFor = nextCharactersFor;
+module.exports.glyphsMapping = glyphsMapping;
diff --git a/packages/icons/scripts/icons.js b/packages/icons/scripts/icons.js
index 2018c9509f..34b3593ce3 100644
--- a/packages/icons/scripts/icons.js
+++ b/packages/icons/scripts/icons.js
@@ -1,89 +1,37 @@
const path = require('path');
const { promisify } = require('util');
-const glob = promisify(require('glob'));
-const {
- Ps: punctuationStartCharacters,
- Pe: punctuationEndCharacters,
- Pi: initialPunctuationCharacters,
- Pf: finalPunctuationCharacters,
-} = require('unicode/category');
+const glob = require('glob');
const { logStep } = require('./log');
-
-const startCharacters = [
- ...Object.values(punctuationStartCharacters).filter(({ mirrored }) => mirrored === 'Y').map(({ symbol }) => symbol),
- ...Object.values(initialPunctuationCharacters).filter(({ mirrored }) => mirrored === 'Y').map(({ symbol }) => symbol),
-];
-
-const endCharacters = [
- ...Object.values(punctuationEndCharacters).filter(({ mirrored }) => mirrored === 'Y').map(({ symbol }) => symbol),
- ...Object.values(finalPunctuationCharacters).filter(({ mirrored }) => mirrored === 'Y').map(({ symbol }) => symbol),
-];
-
-const getDirectionalIcons = async (srcPath) => {
- const step = logStep('Read directional icons');
-
- const paths = await glob(path.join(srcPath, 'directional/*.svg'));
-
- step.resolve();
-
- const descriptors = paths
- .map((match, i) => ({
- name: path.basename(match, '.svg'),
- path: match,
- startCharacter: startCharacters[i],
- endCharacter: endCharacters[i],
- }));
-
- step.resolve();
-
- return descriptors;
-};
-
-const getNeutralIcons = async (srcPath) => {
- const step = logStep('Read neutral icons');
-
- const paths = await glob(path.join(srcPath, 'neutral/*.svg'));
-
- step.resolve();
-
- const descriptors = paths
- .map((match, i) => ({
- name: path.basename(match, '.svg'),
- path: match,
- startCharacter: String.fromCodePoint(0xe000 + i),
- }));
-
- step.resolve();
-
- return descriptors;
-};
-
-const getOtherIcons = async (srcPath) => {
- const step = logStep('Read other icons');
-
- const paths = await glob(path.join(srcPath, 'other/*.svg'));
-
- step.resolve();
-
- const descriptors = paths
- .map((match) => ({
- name: path.basename(match, '.svg'),
- path: match,
- }));
+const { fixBrokenSymlink } = require('./files');
+
+const getIconDescriptors = async (srcPath) => {
+ const step = logStep('Read icons');
+
+ const paths = await promisify(glob)(path.join(srcPath, '**/*.svg'));
+
+ const descriptors = (await Promise.all(
+ paths
+ .map(async (_path) => {
+ const [, name,, type] = /^(.*?)(\.([a-z]+))?$/.exec(path.basename(_path, '.svg'));
+ _path = await fixBrokenSymlink(_path, srcPath);
+
+ return {
+ name,
+ type,
+ path: _path,
+ };
+ }),
+ ))
+ .sort((a, b) =>
+ path.dirname(a.path).localeCompare(path.dirname(b.path))
+ || a.name.localeCompare(b.name),
+ );
step.resolve();
return descriptors;
};
-const getIcons = async (srcPath) =>
- [].concat(...await Promise.all([
- getDirectionalIcons(srcPath),
- getNeutralIcons(srcPath),
- getOtherIcons(srcPath),
- ]))
- .sort(({ name: a }, { name: b }) => a.localeCompare(b));
-
-module.exports.getIcons = getIcons;
+module.exports.getIconDescriptors = getIconDescriptors;
diff --git a/packages/icons/scripts/log.js b/packages/icons/scripts/log.js
index 013c9b55ee..0f7de9f8dc 100644
--- a/packages/icons/scripts/log.js
+++ b/packages/icons/scripts/log.js
@@ -24,13 +24,13 @@ const logStep = (...args) => {
promise = promise
.then(() => {
- process.stdout.write(chalk.gray('⌛', ...args));
+ process.stdout.write(chalk`\u231b ${ args.join(' ') }`);
})
.then(check.promise)
.then(() => {
- console.log(chalk`\r{green ✔️} {gray ${ args.join(' ') }}`);
+ process.stdout.write(chalk`\r{green \u2705} {gray ${ args.join(' ') }}\n`);
}, () => {
- console.log(chalk`\r{red ❌} {gray ${ args.join(' ') }}`);
+ process.stdout.write(chalk`\r{red \u274c} {gray ${ args.join(' ') }}\n`);
});
return check;
diff --git a/packages/icons/scripts/svg.js b/packages/icons/scripts/svg.js
index 97520ad8ad..9741dcbe77 100644
--- a/packages/icons/scripts/svg.js
+++ b/packages/icons/scripts/svg.js
@@ -14,7 +14,7 @@ const mirrorSvg = async (content) => {
};
const createSvgIcons = (icons) => Promise.all(
- icons.map(async ({ name, path }) => {
+ icons.map(async ({ name, type, path }) => {
const content = await readFile(path);
const {
svg: {
@@ -28,13 +28,14 @@ const createSvgIcons = (icons) => Promise.all(
$: {
xmlns: 'http://www.w3.org/2000/svg',
viewBox,
+ class: type === 'dir' ? 'rcx-svg--directional' : undefined,
fill: 'currentColor',
},
...elements,
},
});
- return { name, viewBox, elements, xml };
+ return { name, type, viewBox, elements, xml };
}),
);
@@ -42,6 +43,7 @@ const createSvgSprite = async (svgIcons) => [
'