@bigbinary/neeto-themes-frontend 1.1.19 → 1.1.21

package/dist/index.js

@@ -5,7 +5,7 @@ import i18next, { t as t$6 } from 'i18next';
 import { withImmutableActions, useMutationWithInvalidation, useDebounce, useFuncDebounce, withT, withTitle } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Spinner$1 from '@bigbinary/neetoui/Spinner';
 import { create as create$3 } from 'zustand';
-import { isNotPresent, snakeToCamelCase, filterBy, isPresent, isNot, findBy, noop as noop$3, keysToCamelCase, findIndexBy, humanize, isNotEmpty } from '@bigbinary/neeto-cist';
+import { isNotPresent, snakeToCamelCase, filterBy, isPresent, isNot, findBy, noop as noop$3, keysToCamelCase, findIndexBy, toLabelAndValue, humanize, isNotEmpty } from '@bigbinary/neeto-cist';
 import Alert from '@bigbinary/neetoui/Alert';
 import { useTranslation, Trans } from 'react-i18next';
 import '@bigbinary/neetoui/Toastr';
@@ -26,7 +26,7 @@ import { withEventTargetValue, joinHyphenCase } from '@bigbinary/neeto-commons-f
 import ColorPicker from '@bigbinary/neetoui/ColorPicker';
 import Select from '@bigbinary/neetoui/Select';
 import ReactDOM, { createPortal } from 'react-dom';
-import Switch$1 from '@bigbinary/neetoui/formik/Switch';
+import Switch$1 from '@bigbinary/neetoui/Switch';
 import Input$1 from '@bigbinary/neetoui/formik/Input';
 import Search from '@bigbinary/neeto-molecules/Search';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
