@yorab/react-paint 0.7.6 → 0.8.0

package/dist/components/settings/FontFamilyField.js

@@ -1,67 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _SelectField = _interopRequireDefault(require("./SelectField"));
-
-var _react2 = require("@linaria/react");
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _icons = require("../../constants/icons");
-
-const StyledOption = /*#__PURE__*/(0, _react2.styled)('span')({
-  name: "StyledOption",
-  class: "smpmxx5",
-  vars: {
-    "smpmxx5-0": [_ref => {
-      let {
-        family
-      } = _ref;
-      return family;
-    }]
-  }
-});
-
-const FontFamilyOption = _ref2 => {
-  let {
-    children
-  } = _ref2;
-  return /*#__PURE__*/_react.default.createElement(StyledOption, {
-    family: children
-  }, children);
-};
-
-const FontFamilyField = _ref3 => {
-  let {
-    selectedSettings,
-    setSelectedSettings,
-    disabled = false,
-    values,
-    defaultValue,
-    valueChanged
-  } = _ref3;
-  if (_fp.default.isEmpty(values)) return null;
-  return /*#__PURE__*/_react.default.createElement(_SelectField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    CustomOption: FontFamilyOption,
-    title: "Police",
-    icon: _icons.fontIcon,
-    disabled: disabled,
-    field: "fontFamily",
-    values: values,
-    defaultValue: defaultValue,
-    valueChanged: valueChanged
-  });
-};
-
-var _default = FontFamilyField;
-exports.default = _default;

package/dist/components/settings/LayoutButton.js

