@synerise/ds-menu 1.4.11 → 1.4.13

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@1.4.12...@synerise/ds-menu@1.4.13) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-menu
+
+## [1.4.12](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@1.4.11...@synerise/ds-menu@1.4.12) (2026-03-20)
+
+**Note:** Version bump only for package @synerise/ds-menu
+
 ## [1.4.11](https://github.com/Synerise/synerise-design/compare/@synerise/ds-menu@1.4.10...@synerise/ds-menu@1.4.11) (2026-03-09)
 
 **Note:** Version bump only for package @synerise/ds-menu

package/README.md

@@ -53,7 +53,7 @@ const items = [
 
 | Property        | Description                                                                  | Type            | Default |
 | --------------- | ---------------------------------------------------------------------------- | --------------- | ------- |
-| asDropdownwMenu | Add additional styles for dropdown menu                                      | boolean         | `false` |
+| asDropdownMenu  | Add additional styles for dropdown menu                                      | boolean         | `false` |
 | dataSource      | Array of items to display in menu                                            | MenuItemProps[] | -       |
 | ordered         | Determines if items should be displayed with index prefix (starting from 01) | boolean         | `false` |
 | maxToShowItems  | limits the number of items rendered. remaining are shown after button click  | number          | -       |
@@ -64,10 +64,10 @@ const items = [
 | Property                | Description                                                    | Type                                                    | Default   |
 | ----------------------- | -------------------------------------------------------------- | ------------------------------------------------------- | --------- |
 | children                | Children of the item                                           | React.ReactNode                                         |           |
-| copyable                | Boolean to enable option of copying the value to the clipboard | boolean                                                 | `false`   |
-| copyHint                | Text displayed on hovering copyable item                       | string                                                  |           |
-| copyValue               | Value to be copied to clipboard when copyable item is clicked  | string                                                  |           |
-| copyTooltip             | Tooltip to be displayed when copyable item is clicked          | string / React.ReactNode                                |           |
+| copyable                | Enables copy-to-clipboard; pass `Copyable` object for full control | `boolean` (deprecated) \| `Copyable`            | -         |
+| copyValue               | **@deprecated** — use `copyable: Copyable` instead             | string                                                  |           |
+| copyHint                | **@deprecated** — no longer shown                              | string                                                  |           |
+| copyTooltip             | **@deprecated** — no longer shown                              | string \| React.ReactNode                               |           |
 | disabled                | Disable an item element                                        | boolean                                                 | `false`   |
 | description             | Additional description displayed inside the item               | string / React.ReactNode                                |           |
 | highlight               | Text to be highlighted inside the item                         | string                                                  |           |

package/dist/Elements/Breadcrumb/Breadcrumb.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type MenuItemProps } from '../../Menu.types';
-import { type BreadcrumbProps } from './Breadcrumb.types';
+import { default as React } from 'react';
+import { MenuItemProps } from '../../Menu.types';
+import { BreadcrumbProps } from './Breadcrumb.types';
 declare const Breadcrumb: ({ path, disabled, highlight, description, onPathClick, compact, startWithArrow, gradientOverlap, highlightActivePath, ...rest }: BreadcrumbProps & MenuItemProps) => React.JSX.Element;
 export default Breadcrumb;

package/dist/Elements/Breadcrumb/Breadcrumb.js

@@ -1,106 +1,85 @@
-var _excluded = ["path", "disabled", "highlight", "description", "onPathClick", "compact", "startWithArrow", "gradientOverlap", "highlightActivePath"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { theme } from '@synerise/ds-core';
-import Icon, { AngleRightS } from '@synerise/ds-icon';
-import { escapeRegEx } from '@synerise/ds-utils';
-import * as S from './Breadcrumb.styles';
-var Breadcrumb = function Breadcrumb(_ref) {
-  var path = _ref.path,
-    disabled = _ref.disabled,
-    highlight = _ref.highlight,
-    description = _ref.description,
-    onPathClick = _ref.onPathClick,
-    compact = _ref.compact,
-    startWithArrow = _ref.startWithArrow,
-    gradientOverlap = _ref.gradientOverlap,
-    highlightActivePath = _ref.highlightActivePath,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var prefixel = rest.prefixel;
-  var breadcrumbsArray = [].concat(path);
-  var pathToDisplay = compact ? breadcrumbsArray.reverse() : breadcrumbsArray;
-  var contentRef = useRef(null);
-  var _useState = useState(false),
-    gradient = _useState[0],
-    setGradient = _useState[1];
-  var renderWithHighlighting = useCallback(function (name) {
-    if (highlight && typeof name === 'string') {
-      var index = name.toLocaleLowerCase().indexOf(highlight.toLocaleLowerCase());
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect } from "react";
+import { theme } from "@synerise/ds-core";
+import Icon, { AngleRightS } from "@synerise/ds-icon";
+import { escapeRegEx } from "@synerise/ds-utils";
+import { Breadcrumb as Breadcrumb$1, Description, ContentWrapper, BreadcrumbContent, BreadcrumbRoute, BreadcrumbName, ArrowRight } from "./Breadcrumb.styles.js";
+const Breadcrumb = ({
+  path,
+  disabled,
+  highlight,
+  description,
+  onPathClick,
+  compact,
+  startWithArrow,
+  gradientOverlap,
+  highlightActivePath,
+  ...rest
+}) => {
+  const {
+    prefixel
+  } = rest;
+  const breadcrumbsArray = [...path];
+  const pathToDisplay = compact ? breadcrumbsArray.reverse() : breadcrumbsArray;
+  const contentRef = useRef(null);
+  const [gradient, setGradient] = useState(false);
+  const renderWithHighlighting = useCallback((name) => {
+    if (highlight && typeof name === "string") {
+      const index = name.toLocaleLowerCase().indexOf(highlight.toLocaleLowerCase());
       if (index === -1) {
         return name;
       }
-      var escapedHighlight = escapeRegEx(highlight);
-      var startOfQuery = name.toLowerCase().search(escapedHighlight.toLowerCase());
-      var endOfQuery = startOfQuery + highlight.length;
-      var resultArray = [name.substring(0, startOfQuery), /*#__PURE__*/React.createElement("span", {
-        key: name,
-        className: "search-highlight"
-      }, name.substring(startOfQuery, endOfQuery)), name.substring(endOfQuery, name.length)];
+      const escapedHighlight = escapeRegEx(highlight);
+      const startOfQuery = name.toLowerCase().search(escapedHighlight.toLowerCase());
+      const endOfQuery = startOfQuery + highlight.length;
+      const resultArray = [name.substring(0, startOfQuery), /* @__PURE__ */ jsx("span", { className: "search-highlight", children: name.substring(startOfQuery, endOfQuery) }, name), name.substring(endOfQuery, name.length)];
       return resultArray;
     }
     return name;
   }, [highlight]);
-  var attachActiveClassName = useCallback(function (index) {
+  const attachActiveClassName = useCallback((index) => {
     if (compact) {
-      return !!highlightActivePath && index === 0 ? 'active' : '';
+      return !!highlightActivePath && index === 0 ? "active" : "";
     }
-    return !!highlightActivePath && index === path.length - 1 ? 'active' : '';
+    return !!highlightActivePath && index === path.length - 1 ? "active" : "";
   }, [highlightActivePath, path, compact]);
-  var shouldRenderArrow = function shouldRenderArrow(breadCrumbPath, index) {
+  const shouldRenderArrow = (breadCrumbPath, index) => {
     if (!breadCrumbPath || !breadCrumbPath.length) {
       return false;
     }
-    var nextBreadcrumb = breadCrumbPath[index + 1];
+    const nextBreadcrumb = breadCrumbPath[index + 1];
     if (!nextBreadcrumb) {
       return !!startWithArrow;
     }
     return true;
   };
-  var shouldHaveArrowPlaceholder = function shouldHaveArrowPlaceholder(index) {
+  const shouldHaveArrowPlaceholder = (index) => {
     if (compact) {
       return startWithArrow || index < path.length - 1 && path.length > 1;
     }
     return startWithArrow || path.length > 1 || index > 0;
   };
-  var isOverflown = function isOverflown(elementRef) {
+  const isOverflown = (elementRef) => {
     if (elementRef !== null && elementRef.current !== null) {
-      var element = elementRef.current;
+      const element = elementRef.current;
       return element.scrollWidth > element.clientWidth;
     }
     return false;
   };
-  useEffect(function () {
-    var shouldRenderGradientOverlap = gradientOverlap && isOverflown(contentRef);
+  useEffect(() => {
+    const shouldRenderGradientOverlap = gradientOverlap && isOverflown(contentRef);
     setGradient(!!shouldRenderGradientOverlap);
   }, [path, contentRef, gradientOverlap]);
-  return /*#__PURE__*/React.createElement(S.Breadcrumb, _extends({
-    className: "ds-breadcrumb",
-    disabled: disabled,
-    compact: compact,
-    onPathClick: onPathClick
-  }, rest), !!description && /*#__PURE__*/React.createElement(S.Description, null, renderWithHighlighting(description)), /*#__PURE__*/React.createElement(S.ContentWrapper, {
-    gradientOverlap: gradient
-  }, /*#__PURE__*/React.createElement(S.BreadcrumbContent, {
-    className: "breadcrumb-content",
-    prefixel: !!prefixel,
-    ref: contentRef
-  }, pathToDisplay.map(function (item, index) {
-    return /*#__PURE__*/React.createElement(S.BreadcrumbRoute, {
-      className: "route",
-      key: item + "-" + index
-    }, /*#__PURE__*/React.createElement(S.BreadcrumbName, {
-      className: "ds-breadcrumb-name " + attachActiveClassName(index),
-      onClick: function onClick() {
+  return /* @__PURE__ */ jsxs(Breadcrumb$1, { className: "ds-breadcrumb", disabled, compact, onPathClick, ...rest, children: [
+    !!description && /* @__PURE__ */ jsx(Description, { children: renderWithHighlighting(description) }),
+    /* @__PURE__ */ jsx(ContentWrapper, { gradientOverlap: gradient, children: /* @__PURE__ */ jsx(BreadcrumbContent, { className: "breadcrumb-content", prefixel: !!prefixel, ref: contentRef, children: pathToDisplay.map((item, index) => /* @__PURE__ */ jsxs(BreadcrumbRoute, { className: "route", children: [
+      /* @__PURE__ */ jsx(BreadcrumbName, { className: `ds-breadcrumb-name ${attachActiveClassName(index)}`, onClick: () => {
         onPathClick && onPathClick(item);
-      }
-    }, renderWithHighlighting(item)), shouldHaveArrowPlaceholder(index) && /*#__PURE__*/React.createElement(S.ArrowRight, {
-      className: "ds-arrow",
-      visible: shouldRenderArrow(path, index)
-    }, /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(AngleRightS, null),
-      color: theme.palette['grey-600']
-    })));
-  }))));
+      }, children: renderWithHighlighting(item) }),
+      shouldHaveArrowPlaceholder(index) && /* @__PURE__ */ jsx(ArrowRight, { className: "ds-arrow", visible: shouldRenderArrow(path, index), children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleRightS, {}), color: theme.palette["grey-600"] }) })
+    ] }, `${item}-${index}`)) }) })
+  ] });
+};
+export {
+  Breadcrumb as default
 };
-export default Breadcrumb;

package/dist/Elements/Breadcrumb/Breadcrumb.styles.d.ts

@@ -1,19 +1,19 @@
-import React from 'react';
-import { type FlattenSimpleInterpolation } from 'styled-components';
-import { type ThemeProps } from '@synerise/ds-core';
-export declare const ArrowRight: import("styled-components").StyledComponent<"div", any, {
+import { default as React } from 'react';
+import { FlattenSimpleInterpolation } from 'styled-components';
+import { ThemeProps } from '@synerise/ds-core';
+export declare const ArrowRight: import('styled-components').StyledComponent<"div", any, {
     visible: boolean;
 }, never>;
-export declare const BreadcrumbContent: import("styled-components").StyledComponent<"div", any, {
+export declare const BreadcrumbContent: import('styled-components').StyledComponent<"div", any, {
     prefixel?: boolean;
 }, never>;
-export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const Description: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const ContentWrapper: import('styled-components').StyledComponent<"div", any, {
     gradientOverlap?: boolean;
 }, never>;
-export declare const BreadcrumbName: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BreadcrumbName: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const disableDefaultClickingStyles: (props: ThemeProps & {
     disabled?: boolean;
 }) => FlattenSimpleInterpolation;
-export declare const Breadcrumb: import("styled-components").StyledComponent<({ children, disabled, onPathClick, compact, ...rest }: any) => React.JSX.Element, any, {}, never>;
-export declare const BreadcrumbRoute: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Breadcrumb: import('styled-components').StyledComponent<({ children, disabled, onPathClick, compact, ...rest }: any) => React.JSX.Element, any, {}, never>;
+export declare const BreadcrumbRoute: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Elements/Breadcrumb/Breadcrumb.styles.js

@@ -1,75 +1,60 @@
-var _excluded = ["children", "disabled", "onPathClick", "compact"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from 'react';
-import styled, { css } from 'styled-components';
-import Text from '../Item/Text/Text';
-import { PrefixelWrapper } from '../Item/Text/Text.styles';
-var NOOP = function NOOP() {};
-export var ArrowRight = styled.div.withConfig({
+import { jsx } from "react/jsx-runtime";
+import styled, { css } from "styled-components";
+import Text from "../Item/Text/Text.js";
+import { PrefixelWrapper } from "../Item/Text/Text.styles.js";
+const NOOP = () => {
+};
+const ArrowRight = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Breadcrumbstyles__ArrowRight",
   componentId: "sc-gvmxah-0"
-})(["transition:opacity 0.3s ease-in-out;opacity:", ";svg{transition:fill 0.3s ease-in-out;}"], function (props) {
-  return props.visible ? '1' : '0';
-});
-export var BreadcrumbContent = styled.div.withConfig({
+})(["transition:opacity 0.3s ease-in-out;opacity:", ";svg{transition:fill 0.3s ease-in-out;}"], (props) => props.visible ? "1" : "0");
+const BreadcrumbContent = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Breadcrumbstyles__BreadcrumbContent",
   componentId: "sc-gvmxah-1"
 })(["display:flex;"]);
-export var Description = styled.div.withConfig({
+const Description = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Breadcrumbstyles__Description",
   componentId: "sc-gvmxah-2"
-})(["direction:ltr;width:100%;font-weight:400;color:", ";.search-highlight{font-weight:500;}text-overflow:ellipsis;overflow:hidden;"], function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var ContentWrapper = styled.div.withConfig({
+})(["direction:ltr;width:100%;font-weight:400;color:", ";.search-highlight{font-weight:500;}text-overflow:ellipsis;overflow:hidden;"], (props) => props.theme.palette["grey-600"]);
+const ContentWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Breadcrumbstyles__ContentWrapper",
   componentId: "sc-gvmxah-3"
-})(["position:relative;&::before{pointer-events:none;content:", ";position:absolute;display:block;width:50px;height:18px;transition:opacity 0.3s ease-in-out;background-image:", ";}&::after{pointer-events:none;content:", ";position:absolute;left:0;top:0;display:block;width:50px;height:18px;transition:opacity 0.3s ease-in-out;background-image:", ";}"], function (props) {
-  return props.gradientOverlap ? "''" : 'none';
-}, function (props) {
-  return "-webkit-linear-gradient( left,\n    " + props.theme.palette['grey-050'] + " 0%,\n    rgba(255,255,255,0) 100%\n  )";
-}, function (props) {
-  return props.gradientOverlap ? "''" : 'none';
-}, function (props) {
-  return "-webkit-linear-gradient( left,\n    " + props.theme.palette.white + " 0%,\n    rgba(255,255,255,0) 100%\n  )";
-});
-export var BreadcrumbName = styled.div.withConfig({
+})(["position:relative;&::before{pointer-events:none;content:", ";position:absolute;display:block;width:50px;height:18px;transition:opacity 0.3s ease-in-out;background-image:", ";}&::after{pointer-events:none;content:", ";position:absolute;left:0;top:0;display:block;width:50px;height:18px;transition:opacity 0.3s ease-in-out;background-image:", ";}"], (props) => props.gradientOverlap ? `''` : "none", (props) => `-webkit-linear-gradient( left,
+    ${props.theme.palette["grey-050"]} 0%,
+    rgba(255,255,255,0) 100%
+  )`, (props) => props.gradientOverlap ? `''` : "none", (props) => `-webkit-linear-gradient( left,
+    ${props.theme.palette.white} 0%,
+    rgba(255,255,255,0) 100%
+  )`);
+const BreadcrumbName = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Breadcrumbstyles__BreadcrumbName",
   componentId: "sc-gvmxah-4"
-})(["direction:ltr;font-weight:400;transition:color 0.3s ease-in-out;color:", ";.search-highlight{font-weight:500;}"], function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var disableDefaultClickingStyles = function disableDefaultClickingStyles(props) {
-  return css(["&,&:focus,&:hover{background:", " !important;box-shadow:inset 0 0 0 2px transparent !important;", ",", "{color:", ";}", " > .ds-icon > svg{fill:", ";}}", ":hover,", ":hover{color:", ";}&&&:hover{", "{.ds-icon > svg{fill:", " !important;}}}&&&{", ":hover{.ds-icon > svg{fill:", " !important;}}"], props.theme.palette.white, BreadcrumbName, Description, props.theme.palette['grey-600'], ArrowRight, props.theme.palette['grey-600'], BreadcrumbName, Description, props.disabled ? props.theme.palette['grey-600'] : props.theme.palette['blue-600'], PrefixelWrapper, props.theme.palette['grey-600'], PrefixelWrapper, props.theme.palette['blue-600']);
-};
-export var Breadcrumb = styled(function (_ref) {
-  var children = _ref.children,
-    disabled = _ref.disabled,
-    onPathClick = _ref.onPathClick,
-    compact = _ref.compact,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Text, _extends({
-    disabled: disabled,
-    onClick: NOOP
-  }, rest), children);
-}).withConfig({
+})(["direction:ltr;font-weight:400;transition:color 0.3s ease-in-out;color:", ";.search-highlight{font-weight:500;}"], (props) => props.theme.palette["grey-600"]);
+const disableDefaultClickingStyles = (props) => css(["&,&:focus,&:hover{background:", " !important;box-shadow:inset 0 0 0 2px transparent !important;", ",", "{color:", ";}", " > .ds-icon > svg{fill:", ";}}", ":hover,", ":hover{color:", ";}&&&:hover{", "{.ds-icon > svg{fill:", " !important;}}}&&&{", ":hover{.ds-icon > svg{fill:", " !important;}}"], props.theme.palette.white, BreadcrumbName, Description, props.theme.palette["grey-600"], ArrowRight, props.theme.palette["grey-600"], BreadcrumbName, Description, props.disabled ? props.theme.palette["grey-600"] : props.theme.palette["blue-600"], PrefixelWrapper, props.theme.palette["grey-600"], PrefixelWrapper, props.theme.palette["blue-600"]);
+const Breadcrumb = /* @__PURE__ */ styled(({
+  children,
+  disabled,
+  onPathClick,
+  compact,
+  ...rest
+}) => /* @__PURE__ */ jsx(Text, { disabled, onClick: NOOP, ...rest, children })).withConfig({
   displayName: "Breadcrumbstyles__Breadcrumb",
   componentId: "sc-gvmxah-5"
-})(["min-height:50px;", "{direction:", ";flex-wrap:", ";}&:hover{", " > .ds-icon > svg{fill:", ";}", ",", "{color:", ";}", "::after{opacity:0;}", "::before{opacity:0;}}&:focus:active{", "::before{background-image:", ";}}", ""], BreadcrumbContent, function (props) {
-  return props.compact ? 'rtl' : 'ltr';
-}, function (props) {
-  return props.compact ? 'no-wrap' : 'wrap';
-}, ArrowRight, function (props) {
-  return props.disabled ? props.theme.palette['grey-600'] : props.theme.palette['blue-600'];
-}, BreadcrumbName, Description, function (props) {
-  return props.disabled ? props.theme.palette['grey-600'] : props.theme.palette['blue-600'];
-}, ContentWrapper, ContentWrapper, ContentWrapper, function (props) {
-  return "-webkit-linear-gradient( left,\n    " + props.theme.palette['grey-100'] + " 0%,\n    rgba(255,255,255,0) 100%\n  )";
-}, function (props) {
-  return !!props.onPathClick && disableDefaultClickingStyles(props);
-});
-export var BreadcrumbRoute = styled.div.withConfig({
+})(["min-height:50px;", "{direction:", ";flex-wrap:", ";}&:hover{", " > .ds-icon > svg{fill:", ";}", ",", "{color:", ";}", "::after{opacity:0;}", "::before{opacity:0;}}&:focus:active{", "::before{background-image:", ";}}", ""], BreadcrumbContent, (props) => props.compact ? "rtl" : "ltr", (props) => props.compact ? "no-wrap" : "wrap", ArrowRight, (props) => props.disabled ? props.theme.palette["grey-600"] : props.theme.palette["blue-600"], BreadcrumbName, Description, (props) => props.disabled ? props.theme.palette["grey-600"] : props.theme.palette["blue-600"], ContentWrapper, ContentWrapper, ContentWrapper, (props) => `-webkit-linear-gradient( left,
+    ${props.theme.palette["grey-100"]} 0%,
+    rgba(255,255,255,0) 100%
+  )`, (props) => !!props.onPathClick && disableDefaultClickingStyles(props));
+const BreadcrumbRoute = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Breadcrumbstyles__BreadcrumbRoute",
   componentId: "sc-gvmxah-6"
-})(["display:flex;padding-top:height:18px;.active{font-weight:500;}"]);
+})(["display:flex;padding-top:height:18px;.active{font-weight:500;}"]);
+export {
+  ArrowRight,
+  Breadcrumb,
+  BreadcrumbContent,
+  BreadcrumbName,
+  BreadcrumbRoute,
+  ContentWrapper,
+  Description,
+  disableDefaultClickingStyles
+};

package/dist/Elements/Breadcrumb/Breadcrumb.types.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { default as React } from 'react';
 export interface BreadcrumbProps {
     prefixel?: React.ReactNode;
     disabled?: boolean;

package/dist/Elements/Breadcrumb/Breadcrumb.types.js

@@ -1 +1 @@
-export {};
+

package/dist/Elements/Divider/Divider.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type WithHTMLAttributes } from '@synerise/ds-utils';
-import { type MenuDividerProps } from '../../Menu.types';
+import { default as React } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+import { MenuDividerProps } from '../../Menu.types';
 export declare const Divider: (props: WithHTMLAttributes<HTMLDivElement, MenuDividerProps>) => React.JSX.Element;

package/dist/Elements/Divider/Divider.js

@@ -1,9 +1,8 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import * as S from './Divider.styles';
-export var Divider = function Divider(props) {
-  return /*#__PURE__*/React.createElement(S.MenuDivider, _extends({
-    withSideMargin: true,
-    dashed: true
-  }, props));
-};
+import { jsx } from "react/jsx-runtime";
+import { MenuDivider } from "./Divider.styles.js";
+const Divider = (props) => {
+  return /* @__PURE__ */ jsx(MenuDivider, { withSideMargin: true, dashed: true, ...props });
+};
+export {
+  Divider
+};

package/dist/Elements/Divider/Divider.styles.d.ts

@@ -1,2 +1,2 @@
-import { type MenuDividerProps } from '../../Menu.types';
-export declare const MenuDivider: import("styled-components").StyledComponent<(props: import("@synerise/ds-divider").DividerProps) => React.JSX.Element, any, MenuDividerProps, never>;
+import { MenuDividerProps } from '../../Menu.types';
+export declare const MenuDivider: import('styled-components').StyledComponent<(props: import('@synerise/ds-divider').DividerProps) => React.JSX.Element, any, MenuDividerProps, never>;

package/dist/Elements/Divider/Divider.styles.js

@@ -1,10 +1,9 @@
-import styled from 'styled-components';
-import DSDivider from '@synerise/ds-divider';
-export var MenuDivider = styled(DSDivider).withConfig({
+import styled from "styled-components";
+import DSDivider from "@synerise/ds-divider";
+const MenuDivider = /* @__PURE__ */ styled(DSDivider).withConfig({
   displayName: "Dividerstyles__MenuDivider",
   componentId: "sc-1gajr0l-0"
-})(["height:1px;width:auto;display:flex;margin:", " ", ";"], function (props) {
-  return props.higher ? '16px' : '8px';
-}, function (props) {
-  return props != null && props.level && (props == null ? void 0 : props.level) > 1 ? '35px' : '12px';
-});
+})(["height:1px;width:auto;display:flex;margin:", " ", ";"], (props) => props.higher ? "16px" : "8px", (props) => props?.level && props?.level > 1 ? "35px" : "12px");
+export {
+  MenuDivider
+};

package/dist/Elements/Header/Header.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
-import { type HeaderProps } from './Header.types';
+import { default as React } from 'react';
+import { HeaderProps } from './Header.types';
 declare const MenuHeader: ({ headerText, tooltip }: HeaderProps) => React.JSX.Element;
 export default MenuHeader;

package/dist/Elements/Header/Header.js

@@ -1,16 +1,16 @@
-import React from 'react';
-import Icon, { InfoFillS } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from './Header.styles';
-var MenuHeader = function MenuHeader(_ref) {
-  var headerText = _ref.headerText,
-    tooltip = _ref.tooltip;
-  return /*#__PURE__*/React.createElement(S.MenuHeader, null, headerText, tooltip && /*#__PURE__*/React.createElement(Tooltip, {
-    type: "default",
-    trigger: "hover",
-    title: tooltip || headerText
-  }, /*#__PURE__*/React.createElement(S.HeaderIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(InfoFillS, null)
-  }))));
+import { jsxs, jsx } from "react/jsx-runtime";
+import Icon, { InfoFillS } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { MenuHeader as MenuHeader$1, HeaderIconWrapper } from "./Header.styles.js";
+const MenuHeader = ({
+  headerText,
+  tooltip
+}) => {
+  return /* @__PURE__ */ jsxs(MenuHeader$1, { children: [
+    headerText,
+    tooltip && /* @__PURE__ */ jsx(Tooltip, { type: "default", trigger: "hover", title: tooltip || headerText, children: /* @__PURE__ */ jsx(HeaderIconWrapper, { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(InfoFillS, {}) }) }) })
+  ] });
+};
+export {
+  MenuHeader as default
 };
