@ultraviolet/plus 0.10.6 → 0.11.0

package/dist/@ultraviolet/icons/dist/components/CategoryIcon/assets/use-case.svg.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { memo } from 'react';
+
+var _g;
+var SvgUseCase = function SvgUseCase(props) {
+  return /*#__PURE__*/React.createElement("svg", props, _g || (_g = /*#__PURE__*/React.createElement("g", {
+    className: "UseCase"
+  }, /*#__PURE__*/React.createElement("g", {
+    className: "Group 1188"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#A365F6",
+    d: "M13.937 8.867c-.266-.091-.649-.105-1.066.062a1 1 0 0 1-.742-1.857c.84-.337 1.715-.35 2.453-.099a1 1 0 0 1-.645 1.894m0 3.1c-.266-.091-.649-.105-1.066.061a1 1 0 0 1-.742-1.857c.84-.336 1.715-.35 2.453-.098a1 1 0 0 1-.645 1.893Z",
+    className: "fillStrong",
+    clipRule: "evenodd",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#4F0599",
+    d: "M4 6.098v7.477c1.527-.356 3.24-.458 5 .132V6.4c-1.773-.86-3.482-.889-5-.303Zm7 .267v7.303c.82-.31 1.634-.48 2.462-.512a8.083 8.083 0 0 1 2.538.323V6.102c-1.576-.594-3.47-.55-5 .263M9.97 4.648c-2.56-1.275-5.16-1.222-7.417-.094A1 1 0 0 0 2 5.448v9.45a1 1 0 0 0 1.316.95c1.982-.661 4.096-.927 6.188.269a1 1 0 0 0 .992 0c1.114-.637 2.096-.927 3.042-.963.95-.037 1.939.18 3.068.664a1 1 0 0 0 1.394-.92v-9.45a1 1 0 0 0-.553-.894c-2.216-1.108-5.126-1.2-7.478.094Z",
+    className: "fill",
+    clipRule: "evenodd",
+    fillRule: "evenodd"
+  })))));
+};
+var Memo = /*#__PURE__*/memo(SvgUseCase);
+
+export { Memo as ReactComponent };

package/dist/@ultraviolet/icons/dist/components/CategoryIcon/assets/vpc.svg.js

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { memo } from 'react';
+
+var _g;
+var SvgVpc = function SvgVpc(props) {
+  return /*#__PURE__*/React.createElement("svg", props, _g || (_g = /*#__PURE__*/React.createElement("g", {
+    className: "VPC"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#A365F6",
+    d: "M9.087 10.408a.993.993 0 0 1 .51-1.32.997.997 0 0 1 1.317.503 1.008 1.008 0 0 1-.51 1.327 1.086 1.086 0 0 1-.407.082.988.988 0 0 1-.91-.592",
+    className: "fillStrong",
+    clipRule: "evenodd",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#4F0599",
+    d: "m10 2.345 6.63 3.828v7.654L10 17.655l-6.63-3.828V6.173zm0 2.31L5.37 7.327v5.346L10 15.345l4.63-2.672V7.327z",
+    className: "fill",
+    clipRule: "evenodd",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#A365F6",
+    d: "M8.63 17.112a1.49 1.49 0 0 1 .765-1.981c.753-.338 1.639 0 1.976.756a1.513 1.513 0 0 1-.764 1.99 1.63 1.63 0 0 1-.612.123c-.57 0-1.121-.326-1.365-.888",
+    className: "fillStrong",
+    clipRule: "evenodd",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#A365F6",
+    d: "M10 17.5a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 1 0v4a.5.5 0 0 1-.5.5m4.13-3.388a1.49 1.49 0 0 1 .765-1.981c.753-.338 1.639 0 1.976.756a1.513 1.513 0 0 1-.764 1.99 1.63 1.63 0 0 1-.612.123c-.57 0-1.121-.326-1.365-.888m-11 0a1.49 1.49 0 0 1 .765-1.981c.753-.338 1.639 0 1.976.756a1.513 1.513 0 0 1-.764 1.99 1.63 1.63 0 0 1-.612.123c-.57 0-1.121-.326-1.365-.888",
+    className: "fillStrong",
+    clipRule: "evenodd",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#A365F6",
+    d: "M16.416 14.277a.5.5 0 0 1-.693.139l-3-2a.5.5 0 0 1 .554-.832l3 2a.5.5 0 0 1 .139.693m-12.832 0a.5.5 0 0 1 .139-.693l3-2a.5.5 0 1 1 .554.832l-3 2a.5.5 0 0 1-.693-.139M14.13 7.112a1.49 1.49 0 0 1 .765-1.981c.753-.338 1.639 0 1.976.756a1.513 1.513 0 0 1-.764 1.99 1.63 1.63 0 0 1-.612.123c-.57 0-1.121-.326-1.365-.888",
+    className: "fillStrong",
+    clipRule: "evenodd",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#A365F6",
+    d: "M16.416 5.723a.5.5 0 0 1-.139.693l-3 2a.5.5 0 1 1-.554-.832l3-2a.5.5 0 0 1 .693.139M3.13 7.112a1.49 1.49 0 0 1 .765-1.981c.753-.338 1.639 0 1.976.756a1.513 1.513 0 0 1-.764 1.99A1.63 1.63 0 0 1 4.495 8c-.57 0-1.121-.326-1.365-.888",
+    className: "fillStrong",
+    clipRule: "evenodd",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#A365F6",
+    d: "M3.584 5.723a.5.5 0 0 1 .693-.139l3 2a.5.5 0 0 1-.554.832l-3-2a.5.5 0 0 1-.139-.693M8.63 4.112a1.49 1.49 0 0 1 .765-1.981c.753-.338 1.639 0 1.976.756a1.513 1.513 0 0 1-.764 1.99A1.63 1.63 0 0 1 9.995 5c-.57 0-1.121-.326-1.365-.888",
+    className: "fillStrong",
+    clipRule: "evenodd",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#A365F6",
+    d: "M10 3.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-1 0V4a.5.5 0 0 1 .5-.5",
+    className: "fillStrong",
+    clipRule: "evenodd",
+    fillRule: "evenodd"
+  }))));
+};
+var Memo = /*#__PURE__*/memo(SvgVpc);
+
+export { Memo as ReactComponent };

