@scaleflex/widget-common 0.0.1

package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldSelectType.js

@@ -0,0 +1,69 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["i18n", "onChange", "field", "value", "multiple", "inputRef", "size", "showClearIcon", "fromFilters", "onBlur", "handleSelectMenuClose"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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 { useMetaDataSortedOptions } from '../MetaDataFieldTypes.hooks';
+import Styled from './MetaDataFieldTypes.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function (_ref) {
+  var i18n = _ref.i18n,
+    onChange = _ref.onChange,
+    field = _ref.field,
+    value = _ref.value,
+    multiple = _ref.multiple,
+    inputRef = _ref.inputRef,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    _ref$showClearIcon = _ref.showClearIcon,
+    showClearIcon = _ref$showClearIcon === void 0 ? false : _ref$showClearIcon,
+    _ref$fromFilters = _ref.fromFilters,
+    fromFilters = _ref$fromFilters === void 0 ? false : _ref$fromFilters,
+    onBlur = _ref.onBlur,
+    handleSelectMenuClose = _ref.handleSelectMenuClose,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useMetaDataSortedOpt = useMetaDataSortedOptions({
+      field: field,
+      value: value,
+      multiple: multiple,
+      i18n: i18n
+    }),
+    sortedOptions = _useMetaDataSortedOpt.sortedOptions,
+    getValue = _useMetaDataSortedOpt.getValue;
+  var handleChange = function handleChange(valueOrEvent) {
+    if (valueOrEvent && valueOrEvent.target) {
+      var eventValue = valueOrEvent.target.value;
+      onChange(eventValue);
+    } else {
+      onChange(valueOrEvent);
+    }
+  };
+  return /*#__PURE__*/_jsx(Styled.Autocomplete, _objectSpread({
+    ref: inputRef,
+    getOptionLabel: function getOptionLabel(option) {
+      return option === null || option === void 0 ? void 0 : option.label;
+    },
+    getOptionValue: function getOptionValue(option) {
+      var _option$id;
+      return (_option$id = option === null || option === void 0 ? void 0 : option.id) !== null && _option$id !== void 0 ? _option$id : option === null || option === void 0 ? void 0 : option.i18nKey;
+    },
+    onChange: handleChange,
+    fullWidth: true,
+    value: getValue(),
+    multiple: multiple,
+    size: size,
+    showClearIcon: showClearIcon,
+    options: sortedOptions,
+    submitOnBlur: function submitOnBlur() {
+      return handleSelectMenuClose && handleSelectMenuClose(value);
+    },
+    MenuProps: {
+      position: 'bottom-start'
+    },
+    smallPaddings: fromFilters && multiple && (value === null || value === void 0 ? void 0 : value.length)
+  }, rest));
+});

package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldTagsType.js