-export default MenuHeader;

package/dist/Elements/Header/Header.styles.d.ts

@@ -1,2 +1,2 @@
-export declare const MenuHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const HeaderIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MenuHeader: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const HeaderIconWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;

package/dist/Elements/Header/Header.styles.js

@@ -1,13 +1,13 @@
-import styled from 'styled-components';
-export var MenuHeader = styled.div.withConfig({
+import styled from "styled-components";
+const MenuHeader = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Headerstyles__MenuHeader",
   componentId: "sc-xecv8y-0"
-})(["display:flex;align-items:center;font-size:10px;font-weight:500;text-transform:uppercase;color:", ";height:16px;margin:12px;line-height:1.6;letter-spacing:0.1px;"], function (props) {
-  return props.theme.palette['grey-500'];
-});
-export var HeaderIconWrapper = styled.div.withConfig({
+})(["display:flex;align-items:center;font-size:10px;font-weight:500;text-transform:uppercase;color:", ";height:16px;margin:12px;line-height:1.6;letter-spacing:0.1px;"], (props) => props.theme.palette["grey-500"]);
+const HeaderIconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "Headerstyles__HeaderIconWrapper",
   componentId: "sc-xecv8y-1"
-})(["& > .ds-icon > svg{fill:", ";}"], function (props) {
-  return props.theme.palette['grey-400'];
-});
+})(["& > .ds-icon > svg{fill:", ";}"], (props) => props.theme.palette["grey-400"]);
+export {
+  HeaderIconWrapper,
+  MenuHeader
+};

