@grantbii/design-system 1.25.0 → 1.27.0

package/README.md

@@ -59,6 +59,6 @@ Check which files would be published with `npm publish --dry-run`
 
 The package is published to npm automatically with [GitHub Actions](.github/workflows/continuous-delivery.yaml).
 
-Documentation is published automatically to GitHub pages with [GitHub Actions](.github/workflows/continuous-delivery.yaml).
+The corresponding documentation is published to GitHub pages automatically with [GitHub Actions](.github/workflows/continuous-delivery.yaml).
 
 Once a commit has been made on the `prod` branch, a build would be triggered.

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

@@ -1,7 +1,7 @@
 import type { ButtonHTMLAttributes, HTMLAttributeAnchorTarget, MouseEventHandler, ReactNode } from "react";
 import { Color, SystemIcon } from "../atoms";
-type ButtonVariant = "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "text" | "danger";
-type ButtonSize = "small" | "medium" | "large";
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "text" | "danger";
+export type ButtonSize = "small" | "medium" | "large";
 type CustomButtonProps = {
     label?: ReactNode;
     Icon?: SystemIcon.Icon;
@@ -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/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import Link from \"next/link\";\nimport type {\n  ButtonHTMLAttributes,\n  HTMLAttributeAnchorTarget,\n  MouseEventHandler,\n  ReactNode,\n} from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\n\ntype ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"outline\"\n  | \"ghost\"\n  | \"text\"\n  | \"danger\";\n\ntype ButtonSize = \"small\" | \"medium\" | \"large\";\n\ntype CustomButtonProps = {\n  label?: ReactNode;\n  Icon?: SystemIcon.Icon;\n  iconRight?: boolean;\n  onClick?: MouseEventHandler<HTMLElement>;\n  type?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n  disabled?: boolean;\n  target?: HTMLAttributeAnchorTarget;\n  href?: string;\n};\n\ntype ButtonProps = {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n} & CustomButtonProps;\n\nconst Button = ({\n  variant = \"primary\",\n  size = \"medium\",\n  ...restOfProps\n}: ButtonProps) => {\n  const variantProps = VARIANT_PROPS_MAP[variant];\n  const sizeProps = SIZE_PROPS_MAP[size];\n\n  return <RawButton {...variantProps} {...sizeProps} {...restOfProps} />;\n};\n\nexport default Button;\n\ntype VariantStyleProps = {\n  defaultColor: Color.DesignColor;\n  hoverColor?: Color.DesignColor;\n  disabledColor?: Color.DesignColor;\n  defaultBackgroundColor: Color.DesignColor;\n  hoverBackgroundColor?: Color.DesignColor;\n  disabledBackgroundColor?: Color.DesignColor;\n  borderColor?: Color.DesignColor;\n  textDecoration?: string;\n};\n\nconst VARIANT_PROPS_MAP: { [variant in ButtonVariant]: VariantStyleProps } = {\n  primary: {\n    defaultColor: Color.typography.whiteHigh,\n    disabledColor: Color.typography.blackLow,\n    defaultBackgroundColor: Color.brand.grantbiiBlue,\n    hoverBackgroundColor: Color.accent.blue2,\n    disabledBackgroundColor: Color.neutral.grey3,\n  },\n  secondary: {\n    defaultColor: Color.typography.blackHigh,\n    disabledColor: Color.typography.blackLow,\n    defaultBackgroundColor: Color.brand.grantbiiYellow,\n    hoverBackgroundColor: Color.accent.yellow2,\n    disabledBackgroundColor: Color.neutral.grey3,\n  },\n  tertiary: {\n    defaultColor: Color.typography.blackHigh,\n    disabledColor: Color.typography.blackLow,\n    defaultBackgroundColor: Color.neutral.grey3,\n    hoverBackgroundColor: Color.accent.blue3,\n    disabledBackgroundColor: Color.neutral.grey3,\n  },\n  outline: {\n    defaultColor: Color.typography.blackHigh,\n    disabledColor: Color.typography.blackLow,\n    defaultBackgroundColor: \"transparent\",\n    hoverBackgroundColor: Color.accent.blue3,\n    borderColor: Color.neutral.grey2,\n    disabledBackgroundColor: Color.neutral.grey3,\n  },\n  ghost: {\n    defaultColor: Color.typography.blackHigh,\n    disabledColor: Color.typography.blackLow,\n    defaultBackgroundColor: \"transparent\",\n    hoverBackgroundColor: Color.accent.blue3,\n    disabledBackgroundColor: Color.neutral.grey3,\n  },\n  text: {\n    defaultColor: Color.typography.blackHigh,\n    hoverColor: Color.typography.blackMedium,\n    disabledColor: Color.typography.blackLow,\n    defaultBackgroundColor: \"transparent\",\n    textDecoration: \"underline\",\n  },\n  danger: {\n    defaultColor: Color.typography.whiteHigh,\n    disabledColor: Color.typography.blackLow,\n    defaultBackgroundColor: Color.accent.red1,\n    hoverBackgroundColor: Color.accent.red2,\n    disabledBackgroundColor: Color.neutral.grey3,\n  },\n};\n\ntype SizeStyleProps = {\n  width?: string;\n  height?: string;\n  padding?: string;\n  fontSize?: string;\n};\n\nconst SIZE_PROPS_MAP: { [size in ButtonSize]: SizeStyleProps } = {\n  small: {\n    height: \"40px\",\n    padding: `10px ${Spacing.px16}`, // not following spacing scale\n    fontSize: \"14px\",\n  },\n  medium: {\n    height: \"46px\",\n    padding: `12px ${Spacing.px16}`, // not following spacing scale\n    fontSize: \"16px\",\n  },\n  large: {\n    height: \"52px\",\n    padding: `14px ${Spacing.px16}`, // not following spacing scale\n    fontSize: \"18px\",\n  },\n};\n\ntype RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;\n\nexport const RawButton = ({\n  Icon,\n  iconRight = false,\n  label,\n  href,\n  target,\n  disabled,\n  type,\n  width = \"auto\",\n  height = \"46px\",\n  padding = `12px ${Spacing.px16}`,\n  fontSize = \"16px\",\n  textDecoration = \"none\",\n  defaultColor,\n  hoverColor = defaultColor,\n  disabledColor = defaultColor,\n  defaultBackgroundColor,\n  hoverBackgroundColor = defaultBackgroundColor,\n  disabledBackgroundColor = defaultBackgroundColor,\n  borderColor,\n  ...restOfProps\n}: RawButtonProps) => {\n  const isActionIcon = !!Icon && !label;\n\n  const styleProps: ButtonStyleProps = {\n    $isActionIcon: isActionIcon,\n    $width: width,\n    $height: height,\n    $padding: padding,\n    $fontSize: fontSize,\n    $textDecoration: textDecoration,\n    $defaultColor: defaultColor,\n    $hoverColor: hoverColor,\n    $disabledColor: disabledColor,\n    $defaultBackgroundColor: defaultBackgroundColor,\n    $hoverBackgroundColor: hoverBackgroundColor,\n    $disabledBackgroundColor: disabledBackgroundColor,\n    $borderColor: borderColor,\n  };\n\n  const content = (\n    <>\n      {Icon && !iconRight && <Icon size={20} />}\n      {label}\n      {Icon && iconRight && <Icon size={20} />}\n    </>\n  );\n\n  const isLink = !!href && !disabled;\n\n  return isLink ? (\n    <BaseLink {...restOfProps} {...styleProps} href={href} target={target}>\n      {content}\n    </BaseLink>\n  ) : (\n    <BaseButton\n      {...restOfProps}\n      {...styleProps}\n      disabled={disabled}\n      type={type}\n    >\n      {content}\n    </BaseButton>\n  );\n};\n\ntype ButtonStyleProps = {\n  $isActionIcon: boolean;\n  $width: string;\n  $height: string;\n  $padding: string;\n  $fontSize: string;\n  $textDecoration: string;\n  $defaultColor: Color.DesignColor;\n  $hoverColor: Color.DesignColor;\n  $disabledColor: Color.DesignColor;\n  $defaultBackgroundColor: Color.DesignColor;\n  $hoverBackgroundColor: Color.DesignColor;\n  $disabledBackgroundColor: Color.DesignColor;\n  $borderColor?: Color.DesignColor;\n};\n\nconst ButtonStyle = css<ButtonStyleProps>`\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: ${Spacing.px8};\n\n  box-sizing: border-box;\n  width: ${(props) => (props.$isActionIcon ? props.$height : props.$width)};\n  min-width: ${(props) => (props.$isActionIcon ? props.$height : \"auto\")};\n  height: ${(props) => props.$height};\n  padding: ${(props) => (props.$isActionIcon ? \"0px\" : props.$padding)};\n\n  font-weight: ${Typography.weight.medium};\n  font-size: ${(props) => props.$fontSize};\n  white-space: nowrap;\n\n  color: ${(props) => props.$defaultColor};\n  background-color: ${(props) => props.$defaultBackgroundColor};\n\n  border: ${(props) =>\n    props.$borderColor ? `1px solid ${props.$borderColor}` : \"none\"};\n  border-radius: ${Spacing.px8};\n\n  text-decoration: ${(props) => props.$textDecoration};\n\n  &:hover {\n    color: ${(props) => props.$hoverColor};\n    background-color: ${(props) => props.$hoverBackgroundColor};\n  }\n\n  &:disabled {\n    color: ${(props) => props.$disabledColor};\n    background-color: ${(props) => props.$disabledBackgroundColor};\n  }\n`;\n\nconst BaseLink = styled(Link)<ButtonStyleProps>`\n  ${ButtonStyle}\n`;\n\nconst BaseButton = styled.button<ButtonStyleProps>`\n  ${ButtonStyle}\n`;\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../core/molecules/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import Link from \"next/link\";\nimport type {\n  ButtonHTMLAttributes,\n  HTMLAttributeAnchorTarget,\n  MouseEventHandler,\n  ReactNode,\n} from \"react\";\nimport styled, { css } from \"styled-components\";\nimport { Color, Spacing, SystemIcon, Typography } from \"../atoms\";\n\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"outline\"\n  | \"ghost\"\n  | \"text\"\n  | \"danger\";\n\nexport type ButtonSize = \"small\" | \"medium\" | \"large\";\n\ntype CustomButtonProps = {\n  label?: ReactNode;\n  Icon?: SystemIcon.Icon;\n  iconRight?: boolean;\n  onClick?: MouseEventHandler<HTMLElement>;\n  type?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n  disabled?: boolean;\n  target?: HTMLAttributeAnchorTarget;\n  href?: string;\n};\n\ntype ButtonProps = {\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n} & CustomButtonProps;\n\nconst Button = ({\n  variant = \"primary\",\n  size = \"medium\",\n  ...restOfProps\n}: ButtonProps) => {\n  const variantProps = VARIANT_PROPS_MAP[variant];\n  const sizeProps = SIZE_PROPS_MAP[size];\n\n  return <RawButton {...variantProps} {...sizeProps} {...restOfProps} />;\n};\n\nexport default Button;\n\ntype VariantStyleProps = {\n  defaultColor: Color.DesignColor;\n  hoverColor?: Color.DesignColor;\n  disabledColor?: Color.DesignColor;\n  defaultBackgroundColor: Color.DesignColor;\n  hoverBackgroundColor?: Color.DesignColor;\n  disabledBackgroundColor?: Color.DesignColor;\n  borderColor?: Color.DesignColor;\n  textDecoration?: string;\n};\n\nconst VARIANT_PROPS_MAP: { [variant in ButtonVariant]: VariantStyleProps } = {\n  primary: {\n    defaultColor: Color.typography.whiteHigh,\n    disabledColor: Color.typography.blackLow,\n    defaultBackgroundColor: Color.brand.grantbiiBlue,\n    hoverBackgroundColor: Color.accent.blue2,\n    disabledBackgroundColor: Color.neutral.grey3,\n  },\n  secondary: {\n    defaultColor: Color.typography.blackHigh,\n    disabledColor: Color.typography.blackLow,\n    defaultBackgroundColor: Color.brand.grantbiiYellow,\n    hoverBackgroundColor: Color.accent.yellow2,\n    disabledBackgroundColor: Color.neutral.grey3,\n  },\n  tertiary: {\n    defaultColor: Color.typography.blackHigh,\n    disabledColor: Color.typography.blackLow,\n    defaultBackgroundColor: Color.neutral.grey3,\n    hoverBackgroundColor: Color.accent.blue3,\n    disabledBackgroundColor: Color.neutral.grey3,\n  },\n  outline: {\n    defaultColor: Color.typography.blackHigh,\n    disabledColor: Color.typography.blackLow,\n    defaultBackgroundColor: \"transparent\",\n    hoverBackgroundColor: Color.accent.blue3,\n    borderColor: Color.neutral.grey2,\n    disabledBackgroundColor: Color.neutral.grey3,\n  },\n  ghost: {\n    defaultColor: Color.typography.blackHigh,\n    disabledColor: Color.typography.blackLow,\n    defaultBackgroundColor: \"transparent\",\n    hoverBackgroundColor: Color.accent.blue3,\n    disabledBackgroundColor: Color.neutral.grey3,\n  },\n  text: {\n    defaultColor: Color.typography.blackHigh,\n    hoverColor: Color.typography.blackMedium,\n    disabledColor: Color.typography.blackLow,\n    defaultBackgroundColor: \"transparent\",\n    textDecoration: \"underline\",\n  },\n  danger: {\n    defaultColor: Color.typography.whiteHigh,\n    disabledColor: Color.typography.blackLow,\n    defaultBackgroundColor: Color.accent.red1,\n    hoverBackgroundColor: Color.accent.red2,\n    disabledBackgroundColor: Color.neutral.grey3,\n  },\n};\n\ntype SizeStyleProps = {\n  width?: string;\n  height?: string;\n  padding?: string;\n  fontSize?: string;\n};\n\nconst SIZE_PROPS_MAP: { [size in ButtonSize]: SizeStyleProps } = {\n  small: {\n    height: \"40px\",\n    padding: `10px ${Spacing.px16}`, // not following spacing scale\n    fontSize: \"14px\",\n  },\n  medium: {\n    height: \"46px\",\n    padding: `12px ${Spacing.px16}`, // not following spacing scale\n    fontSize: \"16px\",\n  },\n  large: {\n    height: \"52px\",\n    padding: `14px ${Spacing.px16}`, // not following spacing scale\n    fontSize: \"18px\",\n  },\n};\n\ntype RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;\n\nexport const RawButton = ({\n  Icon,\n  iconRight = false,\n  label,\n  href,\n  target,\n  disabled,\n  type,\n  width = \"auto\",\n  height = \"46px\",\n  padding = `12px ${Spacing.px16}`,\n  fontSize = \"16px\",\n  textDecoration = \"none\",\n  defaultColor,\n  hoverColor = defaultColor,\n  disabledColor = defaultColor,\n  defaultBackgroundColor,\n  hoverBackgroundColor = defaultBackgroundColor,\n  disabledBackgroundColor = defaultBackgroundColor,\n  borderColor,\n  ...restOfProps\n}: RawButtonProps) => {\n  const isActionIcon = !!Icon && !label;\n\n  const styleProps: ButtonStyleProps = {\n    $isActionIcon: isActionIcon,\n    $width: width,\n    $height: height,\n    $padding: padding,\n    $fontSize: fontSize,\n    $textDecoration: textDecoration,\n    $defaultColor: defaultColor,\n    $hoverColor: hoverColor,\n    $disabledColor: disabledColor,\n    $defaultBackgroundColor: defaultBackgroundColor,\n    $hoverBackgroundColor: hoverBackgroundColor,\n    $disabledBackgroundColor: disabledBackgroundColor,\n    $borderColor: borderColor,\n  };\n\n  const content = (\n    <>\n      {Icon && !iconRight && <Icon size={20} />}\n      {label}\n      {Icon && iconRight && <Icon size={20} />}\n    </>\n  );\n\n  const isLink = !!href && !disabled;\n\n  return isLink ? (\n    <BaseLink {...restOfProps} {...styleProps} href={href} target={target}>\n      {content}\n    </BaseLink>\n  ) : (\n    <BaseButton\n      {...restOfProps}\n      {...styleProps}\n      disabled={disabled}\n      type={type}\n    >\n      {content}\n    </BaseButton>\n  );\n};\n\ntype ButtonStyleProps = {\n  $isActionIcon: boolean;\n  $width: string;\n  $height: string;\n  $padding: string;\n  $fontSize: string;\n  $textDecoration: string;\n  $defaultColor: Color.DesignColor;\n  $hoverColor: Color.DesignColor;\n  $disabledColor: Color.DesignColor;\n  $defaultBackgroundColor: Color.DesignColor;\n  $hoverBackgroundColor: Color.DesignColor;\n  $disabledBackgroundColor: Color.DesignColor;\n  $borderColor?: Color.DesignColor;\n};\n\nconst ButtonStyle = css<ButtonStyleProps>`\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: ${Spacing.px8};\n\n  box-sizing: border-box;\n  width: ${(props) => (props.$isActionIcon ? props.$height : props.$width)};\n  min-width: ${(props) => (props.$isActionIcon ? props.$height : \"auto\")};\n  height: ${(props) => props.$height};\n  padding: ${(props) => (props.$isActionIcon ? \"0px\" : props.$padding)};\n\n  font-weight: ${Typography.weight.medium};\n  font-size: ${(props) => props.$fontSize};\n  white-space: nowrap;\n\n  color: ${(props) => props.$defaultColor};\n  background-color: ${(props) => props.$defaultBackgroundColor};\n\n  border: ${(props) =>\n    props.$borderColor ? `1px solid ${props.$borderColor}` : \"none\"};\n  border-radius: ${Spacing.px8};\n\n  text-decoration: ${(props) => props.$textDecoration};\n\n  &:hover {\n    color: ${(props) => props.$hoverColor};\n    background-color: ${(props) => props.$hoverBackgroundColor};\n  }\n\n  &:disabled {\n    color: ${(props) => props.$disabledColor};\n    background-color: ${(props) => props.$disabledBackgroundColor};\n  }\n`;\n\nconst BaseLink = styled(Link)<ButtonStyleProps>`\n  ${ButtonStyle}\n`;\n\nconst BaseButton = styled.button<ButtonStyleProps>`\n  ${ButtonStyle}\n`;\n"]}

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/molecules/index.d.ts

