@synerise/ds-subtle-form 1.0.3 → 1.1.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subtle-form@1.0.4...@synerise/ds-subtle-form@1.1.0) (2025-04-16)
+
+
+### Features
+
+* **form-field:** add form-field component ([7f6b191](https://github.com/Synerise/synerise-design/commit/7f6b191132a3b0d694c21fb4d649f4deea6acb89))
+
+
+
+
+
+## [1.0.4](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subtle-form@1.0.3...@synerise/ds-subtle-form@1.0.4) (2025-04-02)
+
+**Note:** Version bump only for package @synerise/ds-subtle-form
+
+
+
+
+
 ## [1.0.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subtle-form@1.0.2...@synerise/ds-subtle-form@1.0.3) (2025-03-31)
 
 **Note:** Version bump only for package @synerise/ds-subtle-form

package/dist/Elements/DatePicker/DatePicker.js

@@ -1,15 +1,14 @@
 var _excluded = ["value", "suffix", "suffixTooltip", "format", "label", "children", "labelTooltip", "placeholder", "onApply", "onClear", "errorText", "error", "activeProp", "onDropdownVisibleChange", "disabled"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+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, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Icon, { CalendarM } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
-import { theme } from '@synerise/ds-core';
-import { Label } from '@synerise/ds-input';
+import { useTheme } from '@synerise/ds-core';
 import DatePicker from '@synerise/ds-date-picker';
 import format from '@synerise/ds-date-picker/dist/format';
 import * as S from '../../SubtleForm.styles';
-import { SelectContainer, ContentAbove, MaskedDatePlaceholder } from './DatePicker.styles';
+import { SelectContainer, MaskedDatePlaceholder } from './DatePicker.styles';
 import { getFormattingString, replaceLettersWithUnderscore } from './utils';
 var SubtleDatePicker = function SubtleDatePicker(_ref) {
   var value = _ref.value,
@@ -35,6 +34,7 @@ var SubtleDatePicker = function SubtleDatePicker(_ref) {
     blurred = _useState2[0],
     setBlurred = _useState2[1];
   var containerRef = useRef(null);
+  var theme = useTheme();
   var hasError = error || !!errorText;
   var showTime = rest.showTime;
   var dateFormattingString = useMemo(function () {
@@ -63,12 +63,11 @@ var SubtleDatePicker = function SubtleDatePicker(_ref) {
   }, []);
   return /*#__PURE__*/React.createElement(S.Subtle, {
     className: "ds-subtle-form"
-  }, /*#__PURE__*/React.createElement(ContentAbove, {
-    active: active || hasError
-  }, /*#__PURE__*/React.createElement(Label, {
+  }, /*#__PURE__*/React.createElement(S.SubtleFormField, {
+    active: active || hasError,
     label: label,
     tooltip: labelTooltip
-  })), /*#__PURE__*/React.createElement(SelectContainer, {
+  }, /*#__PURE__*/React.createElement(SelectContainer, {
     disabled: !!disabled,
     ref: containerRef,
     className: "ds-subtle-date-picker",
@@ -106,6 +105,6 @@ var SubtleDatePicker = function SubtleDatePicker(_ref) {
   }, suffix != null ? suffix : /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(CalendarM, null),
     color: theme.palette['grey-600']
-  }))))));
+  })))))));
 };
 export default SubtleDatePicker;

package/dist/Elements/DatePicker/DatePicker.styles.d.ts

@@ -2,9 +2,6 @@ export declare const SelectContainer: import("styled-components").StyledComponen
     active: boolean;
     disabled: boolean;
 }, never>;
-export declare const ContentAbove: import("styled-components").StyledComponent<"div", any, {
-    active: boolean;
-}, never>;
 export declare const MaskedDatePlaceholder: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
 }, never>;

package/dist/Elements/DatePicker/DatePicker.styles.js

@@ -2,20 +2,14 @@ import styled, { css } from 'styled-components';
 export var SelectContainer = styled.div.withConfig({
   displayName: "DatePickerstyles__SelectContainer",
   componentId: "sc-xiwxgz-0"
-})(["position:relative;height:32px;width:100%;", " > div{margin:0;}", ""], function (props) {
+})(["position:relative;min-height:32px;width:100%;", " > div{margin:0;}", ""], function (props) {
   return props.active && css(["margin:-2px 0 0 -1px;"]);
 }, function (props) {
   return !!props.disabled && css(["&&{cursor:not-allowed;}"]);
 });