package/dist/@ultraviolet/icons/dist/components/CategoryIcon/assets/web-hosting.svg.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { memo } from 'react';
+
+var _g;
+var SvgWebHosting = function SvgWebHosting(props) {
+  return /*#__PURE__*/React.createElement("svg", props, _g || (_g = /*#__PURE__*/React.createElement("g", {
+    className: "Webhosting"
+  }, /*#__PURE__*/React.createElement("g", {
+    className: "Webhosting-icon"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#4F0599",
+    d: "M3.534 8.221A6.394 6.394 0 0 1 9.92 1.833a6.394 6.394 0 0 1 6.388 6.388c0 2.7-1.36 5.023-2.628 6.618a17.014 17.014 0 0 1-2.728 2.735l-1.031.788-1.032-.788a17.01 17.01 0 0 1-2.729-2.735C4.893 13.244 3.534 10.92 3.534 8.22ZM9.92 4.167A4.06 4.06 0 0 0 5.867 8.22c0 1.93.99 3.743 2.12 5.165a15.407 15.407 0 0 0 1.934 2.016c.44-.38 1.193-1.083 1.934-2.015 1.131-1.423 2.12-3.236 2.12-5.166a4.06 4.06 0 0 0-4.054-4.054Z",
+    className: "fill",
+    clipRule: "evenodd",
+    fillRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#A365F6",
+    d: "M9.84 6.043a2.025 2.025 0 1 0 0 4.05 2.025 2.025 0 0 0 0-4.05",
+    className: "fillStrong"
+  })))));
+};
+var Memo = /*#__PURE__*/memo(SvgWebHosting);
+
+export { Memo as ReactComponent };

package/dist/@ultraviolet/icons/dist/components/CategoryIcon/index.js

@@ -0,0 +1,27 @@
+import _styled from '@emotion/styled/base';
+import { CATEGORY_ICONS } from './Icons.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const StyledIcon = component => /*#__PURE__*/_styled(component, {
+  target: "e1wwql4e0"
+})(".fill{fill:", ({
+  theme
+}) => theme.colors.other.icon.category.primary.fill, ";}.fillStrong{fill:", ({
+  theme
+}) => theme.colors.other.icon.category.primary.fillStrong, ";}");
+/**
+ * CategoryIcon component is used to render category icons, those icons are more complex than system icons
+ * as they involve multiple colors that changes depending on theme.
+ */
+const CategoryIcon = ({
+  name
+}) => {
+  const Icon = StyledIcon(CATEGORY_ICONS[name]);
+  return jsx(Icon, {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20"
+  });
+};
+
+export { CategoryIcon };

package/dist/index.d.ts

