@wix/patterns 1.397.0 → 1.399.0

package/dist/cjs/components/ActionCell/ActionCell.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../../src/components/ActionCell/ActionCell.ts"],"sourcesContent":["import {\n  TableActionCellMainAction as TableActionCellMainActionWds,\n  TableActionCellPrimaryAction as TableActionCellPrimaryActionWds,\n  TableActionCellProps,\n  TableActionCellSecondaryAction,\n  TableActionCellSecondaryDivider,\n} from '@wix/design-system';\nimport { FiltersMap } from '@wix/bex-core';\nimport { ActionCellAPI as ActionCellAPIType } from '../../state';\n\nexport type SecondaryActionAction = TableActionCellSecondaryAction & {\n  biName?: string;\n  componentId?: string;\n  appId?: string;\n  divider?: false;\n};\n\nexport type SecondaryAction =\n  | SecondaryActionAction\n  | TableActionCellSecondaryDivider;\n\nexport type ActionCellAPI<T, F extends FiltersMap> = ActionCellAPIType<T, F>;\nexport type TableActionCellMainAction = TableActionCellMainActionWds & {\n  biName?: string;\n  disabledMessage?: string;\n};\nexport type TableActionCellPrimaryAction = TableActionCellPrimaryActionWds & {\n  biName?: string;\n  disabledMessage?: string;\n};\n\nexport interface ActionCellProps\n  extends Omit<TableActionCellProps, 'primaryAction' | 'secondaryActions'> {\n  /**\n   * Primary call to action for each item in a table. Controls the behavior and appearance of the primary action. <br>\n   * Can be a single action object or an array of actions. When an array is provided, the first action becomes the primary action and the rest are added to secondary actions. <br>\n   * Supported parameters:\n   *  + `disabledMessage`: Message to show when the action is disabled. Relevant only to grid.\n   *  + `text`: Specifies action label.\n   *  + `skin`: Deprecated property that was previously used to control the visual appearance of a button. It has been replaced by the visibility property, which switches skin properties automatically based on visibility options.\n   *  + `onClick`: Defines a callback function which is called on button click.\n   *  + `disabled`: [bool] Whether user interactions are disabled.\n   *  + `prefixIcon`: Icon in front of a button label.\n   *  + `suffixIcon`: Icon after a button label.\n   *  + `as`: Renders button as another component or a DOM tag.\n   *  + `visibility`: Specifies whether the primary action button is visible. When the value is set to `'onHover'`, the button is only visible when the mouse hovers over it, and it appears as a primary button. When the value is set to `'always'`, the button is always visible and appears as a secondary button.\n   * \n   * This prop extends the `primaryAction` prop in Wix Design System's [TableActionCellProp](https://www.docs.wixdesignsystem.com/?path=/story/components-lists-table--tableactioncell) component.   \n\n   * @external\n   */\n  primaryAction?: TableActionCellPrimaryAction | TableActionCellMainAction[];\n  /**\n   * Secondary CTAs for each item in a table. Controls the behavior and appearance of the secondary actions. <br>\n   * Supported parameters:\n   *  + `deleteSecondaryAction:` A function that adds a \"Delete\" action as a secondary action.\n   *  + `text`: Specifies action label to be shown in the tooltip or popover menu.\n   *  + `icon`: Action icon.\n   *  + `onClick`: Defines a callback function which is called on button click.\n   *  + `subtitle`: Action subtitle.\n   *  + `disabled`: [bool] Whether user interactions are disabled.\n   *  + `dataHook`: A data-hook HTML attribute to be used in the tests.\n   *  + `disabledDescription`: [string] Text to display in tooltip when action is visible and disabled.\n   *  + `tooltipProps`: Controls the tooltip appearance.\n   *  + `skin`: Controls the skin of the item.\n   *\n   * OR Divider object containing\n   *  + `divider`: A divider between the action items in popover menu.\n   *\n   * This prop extends the `primaryAction` prop in Wix Design System's [TableActionCellProp](https://www.docs.wixdesignsystem.com/?path=/story/components-lists-table--tableactioncell) component.\n   * @external\n   */\n  secondaryActions?: SecondaryAction[];\n\n  /**\n   * This ID is used to specify the target container for [dashboard menu plugin](./?path=/story/features-enrich-slots-and-plugins--slots-and-plugins) items.\n   */\n  containerId?: string;\n}\n\nexport type ActionCell<T, F extends FiltersMap> =\n  | ActionCellProps\n  | ((item: T, index: number, api: ActionCellAPI<T, F>) => ActionCellProps);\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["../../../../src/components/ActionCell/ActionCell.ts"],"sourcesContent":["import React from 'react';\nimport {\n  TableActionCellMainAction as TableActionCellMainActionWds,\n  TableActionCellPrimaryAction as TableActionCellPrimaryActionWds,\n  TableActionCellProps,\n  TableActionCellSecondaryAction,\n  TableActionCellSecondaryDivider,\n} from '@wix/design-system';\nimport { FiltersMap } from '@wix/bex-core';\nimport { ActionCellAPI as ActionCellAPIType } from '../../state';\n\nexport type SecondaryActionAction = TableActionCellSecondaryAction & {\n  biName?: string;\n  componentId?: string;\n  appId?: string;\n  divider?: false;\n};\n\nexport type SecondaryAction =\n  | SecondaryActionAction\n  | TableActionCellSecondaryDivider;\n\nexport type ActionCellAPI<T, F extends FiltersMap> = ActionCellAPIType<T, F>;\nexport type TableActionCellMainAction = TableActionCellMainActionWds & {\n  biName?: string;\n  disabledMessage?: string;\n};\nexport type TableActionCellPrimaryAction = TableActionCellPrimaryActionWds & {\n  biName?: string;\n  disabledMessage?: string;\n};\n\nexport interface ActionCellProps\n  extends Omit<TableActionCellProps, 'primaryAction' | 'secondaryActions'> {\n  /**\n   * Whether the secondary actions menu (3-dots) is disabled. When `true`, a disabled icon button replaces the menu.\n   * @external\n   */\n  secondaryMenuDisabled?: boolean;\n\n  /**\n   * Tooltip content shown on hover when the secondary actions menu is disabled.\n   * @external\n   */\n  secondaryMenuDisabledTooltip?: React.ReactNode;\n\n  /**\n   * Primary call to action for each item in a table. Controls the behavior and appearance of the primary action. <br>\n   * Can be a single action object or an array of actions. When an array is provided, the first action becomes the primary action and the rest are added to secondary actions. <br>\n   * Supported parameters:\n   *  + `disabledMessage`: Message to show when the action is disabled. Relevant only to grid.\n   *  + `text`: Specifies action label.\n   *  + `skin`: Deprecated property that was previously used to control the visual appearance of a button. It has been replaced by the visibility property, which switches skin properties automatically based on visibility options.\n   *  + `onClick`: Defines a callback function which is called on button click.\n   *  + `disabled`: [bool] Whether user interactions are disabled.\n   *  + `prefixIcon`: Icon in front of a button label.\n   *  + `suffixIcon`: Icon after a button label.\n   *  + `as`: Renders button as another component or a DOM tag.\n   *  + `visibility`: Specifies whether the primary action button is visible. When the value is set to `'onHover'`, the button is only visible when the mouse hovers over it, and it appears as a primary button. When the value is set to `'always'`, the button is always visible and appears as a secondary button.\n   * \n   * This prop extends the `primaryAction` prop in Wix Design System's [TableActionCellProp](https://www.docs.wixdesignsystem.com/?path=/story/components-lists-table--tableactioncell) component.   \n\n   * @external\n   */\n  primaryAction?: TableActionCellPrimaryAction | TableActionCellMainAction[];\n  /**\n   * Secondary CTAs for each item in a table. Controls the behavior and appearance of the secondary actions. <br>\n   * Supported parameters:\n   *  + `deleteSecondaryAction:` A function that adds a \"Delete\" action as a secondary action.\n   *  + `text`: Specifies action label to be shown in the tooltip or popover menu.\n   *  + `icon`: Action icon.\n   *  + `onClick`: Defines a callback function which is called on button click.\n   *  + `subtitle`: Action subtitle.\n   *  + `disabled`: [bool] Whether user interactions are disabled.\n   *  + `dataHook`: A data-hook HTML attribute to be used in the tests.\n   *  + `disabledDescription`: [string] Text to display in tooltip when action is visible and disabled.\n   *  + `tooltipProps`: Controls the tooltip appearance.\n   *  + `skin`: Controls the skin of the item.\n   *\n   * OR Divider object containing\n   *  + `divider`: A divider between the action items in popover menu.\n   *\n   * This prop extends the `primaryAction` prop in Wix Design System's [TableActionCellProp](https://www.docs.wixdesignsystem.com/?path=/story/components-lists-table--tableactioncell) component.\n   * @external\n   */\n  secondaryActions?: SecondaryAction[];\n\n  /**\n   * This ID is used to specify the target container for [dashboard menu plugin](./?path=/story/features-enrich-slots-and-plugins--slots-and-plugins) items.\n   */\n  containerId?: string;\n}\n\nexport type ActionCell<T, F extends FiltersMap> =\n  | ActionCellProps\n  | ((item: T, index: number, api: ActionCellAPI<T, F>) => ActionCellProps);\n"],"mappings":"","ignoreList":[]}

