@grantbii/design-system 1.20.2 → 1.20.3

package/core/molecules/Button.d.ts

@@ -19,6 +19,7 @@ type VariantStyleProps = {
     textDecoration?: string;
 };
 type SizeStyleProps = {
+    actionIconSize: string;
     height: string;
     padding: string;
     fontSize: string;
@@ -34,4 +35,4 @@ type CustomButtonProps = {
     href?: string;
 };
 type RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;
-export declare const RawButton: ({ Icon, iconRight, label, href, target, disabled, type, 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, actionIconSize, height, padding, fontSize, textDecoration, defaultColor, hoverColor, disabledColor, defaultBackgroundColor, hoverBackgroundColor, disabledBackgroundColor, borderColor, ...restOfProps }: RawButtonProps) => import("react/jsx-runtime").JSX.Element;

package/core/molecules/Button.js

@@ -62,25 +62,29 @@ const VARIANT_PROPS_MAP = {
 };
 const SIZE_PROPS_MAP = {
     small: {
+        actionIconSize: "40px",
         height: "40px",
         padding: "10px", // not following spacing scale
         fontSize: "14px",
     },
     medium: {
+        actionIconSize: "44px",
         height: "46px",
         padding: "12px", // not following spacing scale
         fontSize: "16px",
     },
     large: {
+        actionIconSize: "48px",
         height: "52px",
         padding: "14px", // not following spacing scale
         fontSize: "18px",
     },
 };
-export const RawButton = ({ Icon, iconRight = false, label, href, target, disabled, type, height, padding, fontSize, textDecoration = "none", defaultColor, hoverColor = defaultColor, disabledColor = defaultColor, defaultBackgroundColor, hoverBackgroundColor = defaultBackgroundColor, disabledBackgroundColor = defaultBackgroundColor, borderColor, ...restOfProps }) => {
+export const RawButton = ({ Icon, iconRight = false, label, href, target, disabled, type, actionIconSize, height, padding, fontSize, textDecoration = "none", defaultColor, hoverColor = defaultColor, disabledColor = defaultColor, defaultBackgroundColor, hoverBackgroundColor = defaultBackgroundColor, disabledBackgroundColor = defaultBackgroundColor, borderColor, ...restOfProps }) => {
     const isActionIcon = !!Icon && !label;
     const styleProps = {
         $isActionIcon: isActionIcon,
+        $actionIconSize: actionIconSize,
         $height: height,
         $fontSize: fontSize,
         $padding: padding,
@@ -105,8 +109,8 @@ const ButtonStyle = css `
   gap: ${Spacing.px8};
 
   box-sizing: border-box;
-  width: ${(props) => (props.$isActionIcon ? props.$height : "auto")};
-  height: ${(props) => props.$height};
+  width: ${(props) => (props.$isActionIcon ? props.$actionIconSize : "auto")};
+  height: ${(props) => props.$isActionIcon ? props.$actionIconSize : props.$height};
   padding: ${(props) => props.$isActionIcon ? props.$padding : `${props.$padding} ${Spacing.px16}`};
 
   font-weight: ${Typography.weight.medium};

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 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  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\", // not following spacing scale\n    fontSize: \"14px\",\n  },\n  medium: {\n    height: \"46px\",\n    padding: \"12px\", // not following spacing scale\n    fontSize: \"16px\",\n  },\n  large: {\n    height: \"52px\",\n    padding: \"14px\", // not following spacing scale\n    fontSize: \"18px\",\n  },\n};\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 RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;\n\nexport const RawButton = ({\n  Icon,\n  iconRight = false,\n  label,\n  href,\n  target,\n  disabled,\n  type,\n  height,\n  padding,\n  fontSize,\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    $height: height,\n    $fontSize: fontSize,\n    $padding: padding,\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  $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 : \"auto\")};\n  height: ${(props) => props.$height};\n  padding: ${(props) =>\n    props.$isActionIcon ? props.$padding : `${props.$padding} ${Spacing.px16}`};\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\ntype ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"tertiary\"\n  | \"outline\"\n  | \"ghost\"\n  | \"text\"\n  | \"danger\";\n\ntype ButtonSize = \"small\" | \"medium\" | \"large\";\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  actionIconSize: string;\n  height: string;\n  padding: string;\n  fontSize: string;\n};\n\nconst SIZE_PROPS_MAP: { [size in ButtonSize]: SizeStyleProps } = {\n  small: {\n    actionIconSize: \"40px\",\n    height: \"40px\",\n    padding: \"10px\", // not following spacing scale\n    fontSize: \"14px\",\n  },\n  medium: {\n    actionIconSize: \"44px\",\n    height: \"46px\",\n    padding: \"12px\", // not following spacing scale\n    fontSize: \"16px\",\n  },\n  large: {\n    actionIconSize: \"48px\",\n    height: \"52px\",\n    padding: \"14px\", // not following spacing scale\n    fontSize: \"18px\",\n  },\n};\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 RawButtonProps = CustomButtonProps & VariantStyleProps & SizeStyleProps;\n\nexport const RawButton = ({\n  Icon,\n  iconRight = false,\n  label,\n  href,\n  target,\n  disabled,\n  type,\n  actionIconSize,\n  height,\n  padding,\n  fontSize,\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    $actionIconSize: actionIconSize,\n    $height: height,\n    $fontSize: fontSize,\n    $padding: padding,\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  $actionIconSize: 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.$actionIconSize : \"auto\")};\n  height: ${(props) =>\n    props.$isActionIcon ? props.$actionIconSize : props.$height};\n  padding: ${(props) =>\n    props.$isActionIcon ? props.$padding : `${props.$padding} ${Spacing.px16}`};\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/organisms/SearchBar.d.ts

@@ -5,6 +5,8 @@ type SearchBarProps = {
     queryText: string;
     updateQueryText: (newText: string) => void;
     textSearchCallback?: () => void;
+    size?: SearchBarSize;
 };
-declare const SearchBar: ({ activeQuery, updateActiveQuery, queryText, updateQueryText, textSearchCallback, }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
+type SearchBarSize = "small" | "medium";
+declare const SearchBar: ({ activeQuery, updateActiveQuery, queryText, updateQueryText, textSearchCallback, size, }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
 export default SearchBar;

package/core/organisms/SearchBar.js

@@ -2,7 +2,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { Color, Responsive, SystemIcon } from "../atoms";
 import { Button } from "../molecules";
-const SearchBar = ({ activeQuery, updateActiveQuery, queryText, updateQueryText, textSearchCallback, }) => {
+const SearchBar = ({ activeQuery, updateActiveQuery, queryText, updateQueryText, textSearchCallback, size = "medium", }) => {
+    const { height, fontSize } = SIZE_PROPS_MAP[size];
     const resetSearch = () => {
         updateQueryText("");
         updateActiveQuery({ files: activeQuery.files, text: "" });
@@ -11,9 +12,19 @@ const SearchBar = ({ activeQuery, updateActiveQuery, queryText, updateQueryText,
         textSearchCallback?.();
         updateActiveQuery({ files: activeQuery.files, text: queryText });
     };
-    return (_jsxs(BaseSearchBar, { children: [_jsxs(TextSearchArea, { "$hasQueryText": queryText !== "", children: [_jsx(TextInput, { queryText: queryText, updateQueryText: updateQueryText, executeSearch: executeSearch }), queryText === "" ? (_jsx(ResetButtonPlaceholder, {})) : (_jsx(ResetButton, { resetSearch: resetSearch }))] }), _jsx(Button, { Icon: SystemIcon.MagnifyingGlassIcon, onClick: executeSearch, size: "small" })] }));
+    return (_jsxs(BaseSearchBar, { children: [_jsxs(SearchArea, { "$height": height, "$hasQueryText": queryText !== "", children: [_jsx(TextInput, { queryText: queryText, updateQueryText: updateQueryText, executeSearch: executeSearch, fontSize: fontSize }), queryText === "" ? (_jsx(ResetButtonPlaceholder, {})) : (_jsx(ResetButton, { resetSearch: resetSearch }))] }), _jsx(Button, { Icon: SystemIcon.MagnifyingGlassIcon, onClick: executeSearch, size: size })] }));
 };
 export default SearchBar;
+const SIZE_PROPS_MAP = {
+    small: {
+        height: "40px",
+        fontSize: "12px",
+    },
+    medium: {
+        height: "44px",
+        fontSize: "14px",
+    },
+};
 const BaseSearchBar = styled.div `
   display: flex;
   align-items: center;
@@ -30,43 +41,45 @@ const BaseSearchBar = styled.div `
     border-radius: 12px;
   }
 `;
-const TextSearchArea = styled.div `
+const SearchArea = styled.div `
   display: flex;
   align-items: center;
 
-  height: 40px;
+  box-sizing: border-box;
+  height: ${(props) => props.$height};
   width: 100%;
 
   background-color: ${(props) => props.$hasQueryText ? Color.neutral.white : Color.neutral.grey4};
-  border: 1px solid
+  border: 0.5px solid
     ${(props) => props.$hasQueryText ? Color.accent.yellow1 : Color.neutral.grey2};
   border-radius: 8px;
 
   &:focus-within {
     background-color: ${Color.neutral.white};
-    border: 1px solid ${Color.accent.yellow1};
+    border: 0.5px solid ${Color.accent.yellow1};
   }
 `;
-const TextInput = ({ queryText, updateQueryText, executeSearch, }) => {
+const TextInput = ({ queryText, updateQueryText, executeSearch, fontSize, }) => {
     const onKeyDown = (event) => {
         if (event.key === "Enter" && !event.repeat) {
             event.preventDefault();
             executeSearch();
         }
     };
-    return (_jsx(BaseTextInput, { value: queryText, onChange: (event) => updateQueryText(event.target.value), onKeyDown: onKeyDown, placeholder: "Search grant or describe your project" }));
+    return (_jsx(BaseTextInput, { value: queryText, placeholder: "Search grant or describe your project", onChange: (event) => updateQueryText(event.target.value), onKeyDown: onKeyDown, "$fontSize": fontSize }));
 };
 const BaseTextInput = styled.input `
   width: 100%;
   margin-left: 16px;
 
+  font-size: ${(props) => props.$fontSize};
   text-overflow: ellipsis;
 
   background-color: transparent;
   outline: none;
   border: none;
 `;
-const ResetButton = ({ resetSearch }) => (_jsx(BaseResetButton, { type: "button", onClick: resetSearch, children: _jsx(SystemIcon.XIcon, { size: 14, color: Color.neutral.black }) }));
+const ResetButton = ({ resetSearch }) => (_jsx(BaseResetButton, { onClick: resetSearch, type: "button", children: _jsx(SystemIcon.XIcon, { size: 14, color: Color.neutral.black }) }));
 const BaseResetButton = styled.button `
   display: flex;
   align-items: center;

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  textSearchCallback?: () => void;\n};\n\nconst SearchBar = ({\n  activeQuery,\n  updateActiveQuery,\n  queryText,\n  updateQueryText,\n  textSearchCallback,\n}: SearchBarProps) => {\n  const resetSearch = () => {\n    updateQueryText(\"\");\n    updateActiveQuery({ files: activeQuery.files, text: \"\" });\n  };\n\n  const executeSearch = () => {\n    textSearchCallback?.();\n    updateActiveQuery({ files: activeQuery.files, text: queryText });\n  };\n\n  return (\n    <BaseSearchBar>\n      <TextSearchArea $hasQueryText={queryText !== \"\"}>\n        <TextInput\n          queryText={queryText}\n          updateQueryText={updateQueryText}\n          executeSearch={executeSearch}\n        />\n\n        {queryText === \"\" ? (\n          <ResetButtonPlaceholder />\n        ) : (\n          <ResetButton resetSearch={resetSearch} />\n        )}\n      </TextSearchArea>\n\n      <Button\n        Icon={SystemIcon.MagnifyingGlassIcon}\n        onClick={executeSearch}\n        size=\"small\"\n      />\n    </BaseSearchBar>\n  );\n};\n\nexport default SearchBar;\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.WIDTH_BREAKPOINTS.laptop}) {\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    border-radius: 12px;\n  }\n`;\n\nconst TextSearchArea = styled.div<{ $hasQueryText: boolean }>`\n  display: flex;\n  align-items: center;\n\n  height: 40px;\n  width: 100%;\n\n  background-color: ${(props) =>\n    props.$hasQueryText ? Color.neutral.white : Color.neutral.grey4};\n  border: 1px 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: 1px solid ${Color.accent.yellow1};\n  }\n`;\n\ntype TextInputProps = {\n  queryText: string;\n  updateQueryText: (newText: string) => void;\n  executeSearch: () => void;\n};\n\nconst TextInput = ({\n  queryText,\n  updateQueryText,\n  executeSearch,\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      onChange={(event) => updateQueryText(event.target.value)}\n      onKeyDown={onKeyDown}\n      placeholder=\"Search grant or describe your project\"\n    />\n  );\n};\n\nconst BaseTextInput = styled.input`\n  width: 100%;\n  margin-left: 16px;\n\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 type=\"button\" onClick={resetSearch}>\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 { 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  textSearchCallback?: () => void;\n  size?: SearchBarSize;\n};\n\ntype SearchBarSize = \"small\" | \"medium\";\n\nconst SearchBar = ({\n  activeQuery,\n  updateActiveQuery,\n  queryText,\n  updateQueryText,\n  textSearchCallback,\n  size = \"medium\",\n}: SearchBarProps) => {\n  const { height, fontSize } = SIZE_PROPS_MAP[size];\n\n  const resetSearch = () => {\n    updateQueryText(\"\");\n    updateActiveQuery({ files: activeQuery.files, text: \"\" });\n  };\n\n  const executeSearch = () => {\n    textSearchCallback?.();\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          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.WIDTH_BREAKPOINTS.laptop}) {\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.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  fontSize: string;\n};\n\nconst TextInput = ({\n  queryText,\n  updateQueryText,\n  executeSearch,\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=\"Search grant or describe your project\"\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"]}

package/core/templates/GrantMatch/index.js

@@ -27,7 +27,7 @@ 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, textSearchCallback: textSearchCallback }), _jsx(OpenModalButton, { openModalCallback: openModalCallback })] }), activeQuery.files.length > 0 ? _jsx(ActiveQueryFiles, {}) : _jsx(_Fragment, {}), showModal ? (_jsx(GrantMatchModal, { findGrantsCallback: findGrantsCallback, closeModalCallback: closeModalCallback })) : (_jsx(_Fragment, {}))] }) }));
+    return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsxs(SearchBarContainer, { children: [_jsx(SearchBar, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery, queryText: queryText, updateQueryText: updateQueryText, textSearchCallback: textSearchCallback, 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 `

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            textSearchCallback={textSearchCallback}\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.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 8px;\n    padding: 0px;\n\n    box-shadow: none;\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.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 } 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            textSearchCallback={textSearchCallback}\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.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 8px;\n    padding: 0px;\n\n    box-shadow: none;\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.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"]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@grantbii/design-system",
   "author": "Grantbii",
   "license": "UNLICENSED",
-  "version": "1.20.2",
+  "version": "1.20.3",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

package/stories/molecules/Button.stories.d.ts

@@ -23,7 +23,9 @@ export declare const Large: Story;
 export declare const TextOnly: Story;
 export declare const LeftIcon: Story;
 export declare const RightIcon: Story;
-export declare const ActionIcon: Story;
+export declare const SmallActionIcon: Story;
+export declare const MediumActionIcon: Story;
+export declare const LargeActionIcon: Story;
 export declare const WithHref: Story;
 export declare const HrefDisabled: Story;
 export declare const CustomLabel: Story;

package/stories/molecules/Button.stories.js

@@ -149,8 +149,14 @@ export const RightIcon = {
         iconRight: true,
     },
 };
-export const ActionIcon = {
-    args: { onClick, Icon: SystemIcon.PlusIcon },
+export const SmallActionIcon = {
+    args: { onClick, Icon: SystemIcon.PlusIcon, size: "small" },
+};
+export const MediumActionIcon = {
+    args: { onClick, Icon: SystemIcon.PlusIcon, size: "medium" },
+};
+export const LargeActionIcon = {
+    args: { onClick, Icon: SystemIcon.PlusIcon, size: "large" },
 };
 export const WithHref = {
     args: {

package/stories/molecules/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAGhD,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;AAE9C,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,UAAU,CAAC,QAAQ;KAC1B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,UAAU,CAAC,QAAQ;QACzB,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,WAAW;QAClB,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,UAAU,CAAC,QAAQ;KAC1B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,WAAW;QAClB,OAAO,EAAE,WAAW;QACpB,IAAI,EAAE,UAAU,CAAC,QAAQ;QACzB,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,UAAU;QACjB,OAAO,EAAE,UAAU;QACnB,IAAI,EAAE,UAAU,CAAC,QAAQ;KAC1B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,UAAU;QACjB,OAAO,EAAE,UAAU;QACnB,IAAI,EAAE,UAAU,CAAC,QAAQ;QACzB,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,UAAU,CAAC,QAAQ;KAC1B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,SAAS;QAChB,OAAO,EAAE,SAAS;QAClB,IAAI,EAAE,UAAU,CAAC,QAAQ;QACzB,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,UAAU,CAAC,QAAQ;KAC1B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,UAAU,CAAC,QAAQ;QACzB,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,UAAU,CAAC,QAAQ,EAAE;CAC7E,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,MAAM;QACf,IAAI,EAAE,UAAU,CAAC,QAAQ;QACzB,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,QAAQ;QACf,OAAO,EAAE,QAAQ;QACjB,IAAI,EAAE,UAAU,CAAC,QAAQ;KAC1B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,QAAQ;QACf,OAAO,EAAE,QAAQ;QACjB,IAAI,EAAE,UAAU,CAAC,QAAQ;QACzB,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,CAAC,QAAQ,EAAE;CAC5E,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,CAAC,QAAQ,EAAE;CAC9E,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,CAAC,QAAQ,EAAE;CAC5E,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,UAAU,CAAC,QAAQ;QACzB,SAAS,EAAE,KAAK;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,UAAU,CAAC,QAAQ;QACzB,SAAS,EAAE,IAAI;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,CAAC,QAAQ,EAAE;CAC7C,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,oBAAoB;QAC3B,IAAI,EAAE,sBAAsB;QAC5B,MAAM,EAAE,QAAQ;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,KAAK,EAAE,oBAAoB;QAC3B,IAAI,EAAE,sBAAsB;QAC5B,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,OAAO;QACP,KAAK,EAAE,CACL,2BACE,KAAC,KAAK,CAAC,EAAE,IAAC,KAAK,EAAE,EAAE,GAAI,kBAClB,CACR;QACD,OAAO,EAAE,SAAS;KACnB;CACF,CAAC","sourcesContent":["import { Button, SystemIcon, Flags } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Button> = {\n  title: \"Molecules/Button\",\n  component: Button,\n  tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst onClick = () => alert(\"Button Clicked\");\n\nexport const Primary: Story = {\n  args: {\n    onClick,\n    label: \"Primary\",\n    variant: \"primary\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledPrimary: Story = {\n  args: {\n    onClick,\n    label: \"Primary\",\n    variant: \"primary\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Secondary: Story = {\n  args: {\n    onClick,\n    label: \"Secondary\",\n    variant: \"secondary\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledSecondary: Story = {\n  args: {\n    onClick,\n    label: \"Secondary\",\n    variant: \"secondary\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Tertiary: Story = {\n  args: {\n    onClick,\n    label: \"Tertiary\",\n    variant: \"tertiary\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledTertiary: Story = {\n  args: {\n    onClick,\n    label: \"Tertiary\",\n    variant: \"tertiary\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Outline: Story = {\n  args: {\n    onClick,\n    label: \"Outline\",\n    variant: \"outline\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledOutline: Story = {\n  args: {\n    onClick,\n    label: \"Outline\",\n    variant: \"outline\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Ghost: Story = {\n  args: {\n    onClick,\n    label: \"Ghost\",\n    variant: \"ghost\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledGhost: Story = {\n  args: {\n    onClick,\n    label: \"Ghost\",\n    variant: \"ghost\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Text: Story = {\n  args: { onClick, label: \"Text\", variant: \"text\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const DisabledText: Story = {\n  args: {\n    onClick,\n    label: \"Text\",\n    variant: \"text\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Danger: Story = {\n  args: {\n    onClick,\n    label: \"Danger\",\n    variant: \"danger\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledDanger: Story = {\n  args: {\n    onClick,\n    label: \"Danger\",\n    variant: \"danger\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Small: Story = {\n  args: { onClick, label: \"Small\", size: \"small\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const Medium: Story = {\n  args: { onClick, label: \"Medium\", size: \"medium\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const Large: Story = {\n  args: { onClick, label: \"Large\", size: \"large\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const TextOnly: Story = {\n  args: { onClick, label: \"Text Only\" },\n};\n\nexport const LeftIcon: Story = {\n  args: {\n    onClick,\n    label: \"Left Icon\",\n    Icon: SystemIcon.PlusIcon,\n    iconRight: false,\n  },\n};\n\nexport const RightIcon: Story = {\n  args: {\n    onClick,\n    label: \"Right Icon\",\n    Icon: SystemIcon.PlusIcon,\n    iconRight: true,\n  },\n};\n\nexport const ActionIcon: Story = {\n  args: { onClick, Icon: SystemIcon.PlusIcon },\n};\n\nexport const WithHref: Story = {\n  args: {\n    label: \"Opens grantbii.com\",\n    href: \"https://grantbii.com\",\n    target: \"_blank\",\n  },\n};\n\nexport const HrefDisabled: Story = {\n  args: {\n    label: \"Opens grantbii.com\",\n    href: \"https://grantbii.com\",\n    target: \"_blank\",\n    disabled: true,\n  },\n};\n\nexport const CustomLabel: Story = {\n  args: {\n    onClick,\n    label: (\n      <span>\n        <Flags.SG width={20} /> Singapore\n      </span>\n    ),\n    variant: \"outline\",\n  },\n};\n"]}
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../stories/molecules/Button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Button, SystemIcon, Flags } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Button> = {\n  title: \"Molecules/Button\",\n  component: Button,\n  tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst onClick = () => alert(\"Button Clicked\");\n\nexport const Primary: Story = {\n  args: {\n    onClick,\n    label: \"Primary\",\n    variant: \"primary\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledPrimary: Story = {\n  args: {\n    onClick,\n    label: \"Primary\",\n    variant: \"primary\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Secondary: Story = {\n  args: {\n    onClick,\n    label: \"Secondary\",\n    variant: \"secondary\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledSecondary: Story = {\n  args: {\n    onClick,\n    label: \"Secondary\",\n    variant: \"secondary\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Tertiary: Story = {\n  args: {\n    onClick,\n    label: \"Tertiary\",\n    variant: \"tertiary\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledTertiary: Story = {\n  args: {\n    onClick,\n    label: \"Tertiary\",\n    variant: \"tertiary\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Outline: Story = {\n  args: {\n    onClick,\n    label: \"Outline\",\n    variant: \"outline\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledOutline: Story = {\n  args: {\n    onClick,\n    label: \"Outline\",\n    variant: \"outline\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Ghost: Story = {\n  args: {\n    onClick,\n    label: \"Ghost\",\n    variant: \"ghost\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledGhost: Story = {\n  args: {\n    onClick,\n    label: \"Ghost\",\n    variant: \"ghost\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Text: Story = {\n  args: { onClick, label: \"Text\", variant: \"text\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const DisabledText: Story = {\n  args: {\n    onClick,\n    label: \"Text\",\n    variant: \"text\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Danger: Story = {\n  args: {\n    onClick,\n    label: \"Danger\",\n    variant: \"danger\",\n    Icon: SystemIcon.PlusIcon,\n  },\n};\n\nexport const DisabledDanger: Story = {\n  args: {\n    onClick,\n    label: \"Danger\",\n    variant: \"danger\",\n    Icon: SystemIcon.PlusIcon,\n    disabled: true,\n  },\n};\n\nexport const Small: Story = {\n  args: { onClick, label: \"Small\", size: \"small\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const Medium: Story = {\n  args: { onClick, label: \"Medium\", size: \"medium\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const Large: Story = {\n  args: { onClick, label: \"Large\", size: \"large\", Icon: SystemIcon.PlusIcon },\n};\n\nexport const TextOnly: Story = {\n  args: { onClick, label: \"Text Only\" },\n};\n\nexport const LeftIcon: Story = {\n  args: {\n    onClick,\n    label: \"Left Icon\",\n    Icon: SystemIcon.PlusIcon,\n    iconRight: false,\n  },\n};\n\nexport const RightIcon: Story = {\n  args: {\n    onClick,\n    label: \"Right Icon\",\n    Icon: SystemIcon.PlusIcon,\n    iconRight: true,\n  },\n};\n\nexport const SmallActionIcon: Story = {\n  args: { onClick, Icon: SystemIcon.PlusIcon, size: \"small\" },\n};\n\nexport const MediumActionIcon: Story = {\n  args: { onClick, Icon: SystemIcon.PlusIcon, size: \"medium\" },\n};\n\nexport const LargeActionIcon: Story = {\n  args: { onClick, Icon: SystemIcon.PlusIcon, size: \"large\" },\n};\n\nexport const WithHref: Story = {\n  args: {\n    label: \"Opens grantbii.com\",\n    href: \"https://grantbii.com\",\n    target: \"_blank\",\n  },\n};\n\nexport const HrefDisabled: Story = {\n  args: {\n    label: \"Opens grantbii.com\",\n    href: \"https://grantbii.com\",\n    target: \"_blank\",\n    disabled: true,\n  },\n};\n\nexport const CustomLabel: Story = {\n  args: {\n    onClick,\n    label: (\n      <span>\n        <Flags.SG width={20} /> Singapore\n      </span>\n    ),\n    variant: \"outline\",\n  },\n};\n"]}

package/stories/organisms/SearchBar.stories.d.ts

@@ -3,4 +3,5 @@ import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 declare const meta: Meta<typeof SearchBar>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Default: Story;
+export declare const Small: Story;
+export declare const Medium: Story;

package/stories/organisms/SearchBar.stories.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SearchBar } from "@/.";
 import { useState } from "react";
-const SearchBarExample = () => {
+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 }));
+    return (_jsx(SearchBar, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery, queryText: queryText, updateQueryText: updateQueryText, size: size }));
 };
 const emptyQuery = {
     text: "",
@@ -21,7 +21,10 @@ const meta = {
     },
 };
 export default meta;
-export const Default = {
-    args: {},
+export const Small = {
+    args: { size: "small" },
+};
+export const Medium = {
+    args: { size: "medium" },
 };
 //# sourceMappingURL=SearchBar.stories.js.map

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;AAEjC,MAAM,gBAAgB,GAAG,GAAG,EAAE;IAC5B,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,GAChC,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,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,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\nconst SearchBarExample = () => {\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    />\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 Default: Story = {\n  args: {},\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;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"]}