-export var ContentAbove = styled.div.withConfig({
-  displayName: "DatePickerstyles__ContentAbove",
-  componentId: "sc-xiwxgz-1"
-})(["padding:0;display:flex;justify-content:space-between;margin-bottom:", ";"], function (props) {
-  return props.active ? "10px" : "8px";
-});
 export var MaskedDatePlaceholder = styled.div.withConfig({
   displayName: "DatePickerstyles__MaskedDatePlaceholder",
-  componentId: "sc-xiwxgz-2"
+  componentId: "sc-xiwxgz-1"
 })(["font-size:13px;color:transparent;position:absolute;left:0;top:8px;transition:", ";"], function (props) {
   return props.disabled ? 'none' : 'left 0.1s ease-in 0.2s, color 0.1s ease-in 0.2s';
 });

package/dist/Elements/Field/Field.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { SubtleFieldProps } from '../../SubtleForm.types';
-declare const SubtleField: React.FC<SubtleFieldProps>;
+declare const SubtleField: ({ disabled, suffix, suffixTooltip, label, labelTooltip, activeElement, inactiveElement, mask, maskVisible, errorText, active: activeProp, }: SubtleFieldProps) => React.JSX.Element;
 export default SubtleField;

package/dist/Elements/Field/Field.js

@@ -1,11 +1,9 @@
-import React from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import Tooltip from '@synerise/ds-tooltip';
 import Icon, { EditS } from '@synerise/ds-icon';
-import { theme } from '@synerise/ds-core';
-import { Label } from '@synerise/ds-input';
+import { useTheme } from '@synerise/ds-core';
 import { useOnClickOutside } from '@synerise/ds-utils';
 import * as S from '../../SubtleForm.styles';
-import { ContentAbove } from './Field.styles';
 import { MaskedDatePlaceholder } from '../DatePicker/DatePicker.styles';
 var SubtleField = function SubtleField(_ref) {
   var disabled = _ref.disabled,
@@ -17,41 +15,43 @@ var SubtleField = function SubtleField(_ref) {
     inactiveElement = _ref.inactiveElement,
     mask = _ref.mask,
     maskVisible = _ref.maskVisible,
+    errorText = _ref.errorText,
     activeProp = _ref.active;
-  var _React$useState = React.useState(activeProp),
-    active = _React$useState[0],
-    setActive = _React$useState[1];
-  var _React$useState2 = React.useState(false),
-    blurred = _React$useState2[0],
-    setBlurred = _React$useState2[1];
-  var containerRef = React.useRef(null);
-  var handleDeactivate = React.useCallback(function () {
+  var _useState = useState(activeProp),
+    active = _useState[0],
+    setActive = _useState[1];
+  var _useState2 = useState(false),
+    blurred = _useState2[0],
+    setBlurred = _useState2[1];
+  var containerRef = useRef(null);
+  var handleDeactivate = useCallback(function () {
     setActive(false);
     setBlurred(true);
   }, []);
-  var handleActivate = React.useCallback(function () {
+  var handleActivate = useCallback(function () {
     setActive(true);
     setBlurred(false);
   }, []);
-  React.useEffect(function () {
+  var theme = useTheme();
+  useEffect(function () {
     return setActive(activeProp);
   }, [activeProp]);
+  var isActive = Boolean(errorText || active && !blurred && !!activeElement);
   useOnClickOutside(containerRef, function () {
     handleDeactivate();
   });
   return /*#__PURE__*/React.createElement(S.Subtle, {
     className: "ds-subtle-form",
     disabled: disabled
-  }, /*#__PURE__*/React.createElement(ContentAbove, {
-    active: active
-  }, /*#__PURE__*/React.createElement(Label, {
+  }, /*#__PURE__*/React.createElement(S.SubtleFormField, {
+    active: isActive,
     label: label,
     tooltip: labelTooltip
-  })), /*#__PURE__*/React.createElement(S.Container, {
+  }, /*#__PURE__*/React.createElement(S.Container, {
     ref: containerRef,
     className: "ds-subtle-field",
     active: active
-  }, active && !blurred && !!activeElement ? activeElement() : /*#__PURE__*/React.createElement(S.Inactive, {
+  }, isActive && activeElement ? activeElement() : /*#__PURE__*/React.createElement(S.Inactive, {
     tabIndex: 0,
     onFocus: !disabled ? handleActivate : undefined,
     onClick: !disabled ? handleActivate : undefined,
@@ -68,6 +68,6 @@ var SubtleField = function SubtleField(_ref) {
   }, suffix != null ? suffix : /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(EditS, null),
     color: theme.palette['grey-600']
-  }))))));
+  })))))));
 };
 export default SubtleField;

