@synerise/ds-subtle-form 1.1.58 → 1.1.60

package/dist/Elements/Select/Select.js

@@ -1,84 +1,47 @@
-var _excluded = ["disabled", "value", "suffix", "suffixTooltip", "label", "children", "labelTooltip", "placeholder", "error", "errorText", "dropdownAlign"];
-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 { useTheme } from '@synerise/ds-core';
-import Icon, { AngleDownS } from '@synerise/ds-icon';
-import Select from '@synerise/ds-select';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from '../../SubtleForm.styles';
-import { SelectContainer } from './Select.styles';
-var SubtleSelect = function SubtleSelect(_ref) {
-  var disabled = _ref.disabled,
-    value = _ref.value,
-    suffix = _ref.suffix,
-    suffixTooltip = _ref.suffixTooltip,
-    label = _ref.label,
-    children = _ref.children,
-    labelTooltip = _ref.labelTooltip,
-    placeholder = _ref.placeholder,
-    error = _ref.error,
-    errorText = _ref.errorText,
-    _ref$dropdownAlign = _ref.dropdownAlign,
-    dropdownAlign = _ref$dropdownAlign === void 0 ? {} : _ref$dropdownAlign,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  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 = useCallback(function () {
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { AngleDownS } from "@synerise/ds-icon";
+import Select from "@synerise/ds-select";
+import Tooltip from "@synerise/ds-tooltip";
+import { Subtle, SubtleFormField, Inactive, MainContent, Suffix } from "../../SubtleForm.styles.js";
+import { SelectContainer } from "./Select.styles.js";
+const SubtleSelect = ({
+  disabled,
+  value,
+  suffix = true,
+  suffixTooltip,
+  label,
+  children,
+  labelTooltip,
+  placeholder,
+  error,
+  errorText,
+  dropdownAlign = {},
+  ...rest
+}) => {
+  const [active, setActive] = useState(false);
+  const [blurred, setBlurred] = useState(false);
+  const containerRef = useRef(null);
+  const hasError = error || !!errorText;
+  const handleDeactivate = useCallback(() => {
     setActive(false);
     setBlurred(true);
   }, []);
-  var handleActivate = useCallback(function () {
+  const handleActivate = useCallback(() => {
     setActive(true);
     setBlurred(false);
   }, []);
-  var theme = useTheme();
-  return /*#__PURE__*/React.createElement(S.Subtle, {
-    className: "ds-subtle-form",
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(S.SubtleFormField, {
-    active: active,
-    label: label,
-    tooltip: labelTooltip
-  }, /*#__PURE__*/React.createElement(SelectContainer, {
-    ref: containerRef,
-    className: "ds-subtle-select",
-    active: active
-  }, active && !blurred || hasError ? /*#__PURE__*/React.createElement(Select, _extends({
-    disabled: disabled,
-    autoFocus: !hasError,
-    size: "middle",
-    onBlur: handleDeactivate,
-    value: value,
-    placeholder: placeholder,
-    errorText: errorText,
-    error: error,
-    defaultOpen: !hasError,
-    dropdownAlign: _extends({
-      offset: [0, 8]
-    }, dropdownAlign)
-  }, rest), children) : /*#__PURE__*/React.createElement(S.Inactive, {
-    className: "inactive-content",
-    onClick: !disabled ? handleActivate : undefined,
-    blurred: blurred,
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(S.MainContent, {
-    className: "main-content",
-    hasMargin: true
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, value && !!String(value).trim() ? value : placeholder)), !active && !disabled && /*#__PURE__*/React.createElement(S.Suffix, {
-    select: true
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: suffixTooltip
-  }, suffix != null ? suffix : /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(AngleDownS, null),
-    color: theme.palette['grey-600']
-  })))))));
+  const theme = useTheme();
+  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: 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 && 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";
+export {
+  SubtleSelect as default
 };
-SubtleSelect.displayName = 'SubtleSelect';
-export default SubtleSelect;

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

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

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

@@ -1,7 +1,8 @@
-import styled, { css } from 'styled-components';
-export var SelectContainer = styled.div.withConfig({
+import styled, { css } from "styled-components";
+const SelectContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Selectstyles__SelectContainer",
   componentId: "sc-u85d8m-0"
-})(["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;"]);
-});
+})(["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;}"], (props) => props.active && css(["margin:-2px 0 0 -1px;"]));
+export {
+  SelectContainer
+};

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

@@ -1,5 +1,5 @@
-import { type Props as DsSelectProps } from '@synerise/ds-select/dist/Select.types';
-import { type SubtleFieldProps } from '../../SubtleForm.types';
+import { Props as DsSelectProps } from '@synerise/ds-select/dist/Select.types';
+import { SubtleFieldProps } from '../../SubtleForm.types';
 export type SubtleSelectProps = {
     placeholder?: string;
 } & SubtleFieldProps & DsSelectProps;

package/dist/Elements/Select/Select.types.js

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

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

@@ -1,7 +1,7 @@
-import React from 'react';
-import { type SubtleTextAreaProps } from './TextArea.types';
+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

@@ -1,64 +1,58 @@
-var _excluded = ["disabled", "minRows", "maxRows", "value", "onChange", "placeholder", "label", "labelTooltip", "suffixTooltip", "suffix", "error", "errorText", "textAreaProps"];
-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 calculateSize from 'calculate-size';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-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 * as S from '../../SubtleForm.styles';
-import { focusPadding } from '../../SubtleForm.styles';
-var FONT = 'Graphik LCG Web';
-var FONT_SIZE = '13px';
-var ROW_HEIGHT_PX = 17;
-var HORIZONTAL_PADDING_PX = 20;
-var VERTICAL_PADDING_PX = 7;
-var SubtleTextArea = function SubtleTextArea(_ref) {
-  var disabled = _ref.disabled,
-    _ref$minRows = _ref.minRows,
-    minRows = _ref$minRows === void 0 ? 1 : _ref$minRows,
-    maxRows = _ref.maxRows,
-    value = _ref.value,
-    onChange = _ref.onChange,
-    placeholder = _ref.placeholder,
-    label = _ref.label,
-    labelTooltip = _ref.labelTooltip,
-    suffixTooltip = _ref.suffixTooltip,
-    suffix = _ref.suffix,
-    error = _ref.error,
-    errorText = _ref.errorText,
-    textAreaProps = _ref.textAreaProps,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  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 = useCallback(function () {
-    var textHeight = 0;
+import { jsx, jsxs } from "react/jsx-runtime";
+import calculateSize from "calculate-size";
+import { useState, useRef, useCallback, useEffect } from "react";
+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, getFocusPadding, Inactive, MainContent, ValueArea, Suffix } from "../../SubtleForm.styles.js";
+const FONT = "Graphik LCG Web";
+const FONT_SIZE = "13px";
+const ROW_HEIGHT_PX = 17;
+const HORIZONTAL_PADDING_PX = 20;
+const VERTICAL_PADDING_PX = 7;
+const SubtleTextArea = ({
+  disabled,
+  minRows = 1,
+  maxRows,
+  value,
+  onChange,
+  placeholder,
+  label,
+  labelTooltip,
+  suffixTooltip,
+  suffix,
+  error,
+  errorText,
+  textAreaProps,
+  active: activeProp,
+  onActivate,
+  ...rest
+}) => {
+  const [active, setActive] = useState(activeProp ?? false);
+  const [blurred, setBlurred] = useState(false);
+  const containerRef = useRef(null);
+  const [visibleRows, setVisibleRows] = useState(minRows);
+  const theme = useTheme();
+  const hasError = error || !!errorText;
+  const calculateTextHeight = useCallback(() => {
+    let textHeight = 0;
     if (!!value && !!containerRef.current) {
-      var _calculateSize = calculateSize(value, {
-          width: containerRef.current.offsetWidth - 2 * HORIZONTAL_PADDING_PX + "px",
-          font: FONT,
-          fontSize: FONT_SIZE
-        }),
-        height = _calculateSize.height;
+      const {
+        height
+      } = calculateSize(value, {
+        width: `${containerRef.current.offsetWidth - 2 * HORIZONTAL_PADDING_PX}px`,
+        font: FONT,
+        fontSize: FONT_SIZE
+      });
       textHeight = height;
     }
     return textHeight;
   }, [value, containerRef]);
-  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);
+  useEffect(() => {
+    const keyboardBasedLines = Number(value?.split("\n").length);
+    const refBasedLines = Math.floor((calculateTextHeight() + 2 * VERTICAL_PADDING_PX) / ROW_HEIGHT_PX);
+    const lines = Math.max(Number(refBasedLines), keyboardBasedLines);
     if (lines && lines < minRows) {
       setVisibleRows(minRows);
       return;
@@ -71,65 +65,53 @@ var SubtleTextArea = function SubtleTextArea(_ref) {
       setVisibleRows(lines);
     }
   }, [minRows, maxRows, value, calculateTextHeight]);
-  var handleDeactivate = useCallback(function (event) {
+  useEffect(() => {
+    if (activeProp !== void 0) {
+      setActive(activeProp);
+    }
+  }, [activeProp]);
+  const handleDeactivate = useCallback((event) => {
     if (textAreaProps) {
-      var onBlur = textAreaProps.onBlur;
+      const {
+        onBlur
+      } = textAreaProps;
       onBlur && onBlur(event);
     }
+    if (activeProp === false) {
+      return;
+    }
     setActive(false);
     setBlurred(true);
-  }, [textAreaProps]);
-  var handleActivate = useCallback(function () {
+  }, [textAreaProps, activeProp]);
+  const handleActivate = useCallback(() => {
     setActive(true);
     setBlurred(false);
-  }, []);
-  return /*#__PURE__*/React.createElement(S.Subtle, {
-    className: "ds-subtle-form"
-  }, /*#__PURE__*/React.createElement(S.SubtleFormField, {
-    active: active,
-    label: label,
-    tooltip: labelTooltip
-  }, /*#__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 (event) {
-      onChange && onChange(event.currentTarget.value);
-    } : undefined,
-    onBlur: !disabled ? handleDeactivate : undefined,
-    value: value,
-    rows: visibleRows + 1,
-    style: {
-      margin: 0,
-      padding: focusPadding
-    },
-    placeholder: placeholder,
-    error: error,
-    errorText: errorText,
-    wrapperStyle: {
-      margin: 0
+    onActivate?.();
+  }, [onActivate]);
+  const handleFocus = useCallback((event) => {
+    if (textAreaProps) {
+      const {
+        onFocus
+      } = textAreaProps;
+      onFocus && onFocus(event);
     }
-  }, rest, textAreaProps)) : /*#__PURE__*/React.createElement(S.Inactive, {
-    rows: visibleRows,
-    onClick: !disabled ? handleActivate : undefined,
-    blurred: blurred,
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(S.MainContent, {
-    breakWord: true
-  }, /*#__PURE__*/React.createElement(S.ValueArea, {
-    disabled: disabled,
-    value: value && !!value.trim() ? value : placeholder,
-    onBlur: !disabled ? handleDeactivate : undefined,
-    grey: !value && !!placeholder
-  })), /*#__PURE__*/React.createElement(S.Suffix, null, /*#__PURE__*/React.createElement(Tooltip, {
-    title: suffixTooltip
-  }, suffix != null ? suffix : /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(EditS, null),
-    color: theme.palette['grey-600']
-  })))))));
+  }, [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, onFocus: !disabled ? handleFocus : void 0, value, rows: visibleRows + 1, style: {
+    margin: 0,
+    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: 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";
+export {
+  SubtleTextArea as default
 };
-SubtleTextArea.displayName = 'SubtleTextArea';
-export default SubtleTextArea;

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

@@ -1,5 +1,5 @@
-import { type TextAreaProps } from '@synerise/ds-input/dist/Textarea/Textarea.types';
-import { type SubtleFieldProps } from '../../SubtleForm.types';
+import { RawTextAreaProps } from '@synerise/ds-input/dist/Textarea/Textarea.types';
+import { SubtleFieldProps } from '../../SubtleForm.types';
 export type SubtleTextAreaProps = {
     minRows?: number;
     maxRows?: 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/Elements/TextArea/TextArea.types.js

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

package/dist/SubtleForm.d.ts

@@ -1,23 +1,23 @@
 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: {
-        ({ disabled, value, suffix, suffixTooltip, label, children, labelTooltip, placeholder, error, errorText, dropdownAlign, ...rest }: import("./Elements/Select/Select.types").SubtleSelectProps): import("react").JSX.Element;
+        ({ disabled, value, suffix, suffixTooltip, label, children, labelTooltip, placeholder, error, errorText, dropdownAlign, ...rest }: import('./Elements/Select/Select.types').SubtleSelectProps): import("react").JSX.Element;
         displayName: string;
     };
     DatePicker: {
-        ({ value, suffix, suffixTooltip, format: dateFormat, label, children, labelTooltip, placeholder, onApply, onClear, errorText, error, activeProp, onDropdownVisibleChange, disabled, ...rest }: import("./Elements/DatePicker/DatePicker.types").SubtleDatePickerProps): import("react").JSX.Element;
+        ({ value, suffix, suffixTooltip, format: dateFormat, label, children, labelTooltip, placeholder, onApply, onClear, errorText, error, activeProp, onDropdownVisibleChange, disabled, ...rest }: import('./Elements/DatePicker/DatePicker.types').SubtleDatePickerProps): import("react").JSX.Element;
         displayName: string;
     };
     Field: {
-        ({ disabled, suffix, suffixTooltip, label, labelTooltip, activeElement, inactiveElement, mask, maskVisible, errorText, active: activeProp, }: import("./SubtleForm.types").SubtleFieldProps): import("react").JSX.Element;
+        ({ disabled, suffix, suffixTooltip, label, labelTooltip, activeElement, inactiveElement, mask, maskVisible, errorText, active: activeProp, }: import('./SubtleForm.types').SubtleFieldProps): import("react").JSX.Element;
         displayName: string;
     };
     Input: {
-        ({ disabled, value, onChange, placeholder, label, labelTooltip, suffixTooltip, suffix, error, errorText, inputProps, ...rest }: import("./Elements/Input/Input.types").SubtleInputProps): import("react").JSX.Element;
+        ({ disabled, value, onChange, placeholder, label, labelTooltip, suffixTooltip, suffix, error, errorText, inputProps, ...rest }: import('./Elements/Input/Input.types').SubtleInputProps): import("react").JSX.Element;
         displayName: string;
     };
 };

package/dist/SubtleForm.js

@@ -1,9 +1,9 @@
-import SubtleDatePicker from './Elements/DatePicker/DatePicker';
-import SubtleField from './Elements/Field/Field';
-import SubtleInput from './Elements/Input/Input';
-import SubtleSelect from './Elements/Select/Select';
-import SubtleTextArea from './Elements/TextArea/TextArea';
-var SubtleForm = function SubtleForm() {
+import SubtleDatePicker from "./Elements/DatePicker/DatePicker.js";
+import SubtleField from "./Elements/Field/Field.js";
+import SubtleInput from "./Elements/Input/Input.js";
+import SubtleSelect from "./Elements/Select/Select.js";
+import SubtleTextArea from "./Elements/TextArea/TextArea.js";
+const SubtleForm = () => {
   return null;
 };
 SubtleForm.TextArea = SubtleTextArea;
@@ -11,4 +11,6 @@ SubtleForm.Select = SubtleSelect;
 SubtleForm.DatePicker = SubtleDatePicker;
 SubtleForm.Field = SubtleField;
 SubtleForm.Input = SubtleInput;
-export default SubtleForm;
+export {
+  SubtleForm as default
+};

package/dist/SubtleForm.styles.d.ts

@@ -1,29 +1,36 @@
-export declare const blurPadding = "7px 40px 7px 0px";
-export declare const focusPadding = "7px 28px 7px 12px";
-export declare const blurAnimation: import("styled-components").Keyframes;
-export declare const MainContent: import("styled-components").StyledComponent<"div", any, {
+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;
 }, never>;
-export declare const Suffix: import("styled-components").StyledComponent<"div", any, {
+export declare const Suffix: import('styled-components').StyledComponent<"div", any, {
     select?: boolean;
 }, never>;
-export declare const Inactive: import("styled-components").StyledComponent<"div", any, {
-    rows?: number;
-    blurred: boolean;
-    mask?: boolean;
-    disabled?: boolean;
+export declare const Inactive: import('styled-components').StyledComponent<"div", any, {
+    $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;
+export declare const ValueArea: import('styled-components').StyledComponent<"textarea", any, {
+    isPlaceholder: boolean;
 }, never>;
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
+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;
+export declare const Subtle: import('styled-components').StyledComponent<"div", any, {
+    $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;
+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;
 }, never>;
+export {};