@synerise/ds-subtle-form 1.1.59 → 1.1.60

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.60](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subtle-form@1.1.59...@synerise/ds-subtle-form@1.1.60) (2026-04-01)
+
+### Bug Fixes
+
+- **subtle-form:** enable control component from outside ([7a7f585](https://github.com/Synerise/synerise-design/commit/7a7f5854a4c0dc128f4f16f4b076e42aa7bcd6ae))
+
 ## [1.1.59](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subtle-form@1.1.58...@synerise/ds-subtle-form@1.1.59) (2026-03-24)
 
 **Note:** Version bump only for package @synerise/ds-subtle-form

package/dist/Elements/DatePicker/DatePicker.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useMemo, useCallback, useEffect } from "react";
 import { useTheme } from "@synerise/ds-core";
-import DatePicker from "@synerise/ds-date-picker";
+import { DatePicker } from "@synerise/ds-date-picker";
 import format from "@synerise/ds-date-picker/dist/format";
 import Icon, { CalendarM } from "@synerise/ds-icon";
 import Tooltip from "@synerise/ds-tooltip";
@@ -10,7 +10,7 @@ import { SelectContainer, MaskedDatePlaceholder } from "./DatePicker.styles.js";
 import { getFormattingString, replaceLettersWithUnderscore } from "./utils.js";
 const SubtleDatePicker = ({
   value,
-  suffix,
+  suffix = true,
   suffixTooltip,
   format: dateFormat,
   label,
@@ -58,7 +58,7 @@ const SubtleDatePicker = ({
     setActive(false);
     setBlurred(true);
   }, []);
-  return /* @__PURE__ */ jsx(Subtle, { className: "ds-subtle-form", children: /* @__PURE__ */ jsx(SubtleFormField, { active: active || hasError, label, tooltip: labelTooltip, children: /* @__PURE__ */ jsx(SelectContainer, { disabled: !!disabled, ref: containerRef, className: "ds-subtle-date-picker", active: active || hasError, children: active && !blurred || hasError ? /* @__PURE__ */ jsx(DatePicker, { ...rest, value, onApply: (date) => {
+  return /* @__PURE__ */ jsx(Subtle, { className: "ds-subtle-form", children: /* @__PURE__ */ jsx(SubtleFormField, { $active: active || hasError, label, tooltip: labelTooltip, children: /* @__PURE__ */ jsx(SelectContainer, { disabled: !!disabled, ref: containerRef, className: "ds-subtle-date-picker", active: active || hasError, children: active && !blurred || hasError ? /* @__PURE__ */ jsx(DatePicker, { ...rest, value, onApply: (date) => {
     handleDeactivate();
     onApply && onApply(date);
   }, onClear: !disabled ? () => {
@@ -68,12 +68,12 @@ const SubtleDatePicker = ({
     setActive(visible);
     setBlurred(!visible);
     onDropdownVisibleChange && onDropdownVisibleChange(visible);
-  } }) : /* @__PURE__ */ jsxs(Inactive, { disabled, onClick: !disabled ? handleActivate : void 0, blurred, mask: !value, children: [
+  } }) : /* @__PURE__ */ jsxs(Inactive, { $disabled: disabled, onClick: !disabled ? handleActivate : void 0, $blurred: blurred, $mask: !value, children: [
     /* @__PURE__ */ jsxs(MainContent, { hasMargin: true, children: [
       getDisplayText(),
       !disabled && /* @__PURE__ */ jsx(MaskedDatePlaceholder, { children: replaceLettersWithUnderscore(dateFormattingString) })
     ] }),
-    !active && /* @__PURE__ */ jsx(Suffix, { select: true, children: /* @__PURE__ */ jsx(Tooltip, { title: suffixTooltip, children: suffix ?? /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CalendarM, {}), color: theme.palette["grey-600"] }) }) })
+    !active && suffix && /* @__PURE__ */ jsx(Suffix, { select: true, children: /* @__PURE__ */ jsx(Tooltip, { title: suffixTooltip, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CalendarM, {}), color: theme.palette["grey-600"] }) }) })
   ] }) }) }) });
 };
 SubtleDatePicker.displayName = "SubtleDatePicker";

package/dist/Elements/Field/Field.js

@@ -8,7 +8,7 @@ import { Subtle, SubtleFormField, Container, Inactive, MainContent, Suffix } fro
 import { MaskedDatePlaceholder } from "../DatePicker/DatePicker.styles.js";
 const SubtleField = ({
   disabled,
-  suffix,
+  suffix = true,
   suffixTooltip,
   label,
   labelTooltip,
@@ -36,12 +36,12 @@ const SubtleField = ({
   useOnClickOutside(containerRef, () => {
     handleDeactivate();
   });
-  return /* @__PURE__ */ jsx(Subtle, { className: "ds-subtle-form", disabled, children: /* @__PURE__ */ jsx(SubtleFormField, { active: isActive, label, tooltip: labelTooltip, children: /* @__PURE__ */ jsx(Container, { ref: containerRef, className: "ds-subtle-field", active, children: isActive && activeElement ? activeElement() : /* @__PURE__ */ jsxs(Inactive, { tabIndex: 0, onFocus: !disabled ? handleActivate : void 0, onClick: !disabled ? handleActivate : void 0, onBlur: handleDeactivate, blurred, disabled, mask: maskVisible, children: [
+  return /* @__PURE__ */ jsx(Subtle, { className: "ds-subtle-form", $disabled: disabled, children: /* @__PURE__ */ jsx(SubtleFormField, { $active: isActive, label, tooltip: labelTooltip, children: /* @__PURE__ */ jsx(Container, { ref: containerRef, className: "ds-subtle-field", active, children: isActive && activeElement ? activeElement() : /* @__PURE__ */ jsxs(Inactive, { tabIndex: 0, onFocus: !disabled ? handleActivate : void 0, onClick: !disabled ? handleActivate : void 0, onBlur: handleDeactivate, $blurred: blurred, $disabled: disabled, $mask: maskVisible, children: [
     /* @__PURE__ */ jsxs(MainContent, { hasMargin: true, children: [
       inactiveElement && inactiveElement(),
       !disabled && maskVisible && /* @__PURE__ */ jsx(MaskedDatePlaceholder, { children: mask })
     ] }),
-    !active && !disabled && /* @__PURE__ */ jsx(Suffix, { select: true, children: /* @__PURE__ */ jsx(Tooltip, { title: suffixTooltip, children: suffix ?? /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(EditS, {}), color: theme.palette["grey-600"] }) }) })
+    !active && !disabled && suffix && /* @__PURE__ */ jsx(Suffix, { select: true, children: /* @__PURE__ */ jsx(Tooltip, { title: suffixTooltip, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(EditS, {}), color: theme.palette["grey-600"] }) }) })
   ] }) }) }) });
 };
 SubtleField.displayName = "SubtleField";

package/dist/Elements/Input/Input.js

@@ -4,7 +4,7 @@ import { useTheme } from "@synerise/ds-core";
 import Icon, { EditS } from "@synerise/ds-icon";
 import { Input } from "@synerise/ds-input";
 import Tooltip from "@synerise/ds-tooltip";
-import { Subtle, SubtleFormField, Container, focusPadding, Inactive, MainContent, Suffix } from "../../SubtleForm.styles.js";
+import { Subtle, SubtleFormField, Container, Inactive, MainContent, Suffix } from "../../SubtleForm.styles.js";
 const SubtleInput = ({
   disabled,
   value,
@@ -13,7 +13,7 @@ const SubtleInput = ({
   label,
   labelTooltip,
   suffixTooltip,
-  suffix,
+  suffix = true,
   error,
   errorText,
   inputProps,
@@ -38,14 +38,14 @@ const SubtleInput = ({
     setActive(true);
     setBlurred(false);
   }, []);
-  return /* @__PURE__ */ jsx(Subtle, { className: "ds-subtle-form", children: /* @__PURE__ */ jsx(SubtleFormField, { active, label, tooltip: labelTooltip, children: /* @__PURE__ */ jsx(Container, { ref: containerRef, className: "ds-subtle-input", active, disabled, children: (active || hasError) && !disabled ? /* @__PURE__ */ jsx(Input, { autoFocus: !hasError && !disabled, disabled, onChange: (event) => {
+  return /* @__PURE__ */ jsx(Subtle, { className: "ds-subtle-form", children: /* @__PURE__ */ jsx(SubtleFormField, { $active: active, label, tooltip: labelTooltip, children: /* @__PURE__ */ jsx(Container, { ref: containerRef, className: "ds-subtle-input", active, disabled, children: (active || hasError) && !disabled ? /* @__PURE__ */ jsx(Input, { autoFocus: !hasError && !disabled, disabled, onChange: (event) => {
     onChange && onChange(event.currentTarget.value);
   }, onBlur: !disabled ? handleDeactivate : void 0, value, style: {
     margin: 0,
-    padding: focusPadding
-  }, placeholder, error, errorText, ...rest, ...inputProps }) : /* @__PURE__ */ jsxs(Inactive, { onClick: !disabled ? handleActivate : void 0, blurred, disabled, children: [
+    paddingRight: suffix ? "28px" : "12px"
+  }, placeholder, error, errorText, ...rest, ...inputProps }) : /* @__PURE__ */ jsxs(Inactive, { onClick: !disabled ? handleActivate : void 0, $blurred: blurred, $disabled: disabled, children: [
     /* @__PURE__ */ jsx(MainContent, { children: value && !!value.trim() ? value : placeholder }),
-    /* @__PURE__ */ jsx(Suffix, { children: /* @__PURE__ */ jsx(Tooltip, { title: suffixTooltip, children: suffix ?? /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(EditS, {}), color: theme.palette["grey-600"] }) }) })
+    suffix && /* @__PURE__ */ jsx(Suffix, { children: /* @__PURE__ */ jsx(Tooltip, { title: suffixTooltip, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(EditS, {}), color: theme.palette["grey-600"] }) }) })
   ] }) }) }) });
 };
 SubtleInput.displayName = "SubtleInput";

package/dist/Elements/Select/Select.js

@@ -9,7 +9,7 @@ import { SelectContainer } from "./Select.styles.js";
 const SubtleSelect = ({
   disabled,
   value,
-  suffix,
+  suffix = true,
   suffixTooltip,
   label,
   children,
@@ -33,12 +33,12 @@ const SubtleSelect = ({
     setBlurred(false);
   }, []);
   const theme = useTheme();
-  return /* @__PURE__ */ jsx(Subtle, { className: "ds-subtle-form", disabled, children: /* @__PURE__ */ jsx(SubtleFormField, { active, label, tooltip: labelTooltip, children: /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, className: "ds-subtle-select", active, children: active && !blurred || hasError ? /* @__PURE__ */ jsx(Select, { disabled, autoFocus: !hasError, size: "middle", onBlur: handleDeactivate, value, placeholder, errorText, error, defaultOpen: !hasError, dropdownAlign: {
+  return /* @__PURE__ */ jsx(Subtle, { className: "ds-subtle-form", $disabled: disabled, children: /* @__PURE__ */ jsx(SubtleFormField, { $active: active, label, tooltip: labelTooltip, children: /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, className: "ds-subtle-select", active, children: active && !blurred || hasError ? /* @__PURE__ */ jsx(Select, { disabled, autoFocus: !hasError, size: "middle", onBlur: handleDeactivate, value, placeholder, errorText, error, defaultOpen: !hasError, dropdownAlign: {
     offset: [0, 8],
     ...dropdownAlign
-  }, ...rest, children }) : /* @__PURE__ */ jsxs(Inactive, { className: "inactive-content", onClick: !disabled ? handleActivate : void 0, blurred, disabled, children: [
+  }, ...rest, children }) : /* @__PURE__ */ jsxs(Inactive, { className: "inactive-content", onClick: !disabled ? handleActivate : void 0, $blurred: blurred, $disabled: disabled, children: [
     /* @__PURE__ */ jsx(MainContent, { className: "main-content", hasMargin: true, children: /* @__PURE__ */ jsx(Fragment, { children: value && !!String(value).trim() ? value : placeholder }) }),
-    !active && !disabled && /* @__PURE__ */ jsx(Suffix, { select: true, children: /* @__PURE__ */ jsx(Tooltip, { title: suffixTooltip, children: suffix ?? /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleDownS, {}), color: theme.palette["grey-600"] }) }) })
+    !active && !disabled && suffix && /* @__PURE__ */ jsx(Suffix, { select: true, children: /* @__PURE__ */ jsx(Tooltip, { title: suffixTooltip, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleDownS, {}), color: theme.palette["grey-600"] }) }) })
   ] }) }) }) });
 };
 SubtleSelect.displayName = "SubtleSelect";

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { SubtleTextAreaProps } from './TextArea.types';
 declare const SubtleTextArea: {
-    ({ disabled, minRows, maxRows, value, onChange, placeholder, label, labelTooltip, suffixTooltip, suffix, error, errorText, textAreaProps, ...rest }: SubtleTextAreaProps): React.JSX.Element;
+    ({ disabled, minRows, maxRows, value, onChange, placeholder, label, labelTooltip, suffixTooltip, suffix, error, errorText, textAreaProps, active: activeProp, onActivate, ...rest }: SubtleTextAreaProps): React.JSX.Element;
     displayName: string;
 };
 export default SubtleTextArea;

package/dist/Elements/TextArea/TextArea.js

@@ -5,7 +5,7 @@ import { useTheme } from "@synerise/ds-core";
 import Icon, { EditS } from "@synerise/ds-icon";
 import { TextArea } from "@synerise/ds-input";
 import Tooltip from "@synerise/ds-tooltip";
-import { Subtle, SubtleFormField, Container, focusPadding, Inactive, MainContent, ValueArea, Suffix } from "../../SubtleForm.styles.js";
+import { Subtle, SubtleFormField, Container, getFocusPadding, Inactive, MainContent, ValueArea, Suffix } from "../../SubtleForm.styles.js";
 const FONT = "Graphik LCG Web";
 const FONT_SIZE = "13px";
 const ROW_HEIGHT_PX = 17;
@@ -25,9 +25,11 @@ const SubtleTextArea = ({
   error,
   errorText,
   textAreaProps,
+  active: activeProp,
+  onActivate,
   ...rest
 }) => {
-  const [active, setActive] = useState(false);
+  const [active, setActive] = useState(activeProp ?? false);
   const [blurred, setBlurred] = useState(false);
   const containerRef = useRef(null);
   const [visibleRows, setVisibleRows] = useState(minRows);
@@ -63,6 +65,11 @@ const SubtleTextArea = ({
       setVisibleRows(lines);
     }
   }, [minRows, maxRows, value, calculateTextHeight]);
+  useEffect(() => {
+    if (activeProp !== void 0) {
+      setActive(activeProp);
+    }
+  }, [activeProp]);
   const handleDeactivate = useCallback((event) => {
     if (textAreaProps) {
       const {
@@ -70,23 +77,38 @@ const SubtleTextArea = ({
       } = textAreaProps;
       onBlur && onBlur(event);
     }
+    if (activeProp === false) {
+      return;
+    }
     setActive(false);
     setBlurred(true);
-  }, [textAreaProps]);
+  }, [textAreaProps, activeProp]);
   const handleActivate = useCallback(() => {
     setActive(true);
     setBlurred(false);
-  }, []);
-  return /* @__PURE__ */ jsx(Subtle, { className: "ds-subtle-form", children: /* @__PURE__ */ jsx(SubtleFormField, { active, label, tooltip: labelTooltip, children: /* @__PURE__ */ jsx(Container, { ref: containerRef, className: "ds-subtle-textarea", active, disabled, children: (active || hasError) && !disabled ? /* @__PURE__ */ jsx(TextArea, { autoFocus: !hasError && !disabled, onChange: !disabled ? (event) => {
+    onActivate?.();
+  }, [onActivate]);
+  const handleFocus = useCallback((event) => {
+    if (textAreaProps) {
+      const {
+        onFocus
+      } = textAreaProps;
+      onFocus && onFocus(event);
+    }
+  }, [textAreaProps]);
+  return /* @__PURE__ */ jsx(Subtle, { className: "ds-subtle-form", hasError: error, children: /* @__PURE__ */ jsx(SubtleFormField, { $active: active, label, tooltip: labelTooltip, children: /* @__PURE__ */ jsx(Container, { ref: containerRef, className: "ds-subtle-textarea", active, disabled, children: (active || hasError) && !disabled ? /* @__PURE__ */ jsx(TextArea, { autoFocus: !hasError && !disabled, onChange: !disabled ? (event) => {
     onChange && onChange(event.currentTarget.value);
-  } : void 0, onBlur: !disabled ? handleDeactivate : void 0, value, rows: visibleRows + 1, style: {
+  } : void 0, onBlur: !disabled ? handleDeactivate : void 0, onFocus: !disabled ? handleFocus : void 0, value, rows: visibleRows + 1, style: {
     margin: 0,
-    padding: focusPadding
+    padding: getFocusPadding({
+      hasSuffix: suffix,
+      state: "focused"
+    })
   }, placeholder, error, errorText, wrapperStyle: {
     margin: 0
-  }, ...rest, ...textAreaProps }) : /* @__PURE__ */ jsxs(Inactive, { rows: visibleRows, onClick: !disabled ? handleActivate : void 0, blurred, disabled, children: [
-    /* @__PURE__ */ jsx(MainContent, { breakWord: true, children: /* @__PURE__ */ jsx(ValueArea, { disabled, value: value && !!value.trim() ? value : placeholder, onBlur: !disabled ? handleDeactivate : void 0, grey: !value && !!placeholder }) }),
-    /* @__PURE__ */ jsx(Suffix, { children: /* @__PURE__ */ jsx(Tooltip, { title: suffixTooltip, children: suffix ?? /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(EditS, {}), color: theme.palette["grey-600"] }) }) })
+  }, ...rest, ...textAreaProps }) : /* @__PURE__ */ jsxs(Inactive, { $rows: visibleRows, onClick: !disabled ? handleActivate : void 0, $blurred: blurred, $disabled: disabled, isSuffixVisible: suffix, children: [
+    /* @__PURE__ */ jsx(MainContent, { breakWord: true, children: /* @__PURE__ */ jsx(ValueArea, { disabled, value: value && !!value.trim() ? value : placeholder, onBlur: !disabled ? handleDeactivate : void 0, isPlaceholder: !value && !!placeholder }) }),
+    suffix && /* @__PURE__ */ jsx(Suffix, { children: /* @__PURE__ */ jsx(Tooltip, { title: suffixTooltip, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(EditS, {}), color: theme.palette["grey-600"] }) }) })
   ] }) }) }) });
 };
 SubtleTextArea.displayName = "SubtleTextArea";

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

@@ -1,4 +1,4 @@
-import { TextAreaProps } from '@synerise/ds-input/dist/Textarea/Textarea.types';
+import { RawTextAreaProps } from '@synerise/ds-input/dist/Textarea/Textarea.types';
 import { SubtleFieldProps } from '../../SubtleForm.types';
 export type SubtleTextAreaProps = {
     minRows?: number;
@@ -8,7 +8,8 @@ export type SubtleTextAreaProps = {
     placeholder?: string;
     autoSize?: TextareaAutosize;
     error?: boolean;
-    textAreaProps?: TextAreaProps;
+    onActivate?: () => void;
+    textAreaProps?: RawTextAreaProps;
 } & SubtleFieldProps;
 export type TextareaAutosize = {
     minRows: number;

package/dist/SubtleForm.d.ts

@@ -1,7 +1,7 @@
 declare const SubtleForm: {
     (): null;
     TextArea: {
-        ({ disabled, minRows, maxRows, value, onChange, placeholder, label, labelTooltip, suffixTooltip, suffix, error, errorText, textAreaProps, ...rest }: import('./Elements/TextArea/TextArea.types').SubtleTextAreaProps): import("react").JSX.Element;
+        ({ disabled, minRows, maxRows, value, onChange, placeholder, label, labelTooltip, suffixTooltip, suffix, error, errorText, textAreaProps, active: activeProp, onActivate, ...rest }: import('./Elements/TextArea/TextArea.types').SubtleTextAreaProps): import("react").JSX.Element;
         displayName: string;
     };
     Select: {

package/dist/SubtleForm.styles.d.ts

@@ -1,6 +1,9 @@
-export declare const blurPadding = "7px 40px 7px 0px";
-export declare const focusPadding = "7px 28px 7px 12px";
-export declare const blurAnimation: import('styled-components').Keyframes;
+type PaddingProps = {
+    hasSuffix?: boolean;
+    state?: 'hovered' | 'focused';
+};
+export declare const getFocusPadding: ({ hasSuffix, state, }: PaddingProps) => string;
+export declare const getBlurPadding: ({ hasSuffix }: PaddingProps) => "8px 16px 8px 0" | "8px 40px 8px 0";
 export declare const MainContent: import('styled-components').StyledComponent<"div", any, {
     hasMargin?: boolean;
     breakWord?: boolean;
@@ -9,21 +12,25 @@ export declare const Suffix: import('styled-components').StyledComponent<"div",
     select?: boolean;
 }, never>;
 export declare const Inactive: import('styled-components').StyledComponent<"div", any, {
-    rows?: number;
-    blurred: boolean;
-    mask?: boolean;
-    disabled?: boolean;
+    $rows?: number;
+    $blurred: boolean;
+    $mask?: boolean;
+    $disabled?: boolean;
+    isSuffixVisible?: boolean;
+    isTextareaComponent?: boolean;
 }, never>;
 export declare const ValueArea: import('styled-components').StyledComponent<"textarea", any, {
-    grey: boolean;
+    isPlaceholder: boolean;
 }, never>;
 export declare const Container: import('styled-components').StyledComponent<"div", any, {
     active?: boolean;
     disabled?: boolean;
 }, never>;
 export declare const Subtle: import('styled-components').StyledComponent<"div", any, {
-    disabled?: boolean;
+    $disabled?: boolean;
+    hasError?: boolean;
 }, never>;
 export declare const SubtleFormField: import('styled-components').StyledComponent<({ label, tooltip, id, rightSide, tooltipConfig, description, errorText, children, ...rest }: import('@synerise/ds-form-field').FormFieldProps) => React.JSX.Element, any, {
-    active: boolean;
+    $active: boolean;
 }, never>;
+export {};

package/dist/SubtleForm.styles.js

@@ -1,10 +1,25 @@
 import styled, { css, keyframes } from "styled-components";
 import FormField from "@synerise/ds-form-field";
+import { TextareaWrapper } from "@synerise/ds-input/dist/Textarea/Textarea.styles";
+import { hexToRgba } from "@synerise/ds-utils";
 import { MaskedDatePlaceholder } from "./Elements/DatePicker/DatePicker.styles.js";
-const disableBlinkingCursor = (props) => css(["color:transparent;text-shadow:0 1px ", ";"], props.grey ? props.theme.palette["grey-500"] : props.theme.palette["grey-600"]);
-const blurPadding = `7px 40px 7px 0px`;
-const focusPadding = `7px 28px 7px 12px`;
-const blurAnimation = /* @__PURE__ */ keyframes(["0%{padding:", ";}100%{padding:", ";}"], focusPadding, blurPadding);
+const VERTICAL_PADDING = "8px";
+const VERTICAL_PADDING_TEXTAREA = "6px";
+const getFocusPadding = ({
+  hasSuffix = true,
+  state = "hovered"
+}) => {
+  const verticalPadding = state === "focused" ? VERTICAL_PADDING_TEXTAREA : VERTICAL_PADDING;
+  return `${verticalPadding} ${hasSuffix ? "28px" : "8px"} ${verticalPadding}  ${state === "focused" ? "8px" : "7px"}`;
+};
+const getBlurPadding = ({
+  hasSuffix = true
+}) => {
+  return hasSuffix ? `8px 16px 8px 0` : `8px 40px 8px 0`;
+};
+const getBlurAnimation = (props) => {
+  return keyframes(["0%{padding:", ";}100%{padding:", "}"], getFocusPadding(props), getBlurPadding(props));
+};
 const MainContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SubtleFormstyles__MainContent",
   componentId: "sc-1wunvof-0"
@@ -17,11 +32,17 @@ const Suffix = /* @__PURE__ */ styled.div.withConfig({
 const Inactive = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SubtleFormstyles__Inactive",
   componentId: "sc-1wunvof-2"
-})(["position:relative;width:100%;height:32px;display:flex;", " align-items:flex-start;background:", ";padding:", ";opacity:", ";border-radius:3px;transition:padding 0.1s ease-in,background 0.1s ease-in;transition-delay:0.2s;&&{", "}", " ", ""], (props) => !!props.rows && `height: ${props.rows * 17 + 17}px;`, (props) => props.theme.palette.white, blurPadding, (props) => props.disabled ? `0.5` : `1`, (props) => !!props.disabled && css(["animation:none;textarea{cursor:not-allowed;}"]), (props) => props.blurred && !props.disabled && css(["animation:", " 0.1s ease-in;"], blurAnimation), (props) => !props.disabled && css(["&:hover{padding:", ";background:", ";", "{", " ", "{left:12px;", "}}", "{opacity:1;}}"], focusPadding, props.theme.palette["grey-050"], MainContent, props.mask && `color: transparent;`, MaskedDatePlaceholder, props.mask && `color: ${props.theme.palette["grey-600"]};`, Suffix));
+})(["position:relative;width:100%;height:32px;display:flex;", " align-items:flex-start;background:transparent;padding:", ";opacity:", ";border-radius:3px;transition:padding 0.1s ease-in,background 0.1s ease-in;transition-delay:0.2s;&&{", "}", " ", ""], (props) => !!props.$rows && `height: ${props.$rows * 17 + 17}px;`, (props) => getBlurPadding({
+  hasSuffix: props.isSuffixVisible
+}), (props) => props.$disabled ? `0.5` : `1`, (props) => !!props.$disabled && css(["animation:none;textarea{cursor:not-allowed;}"]), (props) => props.$blurred && !props.$disabled && css(["animation:", " 0.1s ease-in;"], getBlurAnimation({
+  hasSuffix: props.isSuffixVisible
+})), (props) => !props.$disabled && css(["&:hover{padding:", ";background:", ";", "{", " ", "{left:12px;", "}}", "{opacity:1;}}"], getFocusPadding({
+  hasSuffix: props.isSuffixVisible
+}), hexToRgba(props.theme.palette["grey-300"], 0.4), MainContent, props.$mask && `color: transparent;`, MaskedDatePlaceholder, props.$mask && `color: ${props.theme.palette["grey-600"]};`, Suffix));
 const ValueArea = /* @__PURE__ */ styled.textarea.withConfig({
   displayName: "SubtleFormstyles__ValueArea",
   componentId: "sc-1wunvof-3"
-})(["&&{font-variant-numeric:normal;word-wrap:break-word;overflow-wrap:break-word;", " width:100%;height:100%;background:transparent;border:none;padding:0;margin:0;overflow:auto;outline:none;box-shadow:none;resize:none;-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none;}}"], (props) => disableBlinkingCursor(props));
+})(["&&{font-variant-numeric:normal;word-wrap:break-word;overflow-wrap:break-word;color:transparent;text-shadow:0 1px ", ";width:100%;height:100%;background:transparent;border:none;padding:0;margin:0;overflow:auto;outline:none;box-shadow:none;resize:none;-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none;}}"], (props) => props.isPlaceholder ? props.theme.palette["grey-500"] : props.theme.palette["grey-600"]);
 const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SubtleFormstyles__Container",
   componentId: "sc-1wunvof-4"
@@ -29,11 +50,11 @@ const Container = /* @__PURE__ */ styled.div.withConfig({
 const Subtle = /* @__PURE__ */ styled.div.withConfig({
   displayName: "SubtleFormstyles__Subtle",
   componentId: "sc-1wunvof-5"
-})(["", ""], (props) => !!props.disabled && css(["&&{cursor:not-allowed;}"]));
+})(["", " ", "{", "}"], (props) => !!props.$disabled && css(["&&{cursor:not-allowed;}"]), TextareaWrapper, (props) => props.hasError ? `background-color: ${hexToRgba(props.theme.palette["red-100"], 0.4)};` : `background-color: ${hexToRgba(props.theme.palette["blue-100"], 0.4)};`);
 const SubtleFormField = /* @__PURE__ */ styled(FormField).withConfig({
   displayName: "SubtleFormstyles__SubtleFormField",
   componentId: "sc-1wunvof-6"
-})(["gap:", ";"], (props) => props.active ? `10px` : `8px`);
+})(["gap:", ";"], (props) => props.$active ? `9px` : `8px`);
 export {
   Container,
   Inactive,
@@ -42,7 +63,6 @@ export {
   SubtleFormField,
   Suffix,
   ValueArea,
-  blurAnimation,
-  blurPadding,
-  focusPadding
+  getBlurPadding,
+  getFocusPadding
 };

package/dist/SubtleForm.types.d.ts

@@ -4,7 +4,7 @@ export type SubtleFieldProps = {
     active?: boolean;
     disabled?: boolean;
     labelTooltip?: FormFieldCommonProps['tooltip'];
-    suffix?: ReactNode;
+    suffix?: boolean;
     suffixTooltip?: ReactNode;
     activeElement?: () => ReactElement;
     inactiveElement?: () => ReactElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-subtle-form",
-  "version": "1.1.59",
+  "version": "1.1.60",
   "description": "SubtleForm UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -35,12 +35,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-date-picker": "^1.4.2",
-    "@synerise/ds-form-field": "^1.3.10",
-    "@synerise/ds-icon": "^1.15.1",
-    "@synerise/ds-input": "^1.6.10",
-    "@synerise/ds-select": "^1.3.20",
-    "@synerise/ds-tooltip": "^1.4.10",
+    "@synerise/ds-date-picker": "^1.4.3",
+    "@synerise/ds-form-field": "^1.3.11",
+    "@synerise/ds-icon": "^1.15.2",
+    "@synerise/ds-input": "^1.6.11",
+    "@synerise/ds-select": "^1.3.21",
+    "@synerise/ds-tooltip": "^1.4.11",
     "@synerise/ds-utils": "^1.7.1",
     "calculate-size": "^1.1.1"
   },
@@ -50,5 +50,5 @@
     "react": ">=16.9.0 <= 18.3.1",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
+  "gitHead": "c2384982c3533a31eb5e5e0408f8dcecb2b0f399"
 }