@ultraviolet/plus 0.15.0 → 0.15.2

package/dist/src/components/EstimateCost/OverlayComponent.js

@@ -1,129 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Stack, Icon } from '@ultraviolet/ui';
-import { useMemo, Children, isValidElement, cloneElement } from 'react';
-import { LineThrough } from './Components/LineThrough.js';
-import { Strong } from './Components/Strong.js';
-import { useEstimateCost } from './EstimateCostProvider.js';
-import { OverlayContextProvider } from './OverlayContext.js';
-import { OverlayRow, ItemResourceName, StyledBadge } from './componentStyle.js';
-import { multiplier, maximumFractionDigits } from './constants.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 OverlayContainer = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['inView', 'overlayMargin'].includes(prop),
-  target: "e1p62vjs2"
-})("position:fixed;left:0;right:0;bottom:", ({
-  inView
-}) => inView ? -120 : 0, "px;height:120px;background-color:", ({
-  theme
-}) => theme.colors.neutral.background, ";margin:", ({
-  overlayMargin
-}) => overlayMargin || '0', ";display:flex;justify-content:center;box-shadow:", ({
-  inView,
-  theme
-}) => inView ? '0' : theme.shadows.defaultShadow, ";transition:bottom 0.3s,box-shadow 0.3s;");
-const List = /*#__PURE__*/_styled("ul", {
-  target: "e1p62vjs1"
-})("display:flex;flex-direction:row;justify-content:center;list-style:none;margin:0;padding:", ({
-  theme
-}) => theme.space['3'], " 0;");
-const SideItem = /*#__PURE__*/_styled("li", {
-  target: "e1p62vjs0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "wpiop9",
-  styles: "display:flex;padding:12px 0;min-width:158px"
-} : {
-  name: "wpiop9",
-  styles: "display:flex;padding:12px 0;min-width:158px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const OverlayComponent = ({
-  children,
-  inView = false,
-  discount = 1,
-  OverlayRight,
-  disableOverlayRight = false,
-  OverlayLeft,
-  disableOverlayLeft = false,
-  totalPrice,
-  unit = 'hours',
-  isBeta = false,
-  overlayMargin
-}) => {
-  const {
-    locales,
-    formatNumber
-  } = useEstimateCost();
-  const value = useMemo(() => ({
-    isOverlay: true
-  }), []);
-  const totalOverlayPrice = {
-    days: totalPrice.maxOverlayHourly * multiplier.days,
-    hours: totalPrice.maxOverlayHourly,
-    minutes: totalPrice.maxOverlayHourly * multiplier.minutes,
-    seconds: totalPrice.maxOverlayHourly * multiplier.seconds,
-    months: totalPrice.maxOverlayHourly * multiplier.months
-  }[unit];
-  const overlayPrice = {
-    days: totalPrice.overlayHourly * multiplier.days,
-    hours: totalPrice.overlayHourly,
-    minutes: totalPrice.overlayHourly * multiplier.minutes,
-    seconds: totalPrice.overlayHourly * multiplier.seconds,
-    months: totalPrice.overlayHourly * multiplier.months
-  }[unit];
-  return jsx(OverlayContextProvider, {
-    value: value,
-    children: jsx(OverlayContainer, {
-      inView: inView,
-      "data-testid": "summary-overlay",
-      overlayMargin: overlayMargin,
-      children: jsxs(List, {
-        children: [OverlayLeft ? jsx(SideItem, {
-          children: jsx(OverlayLeft, {
-            disabled: disableOverlayLeft,
-            children: locales['estimate.cost.submit.label']
-          })
-        }) : null, Children.map(children, (child, index) => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
-          isFirstElement: index === 0,
-          isLastElement: index === Children.count(children) - 1
-        }) : null), jsxs(OverlayRow, {
-          children: [jsxs(Stack, {
-            direction: "row",
-            alignItems: "center",
-            gap: 1,
-            children: [jsx(Icon, {
-              name: "calculator",
-              color: "primary",
-              size: 20
-            }), locales['estimate.cost.label']]
-          }), jsxs(ItemResourceName, {
-            animated: false,
-            children: [jsx(Strong, {
-              variant: "big",
-              children: jsxs(LineThrough, {
-                isActive: isBeta && discount === 0,
-                children: [formatNumber(overlayPrice, {
-                  maximumFractionDigits: maximumFractionDigits[unit]
-                }), totalOverlayPrice > 0 ? ` - ${formatNumber(totalOverlayPrice, {
-                  maximumFractionDigits: maximumFractionDigits[unit]
-                })}` : null, "/", locales[`estimate.cost.units.${unit}.label`]]
-              })
-            }), isBeta ? jsxs(StyledBadge, {
-              prominence: "strong",
-              sentiment: "warning",
-              children: [discount > 0 ? discount * 100 : '', locales[`estimate.cost.beta.${discount > 0 ? 'discount' : 'free'}`]]
-            }) : null]
-          })]
-        }), OverlayRight ? jsx(SideItem, {
-          children: jsx(OverlayRight, {
-            disabled: disableOverlayRight,
-            children: locales['estimate.cost.submit.label']
-          })
-        }) : null]
-      })
-    })
-  });
-};
-
-export { OverlayComponent };

