@ultraviolet/plus 0.11.0 → 0.12.0

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

@@ -3,24 +3,33 @@ import { CATEGORY_ICONS } from './Icons.js';
 import { jsx } from '@emotion/react/jsx-runtime';
 
 const StyledIcon = component => /*#__PURE__*/_styled(component, {
+  shouldForwardProp: prop => !['variant', 'disabled'].includes(prop),
   target: "e1wwql4e0"
 })(".fill{fill:", ({
-  theme
-}) => theme.colors.other.icon.category.primary.fill, ";}.fillStrong{fill:", ({
-  theme
-}) => theme.colors.other.icon.category.primary.fillStrong, ";}");
+  theme,
+  variant,
+  disabled
+}) => theme.colors.other.icon.category[variant][disabled ? 'fillDisabled' : 'fill'], ";}.fillStrong{fill:", ({
+  theme,
+  variant,
+  disabled
+}) => theme.colors.other.icon.category[variant][disabled ? 'fillStrongDisabled' : '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
+  name,
+  variant = 'primary',
+  disabled
 }) => {
   const Icon = StyledIcon(CATEGORY_ICONS[name]);
   return jsx(Icon, {
     width: "20",
     height: "20",
-    viewBox: "0 0 20 20"
+    viewBox: "0 0 20 20",
+    variant: variant,
+    disabled: disabled
   });
 };
 

package/dist/@ultraviolet/icons/dist/components/ProductIcon/Icons.js

@@ -22,6 +22,7 @@ import { ReactComponent as Memo$1C } from './assets/cockpit.svg.js';
 import { ReactComponent as Memo$5 } from './assets/cold-storage.svg.js';
 import { ReactComponent as Memo$13 } from './assets/console.svg.js';
 import { ReactComponent as Memo$1E } from './assets/containers.svg.js';
+import { ReactComponent as Memo$28 } from './assets/cost-manager.svg.js';
 import { ReactComponent as Memo$6 } from './assets/data-warehouse.svg.js';
 import { ReactComponent as Memo$7 } from './assets/ddos.svg.js';
 import { ReactComponent as Memo$8 } from './assets/ddx-core-servers.svg.js';
@@ -78,6 +79,7 @@ import { ReactComponent as Memo$1v } from './assets/lb.svg.js';
 import { ReactComponent as Memo$1P } from './assets/life-cycle-rules.svg.js';
 import { ReactComponent as Memo$D } from './assets/mac-mini-m2.svg.js';
 import { ReactComponent as Memo$p } from './assets/mac-mini.svg.js';
+import { ReactComponent as Memo$27 } from './assets/managed-search-database.svg.js';
 import { ReactComponent as Memo$q } from './assets/monitoring.svg.js';
 import { ReactComponent as Memo$1b } from './assets/multi-user.svg.js';
 import { ReactComponent as Memo$25 } from './assets/nabu.svg.js';
@@ -269,7 +271,9 @@ const PRODUCT_ICONS = {
   router: Memo$23,
   jero: Memo$24,
   nabu: Memo$25,
-  inference: Memo$26
+  inference: Memo$26,
+  managedSearchDataBase: Memo$27,
+  costManager: Memo$28
 };
 
 export { PRODUCT_ICONS };

