@grantbii/design-system 1.10.0 → 1.11.0

package/core/atoms/Badge.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import { Colors, Icons, Responsive, Typography } from "../foundations";
+import { Colors, Icons, Responsive } from "../foundations";
+import { HelperFontSize } from "../integrations";
 const Badge = ({ label, Icon, iconSize = 20, iconWeight = "regular", onClick, onClickClose, labelWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { onClick: onClick, "$clickable": !!onClick, "$backgroundColor": backgroundColor, "$color": color, children: [_jsxs(BadgeContent, { "$closeable": !!onClickClose, "$widthPixels": labelWidthPixels, children: [Icon ? (_jsx(IconContainer, { children: _jsx(Icon, { color: color, size: iconSize, weight: iconWeight }) })) : (_jsx(_Fragment, {})), _jsx(BadgeLabel, { children: label })] }), onClickClose ? _jsx(CloseButton, { onClick: onClickClose }) : _jsx(_Fragment, {})] }));
 export default Badge;
 const BaseBadge = styled.div `
@@ -48,13 +49,7 @@ const BadgeLabel = styled.div `
 
   font-weight: 500;
 
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    font-size: ${Typography.HELPER_FONT_SIZES.small};
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    font-size: ${Typography.HELPER_FONT_SIZES.large};
-  }
+  ${HelperFontSize}
 `;
 const CloseButton = ({ onClick }) => (_jsx(BaseCloseButton, { type: "button", onClick: onClick, children: _jsx(Icons.XIcon, { size: 12 }) }));
 const BaseCloseButton = styled.button `

package/core/atoms/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/atoms/Badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentType, MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, Icons, Responsive, Typography } from \"../foundations\";\n\nexport type BadgeProps = {\n  label: ReactNode;\n  Icon?: ComponentType<Icons.IconProps>;\n  iconSize?: string | number;\n  iconWeight?: Icons.IconWeight;\n  onClick?: MouseEventHandler<HTMLDivElement>;\n  onClickClose?: MouseEventHandler<HTMLButtonElement>;\n  labelWidthPixels?: number;\n  backgroundColor?: string;\n  color?: string;\n};\n\nconst Badge = ({\n  label,\n  Icon,\n  iconSize = 20,\n  iconWeight = \"regular\",\n  onClick,\n  onClickClose,\n  labelWidthPixels,\n  backgroundColor,\n  color,\n}: BadgeProps) => (\n  <BaseBadge\n    onClick={onClick}\n    $clickable={!!onClick}\n    $backgroundColor={backgroundColor}\n    $color={color}\n  >\n    <BadgeContent $closeable={!!onClickClose} $widthPixels={labelWidthPixels}>\n      {Icon ? (\n        <IconContainer>\n          <Icon color={color} size={iconSize} weight={iconWeight} />\n        </IconContainer>\n      ) : (\n        <></>\n      )}\n\n      <BadgeLabel>{label}</BadgeLabel>\n    </BadgeContent>\n\n    {onClickClose ? <CloseButton onClick={onClickClose} /> : <></>}\n  </BaseBadge>\n);\n\nexport default Badge;\n\nconst BaseBadge = styled.div<{\n  $clickable?: boolean;\n  $backgroundColor?: string;\n  $color?: string;\n}>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n\n  padding: 5px 15px;\n  border-radius: 120px;\n\n  color: ${({ $color = Colors.typography.blackHigh }) => $color};\n  background-color: ${({ $backgroundColor = Colors.neutral.grey3 }) =>\n    $backgroundColor};\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    min-height: 27px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    min-height: 30px;\n  }\n\n  cursor: ${({ $clickable = false }) => ($clickable ? \"pointer\" : \"auto\")};\n`;\n\nconst BadgeContent = styled.div<{\n  $closeable: boolean;\n  $widthPixels?: number;\n}>`\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : \"auto\")};\n  max-width: ${({ $closeable }) => ($closeable ? \"calc(100% - 20px)\" : \"auto\")};\n`;\n\nconst IconContainer = styled.div<{ $iconSize?: string | number }>`\n  display: flex;\n  flex-direction: column;\n\n  width: ${({ $iconSize = \"auto\" }) => $iconSize};\n  min-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n  max-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n`;\n\nconst BadgeLabel = styled.div`\n  overflow-x: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  font-weight: 500;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.HELPER_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.HELPER_FONT_SIZES.large};\n  }\n`;\n\ntype CloseButtonProps = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst CloseButton = ({ onClick }: CloseButtonProps) => (\n  <BaseCloseButton type=\"button\" onClick={onClick}>\n    <Icons.XIcon size={12} />\n  </BaseCloseButton>\n);\n\nconst BaseCloseButton = styled.button`\n  display: flex;\n  flex-direction: column;\n\n  min-width: 12px;\n`;\n"]}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../core/atoms/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAcjD,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,SAAS,EACtB,OAAO,EACP,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,KAAK,GACM,EAAE,EAAE,CAAC,CAChB,MAAC,SAAS,IACR,OAAO,EAAE,OAAO,gBACJ,CAAC,CAAC,OAAO,sBACH,eAAe,YACzB,KAAK,aAEb,MAAC,YAAY,kBAAa,CAAC,CAAC,YAAY,kBAAgB,gBAAgB,aACrE,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,aAAa,cACZ,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,GAAI,GAC5C,CACjB,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,EAED,KAAC,UAAU,cAAE,KAAK,GAAc,IACnB,EAEd,YAAY,CAAC,CAAC,CAAC,KAAC,WAAW,IAAC,OAAO,EAAE,YAAY,GAAI,CAAC,CAAC,CAAC,mBAAK,IACpD,CACb,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAI1B;;;;;;;;;WASS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACzC,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,CAClE,gBAAgB;;oBAEA,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;qBAIlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;YAI5C,CAAC,EAAE,UAAU,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;CACxE,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAG7B;;;;;WAKS,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC;eAC/D,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM,CAAC;CAC7E,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAiC;;;;WAItD,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACjC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;eACrC,CAAC,EAAE,SAAS,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS;CACnD,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;IAOzB,cAAc;CACjB,CAAC;AAMF,MAAM,WAAW,GAAG,CAAC,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CACrD,KAAC,eAAe,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,YAC7C,KAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAE,EAAE,GAAI,GACT,CACnB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;CAKpC,CAAC","sourcesContent":["import type { ComponentType, MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, Icons, Responsive } from \"../foundations\";\nimport { HelperFontSize } from \"../integrations\";\n\nexport type BadgeProps = {\n  label: ReactNode;\n  Icon?: ComponentType<Icons.IconProps>;\n  iconSize?: string | number;\n  iconWeight?: Icons.IconWeight;\n  onClick?: MouseEventHandler<HTMLDivElement>;\n  onClickClose?: MouseEventHandler<HTMLButtonElement>;\n  labelWidthPixels?: number;\n  backgroundColor?: string;\n  color?: string;\n};\n\nconst Badge = ({\n  label,\n  Icon,\n  iconSize = 20,\n  iconWeight = \"regular\",\n  onClick,\n  onClickClose,\n  labelWidthPixels,\n  backgroundColor,\n  color,\n}: BadgeProps) => (\n  <BaseBadge\n    onClick={onClick}\n    $clickable={!!onClick}\n    $backgroundColor={backgroundColor}\n    $color={color}\n  >\n    <BadgeContent $closeable={!!onClickClose} $widthPixels={labelWidthPixels}>\n      {Icon ? (\n        <IconContainer>\n          <Icon color={color} size={iconSize} weight={iconWeight} />\n        </IconContainer>\n      ) : (\n        <></>\n      )}\n\n      <BadgeLabel>{label}</BadgeLabel>\n    </BadgeContent>\n\n    {onClickClose ? <CloseButton onClick={onClickClose} /> : <></>}\n  </BaseBadge>\n);\n\nexport default Badge;\n\nconst BaseBadge = styled.div<{\n  $clickable?: boolean;\n  $backgroundColor?: string;\n  $color?: string;\n}>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n\n  padding: 5px 15px;\n  border-radius: 120px;\n\n  color: ${({ $color = Colors.typography.blackHigh }) => $color};\n  background-color: ${({ $backgroundColor = Colors.neutral.grey3 }) =>\n    $backgroundColor};\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    min-height: 27px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    min-height: 30px;\n  }\n\n  cursor: ${({ $clickable = false }) => ($clickable ? \"pointer\" : \"auto\")};\n`;\n\nconst BadgeContent = styled.div<{\n  $closeable: boolean;\n  $widthPixels?: number;\n}>`\n  display: flex;\n  align-items: center;\n  gap: 10px;\n\n  width: ${({ $widthPixels }) => ($widthPixels ? `${$widthPixels}px` : \"auto\")};\n  max-width: ${({ $closeable }) => ($closeable ? \"calc(100% - 20px)\" : \"auto\")};\n`;\n\nconst IconContainer = styled.div<{ $iconSize?: string | number }>`\n  display: flex;\n  flex-direction: column;\n\n  width: ${({ $iconSize = \"auto\" }) => $iconSize};\n  min-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n  max-width: ${({ $iconSize = \"auto\" }) => $iconSize};\n`;\n\nconst BadgeLabel = styled.div`\n  overflow-x: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  font-weight: 500;\n\n  ${HelperFontSize}\n`;\n\ntype CloseButtonProps = {\n  onClick: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst CloseButton = ({ onClick }: CloseButtonProps) => (\n  <BaseCloseButton type=\"button\" onClick={onClick}>\n    <Icons.XIcon size={12} />\n  </BaseCloseButton>\n);\n\nconst BaseCloseButton = styled.button`\n  display: flex;\n  flex-direction: column;\n\n  min-width: 12px;\n`;\n"]}

package/core/molecules/FileDrop.js

@@ -3,7 +3,8 @@ import { useState } from "react";
 import { useDropzone } from "react-dropzone";
 import styled from "styled-components";
 import { FILE_TYPE_ICON_MAP } from "../atoms/shared";
