@ultraviolet/plus 0.15.0 → 0.15.2

package/dist/src/components/Navigation/components/Item.js

@@ -1,553 +0,0 @@
-import _styled from '@emotion/styled/base';
-import '@emotion/react';
-import { Button, MenuV2, Stack, Tooltip, Expandable, Badge, Text, fadeIn } from '@ultraviolet/ui';
-import { useEffect, useState, useCallback, useMemo, Children, isValidElement, cloneElement } from 'react';
-import { useNavigation } from '../NavigationProvider.js';
-import { ANIMATION_DURATION, shrinkHeight } from '../constants.js';
-import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-import { CategoryIcon } from '../../../../@ultraviolet/icons/dist/components/CategoryIcon/index.js';
-import { Icon } from '../../../../@ultraviolet/icons/dist/components/Icon/index.js';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const NeutralButtonLink = process.env.NODE_ENV === "production" ? {
-  name: "rhgg7c",
-  styles: "color:inherit;text-decoration:none;background-color:inherit;border:none;text-align:left"
-} : {
-  name: "rhgg7c",
-  styles: "color:inherit;text-decoration:none;background-color:inherit;border:none;text-align:left",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-// Pin button when the navigation is expanded
-const ExpandedPinnedButton = /*#__PURE__*/_styled(Button, {
-  target: "e134hokc12"
-})(process.env.NODE_ENV === "production" ? {
-  name: "9hkyle",
-  styles: "opacity:0;right:0;position:absolute;left:-24px;top:0;bottom:0;margin:auto;&:hover,&:focus,&:active{opacity:1;}"
-} : {
-  name: "9hkyle",
-  styles: "opacity:0;right:0;position:absolute;left:-24px;top:0;bottom:0;margin:auto;&:hover,&:focus,&:active{opacity:1;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const GrabIcon = /*#__PURE__*/_styled(Icon, {
-  target: "e134hokc11"
-})("opacity:0;margin:0 ", ({
-  theme
-}) => theme.space['0.25'], ";cursor:grab;");
-
-// Pin button when the navigation is collapsed
-const CollapsedPinnedButton = /*#__PURE__*/_styled(Button, {
-  target: "e134hokc10"
-})(process.env.NODE_ENV === "production" ? {
-  name: "i8vgdw",
-  styles: "position:absolute;opacity:0;right:0;margin:auto;top:0;bottom:0;&:hover{opacity:1;}"
-} : {
-  name: "i8vgdw",
-  styles: "position:absolute;opacity:0;right:0;margin:auto;top:0;bottom:0;&:hover{opacity:1;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledBadge = /*#__PURE__*/_styled(Badge, {
-  target: "e134hokc9"
-})();
-const StyledMenuItem = /*#__PURE__*/_styled(MenuV2.Item, {
-  shouldForwardProp: prop => !['isPinnable'].includes(prop),
-  target: "e134hokc8"
-})("text-align:left;&:hover,&:focus,&:active{", CollapsedPinnedButton, "{opacity:1;}", StyledBadge, "{opacity:", ({
-  isPinnable
-}) => isPinnable ? 0 : 1, ";}}");
-const StyledMenu = /*#__PURE__*/_styled(MenuV2, {
-  target: "e134hokc7"
-})(process.env.NODE_ENV === "production" ? {
-  name: "educr3",
-  styles: "width:180px"
-} : {
-  name: "educr3",
-  styles: "width:180px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const PaddingStack = /*#__PURE__*/_styled(Stack, {
-  target: "e134hokc6"
-})(process.env.NODE_ENV === "production" ? {
-  name: "13feash",
-  styles: "padding-left:28px"
-} : {
-  name: "13feash",
-  styles: "padding-left:28px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const AnimatedIcon = /*#__PURE__*/_styled(Icon, {
-  target: "e134hokc5"
-})();
-const WrapText = /*#__PURE__*/_styled(Text, {
-  shouldForwardProp: prop => !['animation', 'subLabel', 'textProminence'].includes(prop),
-  target: "e134hokc4"
-})("overflow-wrap:", ({
-  animation
-}) => animation ? 'normal' : 'anywhere', ";white-space:", ({
-  animation
-}) => animation ? 'nowrap' : 'normal', ";overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:pre-wrap;");
-const StyledStack = /*#__PURE__*/_styled(Stack, {
-  target: "e134hokc3"
-})(process.env.NODE_ENV === "production" ? {
-  name: "13feash",
-  styles: "padding-left:28px"
-} : {
-  name: "13feash",
-  styles: "padding-left:28px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledContainer = /*#__PURE__*/_styled(Stack, {
-  target: "e134hokc2"
-})(NeutralButtonLink, ";border-radius:", ({
-  theme
-}) => theme.radii.default, ";&[data-has-no-expand='false']{cursor:pointer;}margin-top:", ({
-  theme
-}) => theme.space['0.25'], ";padding:", ({
-  theme
-}) => `calc(${theme.space['0.25']} + ${theme.space['0.5']}) ${theme.space['1']}`, ";&[data-has-sub-label='true']{padding:", ({
-  theme
-}) => `${theme.space['0.5']} ${theme.space['1']}`, ";}width:100%;&:hover[data-has-no-expand='false']:not([disabled]):not(\n      [data-is-active='true']\n    ),&:focus[data-has-no-expand='false']:not([disabled]):not(\n      [data-is-active='true']\n    ){background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, ";}&[data-has-active-children='true'][data-has-no-expand='false']:not(\n      [disabled][data-is-active='true']\n    ){background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeakHover, ";", WrapText, "{color:", ({
-  theme
-}) => theme.colors.neutral.textWeakHover, ";}", ExpandedPinnedButton, ",", CollapsedPinnedButton, "{opacity:1;}&[data-is-pinnable='true']{", StyledBadge, "{opacity:0;}}}&[data-has-no-expand='false']:not([disabled]){&:hover,&:focus,&:active{", ExpandedPinnedButton, ",", CollapsedPinnedButton, ",", GrabIcon, "{opacity:1;}", StyledBadge, "{opacity:0;}}}&:hover[data-has-children='false'][data-is-active='false']:not([disabled]){", WrapText, "{color:", ({
-  theme
-}) => theme.colors.neutral.textWeakHover, ";}}&:active[data-has-no-expand='false']:not([disabled]):not(\n      [data-is-active='true']\n    ){background-color:", ({
-  theme
-}) => theme.colors.neutral.backgroundHover, ";}&[data-is-active='true'],&:hover[data-has-active='true']{background-color:", ({
-  theme
-}) => theme.colors.primary.background, ";&:hover{background-color:", ({
-  theme
-}) => theme.colors.primary.backgroundHover, ";}}&[disabled]{cursor:not-allowed;background-color:unset;", WrapText, "{color:", ({
-  theme
-}) => theme.colors.neutral.textWeakDisabled, ";}}&[data-animation='collapse']{animation:", shrinkHeight, " ", ANIMATION_DURATION, "ms ease-in-out;", WrapText, ",", AnimatedIcon, ",", StyledBadge, "{animation:", fadeIn, " ", ANIMATION_DURATION, "ms ease-in-out reverse;}}&[data-animation='expand']{animation:", shrinkHeight, " ", ANIMATION_DURATION, "ms ease-in-out reverse;", WrapText, ",", AnimatedIcon, ",", StyledBadge, "{animation:", fadeIn, " ", ANIMATION_DURATION, "ms ease-in-out;}", StyledStack, "{display:none;}}");
-const MenuStack = /*#__PURE__*/_styled(Stack, {
-  target: "e134hokc1"
-})("padding:", ({
-  theme
-}) => `0 ${theme.space['2']}`, ";margin-top:", ({
-  theme
-}) => theme.space['0.25'], ";");
-const ContainerCategoryIcon = /*#__PURE__*/_styled(Stack, {
-  target: "e134hokc0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "d47oax",
-  styles: "min-width:20px"
-} : {
-  name: "d47oax",
-  styles: "min-width:20px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Item = ({
-  children,
-  categoryIcon,
-  categoryIconVariant,
-  label,
-  subLabel,
-  badgeText,
-  badgeSentiment,
-  href,
-  onClick,
-  toggle,
-  active,
-  noPinButton,
-  type = 'default',
-  hasParents,
-  as,
-  disabled,
-  noExpand = false,
-  index,
-  id
-}) => {
-  const context = useNavigation();
-  if (!context) {
-    throw new Error('Navigation.Item can only be used inside a NavigationProvider.');
-  }
-  const {
-    expanded,
-    locales,
-    pinnedFeature,
-    pinItem,
-    unpinItem,
-    pinnedItems,
-    pinLimit,
-    animation,
-    registerItem
-  } = context;
-  useEffect(() => {
-    if (type !== 'pinnedGroup') {
-      registerItem({
-        [id]: {
-          label,
-          active,
-          onClick
-        }
-      });
-    }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [active, id, label, registerItem]);
-  const [internalToggle, setToggle] = useState(toggle !== false);
-  const triggerToggle = useCallback(value => {
-    setToggle(value);
-    onClick?.(internalToggle);
-  }, [internalToggle, onClick]);
-  useEffect(() => {
-    if (animation === 'collapse') {
-      setToggle(false);
-    }
-    if (animation === 'expand') {
-      setTimeout(() => {
-        setToggle(toggle ?? true);
-      }, 1);
-    }
-  }, [animation, toggle]);
-  const PaddedStack = noExpand || type === 'pinnedGroup' ? Stack : PaddingStack;
-  const hasHrefAndNoChildren = href && !children;
-  const hasPinnedFeatureAndNoChildren = pinnedFeature && !children && !noPinButton;
-  const isItemPinned = pinnedItems.includes(id);
-  const shouldShowPinnedButton = useMemo(() => {
-    if (href || disabled) return false;
-    if (hasPinnedFeatureAndNoChildren && type !== 'default') {
-      return true;
-    }
-    if (hasPinnedFeatureAndNoChildren) {
-      return true;
-    }
-    return false;
-  }, [disabled, hasPinnedFeatureAndNoChildren, href, type]);
-  const hasActiveChildren = useMemo(() => {
-    if (!children) return false;
-    return Children.map(children, child => /*#__PURE__*/isValidElement(child) ? child.props?.active : false).includes(true);
-  }, [children]);
-  const containerTag = useMemo(() => {
-    if (as) {
-      return as;
-    }
-    if (hasHrefAndNoChildren) {
-      return 'a';
-    }
-    if (noExpand) {
-      return 'div';
-    }
-    return 'button';
-  }, [as, hasHrefAndNoChildren, noExpand]);
-  const Container = StyledContainer.withComponent(containerTag, {
-    target: "e134hokc13"
-  });
-  const ariaExpanded = useMemo(() => {
-    if (hasHrefAndNoChildren && internalToggle) {
-      return true;
-    }
-    if (hasHrefAndNoChildren && !internalToggle) {
-      return false;
-    }
-    return undefined;
-  }, [hasHrefAndNoChildren, internalToggle]);
-  const isPinDisabled = pinnedItems.length >= pinLimit;
-  const pinTooltipLocale = useMemo(() => {
-    if (isPinDisabled) {
-      return locales['navigation.pin.limit'];
-    }
-    if (isItemPinned) {
-      return locales['navigation.unpin.tooltip'];
-    }
-    return locales['navigation.pin.tooltip'];
-  }, [isItemPinned, isPinDisabled, locales]);
-  const onDragStartTrigger = event => {
-    event.dataTransfer.setData('text/plain', JSON.stringify({
-      label,
-      index
-    }));
-    // eslint-disable-next-line no-param-reassign
-    event.currentTarget.style.opacity = '0.5';
-  };
-  const onDragStopTrigger = event => {
-    // eslint-disable-next-line no-param-reassign
-    event.currentTarget.style.opacity = '1';
-  };
-
-  // This content is when the navigation is expanded
-  if (expanded || !expanded && animation === 'expand') {
-    const renderChildren = Children.map(children, child => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
-      hasParents: true
-    }) : child);
-    return jsxs(Fragment, {
-      children: [jsxs(Container, {
-        gap: 1,
-        direction: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        "data-has-sub-label": !!subLabel,
-        onClick: () => {
-          if (children) {
-            return triggerToggle(!internalToggle);
-          }
-          return onClick?.();
-        },
-        "aria-expanded": ariaExpanded,
-        href: href,
-        target: href ? '_blank' : undefined,
-        "data-is-pinnable": shouldShowPinnedButton,
-        "data-is-active": active,
-        "data-animation": animation,
-        "data-has-children": !!children,
-        "data-has-active-children": hasActiveChildren,
-        "data-has-no-expand": noExpand,
-        disabled: disabled,
-        draggable: type === 'pinned' && expanded,
-        onDragStart: event => expanded ? onDragStartTrigger(event) : undefined,
-        onDragEnd: event => expanded ? onDragStopTrigger(event) : undefined,
-        id: id,
-        children: [jsxs(Stack, {
-          direction: "row",
-          gap: 1,
-          alignItems: "center",
-          justifyContent: "center",
-          children: [categoryIcon ? jsx(ContainerCategoryIcon, {
-            alignItems: "center",
-            justifyContent: "center",
-            children: jsx(CategoryIcon, {
-              name: categoryIcon,
-              variant: active ? 'primary' : categoryIconVariant,
-              disabled: disabled
-            })
-          }) : null, type === 'pinned' && expanded ? jsx(GrabIcon, {
-            name: "drag-vertical",
-            sentiment: "neutral",
-            prominence: "weak",
-            size: "small",
-            disabled: disabled
-          }) : null, jsxs(Stack, {
-            children: [jsx(WrapText, {
-              as: "span",
-              variant: "bodySmallStrong",
-              sentiment: active ? 'primary' : 'neutral',
-              prominence: (categoryIcon || !hasParents) && !active ? 'strong' : 'default',
-              animation: animation,
-              disabled: disabled,
-              children: label
-            }), subLabel ? jsx(WrapText, {
-              as: "span",
-              variant: "caption",
-              sentiment: "neutral",
-              prominence: "weak",
-              animation: animation,
-              disabled: disabled,
-              subLabel: true,
-              children: subLabel
-            }) : null]
-          })]
-        }), jsxs(Stack, {
-          direction: "row",
-          alignItems: "center",
-          gap: href ? 1 : undefined,
-          children: [badgeText || hasPinnedFeatureAndNoChildren ? jsxs(Fragment, {
-            children: [badgeText ? jsx(StyledBadge, {
-              sentiment: badgeSentiment,
-              size: "small",
-              prominence: "strong",
-              disabled: disabled,
-              children: badgeText
-            }) : null, shouldShowPinnedButton ? jsx(Tooltip, {
-              text: isItemPinned ? locales['navigation.unpin.tooltip'] : pinTooltipLocale,
-              placement: "right",
-              children: jsx("div", {
-                style: {
-                  position: 'relative'
-                },
-                children: jsx(ExpandedPinnedButton, {
-                  size: "xsmall",
-                  variant: "ghost",
-                  sentiment: active ? 'primary' : 'neutral',
-                  onClick: event => {
-                    if (isItemPinned) {
-                      unpinItem(id);
-                    } else {
-                      pinItem(id);
-                    }
-                    event.stopPropagation(); // This is to avoid click spread to the parent and change the routing
-                  },
-                  icon: isItemPinned ? 'unpin' : 'pin',
-                  iconVariant: isItemPinned ? 'filled' : 'outlined',
-                  disabled: isItemPinned ? false : isPinDisabled
-                })
-              })
-            }) : null]
-          }) : null, hasHrefAndNoChildren ? jsx(AnimatedIcon, {
-            name: "open-in-new",
-            sentiment: "neutral",
-            prominence: "default",
-            disabled: disabled
-          }) : null, children ? jsx(Stack, {
-            gap: 1,
-            direction: "row",
-            alignItems: "center",
-            children: !animation && !noExpand ? jsx(AnimatedIcon, {
-              name: internalToggle ? 'arrow-down' : 'arrow-right',
-              sentiment: "neutral",
-              prominence: "weak"
-            }) : null
-          }) : null]
-        })]
-      }), children ? jsx(Fragment, {
-        children: !noExpand ? jsx(Expandable, {
-          opened: internalToggle,
-          animationDuration: animation ? ANIMATION_DURATION / 2 : undefined,
-          children: jsx(PaddedStack, {
-            children: renderChildren
-          })
-        }) : jsx(PaddedStack, {
-          children: renderChildren
-        })
-      }) : null]
-    });
-  }
-
-  // This content is the menu of the navigation when collapsed
-  if (categoryIcon || Children.count(children) > 0 && !hasParents) {
-    return jsx(MenuStack, {
-      gap: 1,
-      alignItems: "start",
-      justifyContent: "start",
-      children: Children.count(children) > 0 ? jsx(StyledMenu, {
-        triggerMethod: "click",
-        dynamicDomRendering: false // As we parse the children we don't need dynamic rendering
-        ,
-        disclosure: jsx(Button, {
-          sentiment: "neutral",
-          variant: hasActiveChildren ? 'filled' : 'ghost',
-          size: "small",
-          icon: !categoryIcon ? 'dots-horizontal' : undefined,
-          children: categoryIcon ? jsx(Stack, {
-            direction: "row",
-            gap: 1,
-            alignItems: "center",
-            justifyContent: "center",
-            children: jsx(CategoryIcon, {
-              name: categoryIcon,
-              variant: active ? 'primary' : categoryIconVariant
-            })
-          }) : null
-        }),
-        placement: "right",
-        children: Children.map(children, child => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
-          hasParents: true
-        }) : child)
-      }) : jsx(Tooltip, {
-        text: label,
-        placement: "right",
-        tabIndex: -1,
-        children: jsx(Button, {
-          sentiment: "neutral",
-          variant: active ? 'filled' : 'ghost',
-          size: "small",
-          onClick: () => onClick?.(),
-          children: jsx(Stack, {
-            direction: "row",
-            gap: 1,
-            alignItems: "center",
-            justifyContent: "center",
-            children: jsx(CategoryIcon, {
-              name: categoryIcon ?? 'console',
-              variant: active ? 'primary' : categoryIconVariant
-            })
-          })
-        })
-      })
-    });
-  }
-
-  // This content is what is inside a menu item the navigation is collapsed
-  if (hasParents) {
-    return jsx(StyledMenuItem, {
-      href: href,
-      onClick: () => {
-        onClick?.();
-      },
-      borderless: true,
-      active: active,
-      disabled: disabled,
-      sentiment: active ? 'primary' : 'neutral',
-      isPinnable: shouldShowPinnedButton,
-      children: jsxs(Stack, {
-        gap: 1,
-        direction: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        flex: 1,
-        width: "100%",
-        children: [jsx(WrapText, {
-          as: "span",
-          variant: "bodySmall",
-          children: label
-        }), badgeText ? jsx(StyledBadge, {
-          sentiment: badgeSentiment,
-          size: "small",
-          prominence: "strong",
-          disabled: disabled,
-          children: badgeText
-        }) : null, hasHrefAndNoChildren ? jsx(AnimatedIcon, {
-          name: "open-in-new",
-          sentiment: "neutral",
-          prominence: "weak",
-          disabled: disabled
-        }) : null, shouldShowPinnedButton ? jsx(Tooltip, {
-          text: isItemPinned ? locales['navigation.unpin.tooltip'] : pinTooltipLocale,
-          placement: "right",
-          children: jsx("div", {
-            style: {
-              position: 'relative'
-            },
-            children: jsx(CollapsedPinnedButton, {
-              size: "xsmall",
-              variant: "ghost",
-              sentiment: active ? 'primary' : 'neutral',
-              onClick: event => {
-                if (isItemPinned) {
-                  unpinItem(id);
-                } else {
-                  pinItem(id);
-                }
-                event.stopPropagation(); // This is to avoid click spread to the parent and change the routing
-              },
-              icon: isItemPinned ? 'unpin' : 'pin',
-              iconVariant: isItemPinned ? 'filled' : 'outlined',
-              disabled: isItemPinned ? false : isPinDisabled
-            })
-          })
-        }) : null]
-      })
-    });
-  }
-
-  // This content is for when navigation is collapsed and we show an icon of link
-  if (!hasParents && href) {
-    return jsx(Tooltip, {
-      text: label,
-      placement: "right",
-      children: jsx(MenuStack, {
-        gap: 1,
-        alignItems: "start",
-        justifyContent: "start",
-        children: jsx(Container, {
-          gap: 1,
-          alignItems: "center",
-          justifyContent: "center",
-          href: href,
-          target: "_blank",
-          children: jsx(AnimatedIcon, {
-            name: "open-in-new",
-            sentiment: "neutral",
-            prominence: "weak"
-          })
-        })
-      })
-    });
-  }
-  return null;
-};
-
-export { Item };