package/dist/cjs/components/ActionCell/DisabledActionCellMenu.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.DisabledActionCellMenu = DisabledActionCellMenu;
+var _react = _interopRequireDefault(require("react"));
+var _designSystem = require("@wix/design-system");
+var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
+var _DisabledTooltip = require("../DisabledTooltip");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/ActionCell/DisabledActionCellMenu.tsx";
+function DisabledActionCellMenu({
+  dataHook,
+  tooltipContent,
+  size = 'medium',
+  skin = 'standard',
+  icon = /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.More, {
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 20,
+      columnNumber: 10
+    }
+  }),
+  ariaLabel
+}) {
+  const buttonAriaLabel = typeof tooltipContent === 'string' ? tooltipContent : ariaLabel;
+  const button = /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+    dataHook: dataHook,
+    disabled: true,
+    priority: "secondary",
+    size: size,
+    skin: skin,
+    ariaLabel: buttonAriaLabel,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 29,
+      columnNumber: 5
+    }
+  }, icon);
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    verticalAlign: "middle",
+    align: "center",
+    width: "100%",
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 42,
+      columnNumber: 5
+    }
+  }, tooltipContent ? /*#__PURE__*/_react.default.createElement(_DisabledTooltip.DisabledTooltip, {
+    dataHook: dataHook ? `${dataHook}-tooltip` : undefined,
+    content: tooltipContent,
+    __self: this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 44,
+      columnNumber: 9
+    }
+  }, button) : button);
+}
+//# sourceMappingURL=DisabledActionCellMenu.js.map

