@synerise/ds-subtle-form 1.1.57 → 1.1.59

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.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
+
+## [1.1.58](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subtle-form@1.1.57...@synerise/ds-subtle-form@1.1.58) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-subtle-form
+
 ## [1.1.57](https://github.com/Synerise/synerise-design/compare/@synerise/ds-subtle-form@1.1.56...@synerise/ds-subtle-form@1.1.57) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-subtle-form

package/README.md

@@ -46,10 +46,77 @@ const [value, setValue] = React.useState('');
 | disabled      | Disables hover effects and value editing       | boolean                  | false   |
 | label         | Label text displayed above the textarea        | string / React.ReactNode | ---     |
 | labelTooltip  | Tooltip displayed on label hover               | string / React.ReactNode | ---     |
-| maxRows       | Maximum rows to be displayed                   | number                   | 0       |
+| maxRows       | Maximum rows to be displayed                   | number                   | -       |
 | minRows       | Minimum rows to be displayed                   | number                   | 1       |
 | onChange      | Callback execute after input change            | (value: string) => void  | ---     |
 | value         | Value displayed in the input                   | string                   | ---     |
 | placeholder   | Placeholder displayed in the input             | string                   | ---     |
 | suffix        | Suffix element rendered on the right-hand side | React.ReactNode          | ---     |
