@ultraviolet/plus 0.10.6 → 0.11.1

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/@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

@@ -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.
@@ -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;
@@ -418,6 +419,99 @@ 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, 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;
+        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;
+        toggleMenu?: (() => void) | 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 +569,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/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

@@ -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';
@@ -81,7 +80,8 @@ const EstimateCostContent = ({
   monthlyFeesContent,
   overlayUnit = 'hours',
   children = null,
-  locales = EstimateCostLocales
+  locales = EstimateCostLocales,
+  overlayMargin
 }) => {
   const {
     formatNumber
@@ -104,7 +104,6 @@ const EstimateCostContent = ({
   const providerValue = useMemo(() => ({
     isOverlay: false
   }), []);
-  const list = flattenChildren(children);
   const productsCallback = useMemo(() => ({
     add: newProduct => {
       setProducts(total => {
@@ -169,6 +168,7 @@ const EstimateCostContent = ({
       isBeta: isBeta,
       discount: discount,
       unit: overlayUnit ?? 'hours',
+      overlayMargin: overlayMargin,
       children: children
     }) : null, description === false ? null : jsx(DescriptionComponent, {
       description: description,
@@ -210,8 +210,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';
@@ -11,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;");
@@ -46,7 +48,8 @@ const OverlayComponent = ({
   disableOverlayLeft = false,
   totalPrice,
   unit = 'hours',
-  isBeta = false
+  isBeta = false,
+  overlayMargin
 }) => {
   const {
     locales,
@@ -55,7 +58,6 @@ const OverlayComponent = ({
   const value = useMemo(() => ({
     isOverlay: true
   }), []);
-  const list = flattenChildren(children);
   const totalOverlayPrice = {
     days: totalPrice.maxOverlayHourly * multiplier.days,
     hours: totalPrice.maxOverlayHourly,
@@ -75,15 +77,16 @@ const OverlayComponent = ({
     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(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 };