@grantbii/design-system 1.0.73 → 1.0.75

package/core/molecules/RadioButtons.js

@@ -17,7 +17,7 @@ import { RadioButton } from "../atoms";
 const RadioButtons = ({ name, options }) => {
     return (_jsx(RadioGroup, { children: options.map((_a) => {
             var { value } = _a, props = __rest(_a, ["value"]);
-            return (_createElement(RadioButton, Object.assign({}, props, { key: `${name}-${value}`, id: `${name}-${value}`, value: value, name: name })));
+            return (_createElement(RadioButton, Object.assign({}, props, { key: `${name}-${value}`, value: value, name: name })));
         }) }));
 };
 export default RadioButtons;

package/core/organisms/GrantMatch/SearchBar.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled, { css } from "styled-components";
 import { Colors, Icons, Responsive, Typography } from "../../foundations";
 import { useGrantMatchContext } from "./context";
 const SearchBar = () => {
-    const { activeQuery } = useGrantMatchContext();
-    return (_jsxs(BaseSearchBar, { "$hasActiveQueryText": activeQuery.text !== "", children: [_jsx(QueryTextInput, {}), _jsxs(Buttons, { children: [_jsx(ResetTextButton, {}), _jsx(SearchButton, {}), _jsx(FileDropButton, {})] })] }));
+    const { activeQuery, queryText } = useGrantMatchContext();
+    return (_jsxs(BaseSearchBar, { "$hasActiveQueryText": activeQuery.text !== "", children: [_jsx(QueryTextInput, {}), _jsxs(Buttons, { children: [queryText !== "" ? _jsx(ResetTextButton, {}) : _jsx(_Fragment, {}), _jsx(SearchButton, {}), _jsx(FileDropButton, {})] })] }));
 };
 export default SearchBar;
 const BaseSearchBar = styled.div `
@@ -20,15 +20,15 @@ const BaseSearchBar = styled.div `
   border-radius: 12px;
 
   @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
-    gap: 8px;
+    gap: 6px;
+    padding: 6px;
     width: 100%;
-    padding: 6px 16px;
   }
 
   @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
     gap: 10px;
-    width: 480px;
     padding: 10px;
+    width: 480px;
   }
 `;
 const QueryTextInput = () => {
@@ -50,16 +50,23 @@ const BaseQueryTextInput = styled.input `
 const Buttons = styled.div `
   display: flex;
   align-items: center;
-  gap: 8px;
+
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    gap: 6px;
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    gap: 10px;
+  }
 `;
 const BaseIconButton = styled.button `
   display: flex;
   align-items: center;
   justify-content: center;
 
-  height: 32px;
-  width: 32px;
-  min-width: 32px;
+  height: 31px;
+  width: 31px;
+  min-width: 31px;
 
   border-radius: 8px;
 `;
@@ -73,6 +80,7 @@ const ResetTextButton = () => {
 };
 const BaseResetTextButton = styled(BaseIconButton) `
   background-color: ${Colors.base.white};
+  border: 1px solid ${Colors.base.white};
 `;
 const SearchButton = () => {
     const { activeQuery, updateActiveQuery, queryText } = useGrantMatchContext();
@@ -80,7 +88,8 @@ const SearchButton = () => {
     return (_jsx(BaseSearchButton, { type: "button", onClick: onClick, children: _jsx(Icons.MagnifyingGlassIcon, { size: 16, color: Colors.neutral.grey1 }) }));
 };
 const BaseSearchButton = styled(BaseIconButton) `
-  background-color: ${Colors.neutral.grey3};
+  background-color: ${Colors.neutral.grey4};
+  border: 1px solid ${Colors.neutral.grey3};
 `;
 const FileDropButton = () => {
     const { activeQuery, openModal } = useGrantMatchContext();

package/core/organisms/GrantMatch/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { checkGrantMatchActive } from "@grantbii/ui-base/match/mappings";
+import { checkGrantMatchActive } from "@grantbii/ui-base/match/validations";
 import { useState } from "react";
 import styled from "styled-components";
 import { useModal } from "../../molecules";

package/core/organisms/YesNoOptions.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { LogicOption } from "@grantbii/ui-base/grant/enums";
+import { LogicValue } from "@grantbii/ui-base/grant/enums";
 import styled from "styled-components";
 import { RadioButton } from "../atoms";
-const YesNoOptions = ({ name, yesProps, noProps, unsureProps, }) => (_jsxs(RadioGroup, { children: [_jsx(RadioButton, Object.assign({}, yesProps, { id: `${name}-yes`, label: LogicOption.YES, value: LogicOption.YES, name: name })), _jsx(RadioButton, Object.assign({}, noProps, { id: `${name}-no`, label: LogicOption.NO, value: LogicOption.NO, name: name })), unsureProps ? (_jsx(RadioButton, Object.assign({}, unsureProps, { id: `${name}-unsure`, label: LogicOption.UNSURE, value: LogicOption.UNSURE, name: name }))) : (_jsx(_Fragment, {}))] }));
+const YesNoOptions = ({ name, yesProps, noProps, unsureProps, }) => (_jsxs(RadioGroup, { children: [_jsx(RadioButton, Object.assign({}, yesProps, { label: LogicValue.YES, value: LogicValue.YES, name: name })), _jsx(RadioButton, Object.assign({}, noProps, { label: LogicValue.NO, value: LogicValue.NO, name: name })), unsureProps ? (_jsx(RadioButton, Object.assign({}, unsureProps, { label: LogicValue.UNSURE, value: LogicValue.UNSURE, name: name }))) : (_jsx(_Fragment, {}))] }));
 export default YesNoOptions;
 const RadioGroup = styled.div `
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.73",
+  "version": "1.0.75",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -18,7 +18,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@grantbii/ui-base": "1.0.20",
+    "@grantbii/ui-base": "1.0.26",
     "@phosphor-icons/react": "^2.1.10",
     "country-flag-icons": "^1.5.19",
     "next": "^15.5.2",
@@ -38,8 +38,8 @@
     "@storybook/addon-vitest": "^9.1.3",
     "@storybook/nextjs-vite": "^9.1.3",
     "@types/node": "^20",
-    "@types/react": "^19.1.11",
-    "@types/react-dom": "^19.1.8",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "eslint": "^9.34.0",