-| suffixTooltip | Suffix tooltip dispalyed on hover              | string / React.ReactNode | ---     |
+| suffixTooltip | Suffix tooltip displayed on hover              | React.ReactNode          | ---     |
+| error         | Error state; forces the textarea into edit mode | boolean                 | ---     |
+| errorText     | Error message displayed below the field        | React.ReactNode          | ---     |
+| textAreaProps | Props forwarded to the underlying TextArea     | TextAreaProps            | ---     |
+
+### Input
+
+| Property      | Description                                    | Type                     | Default |
+| ------------- | ---------------------------------------------- | ------------------------ | ------- |
+| disabled      | Disables hover effects and value editing       | boolean                  | false   |
+| label         | Label text displayed above the input           | string / React.ReactNode | ---     |
+| labelTooltip  | Tooltip displayed on label hover               | string / React.ReactNode | ---     |
+| value         | Value displayed in the input                   | string                   | ---     |
+| onChange      | Callback executed after input change           | (value: string) => void  | ---     |
+| placeholder   | Placeholder displayed in the input             | string                   | ---     |
+| suffix        | Suffix element rendered on the right-hand side | React.ReactNode          | ---     |
+| suffixTooltip | Suffix tooltip displayed on hover              | React.ReactNode          | ---     |
+| error         | Error state; forces the input into edit mode   | boolean                  | ---     |
+| errorText     | Error message displayed below the field        | React.ReactNode          | ---     |
+| inputProps    | Props forwarded to the underlying Input        | InputProps               | ---     |
+
+### Select
+
+| Property      | Description                                    | Type                     | Default |
+| ------------- | ---------------------------------------------- | ------------------------ | ------- |
+| disabled      | Disables hover effects and value editing       | boolean                  | false   |
+| label         | Label text displayed above the select          | string / React.ReactNode | ---     |
+| labelTooltip  | Tooltip displayed on label hover               | string / React.ReactNode | ---     |
+| value         | Selected value                                 | SelectValue              | ---     |
+| placeholder   | Placeholder displayed when no value            | string                   | ---     |
+| suffix        | Suffix element rendered on the right-hand side | React.ReactNode          | ---     |
+| suffixTooltip | Suffix tooltip displayed on hover              | React.ReactNode          | ---     |
+| error         | Error state; forces the select into edit mode  | boolean                  | ---     |
+| errorText     | Error message displayed below the field        | React.ReactNode          | ---     |
+| children      | `Select.Option` children                       | React.ReactNode          | ---     |
+
+### DatePicker
+
+| Property                | Description                                        | Type                     | Default          |
+| ----------------------- | -------------------------------------------------- | ------------------------ | ---------------- |
+| disabled                | Disables hover effects and value editing           | boolean                  | false            |
+| label                   | Label text displayed above the date picker         | string / React.ReactNode | ---              |
+| labelTooltip            | Tooltip displayed on label hover                   | string / React.ReactNode | ---              |
+| value                   | Selected date                                      | Date                     | ---              |
+| onApply                 | Called when date is confirmed; also deactivates    | (date: Date) => void     | ---              |
+| onClear                 | Called when cleared; also deactivates              | () => void               | ---              |
+| format                  | Date format string                                 | string                   | `'dd-MM-yyyy'`   |
+| placeholder             | Placeholder displayed when no value                | string                   | ---              |
+| suffix                  | Suffix element rendered on the right-hand side     | React.ReactNode          | ---              |
+| suffixTooltip           | Suffix tooltip displayed on hover                  | React.ReactNode          | ---              |
+| error                   | Error state; forces the picker into display mode   | boolean                  | ---              |
+| errorText               | Error message displayed below the field            | React.ReactNode          | ---              |
+
+### Field
+
+| Property       | Description                                          | Type                     | Default |
+| -------------- | ---------------------------------------------------- | ------------------------ | ------- |
+| disabled       | Disables hover effects and interactions              | boolean                  | false   |
+| label          | Label text displayed above the field                 | string / React.ReactNode | ---     |
+| labelTooltip   | Tooltip displayed on label hover                     | string / React.ReactNode | ---     |
+| active         | Controlled active (edit) state                       | boolean                  | ---     |
+| activeElement  | Render function for the edit state                   | () => ReactElement       | ---     |
+| inactiveElement| Render function for the display state               | () => ReactElement       | ---     |
+| suffix         | Suffix element rendered on the right-hand side       | React.ReactNode          | ---     |
+| suffixTooltip  | Suffix tooltip displayed on hover                    | React.ReactNode          | ---     |
+| errorText      | Error message; forces the field into edit mode       | React.ReactNode          | ---     |
+| mask           | Mask string shown below inactive content             | string                   | ---     |
+| maskVisible    | Whether to show the mask                             | boolean                  | ---     |

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type SubtleDatePickerProps } from './DatePicker.types';
+import { default as React } from 'react';
+import { SubtleDatePickerProps } from './DatePicker.types';
 declare const SubtleDatePicker: {
     ({ value, suffix, suffixTooltip, format: dateFormat, label, children, labelTooltip, placeholder, onApply, onClear, errorText, error, activeProp, onDropdownVisibleChange, disabled, ...rest }: SubtleDatePickerProps): React.JSX.Element;
     displayName: string;

package/dist/Elements/DatePicker/DatePicker.js

@@ -1,113 +1,82 @@
-var _excluded = ["value", "suffix", "suffixTooltip", "format", "label", "children", "labelTooltip", "placeholder", "onApply", "onClear", "errorText", "error", "activeProp", "onDropdownVisibleChange", "disabled"];
-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 { useTheme } from '@synerise/ds-core';
-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';
-import * as S from '../../SubtleForm.styles';
-import { MaskedDatePlaceholder, SelectContainer } from './DatePicker.styles';
-import { getFormattingString, replaceLettersWithUnderscore } from './utils';
-var SubtleDatePicker = function SubtleDatePicker(_ref) {
-  var value = _ref.value,
-    suffix = _ref.suffix,
-    suffixTooltip = _ref.suffixTooltip,
-    dateFormat = _ref.format,
-    label = _ref.label,
-    children = _ref.children,
-    labelTooltip = _ref.labelTooltip,
-    placeholder = _ref.placeholder,
-    _onApply = _ref.onApply,
-    onClear = _ref.onClear,
-    errorText = _ref.errorText,
-    error = _ref.error,
-    activeProp = _ref.activeProp,
-    _onDropdownVisibleChange = _ref.onDropdownVisibleChange,
-    disabled = _ref.disabled,
-    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 theme = useTheme();
-  var hasError = error || !!errorText;
-  var showTime = rest.showTime;
-  var dateFormattingString = useMemo(function () {
-    return getFormattingString(dateFormat, showTime);
-  }, [dateFormat, showTime]);
-  var formatValue = useCallback(function (val) {
+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 format from "@synerise/ds-date-picker/dist/format";
+import Icon, { CalendarM } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { Subtle, SubtleFormField, Inactive, MainContent, Suffix } from "../../SubtleForm.styles.js";
+import { SelectContainer, MaskedDatePlaceholder } from "./DatePicker.styles.js";
+import { getFormattingString, replaceLettersWithUnderscore } from "./utils.js";
+const SubtleDatePicker = ({
+  value,
+  suffix,
+  suffixTooltip,
+  format: dateFormat,
+  label,
+  children,
+  labelTooltip,
+  placeholder,
+  onApply,
+  onClear,
+  errorText,
+  error,
+  activeProp,
+  onDropdownVisibleChange,
+  disabled,
+  ...rest
+}) => {
+  const [active, setActive] = useState(false);
+  const [blurred, setBlurred] = useState(false);
+  const containerRef = useRef(null);
+  const theme = useTheme();
+  const hasError = error || !!errorText;
+  const {
+    showTime
+  } = rest;
+  const dateFormattingString = useMemo(() => getFormattingString(dateFormat, showTime), [dateFormat, showTime]);
+  const formatValue = useCallback((val) => {
     if (!val) {
-      return '';
+      return "";
     }
     return format(val, dateFormattingString);
   }, [dateFormattingString]);
-  var getDisplayText = useCallback(function () {
+  const getDisplayText = useCallback(() => {
     return value && !!String(value).trim() ? formatValue(value) : placeholder;
   }, [value, placeholder, formatValue]);
-  useEffect(function () {
+  useEffect(() => {
     if (error) {
       setActive(false);
       setBlurred(true);
     }
   }, [error, errorText]);
-  var handleActivate = useCallback(function () {
+  const handleActivate = useCallback(() => {
     setActive(true);
     setBlurred(false);
   }, []);
-  var handleDeactivate = useCallback(function () {
+  const handleDeactivate = useCallback(() => {
     setActive(false);
     setBlurred(true);
   }, []);
-  return /*#__PURE__*/React.createElement(S.Subtle, {
-    className: "ds-subtle-form"
-  }, /*#__PURE__*/React.createElement(S.SubtleFormField, {
-    active: active || hasError,
-    label: label,
-    tooltip: labelTooltip
-  }, /*#__PURE__*/React.createElement(SelectContainer, {
-    disabled: !!disabled,
-    ref: containerRef,
-    className: "ds-subtle-date-picker",
-    active: active || hasError
-  }, active && !blurred || hasError ? /*#__PURE__*/React.createElement(DatePicker, _extends({}, rest, {
-    value: value,
-    onApply: function onApply(date) {
-      handleDeactivate();
-      _onApply && _onApply(date);
-    },
-    onClear: !disabled ? function () {
-      handleDeactivate();
-      onClear && onClear();
-    } : undefined,
-    error: error,
-    errorText: errorText,
-    autoFocus: !hasError,
-    format: dateFormat,
-    onDropdownVisibleChange: function onDropdownVisibleChange(visible) {
-      setActive(visible);
-      setBlurred(!visible);
-      _onDropdownVisibleChange && _onDropdownVisibleChange(visible);
-    }
-  })) : /*#__PURE__*/React.createElement(S.Inactive, {
-    disabled: disabled,
-    onClick: !disabled ? handleActivate : undefined,
-    blurred: blurred,
-    mask: !value
-  }, /*#__PURE__*/React.createElement(S.MainContent, {
-    hasMargin: true
-  }, getDisplayText(), !disabled && /*#__PURE__*/React.createElement(MaskedDatePlaceholder, null, replaceLettersWithUnderscore(dateFormattingString))), !active && /*#__PURE__*/React.createElement(S.Suffix, {
-    select: true
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: suffixTooltip
-  }, suffix != null ? suffix : /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(CalendarM, null),
-    color: theme.palette['grey-600']
-  })))))));
+  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 ? () => {
+    handleDeactivate();
+    onClear && onClear();
+  } : void 0, error, errorText, autoFocus: !hasError, format: dateFormat, onDropdownVisibleChange: (visible) => {
+    setActive(visible);
+    setBlurred(!visible);
+    onDropdownVisibleChange && onDropdownVisibleChange(visible);
+  } }) : /* @__PURE__ */ jsxs(Inactive, { disabled, onClick: !disabled ? handleActivate : void 0, 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"] }) }) })
+  ] }) }) }) });
+};
+SubtleDatePicker.displayName = "SubtleDatePicker";
+export {
+  SubtleDatePicker as default
 };
