@grantbii/design-system 1.26.0 → 1.28.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/TallyModal.d.ts

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

package/core/archive/TallyModal.js

@@ -1,12 +1,46 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Modal from "../organisms/Modal";
-const TallyModal = ({ tallyId, prefilledFieldsQueryParams, ...modalProps }) => (_jsx(Modal, { ...modalProps, content: _jsx("iframe", { src: constructIframeSrc(tallyId, prefilledFieldsQueryParams), loading: "lazy", title: "Tally Modal" }), width: "640px", height: "600px" }));
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { Color, Spacing, Typography } from "../atoms";
+import { applyTypography } from "../integrations";
+import { Button } from "../molecules";
+import { Modal } from "../organisms";
+const TallyModal = ({ header, tallyId, prefilledFieldsQueryParams, onClickClose, }) => (_jsxs(Modal, { width: "640px", height: "600px", children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: _jsx(ModalIframe, { src: constructIframeSrc(tallyId, prefilledFieldsQueryParams), loading: "lazy", title: "Tally Modal" }) }), _jsx(ModalFooter, { children: _jsx(Button, { label: "Close", onClick: onClickClose, variant: "tertiary", size: "small" }) })] }));
 export default TallyModal;
+const ModalHeader = styled.div `
+  margin-bottom: ${Spacing.px12};
+  padding: ${Spacing.px12} ${Spacing.px20};
+
+  border-bottom: 1px solid ${Color.neutral.grey3};
+
+  ${applyTypography(Typography.subheading2Medium)}
+`;
+const ModalBody = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  overflow-y: auto;
+`;
+const ModalIframe = styled.iframe `
+  width: 100%;
+  height: 100%;
+  min-height: ${Spacing.px100};
+
+  padding: ${Spacing.px4} ${Spacing.px20};
+  border: none;
+`;
+const ModalFooter = styled.div `
+  display: flex;
+  justify-content: space-between;
+  gap: ${Spacing.px12};
+
+  padding: ${Spacing.px16} ${Spacing.px20};
+`;
 const constructIframeSrc = (tallyId, prefilledFieldsQueryParams) => {
     const queryParams = prefilledFieldsQueryParams
         ? `&${prefilledFieldsQueryParams}`
         : "";
-    return `https://tally.so/embed/${tallyId}?${TALLY_QUERIES}${queryParams}`;
+    return `https://tally.so/embed/${tallyId}?${tallyQueryParams}${queryParams}`;
 };
-const TALLY_QUERIES = "alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=0";
+const tallyQueryParams = "alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=0";
 //# sourceMappingURL=TallyModal.js.map