@@ -0,0 +1,143 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["onChange", "value", "i18n", "activeRegionalKey", "item", "isFetching", "isMetadataFilter", "isFocused", "setIsFocused", "isShowGenerateBtn", "inputRef", "generateTags", "isLoading", "allTags", "config", "size", "onChangeSearchQuery", "isMetadataGeneralSection", "disableOnEnter"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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 { useEffect, useMemo, useState, useRef } from 'react';
+import SuggestedTagsInput from '../../SuggestedTagsInput/SuggestedTagsInput';
+// TODO: Check if we should move the place of the this component to FileCard or not.
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function (_ref) {
+  var onChange = _ref.onChange,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? [] : _ref$value,
+    i18n = _ref.i18n,
+    activeRegionalKey = _ref.activeRegionalKey,
+    item = _ref.item,
+    isFetching = _ref.isFetching,
+    isMetadataFilter = _ref.isMetadataFilter,
+    isFocused = _ref.isFocused,
+    setIsFocused = _ref.setIsFocused,
+    isShowGenerateBtn = _ref.isShowGenerateBtn,
+    inputRef = _ref.inputRef,
+    generateTags = _ref.generateTags,
+    isLoading = _ref.isLoading,
+    allTags = _ref.allTags,
+    config = _ref.config,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    onChangeSearchQuery = _ref.onChangeSearchQuery,
+    isMetadataGeneralSection = _ref.isMetadataGeneralSection,
+    disableOnEnter = _ref.disableOnEnter,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  value = Array.isArray(value) ? value : [];
+  var initialValue = useRef(value);
+  var tagsList = useMemo(function () {
+    return (allTags || []).map(function (tag) {
+      var _tag$names, _tag$names2;
+      return {
+        sid: tag === null || tag === void 0 ? void 0 : tag.sid,
+        label: tag === null || tag === void 0 ? void 0 : (_tag$names = tag.names) === null || _tag$names === void 0 ? void 0 : _tag$names[activeRegionalKey],
+        name: tag === null || tag === void 0 ? void 0 : (_tag$names2 = tag.names) === null || _tag$names2 === void 0 ? void 0 : _tag$names2[activeRegionalKey],
+        primary: Boolean(tag === null || tag === void 0 ? void 0 : tag.primary)
+      };
+    }).filter(function (tag) {
+      return (tag === null || tag === void 0 ? void 0 : tag.sid) && (tag === null || tag === void 0 ? void 0 : tag.label);
+    });
+  }, [allTags, activeRegionalKey]);
+  var _useState = useState(tagsList),
+    _useState2 = _slicedToArray(_useState, 2),
+    filteredTagsList = _useState2[0],
+    setFilteredTagsList = _useState2[1];
+  var notSuggestedTagsList = Array.isArray(filteredTagsList) ? filteredTagsList.filter(function (tag) {
+    return (tag === null || tag === void 0 ? void 0 : tag.sid) && !(tag !== null && tag !== void 0 && tag.primary) && !(value || []).some(function (tagValue) {
+      return tagValue.sid === tag.sid;
+    });
+  }) : [];
+  var suggestedTagsList = Array.isArray(filteredTagsList) ? filteredTagsList.filter(function (tag) {
+    return (tag === null || tag === void 0 ? void 0 : tag.sid) && (tag === null || tag === void 0 ? void 0 : tag.primary) && !(value || []).some(function (tagValue) {
+      return tagValue.sid === tag.sid;
+    });
+  }) : [];
+  var handleAdd = function handleAdd(item) {
+    var oldTagIndex = (initialValue.current || []).findIndex(function (_ref2) {
+      var label = _ref2.label,
+        name = _ref2.name;
+      return item === label || item === name;
+    });
+    var newTag = oldTagIndex !== -1 && initialValue.current[oldTagIndex] || item;
+    var newTags = _toConsumableArray(value);
+    if (oldTagIndex !== -1) {
+      newTags.splice(oldTagIndex, 0, newTag);
+    } else {
+      newTags.push(newTag);
+    }
+    var uniqueTags = _toConsumableArray(new Set(newTags));
+    onChange(uniqueTags);
+    return uniqueTags;
+  };
+  var handleRemove = function handleRemove(index) {
+    var newTags = _toConsumableArray(value);
+    newTags.splice(index, 1);
+
+    // removing tags from TagField and bringing back these removed tags (if it was in the suggestion list) to the list
+
+    setFilteredTagsList(function (prevValue) {
+      var removedFromSuggestedList = tagsList.filter(function (option) {
+        return option.name === value[index];
+      });
+      return [].concat(_toConsumableArray(prevValue), _toConsumableArray(removedFromSuggestedList));
+    });
+    onChange(newTags);
+  };
+  useEffect(function () {
+    if (tagsList !== null && tagsList !== void 0 && tagsList.length) {
+      setFilteredTagsList(tagsList);
+    }
+  }, [tagsList]);
+  return /*#__PURE__*/_jsx(SuggestedTagsInput, _objectSpread(_objectSpread({}, rest), {}, {
+    i18n: i18n,
+    values: value,
+    onClear: function onClear() {
+      return onChange([]);
+    },
+    onChange: onChange,
+    onRemove: handleRemove,
+    handleAdd: handleAdd,
+    generateTags: generateTags,
+    filteredTagsList: filteredTagsList,
+    notSuggestedTagsList: notSuggestedTagsList,
+    suggestedTagsList: suggestedTagsList,
+    setFilteredTagsList: setFilteredTagsList,
+    config: config,
+    size: size,
+    isLoading: isLoading,
+    isFocused: isFocused,
+    setIsFocused: setIsFocused,
+    showGenerateTagsButton: isShowGenerateBtn,
+    generateTagsButtonLabel: i18n('mutualizedGenerateTagsButton'),
+    clearTagsButtonLabel: i18n('mutualizedClearAllButton'),
+    allTags: allTags,
+    isItemCard: true,
+    ref: inputRef,
+    disableOnEnter: disableOnEnter,
+    onChangeSearchQuery: onChangeSearchQuery,
+    isFetching: isFetching,
+    isMetadataGeneralSection: isMetadataGeneralSection,
+    isMetadataFilter: isMetadataFilter
+  }));
+});