-import { Colors, Icons, Responsive, Typography } from "../foundations";
+import { Colors, Icons } from "../foundations";
+import { BodyFontSize, HelperFontSize } from "../integrations";
 import Badges from "./Badges";
 const DEFAULT_MAX_FILE_SIZE_MB = 5;
 const DEFAULT_MAX_FILES = 5;
@@ -57,13 +58,7 @@ const DropzoneText = styled.p `
 
   font-weight: 500;
 
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    font-size: ${Typography.BODY_FONT_SIZES.small};
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    font-size: ${Typography.BODY_FONT_SIZES.large};
-  }
+  ${BodyFontSize}
 `;
 const DropzoneSubtitle = styled.p `
   text-align: center;
@@ -72,13 +67,7 @@ const DropzoneSubtitle = styled.p `
 
   color: ${({ $isHighlighted = false }) => $isHighlighted ? Colors.accent.yellow1 : Colors.typography.blackLow};
 
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    font-size: ${Typography.HELPER_FONT_SIZES.small};
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    font-size: ${Typography.HELPER_FONT_SIZES.large};
-  }
+  ${HelperFontSize}
 `;
 const ErrorMessage = styled.p `
   color: ${Colors.accent.red1};

package/core/molecules/FileDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../core/molecules/FileDrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport styled from \"styled-components\";\nimport { FILE_TYPE_ICON_MAP } from \"../atoms/shared\";\nimport { Colors, Icons, Responsive, Typography } from \"../foundations\";\nimport Badges from \"./Badges\";\n\nconst DEFAULT_MAX_FILE_SIZE_MB = 5;\nconst DEFAULT_MAX_FILES = 5;\n\ntype FileDropzoneProps = {\n  uploadedFiles: File[];\n  uploadFiles: (acceptedFiles: File[]) => void;\n  removeFile: (fileName: string) => void;\n  errorMessage?: string;\n  maxFiles?: number;\n  maxSizeMB?: number;\n};\n\nconst FileDrop = ({\n  uploadedFiles,\n  uploadFiles,\n  removeFile,\n  errorMessage,\n  maxFiles = DEFAULT_MAX_FILES,\n  maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB,\n}: FileDropzoneProps) => {\n  const reachedMaxUploads = uploadedFiles.length >= maxFiles;\n\n  const { getInputProps, getRootProps } = useDropzone({\n    onDrop: uploadFiles,\n    accept: {\n      \"application/pdf\": [\".pdf\"],\n      \"image/jpeg\": [\".jpeg\", \".jpg\"],\n      \"image/png\": [\".png\"],\n    },\n    disabled: reachedMaxUploads,\n    noClick: reachedMaxUploads,\n    noDrag: reachedMaxUploads,\n    multiple: true,\n  });\n\n  return (\n    <BaseFileDrop>\n      <Dropzone\n        {...getRootProps()}\n        $reachedMaxUploads={reachedMaxUploads}\n        $hasError={!!errorMessage}\n      >\n        <input {...getInputProps()} type=\"file\" />\n        <DropzoneContent maxFiles={maxFiles} maxSizeMB={maxSizeMB} />\n      </Dropzone>\n\n      {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : <></>}\n\n      <UploadedFiles uploadedFiles={uploadedFiles} removeFile={removeFile} />\n    </BaseFileDrop>\n  );\n};\n\nexport default FileDrop;\n\nconst BaseFileDrop = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n`;\n\nconst Dropzone = styled.div<{\n  $reachedMaxUploads: boolean;\n  $hasError: boolean;\n}>`\n  padding: 40px;\n  border-radius: 8px;\n  border: 1px solid\n    ${({ $hasError }) =>\n      $hasError ? Colors.accent.red1 : Colors.neutral.grey3};\n\n  &:hover {\n    cursor: ${({ $reachedMaxUploads }) =>\n      $reachedMaxUploads ? \"not-allowed\" : \"pointer\"};\n  }\n`;\n\ntype DropzoneContentProps = {\n  maxFiles: number;\n  maxSizeMB: number;\n};\n\nconst DropzoneContent = ({ maxFiles, maxSizeMB }: DropzoneContentProps) => (\n  <BaseDropzoneContent>\n    <Icons.FileDashedIcon\n      weight=\"thin\"\n      size={48}\n      color={Colors.neutral.grey1}\n    />\n    <AllDropzoneText>\n      <DropzoneText>\n        {`Drop up to ${maxFiles} files here (up to ${maxSizeMB}MB each)`}\n      </DropzoneText>\n\n      <DropzoneSubtitle $isHighlighted>\n        or click to browse with your file explorer\n      </DropzoneSubtitle>\n\n      <DropzoneSubtitle>Accepted file formats: pdf, png, jpg</DropzoneSubtitle>\n    </AllDropzoneText>\n  </BaseDropzoneContent>\n);\n\nconst BaseDropzoneContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  align-items: center;\n`;\n\nconst AllDropzoneText = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n`;\n\nconst DropzoneText = styled.p`\n  text-align: center;\n\n  font-weight: 500;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.BODY_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.BODY_FONT_SIZES.large};\n  }\n`;\n\nconst DropzoneSubtitle = styled.p<{ $isHighlighted?: boolean }>`\n  text-align: center;\n\n  font-weight: 400;\n\n  color: ${({ $isHighlighted = false }) =>\n    $isHighlighted ? Colors.accent.yellow1 : Colors.typography.blackLow};\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.HELPER_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.HELPER_FONT_SIZES.large};\n  }\n`;\n\nconst ErrorMessage = styled.p`\n  color: ${Colors.accent.red1};\n`;\n\ntype UploadedFilesProps = {\n  uploadedFiles: File[];\n  removeFile: (fileName: string) => void;\n};\n\nconst UploadedFiles = ({ uploadedFiles, removeFile }: UploadedFilesProps) => {\n  const fileBadgesProps = uploadedFiles.map(\n    ({ name: fileName, type: fileType }) => ({\n      label: getFileNameWithoutExtension(fileName),\n      onClickClose: () => removeFile(fileName),\n      Icon: FILE_TYPE_ICON_MAP[fileType] ?? Icons.FileIcon,\n    }),\n  );\n\n  return <Badges allBadgeProps={fileBadgesProps} vertical />;\n};\n\nexport const useFileDrop = (\n  initialFiles: File[] = [],\n  maxFiles: number = DEFAULT_MAX_FILES,\n  maxSizeMB: number = DEFAULT_MAX_FILE_SIZE_MB,\n) => {\n  const [files, setFiles] = useState<File[]>(() => initialFiles);\n  const [errorMessage, setErrorMessage] = useState<string | undefined>();\n\n  const uploadFiles = (acceptedFiles: File[]) => {\n    if (files.length + acceptedFiles.length > maxFiles) {\n      setErrorMessage(() => `Maximum upload limit is ${maxFiles} files`);\n    } else if (anyFileTooLarge(acceptedFiles, maxSizeMB)) {\n      setErrorMessage(() => `Maximum file size is ${maxSizeMB}MB`);\n    } else {\n      setErrorMessage(() => undefined);\n      setFiles((previousFiles) =>\n        combineFilesWithoutDuplicates(previousFiles, acceptedFiles),\n      );\n    }\n  };\n\n  const removeFile = (fileName: string) => {\n    setErrorMessage(() => undefined);\n    setFiles((previousFiles) => filterFilesByName(previousFiles, fileName));\n  };\n\n  return {\n    files,\n    uploadFiles,\n    removeFile,\n    errorMessage,\n  };\n};\n\nconst anyFileTooLarge = (files: File[], maxSizeMB: number): boolean =>\n  files.some((file) => file.size > convertMegabytesToBytes(maxSizeMB));\n\nconst convertMegabytesToBytes = (megabytes: number): number =>\n  megabytes * 1024 * 1024;\n\nconst combineFilesWithoutDuplicates = (\n  oldFiles: File[],\n  newFiles: File[],\n): File[] => {\n  const newFileNames = newFiles.map((file) => file.name);\n  const keptOldFiles = oldFiles.filter(\n    (oldFile) => !newFileNames.includes(oldFile.name),\n  );\n\n  return [...keptOldFiles, ...newFiles];\n};\n\nconst filterFilesByName = (files: File[], fileName: string): File[] =>\n  files.filter((file) => file.name !== fileName);\n\nconst getFileNameWithoutExtension = (fileName: string): string =>\n  fileName.substring(0, fileName.lastIndexOf(\".\"));\n"]}
+{"version":3,"file":"FileDrop.js","sourceRoot":"","sources":["../../../core/molecules/FileDrop.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { useDropzone } from \"react-dropzone\";\nimport styled from \"styled-components\";\nimport { FILE_TYPE_ICON_MAP } from \"../atoms/shared\";\nimport { Colors, Icons } from \"../foundations\";\nimport { BodyFontSize, HelperFontSize } from \"../integrations\";\nimport Badges from \"./Badges\";\n\nconst DEFAULT_MAX_FILE_SIZE_MB = 5;\nconst DEFAULT_MAX_FILES = 5;\n\ntype FileDropzoneProps = {\n  uploadedFiles: File[];\n  uploadFiles: (acceptedFiles: File[]) => void;\n  removeFile: (fileName: string) => void;\n  errorMessage?: string;\n  maxFiles?: number;\n  maxSizeMB?: number;\n};\n\nconst FileDrop = ({\n  uploadedFiles,\n  uploadFiles,\n  removeFile,\n  errorMessage,\n  maxFiles = DEFAULT_MAX_FILES,\n  maxSizeMB = DEFAULT_MAX_FILE_SIZE_MB,\n}: FileDropzoneProps) => {\n  const reachedMaxUploads = uploadedFiles.length >= maxFiles;\n\n  const { getInputProps, getRootProps } = useDropzone({\n    onDrop: uploadFiles,\n    accept: {\n      \"application/pdf\": [\".pdf\"],\n      \"image/jpeg\": [\".jpeg\", \".jpg\"],\n      \"image/png\": [\".png\"],\n    },\n    disabled: reachedMaxUploads,\n    noClick: reachedMaxUploads,\n    noDrag: reachedMaxUploads,\n    multiple: true,\n  });\n\n  return (\n    <BaseFileDrop>\n      <Dropzone\n        {...getRootProps()}\n        $reachedMaxUploads={reachedMaxUploads}\n        $hasError={!!errorMessage}\n      >\n        <input {...getInputProps()} type=\"file\" />\n        <DropzoneContent maxFiles={maxFiles} maxSizeMB={maxSizeMB} />\n      </Dropzone>\n\n      {errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : <></>}\n\n      <UploadedFiles uploadedFiles={uploadedFiles} removeFile={removeFile} />\n    </BaseFileDrop>\n  );\n};\n\nexport default FileDrop;\n\nconst BaseFileDrop = styled.div`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n`;\n\nconst Dropzone = styled.div<{\n  $reachedMaxUploads: boolean;\n  $hasError: boolean;\n}>`\n  padding: 40px;\n  border-radius: 8px;\n  border: 1px solid\n    ${({ $hasError }) =>\n      $hasError ? Colors.accent.red1 : Colors.neutral.grey3};\n\n  &:hover {\n    cursor: ${({ $reachedMaxUploads }) =>\n      $reachedMaxUploads ? \"not-allowed\" : \"pointer\"};\n  }\n`;\n\ntype DropzoneContentProps = {\n  maxFiles: number;\n  maxSizeMB: number;\n};\n\nconst DropzoneContent = ({ maxFiles, maxSizeMB }: DropzoneContentProps) => (\n  <BaseDropzoneContent>\n    <Icons.FileDashedIcon\n      weight=\"thin\"\n      size={48}\n      color={Colors.neutral.grey1}\n    />\n    <AllDropzoneText>\n      <DropzoneText>\n        {`Drop up to ${maxFiles} files here (up to ${maxSizeMB}MB each)`}\n      </DropzoneText>\n\n      <DropzoneSubtitle $isHighlighted>\n        or click to browse with your file explorer\n      </DropzoneSubtitle>\n\n      <DropzoneSubtitle>Accepted file formats: pdf, png, jpg</DropzoneSubtitle>\n    </AllDropzoneText>\n  </BaseDropzoneContent>\n);\n\nconst BaseDropzoneContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n  align-items: center;\n`;\n\nconst AllDropzoneText = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n`;\n\nconst DropzoneText = styled.p`\n  text-align: center;\n\n  font-weight: 500;\n\n  ${BodyFontSize}\n`;\n\nconst DropzoneSubtitle = styled.p<{ $isHighlighted?: boolean }>`\n  text-align: center;\n\n  font-weight: 400;\n\n  color: ${({ $isHighlighted = false }) =>\n    $isHighlighted ? Colors.accent.yellow1 : Colors.typography.blackLow};\n\n  ${HelperFontSize}\n`;\n\nconst ErrorMessage = styled.p`\n  color: ${Colors.accent.red1};\n`;\n\ntype UploadedFilesProps = {\n  uploadedFiles: File[];\n  removeFile: (fileName: string) => void;\n};\n\nconst UploadedFiles = ({ uploadedFiles, removeFile }: UploadedFilesProps) => {\n  const fileBadgesProps = uploadedFiles.map(\n    ({ name: fileName, type: fileType }) => ({\n      label: getFileNameWithoutExtension(fileName),\n      onClickClose: () => removeFile(fileName),\n      Icon: FILE_TYPE_ICON_MAP[fileType] ?? Icons.FileIcon,\n    }),\n  );\n\n  return <Badges allBadgeProps={fileBadgesProps} vertical />;\n};\n\nexport const useFileDrop = (\n  initialFiles: File[] = [],\n  maxFiles: number = DEFAULT_MAX_FILES,\n  maxSizeMB: number = DEFAULT_MAX_FILE_SIZE_MB,\n) => {\n  const [files, setFiles] = useState<File[]>(() => initialFiles);\n  const [errorMessage, setErrorMessage] = useState<string | undefined>();\n\n  const uploadFiles = (acceptedFiles: File[]) => {\n    if (files.length + acceptedFiles.length > maxFiles) {\n      setErrorMessage(() => `Maximum upload limit is ${maxFiles} files`);\n    } else if (anyFileTooLarge(acceptedFiles, maxSizeMB)) {\n      setErrorMessage(() => `Maximum file size is ${maxSizeMB}MB`);\n    } else {\n      setErrorMessage(() => undefined);\n      setFiles((previousFiles) =>\n        combineFilesWithoutDuplicates(previousFiles, acceptedFiles),\n      );\n    }\n  };\n\n  const removeFile = (fileName: string) => {\n    setErrorMessage(() => undefined);\n    setFiles((previousFiles) => filterFilesByName(previousFiles, fileName));\n  };\n\n  return {\n    files,\n    uploadFiles,\n    removeFile,\n    errorMessage,\n  };\n};\n\nconst anyFileTooLarge = (files: File[], maxSizeMB: number): boolean =>\n  files.some((file) => file.size > convertMegabytesToBytes(maxSizeMB));\n\nconst convertMegabytesToBytes = (megabytes: number): number =>\n  megabytes * 1024 * 1024;\n\nconst combineFilesWithoutDuplicates = (\n  oldFiles: File[],\n  newFiles: File[],\n): File[] => {\n  const newFileNames = newFiles.map((file) => file.name);\n  const keptOldFiles = oldFiles.filter(\n    (oldFile) => !newFileNames.includes(oldFile.name),\n  );\n\n  return [...keptOldFiles, ...newFiles];\n};\n\nconst filterFilesByName = (files: File[], fileName: string): File[] =>\n  files.filter((file) => file.name !== fileName);\n\nconst getFileNameWithoutExtension = (fileName: string): string =>\n  fileName.substring(0, fileName.lastIndexOf(\".\"));\n"]}

