@itiseeron/component-lib 1.0.0 → 1.1.0

package/dist/index.js

@@ -32,7 +32,6 @@ __export(index_exports, {
   Card: () => Card,
   HamburgerMenu: () => HamburgerMenu,
   HamburgerMenuView: () => HamburgerMenuView,
-  HelloWorld: () => HelloWorld,
   ImageTile: () => ImageTile,
   InputForm: () => InputForm,
   Loading: () => Loading,
@@ -48,14 +47,8 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/HelloWorld/HelloWorld.jsx
-var import_react = __toESM(require("react"));
-var HelloWorld = () => {
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, "HelloWorld");
-};
-
 // src/components/Button/ThinButton.tsx
-var import_react2 = __toESM(require("react"));
+var import_react = __toESM(require("react"));
 var import_prop_types = __toESM(require("prop-types"));
 var container = {
   //flex: 1,
@@ -82,7 +75,12 @@ var buttonText = {
   color: "#B3C0C2",
   fontSize: "16px",
   alignSelf: "center",
-  font: ""
+  fontFamily: "nunito-regular"
+};
+var buttonReset = {
+  appearance: "none",
+  border: "none",
+  backgroundColor: "transparent"
 };
 function ThinButton({
   testID = "thin-button",
@@ -94,17 +92,17 @@ function ThinButton({
   },
   children
 }) {
-  const [touched, touchedSet] = import_react2.default.useState(false);
-  return /* @__PURE__ */ import_react2.default.createElement(
+  const [touched, touchedSet] = import_react.default.useState(false);
+  return /* @__PURE__ */ import_react.default.createElement(
     "button",
     {
       id: testID,
-      style: { ...buttonStyle, opacity: touched ? 0.5 : 1, transition: "opacity 300ms ease" },
+      style: { ...buttonReset, ...buttonStyle, opacity: touched ? 0.5 : 1, transition: "opacity 300ms ease" },
       onClick: onclick,
       onMouseDown: () => touchedSet(true),
       onMouseUp: () => touchedSet(false)
     },
-    children == void 0 || children == null ? /* @__PURE__ */ import_react2.default.createElement("span", { style: buttonTextStyle }, text) : children
+    children == void 0 || children == null ? /* @__PURE__ */ import_react.default.createElement("span", { style: buttonTextStyle }, text) : children
   );
 }
 ThinButton.propTypes = {
@@ -119,7 +117,7 @@ ThinButton.propTypes = {
 };
 
 // src/components/Card/Card.tsx
-var import_react3 = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
 var import_prop_types2 = __toESM(require("prop-types"));
 var container2 = {
   backgroundColor: "white",
@@ -172,6 +170,11 @@ var closeButtonContainer = {
   border: "none",
   background: "none"
 };
+var buttonReset2 = {
+  appearance: "none",
+  border: "none",
+  backgroundColor: "transparent"
+};
 function Card({
   containerStyle = container2,
   wrapperStyle = wrapper,
@@ -181,58 +184,59 @@ function Card({
   subtitleStyle = subtitle,
   titleContainerStyle = titleBoxContainer,
   closeButtonStyle = closeButton,
+  closeButtonContainerStyle = closeButtonContainer,
   showCloseButton = false,
   onClickCloseButton: closeButtonPressedCallBack = () => {
   },
   children
 }) {
-  const [touched, touchedSet] = import_react3.default.useState(false);
+  const [touched, touchedSet] = import_react2.default.useState(false);
   function renderCloseButton() {
     if (showCloseButton) {
-      return /* @__PURE__ */ import_react3.default.createElement(
+      return /* @__PURE__ */ import_react2.default.createElement(
         "button",
         {
           id: "click-card-close-button",
-          style: { ...closeButtonContainer, opacity: touched ? 0.5 : 1, transition: "opacity 300ms ease" },
+          style: { ...buttonReset2, ...closeButtonContainerStyle, opacity: touched ? 0.5 : 1, transition: "opacity 300ms ease" },
           onClick: closeButtonPressedCallBack,
           onMouseDown: () => touchedSet(true),
           onMouseUp: () => touchedSet(false)
         },
-        /* @__PURE__ */ import_react3.default.createElement("span", { style: closeButtonStyle }, "X")
+        /* @__PURE__ */ import_react2.default.createElement("span", { style: closeButtonStyle }, "X")
       );
     }
-    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null);
+    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null);
   }
   function renderSubtitle() {
     if (subtitleText == null || subtitleText == void 0) {
-      return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null);
+      return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null);
     }
-    return /* @__PURE__ */ import_react3.default.createElement("span", { style: subtitleStyle }, subtitleText);
+    return /* @__PURE__ */ import_react2.default.createElement("span", { style: subtitleStyle }, subtitleText);
   }
   function renderTitle() {
-    if (titleText2 == null || titleText2 == void 0) return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null);
-    return /* @__PURE__ */ import_react3.default.createElement("div", { style: titleContainerStyle }, /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("span", { style: titleStyle }, titleText2)), /* @__PURE__ */ import_react3.default.createElement("div", null, renderSubtitle()));
+    if (titleText2 == null || titleText2 == void 0) return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null);
+    return /* @__PURE__ */ import_react2.default.createElement("div", { style: titleContainerStyle }, /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("span", { style: titleStyle }, titleText2)), /* @__PURE__ */ import_react2.default.createElement("div", null, renderSubtitle()));
   }
-  return /* @__PURE__ */ import_react3.default.createElement("div", { style: containerStyle }, renderCloseButton(), renderTitle(), /* @__PURE__ */ import_react3.default.createElement("div", { style: wrapperStyle }, children));
+  return /* @__PURE__ */ import_react2.default.createElement("div", { style: containerStyle }, renderCloseButton(), renderTitle(), /* @__PURE__ */ import_react2.default.createElement("div", { style: wrapperStyle }, children));
 }
 Card.propTypes = {
   key: import_prop_types2.default.string,
   children: import_prop_types2.default.any,
   containerStyle: import_prop_types2.default.object,
   wrapperStyle: import_prop_types2.default.object,
-  title: import_prop_types2.default.string,
+  titleText: import_prop_types2.default.string,
   titleStyle: import_prop_types2.default.object,
-  subtitle: import_prop_types2.default.string,
-  subtitleStyle: import_prop_types2.default.string,
+  subtitleText: import_prop_types2.default.string,
+  subtitleStyle: import_prop_types2.default.object,
   titleContainerStyle: import_prop_types2.default.object,
   closeButtonStyle: import_prop_types2.default.object,
   closeButtonContainerStyle: import_prop_types2.default.object,
-  showCloseButton: import_prop_types2.default.object,
-  closeButtonPressedCallBack: import_prop_types2.default.func
+  showCloseButton: import_prop_types2.default.bool,
+  onClickCloseButton: import_prop_types2.default.func
 };
 
 // src/components/InputForm/InputForm.tsx
-var import_react4 = __toESM(require("react"));
+var import_react3 = __toESM(require("react"));
 var import_prop_types3 = __toESM(require("prop-types"));
 var container3 = {
   flex: 1,
@@ -240,7 +244,7 @@ var container3 = {
 };
 var formTitle = {
   flex: 1,
-  fontFamily: "nunito_regular",
+  fontFamily: "nunito-regular",
   color: "#AFB3B5",
   fontSize: "15px"
 };
@@ -268,7 +272,7 @@ var inputForm = {
   paddingLeft: 10
 };
 var errorText = {
-  fontFamily: "nunito_regular",
+  fontFamily: "nunito-regular",
   fontSize: 14,
   color: "#C70000"
 };
@@ -291,7 +295,7 @@ function InputForm({
   trim = false,
   maxLength = 200
 }) {
-  const [internalValue, setInternalValue] = import_react4.default.useState(defaultValue);
+  const [internalValue, setInternalValue] = import_react3.default.useState(defaultValue);
   const isControlled = controlledValue != null;
   const value = isControlled ? controlledValue : internalValue;
   function onChange(rawValue) {
@@ -299,14 +303,14 @@ function InputForm({
     onInput(trim ? rawValue.trim() : rawValue);
   }
   function renderLabel() {
-    if (name == null) return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null);
-    return /* @__PURE__ */ import_react4.default.createElement("div", { style: formTitleWrapper }, /* @__PURE__ */ import_react4.default.createElement("label", { style: formTitleStyle }, name));
+    if (name == null) return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null);
+    return /* @__PURE__ */ import_react3.default.createElement("div", { style: formTitleWrapper }, /* @__PURE__ */ import_react3.default.createElement("label", { style: formTitleStyle }, name));
   }
   function renderError() {
-    if (errorMessage == null) return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null);
-    return /* @__PURE__ */ import_react4.default.createElement("span", { style: errorStyle }, errorMessage);
+    if (errorMessage == null) return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null);
+    return /* @__PURE__ */ import_react3.default.createElement("span", { style: errorStyle }, errorMessage);
   }
-  return /* @__PURE__ */ import_react4.default.createElement("div", { id: testID, style: containerStyle }, renderLabel(), /* @__PURE__ */ import_react4.default.createElement("div", { style: inputWrapper }, multiline ? /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement("div", { id: testID, style: containerStyle }, renderLabel(), /* @__PURE__ */ import_react3.default.createElement("div", { style: inputWrapper }, multiline ? /* @__PURE__ */ import_react3.default.createElement(
     "textarea",
     {
       value,
@@ -316,7 +320,7 @@ function InputForm({
       maxLength,
       onChange: (input) => onChange(input.currentTarget.value)
     }
-  ) : /* @__PURE__ */ import_react4.default.createElement(
+  ) : /* @__PURE__ */ import_react3.default.createElement(
     "input",
     {
       value,
@@ -349,11 +353,11 @@ InputForm.propTypes = {
 };
 
 // src/components/NavigationBar/NavigationBar.tsx
-var import_react6 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_prop_types5 = __toESM(require("prop-types"));
 
 // src/components/NavigationBar/NavigationBarView.tsx
-var import_react5 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 var import_prop_types4 = __toESM(require("prop-types"));
 var container4 = {
   display: "flex",
@@ -387,6 +391,11 @@ var itemText = {
 var activeItemText = {
   color: "#00ADE9"
 };
+var itemReset = {
+  appearance: "none",
+  border: "none",
+  backgroundColor: "transparent"
+};
 function NavigationBarView({
   testID = "navigation-bar",
   items,
@@ -400,20 +409,20 @@ function NavigationBarView({
 }) {
   function renderItem(navItem) {
     const active = navItem.key === selectedKey;
-    return /* @__PURE__ */ import_react5.default.createElement(
+    return /* @__PURE__ */ import_react4.default.createElement(
       "button",
       {
         id: `${testID}-item-${navItem.key}`,
         key: navItem.key,
         disabled: navItem.disabled,
-        style: { ...itemStyle, ...active ? activeItemStyle : {}, opacity: navItem.disabled ? 0.4 : 1 },
+        style: { ...itemReset, ...itemStyle, ...active ? activeItemStyle : {}, opacity: navItem.disabled ? 0.4 : 1 },
         onClick: () => onItemSelect(navItem)
       },
       navItem.icon,
-      /* @__PURE__ */ import_react5.default.createElement("span", { style: { ...itemTextStyle, ...active ? activeItemTextStyle : {} } }, navItem.label)
+      /* @__PURE__ */ import_react4.default.createElement("span", { style: { ...itemTextStyle, ...active ? activeItemTextStyle : {} } }, navItem.label)
     );
   }
-  return /* @__PURE__ */ import_react5.default.createElement("nav", { id: testID, style: containerStyle }, items.map(renderItem));
+  return /* @__PURE__ */ import_react4.default.createElement("nav", { id: testID, style: containerStyle }, items.map(renderItem));
 }
 NavigationBarView.propTypes = {
   testID: import_prop_types4.default.string,
@@ -440,7 +449,7 @@ function NavigationBar({
   selectedKey: controlledSelectedKey,
   onSelect: onSelectCallback = () => {
   },
-  render = (viewProps) => /* @__PURE__ */ import_react6.default.createElement(NavigationBarView, { ...viewProps }),
+  render = (viewProps) => /* @__PURE__ */ import_react5.default.createElement(NavigationBarView, { ...viewProps }),
   containerStyle,
   itemStyle,
   activeItemStyle,
@@ -448,7 +457,7 @@ function NavigationBar({
   activeItemTextStyle
 }) {
   var _a;
-  const [internalSelectedKey, setInternalSelectedKey] = import_react6.default.useState(defaultSelectedKey != null ? defaultSelectedKey : (_a = items[0]) == null ? void 0 : _a.key);
+  const [internalSelectedKey, setInternalSelectedKey] = import_react5.default.useState(defaultSelectedKey != null ? defaultSelectedKey : (_a = items[0]) == null ? void 0 : _a.key);
   const isControlled = controlledSelectedKey != null;
   const selectedKey = isControlled ? controlledSelectedKey : internalSelectedKey;
   function selectItem(navItem) {
@@ -489,11 +498,11 @@ NavigationBar.propTypes = {
 };
 
 // src/components/HamburgerMenu/HamburgerMenu.tsx
-var import_react8 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_prop_types7 = __toESM(require("prop-types"));
 
 // src/components/HamburgerMenu/HamburgerMenuView.tsx
-var import_react7 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_prop_types6 = __toESM(require("prop-types"));
 var container5 = {
   position: "relative",
@@ -517,6 +526,11 @@ var iconText = {
   color: "#B3C0C2",
   fontSize: "24px"
 };
+var buttonReset3 = {
+  appearance: "none",
+  border: "none",
+  backgroundColor: "transparent"
+};
 var panel = {
   position: "absolute",
   top: "100%",
@@ -547,22 +561,22 @@ function HamburgerMenuView({
   itemTextStyle,
   activeItemTextStyle
 }) {
-  const [isOpen, setIsOpen] = import_react7.default.useState(false);
+  const [isOpen, setIsOpen] = import_react6.default.useState(false);
   function selectAndClose(navItem) {
     onItemSelect(navItem);
     setIsOpen(false);
   }
-  return /* @__PURE__ */ import_react7.default.createElement("div", { id: testID, style: containerStyle }, /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react6.default.createElement("div", { id: testID, style: containerStyle }, /* @__PURE__ */ import_react6.default.createElement(
     "button",
     {
       id: `${testID}-toggle`,
       type: "button",
       "aria-expanded": isOpen,
-      style: buttonStyle,
+      style: { ...buttonReset3, ...buttonStyle },
       onClick: () => setIsOpen((open) => !open)
     },
-    icon != null ? icon : /* @__PURE__ */ import_react7.default.createElement("span", { style: iconStyle }, "\u2630")
-  ), isOpen && /* @__PURE__ */ import_react7.default.createElement(
+    icon != null ? icon : /* @__PURE__ */ import_react6.default.createElement("span", { style: iconStyle }, "\u2630")
+  ), isOpen && /* @__PURE__ */ import_react6.default.createElement(
     NavigationBarView,
     {
       testID: `${testID}-panel`,
@@ -615,7 +629,7 @@ function HamburgerMenu({
   itemTextStyle,
   activeItemTextStyle
 }) {
-  return /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react7.default.createElement(
     NavigationBar,
     {
       testID,
@@ -623,7 +637,7 @@ function HamburgerMenu({
       defaultSelectedKey,
       selectedKey,
       onSelect,
-      render: (viewProps) => /* @__PURE__ */ import_react8.default.createElement(
+      render: (viewProps) => /* @__PURE__ */ import_react7.default.createElement(
         HamburgerMenuView,
         {
           testID: viewProps.testID,
@@ -668,11 +682,11 @@ HamburgerMenu.propTypes = {
 };
 
 // src/components/RadioButtonGroup/RadioButtonGroup.tsx
-var import_react10 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_prop_types9 = __toESM(require("prop-types"));
 
 // src/components/RadioButtonGroup/RadioButtonGroupView.tsx
-var import_react9 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_prop_types8 = __toESM(require("prop-types"));
 var titleContainer = {
   width: "100%"
@@ -700,7 +714,9 @@ var item2 = {
   height: "40px",
   padding: "10px",
   backgroundColor: "transparent",
-  border: "1px solid rgba(55,66,69,.5)",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  borderColor: "rgba(55,66,69,.5)",
   cursor: "pointer",
   transition: "opacity 300ms ease"
 };
@@ -716,6 +732,11 @@ var itemText2 = {
 var activeItemText2 = {
   color: "white"
 };
+var itemReset2 = {
+  appearance: "none",
+  border: "none",
+  backgroundColor: "transparent"
+};
 function RadioButtonGroupView({
   testID = "radio-button-group",
   items,
@@ -731,8 +752,8 @@ function RadioButtonGroupView({
   activeItemTextStyle = activeItemText2
 }) {
   function renderTitle() {
-    if (title2 == null) return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null);
-    return /* @__PURE__ */ import_react9.default.createElement("div", { style: titleContainerStyle }, /* @__PURE__ */ import_react9.default.createElement("span", { style: titleStyle }, title2));
+    if (title2 == null) return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null);
+    return /* @__PURE__ */ import_react8.default.createElement("div", { style: titleContainerStyle }, /* @__PURE__ */ import_react8.default.createElement("span", { style: titleStyle }, title2));
   }
   function renderItem(navItem, index) {
     const active = navItem.key === selectedKey;
@@ -740,20 +761,20 @@ function RadioButtonGroupView({
       ...index === 0 ? { borderTopLeftRadius: 4, borderBottomLeftRadius: 4 } : {},
       ...index === items.length - 1 ? { borderTopRightRadius: 4, borderBottomRightRadius: 4 } : {}
     };
-    return /* @__PURE__ */ import_react9.default.createElement(
+    return /* @__PURE__ */ import_react8.default.createElement(
       "button",
       {
         id: `${testID}-item-${navItem.key}`,
         key: navItem.key,
         disabled: navItem.disabled,
-        style: { ...positionStyle, ...itemStyle, ...active ? activeItemStyle : {}, opacity: navItem.disabled ? 0.4 : 1 },
+        style: { ...itemReset2, ...positionStyle, ...itemStyle, ...active ? activeItemStyle : {}, opacity: navItem.disabled ? 0.4 : 1 },
         onClick: () => onItemSelect(navItem)
       },
       navItem.icon,
-      /* @__PURE__ */ import_react9.default.createElement("span", { style: { ...itemTextStyle, ...active ? activeItemTextStyle : {} } }, navItem.label)
+      /* @__PURE__ */ import_react8.default.createElement("span", { style: { ...itemTextStyle, ...active ? activeItemTextStyle : {} } }, navItem.label)
     );
   }
-  return /* @__PURE__ */ import_react9.default.createElement("div", { id: testID }, renderTitle(), /* @__PURE__ */ import_react9.default.createElement("div", { style: containerStyle }, items.map(renderItem)));
+  return /* @__PURE__ */ import_react8.default.createElement("div", { id: testID }, renderTitle(), /* @__PURE__ */ import_react8.default.createElement("div", { style: containerStyle }, items.map(renderItem)));
 }
 RadioButtonGroupView.propTypes = {
   testID: import_prop_types8.default.string,
@@ -791,7 +812,7 @@ function RadioButtonGroup({
   itemTextStyle,
   activeItemTextStyle
 }) {
-  return /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(
     NavigationBar,
     {
       testID,
@@ -799,7 +820,7 @@ function RadioButtonGroup({
       defaultSelectedKey,
       selectedKey,
       onSelect,
-      render: (viewProps) => /* @__PURE__ */ import_react10.default.createElement(
+      render: (viewProps) => /* @__PURE__ */ import_react9.default.createElement(
         RadioButtonGroupView,
         {
           testID: viewProps.testID,
@@ -842,7 +863,7 @@ RadioButtonGroup.propTypes = {
 };
 
 // src/components/Loading/Loading.tsx
-var import_react11 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_prop_types10 = __toESM(require("prop-types"));
 var spinnerKeyframes = `
 @keyframes component-lib-loading-spin {
@@ -882,7 +903,7 @@ function Loading({
   wrapperStyle = wrapper2,
   spinnerStyle = spinner
 }) {
-  return /* @__PURE__ */ import_react11.default.createElement("div", { id: testID }, /* @__PURE__ */ import_react11.default.createElement("style", null, spinnerKeyframes), /* @__PURE__ */ import_react11.default.createElement(Card, { containerStyle, wrapperStyle }, /* @__PURE__ */ import_react11.default.createElement("div", { style: spinnerStyle }), children));
+  return /* @__PURE__ */ import_react10.default.createElement("div", { id: testID }, /* @__PURE__ */ import_react10.default.createElement("style", null, spinnerKeyframes), /* @__PURE__ */ import_react10.default.createElement(Card, { containerStyle, wrapperStyle }, /* @__PURE__ */ import_react10.default.createElement("div", { style: spinnerStyle }), children));
 }
 Loading.propTypes = {
   key: import_prop_types10.default.any,
@@ -894,11 +915,11 @@ Loading.propTypes = {
 };
 
 // src/components/ScrollMenu/ScrollMenu.tsx
-var import_react13 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_prop_types12 = __toESM(require("prop-types"));
 
 // src/components/ScrollMenu/ScrollMenuView.tsx
-var import_react12 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var import_prop_types11 = __toESM(require("prop-types"));
 var container8 = {
   display: "flex",
@@ -936,6 +957,11 @@ var tileText = {
   fontSize: "14px",
   textAlign: "center"
 };
+var tileReset = {
+  appearance: "none",
+  border: "none",
+  backgroundColor: "transparent"
+};
 function ScrollMenuView({
   testID = "scroll-menu",
   items,
@@ -949,19 +975,19 @@ function ScrollMenuView({
   function renderItem(navItem) {
     var _a;
     const active = navItem.key === selectedKey;
-    return /* @__PURE__ */ import_react12.default.createElement(
+    return /* @__PURE__ */ import_react11.default.createElement(
       "button",
       {
         id: `${testID}-item-${navItem.key}`,
         key: navItem.key,
         disabled: navItem.disabled,
-        style: { ...tileStyle, ...active ? activeTileStyle : {}, opacity: navItem.disabled ? 0.4 : 1 },
+        style: { ...tileReset, ...tileStyle, ...active ? activeTileStyle : {}, opacity: navItem.disabled ? 0.4 : 1 },
         onClick: () => onItemSelect(navItem)
       },
-      (_a = navItem.icon) != null ? _a : /* @__PURE__ */ import_react12.default.createElement("span", { style: tileTextStyle }, navItem.label)
+      (_a = navItem.icon) != null ? _a : /* @__PURE__ */ import_react11.default.createElement("span", { style: tileTextStyle }, navItem.label)
     );
   }
-  return /* @__PURE__ */ import_react12.default.createElement("div", { id: testID, style: containerStyle }, items.map(renderItem));
+  return /* @__PURE__ */ import_react11.default.createElement("div", { id: testID, style: containerStyle }, items.map(renderItem));
 }
 ScrollMenuView.propTypes = {
   testID: import_prop_types11.default.string,
@@ -991,7 +1017,7 @@ function ScrollMenu({
   activeTileStyle,
   tileTextStyle
 }) {
-  return /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement(
     NavigationBar,
     {
       testID,
@@ -999,7 +1025,7 @@ function ScrollMenu({
       defaultSelectedKey,
       selectedKey,
       onSelect,
-      render: (viewProps) => /* @__PURE__ */ import_react13.default.createElement(
+      render: (viewProps) => /* @__PURE__ */ import_react12.default.createElement(
         ScrollMenuView,
         {
           testID: viewProps.testID,
@@ -1034,7 +1060,7 @@ ScrollMenu.propTypes = {
 };
 
 // src/components/Tile/Tile.tsx
-var import_react14 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_prop_types13 = __toESM(require("prop-types"));
 var imageTileContainer = {
   display: "flex",
@@ -1080,16 +1106,18 @@ var tileText2 = {
 function ImageTile({
   testID = "image-tile",
   image,
+  alt = "",
   enlarge = false,
   containerStyle = enlarge ? imageTileContainerLarge : imageTileContainer,
   imageStyle = tileImage
 }) {
-  return /* @__PURE__ */ import_react14.default.createElement("div", { id: testID, style: containerStyle }, /* @__PURE__ */ import_react14.default.createElement("img", { src: image, style: imageStyle }));
+  return /* @__PURE__ */ import_react13.default.createElement("div", { id: testID, style: containerStyle }, /* @__PURE__ */ import_react13.default.createElement("img", { src: image, alt, style: imageStyle }));
 }
 ImageTile.propTypes = {
   key: import_prop_types13.default.any,
   testID: import_prop_types13.default.string,
   image: import_prop_types13.default.string.isRequired,
+  alt: import_prop_types13.default.string,
   enlarge: import_prop_types13.default.bool,
   containerStyle: import_prop_types13.default.object,
   imageStyle: import_prop_types13.default.object
@@ -1101,7 +1129,7 @@ function TextTile({
   containerStyle = textTileContainer,
   textStyle = tileText2
 }) {
-  return /* @__PURE__ */ import_react14.default.createElement("div", { id: testID, style: containerStyle }, /* @__PURE__ */ import_react14.default.createElement("span", { style: { ...textStyle, fontSize } }, text));
+  return /* @__PURE__ */ import_react13.default.createElement("div", { id: testID, style: containerStyle }, /* @__PURE__ */ import_react13.default.createElement("span", { style: { ...textStyle, fontSize } }, text));
 }
 TextTile.propTypes = {
   key: import_prop_types13.default.any,
@@ -1113,7 +1141,7 @@ TextTile.propTypes = {
 };
 
 // src/components/SearchBar/SearchBar.tsx
-var import_react15 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_prop_types14 = __toESM(require("prop-types"));
 
 // src/components/SearchBar/matching.ts
@@ -1194,9 +1222,9 @@ function SearchBar({
   debounceMs = 0,
   ...inputFormProps
 }) {
-  const [text, setText] = import_react15.default.useState(defaultValue);
-  const isFirstRender = import_react15.default.useRef(true);
-  const debounceRef = import_react15.default.useRef();
+  const [text, setText] = import_react14.default.useState(defaultValue);
+  const isFirstRender = import_react14.default.useRef(true);
+  const debounceRef = import_react14.default.useRef();
   const matchOptions = { matchStrategy, caseSensitive, ignoreAccents, rank };
   function emitResults(searchText) {
     onResults(filterObjects(searchText, objects, keys, matchOptions));
@@ -1210,19 +1238,19 @@ function SearchBar({
       emitResults(searchText);
     }
   }
-  import_react15.default.useEffect(() => {
+  import_react14.default.useEffect(() => {
     return () => {
       if (debounceRef.current) clearTimeout(debounceRef.current);
     };
   }, []);
-  import_react15.default.useEffect(() => {
+  import_react14.default.useEffect(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       return;
     }
     emitResults(text);
   }, [objects]);
-  return /* @__PURE__ */ import_react15.default.createElement(InputForm, { ...inputFormProps, value: text, onInput: runFilter });
+  return /* @__PURE__ */ import_react14.default.createElement(InputForm, { ...inputFormProps, value: text, onInput: runFilter });
 }
 SearchBar.propTypes = {
   objects: import_prop_types14.default.array,
@@ -1243,7 +1271,6 @@ SearchBar.propTypes = {
   Card,
   HamburgerMenu,
   HamburgerMenuView,
-  HelloWorld,
   ImageTile,
   InputForm,
   Loading,