@semcore/skeleton 5.42.1 → 16.0.0-prerelease.11

package/lib/esm/Skeleton.mjs

@@ -1,153 +1,176 @@
-import z from "@babel/runtime/helpers/esm/toConsumableArray";
-import M from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import y from "@babel/runtime/helpers/esm/assertThisInitialized";
-import g from "@babel/runtime/helpers/esm/objectSpread2";
-import b from "@babel/runtime/helpers/esm/classCallCheck";
-import x from "@babel/runtime/helpers/esm/createClass";
-import R from "@babel/runtime/helpers/esm/inherits";
-import P from "@babel/runtime/helpers/esm/createSuper";
-import _ from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as D } from "@semcore/utils/lib/core/index";
-import C, { sstyled as S, assignProps as E, Component as w } from "@semcore/core";
-import s from "react";
-import { Box as $ } from "@semcore/flex-box";
-import I from "@semcore/utils/lib/uniqueID";
-import O from "@semcore/utils/lib/canUseDOM";
-import U from "@semcore/utils/lib/enhances/i18nEnhance";
-import { localizedMessages as N } from "./translations/__intergalactic-dynamic-locales.mjs";
-var W = ["y", "x", "amount", "width", "styles", "forwardRef"], A = (
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
+import React from "react";
+import { Box } from "@semcore/flex-box";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
+import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
+import i18nEnhance from "@semcore/core/lib/utils/enhances/i18nEnhance";
+import { localizedMessages } from "./translations/__intergalactic-dynamic-locales.mjs";
+var _excluded = ["y", "x", "amount", "width", "styles", "forwardRef"];
+var style = (
   /*__reshadow_css_start__*/
-  (D.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_1ihc1{0%,to{opacity:1}50%{opacity:.4}}.___SSkeleton_1ihc1_gg_{animation-name:pulse_1ihc1;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_1ihc1);will-change:opacity}.___SSkeletonSVG_1ihc1_gg_._theme_invert_1ihc1_gg_{fill:var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8))}.___SSkeletonSVG_1ihc1_gg_._theme_dark_1ihc1_gg_{fill:var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3))}.___SText_1ihc1_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1ihc1_gg_{animation-name:none}}",
-    "1ihc1_gg_"
+    "@keyframes pulse_1aad7{0%,to{opacity:1}50%{opacity:.4}}.___SSkeleton_1aad7_gg_{animation-name:pulse_1aad7;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:var(--durationAnim_1aad7);will-change:opacity}.___SSkeletonSVG_1aad7_gg_._theme_invert_1aad7_gg_{fill:var(--intergalactic-skeleton-bg, rgba(224, 225, 233, 0.8))}.___SSkeletonSVG_1aad7_gg_._theme_dark_1aad7_gg_{fill:var(--intergalactic-skeleton-bg-invert, rgba(255, 255, 255, 0.3))}.___SText_1aad7_gg_{box-sizing:border-box}@media (prefers-reduced-motion){.___SSkeleton_1aad7_gg_{animation-name:none}}",
+    "1aad7_gg_"
   ), {
-    __SSkeleton: "___SSkeleton_1ihc1_gg_",
-    "--durationAnim": "--durationAnim_1ihc1",
-    "@pulse": "pulse_1ihc1",
-    __SSkeletonSVG: "___SSkeletonSVG_1ihc1_gg_",
-    _theme_invert: "_theme_invert_1ihc1_gg_",
-    _theme_dark: "_theme_dark_1ihc1_gg_",
-    __SText: "___SText_1ihc1_gg_"
+    "__SSkeleton": "___SSkeleton_1aad7_gg_",
+    "--durationAnim": "--durationAnim_1aad7",
+    "@pulse": "pulse_1aad7",
+    "__SSkeletonSVG": "___SSkeletonSVG_1aad7_gg_",
+    "_theme_invert": "_theme_invert_1aad7_gg_",
+    "_theme_dark": "_theme_dark_1aad7_gg_",
+    "__SText": "___SText_1aad7_gg_"
   })