package/core/organisms/GrantMatch/SearchBar.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { HelperFontSize } from "@/core/integrations";
 import Image from "next/image";
 import styled, { css } from "styled-components";
 import grantMatchLogo from "../../assets/logos/grant_match_logo.webp";
-import { Colors, Icons, Responsive, Typography } from "../../foundations";
+import { Colors, Icons, Responsive } from "../../foundations";
 import { useGrantMatchContext } from "./context";
 const SearchBar = ({ textSearchCallback, openModalCallback, }) => {
     const { activeQuery, queryText } = useGrantMatchContext();
@@ -149,18 +150,18 @@ const BaseOpenModalButton = styled.button `
           color: ${Colors.main.grantbiiOrange};
         `}
 
+  ${HelperFontSize}
+
   @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
     width: 38px;
     min-width: 38px;
     padding: 0px;
-    font-size: ${Typography.HELPER_FONT_SIZES.small};
   }
 
   @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
     width: 238px;
     min-width: 238px;
     padding: 2px 12px;
-    font-size: ${Typography.HELPER_FONT_SIZES.large};
   }
 `;
 const GrantMatchLogo = styled(Image) `

package/core/organisms/GrantMatch/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import Image from \"next/image\";\nimport type { KeyboardEvent } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport grantMatchLogo from \"../../assets/logos/grant_match_logo.webp\";\nimport { Colors, Icons, Responsive, Typography } from \"../../foundations\";\nimport { useGrantMatchContext } from \"./context\";\n\ntype SearchBarProps = {\n  textSearchCallback?: () => void;\n  openModalCallback?: () => void;\n};\n\nconst SearchBar = ({\n  textSearchCallback,\n  openModalCallback,\n}: SearchBarProps) => {\n  const { activeQuery, queryText } = useGrantMatchContext();\n\n  return (\n    <BaseSearchBar>\n      <TextSearchArea $showBorder={activeQuery.text !== \"\"}>\n        <QueryTextInput />\n\n        {queryText !== \"\" ? (\n          <ResetTextButton />\n        ) : (\n          <ResetTextButtonPlaceholder />\n        )}\n      </TextSearchArea>\n\n      <TextSearchButton textSearchCallback={textSearchCallback} />\n      <VerticalDivider />\n      <OpenModalButton openModalCallback={openModalCallback} />\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\n  width: 100%;\n\n  color: ${Colors.typography.blackHigh};\n  background-color: ${Colors.base.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\nconst TextSearchArea = styled.div<{ $showBorder: boolean }>`\n  display: flex;\n  align-items: center;\n\n  width: 100%;\n\n  background-color: ${Colors.neutral.grey4};\n  border-radius: 8px;\n\n  border: 1px solid\n    ${({ $showBorder }) =>\n      $showBorder ? Colors.main.grantbiiOrange : Colors.neutral.grey4};\n`;\n\nconst QueryTextInput = () => {\n  const { activeQuery, updateActiveQuery, queryText, updateQueryText } =\n    useGrantMatchContext();\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Enter\" && !event.repeat) {\n      event.preventDefault();\n      updateActiveQuery({ files: activeQuery.files, text: queryText });\n    }\n  };\n\n  return (\n    <BaseQueryTextInput\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 BaseQueryTextInput = styled.input`\n  width: 100%;\n  margin-left: 16px;\n  outline: none;\n  border: none;\n\n  background-color: ${Colors.neutral.grey4};\n  text-overflow: ellipsis;\n`;\n\nconst IconButton = css`\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 ResetTextButton = () => {\n  const { activeQuery, updateActiveQuery, updateQueryText } =\n    useGrantMatchContext();\n\n  const onClick = () => {\n    updateQueryText(\"\");\n    updateActiveQuery({ files: activeQuery.files, text: \"\" });\n  };\n\n  return (\n    <BaseResetTextButton type=\"button\" onClick={onClick}>\n      <Icons.XIcon size={20} color={Colors.neutral.grey1} />\n    </BaseResetTextButton>\n  );\n};\n\nconst BaseResetTextButton = styled.button`\n  ${IconButton}\n\n  background-color: ${Colors.neutral.grey4};\n  border: 1px solid ${Colors.neutral.grey4};\n`;\n\nconst ResetTextButtonPlaceholder = styled.div`\n  width: 40px;\n  height: 40px;\n\n  background-color: ${Colors.neutral.grey4};\n  border-radius: 8px;\n`;\n\ntype TextSearchButtonProps = {\n  textSearchCallback?: () => void;\n};\n\nconst TextSearchButton = ({ textSearchCallback }: TextSearchButtonProps) => {\n  const { activeQuery, updateActiveQuery, queryText } = useGrantMatchContext();\n\n  const onClickSearch = () => {\n    if (textSearchCallback) {\n      textSearchCallback();\n    }\n\n    updateActiveQuery({ files: activeQuery.files, text: queryText });\n  };\n\n  return (\n    <BaseSearchButton type=\"button\" onClick={onClickSearch}>\n      <Icons.MagnifyingGlassIcon size={20} color={Colors.base.white} />\n    </BaseSearchButton>\n  );\n};\n\nconst BaseSearchButton = styled.button`\n  ${IconButton}\n\n  background-color: ${Colors.main.grantbiiBlue};\n  border: 1px solid ${Colors.main.grantbiiBlue};\n`;\n\nconst VerticalDivider = styled.div`\n  height: 40px;\n  border-left: 1px solid ${Colors.neutral.grey2};\n`;\n\ntype OpenModalButtonProps = {\n  openModalCallback?: () => void;\n};\n\nconst OpenModalButton = ({ openModalCallback }: OpenModalButtonProps) => {\n  const { activeQuery, openModal } = useGrantMatchContext();\n\n  const onClickOpen = () => {\n    if (openModalCallback) {\n      openModalCallback();\n    }\n\n    openModal();\n  };\n\n  return (\n    <BaseOpenModalButton\n      onClick={onClickOpen}\n      $hasActiveQueryFiles={activeQuery.files.length > 0}\n    >\n      <GrantMatchLogo\n        src={grantMatchLogo}\n        alt=\"Grant Match\"\n        width={64}\n        height={64}\n      />\n      <OpenModalButtonText>Get Personalized Grant Matches</OpenModalButtonText>\n    </BaseOpenModalButton>\n  );\n};\n\nconst BaseOpenModalButton = styled.button<{ $hasActiveQueryFiles: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n\n  height: 38px;\n\n  border: 1px solid ${Colors.main.grantbiiOrange};\n  border-radius: 8px;\n\n  ${({ $hasActiveQueryFiles }) =>\n    $hasActiveQueryFiles\n      ? css`\n          background-color: ${Colors.main.grantbiiOrange};\n          color: ${Colors.typography.whiteHigh};\n        `\n      : css`\n          background-color: ${Colors.base.white};\n          color: ${Colors.main.grantbiiOrange};\n        `}\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 38px;\n    min-width: 38px;\n    padding: 0px;\n    font-size: ${Typography.HELPER_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 238px;\n    min-width: 238px;\n    padding: 2px 12px;\n    font-size: ${Typography.HELPER_FONT_SIZES.large};\n  }\n`;\n\nconst GrantMatchLogo = styled(Image)`\n  width: 18px;\n  height: 18px;\n\n  box-shadow: 0px 0px 3px 3px #ffe2b680;\n  border-radius: 120px;\n`;\n\nconst OpenModalButtonText = styled.p`\n  font-weight: 500;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    display: none;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    display: inline;\n  }\n`;\n"]}
+{"version":3,"file":"SearchBar.js","sourceRoot":"","sources":["../../../../core/organisms/GrantMatch/SearchBar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HelperFontSize } from \"@/core/integrations\";\nimport Image from \"next/image\";\nimport type { KeyboardEvent } from \"react\";\nimport styled, { css } from \"styled-components\";\nimport grantMatchLogo from \"../../assets/logos/grant_match_logo.webp\";\nimport { Colors, Icons, Responsive } from \"../../foundations\";\nimport { useGrantMatchContext } from \"./context\";\n\ntype SearchBarProps = {\n  textSearchCallback?: () => void;\n  openModalCallback?: () => void;\n};\n\nconst SearchBar = ({\n  textSearchCallback,\n  openModalCallback,\n}: SearchBarProps) => {\n  const { activeQuery, queryText } = useGrantMatchContext();\n\n  return (\n    <BaseSearchBar>\n      <TextSearchArea $showBorder={activeQuery.text !== \"\"}>\n        <QueryTextInput />\n\n        {queryText !== \"\" ? (\n          <ResetTextButton />\n        ) : (\n          <ResetTextButtonPlaceholder />\n        )}\n      </TextSearchArea>\n\n      <TextSearchButton textSearchCallback={textSearchCallback} />\n      <VerticalDivider />\n      <OpenModalButton openModalCallback={openModalCallback} />\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\n  width: 100%;\n\n  color: ${Colors.typography.blackHigh};\n  background-color: ${Colors.base.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\nconst TextSearchArea = styled.div<{ $showBorder: boolean }>`\n  display: flex;\n  align-items: center;\n\n  width: 100%;\n\n  background-color: ${Colors.neutral.grey4};\n  border-radius: 8px;\n\n  border: 1px solid\n    ${({ $showBorder }) =>\n      $showBorder ? Colors.main.grantbiiOrange : Colors.neutral.grey4};\n`;\n\nconst QueryTextInput = () => {\n  const { activeQuery, updateActiveQuery, queryText, updateQueryText } =\n    useGrantMatchContext();\n\n  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Enter\" && !event.repeat) {\n      event.preventDefault();\n      updateActiveQuery({ files: activeQuery.files, text: queryText });\n    }\n  };\n\n  return (\n    <BaseQueryTextInput\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 BaseQueryTextInput = styled.input`\n  width: 100%;\n  margin-left: 16px;\n  outline: none;\n  border: none;\n\n  background-color: ${Colors.neutral.grey4};\n  text-overflow: ellipsis;\n`;\n\nconst IconButton = css`\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 ResetTextButton = () => {\n  const { activeQuery, updateActiveQuery, updateQueryText } =\n    useGrantMatchContext();\n\n  const onClick = () => {\n    updateQueryText(\"\");\n    updateActiveQuery({ files: activeQuery.files, text: \"\" });\n  };\n\n  return (\n    <BaseResetTextButton type=\"button\" onClick={onClick}>\n      <Icons.XIcon size={20} color={Colors.neutral.grey1} />\n    </BaseResetTextButton>\n  );\n};\n\nconst BaseResetTextButton = styled.button`\n  ${IconButton}\n\n  background-color: ${Colors.neutral.grey4};\n  border: 1px solid ${Colors.neutral.grey4};\n`;\n\nconst ResetTextButtonPlaceholder = styled.div`\n  width: 40px;\n  height: 40px;\n\n  background-color: ${Colors.neutral.grey4};\n  border-radius: 8px;\n`;\n\ntype TextSearchButtonProps = {\n  textSearchCallback?: () => void;\n};\n\nconst TextSearchButton = ({ textSearchCallback }: TextSearchButtonProps) => {\n  const { activeQuery, updateActiveQuery, queryText } = useGrantMatchContext();\n\n  const onClickSearch = () => {\n    if (textSearchCallback) {\n      textSearchCallback();\n    }\n\n    updateActiveQuery({ files: activeQuery.files, text: queryText });\n  };\n\n  return (\n    <BaseSearchButton type=\"button\" onClick={onClickSearch}>\n      <Icons.MagnifyingGlassIcon size={20} color={Colors.base.white} />\n    </BaseSearchButton>\n  );\n};\n\nconst BaseSearchButton = styled.button`\n  ${IconButton}\n\n  background-color: ${Colors.main.grantbiiBlue};\n  border: 1px solid ${Colors.main.grantbiiBlue};\n`;\n\nconst VerticalDivider = styled.div`\n  height: 40px;\n  border-left: 1px solid ${Colors.neutral.grey2};\n`;\n\ntype OpenModalButtonProps = {\n  openModalCallback?: () => void;\n};\n\nconst OpenModalButton = ({ openModalCallback }: OpenModalButtonProps) => {\n  const { activeQuery, openModal } = useGrantMatchContext();\n\n  const onClickOpen = () => {\n    if (openModalCallback) {\n      openModalCallback();\n    }\n\n    openModal();\n  };\n\n  return (\n    <BaseOpenModalButton\n      onClick={onClickOpen}\n      $hasActiveQueryFiles={activeQuery.files.length > 0}\n    >\n      <GrantMatchLogo\n        src={grantMatchLogo}\n        alt=\"Grant Match\"\n        width={64}\n        height={64}\n      />\n      <OpenModalButtonText>Get Personalized Grant Matches</OpenModalButtonText>\n    </BaseOpenModalButton>\n  );\n};\n\nconst BaseOpenModalButton = styled.button<{ $hasActiveQueryFiles: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n\n  height: 38px;\n\n  border: 1px solid ${Colors.main.grantbiiOrange};\n  border-radius: 8px;\n\n  ${({ $hasActiveQueryFiles }) =>\n    $hasActiveQueryFiles\n      ? css`\n          background-color: ${Colors.main.grantbiiOrange};\n          color: ${Colors.typography.whiteHigh};\n        `\n      : css`\n          background-color: ${Colors.base.white};\n          color: ${Colors.main.grantbiiOrange};\n        `}\n\n  ${HelperFontSize}\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 38px;\n    min-width: 38px;\n    padding: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 238px;\n    min-width: 238px;\n    padding: 2px 12px;\n  }\n`;\n\nconst GrantMatchLogo = styled(Image)`\n  width: 18px;\n  height: 18px;\n\n  box-shadow: 0px 0px 3px 3px #ffe2b680;\n  border-radius: 120px;\n`;\n\nconst OpenModalButtonText = styled.p`\n  font-weight: 500;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    display: none;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    display: inline;\n  }\n`;\n"]}