@@ -66,7 +66,7 @@ type CodeEditorProps = {
 };
 declare const CodeEditor: ({ title, value, onChange, extensions, onBlur, height, readOnly, }: CodeEditorProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-declare const _default: {
+declare const _default$1: {
     readonly '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.";
     readonly 'estimate.cost.label': "Estimated cost";
     readonly 'estimate.cost.beta.free': "Free During Beta";
@@ -182,7 +182,7 @@ type EstimateCostProps = {
     /**
      * Locales for the component. By default, it will use the english locales.
      */
-    locales?: typeof _default;
+    locales?: typeof _default$1;
     /**
      * Defines the currency to be shown in the component.
      * To find out all currencies checkout https://en.wikipedia.org/wiki/ISO_4217#List_of_ISO_4217_currency_codes section "Code" of the table.
@@ -418,6 +418,98 @@ type MessageProps = {
     align?: 'left' | 'right';
 };
 
+declare const _default: {
+    readonly 'navigation.pin.tooltip': "Pin product";
+    readonly 'navigation.unpin.tooltip': "Unpin product";
+    readonly 'navigation.pinned.item.group.label': "Pinned items";
+    readonly 'navigation.expand.button': "Expand sidebar";
+    readonly 'navigation.collapse.button': "Collapse sidebar";
+};
+
+type NavigationProps = {
+    children: ReactNode;
+    /**
+     * The logo to be displayed in header of the navigation
+     * It can be a component or a function. The function will retrun you
+     * expanded state of the navigation so you can decide to show/hide
+     * some part of your logo
+     */
+    logo?: ReactNode | ((expanded: boolean) => ReactNode);
+    /**
+     * This enable / disable the pinned feature of the navigation
+     * Pinned allows the use to pin (or favorite) some items in the navigation
+     */
+    pinnedFeature?: boolean;
+    /**
+     * This define how many items can be pinned at the same time.
+     * If you want to disable the limit just set `Infinity` to this prop
+     */
+    pinLimit?: number;
+    /**
+     * The initial pinned items. This should be an array of labels you've set on
+     * your `<Navigation.Item>`
+     */
+    initialPinned?: string[];
+    /**
+     * The initial expanded state of the navigation. If set to true the
+     * navigation will be expanded by default otherwise it will be collapsed
+     */
+    initialExpanded?: boolean;
+    /**
+     * This function is triggered when the user click on the pin/unpin button
+     * of an item
+     */
+    onClickPinUnpin?: (pinned: string[]) => void;
+    locales?: typeof _default;
+    /**
+     * This function is triggered when user click on expand button on the footer
+     * of the navigation. This is not triggered when the user resize the navigation
+     * and it automatically collapse / expand.
+     */
+    onClickExpand?: (expanded: boolean) => void;
+    className?: string;
+    /**
+     * It defines the initial width of the navigation.
+     */
+    width?: number;
+    /**
+     * This function is called when resize occur using the vertical bar on the left of the navigation.
+     */
+    onWidthResize?: (width: number) => void;
+};
+/**
+ * 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.
+ */
+declare const Navigation: {
+    ({ children, logo, pinnedFeature, onClickPinUnpin, onClickExpand, initialPinned, initialExpanded, locales, pinLimit, width, onWidthResize, className, }: NavigationProps): _emotion_react_jsx_runtime.JSX.Element;
+    Group: ({ children, label }: {
+        children: ReactNode;
+        label: string;
+    }) => _emotion_react_jsx_runtime.JSX.Element | null;
+    Item: ({ children, categoryIcon, label, subLabel, badgeText, badgeSentiment, href, onClick, toggle, active, noPinButton, type, hasParents, as, disabled, noExpand, }: {
+        children?: ReactNode;
+        categoryIcon?: "security" | "console" | "database" | "pin" | "billing" | "storage" | "baremetal" | "webHosting" | "vpc" | "useCase" | "toolsServices" | "serverless" | "observability" | "network" | "managedServices" | "iot" | "documentation" | "dedicatedServer" | "datacenter" | "containers" | "compute" | "ai" | "labs" | "devTools" | undefined;
+        label: string;
+        subLabel?: string | undefined;
+        badgeText?: string | undefined;
+        badgeSentiment?: ("neutral" | "danger" | "info" | "primary" | "secondary" | "success" | "warning") | undefined;
+        href?: string | undefined;
+        onClick?: ((toggle?: boolean | undefined) => void) | undefined;
+        toggle?: boolean | undefined;
+        active?: boolean | undefined;
+        noPinButton?: boolean | undefined;
+        type?: ("default" | "pinned" | "pinnedGroup") | undefined;
+        hasParents?: boolean | undefined;
+        as?: keyof react.JSX.IntrinsicElements | undefined;
+        noExpand?: boolean | undefined;
+        disabled?: boolean | undefined;
+    }) => _emotion_react_jsx_runtime.JSX.Element | null;
+    PinnedItems: () => _emotion_react_jsx_runtime.JSX.Element | null;
+    Separator: () => _emotion_react_jsx_runtime.JSX.Element;
+};
+
 type FAQProps = {
     description: string;
     productIconName?: ComponentProps<typeof ProductIcon>['name'];
@@ -475,4 +567,4 @@ declare const SteppedListContainer: {
     }) => _emotion_react_jsx_runtime.JSX.Element;
 };
 
-export { CodeEditor, ContentCard, ContentCardGroup, Conversation, CustomerSatisfaction, EstimateCost, FAQ, SteppedListContainer, _default as estimateCostDefaultLocales };
+export { CodeEditor, ContentCard, ContentCardGroup, Conversation, CustomerSatisfaction, EstimateCost, FAQ, Navigation, SteppedListContainer, _default$1 as estimateCostDefaultLocales };

package/dist/src/components/EstimateCost/Components/Item.js

@@ -2,7 +2,6 @@ import _styled from '@emotion/styled/base';
 import { css } from '@emotion/react';
 import { Text, Tooltip, Stack, Icon, zoomIn, Badge } from '@ultraviolet/ui';
 import { useMemo, useState, useEffect, useCallback, useId, Children, isValidElement, cloneElement } from 'react';
-import flattenChildren from 'react-flatten-children';
 import { useEstimateCost } from '../EstimateCostProvider.js';
 import { useOverlay } from '../OverlayContext.js';
 import { Cell, StyledDiv, PriceCell, OverlayRow, StyledTr, StyledLeftSide } from '../componentStyle.js';
@@ -264,7 +263,7 @@ const Item = ({
         }), jsx(StyledResourceName, {
           isOverlay: isOverlay,
           animated: animated,
-          children: isDefined ? Children.map(flattenChildren(children), child => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
+          children: isDefined ? Children.map(children, child => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
             itemCallback,
             amount,
             maxAmount,

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

@@ -1,7 +1,6 @@
 import _styled from '@emotion/styled/base';
 import { Text, Stack, Alert, Icon } from '@ultraviolet/ui';
 import { useState, useMemo, useEffect, Children, isValidElement, cloneElement } from 'react';
-import flattenChildren from 'react-flatten-children';
 import { useInView } from 'react-intersection-observer';
 import { CustomUnitInput } from './Components/CustomUnitInput.js';
 import { Item } from './Components/Item.js';
@@ -104,7 +103,6 @@ const EstimateCostContent = ({
   const providerValue = useMemo(() => ({
     isOverlay: false
   }), []);
-  const list = flattenChildren(children);
   const productsCallback = useMemo(() => ({
     add: newProduct => {
       setProducts(total => {
@@ -210,8 +208,8 @@ const EstimateCostContent = ({
               })]
             })
           }) : null, jsx("tbody", {
-            children: Children.map(list, (child, index) => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
-              isLastElement: index === list.length - 1,
+            children: Children.map(children, (child, index) => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
+              isLastElement: index === Children.count(children) - 1,
               productsCallback,
               iteration,
               discount: discount && !child.props.discount ? discount : child.props.discount

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

@@ -1,7 +1,6 @@
 import _styled from '@emotion/styled/base';
 import { Stack, Icon } from '@ultraviolet/ui';
 import { useMemo, Children, isValidElement, cloneElement } from 'react';
-import flattenChildren from 'react-flatten-children';
 import { LineThrough } from './Components/LineThrough.js';
 import { Strong } from './Components/Strong.js';
 import { useEstimateCost } from './EstimateCostProvider.js';
@@ -55,7 +54,6 @@ const OverlayComponent = ({
   const value = useMemo(() => ({
     isOverlay: true
   }), []);
-  const list = flattenChildren(children);
   const totalOverlayPrice = {
     days: totalPrice.maxOverlayHourly * multiplier.days,
     hours: totalPrice.maxOverlayHourly,
@@ -81,9 +79,9 @@ const OverlayComponent = ({
             disabled: disableOverlayLeft,
             children: locales['estimate.cost.submit.label']
           })
-        }) : null, Children.map(list, (child, index) => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
+        }) : null, Children.map(children, (child, index) => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
           isFirstElement: index === 0,
-          isLastElement: index === list.length - 1
+          isLastElement: index === Children.count(children) - 1
         }) : null), jsxs(OverlayRow, {
           children: [jsxs(Stack, {
             direction: "row",

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

@@ -0,0 +1,50 @@
+import { NavigationContent } from './NavigationContent.js';
+import { NavigationProvider } from './NavigationProvider.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 { NAVIGATION_WIDTH } from './constants.js';
+import NavigationLocales from './locales/en.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,
+  pinnedFeature = false,
+  onClickPinUnpin,
+  onClickExpand,
+  initialPinned,
+  initialExpanded = true,
+  locales = NavigationLocales,
+  pinLimit = 7,
+  width = NAVIGATION_WIDTH,
+  onWidthResize,
+  className
+}) => jsx(NavigationProvider, {
+  onClickPinUnpin: onClickPinUnpin,
+  pinnedFeature: pinnedFeature,
+  locales: locales,
+  initialPinned: initialPinned,
+  pinLimit: pinLimit,
+  initialExpanded: initialExpanded,
+  children: jsx(NavigationContent, {
+    onClickExpand: onClickExpand,
+    logo: logo,
+    className: className,
+    width: width,
+    onWidthResize: onWidthResize,
+    children: children
+  })
+});
+Navigation.Group = Group;
+Navigation.Item = Item;
+Navigation.PinnedItems = PinnedItems;
+Navigation.Separator = Separator;
+
+export { Navigation };

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

@@ -0,0 +1,230 @@
+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 { ANIMATION_DURATION, NAVIGATION_MAX_WIDTH, NAVIGATION_MIN_WIDTH, NAVIGATION_COLLASPED_WIDTH } 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;cursor:col-resize;border:2px solid transparent;margin-right:-2px;display:flex;&:hover{border:2px solid ", ({
+  theme
+}) => theme.colors.primary.border, ";}");
+const NavigationContent = ({
+  children,
+  logo,
+  onClickExpand,
+  width,
+  onWidthResize,
+  className
+}) => {
+  const sliderRef = useRef(null);
+  const navigationRef = 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]);
+  const {
+    expanded,
+    setExpanded,
+    animation,
+    setAnimation,
+    locales
+  } = useNavigation();
+
+  // This function will be triggered when expand/collapse button is clicked
+  const toggleExpand = useCallback(() => {
+    onClickExpand?.(!expanded);
+    if (navigationRef.current) {
+      navigationRef.current.style.width = '';
+    }
+    setAnimation(expanded ? 'collapse' : 'expand');
+    setTimeout(() => {
+      setExpanded();
+      setFooterHasOverflowStyle(isScrollAtBottom());
+      setAnimation(false);
+    }, ANIMATION_DURATION);
+  }, [expanded, isScrollAtBottom, onClickExpand, setAnimation, setExpanded]);
+
+  // 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);
+          }
+          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, onWidthResize, toggleExpand]);
+  return jsxs(StyledNav, {
+    className: className,
+    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/NavigationProvider.js

@@ -0,0 +1,55 @@
+import { useReducer, useState, useCallback, useMemo, createContext, useContext } from 'react';
+import NavigationLocales from './locales/en.js';
+import { jsx } from '@emotion/react/jsx-runtime';
+
+const NavigationContext = /*#__PURE__*/createContext({
+  expanded: true,
+  setExpanded: () => {},
+  animation: false,
+  setAnimation: () => {},
+  locales: NavigationLocales,
+  pinItem: () => {},
+  unpinItem: () => {},
+  pinnedItems: [],
+  pinLimit: 7
+});
+const useNavigation = () => useContext(NavigationContext);
+const NavigationProvider = ({
+  children,
+  pinnedFeature,
+  onClickPinUnpin,
+  initialPinned,
+  initialExpanded,
+  locales,
+  pinLimit
+}) => {
+  const [expanded, setExpanded] = useReducer(state => !state, initialExpanded);
+  const [pinnedItems, setPinnedItems] = useState(initialPinned ?? []);
+  const [animation, setAnimation] = useState(false);
+  const pinItem = useCallback(item => {
+    setPinnedItems([...pinnedItems, item]);
+    onClickPinUnpin?.(pinnedItems);
+  }, [onClickPinUnpin, pinnedItems]);
+  const unpinItem = useCallback(item => {
+    setPinnedItems(pinnedItems.filter(localItem => localItem !== item));
+    onClickPinUnpin?.(pinnedItems);
+  }, [onClickPinUnpin, pinnedItems]);
+  const value = useMemo(() => ({
+    expanded,
+    setExpanded,
+    pinnedItems,
+    pinItem,
+    unpinItem,
+    pinnedFeature,
+    locales,
+    pinLimit,
+    animation,
+    setAnimation
+  }), [expanded, pinnedItems, pinItem, unpinItem, pinnedFeature, locales, pinLimit, animation]);
+  return jsx(NavigationContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+export { NavigationContext, NavigationProvider, useNavigation };