@grantbii/design-system 1.25.0 → 1.26.0

package/core/archive/RadioButtons.d.ts

@@ -5,5 +5,5 @@ type RadioButtonProps = {
     name?: string;
     options: RadioOption[];
 };
-declare const RadioButtons: ({ name, options }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const RadioButtons: ({ name, options }: RadioButtonProps) => import("react").JSX.Element;
 export default RadioButtons;

package/core/archive/TallyModal.d.ts

@@ -5,5 +5,5 @@ type TallyModalProps = {
     prefilledFieldsQueryParams?: string;
     onClickClose: MouseEventHandler<HTMLButtonElement>;
 };
-declare const TallyModal: ({ tallyId, prefilledFieldsQueryParams, ...modalProps }: TallyModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const TallyModal: ({ tallyId, prefilledFieldsQueryParams, ...modalProps }: TallyModalProps) => import("react").JSX.Element;
 export default TallyModal;

package/core/archive/YesNoOptions.d.ts

@@ -5,5 +5,5 @@ type YesNoOptionsProps = {
     noProps: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
     unsureProps?: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
 };
-declare const YesNoOptions: ({ name, yesProps, noProps, unsureProps, }: YesNoOptionsProps) => import("react/jsx-runtime").JSX.Element;
+declare const YesNoOptions: ({ name, yesProps, noProps, unsureProps, }: YesNoOptionsProps) => import("react").JSX.Element;
 export default YesNoOptions;

package/core/atoms/BrandLogo.d.ts

@@ -9,5 +9,5 @@ type BrandLogoProps = {
     borderRadius?: string;
     alt?: string;
 };
-declare const BrandLogo: ({ colorVariant, isLogomark, smallScreenWidth, smallScreenHeight, bigScreenWidth, bigScreenHeight, borderRadius, alt, }: BrandLogoProps) => import("react/jsx-runtime").JSX.Element;
+declare const BrandLogo: ({ colorVariant, isLogomark, smallScreenWidth, smallScreenHeight, bigScreenWidth, bigScreenHeight, borderRadius, alt, }: BrandLogoProps) => import("react").JSX.Element;
 export default BrandLogo;

package/core/integrations/registry.d.ts

@@ -1,3 +1,3 @@
 import { type PropsWithChildren } from "react";
-declare const StyledComponentsRegistry: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+declare const StyledComponentsRegistry: ({ children }: PropsWithChildren) => import("react").JSX.Element;
 export default StyledComponentsRegistry;

package/core/molecules/Badge.d.ts

@@ -11,7 +11,7 @@ type CustomBadgeProps = {
 type BadgeProps = {
     variant?: BadgeVariant;
 } & CustomBadgeProps;
-declare const Badge: ({ variant, ...restOfProps }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+declare const Badge: ({ variant, ...restOfProps }: BadgeProps) => import("react").JSX.Element;
 export default Badge;
 type VariantStyleProps = {
     color: Color.DesignColor;
@@ -19,4 +19,4 @@ type VariantStyleProps = {
     hoverBackgroundColor?: Color.DesignColor;
 };
 type RawBadgeProps = CustomBadgeProps & VariantStyleProps;
-export declare const RawBadge: ({ label, Icon, onClick, onClickX, labelWidthPixels, defaultBackgroundColor, hoverBackgroundColor, color, }: RawBadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RawBadge: ({ label, Icon, onClick, onClickX, labelWidthPixels, defaultBackgroundColor, hoverBackgroundColor, color, }: RawBadgeProps) => import("react").JSX.Element;

package/core/molecules/Button.d.ts

@@ -16,7 +16,7 @@ type ButtonProps = {
     variant?: ButtonVariant;
     size?: ButtonSize;
 } & CustomButtonProps;
-declare const Button: ({ variant, size, ...restOfProps }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const Button: ({ variant, size, ...restOfProps }: ButtonProps) => import("react").JSX.Element;
 export default Button;
 type VariantStyleProps = {
     defaultColor: Color.DesignColor;
@@ -35,4 +35,4 @@ type SizeStyleProps = {
     fontSize?: string;
 };
 type RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;
-export declare const RawButton: ({ Icon, iconRight, label, href, target, disabled, type, width, height, padding, fontSize, textDecoration, defaultColor, hoverColor, disabledColor, defaultBackgroundColor, hoverBackgroundColor, disabledBackgroundColor, borderColor, ...restOfProps }: RawButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RawButton: ({ Icon, iconRight, label, href, target, disabled, type, width, height, padding, fontSize, textDecoration, defaultColor, hoverColor, disabledColor, defaultBackgroundColor, hoverBackgroundColor, disabledBackgroundColor, borderColor, ...restOfProps }: RawButtonProps) => import("react").JSX.Element;

package/core/molecules/Checkbox.d.ts

@@ -3,5 +3,5 @@ type CheckboxProps = {
     label: ReactNode;
     labelBefore?: boolean;
 } & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-declare const Checkbox: ({ id, label, labelBefore, ...checkboxProps }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+declare const Checkbox: ({ id, label, labelBefore, ...checkboxProps }: CheckboxProps) => import("react").JSX.Element;
 export default Checkbox;

package/core/molecules/Input.d.ts

@@ -5,5 +5,5 @@ type InputProps = {
     datalistId?: string;
     datalistOptions?: Option[];
 } & InputValidationProps & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-declare const Input: ({ datalistOptions, datalistId, ...inputProps }: InputProps) => import("react/jsx-runtime").JSX.Element;
+declare const Input: ({ datalistOptions, datalistId, ...inputProps }: InputProps) => import("react").JSX.Element;
 export default Input;

package/core/molecules/PageLoader.d.ts

@@ -7,5 +7,5 @@ type PageLoaderProps = {
 /**
  * The animation to show when loading the whole page
  */
-declare const PageLoader: ({ loadingText, tip, pacman, color, size, ...restOfProps }: PageLoaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const PageLoader: ({ loadingText, tip, pacman, color, size, ...restOfProps }: PageLoaderProps) => import("react").JSX.Element;
 export default PageLoader;

package/core/molecules/RadioButton.d.ts

@@ -1,5 +1,5 @@
 import type { DetailedHTMLProps, InputHTMLAttributes } from "react";
 import type { Option } from "../types";
 type RadioButtonProps = Option & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-declare const RadioButton: ({ label, value, id, ...radioButtonProps }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const RadioButton: ({ label, value, id, ...radioButtonProps }: RadioButtonProps) => import("react").JSX.Element;
 export default RadioButton;

package/core/organisms/Dropdown.d.ts

@@ -5,5 +5,5 @@ export type DropdownProps = {
     options: DropdownOption[];
     defaultLabel?: string;
 } & DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
-declare const Dropdown: ({ options, defaultLabel, ...selectProps }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+declare const Dropdown: ({ options, defaultLabel, ...selectProps }: DropdownProps) => import("react").JSX.Element;
 export default Dropdown;

package/core/organisms/FileDrop.d.ts

@@ -6,7 +6,7 @@ type FileDropzoneProps = {
     maxFiles?: number;
     maxSizeMB?: number;
 };
-declare const FileDrop: ({ uploadedFiles, uploadFiles, removeFile, errorMessage, maxFiles, maxSizeMB, }: FileDropzoneProps) => import("react/jsx-runtime").JSX.Element;
+declare const FileDrop: ({ uploadedFiles, uploadFiles, removeFile, errorMessage, maxFiles, maxSizeMB, }: FileDropzoneProps) => import("react").JSX.Element;
 export default FileDrop;
 export declare const useFileDrop: (initialFiles?: File[], maxFiles?: number, maxSizeMB?: number) => {
     files: File[];

package/core/organisms/SearchBar.d.ts

@@ -1,14 +1,15 @@
-import type { GrantMatchQuery } from "@grantbii/ui-core/match/entities";
+import type { ChangeEventHandler, MouseEventHandler } from "react";
 type SearchBarProps = {
-    activeQuery: GrantMatchQuery;
-    updateActiveQuery: (query: GrantMatchQuery) => void;
     queryText: string;
-    updateQueryText: (newText: string) => void;
-    onSearch?: () => void;
+    onChangeQueryText: ChangeEventHandler<HTMLInputElement, HTMLInputElement>;
+    onClickReset: MouseEventHandler<HTMLButtonElement>;
+    onClickSearch: MouseEventHandler<HTMLButtonElement>;
+    handlePressEnter: () => void;
+    autoFocus?: boolean;
+    disableSearch?: boolean;
     placeholder?: string;
-    runSearchOnReset?: boolean;
     size?: SearchBarSize;
 };
 type SearchBarSize = "small" | "medium";
-declare const SearchBar: ({ activeQuery, updateActiveQuery, queryText, updateQueryText, onSearch, placeholder, runSearchOnReset, size, }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
+declare const SearchBar: ({ queryText, onChangeQueryText, onClickSearch, onClickReset, handlePressEnter, autoFocus, disableSearch, placeholder, size, }: SearchBarProps) => import("react").JSX.Element;
 export default SearchBar;

package/core/organisms/SearchBar.js

@@ -1,26 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import { Color, Responsive, SystemIcon } from "../atoms";
+import { Color, Responsive, Spacing, SystemIcon } from "../atoms";
 import { Button } from "../molecules";
-const DEFAULT_PLACEHOLDER = "Search grant or describe your project";
-const SearchBar = ({ activeQuery, updateActiveQuery, queryText, updateQueryText, onSearch, placeholder = DEFAULT_PLACEHOLDER, runSearchOnReset = false, size = "medium", }) => {
-    const { height, fontSize } = SIZE_PROPS_MAP[size];
-    const resetSearch = () => {
-        updateQueryText("");
-        if (runSearchOnReset) {
-            updateActiveQuery({ files: activeQuery.files, text: "" });
-        }
-    };
-    const executeSearch = () => {
-        onSearch?.();
-        updateActiveQuery({ files: activeQuery.files, text: queryText });
-    };
-    return (_jsxs(BaseSearchBar, { children: [_jsxs(SearchArea, { "$height": height, "$hasQueryText": queryText !== "", children: [_jsx(TextInput, { queryText: queryText, updateQueryText: updateQueryText, executeSearch: executeSearch, placeholder: placeholder, fontSize: fontSize }), queryText === "" ? (_jsx(ResetButtonPlaceholder, {})) : (_jsx(ResetButton, { resetSearch: resetSearch }))] }), _jsx(Button, { Icon: SystemIcon.MagnifyingGlassIcon, onClick: executeSearch, size: size })] }));
+const SearchBar = ({ queryText, onChangeQueryText, onClickSearch, onClickReset, handlePressEnter, autoFocus = false, disableSearch = false, placeholder = "Search grant or describe your project", size = "medium", }) => {
+    const { height, fontSize } = sizePropsMap[size];
+    return (_jsxs(BaseSearchBar, { children: [_jsxs(SearchArea, { "$height": height, "$hasQueryText": queryText !== "", children: [_jsx(TextInput, { queryText: queryText, onChangeQueryText: onChangeQueryText, handlePressEnter: handlePressEnter, autoFocus: autoFocus, disableSearch: disableSearch, placeholder: placeholder, fontSize: fontSize }), queryText === "" ? (_jsx(ResetButtonPlaceholder, {})) : (_jsx(ResetButton, { onClickReset: onClickReset }))] }), _jsx(Button, { disabled: disableSearch, Icon: SystemIcon.MagnifyingGlassIcon, onClick: onClickSearch, size: size })] }));
 };
 export default SearchBar;
-const SIZE_PROPS_MAP = {
+const sizePropsMap = {
     small: {
-        height: "40px",
+        height: Spacing.px40,
         fontSize: "12px",
     },
     medium: {
@@ -32,7 +21,7 @@ const BaseSearchBar = styled.div `
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: ${Spacing.px8};
 
   width: 100%;
 
@@ -41,7 +30,7 @@ const BaseSearchBar = styled.div `
   }
 
   @media (width >= ${Responsive.widthBreakpoint.laptop}) {
-    border-radius: 12px;
+    border-radius: ${Spacing.px12};
   }
 `;
 const SearchArea = styled.div `
@@ -55,25 +44,25 @@ const SearchArea = styled.div `
   background-color: ${(props) => props.$hasQueryText ? Color.neutral.white : Color.neutral.grey4};
   border: 0.5px solid
     ${(props) => props.$hasQueryText ? Color.accent.yellow1 : Color.neutral.grey2};
-  border-radius: 8px;
+  border-radius: ${Spacing.px8};
 
   &:focus-within {
     background-color: ${Color.neutral.white};
     border: 0.5px solid ${Color.accent.yellow1};
   }
 `;
-const TextInput = ({ queryText, updateQueryText, executeSearch, placeholder, fontSize, }) => {
+const TextInput = ({ queryText, onChangeQueryText, handlePressEnter, autoFocus, disableSearch, placeholder, fontSize, }) => {
     const onKeyDown = (event) => {
-        if (event.key === "Enter" && !event.repeat) {
+        if (event.key === "Enter" && !event.repeat && !disableSearch) {
             event.preventDefault();
-            executeSearch();
+            handlePressEnter();
         }
     };
-    return (_jsx(BaseTextInput, { value: queryText, placeholder: placeholder, onChange: (event) => updateQueryText(event.target.value), onKeyDown: onKeyDown, "$fontSize": fontSize }));
+    return (_jsx(BaseTextInput, { value: queryText, placeholder: placeholder, onChange: onChangeQueryText, onKeyDown: onKeyDown, autoFocus: autoFocus, "$fontSize": fontSize }));
 };
 const BaseTextInput = styled.input `
   width: 100%;
-  margin-left: 16px;
+  margin-left: ${Spacing.px16};
 
   font-size: ${(props) => props.$fontSize};
   text-overflow: ellipsis;
@@ -82,7 +71,7 @@ const BaseTextInput = styled.input `
   outline: none;
   border: none;
 `;
-const ResetButton = ({ resetSearch }) => (_jsx(BaseResetButton, { onClick: resetSearch, type: "button", children: _jsx(SystemIcon.XIcon, { size: 14, color: Color.neutral.black }) }));
+const ResetButton = ({ onClickReset }) => (_jsx(BaseResetButton, { onClick: onClickReset, type: "button", children: _jsx(SystemIcon.XIcon, { size: 14, color: Color.neutral.black }) }));
 const BaseResetButton = styled.button `
   display: flex;
   align-items: center;
@@ -92,12 +81,12 @@ const BaseResetButton = styled.button `
   min-width: 38px;
   height: 38px;
 
-  border-radius: 8px;
+  border-radius: ${Spacing.px8};
 `;
 const ResetButtonPlaceholder = styled.div `
   width: 38px;
   height: 38px;
 
-  border-radius: 8px;
+  border-radius: ${Spacing.px8};
 `;
 //# sourceMappingURL=SearchBar.js.map

package/core/organisms/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../core/organisms/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport type { KeyboardEvent } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Responsive, SystemIcon } from \"../atoms\";\nimport { Button } from \"../molecules\";\n\ntype SearchBarProps = {\n  activeQuery: GrantMatchQuery;\n  updateActiveQuery: (query: GrantMatchQuery) => void;\n  queryText: string;\n  updateQueryText: (newText: string) => void;\n  onSearch?: () => void;\n  placeholder?: string;\n  runSearchOnReset?: boolean;\n  size?: SearchBarSize;\n};\n\ntype SearchBarSize = \"small\" | \"medium\";\n\nconst DEFAULT_PLACEHOLDER = \"Search grant or describe your project\";\n\nconst SearchBar = ({\n  activeQuery,\n  updateActiveQuery,\n  queryText,\n  updateQueryText,\n  onSearch,\n  placeholder = DEFAULT_PLACEHOLDER,\n  runSearchOnReset = false,\n  size = \"medium\",\n}: SearchBarProps) => {\n  const { height, fontSize } = SIZE_PROPS_MAP[size];\n\n  const resetSearch = () => {\n    updateQueryText(\"\");\n\n    if (runSearchOnReset) {\n      updateActiveQuery({ files: activeQuery.files, text: \"\" });\n    }\n  };\n\n  const executeSearch = () => {\n    onSearch?.();\n    updateActiveQuery({ files: activeQuery.files, text: queryText });\n  };\n\n  return (\n    <BaseSearchBar>\n      <SearchArea $height={height} $hasQueryText={queryText !== \"\"}>\n        <TextInput\n          queryText={queryText}\n          updateQueryText={updateQueryText}\n          executeSearch={executeSearch}\n          placeholder={placeholder}\n          fontSize={fontSize}\n        />\n\n        {queryText === \"\" ? (\n          <ResetButtonPlaceholder />\n        ) : (\n          <ResetButton resetSearch={resetSearch} />\n        )}\n      </SearchArea>\n\n      <Button\n        Icon={SystemIcon.MagnifyingGlassIcon}\n        onClick={executeSearch}\n        size={size}\n      />\n    </BaseSearchBar>\n  );\n};\n\nexport default SearchBar;\n\ntype SizeStyleProps = {\n  height: string;\n  fontSize: string;\n};\n\nconst SIZE_PROPS_MAP: { [size in SearchBarSize]: SizeStyleProps } = {\n  small: {\n    height: \"40px\",\n    fontSize: \"12px\",\n  },\n  medium: {\n    height: \"44px\",\n    fontSize: \"14px\",\n  },\n};\n\nconst BaseSearchBar = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n\n  width: 100%;\n\n  @media (width < ${Responsive.widthBreakpoint.laptop}) {\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n    border-radius: 12px;\n  }\n`;\n\ntype SearchAreaProps = {\n  $height: string;\n  $hasQueryText: boolean;\n};\n\nconst SearchArea = styled.div<SearchAreaProps>`\n  display: flex;\n  align-items: center;\n\n  box-sizing: border-box;\n  height: ${(props) => props.$height};\n  width: 100%;\n\n  background-color: ${(props) =>\n    props.$hasQueryText ? Color.neutral.white : Color.neutral.grey4};\n  border: 0.5px solid\n    ${(props) =>\n      props.$hasQueryText ? Color.accent.yellow1 : Color.neutral.grey2};\n  border-radius: 8px;\n\n  &:focus-within {\n    background-color: ${Color.neutral.white};\n    border: 0.5px solid ${Color.accent.yellow1};\n  }\n`;\n\ntype TextInputProps = {\n  queryText: string;\n  updateQueryText: (newText: string) => void;\n  executeSearch: () => void;\n  placeholder: string;\n  fontSize: string;\n};\n\nconst TextInput = ({\n  queryText,\n  updateQueryText,\n  executeSearch,\n  placeholder,\n  fontSize,\n}: TextInputProps) => {\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Enter\" && !event.repeat) {\n      event.preventDefault();\n      executeSearch();\n    }\n  };\n\n  return (\n    <BaseTextInput\n      value={queryText}\n      placeholder={placeholder}\n      onChange={(event) => updateQueryText(event.target.value)}\n      onKeyDown={onKeyDown}\n      $fontSize={fontSize}\n    />\n  );\n};\n\nconst BaseTextInput = styled.input<{ $fontSize: string }>`\n  width: 100%;\n  margin-left: 16px;\n\n  font-size: ${(props) => props.$fontSize};\n  text-overflow: ellipsis;\n\n  background-color: transparent;\n  outline: none;\n  border: none;\n`;\n\ntype ResetButtonProps = {\n  resetSearch: () => void;\n};\n\nconst ResetButton = ({ resetSearch }: ResetButtonProps) => (\n  <BaseResetButton onClick={resetSearch} type=\"button\">\n    <SystemIcon.XIcon size={14} color={Color.neutral.black} />\n  </BaseResetButton>\n);\n\nconst BaseResetButton = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 38px;\n  min-width: 38px;\n  height: 38px;\n\n  border-radius: 8px;\n`;\n\nconst ResetButtonPlaceholder = styled.div`\n  width: 38px;\n  height: 38px;\n\n  border-radius: 8px;\n`;\n"]}
+{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../core/organisms/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import type {\n  ChangeEventHandler,\n  KeyboardEvent,\n  MouseEventHandler,\n} from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Responsive, Spacing, SystemIcon } from \"../atoms\";\nimport { Button } from \"../molecules\";\n\ntype SearchBarProps = {\n  queryText: string;\n  onChangeQueryText: ChangeEventHandler<HTMLInputElement, HTMLInputElement>;\n  onClickReset: MouseEventHandler<HTMLButtonElement>;\n  onClickSearch: MouseEventHandler<HTMLButtonElement>;\n  handlePressEnter: () => void;\n  autoFocus?: boolean;\n  disableSearch?: boolean;\n  placeholder?: string;\n  size?: SearchBarSize;\n};\n\ntype SearchBarSize = \"small\" | \"medium\";\n\nconst SearchBar = ({\n  queryText,\n  onChangeQueryText,\n  onClickSearch,\n  onClickReset,\n  handlePressEnter,\n  autoFocus = false,\n  disableSearch = false,\n  placeholder = \"Search grant or describe your project\",\n  size = \"medium\",\n}: SearchBarProps) => {\n  const { height, fontSize } = sizePropsMap[size];\n\n  return (\n    <BaseSearchBar>\n      <SearchArea $height={height} $hasQueryText={queryText !== \"\"}>\n        <TextInput\n          queryText={queryText}\n          onChangeQueryText={onChangeQueryText}\n          handlePressEnter={handlePressEnter}\n          autoFocus={autoFocus}\n          disableSearch={disableSearch}\n          placeholder={placeholder}\n          fontSize={fontSize}\n        />\n\n        {queryText === \"\" ? (\n          <ResetButtonPlaceholder />\n        ) : (\n          <ResetButton onClickReset={onClickReset} />\n        )}\n      </SearchArea>\n\n      <Button\n        disabled={disableSearch}\n        Icon={SystemIcon.MagnifyingGlassIcon}\n        onClick={onClickSearch}\n        size={size}\n      />\n    </BaseSearchBar>\n  );\n};\n\nexport default SearchBar;\n\ntype SizeStyleProps = {\n  height: string;\n  fontSize: string;\n};\n\nconst sizePropsMap: { [size in SearchBarSize]: SizeStyleProps } = {\n  small: {\n    height: Spacing.px40,\n    fontSize: \"12px\",\n  },\n  medium: {\n    height: \"44px\",\n    fontSize: \"14px\",\n  },\n};\n\nconst BaseSearchBar = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ${Spacing.px8};\n\n  width: 100%;\n\n  @media (width < ${Responsive.widthBreakpoint.laptop}) {\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n    border-radius: ${Spacing.px12};\n  }\n`;\n\ntype SearchAreaProps = {\n  $height: string;\n  $hasQueryText: boolean;\n};\n\nconst SearchArea = styled.div<SearchAreaProps>`\n  display: flex;\n  align-items: center;\n\n  box-sizing: border-box;\n  height: ${(props) => props.$height};\n  width: 100%;\n\n  background-color: ${(props) =>\n    props.$hasQueryText ? Color.neutral.white : Color.neutral.grey4};\n  border: 0.5px solid\n    ${(props) =>\n      props.$hasQueryText ? Color.accent.yellow1 : Color.neutral.grey2};\n  border-radius: ${Spacing.px8};\n\n  &:focus-within {\n    background-color: ${Color.neutral.white};\n    border: 0.5px solid ${Color.accent.yellow1};\n  }\n`;\n\ntype TextInputProps = {\n  queryText: string;\n  onChangeQueryText?: ChangeEventHandler<HTMLInputElement, HTMLInputElement>;\n  handlePressEnter: () => void;\n  autoFocus: boolean;\n  disableSearch: boolean;\n  placeholder: string;\n  fontSize: string;\n};\n\nconst TextInput = ({\n  queryText,\n  onChangeQueryText,\n  handlePressEnter,\n  autoFocus,\n  disableSearch,\n  placeholder,\n  fontSize,\n}: TextInputProps) => {\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Enter\" && !event.repeat && !disableSearch) {\n      event.preventDefault();\n      handlePressEnter();\n    }\n  };\n\n  return (\n    <BaseTextInput\n      value={queryText}\n      placeholder={placeholder}\n      onChange={onChangeQueryText}\n      onKeyDown={onKeyDown}\n      autoFocus={autoFocus}\n      $fontSize={fontSize}\n    />\n  );\n};\n\nconst BaseTextInput = styled.input<{ $fontSize: string }>`\n  width: 100%;\n  margin-left: ${Spacing.px16};\n\n  font-size: ${(props) => props.$fontSize};\n  text-overflow: ellipsis;\n\n  background-color: transparent;\n  outline: none;\n  border: none;\n`;\n\ntype ResetButtonProps = {\n  onClickReset: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst ResetButton = ({ onClickReset }: ResetButtonProps) => (\n  <BaseResetButton onClick={onClickReset} type=\"button\">\n    <SystemIcon.XIcon size={14} color={Color.neutral.black} />\n  </BaseResetButton>\n);\n\nconst BaseResetButton = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 38px;\n  min-width: 38px;\n  height: 38px;\n\n  border-radius: ${Spacing.px8};\n`;\n\nconst ResetButtonPlaceholder = styled.div`\n  width: 38px;\n  height: 38px;\n\n  border-radius: ${Spacing.px8};\n`;\n"]}

package/core/templates/ErrorFallback.d.ts

@@ -4,5 +4,5 @@ type ErrorFallbackProps = {
     errorDescription?: ReactNode;
     onClickReload?: MouseEventHandler<HTMLButtonElement>;
 };
-declare const ErrorFallback: ({ errorMessage, errorDescription, onClickReload, }: ErrorFallbackProps) => import("react/jsx-runtime").JSX.Element;
+declare const ErrorFallback: ({ errorMessage, errorDescription, onClickReload, }: ErrorFallbackProps) => import("react").JSX.Element;
 export default ErrorFallback;

package/core/templates/GrantMatch/ActiveQueryFiles.d.ts

@@ -1,2 +1,2 @@
-declare const ActiveQueryFiles: () => import("react/jsx-runtime").JSX.Element;
+declare const ActiveQueryFiles: () => import("react").JSX.Element;
 export default ActiveQueryFiles;

package/core/templates/GrantMatch/GrantMatchModal.d.ts

@@ -2,5 +2,5 @@ type GrantMatchModalProps = {
     findGrantsCallback?: () => void;
     closeModalCallback?: () => void;
 };
-declare const GrantMatchModal: ({ findGrantsCallback, closeModalCallback, }: GrantMatchModalProps) => import("react/jsx-runtime").JSX.Element;
+declare const GrantMatchModal: ({ findGrantsCallback, closeModalCallback, }: GrantMatchModalProps) => import("react").JSX.Element;
 export default GrantMatchModal;

package/core/templates/GrantMatch/OpenModalButton.d.ts

@@ -1,5 +1,5 @@
 type OpenModalButtonProps = {
     openModalCallback?: () => void;
 };
-declare const OpenModalButton: ({ openModalCallback }: OpenModalButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const OpenModalButton: ({ openModalCallback }: OpenModalButtonProps) => import("react").JSX.Element;
 export default OpenModalButton;

package/core/templates/GrantMatch/index.d.ts

@@ -7,6 +7,6 @@ type GrantMatchProps = {
     closeModalCallback?: () => void;
     openModalCallback?: () => void;
 };
-declare const GrantMatch: ({ activeQuery, updateActiveQuery, textSearchCallback, findGrantsCallback, closeModalCallback, openModalCallback, }: GrantMatchProps) => import("react/jsx-runtime").JSX.Element;
+declare const GrantMatch: ({ activeQuery, updateActiveQuery, textSearchCallback, findGrantsCallback, closeModalCallback, openModalCallback, }: GrantMatchProps) => import("react").JSX.Element;
 export default GrantMatch;
 export declare const useGrantMatchActiveQuery: (performGrantMatch: (newQuery: GrantMatchQuery) => void, resetGrantMatch: () => void) => GrantMatchProps;

package/core/templates/GrantMatch/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { checkGrantMatchActive } from "@grantbii/ui-core/match/validations";
 import { useMemo, useState } from "react";
 import styled from "styled-components";
-import { Color, Responsive } from "../../atoms";
+import { Color, Responsive, Spacing } from "../../atoms";
 import { SearchBar, useModal } from "../../organisms";
 import ActiveQueryFiles from "./ActiveQueryFiles";
 import GrantMatchModal from "./GrantMatchModal";
@@ -27,13 +27,21 @@ const GrantMatch = ({ activeQuery, updateActiveQuery, textSearchCallback, findGr
         openModal,
         closeModal,
     ]);
-    return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsxs(SearchBarContainer, { children: [_jsx(SearchBar, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery, queryText: queryText, updateQueryText: updateQueryText, onSearch: textSearchCallback, runSearchOnReset: true, size: "small" }), _jsx(OpenModalButton, { openModalCallback: openModalCallback })] }), activeQuery.files.length > 0 ? _jsx(ActiveQueryFiles, {}) : _jsx(_Fragment, {}), showModal ? (_jsx(GrantMatchModal, { findGrantsCallback: findGrantsCallback, closeModalCallback: closeModalCallback })) : (_jsx(_Fragment, {}))] }) }));
+    const handleSearch = () => {
+        updateActiveQuery({ files: activeQuery.files, text: queryText });
+        textSearchCallback?.();
+    };
+    const handleReset = () => {
+        updateQueryText("");
+        updateActiveQuery({ files: activeQuery.files, text: "" });
+    };
+    return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsxs(SearchBarContainer, { children: [_jsx(SearchBar, { queryText: queryText, onChangeQueryText: (event) => setQueryText(event.target.value), handlePressEnter: () => handleSearch(), onClickSearch: () => handleSearch(), onClickReset: () => handleReset(), size: "small" }), _jsx(OpenModalButton, { openModalCallback: openModalCallback })] }), activeQuery.files.length > 0 ? _jsx(ActiveQueryFiles, {}) : _jsx(_Fragment, {}), showModal ? (_jsx(GrantMatchModal, { findGrantsCallback: findGrantsCallback, closeModalCallback: closeModalCallback })) : (_jsx(_Fragment, {}))] }) }));
 };
 export default GrantMatch;
 const BaseGrantMatch = styled.div `
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: ${Spacing.px8};
 
   width: 100%;
   max-width: 100vw;
@@ -49,7 +57,7 @@ const SearchBarContainer = styled.div `
   background-color: ${Color.neutral.white};
 
   @media (width < ${Responsive.widthBreakpoint.laptop}) {
-    gap: 8px;
+    gap: ${Spacing.px8};
     padding: 0px;
 
     box-shadow: none;
@@ -57,11 +65,11 @@ const SearchBarContainer = styled.div `
   }
 
   @media (width >= ${Responsive.widthBreakpoint.laptop}) {
-    gap: 16px;
-    padding: 12px 16px;
+    gap: ${Spacing.px16};
+    padding: ${Spacing.px12} ${Spacing.px16};
 
-    box-shadow: 0px 0px 40px 0px #00000008;
-    border-radius: 12px;
+    box-shadow: 0px 0px ${Spacing.px40} 0px #00000008;
+    border-radius: ${Spacing.px12};
   }
 `;
 export const useGrantMatchActiveQuery = (performGrantMatch, resetGrantMatch) => {

package/core/templates/GrantMatch/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport { checkGrantMatchActive } from \"@grantbii/ui-core/match/validations\";\nimport { useMemo, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Responsive } from \"../../atoms\";\nimport { SearchBar, useModal } from \"../../organisms\";\nimport ActiveQueryFiles from \"./ActiveQueryFiles\";\nimport GrantMatchModal from \"./GrantMatchModal\";\nimport OpenModalButton from \"./OpenModalButton\";\nimport { GrantMatchContext } from \"./context\";\n\ntype GrantMatchProps = {\n  activeQuery: GrantMatchQuery;\n  updateActiveQuery: (newQuery: GrantMatchQuery) => void;\n  textSearchCallback?: () => void;\n  findGrantsCallback?: () => void;\n  closeModalCallback?: () => void;\n  openModalCallback?: () => void;\n};\n\nconst GrantMatch = ({\n  activeQuery,\n  updateActiveQuery,\n  textSearchCallback,\n  findGrantsCallback,\n  closeModalCallback,\n  openModalCallback,\n}: GrantMatchProps) => {\n  const { showModal, openModal, closeModal } = useModal();\n  const [queryText, setQueryText] = useState(activeQuery.text);\n  const updateQueryText = (newText: string) => setQueryText(newText);\n\n  const commonProps = useMemo(\n    () => ({\n      activeQuery,\n      updateActiveQuery,\n      queryText,\n      updateQueryText,\n      openModal,\n      closeModal,\n    }),\n    [\n      activeQuery,\n      updateActiveQuery,\n      queryText,\n      updateQueryText,\n      openModal,\n      closeModal,\n    ],\n  );\n\n  return (\n    <GrantMatchContext.Provider value={commonProps}>\n      <BaseGrantMatch>\n        <SearchBarContainer>\n          <SearchBar\n            activeQuery={activeQuery}\n            updateActiveQuery={updateActiveQuery}\n            queryText={queryText}\n            updateQueryText={updateQueryText}\n            onSearch={textSearchCallback}\n            runSearchOnReset\n            size=\"small\"\n          />\n          <OpenModalButton openModalCallback={openModalCallback} />\n        </SearchBarContainer>\n\n        {activeQuery.files.length > 0 ? <ActiveQueryFiles /> : <></>}\n\n        {showModal ? (\n          <GrantMatchModal\n            findGrantsCallback={findGrantsCallback}\n            closeModalCallback={closeModalCallback}\n          />\n        ) : (\n          <></>\n        )}\n      </BaseGrantMatch>\n    </GrantMatchContext.Provider>\n  );\n};\n\nexport default GrantMatch;\n\nconst BaseGrantMatch = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  width: 100%;\n  max-width: 100vw;\n`;\n\nconst SearchBarContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  width: 100%;\n\n  color: ${Color.typography.blackHigh};\n  background-color: ${Color.neutral.white};\n\n  @media (width < ${Responsive.widthBreakpoint.laptop}) {\n    gap: 8px;\n    padding: 0px;\n\n    box-shadow: none;\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n    gap: 16px;\n    padding: 12px 16px;\n\n    box-shadow: 0px 0px 40px 0px #00000008;\n    border-radius: 12px;\n  }\n`;\n\nexport const useGrantMatchActiveQuery = (\n  performGrantMatch: (newQuery: GrantMatchQuery) => void,\n  resetGrantMatch: () => void,\n): GrantMatchProps => {\n  const [activeQuery, setActiveQuery] = useState<GrantMatchQuery>({\n    files: [],\n    text: \"\",\n  });\n\n  const updateActiveQuery = (newQuery: GrantMatchQuery) => {\n    setActiveQuery({ ...newQuery });\n\n    if (checkGrantMatchActive(newQuery)) {\n      performGrantMatch(newQuery);\n    } else {\n      resetGrantMatch();\n    }\n  };\n\n  return { activeQuery, updateActiveQuery };\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport { checkGrantMatchActive } from \"@grantbii/ui-core/match/validations\";\nimport { useMemo, useState } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Responsive, Spacing } from \"../../atoms\";\nimport { SearchBar, useModal } from \"../../organisms\";\nimport ActiveQueryFiles from \"./ActiveQueryFiles\";\nimport GrantMatchModal from \"./GrantMatchModal\";\nimport OpenModalButton from \"./OpenModalButton\";\nimport { GrantMatchContext } from \"./context\";\n\ntype GrantMatchProps = {\n  activeQuery: GrantMatchQuery;\n  updateActiveQuery: (newQuery: GrantMatchQuery) => void;\n  textSearchCallback?: () => void;\n  findGrantsCallback?: () => void;\n  closeModalCallback?: () => void;\n  openModalCallback?: () => void;\n};\n\nconst GrantMatch = ({\n  activeQuery,\n  updateActiveQuery,\n  textSearchCallback,\n  findGrantsCallback,\n  closeModalCallback,\n  openModalCallback,\n}: GrantMatchProps) => {\n  const { showModal, openModal, closeModal } = useModal();\n  const [queryText, setQueryText] = useState(activeQuery.text);\n  const updateQueryText = (newText: string) => setQueryText(newText);\n\n  const commonProps = useMemo(\n    () => ({\n      activeQuery,\n      updateActiveQuery,\n      queryText,\n      updateQueryText,\n      openModal,\n      closeModal,\n    }),\n    [\n      activeQuery,\n      updateActiveQuery,\n      queryText,\n      updateQueryText,\n      openModal,\n      closeModal,\n    ],\n  );\n\n  const handleSearch = () => {\n    updateActiveQuery({ files: activeQuery.files, text: queryText });\n    textSearchCallback?.();\n  };\n\n  const handleReset = () => {\n    updateQueryText(\"\");\n    updateActiveQuery({ files: activeQuery.files, text: \"\" });\n  };\n\n  return (\n    <GrantMatchContext.Provider value={commonProps}>\n      <BaseGrantMatch>\n        <SearchBarContainer>\n          <SearchBar\n            queryText={queryText}\n            onChangeQueryText={(event) => setQueryText(event.target.value)}\n            handlePressEnter={() => handleSearch()}\n            onClickSearch={() => handleSearch()}\n            onClickReset={() => handleReset()}\n            size=\"small\"\n          />\n          <OpenModalButton openModalCallback={openModalCallback} />\n        </SearchBarContainer>\n\n        {activeQuery.files.length > 0 ? <ActiveQueryFiles /> : <></>}\n\n        {showModal ? (\n          <GrantMatchModal\n            findGrantsCallback={findGrantsCallback}\n            closeModalCallback={closeModalCallback}\n          />\n        ) : (\n          <></>\n        )}\n      </BaseGrantMatch>\n    </GrantMatchContext.Provider>\n  );\n};\n\nexport default GrantMatch;\n\nconst BaseGrantMatch = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing.px8};\n\n  width: 100%;\n  max-width: 100vw;\n`;\n\nconst SearchBarContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  width: 100%;\n\n  color: ${Color.typography.blackHigh};\n  background-color: ${Color.neutral.white};\n\n  @media (width < ${Responsive.widthBreakpoint.laptop}) {\n    gap: ${Spacing.px8};\n    padding: 0px;\n\n    box-shadow: none;\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n    gap: ${Spacing.px16};\n    padding: ${Spacing.px12} ${Spacing.px16};\n\n    box-shadow: 0px 0px ${Spacing.px40} 0px #00000008;\n    border-radius: ${Spacing.px12};\n  }\n`;\n\nexport const useGrantMatchActiveQuery = (\n  performGrantMatch: (newQuery: GrantMatchQuery) => void,\n  resetGrantMatch: () => void,\n): GrantMatchProps => {\n  const [activeQuery, setActiveQuery] = useState<GrantMatchQuery>({\n    files: [],\n    text: \"\",\n  });\n\n  const updateActiveQuery = (newQuery: GrantMatchQuery) => {\n    setActiveQuery({ ...newQuery });\n\n    if (checkGrantMatchActive(newQuery)) {\n      performGrantMatch(newQuery);\n    } else {\n      resetGrantMatch();\n    }\n  };\n\n  return { activeQuery, updateActiveQuery };\n};\n"]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@grantbii/design-system",
   "author": "Grantbii",
   "license": "UNLICENSED",
-  "version": "1.25.0",
+  "version": "1.26.0",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -26,7 +26,7 @@
     "react-spinners": "0.17.0"
   },
   "peerDependencies": {
-    "@grantbii/ui-core": "^1.8",
+    "@grantbii/ui-core": "^1.10",
     "next": "^16.2",
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
@@ -35,29 +35,29 @@
   "devDependencies": {
     "@chromatic-com/storybook": "5.2.1",
     "@grantbii/ui-core": "1.10.0",
-    "@storybook/addon-a11y": "10.4.2",
-    "@storybook/addon-docs": "10.4.2",
-    "@storybook/addon-onboarding": "10.4.2",
-    "@storybook/addon-vitest": "10.4.2",
-    "@storybook/nextjs-vite": "10.4.2",
+    "@storybook/addon-a11y": "10.4.6",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/addon-onboarding": "10.4.6",
+    "@storybook/addon-vitest": "10.4.6",
+    "@storybook/nextjs-vite": "10.4.6",
     "@types/node": "22.19.17",
-    "@types/react": "19.2.14",
+    "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "@vitest/browser": "4.1.8",
     "@vitest/browser-playwright": "4.1.8",
     "@vitest/coverage-v8": "4.1.8",
     "eslint": "9.39.4",
-    "eslint-config-next": "16.2.7",
+    "eslint-config-next": "16.2.9",
     "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-storybook": "10.4.2",
+    "eslint-plugin-storybook": "10.4.6",
     "husky": "9.1.7",
-    "lint-staged": "17.0.7",
-    "next": "16.2.7",
-    "playwright": "1.60.0",
-    "prettier": "3.8.3",
+    "lint-staged": "17.0.8",
+    "next": "16.2.9",
+    "playwright": "1.61.0",
+    "prettier": "3.8.4",
     "react": "19.2.7",
     "react-dom": "19.2.7",
-    "storybook": "10.4.2",
+    "storybook": "10.4.6",
     "styled-components": "6.4.2",
     "typescript": "6.0.3",
     "vitest": "4.1.8"

package/stories/archive/RadioButtons.stories.d.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 type ExampleProps = {
     controlled: boolean;
 };
-declare const RadioButtonsExample: ({ controlled }: ExampleProps) => import("react/jsx-runtime").JSX.Element;
+declare const RadioButtonsExample: ({ controlled }: ExampleProps) => import("react").JSX.Element;
 declare const meta: Meta<typeof RadioButtonsExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/stories/archive/TallyModal.stories.d.ts

@@ -5,7 +5,7 @@ type TallyModalExampleProps = {
     tallyId: string;
     prefilledFieldsQueryParams?: string;
 };
-declare const TallyModalExample: (props: TallyModalExampleProps) => import("react/jsx-runtime").JSX.Element;
+declare const TallyModalExample: (props: TallyModalExampleProps) => import("react").JSX.Element;
 declare const meta: Meta<typeof TallyModalExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/stories/organisms/Dropdown.stories.d.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 type ExampleProps = {
     controlled: boolean;
 };
-declare const DropdownExample: ({ controlled }: ExampleProps) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownExample: ({ controlled }: ExampleProps) => import("react").JSX.Element;
 declare const meta: Meta<typeof DropdownExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/stories/organisms/FileDrop.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-declare const FileDropExample: () => import("react/jsx-runtime").JSX.Element;
+declare const FileDropExample: () => import("react").JSX.Element;
 declare const meta: Meta<typeof FileDropExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/stories/organisms/Modal.stories.d.ts

@@ -7,7 +7,7 @@ type ModalExampleProps = {
     width?: string;
     height?: string;
 };
-declare const ModalExample: (props: ModalExampleProps) => import("react/jsx-runtime").JSX.Element;
+declare const ModalExample: (props: ModalExampleProps) => JSX.Element;
 declare const meta: Meta<typeof ModalExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/stories/organisms/SearchBar.stories.js

@@ -2,15 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { SearchBar } from "@/.";
 import { useState } from "react";
 const SearchBarExample = ({ size }) => {
-    const [activeQuery, setActiveQuery] = useState(emptyQuery);
-    const updateActiveQuery = (newQuery) => setActiveQuery(newQuery);
     const [queryText, setQueryText] = useState("");
-    const updateQueryText = (newText) => setQueryText(newText);
-    return (_jsx(SearchBar, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery, queryText: queryText, updateQueryText: updateQueryText, size: size }));
-};
-const emptyQuery = {
-    text: "",
-    files: [],
+    const performSearch = () => {
+        if (queryText.trim() !== "") {
+            alert(`Searching for ${queryText}`);
+        }
+    };
+    return (_jsx(SearchBar, { queryText: queryText, onChangeQueryText: (event) => setQueryText(event.target.value), handlePressEnter: () => performSearch(), onClickSearch: () => performSearch(), onClickReset: () => setQueryText(""), size: size }));
 };
 const meta = {
     title: "Organisms/SearchBar",

package/stories/organisms/SearchBar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.stories.js","sourceRoot":"","sources":["../../../stories/organisms/SearchBar.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAGhC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,MAAM,gBAAgB,GAAG,CAAC,EAAE,IAAI,EAAyB,EAAE,EAAE;IAC3D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAkB,UAAU,CAAC,CAAC;IAC5E,MAAM,iBAAiB,GAAG,CAAC,QAAyB,EAAE,EAAE,CACtD,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,eAAe,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAEnE,OAAO,CACL,KAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,IAAI,EAAE,IAAI,GACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG;IACjB,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;CACzB,CAAC","sourcesContent":["import { SearchBar } from \"@/.\";\nimport type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\n\ntype SearchBarExampleProps = {\n  size?: \"small\" | \"medium\";\n};\n\nconst SearchBarExample = ({ size }: SearchBarExampleProps) => {\n  const [activeQuery, setActiveQuery] = useState<GrantMatchQuery>(emptyQuery);\n  const updateActiveQuery = (newQuery: GrantMatchQuery) =>\n    setActiveQuery(newQuery);\n\n  const [queryText, setQueryText] = useState(\"\");\n  const updateQueryText = (newText: string) => setQueryText(newText);\n\n  return (\n    <SearchBar\n      activeQuery={activeQuery}\n      updateActiveQuery={updateActiveQuery}\n      queryText={queryText}\n      updateQueryText={updateQueryText}\n      size={size}\n    />\n  );\n};\n\nconst emptyQuery = {\n  text: \"\",\n  files: [],\n};\n\nconst meta: Meta<typeof SearchBar> = {\n  title: \"Organisms/SearchBar\",\n  component: SearchBarExample,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"fullscreen\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Small: Story = {\n  args: { size: \"small\" },\n};\n\nexport const Medium: Story = {\n  args: { size: \"medium\" },\n};\n"]}
+{"version":3,"file":"SearchBar.stories.js","sourceRoot":"","sources":["../../../stories/organisms/SearchBar.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,MAAM,gBAAgB,GAAG,CAAC,EAAE,IAAI,EAAyB,EAAE,EAAE;IAC3D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE/C,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YAC5B,KAAK,CAAC,iBAAiB,SAAS,EAAE,CAAC,CAAC;QACtC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9D,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,EACvC,aAAa,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,EACpC,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EACpC,IAAI,EAAE,IAAI,GACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;CACzB,CAAC","sourcesContent":["import { SearchBar } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\n\ntype SearchBarExampleProps = {\n  size?: \"small\" | \"medium\";\n};\n\nconst SearchBarExample = ({ size }: SearchBarExampleProps) => {\n  const [queryText, setQueryText] = useState(\"\");\n\n  const performSearch = () => {\n    if (queryText.trim() !== \"\") {\n      alert(`Searching for ${queryText}`);\n    }\n  };\n\n  return (\n    <SearchBar\n      queryText={queryText}\n      onChangeQueryText={(event) => setQueryText(event.target.value)}\n      handlePressEnter={() => performSearch()}\n      onClickSearch={() => performSearch()}\n      onClickReset={() => setQueryText(\"\")}\n      size={size}\n    />\n  );\n};\n\nconst meta: Meta<typeof SearchBar> = {\n  title: \"Organisms/SearchBar\",\n  component: SearchBarExample,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"fullscreen\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Small: Story = {\n  args: { size: \"small\" },\n};\n\nexport const Medium: Story = {\n  args: { size: \"medium\" },\n};\n"]}

package/stories/templates/GrantMatch.stories.d.ts

@@ -5,7 +5,7 @@ type Callbacks = {
     closeModalCallback?: () => void;
     openModalCallback?: () => void;
 };
-declare const GrantMatchExample: (callbacks: Callbacks) => import("react/jsx-runtime").JSX.Element;
+declare const GrantMatchExample: (callbacks: Callbacks) => import("react").JSX.Element;
 declare const meta: Meta<typeof GrantMatchExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;