package/dist/@ultraviolet/icons/dist/components/ProductIcon/assets/cost-manager.svg.js

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { memo } from 'react';
+
+var _defs, _g, _defs2;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgCostManager = function SvgCostManager(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 64,
+    height: 64,
+    fill: "none",
+    viewBox: "0 0 64 64"
+  }, props), _defs || (_defs = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("path", {
+    id: "d",
+    fill: "#fff",
+    d: "M0 0h64v64H0z",
+    className: "d"
+  }))), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    className: "cost-manager",
+    clipPath: "url(#a)"
+  }, /*#__PURE__*/React.createElement("g", {
+    className: "Cost-manager",
+    clipPath: "url(#b)"
+  }, /*#__PURE__*/React.createElement("g", {
+    className: ".Square"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#F1EEFC",
+    d: "M0 16C0 7.163 7.163 0 16 0h32c8.837 0 16 7.163 16 16v32c0 8.837-7.163 16-16 16H16C7.163 64 0 56.837 0 48z",
+    className: "fillWeak"
+  })), /*#__PURE__*/React.createElement("g", {
+    className: "icon"
+  }, /*#__PURE__*/React.createElement("path", {
+    fill: "#521094",
+    fillRule: "evenodd",
+    d: "M42 19a1 1 0 0 0-1 1v18.674a11.1 11.1 0 0 0-3-2.895v-8.937a1 1 0 0 0-1-1H27a1 1 0 0 0-1 1v8.937a11.1 11.1 0 0 0-3 2.895v-6.358a1 1 0 0 0-1-1H12a1 1 0 0 0-1 1V46a1 1 0 0 0 1 1h9.181c.94 5.12 5.427 9 10.819 9s9.878-3.88 10.819-9H52a1 1 0 0 0 1-1V20a1 1 0 0 0-1-1zM21 45V33.316h-8V45zm7-10.25c1.24-.484 2.589-.75 4-.75s2.76.266 4 .75v-6.908h-8zM43 45h8V21h-8zm-1.833 0a9.167 9.167 0 1 1-18.334 0 9.167 9.167 0 0 1 18.334 0",
+    className: "fill",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("g", {
+    className: "fillStrong"
+  }, /*#__PURE__*/React.createElement("mask", {
+    id: "c",
+    fill: "#fff",
+    className: "c"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M32.473 50.58q-1.804 0-2.89-1.07-1.07-1.07-1.07-3.124v-2.288q0-1.305.47-2.244a3.4 3.4 0 0 1 1.363-1.437q.895-.514 2.127-.514 1.832 0 2.816 1.012.983.998.983 2.714v.308h-1.76v-.235q0-.983-.5-1.584-.497-.615-1.54-.616-.718 0-1.216.323a2.03 2.03 0 0 0-.734.88q-.25.557-.25 1.261v2.552q0 1.115.529 1.79.543.675 1.672.674 1.114 0 1.57-.616.468-.616.469-1.584v-.25h1.76v.323q0 1.702-.954 2.714-.938 1.012-2.845 1.012Zm-4.928-3.637V45.58h4.913v1.364zm0-2.17v-1.379h4.913v1.379z"
+  })), /*#__PURE__*/React.createElement("path", {
+    fill: "#A060F6",
+    d: "M32.473 50.58q-1.804 0-2.89-1.07-1.07-1.07-1.07-3.124v-2.288q0-1.305.47-2.244a3.4 3.4 0 0 1 1.363-1.437q.895-.514 2.127-.514 1.832 0 2.816 1.012.983.998.983 2.714v.308h-1.76v-.235q0-.983-.5-1.584-.497-.615-1.54-.616-.718 0-1.216.323a2.03 2.03 0 0 0-.734.88q-.25.557-.25 1.261v2.552q0 1.115.529 1.79.543.675 1.672.674 1.114 0 1.57-.616.468-.616.469-1.584v-.25h1.76v.323q0 1.702-.954 2.714-.938 1.012-2.845 1.012Zm-4.928-3.637V45.58h4.913v1.364zm0-2.17v-1.379h4.913v1.379z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#A060F6",
+    d: "m29.584 49.51-1.415 1.414.01.01zm-.602-7.656-1.777-.917-.006.011-.006.012zm1.364-1.437.986 1.74.01-.006zm4.943.498-1.435 1.394.005.005.005.005zm.983 3.022v2h2v-2zm-1.76 0h-2v2h2zm-.5-1.819-1.554 1.258.008.01.007.009zm-2.756-.293-1.087-1.68-.011.008-.012.008zm-.734.88 1.826.816zm.279 5.602-1.575 1.233.008.01.008.01zm3.241.059-1.59-1.212-.01.012-.009.012zm.47-1.833v-2h-2v2zm1.76 0h2v-2h-2zm-.954 3.036-1.456-1.372-.005.006-.005.006zm-7.773-2.626h-2v2h2zm0-1.364v-2h-2v2zm4.913 0h2v-2h-2zm0 1.364v2h2v-2zm-4.913-2.17h-2v2h2zm0-1.379v-2h-2v2zm4.913 0h2v-2h-2zm0 1.379v2h2v-2zm.015 3.808c-.78 0-1.203-.217-1.485-.495l-2.809 2.848c1.166 1.15 2.669 1.647 4.294 1.647zm-1.475-.485c-.221-.221-.485-.678-.485-1.71h-4c0 1.705.45 3.331 1.656 4.538zm-.485-1.71v-2.288h-4v2.288zm0-2.288c0-.634.114-1.06.258-1.35l-3.578-1.788c-.481.962-.68 2.031-.68 3.138zm.247-1.327c.153-.297.34-.482.572-.614l-1.972-3.48a5.4 5.4 0 0 0-2.155 2.26zm.582-.62c.24-.137.59-.248 1.13-.248v-4c-1.102 0-2.168.232-3.121.779l1.99 3.47Zm1.13-.248c.852 0 1.207.226 1.382.406l2.87-2.787c-1.136-1.17-2.658-1.619-4.251-1.619zm1.392.416c.207.21.408.565.408 1.31h4c0-1.544-.455-2.997-1.558-4.117zm.408 1.31v.308h4v-.308zm2-1.692h-1.76v4h1.76zm.24 2v-.235h-4v.235zm0-.235c0-.998-.26-2.016-.96-2.86l-3.079 2.553c-.009-.012-.004-.012.006.02a1 1 0 0 1 .033.287zm-.945-2.842c-.824-1.018-2-1.358-3.094-1.358v4c.155 0 .194.023.163.01a.5.5 0 0 1-.177-.137zm-3.094-1.358c-.783 0-1.585.179-2.304.643l2.173 3.359c-.02.013-.032.015-.02.012a.6.6 0 0 1 .15-.014zm-2.327.659a4.03 4.03 0 0 0-1.45 1.727l3.652 1.633.015-.03.004-.005-.004.004.002-.001zm-1.45 1.727a5.05 5.05 0 0 0-.423 2.078h4c0-.23.04-.366.075-.445l-3.651-1.633Zm-.423 2.078v2.552h4v-2.552zm0 2.552c0 1.054.252 2.127.953 3.022l3.15-2.465c-.003-.005-.103-.125-.103-.557zm.97 3.043c.85 1.057 2.07 1.421 3.23 1.421v-4c-.182 0-.245-.028-.234-.023a.4.4 0 0 1 .12.095zm3.23 1.421c1.073 0 2.348-.303 3.178-1.428l-3.218-2.376a.7.7 0 0 1 .145-.146.5.5 0 0 1 .114-.066c.019-.007.014-.003-.023.003a1.3 1.3 0 0 1-.196.013zm3.16-1.404c.639-.838.879-1.824.879-2.796h-4c0 .162-.02.26-.035.312a.3.3 0 0 1-.026.06zm.879-2.796v-.25h-4v.25zm-2 1.75h1.76v-4h-1.76zm-.24-2v.323h4v-.322h-4Zm0 .323c0 .745-.198 1.118-.41 1.342l2.912 2.743c1.06-1.125 1.498-2.56 1.498-4.085zm-.42 1.354c-.12.13-.445.372-1.38.372v4c1.61 0 3.181-.433 4.313-1.652zm-4.307-1.266V45.58h-4v1.364zm-2 .636h4.913v-4h-4.913zm2.913-2v1.364h4V45.58zm2-.636h-4.913v4h4.913zm-2.913-.17v-1.379h-4v1.379zm-2 .621h4.913v-4h-4.913zm2.913-2v1.379h4v-1.379zm2-.621h-4.913v4h4.913z",
+    mask: "url(#c)"
+  })), /*#__PURE__*/React.createElement("path", {
+    fill: "#521094",
+    fillRule: "evenodd",
+    d: "M50 11a3 3 0 0 1-5.422 1.77l-9.29 2.788a1 1 0 0 1-.29.042 3 3 0 0 1-5.42 1.67l-9.581 2.875a3 3 0 1 1-.575-1.916l9.581-2.874a3 3 0 0 1 5.445-1.59 1 1 0 0 1 .264-.123l9.291-2.787A3 3 0 0 1 50 11m-2 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-30 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0m14-3.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2",
+    className: "fill",
+    clipRule: "evenodd"
+  }))))), _defs2 || (_defs2 = /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
+    id: "a",
+    className: "a"
+  }, /*#__PURE__*/React.createElement("use", {
+    href: "#d"
+  })), /*#__PURE__*/React.createElement("clipPath", {
+    id: "b",
+    className: "b"
+  }, /*#__PURE__*/React.createElement("use", {
+    href: "#d"
+  })))));
+};
+var Memo = /*#__PURE__*/memo(SvgCostManager);
+
+export { Memo as ReactComponent };