package/core/archive/TallyModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"TallyModal.js","sourceRoot":"","sources":["../../../core/archive/TallyModal.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,MAAM,oBAAoB,CAAC;AASvC,MAAM,UAAU,GAAG,CAAC,EAClB,OAAO,EACP,0BAA0B,EAC1B,GAAG,UAAU,EACG,EAAE,EAAE,CAAC,CACrB,KAAC,KAAK,OACA,UAAU,EACd,OAAO,EACL,iBACE,GAAG,EAAE,kBAAkB,CAAC,OAAO,EAAE,0BAA0B,CAAC,EAC5D,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,aAAa,GACnB,EAEJ,KAAK,EAAC,OAAO,EACb,MAAM,EAAC,OAAO,GACd,CACH,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,kBAAkB,GAAG,CACzB,OAAe,EACf,0BAAmC,EACnC,EAAE;IACF,MAAM,WAAW,GAAG,0BAA0B;QAC5C,CAAC,CAAC,IAAI,0BAA0B,EAAE;QAClC,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,0BAA0B,OAAO,IAAI,aAAa,GAAG,WAAW,EAAE,CAAC;AAC5E,CAAC,CAAC;AAEF,MAAM,aAAa,GACjB,iEAAiE,CAAC","sourcesContent":["import type { MouseEventHandler, ReactNode } from \"react\";\nimport Modal from \"../organisms/Modal\";\n\ntype TallyModalProps = {\n  header?: ReactNode;\n  tallyId: string;\n  prefilledFieldsQueryParams?: string;\n  onClickClose: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst TallyModal = ({\n  tallyId,\n  prefilledFieldsQueryParams,\n  ...modalProps\n}: TallyModalProps) => (\n  <Modal\n    {...modalProps}\n    content={\n      <iframe\n        src={constructIframeSrc(tallyId, prefilledFieldsQueryParams)}\n        loading=\"lazy\"\n        title=\"Tally Modal\"\n      />\n    }\n    width=\"640px\"\n    height=\"600px\"\n  />\n);\n\nexport default TallyModal;\n\nconst constructIframeSrc = (\n  tallyId: string,\n  prefilledFieldsQueryParams?: string,\n) => {\n  const queryParams = prefilledFieldsQueryParams\n    ? `&${prefilledFieldsQueryParams}`\n    : \"\";\n\n  return `https://tally.so/embed/${tallyId}?${TALLY_QUERIES}${queryParams}`;\n};\n\nconst TALLY_QUERIES =\n  \"alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=0\";\n"]}
+{"version":3,"file":"TallyModal.js","sourceRoot":"","sources":["../../../core/archive/TallyModal.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AASrC,MAAM,UAAU,GAAG,CAAC,EAClB,MAAM,EACN,OAAO,EACP,0BAA0B,EAC1B,YAAY,GACI,EAAE,EAAE,CAAC,CACrB,MAAC,KAAK,IAAC,KAAK,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,aAChC,MAAM,CAAC,CAAC,CAAC,KAAC,WAAW,cAAE,MAAM,GAAe,CAAC,CAAC,CAAC,mBAAK,EAErD,KAAC,SAAS,cACR,KAAC,WAAW,IACV,GAAG,EAAE,kBAAkB,CAAC,OAAO,EAAE,0BAA0B,CAAC,EAC5D,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,aAAa,GACnB,GACQ,EAEZ,KAAC,WAAW,cACV,KAAC,MAAM,IACL,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,YAAY,EACrB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,GACZ,GACU,IACR,CACT,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;mBACX,OAAO,CAAC,IAAI;aAClB,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI;;6BAEZ,KAAK,CAAC,OAAO,CAAC,KAAK;;IAE5C,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC;CAChD,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAM3B,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAA;;;gBAGjB,OAAO,CAAC,KAAK;;aAEhB,OAAO,CAAC,GAAG,IAAI,OAAO,CAAC,IAAI;;CAEvC,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;SAGrB,OAAO,CAAC,IAAI;;aAER,OAAO,CAAC,IAAI,IAAI,OAAO,CAAC,IAAI;CACxC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CACzB,OAAe,EACf,0BAAmC,EACnC,EAAE;IACF,MAAM,WAAW,GAAG,0BAA0B;QAC5C,CAAC,CAAC,IAAI,0BAA0B,EAAE;QAClC,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,0BAA0B,OAAO,IAAI,gBAAgB,GAAG,WAAW,EAAE,CAAC;AAC/E,CAAC,CAAC;AAEF,MAAM,gBAAgB,GACpB,iEAAiE,CAAC","sourcesContent":["import type { MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Spacing, Typography } from \"../atoms\";\nimport { applyTypography } from \"../integrations\";\nimport { Button } from \"../molecules\";\nimport { Modal } from \"../organisms\";\n\ntype TallyModalProps = {\n  header?: ReactNode;\n  tallyId: string;\n  prefilledFieldsQueryParams?: string;\n  onClickClose: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst TallyModal = ({\n  header,\n  tallyId,\n  prefilledFieldsQueryParams,\n  onClickClose,\n}: TallyModalProps) => (\n  <Modal width=\"640px\" height=\"600px\">\n    {header ? <ModalHeader>{header}</ModalHeader> : <></>}\n\n    <ModalBody>\n      <ModalIframe\n        src={constructIframeSrc(tallyId, prefilledFieldsQueryParams)}\n        loading=\"lazy\"\n        title=\"Tally Modal\"\n      />\n    </ModalBody>\n\n    <ModalFooter>\n      <Button\n        label=\"Close\"\n        onClick={onClickClose}\n        variant=\"tertiary\"\n        size=\"small\"\n      />\n    </ModalFooter>\n  </Modal>\n);\n\nexport default TallyModal;\n\nconst ModalHeader = styled.div`\n  margin-bottom: ${Spacing.px12};\n  padding: ${Spacing.px12} ${Spacing.px20};\n\n  border-bottom: 1px solid ${Color.neutral.grey3};\n\n  ${applyTypography(Typography.subheading2Medium)}\n`;\n\nconst ModalBody = styled.div`\n  display: flex;\n  flex-direction: column;\n\n  height: 100%;\n  overflow-y: auto;\n`;\n\nconst ModalIframe = styled.iframe`\n  width: 100%;\n  height: 100%;\n  min-height: ${Spacing.px100};\n\n  padding: ${Spacing.px4} ${Spacing.px20};\n  border: none;\n`;\n\nconst ModalFooter = styled.div`\n  display: flex;\n  justify-content: space-between;\n  gap: ${Spacing.px12};\n\n  padding: ${Spacing.px16} ${Spacing.px20};\n`;\n\nconst constructIframeSrc = (\n  tallyId: string,\n  prefilledFieldsQueryParams?: string,\n) => {\n  const queryParams = prefilledFieldsQueryParams\n    ? `&${prefilledFieldsQueryParams}`\n    : \"\";\n\n  return `https://tally.so/embed/${tallyId}?${tallyQueryParams}${queryParams}`;\n};\n\nconst tallyQueryParams =\n  \"alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=0\";\n"]}

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;

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":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAO7B,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AA6BlE,MAAM,MAAM,GAAG,CAAC,EACd,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,GAAG,WAAW,EACF,EAAE,EAAE;IAChB,MAAM,YAAY,GAAG,iBAAiB,CAAC,OAAO,CAAC,CAAC;IAChD,MAAM,SAAS,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;IAEvC,OAAO,KAAC,SAAS,OAAK,YAAY,KAAM,SAAS,KAAM,WAAW,GAAI,CAAC;AACzE,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC;AAatB,MAAM,iBAAiB,GAAsD;IAC3E,OAAO,EAAE;QACP,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACxC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;QACxC,sBAAsB,EAAE,KAAK,CAAC,KAAK,CAAC,YAAY;QAChD,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QACxC,uBAAuB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC7C;IACD,SAAS,EAAE;QACT,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACxC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;QACxC,sBAAsB,EAAE,KAAK,CAAC,KAAK,CAAC,cAAc;QAClD,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO;QAC1C,uBAAuB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC7C;IACD,QAAQ,EAAE;QACR,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACxC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;QACxC,sBAAsB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAC3C,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QACxC,uBAAuB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC7C;IACD,OAAO,EAAE;QACP,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACxC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;QACxC,sBAAsB,EAAE,aAAa;QACrC,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QACxC,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;QAChC,uBAAuB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC7C;IACD,KAAK,EAAE;QACL,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACxC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;QACxC,sBAAsB,EAAE,aAAa;QACrC,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QACxC,uBAAuB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC7C;IACD,IAAI,EAAE;QACJ,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACxC,UAAU,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW;QACxC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;QACxC,sBAAsB,EAAE,aAAa;QACrC,cAAc,EAAE,WAAW;KAC5B;IACD,MAAM,EAAE;QACN,YAAY,EAAE,KAAK,CAAC,UAAU,CAAC,SAAS;QACxC,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,QAAQ;QACxC,sBAAsB,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;QACzC,oBAAoB,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI;QACvC,uBAAuB,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK;KAC7C;CACF,CAAC;AASF,MAAM,cAAc,GAA6C;IAC/D,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,QAAQ,OAAO,CAAC,IAAI,EAAE,EAAE,8BAA8B;QAC/D,QAAQ,EAAE,MAAM;KACjB;IACD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,QAAQ,OAAO,CAAC,IAAI,EAAE,EAAE,8BAA8B;QAC/D,QAAQ,EAAE,MAAM;KACjB;IACD,KAAK,EAAE;QACL,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,QAAQ,OAAO,CAAC,IAAI,EAAE,EAAE,8BAA8B;QAC/D,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC;AAIF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,KAAK,GAAG,MAAM,EACd,MAAM,GAAG,MAAM,EACf,OAAO,GAAG,QAAQ,OAAO,CAAC,IAAI,EAAE,EAChC,QAAQ,GAAG,MAAM,EACjB,cAAc,GAAG,MAAM,EACvB,YAAY,EACZ,UAAU,GAAG,YAAY,EACzB,aAAa,GAAG,YAAY,EAC5B,sBAAsB,EACtB,oBAAoB,GAAG,sBAAsB,EAC7C,uBAAuB,GAAG,sBAAsB,EAChD,WAAW,EACX,GAAG,WAAW,EACC,EAAE,EAAE;IACnB,MAAM,YAAY,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;IAEtC,MAAM,UAAU,GAAqB;QACnC,aAAa,EAAE,YAAY;QAC3B,MAAM,EAAE,KAAK;QACb,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,OAAO;QACjB,SAAS,EAAE,QAAQ;QACnB,eAAe,EAAE,cAAc;QAC/B,aAAa,EAAE,YAAY;QAC3B,WAAW,EAAE,UAAU;QACvB,cAAc,EAAE,aAAa;QAC7B,uBAAuB,EAAE,sBAAsB;QAC/C,qBAAqB,EAAE,oBAAoB;QAC3C,wBAAwB,EAAE,uBAAuB;QACjD,YAAY,EAAE,WAAW;KAC1B,CAAC;IAEF,MAAM,OAAO,GAAG,CACd,8BACG,IAAI,IAAI,CAAC,SAAS,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,EACxC,KAAK,EACL,IAAI,IAAI,SAAS,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,GAAI,IACvC,CACJ,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,QAAQ,CAAC;IAEnC,OAAO,MAAM,CAAC,CAAC,CAAC,CACd,KAAC,QAAQ,OAAK,WAAW,KAAM,UAAU,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAClE,OAAO,GACC,CACZ,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,OACL,WAAW,KACX,UAAU,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,YAET,OAAO,GACG,CACd,CAAC;AACJ,CAAC,CAAC;AAkBF,MAAM,WAAW,GAAG,GAAG,CAAkB;;;;;SAKhC,OAAO,CAAC,GAAG;;;WAGT,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC;eAC3D,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;YAC5D,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO;aACvB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;;iBAErD,UAAU,CAAC,MAAM,CAAC,MAAM;eAC1B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS;;;WAG9B,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,aAAa;sBACnB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,uBAAuB;;YAElD,CAAC,KAAK,EAAE,EAAE,CAClB,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,MAAM;mBAChD,OAAO,CAAC,GAAG;;qBAET,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,eAAe;;;aAGxC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW;wBACjB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,qBAAqB;;;;aAIjD,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc;wBACpB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,wBAAwB;;CAEhE,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,CAAkB;IAC3C,WAAW;CACd,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAkB;IAC9C,WAAW;CACd,CAAC","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/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/Modal.d.ts

@@ -1,17 +1,12 @@
-import { type JSX, type MouseEventHandler, type ReactNode } from "react";
+import { type PropsWithChildren } from "react";
 type ModalProps = {
-    header?: ReactNode;
-    content: JSX.Element;
-    footer?: ReactNode;
     width?: string;
     height?: string;
-    onClickClose?: MouseEventHandler<HTMLButtonElement>;
-    closeText?: string;
-};
-declare const Modal: ({ header, content, footer, width, height, onClickClose, closeText, }: ModalProps) => import("react").ReactPortal;
+} & PropsWithChildren;
+declare const Modal: ({ width, height, children }: ModalProps) => import("react").ReactPortal;
 export default Modal;
 export declare const useModal: () => {
-    showModal: boolean;
     openModal: () => void;
     closeModal: () => void;
+    isModalOpen: boolean;
 };