package/dist/src/components/Navigation/components/PinnedItems.js

@@ -1,129 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { useTheme } from '@emotion/react';
-import { Text } from '@ultraviolet/ui';
-import { useCallback } from 'react';
-import { useNavigation } from '../NavigationProvider.js';
-import { Item } from './Item.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const DropableArea = /*#__PURE__*/_styled("div", {
-  target: "e5ys0ny2"
-})("position:absolute;right:0;left:0;top:0;height:2px;border-top:2px solid;border-color:transparent;padding:", ({
-  theme
-}) => theme.space['0.5'], " 0;&::before{content:'';position:absolute;left:0;top:-4px;height:0px;width:0px;border:3px solid;border-color:inherit;border-radius:", ({
-  theme
-}) => theme.radii.circle, ";}");
-const RelativeDiv = /*#__PURE__*/_styled("div", {
-  target: "e5ys0ny1"
-})(process.env.NODE_ENV === "production" ? {
-  name: "bjn8wh",
-  styles: "position:relative"
-} : {
-  name: "bjn8wh",
-  styles: "position:relative",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const TextContainer = /*#__PURE__*/_styled("div", {
-  target: "e5ys0ny0"
-})("padding:", ({
-  theme
-}) => theme.space['1'], " 0;padding-left:", ({
-  theme
-}) => theme.space['4'], ";margin-left:", ({
-  theme
-}) => theme.space['0.5'], ";");
-const PinnedItems = ({
-  toggle = true
-}) => {
-  const context = useNavigation();
-  if (!context) {
-    throw new Error('Navigation.PinnedItems can only be used inside a NavigationProvider.');
-  }
-  const {
-    locales,
-    pinnedItems,
-    pinnedFeature,
-    reorderItems,
-    expanded,
-    items
-  } = context;
-  const theme = useTheme();
-  const onDrop = useCallback((event, index) => {
-    event.preventDefault();
-    if (event?.dataTransfer) {
-      // eslint-disable-next-line no-param-reassign
-      event.currentTarget.style.borderColor = 'transparent';
-      const data = JSON.parse(event.dataTransfer.getData('text'));
-      if (data.index === index - 1 || index > data.index) {
-        reorderItems(data.index, index - 1);
-        return;
-      }
-      reorderItems(data.index, index);
-    }
-  }, [reorderItems]);
-  const onDragOver = useCallback(event => {
-    event.preventDefault();
-    // eslint-disable-next-line no-param-reassign
-    event.currentTarget.style.borderColor = theme.colors.primary.border;
-  }, [theme.colors.primary.border]);
-  const onDragLeave = useCallback(event => {
-    event.preventDefault();
-    // eslint-disable-next-line no-param-reassign
-    event.currentTarget.style.borderColor = 'transparent';
-  }, []);
-  if (Object.keys(items).length === 0) {
-    return null;
-  }
-  if (pinnedFeature) {
-    return jsx("div", {
-      children: jsxs(Item, {
-        label: locales['navigation.pinned.item.group.label'],
-        categoryIcon: "pin",
-        categoryIconVariant: "neutral",
-        toggle: toggle,
-        type: "pinnedGroup",
-        id: "pinned-group",
-        children: [pinnedItems.length > 0 ? pinnedItems.map((itemId, index) => jsxs("div", {
-          style: {
-            position: expanded ? 'relative' : undefined
-          },
-          children: [expanded ? jsx(DropableArea, {
-            onDragOver: onDragOver,
-            onDragLeave: onDragLeave,
-            onDrop: event => onDrop(event, index)
-          }) : null, jsx(Item, {
-            label: items[itemId]?.label ?? 'Unknown navigation item',
-            type: "pinned",
-            index: index,
-            toggle: toggle,
-            id: itemId,
-            active: items[itemId]?.active ?? false,
-            onClick: items[itemId]?.onClick ?? undefined,
-            hasParents: true
-          })]
-        }, itemId)) : jsx(TextContainer, {
-          children: jsx(Text, {
-            as: "p",
-            variant: "caption",
-            prominence: "weak",
-            sentiment: "neutral",
-            children: locales['navigation.pinned.item.group.empty']
-          })
-        }), expanded ? jsx(RelativeDiv, {
-          style: {
-            position: 'relative'
-          },
-          children: jsx(DropableArea, {
-            onDragOver: onDragOver,
-            onDragLeave: onDragLeave,
-            onDrop: event => onDrop(event, pinnedItems.length)
-          })
-        }) : null]
-      })
-    });
-  }
-  return null;
-};
-
-export { PinnedItems };

package/dist/src/components/Navigation/components/Separator.js

@@ -1,12 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Separator as Separator$1 } from '@ultraviolet/ui';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const StyledSeparator = /*#__PURE__*/_styled(Separator$1, {
-  target: "e1tbaa9b0"
-})("margin:", ({
-  theme
-}) => `${theme.space['2']} -${theme.space['2']}`, ";");
-const Separator = () => jsx(StyledSeparator, {});
-
-export { Separator };