package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldTextType.js

@@ -0,0 +1,42 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["isFilterOptions", "value", "selectOnly", "onChange", "containerHeight", "inputRef", "style", "size"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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 { Input } from '@scaleflex/ui/core';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function (_ref) {
+  var isFilterOptions = _ref.isFilterOptions,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    selectOnly = _ref.selectOnly,
+    onChange = _ref.onChange,
+    containerHeight = _ref.containerHeight,
+    inputRef = _ref.inputRef,
+    style = _ref.style,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var handleOnChange = function handleOnChange(value) {
+    if (isFilterOptions) selectOnly(value);
+    onChange(value);
+  };
+  return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({}, rest), {}, {
+    value: value,
+    ref: inputRef,
+    style: _objectSpread({
+      marginBottom: 0,
+      minWidth: 30
+    }, style),
+    onChange: function onChange(_ref2) {
+      var value = _ref2.target.value;
+      return handleOnChange(value);
+    },
+    size: size,
+    fullWidth: true
+  }));
+});

package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldTextareaType.js

@@ -0,0 +1,72 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["isFilterOptions", "value", "selectOnly", "onChange", "containerHeight", "inputRef", "enableAIDescription", "generateDescription", "isDescriptionLoading", "setIsDescriptionLoading", "isDescribeBtnHidden", "placeholder", "i18n", "considerMaxWidth", "considerAutoHeight", "readOnly", "size", "activeRegionalKey"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+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 { DESCRIBE_AI_SUPPORTED_LANGUAGES } from '@scaleflex/widget-utils/lib/constants';
+import { Success } from '@scaleflex/icons';
+import Styled from '../FilterMetadataFields.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+export default (function (_ref) {
+  var isFilterOptions = _ref.isFilterOptions,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    selectOnly = _ref.selectOnly,
+    onChange = _ref.onChange,
+    containerHeight = _ref.containerHeight,
+    inputRef = _ref.inputRef,
+    enableAIDescription = _ref.enableAIDescription,
+    generateDescription = _ref.generateDescription,
+    isDescriptionLoading = _ref.isDescriptionLoading,
+    setIsDescriptionLoading = _ref.setIsDescriptionLoading,
+    isDescribeBtnHidden = _ref.isDescribeBtnHidden,
+    placeholder = _ref.placeholder,
+    i18n = _ref.i18n,
+    _ref$considerMaxWidth = _ref.considerMaxWidth,
+    considerMaxWidth = _ref$considerMaxWidth === void 0 ? false : _ref$considerMaxWidth,
+    _ref$considerAutoHeig = _ref.considerAutoHeight,
+    considerAutoHeight = _ref$considerAutoHeig === void 0 ? false : _ref$considerAutoHeig,
+    readOnly = _ref.readOnly,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'md' : _ref$size,
+    activeRegionalKey = _ref.activeRegionalKey,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var showDescribeWithAIBtn = !isDescribeBtnHidden && enableAIDescription && !!DESCRIBE_AI_SUPPORTED_LANGUAGES[activeRegionalKey];
+  var isReadonly = readOnly || isDescriptionLoading;
+  var handleOnChange = function handleOnChange(value) {
+    if (isFilterOptions) selectOnly(value);
+    onChange(value);
+  };
+  var handleClearAll = function handleClearAll() {
+    onChange('');
+  };
+  return /*#__PURE__*/_jsx(Styled.TextArea, _objectSpread(_objectSpread({}, rest), {}, {
+    fullWidth: true,
+    value: value,
+    placeholder: isDescriptionLoading ? '' : placeholder,
+    ref: inputRef,
+    onChange: function onChange(_ref2) {
+      var value = _ref2.target.value;
+      return handleOnChange(value);
+    },
+    showActionButton: showDescribeWithAIBtn,
+    readOnly: isReadonly,
+    hideCopyIcon: isReadonly && !isDescriptionLoading,
+    isActionButtonLoading: isDescriptionLoading,
+    disableActionButton: isDescriptionLoading,
+    actionButtonLabel: i18n('metaDataTextAreaFieldDescribeWithAIButtonText'),
+    onClickActionButton: generateDescription,
+    size: size,
+    showClearButton: !!(value !== null && value !== void 0 && value.length),
+    onClear: handleClearAll,
+    clearAllButtonLabel: i18n('mutualizedClearAllButton'),
+    copyTextMessage: i18n('mutualizedCopyLink'),
+    copySuccessIcon: /*#__PURE__*/_jsx(Success, {
+      size: 16
+    })
+  }));
+});

