@itiseeron/component-lib 1.0.0

package/dist/index.js

@@ -0,0 +1,1259 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  Card: () => Card,
+  HamburgerMenu: () => HamburgerMenu,
+  HamburgerMenuView: () => HamburgerMenuView,
+  HelloWorld: () => HelloWorld,
+  ImageTile: () => ImageTile,
+  InputForm: () => InputForm,
+  Loading: () => Loading,
+  NavigationBar: () => NavigationBar,
+  NavigationBarView: () => NavigationBarView,
+  RadioButtonGroup: () => RadioButtonGroup,
+  RadioButtonGroupView: () => RadioButtonGroupView,
+  ScrollMenu: () => ScrollMenu,
+  ScrollMenuView: () => ScrollMenuView,
+  SearchBar: () => SearchBar,
+  TextTile: () => TextTile,
+  ThinButton: () => ThinButton
+});
+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_prop_types = __toESM(require("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] = import_react2.default.useState(false);
+  return /* @__PURE__ */ import_react2.default.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__ */ import_react2.default.createElement("span", { style: buttonTextStyle }, text) : children
+  );
+}
+ThinButton.propTypes = {
+  testID: import_prop_types.default.string,
+  key: import_prop_types.default.any,
+  text: import_prop_types.default.string,
+  children: import_prop_types.default.object,
+  onclick: import_prop_types.default.func,
+  containerStyle: import_prop_types.default.object,
+  buttonStyle: import_prop_types.default.object,
+  buttonTextStyle: import_prop_types.default.object
+};
+
+// src/components/Card/Card.tsx
+var import_react3 = __toESM(require("react"));
+var import_prop_types2 = __toESM(require("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] = import_react3.default.useState(false);
+  function renderCloseButton() {
+    if (showCloseButton) {
+      return /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement("span", { style: closeButtonStyle }, "X")
+      );
+    }
+    return /* @__PURE__ */ import_react3.default.createElement(import_react3.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_react3.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()));
+  }
+  return /* @__PURE__ */ import_react3.default.createElement("div", { style: containerStyle }, renderCloseButton(), renderTitle(), /* @__PURE__ */ import_react3.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,
+  titleStyle: import_prop_types2.default.object,
+  subtitle: import_prop_types2.default.string,
+  subtitleStyle: import_prop_types2.default.string,
+  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
+};
+
+// src/components/InputForm/InputForm.tsx
+var import_react4 = __toESM(require("react"));
+var import_prop_types3 = __toESM(require("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] = import_react4.default.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__ */ 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));
+  }
+  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);
+  }
+  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(
+    "textarea",
+    {
+      value,
+      placeholder,
+      style: inputStyle,
+      rows: numberOfLines,
+      maxLength,
+      onChange: (input) => onChange(input.currentTarget.value)
+    }
+  ) : /* @__PURE__ */ import_react4.default.createElement(
+    "input",
+    {
+      value,
+      type: secureTextEntry ? "password" : "text",
+      placeholder,
+      style: inputStyle,
+      maxLength,
+      onChange: (input) => onChange(input.currentTarget.value)
+    }
+  )), renderError());
+}
+InputForm.propTypes = {
+  key: import_prop_types3.default.any,
+  name: import_prop_types3.default.string,
+  testID: import_prop_types3.default.string,
+  onInput: import_prop_types3.default.func,
+  defaultValue: import_prop_types3.default.string,
+  secureTextEntry: import_prop_types3.default.bool,
+  formTitleStyle: import_prop_types3.default.object,
+  containerStyle: import_prop_types3.default.object,
+  inputStyle: import_prop_types3.default.object,
+  errorStyle: import_prop_types3.default.object,
+  placeholder: import_prop_types3.default.string,
+  value: import_prop_types3.default.string,
+  errorMessage: import_prop_types3.default.string,
+  numberOfLines: import_prop_types3.default.number,
+  multiline: import_prop_types3.default.bool,
+  trim: import_prop_types3.default.bool,
+  maxLength: import_prop_types3.default.number
+};
+
+// src/components/NavigationBar/NavigationBar.tsx
+var import_react6 = __toESM(require("react"));
+var import_prop_types5 = __toESM(require("prop-types"));
+
+// src/components/NavigationBar/NavigationBarView.tsx
+var import_react5 = __toESM(require("react"));
+var import_prop_types4 = __toESM(require("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__ */ import_react5.default.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__ */ import_react5.default.createElement("span", { style: { ...itemTextStyle, ...active ? activeItemTextStyle : {} } }, navItem.label)
+    );
+  }
+  return /* @__PURE__ */ import_react5.default.createElement("nav", { id: testID, style: containerStyle }, items.map(renderItem));
+}
+NavigationBarView.propTypes = {
+  testID: import_prop_types4.default.string,
+  items: import_prop_types4.default.arrayOf(import_prop_types4.default.shape({
+    key: import_prop_types4.default.string.isRequired,
+    label: import_prop_types4.default.string.isRequired,
+    icon: import_prop_types4.default.node,
+    disabled: import_prop_types4.default.bool
+  })).isRequired,
+  selectedKey: import_prop_types4.default.string,
+  onItemSelect: import_prop_types4.default.func.isRequired,
+  containerStyle: import_prop_types4.default.object,
+  itemStyle: import_prop_types4.default.object,
+  activeItemStyle: import_prop_types4.default.object,
+  itemTextStyle: import_prop_types4.default.object,
+  activeItemTextStyle: import_prop_types4.default.object
+};
+
+// src/components/NavigationBar/NavigationBar.tsx
+function NavigationBar({
+  testID = "navigation-bar",
+  items,
+  defaultSelectedKey,
+  selectedKey: controlledSelectedKey,
+  onSelect: onSelectCallback = () => {
+  },
+  render = (viewProps) => /* @__PURE__ */ import_react6.default.createElement(NavigationBarView, { ...viewProps }),
+  containerStyle,
+  itemStyle,
+  activeItemStyle,
+  itemTextStyle,
+  activeItemTextStyle
+}) {
+  var _a;
+  const [internalSelectedKey, setInternalSelectedKey] = import_react6.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) {
+    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: import_prop_types5.default.any,
+  testID: import_prop_types5.default.string,
+  items: import_prop_types5.default.arrayOf(import_prop_types5.default.shape({
+    key: import_prop_types5.default.string.isRequired,
+    label: import_prop_types5.default.string.isRequired,
+    icon: import_prop_types5.default.node,
+    disabled: import_prop_types5.default.bool
+  })).isRequired,
+  defaultSelectedKey: import_prop_types5.default.string,
+  selectedKey: import_prop_types5.default.string,
+  onSelect: import_prop_types5.default.func,
+  render: import_prop_types5.default.func,
+  containerStyle: import_prop_types5.default.object,
+  itemStyle: import_prop_types5.default.object,
+  activeItemStyle: import_prop_types5.default.object,
+  itemTextStyle: import_prop_types5.default.object,
+  activeItemTextStyle: import_prop_types5.default.object
+};
+
+// src/components/HamburgerMenu/HamburgerMenu.tsx
+var import_react8 = __toESM(require("react"));
+var import_prop_types7 = __toESM(require("prop-types"));
+
+// src/components/HamburgerMenu/HamburgerMenuView.tsx
+var import_react7 = __toESM(require("react"));
+var import_prop_types6 = __toESM(require("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] = import_react7.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(
+    "button",
+    {
+      id: `${testID}-toggle`,
+      type: "button",
+      "aria-expanded": isOpen,
+      style: buttonStyle,
+      onClick: () => setIsOpen((open) => !open)
+    },
+    icon != null ? icon : /* @__PURE__ */ import_react7.default.createElement("span", { style: iconStyle }, "\u2630")
+  ), isOpen && /* @__PURE__ */ import_react7.default.createElement(
+    NavigationBarView,
+    {
+      testID: `${testID}-panel`,
+      items,
+      selectedKey,
+      onItemSelect: selectAndClose,
+      containerStyle: panelStyle,
+      itemStyle,
+      activeItemStyle,
+      itemTextStyle,
+      activeItemTextStyle
+    }
+  ));
+}
+HamburgerMenuView.propTypes = {
+  testID: import_prop_types6.default.string,
+  items: import_prop_types6.default.arrayOf(import_prop_types6.default.shape({
+    key: import_prop_types6.default.string.isRequired,
+    label: import_prop_types6.default.string.isRequired,
+    icon: import_prop_types6.default.node,
+    disabled: import_prop_types6.default.bool
+  })).isRequired,
+  selectedKey: import_prop_types6.default.string,
+  onItemSelect: import_prop_types6.default.func.isRequired,
+  icon: import_prop_types6.default.node,
+  containerStyle: import_prop_types6.default.object,
+  buttonStyle: import_prop_types6.default.object,
+  iconStyle: import_prop_types6.default.object,
+  panelStyle: import_prop_types6.default.object,
+  itemStyle: import_prop_types6.default.object,
+  activeItemStyle: import_prop_types6.default.object,
+  itemTextStyle: import_prop_types6.default.object,
+  activeItemTextStyle: import_prop_types6.default.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__ */ import_react8.default.createElement(
+    NavigationBar,
+    {
+      testID,
+      items,
+      defaultSelectedKey,
+      selectedKey,
+      onSelect,
+      render: (viewProps) => /* @__PURE__ */ import_react8.default.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: import_prop_types7.default.any,
+  testID: import_prop_types7.default.string,
+  items: import_prop_types7.default.arrayOf(import_prop_types7.default.shape({
+    key: import_prop_types7.default.string.isRequired,
+    label: import_prop_types7.default.string.isRequired,
+    icon: import_prop_types7.default.node,
+    disabled: import_prop_types7.default.bool
+  })).isRequired,
+  defaultSelectedKey: import_prop_types7.default.string,
+  selectedKey: import_prop_types7.default.string,
+  onSelect: import_prop_types7.default.func,
+  icon: import_prop_types7.default.node,
+  containerStyle: import_prop_types7.default.object,
+  buttonStyle: import_prop_types7.default.object,
+  iconStyle: import_prop_types7.default.object,
+  panelStyle: import_prop_types7.default.object,
+  itemStyle: import_prop_types7.default.object,
+  activeItemStyle: import_prop_types7.default.object,
+  itemTextStyle: import_prop_types7.default.object,
+  activeItemTextStyle: import_prop_types7.default.object
+};
+
+// src/components/RadioButtonGroup/RadioButtonGroup.tsx
+var import_react10 = __toESM(require("react"));
+var import_prop_types9 = __toESM(require("prop-types"));
+
+// src/components/RadioButtonGroup/RadioButtonGroupView.tsx
+var import_react9 = __toESM(require("react"));
+var import_prop_types8 = __toESM(require("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__ */ 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));
+  }
+  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__ */ import_react9.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 },
+        onClick: () => onItemSelect(navItem)
+      },
+      navItem.icon,
+      /* @__PURE__ */ import_react9.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)));
+}
+RadioButtonGroupView.propTypes = {
+  testID: import_prop_types8.default.string,
+  items: import_prop_types8.default.arrayOf(import_prop_types8.default.shape({
+    key: import_prop_types8.default.string.isRequired,
+    label: import_prop_types8.default.string.isRequired,
+    icon: import_prop_types8.default.node,
+    disabled: import_prop_types8.default.bool
+  })).isRequired,
+  selectedKey: import_prop_types8.default.string,
+  onItemSelect: import_prop_types8.default.func.isRequired,
+  title: import_prop_types8.default.string,
+  titleContainerStyle: import_prop_types8.default.object,
+  titleStyle: import_prop_types8.default.object,
+  containerStyle: import_prop_types8.default.object,
+  itemStyle: import_prop_types8.default.object,
+  activeItemStyle: import_prop_types8.default.object,
+  itemTextStyle: import_prop_types8.default.object,
+  activeItemTextStyle: import_prop_types8.default.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__ */ import_react10.default.createElement(
+    NavigationBar,
+    {
+      testID,
+      items,
+      defaultSelectedKey,
+      selectedKey,
+      onSelect,
+      render: (viewProps) => /* @__PURE__ */ import_react10.default.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: import_prop_types9.default.any,
+  testID: import_prop_types9.default.string,
+  items: import_prop_types9.default.arrayOf(import_prop_types9.default.shape({
+    key: import_prop_types9.default.string.isRequired,
+    label: import_prop_types9.default.string.isRequired,
+    icon: import_prop_types9.default.node,
+    disabled: import_prop_types9.default.bool
+  })).isRequired,
+  defaultSelectedKey: import_prop_types9.default.string,
+  selectedKey: import_prop_types9.default.string,
+  onSelect: import_prop_types9.default.func,
+  title: import_prop_types9.default.string,
+  titleContainerStyle: import_prop_types9.default.object,
+  titleStyle: import_prop_types9.default.object,
+  containerStyle: import_prop_types9.default.object,
+  itemStyle: import_prop_types9.default.object,
+  activeItemStyle: import_prop_types9.default.object,
+  itemTextStyle: import_prop_types9.default.object,
+  activeItemTextStyle: import_prop_types9.default.object
+};
+
+// src/components/Loading/Loading.tsx
+var import_react11 = __toESM(require("react"));
+var import_prop_types10 = __toESM(require("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__ */ 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));
+}
+Loading.propTypes = {
+  key: import_prop_types10.default.any,
+  testID: import_prop_types10.default.string,
+  children: import_prop_types10.default.node,
+  containerStyle: import_prop_types10.default.object,
+  wrapperStyle: import_prop_types10.default.object,
+  spinnerStyle: import_prop_types10.default.object
+};
+
+// src/components/ScrollMenu/ScrollMenu.tsx
+var import_react13 = __toESM(require("react"));
+var import_prop_types12 = __toESM(require("prop-types"));
+
+// src/components/ScrollMenu/ScrollMenuView.tsx
+var import_react12 = __toESM(require("react"));
+var import_prop_types11 = __toESM(require("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__ */ import_react12.default.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__ */ import_react12.default.createElement("span", { style: tileTextStyle }, navItem.label)
+    );
+  }
+  return /* @__PURE__ */ import_react12.default.createElement("div", { id: testID, style: containerStyle }, items.map(renderItem));
+}
+ScrollMenuView.propTypes = {
+  testID: import_prop_types11.default.string,
+  items: import_prop_types11.default.arrayOf(import_prop_types11.default.shape({
+    key: import_prop_types11.default.string.isRequired,
+    label: import_prop_types11.default.string.isRequired,
+    icon: import_prop_types11.default.node,
+    disabled: import_prop_types11.default.bool
+  })).isRequired,
+  selectedKey: import_prop_types11.default.string,
+  onItemSelect: import_prop_types11.default.func.isRequired,
+  containerStyle: import_prop_types11.default.object,
+  tileStyle: import_prop_types11.default.object,
+  activeTileStyle: import_prop_types11.default.object,
+  tileTextStyle: import_prop_types11.default.object
+};
+
+// src/components/ScrollMenu/ScrollMenu.tsx
+function ScrollMenu({
+  testID = "scroll-menu",
+  items,
+  defaultSelectedKey,
+  selectedKey,
+  onSelect,
+  containerStyle,
+  tileStyle,
+  activeTileStyle,
+  tileTextStyle
+}) {
+  return /* @__PURE__ */ import_react13.default.createElement(
+    NavigationBar,
+    {
+      testID,
+      items,
+      defaultSelectedKey,
+      selectedKey,
+      onSelect,
+      render: (viewProps) => /* @__PURE__ */ import_react13.default.createElement(
+        ScrollMenuView,
+        {
+          testID: viewProps.testID,
+          items: viewProps.items,
+          selectedKey: viewProps.selectedKey,
+          onItemSelect: viewProps.onItemSelect,
+          containerStyle,
+          tileStyle,
+          activeTileStyle,
+          tileTextStyle
+        }
+      )
+    }
+  );
+}
+ScrollMenu.propTypes = {
+  key: import_prop_types12.default.any,
+  testID: import_prop_types12.default.string,
+  items: import_prop_types12.default.arrayOf(import_prop_types12.default.shape({
+    key: import_prop_types12.default.string.isRequired,
+    label: import_prop_types12.default.string.isRequired,
+    icon: import_prop_types12.default.node,
+    disabled: import_prop_types12.default.bool
+  })).isRequired,
+  defaultSelectedKey: import_prop_types12.default.string,
+  selectedKey: import_prop_types12.default.string,
+  onSelect: import_prop_types12.default.func,
+  containerStyle: import_prop_types12.default.object,
+  tileStyle: import_prop_types12.default.object,
+  activeTileStyle: import_prop_types12.default.object,
+  tileTextStyle: import_prop_types12.default.object
+};
+
+// src/components/Tile/Tile.tsx
+var import_react14 = __toESM(require("react"));
+var import_prop_types13 = __toESM(require("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__ */ import_react14.default.createElement("div", { id: testID, style: containerStyle }, /* @__PURE__ */ import_react14.default.createElement("img", { src: image, style: imageStyle }));
+}
+ImageTile.propTypes = {
+  key: import_prop_types13.default.any,
+  testID: import_prop_types13.default.string,
+  image: import_prop_types13.default.string.isRequired,
+  enlarge: import_prop_types13.default.bool,
+  containerStyle: import_prop_types13.default.object,
+  imageStyle: import_prop_types13.default.object
+};
+function TextTile({
+  testID = "text-tile",
+  text,
+  fontSize = 30,
+  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));
+}
+TextTile.propTypes = {
+  key: import_prop_types13.default.any,
+  testID: import_prop_types13.default.string,
+  text: import_prop_types13.default.string.isRequired,
+  fontSize: import_prop_types13.default.number,
+  containerStyle: import_prop_types13.default.object,
+  textStyle: import_prop_types13.default.object
+};
+
+// src/components/SearchBar/SearchBar.tsx
+var import_react15 = __toESM(require("react"));
+var import_prop_types14 = __toESM(require("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] = import_react15.default.useState(defaultValue);
+  const isFirstRender = import_react15.default.useRef(true);
+  const debounceRef = import_react15.default.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);
+    }
+  }
+  import_react15.default.useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+  import_react15.default.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    emitResults(text);
+  }, [objects]);
+  return /* @__PURE__ */ import_react15.default.createElement(InputForm, { ...inputFormProps, value: text, onInput: runFilter });
+}
+SearchBar.propTypes = {
+  objects: import_prop_types14.default.array,
+  keys: import_prop_types14.default.arrayOf(import_prop_types14.default.string),
+  onResults: import_prop_types14.default.func,
+  defaultValue: import_prop_types14.default.string,
+  matchStrategy: import_prop_types14.default.oneOfType([
+    import_prop_types14.default.oneOf(["substring", "prefix", "tokenized", "fuzzy", "regex"]),
+    import_prop_types14.default.func
+  ]),
+  caseSensitive: import_prop_types14.default.bool,
+  ignoreAccents: import_prop_types14.default.bool,
+  rank: import_prop_types14.default.bool,
+  debounceMs: import_prop_types14.default.number
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Card,
+  HamburgerMenu,
+  HamburgerMenuView,
+  HelloWorld,
+  ImageTile,
+  InputForm,
+  Loading,
+  NavigationBar,
+  NavigationBarView,
+  RadioButtonGroup,
+  RadioButtonGroupView,
+  ScrollMenu,
+  ScrollMenuView,
+  SearchBar,
+  TextTile,
+  ThinButton
+});