playbook_ui 14.5.0.pre.alpha.20241007playbookwebsiteaddrdbms4036 → 14.5.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c9d08fec85ee5acbc34292a8fe9c2554c5e77a0da8e39d8aa8c901d7e911c05
-  data.tar.gz: 91c6c9fa38bfcd8910cabf5df1742689a327464084f5692b722f33d3576af112
+  metadata.gz: d5db9d9e648225f1c6da33c6a9aadca5af36a5bf6fa52710e5b773f29b20a078
+  data.tar.gz: a0d7f3031d173e1ff7fb9f4876b8e34e673bd3c4f2b027ee910c54a23632a714
 SHA512:
-  metadata.gz: c0d2bfbd37af33531f7638d2f1e7e72ebe1f0bcedb5ec8f0b7df81431110a14754ed7c4d73ee19a3bb0f500e40f9e83be46ea6bf9e82d9fe186e4fca9a9818b0
-  data.tar.gz: c617f6acf17b65fbed0633c84baa9fbc240bc549d30633aa89b004734137a48632a47300e64b7d5660d4b71b86e05d68ae5cac13bc00f8de47e59ece1c655567
+  metadata.gz: 0b4292d751af2d2e798e1161a99c7ef9cf1392cabefd414db8266b334b23b26b622b905db0d0daa5e6e3e857318090381aa1be85d1188b59825d615662e824b7
+  data.tar.gz: 48b795ea15b9f3e401c84cc21d274c16d6fa1ccee667ccc7dd480fe162de9eb6db3e5cbc73a91cb7b2e6a336b03811ab770bfed078ac460127676cc8ead5b280

data/app/pb_kits/playbook/_playbook.scss

@@ -1,4 +1,3 @@
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_avatar_action_button/avatar_action_button';
@@ -106,7 +105,6 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import 'pb_drawer/drawer';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx

@@ -4,7 +4,6 @@ import { Header } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 
 import Icon from "../../pb_icon/_icon"
-import { getAllIcons } from "../../utilities/icons/allicons"
 
 import { displayIcon } from "../Utilities/IconHelpers"
 
@@ -12,39 +11,21 @@ type SortIconButtonProps = {
   header: Header<GenericObject, unknown>
   sortIcon?: string | string[]
 }
-
 export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
 