package/dist/cjs/components/ActionCell/DisabledActionCellMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_wixUiIconsCommon","_DisabledTooltip","_jsxFileName","DisabledActionCellMenu","dataHook","tooltipContent","size","skin","icon","default","createElement","More","__self","__source","fileName","lineNumber","columnNumber","ariaLabel","buttonAriaLabel","button","IconButton","disabled","priority","Box","verticalAlign","align","width","DisabledTooltip","undefined","content"],"sources":["../../../../src/components/ActionCell/DisabledActionCellMenu.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Box, IconButton, IconButtonProps } from '@wix/design-system';\nimport { More } from '@wix/wix-ui-icons-common';\nimport { DisabledTooltip } from '../DisabledTooltip';\n\nexport interface DisabledActionCellMenuProps {\n  dataHook?: string;\n  tooltipContent?: React.ReactNode;\n  size?: IconButtonProps['size'];\n  skin?: IconButtonProps['skin'];\n  icon?: ReactElement;\n  ariaLabel?: string;\n}\n\nexport function DisabledActionCellMenu({\n  dataHook,\n  tooltipContent,\n  size = 'medium',\n  skin = 'standard',\n  icon = <More />,\n  ariaLabel,\n}: DisabledActionCellMenuProps) {\n  const buttonAriaLabel =\n    typeof tooltipContent === 'string'\n      ? tooltipContent\n      : ariaLabel;\n\n  const button = (\n    <IconButton\n      dataHook={dataHook}\n      disabled\n      priority=\"secondary\"\n      size={size}\n      skin={skin}\n      ariaLabel={buttonAriaLabel}\n    >\n      {icon}\n    </IconButton>\n  );\n\n  return (\n    <Box verticalAlign=\"middle\" align=\"center\" width=\"100%\">\n      {tooltipContent ? (\n        <DisabledTooltip\n          dataHook={dataHook ? `${dataHook}-tooltip` : undefined}\n          content={tooltipContent}\n        >\n          {button}\n        </DisabledTooltip>\n      ) : (\n        button\n      )}\n    </Box>\n  );\n}\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AAAqD,IAAAI,YAAA;AAW9C,SAASC,sBAAsBA,CAAC;EACrCC,QAAQ;EACRC,cAAc;EACdC,IAAI,GAAG,QAAQ;EACfC,IAAI,GAAG,UAAU;EACjBC,IAAI,gBAAGZ,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACV,iBAAA,CAAAW,IAAI;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAZ,YAAA;MAAAa,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAAC;EACfC;AAC2B,CAAC,EAAE;EAC9B,MAAMC,eAAe,GACnB,OAAOb,cAAc,KAAK,QAAQ,GAC9BA,cAAc,GACdY,SAAS;EAEf,MAAME,MAAM,gBACVvB,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACX,aAAA,CAAAqB,UAAU;IACThB,QAAQ,EAAEA,QAAS;IACnBiB,QAAQ;IACRC,QAAQ,EAAC,WAAW;IACpBhB,IAAI,EAAEA,IAAK;IACXC,IAAI,EAAEA,IAAK;IACXU,SAAS,EAAEC,eAAgB;IAAAN,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAZ,YAAA;MAAAa,UAAA;MAAAC,YAAA;IAAA;EAAA,GAE1BR,IACS,CACb;EAED,oBACEZ,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACX,aAAA,CAAAwB,GAAG;IAACC,aAAa,EAAC,QAAQ;IAACC,KAAK,EAAC,QAAQ;IAACC,KAAK,EAAC,MAAM;IAAAd,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAZ,YAAA;MAAAa,UAAA;MAAAC,YAAA;IAAA;EAAA,GACpDX,cAAc,gBACbT,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACT,gBAAA,CAAA0B,eAAe;IACdvB,QAAQ,EAAEA,QAAQ,GAAG,GAAGA,QAAQ,UAAU,GAAGwB,SAAU;IACvDC,OAAO,EAAExB,cAAe;IAAAO,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAZ,YAAA;MAAAa,UAAA;MAAAC,YAAA;IAAA;EAAA,GAEvBG,MACc,CAAC,GAElBA,MAEC,CAAC;AAEV","ignoreList":[]}

package/dist/cjs/components/CardContainer/CardContainer.st.css.js

@@ -5,14 +5,14 @@ exports.vars = exports.style = exports.stVars = exports.st = exports.namespace =
 var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
 // @ts-nocheck
 
-var _namespace_ = "CardContainer2075108360";
+var _namespace_ = "CardContainer2699451929";
 var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
 var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
 var style = exports.style = _style_;
 var st = exports.st = _style_;
 var namespace = exports.namespace = _namespace_;
 var classes = exports.classes = {
-  "root": "CardContainer2075108360__root"
+  "root": "CardContainer2699451929__root"
 };
 var keyframes = exports.keyframes = {};
 var layers = exports.layers = {};

package/dist/cjs/components/CardContainer/CardContainer.st.css.js.map

@@ -1 +1 @@
-{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/CardContainer/CardContainer.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"CardContainer2075108360\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"CardContainer2075108360__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA+B,CAAC;AACtD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/CardContainer/CardContainer.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"CardContainer2699451929\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"CardContainer2699451929__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA+B,CAAC;AACtD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG,CAAC,CAAC","ignoreList":[]}

package/dist/cjs/components/CmsFieldManagement/CmsFieldForm.js

@@ -6,111 +6,75 @@ exports.CmsFieldForm = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _mobxReactLite = require("mobx-react-lite");
 var _designSystem = require("@wix/design-system");
-var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
 var _BasicsSection = require("./Sections/BasicsSection");
 var _ValidationAndDefaultsSection = require("./Sections/ValidationAndDefaultsSection");
+var _StatusToastFromConfig = require("../StatusToastFromConfig");
+var _CmsFieldFormStCss = require("./CmsFieldForm.st.css.js");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CmsFieldManagement/CmsFieldForm.tsx";
 const _CmsFieldForm = ({
   state
 }) => {
+  const validationToastConfig = state.showValidationError ? {
+    message: state.validationErrorMessage,
+    type: 'ERROR'
+  } : undefined;
+  const activeToastConfig = state.errorToastConfig ?? validationToastConfig;
+  const onCloseToast = state.errorToastConfig ? () => state.setErrorToastConfig(undefined) : state.hideValidationError;
   return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
     direction: "vertical",
-    gap: "SP2",
-    width: 530,
     maxHeight: 600,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 15,
+      lineNumber: 24,
       columnNumber: 5
     }
-  }, state.errorToastConfig && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    position: "absolute",
-    top: "24px",
-    left: "49%",
-    transform: "translateX(-50%)",
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.ToastContainer, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 17,
-      columnNumber: 9
+      lineNumber: 25,
+      columnNumber: 7
     }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.FloatingNotification, {
-    dataHook: "cms-field-modal-error-state",
-    type: "destructive",
-    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.InfoCircle, {
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 26,
-        columnNumber: 25
-      }
-    }),
-    text: state.errorToastConfig.message,
-    textButtonProps: state.errorToastConfig.action && {
-      label: state.errorToastConfig.action.text,
-      onClick: () => {
-        var _state$errorToastConf;
-        return (_state$errorToastConf = state.errorToastConfig) == null || (_state$errorToastConf = _state$errorToastConf.action) == null || _state$errorToastConf.onClick == null ? void 0 : _state$errorToastConf.onClick();
-      }
-    },
-    onClose: () => state.setErrorToastConfig(undefined),
+  }, activeToastConfig && /*#__PURE__*/_react.default.createElement(_StatusToastFromConfig.StatusToastFromConfig, {
+    config: activeToastConfig,
+    onClose: onCloseToast,
+    dataHook: state.errorToastConfig ? 'cms-field-modal-error-state' : 'cms-field-modal-validation-state',
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 23,
+      lineNumber: 27,
       columnNumber: 11
     }
-  })), !state.errorToastConfig && state.showValidationError && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    position: "absolute",
-    top: "24px",
-    left: "49%",
-    transform: "translateX(-50%)",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 40,
-      columnNumber: 9
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.FloatingNotification, {
-    type: "destructive",
-    prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.InfoCircle, {
-      __self: void 0,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 48,
-        columnNumber: 25
-      }
-    }),
-    text: state.validationErrorMessage,
-    onClose: state.hideValidationError,
+  })), /*#__PURE__*/_react.default.createElement(_BasicsSection.BasicsSection, {
+    state: state,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 46,
-      columnNumber: 11
+      lineNumber: 39,
+      columnNumber: 7
     }
-  })), /*#__PURE__*/_react.default.createElement(_BasicsSection.BasicsSection, {
-    state: state,
+  }), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    className: _CmsFieldFormStCss.classes.fullBleedDivider,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 55,
+      lineNumber: 40,
       columnNumber: 7
     }
