Merge pull request #18 from gisce/sync/main-to-develop-20250108-104520

package.json

@@ -20,7 +20,7 @@
   "engines": {
     "node": "20.5.0"
   },
-  "version": "1.8.1",
+  "version": "1.9.0",
   "module": "./dist/react-formiga-components.es.js",
   "types": "./dist/index.d.ts",
   "exports": {

src/components/ui/FieldSet/FieldSet.styles.tsx

@@ -1,19 +1,41 @@
 import styled from "styled-components";
 
-export const FieldSetElement = styled.fieldset`
+export const FieldSetElement = styled.fieldset<{ borderRadius?: string }>`
   padding: 0.5rem;
-  border-color: #D9D9D9;
+  border-color: #d9d9d9;
   border-width: 1px;
   border-style: solid;
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
+  border-radius: ${(props) => props.borderRadius || "5px"};
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    "Noto Sans",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji" !important;
 `;
+
 export const Legend = styled.legend`
   all: initial;
   padding-left: 0.5em;
   padding-right: 0.5em;
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    Helvetica,
+    Arial,
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji";
   font-size: 0.85rem;
 `;

src/components/ui/FieldSet/FieldSet.tsx

@@ -1,11 +1,13 @@
 import React, { useState } from "react";
 import { FieldSetElement, Legend } from "./FieldSet.styles";
 import { FieldSetProps } from "./FieldSet.types";
-import { Space } from "antd";
+import { Space, theme } from "antd";
+
+const { useToken } = theme;
 
 export const FieldSet = (props: FieldSetProps): React.ReactElement => {
-  const { label, children, icon: Icon } = props;
-  const [isOpen, setIsOpen] = useState(true);
+  const { label, children, icon: Icon, borderRadius } = props;
+  const { token } = useToken();
   const labelComponent = (
     <Space>
       {Icon ? <Icon /> : null}
@@ -14,7 +16,7 @@ export const FieldSet = (props: FieldSetProps): React.ReactElement => {
   );
 
   return (
-    <FieldSetElement>
+    <FieldSetElement borderRadius={`${borderRadius || token.borderRadius}px`}>
       <Legend>{labelComponent}</Legend>
       {children}
     </FieldSetElement>

src/components/ui/FieldSet/FieldSet.types.tsx

@@ -2,4 +2,5 @@ export type FieldSetProps = {
   label: string;
   children: any;
   icon?: React.ElementType | undefined;
+  borderRadius?: string;
 };