@grantbii/design-system 1.27.0 → 1.28.1

package/core/archive/RadioButtons.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 import styled from "styled-components";
 import { RadioButton } from "../molecules";
-const RadioButtons = ({ name, options }) => (_jsx(RadioGroup, { children: options.map(({ id, value, ...props }) => (_createElement(RadioButton, { ...props, key: `${name}-${value}`, value: value, name: name }))) }));
+const RadioButtons = ({ name, options }) => (_jsx(RadioGroup, { children: options.map(({ value, ...props }) => (_createElement(RadioButton, { ...props, key: `${name}-${value}`, value: value, name: name }))) }));
 export default RadioButtons;
 const RadioGroup = styled.div `
   display: flex;

package/core/archive/RadioButtons.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../core/archive/RadioButtons.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAW3C,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CAC5D,KAAC,UAAU,cACR,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACxC,eAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,IAAI,IAAI,KAAK,EAAE,EACvB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,GACV,CACH,CAAC,GACS,CACd,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO5B,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { RadioButton } from \"../molecules\";\nimport type { Option } from \"../types\";\n\nexport type RadioOption = Option &\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\ntype RadioButtonProps = {\n  name?: string;\n  options: RadioOption[];\n};\n\nconst RadioButtons = ({ name, options }: RadioButtonProps) => (\n  <RadioGroup>\n    {options.map(({ id, value, ...props }) => (\n      <RadioButton\n        {...props}\n        key={`${name}-${value}`}\n        value={value}\n        name={name}\n      />\n    ))}\n  </RadioGroup>\n);\n\nexport default RadioButtons;\n\nconst RadioGroup = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  white-space: nowrap;\n  flex-wrap: wrap;\n`;\n"]}
+{"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../core/archive/RadioButtons.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAW3C,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CAC5D,KAAC,UAAU,cACR,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACpC,eAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,IAAI,IAAI,KAAK,EAAE,EACvB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,GACV,CACH,CAAC,GACS,CACd,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO5B,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { RadioButton } from \"../molecules\";\nimport type { Option } from \"../types\";\n\nexport type RadioOption = Option &\n  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\ntype RadioButtonProps = {\n  name?: string;\n  options: RadioOption[];\n};\n\nconst RadioButtons = ({ name, options }: RadioButtonProps) => (\n  <RadioGroup>\n    {options.map(({ value, ...props }) => (\n      <RadioButton\n        {...props}\n        key={`${name}-${value}`}\n        value={value}\n        name={name}\n      />\n    ))}\n  </RadioGroup>\n);\n\nexport default RadioButtons;\n\nconst RadioGroup = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 12px;\n\n  white-space: nowrap;\n  flex-wrap: wrap;\n`;\n"]}

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/atoms/Color.d.ts

@@ -36,49 +36,15 @@ export declare const accent: {
     readonly blue3: "#ECF5FF";
     readonly blue4: "#F5F9FF";
 };