package/core/templates/ErrorFallback.d.ts

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

package/core/templates/ErrorFallback.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Image from "next/image";
+import styled from "styled-components";
+import errorLogo from "../assets/logos/error_logo.webp";
+import { Button } from "../atoms";
+import { Colors, Responsive } from "../foundations";
+import { BodyFontSize, SubheaderFontSize } from "../integrations";
+const ErrorFallback = ({ errorMessage = DEFAULT_ERROR_MESSAGE, errorDescription, onClickReload, }) => (_jsxs(BaseErrorFallback, { children: [_jsx(ErrorLogo, { src: errorLogo, width: 693, height: 641, alt: errorMessage }), _jsx(ErrorText, { errorMessage: errorMessage, errorDescription: errorDescription }), onClickReload ? (_jsx(Button, { label: "Try Again", onClick: onClickReload, backgroundColor: Colors.base.white, borderColor: Colors.neutral.grey3, color: Colors.typography.blackHigh })) : (_jsx(_Fragment, {}))] }));
+export default ErrorFallback;
+const DEFAULT_ERROR_MESSAGE = "Something went wrong";
+const BaseErrorFallback = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+  padding: 24px;
+
+  background-color: ${Colors.base.white};
+
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    gap: 16px;
+
+    border: none;
+    border-radius: 0px;
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    gap: 24px;
+
+    border: 1px solid ${Colors.neutral.grey3};
+    border-radius: 12px;
+  }
+`;
+const ErrorLogo = styled(Image) `
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    width: 151px;
+    height: 140px;
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    width: 173px;
+    height: 160px;
+  }
+`;
+const ErrorText = ({ errorMessage, errorDescription, }) => (_jsxs(BaseErrorText, { children: [_jsx(ErrorMessage, { children: errorMessage }), _jsx(ErrorDescription, { children: errorDescription })] }));
+const BaseErrorText = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+
+  text-align: center;
+`;
+const ErrorMessage = styled.p `
+  font-weight: 700;
+
+  ${SubheaderFontSize}
+`;
+const ErrorDescription = styled.div `
+  font-weight: 400;
+
+  ${BodyFontSize}
+`;
+//# sourceMappingURL=ErrorFallback.js.map

