@bigbinary/neetoui 8.2.52 → 8.2.54

package/dist/Sidebar.js

@@ -1,6 +1,6 @@
 import React__default, { forwardRef, useState } from 'react';
 import classnames from 'classnames';
-import { n as noop } from './index-qrY3Z55Q.js';
+import { n as noop } from './index-diCZU7sv.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import Tooltip from './Tooltip.js';
 import { AppSwitcher as AppSwitcher$1, Help, Book, Keyboard, ChatEmpty, Gift } from '@bigbinary/neeto-icons';
@@ -16,7 +16,7 @@ import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';
 import '@bigbinary/neeto-cist';
 import 'qs';
-import './en-CJac0MnO.js';
+import './en-BOIP5pPR.js';
 import '@babel/runtime/helpers/toConsumableArray';
 import 'dayjs';
 import 'dayjs/plugin/localeData';

package/dist/Slider.js

@@ -12,7 +12,7 @@ import '@babel/runtime/helpers/slicedToArray';
 import 'react-router-dom';
 import '@bigbinary/neeto-hotkeys';
 import './overlayManager.js';
-import { h as hyphenize, n as noop, A as ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES } from './index-qrY3Z55Q.js';
+import { h as hyphenize, n as noop, A as ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES } from './index-diCZU7sv.js';
 import 'qs';
 import 'antd/locale/de_DE';
 import 'antd/locale/en_US';
@@ -34,7 +34,7 @@ import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';
 import '@bigbinary/neeto-cist';
 import 'ramda';
-import './en-CJac0MnO.js';
+import './en-BOIP5pPR.js';
 import '@babel/runtime/helpers/toConsumableArray';
 import 'dayjs';
 import 'dayjs/plugin/localeData';

package/dist/Switch.js

@@ -8,7 +8,7 @@ import '@babel/runtime/helpers/slicedToArray';
 import 'react-router-dom';
 import '@bigbinary/neeto-hotkeys';
 import './overlayManager.js';
-import { h as hyphenize, n as noop } from './index-qrY3Z55Q.js';
+import { h as hyphenize, n as noop } from './index-diCZU7sv.js';
 import '@babel/runtime/helpers/defineProperty';
 import 'qs';
 import Label from './Label.js';
@@ -16,7 +16,7 @@ import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';
 import '@bigbinary/neeto-cist';
 import 'ramda';
-import './en-CJac0MnO.js';
+import './en-BOIP5pPR.js';
 import '@babel/runtime/helpers/toConsumableArray';
 import 'dayjs';
 import 'dayjs/plugin/localeData';

package/dist/Table.js

@@ -15,12 +15,12 @@ import { useHistory } from 'react-router-dom';
 import { ANTD_LOCALE } from './constants.js';
 import '@bigbinary/neeto-hotkeys';
 import './overlayManager.js';
-import { r as removeFromLocalStorage, i as setToLocalStorage, b as buildUrl, n as noop$1, A as ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES } from './index-qrY3Z55Q.js';
+import { r as removeFromLocalStorage, s as setToLocalStorage, b as buildUrl, n as noop$1, A as ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES } from './index-diCZU7sv.js';
 import { u as useQueryParams } from './useQueryParams-b60CHFUx.js';
 import Button from './Button.js';
 import Callout from './Callout.js';
 import Typography from './Typography.js';
-import { T as TABLE_SORT_ORDERS, U as URL_SORT_ORDERS, H as HeaderCellMenu, C as COLUMN_FIXED_VALUES, S as SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT, a as SELECT_ALL_ROWS_CALLOUT_DESKTOP_HEIGHT, u as useRestoreScrollPosition } from './useRestoreScrollPosition-DLitthZX.js';
+import { T as TABLE_SORT_ORDERS, U as URL_SORT_ORDERS, H as HeaderCellMenu, C as COLUMN_FIXED_VALUES, S as SELECT_ALL_ROWS_CALLOUT_MOBILE_HEIGHT, a as SELECT_ALL_ROWS_CALLOUT_DESKTOP_HEIGHT, u as useRestoreScrollPosition } from './useRestoreScrollPosition-Ddj07tNX.js';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { Resizable } from 'react-resizable';
 import Spinner from './Spinner.js';
@@ -34,7 +34,7 @@ import 'antd/locale/pt_PT';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';
 import 'qs';
-import './en-CJac0MnO.js';
+import './en-BOIP5pPR.js';
 import 'dayjs';
 import 'dayjs/plugin/localeData';
 import 'dayjs/plugin/utc';

package/dist/{Textarea-3-cXauzp.js → Textarea-CRw29PQd.js}

@@ -8,7 +8,7 @@ import { u as useId } from './useId-Jj9hXm-g.js';
 import 'react-router-dom';
 import '@bigbinary/neeto-hotkeys';
 import './overlayManager.js';
-import { h as hyphenize } from './index-qrY3Z55Q.js';
+import { h as hyphenize } from './index-diCZU7sv.js';
 import 'qs';
 import Label from './Label.js';
 
