@synerise/ds-form-field 1.3.9 → 1.3.11

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form-field@1.3.10...@synerise/ds-form-field@1.3.11) (2026-04-01)
+
+**Note:** Version bump only for package @synerise/ds-form-field
+
+## [1.3.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form-field@1.3.9...@synerise/ds-form-field@1.3.10) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-form-field
+
 ## [1.3.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-form-field@1.3.8...@synerise/ds-form-field@1.3.9) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-form-field

package/dist/FormField.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import type { FormFieldProps } from './FormField.types';
+import { default as React } from 'react';
+import { FormFieldProps } from './FormField.types';
 declare const FormField: ({ label, tooltip, id, rightSide, tooltipConfig, description, errorText, children, ...rest }: FormFieldProps) => React.JSX.Element;
 export default FormField;

package/dist/FormField.js

@@ -1,33 +1,27 @@
-var _excluded = ["label", "tooltip", "id", "rightSide", "tooltipConfig", "description", "errorText", "children"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useId } from 'react';
-import * as S from './FormField.styles';
-import { ContentAboveElement } from './components/ContentAboveElement';
-import { ContentBelowElement } from './components/ContentBelowElement';
-var FormField = function FormField(_ref) {
-  var label = _ref.label,
-    tooltip = _ref.tooltip,
-    id = _ref.id,
-    rightSide = _ref.rightSide,
-    tooltipConfig = _ref.tooltipConfig,
-    description = _ref.description,
-    errorText = _ref.errorText,
-    children = _ref.children,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var uniqueId = useId();
-  var hasContent = Boolean(label || rightSide || description || errorText);
-  return /*#__PURE__*/React.createElement(S.FormFieldWrapper, _extends({
-    hasContent: hasContent
-  }, rest), /*#__PURE__*/React.createElement(ContentAboveElement, {
-    label: label,
-    rightSide: rightSide,
-    id: id || uniqueId,
-    tooltip: tooltip,
-    tooltipConfig: tooltipConfig
-  }), /*#__PURE__*/React.createElement(S.FormFieldComponent, null, children), /*#__PURE__*/React.createElement(ContentBelowElement, {
-    description: description,
-    errorText: errorText
-  }));
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { FormFieldWrapper, FormFieldComponent } from "./FormField.styles.js";
+import { ContentAboveElement } from "./components/ContentAboveElement.js";
+import { ContentBelowElement } from "./components/ContentBelowElement.js";
+const FormField = ({
+  label,
+  tooltip,
+  id,
+  rightSide,
+  tooltipConfig,
+  description,
+  errorText,
+  children,
+  ...rest
+}) => {
+  const uniqueId = useId();
+  const hasContent = Boolean(label || rightSide || description || errorText);
+  return /* @__PURE__ */ jsxs(FormFieldWrapper, { hasContent, ...rest, children: [
+    /* @__PURE__ */ jsx(ContentAboveElement, { label, rightSide, id: id || uniqueId, tooltip, tooltipConfig }),
+    /* @__PURE__ */ jsx(FormFieldComponent, { children }),
+    /* @__PURE__ */ jsx(ContentBelowElement, { description, errorText })
+  ] });
+};
+export {
+  FormField as default
 };
-export default FormField;

package/dist/FormField.styles.d.ts

@@ -1,13 +1,13 @@
-export declare const FormFieldWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const FormFieldWrapper: import('styled-components').StyledComponent<"div", any, {
     hasContent?: boolean;
 }, never>;
-export declare const ErrorText: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Description: import("styled-components").StyledComponent<"div", any, {
+export declare const ErrorText: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Description: import('styled-components').StyledComponent<"div", any, {
     disabled?: boolean;
 }, never>;
-export declare const FormFieldLabelWrapper: import("styled-components").StyledComponent<"label", any, {}, never>;
-export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const FormFieldComponent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ContentAbove: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ContentBelow: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const RightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FormFieldLabelWrapper: import('styled-components').StyledComponent<"label", any, {}, never>;
+export declare const IconWrapper: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const FormFieldComponent: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ContentAbove: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ContentBelow: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const RightSide: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/FormField.styles.js

@@ -1,44 +1,54 @@
-import styled from 'styled-components';
-import { Description as BaseDescription, ErrorText as BaseErrorText, Label, macro } from '@synerise/ds-typography';
-export var FormFieldWrapper = styled.div.withConfig({
+import styled from "styled-components";
+import { Label, macro, Description as Description$1, ErrorText as ErrorText$1 } from "@synerise/ds-typography";
+const FormFieldWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FormFieldstyles__FormFieldWrapper",
   componentId: "sc-584zv-0"
-})(["", ""], function (props) {
-  return props.hasContent && "display: flex;\n      flex-direction: column;\n      gap: 8px;\n      align-items: stretch;\n      justify-content: flex-start;\n    ";
-});
-export var ErrorText = styled(BaseErrorText).withConfig({
+})(["", ""], (props) => props.hasContent && `display: flex;
+      flex-direction: column;
+      gap: 8px;
+      align-items: stretch;
+      justify-content: flex-start;
+    `);
+const ErrorText = /* @__PURE__ */ styled(ErrorText$1).withConfig({
   displayName: "FormFieldstyles__ErrorText",
   componentId: "sc-584zv-1"
 })(["margin:0;"]);
-export var Description = styled(BaseDescription).withConfig({
+const Description = /* @__PURE__ */ styled(Description$1).withConfig({
   displayName: "FormFieldstyles__Description",
   componentId: "sc-584zv-2"
 })([""]);
-export var FormFieldLabelWrapper = styled(Label).withConfig({
+const FormFieldLabelWrapper = /* @__PURE__ */ styled(Label).withConfig({
   displayName: "FormFieldstyles__FormFieldLabelWrapper",
   componentId: "sc-584zv-3"
 })(["", ";height:17px;display:flex;align-items:center;cursor:pointer;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis;"], macro.heading);
-export var IconWrapper = styled.span.withConfig({
+const IconWrapper = /* @__PURE__ */ styled.span.withConfig({
   displayName: "FormFieldstyles__IconWrapper",
   componentId: "sc-584zv-4"
-})(["display:inline-block;color:", ";margin-top:-1px;"], function (props) {
-  return props.theme.palette['grey-400'];
-});
-export var FormFieldComponent = styled.div.withConfig({
+})(["display:inline-block;color:", ";margin-top:-1px;"], (props) => props.theme.palette["grey-400"]);
+const FormFieldComponent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FormFieldstyles__FormFieldComponent",
   componentId: "sc-584zv-5"
 })([""]);
-export var ContentAbove = styled.div.withConfig({
+const ContentAbove = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FormFieldstyles__ContentAbove",
   componentId: "sc-584zv-6"
 })(["display:flex;justify-content:space-between;min-height:18px;"]);
-export var ContentBelow = styled.div.withConfig({
+const ContentBelow = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FormFieldstyles__ContentBelow",
   componentId: "sc-584zv-7"
 })(["display:flex;flex-direction:column;gap:4px;"]);
-export var RightSide = styled.div.withConfig({
+const RightSide = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FormFieldstyles__RightSide",
   componentId: "sc-584zv-8"
-})(["font-weight:500;flex:1 0 auto;text-align:end;color:", ";"], function (props) {
-  return props.theme.palette['grey-500'];
-});
+})(["font-weight:500;flex:1 0 auto;text-align:end;color:", ";"], (props) => props.theme.palette["grey-500"]);
+export {
+  ContentAbove,
+  ContentBelow,
+  Description,
+  ErrorText,
+  FormFieldComponent,
+  FormFieldLabelWrapper,
+  FormFieldWrapper,
+  IconWrapper,
+  RightSide
+};

package/dist/FormField.types.d.ts

@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react';
-import type { TooltipProps } from '@synerise/ds-tooltip';
-import type { WithHTMLAttributes } from '@synerise/ds-utils';
+import { ReactNode } from 'react';
+import { TooltipProps } from '@synerise/ds-tooltip';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type ContentAboveProps = BaseLabelProps & {
     rightSide?: ReactNode;
 };

package/dist/FormField.types.js

@@ -1 +1 @@
-export {};
+

package/dist/components/ContentAboveElement.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import type { ContentAboveProps } from '../FormField.types';
+import { default as React } from 'react';
+import { ContentAboveProps } from '../FormField.types';
 export declare const ContentAboveElement: ({ label, id, tooltip, tooltipConfig, rightSide, }: ContentAboveProps) => React.JSX.Element;

package/dist/components/ContentAboveElement.js

@@ -1,16 +1,18 @@
-import React from 'react';
-import * as S from '../FormField.styles';
-import { FormFieldLabel } from './FormFieldLabel';
-export var ContentAboveElement = function ContentAboveElement(_ref) {
-  var label = _ref.label,
-    id = _ref.id,
-    tooltip = _ref.tooltip,
-    tooltipConfig = _ref.tooltipConfig,
-    rightSide = _ref.rightSide;
-  return label || rightSide ? /*#__PURE__*/React.createElement(S.ContentAbove, null, /*#__PURE__*/React.createElement(FormFieldLabel, {
-    label: label,
-    id: id,
-    tooltip: tooltip,
-    tooltipConfig: tooltipConfig
-  }), /*#__PURE__*/React.createElement(S.RightSide, null, rightSide)) : /*#__PURE__*/React.createElement(React.Fragment, null);
-};
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { ContentAbove, RightSide } from "../FormField.styles.js";
+import { FormFieldLabel } from "./FormFieldLabel.js";
+const ContentAboveElement = ({
+  label,
+  id,
+  tooltip,
+  tooltipConfig,
+  rightSide
+}) => {
+  return label || rightSide ? /* @__PURE__ */ jsxs(ContentAbove, { children: [
+    /* @__PURE__ */ jsx(FormFieldLabel, { label, id, tooltip, tooltipConfig }),
+    /* @__PURE__ */ jsx(RightSide, { children: rightSide })
+  ] }) : /* @__PURE__ */ jsx(Fragment, {});
+};
+export {
+  ContentAboveElement
+};

package/dist/components/ContentBelowElement.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import { type ContentBelowProps } from '../FormField.types';
+import { default as React } from 'react';
+import { ContentBelowProps } from '../FormField.types';
 export declare const ContentBelowElement: ({ description, errorText, }: ContentBelowProps) => React.JSX.Element | null;

package/dist/components/ContentBelowElement.js

@@ -1,11 +1,18 @@
-import React from 'react';
-import * as S from '../FormField.styles';
-export var ContentBelowElement = function ContentBelowElement(_ref) {
-  var description = _ref.description,
-    errorText = _ref.errorText;
+import { jsxs, jsx } from "react/jsx-runtime";
+import { ContentBelow, ErrorText, Description } from "../FormField.styles.js";
+const ContentBelowElement = ({
+  description,
+  errorText
+}) => {
   if (!errorText && !description) {
     return null;
   }
-  var hasErrorMessage = Boolean(errorText);
-  return /*#__PURE__*/React.createElement(S.ContentBelow, null, hasErrorMessage && /*#__PURE__*/React.createElement(S.ErrorText, null, errorText), description && /*#__PURE__*/React.createElement(S.Description, null, description));
-};
+  const hasErrorMessage = Boolean(errorText);
+  return /* @__PURE__ */ jsxs(ContentBelow, { children: [
+    hasErrorMessage && /* @__PURE__ */ jsx(ErrorText, { children: errorText }),
+    description && /* @__PURE__ */ jsx(Description, { children: description })
+  ] });
+};
+export {
+  ContentBelowElement
+};

package/dist/components/FormFieldLabel.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import { type FormFieldLabelProps } from '../FormField.types';
+import { default as React } from 'react';
+import { FormFieldLabelProps } from '../FormField.types';
 export declare const FormFieldLabel: ({ id, label, tooltip, tooltipConfig, children, ...htmlAttributes }: FormFieldLabelProps) => React.JSX.Element;

package/dist/components/FormFieldLabel.js

@@ -1,32 +1,21 @@
-var _excluded = ["id", "label", "tooltip", "tooltipConfig", "children"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from 'react';
-import Icon, { InfoFillS } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import { Text } from '@synerise/ds-typography';
-import * as S from '../FormField.styles';
-export var FormFieldLabel = function FormFieldLabel(_ref) {
-  var id = _ref.id,
-    label = _ref.label,
-    tooltip = _ref.tooltip,
-    tooltipConfig = _ref.tooltipConfig,
-    children = _ref.children,
-    htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, (label || children) && /*#__PURE__*/React.createElement(S.FormFieldLabelWrapper, _extends({
-    htmlFor: id
-  }, htmlAttributes), /*#__PURE__*/React.createElement(Text, {
-    ellipsis: {
-      tooltip: label || children
-    }
-  }, label || children), (tooltip || tooltipConfig) && /*#__PURE__*/React.createElement(Tooltip, _extends({
-    title: tooltip,
-    placement: "top",
-    trigger: "hover"
-  }, tooltipConfig), /*#__PURE__*/React.createElement(S.IconWrapper, {
-    "data-testid": "label-tooltip-trigger"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    size: 24,
-    component: /*#__PURE__*/React.createElement(InfoFillS, null)
-  })))));
-};
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import Icon, { InfoFillS } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { Text } from "@synerise/ds-typography";
+import { FormFieldLabelWrapper, IconWrapper } from "../FormField.styles.js";
+const FormFieldLabel = ({
+  id,
+  label,
+  tooltip,
+  tooltipConfig,
+  children,
+  ...htmlAttributes
+}) => /* @__PURE__ */ jsx(Fragment, { children: (label || children) && /* @__PURE__ */ jsxs(FormFieldLabelWrapper, { htmlFor: id, ...htmlAttributes, children: [
+  /* @__PURE__ */ jsx(Text, { ellipsis: {
+    tooltip: label || children
+  }, children: label || children }),
+  (tooltip || tooltipConfig) && /* @__PURE__ */ jsx(Tooltip, { title: tooltip, placement: "top", trigger: "hover", ...tooltipConfig, children: /* @__PURE__ */ jsx(IconWrapper, { "data-testid": "label-tooltip-trigger", children: /* @__PURE__ */ jsx(Icon, { size: 24, component: /* @__PURE__ */ jsx(InfoFillS, {}) }) }) })
+] }) });
+export {
+  FormFieldLabel
+};

package/dist/components/index.js

@@ -1,3 +1,8 @@
-export { FormFieldLabel } from './FormFieldLabel';
-export { ContentAboveElement } from './ContentAboveElement';
-export { ContentBelowElement } from './ContentBelowElement';
+import { FormFieldLabel } from "./FormFieldLabel.js";
+import { ContentAboveElement } from "./ContentAboveElement.js";
+import { ContentBelowElement } from "./ContentBelowElement.js";
+export {
+  ContentAboveElement,
+  ContentBelowElement,
+  FormFieldLabel
+};

package/dist/index.js

@@ -1,2 +1,10 @@
-export { default } from './FormField';
-export * from './components';
+import { default as default2 } from "./FormField.js";
+import { FormFieldLabel } from "./components/FormFieldLabel.js";
+import { ContentAboveElement } from "./components/ContentAboveElement.js";
+import { ContentBelowElement } from "./components/ContentBelowElement.js";
+export {
+  ContentAboveElement,
+  ContentBelowElement,
+  FormFieldLabel,
+  default2 as default
+};

package/dist/modules.d.js

@@ -1 +1 @@
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-form-field",
-  "version": "1.3.9",
+  "version": "1.3.11",
   "description": "FormField UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -16,10 +16,10 @@
     "access": "public"
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:css && pnpm run defs",
+    "build": "vite build",
     "build:css": "node ../../../scripts/style/less.js",
     "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
-    "build:watch": "pnpm run build:js -- --watch",
+    "build:watch": "vite build --watch",
     "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
     "pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
     "prepublish": "pnpm run build",
@@ -35,10 +35,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-icon": "^1.15.0",
-    "@synerise/ds-tooltip": "^1.4.9",
-    "@synerise/ds-typography": "^1.1.12",
-    "@synerise/ds-utils": "^1.7.0"
+    "@synerise/ds-icon": "^1.15.2",
+    "@synerise/ds-tooltip": "^1.4.11",
+    "@synerise/ds-typography": "^1.1.14",
+    "@synerise/ds-utils": "^1.7.1"
   },
   "devDependencies": {
     "@testing-library/user-event": "^14.6.1"
@@ -48,5 +48,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
+  "gitHead": "c2384982c3533a31eb5e5e0408f8dcecb2b0f399"
 }