package/core/templates/ErrorFallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorFallback.js","sourceRoot":"","sources":["../../../core/templates/ErrorFallback.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,YAAY,CAAC;AAE/B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,SAAS,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAQlE,MAAM,aAAa,GAAG,CAAC,EACrB,YAAY,GAAG,qBAAqB,EACpC,gBAAgB,EAChB,aAAa,GACM,EAAE,EAAE,CAAC,CACxB,MAAC,iBAAiB,eAChB,KAAC,SAAS,IAAC,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,YAAY,GAAI,EAEzE,KAAC,SAAS,IACR,YAAY,EAAE,YAAY,EAC1B,gBAAgB,EAAE,gBAAgB,GAClC,EAED,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,aAAa,EACtB,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK,EAClC,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,EACjC,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,SAAS,GAClC,CACH,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACiB,CACrB,CAAC;AAEF,eAAe,aAAa,CAAC;AAE7B,MAAM,qBAAqB,GAAG,sBAAsB,CAAC;AAErD,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;sBAUd,MAAM,CAAC,IAAI,CAAC,KAAK;;oBAEnB,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;;;qBAOlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;wBAGhC,MAAM,CAAC,OAAO,CAAC,KAAK;;;CAG3C,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;oBACX,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;;qBAKlC,UAAU,CAAC,iBAAiB,CAAC,MAAM;;;;CAIvD,CAAC;AAOF,MAAM,SAAS,GAAG,CAAC,EACjB,YAAY,EACZ,gBAAgB,GACO,EAAE,EAAE,CAAC,CAC5B,MAAC,aAAa,eACZ,KAAC,YAAY,cAAE,YAAY,GAAgB,EAC3C,KAAC,gBAAgB,cAAE,gBAAgB,GAAoB,IACzC,CACjB,CAAC;AAEF,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO/B,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAA;;;IAGzB,iBAAiB;CACpB,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;IAG/B,YAAY;CACf,CAAC","sourcesContent":["import Image from \"next/image\";\nimport type { MouseEventHandler, ReactNode } from \"react\";\nimport styled from \"styled-components\";\nimport errorLogo from \"../assets/logos/error_logo.webp\";\nimport { Button } from \"../atoms\";\nimport { Colors, Responsive } from \"../foundations\";\nimport { BodyFontSize, SubheaderFontSize } from \"../integrations\";\n\ntype ErrorFallbackProps = {\n  errorMessage?: string;\n  errorDescription: ReactNode;\n  onClickReload?: MouseEventHandler<HTMLButtonElement>;\n};\n\nconst ErrorFallback = ({\n  errorMessage = DEFAULT_ERROR_MESSAGE,\n  errorDescription,\n  onClickReload,\n}: ErrorFallbackProps) => (\n  <BaseErrorFallback>\n    <ErrorLogo src={errorLogo} width={693} height={641} alt={errorMessage} />\n\n    <ErrorText\n      errorMessage={errorMessage}\n      errorDescription={errorDescription}\n    />\n\n    {onClickReload ? (\n      <Button\n        label=\"Try Again\"\n        onClick={onClickReload}\n        backgroundColor={Colors.base.white}\n        borderColor={Colors.neutral.grey3}\n        color={Colors.typography.blackHigh}\n      />\n    ) : (\n      <></>\n    )}\n  </BaseErrorFallback>\n);\n\nexport default ErrorFallback;\n\nconst DEFAULT_ERROR_MESSAGE = \"Something went wrong\";\n\nconst BaseErrorFallback = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  width: 100%;\n  height: 100%;\n  padding: 24px;\n\n  background-color: ${Colors.base.white};\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 16px;\n\n    border: none;\n    border-radius: 0px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    gap: 24px;\n\n    border: 1px solid ${Colors.neutral.grey3};\n    border-radius: 12px;\n  }\n`;\n\nconst ErrorLogo = styled(Image)`\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 151px;\n    height: 140px;\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    width: 173px;\n    height: 160px;\n  }\n`;\n\ntype LoadingFailedTextProps = {\n  errorMessage: string;\n  errorDescription: ReactNode;\n};\n\nconst ErrorText = ({\n  errorMessage,\n  errorDescription,\n}: LoadingFailedTextProps) => (\n  <BaseErrorText>\n    <ErrorMessage>{errorMessage}</ErrorMessage>\n    <ErrorDescription>{errorDescription}</ErrorDescription>\n  </BaseErrorText>\n);\n\nconst BaseErrorText = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n\n  text-align: center;\n`;\n\nconst ErrorMessage = styled.p`\n  font-weight: 700;\n\n  ${SubheaderFontSize}\n`;\n\nconst ErrorDescription = styled.div`\n  font-weight: 400;\n\n  ${BodyFontSize}\n`;\n"]}

package/core/templates/PageLoader.d.ts

@@ -1,11 +1,11 @@
 import type { LoaderSizeMarginProps } from "react-spinners/helpers/props";
 type PageLoaderProps = {
-    isPacman?: boolean;
+    pacman?: boolean;
     loadingText?: string;
     tip?: string;
 } & LoaderSizeMarginProps;
 /**
  * The animation to show when loading the whole page
  */