-const firstIcon = displayIcon(sortIcon)[0] 
-const secondIcon = displayIcon(sortIcon)[1] 
-const upIcon = getAllIcons()["arrowUpShortWide"].icon as unknown as { [key: string]: SVGElement }
-const downIcon = getAllIcons()["arrowDownShortWide"].icon as unknown as { [key: string]: SVGElement }
-
   return (
     <>
       {header.column.getIsSorted() === "desc" ? (
         <div className="sort-button-icon" 
-            key={firstIcon}
+            key={displayIcon(sortIcon)[0]}
         >
-        { firstIcon === "arrow-up-short-wide" ? (
-          <Icon 
-              className="svg-inline--fa"
-              customIcon={upIcon}
-          /> ) : (
-          <Icon icon={firstIcon} />
-        )}
+          <Icon icon={displayIcon(sortIcon)[0]} />
         </div>
       ) : (
         <div className="sort-button-icon" 
-            key={secondIcon}
+            key={displayIcon(sortIcon)[1]}
         >
-        { secondIcon === "arrow-down-short-wide" ? (
-          <Icon 
-              className="svg-inline--fa"
-              customIcon={downIcon}
-          /> ) : (
-          <Icon icon={secondIcon} />
-        )}
+          <Icon icon={displayIcon(sortIcon)[1]} />
         </div>
       )}
     </>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -462,4 +462,4 @@ test("responsive none prop functions as expected", () => {
 
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
-})
+})

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -116,15 +116,11 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
   const content = (
     <span className="pb_button_content">
       {icon && !iconRight && (
-        <Icon className='button_with_icon'
-            icon={icon}
-        />
+        <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon`} />
       )}
       <span>{text || children}</span>
       {icon && iconRight && (
-        <Icon className='button_with_icon_right'
-            icon={icon}
-        />
+        <i className={`pb_icon_kit far fa-${icon} fa-fw button_with_icon_right`} />
       )}
     </span>
   )

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -7,7 +7,6 @@ import { globalProps } from '../utilities/globalProps'
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
 import Icon from '../pb_icon/_icon'
-import { getAllIcons } from "../utilities/icons/allicons"
 
 const contactTypeMap: { [key: string]: string } = {
   'cell': 'mobile',
@@ -19,8 +18,6 @@ const contactTypeMap: { [key: string]: string } = {
   'wrong-phone': 'phone-slash',
 }
 
-const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string]: SVGElement }
-
 const formatContact = (contactString: string, contactType: string) => {
   if (contactType === 'email') return contactString
 
@@ -94,20 +91,11 @@ const Contact = (props: ContactProps): React.ReactElement => {
           dark={dark}
           tag="span"
       >
-          {contactType === 'email' ? (
-            <Icon 
-                className="svg-inline--fa envelope"
-                customIcon={envelopeIcon} 
-                dark={dark} 
-                fixedWidth 
-            />
-          ) : (
-            <Icon
-                dark={dark}
-                fixedWidth
-                icon={contactTypeMap[contactType] || 'phone'}
-            />
-          )}
+        <Icon
+            dark={dark}
+            fixedWidth
+            icon={contactTypeMap[contactType] || 'phone'}
+        />
         {` ${formatContact(contactValue, contactType)} `}
         {contactDetail && (
           <Caption

data/app/pb_kits/playbook/pb_contact/contact.html.erb

@@ -4,20 +4,12 @@
         classname: "pb_contact_kit", 
         color: "light",
         dark: object.dark
-  }) do %>
-    <% if contact_type == "email" %>
-      <%= pb_rails("icon", props: { 
-            custom_icon: Playbook::Engine::root.join(envelope_path),
-            fixed_width: true,
-            dark: object.dark
-      }) %>
-    <% else %>
-      <%= pb_rails("icon", props: { 
-            icon: object.contact_icon, 
-            fixed_width: true,
-            dark: object.dark
-      }) %>
-    <% end %>
+      }) do %>
+    <%= pb_rails("icon", props: { 
+          icon: object.contact_icon, 
+          fixed_width: true,
+          dark: object.dark
+        }) %>
     <%= object.formatted_contact_value if object.contact_value %>
 
     <%= pb_rails("caption", props: { 

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -44,10 +44,6 @@ module Playbook
         end
       end
 
-      def envelope_path
-        "app/pb_kits/playbook/utilities/icons/envelope.svg"
-      end
-
     private
 
       def formatted_value

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -79,7 +79,7 @@ test('returns correct icon', () => {
   expect(screen.getByTestId('test-home').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
   expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
   expect(screen.getByTestId('test-work-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-laptop')
-  expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toHaveClass('envelope')
+  expect(screen.getByTestId('test-email').querySelector('.pb_icon_kit')).toHaveClass('fa-envelope')
   expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-slash')
   expect(screen.getByTestId('test-wrong-type').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
   expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')

data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts

@@ -3,7 +3,11 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import { PlotTreemapOptions } from "highcharts";
+interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
+  traverseUpButton?: {
+    position: { y: number };
+  };
+}
 
 const highchartsDarkTheme: ThemeProps = {
   lang: {
@@ -202,7 +206,7 @@ const highchartsDarkTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    } as PlotTreemapOptions,
+    } as CustomTreemapOptions,
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts

@@ -3,7 +3,12 @@ import typography from '../tokens/exports/_typography.module.scss'
 
 import { ThemeProps } from './themeTypes'
 
-import { PlotTreemapOptions } from "highcharts";
+interface CustomTreemapOptions extends Highcharts.SeriesTreemapOptions {
+  traverseUpButton?: {
+    position: { y: number };
+  };
+}
+
 
 const highchartsTheme: ThemeProps = {
   lang: {
@@ -201,7 +206,7 @@ const highchartsTheme: ThemeProps = {
       traverseUpButton: {
         position: { y: -50 },
       },
-    } as PlotTreemapOptions,
+    } as CustomTreemapOptions,
   },
   credits: {
     enabled: false

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -3,7 +3,6 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
-import { getAllIcons } from "../utilities/icons/allicons"
 
 import datePickerHelper from './date_picker_helper'
 import Icon from '../pb_icon/_icon'
@@ -162,7 +161,7 @@ useEffect(() => {
     }
     return base
   }
-  const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
+
 
   return (
     <div
@@ -232,8 +231,8 @@ useEffect(() => {
                     id={`${pickerId}-angle-down`}
                 >
                   <Icon
-                      className="angle_down_icon svg-inline--fa"
-                      customIcon={angleDown}
+                      className="angle_down_icon"
+                      icon="angle-down"
                   />
                 </div>
               </div>

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -61,7 +61,7 @@
       >
         <%= pb_rails("icon", props: {
           classname: "angle_down_icon",
-          custom_icon: Playbook::Engine::root.join(angle_down_path)
+          icon: "angle-down"
         }) %>
       </div>
     <% end %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

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

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -5,9 +5,6 @@ import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
 import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
 import timeSelectPlugin from './plugins/timeSelect'
 import quickPickPlugin from './plugins/quickPick'
-import { getAllIcons } from '../utilities/icons/allicons';
-
-const angleDown = getAllIcons().angleDown.string
 
 const getPositionElement = (element: string | Element) => {
   return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -259,10 +256,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     })
   }
 
-  // Adding dropdown icons to year and month select
-  dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
+  // Adding dropdown icons to year and month selects
+  dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
   if (picker.monthElements[0].parentElement) {
-    return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDown}</i>`)}
+    return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')}
   // if (picker.weekElements[0].parentElement){
   //   return  picker.weekElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
   // }

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -14,4 +14,4 @@
     }
     fpInline.config.onChange.push(showAngleDownHandler)
   })
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss

@@ -76,11 +76,7 @@
   pointer-events: none;
   color: $text_lt_light;
 }
-.year-dropdown-icon svg, .month-dropdown-icon svg {
-  width: 16px;
-  margin-top: 6px;
-  margin-left: -2px;
-}
+
 // Left - Right Arrow Styling
 .flatpickr-prev-month {
   display: flex;
@@ -117,4 +113,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -187,8 +187,6 @@
 
   &_close_icon {
     cursor: pointer;
-    font-size: $font_base;
-    line-height: $lh_normal;
   }
 
   &_overlay {

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -2,7 +2,7 @@
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
 
-            <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> >
+            <button class="dialog-button-class" type="button" data-close-dialog= <%= object.id %> >
                 <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
             </button>
         <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb

@@ -30,11 +30,7 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: {
-        text: "Apply",
-        data: {
-          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>
@@ -68,11 +64,7 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: {
-        text: "Apply",
-        data: {
-          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb

@@ -35,11 +35,7 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: {
-        text: "Apply",
-        data: {
-          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb

@@ -30,11 +30,7 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: {
-        text: "Apply",
-        data: {
-          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb

@@ -69,11 +69,7 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: {
-        text: "Apply",
-        data: {
-          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb

@@ -24,11 +24,7 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: {
-        text: "Apply",
-        data: {
-          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb

@@ -22,11 +22,7 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: {
-        text: "Apply",
-        data: {
-          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb

@@ -23,11 +23,7 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: {
-        text: "Apply",
-        data: {
-          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb

@@ -29,11 +29,7 @@
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
 
     <%= form.actions do |action| %>
-      <%= action.submit props: {
-        text: "Apply",
-        data: {
-          disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
-      },}%>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
       <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
     <% end %>
   <% end %>

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -47,13 +47,9 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
 
   const iconClass = icon ? "_icon" : ""
   const closeIconSize = size === "small" ? "xs" : "sm"
-
-  const filteredProps: FormPillProps = {...props}
-  delete filteredProps.truncate
-
   const css = classnames(
     `pb_form_pill_kit_${color}${iconClass}`,
-    globalProps(filteredProps),
+    globalProps(props),
     className,
     size === 'small' ? 'small' : null,
     textTransform,
@@ -81,7 +77,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_text"
               size={4}
               text={name}
-              truncate={props.truncate}
           />
         </>
       )}
@@ -97,7 +92,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_text"
               size={4}
               text={name}
-              truncate={props.truncate}
           />
           <Icon
               className="pb_form_pill_icon"
@@ -117,7 +111,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
               className="pb_form_pill_tag"
               size={4}
               text={text}
-              truncate={props.truncate}
           />
         </>
       )}
@@ -126,7 +119,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
             className="pb_form_pill_tag"
             size={4}
             text={text}
-            truncate={props.truncate}
         />
       )}
       <div

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

@@ -3,7 +3,6 @@ examples:
   rails:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
-  - form_pill_truncated_text: Truncated Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
@@ -12,7 +11,6 @@ examples:
   react:
   - form_pill_user: Form Pill User
   - form_pill_size: Form Pill Size
-  - form_pill_truncated_text: Truncated Text
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon

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

@@ -4,4 +4,3 @@ export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
 export { default as FormPillColors } from './_form_pill_colors.jsx'
-export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'

data/app/pb_kits/playbook/pb_map/_map_controls.tsx

@@ -2,7 +2,6 @@ import React from "react";
 import Button from "../pb_button/_button";
 import Icon from "../pb_icon/_icon";
 import Flex from "../pb_flex/_flex";
-import { getAllIcons } from "../utilities/icons/allicons"
 
 type MapControlTypes = {
   zoomBtns?: boolean, 
@@ -13,8 +12,6 @@ type MapControlTypes = {
   children?: React.ReactNode | React.ReactNode[]
 }
 
-const eyeIcon = getAllIcons()["eye"]
-
 const MapControls = ({
   zoomBtns,
   zoomInClick,
@@ -45,10 +42,7 @@ const MapControls = ({
             <Button className="map-flyto-button"
                 onClick={flyToClick}
             >
-              <Icon 
-                  className="svg-inline--fa"
-                  customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }} 
-              />
+              <Icon icon="eye" />
             </Button>
           ) : null}
         </>