@@ -625,6 +625,7 @@ var useThemeUtils = function useThemeUtils() {
   var root = document.querySelector(":root");
   var setVariable = function setVariable(name, value) {
     var variableName = variableNamesMap[name];
+    if (!variableName) return;
     root.style.setProperty(variableName, value);
   };
   var setTheme = function setTheme(theme) {
@@ -654,7 +655,8 @@ var useThemeUtils = function useThemeUtils() {
     setTheme: setTheme,
     setVariable: setVariable,
     previewingTheme: previewingTheme,
-    currentTheme: currentTheme
+    currentTheme: currentTheme,
+    isFetchingConfig: isFetchingConfig
   };
 };
 
@@ -699,6 +701,13 @@ function _defineProperty$9(obj, key, value) {
   return obj;
 }
 
+var POSITION_OPTIONS = [{
+  label: "Left",
+  value: "left"
+}, {
+  label: "Right",
+  value: "right"
+}];
 var FONT_OPTIONS = [{
   label: "System UI",
   value: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
@@ -803,10 +812,16 @@ var buildInitialValues = function buildInitialValues(theme, themeConfig) {
           };
         case "boolean":
           return {
-            value: false,
+            value: String(defaultValue),
             kind: "boolean",
             key: key
           };
+        case "position_selector":
+          return {
+            value: defaultValue,
+            kind: "position_selector",
+            key: key
+          };
         default:
           return null;
       }
@@ -2768,9 +2783,9 @@ function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) {
 
 function _defineProperty$1$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _objectWithoutProperties$1$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$5(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutProperties$1$1(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$6(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
-function _objectWithoutPropertiesLoose$5(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _objectWithoutPropertiesLoose$6(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /**
  * Convenience wrapper component for the `useDropzone` hook
  *
@@ -3849,7 +3864,7 @@ var ImagePlaceholder = function ImagePlaceholder(_ref) {
 
 var _excluded$3$1 = ["src", "className", "fallback"];
 function ownKeys$3$1(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3$1(Object(t), !0).forEach(function (r) { _defineProperty$3$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$2$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3$1(Object(t), !0).forEach(function (r) { _defineProperty$3$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ImageWithFallback = function ImageWithFallback(_ref) {
   var src = _ref.src,
     _ref$className = _ref.className,
@@ -3868,11 +3883,11 @@ var ImageWithFallback = function ImageWithFallback(_ref) {
     };
     img.src = src;
   }, [src]);
-  return isLoaded ? /*#__PURE__*/React__default.createElement("img", _extends$1$1({}, _objectSpread$2({
+  return isLoaded ? /*#__PURE__*/React__default.createElement("img", _extends$1$1({}, _objectSpread$2$1({
     src: src
   }, props), {
     className: "h-full w-auto object-contain"
-  })) : /*#__PURE__*/React__default.createElement(Fallback, _objectSpread$2({
+  })) : /*#__PURE__*/React__default.createElement(Fallback, _objectSpread$2$1({
     className: className
   }, props));
 };
@@ -4609,8 +4624,8 @@ var ASSETS_STALE_TIME = 900000; // 15 mins
 
 var UNSPLASH_STALE_TIME = 900000;
 
-function ownKeys$a(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty$3$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$b(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty$3$1(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useCreateBlob = function useCreateBlob(options) {
   return useMutationWithInvalidation(directUploadsApi.create, _objectSpread$5({
     keysToInvalidate: [QUERY_KEYS.ASSETS_LIST]
@@ -6161,7 +6176,7 @@ var _reactInfiniteScroller2 = _interopRequireDefault(_reactInfiniteScroller);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties$5(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+function _objectWithoutProperties$6(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
 function _classCallCheck$4(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -6265,7 +6280,7 @@ var MasonryInfiniteScroller = (_temp2 = _class = function (_Component) {
           _props.packed;
           _props.position;
           _props.sizes;
-          var props = _objectWithoutProperties$5(_props, ['children', 'className', 'style', 'pack', 'packed', 'position', 'sizes']);
+          var props = _objectWithoutProperties$6(_props, ['children', 'className', 'style', 'pack', 'packed', 'position', 'sizes']);
 
       return _react2.default.createElement(
         _reactInfiniteScroller2.default,
@@ -6837,7 +6852,7 @@ var Modal = function Modal(_ref) {
   })))), /*#__PURE__*/React__default.createElement("input", getInputProps()));
 };
 
-var _excluded$7 = ["key", "label"];
+var _excluded$8 = ["key", "label"];
 var Menu = Dropdown.Menu,
   MenuItem = Dropdown.MenuItem;
 var ImageUploader = function ImageUploader(_ref) {
@@ -6957,7 +6972,7 @@ var ImageUploader = function ImageUploader(_ref) {
   }, /*#__PURE__*/React__default.createElement(Menu, null, options.map(function (_ref2) {
     var key = _ref2.key,
       label = _ref2.label,
-      otherProps = _objectWithoutProperties$2$1(_ref2, _excluded$7);
+      otherProps = _objectWithoutProperties$2$1(_ref2, _excluded$8);
     return /*#__PURE__*/React__default.createElement(MenuItem.Button, _extends$1$1({}, otherProps, {
       key: key
     }), label);
@@ -7068,8 +7083,8 @@ var ColorBlock = function ColorBlock(_ref) {
   });
 };
 
-function ownKeys$9(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty$9(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$a(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$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty$9(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FontPickerBlock = function FontPickerBlock(_ref) {
   var label = _ref.label,
     _ref$placeholder = _ref.placeholder,
@@ -7095,7 +7110,7 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
         styles: {
           option: function option(styles, _ref2) {
             var data = _ref2.data;
-            return _objectSpread$1(_objectSpread$1({}, styles), {}, {
+            return _objectSpread$2(_objectSpread$2({}, styles), {}, {
               fontFamily: data.value
             });
           }
@@ -7105,6 +7120,32 @@ var FontPickerBlock = function FontPickerBlock(_ref) {
   });
 };
 
+var SelectBlock = function SelectBlock(_ref) {
+  var label = _ref.label,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
+    value = _ref.value,
+    options = _ref.options,
+    onChange = _ref.onChange;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
+    "data-cy": "theme-style-".concat(joinHyphenCase(label)),
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-cy": "logo-field-labels",
+      style: "body2",
+      children: label
+    }), /*#__PURE__*/jsx("div", {
+      className: "w-40",
+      children: /*#__PURE__*/jsx(Select, {
+        onChange: onChange,
+        options: options,
+        placeholder: placeholder,
+        value: value
+      })
+    })]
+  });
+};
+
 function _extends$6() {
   _extends$6 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -7211,7 +7252,7 @@ function _defineProperty$7(obj, key, value) {
   return obj;
 }
 
-function ownKeys$8(object, enumerableOnly) {
+function ownKeys$9(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -7224,9 +7265,9 @@ function ownKeys$8(object, enumerableOnly) {
 function _objectSpread2$7(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) {
+    i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) {
       _defineProperty$7(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -8489,7 +8530,7 @@ function _toConsumableArray$3(arr) {
   return _arrayWithoutHoles$3(arr) || _iterableToArray$3(arr) || _unsupportedIterableToArray$6(arr) || _nonIterableSpread$3();
 }
 
-function ownKeys$7(object, enumerableOnly) {
+function ownKeys$8(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -8502,9 +8543,9 @@ function ownKeys$7(object, enumerableOnly) {
 function _objectSpread2$6(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) {
+    i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) {
       _defineProperty$6(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -13818,7 +13859,7 @@ function supportRef$3(nodeOrComponent) {
 }
 /* eslint-enable */
 
-function _objectWithoutPropertiesLoose$4(source, excluded) {
+function _objectWithoutPropertiesLoose$5(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -13831,9 +13872,9 @@ function _objectWithoutPropertiesLoose$4(source, excluded) {
   return target;
 }
 
-function _objectWithoutProperties$4(source, excluded) {
+function _objectWithoutProperties$5(source, excluded) {
   if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose$4(source, excluded);
+  var target = _objectWithoutPropertiesLoose$5(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -13847,11 +13888,11 @@ function _objectWithoutProperties$4(source, excluded) {
   return target;
 }
 
-var _excluded$6 = ["children"];
+var _excluded$7 = ["children"];
 var Context$1 = /*#__PURE__*/React.createContext({});
 function MotionProvider(_ref) {
   var children = _ref.children,
-    props = _objectWithoutProperties$4(_ref, _excluded$6);
+    props = _objectWithoutProperties$5(_ref, _excluded$7);
   return /*#__PURE__*/React.createElement(Context$1.Provider, {
     value: props
   }, children);
@@ -14612,7 +14653,7 @@ function diffKeys$1() {
   return list;
 }
 
-var _excluded$5 = ["component", "children", "onVisibleChanged", "onAllRemoved"],
+var _excluded$6 = ["component", "children", "onVisibleChanged", "onAllRemoved"],
   _excluded2$1 = ["status"];
 var MOTION_PROP_NAMES$1 = ['eventProps', 'visible', 'children', 'motionName', 'motionAppear', 'motionEnter', 'motionLeave', 'motionLeaveImmediately', 'motionDeadline', 'removeOnLeave', 'leavedClassName', 'onAppearPrepare', 'onAppearStart', 'onAppearActive', 'onAppearEnd', 'onEnterStart', 'onEnterActive', 'onEnterEnd', 'onLeaveStart', 'onLeaveActive', 'onLeaveEnd'];
 /**
@@ -14664,7 +14705,7 @@ function genCSSMotionList$1(transitionSupport) {
           children = _this$props.children,
           _onVisibleChanged = _this$props.onVisibleChanged,
           onAllRemoved = _this$props.onAllRemoved,
-          restProps = _objectWithoutProperties$4(_this$props, _excluded$5);
+          restProps = _objectWithoutProperties$5(_this$props, _excluded$6);
         var Component = component || React.Fragment;
         var motionProps = {};
         MOTION_PROP_NAMES$1.forEach(function (prop) {
@@ -14674,7 +14715,7 @@ function genCSSMotionList$1(transitionSupport) {
         delete restProps.keys;
         return /*#__PURE__*/React.createElement(Component, restProps, keyEntities.map(function (_ref2, index) {
           var status = _ref2.status,
-            eventProps = _objectWithoutProperties$4(_ref2, _excluded2$1);
+            eventProps = _objectWithoutProperties$5(_ref2, _excluded2$1);
           var visible = status === STATUS_ADD$1 || status === STATUS_KEEP$1;
           return /*#__PURE__*/React.createElement(CSSMotion, _extends$6({}, motionProps, {
             key: eventProps.key,
@@ -16342,7 +16383,7 @@ function _defineProperty$5(obj, key, value) {
   return obj;
 }
 
-function ownKeys$6(object, enumerableOnly) {
+function ownKeys$7(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -16355,9 +16396,9 @@ function ownKeys$6(object, enumerableOnly) {
 function _objectSpread2$5(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) {
+    i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) {
       _defineProperty$5(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -16462,7 +16503,7 @@ function supportRef$1(nodeOrComponent) {
 }
 /* eslint-enable */
 
-function _objectWithoutPropertiesLoose$3(source, excluded) {
+function _objectWithoutPropertiesLoose$4(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -16475,9 +16516,9 @@ function _objectWithoutPropertiesLoose$3(source, excluded) {
   return target;
 }
 
-function _objectWithoutProperties$3(source, excluded) {
+function _objectWithoutProperties$4(source, excluded) {
   if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose$3(source, excluded);
+  var target = _objectWithoutPropertiesLoose$4(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -17362,7 +17403,7 @@ function diffKeys() {
   return list;
 }
 
-var _excluded$4 = ["component", "children", "onVisibleChanged", "onAllRemoved"],
+var _excluded$5 = ["component", "children", "onVisibleChanged", "onAllRemoved"],
   _excluded2 = ["status"];
 var MOTION_PROP_NAMES = ['eventProps', 'visible', 'children', 'motionName', 'motionAppear', 'motionEnter', 'motionLeave', 'motionLeaveImmediately', 'motionDeadline', 'removeOnLeave', 'leavedClassName', 'onAppearStart', 'onAppearActive', 'onAppearEnd', 'onEnterStart', 'onEnterActive', 'onEnterEnd', 'onLeaveStart', 'onLeaveActive', 'onLeaveEnd'];
 /**
@@ -17413,7 +17454,7 @@ function genCSSMotionList(transitionSupport) {
           children = _this$props.children,
           _onVisibleChanged = _this$props.onVisibleChanged,
           onAllRemoved = _this$props.onAllRemoved,
-          restProps = _objectWithoutProperties$3(_this$props, _excluded$4);
+          restProps = _objectWithoutProperties$4(_this$props, _excluded$5);
         var Component = component || React.Fragment;
         var motionProps = {};
         MOTION_PROP_NAMES.forEach(function (prop) {
@@ -17423,7 +17464,7 @@ function genCSSMotionList(transitionSupport) {
         delete restProps.keys;
         return /*#__PURE__*/React.createElement(Component, restProps, keyEntities.map(function (_ref2) {
           var status = _ref2.status,
-            eventProps = _objectWithoutProperties$3(_ref2, _excluded2);
+            eventProps = _objectWithoutProperties$4(_ref2, _excluded2);
           var visible = status === STATUS_ADD || status === STATUS_KEEP;
           return /*#__PURE__*/React.createElement(CSSMotion$1, _extends$4({}, motionProps, {
             key: eventProps.key,
@@ -17870,7 +17911,7 @@ function _defineProperty$4(obj, key, value) {
   return obj;
 }
 
-function ownKeys$5(e, r) {
+function ownKeys$6(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
     var o = Object.getOwnPropertySymbols(e);
@@ -17883,9 +17924,9 @@ function ownKeys$5(e, r) {
 function _objectSpread2$4(e) {
   for (var r = 1; r < arguments.length; r++) {
     var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) {
+    r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) {
       _defineProperty$4(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) {
       Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
@@ -17947,7 +17988,7 @@ function _slicedToArray$2(arr, i) {
   return _arrayWithHoles$2(arr) || _iterableToArrayLimit$2(arr, i) || _unsupportedIterableToArray$2(arr, i) || _nonIterableRest$2();
 }
 
-function _objectWithoutPropertiesLoose$2(source, excluded) {
+function _objectWithoutPropertiesLoose$3(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -17960,9 +18001,9 @@ function _objectWithoutPropertiesLoose$2(source, excluded) {
   return target;
 }
 
-function _objectWithoutProperties$2(source, excluded) {
+function _objectWithoutProperties$3(source, excluded) {
   if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose$2(source, excluded);
+  var target = _objectWithoutPropertiesLoose$3(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -18075,7 +18116,7 @@ function _defineProperty$3(obj, key, value) {
   return obj;
 }
 
-function ownKeys$4(object, enumerableOnly) {
+function ownKeys$5(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -18088,9 +18129,9 @@ function ownKeys$4(object, enumerableOnly) {
 function _objectSpread2$3(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) {
+    i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) {
       _defineProperty$3(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -18611,7 +18652,7 @@ function _defineProperty$2(obj, key, value) {
   return obj;
 }
 
-function ownKeys$3(object, enumerableOnly) {
+function ownKeys$4(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -18624,9 +18665,9 @@ function ownKeys$3(object, enumerableOnly) {
 function _objectSpread2$2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) {
+    i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) {
       _defineProperty$2(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -19881,7 +19922,7 @@ function useWinClick(open, clickToHide, targetEle, popupEle, mask, maskClosable,
   }, [clickToHide, targetEle, popupEle, mask, maskClosable]);
 }
 
-var _excluded$3 = ["prefixCls", "children", "action", "showAction", "hideAction", "popupVisible", "defaultPopupVisible", "onPopupVisibleChange", "afterPopupVisibleChange", "mouseEnterDelay", "mouseLeaveDelay", "focusDelay", "blurDelay", "mask", "maskClosable", "getPopupContainer", "forceRender", "autoDestroy", "destroyPopupOnHide", "popup", "popupClassName", "popupStyle", "popupPlacement", "builtinPlacements", "popupAlign", "zIndex", "stretch", "getPopupClassNameFromAlign", "fresh", "alignPoint", "onPopupClick", "onPopupAlign", "arrow", "popupMotion", "maskMotion", "popupTransitionName", "popupAnimation", "maskTransitionName", "maskAnimation", "className", "getTriggerDOMNode"];
+var _excluded$4 = ["prefixCls", "children", "action", "showAction", "hideAction", "popupVisible", "defaultPopupVisible", "onPopupVisibleChange", "afterPopupVisibleChange", "mouseEnterDelay", "mouseLeaveDelay", "focusDelay", "blurDelay", "mask", "maskClosable", "getPopupContainer", "forceRender", "autoDestroy", "destroyPopupOnHide", "popup", "popupClassName", "popupStyle", "popupPlacement", "builtinPlacements", "popupAlign", "zIndex", "stretch", "getPopupClassNameFromAlign", "fresh", "alignPoint", "onPopupClick", "onPopupAlign", "arrow", "popupMotion", "maskMotion", "popupTransitionName", "popupAnimation", "maskTransitionName", "maskAnimation", "className", "getTriggerDOMNode"];
 
 // Removed Props List
 // Seems this can be auto
@@ -19936,7 +19977,7 @@ function generateTrigger() {
       maskAnimation = props.maskAnimation,
       className = props.className,
       getTriggerDOMNode = props.getTriggerDOMNode,
-      restProps = _objectWithoutProperties$2(props, _excluded$3);
+      restProps = _objectWithoutProperties$3(props, _excluded$4);
     var mergedAutoDestroy = autoDestroy || destroyPopupOnHide || false;
 
     // =========================== Mobile ===========================
@@ -20461,7 +20502,7 @@ function _defineProperty$1(obj, key, value) {
   return obj;
 }
 
-function ownKeys$2(object, enumerableOnly) {
+function ownKeys$3(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -20474,16 +20515,16 @@ function ownKeys$2(object, enumerableOnly) {
 function _objectSpread2$1(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) {
+    i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) {
       _defineProperty$1(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
   return target;
 }
 
-function _objectWithoutPropertiesLoose$1(source, excluded) {
+function _objectWithoutPropertiesLoose$2(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -20496,9 +20537,9 @@ function _objectWithoutPropertiesLoose$1(source, excluded) {
   return target;
 }
 
-function _objectWithoutProperties$1(source, excluded) {
+function _objectWithoutProperties$2(source, excluded) {
   if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose$1(source, excluded);
+  var target = _objectWithoutPropertiesLoose$2(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -20596,7 +20637,7 @@ var placements = {
   }
 };
 
-var _excluded$2 = ["overlayClassName", "trigger", "mouseEnterDelay", "mouseLeaveDelay", "overlayStyle", "prefixCls", "children", "onVisibleChange", "afterVisibleChange", "transitionName", "animation", "motion", "placement", "align", "destroyTooltipOnHide", "defaultVisible", "getTooltipContainer", "overlayInnerStyle", "arrowContent", "overlay", "id", "showArrow"];
+var _excluded$3 = ["overlayClassName", "trigger", "mouseEnterDelay", "mouseLeaveDelay", "overlayStyle", "prefixCls", "children", "onVisibleChange", "afterVisibleChange", "transitionName", "animation", "motion", "placement", "align", "destroyTooltipOnHide", "defaultVisible", "getTooltipContainer", "overlayInnerStyle", "arrowContent", "overlay", "id", "showArrow"];
 var Tooltip$2 = function Tooltip(props, ref) {
   var overlayClassName = props.overlayClassName,
     _props$trigger = props.trigger,
@@ -20628,7 +20669,7 @@ var Tooltip$2 = function Tooltip(props, ref) {
     id = props.id,
     _props$showArrow = props.showArrow,
     showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
-    restProps = _objectWithoutProperties$1(props, _excluded$2);
+    restProps = _objectWithoutProperties$2(props, _excluded$3);
   var triggerRef = useRef(null);
   useImperativeHandle(ref, function () {
     return triggerRef.current;
@@ -21431,7 +21472,7 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
-function ownKeys$1(object, enumerableOnly) {
+function ownKeys$2(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
     var symbols = Object.getOwnPropertySymbols(object);
@@ -21444,9 +21485,9 @@ function ownKeys$1(object, enumerableOnly) {
 function _objectSpread2(target) {
   for (var i = 1; i < arguments.length; i++) {
     var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) {
+    i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) {
       _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) {
       Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
     });
   }
@@ -21552,7 +21593,7 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
+function _objectWithoutPropertiesLoose$1(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -21565,9 +21606,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-function _objectWithoutProperties(source, excluded) {
+function _objectWithoutProperties$1(source, excluded) {
   if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var target = _objectWithoutPropertiesLoose$1(source, excluded);
   var key, i;
   if (Object.getOwnPropertySymbols) {
     var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
@@ -21613,7 +21654,7 @@ function getIndex(value, index) {
   return Array.isArray(value) ? value[index] : value;
 }
 
-var _excluded$1 = ["prefixCls", "value", "valueIndex", "onStartMove", "style", "render", "dragging", "onOffsetChange"];
+var _excluded$2 = ["prefixCls", "value", "valueIndex", "onStartMove", "style", "render", "dragging", "onOffsetChange"];
 var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _cls, _getIndex;
   var prefixCls = props.prefixCls,
@@ -21624,7 +21665,7 @@ var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     render = props.render,
     dragging = props.dragging,
     onOffsetChange = props.onOffsetChange,
-    restProps = _objectWithoutProperties(props, _excluded$1);
+    restProps = _objectWithoutProperties$1(props, _excluded$2);
   var _React$useContext = React.useContext(SliderContext),
     min = _React$useContext.min,
     max = _React$useContext.max,
@@ -21725,7 +21766,7 @@ var Handle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return handleNode;
 });
 
-var _excluded = ["prefixCls", "style", "onStartMove", "onOffsetChange", "values", "handleRender", "draggingIndex"];
+var _excluded$1 = ["prefixCls", "style", "onStartMove", "onOffsetChange", "values", "handleRender", "draggingIndex"];
 var Handles = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var prefixCls = props.prefixCls,
     style = props.style,
@@ -21734,7 +21775,7 @@ var Handles = /*#__PURE__*/React.forwardRef(function (props, ref) {
     values = props.values,
     handleRender = props.handleRender,
     draggingIndex = props.draggingIndex,
-    restProps = _objectWithoutProperties(props, _excluded);
+    restProps = _objectWithoutProperties$1(props, _excluded$1);
   var handlesRef = React.useRef({});
   React.useImperativeHandle(ref, function () {
     return {
@@ -23252,7 +23293,7 @@ var Slider$1 = Slider;
 var SliderBlock = function SliderBlock(_ref) {
   var label = _ref.label,
     onChange = _ref.onChange,
-    defaultValue = _ref.defaultValue,
+    value = _ref.value,
     min = _ref.min,
     max = _ref.max,
     marks = _ref.marks;
@@ -23264,11 +23305,11 @@ var SliderBlock = function SliderBlock(_ref) {
       style: "body2",
       children: label
     }), /*#__PURE__*/jsx(Slider$1, {
-      defaultValue: defaultValue,
       marks: marks,
       max: max,
       min: min,
       onChange: onChange,
+      value: value,
       className: "my-2 w-20",
       tooltip: {
         formatter: null
@@ -23277,17 +23318,50 @@ var SliderBlock = function SliderBlock(_ref) {
   });
 };
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
+var _excluded = ["label", "name"];
+function ownKeys$1(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$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty$9(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SwitchBlock = function SwitchBlock(_ref) {
   var label = _ref.label,
-    name = _ref.name;
+    name = _ref.name,
+    switchProps = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxs("div", {
     className: "flex items-center justify-between py-3 first:pt-0 last:pb-0",
     children: [/*#__PURE__*/jsx(Typography, {
       style: "body2",
       children: label
-    }), /*#__PURE__*/jsx(Switch$1, {
+    }), /*#__PURE__*/jsx(Switch$1, _objectSpread$1({}, _objectSpread$1({
       name: name
-    })]
+    }, switchProps)))]
   });
 };
 
@@ -23327,8 +23401,12 @@ var Properties = function Properties() {
     setVariable(snakeToCamelCase(name), variableValue !== null && variableValue !== void 0 ? variableValue : value);
   };
   var handleOverlayChange = function handleOverlayChange(key, value) {
+    var index = findIndexBy({
+      key: key
+    }, values.properties);
     var overlayColorVariable = "".concat(key, "_overlay_color");
-    handleChange("".concat(key, "_overlay_opacity"), value, Math.abs(value / 100));
+    setFieldValue("properties[".concat(index, "].value"), value);
+    setVariable("".concat(key, "_overlay_opacity"), Math.abs(value / 100));
     if (value < 0) {
       handleChange(overlayColorVariable, "#000000", "0, 0, 0");
     } else {
@@ -23382,26 +23460,52 @@ var Properties = function Properties() {
           value = _ref5.value,
           kind = _ref5.kind;
         return isPropertyVisible(key, values, themeConfig) && /*#__PURE__*/jsx(SliderBlock, {
-          defaultValue: Number(value) || 0,
           label: buildLabel(key, kind),
           marks: OVERLAY_OPACITY_SLIDER_MARKS,
           max: HUNDRED,
           min: negate(HUNDRED),
+          value: Number(value) || 0,
           onChange: function onChange(opacity) {
             return handleOverlayChange(key, opacity);
           }
         }, key);
       }), filterBy({
-        kind: "boolean"
+        kind: "position_selector"
       }, values.properties).map(function (_ref6) {
+        var _findBy;
         var key = _ref6.key,
-          kind = _ref6.kind;
+          kind = _ref6.kind,
+          value = _ref6.value;
         var index = findIndexBy({
           key: key
         }, values.properties);
-        return /*#__PURE__*/jsx(SwitchBlock, {
+        var options = (_findBy = findBy({
+          key: key
+        }, themeConfig)) === null || _findBy === void 0 || (_findBy = _findBy.options) === null || _findBy === void 0 ? void 0 : _findBy.map(toLabelAndValue);
+        return isPropertyVisible(key, values, themeConfig) && /*#__PURE__*/jsx(SelectBlock, {
           label: buildLabel(key, kind),
-          name: "properties[".concat(index, "].value")
+          options: options || POSITION_OPTIONS,
+          placeholder: "left",
+          value: toLabelAndValue(value),
+          onChange: function onChange(option) {
+            return setFieldValue("properties[".concat(index, "].value"), option.value);
+          }
+        }, key);
+      }), filterBy({
+        kind: "boolean"
+      }, values.properties).map(function (_ref7) {
+        var key = _ref7.key,
+          kind = _ref7.kind,
+          value = _ref7.value;
+        var index = findIndexBy({
+          key: key
+        }, values.properties);
+        return isPropertyVisible(key, values, themeConfig) && /*#__PURE__*/jsx(SwitchBlock, {
+          checked: value !== "false",
+          label: buildLabel(key, kind),
+          onChange: function onChange(e) {
+            return setFieldValue("properties[".concat(index, "].value"), String(e.target.checked));
+          }
         }, key);
       })]
     })