-declare const PageLoader: ({ loadingText, tip, isPacman, color, size, ...restOfProps }: PageLoaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const PageLoader: ({ loadingText, tip, pacman, color, size, ...restOfProps }: PageLoaderProps) => import("react/jsx-runtime").JSX.Element;
 export default PageLoader;

package/core/templates/PageLoader.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { MoonLoader, PacmanLoader } from "react-spinners";
 import styled from "styled-components";
-import { Colors, Responsive, Typography } from "../foundations";
+import { Colors } from "../foundations";
+import { HelperFontSize } from "../integrations";
 /**
  * The animation to show when loading the whole page
  */
-const PageLoader = ({ loadingText, tip, isPacman = false, color = Colors.accent.blue1, size, ...restOfProps }) => (_jsxs(Background, { children: [isPacman ? (_jsx(PacmanLoader, { color: color, size: size ? size : 20, ...restOfProps })) : (_jsx(MoonLoader, { color: color, size: size ? size : 32, ...restOfProps })), loadingText || tip ? (_jsxs(Text, { children: [loadingText ? _jsx(LoadingText, { children: loadingText }) : _jsx(_Fragment, {}), tip ? _jsx(Tip, { children: tip }) : _jsx(_Fragment, {})] })) : (_jsx(_Fragment, {}))] }));
+const PageLoader = ({ loadingText, tip, pacman = false, color = Colors.accent.blue1, size, ...restOfProps }) => (_jsxs(Background, { children: [pacman ? (_jsx(PacmanLoader, { color: color, size: size ? size : 20, ...restOfProps })) : (_jsx(MoonLoader, { color: color, size: size ? size : 32, ...restOfProps })), loadingText || tip ? (_jsxs(Text, { children: [loadingText ? _jsx(LoadingText, { children: loadingText }) : _jsx(_Fragment, {}), tip ? _jsx(Tip, { children: tip }) : _jsx(_Fragment, {})] })) : (_jsx(_Fragment, {}))] }));
 export default PageLoader;
 const Background = styled.div `
   display: flex;
@@ -29,12 +30,6 @@ const LoadingText = styled.p `
 const Tip = styled.p `
   color: ${Colors.typography.blackMedium};
 
-  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    font-size: ${Typography.HELPER_FONT_SIZES.small};
-  }
-
-  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    font-size: ${Typography.HELPER_FONT_SIZES.large};
-  }
+  ${HelperFontSize}
 `;
 //# sourceMappingURL=PageLoader.js.map

package/core/templates/PageLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLoader.js","sourceRoot":"","sources":["../../../core/templates/PageLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAQhE;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,GAAG,EACH,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAC3B,IAAI,EACJ,GAAG,WAAW,EACE,EAAE,EAAE,CAAC,CACrB,MAAC,UAAU,eACR,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACxE,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACtE,EAEA,WAAW,IAAI,GAAG,CAAC,CAAC,CAAC,CACpB,MAAC,IAAI,eACF,WAAW,CAAC,CAAC,CAAC,KAAC,WAAW,cAAE,WAAW,GAAe,CAAC,CAAC,CAAC,mBAAK,EAC9D,GAAG,CAAC,CAAC,CAAC,KAAC,GAAG,cAAE,GAAG,GAAO,CAAC,CAAC,CAAC,mBAAK,IAC1B,CACR,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACU,CACd,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS5B,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKtB,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAA;;CAE3B,CAAC;AAEF,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAA;WACT,MAAM,CAAC,UAAU,CAAC,WAAW;;oBAEpB,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACtC,UAAU,CAAC,iBAAiB,CAAC,KAAK;;;qBAG9B,UAAU,CAAC,iBAAiB,CAAC,MAAM;iBACvC,UAAU,CAAC,iBAAiB,CAAC,KAAK;;CAElD,CAAC","sourcesContent":["import { MoonLoader, PacmanLoader } from \"react-spinners\";\nimport type { LoaderSizeMarginProps } from \"react-spinners/helpers/props\";\nimport styled from \"styled-components\";\nimport { Colors, Responsive, Typography } from \"../foundations\";\n\ntype PageLoaderProps = {\n  isPacman?: boolean;\n  loadingText?: string;\n  tip?: string;\n} & LoaderSizeMarginProps;\n\n/**\n * The animation to show when loading the whole page\n */\nconst PageLoader = ({\n  loadingText,\n  tip,\n  isPacman = false,\n  color = Colors.accent.blue1,\n  size,\n  ...restOfProps\n}: PageLoaderProps) => (\n  <Background>\n    {isPacman ? (\n      <PacmanLoader color={color} size={size ? size : 20} {...restOfProps} />\n    ) : (\n      <MoonLoader color={color} size={size ? size : 32} {...restOfProps} />\n    )}\n\n    {loadingText || tip ? (\n      <Text>\n        {loadingText ? <LoadingText>{loadingText}</LoadingText> : <></>}\n        {tip ? <Tip>{tip}</Tip> : <></>}\n      </Text>\n    ) : (\n      <></>\n    )}\n  </Background>\n);\n\nexport default PageLoader;\n\nconst Background = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n\n  width: 100%;\n  height: 100%;\n`;\n\nconst Text = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n`;\n\nconst LoadingText = styled.p`\n  font-weight: 500;\n`;\n\nconst Tip = styled.p`\n  color: ${Colors.typography.blackMedium};\n\n  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.HELPER_FONT_SIZES.small};\n  }\n\n  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {\n    font-size: ${Typography.HELPER_FONT_SIZES.large};\n  }\n`;\n"]}
+{"version":3,"file":"PageLoader.js","sourceRoot":"","sources":["../../../core/templates/PageLoader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE1D,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAQjD;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,WAAW,EACX,GAAG,EACH,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,KAAK,EAC3B,IAAI,EACJ,GAAG,WAAW,EACE,EAAE,EAAE,CAAC,CACrB,MAAC,UAAU,eACR,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACxE,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAM,WAAW,GAAI,CACtE,EAEA,WAAW,IAAI,GAAG,CAAC,CAAC,CAAC,CACpB,MAAC,IAAI,eACF,WAAW,CAAC,CAAC,CAAC,KAAC,WAAW,cAAE,WAAW,GAAe,CAAC,CAAC,CAAC,mBAAK,EAC9D,GAAG,CAAC,CAAC,CAAC,KAAC,GAAG,cAAE,GAAG,GAAO,CAAC,CAAC,CAAC,mBAAK,IAC1B,CACR,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACU,CACd,CAAC;AAEF,eAAe,UAAU,CAAC;AAE1B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CAS5B,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAKtB,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAA;;CAE3B,CAAC;AAEF,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAA;WACT,MAAM,CAAC,UAAU,CAAC,WAAW;;IAEpC,cAAc;CACjB,CAAC","sourcesContent":["import { MoonLoader, PacmanLoader } from \"react-spinners\";\nimport type { LoaderSizeMarginProps } from \"react-spinners/helpers/props\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../foundations\";\nimport { HelperFontSize } from \"../integrations\";\n\ntype PageLoaderProps = {\n  pacman?: boolean;\n  loadingText?: string;\n  tip?: string;\n} & LoaderSizeMarginProps;\n\n/**\n * The animation to show when loading the whole page\n */\nconst PageLoader = ({\n  loadingText,\n  tip,\n  pacman = false,\n  color = Colors.accent.blue1,\n  size,\n  ...restOfProps\n}: PageLoaderProps) => (\n  <Background>\n    {pacman ? (\n      <PacmanLoader color={color} size={size ? size : 20} {...restOfProps} />\n    ) : (\n      <MoonLoader color={color} size={size ? size : 32} {...restOfProps} />\n    )}\n\n    {loadingText || tip ? (\n      <Text>\n        {loadingText ? <LoadingText>{loadingText}</LoadingText> : <></>}\n        {tip ? <Tip>{tip}</Tip> : <></>}\n      </Text>\n    ) : (\n      <></>\n    )}\n  </Background>\n);\n\nexport default PageLoader;\n\nconst Background = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n\n  width: 100%;\n  height: 100%;\n`;\n\nconst Text = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n`;\n\nconst LoadingText = styled.p`\n  font-weight: 500;\n`;\n\nconst Tip = styled.p`\n  color: ${Colors.typography.blackMedium};\n\n  ${HelperFontSize}\n`;\n"]}

package/core/templates/index.d.ts

@@ -1,2 +1,2 @@
-export { default as LoadingFailedSign } from "./LoadingFailedSign";
+export { default as ErrorFallback } from "./ErrorFallback";
 export { default as PageLoader } from "./PageLoader";

package/core/templates/index.js

@@ -1,3 +1,3 @@
-export { default as LoadingFailedSign } from "./LoadingFailedSign";
+export { default as ErrorFallback } from "./ErrorFallback";
 export { default as PageLoader } from "./PageLoader";
 //# sourceMappingURL=index.js.map

package/core/templates/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default as LoadingFailedSign } from \"./LoadingFailedSign\";\nexport { default as PageLoader } from \"./PageLoader\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../core/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { default as ErrorFallback } from \"./ErrorFallback\";\nexport { default as PageLoader } from \"./PageLoader\";\n"]}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@grantbii/design-system",
   "author": "Grantbii",
   "license": "UNLICENSED",
-  "version": "1.10.0",
+  "version": "1.11.0",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -45,7 +45,7 @@
     "@vitest/browser": "4.0.16",
     "@vitest/browser-playwright": "4.0.16",
     "@vitest/coverage-v8": "4.0.16",
-    "baseline-browser-mapping": "^2.9.11",
+    "baseline-browser-mapping": "2.9.11",
     "eslint": "9.39.2",
     "eslint-config-next": "16.1.1",
     "eslint-plugin-storybook": "10.1.10",

package/stories/atoms/Badge.stories.js

@@ -3,12 +3,6 @@ const meta = {
     title: "Atoms/Badge",
     component: Badge,
     tags: ["autodocs"],
-    parameters: {
-        layout: "centered",
-        docs: {
-            codePanel: true,
-        },
-    },
 };
 export default meta;
 const defaultText = "Badge";

package/stories/atoms/Badge.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAGnC,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;QAClB,IAAI,EAAE;YACJ,SAAS,EAAE,IAAI;SAChB;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,WAAW,GAAG,OAAO,CAAC;AAC5B,MAAM,QAAQ,GAAG,6CAA6C,CAAC;AAC/D,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,4BAA4B,CAAC,CAAC;AAE/D,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,IAAI,EAAE,KAAK,CAAC,eAAe;QAC3B,KAAK,EAAE,WAAW;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;QAClB,YAAY;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE,GAAG;KACtB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,IAAI,EAAE;QACJ,IAAI,EAAE,KAAK,CAAC,eAAe;QAC3B,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE,GAAG;QACrB,YAAY;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,UAAU;QACjB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC;KACzC;CACF,CAAC","sourcesContent":["import { Badge, Icons } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Badge> = {\n  title: \"Atoms/Badge\",\n  component: Badge,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n    docs: {\n      codePanel: true,\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst defaultText = \"Badge\";\nconst longText = \"the quick brown fox jumps over the lazy dog\";\nconst onClickClose = () => alert(\"You have closed the badge.\");\n\nexport const TextOnly: Story = {\n  args: {\n    label: defaultText,\n  },\n};\n\nexport const Icon: Story = {\n  args: {\n    Icon: Icons.SmileyXEyesIcon,\n    label: defaultText,\n  },\n};\n\nexport const Closeable: Story = {\n  args: {\n    label: defaultText,\n    onClickClose,\n  },\n};\n\nexport const LongText: Story = {\n  args: {\n    label: longText,\n    labelWidthPixels: 160,\n  },\n};\n\nexport const AlmostEverything: Story = {\n  args: {\n    Icon: Icons.SmileyXEyesIcon,\n    label: longText,\n    labelWidthPixels: 160,\n    onClickClose,\n  },\n};\n\nexport const Clickable: Story = {\n  args: {\n    label: \"Click Me\",\n    onClick: () => alert(\"Clicked on badge\"),\n  },\n};\n"]}
+{"version":3,"file":"Badge.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAGnC,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,WAAW,GAAG,OAAO,CAAC;AAC5B,MAAM,QAAQ,GAAG,6CAA6C,CAAC;AAC/D,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,KAAK,CAAC,4BAA4B,CAAC,CAAC;AAE/D,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,IAAI,EAAE,KAAK,CAAC,eAAe;QAC3B,KAAK,EAAE,WAAW;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;QAClB,YAAY;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE,GAAG;KACtB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,IAAI,EAAE;QACJ,IAAI,EAAE,KAAK,CAAC,eAAe;QAC3B,KAAK,EAAE,QAAQ;QACf,gBAAgB,EAAE,GAAG;QACrB,YAAY;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,UAAU;QACjB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,kBAAkB,CAAC;KACzC;CACF,CAAC","sourcesContent":["import { Badge, Icons } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Badge> = {\n  title: \"Atoms/Badge\",\n  component: Badge,\n  tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst defaultText = \"Badge\";\nconst longText = \"the quick brown fox jumps over the lazy dog\";\nconst onClickClose = () => alert(\"You have closed the badge.\");\n\nexport const TextOnly: Story = {\n  args: {\n    label: defaultText,\n  },\n};\n\nexport const Icon: Story = {\n  args: {\n    Icon: Icons.SmileyXEyesIcon,\n    label: defaultText,\n  },\n};\n\nexport const Closeable: Story = {\n  args: {\n    label: defaultText,\n    onClickClose,\n  },\n};\n\nexport const LongText: Story = {\n  args: {\n    label: longText,\n    labelWidthPixels: 160,\n  },\n};\n\nexport const AlmostEverything: Story = {\n  args: {\n    Icon: Icons.SmileyXEyesIcon,\n    label: longText,\n    labelWidthPixels: 160,\n    onClickClose,\n  },\n};\n\nexport const Clickable: Story = {\n  args: {\n    label: \"Click Me\",\n    onClick: () => alert(\"Clicked on badge\"),\n  },\n};\n"]}