-declare const allColors: {
-    readonly brand: {
-        readonly grantbiiYellow: "#EBA338";
-        readonly grantbiiBlue: "#16538A";
-    };
-    readonly neutral: {
-        readonly black: "#232022";
-        readonly grey1: "#999999";
-        readonly grey2: "#CCCCCC";
-        readonly grey3: "#EEEEEE";
-        readonly grey4: "#FAFAFA";
-        readonly white: "#FFFFFF";
-    };
-    readonly typography: {
-        readonly blackHigh: "#1A1A1A";
-        readonly blackMedium: "#666666";
-        readonly blackLow: "#B2B2B2";
-        readonly whiteHigh: "#FFFFFF";
-        readonly whiteMedium: "#F5F5F5";
-        readonly whiteLow: "#E5E5E5";
-    };
-    readonly accent: {
-        readonly red1: "#C02318";
-        readonly red2: "#F88E86";
-        readonly red3: "#FFE9E7";
-        readonly red4: "#FFF1F0";
-        readonly yellow1: "#EDAB03";
-        readonly yellow2: "#F4CC68";
-        readonly yellow3: "#FFF9E8";
-        readonly yellow4: "#FFFCF5";
-        readonly green1: "#08A45E";
-        readonly green2: "#6BC89E";
-        readonly green3: "#EBFFF6";
-        readonly green4: "#F5FFFA";
-        readonly blue1: "#1878E4";
-        readonly blue2: "#74AEEF";
-        readonly blue3: "#ECF5FF";
-        readonly blue4: "#F5F9FF";
-    };
+type ValueOf<ObjectType> = ObjectType[keyof ObjectType];
+type ColorGroups = {
+    brand: typeof brand;
+    neutral: typeof neutral;
+    typography: typeof typography;
+    accent: typeof accent;
 };
-type ValueOf<T> = T[keyof T];
 type TokenColor = ValueOf<{
-    [K in keyof typeof allColors]: ValueOf<(typeof allColors)[K]>;
+    [GroupName in keyof ColorGroups]: ValueOf<ColorGroups[GroupName]>;
 }>;
 export type DesignColor = TokenColor | "transparent";
 export {};

package/core/atoms/Color.js

@@ -40,10 +40,4 @@ export const accent = {
     blue3: "#ECF5FF",
     blue4: "#F5F9FF",
 };
-const allColors = {
-    brand,
-    neutral,
-    typography,
-    accent,
-};
 //# sourceMappingURL=Color.js.map

package/core/atoms/Color.js.map

@@ -1 +1 @@
-{"version":3,"file":"Color.js","sourceRoot":"","sources":["../../../core/atoms/Color.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,cAAc,EAAE,SAAS;IACzB,YAAY,EAAE,SAAS;CACf,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC;AAEX,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;CACX,CAAC;AAEX,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,4DAA4D;IAC5D,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,8CAA8C;IAC9C,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,kDAAkD;IAClD,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,qCAAqC;IACrC,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC;AAEX,MAAM,SAAS,GAAG;IAChB,KAAK;IACL,OAAO;IACP,UAAU;IACV,MAAM;CACE,CAAC","sourcesContent":["export const brand = {\n  grantbiiYellow: \"#EBA338\",\n  grantbiiBlue: \"#16538A\",\n} as const;\n\nexport const neutral = {\n  black: \"#232022\",\n  grey1: \"#999999\",\n  grey2: \"#CCCCCC\",\n  grey3: \"#EEEEEE\",\n  grey4: \"#FAFAFA\",\n  white: \"#FFFFFF\",\n} as const;\n\nexport const typography = {\n  blackHigh: \"#1A1A1A\",\n  blackMedium: \"#666666\",\n  blackLow: \"#B2B2B2\",\n  whiteHigh: \"#FFFFFF\",\n  whiteMedium: \"#F5F5F5\",\n  whiteLow: \"#E5E5E5\",\n} as const;\n\nexport const accent = {\n  // usually includes dangerous, wrong or rejected information\n  red1: \"#C02318\",\n  red2: \"#F88E86\",\n  red3: \"#FFE9E7\",\n  red4: \"#FFF1F0\",\n  // usually indicates warning, progressing, etc\n  yellow1: \"#EDAB03\",\n  yellow2: \"#F4CC68\",\n  yellow3: \"#FFF9E8\",\n  yellow4: \"#FFFCF5\",\n  // usually indicates success, correct, passed, etc\n  green1: \"#08A45E\",\n  green2: \"#6BC89E\",\n  green3: \"#EBFFF6\",\n  green4: \"#F5FFFA\",\n  // usually indicates info, no emotion\n  blue1: \"#1878E4\",\n  blue2: \"#74AEEF\",\n  blue3: \"#ECF5FF\",\n  blue4: \"#F5F9FF\",\n} as const;\n\nconst allColors = {\n  brand,\n  neutral,\n  typography,\n  accent,\n} as const;\n\ntype ValueOf<T> = T[keyof T];\n\ntype TokenColor = ValueOf<{\n  [K in keyof typeof allColors]: ValueOf<(typeof allColors)[K]>;\n}>;\n\nexport type DesignColor = TokenColor | \"transparent\";\n"]}
+{"version":3,"file":"Color.js","sourceRoot":"","sources":["../../../core/atoms/Color.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,cAAc,EAAE,SAAS;IACzB,YAAY,EAAE,SAAS;CACf,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC;AAEX,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;CACX,CAAC;AAEX,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,4DAA4D;IAC5D,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,8CAA8C;IAC9C,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,kDAAkD;IAClD,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,qCAAqC;IACrC,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC","sourcesContent":["export const brand = {\n  grantbiiYellow: \"#EBA338\",\n  grantbiiBlue: \"#16538A\",\n} as const;\n\nexport const neutral = {\n  black: \"#232022\",\n  grey1: \"#999999\",\n  grey2: \"#CCCCCC\",\n  grey3: \"#EEEEEE\",\n  grey4: \"#FAFAFA\",\n  white: \"#FFFFFF\",\n} as const;\n\nexport const typography = {\n  blackHigh: \"#1A1A1A\",\n  blackMedium: \"#666666\",\n  blackLow: \"#B2B2B2\",\n  whiteHigh: \"#FFFFFF\",\n  whiteMedium: \"#F5F5F5\",\n  whiteLow: \"#E5E5E5\",\n} as const;\n\nexport const accent = {\n  // usually includes dangerous, wrong or rejected information\n  red1: \"#C02318\",\n  red2: \"#F88E86\",\n  red3: \"#FFE9E7\",\n  red4: \"#FFF1F0\",\n  // usually indicates warning, progressing, etc\n  yellow1: \"#EDAB03\",\n  yellow2: \"#F4CC68\",\n  yellow3: \"#FFF9E8\",\n  yellow4: \"#FFFCF5\",\n  // usually indicates success, correct, passed, etc\n  green1: \"#08A45E\",\n  green2: \"#6BC89E\",\n  green3: \"#EBFFF6\",\n  green4: \"#F5FFFA\",\n  // usually indicates info, no emotion\n  blue1: \"#1878E4\",\n  blue2: \"#74AEEF\",\n  blue3: \"#ECF5FF\",\n  blue4: \"#F5F9FF\",\n} as const;\n\ntype ValueOf<ObjectType> = ObjectType[keyof ObjectType];\n\ntype ColorGroups = {\n  brand: typeof brand;\n  neutral: typeof neutral;\n  typography: typeof typography;\n  accent: typeof accent;\n};\n\ntype TokenColor = ValueOf<{\n  [GroupName in keyof ColorGroups]: ValueOf<ColorGroups[GroupName]>;\n}>;\n\nexport type DesignColor = TokenColor | \"transparent\";\n"]}

package/core/atoms/Typography.js

@@ -2,10 +2,6 @@ const responsivePx = (desktopPx, mobilePx) => ({
     small: `${mobilePx}px`,
     large: `${desktopPx}px`,
 });
-const fixedPx = (px) => ({
-    small: `${px}px`,
-    large: `${px}px`,
-});
 export const family = {
     satoshi: "Satoshi",
 };

package/core/atoms/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"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","sourcesContent":["import type { ScreenSize } from \"../types\";\n\ntype FontWeightLabel = \"regular\" | \"medium\" | \"bold\";\ntype FontWeight = 400 | 500 | 700;\ntype ResponsiveValue = Record<ScreenSize, string>;\n\nconst responsivePx = (desktopPx: number, mobilePx: number): ResponsiveValue =>\n  ({\n    small: `${mobilePx}px`,\n    large: `${desktopPx}px`,\n  }) as const;\n\nconst fixedPx = (px: number): ResponsiveValue =>\n  ({\n    small: `${px}px`,\n    large: `${px}px`,\n  }) as const;\n\nexport const family = {\n  satoshi: \"Satoshi\",\n};\n\nexport const weight: { [label in FontWeightLabel]: FontWeight } = {\n  regular: 400,\n  medium: 500,\n  bold: 700,\n};\n\nexport type TextStyle = {\n  fontFamily: string;\n  fontWeight: FontWeight;\n  fontSize: ResponsiveValue;\n};\n\nconst textStyle = (\n  fontWeight: FontWeight,\n  desktopFontSize: number,\n  mobileFontSize: number = desktopFontSize - 2,\n): TextStyle => ({\n  fontFamily: family.satoshi,\n  fontWeight,\n  fontSize: responsivePx(desktopFontSize, mobileFontSize),\n});\n\nexport const heading1 = textStyle(weight.bold, 32);\nexport const heading2 = textStyle(weight.bold, 28);\nexport const heading3 = textStyle(weight.bold, 24);\n\nexport const subheading1Bold = textStyle(weight.bold, 20);\nexport const subheading1Medium = textStyle(weight.medium, 20);\nexport const subheading1Regular = textStyle(weight.regular, 20);\n\nexport const subheading2Bold = textStyle(weight.bold, 18);\nexport const subheading2Medium = textStyle(weight.medium, 18);\nexport const subheading2Regular = textStyle(weight.regular, 18);\n\nexport const bodyPrimaryBold = textStyle(weight.bold, 16);\nexport const bodyPrimaryMedium = textStyle(weight.medium, 16);\nexport const bodyPrimaryRegular = textStyle(weight.regular, 16);\n\nexport const bodySecondaryBold = textStyle(weight.bold, 14);\nexport const bodySecondaryMedium = textStyle(weight.medium, 14);\nexport const bodySecondaryRegular = textStyle(weight.regular, 14);\n\nexport const captionBold = textStyle(weight.bold, 12, 12);\nexport const captionMedium = textStyle(weight.medium, 12, 12);\nexport const captionRegular = textStyle(weight.regular, 12, 12);\n"]}
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"AAMA,MAAM,YAAY,GAAG,CAAC,SAAiB,EAAE,QAAgB,EAAmB,EAAE,CAC5E,CAAC;IACC,KAAK,EAAE,GAAG,QAAQ,IAAI;IACtB,KAAK,EAAE,GAAG,SAAS,IAAI;CACxB,CAAU,CAAC;AAEd,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAA+C;IAChE,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;CACV,CAAC;AAQF,MAAM,SAAS,GAAG,CAChB,UAAsB,EACtB,eAAuB,EACvB,iBAAyB,eAAe,GAAG,CAAC,EACjC,EAAE,CAAC,CAAC;IACf,UAAU,EAAE,MAAM,CAAC,OAAO;IAC1B,UAAU;IACV,QAAQ,EAAE,YAAY,CAAC,eAAe,EAAE,cAAc,CAAC;CACxD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AACnD,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AACnD,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAEnD,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAC9D,MAAM,CAAC,MAAM,kBAAkB,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAC9D,MAAM,CAAC,MAAM,kBAAkB,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAC9D,MAAM,CAAC,MAAM,kBAAkB,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAC5D,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAChE,MAAM,CAAC,MAAM,oBAAoB,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAElE,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,aAAa,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AAC9D,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC","sourcesContent":["import type { ScreenSize } from \"../types\";\n\ntype FontWeightLabel = \"regular\" | \"medium\" | \"bold\";\ntype FontWeight = 400 | 500 | 700;\ntype ResponsiveValue = Record<ScreenSize, string>;\n\nconst responsivePx = (desktopPx: number, mobilePx: number): ResponsiveValue =>\n  ({\n    small: `${mobilePx}px`,\n    large: `${desktopPx}px`,\n  }) as const;\n\nexport const family = {\n  satoshi: \"Satoshi\",\n};\n\nexport const weight: { [label in FontWeightLabel]: FontWeight } = {\n  regular: 400,\n  medium: 500,\n  bold: 700,\n};\n\nexport type TextStyle = {\n  fontFamily: string;\n  fontWeight: FontWeight;\n  fontSize: ResponsiveValue;\n};\n\nconst textStyle = (\n  fontWeight: FontWeight,\n  desktopFontSize: number,\n  mobileFontSize: number = desktopFontSize - 2,\n): TextStyle => ({\n  fontFamily: family.satoshi,\n  fontWeight,\n  fontSize: responsivePx(desktopFontSize, mobileFontSize),\n});\n\nexport const heading1 = textStyle(weight.bold, 32);\nexport const heading2 = textStyle(weight.bold, 28);\nexport const heading3 = textStyle(weight.bold, 24);\n\nexport const subheading1Bold = textStyle(weight.bold, 20);\nexport const subheading1Medium = textStyle(weight.medium, 20);\nexport const subheading1Regular = textStyle(weight.regular, 20);\n\nexport const subheading2Bold = textStyle(weight.bold, 18);\nexport const subheading2Medium = textStyle(weight.medium, 18);\nexport const subheading2Regular = textStyle(weight.regular, 18);\n\nexport const bodyPrimaryBold = textStyle(weight.bold, 16);\nexport const bodyPrimaryMedium = textStyle(weight.medium, 16);\nexport const bodyPrimaryRegular = textStyle(weight.regular, 16);\n\nexport const bodySecondaryBold = textStyle(weight.bold, 14);\nexport const bodySecondaryMedium = textStyle(weight.medium, 14);\nexport const bodySecondaryRegular = textStyle(weight.regular, 14);\n\nexport const captionBold = textStyle(weight.bold, 12, 12);\nexport const captionMedium = textStyle(weight.medium, 12, 12);\nexport const captionRegular = textStyle(weight.regular, 12, 12);\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/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"]}

package/core/templates/GrantMatch/index.js

@@ -9,33 +9,25 @@ import GrantMatchModal from "./GrantMatchModal";
 import OpenModalButton from "./OpenModalButton";
 import { GrantMatchContext } from "./context";
 const GrantMatch = ({ activeQuery, updateActiveQuery, textSearchCallback, findGrantsCallback, closeModalCallback, openModalCallback, }) => {
-    const { showModal, openModal, closeModal } = useModal();
+    const { isModalOpen, openModal, closeModal } = useModal();
     const [queryText, setQueryText] = useState(activeQuery.text);
-    const updateQueryText = (newText) => setQueryText(newText);
     const commonProps = useMemo(() => ({
         activeQuery,
         updateActiveQuery,
         queryText,
-        updateQueryText,
+        updateQueryText: setQueryText,
         openModal,
         closeModal,
-    }), [
-        activeQuery,
-        updateActiveQuery,
-        queryText,
-        updateQueryText,
-        openModal,
-        closeModal,
-    ]);
+    }), [activeQuery, updateActiveQuery, queryText, openModal, closeModal]);
     const handleSearch = () => {
         updateActiveQuery({ files: activeQuery.files, text: queryText });
         textSearchCallback?.();
     };
     const handleReset = () => {
-        updateQueryText("");
+        setQueryText("");
         updateActiveQuery({ files: activeQuery.files, text: "" });
     };