package/dist/@ultraviolet/icons/dist/components/ProductIcon/assets/managed-search-database.svg.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { memo } from 'react';
+
+var _g;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgManagedSearchDatabase = function SvgManagedSearchDatabase(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 64,
+    height: 64,
+    fill: "none",
+    viewBox: "0 0 64 64"
+  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    className: "managed-search-database"
+  }, /*#__PURE__*/React.createElement("g", {
+    className: ".Square"
+  }, /*#__PURE__*/React.createElement("g", {
+    fill: "#F1EEFC",
+    className: "fillWeak"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M0 16C0 7.163 7.163 0 16 0h32c8.837 0 16 7.163 16 16v32c0 8.837-7.163 16-16 16H16C7.163 64 0 56.837 0 48z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    d: "M48 2H16C8.268 2 2 8.268 2 16v32c0 7.732 6.268 14 14 14h32c7.732 0 14-6.268 14-14V16c0-7.732-6.268-14-14-14M16 0C7.163 0 0 7.163 0 16v32c0 8.837 7.163 16 16 16h32c8.837 0 16-7.163 16-16V16c0-8.837-7.163-16-16-16z",
+    clipRule: "evenodd"
+  }))), /*#__PURE__*/React.createElement("g", {
+    fill: "#521094",
+    fillRule: "evenodd",
+    className: "fill",
+    clipRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18 16.107a1 1 0 0 1 1 1v8.56a1 1 0 1 1-2 0v-8.56a1 1 0 0 1 1-1m28 0a1 1 0 0 1 1 1v8.56a1 1 0 1 1-2 0v-8.56a1 1 0 0 1 1-1",
+    className: "fill"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M19.715 16.611c-.595.465-.715.814-.715 1.01s.12.546.715 1.011c.584.455 1.49.909 2.699 1.308 2.407.795 5.797 1.303 9.586 1.303s7.178-.508 9.586-1.303c1.209-.4 2.115-.853 2.699-1.308.595-.465.715-.814.715-1.01s-.12-.546-.715-1.011c-.584-.455-1.49-.909-2.7-1.308C39.179 14.508 35.79 14 32 14s-7.178.508-9.586 1.303c-1.21.4-2.115.853-2.699 1.308m2.072-3.207C24.447 12.526 28.057 12 32 12s7.553.526 10.213 1.404c1.324.437 2.468.98 3.302 1.63.821.641 1.485 1.508 1.485 2.588s-.664 1.946-1.485 2.587c-.834.65-1.978 1.193-3.302 1.63-2.66.878-6.27 1.404-10.213 1.404s-7.553-.526-10.213-1.404c-1.324-.437-2.468-.98-3.302-1.63-.821-.641-1.485-1.507-1.485-2.587s.664-1.947 1.485-2.588c.834-.65 1.978-1.193 3.302-1.63M44.33 47.67c.614-.427.67-.706.67-.778V45.5a1 1 0 1 1 2 0v1.392c0 1.062-.728 1.864-1.53 2.42-.832.578-1.971 1.058-3.289 1.444C39.533 51.533 35.934 52 32 52s-7.533-.467-10.181-1.244c-1.317-.386-2.456-.866-3.289-1.443-.802-.557-1.53-1.359-1.53-2.421V45.5a1 1 0 1 1 2 0v1.392c0 .072.056.351.67.777.585.406 1.496.811 2.712 1.168C24.801 49.547 28.202 50 32 50s7.2-.453 9.618-1.163c1.216-.357 2.127-.762 2.712-1.168Z",
+    className: "fill"
+  })), /*#__PURE__*/React.createElement("path", {
+    fill: "#521094",
+    fillRule: "evenodd",
+    d: "M16.639 31.617a3.944 3.944 0 1 1 5.577 5.577 3.944 3.944 0 0 1-5.577-5.577m6.991-1.414a5.944 5.944 0 0 0-9.053 7.64l-5.373 5.373a1 1 0 1 0 1.414 1.415l5.373-5.374a5.945 5.945 0 0 0 7.64-9.054Z",
+    className: "fill",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#A060F6",
+    fillRule: "evenodd",
+    d: "M25.453 29.357a1 1 0 0 1 1-1h23.5a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-28a1 1 0 0 1 0-2h28a1 1 0 0 0 1-1v-9a1 1 0 0 0-1-1h-23.5a1 1 0 0 1-1-1",
+    className: "fillStrong",
+    clipRule: "evenodd"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#A060F6",
+    fillRule: "evenodd",
+    d: "M27 36a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m6 0a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m6 0a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1m6 0a1 1 0 0 1 1-1h2a1 1 0 1 1 0 2h-2a1 1 0 0 1-1-1",
+    className: "fillStrong",
+    clipRule: "evenodd"
+  }))));
+};
+var Memo = /*#__PURE__*/memo(SvgManagedSearchDatabase);
+
+export { Memo as ReactComponent };