package/dist/Elements/Input/Input.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { SubtleInputProps } from './Input.types';
-declare const SubtleTextArea: React.FC<SubtleInputProps>;
-export default SubtleTextArea;
+declare const SubtleInput: ({ disabled, value, onChange, placeholder, label, labelTooltip, suffixTooltip, suffix, error, errorText, inputProps, ...rest }: SubtleInputProps) => React.JSX.Element;
+export default SubtleInput;

package/dist/Elements/Input/Input.js

@@ -1,14 +1,14 @@
 var _excluded = ["disabled", "value", "onChange", "placeholder", "label", "labelTooltip", "suffixTooltip", "suffix", "error", "errorText", "inputProps"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React from 'react';
+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, { useCallback, useRef, useState } from 'react';
 import Tooltip from '@synerise/ds-tooltip';
 import Icon, { EditS } from '@synerise/ds-icon';
-import { theme } from '@synerise/ds-core';
-import { Input, Label } from '@synerise/ds-input';
+import { useTheme } from '@synerise/ds-core';
+import { Input } from '@synerise/ds-input';
 import * as S from '../../SubtleForm.styles';
 import { focusPadding } from '../../SubtleForm.styles';
-var SubtleTextArea = function SubtleTextArea(_ref) {
+var SubtleInput = function SubtleInput(_ref) {
   var disabled = _ref.disabled,
     value = _ref.value,
     _onChange = _ref.onChange,
@@ -21,34 +21,34 @@ var SubtleTextArea = function SubtleTextArea(_ref) {
     errorText = _ref.errorText,
     inputProps = _ref.inputProps,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _React$useState = React.useState(false),
-    active = _React$useState[0],
-    setActive = _React$useState[1];
-  var _React$useState2 = React.useState(false),
-    blurred = _React$useState2[0],
-    setBlurred = _React$useState2[1];
-  var containerRef = React.useRef(null);
+  var _useState = useState(false),
+    active = _useState[0],
+    setActive = _useState[1];
+  var _useState2 = useState(false),
+    blurred = _useState2[0],
+    setBlurred = _useState2[1];
+  var containerRef = useRef(null);
+  var theme = useTheme();
   var hasError = error || !!errorText;
-  var handleDeactivate = React.useCallback(function (e) {
+  var handleDeactivate = useCallback(function (event) {
     if (inputProps) {
       var onBlur = inputProps.onBlur;
-      onBlur && onBlur(e);
+      onBlur && onBlur(event);
     }
     setActive(false);
     setBlurred(true);
   }, [inputProps]);
-  var handleActivate = React.useCallback(function () {
+  var handleActivate = useCallback(function () {
     setActive(true);
     setBlurred(false);
   }, []);
   return /*#__PURE__*/React.createElement(S.Subtle, {
     className: "ds-subtle-form"
-  }, /*#__PURE__*/React.createElement(S.ContentAbove, {
-    active: active
-  }, /*#__PURE__*/React.createElement(Label, {
+  }, /*#__PURE__*/React.createElement(S.SubtleFormField, {
+    active: active,
     label: label,
     tooltip: labelTooltip
-  })), /*#__PURE__*/React.createElement(S.Container, {
+  }, /*#__PURE__*/React.createElement(S.Container, {
     ref: containerRef,
     className: "ds-subtle-input",
     active: active,
@@ -59,8 +59,8 @@ var SubtleTextArea = function SubtleTextArea(_ref) {
   React.createElement(Input, _extends({
     autoFocus: !hasError && !disabled,
     disabled: disabled,
-    onChange: function onChange(e) {
-      _onChange && _onChange(e.currentTarget.value);
+    onChange: function onChange(event) {
+      _onChange && _onChange(event.currentTarget.value);
     },
     onBlur: !disabled ? handleDeactivate : undefined,
     value: value,
@@ -80,6 +80,6 @@ var SubtleTextArea = function SubtleTextArea(_ref) {
   }, suffix != null ? suffix : /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(EditS, null),
     color: theme.palette['grey-600']
-  }))))));
+  })))))));
 };
-export default SubtleTextArea;
+export default SubtleInput;

package/dist/Elements/Input/Input.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps } from 'antd/lib/input';
 import { SubtleFieldProps } from '../../SubtleForm.types';
 export type SubtleInputProps = {
@@ -6,6 +5,5 @@ export type SubtleInputProps = {
     value?: string;
     placeholder?: string;
     error?: boolean;
-    errorText?: string | React.ReactNode;
     inputProps: InputProps;
 } & SubtleFieldProps;

package/dist/Elements/Select/Select.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { SubtleSelectProps } from './Select.types';
-declare const SubtleSelect: React.FC<SubtleSelectProps>;
+declare const SubtleSelect: ({ disabled, value, suffix, suffixTooltip, label, children, labelTooltip, placeholder, error, errorText, dropdownAlign, ...rest }: SubtleSelectProps) => React.JSX.Element;
 export default SubtleSelect;

package/dist/Elements/Select/Select.js

@@ -1,14 +1,13 @@
 var _excluded = ["disabled", "value", "suffix", "suffixTooltip", "label", "children", "labelTooltip", "placeholder", "error", "errorText", "dropdownAlign"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React from 'react';
+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, { useCallback, useRef, useState } from 'react';
 import Icon, { AngleDownS } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
-import { theme } from '@synerise/ds-core';
-import { Label } from '@synerise/ds-input';
+import { useTheme } from '@synerise/ds-core';
 import Select from '@synerise/ds-select';
 import * as S from '../../SubtleForm.styles';
-import { SelectContainer, ContentAbove } from './Select.styles';
+import { SelectContainer } from './Select.styles';
 var SubtleSelect = function SubtleSelect(_ref) {
   var disabled = _ref.disabled,
     value = _ref.value,
@@ -23,31 +22,31 @@ var SubtleSelect = function SubtleSelect(_ref) {
     _ref$dropdownAlign = _ref.dropdownAlign,
     dropdownAlign = _ref$dropdownAlign === void 0 ? {} : _ref$dropdownAlign,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _React$useState = React.useState(false),
-    active = _React$useState[0],
-    setActive = _React$useState[1];
-  var _React$useState2 = React.useState(false),
-    blurred = _React$useState2[0],
-    setBlurred = _React$useState2[1];
-  var containerRef = React.useRef(null);
+  var _useState = useState(false),
+    active = _useState[0],
+    setActive = _useState[1];
+  var _useState2 = useState(false),
+    blurred = _useState2[0],
+    setBlurred = _useState2[1];
+  var containerRef = useRef(null);
   var hasError = error || !!errorText;
-  var handleDeactivate = React.useCallback(function () {
+  var handleDeactivate = useCallback(function () {
     setActive(false);
     setBlurred(true);
   }, []);
-  var handleActivate = React.useCallback(function () {
+  var handleActivate = useCallback(function () {
     setActive(true);
     setBlurred(false);
   }, []);
+  var theme = useTheme();
   return /*#__PURE__*/React.createElement(S.Subtle, {
     className: "ds-subtle-form",
     disabled: disabled
-  }, /*#__PURE__*/React.createElement(ContentAbove, {
-    active: active
-  }, /*#__PURE__*/React.createElement(Label, {
+  }, /*#__PURE__*/React.createElement(S.SubtleFormField, {
+    active: active,
     label: label,
     tooltip: labelTooltip
-  })), /*#__PURE__*/React.createElement(SelectContainer, {
+  }, /*#__PURE__*/React.createElement(SelectContainer, {
     ref: containerRef,
     className: "ds-subtle-select",
     active: active
@@ -79,6 +78,6 @@ var SubtleSelect = function SubtleSelect(_ref) {
   }, suffix != null ? suffix : /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(AngleDownS, null),
     color: theme.palette['grey-600']
-  }))))));
+  })))))));
 };
 export default SubtleSelect;