package/dist/Elements/Header/Header.types.js

@@ -1 +1 @@
-export {};
+

package/dist/Elements/Item/Danger/Danger.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import '@synerise/ds-core/dist/js/style';
-import { type BasicItemProps } from '../Text/Text.types';
+import { default as React } from 'react';
+import { BasicItemProps } from '../Text/Text.types';
 declare const Danger: ({ children, ...rest }: BasicItemProps) => React.JSX.Element;
 export default Danger;

package/dist/Elements/Item/Danger/Danger.js

@@ -1,11 +1,11 @@
-var _excluded = ["children"];
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from 'react';
-import '@synerise/ds-core/dist/js/style';
-import * as S from './Danger.styles';
-var Danger = function Danger(_ref) {
-  var children = _ref.children,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(S.DangerItem, rest, children);
+import { jsx } from "react/jsx-runtime";
+import { DangerItem } from "./Danger.styles.js";
+const Danger = ({
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(DangerItem, { ...rest, children });
+};
+export {
+  Danger as default
 };
-export default Danger;

package/dist/Elements/Item/Danger/Danger.styles.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare const DangerItem: import("styled-components").StyledComponent<({ children, disabled, ...rest }: any) => React.JSX.Element, any, {}, never>;
+import { default as React } from 'react';
+export declare const DangerItem: import('styled-components').StyledComponent<({ children, disabled, ...rest }: any) => React.JSX.Element, any, {}, never>;