-  }), /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 56,
-      columnNumber: 7
+      lineNumber: 41,
+      columnNumber: 9
     }
-  }), /*#__PURE__*/_react.default.createElement(_ValidationAndDefaultsSection.ValidationAndDefaultsSection, {
+  })), /*#__PURE__*/_react.default.createElement(_ValidationAndDefaultsSection.ValidationAndDefaultsSection, {
     state: state,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 58,
+      lineNumber: 43,
       columnNumber: 7
     }
   }));

package/dist/cjs/components/CmsFieldManagement/CmsFieldForm.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_designSystem","_wixUiIconsCommon","_BasicsSection","_ValidationAndDefaultsSection","_jsxFileName","_CmsFieldForm","state","default","createElement","Box","direction","gap","width","maxHeight","__self","__source","fileName","lineNumber","columnNumber","errorToastConfig","position","top","left","transform","FloatingNotification","dataHook","type","prefixIcon","InfoCircle","text","message","textButtonProps","action","label","onClick","_state$errorToastConf","onClose","setErrorToastConfig","undefined","showValidationError","validationErrorMessage","hideValidationError","BasicsSection","Divider","ValidationAndDefaultsSection","CmsFieldForm","exports","observer"],"sources":["../../../../src/components/CmsFieldManagement/CmsFieldForm.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Box, Divider, FloatingNotification } from '@wix/design-system';\nimport { InfoCircle } from '@wix/wix-ui-icons-common';\nimport type { CmsFormState } from './CmsFormState';\nimport { BasicsSection } from './Sections/BasicsSection';\nimport { ValidationAndDefaultsSection } from './Sections/ValidationAndDefaultsSection';\n\ninterface Props {\n  state: CmsFormState;\n}\n\nconst _CmsFieldForm = ({ state }: Props) => {\n  return (\n    <Box direction=\"vertical\" gap=\"SP2\" width={530} maxHeight={600}>\n      {state.errorToastConfig && (\n        <Box\n          position=\"absolute\"\n          top=\"24px\"\n          left=\"49%\"\n          transform=\"translateX(-50%)\"\n        >\n          <FloatingNotification\n            dataHook=\"cms-field-modal-error-state\"\n            type=\"destructive\"\n            prefixIcon={<InfoCircle />}\n            text={state.errorToastConfig.message}\n            textButtonProps={\n              state.errorToastConfig.action && {\n                label: state.errorToastConfig.action.text,\n                onClick: () => state.errorToastConfig?.action?.onClick?.(),\n              }\n            }\n            onClose={() => state.setErrorToastConfig(undefined)}\n          />\n        </Box>\n      )}\n\n      {!state.errorToastConfig && state.showValidationError && (\n        <Box\n          position=\"absolute\"\n          top=\"24px\"\n          left=\"49%\"\n          transform=\"translateX(-50%)\"\n        >\n          <FloatingNotification\n            type=\"destructive\"\n            prefixIcon={<InfoCircle />}\n            text={state.validationErrorMessage}\n            onClose={state.hideValidationError}\n          />\n        </Box>\n      )}\n\n      <BasicsSection state={state} />\n      <Divider />\n\n      <ValidationAndDefaultsSection state={state} />\n    </Box>\n  );\n};\n\nexport const CmsFieldForm = observer(_CmsFieldForm);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_designSystem","_BasicsSection","_ValidationAndDefaultsSection","_StatusToastFromConfig","_CmsFieldFormStCss","_jsxFileName","_CmsFieldForm","state","validationToastConfig","showValidationError","message","validationErrorMessage","type","undefined","activeToastConfig","errorToastConfig","onCloseToast","setErrorToastConfig","hideValidationError","default","createElement","Box","direction","maxHeight","__self","__source","fileName","lineNumber","columnNumber","ToastContainer","StatusToastFromConfig","config","onClose","dataHook","BasicsSection","className","classes","fullBleedDivider","Divider","ValidationAndDefaultsSection","CmsFieldForm","exports","observer"],"sources":["../../../../src/components/CmsFieldManagement/CmsFieldForm.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { Box, Divider, ToastContainer } from '@wix/design-system';\nimport type { CmsFormState } from './CmsFormState';\nimport { BasicsSection } from './Sections/BasicsSection';\nimport { ValidationAndDefaultsSection } from './Sections/ValidationAndDefaultsSection';\nimport { StatusToastFromConfig } from '../StatusToastFromConfig';\nimport { classes } from './CmsFieldForm.st.css.js';\n\ninterface Props {\n  state: CmsFormState;\n}\n\nconst _CmsFieldForm = ({ state }: Props) => {\n  const validationToastConfig = state.showValidationError\n    ? { message: state.validationErrorMessage, type: 'ERROR' as const }\n    : undefined;\n  const activeToastConfig = state.errorToastConfig ?? validationToastConfig;\n  const onCloseToast = state.errorToastConfig\n    ? () => state.setErrorToastConfig(undefined)\n    : state.hideValidationError;\n\n  return (\n    <Box direction=\"vertical\" maxHeight={600}>\n      <ToastContainer>\n        {activeToastConfig && (\n          <StatusToastFromConfig\n            config={activeToastConfig}\n            onClose={onCloseToast}\n            dataHook={\n              state.errorToastConfig\n                ? 'cms-field-modal-error-state'\n                : 'cms-field-modal-validation-state'\n            }\n          />\n        )}\n      </ToastContainer>\n\n      <BasicsSection state={state} />\n      <Box className={classes.fullBleedDivider}>\n        <Divider />\n      </Box>\n      <ValidationAndDefaultsSection state={state} />\n    </Box>\n  );\n};\n\nexport const CmsFieldForm = observer(_CmsFieldForm);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AAEA,IAAAG,cAAA,GAAAH,OAAA;AACA,IAAAI,6BAAA,GAAAJ,OAAA;AACA,IAAAK,sBAAA,GAAAL,OAAA;AACA,IAAAM,kBAAA,GAAAN,OAAA;AAAmD,IAAAO,YAAA;AAMnD,MAAMC,aAAa,GAAGA,CAAC;EAAEC;AAAa,CAAC,KAAK;EAC1C,MAAMC,qBAAqB,GAAGD,KAAK,CAACE,mBAAmB,GACnD;IAAEC,OAAO,EAAEH,KAAK,CAACI,sBAAsB;IAAEC,IAAI,EAAE;EAAiB,CAAC,GACjEC,SAAS;EACb,MAAMC,iBAAiB,GAAGP,KAAK,CAACQ,gBAAgB,IAAIP,qBAAqB;EACzE,MAAMQ,YAAY,GAAGT,KAAK,CAACQ,gBAAgB,GACvC,MAAMR,KAAK,CAACU,mBAAmB,CAACJ,SAAS,CAAC,GAC1CN,KAAK,CAACW,mBAAmB;EAE7B,oBACEtB,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACpB,aAAA,CAAAqB,GAAG;IAACC,SAAS,EAAC,UAAU;IAACC,SAAS,EAAE,GAAI;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAArB,YAAA;MAAAsB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACvChC,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACpB,aAAA,CAAA6B,cAAc;IAAAL,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAArB,YAAA;MAAAsB,UAAA;MAAAC,YAAA;IAAA;EAAA,GACZd,iBAAiB,iBAChBlB,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACjB,sBAAA,CAAA2B,qBAAqB;IACpBC,MAAM,EAAEjB,iBAAkB;IAC1BkB,OAAO,EAAEhB,YAAa;IACtBiB,QAAQ,EACN1B,KAAK,CAACQ,gBAAgB,GAClB,6BAA6B,GAC7B,kCACL;IAAAS,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAArB,YAAA;MAAAsB,UAAA;MAAAC,YAAA;IAAA;EAAA,CACF,CAEW,CAAC,eAEjBhC,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACnB,cAAA,CAAAiC,aAAa;IAAC3B,KAAK,EAAEA,KAAM;IAAAiB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAArB,YAAA;MAAAsB,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAAC,eAC/BhC,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACpB,aAAA,CAAAqB,GAAG;IAACc,SAAS,EAAEC,0BAAO,CAACC,gBAAiB;IAAAb,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAArB,YAAA;MAAAsB,UAAA;MAAAC,YAAA;IAAA;EAAA,gBACvChC,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACpB,aAAA,CAAAsC,OAAO;IAAAd,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAArB,YAAA;MAAAsB,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CACP,CAAC,eACNhC,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAAClB,6BAAA,CAAAqC,4BAA4B;IAAChC,KAAK,EAAEA,KAAM;IAAAiB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAArB,YAAA;MAAAsB,UAAA;MAAAC,YAAA;IAAA;EAAA,CAAE,CAC1C,CAAC;AAEV,CAAC;AAEM,MAAMY,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,uBAAQ,EAACpC,aAAa,CAAC","ignoreList":[]}

package/dist/cjs/components/CmsFieldManagement/CmsFieldForm.st.css

@@ -0,0 +1,9 @@
+@property st-global(--wds-space-300);
+@property st-global(--wds-custom-modal-content-padding-horizontal);
+
+.fullBleedDivider {
+  margin-top: var(--wds-space-300, 18px);
+  margin-inline: calc(
+    -1 * var(--wds-custom-modal-content-padding-horizontal, 24px)
+  );
+}

package/dist/cjs/components/CmsFieldManagement/CmsFieldForm.st.css.js

@@ -0,0 +1,26 @@
+"use strict";
+
+exports.__esModule = true;
+exports.vars = exports.style = exports.stVars = exports.st = exports.namespace = exports.layers = exports.keyframes = exports.cssStates = exports.containers = exports.classes = void 0;
+var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
+// @ts-nocheck
+
+var _namespace_ = "CmsFieldForm1657847466";
+var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
+var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
+var style = exports.style = _style_;
+var st = exports.st = _style_;
+var namespace = exports.namespace = _namespace_;
+var classes = exports.classes = {
+  "root": "CmsFieldForm1657847466__root",
+  "fullBleedDivider": "CmsFieldForm1657847466__fullBleedDivider"
+};
+var keyframes = exports.keyframes = {};
+var layers = exports.layers = {};
+var containers = exports.containers = {};
+var stVars = exports.stVars = {};
+var vars = exports.vars = {
+  "wds-space-300": "--wds-space-300",
+  "wds-custom-modal-content-padding-horizontal": "--wds-custom-modal-content-padding-horizontal"
+};
+//# sourceMappingURL=CmsFieldForm.st.css.js.map

package/dist/cjs/components/CmsFieldManagement/CmsFieldForm.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/CmsFieldManagement/CmsFieldForm.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"CmsFieldForm1657847466\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"CmsFieldForm1657847466__root\",\"fullBleedDivider\":\"CmsFieldForm1657847466__fullBleedDivider\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-space-300\":\"--wds-space-300\",\"wds-custom-modal-content-padding-horizontal\":\"--wds-custom-modal-content-padding-horizontal\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,wBAAwB;AAC1C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,8BAA8B;EAAC,kBAAkB,EAAC;AAA0C,CAAC;AACnH,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,eAAe,EAAC,iBAAiB;EAAC,6CAA6C,EAAC;AAA+C,CAAC","ignoreList":[]}