package/dist/Elements/Select/Select.styles.d.ts

@@ -1,6 +1,3 @@
 export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {
     active: boolean;
 }, never>;
-export declare const ContentAbove: import("styled-components").StyledComponent<"div", any, {
-    active: boolean;
-}, never>;

package/dist/Elements/Select/Select.styles.js

@@ -2,12 +2,6 @@ import styled, { css } from 'styled-components';
 export var SelectContainer = styled.div.withConfig({
   displayName: "Selectstyles__SelectContainer",
   componentId: "sc-u85d8m-0"
-})(["position:relative;height:32px;width:100%;", " .ant-select-focused{.ds-status{margin:-1px 0 0 0;}}.ds-status{margin:0;}div.ant-select-selector{transition:border 0s linear !important;}"], function (props) {
+})(["position:relative;min-height:32px;width:100%;", " .ant-select-focused{.ds-status{margin:-1px 0 0 0;}}.ds-status{margin:0;}div.ant-select-selector{transition:border 0s linear !important;}"], function (props) {
   return props.active && css(["margin:-2px 0 0 -1px;"]);
-});
-export var ContentAbove = styled.div.withConfig({
-  displayName: "Selectstyles__ContentAbove",
-  componentId: "sc-u85d8m-1"
-})(["padding:0 0 0 0;display:flex;justify-content:space-between;margin-bottom:", ";"], function (props) {
-  return props.active ? "10px" : "8px";
 });

