@luck-design-biz/luckda 0.0.23 → 0.0.24-1

package/es/lowcode/painter/panel-section/StylePanel/DisplaySvg.js

@@ -0,0 +1,543 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+var Row = function Row(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 19 9"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M16 4h-4v1h4v2l3-2.5L16 2v2zM6 0h5v9H6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M1 1h3v7H1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M1 1v7h3V1H1zM0 0h5v9H0V0z"
+  })));
+};
+var Column = function Column(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 9 18"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 6h9v5H0zm5 9v-3H4v3H2l2.5 3L7 15H5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M1 1h7v3H1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M1 1v3h7V1H1zM0 0h9v5H0V0z"
+  })));
+};
+var RowAlignFlexStart = function RowAlignFlexStart(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 18",
+    "data-spm-anchor-id": "0.0.0.i168.351440bdA6pWIW"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h21v1H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11 2h5v9h-5z",
+    "data-spm-anchor-id": "0.0.0.i166.351440bdA6pWIW"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M6 3h3v7H6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 3v7h3V3H6zM5 2h5v9H5V2z"
+  })));
+};
+var RowAlignCenter = function RowAlignCenter(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 9"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 4h21v1H0V4zm4.5 0h6v1h-6V4zm6 0h6v1h-6V4z",
+    opacity: ".5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11 0h5v9h-5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M6 1h3v7H6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 1v7h3V1H6zM5 0h5v9H5V0z"
+  })));
+};
+var RowAlignFlexEnd = function RowAlignFlexEnd(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 18"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M0 17h21v1H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11 7h5v9h-5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M6 8h3v7H6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 8v7h3V8H6zM5 7h5v9H5V7z"
+  })));
+};
+var RowAlignStretch = function RowAlignStretch(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 18"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M0 17h21v1H0zM0 0h21v1H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11 2h5v14h-5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M6 3h3v12H6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 3v12h3V3H6zM5 2h5v14H5V2z"
+  })));
+};
+var RowAlignBaseline = function RowAlignBaseline(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 11"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 5h21v1H0V5zm4.5 0h6v1h-6V5zm6 0h6v1h-6V5z",
+    opacity: ".5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11 1h5v9h-5V1zm1 1h3v3h-3V2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M6 5h3v5H6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 3v7h3V3H6zM5 2h5v9H5V2z"
+  })));
+};
+var ColumnAlignFlexStart = function ColumnAlignFlexStart(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 17"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h1v17H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M2 9h9v5H2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M3 4h7v3H3z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M3 4v3h7V4H3zM2 3h9v5H2V3z"
+  })));
+};
+var ColumnAlignCenter = function ColumnAlignCenter(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 9 17"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4 0h1v17H4V0zm0 8.5h1v6H4v-6zm0-6h1v6H4v-6z",
+    opacity: ".5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M0 9h9v5H0z",
+    "data-spm-anchor-id": "0.0.0.i29.351440bdydkHSt"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M1 4h7v3H1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M1 4v3h7V4H1zM0 3h9v5H0V3z"
+  })));
+};
+var ColumnAlignFlexEnd = function ColumnAlignFlexEnd(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 17"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M23 0h1v17h-1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13 9h9v5h-9z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M14 4h7v3h-7z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14 4v3h7V4h-7zm-1-1h9v5h-9V3z"
+  })));
+};
+var ColumnAlignStretch = function ColumnAlignStretch(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 17"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M23 0h1v17h-1zM0 0h1v17H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M2 9h20v5H2z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M3 4h18v3H3z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M3 4v3h18V4H3zM2 3h20v5H2V3z",
+    "data-spm-anchor-id": "0.0.0.i58.351440bdydkHSt"
+  })));
+};
+var ColumnAlignBaseline = function ColumnAlignBaseline(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 17"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h1v17H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M2 9h9v5H2V9zm1 1h2v3H3v-3z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M5 4h5v3H5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M3 4v3h7V4H3zM2 3h9v5H2V3z"
+  })));
+};
+var RowJustifyFlexStart = function RowJustifyFlexStart(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 17"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h1v17H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 4h5v9H8z",
+    "data-spm-anchor-id": "0.0.0.i45.351440bdydkHSt"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M3 5h3v7H3z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M3 5v7h3V5H3zM2 4h5v9H2V4z"
+  })));
+};
+var RowJustifyCenter = function RowJustifyCenter(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 13 17"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M6 0h1v17H6z",
+    "data-spm-anchor-id": "0.0.0.i46.351440bdydkHSt"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 4h5v9H8z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M1 5h3v7H1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M1 5v7h3V5H1zM0 4h5v9H0V4z"
+  })));
+};
+var RowJustifyFlexEnd = function RowJustifyFlexEnd(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 17",
+    "data-spm-anchor-id": "0.0.0.i47.351440bdydkHSt"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M23 0h1v17h-1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M17 4h5v9h-5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M12 5h3v7h-3z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M12 5v7h3V5h-3zm-1-1h5v9h-5V4z"
+  })));
+};
+var RowJustifySpaceBetween = function RowJustifySpaceBetween(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 17"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h1v17H0zm23 0h1v17h-1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M17 4h5v9h-5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M3 5h3v7H3z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M3 5v7h3V5H3zM2 4h5v9H2V4z"
+  })));
+};
+var RowJustifySpaceAround = function RowJustifySpaceAround(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 16 17"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M2 0h1v17H2V0zm0 3.5h1v10H2v-10zM13 0h1v17h-1V0zm0 3.5h1v10h-1v-10z",
+    opacity: ".5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11 4h5v9h-5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M1 5h3v7H1z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M1 5v7h3V5H1zM0 4h5v9H0V4z"
+  })));
+};
+var RowJustifySpaceEvenly = function RowJustifySpaceEvenly(props) {
+  return /*#__PURE__*/React.createElement("svg", {
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    height: "20",
+    viewBox: "0 0 18 21",
+    className: "ve-svgicon"
+  }, /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M0 0v21h1V0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M3 6v9h2V6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 6v9h2V6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M13 6v9h2V6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M17 0v21h1V0z"
+  })));
+};
+var ColumnJustifyFlexStart = function ColumnJustifyFlexStart(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 18"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h21v1H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 8h9v5H6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M7 3h7v3H7z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M7 3v3h7V3H7zM6 2h9v5H6V2z"
+  })));
+};
+var ColumnJustifyCenter = function ColumnJustifyCenter(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 13"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M0 6h21v1H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 8h9v5H6z",
+    "data-spm-anchor-id": "0.0.0.i52.351440bdydkHSt"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M7 1h7v3H7z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M7 1v3h7V1H7zM6 0h9v5H6V0z"
+  })));
+};
+var ColumnJustifyFlexEnd = function ColumnJustifyFlexEnd(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 18"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M6 11h9v5H6z",
+    "data-spm-anchor-id": "0.0.0.i54.351440bdydkHSt"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M7 6h7v3H7z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M7 6v3h7V6H7zM6 5h9v5H6V5z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M0 17h21v1H0z"
+  })));
+};
+var ColumnJustifySpaceBetween = function ColumnJustifySpaceBetween(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 18"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h21v1H0zm0 17h21v1H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 11h9v5H6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M7 3h7v3H7z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M7 3v3h7V3H7zM6 2h9v5H6V2z"
+  })));
+};
+var ColumnJustifySpaceAround = function ColumnJustifySpaceAround(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 13"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 2h21v1H0V2zm5.5 0h10v1h-10V2zM0 10h21v1H0v-1zm5.5 0h10v1h-10v-1z",
+    opacity: ".5"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 8h9v5H6z",
+    "data-spm-anchor-id": "0.0.0.i56.351440bdydkHSt"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".4",
+    d: "M7 1h7v3H7z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M7 1v3h7V1H7zM6 0h9v5H6V0z"
+  })));
+};
+var ColumnJustifySpaceEvenly = function ColumnJustifySpaceEvenly(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    fill: "currentColor",
+    preserveAspectRatio: "xMidYMid meet",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 21 18"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M0 0h21v1H0z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 3h9v2H6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 8h9v2H6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M6 13h9v2H6z"
+  }), /*#__PURE__*/React.createElement("path", {
+    opacity: ".5",
+    d: "M0 17h21v1H0z"
+  })));
+};
+var DisplaySvg = {
+  row: Row,
+  column: Column,
+  'row-reverse': Row,
+  'column-reverse': Column,
+  'row-align-flex-start': RowAlignFlexStart,
+  'row-align-center': RowAlignCenter,
+  'row-align-flex-end': RowAlignFlexEnd,
+  'row-align-stretch': RowAlignStretch,
+  'row-align-baseline': RowAlignBaseline,
+  'column-align-flex-start': ColumnAlignFlexStart,
+  'column-align-center': ColumnAlignCenter,
+  'column-align-flex-end': ColumnAlignFlexEnd,
+  'column-align-stretch': ColumnAlignStretch,
+  'column-align-baseline': ColumnAlignBaseline,
+  'row-justify-flex-start': RowJustifyFlexStart,
+  'row-justify-center': RowJustifyCenter,
+  'row-justify-flex-end': RowJustifyFlexEnd,
+  'row-justify-space-between': RowJustifySpaceBetween,
+  'row-justify-space-around': RowJustifySpaceAround,
+  'row-justify-space-evenly': RowJustifySpaceEvenly,
+  'column-justify-flex-start': ColumnJustifyFlexStart,
+  'column-justify-center': ColumnJustifyCenter,
+  'column-justify-flex-end': ColumnJustifyFlexEnd,
+  'column-justify-space-between': ColumnJustifySpaceBetween,
+  'column-justify-space-around': ColumnJustifySpaceAround,
+  'column-justify-space-evenly': ColumnJustifySpaceEvenly
+};
+export default DisplaySvg;