@@ -160,4 +160,4 @@ var Textarea = /*#__PURE__*/forwardRef(function (_ref, ref) {
 Textarea.displayName = "Textarea";
 
 export { Textarea as T, useSyncedRef as u };
-//# sourceMappingURL=Textarea-3-cXauzp.js.map
+//# sourceMappingURL=Textarea-CRw29PQd.js.map

package/dist/{Textarea-3-cXauzp.js.map → Textarea-CRw29PQd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Textarea-3-cXauzp.js","sources":["../src/hooks/useSyncedRef.js","../src/components/Textarea.jsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nconst useSyncedRef = ref => {\n  const innerRef = useRef();\n\n  useEffect(() => {\n    if (!ref) return;\n\n    if (typeof ref === \"function\") {\n      ref(innerRef.current);\n    } else {\n      ref.current = innerRef.current;\n    }\n  });\n\n  return innerRef;\n};\n\nexport default useSyncedRef;\n","import React, { useState, useEffect, forwardRef } from \"react\";\n\nimport classnames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nimport { useSyncedRef, useId } from \"hooks\";\nimport { hyphenize } from \"utils\";\n\nimport Label from \"./Label\";\n\nconst SIZES = { small: \"small\", medium: \"medium\", large: \"large\" };\n\nconst ROWS = { small: 1, medium: 3, large: 4 };\n\nconst RESIZE = { vertical: \"vertical\", none: \"none\" };\n\nconst Textarea = forwardRef(\n  (\n    {\n      size = SIZES.medium,\n      resize = RESIZE.vertical,\n      suffix = null,\n      prefix = null,\n      disabled = false,\n      required = false,\n      nakedTextarea = false,\n      helpText = \"\",\n      error = \"\",\n      label = \"\",\n      className = \"\",\n      maxLength,\n      unlimitedChars = false,\n      labelProps,\n      onBlur,\n      disableTrimOnBlur = false,\n      ...otherProps\n    },\n    ref\n  ) => {\n    const [valueInternal, setValueInternal] = useState(\"\");\n\n    const value = otherProps.value ?? valueInternal ?? \"\";\n\n    const id = useId(otherProps.id);\n    const errorId = `error_${id}`;\n    const helpTextId = `helpText_${id}`;\n    const textareaRef = useSyncedRef(ref);\n\n    const valueLength = value?.toString().length || 0;\n    const isCharacterLimitVisible = valueLength >= maxLength * 0.85;\n    const maxLengthError = unlimitedChars && valueLength > maxLength;\n\n    const onChangeInternal = e => setValueInternal(e.target.value);\n    const onChange = otherProps.onChange ?? onChangeInternal;\n    const isMaxLengthPresent = !!maxLength || maxLength === 0;\n\n    useEffect(() => {\n      textareaRef.current.style.minHeight = \"22px\";\n      textareaRef.current.style.height = \"auto\";\n      const scrollHeight = textareaRef.current.scrollHeight;\n      textareaRef.current.style.height = `${scrollHeight + 1}px`;\n    }, [value]);\n\n    const handleTrimmedChangeOnBlur = e => {\n      if (disableTrimOnBlur || typeof value !== \"string\") return;\n\n      const trimmedValue = value.trim();\n      if (value === trimmedValue) return;\n\n      e.target.value = trimmedValue;\n      onChange(e);\n    };\n\n    const handleOnBlur = e => {\n      handleTrimmedChangeOnBlur(e);\n      onBlur?.(e);\n    };\n\n    return (\n      <div className={classnames([\"neeto-ui-input__wrapper\", className])}>\n        <div className=\"neeto-ui-input__label-wrapper\">\n          {label && (\n            <Label\n              {...{ required }}\n              data-cy={`${hyphenize(label)}-label`}\n              htmlFor={id}\n              {...labelProps}\n            >\n              {label}\n            </Label>\n          )}\n          {isCharacterLimitVisible && (\n            <p\n              className={classnames(\"neeto-ui-input__max-length\", {\n                \"neeto-ui-input__max-length--error\": maxLengthError,\n              })}\n            >\n              {valueLength}/{maxLength}\n            </p>\n          )}\n        </div>\n        <div\n          data-cy={`${hyphenize(label)}-text-input`}\n          className={classnames(\"neeto-ui-input\", \"neeto-ui-input--textarea\", {\n            \"neeto-ui-input--error\": !!error,\n            \"neeto-ui-input--disabled\": !!disabled,\n            \"neeto-ui-input--naked\": !!nakedTextarea,\n            \"neeto-ui-input--small\": size === SIZES.small,\n            \"neeto-ui-input--medium\": size === SIZES.medium,\n            \"neeto-ui-input--large\": size === SIZES.large,\n            \"neeto-ui-input--resize--vertical\": resize === RESIZE.vertical,\n            \"neeto-ui-input--resize--none\": resize === RESIZE.none,\n          })}\n        >\n          {prefix && <div className=\"neeto-ui-input__prefix\">{prefix}</div>}\n          <textarea\n            ref={textareaRef}\n            rows={ROWS[size]}\n            {...{\n              disabled,\n              ...(isMaxLengthPresent && !unlimitedChars && { maxLength }),\n              ...otherProps,\n              onChange,\n              value,\n            }}\n            onBlur={handleOnBlur}\n          />\n          {suffix && <div className=\"neeto-ui-input__suffix\">{suffix}</div>}\n        </div>\n        {!!error && (\n          <p\n            className=\"neeto-ui-input__error\"\n            data-cy={`${hyphenize(label)}-input-error`}\n            id={errorId}\n          >\n            {error}\n          </p>\n        )}\n        {helpText && (\n          <p className=\"neeto-ui-input__help-text\" id={helpTextId}>\n            {helpText}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n\nTextarea.displayName = \"Textarea\";\n\nTextarea.propTypes = {\n  /**\n   * To specify the row height of the Textarea.\n   */\n  rows: PropTypes.number,\n  /**\n   * To specify the size of Textarea.\n   */\n  size: PropTypes.oneOf(Object.values(SIZES)),\n  /**\n   * To specify the label shown above the Textarea.\n   */\n  label: PropTypes.string,\n  /**\n   * To specify the label props to be passed to the Label component.\n   */\n  labelProps: PropTypes.object,\n  /**\n   * To provide the value of the Textarea.\n   */\n  value: PropTypes.string,\n  /**\n   * To provide the error message shown below the Textarea.\n   */\n  error: PropTypes.string,\n  /**\n   * To provide the placeholder text for the Textarea.\n   */\n  placeholder: PropTypes.string,\n  /**\n   * To specify whether the Textarea is required.\n   */\n  required: PropTypes.bool,\n  /**\n   * To specify whether the Textarea is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * To provide additional classnames to the Textarea container.\n   */\n  className: PropTypes.string,\n  /**\n   * The resize property sets whether the Textarea is resizable.\n   */\n  resize: PropTypes.oneOf(Object.values(RESIZE)),\n  /**\n   * To specify the text that appears below the Textarea.\n   */\n  helpText: PropTypes.string,\n  /**\n   * To create a Textarea without any borders.\n   */\n  nakedTextarea: PropTypes.bool,\n  /**\n   * To specify a maximum character limit to the Textarea. Charater limit is visible only if the Textarea value is greater than or equal to 85% of the maximum character limit.\n   */\n  maxLength: PropTypes.number,\n  /**\n   * To be used along with maxLength prop. When set to true the character limit will not be enforced and character count will be shown in error state if the character limit is exceeded.\n   */\n  unlimitedChars: PropTypes.bool,\n  /**\n   * To specify the content to be added at the end of the Textarea.\n   */\n  suffix: PropTypes.node,\n  /**\n   * To specify the content to be added at the beginning of the Textarea.\n   */\n  prefix: PropTypes.node,\n  /**\n   * To disable leading and trailing white spaces onBlur.\n   */\n  disableTrimOnBlur: PropTypes.bool,\n};\n\nexport default Textarea;\n"],"names":["useSyncedRef","ref","innerRef","useRef","useEffect","current","SIZES","small","medium","large","ROWS","RESIZE","vertical","none","Textarea","forwardRef","_ref","_ref2","_otherProps$value","_otherProps$onChange","_ref$size","size","_ref$resize","resize","_ref$suffix","suffix","_ref$prefix","prefix","_ref$disabled","disabled","_ref$required","required","_ref$nakedTextarea","nakedTextarea","_ref$helpText","helpText","_ref$error","error","_ref$label","label","_ref$className","className","maxLength","_ref$unlimitedChars","unlimitedChars","labelProps","onBlur","_ref$disableTrimOnBlu","disableTrimOnBlur","otherProps","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","valueInternal","setValueInternal","value","id","useId","errorId","concat","helpTextId","textareaRef","valueLength","toString","length","isCharacterLimitVisible","maxLengthError","onChangeInternal","e","target","onChange","isMaxLengthPresent","style","minHeight","height","scrollHeight","handleTrimmedChangeOnBlur","trimmedValue","trim","handleOnBlur","React","createElement","classnames","Label","_extends","hyphenize","htmlFor","rows","_objectSpread","displayName"],"mappings":"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"}
+{"version":3,"file":"Textarea-CRw29PQd.js","sources":["../src/hooks/useSyncedRef.js","../src/components/Textarea.jsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nconst useSyncedRef = ref => {\n  const innerRef = useRef();\n\n  useEffect(() => {\n    if (!ref) return;\n\n    if (typeof ref === \"function\") {\n      ref(innerRef.current);\n    } else {\n      ref.current = innerRef.current;\n    }\n  });\n\n  return innerRef;\n};\n\nexport default useSyncedRef;\n","import React, { useState, useEffect, forwardRef } from \"react\";\n\nimport classnames from \"classnames\";\nimport PropTypes from \"prop-types\";\n\nimport { useSyncedRef, useId } from \"hooks\";\nimport { hyphenize } from \"utils\";\n\nimport Label from \"./Label\";\n\nconst SIZES = { small: \"small\", medium: \"medium\", large: \"large\" };\n\nconst ROWS = { small: 1, medium: 3, large: 4 };\n\nconst RESIZE = { vertical: \"vertical\", none: \"none\" };\n\nconst Textarea = forwardRef(\n  (\n    {\n      size = SIZES.medium,\n      resize = RESIZE.vertical,\n      suffix = null,\n      prefix = null,\n      disabled = false,\n      required = false,\n      nakedTextarea = false,\n      helpText = \"\",\n      error = \"\",\n      label = \"\",\n      className = \"\",\n      maxLength,\n      unlimitedChars = false,\n      labelProps,\n      onBlur,\n      disableTrimOnBlur = false,\n      ...otherProps\n    },\n    ref\n  ) => {\n    const [valueInternal, setValueInternal] = useState(\"\");\n\n    const value = otherProps.value ?? valueInternal ?? \"\";\n\n    const id = useId(otherProps.id);\n    const errorId = `error_${id}`;\n    const helpTextId = `helpText_${id}`;\n    const textareaRef = useSyncedRef(ref);\n\n    const valueLength = value?.toString().length || 0;\n    const isCharacterLimitVisible = valueLength >= maxLength * 0.85;\n    const maxLengthError = unlimitedChars && valueLength > maxLength;\n\n    const onChangeInternal = e => setValueInternal(e.target.value);\n    const onChange = otherProps.onChange ?? onChangeInternal;\n    const isMaxLengthPresent = !!maxLength || maxLength === 0;\n\n    useEffect(() => {\n      textareaRef.current.style.minHeight = \"22px\";\n      textareaRef.current.style.height = \"auto\";\n      const scrollHeight = textareaRef.current.scrollHeight;\n      textareaRef.current.style.height = `${scrollHeight + 1}px`;\n    }, [value]);\n\n    const handleTrimmedChangeOnBlur = e => {\n      if (disableTrimOnBlur || typeof value !== \"string\") return;\n\n      const trimmedValue = value.trim();\n      if (value === trimmedValue) return;\n\n      e.target.value = trimmedValue;\n      onChange(e);\n    };\n\n    const handleOnBlur = e => {\n      handleTrimmedChangeOnBlur(e);\n      onBlur?.(e);\n    };\n\n    return (\n      <div className={classnames([\"neeto-ui-input__wrapper\", className])}>\n        <div className=\"neeto-ui-input__label-wrapper\">\n          {label && (\n            <Label\n              {...{ required }}\n              data-cy={`${hyphenize(label)}-label`}\n              htmlFor={id}\n              {...labelProps}\n            >\n              {label}\n            </Label>\n          )}\n          {isCharacterLimitVisible && (\n            <p\n              className={classnames(\"neeto-ui-input__max-length\", {\n                \"neeto-ui-input__max-length--error\": maxLengthError,\n              })}\n            >\n              {valueLength}/{maxLength}\n            </p>\n          )}\n        </div>\n        <div\n          data-cy={`${hyphenize(label)}-text-input`}\n          className={classnames(\"neeto-ui-input\", \"neeto-ui-input--textarea\", {\n            \"neeto-ui-input--error\": !!error,\n            \"neeto-ui-input--disabled\": !!disabled,\n            \"neeto-ui-input--naked\": !!nakedTextarea,\n            \"neeto-ui-input--small\": size === SIZES.small,\n            \"neeto-ui-input--medium\": size === SIZES.medium,\n            \"neeto-ui-input--large\": size === SIZES.large,\n            \"neeto-ui-input--resize--vertical\": resize === RESIZE.vertical,\n            \"neeto-ui-input--resize--none\": resize === RESIZE.none,\n          })}\n        >\n          {prefix && <div className=\"neeto-ui-input__prefix\">{prefix}</div>}\n          <textarea\n            ref={textareaRef}\n            rows={ROWS[size]}\n            {...{\n              disabled,\n              ...(isMaxLengthPresent && !unlimitedChars && { maxLength }),\n              ...otherProps,\n              onChange,\n              value,\n            }}\n            onBlur={handleOnBlur}\n          />\n          {suffix && <div className=\"neeto-ui-input__suffix\">{suffix}</div>}\n        </div>\n        {!!error && (\n          <p\n            className=\"neeto-ui-input__error\"\n            data-cy={`${hyphenize(label)}-input-error`}\n            id={errorId}\n          >\n            {error}\n          </p>\n        )}\n        {helpText && (\n          <p className=\"neeto-ui-input__help-text\" id={helpTextId}>\n            {helpText}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n\nTextarea.displayName = \"Textarea\";\n\nTextarea.propTypes = {\n  /**\n   * To specify the row height of the Textarea.\n   */\n  rows: PropTypes.number,\n  /**\n   * To specify the size of Textarea.\n   */\n  size: PropTypes.oneOf(Object.values(SIZES)),\n  /**\n   * To specify the label shown above the Textarea.\n   */\n  label: PropTypes.string,\n  /**\n   * To specify the label props to be passed to the Label component.\n   */\n  labelProps: PropTypes.object,\n  /**\n   * To provide the value of the Textarea.\n   */\n  value: PropTypes.string,\n  /**\n   * To provide the error message shown below the Textarea.\n   */\n  error: PropTypes.string,\n  /**\n   * To provide the placeholder text for the Textarea.\n   */\n  placeholder: PropTypes.string,\n  /**\n   * To specify whether the Textarea is required.\n   */\n  required: PropTypes.bool,\n  /**\n   * To specify whether the Textarea is disabled.\n   */\n  disabled: PropTypes.bool,\n  /**\n   * To provide additional classnames to the Textarea container.\n   */\n  className: PropTypes.string,\n  /**\n   * The resize property sets whether the Textarea is resizable.\n   */\n  resize: PropTypes.oneOf(Object.values(RESIZE)),\n  /**\n   * To specify the text that appears below the Textarea.\n   */\n  helpText: PropTypes.string,\n  /**\n   * To create a Textarea without any borders.\n   */\n  nakedTextarea: PropTypes.bool,\n  /**\n   * To specify a maximum character limit to the Textarea. Charater limit is visible only if the Textarea value is greater than or equal to 85% of the maximum character limit.\n   */\n  maxLength: PropTypes.number,\n  /**\n   * To be used along with maxLength prop. When set to true the character limit will not be enforced and character count will be shown in error state if the character limit is exceeded.\n   */\n  unlimitedChars: PropTypes.bool,\n  /**\n   * To specify the content to be added at the end of the Textarea.\n   */\n  suffix: PropTypes.node,\n  /**\n   * To specify the content to be added at the beginning of the Textarea.\n   */\n  prefix: PropTypes.node,\n  /**\n   * To disable leading and trailing white spaces onBlur.\n   */\n  disableTrimOnBlur: PropTypes.bool,\n};\n\nexport default Textarea;\n"],"names":["useSyncedRef","ref","innerRef","useRef","useEffect","current","SIZES","small","medium","large","ROWS","RESIZE","vertical","none","Textarea","forwardRef","_ref","_ref2","_otherProps$value","_otherProps$onChange","_ref$size","size","_ref$resize","resize","_ref$suffix","suffix","_ref$prefix","prefix","_ref$disabled","disabled","_ref$required","required","_ref$nakedTextarea","nakedTextarea","_ref$helpText","helpText","_ref$error","error","_ref$label","label","_ref$className","className","maxLength","_ref$unlimitedChars","unlimitedChars","labelProps","onBlur","_ref$disableTrimOnBlu","disableTrimOnBlur","otherProps","_objectWithoutProperties","_excluded","_useState","useState","_useState2","_slicedToArray","valueInternal","setValueInternal","value","id","useId","errorId","concat","helpTextId","textareaRef","valueLength","toString","length","isCharacterLimitVisible","maxLengthError","onChangeInternal","e","target","onChange","isMaxLengthPresent","style","minHeight","height","scrollHeight","handleTrimmedChangeOnBlur","trimmedValue","trim","handleOnBlur","React","createElement","classnames","Label","_extends","hyphenize","htmlFor","rows","_objectSpread","displayName"],"mappings":"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"}

package/dist/Textarea.js

@@ -8,15 +8,15 @@ import './useId-Jj9hXm-g.js';
 import 'react-router-dom';
 import '@bigbinary/neeto-hotkeys';
 import './overlayManager.js';
-import './index-qrY3Z55Q.js';
+import './index-diCZU7sv.js';
 import 'qs';
-export { T as default } from './Textarea-3-cXauzp.js';
+export { T as default } from './Textarea-CRw29PQd.js';
 import './Label.js';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';
 import '@bigbinary/neeto-cist';
 import 'ramda';
-import './en-CJac0MnO.js';
+import './en-BOIP5pPR.js';
 import '@babel/runtime/helpers/toConsumableArray';
 import 'dayjs';
 import 'dayjs/plugin/localeData';

package/dist/TimePicker.js

@@ -18,13 +18,14 @@ import '@tippyjs/react';
 import 'tippy.js';
 import './Callout.js';
 import './Checkbox.js';
+import '@babel/runtime/helpers/toConsumableArray';
 import '@babel/runtime/helpers/asyncToGenerator';
 import '@babel/runtime/regenerator';
 import 'react-colorful';
-import './tinycolor-DX-kZ4bq.js';
+import './useRecentlyUsedColors-BuNIVO4w.js';
 import './Dropdown.js';
-import './index-qrY3Z55Q.js';
-export { T as default } from './index-CHqRt5LZ.js';
+import './index-diCZU7sv.js';
+export { T as default } from './index-Cxd2OUoY.js';
 import './Input.js';
 import './Label.js';
 import './MultiEmailInput.js';
@@ -33,8 +34,7 @@ import './useId-Jj9hXm-g.js';
 import '@bigbinary/neeto-hotkeys';
 import './overlayManager.js';
 import 'qs';
-import './Textarea-3-cXauzp.js';
-import '@babel/runtime/helpers/toConsumableArray';
+import './Textarea-CRw29PQd.js';
 import './Pane.js';
 import './Popover.js';
 import 'framer-motion';
@@ -55,14 +55,14 @@ import './Switch.js';
 import './Tab.js';
 import 'antd/lib/table';
 import 'react-drag-listview';
-import './useRestoreScrollPosition-DLitthZX.js';
+import './useRestoreScrollPosition-Ddj07tNX.js';
 import 'react-resizable';
 import './Tag.js';
 import './Toastr.js';
 import 'i18next';
 import 'antd/lib/tree';
 import './TreeSelect.js';
-import './en-CJac0MnO.js';
+import './en-BOIP5pPR.js';
 import 'dayjs';
 import 'dayjs/plugin/localeData';
 import 'dayjs/plugin/utc';
@@ -70,7 +70,7 @@ import 'dayjs/plugin/weekday';
 import 'dayjs/plugin/weekOfYear';
 import './Spinner.js';
 import './Tooltip.js';
-import './useOverlayManager-Dfvl7BcV.js';
+import './useOverlayManager-CwoiTegT.js';
 import '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
 import '@babel/runtime/helpers/esm/inheritsLoose';
 import 'antd/lib/date-picker';

package/dist/Toastr.js

@@ -7,14 +7,14 @@ import React__default from 'react';
 import { t } from 'i18next';
 import { Close, CheckCircle, Warning, Info } from '@bigbinary/neeto-icons';
 import { Slide, toast } from 'react-toastify';
-import { n as noop, U as UniqueArray } from './index-qrY3Z55Q.js';
+import { n as noop, U as UniqueArray } from './index-diCZU7sv.js';
 import Linkify from 'linkify-react';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';
 import '@bigbinary/neeto-cist';
 import 'qs';
 import 'ramda';
-import './en-CJac0MnO.js';
+import './en-BOIP5pPR.js';
 import '@babel/runtime/helpers/toConsumableArray';
 import 'dayjs';
 import 'dayjs/plugin/localeData';

package/dist/TranslationProvider.js

@@ -1,7 +1,7 @@
 import React__default, { useEffect } from 'react';
 import { initReactI18next, I18nextProvider } from 'react-i18next';
 import i18n from 'i18next';
-import { e as enTranslations } from './en-CJac0MnO.js';
+import { e as enTranslations } from './en-BOIP5pPR.js';
 
 var neetoui$5 = {
 	blockNavigation: {

package/dist/Tree.js

@@ -6,7 +6,7 @@ import React__default from 'react';
 import classnames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { ANTD_LOCALE } from './constants.js';
-import { A as ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES } from './index-qrY3Z55Q.js';
+import { A as ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES } from './index-diCZU7sv.js';
 import { Down, Right } from '@bigbinary/neeto-icons';
 import 'antd/locale/de_DE';
 import 'antd/locale/en_US';
@@ -21,7 +21,7 @@ import '@babel/runtime/helpers/createClass';
 import '@bigbinary/neeto-cist';
 import 'qs';
 import 'ramda';
-import './en-CJac0MnO.js';
+import './en-BOIP5pPR.js';
 import '@babel/runtime/helpers/toConsumableArray';
 import 'dayjs';
 import 'dayjs/plugin/localeData';

package/dist/TreeSelect.js

@@ -7,7 +7,7 @@ import React__default, { forwardRef } from 'react';
 import classnames from 'classnames';
 import { Down } from '@bigbinary/neeto-icons';
 import { useTranslation } from 'react-i18next';
-import { g as getLocale, A as ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES } from './index-qrY3Z55Q.js';
+import { g as getLocale, A as ANT_DESIGN_GLOBAL_TOKEN_OVERRIDES } from './index-diCZU7sv.js';
 import { ANTD_LOCALE } from './constants.js';
 import Label from './Label.js';
 import '@babel/runtime/helpers/slicedToArray';
@@ -16,7 +16,7 @@ import '@babel/runtime/helpers/createClass';
 import '@bigbinary/neeto-cist';
 import 'qs';
 import 'ramda';
-import './en-CJac0MnO.js';
+import './en-BOIP5pPR.js';
 import '@babel/runtime/helpers/toConsumableArray';
 import 'dayjs';
 import 'dayjs/plugin/localeData';

package/dist/cjs/ActionDropdown.js

@@ -5,7 +5,7 @@ var _extends = require('@babel/runtime/helpers/extends');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var React = require('react');
 var classnames = require('classnames');
-var index = require('./index-CeDeXLYn.js');
+var index = require('./index-BhOtyi3g.js');
 var Button = require('./Button.js');
 var Dropdown = require('./Dropdown.js');
 require('@babel/runtime/helpers/slicedToArray');
@@ -14,7 +14,7 @@ require('@babel/runtime/helpers/createClass');
 require('@bigbinary/neeto-cist');
 require('qs');
 require('ramda');
-require('./en-1dfvTYgC.js');
+require('./en-BxFw89Pr.js');
 require('@babel/runtime/helpers/toConsumableArray');
 require('dayjs');
 require('dayjs/plugin/localeData');

package/dist/cjs/Alert.js

@@ -15,7 +15,7 @@ require('@babel/runtime/helpers/slicedToArray');
 require('@tippyjs/react');
 require('tippy.js');
 require('@bigbinary/neeto-icons');
-require('./useOverlayManager-DESPn-02.js');
+require('./useOverlayManager-BtXVAjbj.js');
 require('@babel/runtime/helpers/esm/extends');
 require('@babel/runtime/helpers/esm/objectWithoutPropertiesLoose');
 require('@babel/runtime/helpers/esm/inheritsLoose');
@@ -25,10 +25,10 @@ require('@bigbinary/neeto-hotkeys');
 require('./overlayManager.js');
 require('@babel/runtime/helpers/classCallCheck');
 require('@babel/runtime/helpers/createClass');
-require('./index-CeDeXLYn.js');
+require('./index-BhOtyi3g.js');
 require('@bigbinary/neeto-cist');
 require('qs');
-require('./en-1dfvTYgC.js');
+require('./en-BxFw89Pr.js');
 require('@babel/runtime/helpers/toConsumableArray');
 require('dayjs');
 require('dayjs/plugin/localeData');

package/dist/cjs/Checkbox.js

@@ -9,7 +9,7 @@ require('@babel/runtime/helpers/slicedToArray');
 require('react-router-dom');
 require('@bigbinary/neeto-hotkeys');
 require('./overlayManager.js');
-var index = require('./index-CeDeXLYn.js');
+var index = require('./index-BhOtyi3g.js');
 require('@babel/runtime/helpers/defineProperty');
 require('qs');
 var Label = require('./Label.js');
@@ -17,7 +17,7 @@ require('@babel/runtime/helpers/classCallCheck');
 require('@babel/runtime/helpers/createClass');
 require('@bigbinary/neeto-cist');
 require('ramda');
-require('./en-1dfvTYgC.js');
+require('./en-BxFw89Pr.js');
 require('@babel/runtime/helpers/toConsumableArray');
 require('dayjs');
 require('dayjs/plugin/localeData');

package/dist/cjs/ColorPicker.js

@@ -2,6 +2,7 @@
 
 var _extends = require('@babel/runtime/helpers/extends');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
@@ -9,10 +10,12 @@ var React = require('react');
 var classnames = require('classnames');
 var neetoIcons = require('@bigbinary/neeto-icons');
 var reactColorful = require('react-colorful');
-var tinycolor = require('./tinycolor-C4a31PPv.js');
+var reactI18next = require('react-i18next');
+var useRecentlyUsedColors = require('./useRecentlyUsedColors-4OtHJzfd.js');
 var Button = require('./Button.js');
 var Dropdown = require('./Dropdown.js');
-var index = require('./index-CeDeXLYn.js');
+var Typography = require('./Typography.js');
+var index = require('./index-BhOtyi3g.js');
 require('@babel/runtime/helpers/objectWithoutProperties');
 require('react-router-dom');
 require('./Spinner.js');
@@ -24,8 +27,7 @@ require('@bigbinary/neeto-cist');
 require('@babel/runtime/helpers/classCallCheck');
 require('@babel/runtime/helpers/createClass');
 require('qs');
-require('./en-1dfvTYgC.js');
-require('@babel/runtime/helpers/toConsumableArray');
+require('./en-BxFw89Pr.js');
 require('dayjs');
 require('dayjs/plugin/localeData');
 require('dayjs/plugin/utc');
@@ -40,58 +42,30 @@ var DEFAULT_PALETTE_COLORS = [{
   hex: "#FFFFFF"
 }, {
   hex: "#D6D6D6"
-}, {
-  hex: "#676767"
 }, {
   hex: "#0A0E13"
 }, {
-  hex: "#91E5F6"
-}, {
-  hex: "#2A79C4"
+  hex: "#FECE1E"
 }, {
-  hex: "#095482"
+  hex: "#F32E48"
 }, {
-  hex: "#FFCDD2"
+  hex: "#02C39A"
 }, {
-  hex: "#E2EFAC"
+  hex: "#2A79C4"
 }, {
   hex: "#B3E5FC"
-}, {
-  hex: "#C8E6C9"
-}, {
-  hex: "#D7CCC8"
-}, {
-  hex: "#F5DD90"
 }, {
   hex: "#C3C6F9"
 }, {
-  hex: "#FFF7AE"
-}, {
-  hex: "#FECE1E"
-}, {
-  hex: "#FFD69D"
-}, {
-  hex: "#FE871E"
+  hex: "#8064CE"
 }, {
-  hex: "#02C39A"
+  hex: "#FE861E"
 }, {
-  hex: "#00A896"
+  hex: "#FF7DC9"
 }, {
   hex: "#028090"
 }, {
-  hex: "#99B898"
-}, {
-  hex: "#586BA4"
-}, {
-  hex: "#324376"
-}, {
-  hex: "#FF847C"
-}, {
-  hex: "#F32E48"
-}, {
-  hex: "#8064CE"
-}, {
-  hex: "#4F329A"
+  hex: "#095482"
 }];
 
 var Palette = function Palette(_ref) {
@@ -104,7 +78,7 @@ var Palette = function Palette(_ref) {
   }, colorList.map(function (item) {
     var hex = item.hex,
       rgb = item.rgb;
-    var colorObject = tinycolor.tinycolor(hex !== null && hex !== void 0 ? hex : rgb);
+    var colorObject = useRecentlyUsedColors.tinycolor(hex !== null && hex !== void 0 ? hex : rgb);
     var isTransparent = colorObject.getAlpha() === 0;
     var isActive = Boolean(
     // hex is case insensitive.
@@ -154,21 +128,34 @@ var ColorPicker = function ColorPicker(_ref) {
     _ref$showPicker = _ref.showPicker,
     showPicker = _ref$showPicker === void 0 ? true : _ref$showPicker,
     portalProps = _ref.portalProps,
-    colorPalette = _ref.colorPalette;
+    colorPalette = _ref.colorPalette,
+    _ref$showRecentlyUsed = _ref.showRecentlyUsedColors,
+    showRecentlyUsedColors = _ref$showRecentlyUsed === void 0 ? showPicker : _ref$showRecentlyUsed;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t,
+    i18n = _useTranslation.i18n;
   var _useState = React.useState(color),
     _useState2 = _slicedToArray(_useState, 2),
     colorInternal = _useState2[0],
     setColorInternal = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isColorSelected = _useState4[0],
+    setIsColorSelected = _useState4[1];
   var isInputChanged = React.useRef(false);
   var _useEyeDropper = useEyeDropper({
       pickRadius: 3
     }),
     open = _useEyeDropper.open,
     isSupported = _useEyeDropper.isSupported;
+  var _useRecentlyUsedColor = useRecentlyUsedColors.useRecentlyUsedColors(),
+    _useRecentlyUsedColor2 = _slicedToArray(_useRecentlyUsedColor, 2),
+    recentlyUsedColors = _useRecentlyUsedColor2[0],
+    setRecentlyUsedColors = _useRecentlyUsedColor2[1];
   var PickerComponent = showTransparencyControl ? reactColorful.HexAlphaColorPicker : reactColorful.HexColorPicker;
   var colorValue = (_ref2 = color !== null && color !== void 0 ? color : colorInternal) !== null && _ref2 !== void 0 ? _ref2 : "";
   var getColor = function getColor(colorValue) {
-    var color = tinycolor.tinycolor(colorValue);
+    var color = useRecentlyUsedColors.tinycolor(colorValue);
     if (color.isValid()) {
       var hex = color.toHexString();
       // return `transparent` for transparent colors.
@@ -184,6 +171,7 @@ var ColorPicker = function ColorPicker(_ref) {
     };
   };
   var onColorChange = function onColorChange(color) {
+    setIsColorSelected(true);
     var changeHandler = onChange !== null && onChange !== void 0 ? onChange : setColorInternal;
     changeHandler(getColor(color));
   };
@@ -208,7 +196,7 @@ var ColorPicker = function ColorPicker(_ref) {
             return open();
           case 3:
             colorResponse = _context.sent;
-            hex = tinycolor.tinycolor(colorResponse.sRGBHex).toHexString();
+            hex = useRecentlyUsedColors.tinycolor(colorResponse.sRGBHex).toHexString();
             onColorChange(hex);
             _context.next = 10;
             break;
@@ -225,8 +213,20 @@ var ColorPicker = function ColorPicker(_ref) {
       return _ref3.apply(this, arguments);
     };
   }();
-  var Target = function Target(_ref4) {
-    var size = _ref4.size;
+  var onClose = function onClose() {
+    if (!showRecentlyUsedColors || !isColorSelected) return;
+    var newColor = getColor(colorValue);
+    var recentColorsExcludingNew = recentlyUsedColors.filter(function (_ref4) {
+      var hex = _ref4.hex;
+      return hex !== newColor.hex;
+    });
+    var updatedColors = [newColor].concat(_toConsumableArray(recentColorsExcludingNew));
+    if (updatedColors.length > 14) updatedColors.pop();
+    setRecentlyUsedColors(updatedColors);
+    setIsColorSelected(false);
+  };
+  var Target = function Target(_ref5) {
+    var size = _ref5.size;
     return /*#__PURE__*/React.createElement("button", {
       "data-cy": "color-picker-target",
       "data-testid": "neeto-color-picker",
@@ -259,7 +259,9 @@ var ColorPicker = function ColorPicker(_ref) {
     }),
     label: colorValue,
     position: "bottom-start"
-  }, dropdownProps, {
+  }, _objectSpread(_objectSpread({}, dropdownProps), {}, {
+    onClose: onClose
+  }), {
     dropdownProps: _objectSpread(_objectSpread({}, dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.dropdownProps), portalProps)
   }), /*#__PURE__*/React.createElement("div", {
     className: "neeto-ui-colorpicker__popover"
@@ -299,6 +301,16 @@ var ColorPicker = function ColorPicker(_ref) {
     color: color,
     colorList: colorPalette,
     onChange: onColorChange
+  })), showRecentlyUsedColors && recentlyUsedColors.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-colorpicker__palette-wrapper neeto-ui-border-t neeto-ui-border-gray-200 neeto-ui-pt-3",
+    "data-testid": "color-palette-recently-used"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-600 mb-2",
+    style: "body3",
+    weight: "medium"
+  }, index.getLocale(i18n, t, "neetoui.colorPicker.recentlyUsed")), /*#__PURE__*/React.createElement(Palette, {
+    colorList: recentlyUsedColors,
+    onChange: onColorChange
   }))));
 };