package/core/organisms/Modal.js

@@ -1,13 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState, } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
 import { createPortal } from "react-dom";
 import styled from "styled-components";
-import { Color, Responsive } from "../atoms";
-import { Button, Overlay } from "../molecules";
-const Modal = ({ header, content, footer, width, height, onClickClose, closeText, }) => createPortal(_jsx(Overlay, { "$centerContent": true, children: _jsxs(ModalWindow, { "$width": width, "$height": height, children: [header ? _jsx(ModalHeader, { children: header }) : _jsx(_Fragment, {}), _jsx(ModalBody, { children: content }), onClickClose || footer ? (_jsxs(ModalFooter, { children: [onClickClose ? (_jsx(CloseButton, { onClick: onClickClose, closeText: closeText })) : (_jsx(_Fragment, {})), footer] })) : (_jsx(_Fragment, {}))] }) }), document.body);
+import { Color, Responsive, Spacing } from "../atoms";
+import { Overlay } from "../molecules";
+const Modal = ({ width, height, children }) => createPortal(_jsx(Overlay, { "$centerContent": true, children: _jsx(ModalWindow, { "$width": width, "$height": height, children: children }) }), document.body);
 export default Modal;
 export const useModal = () => {
-    const [showModal, setShowModal] = useState(false);
+    const [isModalOpen, setIsModalOpen] = useState(false);
     const lockScroll = useCallback(() => {
         document.body.style.overflow = "hidden";
     }, []);
@@ -15,17 +15,17 @@ export const useModal = () => {
         document.body.style.overflow = "initial";
     }, []);
     const openModal = () => {
-        setShowModal(true);
+        setIsModalOpen(true);
         lockScroll();
     };
     const closeModal = () => {
-        setShowModal(false);
+        setIsModalOpen(false);
         unlockScroll();
     };
     return {
-        showModal,
         openModal,
         closeModal,
+        isModalOpen,
     };
 };
 const ModalWindow = styled.div `
@@ -34,7 +34,7 @@ const ModalWindow = styled.div `
 
   background-color: ${Color.neutral.white};
 