-SubtleDatePicker.displayName = 'SubtleDatePicker';
-export default SubtleDatePicker;

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

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

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

@@ -1,15 +1,13 @@
-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: "DatePickerstyles__SelectContainer",
   componentId: "sc-xiwxgz-0"
-})(["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 MaskedDatePlaceholder = styled.div.withConfig({
+})(["position:relative;min-height:32px;width:100%;", " > div{margin:0;}", ""], (props) => props.active && css(["margin:-2px 0 0 -1px;"]), (props) => !!props.disabled && css(["&&{cursor:not-allowed;}"]));
+const MaskedDatePlaceholder = /* @__PURE__ */ styled.div.withConfig({
   displayName: "DatePickerstyles__MaskedDatePlaceholder",
   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';
-});
+})(["font-size:13px;color:transparent;position:absolute;left:0;top:8px;transition:", ";"], (props) => props.disabled ? "none" : "left 0.1s ease-in 0.2s, color 0.1s ease-in 0.2s");
+export {
+  MaskedDatePlaceholder,
+  SelectContainer
+};

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

@@ -1,6 +1,6 @@
-import type { ReactNode } from 'react';
-import { type DatePickerProps as DsDatePickerProps } from '@synerise/ds-date-picker';
-import { type SubtleFieldProps } from '../../SubtleForm.types';
+import { ReactNode } from 'react';
+import { DatePickerProps as DsDatePickerProps } from '@synerise/ds-date-picker';
+import { SubtleFieldProps } from '../../SubtleForm.types';
 export type SubtleDatePickerProps = {
     activeProp?: boolean;
     placeholder?: string;

package/dist/Elements/DatePicker/DatePicker.types.js

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

package/dist/Elements/DatePicker/utils.js

@@ -1,9 +1,13 @@
-export var replaceLettersWithUnderscore = function replaceLettersWithUnderscore(input) {
-  return input.replace(/[a-zA-Z]/g, '_ ');
+const replaceLettersWithUnderscore = (input) => {
+  return input.replace(/[a-zA-Z]/g, "_ ");
 };
-export var getFormattingString = function getFormattingString(formatProp, showTime) {
+const getFormattingString = (formatProp, showTime) => {
   if (!formatProp) {
-    return showTime ? 'dd-MM-yyyy, HH:mm' : 'dd-MM-yyyy';
+    return showTime ? "dd-MM-yyyy, HH:mm" : "dd-MM-yyyy";
   }
   return formatProp;
-};
+};
+export {
+  getFormattingString,
+  replaceLettersWithUnderscore
+};

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type SubtleFieldProps } from '../../SubtleForm.types';
+import { default as React } from 'react';
+import { SubtleFieldProps } from '../../SubtleForm.types';
 declare const SubtleField: {
     ({ disabled, suffix, suffixTooltip, label, labelTooltip, activeElement, inactiveElement, mask, maskVisible, errorText, active: activeProp, }: SubtleFieldProps): React.JSX.Element;
     displayName: string;

package/dist/Elements/Field/Field.js

@@ -1,74 +1,50 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useTheme } from '@synerise/ds-core';
-import Icon, { EditS } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import { useOnClickOutside } from '@synerise/ds-utils';
-import * as S from '../../SubtleForm.styles';
-import { MaskedDatePlaceholder } from '../DatePicker/DatePicker.styles';
-var SubtleField = function SubtleField(_ref) {
-  var disabled = _ref.disabled,
-    suffix = _ref.suffix,
-    suffixTooltip = _ref.suffixTooltip,
-    label = _ref.label,
-    labelTooltip = _ref.labelTooltip,
-    activeElement = _ref.activeElement,
-    inactiveElement = _ref.inactiveElement,
-    mask = _ref.mask,
-    maskVisible = _ref.maskVisible,
-    errorText = _ref.errorText,
-    activeProp = _ref.active;
-  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 () {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { EditS } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { useOnClickOutside } from "@synerise/ds-utils";
+import { Subtle, SubtleFormField, Container, Inactive, MainContent, Suffix } from "../../SubtleForm.styles.js";
+import { MaskedDatePlaceholder } from "../DatePicker/DatePicker.styles.js";
+const SubtleField = ({
+  disabled,
+  suffix,
+  suffixTooltip,
+  label,
+  labelTooltip,
+  activeElement,
+  inactiveElement,
+  mask,
+  maskVisible,
+  errorText,
+  active: activeProp
+}) => {
+  const [active, setActive] = useState(activeProp);
+  const [blurred, setBlurred] = useState(false);
+  const containerRef = useRef(null);
+  const handleDeactivate = useCallback(() => {
     setActive(false);
     setBlurred(true);
   }, []);
-  var handleActivate = useCallback(function () {
+  const handleActivate = useCallback(() => {
     setActive(true);
     setBlurred(false);
   }, []);
-  var theme = useTheme();
-  useEffect(function () {
-    return setActive(activeProp);
-  }, [activeProp]);
-  var isActive = Boolean(errorText || active && !blurred && !!activeElement);
-  useOnClickOutside(containerRef, function () {
+  const theme = useTheme();
+  useEffect(() => setActive(activeProp), [activeProp]);
+  const isActive = Boolean(errorText || active && !blurred && !!activeElement);
+  useOnClickOutside(containerRef, () => {
     handleDeactivate();
   });
-  return /*#__PURE__*/React.createElement(S.Subtle, {
-    className: "ds-subtle-form",
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(S.SubtleFormField, {
-    active: isActive,
-    label: label,
-    tooltip: labelTooltip
-  }, /*#__PURE__*/React.createElement(S.Container, {
-    ref: containerRef,
-    className: "ds-subtle-field",
-    active: active
-  }, isActive && activeElement ? activeElement() : /*#__PURE__*/React.createElement(S.Inactive, {
-    tabIndex: 0,
-    onFocus: !disabled ? handleActivate : undefined,
-    onClick: !disabled ? handleActivate : undefined,
-    onBlur: handleDeactivate,
-    blurred: blurred,
-    disabled: disabled,
-    mask: maskVisible
-  }, /*#__PURE__*/React.createElement(S.MainContent, {
-    hasMargin: true
-  }, inactiveElement && inactiveElement(), !disabled && maskVisible && /*#__PURE__*/React.createElement(MaskedDatePlaceholder, null, mask)), !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(EditS, null),
-    color: theme.palette['grey-600']
-  })))))));
+  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: [
+    /* @__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"] }) }) })
+  ] }) }) }) });
+};
+SubtleField.displayName = "SubtleField";
+export {
+  SubtleField as default
 };
-SubtleField.displayName = 'SubtleField';
-export default SubtleField;

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

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type SubtleInputProps } from './Input.types';
+import { default as React } from 'react';
+import { SubtleInputProps } from './Input.types';
 declare const SubtleInput: {
     ({ disabled, value, onChange, placeholder, label, labelTooltip, suffixTooltip, suffix, error, errorText, inputProps, ...rest }: SubtleInputProps): React.JSX.Element;
     displayName: string;

package/dist/Elements/Input/Input.js

@@ -1,83 +1,54 @@
-var _excluded = ["disabled", "value", "onChange", "placeholder", "label", "labelTooltip", "suffixTooltip", "suffix", "error", "errorText", "inputProps"];
-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, { EditS } from '@synerise/ds-icon';
-import { Input } from '@synerise/ds-input';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from '../../SubtleForm.styles';
-import { focusPadding } from '../../SubtleForm.styles';
-var SubtleInput = function SubtleInput(_ref) {
-  var disabled = _ref.disabled,
-    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,
-    inputProps = _ref.inputProps,
-    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 theme = useTheme();
-  var hasError = error || !!errorText;
-  var handleDeactivate = useCallback(function (event) {
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
+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";
+const SubtleInput = ({
+  disabled,
+  value,
+  onChange,
+  placeholder,
+  label,
+  labelTooltip,
+  suffixTooltip,
+  suffix,
+  error,
+  errorText,
+  inputProps,
+  ...rest
+}) => {
+  const [active, setActive] = useState(false);
+  const [blurred, setBlurred] = useState(false);
+  const containerRef = useRef(null);
+  const theme = useTheme();
+  const hasError = error || !!errorText;
+  const handleDeactivate = useCallback((event) => {
     if (inputProps) {
-      var onBlur = inputProps.onBlur;
+      const {
+        onBlur
+      } = inputProps;
       onBlur && onBlur(event);
     }
     setActive(false);
     setBlurred(true);
   }, [inputProps]);
-  var handleActivate = useCallback(function () {
+  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-input",
-    active: active,
-    disabled: disabled
-  }, (active || hasError) && !disabled ? /*#__PURE__*/React.createElement(Input, _extends({
-    autoFocus: !hasError && !disabled,
-    disabled: disabled,
-    onChange: function onChange(event) {
-      _onChange && _onChange(event.currentTarget.value);
-    },
-    onBlur: !disabled ? handleDeactivate : undefined,
-    value: value,
-    style: {
-      margin: 0,
-      padding: focusPadding
-    },
-    placeholder: placeholder,
-    error: error,
-    errorText: errorText
-  }, rest, inputProps)) : /*#__PURE__*/React.createElement(S.Inactive, {
-    onClick: !disabled ? handleActivate : undefined,
-    blurred: blurred,
-    disabled: disabled
-  }, /*#__PURE__*/React.createElement(S.MainContent, null, value && !!value.trim() ? 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']
-  })))))));
+  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) => {
+    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: [
+    /* @__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"] }) }) })
+  ] }) }) }) });
+};
+SubtleInput.displayName = "SubtleInput";
+export {
+  SubtleInput as default
 };
-SubtleInput.displayName = 'SubtleInput';
-export default SubtleInput;