@@ -1,5 +1,5 @@
 export { default as Badge, RawBadge } from "./Badge";
-export { default as Button, RawButton } from "./Button";
+export { default as Button, RawButton, type ButtonSize, type ButtonVariant, } from "./Button";
 export { default as Checkbox } from "./Checkbox";
 export { default as Input } from "./Input";
 export { default as Overlay } from "./Overlay";

package/core/molecules/index.js

@@ -1,5 +1,5 @@
 export { default as Badge, RawBadge } from "./Badge";
-export { default as Button, RawButton } from "./Button";
+export { default as Button, RawButton, } from "./Button";
 export { default as Checkbox } from "./Checkbox";
 export { default as Input } from "./Input";
 export { default as Overlay } from "./Overlay";

package/core/molecules/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default as Badge, RawBadge } from \"./Badge\";\nexport { default as Button, RawButton } from \"./Button\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Input } from \"./Input\";\nexport { default as Overlay } from \"./Overlay\";\nexport { default as PageLoader } from \"./PageLoader\";\nexport { default as RadioButton } from \"./RadioButton\";\nexport { default as Textarea } from \"./Textarea\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,SAAS,GAGV,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default as Badge, RawBadge } from \"./Badge\";\nexport {\n  default as Button,\n  RawButton,\n  type ButtonSize,\n  type ButtonVariant,\n} from \"./Button\";\nexport { default as Checkbox } from \"./Checkbox\";\nexport { default as Input } from \"./Input\";\nexport { default as Overlay } from \"./Overlay\";\nexport { default as PageLoader } from \"./PageLoader\";\nexport { default as RadioButton } from \"./RadioButton\";\nexport { default as Textarea } from \"./Textarea\";\n"]}

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,17 @@
-import type { GrantMatchQuery } from "@grantbii/ui-core/match/entities";
+import type { ChangeEventHandler, MouseEventHandler } from "react";
+import { type ButtonVariant } from "../molecules";
+export type SearchBarSize = "small" | "medium";
 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;
