@itiseeron/component-lib 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1208 @@
+// src/components/HelloWorld/HelloWorld.jsx
+import React from "react";
+var HelloWorld = () => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, "HelloWorld");
+};
+
+// src/components/Button/ThinButton.tsx
+import React2 from "react";
+import PropTypes from "prop-types";
+var container = {
+  //flex: 1,
+  //alignSelf: 'center',
+  justifyContent: "center"
+  //paddingLeft: '10px',
+  //paddingRight: '10px',
+  //minHeight: '50px',
+};
+var button = {
+  alignItems: "center",
+  alignContent: "center",
+  backgroundColor: "transparent",
+  borderStyle: "solid",
+  padding: "10px",
+  maxWidth: "300px",
+  minWidth: "200px",
+  borderRadius: "8px",
+  borderWidth: "2px",
+  borderColor: "#B3C0C2",
+  transition: "opacity 300ms ease"
+};
+var buttonText = {
+  color: "#B3C0C2",
+  fontSize: "16px",
+  alignSelf: "center",
+  font: ""
+};
+function ThinButton({
+  testID = "thin-button",
+  text = "Click Me",
+  containerStyle = container,
+  buttonStyle = button,
+  buttonTextStyle = buttonText,
+  onclick = () => {
+  },
+  children
+}) {
+  const [touched, touchedSet] = React2.useState(false);
+  return /* @__PURE__ */ React2.createElement(
+    "button",
+    {
+      id: testID,
+      style: { ...buttonStyle, opacity: touched ? 0.5 : 1, transition: "opacity 300ms ease" },
+      onClick: onclick,
+      onMouseDown: () => touchedSet(true),
+      onMouseUp: () => touchedSet(false)
+    },
+    children == void 0 || children == null ? /* @__PURE__ */ React2.createElement("span", { style: buttonTextStyle }, text) : children
+  );
+}
+ThinButton.propTypes = {
+  testID: PropTypes.string,
+  key: PropTypes.any,
+  text: PropTypes.string,
+  children: PropTypes.object,
+  onclick: PropTypes.func,
+  containerStyle: PropTypes.object,
+  buttonStyle: PropTypes.object,
+  buttonTextStyle: PropTypes.object
+};
+
+// src/components/Card/Card.tsx
+import React3 from "react";
+import PropTypes2 from "prop-types";
+var container2 = {
+  backgroundColor: "white",
+  marginLeft: 5,
+  marginRight: 5,
+  borderRadius: 7,
+  minHeight: "250px",
+  minWidth: "250px",
+  boxShadow: "1px 1px 5px 2px #AFB3B5",
+  flex: 1
+};
+var title = {
+  color: "#00ADE9",
+  fontFamily: "nunito-regular",
+  fontSize: 25,
+  alignSelf: "center"
+};
+var subtitle = {
+  color: "#00ADE9",
+  fontFamily: "nunito-regular",
+  fontSize: 18,
+  alignSelf: "center"
+};
+var titleBoxContainer = {
+  padding: 15,
+  borderBottom: "1px solid #AFB3B5"
+};
+var wrapper = {
+  paddingTop: "2.5%",
+  paddingBottom: "2.5%",
+  paddingLeft: "1%",
+  paddingRight: "1%"
+};
+var closeButton = {
+  flex: 1,
+  fontSize: 15,
+  color: "#AFB3B5"
+};
+var closeButtonContainer = {
+  right: 25,
+  top: 25,
+  justifyContent: "center",
+  paddingBottom: 2.5,
+  marginTop: ".5%",
+  marginRight: "1.5%",
+  minHeight: 50,
+  display: "flex",
+  position: "absolute",
+  padding: 0,
+  border: "none",
+  background: "none"
+};
+function Card({
+  containerStyle = container2,
+  wrapperStyle = wrapper,
+  titleText: titleText2,
+  titleStyle = title,
+  subtitleText,
+  subtitleStyle = subtitle,
+  titleContainerStyle = titleBoxContainer,
+  closeButtonStyle = closeButton,
+  showCloseButton = false,
+  onClickCloseButton: closeButtonPressedCallBack = () => {
+  },
+  children
+}) {
+  const [touched, touchedSet] = React3.useState(false);
+  function renderCloseButton() {
+    if (showCloseButton) {
+      return /* @__PURE__ */ React3.createElement(
+        "button",
+        {
+          id: "click-card-close-button",
+          style: { ...closeButtonContainer, opacity: touched ? 0.5 : 1, transition: "opacity 300ms ease" },
+          onClick: closeButtonPressedCallBack,
+          onMouseDown: () => touchedSet(true),
+          onMouseUp: () => touchedSet(false)
+        },
+        /* @__PURE__ */ React3.createElement("span", { style: closeButtonStyle }, "X")
+      );
+    }
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null);
+  }
+  function renderSubtitle() {
+    if (subtitleText == null || subtitleText == void 0) {
+      return /* @__PURE__ */ React3.createElement(React3.Fragment, null);
+    }
+    return /* @__PURE__ */ React3.createElement("span", { style: subtitleStyle }, subtitleText);
+  }
+  function renderTitle() {
+    if (titleText2 == null || titleText2 == void 0) return /* @__PURE__ */ React3.createElement(React3.Fragment, null);
+    return /* @__PURE__ */ React3.createElement("div", { style: titleContainerStyle }, /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("span", { style: titleStyle }, titleText2)), /* @__PURE__ */ React3.createElement("div", null, renderSubtitle()));
+  }
+  return /* @__PURE__ */ React3.createElement("div", { style: containerStyle }, renderCloseButton(), renderTitle(), /* @__PURE__ */ React3.createElement("div", { style: wrapperStyle }, children));
+}
+Card.propTypes = {
+  key: PropTypes2.string,
+  children: PropTypes2.any,
+  containerStyle: PropTypes2.object,
+  wrapperStyle: PropTypes2.object,
+  title: PropTypes2.string,
+  titleStyle: PropTypes2.object,
+  subtitle: PropTypes2.string,
+  subtitleStyle: PropTypes2.string,
+  titleContainerStyle: PropTypes2.object,
+  closeButtonStyle: PropTypes2.object,
+  closeButtonContainerStyle: PropTypes2.object,
+  showCloseButton: PropTypes2.object,
+  closeButtonPressedCallBack: PropTypes2.func
+};
+
+// src/components/InputForm/InputForm.tsx
+import React4 from "react";
+import PropTypes3 from "prop-types";
+var container3 = {
+  flex: 1,
+  marginBottom: "3.5%"
+};
+var formTitle = {
+  flex: 1,
+  fontFamily: "nunito_regular",
+  color: "#AFB3B5",
+  fontSize: "15px"
+};
+var formTitleWrapper = {
+  marginTop: 5,
+  marginBottom: 5,
+  flex: 1,
+  paddingLeft: 13,
+  paddingRight: 10
+};
+var inputWrapper = {
+  paddingLeft: 10,
+  paddingRight: 10,
+  flex: 1
+};
+var inputForm = {
+  alignItems: "center",
+  alignSelf: "center",
+  flex: 1,
+  minWidth: 40,
+  height: "40px",
+  border: "1px solid #AFB3B5",
+  borderRadius: 4,
+  paddingRight: 10,
+  paddingLeft: 10
+};
+var errorText = {
+  fontFamily: "nunito_regular",
+  fontSize: 14,
+  color: "#C70000"
+};
+function InputForm({
+  testID = "input-form",
+  name,
+  onInput = () => {
+  },
+  defaultValue = "",
+  secureTextEntry = false,
+  formTitleStyle = formTitle,
+  containerStyle = container3,
+  inputStyle = inputForm,
+  errorStyle = errorText,
+  placeholder,
+  value: controlledValue,
+  errorMessage,
+  numberOfLines = 1,
+  multiline = false,
+  trim = false,
+  maxLength = 200
+}) {
+  const [internalValue, setInternalValue] = React4.useState(defaultValue);
+  const isControlled = controlledValue != null;
+  const value = isControlled ? controlledValue : internalValue;
+  function onChange(rawValue) {
+    if (!isControlled) setInternalValue(rawValue);
+    onInput(trim ? rawValue.trim() : rawValue);
+  }
+  function renderLabel() {
+    if (name == null) return /* @__PURE__ */ React4.createElement(React4.Fragment, null);
+    return /* @__PURE__ */ React4.createElement("div", { style: formTitleWrapper }, /* @__PURE__ */ React4.createElement("label", { style: formTitleStyle }, name));
+  }
+  function renderError() {
+    if (errorMessage == null) return /* @__PURE__ */ React4.createElement(React4.Fragment, null);
+    return /* @__PURE__ */ React4.createElement("span", { style: errorStyle }, errorMessage);
+  }
+  return /* @__PURE__ */ React4.createElement("div", { id: testID, style: containerStyle }, renderLabel(), /* @__PURE__ */ React4.createElement("div", { style: inputWrapper }, multiline ? /* @__PURE__ */ React4.createElement(
+    "textarea",
+    {
+      value,
+      placeholder,
+      style: inputStyle,
+      rows: numberOfLines,
+      maxLength,
+      onChange: (input) => onChange(input.currentTarget.value)
+    }
+  ) : /* @__PURE__ */ React4.createElement(
+    "input",
+    {
+      value,
+      type: secureTextEntry ? "password" : "text",
+      placeholder,
+      style: inputStyle,
+      maxLength,
+      onChange: (input) => onChange(input.currentTarget.value)
+    }
+  )), renderError());
+}
+InputForm.propTypes = {
+  key: PropTypes3.any,
+  name: PropTypes3.string,
+  testID: PropTypes3.string,
+  onInput: PropTypes3.func,
+  defaultValue: PropTypes3.string,
+  secureTextEntry: PropTypes3.bool,
+  formTitleStyle: PropTypes3.object,
+  containerStyle: PropTypes3.object,
+  inputStyle: PropTypes3.object,
+  errorStyle: PropTypes3.object,
+  placeholder: PropTypes3.string,
+  value: PropTypes3.string,
+  errorMessage: PropTypes3.string,
+  numberOfLines: PropTypes3.number,
+  multiline: PropTypes3.bool,
+  trim: PropTypes3.bool,
+  maxLength: PropTypes3.number
+};
+
+// src/components/NavigationBar/NavigationBar.tsx
+import React6 from "react";
+import PropTypes5 from "prop-types";
+
+// src/components/NavigationBar/NavigationBarView.tsx
+import React5 from "react";
+import PropTypes4 from "prop-types";
+var container4 = {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  backgroundColor: "white",
+  borderRadius: 7,
+  boxShadow: "1px 1px 5px 2px #AFB3B5",
+  padding: "10px"
+};
+var item = {
+  display: "flex",
+  alignItems: "center",
+  backgroundColor: "transparent",
+  borderStyle: "solid",
+  borderWidth: "2px",
+  borderColor: "transparent",
+  borderRadius: "8px",
+  padding: "10px 15px",
+  cursor: "pointer",
+  transition: "opacity 300ms ease"
+};
+var activeItem = {
+  borderColor: "#00ADE9"
+};
+var itemText = {
+  color: "#B3C0C2",
+  fontFamily: "nunito-regular",
+  fontSize: "16px"
+};
+var activeItemText = {
+  color: "#00ADE9"
+};
+function NavigationBarView({
+  testID = "navigation-bar",
+  items,
+  selectedKey,
+  onItemSelect,
+  containerStyle = container4,
+  itemStyle = item,
+  activeItemStyle = activeItem,
+  itemTextStyle = itemText,
+  activeItemTextStyle = activeItemText
+}) {
+  function renderItem(navItem) {
+    const active = navItem.key === selectedKey;
+    return /* @__PURE__ */ React5.createElement(
+      "button",
+      {
+        id: `${testID}-item-${navItem.key}`,
+        key: navItem.key,
+        disabled: navItem.disabled,
+        style: { ...itemStyle, ...active ? activeItemStyle : {}, opacity: navItem.disabled ? 0.4 : 1 },
+        onClick: () => onItemSelect(navItem)
+      },
+      navItem.icon,
+      /* @__PURE__ */ React5.createElement("span", { style: { ...itemTextStyle, ...active ? activeItemTextStyle : {} } }, navItem.label)
+    );
+  }
+  return /* @__PURE__ */ React5.createElement("nav", { id: testID, style: containerStyle }, items.map(renderItem));
+}
+NavigationBarView.propTypes = {
+  testID: PropTypes4.string,
+  items: PropTypes4.arrayOf(PropTypes4.shape({
+    key: PropTypes4.string.isRequired,
+    label: PropTypes4.string.isRequired,
+    icon: PropTypes4.node,
+    disabled: PropTypes4.bool
+  })).isRequired,
+  selectedKey: PropTypes4.string,
+  onItemSelect: PropTypes4.func.isRequired,
+  containerStyle: PropTypes4.object,
+  itemStyle: PropTypes4.object,
+  activeItemStyle: PropTypes4.object,
+  itemTextStyle: PropTypes4.object,
+  activeItemTextStyle: PropTypes4.object
+};
+
+// src/components/NavigationBar/NavigationBar.tsx
+function NavigationBar({
+  testID = "navigation-bar",
+  items,
+  defaultSelectedKey,
+  selectedKey: controlledSelectedKey,
+  onSelect: onSelectCallback = () => {
+  },
+  render = (viewProps) => /* @__PURE__ */ React6.createElement(NavigationBarView, { ...viewProps }),
+  containerStyle,
+  itemStyle,
+  activeItemStyle,
+  itemTextStyle,
+  activeItemTextStyle
+}) {
+  var _a;
+  const [internalSelectedKey, setInternalSelectedKey] = React6.useState(defaultSelectedKey != null ? defaultSelectedKey : (_a = items[0]) == null ? void 0 : _a.key);
+  const isControlled = controlledSelectedKey != null;
+  const selectedKey = isControlled ? controlledSelectedKey : internalSelectedKey;
+  function selectItem(navItem) {
+    if (navItem.disabled || navItem.key === selectedKey) return;
+    if (!isControlled) setInternalSelectedKey(navItem.key);
+    onSelectCallback(navItem.key, navItem);
+  }
+  return render({
+    testID,
+    items,
+    selectedKey,
+    onItemSelect: selectItem,
+    containerStyle,
+    itemStyle,
+    activeItemStyle,
+    itemTextStyle,
+    activeItemTextStyle
+  });
+}
+NavigationBar.propTypes = {
+  key: PropTypes5.any,
+  testID: PropTypes5.string,
+  items: PropTypes5.arrayOf(PropTypes5.shape({
+    key: PropTypes5.string.isRequired,
+    label: PropTypes5.string.isRequired,
+    icon: PropTypes5.node,
+    disabled: PropTypes5.bool
+  })).isRequired,
+  defaultSelectedKey: PropTypes5.string,
+  selectedKey: PropTypes5.string,
+  onSelect: PropTypes5.func,
+  render: PropTypes5.func,
+  containerStyle: PropTypes5.object,
+  itemStyle: PropTypes5.object,
+  activeItemStyle: PropTypes5.object,
+  itemTextStyle: PropTypes5.object,
+  activeItemTextStyle: PropTypes5.object
+};
+
+// src/components/HamburgerMenu/HamburgerMenu.tsx
+import React8 from "react";
+import PropTypes7 from "prop-types";
+
+// src/components/HamburgerMenu/HamburgerMenuView.tsx
+import React7 from "react";
+import PropTypes6 from "prop-types";
+var container5 = {
+  position: "relative",
+  display: "inline-block"
+};
+var button2 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "transparent",
+  borderStyle: "solid",
+  borderWidth: "2px",
+  borderColor: "#B3C0C2",
+  borderRadius: "8px",
+  width: "44px",
+  height: "44px",
+  cursor: "pointer",
+  transition: "opacity 300ms ease"
+};
+var iconText = {
+  color: "#B3C0C2",
+  fontSize: "24px"
+};
+var panel = {
+  position: "absolute",
+  top: "100%",
+  left: 0,
+  marginTop: 5,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "stretch",
+  backgroundColor: "white",
+  borderRadius: 7,
+  boxShadow: "1px 1px 5px 2px #AFB3B5",
+  minWidth: "200px",
+  padding: "5px 0",
+  zIndex: 10
+};
+function HamburgerMenuView({
+  testID = "hamburger-menu",
+  items,
+  selectedKey,
+  onItemSelect,
+  icon,
+  containerStyle = container5,
+  buttonStyle = button2,
+  iconStyle = iconText,
+  panelStyle = panel,
+  itemStyle,
+  activeItemStyle,
+  itemTextStyle,
+  activeItemTextStyle
+}) {
+  const [isOpen, setIsOpen] = React7.useState(false);
+  function selectAndClose(navItem) {
+    onItemSelect(navItem);
+    setIsOpen(false);
+  }
+  return /* @__PURE__ */ React7.createElement("div", { id: testID, style: containerStyle }, /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      id: `${testID}-toggle`,
+      type: "button",
+      "aria-expanded": isOpen,
+      style: buttonStyle,
+      onClick: () => setIsOpen((open) => !open)
+    },
+    icon != null ? icon : /* @__PURE__ */ React7.createElement("span", { style: iconStyle }, "\u2630")
+  ), isOpen && /* @__PURE__ */ React7.createElement(
+    NavigationBarView,
+    {
+      testID: `${testID}-panel`,
+      items,
+      selectedKey,
+      onItemSelect: selectAndClose,
+      containerStyle: panelStyle,
+      itemStyle,
+      activeItemStyle,
+      itemTextStyle,
+      activeItemTextStyle
+    }
+  ));
+}
+HamburgerMenuView.propTypes = {
+  testID: PropTypes6.string,
+  items: PropTypes6.arrayOf(PropTypes6.shape({
+    key: PropTypes6.string.isRequired,
+    label: PropTypes6.string.isRequired,
+    icon: PropTypes6.node,
+    disabled: PropTypes6.bool
+  })).isRequired,
+  selectedKey: PropTypes6.string,
+  onItemSelect: PropTypes6.func.isRequired,
+  icon: PropTypes6.node,
+  containerStyle: PropTypes6.object,
+  buttonStyle: PropTypes6.object,
+  iconStyle: PropTypes6.object,
+  panelStyle: PropTypes6.object,
+  itemStyle: PropTypes6.object,
+  activeItemStyle: PropTypes6.object,
+  itemTextStyle: PropTypes6.object,
+  activeItemTextStyle: PropTypes6.object
+};
+
+// src/components/HamburgerMenu/HamburgerMenu.tsx
+function HamburgerMenu({
+  testID = "hamburger-menu",
+  items,
+  defaultSelectedKey,
+  selectedKey,
+  onSelect,
+  icon,
+  containerStyle,
+  buttonStyle,
+  iconStyle,
+  panelStyle,
+  itemStyle,
+  activeItemStyle,
+  itemTextStyle,
+  activeItemTextStyle
+}) {
+  return /* @__PURE__ */ React8.createElement(
+    NavigationBar,
+    {
+      testID,
+      items,
+      defaultSelectedKey,
+      selectedKey,
+      onSelect,
+      render: (viewProps) => /* @__PURE__ */ React8.createElement(
+        HamburgerMenuView,
+        {
+          testID: viewProps.testID,
+          items: viewProps.items,
+          selectedKey: viewProps.selectedKey,
+          onItemSelect: viewProps.onItemSelect,
+          icon,
+          containerStyle,
+          buttonStyle,
+          iconStyle,
+          panelStyle,
+          itemStyle,
+          activeItemStyle,
+          itemTextStyle,
+          activeItemTextStyle
+        }
+      )
+    }
+  );
+}
+HamburgerMenu.propTypes = {
+  key: PropTypes7.any,
+  testID: PropTypes7.string,
+  items: PropTypes7.arrayOf(PropTypes7.shape({
+    key: PropTypes7.string.isRequired,
+    label: PropTypes7.string.isRequired,
+    icon: PropTypes7.node,
+    disabled: PropTypes7.bool
+  })).isRequired,
+  defaultSelectedKey: PropTypes7.string,
+  selectedKey: PropTypes7.string,
+  onSelect: PropTypes7.func,
+  icon: PropTypes7.node,
+  containerStyle: PropTypes7.object,
+  buttonStyle: PropTypes7.object,
+  iconStyle: PropTypes7.object,
+  panelStyle: PropTypes7.object,
+  itemStyle: PropTypes7.object,
+  activeItemStyle: PropTypes7.object,
+  itemTextStyle: PropTypes7.object,
+  activeItemTextStyle: PropTypes7.object
+};
+
+// src/components/RadioButtonGroup/RadioButtonGroup.tsx
+import React10 from "react";
+import PropTypes9 from "prop-types";
+
+// src/components/RadioButtonGroup/RadioButtonGroupView.tsx
+import React9 from "react";
+import PropTypes8 from "prop-types";
+var titleContainer = {
+  width: "100%"
+};
+var titleText = {
+  marginTop: "3.5%",
+  marginBottom: "3.5%",
+  fontFamily: "nunito-regular",
+  color: "rgba(55,66,69,.5)"
+};
+var container6 = {
+  display: "flex",
+  flexDirection: "row",
+  width: "100%",
+  paddingTop: 2.5,
+  paddingLeft: 2.5,
+  paddingRight: 2.5,
+  marginBottom: "3.5%"
+};
+var item2 = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flex: 1,
+  height: "40px",
+  padding: "10px",
+  backgroundColor: "transparent",
+  border: "1px solid rgba(55,66,69,.5)",
+  cursor: "pointer",
+  transition: "opacity 300ms ease"
+};
+var activeItem2 = {
+  backgroundColor: "#00ADE9",
+  borderColor: "#1177B0"
+};
+var itemText2 = {
+  color: "rgba(55,66,69,.5)",
+  fontFamily: "nunito-regular",
+  fontSize: "16px"
+};
+var activeItemText2 = {
+  color: "white"
+};
+function RadioButtonGroupView({
+  testID = "radio-button-group",
+  items,
+  selectedKey,
+  onItemSelect,
+  title: title2,
+  titleContainerStyle = titleContainer,
+  titleStyle = titleText,
+  containerStyle = container6,
+  itemStyle = item2,
+  activeItemStyle = activeItem2,
+  itemTextStyle = itemText2,
+  activeItemTextStyle = activeItemText2
+}) {
+  function renderTitle() {
+    if (title2 == null) return /* @__PURE__ */ React9.createElement(React9.Fragment, null);
+    return /* @__PURE__ */ React9.createElement("div", { style: titleContainerStyle }, /* @__PURE__ */ React9.createElement("span", { style: titleStyle }, title2));
+  }
+  function renderItem(navItem, index) {
+    const active = navItem.key === selectedKey;
+    const positionStyle = {
+      ...index === 0 ? { borderTopLeftRadius: 4, borderBottomLeftRadius: 4 } : {},
+      ...index === items.length - 1 ? { borderTopRightRadius: 4, borderBottomRightRadius: 4 } : {}
+    };
+    return /* @__PURE__ */ React9.createElement(
+      "button",
+      {
+        id: `${testID}-item-${navItem.key}`,
+        key: navItem.key,
+        disabled: navItem.disabled,
+        style: { ...positionStyle, ...itemStyle, ...active ? activeItemStyle : {}, opacity: navItem.disabled ? 0.4 : 1 },
+        onClick: () => onItemSelect(navItem)
+      },
+      navItem.icon,
+      /* @__PURE__ */ React9.createElement("span", { style: { ...itemTextStyle, ...active ? activeItemTextStyle : {} } }, navItem.label)
+    );
+  }
+  return /* @__PURE__ */ React9.createElement("div", { id: testID }, renderTitle(), /* @__PURE__ */ React9.createElement("div", { style: containerStyle }, items.map(renderItem)));
+}
+RadioButtonGroupView.propTypes = {
+  testID: PropTypes8.string,
+  items: PropTypes8.arrayOf(PropTypes8.shape({
+    key: PropTypes8.string.isRequired,
+    label: PropTypes8.string.isRequired,
+    icon: PropTypes8.node,
+    disabled: PropTypes8.bool
+  })).isRequired,
+  selectedKey: PropTypes8.string,
+  onItemSelect: PropTypes8.func.isRequired,
+  title: PropTypes8.string,
+  titleContainerStyle: PropTypes8.object,
+  titleStyle: PropTypes8.object,
+  containerStyle: PropTypes8.object,
+  itemStyle: PropTypes8.object,
+  activeItemStyle: PropTypes8.object,
+  itemTextStyle: PropTypes8.object,
+  activeItemTextStyle: PropTypes8.object
+};
+
+// src/components/RadioButtonGroup/RadioButtonGroup.tsx
+function RadioButtonGroup({
+  testID = "radio-button-group",
+  items,
+  defaultSelectedKey,
+  selectedKey,
+  onSelect,
+  title: title2,
+  titleContainerStyle,
+  titleStyle,
+  containerStyle,
+  itemStyle,
+  activeItemStyle,
+  itemTextStyle,
+  activeItemTextStyle
+}) {
+  return /* @__PURE__ */ React10.createElement(
+    NavigationBar,
+    {
+      testID,
+      items,
+      defaultSelectedKey,
+      selectedKey,
+      onSelect,
+      render: (viewProps) => /* @__PURE__ */ React10.createElement(
+        RadioButtonGroupView,
+        {
+          testID: viewProps.testID,
+          items: viewProps.items,
+          selectedKey: viewProps.selectedKey,
+          onItemSelect: viewProps.onItemSelect,
+          title: title2,
+          titleContainerStyle,
+          titleStyle,
+          containerStyle,
+          itemStyle,
+          activeItemStyle,
+          itemTextStyle,
+          activeItemTextStyle
+        }
+      )
+    }
+  );
+}
+RadioButtonGroup.propTypes = {
+  key: PropTypes9.any,
+  testID: PropTypes9.string,
+  items: PropTypes9.arrayOf(PropTypes9.shape({
+    key: PropTypes9.string.isRequired,
+    label: PropTypes9.string.isRequired,
+    icon: PropTypes9.node,
+    disabled: PropTypes9.bool
+  })).isRequired,
+  defaultSelectedKey: PropTypes9.string,
+  selectedKey: PropTypes9.string,
+  onSelect: PropTypes9.func,
+  title: PropTypes9.string,
+  titleContainerStyle: PropTypes9.object,
+  titleStyle: PropTypes9.object,
+  containerStyle: PropTypes9.object,
+  itemStyle: PropTypes9.object,
+  activeItemStyle: PropTypes9.object,
+  itemTextStyle: PropTypes9.object,
+  activeItemTextStyle: PropTypes9.object
+};
+
+// src/components/Loading/Loading.tsx
+import React11 from "react";
+import PropTypes10 from "prop-types";
+var spinnerKeyframes = `
+@keyframes component-lib-loading-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}`;
+var container7 = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  backgroundColor: "#fff",
+  maxHeight: 100,
+  width: "75%",
+  maxWidth: 350,
+  boxShadow: "1px 1px 8px rgba(170,170,170,0.1)",
+  borderRadius: 10
+};
+var wrapper2 = {
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 10
+};
+var spinner = {
+  width: 32,
+  height: 32,
+  borderRadius: "50%",
+  border: "3px solid #E9ECEF",
+  borderTopColor: "#00ADE9",
+  animation: "component-lib-loading-spin 800ms linear infinite"
+};
+function Loading({
+  testID = "loading",
+  children,
+  containerStyle = container7,
+  wrapperStyle = wrapper2,
+  spinnerStyle = spinner
+}) {
+  return /* @__PURE__ */ React11.createElement("div", { id: testID }, /* @__PURE__ */ React11.createElement("style", null, spinnerKeyframes), /* @__PURE__ */ React11.createElement(Card, { containerStyle, wrapperStyle }, /* @__PURE__ */ React11.createElement("div", { style: spinnerStyle }), children));
+}
+Loading.propTypes = {
+  key: PropTypes10.any,
+  testID: PropTypes10.string,
+  children: PropTypes10.node,
+  containerStyle: PropTypes10.object,
+  wrapperStyle: PropTypes10.object,
+  spinnerStyle: PropTypes10.object
+};
+
+// src/components/ScrollMenu/ScrollMenu.tsx
+import React13 from "react";
+import PropTypes12 from "prop-types";
+
+// src/components/ScrollMenu/ScrollMenuView.tsx
+import React12 from "react";
+import PropTypes11 from "prop-types";
+var container8 = {
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: 11,
+  overflowX: "auto",
+  backgroundColor: "#374245",
+  minHeight: 80,
+  maxHeight: 100,
+  padding: "10px",
+  borderRadius: 7
+};
+var tile = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  width: 70,
+  height: 70,
+  borderRadius: 7.5,
+  border: "1px solid #E9ECEF",
+  backgroundColor: "white",
+  overflow: "hidden",
+  padding: 0,
+  cursor: "pointer",
+  transition: "opacity 300ms ease"
+};
+var activeTile = {
+  border: "2px solid #00ADE9"
+};
+var tileText = {
+  color: "#919799",
+  fontFamily: "nunito-regular",
+  fontSize: "14px",
+  textAlign: "center"
+};
+function ScrollMenuView({
+  testID = "scroll-menu",
+  items,
+  selectedKey,
+  onItemSelect,
+  containerStyle = container8,
+  tileStyle = tile,
+  activeTileStyle = activeTile,
+  tileTextStyle = tileText
+}) {
+  function renderItem(navItem) {
+    var _a;
+    const active = navItem.key === selectedKey;
+    return /* @__PURE__ */ React12.createElement(
+      "button",
+      {
+        id: `${testID}-item-${navItem.key}`,
+        key: navItem.key,
+        disabled: navItem.disabled,
+        style: { ...tileStyle, ...active ? activeTileStyle : {}, opacity: navItem.disabled ? 0.4 : 1 },
+        onClick: () => onItemSelect(navItem)
+      },
+      (_a = navItem.icon) != null ? _a : /* @__PURE__ */ React12.createElement("span", { style: tileTextStyle }, navItem.label)
+    );
+  }
+  return /* @__PURE__ */ React12.createElement("div", { id: testID, style: containerStyle }, items.map(renderItem));
+}
+ScrollMenuView.propTypes = {
+  testID: PropTypes11.string,
+  items: PropTypes11.arrayOf(PropTypes11.shape({
+    key: PropTypes11.string.isRequired,
+    label: PropTypes11.string.isRequired,
+    icon: PropTypes11.node,
+    disabled: PropTypes11.bool
+  })).isRequired,
+  selectedKey: PropTypes11.string,
+  onItemSelect: PropTypes11.func.isRequired,
+  containerStyle: PropTypes11.object,
+  tileStyle: PropTypes11.object,
+  activeTileStyle: PropTypes11.object,
+  tileTextStyle: PropTypes11.object
+};
+
+// src/components/ScrollMenu/ScrollMenu.tsx
+function ScrollMenu({
+  testID = "scroll-menu",
+  items,
+  defaultSelectedKey,
+  selectedKey,
+  onSelect,
+  containerStyle,
+  tileStyle,
+  activeTileStyle,
+  tileTextStyle
+}) {
+  return /* @__PURE__ */ React13.createElement(
+    NavigationBar,
+    {
+      testID,
+      items,
+      defaultSelectedKey,
+      selectedKey,
+      onSelect,
+      render: (viewProps) => /* @__PURE__ */ React13.createElement(
+        ScrollMenuView,
+        {
+          testID: viewProps.testID,
+          items: viewProps.items,
+          selectedKey: viewProps.selectedKey,
+          onItemSelect: viewProps.onItemSelect,
+          containerStyle,
+          tileStyle,
+          activeTileStyle,
+          tileTextStyle
+        }
+      )
+    }
+  );
+}
+ScrollMenu.propTypes = {
+  key: PropTypes12.any,
+  testID: PropTypes12.string,
+  items: PropTypes12.arrayOf(PropTypes12.shape({
+    key: PropTypes12.string.isRequired,
+    label: PropTypes12.string.isRequired,
+    icon: PropTypes12.node,
+    disabled: PropTypes12.bool
+  })).isRequired,
+  defaultSelectedKey: PropTypes12.string,
+  selectedKey: PropTypes12.string,
+  onSelect: PropTypes12.func,
+  containerStyle: PropTypes12.object,
+  tileStyle: PropTypes12.object,
+  activeTileStyle: PropTypes12.object,
+  tileTextStyle: PropTypes12.object
+};
+
+// src/components/Tile/Tile.tsx
+import React14 from "react";
+import PropTypes13 from "prop-types";
+var imageTileContainer = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  aspectRatio: "1",
+  width: 70,
+  height: 70,
+  borderRadius: 7.5,
+  border: "1px solid #E9ECEF",
+  backgroundColor: "white",
+  overflow: "hidden"
+};
+var imageTileContainerLarge = {
+  ...imageTileContainer,
+  width: 100,
+  height: 100
+};
+var tileImage = {
+  width: "100%",
+  height: "100%",
+  objectFit: "cover",
+  borderRadius: 5,
+  backgroundColor: "white"
+};
+var textTileContainer = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  aspectRatio: "1",
+  width: 70,
+  height: 70,
+  borderRadius: 7.5,
+  border: "1px solid white",
+  backgroundColor: "#919799"
+};
+var tileText2 = {
+  alignSelf: "center",
+  textAlign: "center",
+  color: "#E9ECEF",
+  fontFamily: "nunito-light"
+};
+function ImageTile({
+  testID = "image-tile",
+  image,
+  enlarge = false,
+  containerStyle = enlarge ? imageTileContainerLarge : imageTileContainer,
+  imageStyle = tileImage
+}) {
+  return /* @__PURE__ */ React14.createElement("div", { id: testID, style: containerStyle }, /* @__PURE__ */ React14.createElement("img", { src: image, style: imageStyle }));
+}
+ImageTile.propTypes = {
+  key: PropTypes13.any,
+  testID: PropTypes13.string,
+  image: PropTypes13.string.isRequired,
+  enlarge: PropTypes13.bool,
+  containerStyle: PropTypes13.object,
+  imageStyle: PropTypes13.object
+};
+function TextTile({
+  testID = "text-tile",
+  text,
+  fontSize = 30,
+  containerStyle = textTileContainer,
+  textStyle = tileText2
+}) {
+  return /* @__PURE__ */ React14.createElement("div", { id: testID, style: containerStyle }, /* @__PURE__ */ React14.createElement("span", { style: { ...textStyle, fontSize } }, text));
+}
+TextTile.propTypes = {
+  key: PropTypes13.any,
+  testID: PropTypes13.string,
+  text: PropTypes13.string.isRequired,
+  fontSize: PropTypes13.number,
+  containerStyle: PropTypes13.object,
+  textStyle: PropTypes13.object
+};
+
+// src/components/SearchBar/SearchBar.tsx
+import React15 from "react";
+import PropTypes14 from "prop-types";
+
+// src/components/SearchBar/matching.ts
+function normalizeText(value, options) {
+  let result = value;
+  if (options.ignoreAccents) result = result.normalize("NFD").replace(/\p{Diacritic}/gu, "");
+  if (!options.caseSensitive) result = result.toLowerCase();
+  return result;
+}
+function collectLeaves(value) {
+  if (value == null) return [];
+  if (typeof value === "object") return Object.values(value).flatMap(collectLeaves);
+  return [String(value)];
+}
+function collectSearchableText(item3, keys) {
+  if (keys == null || keys.length === 0) return collectLeaves(item3);
+  return keys.flatMap((key) => collectLeaves(item3 == null ? void 0 : item3[key]));
+}
+function fuzzyScore(query, text) {
+  if (query.length === 0) return 0;
+  let queryIndex = 0;
+  let score = 0;
+  let consecutive = 0;
+  for (let i = 0; i < text.length && queryIndex < query.length; i++) {
+    if (text[i] === query[queryIndex]) {
+      score += 1 + consecutive;
+      consecutive += 1;
+      queryIndex += 1;
+    } else {
+      consecutive = 0;
+    }
+  }
+  return queryIndex === query.length ? score : null;
+}
+var builtInMatchers = {
+  substring: (query, text) => text.includes(query) ? 0 : null,
+  prefix: (query, text) => {
+    if (text.startsWith(query)) return 0;
+    return text.split(/\s+/).some((word) => word.startsWith(query)) ? 0 : null;
+  },
+  tokenized: (query, text) => {
+    const words = query.split(/\s+/).filter(Boolean);
+    return words.every((word) => text.includes(word)) ? 0 : null;
+  },
+  fuzzy: fuzzyScore,
+  regex: (query, text) => {
+    try {
+      return new RegExp(query).test(text) ? 0 : null;
+    } catch {
+      return null;
+    }
+  }
+};
+function filterObjects(search, list, keys, options) {
+  const query = normalizeText(search.trim(), options);
+  const matcher = typeof options.matchStrategy === "function" ? options.matchStrategy : builtInMatchers[options.matchStrategy];
+  const scored = [];
+  list.forEach((item3) => {
+    const text = normalizeText(collectSearchableText(item3, keys).join(" "), options);
+    const score = matcher(query, text);
+    if (score != null) scored.push({ item: item3, score });
+  });
+  if (options.rank) scored.sort((a, b) => b.score - a.score);
+  return scored.map((entry) => entry.item);
+}
+
+// src/components/SearchBar/SearchBar.tsx
+function SearchBar({
+  objects = [],
+  keys,
+  onResults = () => {
+  },
+  defaultValue = "",
+  matchStrategy = "fuzzy",
+  caseSensitive = false,
+  ignoreAccents = false,
+  rank = true,
+  debounceMs = 0,
+  ...inputFormProps
+}) {
+  const [text, setText] = React15.useState(defaultValue);
+  const isFirstRender = React15.useRef(true);
+  const debounceRef = React15.useRef();
+  const matchOptions = { matchStrategy, caseSensitive, ignoreAccents, rank };
+  function emitResults(searchText) {
+    onResults(filterObjects(searchText, objects, keys, matchOptions));
+  }
+  function runFilter(searchText) {
+    setText(searchText);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    if (debounceMs > 0) {
+      debounceRef.current = setTimeout(() => emitResults(searchText), debounceMs);
+    } else {
+      emitResults(searchText);
+    }
+  }
+  React15.useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+  React15.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    emitResults(text);
+  }, [objects]);
+  return /* @__PURE__ */ React15.createElement(InputForm, { ...inputFormProps, value: text, onInput: runFilter });
+}
+SearchBar.propTypes = {
+  objects: PropTypes14.array,
+  keys: PropTypes14.arrayOf(PropTypes14.string),
+  onResults: PropTypes14.func,
+  defaultValue: PropTypes14.string,
+  matchStrategy: PropTypes14.oneOfType([
+    PropTypes14.oneOf(["substring", "prefix", "tokenized", "fuzzy", "regex"]),
+    PropTypes14.func
+  ]),
+  caseSensitive: PropTypes14.bool,
+  ignoreAccents: PropTypes14.bool,
+  rank: PropTypes14.bool,
+  debounceMs: PropTypes14.number
+};
+export {
+  Card,
+  HamburgerMenu,
+  HamburgerMenuView,
+  HelloWorld,
+  ImageTile,
+  InputForm,
+  Loading,
+  NavigationBar,
+  NavigationBarView,
+  RadioButtonGroup,
+  RadioButtonGroupView,
+  ScrollMenu,
+  ScrollMenuView,
+  SearchBar,
+  TextTile,
+  ThinButton
+};