package/dist/src/components/EstimateCost/OverlayContext.js

@@ -1,16 +0,0 @@
-import { useContext, createContext } from 'react';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-const OverlayContext = /*#__PURE__*/createContext({
-  isOverlay: false
-});
-const useOverlay = () => useContext(OverlayContext);
-const OverlayContextProvider = ({
-  children,
-  value
-}) => jsx(OverlayContext.Provider, {
-  value: value,
-  children: children
-});
-
-export { OverlayContextProvider, useOverlay };

package/dist/src/components/EstimateCost/componentStyle.js

@@ -1,149 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { css } from '@emotion/react';
-import { Badge, zoomIn } from '@ultraviolet/ui';
-import { MAX_CELL_WIDTH } from './constants.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 spacedChildren = process.env.NODE_ENV === "production" ? {
-  name: "14bpf6g",
-  styles: ">*{margin-top:0;}>*+*{margin-top:16px;}"
-} : {
-  name: "14bpf6g",
-  styles: ">*{margin-top:0;}>*+*{margin-top:16px;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const StyledDiv = /*#__PURE__*/_styled("div", {
-  target: "e1xb5k8j15"
-})(process.env.NODE_ENV === "production" ? {
-  name: "158icaa",
-  styles: "margin-left:4px"
-} : {
-  name: "158icaa",
-  styles: "margin-left:4px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledTable = /*#__PURE__*/_styled('table', {
-  shouldForwardProp: prop => !['noTotal'].includes(prop),
-  target: "e1xb5k8j14"
-})("width:100%;", spacedChildren, ";border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";", ({
-  noTotal
-}) => noTotal ? 'border-radius: 4px;' : 'border-radius: 4px 4px 0 4px;', ";");
-const StyledFeesTable = /*#__PURE__*/_styled('table', {
-  target: "e1xb5k8j13"
-})("width:100%;", spacedChildren, ";border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";border-radius:4px;margin-top:16px;");
-const PriceCol = /*#__PURE__*/_styled("col", {
-  target: "e1xb5k8j12"
-})("background-color:", ({
-  theme
-}) => theme.colors.neutral.background, ";");
-const PriceCell = theme => /*#__PURE__*/css("border-left:1px solid ", theme.colors.neutral.border, ";background-color:", theme.colors.neutral.backgroundWeak, ";");
-const Cell = /*#__PURE__*/_styled('td', {
-  shouldForwardProp: prop => !['tabulation', 'hasBorder', 'primary'].includes(prop),
-  target: "e1xb5k8j11"
-})("padding-left:", ({
-  tabulation
-}) => (tabulation ?? 0) * 8 + 16, "px;padding-right:16px;position:relative;max-width:", MAX_CELL_WIDTH, ";", ({
-  theme,
-  hasBorder
-}) => hasBorder && /*#__PURE__*/css("&:before{content:'';position:absolute;left:0;bottom:0;height:1px;width:calc(100% - 32px);margin-left:16px;border-bottom:1px solid ", theme.colors.neutral.border, ";}"), " ", ({
-  theme,
-  primary
-}) => primary ? /*#__PURE__*/css("background:", theme.colors.primary.background, ";") : null, ";");
-const TotalPriceCell = /*#__PURE__*/_styled(Cell, {
-  target: "e1xb5k8j10"
-})("border-color:", ({
-  theme
-}) => theme.colors.neutral.border, ";border-style:solid;border-width:0 1px 1px 1px;border-radius:0 0 4px 4px;min-width:202px;height:56px;background-color:", ({
-  theme
-}) => theme.colors.primary.background, ";");
-const EmptyTable = /*#__PURE__*/_styled("table", {
-  target: "e1xb5k8j9"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1bmvmcg",
-  styles: "margin:0;width:100%"
-} : {
-  name: "1bmvmcg",
-  styles: "margin:0;width:100%",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Title = /*#__PURE__*/_styled("h3", {
-  target: "e1xb5k8j8"
-})("display:flex;align-items:center;padding:0;margin:0;font-size:18px;color:", ({
-  theme
-}) => theme.colors.neutral.text, ";font-weight:500;padding:", ({
-  theme
-}) => theme.space['2'], ";");
-const EmptyCell = /*#__PURE__*/_styled("td", {
-  target: "e1xb5k8j7"
-})(process.env.NODE_ENV === "production" ? {
-  name: "22sgtr",
-  styles: "width:538px"
-} : {
-  name: "22sgtr",
-  styles: "width:538px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const TimeCell = /*#__PURE__*/_styled("div", {
-  target: "e1xb5k8j6"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1dh7njz",
-  styles: "max-width:200px;padding:16px;align-items:start;text-align:left;float:right"
-} : {
-  name: "1dh7njz",
-  styles: "max-width:200px;padding:16px;align-items:start;text-align:left;float:right",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const BadgeBeta = /*#__PURE__*/_styled(Badge, {
-  shouldForwardProp: prop => !['long'].includes(prop),
-  target: "e1xb5k8j5"
-})("margin-left:", ({
-  long
-}) => long ? '-185px' : '-115px', ";position:absolute;top:calc(50% - 16px);");
-const StyledTr = /*#__PURE__*/_styled('tr', {
-  shouldForwardProp: prop => !['isFirstElement', 'shouldBeHidden', 'hideFromOverlay'].includes(prop),
-  target: "e1xb5k8j4"
-})();
-const OverlayRow = /*#__PURE__*/_styled('li', {
-  shouldForwardProp: prop => !['isFirstElement', 'shouldBeHidden', 'hideFromOverlay'].includes(prop),
-  target: "e1xb5k8j3"
-})("min-width:200px;padding:0 24px;border-left:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";", ({
-  isFirstElement
-}) => isFirstElement && `border: 0;`, " &:first-of-type,&:last-child{border:0;}@media (max-width: 1420px){", ({
-  shouldBeHidden
-}) => shouldBeHidden && 'display: none;', ";}", ({
-  hideFromOverlay
-}) => hideFromOverlay && 'display: none;', ";");
-const StyledLeftSide = /*#__PURE__*/_styled("div", {
-  target: "e1xb5k8j2"
-})(process.env.NODE_ENV === "production" ? {
-  name: "1x1yonv",
-  styles: "display:flex;flex-direction:row;-webkit-box-pack:justify;justify-content:space-between;align-items:center;min-height:56px;padding-top:8px;padding-bottom:8px"
-} : {
-  name: "1x1yonv",
-  styles: "display:flex;flex-direction:row;-webkit-box-pack:justify;justify-content:space-between;align-items:center;min-height:56px;padding-top:8px;padding-bottom:8px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const ItemResourceName = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['animated'].includes(prop),
-  target: "e1xb5k8j1"
-})("height:48px;display:flex;flex-direction:column;-webkit-box-pack:center;justify-content:center;animation:", ({
-  animated
-}) => animated ? /*#__PURE__*/css("800ms ", zoomIn, ";") : '', ";");
-const StyledBadge = /*#__PURE__*/_styled(Badge, {
-  target: "e1xb5k8j0"
-})(process.env.NODE_ENV === "production" ? {
-  name: "72s22w",
-  styles: "display:inline-block;height:24px;line-height:18px;font-size:12px;margin-right:8px"
-} : {
-  name: "72s22w",
-  styles: "display:inline-block;height:24px;line-height:18px;font-size:12px;margin-right:8px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-
-export { BadgeBeta, Cell, EmptyCell, EmptyTable, ItemResourceName, OverlayRow, PriceCell, PriceCol, StyledBadge, StyledDiv, StyledFeesTable, StyledLeftSide, StyledTable, StyledTr, TimeCell, Title, TotalPriceCell };

package/dist/src/components/EstimateCost/locales/en.js

@@ -1,23 +0,0 @@
-var EstimateCostLocales = {
-  'estimate.cost.description': 'This summary provides a cost estimation based on your configuration, the amount of time you expect to use the resource for, and the scale of your expected usage. For the purposes of this calculation, we consider that 1 month equals to 730 hours.',
-  'estimate.cost.label': 'Estimated cost',
-  'estimate.cost.beta.free': 'Free During Beta',
-  'estimate.cost.beta.discount': '% off during Beta',
-  'estimate.cost.beta.badge': 'Beta Version',
-  'estimate.cost.units.seconds.label': 'Second(s)',
-  'estimate.cost.units.minutes.label': 'Minute(s)',
-  'estimate.cost.units.hours.label': 'Hour(s)',
-  'estimate.cost.units.days.label': 'Day(s)',
-  'estimate.cost.units.months.label': 'Month(s)',
-  'estimate.cost.units.years.label': 'Year(s)',
-  'estimate.cost.fees.oneTime.title': 'One time fees',
-  'estimate.cost.fees.monthly.title': 'Each month',
-  'estimate.cost.fees.commitment': 'Commitment Fees',
-  'estimate.cost.units.gb.label': 'GB',
-  'estimate.cost.notDefined': 'Not defined',
-  'estimate.cost.submit.label': 'Create',
-  'estimate.cost.region.label': 'Region',
-  'estimate.cost.az.label': 'Availability Zone'
-};
-
-export { EstimateCostLocales as default };

package/dist/src/components/FAQ/index.js

@@ -1,49 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Stack, Bullet, Text, Card } from '@ultraviolet/ui';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-import { ProductIcon } from '../../../@ultraviolet/icons/dist/components/ProductIcon/index.js';
-
-const StyledCard = /*#__PURE__*/_styled(Card, {
-  target: "ebaosvo0"
-})("padding:", ({
-  theme
-}) => theme.space['2'], ";text-align:left;");
-const FAQ = ({
-  productIconName,
-  illustrationText,
-  title,
-  description,
-  notes
-}) => jsx(StyledCard, {
-  children: jsxs(Stack, {
-    gap: 2,
-    direction: "row",
-    children: [jsxs("div", {
-      children: [!productIconName && illustrationText ? jsx(Bullet, {
-        sentiment: "primary",
-        text: illustrationText.toString()
-      }) : null, productIconName ? jsx(ProductIcon, {
-        name: productIconName,
-        size: "xlarge"
-      }) : null]
-    }), jsxs("div", {
-      children: [jsx(Text, {
-        as: "p",
-        variant: "bodyStronger",
-        prominence: "strong",
-        children: title
-      }), jsxs(Text, {
-        as: "div",
-        variant: "bodySmall",
-        children: [description, notes ? jsx(Text, {
-          variant: "caption",
-          as: "small",
-          italic: true,
-          children: notes
-        }) : null]
-      })]
-    })]
-  })
-});
-
-export { FAQ };

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

@@ -1,31 +0,0 @@
-import { NavigationContent } from './NavigationContent.js';
-import { Group } from './components/Group.js';
-import { Item } from './components/Item.js';
-import { PinnedItems } from './components/PinnedItems.js';
-import { Separator } from './components/Separator.js';
-import { jsx } from '@emotion/react/jsx-runtime';
-
-/**
- * Navigation is a component that allows you to create a sidebar navigation.
- * You can wrap your navigation items like `<Navigation.Item>` with your router
- * to make it work in your application.
- */
-const Navigation = ({
-  children,
-  logo,
-  onWidthResize,
-  className,
-  id
-}) => jsx(NavigationContent, {
-  logo: logo,
-  className: className,
-  onWidthResize: onWidthResize,
-  id: id,
-  children: children
-});
-Navigation.Group = Group;
-Navigation.Item = Item;
-Navigation.PinnedItems = PinnedItems;
-Navigation.Separator = Separator;
-
-export { Navigation };

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

@@ -1,222 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Tooltip, Button, Stack } from '@ultraviolet/ui';
-import { useRef, useCallback, useState, useEffect } from 'react';
-import { useNavigation } from './NavigationProvider.js';
-import { NAVIGATION_MAX_WIDTH, NAVIGATION_MIN_WIDTH, NAVIGATION_COLLASPED_WIDTH, ANIMATION_DURATION } from './constants.js';
-import { jsxs, jsx } 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 StyledNav = /*#__PURE__*/_styled("nav", {
-  target: "esezfu57"
-})("display:flex;flex-direction:row;position:relative;border-right:1px solid ", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";");
-const Container = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['width'].includes(prop),
-  target: "esezfu56"
-})("background:", ({
-  theme
-}) => theme.colors.neutral.background, ";display:flex;flex-direction:column;width:", ({
-  width
-}) => width, "px;&[data-expanded='true'][data-animation='false']{max-width:", NAVIGATION_MAX_WIDTH, "px;min-width:", NAVIGATION_MIN_WIDTH, "px;}&[data-expanded='false']{width:", NAVIGATION_COLLASPED_WIDTH, "px;}&[data-animation='expand']{transition:width ", ANIMATION_DURATION, "ms ease-in-out;width:", ({
-  width
-}) => width, "px;}&[data-animation='collapse']{transition:width ", ANIMATION_DURATION, "ms ease-in-out;width:", NAVIGATION_COLLASPED_WIDTH, "px;}");
-const StickyFooter = /*#__PURE__*/_styled("div", {
-  target: "esezfu55"
-})("display:flex;width:100%;background:", ({
-  theme
-}) => theme.colors.neutral.background, ";border-top:1px solid ", ({
-  theme
-}) => theme.colors.neutral.borderWeak, ";padding:", ({
-  theme
-}) => `${theme.space['1']} ${theme.space['2']}`, ";transition:justify-content ", ANIMATION_DURATION, "ms ease-in-out;box-shadow:", ({
-  theme
-}) => theme.shadows.defaultShadow, ";transition:box-shadow 230ms ease-in-out;justify-content:flex-end;&[data-has-overflow-style='false']{box-shadow:none;border:none;}");
-const Header = /*#__PURE__*/_styled("div", {
-  target: "esezfu54"
-})("background:", ({
-  theme
-}) => theme.colors.neutral.background, ";");
-const LogoContainer = /*#__PURE__*/_styled(Stack, {
-  target: "esezfu53"
-})("margin:", ({
-  theme
-}) => `${theme.space['3']} ${theme.space['3']} ${theme.space['2']} ${theme.space['3']}`, ";max-width:220px;height:22px;");
-const ContentContainer = /*#__PURE__*/_styled("div", {
-  target: "esezfu52"
-})(process.env.NODE_ENV === "production" ? {
-  name: "12is9id",
-  styles: "overflow:hidden;display:flex;flex-direction:column;flex-grow:1"
-} : {
-  name: "12is9id",
-  styles: "overflow:hidden;display:flex;flex-direction:column;flex-grow:1",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const Content = /*#__PURE__*/_styled(Stack, {
-  target: "esezfu51"
-})("overflow-y:auto;overflow-x:hidden;flex-grow:1;&[data-is-expanded='false']{padding:", ({
-  theme
-}) => theme.space['2'], " 0;}&[data-is-expanded='true'],&[data-animation='expand']{padding:", ({
-  theme
-}) => theme.space['2'], ";}");
-const Slider = /*#__PURE__*/_styled("div", {
-  target: "esezfu50"
-})("background:transparent;position:absolute;top:0;bottom:0;right:0;width:6px;cursor:col-resize;border-right:2px solid transparent;display:flex;&:hover{border-color:", ({
-  theme
-}) => theme.colors.primary.border, ";}");
-const NavigationContent = ({
-  children,
-  logo,
-  onWidthResize,
-  className,
-  id
-}) => {
-  const context = useNavigation();
-  if (!context) {
-    throw new Error('Navigation should be inside NavigationProvider to use it properly.');
-  }
-  const {
-    setWidth,
-    width,
-    expanded,
-    toggleExpand,
-    animation,
-    locales,
-    navigationRef
-  } = context;
-  const sliderRef = useRef(null);
-  const contentRef = useRef(null);
-  const isScrollAtBottom = useCallback(() => {
-    if (contentRef.current) {
-      if (contentRef.current.scrollTop + contentRef.current.offsetHeight >= contentRef.current.scrollHeight) {
-        return false;
-      }
-    }
-    return true;
-  }, []);
-  const [footerHasOverflowStyle, setFooterHasOverflowStyle] = useState(isScrollAtBottom());
-
-  // This is for detecting if there is scroll on the content and set the shadow on the footer
-  useEffect(() => {
-    const scroll = () => {
-      const hasOverflow = isScrollAtBottom();
-      if (footerHasOverflowStyle !== hasOverflow) {
-        setFooterHasOverflowStyle(hasOverflow);
-      }
-    };
-    if (contentRef.current) {
-      contentRef.current.addEventListener('scroll', scroll);
-    }
-    return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      contentRef.current?.removeEventListener('scroll', scroll);
-    };
-  }, [footerHasOverflowStyle, isScrollAtBottom]);
-
-  // This will set the shadow on the footer when the component is mounted
-  useEffect(() => {
-    setFooterHasOverflowStyle(isScrollAtBottom());
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [contentRef.current]);
-
-  // It will handle the resize of the navigation when the user drag the vertical bar
-  useEffect(() => {
-    let prevX;
-    let navRect;
-    let shouldCollapseOnMouseUp = false;
-    let shouldExpandOnMouseUp = false;
-    const mouseMove = event => {
-      if (prevX !== undefined) {
-        const navWidth = navRect?.width ?? 0;
-        const newWidth = navWidth + (event.clientX - prevX);
-        if (navigationRef.current && expanded) {
-          navigationRef.current.style.width = `${newWidth}px`;
-        }
-        if (newWidth <= NAVIGATION_MIN_WIDTH) {
-          shouldCollapseOnMouseUp = true;
-        } else {
-          shouldCollapseOnMouseUp = false;
-        }
-        if (newWidth >= NAVIGATION_COLLASPED_WIDTH && !expanded) {
-          shouldExpandOnMouseUp = true;
-        } else {
-          shouldExpandOnMouseUp = false;
-        }
-      }
-    };
-    const mousedown = event => {
-      document.body.style.pointerEvents = 'none';
-      document.body.style.userSelect = 'none';
-      prevX = event.clientX;
-      navRect = navigationRef.current?.getBoundingClientRect();
-      const mouseup = () => {
-        if (shouldCollapseOnMouseUp || shouldExpandOnMouseUp) {
-          toggleExpand();
-        }
-        if (navigationRef.current) {
-          if (!shouldCollapseOnMouseUp && !shouldExpandOnMouseUp) {
-            onWidthResize?.(navigationRef.current.offsetWidth);
-            setWidth?.(navigationRef.current.offsetWidth);
-          }
-          if (!expanded) {
-            navigationRef.current.style.width = '';
-          }
-        }
-        document.removeEventListener('mousemove', mouseMove);
-        window.removeEventListener('mouseup', mouseup);
-        document.body.style.pointerEvents = '';
-        document.body.style.userSelect = '';
-      };
-      document.addEventListener('mousemove', mouseMove);
-      window.addEventListener('mouseup', mouseup);
-    };
-    sliderRef.current?.addEventListener('mousedown', mousedown);
-    return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      sliderRef.current?.removeEventListener('mousedown', mousedown);
-    };
-  }, [expanded, navigationRef, onWidthResize, setWidth, toggleExpand]);
-  return jsxs(StyledNav, {
-    className: className,
-    id: id,
-    children: [jsxs(Container, {
-      ref: navigationRef,
-      "data-animation": animation,
-      "data-expanded": expanded,
-      width: width,
-      children: [jsx(Header, {
-        children: jsx(LogoContainer, {
-          justifyContent: !expanded ? 'center' : undefined,
-          alignItems: "start",
-          children: typeof logo === 'function' ? logo(animation ? false : expanded) : logo
-        })
-      }), jsxs(ContentContainer, {
-        children: [jsx(Content, {
-          ref: contentRef,
-          gap: 0.25,
-          "data-is-expanded": expanded,
-          "data-animation": animation,
-          children: children
-        }), jsx(StickyFooter, {
-          "data-has-overflow-style": footerHasOverflowStyle,
-          children: jsx(Tooltip, {
-            text: expanded ? locales['navigation.collapse.button'] : locales['navigation.expand.button'],
-            placement: "right",
-            children: jsx(Button, {
-              variant: "ghost",
-              sentiment: "neutral",
-              size: "small",
-              icon: expanded ? 'arrow-left-double' : 'arrow-right-double',
-              onClick: () => toggleExpand()
-            })
-          })
-        })]
-      })]
-    }), jsx(Slider, {
-      ref: sliderRef
-    })]
-  });
-};
-
-export { NavigationContent };

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

@@ -1,55 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Text, Stack } from '@ultraviolet/ui';
-import { Children } from 'react';
-import { useNavigation } from '../NavigationProvider.js';
-import { ANIMATION_DURATION, groupAnimation } from '../constants.js';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-const StyledText = /*#__PURE__*/_styled(Text, {
-  target: "eh4zgrv2"
-})("padding-bottom:", ({
-  theme
-}) => theme.space['1'], ";padding-left:", ({
-  theme
-}) => theme.space['1'], ";transition:opacity ", ANIMATION_DURATION, "ms ease-in-out,height ", ANIMATION_DURATION, "ms ease-in-out;height:", ({
-  theme
-}) => `calc(${theme.typography.bodySmallStrong.lineHeight} + ${theme.space['1']})`, ";");
-const StyledStack = /*#__PURE__*/_styled(Stack, {
-  target: "eh4zgrv1"
-})("padding-top:", ({
-  theme
-}) => theme.space['1'], ";");
-const Container = /*#__PURE__*/_styled("div", {
-  target: "eh4zgrv0"
-})("&[data-animation='expand']{", StyledText, "{animation:", groupAnimation, " ", ANIMATION_DURATION, "ms ease-in-out;}}&[data-animation='collapse']{", StyledText, "{animation:", groupAnimation, " ", ANIMATION_DURATION, "ms ease-in-out reverse;}}");
-const Group = ({
-  children,
-  label
-}) => {
-  const context = useNavigation();
-  if (!context) {
-    throw new Error('Navigation.Group can only be used inside a NavigationProvider.');
-  }
-  const {
-    expanded,
-    animation
-  } = context;
-  if (Children.count(children) > 0) {
-    return jsx(Container, {
-      "data-animation": animation,
-      children: jsxs(StyledStack, {
-        direction: "column",
-        children: [expanded || animation === 'expand' ? jsx(StyledText, {
-          as: "span",
-          variant: "bodySmallStrong",
-          sentiment: "neutral",
-          prominence: "weak",
-          children: label
-        }) : null, children]
-      })
-    });
-  }
-  return null;
-};
-
-export { Group };