playbook_ui 14.4.0.pre.alpha.javascriptassets3924 → 14.4.0.pre.alpha.pbntr523enablekitsforradiofix3825

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb

@@ -1,10 +1,8 @@
 <%= pb_rails("button", props: { variant: "secondary", id: 'list' }) do %>
     <%= pb_rails("flex", props: {align: "center"}) do %>
-        Filter By
+        Filter By 
         <%= pb_rails("flex/flex_item", props: {margin_left: "xxs"}) do %>
-            <div id="arrow-icon" style="display: flex">
-                <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true }) %>
-            </div>
+        <div id="arrow-icon" style="display: flex"></div>
         <% end %>
     <% end %>
 <% end %>
@@ -20,17 +18,18 @@
 
 
 <script type="text/javascript">
-    const popoverButton = document.querySelector("#list")
-    let buttonClicked = false
+const button = document.querySelector("#list")
+let buttonClicked = false
 
-    const arrowDiv = document.querySelector("#arrow-icon")
+const arrowDiv = document.querySelector("#arrow-icon")
+arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
 
-    popoverButton.onclick = () => {
-        buttonClicked = !buttonClicked
-        if (buttonClicked) {
-            arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 5.70312C14.625 5.28125 15.3281 5.28125 15.75 5.70312L24.7969 14.7031C25.2188 15.1719 25.2188 15.875 24.7969 16.2969C24.3281 16.7656 23.625 16.7656 23.2031 16.2969L15 8.09375L6.79688 16.2969C6.32812 16.7656 5.625 16.7656 5.20312 16.2969C4.73438 15.875 4.73438 15.1719 5.20312 14.75L14.2031 5.70312Z" fill="currentColor"/></svg>'
-        } else {
-            arrowDiv.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="auto" height="auto" viewBox="0 0 31 25" fill="none" class="pb_custom_icon svg-inline--fa pb_icon_kit svg_fw" id="" data="{}" aria="{}" tabindex=""><path d="M14.2031 19.2969L5.20312 10.2969C4.73438 9.875 4.73438 9.17188 5.20312 8.70312C5.625 8.28125 6.32812 8.28125 6.79688 8.70312L15 16.9531L23.2031 8.75C23.625 8.28125 24.3281 8.28125 24.7969 8.75C25.2188 9.17188 25.2188 9.875 24.7969 10.2969L15.75 19.2969C15.3281 19.7656 14.625 19.7656 14.2031 19.2969Z" fill="currentColor"/></svg>'
-        }
+button.onclick = () => {
+    buttonClicked = !buttonClicked    
+    if (buttonClicked) {
+        arrowDiv.innerHTML = '<i class="far fa-angle-up"></i>'
+    } else {
+        arrowDiv.innerHTML = '<i class="far fa-angle-down"></i>'
     }
+}
 </script>

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx

@@ -26,10 +26,10 @@ const PopoverWithButton = (props) => {
             className={showPopover ? "fa-flip-vertical" : ""}
             display="inline_flex"
         >
-          <Icon
-              fixedWidth
-              icon="angle-down"
-              margin-left="xxs"
+          <Icon 
+              fixedWidth 
+              icon="angle-down" 
+              margin-left="xxs" 
           />
         </Flex>
       </Flex>

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -32,7 +32,7 @@ const Radio = ({
   alignment,
   children,
   className,
-  customChildren = false,
+  customChildren= false,
   dark = false,
   disabled = false,
   error = false,

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb

@@ -10,7 +10,6 @@
 <%= pb_rails("radio", props: {
   custom_children: true,
   label: "Select",
-  margin_bottom: "sm",
   name: "Group1",
   value: "Select",
 }) do %>
@@ -23,7 +22,6 @@
 <%= pb_rails("radio", props: {
   custom_children: true,
   label: "Typeahead",
-  margin_bottom: "sm",
   name: "Group1",
   value: "Typeahead",
 }) do %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx

@@ -19,14 +19,12 @@ const RadioChildren = (props) => {
       <Radio
           customChildren
           label="Select"
-          marginBottom="sm"
           name="Group1"
           tabIndex={0}
           value="Select"
           {...props}
       >
-        <Select
-            marginBottom="none"
+        <Select 
             minWidth="xs"
             options={options}
         />
@@ -34,18 +32,17 @@ const RadioChildren = (props) => {
       <Radio
           customChildren
           label="Typeahead"
-          marginBottom="sm"
           name="Group1"
           tabIndex={0}
           value="Typeahead"
           {...props}
       >
         <Typeahead 
-            marginBottom="none"
             minWidth="xs"
             options={options}
         />
       </Radio>
+      <br />
       <Radio
           customChildren
           defaultChecked={false}

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
 
-import { getAllIcons } from "../../utilities/icons/allicons"
-
 import Flex from '../../pb_flex/_flex'
 import PbReactPopover from '../../pb_popover/_popover'
 import Button from '../../pb_button/_button'
@@ -67,7 +65,6 @@ const toolbarDropdownItems = [
     },
 ]
 
-  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   const handleTogglePopover = () => {
     setShowPopover(!showPopover)
@@ -95,10 +92,8 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
         <Flex className={showPopover ? "fa-flip-vertical" : ""}
             display="inline_flex"
         >
-          <Icon 
-              className="svg-inline--fa"
-              customIcon={angleDown}
-              fixedWidth
+          <Icon fixedWidth
+              icon="angle-down"
               margin-left="xs"
           />
         </Flex>
@@ -130,10 +125,8 @@ const popoverReference = (
             <Flex className={showPopover ? "fa-flip-vertical" : ""}
                 display="inline_flex"
             >
-              <Icon 
-                  className="svg-inline--fa"
-                  customIcon={angleDown}
-                  fixedWidth
+              <Icon fixedWidth
+                  icon="angle-down"
                   margin-left="xs"
               />
             </Flex>
@@ -176,4 +169,4 @@ const popoverReference = (
   )
 }
 
-export default ToolbarDropdown
+export default ToolbarDropdown

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -4,7 +4,6 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
 import type { InputCallback } from '../types'
-import { getAllIcons } from "../utilities/icons/allicons"
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -91,8 +90,6 @@ const Select = ({
     compactClass
   );
 
-  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
-
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
   const selectBody =(() =>{
     if (children) return children
@@ -137,9 +134,9 @@ const Select = ({
         {selectBody}
         { multiple !== true ?
           <Icon
-              className="pb_select_kit_caret svg-inline--fa"
-              customIcon={angleDown}
+              className="pb_select_kit_caret"
               fixedWidth
+              icon="angle-down"
           />
           :
           null

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -26,7 +26,7 @@
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
     <% end %>
     <% if object.multiple != true %>
-      <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret"}) %>
+      <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
     <% end %>
   </label>
 <% end %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -84,10 +84,6 @@ module Playbook
         end
       end
 
-      def angle_down_path
-        "app/pb_kits/playbook/utilities/icons/angle-down.svg"
-      end
-
     private
 
       def error_class

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -45,6 +45,7 @@
       }
     }
     .text_input_wrapper {
+      margin-bottom: 1rem;
       input::placeholder,
       .text_input .placeholder {
         @include pb_body_light_dark;

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

@@ -1,14 +1,14 @@
 import React, { useRef, useState, forwardRef, ForwardedRef } from "react"
 
 import {
-  arrow,
-  flip,
-  offset,
-  Placement,
-  safePolygon,
+  arrow, 
+  flip, 
+  offset, 
+  Placement, 
+  safePolygon, 
   shift,
-  useFloating,
-  useHover,
+  useFloating, 
+  useHover, 
   useInteractions,
 } from "@floating-ui/react"
 
@@ -16,8 +16,6 @@ import classnames from "classnames"
 import { GlobalProps, globalProps } from "../utilities/globalProps"
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props"
 import Flex from "../pb_flex/_flex"
-import { getAllIcons } from "../utilities/icons/allicons"
-import Icon from '../pb_icon/_icon'
 
 type TooltipProps = {
   aria?: { [key: string]: string },
@@ -55,7 +53,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
   const dataProps: { [key: string]: string } = buildDataProps(data)
   const ariaProps: { [key: string]: string } = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions)
-
+  
   const css = classnames(
     globalProps({...rest}),
     className,
@@ -63,6 +61,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
   const [open, setOpen] = useState(false)
   const arrowRef = useRef(null)
 
+
   const {
     context,
     middlewareData: { arrow: { x: arrowX, y: arrowY } = {},  },
@@ -96,7 +95,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
     placement: preferredPlacement
   })
 
-
+      
   const { getFloatingProps } = useInteractions([
     useHover(context, {
       delay,
@@ -149,16 +148,13 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
               },
             })}
         >
-          <Flex
+          <Flex 
               align="center"
               gap="xs"
           >
             {icon && (
-            <i className={`pb_icon_kit`}>
-              <Icon
-                  icon={icon}
-              />
-            </i>)}
+            <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
+            )}
             {text}
           </Flex>
           <div

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

@@ -68,6 +68,7 @@
     opacity: 0;
   }
   [class^=pb_list_kit] {
+    margin-top: -$space-sm;
     li {
       transition: background-color .25s ease-in-out;
     }

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

@@ -109,20 +109,6 @@ test('should pass className prop', () => {
   expect(kit).toHaveClass(className)
 })
 
-test('typeahead textinput has mb_sm class by default', () => {
-  render(
-    <Typeahead
-        data={{ testid: 'default-mb-test' }}
-        options={options} 
-    />
-  )
-
-  const kit = screen.getByTestId('default-mb-test')
-  expect(kit).toHaveClass("pb_typeahead_kit mb_sm")
-  const textInput = kit.querySelector(".pb_text_input_kit")
-  expect(textInput).toHaveClass("mb_none")
-})
-
 test('typeahead with colored pills', () => {
   render(
     <Typeahead

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

@@ -45,7 +45,6 @@ type TypeaheadProps = {
   getOptionLabel?: string | (() => any),
   getOptionValue?: string | (() => any),
   name?: string,
-  marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
@@ -79,7 +78,6 @@ const Typeahead = ({
   htmlOptions = {},
   id,
   loadOptions = noop,
-  marginBottom = "sm",
   pillColor,
   ...props
 }: TypeaheadProps) => {
@@ -140,7 +138,6 @@ const Typeahead = ({
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
     'pb_typeahead_kit react-select',
-    `mb_${marginBottom}`,
     globalProps(props),
     className
   )

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

@@ -11,15 +11,14 @@ type Props = {
 const TypeaheadControl = (props: Props) => (
   <div className="pb_typeahead_wrapper">
     <TextInput
-        dark={props.selectProps.dark}
-        error={props.selectProps.error}
-        label={props.selectProps.label}
-        marginBottom="none"
+      dark={props.selectProps.dark}
+      error={props.selectProps.error}
+      label={props.selectProps.label}
     >
       <Flex>
         <components.Control
-            className="text_input"
-            {...props}
+          className="text_input"
+          {...props}
         />
       </Flex>
     </TextInput>

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

@@ -9,7 +9,6 @@ examples:
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
     - typeahead_error_state: Error State
-    - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)
 
   react:
@@ -25,5 +24,4 @@ examples:
     - typeahead_async_createable: Createable (+ Async Data)
     - typeahead_error_state: Error State
     - typeahead_custom_menu_list: Custom MenuList
-    - typeahead_margin_bottom: Margin Bottom
     - typeahead_with_pills_color: With Pills (Custom Color)

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

@@ -10,5 +10,4 @@ export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
 export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
 export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
 export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
-export { default as TypeaheadMarginBottom } from './_typeahead_margin_bottom.jsx'
 export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -20,8 +20,7 @@
         label: object.label,
         name: object.name,
         value: object.value,
-        placeholder: object.placeholder,
-        margin_bottom: "none",
+        placeholder: object.placeholder
       }) %>
       <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
       <% end %>

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

@@ -34,16 +34,12 @@ module Playbook
       prop :search_term_minimum_length, default: 3
       prop :search_debounce_timeout, default: 250
       prop :value
-      prop :margin_bottom, type: Playbook::Props::Enum,
-                           values: %w[none xxs xs sm md lg xl],
-                           default: "sm"
       prop :pill_color, type: Playbook::Props::Enum,
                         values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
                         default: "primary"
 
       def classname
-        default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"
-        generate_classname("pb_typeahead_kit") + default_margin_bottom
+        generate_classname("pb_typeahead_kit")
       end
 
       def inline_class
@@ -73,7 +69,6 @@ module Playbook
           inline: inline,
           isMulti: is_multi,
           label: label,
-          marginBottom: margin_bottom,
           multiKit: multi_kit,
           name: name,
           options: options,

data/app/pb_kits/playbook/utilities/icons/allicons.tsx

@@ -1,12 +1,11 @@
 import React from "react";
-import ReactDOMServer from 'react-dom/server';
 
 const spinner = (
-    <svg
-        fill="none"
-        height="25"
-        viewBox="0 0 31 25"
-        width="31"
+    <svg 
+        fill="none" 
+        height="25" 
+        viewBox="0 0 31 25" 
+        width="31" 
         xmlns="http://www.w3.org/2000/svg"
     >
          <path d="M17.4043 1.85547C17.4043 2.69922 16.7012 3.35547 15.9043 3.35547C15.0605 3.35547 14.4043 2.69922 14.4043 1.85547C14.4043 1.05859 15.0605 0.355469 15.9043 0.355469C16.7012 0.355469 17.4043 1.05859 17.4043 1.85547ZM17.4043 22.8555C17.4043 23.6992 16.7012 24.3555 15.9043 24.3555C15.0605 24.3555 14.4043 23.6992 14.4043 22.8555C14.4043 22.0586 15.0605 21.3555 15.9043 21.3555C16.7012 21.3555 17.4043 22.0586 17.4043 22.8555ZM24.9043 12.3555C24.9043 11.5586 25.5605 10.8555 26.4043 10.8555C27.2012 10.8555 27.9043 11.5586 27.9043 12.3555C27.9043 13.1992 27.2012 13.8555 26.4043 13.8555C25.5605 13.8555 24.9043 13.1992 24.9043 12.3555ZM5.4043 13.8555C4.56055 13.8555 3.9043 13.1992 3.9043 12.3555C3.9043 11.5586 4.56055 10.8555 5.4043 10.8555C6.20117 10.8555 6.9043 11.5586 6.9043 12.3555C6.9043 13.1992 6.20117 13.8555 5.4043 13.8555ZM7.41992 20.8398C6.81055 20.2773 6.81055 19.3398 7.41992 18.7305C7.98242 18.168 8.91992 18.168 9.5293 18.7305C10.0918 19.3398 10.0918 20.2773 9.5293 20.8398C8.91992 21.4492 7.98242 21.4492 7.41992 20.8398ZM22.2324 20.8398C21.8574 20.5117 21.6699 19.9023 21.8105 19.3867C21.9512 18.8711 22.373 18.4492 22.8887 18.3086C23.4043 18.168 24.0137 18.3555 24.3887 18.7305C24.7637 19.1055 24.9512 19.668 24.8105 20.2305C24.6699 20.7461 24.248 21.168 23.7324 21.3086C23.1699 21.4492 22.6074 21.2617 22.2324 20.8398ZM7.41992 3.87109C7.98242 3.30859 8.91992 3.30859 9.5293 3.87109C10.0918 4.48047 10.0918 5.41797 9.5293 6.02734C8.91992 6.58984 7.98242 6.58984 7.41992 6.02734C6.81055 5.41797 6.81055 4.48047 7.41992 3.87109Z" 
@@ -16,10 +15,10 @@ const spinner = (
 )
 
 const clock = (
-    <svg
-        fill="none"
-        height="25"
-        viewBox="0 0 31 25"
+    <svg  
+        fill="none" 
+        height="25" 
+        viewBox="0 0 31 25" 
         width="31"
         xmlns="http://www.w3.org/2000/svg"
     >
@@ -31,10 +30,10 @@ const clock = (
 
 const times = (
     <svg
-        fill="none"
-        height="25"
-        viewBox="0 0 31 25"
-        width="31"
+        fill="none" 
+        height="25" 
+        viewBox="0 0 31 25" 
+        width="31" 
         xmlns="http://www.w3.org/2000/svg"
     >
         <path
@@ -44,109 +43,6 @@ const times = (
     </svg>
 )
 
-const shieldCheck = (
-     <svg 
-         fill="none" 
-         height="25" 
-         viewBox="0 0 30 25" 
-         width="30" 
-         xmlns="http://www.w3.org/2000/svg"
-     >
-         <g clipPath="url(#clip0_3501_2627)">
-         <path 
-             d="M23.613 6.22616C19.2319 5.05738 16.2038 3.57683 14.9994 2.93168C13.795 3.57684 10.7668 5.05738 6.38579 6.22616C6.49648 10.1825 7.36742 13.3152 8.82039 15.769C10.2812 18.2361 12.3678 20.0807 14.9994 21.3944C17.6301 20.0812 19.7161 18.2374 21.1769 15.7716C22.6308 13.3174 23.5022 10.1839 23.613 6.22616ZM14.2526 0.775118C14.7176 0.512911 15.2824 0.51361 15.7463 0.775204C16.4986 1.19938 19.7418 2.92765 24.7399 4.19445C25.4023 4.36236 25.8799 4.96401 25.8736 5.66282C25.8329 10.1987 24.8831 13.9298 23.1127 16.9184C21.3379 19.9142 18.7794 22.0943 15.64 23.5849C15.235 23.7772 14.7638 23.7773 14.3587 23.5849C11.2184 22.0938 8.65916 19.9128 6.88434 16.9154C5.11385 13.9254 4.16463 10.1924 4.12506 5.65388C4.11862 4.91506 4.64477 4.35024 5.26787 4.19218C10.2611 2.92549 13.5011 1.19889 14.2526 0.775118ZM11.685 11.1425C11.2467 10.7022 10.5344 10.7006 10.094 11.139C9.65373 11.5774 9.65215 12.2897 10.0905 12.73L12.7278 15.379C13.3123 15.9661 14.2621 15.9682 14.8491 15.3837L19.8781 10.377C20.3184 9.93866 20.32 9.22635 19.8816 8.78604C19.4432 8.34573 18.7309 8.34415 18.2906 8.78251L13.7932 13.26L11.685 11.1425Z" 
-             fill="#242B42"
-         />
-         </g>
-         <defs>
-         <clipPath id="clip0_3501_2627">
-         <rect 
-             fill="white" 
-             height="24" 
-             transform="translate(0 0.142883)"
-             width="30" 
-         />
-         </clipPath>
-         </defs>
-     </svg>
-) 
-
-const eye = (
-    <svg
-        fill="none"
-        height="1.5em"
-        viewBox="0 0 30 24"
-        width="1.5em"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-          clipRule="evenodd"
-          d="M15.063 1.393c-4.268 0-7.06 1.76-9.073 3.89C5.002 6.33 4.206 7.46 3.522 8.475l-.395.589c-.526.787-.97 1.454-1.424 1.994a1.521 1.521 0 00-.045 1.902c.303.396.634.893 1.005 1.45 2.092 3.136 5.466 8.197 12.4 8.197 7.192 0 10.277-4.932 12.237-8.066.385-.615.727-1.161 1.047-1.587a1.524 1.524 0 00-.049-1.895c-.459-.548-.906-1.23-1.436-2.037l-.001-.001-.354-.539c-.672-1.014-1.453-2.145-2.425-3.192-1.984-2.135-4.75-3.897-9.02-3.897zM4.703 13.376c-.313-.46-.616-.906-.917-1.323a35.29 35.29 0 001.245-1.788l.357-.533c.67-.995 1.383-1.998 2.238-2.904C9.3 5.056 11.53 3.643 15.063 3.643c3.53 0 5.728 1.41 7.37 3.178.84.905 1.538 1.907 2.197 2.903l.324.492v.001c.417.635.837 1.276 1.265 1.84a43.715 43.715 0 00-1.021 1.551c-1.99 3.115-4.311 6.749-10.135 6.749-5.613 0-8.22-3.833-10.36-6.981zm10.35 2.638a3.946 3.946 0 10-.243-7.885c.168.23.243.602.243 1.204a3.187 3.187 0 01-3.188 3.188 3.83 3.83 0 01-.739-.056 3.947 3.947 0 003.927 3.549zm0 2.25a6.196 6.196 0 100-12.393 6.196 6.196 0 000 12.393z"
-          fill="#242B42"
-      />
-    </svg>
-)
-
-const envelope = (
-  <svg
-      fill="none"
-      height="1.5em"
-      viewBox="0 0 30 25"
-      width="1.5em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-          d="M5.625 6.286c0-.207.168-.375.375-.375h18c.207 0 .375.168.375.375v1.636L15 13.95 5.625 7.922V6.286zm-2.25 2.232V18.286A2.625 2.625 0 006 20.91h18a2.625 2.625 0 002.625-2.625V8.553 6.286A2.625 2.625 0 0024 3.66H6a2.625 2.625 0 00-2.625 2.625v2.232zm21 2.079v7.689a.375.375 0 01-.375.375H6a.375.375 0 01-.375-.375v-7.69l8.564 5.508a1.5 1.5 0 001.622 0l8.564-5.507z"
-          fill="#242B42"
-      />
-    </svg>
-)
-
-const arrowUpShortWide = (
-  <svg
-      fill="none"
-      height="1.5em"
-      viewBox="0 0 30 25"
-      width="1.5em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-          d="M3.44 8.724a1.125 1.125 0 11-1.59-1.59l4.235-4.236a1.5 1.5 0 012.12 0l4.236 4.235a1.125 1.125 0 01-1.591 1.591l-2.58-2.58V21.43a1.125 1.125 0 01-2.25 0V6.145l-2.58 2.58zM14.25 20.68c0-.622.504-1.125 1.125-1.125h12a1.125 1.125 0 110 2.25h-12a1.125 1.125 0 01-1.125-1.125zm1.125-6.63a1.125 1.125 0 000 2.25h9a1.125 1.125 0 100-2.25h-9zm-1.125-4.37c0-.622.504-1.125 1.125-1.125h6a1.125 1.125 0 110 2.25h-6a1.125 1.125 0 01-1.125-1.125zm1.125-6.625a1.125 1.125 0 000 2.25h3a1.125 1.125 0 100-2.25h-3z"
-          fill="#242B42"
-      />
-    </svg>
-)
-
-const arrowDownShortWide = (
-  <svg
-      fill="none"
-      height="1.5em"
-      viewBox="0 0 30 25"
-      width="1.5em"
-      xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-        d="M8.27 3.857a1.125 1.125 0 00-2.25 0v15.284l-2.58-2.58a1.125 1.125 0 10-1.59 1.592l4.235 4.235a1.5 1.5 0 002.12 0l4.236-4.235a1.125 1.125 0 10-1.591-1.591l-2.58 2.58V3.856zm5.98 17.25c0-.621.504-1.125 1.125-1.125h12a1.125 1.125 0 110 2.25h-12a1.125 1.125 0 01-1.125-1.125zm1.125-6.63a1.125 1.125 0 000 2.25h8.25a1.125 1.125 0 100-2.25h-8.25zm-1.125-4.37c0-.621.504-1.125 1.125-1.125h5.25a1.125 1.125 0 110 2.25h-5.25a1.125 1.125 0 01-1.125-1.125zm1.125-6.625a1.125 1.125 0 000 2.25h1.5a1.125 1.125 0 100-2.25h-1.5z"
-        fill="#242B42"
-    />
-  </svg>
-)
-
-const angleDown = (
-  <svg
-      fill="none"
-      height="1.5em"
-      viewBox="0 0 30 24"
-      width="1.5em"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-    <path
-        d="M6.543 7.69a1.125 1.125 0 011.59.034L15 14.884l6.866-7.16A1.125 1.125 0 1123.49 9.28l-7.407 7.725a1.5 1.5 0 01-2.166 0L6.51 9.281a1.125 1.125 0 01.033-1.59z"
-        fill="#242B42"
-    />
-  </svg>
-)
-
 export const getAllIcons = () => {
 
     return {
@@ -158,25 +54,6 @@ export const getAllIcons = () => {
         },
         times: {
             icon: times
-        },
-        shieldCheck: {
-            icon: shieldCheck
-        },
-        eye: {
-            icon: eye
-        },
-        envelope: {
-            icon: envelope
-        },
-        arrowUpShortWide: {
-            icon: arrowUpShortWide
-        },
-        arrowDownShortWide: {
-            icon: arrowDownShortWide
-        },
-        angleDown: {
-            icon: angleDown,
-            string: ReactDOMServer.renderToStaticMarkup(angleDown)
         }
     }
 }