package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldTypes.styled.js

@@ -0,0 +1,57 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css } from 'styled-components';
+import { Autocomplete as SfxAutocomplete, Button as SfxButton } from '@scaleflex/ui/core';
+import { FV, PC } from '../../Typography';
+var TimeFramesPopperContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 12px;\n"])));
+var TimeFramesTitle = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (_ref) {
+  var typography = _ref.theme.typography;
+  return typography.font[FV.LabelMediumEmphasis];
+});
+var TimeFramesWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  display: ", ";\n  grid-template-columns: ", ";\n  grid-auto-rows: max-content;\n  gap: 12px;\n"])), function (_ref2) {
+  var typography = _ref2.theme.typography;
+  return typography.font[FV.LabelMediumEmphasis];
+}, function (_ref3) {
+  var hidden = _ref3.hidden;
+  return hidden ? 'none' : 'grid';
+}, function (_ref4) {
+  var _ref4$col = _ref4.col,
+    col = _ref4$col === void 0 ? 2 : _ref4$col;
+  return "repeat(".concat(col, ", 1fr)");
+});
+var TimeFrameSelectFieldWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+var TimeFrameSelectField = styled(SfxButton)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: 32px;\n\n  color: ", ";\n  > span {\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n  }\n"])), function (_ref5) {
+  var _ref5$width = _ref5.width,
+    width = _ref5$width === void 0 ? 352 : _ref5$width;
+  return isNaN(width) ? width : "".concat(width, "px");
+}, function (_ref6) {
+  var theme = _ref6.theme;
+  return theme.palette[PC.TextPrimary];
+});
+var SelectMenuItemLabelWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  white-space: pre-wrap;\n"])));
+var Autocomplete = styled(SfxAutocomplete)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  .SfxTag-Label {\n    white-space: break-spaces;\n    overflow: unset;\n    text-overflow: unset;\n    display: block;\n  }\n\n  .SfxInput-root {\n    &:hover {\n      .SfxInput-ClearIcon {\n        display: flex;\n      }\n    }\n  }\n\n  ", "\n\n  // TODO: Added as tmp solution to sync multi-select field size with other fields height for filters case only. Styles should be improved (on An to discuss with designers).\n  ", "\n"])), function (_ref7) {
+  var showClearIcon = _ref7.showClearIcon;
+  return showClearIcon && css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    .SfxInput-ClearIcon {\n      display: none;\n      justify-content: center;\n      align-items: center;\n      cursor: pointer;\n      border-radius: 4px;\n      padding: 6px;\n      height: 24px;\n      color: ", ";\n      background: transparent;\n      border: none;\n      transition: all 100ms ease-out;\n\n      svg {\n        width: 12px;\n        height: 12px;\n      }\n\n      &:hover {\n        background-color: ", ";\n\n        svg {\n          color: ", ";\n        }\n      }\n    }\n  "])), function (_ref8) {
+    var theme = _ref8.theme;
+    return theme.palette[PC.IconsSecondary];
+  }, function (_ref9) {
+    var theme = _ref9.theme;
+    return theme.palette[PC.BackgroundHover];
+  }, function (_ref10) {
+    var theme = _ref10.theme;
+    return theme.palette[PC.IconsPrimary];
+  });
+}, function (_ref11) {
+  var smallPaddings = _ref11.smallPaddings;
+  return smallPaddings && "\n    .SfxInput-root {\n      min-height: 32px;\n      padding: 4px 8px;\n\n      .SfxTag-root {\n        padding: 2px 12px;\n      }\n    }\n  ";
+});
+var Styled = {
+  SelectMenuItemLabelWrapper: SelectMenuItemLabelWrapper,
+  TimeFramesPopperContent: TimeFramesPopperContent,
+  TimeFramesWrapper: TimeFramesWrapper,
+  TimeFramesTitle: TimeFramesTitle,
+  TimeFrameSelectFieldWrapper: TimeFrameSelectFieldWrapper,
+  TimeFrameSelectField: TimeFrameSelectField,
+  Autocomplete: Autocomplete
+};
+export default Styled;