package/dist/Elements/TextArea/TextArea.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { SubtleTextAreaProps } from './TextArea.types';
-declare const SubtleTextArea: React.FC<SubtleTextAreaProps>;
+declare const SubtleTextArea: ({ disabled, minRows, maxRows, value, onChange, placeholder, label, labelTooltip, suffixTooltip, suffix, error, errorText, textAreaProps, ...rest }: SubtleTextAreaProps) => React.JSX.Element;
 export default SubtleTextArea;

package/dist/Elements/TextArea/TextArea.js

@@ -1,11 +1,11 @@
 var _excluded = ["disabled", "minRows", "maxRows", "value", "onChange", "placeholder", "label", "labelTooltip", "suffixTooltip", "suffix", "error", "errorText", "textAreaProps"];
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React from 'react';
+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, { useCallback, useEffect, useRef, useState } from 'react';
 import Icon, { EditS } from '@synerise/ds-icon';
 import Tooltip from '@synerise/ds-tooltip';
-import { theme } from '@synerise/ds-core';
-import { Label, TextArea } from '@synerise/ds-input';
+import { useTheme } from '@synerise/ds-core';
+import { TextArea } from '@synerise/ds-input';
 import calculateSize from 'calculate-size';
 import * as S from '../../SubtleForm.styles';
 import { focusPadding } from '../../SubtleForm.styles';