package/stories/atoms/BrandLogo.stories.js

@@ -3,12 +3,6 @@ const meta = {
     title: "Atoms/Brand Logo",
     component: BrandLogo,
     tags: ["autodocs"],
-    parameters: {
-        layout: "centered",
-        docs: {
-            codePanel: true,
-        },
-    },
 };
 export default meta;
 export const Default = {

package/stories/atoms/BrandLogo.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"BrandLogo.stories.js","sourceRoot":"","sources":["../../../stories/atoms/BrandLogo.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAGhC,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;QAClB,IAAI,EAAE;YACJ,SAAS,EAAE,IAAI;SAChB;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,WAAW,EAAE,IAAI;KAClB;CACF,CAAC","sourcesContent":["import { BrandLogo } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof BrandLogo> = {\n  title: \"Atoms/Brand Logo\",\n  component: BrandLogo,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n    docs: {\n      codePanel: true,\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const Light: Story = {\n  args: {\n    isDarkTheme: false,\n  },\n};\n\nexport const Dark: Story = {\n  args: {\n    isDarkTheme: true,\n  },\n};\n"]}
+{"version":3,"file":"BrandLogo.stories.js","sourceRoot":"","sources":["../../../stories/atoms/BrandLogo.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAGhC,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,WAAW,EAAE,KAAK;KACnB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAU;IACzB,IAAI,EAAE;QACJ,WAAW,EAAE,IAAI;KAClB;CACF,CAAC","sourcesContent":["import { BrandLogo } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof BrandLogo> = {\n  title: \"Atoms/Brand Logo\",\n  component: BrandLogo,\n  tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  args: {},\n};\n\nexport const Light: Story = {\n  args: {\n    isDarkTheme: false,\n  },\n};\n\nexport const Dark: Story = {\n  args: {\n    isDarkTheme: true,\n  },\n};\n"]}

package/stories/atoms/Button.stories.js

@@ -5,12 +5,6 @@ const meta = {
     title: "Atoms/Button",
     component: Button,
     tags: ["autodocs"],
-    parameters: {
-        layout: "centered",
-        docs: {
-            codePanel: true,
-        },
-    },
 };
 export default meta;
 const baseArgs = {

package/stories/atoms/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;QAClB,IAAI,EAAE;YACJ,SAAS,EAAE,IAAI;SAChB;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iCAAiC,CAAC;CACxD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,KAAK,CAAC,QAAQ;KACzB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,KAAK,CAAC,SAAS;KAC3B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,KAAK,CAAC,eAAe;QAC/B,SAAS,EAAE,KAAK,CAAC,iBAAiB;KACnC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,WAAW;KACrC;CACF,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMzB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAU;IAC1C,IAAI,EAAE;QACJ,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK;QACjC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK;QAClC,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,WAAW;QACpC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iCAAiC,CAAC;QACvD,KAAK,EAAE,CACL,MAAC,OAAO,eACN,kDAA8B,EAC9B,KAAC,KAAK,CAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI,IAC1B,CACX;KACF;CACF,CAAC","sourcesContent":["import { Button, Colors, Icons } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport styled from \"styled-components\";\n\nconst meta: Meta<typeof Button> = {\n  title: \"Atoms/Button\",\n  component: Button,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n    docs: {\n      codePanel: true,\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst baseArgs = {\n  label: \"Button\",\n  onClick: () => alert(\"You have clicked on the button.\"),\n};\n\nexport const TextOnly: Story = {\n  args: baseArgs,\n};\n\nexport const LeftIcon: Story = {\n  args: {\n    ...baseArgs,\n    LeftIcon: Icons.PlusIcon,\n  },\n};\n\nexport const RightIcon: Story = {\n  args: {\n    ...baseArgs,\n    RightIcon: Icons.MinusIcon,\n  },\n};\n\nexport const BothIcons: Story = {\n  args: {\n    ...baseArgs,\n    LeftIcon: Icons.SmileyXEyesIcon,\n    RightIcon: Icons.SmileyMeltingIcon,\n  },\n};\n\nexport const Underline: Story = {\n  args: {\n    ...baseArgs,\n    underline: true,\n    color: Colors.typography.blackMedium,\n  },\n};\n\nconst Content = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  width: 200px;\n`;\n\nexport const GrantObjectivesFilter: Story = {\n  args: {\n    borderColor: Colors.neutral.grey3,\n    backgroundColor: Colors.base.white,\n    color: Colors.typography.blackMedium,\n    onClick: () => alert(\"You have clicked on the button.\"),\n    label: (\n      <Content>\n        <p>Select grant objectives</p>\n        <Icons.CaretRightIcon size={20} />\n      </Content>\n    ),\n  },\n};\n"]}
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Button.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,CAAC;AAE5C,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,IAAI,GAAwB;IAChC,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,MAAM;IACjB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG;IACf,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iCAAiC,CAAC;CACxD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,KAAK,CAAC,QAAQ;KACzB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,KAAK,CAAC,SAAS;KAC3B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,QAAQ,EAAE,KAAK,CAAC,eAAe;QAC/B,SAAS,EAAE,KAAK,CAAC,iBAAiB;KACnC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,SAAS,EAAE,IAAI;QACf,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,WAAW;KACrC;CACF,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMzB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAU;IAC1C,IAAI,EAAE;QACJ,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK;QACjC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK;QAClC,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,WAAW;QACpC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,iCAAiC,CAAC;QACvD,KAAK,EAAE,CACL,MAAC,OAAO,eACN,kDAA8B,EAC9B,KAAC,KAAK,CAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI,IAC1B,CACX;KACF;CACF,CAAC","sourcesContent":["import { Button, Colors, Icons } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport styled from \"styled-components\";\n\nconst meta: Meta<typeof Button> = {\n  title: \"Atoms/Button\",\n  component: Button,\n  tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst baseArgs = {\n  label: \"Button\",\n  onClick: () => alert(\"You have clicked on the button.\"),\n};\n\nexport const TextOnly: Story = {\n  args: baseArgs,\n};\n\nexport const LeftIcon: Story = {\n  args: {\n    ...baseArgs,\n    LeftIcon: Icons.PlusIcon,\n  },\n};\n\nexport const RightIcon: Story = {\n  args: {\n    ...baseArgs,\n    RightIcon: Icons.MinusIcon,\n  },\n};\n\nexport const BothIcons: Story = {\n  args: {\n    ...baseArgs,\n    LeftIcon: Icons.SmileyXEyesIcon,\n    RightIcon: Icons.SmileyMeltingIcon,\n  },\n};\n\nexport const Underline: Story = {\n  args: {\n    ...baseArgs,\n    underline: true,\n    color: Colors.typography.blackMedium,\n  },\n};\n\nconst Content = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  width: 200px;\n`;\n\nexport const GrantObjectivesFilter: Story = {\n  args: {\n    borderColor: Colors.neutral.grey3,\n    backgroundColor: Colors.base.white,\n    color: Colors.typography.blackMedium,\n    onClick: () => alert(\"You have clicked on the button.\"),\n    label: (\n      <Content>\n        <p>Select grant objectives</p>\n        <Icons.CaretRightIcon size={20} />\n      </Content>\n    ),\n  },\n};\n"]}

package/stories/atoms/Checkbox.stories.js

@@ -3,12 +3,6 @@ const meta = {
     title: "Atoms/Checkbox",
     component: Checkbox,
     tags: ["autodocs"],
-    parameters: {
-        layout: "centered",
-        docs: {
-            codePanel: true,
-        },
-    },
 };
 export default meta;
 const baseArgs = {

package/stories/atoms/Checkbox.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAG/B,MAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;QAClB,IAAI,EAAE;YACJ,SAAS,EAAE,IAAI;SAChB;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG;IACf,EAAE,EAAE,MAAM;IACV,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,WAAW,EAAE,IAAI;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,WAAW,EAAE,KAAK;KACnB;CACF,CAAC","sourcesContent":["import { Checkbox } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Checkbox> = {\n  title: \"Atoms/Checkbox\",\n  component: Checkbox,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n    docs: {\n      codePanel: true,\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst baseArgs = {\n  id: \"best\",\n  label: \"Grantbii is the best\",\n};\n\nexport const LabelBefore: Story = {\n  args: {\n    ...baseArgs,\n    labelBefore: true,\n  },\n};\n\nexport const LabelAfter: Story = {\n  args: {\n    ...baseArgs,\n    labelBefore: false,\n  },\n};\n"]}
+{"version":3,"file":"Checkbox.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Checkbox.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAC;AAG/B,MAAM,IAAI,GAA0B;IAClC,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG;IACf,EAAE,EAAE,MAAM;IACV,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,WAAW,EAAE,IAAI;KAClB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,GAAG,QAAQ;QACX,WAAW,EAAE,KAAK;KACnB;CACF,CAAC","sourcesContent":["import { Checkbox } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Checkbox> = {\n  title: \"Atoms/Checkbox\",\n  component: Checkbox,\n  tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst baseArgs = {\n  id: \"best\",\n  label: \"Grantbii is the best\",\n};\n\nexport const LabelBefore: Story = {\n  args: {\n    ...baseArgs,\n    labelBefore: true,\n  },\n};\n\nexport const LabelAfter: Story = {\n  args: {\n    ...baseArgs,\n    labelBefore: false,\n  },\n};\n"]}