package/dist/cjs/components/CmsFieldManagement/CmsFieldModal.js

@@ -7,6 +7,7 @@ var _react = _interopRequireDefault(require("react"));
 var _mobxReactLite = require("mobx-react-lite");
 var _ActionModal = require("../ActionModal");
 var _CmsFieldForm = require("./CmsFieldForm");
+var _CmsFieldModalStCss = require("./CmsFieldModal.st.css.js");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CmsFieldManagement/CmsFieldModal.tsx";
 const CmsFieldModal = exports.CmsFieldModal = (0, _mobxReactLite.observer)(({
   state
@@ -24,16 +25,19 @@ const CmsFieldModal = exports.CmsFieldModal = (0, _mobxReactLite.observer)(({
       __self: void 0,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 17,
+        lineNumber: 18,
         columnNumber: 30
       }
     }) : null,
     primaryButtonText: "Save",
     secondaryButtonText: "Cancel",
+    width: 600,
+    showFooterDivider: true,
+    className: _CmsFieldModalStCss.classes.modal,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 12,
+      lineNumber: 13,
       columnNumber: 7
     }
   });

package/dist/cjs/components/CmsFieldManagement/CmsFieldModal.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_ActionModal","_CmsFieldForm","_jsxFileName","CmsFieldModal","exports","observer","state","formState","default","createElement","CustomActionModal","dataHook","modal","onAfterClose","reset","title","mode","content","CmsFieldForm","__self","__source","fileName","lineNumber","columnNumber","primaryButtonText","secondaryButtonText"],"sources":["../../../../src/components/CmsFieldManagement/CmsFieldModal.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { CustomActionModal } from '../ActionModal';\nimport { CmsFieldForm } from './CmsFieldForm';\nimport { CmsFieldModalState } from './CmsFieldModalState';\n\nexport const CmsFieldModal = observer(\n  ({ state }: { state: CmsFieldModalState }) => {\n    const { formState } = state;\n\n    return (\n      <CustomActionModal\n        dataHook=\"cms-field-modal\"\n        state={state.modal}\n        onAfterClose={() => state.reset()}\n        title={formState?.mode === 'edit' ? 'Edit field' : 'Add a field'}\n        content={formState ? <CmsFieldForm state={formState} /> : null}\n        primaryButtonText=\"Save\"\n        secondaryButtonText=\"Cancel\"\n      />\n    );\n  },\n);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAA8C,IAAAI,YAAA;AAGvC,MAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,IAAAE,uBAAQ,EACnC,CAAC;EAAEC;AAAqC,CAAC,KAAK;EAC5C,MAAM;IAAEC;EAAU,CAAC,GAAGD,KAAK;EAE3B,oBACEV,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACT,YAAA,CAAAU,iBAAiB;IAChBC,QAAQ,EAAC,iBAAiB;IAC1BL,KAAK,EAAEA,KAAK,CAACM,KAAM;IACnBC,YAAY,EAAEA,CAAA,KAAMP,KAAK,CAACQ,KAAK,CAAC,CAAE;IAClCC,KAAK,EAAE,CAAAR,SAAS,oBAATA,SAAS,CAAES,IAAI,MAAK,MAAM,GAAG,YAAY,GAAG,aAAc;IACjEC,OAAO,EAAEV,SAAS,gBAAGX,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACR,aAAA,CAAAiB,YAAY;MAACZ,KAAK,EAAEC,SAAU;MAAAY,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAnB,YAAA;QAAAoB,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CAAC,GAAG,IAAK;IAC/DC,iBAAiB,EAAC,MAAM;IACxBC,mBAAmB,EAAC,QAAQ;IAAAN,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,CAC7B,CAAC;AAEN,CACF,CAAC","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_mobxReactLite","_ActionModal","_CmsFieldForm","_CmsFieldModalStCss","_jsxFileName","CmsFieldModal","exports","observer","state","formState","default","createElement","CustomActionModal","dataHook","modal","onAfterClose","reset","title","mode","content","CmsFieldForm","__self","__source","fileName","lineNumber","columnNumber","primaryButtonText","secondaryButtonText","width","showFooterDivider","className","classes"],"sources":["../../../../src/components/CmsFieldManagement/CmsFieldModal.tsx"],"sourcesContent":["import React from 'react';\nimport { observer } from 'mobx-react-lite';\nimport { CustomActionModal } from '../ActionModal';\nimport { CmsFieldForm } from './CmsFieldForm';\nimport { CmsFieldModalState } from './CmsFieldModalState';\nimport { classes } from './CmsFieldModal.st.css.js';\n\nexport const CmsFieldModal = observer(\n  ({ state }: { state: CmsFieldModalState }) => {\n    const { formState } = state;\n\n    return (\n      <CustomActionModal\n        dataHook=\"cms-field-modal\"\n        state={state.modal}\n        onAfterClose={() => state.reset()}\n        title={formState?.mode === 'edit' ? 'Edit field' : 'Add a field'}\n        content={formState ? <CmsFieldForm state={formState} /> : null}\n        primaryButtonText=\"Save\"\n        secondaryButtonText=\"Cancel\"\n        width={600}\n        showFooterDivider\n        className={classes.modal}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,cAAA,GAAAD,OAAA;AACA,IAAAE,YAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAEA,IAAAI,mBAAA,GAAAJ,OAAA;AAAoD,IAAAK,YAAA;AAE7C,MAAMC,aAAa,GAAAC,OAAA,CAAAD,aAAA,GAAG,IAAAE,uBAAQ,EACnC,CAAC;EAAEC;AAAqC,CAAC,KAAK;EAC5C,MAAM;IAAEC;EAAU,CAAC,GAAGD,KAAK;EAE3B,oBACEX,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACV,YAAA,CAAAW,iBAAiB;IAChBC,QAAQ,EAAC,iBAAiB;IAC1BL,KAAK,EAAEA,KAAK,CAACM,KAAM;IACnBC,YAAY,EAAEA,CAAA,KAAMP,KAAK,CAACQ,KAAK,CAAC,CAAE;IAClCC,KAAK,EAAE,CAAAR,SAAS,oBAATA,SAAS,CAAES,IAAI,MAAK,MAAM,GAAG,YAAY,GAAG,aAAc;IACjEC,OAAO,EAAEV,SAAS,gBAAGZ,MAAA,CAAAa,OAAA,CAAAC,aAAA,CAACT,aAAA,CAAAkB,YAAY;MAACZ,KAAK,EAAEC,SAAU;MAAAY,MAAA;MAAAC,QAAA;QAAAC,QAAA,EAAAnB,YAAA;QAAAoB,UAAA;QAAAC,YAAA;MAAA;IAAA,CAAE,CAAC,GAAG,IAAK;IAC/DC,iBAAiB,EAAC,MAAM;IACxBC,mBAAmB,EAAC,QAAQ;IAC5BC,KAAK,EAAE,GAAI;IACXC,iBAAiB;IACjBC,SAAS,EAAEC,2BAAO,CAACjB,KAAM;IAAAO,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAnB,YAAA;MAAAoB,UAAA;MAAAC,YAAA;IAAA;EAAA,CAC1B,CAAC;AAEN,CACF,CAAC","ignoreList":[]}

package/dist/cjs/components/CmsFieldManagement/CmsFieldModal.st.css

@@ -0,0 +1,5 @@
+@property st-global(--wds-custom-modal-content-padding-vertical);
+
+.modal {
+  --wds-custom-modal-content-padding-vertical: 0;
+}

package/dist/cjs/components/CmsFieldManagement/CmsFieldModal.st.css.js

@@ -0,0 +1,25 @@
+"use strict";
+
+exports.__esModule = true;
+exports.vars = exports.style = exports.stVars = exports.st = exports.namespace = exports.layers = exports.keyframes = exports.cssStates = exports.containers = exports.classes = void 0;
+var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
+// @ts-nocheck
+
+var _namespace_ = "CmsFieldModal1555536254";
+var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
+var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
+var style = exports.style = _style_;
+var st = exports.st = _style_;
+var namespace = exports.namespace = _namespace_;
+var classes = exports.classes = {
+  "root": "CmsFieldModal1555536254__root",
+  "modal": "CmsFieldModal1555536254__modal"
+};
+var keyframes = exports.keyframes = {};
+var layers = exports.layers = {};
+var containers = exports.containers = {};
+var stVars = exports.stVars = {};
+var vars = exports.vars = {
+  "wds-custom-modal-content-padding-vertical": "--wds-custom-modal-content-padding-vertical"
+};
+//# sourceMappingURL=CmsFieldModal.st.css.js.map

package/dist/cjs/components/CmsFieldManagement/CmsFieldModal.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/CmsFieldManagement/CmsFieldModal.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"CmsFieldModal1555536254\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"CmsFieldModal1555536254__root\",\"modal\":\"CmsFieldModal1555536254__modal\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-custom-modal-content-padding-vertical\":\"--wds-custom-modal-content-padding-vertical\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,yBAAyB;AAC3C,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAAK,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AACnB,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,+BAA+B;EAAC,OAAO,EAAC;AAAgC,CAAC;AAC/F,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,2CAA2C,EAAC;AAA6C,CAAC","ignoreList":[]}

package/dist/cjs/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.js

@@ -1,129 +1,77 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.ValidationAndDefaultsSection = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _mobxReactLite = require("mobx-react-lite");
 var _designSystem = require("@wix/design-system");
-var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
 var _ValidationSubSection = require("./ValidationSubSection");
+var _ValidationAndDefaultsSectionStCss = require("./ValidationAndDefaultsSection.st.css.js");
 var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/cairo/dist/cjs/components/CmsFieldManagement/Sections/ValidationAndDefaultsSection.tsx";
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const _ValidationAndDefaultsSection = ({
   state
 }) => {
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
   const hasValidation = state.supportedValidationRules.length > 0;
-  return /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    direction: "vertical",
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _ValidationAndDefaultsSectionStCss.classes.accordionWrapper,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 17,
+      lineNumber: 16,
       columnNumber: 5
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    role: "button",
-    tabIndex: 0,
-    style: {
-      cursor: 'pointer',
-      display: 'flex',
-      alignItems: 'center',
-      gap: 8,
-      padding: '16px 0'
-    },
-    onClick: () => setIsOpen(v => !v),
-    onKeyDown: e => e.key === 'Enter' && setIsOpen(v => !v),
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Accordion, {
+    skin: "light",
+    hideShadow: true,
+    horizontalPadding: "large",
+    items: [{
+      title: 'Validation and defaults',
+      toggleIconPlacement: 'start',
+      children: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+        direction: "vertical",
+        gap: "SP3",
+        __self: void 0,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 26,
+          columnNumber: 15
+        }
+      }, hasValidation && /*#__PURE__*/_react.default.createElement(_ValidationSubSection.ValidationSubSection, {
+        state: state,
+        __self: void 0,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 27,
+          columnNumber: 35
+        }
+      }), /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
+        label: "Help text",
+        infoContent: "Descriptive text shown below the field in forms.",
+        __self: void 0,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 29,
+          columnNumber: 17
+        }
+      }, /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
+        value: state.properties.helpText,
+        onChange: e => state.setHelpText(e.target.value),
+        __self: void 0,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 33,
+          columnNumber: 19
+        }
+      })))
+    }],
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 18,
+      lineNumber: 17,
       columnNumber: 7
     }