-  min-height: 100px;
+  min-height: ${Spacing.px100};
   max-height: 100vh;
 
   @media (width < ${Responsive.widthBreakpoint.laptop}) {
@@ -56,40 +56,7 @@ const ModalWindow = styled.div `
     width: ${({ $width }) => $width};
     height: ${({ $height }) => $height};
 
-    border-radius: 8px;
+    border-radius: ${Spacing.px8};
   }
 `;
-const ModalHeader = styled.div `
-  font-weight: 500;
-  font-size: 18px;
-
-  padding: 12px 20px;
-  margin-bottom: 12px;
-
-  border-bottom: 1px solid ${Color.neutral.grey3};
-`;
-const ModalBody = styled.div `
-  display: flex;
-  flex-direction: column;
-
-  height: 100%;
-  overflow-y: auto;
-
-  > * {
-    width: 100%;
-    height: 100%;
-    min-height: 100px;
-
-    padding: 2px 20px;
-    border: none;
-  }
-`;
-const ModalFooter = styled.div `
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-
-  padding: 16px 20px;
-`;
-const CloseButton = ({ onClick, closeText = "Close" }) => (_jsx(Button, { label: closeText, onClick: onClick, variant: "tertiary", size: "small" }));
 //# sourceMappingURL=Modal.js.map

package/core/organisms/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/organisms/Modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  type JSX,\n  type MouseEventHandler,\n  type ReactNode,\n  useCallback,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styled from \"styled-components\";\nimport { Color, Responsive } from \"../atoms\";\nimport { Button, Overlay } from \"../molecules\";\n\ntype ModalProps = {\n  header?: ReactNode;\n  content: JSX.Element;\n  footer?: ReactNode;\n  width?: string;\n  height?: string;\n  onClickClose?: MouseEventHandler<HTMLButtonElement>;\n  closeText?: string;\n};\n\nconst Modal = ({\n  header,\n  content,\n  footer,\n  width,\n  height,\n  onClickClose,\n  closeText,\n}: ModalProps) =>\n  createPortal(\n    <Overlay $centerContent>\n      <ModalWindow $width={width} $height={height}>\n        {header ? <ModalHeader>{header}</ModalHeader> : <></>}\n\n        <ModalBody>{content}</ModalBody>\n\n        {onClickClose || footer ? (\n          <ModalFooter>\n            {onClickClose ? (\n              <CloseButton onClick={onClickClose} closeText={closeText} />\n            ) : (\n              <></>\n            )}\n\n            {footer}\n          </ModalFooter>\n        ) : (\n          <></>\n        )}\n      </ModalWindow>\n    </Overlay>,\n    document.body,\n  );\n\nexport default Modal;\n\nexport const useModal = () => {\n  const [showModal, setShowModal] = useState(false);\n\n  const lockScroll = useCallback(() => {\n    document.body.style.overflow = \"hidden\";\n  }, []);\n\n  const unlockScroll = useCallback(() => {\n    document.body.style.overflow = \"initial\";\n  }, []);\n\n  const openModal = () => {\n    setShowModal(true);\n    lockScroll();\n  };\n\n  const closeModal = () => {\n    setShowModal(false);\n    unlockScroll();\n  };\n\n  return {\n    showModal,\n    openModal,\n    closeModal,\n  };\n};\n\nconst ModalWindow = styled.div<{ $width?: string; $height?: string }>`\n  display: flex;\n  flex-direction: column;\n\n  background-color: ${Color.neutral.white};\n\n  min-height: 100px;\n  max-height: 100vh;\n\n  @media (width < ${Responsive.widthBreakpoint.laptop}) {\n    position: fixed;\n    bottom: 0px;\n    left: 0px;\n\n    width: 100%;\n    height: 100%;\n\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n    position: static;\n    bottom: auto;\n    left: auto;\n\n    width: ${({ $width }) => $width};\n    height: ${({ $height }) => $height};\n\n    border-radius: 8px;\n  }\n`;\n\nconst ModalHeader = styled.div`\n  font-weight: 500;\n  font-size: 18px;\n\n  padding: 12px 20px;\n  margin-bottom: 12px;\n\n  border-bottom: 1px solid ${Color.neutral.grey3};\n`;\n\nconst ModalBody = styled.div`\n  display: flex;\n  flex-direction: column;\n\n  height: 100%;\n  overflow-y: auto;\n\n  > * {\n    width: 100%;\n    height: 100%;\n    min-height: 100px;\n\n    padding: 2px 20px;\n    border: none;\n  }\n`;\n\nconst ModalFooter = styled.div`\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n\n  padding: 16px 20px;\n`;\n\ntype CloseButtonProps = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  closeText?: string;\n};\n\nconst CloseButton = ({ onClick, closeText = \"Close\" }: CloseButtonProps) => (\n  <Button label={closeText} onClick={onClick} variant=\"tertiary\" size=\"small\" />\n);\n"]}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/organisms/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAOvC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAc,EAAE,EAAE,CACxD,YAAY,CACV,KAAC,OAAO,sCACN,KAAC,WAAW,cAAS,KAAK,aAAW,MAAM,YACxC,QAAQ,GACG,GACN,EACV,QAAQ,CAAC,IAAI,CACd,CAAC;AAEJ,eAAe,KAAK,CAAC;AAErB,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS,CAAC;IAC3C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,UAAU,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,YAAY,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO;QACL,SAAS;QACT,UAAU;QACV,WAAW;KACZ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAuC;;;;sBAI/C,KAAK,CAAC,OAAO,CAAC,KAAK;;gBAEzB,OAAO,CAAC,KAAK;;;oBAGT,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;;;;;;;qBAWhC,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;aAKzC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;cACrB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;;qBAEjB,OAAO,CAAC,GAAG;;CAE/B,CAAC","sourcesContent":["import { type PropsWithChildren, useCallback, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styled from \"styled-components\";\nimport { Color, Responsive, Spacing } from \"../atoms\";\nimport { Overlay } from \"../molecules\";\n\ntype ModalProps = {\n  width?: string;\n  height?: string;\n} & PropsWithChildren;\n\nconst Modal = ({ width, height, children }: ModalProps) =>\n  createPortal(\n    <Overlay $centerContent>\n      <ModalWindow $width={width} $height={height}>\n        {children}\n      </ModalWindow>\n    </Overlay>,\n    document.body,\n  );\n\nexport default Modal;\n\nexport const useModal = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const lockScroll = useCallback(() => {\n    document.body.style.overflow = \"hidden\";\n  }, []);\n\n  const unlockScroll = useCallback(() => {\n    document.body.style.overflow = \"initial\";\n  }, []);\n\n  const openModal = () => {\n    setIsModalOpen(true);\n    lockScroll();\n  };\n\n  const closeModal = () => {\n    setIsModalOpen(false);\n    unlockScroll();\n  };\n\n  return {\n    openModal,\n    closeModal,\n    isModalOpen,\n  };\n};\n\nconst ModalWindow = styled.div<{ $width?: string; $height?: string }>`\n  display: flex;\n  flex-direction: column;\n\n  background-color: ${Color.neutral.white};\n\n  min-height: ${Spacing.px100};\n  max-height: 100vh;\n\n  @media (width < ${Responsive.widthBreakpoint.laptop}) {\n    position: fixed;\n    bottom: 0px;\n    left: 0px;\n\n    width: 100%;\n    height: 100%;\n\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n    position: static;\n    bottom: auto;\n    left: auto;\n\n    width: ${({ $width }) => $width};\n    height: ${({ $height }) => $height};\n\n    border-radius: ${Spacing.px8};\n  }\n`;\n"]}

package/core/organisms/SearchBar.d.ts

@@ -1,4 +1,6 @@
 import type { ChangeEventHandler, MouseEventHandler } from "react";
