@grantbii/design-system 1.11.1 → 1.11.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9,11 +9,12 @@ type LinkButtonProps = {
|
|
|
9
9
|
RightIcon?: ComponentType<Icons.IconProps>;
|
|
10
10
|
underline?: boolean;
|
|
11
11
|
backgroundColor?: string;
|
|
12
|
+
borderColor?: string;
|
|
12
13
|
color?: string;
|
|
13
14
|
width?: string;
|
|
14
15
|
} & DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
|
|
15
16
|
/**
|
|
16
17
|
* A link that looks like a button
|
|
17
18
|
*/
|
|
18
|
-
declare const LinkButton: ({ label, LeftIcon, RightIcon, underline, backgroundColor, color, width, disabled, target, ...linkProps }: LinkButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
declare const LinkButton: ({ label, LeftIcon, RightIcon, underline, backgroundColor, borderColor, color, width, disabled, target, ...linkProps }: LinkButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
20
|
export default LinkButton;
|
package/core/atoms/LinkButton.js
CHANGED
|
@@ -5,18 +5,19 @@ import { BaseButton } from "./shared";
|
|
|
5
5
|
/**
|
|
6
6
|
* A link that looks like a button
|
|
7
7
|
*/
|
|
8
|
-
const LinkButton = ({ label, LeftIcon, RightIcon, underline, backgroundColor, color, width, disabled, target = "_blank", ...linkProps }) => {
|
|
8
|
+
const LinkButton = ({ label, LeftIcon, RightIcon, underline, backgroundColor, borderColor, color, width, disabled, target = "_blank", ...linkProps }) => {
|
|
9
9
|
const contentProps = {
|
|
10
10
|
label,
|
|
11
11
|
LeftIcon,
|
|
12
12
|
RightIcon,
|
|
13
13
|
underline,
|
|
14
14
|
backgroundColor,
|
|
15
|
+
borderColor,
|
|
15
16
|
color,
|
|
16
17
|
width,
|
|
17
18
|
};
|
|
18
19
|
return disabled ? (_jsx(Content, { ...contentProps })) : (_jsx(Link, { ...linkProps, target: target, children: _jsx(Content, { ...contentProps }) }));
|
|
19
20
|
};
|
|
20
21
|
export default LinkButton;
|
|
21
|
-
const Content = ({ label, LeftIcon, RightIcon, underline, backgroundColor, color, width, }) => (_jsxs(BaseButton, { "$underline": underline, "$backgroundColor": backgroundColor, "$color": color, "$width": width, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), label, RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }));
|
|
22
|
+
const Content = ({ label, LeftIcon, RightIcon, underline, backgroundColor, borderColor, color, width, }) => (_jsxs(BaseButton, { "$underline": underline, "$backgroundColor": backgroundColor, "$borderColor": borderColor, "$color": color, "$width": width, children: [LeftIcon ? _jsx(LeftIcon, { color: color, size: 20 }) : _jsx(_Fragment, {}), label, RightIcon ? _jsx(RightIcon, { color: color, size: 20 }) : _jsx(_Fragment, {})] }));
|
|
22
23
|
//# sourceMappingURL=LinkButton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../core/atoms/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAQ7B,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../../core/atoms/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,WAAW,CAAC;AAQ7B,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAmBtC;;GAEG;AACH,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,EACL,QAAQ,EACR,MAAM,GAAG,QAAQ,EACjB,GAAG,SAAS,EACI,EAAE,EAAE;IACpB,MAAM,YAAY,GAAG;QACnB,KAAK;QACL,QAAQ;QACR,SAAS;QACT,SAAS;QACT,eAAe;QACf,WAAW;QACX,KAAK;QACL,KAAK;KACN,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,KAAC,OAAO,OAAK,YAAY,GAAI,CAC9B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OAAK,SAAS,EAAE,MAAM,EAAE,MAAM,YACjC,KAAC,OAAO,OAAK,YAAY,GAAI,GACxB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC;AAa1B,MAAM,OAAO,GAAG,CAAC,EACf,KAAK,EACL,QAAQ,EACR,SAAS,EACT,SAAS,EACT,eAAe,EACf,WAAW,EACX,KAAK,EACL,KAAK,GACQ,EAAE,EAAE,CAAC,CAClB,MAAC,UAAU,kBACG,SAAS,sBACH,eAAe,kBACnB,WAAW,YACjB,KAAK,YACL,KAAK,aAEZ,QAAQ,CAAC,CAAC,CAAC,KAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,EACvD,KAAK,EACL,SAAS,CAAC,CAAC,CAAC,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,mBAAK,IAC/C,CACd,CAAC","sourcesContent":["import Link from \"next/link\";\nimport type {\n AnchorHTMLAttributes,\n ComponentType,\n DetailedHTMLProps,\n HTMLAttributeAnchorTarget,\n ReactNode,\n} from \"react\";\nimport { Icons } from \"../foundations\";\nimport { BaseButton } from \"./shared\";\n\ntype LinkButtonProps = {\n label: ReactNode;\n href: string;\n disabled?: boolean;\n target?: HTMLAttributeAnchorTarget;\n LeftIcon?: ComponentType<Icons.IconProps>;\n RightIcon?: ComponentType<Icons.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n borderColor?: string;\n color?: string;\n width?: string;\n} & DetailedHTMLProps<\n AnchorHTMLAttributes<HTMLAnchorElement>,\n HTMLAnchorElement\n>;\n\n/**\n * A link that looks like a button\n */\nconst LinkButton = ({\n label,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n borderColor,\n color,\n width,\n disabled,\n target = \"_blank\",\n ...linkProps\n}: LinkButtonProps) => {\n const contentProps = {\n label,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n borderColor,\n color,\n width,\n };\n\n return disabled ? (\n <Content {...contentProps} />\n ) : (\n <Link {...linkProps} target={target}>\n <Content {...contentProps} />\n </Link>\n );\n};\n\nexport default LinkButton;\n\ntype ContentProps = {\n label: ReactNode;\n LeftIcon?: ComponentType<Icons.IconProps>;\n RightIcon?: ComponentType<Icons.IconProps>;\n underline?: boolean;\n backgroundColor?: string;\n borderColor?: string;\n color?: string;\n width?: string;\n};\n\nconst Content = ({\n label,\n LeftIcon,\n RightIcon,\n underline,\n backgroundColor,\n borderColor,\n color,\n width,\n}: ContentProps) => (\n <BaseButton\n $underline={underline}\n $backgroundColor={backgroundColor}\n $borderColor={borderColor}\n $color={color}\n $width={width}\n >\n {LeftIcon ? <LeftIcon color={color} size={20} /> : <></>}\n {label}\n {RightIcon ? <RightIcon color={color} size={20} /> : <></>}\n </BaseButton>\n);\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { HelperFontSize } from "@/core/integrations";
|
|
3
2
|
import Image from "next/image";
|
|
4
3
|
import styled, { css } from "styled-components";
|
|
4
|
+
import { HelperFontSize } from "../../../core/integrations";
|
|
5
5
|
import grantMatchLogo from "../../assets/logos/grant_match_logo.webp";
|
|
6
6
|
import { Colors, Icons, Responsive } from "../../foundations";
|
|
7
7
|
import { useGrantMatchContext } from "./context";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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"]}
|
|
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 { HelperFontSize } from \"../../../core/integrations\";\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/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@grantbii/design-system",
|
|
3
3
|
"author": "Grantbii",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
|
-
"version": "1.11.
|
|
5
|
+
"version": "1.11.3",
|
|
6
6
|
"description": "Grantbii's Design System",
|
|
7
7
|
"homepage": "https://design.grantbii.com",
|
|
8
8
|
"repository": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build-storybook": "storybook build"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@grantbii/ui-core": "1.6.
|
|
23
|
+
"@grantbii/ui-core": "1.6.2",
|
|
24
24
|
"@phosphor-icons/react": "2.1.10",
|
|
25
25
|
"country-flag-icons": "1.6.4",
|
|
26
26
|
"next": "16.1.1",
|
|
@@ -34,11 +34,11 @@
|
|
|
34
34
|
"@chromatic-com/storybook": "4.1.3",
|
|
35
35
|
"@eslint/js": "9.39.2",
|
|
36
36
|
"@next/eslint-plugin-next": "16.1.1",
|
|
37
|
-
"@storybook/addon-a11y": "10.1.
|
|
38
|
-
"@storybook/addon-docs": "10.1.
|
|
39
|
-
"@storybook/addon-onboarding": "10.1.
|
|
40
|
-
"@storybook/addon-vitest": "10.1.
|
|
41
|
-
"@storybook/nextjs-vite": "10.1.
|
|
37
|
+
"@storybook/addon-a11y": "10.1.11",
|
|
38
|
+
"@storybook/addon-docs": "10.1.11",
|
|
39
|
+
"@storybook/addon-onboarding": "10.1.11",
|
|
40
|
+
"@storybook/addon-vitest": "10.1.11",
|
|
41
|
+
"@storybook/nextjs-vite": "10.1.11",
|
|
42
42
|
"@types/node": "22.18.0",
|
|
43
43
|
"@types/react": "19.2.7",
|
|
44
44
|
"@types/react-dom": "19.2.3",
|
|
@@ -48,12 +48,12 @@
|
|
|
48
48
|
"baseline-browser-mapping": "2.9.11",
|
|
49
49
|
"eslint": "9.39.2",
|
|
50
50
|
"eslint-config-next": "16.1.1",
|
|
51
|
-
"eslint-plugin-storybook": "10.1.
|
|
51
|
+
"eslint-plugin-storybook": "10.1.11",
|
|
52
52
|
"husky": "9.1.7",
|
|
53
53
|
"lint-staged": "16.2.7",
|
|
54
54
|
"playwright": "1.57.0",
|
|
55
55
|
"prettier": "3.7.4",
|
|
56
|
-
"storybook": "10.1.
|
|
56
|
+
"storybook": "10.1.11",
|
|
57
57
|
"typescript": "5.9.3",
|
|
58
58
|
"vitest": "4.0.16"
|
|
59
59
|
},
|