-    return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsxs(SearchBarContainer, { children: [_jsx(SearchBar, { queryText: queryText, onChangeQueryText: (event) => setQueryText(event.target.value), handlePressEnter: () => handleSearch(), onClickSearch: () => handleSearch(), onClickReset: () => handleReset(), size: "small" }), _jsx(OpenModalButton, { openModalCallback: openModalCallback })] }), activeQuery.files.length > 0 ? _jsx(ActiveQueryFiles, {}) : _jsx(_Fragment, {}), showModal ? (_jsx(GrantMatchModal, { findGrantsCallback: findGrantsCallback, closeModalCallback: closeModalCallback })) : (_jsx(_Fragment, {}))] }) }));
+    return (_jsx(GrantMatchContext.Provider, { value: commonProps, children: _jsxs(BaseGrantMatch, { children: [_jsxs(SearchBarContainer, { children: [_jsx(SearchBar, { queryText: queryText, onChangeQueryText: (event) => setQueryText(event.target.value), handlePressEnter: () => handleSearch(), onClickSearch: () => handleSearch(), onClickReset: () => handleReset(), size: "small" }), _jsx(OpenModalButton, { openModalCallback: openModalCallback })] }), activeQuery.files.length > 0 ? _jsx(ActiveQueryFiles, {}) : _jsx(_Fragment, {}), isModalOpen ? (_jsx(GrantMatchModal, { findGrantsCallback: findGrantsCallback, closeModalCallback: closeModalCallback })) : (_jsx(_Fragment, {}))] }) }));
 };
 export default GrantMatch;
 const BaseGrantMatch = styled.div `

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

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