+import { type ButtonVariant } from "../molecules";
+export type SearchBarSize = "small" | "medium";
 type SearchBarProps = {
     queryText: string;
     onChangeQueryText: ChangeEventHandler<HTMLInputElement, HTMLInputElement>;
@@ -7,9 +9,9 @@ type SearchBarProps = {
     handlePressEnter: () => void;
     autoFocus?: boolean;
     disableSearch?: boolean;
+    searchButtonVariant?: ButtonVariant;
     placeholder?: string;
     size?: SearchBarSize;
 };
-type SearchBarSize = "small" | "medium";
-declare const SearchBar: ({ queryText, onChangeQueryText, onClickSearch, onClickReset, handlePressEnter, autoFocus, disableSearch, placeholder, size, }: SearchBarProps) => import("react").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

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { Color, Responsive, Spacing, SystemIcon } from "../atoms";
 import { Button } from "../molecules";
-const SearchBar = ({ queryText, onChangeQueryText, onClickSearch, onClickReset, handlePressEnter, autoFocus = false, disableSearch = false, placeholder = "Search grant or describe your project", size = "medium", }) => {
+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, { disabled: disableSearch, Icon: SystemIcon.MagnifyingGlassIcon, onClick: onClickSearch, size: 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 sizePropsMap = {

package/core/organisms/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../core/organisms/SearchBar.tsx"],"names":[],"mappings":";AAKA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAgBtC,MAAM,SAAS,GAAG,CAAC,EACjB,SAAS,EACT,iBAAiB,EACjB,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,SAAS,GAAG,KAAK,EACjB,aAAa,GAAG,KAAK,EACrB,WAAW,GAAG,uCAAuC,EACrD,IAAI,GAAG,QAAQ,GACA,EAAE,EAAE;IACnB,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAEhD,OAAO,CACL,MAAC,aAAa,eACZ,MAAC,UAAU,eAAU,MAAM,mBAAiB,SAAS,KAAK,EAAE,aAC1D,KAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,iBAAiB,EAAE,iBAAiB,EACpC,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,GAClB,EAED,SAAS,KAAK,EAAE,CAAC,CAAC,CAAC,CAClB,KAAC,sBAAsB,KAAG,CAC3B,CAAC,CAAC,CAAC,CACF,KAAC,WAAW,IAAC,YAAY,EAAE,YAAY,GAAI,CAC5C,IACU,EAEb,KAAC,MAAM,IACL,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAE,UAAU,CAAC,mBAAmB,EACpC,OAAO,EAAE,aAAa,EACtB,IAAI,EAAE,IAAI,GACV,IACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC;AAOzB,MAAM,YAAY,GAAgD;IAChE,KAAK,EAAE;QACL,MAAM,EAAE,OAAO,CAAC,IAAI;QACpB,QAAQ,EAAE,MAAM;KACjB;IACD,MAAM,EAAE;QACN,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,MAAM;KACjB;CACF,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;SAIvB,OAAO,CAAC,GAAG;;;;oBAIA,UAAU,CAAC,eAAe,CAAC,MAAM;;;;qBAIhC,UAAU,CAAC,eAAe,CAAC,MAAM;qBACjC,OAAO,CAAC,IAAI;;CAEhC,CAAC;AAOF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAiB;;;;;YAKlC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO;;;sBAGd,CAAC,KAAK,EAAE,EAAE,CAC5B,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;;MAE7D,CAAC,KAAK,EAAE,EAAE,CACV,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK;mBACnD,OAAO,CAAC,GAAG;;;wBAGN,KAAK,CAAC,OAAO,CAAC,KAAK;0BACjB,KAAK,CAAC,MAAM,CAAC,OAAO;;CAE7C,CAAC;AAYF,MAAM,SAAS,GAAG,CAAC,EACjB,SAAS,EACT,iBAAiB,EACjB,gBAAgB,EAChB,SAAS,EACT,aAAa,EACb,WAAW,EACX,QAAQ,GACO,EAAE,EAAE;IACnB,MAAM,SAAS,GAAG,CAAC,KAAsC,EAAE,EAAE;QAC3D,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,CAAC,aAAa,EAAE,CAAC;YAC7D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,gBAAgB,EAAE,CAAC;QACrB,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE,SAAS,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,iBAAiB,EAC3B,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,eACT,QAAQ,GACnB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,KAAK,CAAuB;;iBAExC,OAAO,CAAC,IAAI;;eAEd,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS;;;;;;CAMxC,CAAC;AAMF,MAAM,WAAW,GAAG,CAAC,EAAE,YAAY,EAAoB,EAAE,EAAE,CAAC,CAC1D,KAAC,eAAe,IAAC,OAAO,EAAE,YAAY,EAAE,IAAI,EAAC,QAAQ,YACnD,KAAC,UAAU,CAAC,KAAK,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,KAAK,GAAI,GAC1C,CACnB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;;;;;mBASlB,OAAO,CAAC,GAAG;CAC7B,CAAC;AAEF,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;mBAItB,OAAO,CAAC,GAAG;CAC7B,CAAC","sourcesContent":["import type {\n  ChangeEventHandler,\n  KeyboardEvent,\n  MouseEventHandler,\n} from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Responsive, Spacing, SystemIcon } from \"../atoms\";\nimport { Button } from \"../molecules\";\n\ntype SearchBarProps = {\n  queryText: string;\n  onChangeQueryText: ChangeEventHandler<HTMLInputElement, HTMLInputElement>;\n  onClickReset: MouseEventHandler<HTMLButtonElement>;\n  onClickSearch: MouseEventHandler<HTMLButtonElement>;\n  handlePressEnter: () => void;\n  autoFocus?: boolean;\n  disableSearch?: boolean;\n  placeholder?: string;\n  size?: SearchBarSize;\n};\n\ntype SearchBarSize = \"small\" | \"medium\";\n\nconst SearchBar = ({\n  queryText,\n  onChangeQueryText,\n  onClickSearch,\n  onClickReset,\n  handlePressEnter,\n  autoFocus = false,\n  disableSearch = false,\n  placeholder = \"Search grant or describe your project\",\n  size = \"medium\",\n}: SearchBarProps) => {\n  const { height, fontSize } = sizePropsMap[size];\n\n  return (\n    <BaseSearchBar>\n      <SearchArea $height={height} $hasQueryText={queryText !== \"\"}>\n        <TextInput\n          queryText={queryText}\n          onChangeQueryText={onChangeQueryText}\n          handlePressEnter={handlePressEnter}\n          autoFocus={autoFocus}\n          disableSearch={disableSearch}\n          placeholder={placeholder}\n          fontSize={fontSize}\n        />\n\n        {queryText === \"\" ? (\n          <ResetButtonPlaceholder />\n        ) : (\n          <ResetButton onClickReset={onClickReset} />\n        )}\n      </SearchArea>\n\n      <Button\n        disabled={disableSearch}\n        Icon={SystemIcon.MagnifyingGlassIcon}\n        onClick={onClickSearch}\n        size={size}\n      />\n    </BaseSearchBar>\n  );\n};\n\nexport default SearchBar;\n\ntype SizeStyleProps = {\n  height: string;\n  fontSize: string;\n};\n\nconst sizePropsMap: { [size in SearchBarSize]: SizeStyleProps } = {\n  small: {\n    height: Spacing.px40,\n    fontSize: \"12px\",\n  },\n  medium: {\n    height: \"44px\",\n    fontSize: \"14px\",\n  },\n};\n\nconst BaseSearchBar = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: ${Spacing.px8};\n\n  width: 100%;\n\n  @media (width < ${Responsive.widthBreakpoint.laptop}) {\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n    border-radius: ${Spacing.px12};\n  }\n`;\n\ntype SearchAreaProps = {\n  $height: string;\n  $hasQueryText: boolean;\n};\n\nconst SearchArea = styled.div<SearchAreaProps>`\n  display: flex;\n  align-items: center;\n\n  box-sizing: border-box;\n  height: ${(props) => props.$height};\n  width: 100%;\n\n  background-color: ${(props) =>\n    props.$hasQueryText ? Color.neutral.white : Color.neutral.grey4};\n  border: 0.5px solid\n    ${(props) =>\n      props.$hasQueryText ? Color.accent.yellow1 : Color.neutral.grey2};\n  border-radius: ${Spacing.px8};\n\n  &:focus-within {\n    background-color: ${Color.neutral.white};\n    border: 0.5px solid ${Color.accent.yellow1};\n  }\n`;\n\ntype TextInputProps = {\n  queryText: string;\n  onChangeQueryText?: ChangeEventHandler<HTMLInputElement, HTMLInputElement>;\n  handlePressEnter: () => void;\n  autoFocus: boolean;\n  disableSearch: boolean;\n  placeholder: string;\n  fontSize: string;\n};\n\nconst TextInput = ({\n  queryText,\n  onChangeQueryText,\n  handlePressEnter,\n  autoFocus,\n  disableSearch,\n  placeholder,\n  fontSize,\n}: TextInputProps) => {\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Enter\" && !event.repeat && !disableSearch) {\n      event.preventDefault();\n      handlePressEnter();\n    }\n  };\n\n  return (\n    <BaseTextInput\n      value={queryText}\n      placeholder={placeholder}\n      onChange={onChangeQueryText}\n      onKeyDown={onKeyDown}\n      autoFocus={autoFocus}\n      $fontSize={fontSize}\n    />\n  );\n};\n\nconst BaseTextInput = styled.input<{ $fontSize: string }>`\n  width: 100%;\n  margin-left: ${Spacing.px16};\n\n  font-size: ${(props) => props.$fontSize};\n  text-overflow: ellipsis;\n\n  background-color: transparent;\n  outline: none;\n  border: none;\n`;\n\ntype ResetButtonProps = {\n  onClickReset: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst ResetButton = ({ onClickReset }: ResetButtonProps) => (\n  <BaseResetButton onClick={onClickReset} type=\"button\">\n    <SystemIcon.XIcon size={14} color={Color.neutral.black} />\n  </BaseResetButton>\n);\n\nconst BaseResetButton = styled.button`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  width: 38px;\n  min-width: 38px;\n  height: 38px;\n\n  border-radius: ${Spacing.px8};\n`;\n\nconst ResetButtonPlaceholder = styled.div`\n  width: 38px;\n  height: 38px;\n\n  border-radius: ${Spacing.px8};\n`;\n"]}
+{"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/GrantMatch/GrantMatchModal.js

@@ -2,44 +2,71 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Image from "next/image";
 import styled from "styled-components";
 import grantMatchLogo from "../../assets/logos/grant_match_logo.webp";
+import { Color, Spacing, Typography } from "../../atoms";
+import { applyTypography } from "../../integrations";
 import { Button, Textarea } from "../../molecules";
+import { Modal } from "../../organisms";
 import FileDrop, { useFileDrop } from "../../organisms/FileDrop";
-import Modal from "../../organisms/Modal";
 import { useGrantMatchContext } from "./context";
 const GrantMatchModal = ({ findGrantsCallback, closeModalCallback, }) => {
-    const { activeQuery, closeModal } = useGrantMatchContext();
+    const { closeModal, updateActiveQuery, queryText, activeQuery } = useGrantMatchContext();
     const { files, uploadFiles, removeFile, errorMessage } = useFileDrop(activeQuery.files);
+    const onClickFind = () => {
+        findGrantsCallback?.();
+        updateActiveQuery({ files, text: queryText });
+        closeModal();
+    };
     const onClickClose = () => {
-        if (closeModalCallback) {
-            closeModalCallback();
-        }
+        closeModalCallback?.();
         closeModal();
     };
-    return (_jsx(Modal, { header: _jsx(ModalHeader, {}), content: _jsx(ModalContent, { files: files, uploadFiles: uploadFiles, removeFile: removeFile, errorMessage: errorMessage }), footer: _jsx(FindGrantsButton, { files: files, findGrantsCallback: findGrantsCallback }), onClickClose: onClickClose, width: "600px", height: "560px" }));
+    return (_jsxs(Modal, { width: "600px", height: "560px", children: [_jsx(ModalHeader, {}), _jsx(ModalBody, { children: _jsx(ModalContent, { files: files, uploadFiles: uploadFiles, removeFile: removeFile, errorMessage: errorMessage }) }), _jsx(ModalFooter, { files: files, onClickFind: onClickFind, onClickClose: onClickClose })] }));
 };
 export default GrantMatchModal;
 const ModalHeader = () => (_jsxs(BaseModalHeader, { children: [_jsx(GrantMatchLogo, { src: grantMatchLogo, alt: "Grant Match", width: 64, height: 64 }), _jsx("p", { children: "Let us get you matched to the most suitable grant" })] }));
 const BaseModalHeader = styled.div `
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: ${Spacing.px16};
+
+  margin-bottom: ${Spacing.px12};
+  padding: ${Spacing.px12} ${Spacing.px20};
+
+  border-bottom: 1px solid ${Color.neutral.grey3};
+
+  ${applyTypography(Typography.subheading2Medium)}
 `;
 const GrantMatchLogo = styled(Image) `
-  width: 24px;
-  height: 24px;
+  width: ${Spacing.px24};
+  height: ${Spacing.px24};
 
   box-shadow: 0px 0px 5px 5px #ffe2b680;
   border-radius: 120px;
 `;
+const ModalBody = styled.div `
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  overflow-y: auto;
+`;
 const ModalContent = ({ files, uploadFiles, removeFile, errorMessage, }) => {
     const { queryText, updateQueryText } = useGrantMatchContext();
-    return (_jsxs(BaseContent, { children: [_jsxs(ModalFileDrop, { children: [_jsx("p", { children: "Upload Files (e.g. Project Plan, Proposal, Company Docs)" }), _jsx(FileDrop, { uploadedFiles: files, uploadFiles: uploadFiles, removeFile: removeFile, errorMessage: errorMessage })] }), _jsxs(ModalQueryText, { children: [_jsx("label", { htmlFor: QUERY_TEXTAREA_ID, children: "Tell us what you intend to do" }), _jsx(Textarea, { id: QUERY_TEXTAREA_ID, value: queryText, onChange: (event) => updateQueryText(event.target.value), placeholder: "Give a summary of your project, specifying the key activities you will do & what you intend to achieve" })] })] }));
+    return (_jsxs(BaseContent, { children: [_jsxs(ModalFileDrop, { children: [_jsx("p", { children: "Upload Files (e.g. Project Plan, Proposal, Company Docs)" }), _jsx(FileDrop, { uploadedFiles: files, uploadFiles: uploadFiles, removeFile: removeFile, errorMessage: errorMessage })] }), _jsxs(ModalQueryText, { children: [_jsx("label", { htmlFor: textareaId, children: "Tell us what you intend to do" }), _jsx(Textarea, { id: textareaId, value: queryText, onChange: (event) => updateQueryText(event.target.value), placeholder: textareaPlaceholder })] })] }));
 };
-const QUERY_TEXTAREA_ID = "query-textarea";
+const textareaId = "query-textarea";
+const textareaPlaceholder = "Give a summary of your project, specifying the key activities you will do & what you intend to achieve";
 const BaseContent = styled.div `
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: ${Spacing.px12};
+
+  width: 100%;
+  height: 100%;
+  min-height: ${Spacing.px100};
+
+  padding: ${Spacing.px4} ${Spacing.px20};
+  border: none;
 `;
 const ModalFileDrop = styled.div `
   display: flex;
@@ -49,16 +76,16 @@ const ModalQueryText = styled.div `
   display: flex;
   flex-direction: column;
 `;
-const FindGrantsButton = ({ files, findGrantsCallback, }) => {
-    const { updateActiveQuery, queryText, closeModal } = useGrantMatchContext();
+const ModalFooter = ({ files, onClickFind, onClickClose, }) => {
+    const { queryText } = useGrantMatchContext();
     const hasQuery = queryText.trim() !== "" || files.length > 0;
-    const onClick = () => {
-        if (findGrantsCallback) {
-            findGrantsCallback();
-        }
-        updateActiveQuery({ files, text: queryText });
-        closeModal();
-    };
-    return (_jsx(Button, { label: "Find My Grants", disabled: !hasQuery, onClick: onClick, variant: "secondary", size: "small" }));
+    return (_jsxs(BaseModalFooter, { children: [_jsx(Button, { label: "Close", onClick: onClickClose, variant: "tertiary", size: "small" }), _jsx(Button, { label: "Find My Grants", disabled: !hasQuery, onClick: onClickFind, variant: "secondary", size: "small" })] }));
 };
+const BaseModalFooter = styled.div `
+  display: flex;
+  justify-content: space-between;
+  gap: ${Spacing.px12};
+
+  padding: ${Spacing.px16} ${Spacing.px20};
+`;
 //# sourceMappingURL=GrantMatchModal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"GrantMatchModal.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/GrantMatchModal.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAC/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,cAAc,MAAM,0CAA0C,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,QAAQ,EAAE,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,KAAK,MAAM,uBAAuB,CAAC;AAC1C,OAAO,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AAOjD,MAAM,eAAe,GAAG,CAAC,EACvB,kBAAkB,EAClB,kBAAkB,GACG,EAAE,EAAE;IACzB,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC3D,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,GAAG,WAAW,CAClE,WAAW,CAAC,KAAK,CAClB,CAAC;IAEF,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,EAAE,CAAC;QACvB,CAAC;QAED,UAAU,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,KAAK,IACJ,MAAM,EAAE,KAAC,WAAW,KAAG,EACvB,OAAO,EACL,KAAC,YAAY,IACX,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,GAC1B,EAEJ,MAAM,EACJ,KAAC,gBAAgB,IACf,KAAK,EAAE,KAAK,EACZ,kBAAkB,EAAE,kBAAkB,GACtC,EAEJ,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAC,OAAO,EACb,MAAM,EAAC,OAAO,GACd,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC;AAE/B,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,MAAC,eAAe,eACd,KAAC,cAAc,IACb,GAAG,EAAE,cAAc,EACnB,GAAG,EAAC,aAAa,EACjB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,GACV,EACF,4EAAwD,IACxC,CACnB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;;;;;;CAMnC,CAAC;AASF,MAAM,YAAY,GAAG,CAAC,EACpB,KAAK,EACL,WAAW,EACX,UAAU,EACV,YAAY,GACM,EAAE,EAAE;IACtB,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAE9D,OAAO,CACL,MAAC,WAAW,eACV,MAAC,aAAa,eACZ,mFAA+D,EAC/D,KAAC,QAAQ,IACP,aAAa,EAAE,KAAK,EACpB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,YAAY,EAAE,YAAY,GAC1B,IACY,EAEhB,MAAC,cAAc,eACb,gBAAO,OAAO,EAAE,iBAAiB,8CAAuC,EACxE,KAAC,QAAQ,IACP,EAAE,EAAE,iBAAiB,EACrB,KAAK,EAAE,SAAS,EAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EACxD,WAAW,EAAC,wGAAwG,GACpH,IACa,IACL,CACf,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,gBAAgB,CAAC;AAE3C,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI7B,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAG/B,CAAC;AAEF,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGhC,CAAC;AAOF,MAAM,gBAAgB,GAAG,CAAC,EACxB,KAAK,EACL,kBAAkB,GACI,EAAE,EAAE;IAC1B,MAAM,EAAE,iBAAiB,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC5E,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;IAE7D,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,EAAE,CAAC;QACvB,CAAC;QAED,iBAAiB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC;QAC9C,UAAU,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAC,gBAAgB,EACtB,QAAQ,EAAE,CAAC,QAAQ,EACnB,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,OAAO,GACZ,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import Image from \"next/image\";\nimport styled from \"styled-components\";\nimport grantMatchLogo from \"../../assets/logos/grant_match_logo.webp\";\nimport { Button, Textarea } from \"../../molecules\";\nimport FileDrop, { useFileDrop } from \"../../organisms/FileDrop\";\nimport Modal from \"../../organisms/Modal\";\nimport { useGrantMatchContext } from \"./context\";\n\ntype GrantMatchModalProps = {\n  findGrantsCallback?: () => void;\n  closeModalCallback?: () => void;\n};\n\nconst GrantMatchModal = ({\n  findGrantsCallback,\n  closeModalCallback,\n}: GrantMatchModalProps) => {\n  const { activeQuery, closeModal } = useGrantMatchContext();\n  const { files, uploadFiles, removeFile, errorMessage } = useFileDrop(\n    activeQuery.files,\n  );\n\n  const onClickClose = () => {\n    if (closeModalCallback) {\n      closeModalCallback();\n    }\n\n    closeModal();\n  };\n\n  return (\n    <Modal\n      header={<ModalHeader />}\n      content={\n        <ModalContent\n          files={files}\n          uploadFiles={uploadFiles}\n          removeFile={removeFile}\n          errorMessage={errorMessage}\n        />\n      }\n      footer={\n        <FindGrantsButton\n          files={files}\n          findGrantsCallback={findGrantsCallback}\n        />\n      }\n      onClickClose={onClickClose}\n      width=\"600px\"\n      height=\"560px\"\n    />\n  );\n};\n\nexport default GrantMatchModal;\n\nconst ModalHeader = () => (\n  <BaseModalHeader>\n    <GrantMatchLogo\n      src={grantMatchLogo}\n      alt=\"Grant Match\"\n      width={64}\n      height={64}\n    />\n    <p>Let us get you matched to the most suitable grant</p>\n  </BaseModalHeader>\n);\n\nconst BaseModalHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 16px;\n`;\n\nconst GrantMatchLogo = styled(Image)`\n  width: 24px;\n  height: 24px;\n\n  box-shadow: 0px 0px 5px 5px #ffe2b680;\n  border-radius: 120px;\n`;\n\ntype ModalContentProps = {\n  files: File[];\n  uploadFiles: (acceptedFiles: File[]) => void;\n  removeFile: (fileName: string) => void;\n  errorMessage?: string;\n};\n\nconst ModalContent = ({\n  files,\n  uploadFiles,\n  removeFile,\n  errorMessage,\n}: ModalContentProps) => {\n  const { queryText, updateQueryText } = useGrantMatchContext();\n\n  return (\n    <BaseContent>\n      <ModalFileDrop>\n        <p>Upload Files (e.g. Project Plan, Proposal, Company Docs)</p>\n        <FileDrop\n          uploadedFiles={files}\n          uploadFiles={uploadFiles}\n          removeFile={removeFile}\n          errorMessage={errorMessage}\n        />\n      </ModalFileDrop>\n\n      <ModalQueryText>\n        <label htmlFor={QUERY_TEXTAREA_ID}>Tell us what you intend to do</label>\n        <Textarea\n          id={QUERY_TEXTAREA_ID}\n          value={queryText}\n          onChange={(event) => updateQueryText(event.target.value)}\n          placeholder=\"Give a summary of your project, specifying the key activities you will do & what you intend to achieve\"\n        />\n      </ModalQueryText>\n    </BaseContent>\n  );\n};\n\nconst QUERY_TEXTAREA_ID = \"query-textarea\";\n\nconst BaseContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n`;\n\nconst ModalFileDrop = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst ModalQueryText = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\ntype FindGrantsButtonProps = {\n  files: File[];\n  findGrantsCallback?: () => void;\n};\n\nconst FindGrantsButton = ({\n  files,\n  findGrantsCallback,\n}: FindGrantsButtonProps) => {\n  const { updateActiveQuery, queryText, closeModal } = useGrantMatchContext();\n  const hasQuery = queryText.trim() !== \"\" || files.length > 0;\n\n  const onClick = () => {\n    if (findGrantsCallback) {\n      findGrantsCallback();\n    }\n\n    updateActiveQuery({ files, text: queryText });\n    closeModal();\n  };\n\n  return (\n    <Button\n      label=\"Find My Grants\"\n      disabled={!hasQuery}\n      onClick={onClick}\n      variant=\"secondary\"\n      size=\"small\"\n    />\n  );\n};\n"]}
+{"version":3,"file":"GrantMatchModal.js","sourceRoot":"","sources":["../../../../core/templates/GrantMatch/GrantMatchModal.tsx"],"names":[],"mappings":"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","sourcesContent":["import Image from \"next/image\";\nimport type { MouseEventHandler } from \"react\";\nimport styled from \"styled-components\";\nimport grantMatchLogo from \"../../assets/logos/grant_match_logo.webp\";\nimport { Color, Spacing, Typography } from \"../../atoms\";\nimport { applyTypography } from \"../../integrations\";\nimport { Button, Textarea } from \"../../molecules\";\nimport { Modal } from \"../../organisms\";\nimport FileDrop, { useFileDrop } from \"../../organisms/FileDrop\";\nimport { useGrantMatchContext } from \"./context\";\n\ntype GrantMatchModalProps = {\n  findGrantsCallback?: () => void;\n  closeModalCallback?: () => void;\n};\n\nconst GrantMatchModal = ({\n  findGrantsCallback,\n  closeModalCallback,\n}: GrantMatchModalProps) => {\n  const { closeModal, updateActiveQuery, queryText, activeQuery } =\n    useGrantMatchContext();\n  const { files, uploadFiles, removeFile, errorMessage } = useFileDrop(\n    activeQuery.files,\n  );\n\n  const onClickFind = () => {\n    findGrantsCallback?.();\n    updateActiveQuery({ files, text: queryText });\n    closeModal();\n  };\n\n  const onClickClose = () => {\n    closeModalCallback?.();\n    closeModal();\n  };\n\n  return (\n    <Modal width=\"600px\" height=\"560px\">\n      <ModalHeader />\n\n      <ModalBody>\n        <ModalContent\n          files={files}\n          uploadFiles={uploadFiles}\n          removeFile={removeFile}\n          errorMessage={errorMessage}\n        />\n      </ModalBody>\n\n      <ModalFooter\n        files={files}\n        onClickFind={onClickFind}\n        onClickClose={onClickClose}\n      />\n    </Modal>\n  );\n};\n\nexport default GrantMatchModal;\n\nconst ModalHeader = () => (\n  <BaseModalHeader>\n    <GrantMatchLogo\n      src={grantMatchLogo}\n      alt=\"Grant Match\"\n      width={64}\n      height={64}\n    />\n    <p>Let us get you matched to the most suitable grant</p>\n  </BaseModalHeader>\n);\n\nconst BaseModalHeader = styled.div`\n  display: flex;\n  align-items: center;\n  gap: ${Spacing.px16};\n\n  margin-bottom: ${Spacing.px12};\n  padding: ${Spacing.px12} ${Spacing.px20};\n\n  border-bottom: 1px solid ${Color.neutral.grey3};\n\n  ${applyTypography(Typography.subheading2Medium)}\n`;\n\nconst GrantMatchLogo = styled(Image)`\n  width: ${Spacing.px24};\n  height: ${Spacing.px24};\n\n  box-shadow: 0px 0px 5px 5px #ffe2b680;\n  border-radius: 120px;\n`;\n\nconst ModalBody = styled.div`\n  display: flex;\n  flex-direction: column;\n\n  height: 100%;\n  overflow-y: auto;\n`;\n\ntype ModalContentProps = {\n  files: File[];\n  uploadFiles: (acceptedFiles: File[]) => void;\n  removeFile: (fileName: string) => void;\n  errorMessage?: string;\n};\n\nconst ModalContent = ({\n  files,\n  uploadFiles,\n  removeFile,\n  errorMessage,\n}: ModalContentProps) => {\n  const { queryText, updateQueryText } = useGrantMatchContext();\n\n  return (\n    <BaseContent>\n      <ModalFileDrop>\n        <p>Upload Files (e.g. Project Plan, Proposal, Company Docs)</p>\n        <FileDrop\n          uploadedFiles={files}\n          uploadFiles={uploadFiles}\n          removeFile={removeFile}\n          errorMessage={errorMessage}\n        />\n      </ModalFileDrop>\n\n      <ModalQueryText>\n        <label htmlFor={textareaId}>Tell us what you intend to do</label>\n        <Textarea\n          id={textareaId}\n          value={queryText}\n          onChange={(event) => updateQueryText(event.target.value)}\n          placeholder={textareaPlaceholder}\n        />\n      </ModalQueryText>\n    </BaseContent>\n  );\n};\n\nconst textareaId = \"query-textarea\";\nconst textareaPlaceholder =\n  \"Give a summary of your project, specifying the key activities you will do & what you intend to achieve\";\n\nconst BaseContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: ${Spacing.px12};\n\n  width: 100%;\n  height: 100%;\n  min-height: ${Spacing.px100};\n\n  padding: ${Spacing.px4} ${Spacing.px20};\n  border: none;\n`;\n\nconst ModalFileDrop = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\nconst ModalQueryText = styled.div`\n  display: flex;\n  flex-direction: column;\n`;\n\ntype ModalFooterProps = {\n  files: File[];\n  onClickFind: MouseEventHandler<HTMLElement>;\n  onClickClose: MouseEventHandler<HTMLElement>;\n};\n\nconst ModalFooter = ({\n  files,\n  onClickFind,\n  onClickClose,\n}: ModalFooterProps) => {\n  const { queryText } = useGrantMatchContext();\n  const hasQuery = queryText.trim() !== \"\" || files.length > 0;\n\n  return (\n    <BaseModalFooter>\n      <Button\n        label=\"Close\"\n        onClick={onClickClose}\n        variant=\"tertiary\"\n        size=\"small\"\n      />\n\n      <Button\n        label=\"Find My Grants\"\n        disabled={!hasQuery}\n        onClick={onClickFind}\n        variant=\"secondary\"\n        size=\"small\"\n      />\n    </BaseModalFooter>\n  );\n};\n\nconst BaseModalFooter = styled.div`\n  display: flex;\n  justify-content: space-between;\n  gap: ${Spacing.px12};\n\n  padding: ${Spacing.px16} ${Spacing.px20};\n`;\n"]}