+    searchButtonVariant?: ButtonVariant;
     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, searchButtonVariant, 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, searchButtonVariant = "primary", 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, { onClick: onClickSearch, disabled: disableSearch, Icon: SystemIcon.MagnifyingGlassIcon, variant: searchButtonVariant, 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, type ButtonVariant } from \"../molecules\";\n\nexport type SearchBarSize = \"small\" | \"medium\";\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  searchButtonVariant?: ButtonVariant;\n  placeholder?: string;\n  size?: SearchBarSize;\n};\n\nconst SearchBar = ({\n  queryText,\n  onChangeQueryText,\n  onClickSearch,\n  onClickReset,\n  handlePressEnter,\n  autoFocus = false,\n  disableSearch = false,\n  searchButtonVariant = \"primary\",\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        onClick={onClickSearch}\n        disabled={disableSearch}\n        Icon={SystemIcon.MagnifyingGlassIcon}\n        variant={searchButtonVariant}\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/organisms/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Dropdown, type DropdownProps } from "./Dropdown";
 export { default as FileDrop, useFileDrop } from "./FileDrop";
 export { default as Modal, useModal } from "./Modal";
-export { default as SearchBar } from "./SearchBar";
+export { default as SearchBar, type SearchBarSize } from "./SearchBar";

package/core/organisms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { default as Dropdown, type DropdownProps } from \"./Dropdown\";\nexport { default as FileDrop, useFileDrop } from \"./FileDrop\";\nexport { default as Modal, useModal } from \"./Modal\";\nexport { default as SearchBar } from \"./SearchBar\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/organisms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAsB,MAAM,YAAY,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAsB,MAAM,aAAa,CAAC","sourcesContent":["export { default as Dropdown, type DropdownProps } from \"./Dropdown\";\nexport { default as FileDrop, useFileDrop } from \"./FileDrop\";\nexport { default as Modal, useModal } from \"./Modal\";\nexport { default as SearchBar, type SearchBarSize } from \"./SearchBar\";\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":";AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AAC5E,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAClD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAW9C,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,GACD,EAAE,EAAE;IACpB,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IACxD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;IAC7D,MAAM,eAAe,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAEnE,MAAM,WAAW,GAAG,OAAO,CACzB,GAAG,EAAE,CAAC,CAAC;QACL,WAAW;QACX,iBAAiB;QACjB,SAAS;QACT,eAAe;QACf,SAAS;QACT,UAAU;KACX,CAAC,EACF;QACE,WAAW;QACX,iBAAiB;QACjB,SAAS;QACT,eAAe;QACf,SAAS;QACT,UAAU;KACX,CACF,CAAC;IAEF,OAAO,CACL,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,WAAW,YAC5C,MAAC,cAAc,eACb,MAAC,kBAAkB,eACjB,KAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,kBAAkB,EAC5B,gBAAgB,QAChB,IAAI,EAAC,OAAO,GACZ,EACF,KAAC,eAAe,IAAC,iBAAiB,EAAE,iBAAiB,GAAI,IACtC,EAEpB,WAAW,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAC,gBAAgB,KAAG,CAAC,CAAC,CAAC,mBAAK,EAE3D,SAAS,CAAC,CAAC,CAAC,CACX,KAAC,eAAe,IACd,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,GACtC,CACH,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACc,GACU,CAC9B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAOhC,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;WAO1B,KAAK,CAAC,UAAU,CAAC,SAAS;sBACf,KAAK,CAAC,OAAO,CAAC,KAAK;;oBAErB,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;;;;qBAQhC,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;;;CAOrD,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CACtC,iBAAsD,EACtD,eAA2B,EACV,EAAE;IACnB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAkB;QAC9D,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,EAAE;KACT,CAAC,CAAC;IAEH,MAAM,iBAAiB,GAAG,CAAC,QAAyB,EAAE,EAAE;QACtD,cAAc,CAAC,EAAE,GAAG,QAAQ,EAAE,CAAC,CAAC;QAEhC,IAAI,qBAAqB,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QAC9B,CAAC;aAAM,CAAC;YACN,eAAe,EAAE,CAAC;QACpB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC;AAC5C,CAAC,CAAC","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"]}