@@ -1,39 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@linaria/react");
-
-var _icons = require("../../constants/icons");
-
-var _Button = _interopRequireDefault(require("../common/Button"));
-
-const StyleToggleLayoutButton = /*#__PURE__*/(0, _react2.styled)(_Button.default)({
-  name: "StyleToggleLayoutButton",
-  class: "sj7hhjx"
-});
-
-const LayoutButton = _ref => {
-  let {
-    layersManipulation,
-    disabled,
-    toggleLayoutPanel
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(StyleToggleLayoutButton, {
-    title: "Toggle layers panel",
-    "data-hidden": !layersManipulation,
-    disabled: disabled,
-    onClick: toggleLayoutPanel,
-    icon: _icons.layersIcon
-  });
-};
-
-var _default = LayoutButton;
-exports.default = _default;

package/dist/components/settings/Layouts.js

@@ -1,214 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _useDrag = _interopRequireDefault(require("../../hooks/useDrag"));
-
-var _icons = require("../../constants/icons");
-
-var _style = require("../../utils/style");
-
-var _react2 = require("@linaria/react");
-
-var _Button = _interopRequireDefault(require("../common/Button"));
-
-var _Panel = _interopRequireDefault(require("../common/Panel"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const StyledLayouts = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledLayouts",
-  class: "su3a8bs"
-});
-const StyledRemoveButton = /*#__PURE__*/(0, _react2.styled)(_Button.default)({
-  name: "StyledRemoveButton",
-  class: "szboplp"
-});
-const StyledLayout = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledLayout",
-  class: "sff5xt"
-});
-const StyledVisibleButton = /*#__PURE__*/(0, _react2.styled)(_Button.default)({
-  name: "StyledVisibleButton",
-  class: "sj3bift"
-});
-const StyledLockedButton = /*#__PURE__*/(0, _react2.styled)(_Button.default)({
-  name: "StyledLockedButton",
-  class: "s10ip0a4"
-});
-const StyledGridButton = /*#__PURE__*/(0, _react2.styled)(_Button.default)({
-  name: "StyledGridButton",
-  class: "s1j9uq9o"
-});
-const StyledSubtitle = /*#__PURE__*/(0, _react2.styled)('span')({
-  name: "StyledSubtitle",
-  class: "s156ddbb"
-});
-const StyledSeparator = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledSeparator",
-  class: "s11gt4hl"
-});
-const StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel.default)({
-  name: "StyledPanel",
-  class: "s13cxqhq"
-});
-const StyledPanelContent = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledPanelContent",
-  class: "s1idv8qv"
-});
-const StyledScrollingContent = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledScrollingContent",
-  class: "s1mhvlda"
-});
-const StyledRow = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledRow",
-  class: "sr4amic"
-});
-const StyledPlaceholder = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledPlaceholder",
-  class: "s13llc5i"
-});
-
-const Layout = _ref => {
-  let {
-    disabled = false,
-    shape,
-    selected,
-    layoutDragging,
-    toggleShapeVisibility,
-    toggleShapeLock,
-    setLayoutDragging,
-    handleRemove,
-    handleSelect,
-    onMoveShapes
-  } = _ref;
-  const ref = (0, _react.useRef)(null);
-
-  const onRemove = e => {
-    if (disabled) return;
-    e.preventDefault();
-    e.stopPropagation();
-    handleRemove(shape);
-  };
-
-  const onSelect = e => {
-    if (disabled) return;
-    e.preventDefault();
-    e.stopPropagation();
-    handleSelect(shape);
-  };
-
-  const onToggleShapeVisibility = e => {
-    if (disabled) return;
-    e.preventDefault();
-    e.stopPropagation();
-    toggleShapeVisibility(shape);
-  };
-
-  const onToggleShapeLock = e => {
-    if (disabled) return;
-    e.preventDefault();
-    e.stopPropagation();
-    toggleShapeLock(shape);
-  };
-
-  const {
-    isOver
-  } = (0, _useDrag.default)({
-    disabled,
-    ref,
-    shape,
-    layoutDragging,
-    setLayoutDragging,
-    handleSelect,
-    onMoveShapes
-  });
-  return /*#__PURE__*/_react.default.createElement(StyledLayout, {
-    "data-disabled": +disabled,
-    draggable: !disabled,
-    "data-is-dragging": +(layoutDragging === shape.id),
-    "data-is-over": +isOver,
-    onClick: onSelect,
-    "data-selected": +selected,
-    ref: ref
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    dangerouslySetInnerHTML: {
-      __html: (0, _style.getShapePicture)(shape.type)
-    }
-  }), /*#__PURE__*/_react.default.createElement("span", null, shape.id), /*#__PURE__*/_react.default.createElement(StyledSeparator, null), /*#__PURE__*/_react.default.createElement(StyledVisibleButton, {
-    title: shape.visible ? 'Hide' : 'Show',
-    "data-visible": shape.visible !== false,
-    disabled: disabled,
-    selected: selected,
-    onClick: onToggleShapeVisibility,
-    icon: shape.visible === false ? _icons.visibilityOffIcon : _icons.visibilityIcon
-  }), /*#__PURE__*/_react.default.createElement(StyledLockedButton, {
-    title: shape.locked ? 'Locked' : 'Unlocked',
-    "data-locked": !!shape.locked,
-    disabled: disabled,
-    selected: selected,
-    onClick: onToggleShapeLock,
-    icon: shape.locked ? _icons.lockedIcon : _icons.unlockedIcon
-  }), /*#__PURE__*/_react.default.createElement(StyledRemoveButton, {
-    title: "Remove",
-    disabled: disabled,
-    onClick: onRemove,
-    icon: _icons.trashIcon
-  }));
-};
-
-const Layouts = _ref2 => {
-  let {
-    gridFormat,
-    setGridFormat,
-    disabled = false,
-    shapes,
-    removeShape,
-    toggleShapeVisibility,
-    toggleShapeLock,
-    selectedShape,
-    moveShapes,
-    selectShape,
-    isLayoutPanelShown
-  } = _ref2;
-  const [layoutDragging, setLayoutDragging] = (0, _react.useState)(undefined);
-  return isLayoutPanelShown ? /*#__PURE__*/_react.default.createElement(StyledPanel, {
-    alignment: "right"
-  }, /*#__PURE__*/_react.default.createElement(StyledPanelContent, null, /*#__PURE__*/_react.default.createElement(StyledScrollingContent, null, /*#__PURE__*/_react.default.createElement(StyledRow, null, /*#__PURE__*/_react.default.createElement(StyledSubtitle, null, "Grid"), /*#__PURE__*/_react.default.createElement(StyledGridButton, {
-    icon: _icons.gridOffIcon,
-    selected: gridFormat === 0,
-    disabled: disabled,
-    onClick: () => setGridFormat(0)
-  }), ['S', 'M', 'L'].map((value, index) => /*#__PURE__*/_react.default.createElement(StyledGridButton, {
-    key: value,
-    selected: gridFormat === index + 1,
-    disabled: disabled,
-    onClick: () => setGridFormat(index + 1)
-  }, value))), /*#__PURE__*/_react.default.createElement("hr", null), /*#__PURE__*/_react.default.createElement(StyledLayouts, null, shapes.length === 0 ? /*#__PURE__*/_react.default.createElement(StyledPlaceholder, null, "No layer yet") : _fp.default.map(shape => /*#__PURE__*/_react.default.createElement(Layout, {
-    key: shape.id,
-    shape: shape,
-    disabled: disabled,
-    layoutDragging: layoutDragging,
-    setLayoutDragging: setLayoutDragging,
-    selected: (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.id) === shape.id,
-    handleSelect: selectShape,
-    handleRemove: removeShape,
-    onMoveShapes: moveShapes,
-    toggleShapeVisibility: toggleShapeVisibility,
-    toggleShapeLock: toggleShapeLock
-  }), shapes))))) : null;
-};
-
-var _default = Layouts;
-exports.default = _default;

