@grantbii/design-system 1.25.0 → 1.27.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@grantbii/design-system",
   "author": "Grantbii",
   "license": "UNLICENSED",
-  "version": "1.25.0",
+  "version": "1.27.0",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -21,12 +21,12 @@
   },
   "dependencies": {
     "@phosphor-icons/react": "2.1.10",
-    "country-flag-icons": "1.6.17",
+    "country-flag-icons": "1.6.19",
     "react-dropzone": "15.0.0",
     "react-spinners": "0.17.0"
   },
   "peerDependencies": {
-    "@grantbii/ui-core": "^1.8",
+    "@grantbii/ui-core": "^1.10",
     "next": "^16.2",
     "react": ">=18 <20",
     "react-dom": ">=18 <20",
@@ -35,32 +35,32 @@
   "devDependencies": {
     "@chromatic-com/storybook": "5.2.1",
     "@grantbii/ui-core": "1.10.0",
-    "@storybook/addon-a11y": "10.4.2",
-    "@storybook/addon-docs": "10.4.2",
-    "@storybook/addon-onboarding": "10.4.2",
-    "@storybook/addon-vitest": "10.4.2",
-    "@storybook/nextjs-vite": "10.4.2",
+    "@storybook/addon-a11y": "10.4.6",
+    "@storybook/addon-docs": "10.4.6",
+    "@storybook/addon-onboarding": "10.4.6",
+    "@storybook/addon-vitest": "10.4.6",
+    "@storybook/nextjs-vite": "10.4.6",
     "@types/node": "22.19.17",
-    "@types/react": "19.2.14",
+    "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@vitest/browser": "4.1.8",
-    "@vitest/browser-playwright": "4.1.8",
-    "@vitest/coverage-v8": "4.1.8",
+    "@vitest/browser": "4.1.9",
+    "@vitest/browser-playwright": "4.1.9",
+    "@vitest/coverage-v8": "4.1.9",
     "eslint": "9.39.4",
-    "eslint-config-next": "16.2.7",
+    "eslint-config-next": "16.2.9",
     "eslint-config-prettier": "10.1.8",
-    "eslint-plugin-storybook": "10.4.2",
+    "eslint-plugin-storybook": "10.4.6",
     "husky": "9.1.7",
-    "lint-staged": "17.0.7",
-    "next": "16.2.7",
-    "playwright": "1.60.0",
-    "prettier": "3.8.3",
+    "lint-staged": "17.0.8",
+    "next": "16.2.9",
+    "playwright": "1.61.1",
+    "prettier": "3.9.4",
     "react": "19.2.7",
     "react-dom": "19.2.7",
-    "storybook": "10.4.2",
-    "styled-components": "6.4.2",
+    "storybook": "10.4.6",
+    "styled-components": "6.4.3",
     "typescript": "6.0.3",
-    "vitest": "4.1.8"
+    "vitest": "4.1.9"
   },
   "lint-staged": {
     "**/*.{html,css,json,md,yaml}": [

package/stories/archive/RadioButtons.stories.d.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 type ExampleProps = {
     controlled: boolean;
 };
-declare const RadioButtonsExample: ({ controlled }: ExampleProps) => import("react/jsx-runtime").JSX.Element;
+declare const RadioButtonsExample: ({ controlled }: ExampleProps) => import("react").JSX.Element;
 declare const meta: Meta<typeof RadioButtonsExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/stories/archive/TallyModal.stories.d.ts

@@ -5,7 +5,7 @@ type TallyModalExampleProps = {
     tallyId: string;
     prefilledFieldsQueryParams?: string;
 };
-declare const TallyModalExample: (props: TallyModalExampleProps) => import("react/jsx-runtime").JSX.Element;
+declare const TallyModalExample: (props: TallyModalExampleProps) => import("react").JSX.Element;
 declare const meta: Meta<typeof TallyModalExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/stories/organisms/Dropdown.stories.d.ts

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/nextjs-vite";
 type ExampleProps = {
     controlled: boolean;
 };
-declare const DropdownExample: ({ controlled }: ExampleProps) => import("react/jsx-runtime").JSX.Element;
+declare const DropdownExample: ({ controlled }: ExampleProps) => import("react").JSX.Element;
 declare const meta: Meta<typeof DropdownExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/stories/organisms/FileDrop.stories.d.ts

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/nextjs-vite";
-declare const FileDropExample: () => import("react/jsx-runtime").JSX.Element;
+declare const FileDropExample: () => import("react").JSX.Element;
 declare const meta: Meta<typeof FileDropExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/stories/organisms/Modal.stories.d.ts

@@ -7,7 +7,7 @@ type ModalExampleProps = {
     width?: string;
     height?: string;
 };
-declare const ModalExample: (props: ModalExampleProps) => import("react/jsx-runtime").JSX.Element;
+declare const ModalExample: (props: ModalExampleProps) => JSX.Element;
 declare const meta: Meta<typeof ModalExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Small: Story;
 export declare const Medium: Story;
+export declare const OutlineSearchButton: Story;

package/stories/organisms/SearchBar.stories.js

@@ -1,16 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SearchBar } from "@/.";
 import { useState } from "react";
-const SearchBarExample = ({ size }) => {
-    const [activeQuery, setActiveQuery] = useState(emptyQuery);
-    const updateActiveQuery = (newQuery) => setActiveQuery(newQuery);
+const SearchBarExample = ({ size, searchButtonVariant, }) => {
     const [queryText, setQueryText] = useState("");
-    const updateQueryText = (newText) => setQueryText(newText);
-    return (_jsx(SearchBar, { activeQuery: activeQuery, updateActiveQuery: updateActiveQuery, queryText: queryText, updateQueryText: updateQueryText, size: size }));
-};
-const emptyQuery = {
-    text: "",
-    files: [],
+    const performSearch = () => {
+        if (queryText.trim() !== "") {
+            alert(`Searching for ${queryText}`);
+        }
+    };
+    return (_jsx(SearchBar, { queryText: queryText, onClickReset: () => setQueryText(""), onClickSearch: () => performSearch(), handlePressEnter: () => performSearch(), onChangeQueryText: (event) => setQueryText(event.target.value), searchButtonVariant: searchButtonVariant, size: size }));
 };
 const meta = {
     title: "Organisms/SearchBar",
@@ -27,4 +25,7 @@ export const Small = {
 export const Medium = {
     args: { size: "medium" },
 };
+export const OutlineSearchButton = {
+    args: { size: "medium", searchButtonVariant: "outline" },
+};
 //# sourceMappingURL=SearchBar.stories.js.map

package/stories/organisms/SearchBar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.stories.js","sourceRoot":"","sources":["../../../stories/organisms/SearchBar.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAGhC,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAMjC,MAAM,gBAAgB,GAAG,CAAC,EAAE,IAAI,EAAyB,EAAE,EAAE;IAC3D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAkB,UAAU,CAAC,CAAC;IAC5E,MAAM,iBAAiB,GAAG,CAAC,QAAyB,EAAE,EAAE,CACtD,cAAc,CAAC,QAAQ,CAAC,CAAC;IAE3B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,eAAe,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAEnE,OAAO,CACL,KAAC,SAAS,IACR,WAAW,EAAE,WAAW,EACxB,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,IAAI,EAAE,IAAI,GACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,UAAU,GAAG;IACjB,IAAI,EAAE,EAAE;IACR,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;CACzB,CAAC","sourcesContent":["import { SearchBar } from \"@/.\";\nimport type { GrantMatchQuery } from \"@grantbii/ui-core/match/entities\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\n\ntype SearchBarExampleProps = {\n  size?: \"small\" | \"medium\";\n};\n\nconst SearchBarExample = ({ size }: SearchBarExampleProps) => {\n  const [activeQuery, setActiveQuery] = useState<GrantMatchQuery>(emptyQuery);\n  const updateActiveQuery = (newQuery: GrantMatchQuery) =>\n    setActiveQuery(newQuery);\n\n  const [queryText, setQueryText] = useState(\"\");\n  const updateQueryText = (newText: string) => setQueryText(newText);\n\n  return (\n    <SearchBar\n      activeQuery={activeQuery}\n      updateActiveQuery={updateActiveQuery}\n      queryText={queryText}\n      updateQueryText={updateQueryText}\n      size={size}\n    />\n  );\n};\n\nconst emptyQuery = {\n  text: \"\",\n  files: [],\n};\n\nconst meta: Meta<typeof SearchBar> = {\n  title: \"Organisms/SearchBar\",\n  component: SearchBarExample,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"fullscreen\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Small: Story = {\n  args: { size: \"small\" },\n};\n\nexport const Medium: Story = {\n  args: { size: \"medium\" },\n};\n"]}
+{"version":3,"file":"SearchBar.stories.js","sourceRoot":"","sources":["../../../stories/organisms/SearchBar.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAA0C,MAAM,KAAK,CAAC;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAOjC,MAAM,gBAAgB,GAAG,CAAC,EACxB,IAAI,EACJ,mBAAmB,GACG,EAAE,EAAE;IAC1B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE/C,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,IAAI,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC;YAC5B,KAAK,CAAC,iBAAiB,SAAS,EAAE,CAAC,CAAC;QACtC,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC,EACpC,aAAa,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,EACpC,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,EACvC,iBAAiB,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAC9D,mBAAmB,EAAE,mBAAmB,EACxC,IAAI,EAAE,IAAI,GACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;CACxB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;CACzB,CAAC;AAEF,MAAM,CAAC,MAAM,mBAAmB,GAAU;IACxC,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,mBAAmB,EAAE,SAAS,EAAE;CACzD,CAAC","sourcesContent":["import { SearchBar, type ButtonVariant, type SearchBarSize } from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport { useState } from \"react\";\n\ntype SearchBarExampleProps = {\n  size?: SearchBarSize;\n  searchButtonVariant?: ButtonVariant;\n};\n\nconst SearchBarExample = ({\n  size,\n  searchButtonVariant,\n}: SearchBarExampleProps) => {\n  const [queryText, setQueryText] = useState(\"\");\n\n  const performSearch = () => {\n    if (queryText.trim() !== \"\") {\n      alert(`Searching for ${queryText}`);\n    }\n  };\n\n  return (\n    <SearchBar\n      queryText={queryText}\n      onClickReset={() => setQueryText(\"\")}\n      onClickSearch={() => performSearch()}\n      handlePressEnter={() => performSearch()}\n      onChangeQueryText={(event) => setQueryText(event.target.value)}\n      searchButtonVariant={searchButtonVariant}\n      size={size}\n    />\n  );\n};\n\nconst meta: Meta<typeof SearchBar> = {\n  title: \"Organisms/SearchBar\",\n  component: SearchBarExample,\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"fullscreen\",\n  },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Small: Story = {\n  args: { size: \"small\" },\n};\n\nexport const Medium: Story = {\n  args: { size: \"medium\" },\n};\n\nexport const OutlineSearchButton: Story = {\n  args: { size: \"medium\", searchButtonVariant: \"outline\" },\n};\n"]}

package/stories/templates/GrantMatch.stories.d.ts

@@ -5,7 +5,7 @@ type Callbacks = {
     closeModalCallback?: () => void;
     openModalCallback?: () => void;
 };
-declare const GrantMatchExample: (callbacks: Callbacks) => import("react/jsx-runtime").JSX.Element;
+declare const GrantMatchExample: (callbacks: Callbacks) => import("react").JSX.Element;
 declare const meta: Meta<typeof GrantMatchExample>;
 export default meta;
 type Story = StoryObj<typeof meta>;