package/stories/atoms/Dropdown.stories.js

@@ -24,9 +24,6 @@ const meta = {
     title: "Atoms/Dropdown",
     component: DropdownExample,
     tags: ["autodocs"],
-    parameters: {
-        layout: "centered",
-    },
 };
 export default meta;
 export const Controlled = {

package/stories/atoms/Dropdown.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAsB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,MAAM,eAAe,GAAG,CAAC,EAAE,UAAU,EAAgB,EAAE,EAAE;IACvD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAE9E,MAAM,eAAe,GAAkB;QACrC,GAAG,SAAS;QACZ,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;QACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,oBAAoB,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;KACjE,CAAC;IAEF,OAAO,KAAC,QAAQ,OAAK,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,CAAC,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEF,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC;IACpC,YAAY,EAAE,wBAAwB;CACvC,CAAC;AAEF,MAAM,iBAAiB,GAAkB;IACvC,GAAG,SAAS;IACZ,YAAY,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,IAAI,GAAiC;IACzC,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,eAAe;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;KAClB;CACF,CAAC","sourcesContent":["import { Dropdown, mapEnumToOptions, type DropdownProps } from \"@/.\";\nimport { Objective } from \"@grantbii/ui-core/grant/enums\";\nimport { parseEnum } from \"@grantbii/ui-core/enums\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\n\ntype ExampleProps = {\n  controlled: boolean;\n};\n\nconst DropdownExample = ({ controlled }: ExampleProps) => {\n  const [selectedObjective, setSelectedObjective] = useState(Objective.UNKNOWN);\n\n  const controlledProps: DropdownProps = {\n    ...baseProps,\n    value: selectedObjective === Objective.UNKNOWN ? \"\" : selectedObjective,\n    onChange: (event) =>\n      setSelectedObjective(parseEnum(event.target.value, Objective)),\n  };\n\n  return <Dropdown {...(controlled ? controlledProps : uncontrolledProps)} />;\n};\n\nconst baseProps: DropdownProps = {\n  options: mapEnumToOptions(Objective),\n  defaultLabel: \"Select grant objective\",\n};\n\nconst uncontrolledProps: DropdownProps = {\n  ...baseProps,\n  defaultValue: \"\",\n};\n\nconst meta: Meta<typeof DropdownExample> = {\n  title: \"Atoms/Dropdown\",\n  component: DropdownExample,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Controlled: Story = {\n  args: {\n    controlled: true,\n  },\n};\n\nexport const Uncontrolled: Story = {\n  args: {\n    controlled: false,\n  },\n};\n"]}
+{"version":3,"file":"Dropdown.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Dropdown.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAsB,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,MAAM,eAAe,GAAG,CAAC,EAAE,UAAU,EAAgB,EAAE,EAAE;IACvD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAE9E,MAAM,eAAe,GAAkB;QACrC,GAAG,SAAS;QACZ,KAAK,EAAE,iBAAiB,KAAK,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB;QACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,oBAAoB,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;KACjE,CAAC;IAEF,OAAO,KAAC,QAAQ,OAAK,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,CAAC,GAAI,CAAC;AAC9E,CAAC,CAAC;AAEF,MAAM,SAAS,GAAkB;IAC/B,OAAO,EAAE,gBAAgB,CAAC,SAAS,CAAC;IACpC,YAAY,EAAE,wBAAwB;CACvC,CAAC;AAEF,MAAM,iBAAiB,GAAkB;IACvC,GAAG,SAAS;IACZ,YAAY,EAAE,EAAE;CACjB,CAAC;AAEF,MAAM,IAAI,GAAiC;IACzC,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,eAAe;IAC1B,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;KAClB;CACF,CAAC","sourcesContent":["import { Dropdown, mapEnumToOptions, type DropdownProps } from \"@/.\";\nimport { Objective } from \"@grantbii/ui-core/grant/enums\";\nimport { parseEnum } from \"@grantbii/ui-core/enums\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\n\ntype ExampleProps = {\n  controlled: boolean;\n};\n\nconst DropdownExample = ({ controlled }: ExampleProps) => {\n  const [selectedObjective, setSelectedObjective] = useState(Objective.UNKNOWN);\n\n  const controlledProps: DropdownProps = {\n    ...baseProps,\n    value: selectedObjective === Objective.UNKNOWN ? \"\" : selectedObjective,\n    onChange: (event) =>\n      setSelectedObjective(parseEnum(event.target.value, Objective)),\n  };\n\n  return <Dropdown {...(controlled ? controlledProps : uncontrolledProps)} />;\n};\n\nconst baseProps: DropdownProps = {\n  options: mapEnumToOptions(Objective),\n  defaultLabel: \"Select grant objective\",\n};\n\nconst uncontrolledProps: DropdownProps = {\n  ...baseProps,\n  defaultValue: \"\",\n};\n\nconst meta: Meta<typeof DropdownExample> = {\n  title: \"Atoms/Dropdown\",\n  component: DropdownExample,\n  tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Controlled: Story = {\n  args: {\n    controlled: true,\n  },\n};\n\nexport const Uncontrolled: Story = {\n  args: {\n    controlled: false,\n  },\n};\n"]}

package/stories/atoms/Input.stories.js

@@ -4,12 +4,6 @@ const meta = {
     title: "Atoms/Input",
     component: Input,
     tags: ["autodocs"],
-    parameters: {
-        layout: "centered",
-        docs: {
-            codePanel: true,
-        },
-    },
 };
 export default meta;
 export const BasicInput = {

package/stories/atoms/Input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAGzD,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;QAClB,IAAI,EAAE;YACJ,SAAS,EAAE,IAAI;SAChB;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE;CACtD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE,EAAE,WAAW,EAAE,kBAAkB,EAAE,IAAI,EAAE,OAAO,EAAE;CACzD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE,EAAE,WAAW,EAAE,wBAAwB,EAAE,SAAS,EAAE,EAAE,EAAE;CAC/D,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,WAAW,EAAE,mBAAmB;QAChC,UAAU,EAAE,wBAAwB;QACpC,eAAe,EAAE,gBAAgB,CAAC,QAAQ,CAAC;KAC5C;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,SAAS,EAAE,IAAI;KAChB;CACF,CAAC","sourcesContent":["import { Input, mapEnumToOptions } from \"@/.\";\nimport { CostItem } from \"@grantbii/ui-core/grant/enums\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Input> = {\n  title: \"Atoms/Input\",\n  component: Input,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"centered\",\n    docs: {\n      codePanel: true,\n    },\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const BasicInput: Story = {\n  args: { placeholder: \"Type here\" },\n};\n\nexport const NumericalField: Story = {\n  args: { placeholder: \"Numbers only\", type: \"number\" },\n};\n\nexport const EmailField: Story = {\n  args: { placeholder: \"Enter your email\", type: \"email\" },\n};\n\nexport const MinimumLength: Story = {\n  args: { placeholder: \"At least 10 characters\", minLength: 10 },\n};\n\nexport const WithDatalist: Story = {\n  args: {\n    placeholder: \"Enter a cost item\",\n    datalistId: \"supportable-cost-items\",\n    datalistOptions: mapEnumToOptions(CostItem),\n  },\n};\n\nexport const CustomError: Story = {\n  args: {\n    $hasError: true,\n  },\n};\n"]}
+{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../stories/atoms/Input.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,KAAK,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AAGzD,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;CACnB,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE,EAAE,WAAW,EAAE,WAAW,EAAE;CACnC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,IAAI,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE;CACtD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE,EAAE,WAAW,EAAE,kBAAkB,EAAE,IAAI,EAAE,OAAO,EAAE;CACzD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU;IAClC,IAAI,EAAE,EAAE,WAAW,EAAE,wBAAwB,EAAE,SAAS,EAAE,EAAE,EAAE;CAC/D,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,WAAW,EAAE,mBAAmB;QAChC,UAAU,EAAE,wBAAwB;QACpC,eAAe,EAAE,gBAAgB,CAAC,QAAQ,CAAC;KAC5C;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,SAAS,EAAE,IAAI;KAChB;CACF,CAAC","sourcesContent":["import { Input, mapEnumToOptions } from \"@/.\";\nimport { CostItem } from \"@grantbii/ui-core/grant/enums\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\n\nconst meta: Meta<typeof Input> = {\n  title: \"Atoms/Input\",\n  component: Input,\n  tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const BasicInput: Story = {\n  args: { placeholder: \"Type here\" },\n};\n\nexport const NumericalField: Story = {\n  args: { placeholder: \"Numbers only\", type: \"number\" },\n};\n\nexport const EmailField: Story = {\n  args: { placeholder: \"Enter your email\", type: \"email\" },\n};\n\nexport const MinimumLength: Story = {\n  args: { placeholder: \"At least 10 characters\", minLength: 10 },\n};\n\nexport const WithDatalist: Story = {\n  args: {\n    placeholder: \"Enter a cost item\",\n    datalistId: \"supportable-cost-items\",\n    datalistOptions: mapEnumToOptions(CostItem),\n  },\n};\n\nexport const CustomError: Story = {\n  args: {\n    $hasError: true,\n  },\n};\n"]}

package/stories/atoms/LinkButton.stories.js

@@ -3,12 +3,6 @@ const meta = {
     title: "Atoms/Link Button",
     component: LinkButton,
     tags: ["autodocs"],
-    parameters: {
-        layout: "centered",
-        docs: {
-            codePanel: true,
-        },
-    },
 };
 export default meta;
 const baseArgs = { label: "Link", href: "https://grantbii.com" };