package/dist/components/settings/LineArrowField.js

@@ -1,67 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _SelectField = _interopRequireDefault(require("./SelectField"));
-
-var _react2 = require("@linaria/react");
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _icons = require("../../constants/icons");
-
-const StyledLeftTriangle = /*#__PURE__*/(0, _react2.styled)('span')({
-  name: "StyledLeftTriangle",
-  class: "s1xxj4yl"
-});
-const StyledRightTriangle = /*#__PURE__*/(0, _react2.styled)('span')({
-  name: "StyledRightTriangle",
-  class: "sbd6jc8"
-});
-const StyledOption = /*#__PURE__*/(0, _react2.styled)('span')({
-  name: "StyledOption",
-  class: "scawaat"
-});
-
-const LineArrowOption = _ref => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(StyledOption, {
-    "data-type": children
-  }, /*#__PURE__*/_react.default.createElement(StyledLeftTriangle, null), /*#__PURE__*/_react.default.createElement(StyledRightTriangle, null));
-};
-
-const LineArrowField = _ref2 => {
-  let {
-    selectedSettings,
-    setSelectedSettings,
-    disabled = false,
-    values,
-    defaultValue,
-    valueChanged
-  } = _ref2;
-  if (_fp.default.isEmpty(values)) return null;
-  return /*#__PURE__*/_react.default.createElement(_SelectField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    CustomOption: LineArrowOption,
-    title: "Fl\xE8ches",
-    icon: _icons.lineEndIcon,
-    disabled: disabled,
-    field: "lineArrow",
-    values: values,
-    defaultValue: defaultValue,
-    valueChanged: valueChanged
-  });
-};
-
-var _default = LineArrowField;
-exports.default = _default;

package/dist/components/settings/LineTypeField.js

@@ -1,65 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.LineTypeOption = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _SelectField = _interopRequireDefault(require("./SelectField"));
-
-var _react2 = require("@linaria/react");
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _icons = require("../../constants/icons");
-
-const StyledLine = /*#__PURE__*/(0, _react2.styled)('span')({
-  name: "StyledLine",
-  class: "s1qssg4n"
-});
-const StyledOption = /*#__PURE__*/(0, _react2.styled)('span')({
-  name: "StyledOption",
-  class: "se26iq6"
-});
-
-const LineTypeOption = _ref => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(StyledOption, {
-    "data-type": children
-  }, /*#__PURE__*/_react.default.createElement(StyledLine, null), /*#__PURE__*/_react.default.createElement(StyledLine, null), /*#__PURE__*/_react.default.createElement(StyledLine, null), /*#__PURE__*/_react.default.createElement(StyledLine, null), /*#__PURE__*/_react.default.createElement(StyledLine, null), /*#__PURE__*/_react.default.createElement(StyledLine, null), /*#__PURE__*/_react.default.createElement(StyledLine, null));
-};
-
-exports.LineTypeOption = LineTypeOption;
-
-const LineTypeField = _ref2 => {
-  let {
-    selectedSettings,
-    setSelectedSettings,
-    disabled = false,
-    values,
-    defaultValue,
-    valueChanged
-  } = _ref2;
-  if (_fp.default.isEmpty(values)) return null;
-  return /*#__PURE__*/_react.default.createElement(_SelectField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    CustomOption: LineTypeOption,
-    icon: _icons.lineTypeIcon,
-    title: "Type de traits",
-    disabled: disabled,
-    field: "lineDash",
-    values: values,
-    defaultValue: defaultValue,
-    valueChanged: valueChanged
-  });
-};
-
-var _default = LineTypeField;
-exports.default = _default;

package/dist/components/settings/PointsNumberField.js