-), j = {
+);
+var MAP_COLOR_THEME = {
   dark: "rgba(255, 255, 255, 0.3)",
   invert: "rgba(224, 225, 233, 0.8)"
-}, d = /* @__PURE__ */ function(i) {
-  R(r, i);
-  var c = P(r);
-  function r() {
-    return b(this, r), c.apply(this, arguments);
+};
+var SkeletonRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(SkeletonRoot2, _Component);
+  var _super = _createSuper(SkeletonRoot2);
+  function SkeletonRoot2() {
+    _classCallCheck(this, SkeletonRoot2);
+    return _super.apply(this, arguments);
   }
-  return x(r, [{
+  _createClass(SkeletonRoot2, [{
     key: "render",
-    value: function() {
-      var e = this.asProps, t, n = $, a = this.asProps;
-      a.Children;
-      var l = a.styles, m = a.duration, u = a.hidden, h = a.getI18nText;
-      return a.tag, u ? null : (t = S(l), /* @__PURE__ */ s.createElement(n, t.cn("SSkeleton", g({}, E({
-        durationAnim: "".concat(m, "ms"),
-        role: "img",
-        "aria-label": h("loading")
-      }, e)))));
+    value: function render() {
+      var _ref = this.asProps, _ref3;
+      var SSkeleton = Box;
+      var _this$asProps = this.asProps;
+      _this$asProps.Children;
+      var styles = _this$asProps.styles, duration = _this$asProps.duration, hidden = _this$asProps.hidden, getI18nText = _this$asProps.getI18nText;
+      _this$asProps.tag;
+      if (hidden) return null;
+      return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SSkeleton, _ref3.cn("SSkeleton", _objectSpread({}, assignProps({
+        "durationAnim": "".concat(duration, "ms"),
+        "role": "img",
+        "aria-label": getI18nText("loading")
+      }, _ref))));
     }
-  }]), r;
-}(w);
-_(d, "displayName", "Skeleton");
-_(d, "style", A);
-_(d, "enhance", [U(N)]);
-_(d, "defaultProps", {
+  }]);
+  return SkeletonRoot2;
+}(Component);
+_defineProperty(SkeletonRoot, "displayName", "Skeleton");
+_defineProperty(SkeletonRoot, "style", style);
+_defineProperty(SkeletonRoot, "enhance", [i18nEnhance(localizedMessages)]);
+_defineProperty(SkeletonRoot, "defaultProps", {
   width: "100%",
   height: "100%",
   duration: 2e3
 });
-var v = /* @__PURE__ */ function(i) {
-  R(r, i);
-  var c = P(r);
-  function r(o) {
-    var e;
-    return b(this, r), e = c.call(this, o), _(y(e), "svgRef", /* @__PURE__ */ s.createRef()), O() && o.observeParentSize && (e.observer = new ResizeObserver(e.handleResize.bind(y(e)))), e;
+var SkeletonSVG = /* @__PURE__ */ function(_Component2) {
+  _inherits(SkeletonSVG2, _Component2);
+  var _super2 = _createSuper(SkeletonSVG2);
+  function SkeletonSVG2(props) {
+    var _this;
+    _classCallCheck(this, SkeletonSVG2);
+    _this = _super2.call(this, props);
+    _defineProperty(_assertThisInitialized(_this), "svgRef", /* @__PURE__ */ React.createRef());
+    if (canUseDOM() && props.observeParentSize) {
+      _this.observer = new ResizeObserver(_this.handleResize.bind(_assertThisInitialized(_this)));
+    }
+    return _this;
   }
-  return x(r, [{
+  _createClass(SkeletonSVG2, [{
     key: "componentDidMount",
-    value: function() {
-      var e, t;
-      (e = this.observer) === null || e === void 0 || e.observe((t = this.svgRef.current) === null || t === void 0 ? void 0 : t.parentElement);
+    value: function componentDidMount() {
+      var _this$observer, _this$svgRef$current;
+      (_this$observer = this.observer) === null || _this$observer === void 0 ? void 0 : _this$observer.observe((_this$svgRef$current = this.svgRef.current) === null || _this$svgRef$current === void 0 ? void 0 : _this$svgRef$current.parentElement);
     }
   }, {
     key: "componentWillUnmount",
-    value: function() {
-      var e;
-      (e = this.observer) === null || e === void 0 || e.disconnect();
+    value: function componentWillUnmount() {
+      var _this$observer2;
+      (_this$observer2 = this.observer) === null || _this$observer2 === void 0 ? void 0 : _this$observer2.disconnect();
     }
   }, {
     key: "handleResize",
-    value: function(e) {
-      var t = e[0].target, n = this.svgRef.current;
-      t && n && n.setAttribute("width", "100%");
+    value: function handleResize(data) {
+      var target = data[0].target;
+      var svg = this.svgRef.current;
+      if (target && svg) {
+        svg.setAttribute("width", "100%");
+      }
     }
   }, {
     key: "setContext",
-    value: function() {
-      var e = this.asProps.theme;
+    value: function setContext() {
+      var theme = this.asProps.theme;
       return {
-        gradientUrl: j[e]
+        gradientUrl: MAP_COLOR_THEME[theme]
       };
     }
   }, {
     key: "render",
-    value: function() {
-      var e = this.asProps, t, n = this.asProps, a = n.Children, l = n.styles, m = n.uid, u = n.theme, h = n.duration, p = q;
-      return t = S(l), /* @__PURE__ */ s.createElement(p, t.cn("SSkeletonSVG", g({}, E({
-        tag: "svg",
-        ref: this.svgRef,
-        preserveAspectRatio: "none",
-        theme: u,
-        durationAnim: "".concat(h, "ms")
-      }, e))), /* @__PURE__ */ s.createElement("defs", t.cn("defs", {}), /* @__PURE__ */ s.createElement("mask", t.cn("mask", {
-        id: m
-      }), /* @__PURE__ */ s.createElement(a, t.cn("Children", {})))), /* @__PURE__ */ s.createElement("rect", t.cn("rect", {
-        x: "0",
-        y: "0",
-        width: "100%",
-        height: "100%",
-        mask: "url(#".concat(m, ")")
+    value: function render() {
+      var _ref2 = this.asProps, _ref4;
+      var _this$asProps2 = this.asProps, Children = _this$asProps2.Children, styles = _this$asProps2.styles, uid = _this$asProps2.uid, theme = _this$asProps2.theme, duration = _this$asProps2.duration;
+      var SSkeletonSVG = Skeleton;
+      return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SSkeletonSVG, _ref4.cn("SSkeletonSVG", _objectSpread({}, assignProps({
+        "tag": "svg",
+        "ref": this.svgRef,
+        "preserveAspectRatio": "none",
+        "theme": theme,
+        "durationAnim": "".concat(duration, "ms")
+      }, _ref2))), /* @__PURE__ */ React.createElement("defs", _ref4.cn("defs", {}), /* @__PURE__ */ React.createElement("mask", _ref4.cn("mask", {
+        "id": uid
+      }), /* @__PURE__ */ React.createElement(Children, _ref4.cn("Children", {})))), /* @__PURE__ */ React.createElement("rect", _ref4.cn("rect", {
+        "x": "0",
+        "y": "0",
+        "width": "100%",
+        "height": "100%",
+        "mask": "url(#".concat(uid, ")")
       })));
     }
-  }]), r;
-}(w);
-_(v, "displayName", "SkeletonSVG");
-_(v, "enhance", [I()]);
-_(v, "style", A);
-_(v, "defaultProps", {
+  }]);
+  return SkeletonSVG2;
+}(Component);
+_defineProperty(SkeletonSVG, "displayName", "SkeletonSVG");
+_defineProperty(SkeletonSVG, "enhance", [uniqueIDEnhancement()]);
+_defineProperty(SkeletonSVG, "style", style);
+_defineProperty(SkeletonSVG, "defaultProps", {
   theme: "invert",
   duration: 2e3
 });
-function L(i) {
-  var c = $, r = i.y, o = r === void 0 ? 0 : r, e = i.x, t = e === void 0 ? 0 : e, n = i.amount, a = n === void 0 ? 1 : n, l = i.width, m = l === void 0 ? "100%" : l, u = i.styles, h = i.forwardRef, p = M(i, W), T = Number(a), G = function(f) {
-    var k;
-    return k = S(u), /* @__PURE__ */ s.createElement(c, k.cn("SText", g({
-      tag: "rect",
-      rx: "4",
-      ry: "4",
-      height: "8"
-    }, f)));
+function Text(props) {
+  var SText = Box;
+  var _props$y = props.y, y = _props$y === void 0 ? 0 : _props$y, _props$x = props.x, x = _props$x === void 0 ? 0 : _props$x, _props$amount = props.amount, amount = _props$amount === void 0 ? 1 : _props$amount, _props$width = props.width, width = _props$width === void 0 ? "100%" : _props$width, styles = props.styles, forwardRef = props.forwardRef, other = _objectWithoutProperties(props, _excluded);
+  var amountLine = Number(amount);
+  var renderRect = function renderRect2(props2) {
+    var _ref5;
+    return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SText, _ref5.cn("SText", _objectSpread({
+      "tag": "rect",
+      "rx": "4",
+      "ry": "4",
+      "height": "8"
+    }, props2)));
   };
-  return /* @__PURE__ */ s.createElement(s.Fragment, null, z(Array(T)).map(function(V, f) {
-    return G(g({
-      key: f,
-      y: o || 20 * f,
-      x: t,
-      ref: h,
-      width: m
-    }, p));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, _toConsumableArray(Array(amountLine)).map(function(el, index) {
+    return renderRect(_objectSpread({
+      key: index,
+      y: y || 20 * index,
+      x,
+      ref: forwardRef,
+      width
+    }, other));
   }));
 }
-var q = C(d);
-const _e = C(v, {
-  Text: L
+var Skeleton = createComponent(SkeletonRoot);
+const Skeleton$1 = createComponent(SkeletonSVG, {
+  Text
 });
 export {
-  q as Skeleton,
-  _e as default
+  Skeleton,
+  Skeleton$1 as default
 };

package/lib/esm/index.mjs

@@ -1,24 +1,24 @@
-import { default as a } from "./Skeleton.mjs";
-import { default as o } from "./Charts/Histogram.mjs";
-import { default as f } from "./Charts/Donut.mjs";
-import { default as m } from "./Charts/Bar.mjs";
-import { default as d } from "./Charts/CompactHorizontalBar.mjs";
-import { default as s } from "./Charts/Area.mjs";
-import { default as C } from "./Charts/Line.mjs";
-import { default as h } from "./Charts/Venn.mjs";
-import { default as i } from "./Charts/ScatterPlot.mjs";
-import { default as b } from "./Charts/Bubble.mjs";
-import { default as H } from "./Charts/RadialTree.mjs";
+import { default as default2 } from "./Skeleton.mjs";
+import { default as default3 } from "./Charts/Histogram.mjs";
+import { default as default4 } from "./Charts/Donut.mjs";
+import { default as default5 } from "./Charts/Bar.mjs";
+import { default as default6 } from "./Charts/CompactHorizontalBar.mjs";
+import { default as default7 } from "./Charts/Area.mjs";
+import { default as default8 } from "./Charts/Line.mjs";
+import { default as default9 } from "./Charts/Venn.mjs";
+import { default as default10 } from "./Charts/ScatterPlot.mjs";
+import { default as default11 } from "./Charts/Bubble.mjs";
+import { default as default12 } from "./Charts/RadialTree.mjs";
 export {
-  s as AreaChartSkeleton,
-  m as BarChartSkeleton,
-  b as BubbleChartSkeleton,
-  d as CompactHorizontalBarChartSkeleton,
-  f as DonutChartSkeleton,
-  o as HistogramChartSkeleton,
-  C as LineChartSkeleton,
-  H as RadialTreeChartSkeleton,
-  i as ScatterPlotChartSkeleton,
-  h as VennChartSkeleton,
-  a as default
+  default7 as AreaChartSkeleton,
+  default5 as BarChartSkeleton,
+  default11 as BubbleChartSkeleton,
+  default6 as CompactHorizontalBarChartSkeleton,
+  default4 as DonutChartSkeleton,
+  default3 as HistogramChartSkeleton,
+  default8 as LineChartSkeleton,
+  default12 as RadialTreeChartSkeleton,
+  default10 as ScatterPlotChartSkeleton,
+  default9 as VennChartSkeleton,
+  default2 as default
 };

package/lib/esm/translations/__intergalactic-dynamic-locales.mjs

@@ -1,33 +1,33 @@
-import r from "./de.json.mjs";
-import o from "./en.json.mjs";
-import m from "./es.json.mjs";
-import t from "./fr.json.mjs";
-import i from "./it.json.mjs";
-import p from "./ja.json.mjs";
-import f from "./ko.json.mjs";
-import e from "./nl.json.mjs";
-import s from "./pt.json.mjs";
-import a from "./tr.json.mjs";
-import l from "./vi.json.mjs";
-import v from "./zh.json.mjs";
-import d from "./pl.json.mjs";
-import n from "./sv.json.mjs";
-var B = {
-  de: r,
-  en: o,
-  es: m,
-  fr: t,
-  it: i,
-  ja: p,
-  ko: f,
-  nl: e,
-  pt: s,
-  tr: a,
-  vi: l,
-  zh: v,
-  pl: d,
-  sv: n
+import de from "./de.json.mjs";
+import en from "./en.json.mjs";
+import es from "./es.json.mjs";
+import fr from "./fr.json.mjs";
+import it from "./it.json.mjs";
+import ja from "./ja.json.mjs";
+import ko from "./ko.json.mjs";
+import nl from "./nl.json.mjs";
+import pt from "./pt.json.mjs";
+import tr from "./tr.json.mjs";
+import vi from "./vi.json.mjs";
+import zh from "./zh.json.mjs";
+import pl from "./pl.json.mjs";
+import sv from "./sv.json.mjs";
+var localizedMessages = {
+  de,
+  en,
+  es,
+  fr,
+  it,
+  ja,
+  ko,
+  nl,
+  pt,
+  tr,
+  vi,
+  zh,
+  pl,
+  sv
 };
 export {
-  B as localizedMessages
+  localizedMessages
 };

package/lib/esm/translations/de.json.mjs

@@ -1,7 +1,8 @@
-const d = "Wird geladen …", a = {
-  loading: d
+const loading = "Wird geladen …";
+const de = {
+  loading
 };
 export {
-  a as default,
-  d as loading
+  de as default,
+  loading
 };

package/lib/esm/translations/en.json.mjs

@@ -1,7 +1,8 @@
-const n = "Loading…", o = {
-  loading: n
+const loading = "Loading…";
+const en = {
+  loading
 };
 export {
-  o as default,
-  n as loading
+  en as default,
+  loading
 };

package/lib/esm/translations/es.json.mjs

@@ -1,7 +1,8 @@
-const a = "Cargando", o = {
-  loading: a
+const loading = "Cargando";
+const es = {
+  loading
 };
 export {
-  o as default,
-  a as loading
+  es as default,
+  loading
 };

package/lib/esm/translations/fr.json.mjs

@@ -1,7 +1,8 @@
-const n = "Chargement en cours", o = {
-  loading: n
+const loading = "Chargement en cours";
+const fr = {
+  loading
 };
 export {
-  o as default,
-  n as loading
+  fr as default,
+  loading
 };

package/lib/esm/translations/it.json.mjs

@@ -1,7 +1,8 @@
-const a = "Caricamento", o = {
-  loading: a
+const loading = "Caricamento";
+const it = {
+  loading
 };
 export {
-  o as default,
-  a as loading
+  it as default,
+  loading
 };

package/lib/esm/translations/ja.json.mjs

@@ -1,7 +1,8 @@
-const a = "読み込み中", o = {
-  loading: a
+const loading = "読み込み中";
+const ja = {
+  loading
 };
 export {
-  o as default,
-  a as loading
+  ja as default,
+  loading
 };

package/lib/esm/translations/ko.json.mjs

@@ -1,7 +1,8 @@
-const o = "로딩 중", a = {
-  loading: o
+const loading = "로딩 중";
+const ko = {
+  loading
 };
 export {
-  a as default,
-  o as loading
+  ko as default,
+  loading
 };

package/lib/esm/translations/nl.json.mjs

@@ -1,7 +1,8 @@
-const n = "Bezig met laden...", a = {
-  loading: n
+const loading = "Bezig met laden...";
+const nl = {
+  loading
 };
 export {
-  a as default,
-  n as loading
+  nl as default,
+  loading
 };

package/lib/esm/translations/pl.json.mjs

@@ -1,7 +1,8 @@
-const a = "Ładowanie…", o = {
-  loading: a
+const loading = "Ładowanie…";
+const pl = {
+  loading
 };
 export {
-  o as default,
-  a as loading
+  pl as default,
+  loading
 };

package/lib/esm/translations/pt.json.mjs

@@ -1,7 +1,8 @@
-const a = "Carregando", o = {
-  loading: a
+const loading = "Carregando";
+const pt = {
+  loading
 };
 export {
-  o as default,
-  a as loading
+  pt as default,
+  loading
 };

package/lib/esm/translations/sv.json.mjs

@@ -1,7 +1,8 @@
-const a = "Laddar…", d = {
-  loading: a
+const loading = "Laddar…";
+const sv = {
+  loading
 };
 export {
-  d as default,
-  a as loading
+  sv as default,
+  loading
 };

package/lib/esm/translations/tr.json.mjs

@@ -1,7 +1,8 @@
-const o = "Yükleniyor", n = {
-  loading: o
+const loading = "Yükleniyor";
+const tr = {
+  loading
 };
 export {
-  n as default,
-  o as loading
+  tr as default,
+  loading
 };

package/lib/esm/translations/vi.json.mjs

@@ -1,7 +1,8 @@
-const a = "Đang tải…", n = {
-  loading: a
+const loading = "Đang tải…";
+const vi = {
+  loading
 };
 export {
-  n as default,
-  a as loading
+  vi as default,
+  loading
 };

package/lib/esm/translations/zh.json.mjs

@@ -1,7 +1,8 @@
-const o = "正在加载", a = {
-  loading: o
+const loading = "正在加载";
+const zh = {
+  loading
 };
 export {
-  a as default,
-  o as loading
+  zh as default,
+  loading
 };

package/lib/types/index.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps } from '@semcore/flex-box';
 import { Intergalactic, UnknownProperties } from '@semcore/core';
-import { UniqueIDProps } from '@semcore/utils/lib/uniqueID';
+import { UniqueIDProps } from '@semcore/core/lib/utils/uniqueID';
 
 /** @deprecated */
 export interface ISkeletonProps extends SkeletonProps, UnknownProperties {}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/skeleton",
   "description": "Semrush Skeleton Component",
-  "version": "5.42.1",
+  "version": "16.0.0-prerelease.11",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "types": "lib/types/index.d.ts",
@@ -14,13 +14,10 @@
     "types": "./lib/types/index.d.ts"
   },
   "dependencies": {
-    "@semcore/utils": "4.48.1",
-    "@semcore/flex-box": "5.41.1"
+    "@semcore/flex-box": "16.0.0-prerelease.11"
   },
   "peerDependencies": {
-    "@semcore/core": "^2.17.5",
-    "react": "16.8 - 18",
-    "react-dom": "16.8 - 18"
+    "@semcore/base-components": "^16.0.0-prerelease.11"
   },
   "repository": {
     "type": "git",