package/es/lowcode/painter/panel-section/StylePanel/Height.js

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["field"];
+import React from 'react';
+import PanelItem from "../../components/PanelItem";
+import NumberInput from "../../components/NumberInput";
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { useStyle, useStyleDispatch } from "./StyleContext";
+var options = [{
+  label: 'px',
+  value: 'px'
+}, {
+  label: '%',
+  value: '%'
+}, {
+  label: 'A',
+  value: 'auto'
+}];
+export default function (_ref) {
+  var field = _ref.field,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var style = useStyle();
+  var dispatch = useStyleDispatch();
+  return /*#__PURE__*/React.createElement(PanelItem, {
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.width',
+      label: '宽'
+    })
+  }, /*#__PURE__*/React.createElement(NumberInput, _extends({
+    options: options,
+    value: style[field],
+    min: 0,
+    max: 10000,
+    onChange: function onChange(value) {
+      dispatch({
+        type: 'edit',
+        payload: {
+          id: field,
+          value: value
+        }
+      });
+    },
+    placeholder: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.width.ph',
+      label: '请输入宽度'
+    })
+  }, rest)));
+}

package/es/lowcode/painter/panel-section/StylePanel/MainPanel.js

@@ -0,0 +1,64 @@
+import React, { useRef, useState, useReducer, useEffect, useCallback } from 'react';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { Button } from 'luck-design/antd';
+import Collapse from "../../components/Collapse";
+import PopConfirm from "../../components/PopConfirm";
+import CssEditor from "../../components/code-editor/CssEditor";
+import FullScreenEditor from "../../components/code-editor/FullScreenEditor";
+import styles from "../../style/style-panel.less";
+import Width from "./Width";
+import Height from "./Height";
+import Display from "./Display";
+import { useStyle, useStyleDispatch, useEditor, styleToCSS } from "./StyleContext";
+var MainPanel = function MainPanel() {
+  var style = useStyle();
+  var dispatch = useStyleDispatch();
+  var editorRef = useEditor();
+  var currentCoce = useRef();
+  useEffect(function () {
+    if (style) {
+      currentCoce.current = styleToCSS(style);
+    }
+  }, [style]);
+  var handleCodeChange = useCallback(function (code) {
+    dispatch({
+      type: 'code',
+      payload: code
+    });
+  }, []);
+  var handOnEditorLoad = useCallback(function () {
+    console.log('currentCoce.current1', currentCoce.current);
+    editorRef.current.editor.setValue(currentCoce.current);
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['lc-painter-panel-section-style-panel']
+  }, /*#__PURE__*/React.createElement(Collapse, {
+    label: formatMessage({
+      id: 'luckda.lowcode.painter.panel-section.style-panel.group-name',
+      label: '样式设置'
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles['style-editor']
+  }, /*#__PURE__*/React.createElement(PopConfirm, {
+    placement: "bottomRight",
+    title: /*#__PURE__*/React.createElement(FullScreenEditor, {
+      ref: editorRef,
+      EditorComponent: CssEditor,
+      width: "280px",
+      height: "300px",
+      onChange: handleCodeChange,
+      onLoad: handOnEditorLoad
+    })
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    size: "small"
+  }, formatMessage({
+    id: 'luckda.lowcode.painter.panel-section.style-panel.sourceedit',
+    label: '源码编辑'
+  })))), /*#__PURE__*/React.createElement(Width, {
+    field: "width"
+  }), /*#__PURE__*/React.createElement(Height, {
+    field: "height"
+  }), /*#__PURE__*/React.createElement(Display, null)));
+};
+export default MainPanel;