@@ -1,45 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _icons = require("../../constants/icons");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _RangeField = _interopRequireDefault(require("./RangeField"));
-
-const PointsNumberField = _ref => {
-  let {
-    selectedSettings,
-    setSelectedSettings,
-    disabled = false,
-    min,
-    max,
-    step,
-    value,
-    valueChanged
-  } = _ref;
-  if (min === max) return null;
-  return /*#__PURE__*/_react.default.createElement(_RangeField.default, {
-    selectedSettings: selectedSettings,
-    setSelectedSettings: setSelectedSettings,
-    icon: _icons.polygonIcon,
-    title: "Nombre de points",
-    disabled: disabled,
-    field: "pointsCount",
-    min: min,
-    max: max,
-    step: step,
-    unity: "",
-    value: value,
-    valueChanged: valueChanged
-  });
-};
-
-var _default = PointsNumberField;
-exports.default = _default;

package/dist/components/settings/RangeField.js

@@ -1,82 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _react2 = require("@linaria/react");
-
-var _Button = _interopRequireDefault(require("../common/Button"));
-
-var _Panel = _interopRequireDefault(require("../common/Panel"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const StyledLabel = /*#__PURE__*/(0, _react2.styled)('label')({
-  name: "StyledLabel",
-  class: "s9mugpt"
-});
-
-const RangeField = _ref => {
-  let {
-    selectedSettings,
-    setSelectedSettings,
-    title = "Choisissez l'intervalle",
-    icon,
-    disabled = false,
-    field,
-    value = 1,
-    min = 1,
-    max = 20,
-    step = 1,
-    unity = '',
-    valueChanged
-  } = _ref;
-  const roundValue = Math.round(value);
-  const [customKey] = (0, _react.useState)(_fp.default.uniqueId('settings_'));
-
-  const handleChange = event => {
-    const parsedValue = _fp.default.toNumber(event.target.value);
-
-    valueChanged(field, _fp.default.isNaN(parsedValue) ? event.target.value : parsedValue);
-  };
-
-  const togglePanel = () => {
-    setSelectedSettings(prev => {
-      return prev === customKey ? undefined : customKey;
-    });
-  };
-
-  const isPanelVisible = selectedSettings === customKey;
-  if (min === max) return null;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    selected: isPanelVisible,
-    title: title,
-    disabled: disabled,
-    icon: icon,
-    onClick: togglePanel
-  }), isPanelVisible && /*#__PURE__*/_react.default.createElement(_Panel.default, {
-    title: title,
-    alignment: "left",
-    fitContainer: true
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(StyledLabel, null, /*#__PURE__*/_react.default.createElement("input", {
-    type: "range",
-    min: min,
-    max: max,
-    step: step,
-    value: value,
-    onChange: handleChange
-  }), /*#__PURE__*/_react.default.createElement("span", null, roundValue, unity)))));
-};
-
-var _default = RangeField;
-exports.default = _default;

package/dist/components/settings/SelectField.js

@@ -1,81 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Button = _interopRequireDefault(require("../common/Button"));
-
-var _Panel = _interopRequireDefault(require("../common/Panel"));
-
-var _react2 = require("@linaria/react");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const StyledButton = /*#__PURE__*/(0, _react2.styled)(_Button.default)({
-  name: "StyledButton",
-  class: "s1ktxhkr"
-});
-const StyleWrapper = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyleWrapper",
-  class: "s5sp14o"
-});
-
-const SelectField = _ref => {
-  let {
-    CustomOption,
-    selectedSettings,
-    setSelectedSettings,
-    title = "Choisissez l'option",
-    disabled = false,
-    field,
-    icon,
-    values,
-    defaultValue,
-    valueChanged
-  } = _ref;
-  const [customKey] = (0, _react.useState)(_fp.default.uniqueId('settings_'));
-
-  const handleClick = value => {
-    valueChanged(field, value);
-  };
-
-  const togglePanel = () => {
-    setSelectedSettings(prev => {
-      return prev === customKey ? undefined : customKey;
-    });
-  };
-
-  const isPanelVisible = selectedSettings === customKey;
-  if (_fp.default.isEmpty(values)) return null;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    selected: isPanelVisible,
-    title: title,
-    icon: icon,
-    disabled: disabled,
-    onClick: togglePanel
-  }), isPanelVisible && /*#__PURE__*/_react.default.createElement(_Panel.default, {
-    title: title,
-    alignment: "left",
-    fitContainer: true
-  }, /*#__PURE__*/_react.default.createElement(StyleWrapper, null, values.map(value => {
-    return /*#__PURE__*/_react.default.createElement(StyledButton, {
-      key: value,
-      title: "".concat(value),
-      onClick: () => handleClick(value),
-      selected: defaultValue == value
-    }, /*#__PURE__*/_react.default.createElement(CustomOption, null, value));
-  }))));
-};
-
-var _default = SelectField;
-exports.default = _default;