package/dist/index.d.ts

@@ -193,6 +193,7 @@ type EstimateCostProps = {
      * To understand better please read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#locales
      */
     numberLocales?: string;
+    overlayMargin?: string;
 };
 type Units = 'seconds' | 'minutes' | 'hours' | 'days' | 'months';
 type Iteration = {
@@ -214,7 +215,7 @@ type EstimateProduct = BareEstimateProduct & {
 };
 
 declare const EstimateCost: {
-    ({ description, alert, alertTitle, alertVariant, defaultTimeUnit, timeUnits, hideOverlay, disableOverlayLeft, disableOverlayRight, hideTimeUnit, hideTotal, discount, OverlayRight, OverlayLeft, isBeta, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit, children, locales, numberLocales, currency, }: EstimateCostProps): _emotion_react_jsx_runtime.JSX.Element;
+    ({ description, alert, alertTitle, alertVariant, defaultTimeUnit, timeUnits, hideOverlay, disableOverlayLeft, disableOverlayRight, hideTimeUnit, hideTotal, discount, OverlayRight, OverlayLeft, overlayMargin, isBeta, commitmentFees, commitmentFeesContent, monthlyFees, monthlyFeesLabel, monthlyFeesContent, overlayUnit, children, locales, numberLocales, currency, }: EstimateCostProps): _emotion_react_jsx_runtime.JSX.Element;
     LineThrough: _emotion_styled.StyledComponent<{
         theme?: _emotion_react.Theme | undefined;
         as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
@@ -488,9 +489,10 @@ declare const Navigation: {
         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, }: {
+    Item: ({ children, categoryIcon, categoryIconVariant, label, subLabel, badgeText, badgeSentiment, href, onClick, toggle, active, noPinButton, type, hasParents, as, disabled, noExpand, toggleMenu, }: {
         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;
+        categoryIconVariant?: "neutral" | "primary" | undefined;
         label: string;
         subLabel?: string | undefined;
         badgeText?: string | undefined;
@@ -501,6 +503,7 @@ declare const Navigation: {
         active?: boolean | undefined;
         noPinButton?: boolean | undefined;
         type?: ("default" | "pinned" | "pinnedGroup") | undefined;
+        toggleMenu?: (() => void) | undefined;
         hasParents?: boolean | undefined;
         as?: keyof react.JSX.IntrinsicElements | undefined;
         noExpand?: boolean | undefined;

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

@@ -36,6 +36,7 @@ const EstimateCost = ({
   discount = 0,
   OverlayRight,
   OverlayLeft,
+  overlayMargin,
   isBeta = false,
   commitmentFees,
   commitmentFeesContent,
@@ -74,6 +75,7 @@ const EstimateCost = ({
     monthlyFeesContent: monthlyFeesContent,
     overlayUnit: overlayUnit,
     locales: locales,
+    overlayMargin: overlayMargin,
     children: children
   })
 });

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

@@ -80,7 +80,8 @@ const EstimateCostContent = ({
   monthlyFeesContent,
   overlayUnit = 'hours',
   children = null,
-  locales = EstimateCostLocales
+  locales = EstimateCostLocales,
+  overlayMargin
 }) => {
   const {
     formatNumber
@@ -167,6 +168,7 @@ const EstimateCostContent = ({
       isBeta: isBeta,
       discount: discount,
       unit: overlayUnit ?? 'hours',
+      overlayMargin: overlayMargin,
       children: children
     }) : null, description === false ? null : jsx(DescriptionComponent, {
       description: description,

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

@@ -10,13 +10,16 @@ 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", {
+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:0 0 0 260px;display:flex;justify-content:center;box-shadow:", ({
+}) => 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;");
@@ -45,7 +48,8 @@ const OverlayComponent = ({
   disableOverlayLeft = false,
   totalPrice,
   unit = 'hours',
-  isBeta = false
+  isBeta = false,
+  overlayMargin
 }) => {
   const {
     locales,
@@ -73,6 +77,7 @@ const OverlayComponent = ({
     children: jsx(OverlayContainer, {
       inView: inView,
       "data-testid": "summary-overlay",
+      overlayMargin: overlayMargin,
       children: jsxs(List, {
         children: [OverlayLeft ? jsx(SideItem, {
           children: jsx(OverlayLeft, {

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

@@ -61,7 +61,7 @@ const Content = /*#__PURE__*/_styled(Stack, {
 }) => 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 ", ({
+})("background:transparent;position:absolute;top:0;bottom:0;right:0;width:8px;cursor:col-resize;border-right:2px solid transparent;display:flex;&:hover{border-color:", ({
   theme
 }) => theme.colors.primary.border, ";}");
 const NavigationContent = ({

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

@@ -82,9 +82,7 @@ const StyledContainer = /*#__PURE__*/_styled(Stack, {
   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    ),&[data-has-active-children='true'][data-has-no-expand='false']:not(\n      [disabled][data-is-active='true']\n    ){background-color:", ({
   theme
-}) => theme.colors.neutral.backgroundHover, ";", ExpandedPinnedButton, ",", CollapsedPinnedButton, "{opacity:1;}&[data-is-pinnable='true']{", StyledBadge, "{opacity:0;}}", 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.colors.neutral.backgroundHover, ";", ExpandedPinnedButton, ",", CollapsedPinnedButton, "{opacity:1;}&[data-is-pinnable='true']{", StyledBadge, "{opacity:0;}}}&: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
@@ -113,6 +111,7 @@ const ContainerCategoryIcon = /*#__PURE__*/_styled(Stack, {
 const Item = ({
   children,
   categoryIcon,
+  categoryIconVariant,
   label,
   subLabel,
   badgeText,
@@ -126,7 +125,8 @@ const Item = ({
   hasParents,
   as,
   disabled,
-  noExpand = false
+  noExpand = false,
+  toggleMenu
 }) => {
   const context = useNavigation();
   if (!context) {
@@ -159,19 +159,19 @@ const Item = ({
   }, [animation, toggle]);
   const PaddedStack = noExpand ? Stack : PaddingStack;
   const hasHrefAndNoChildren = href && !children;
-  const haspinnedFeatureAndNoChildren = pinnedFeature && !children && !noPinButton;
+  const hasPinnedFeatureAndNoChildren = pinnedFeature && !children && !noPinButton;
   const isItemPinned = pinnedItems.includes(label);
   const shouldShowPinnedButton = useMemo(() => {
     if (href || disabled) return false;
     if (pinnedItems.length >= pinLimit && type === 'default') return false;
-    if (haspinnedFeatureAndNoChildren && type !== 'default') {
+    if (hasPinnedFeatureAndNoChildren && type !== 'default') {
       return true;
     }
-    if (haspinnedFeatureAndNoChildren && !isItemPinned) {
+    if (hasPinnedFeatureAndNoChildren && !isItemPinned) {
       return true;
     }
     return false;
-  }, [disabled, haspinnedFeatureAndNoChildren, href, isItemPinned, pinLimit, pinnedItems.length, type]);
+  }, [disabled, hasPinnedFeatureAndNoChildren, href, isItemPinned, pinLimit, pinnedItems.length, type]);
   const hasActiveChildren = useMemo(() => {
     if (!children) return false;
     return Children.map(children, child => /*#__PURE__*/isValidElement(child) ? child.props?.active : false).includes(true);
@@ -238,14 +238,16 @@ const Item = ({
             alignItems: "center",
             justifyContent: "center",
             children: jsx(CategoryIcon, {
-              name: categoryIcon
+              name: categoryIcon,
+              variant: categoryIconVariant,
+              disabled: disabled
             })
           }) : null, jsxs(Stack, {
             children: [jsx(WrapText, {
               as: "span",
               variant: "bodySmallStrong",
               sentiment: active ? 'primary' : 'neutral',
-              prominence: categoryIcon || !hasParents ? undefined : 'weak',
+              prominence: categoryIcon || !hasParents ? 'strong' : 'weak',
               animation: animation,
               disabled: disabled,
               children: label
@@ -264,7 +266,7 @@ const Item = ({
           direction: "row",
           alignItems: "center",
           gap: href ? 1 : undefined,
-          children: [badgeText || haspinnedFeatureAndNoChildren ? jsxs(Fragment, {
+          children: [badgeText || hasPinnedFeatureAndNoChildren ? jsxs(Fragment, {
             children: [badgeText ? jsx(StyledBadge, {
               sentiment: badgeSentiment,
               size: "small",
@@ -346,12 +348,16 @@ const Item = ({
           }) : null
         }),
         placement: "right",
-        children: Children.map(children, child => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
-          hasParents: true
+        children: ({
+          toggle: toggleMenuLocal
+        }) => Children.map(children, child => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
+          hasParents: true,
+          toggleMenu: toggleMenuLocal
         }) : child)
       }) : jsx(Tooltip, {
         text: label,
         placement: "right",
+        tabIndex: -1,
         children: jsx(Button, {
           sentiment: "neutral",
           variant: active ? 'filled' : 'ghost',
@@ -375,7 +381,10 @@ const Item = ({
   if (hasParents) {
     return jsx(StyledMenuItem, {
       href: href,
-      onClick: () => onClick?.(),
+      onClick: () => {
+        onClick?.();
+        toggleMenu?.();
+      },
       borderless: true,
       children: jsxs(Stack, {
         gap: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/plus",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Ultraviolet Plus",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -34,7 +34,7 @@
   },
   "peerDependencies": {
     "@emotion/react": "11.11.4",
-    "@emotion/styled": "11.11.0",
+    "@emotion/styled": "11.11.5",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
@@ -42,21 +42,21 @@
     "@babel/core": "7.24.3",
     "@emotion/babel-plugin": "11.11.0",
     "@emotion/react": "11.11.4",
-    "@emotion/styled": "11.11.0",
-    "@types/react": "18.2.64",
-    "@types/react-dom": "18.2.21",
+    "@emotion/styled": "11.11.5",
+    "@types/react": "18.2.74",
+    "@types/react-dom": "18.2.23",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "@ultraviolet/icons": "2.11.1",
-    "@ultraviolet/illustrations": "1.6.4"
+    "@ultraviolet/icons": "2.12.0",
+    "@ultraviolet/illustrations": "1.7.0"
   },
   "dependencies": {
     "@uiw/codemirror-extensions-langs": "4.21.25",
     "@uiw/codemirror-theme-material": "4.21.25",
     "@uiw/react-codemirror": "4.21.25",
     "react-intersection-observer": "9.8.1",
-    "@ultraviolet/themes": "1.9.0",
-    "@ultraviolet/ui": "1.45.0"
+    "@ultraviolet/themes": "1.10.0",
+    "@ultraviolet/ui": "1.45.2"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",