-  }, isOpen ? /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronDown, {
-    size: "18px",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 33,
-      columnNumber: 19
-    }
-  }) : /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.ChevronRight, {
-    size: "18px",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 33,
-      columnNumber: 49
-    }
-  }), /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 34,
-      columnNumber: 9
-    }
-  }, "Validation and defaults")), isOpen && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    direction: "vertical",
-    gap: "SP6",
-    paddingBottom: "SP4",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 38,
-      columnNumber: 9
-    }
-  }, hasValidation && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
-    direction: "vertical",
-    gap: "SP2",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 40,
-      columnNumber: 13
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Text, {
-    weight: "bold",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 41,
-      columnNumber: 15
-    }
-  }, "Validation"), /*#__PURE__*/_react.default.createElement(_ValidationSubSection.ValidationSubSection, {
-    state: state,
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 42,
-      columnNumber: 15
-    }
-  })), /*#__PURE__*/_react.default.createElement(_designSystem.Divider, {
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 46,
-      columnNumber: 11
-    }
-  }), /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
-    label: "Help text",
-    infoContent: "Descriptive text shown below the field in forms.",
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 48,
-      columnNumber: 11
-    }
-  }, /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
-    value: state.properties.helpText,
-    onChange: e => state.setHelpText(e.target.value),
-    __self: void 0,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 52,
-      columnNumber: 13
-    }
-  }))));
+  }));
 };
 const ValidationAndDefaultsSection = exports.ValidationAndDefaultsSection = (0, _mobxReactLite.observer)(_ValidationAndDefaultsSection);
 //# sourceMappingURL=ValidationAndDefaultsSection.js.map