package/lib/MetaData/MetaDataFieldTypes/MetadataAttachmentsFieldType/AttachmentsAssetsMetadataAccordion.styled.js

@@ -0,0 +1,95 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { css } from 'styled-components';
+import { Accordion, Label as SfxLabel, IconButton as SfxIconButton, Menu as SfxMenu, MenuItem as SfxMenuItem, MenuItemIcon as SfxMenuItemIcon } from '@scaleflex/ui/core';
+import { FV, PC } from '@scaleflex/widget-common';
+var AddBtnWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  height: 32px;\n\n  svg, button svg {\n    color: ", ";\n  }\n\n  .SfxButton-StartIcon {\n    margin-right: 4px;\n  }\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.AccentStateless];
+});
+var AssetsInfoWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  row-gap: 16px;\n  margin: 8px 0;\n  width: 100%;\n"])));
+var AssetsInfoContent = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  column-gap: 12px;\n  align-items: center;\n  padding: 8px;\n  border-radius: 4px;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return palette[PC.BackgroundHover];
+});
+var AssetsInfo = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  row-gap: 2px;\n"])));
+var ImageWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: 70px;\n  height: 52px;\n  flex-shrink: 0;\n  border-radius: 2px;\n  border: 1px solid ", ";\n  overflow: hidden;\n\n  img {\n    max-width: 100%;\n    max-height: 100%;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n"])), function (_ref3) {
+  var palette = _ref3.theme.palette;
+  return palette[PC.BordersItem];
+});
+var AssetsInfoTitle = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral([""])));
+var Label = styled(SfxLabel)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 16px;\n"])), function (_ref4) {
+  var theme = _ref4.theme,
+    isValue = _ref4.isValue;
+  return isValue && theme.palette[PC.TextPrimary];
+});
+var FileSizeWrapper = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  column-gap: 6px;\n  height: 20px;\n"])));
+var Multiplier = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin: 0 4px;\n"])));
+var DeleteModalFileName = styled.span(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  ", "\n  color: ", ";\n"])), function (_ref5) {
+  var font = _ref5.theme.typography.font;
+  return font[FV.LabelLargeEmphasis];
+}, function (_ref6) {
+  var palette = _ref6.theme.palette;
+  return palette[PC.TextPrimary];
+});
+var IconButton = styled(SfxIconButton)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  width: 32px;\n  height: 32px;\n  padding: 9px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: auto;\n\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (_ref7) {
+  var palette = _ref7.theme.palette;
+  return palette[PC.BordersSecondary];
+});
+var Menu = styled(SfxMenu)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  padding: 8px;\n  background-color: ", ";\n"])), function (_ref8) {
+  var palette = _ref8.theme.palette;
+  return palette[PC.BackgroundStateless];
+});
+var MenuItem = styled(SfxMenuItem)(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  padding: 8px 12px;\n\n  ", "\n"])), function (_ref9) {
+  var danger = _ref9.danger;
+  return danger && css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n\n      svg path {\n        fill: ", ";\n      }\n    }\n  "])), function (_ref10) {
+    var palette = _ref10.theme.palette;
+    return palette[PC.Red_0_1_Overlay];
+  }, function (_ref11) {
+    var palette = _ref11.theme.palette;
+    return palette[PC.ErrorHover];
+  }, function (_ref12) {
+    var palette = _ref12.theme.palette;
+    return palette[PC.ErrorHover];
+  });
+});
+var MenuItemIcon = styled(SfxMenuItemIcon)(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var InnerAccordion = styled(Accordion)(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  ", "\n\n  .SfxAccordionDetails-root {\n    margin: 0;\n  }\n\n  .SfxAccordionHeader-root {\n    height: 32px;\n  }\n\n  .SfxAccordionHeader-label {\n    color: ", " !important;\n    ", "\n    \n    ", "\n  }\n\n  .SfxAccordionHeader-icon {\n    padding-left: 6px;\n    color: ", ";\n  }\n"])), function (_ref13) {
+  var noAccordionContent = _ref13.noAccordionContent;
+  return noAccordionContent && css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n    .SfxArrowTick-root {\n      display: none;\n    }\n  "])));
+}, function (_ref14) {
+  var palette = _ref14.theme.palette;
+  return palette[PC.TextSecondary];
+}, function (_ref15) {
+  var font = _ref15.theme.typography.font;
+  return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n      font-size: ", " !important;\n      font-weight: ", " !important;\n      line-height: ", " !important;\n    "])), font[FV.LabelMedium].fontSize, font[FV.LabelMedium].fontWeight, font[FV.LabelMedium].lineHeight);
+}, function (_ref16) {
+  var smallerFont = _ref16.smallerFont;
+  return smallerFont && css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      ", "\n    "])), function (_ref17) {
+    var font = _ref17.theme.typography.font;
+    return font[FV.TextSmall];
+  });
+}, function (_ref18) {
+  var palette = _ref18.theme.palette;
+  return palette[PC.IconsPrimary];
+});
+var ContentWrapper = styled.span(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n  border-bottom: none;\n  width: 100%;\n\n  .SfxAccordion-root:not(:last-child) {\n    margin-bottom: 4px;\n  }\n"])));
+var Styled = {
+  AddBtnWrapper: AddBtnWrapper,
+  AssetsInfoWrapper: AssetsInfoWrapper,
+  AssetsInfoContent: AssetsInfoContent,
+  AssetsInfo: AssetsInfo,
+  ImageWrapper: ImageWrapper,
+  AssetsInfoTitle: AssetsInfoTitle,
+  Label: Label,
+  ContentWrapper: ContentWrapper,
+  InnerAccordion: InnerAccordion,
+  IconButton: IconButton,
+  Menu: Menu,
+  DeleteModalFileName: DeleteModalFileName,
+  MenuItem: MenuItem,
+  Multiplier: Multiplier,
+  MenuItemIcon: MenuItemIcon,
+  FileSizeWrapper: FileSizeWrapper
+};
+export default Styled;