@@ -30,18 +30,19 @@ var SubtleTextArea = function SubtleTextArea(_ref) {
     errorText = _ref.errorText,
     textAreaProps = _ref.textAreaProps,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _React$useState = React.useState(false),
-    active = _React$useState[0],
-    setActive = _React$useState[1];
-  var _React$useState2 = React.useState(false),
-    blurred = _React$useState2[0],
-    setBlurred = _React$useState2[1];
-  var containerRef = React.useRef(null);
-  var _React$useState3 = React.useState(minRows),
-    visibleRows = _React$useState3[0],
-    setVisibleRows = _React$useState3[1];
+  var _useState = useState(false),
+    active = _useState[0],
+    setActive = _useState[1];
+  var _useState2 = useState(false),
+    blurred = _useState2[0],
+    setBlurred = _useState2[1];
+  var containerRef = useRef(null);
+  var _useState3 = useState(minRows),
+    visibleRows = _useState3[0],
+    setVisibleRows = _useState3[1];
+  var theme = useTheme();
   var hasError = error || !!errorText;
-  var calculateTextHeight = React.useCallback(function () {
+  var calculateTextHeight = useCallback(function () {
     var textHeight = 0;
     if (!!value && !!containerRef.current) {
       var _calculateSize = calculateSize(value, {
@@ -54,7 +55,7 @@ var SubtleTextArea = function SubtleTextArea(_ref) {
     }
     return textHeight;
   }, [value, containerRef]);
-  React.useEffect(function () {
+  useEffect(function () {
     var keyboardBasedLines = Number(value == null ? void 0 : value.split('\n').length);
     var refBasedLines = Math.floor((calculateTextHeight() + 2 * VERTICAL_PADDING_PX) / ROW_HEIGHT_PX);
     var lines = Math.max(Number(refBasedLines), keyboardBasedLines);
@@ -70,34 +71,33 @@ var SubtleTextArea = function SubtleTextArea(_ref) {
       setVisibleRows(lines);
     }
   }, [minRows, maxRows, value, calculateTextHeight]);
-  var handleDeactivate = React.useCallback(function (e) {
+  var handleDeactivate = useCallback(function (event) {
     if (textAreaProps) {
       var onBlur = textAreaProps.onBlur;
-      onBlur && onBlur(e);
+      onBlur && onBlur(event);
     }
     setActive(false);
     setBlurred(true);
   }, [textAreaProps]);
-  var handleActivate = React.useCallback(function () {
+  var handleActivate = useCallback(function () {
     setActive(true);
     setBlurred(false);
   }, []);
   return /*#__PURE__*/React.createElement(S.Subtle, {
     className: "ds-subtle-form"
-  }, label && /*#__PURE__*/React.createElement(S.ContentAbove, {
-    active: active
-  }, /*#__PURE__*/React.createElement(Label, {
+  }, /*#__PURE__*/React.createElement(S.SubtleFormField, {
+    active: active,
     label: label,
     tooltip: labelTooltip
-  })), /*#__PURE__*/React.createElement(S.Container, {
+  }, /*#__PURE__*/React.createElement(S.Container, {
     ref: containerRef,
     className: "ds-subtle-textarea",
     active: active,
     disabled: disabled
   }, (active || hasError) && !disabled ? /*#__PURE__*/React.createElement(TextArea, _extends({
     autoFocus: !hasError && !disabled,
-    onChange: !disabled ? function (e) {
-      onChange && onChange(e.currentTarget.value);
+    onChange: !disabled ? function (event) {
+      onChange && onChange(event.currentTarget.value);
     } : undefined,
     onBlur: !disabled ? handleDeactivate : undefined,
     value: value,
@@ -129,6 +129,6 @@ var SubtleTextArea = function SubtleTextArea(_ref) {
   }, suffix != null ? suffix : /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(EditS, null),
     color: theme.palette['grey-600']
-  }))))));
+  })))))));
 };
 export default SubtleTextArea;

package/dist/Elements/TextArea/TextArea.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TextAreaProps } from '@synerise/ds-input/dist/Textarea/Textarea.types';
 import { SubtleFieldProps } from '../../SubtleForm.types';
 export type SubtleTextAreaProps = {
@@ -9,7 +8,6 @@ export type SubtleTextAreaProps = {
     placeholder?: string;
     autoSize?: TextareaAutosize;
     error?: boolean;
-    errorText?: React.ReactNode;
     textAreaProps?: TextAreaProps;
 } & SubtleFieldProps;
 export type TextareaAutosize = {

package/dist/SubtleForm.styles.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const blurPadding = "7px 40px 7px 0px";
 export declare const focusPadding = "7px 28px 7px 12px";
 export declare const blurAnimation: import("styled-components").Keyframes;
@@ -24,6 +25,6 @@ export declare const Container: import("styled-components").StyledComponent<"div
 export declare const Subtle: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
 }, never>;
-export declare const ContentAbove: import("styled-components").StyledComponent<"div", any, {
+export declare const SubtleFormField: import("styled-components").StyledComponent<({ label, tooltip, id, rightSide, tooltipConfig, description, errorText, children, ...rest }: import("@synerise/ds-form-field").FormFieldProps) => import("react").JSX.Element, any, {
     active: boolean;
 }, never>;

package/dist/SubtleForm.styles.js

@@ -1,4 +1,5 @@
 import styled, { css, keyframes } from 'styled-components';
+import FormField from '@synerise/ds-form-field';
 import { MaskedDatePlaceholder } from './Elements/DatePicker/DatePicker.styles';
 var disableBlinkingCursor = function disableBlinkingCursor(props) {
   return css(["color:transparent;text-shadow:0 1px ", ";"], props.grey ? props.theme.palette['grey-500'] : props.theme.palette['grey-600']);
@@ -56,9 +57,9 @@ export var Subtle = styled.div.withConfig({
 })(["", ""], function (props) {
   return !!props.disabled && css(["&&{cursor:not-allowed;}"]);
 });
-export var ContentAbove = styled.div.withConfig({
-  displayName: "SubtleFormstyles__ContentAbove",
+export var SubtleFormField = styled(FormField).withConfig({
+  displayName: "SubtleFormstyles__SubtleFormField",
   componentId: "sc-1wunvof-6"
-})(["padding:0;display:flex;justify-content:space-between;margin-bottom:", ";"], function (props) {
-  return props.active ? "9px" : "8px";
+})(["gap:", ";"], function (props) {
+  return props.active ? "10px" : "8px";
 });

package/dist/SubtleForm.types.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FormFieldCommonProps } from '@synerise/ds-form-field';
 import { SubtleTextAreaProps } from './Elements/TextArea/TextArea.types';
 import { SubtleSelectProps } from './Elements/Select/Select.types';
 import { SubtleDatePickerProps } from './Elements/DatePicker/DatePicker.types';
@@ -13,12 +14,11 @@ export type SubtleFormSubComponents = {
 export type SubtleFieldProps = {
     active?: boolean;
     disabled?: boolean;
-    label?: React.ReactNode | string;
-    labelTooltip?: React.ReactNode | string;
+    labelTooltip?: FormFieldCommonProps['tooltip'];
     suffix?: React.ReactNode | string;
     suffixTooltip?: React.ReactNode | string;
     activeElement?: () => React.ReactElement;
     inactiveElement?: () => React.ReactElement;
     mask?: string;
     maskVisible?: boolean;
-};
+} & Pick<FormFieldCommonProps, 'label' | 'errorText'>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-subtle-form",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "SubtleForm UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,11 +34,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-date-picker": "^1.0.3",
-    "@synerise/ds-icon": "^1.2.0",
-    "@synerise/ds-input": "^1.0.3",
-    "@synerise/ds-select": "^1.0.3",
-    "@synerise/ds-tooltip": "^1.1.2",
+    "@synerise/ds-date-picker": "^1.1.0",
+    "@synerise/ds-form-field": "^1.1.0",
+    "@synerise/ds-icon": "^1.4.0",
+    "@synerise/ds-input": "^1.1.0",
+    "@synerise/ds-select": "^1.1.0",
+    "@synerise/ds-tooltip": "^1.1.4",
     "@synerise/ds-utils": "^1.0.1",
     "calculate-size": "^1.1.1"
   },
@@ -48,5 +49,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "5438445467b16dbc0c2ca97d969ae0e09b74131b"
+  "gitHead": "6735f9babfeef53122f54ca86cba5f581e8870d9"
 }

package/dist/Elements/Field/Field.styles.d.ts

@@ -1,3 +0,0 @@
-export declare const ContentAbove: import("styled-components").StyledComponent<"div", any, {
-    active?: boolean | undefined;
-}, never>;

package/dist/Elements/Field/Field.styles.js

@@ -1,9 +0,0 @@
-import styled from 'styled-components';
-
-// eslint-disable-next-line import/prefer-default-export
-export var ContentAbove = styled.div.withConfig({
-  displayName: "Fieldstyles__ContentAbove",
-  componentId: "sc-1etqryf-0"
-})(["padding:0 0 0 0;display:flex;justify-content:space-between;margin-bottom:", ";"], function (props) {
-  return props.active ? "10px" : "8px";
-});