@northlight/ui 2.35.3 → 2.36.0

package/dist/umd/northlight.cjs

@@ -1,8 +1,27 @@
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@chakra-ui/react'), require('react'), require('chakra-react-select'), require('ramda'), require('@react-aria/focus'), require('react-hook-form'), require('@chakra-ui/system'), require('@northlight/tokens'), require('@emotion/react'), require('@chakra-ui/theme-tools'), require('@northlight/icons'), require('@hookform/resolvers/joi'), require('@react-aria/checkbox'), require('@react-aria/radio'), require('@react-aria/utils'), require('@react-stately/radio'), require('@react-stately/checkbox'), require('@react-aria/datepicker'), require('@react-stately/datepicker'), require('@internationalized/date'), require('@react-aria/button'), require('@react-aria/i18n'), require('@react-stately/calendar'), require('@react-aria/calendar'), require('react-router-dom'), require('@chakra-ui/clickable'), require('framer-motion'), require('@dnd-kit/core'), require('@dnd-kit/utilities'), require('@dnd-kit/sortable'), require('@dnd-kit/modifiers'), require('react-window'), require('react-virtualized-auto-sizer'), require('react-avatar-editor'), require('react-number-format'), require('react-input-mask'), require('yafu')) :
   typeof define === 'function' && define.amd ? define(['exports', '@chakra-ui/react', 'react', 'chakra-react-select', 'ramda', '@react-aria/focus', 'react-hook-form', '@chakra-ui/system', '@northlight/tokens', '@emotion/react', '@chakra-ui/theme-tools', '@northlight/icons', '@hookform/resolvers/joi', '@react-aria/checkbox', '@react-aria/radio', '@react-aria/utils', '@react-stately/radio', '@react-stately/checkbox', '@react-aria/datepicker', '@react-stately/datepicker', '@internationalized/date', '@react-aria/button', '@react-aria/i18n', '@react-stately/calendar', '@react-aria/calendar', 'react-router-dom', '@chakra-ui/clickable', 'framer-motion', '@dnd-kit/core', '@dnd-kit/utilities', '@dnd-kit/sortable', '@dnd-kit/modifiers', 'react-window', 'react-virtualized-auto-sizer', 'react-avatar-editor', 'react-number-format', 'react-input-mask', 'yafu'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.northlight = {}, global.react, global.React, global.chakraReactSelect, global.ramda, global.focus, global.reactHookForm, global.system, global.tokens, global.react$1, global.themeTools, global.icons, global.joi, global.checkbox$1, global.radio$1, global.utils, global.radio, global.checkbox, global.datepicker, global.datepicker$1, global.date, global.button, global.i18n, global.calendar$1, global.calendar, global.reactRouterDom, global.clickable, global.framerMotion, global.core, global.utilities, global.sortable, global.modifiers, global.reactWindow, global.AutoSizer, global.AvatarEditor, global.reactNumberFormat, global.InputMask, global.yafu));
-})(this, (function (exports, react, React, chakraReactSelect, ramda, focus, reactHookForm, system, tokens, react$1, themeTools, icons, joi, checkbox$1, radio$1, utils, radio, checkbox, datepicker, datepicker$1, date, button, i18n, calendar$1, calendar, reactRouterDom, clickable, framerMotion, core, utilities, sortable, modifiers, reactWindow, AutoSizer, AvatarEditor, reactNumberFormat, InputMask, yafu) { 'use strict';
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.northlight = {}, global.react, global.React, global.chakraReactSelect, global.ramda, global.focus, global.reactHookForm, global.system, global.tokens, global.react$1, global.themeTools, global.NorthlightIcons, global.joi, global.checkbox$1, global.radio$1, global.utils, global.radio, global.checkbox, global.datepicker, global.datepicker$1, global.date, global.button, global.i18n, global.calendar$1, global.calendar, global.reactRouterDom, global.clickable, global.framerMotion, global.core, global.utilities, global.sortable, global.modifiers, global.reactWindow, global.AutoSizer, global.AvatarEditor, global.reactNumberFormat, global.InputMask, global.yafu));
+})(this, (function (exports, react, React, chakraReactSelect, ramda, focus, reactHookForm, system, tokens, react$1, themeTools, NorthlightIcons, joi, checkbox$1, radio$1, utils, radio, checkbox, datepicker, datepicker$1, date, button, i18n, calendar$1, calendar, reactRouterDom, clickable, framerMotion, core, utilities, sortable, modifiers, reactWindow, AutoSizer, AvatarEditor, reactNumberFormat, InputMask, yafu) { 'use strict';
+
+  function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+      Object.keys(e).forEach(function (k) {
+        if (k !== 'default') {
+          var d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: function () { return e[k]; }
+          });
+        }
+      });
+    }
+    n.default = e;
+    return Object.freeze(n);
+  }
+
+  var NorthlightIcons__namespace = /*#__PURE__*/_interopNamespaceDefault(NorthlightIcons);
 
   var __defProp$2t = Object.defineProperty;
   var __getOwnPropSymbols$2t = Object.getOwnPropertySymbols;
@@ -1006,8 +1025,9 @@
           _focusVisible: {
             bgColor: color.background.input["outline-focus"],
             borderColor: color.border.input.focus,
+            boxShadow: `inset 0 0 0 1px ${color.border.input.focus}`,
             _invalid: {
-              boxShadow: `0 0 0 1px ${color.border.input.error}`,
+              boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
               bgColor: color.background.input["outline-error"],
               borderColor: color.border.input.error
             }
@@ -1018,7 +1038,8 @@
           },
           _invalid: {
             bgColor: color.background.input["outline-error"],
-            borderColor: color.border.input.error
+            borderColor: color.border.input.error,
+            boxShadow: `inset 0 0 0 1px ${color.border.input.error}`
           },
           _disabled: {
             bgColor: color.background.input["outline-disabled"],
@@ -1057,20 +1078,20 @@
             bgColor: color.background.input["filled-hover"]
           },
           _focusVisible: {
-            boxShadow: `0 0 0 1px ${color.border.input.focus}`,
+            boxShadow: `inset 0 0 0 1px ${color.border.input.focus}`,
             borderColor: color.border.input.focus,
             bgColor: color.background.input["filled-focus"],
             _readOnly: {
               bgColor: color.background.input["filled-default"]
             },
             _invalid: {
-              boxShadow: `0 0 0 1px ${color.border.input.error}`,
+              boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
               bgColor: color.background.input["outline-error"],
               borderColor: color.border.input.error
             }
           },
           _invalid: {
-            boxShadow: `0 0 0 1px ${color.border.input.error}`,
+            boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
             bgColor: color.background.input["filled-error"],
             borderColor: color.border.input.error
           },
@@ -1157,11 +1178,11 @@
           _focusVisible: {
             bgColor: color.background.input["outline-focus"],
             _hover: {
-              boxShadow: `0 0 0 1px ${color.border.ai}`,
+              boxShadow: `inset 0 0 0 1px ${color.border.ai}`,
               borderColor: color.border.ai
             },
             _invalid: {
-              boxShadow: `0 0 0 1px ${color.border.input.error}`,
+              boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
               bgColor: color.background.input["outline-error"],
               borderColor: color.border.input.error
             }
@@ -1605,7 +1626,7 @@
   };
 
   const Alert$1 = {
-    parts: ["container", "title", "description"],
+    parts: ["container", "title", "description", "icon"],
     baseStyle: ({ theme: {
       radii: borderRadius,
       colors: color,
@@ -1617,40 +1638,69 @@
         paddingEnd: coreSpacing[8],
         width: "auto",
         display: "flex"
+      },
+      title: {
+        lineHeight: "1.25",
+        overflowWrap: "break-word"
+      },
+      description: {
+        lineHeight: "1.25",
+        overflowWrap: "break-word"
+      },
+      icon: {
+        boxSize: 6
       }
     }),
     variants: {
       success: ({ theme: { colors: color } }) => ({
         container: {
           bgColor: color.background.toast.success
+        },
+        icon: {
+          color: color.icon.toast.success
         }
       }),
       warning: ({ theme: { colors: color } }) => ({
         container: {
           bgColor: color.background.toast.warning
+        },
+        icon: {
+          color: color.icon.toast.warning
         }
       }),
       info: ({ theme: { colors: color } }) => ({
         container: {
           bgColor: color.background.toast.info
+        },
+        icon: {
+          color: color.icon.toast.info
         }
       }),
       error: ({ theme: { colors: color } }) => ({
         container: {
           bgColor: color.background.toast.error,
           color: color.text.toast.error
+        },
+        icon: {
+          color: color.icon.toast.error
         }
       }),
       ai: ({ theme: { colors: color } }) => ({
         container: {
           bgColor: color.bg.ai.default,
           color: color.text.inverted
+        },
+        icon: {
+          color: color.icon.toast.ai
         }
       }),
       default: ({ theme: { colors: color } }) => ({
         container: {
           bgColor: color.bg.layer,
           color: color.text.default
+        },
+        icon: {
+          color: color.icon.toast.default
         }
       }),
       ghost: ({ theme: { colors: color } }) => ({
@@ -1660,6 +1710,9 @@
           borderWidth: "xs",
           borderColor: color.border.default,
           borderStyle: "solid"
+        },
+        icon: {
+          color: color.icon.toast.ghost
         }
       })
     }
@@ -1718,12 +1771,12 @@
           _focusVisible: {
             bg: color.background.input["outline-focus"],
             borderColor: color.border.input.focus,
-            boxShadow: `0 0 0 1px ${color.border.textarea.focus}`
+            boxShadow: `inset 0 0 0 1px ${color.border.textarea.focus}`
           },
           _invalid: {
             bg: color.background.input["outline-error"],
             borderColor: color.border.input.error,
-            boxShadow: `0 0 0 1px ${color.border.input.error}`
+            boxShadow: `inset 0 0 0 1px ${color.border.input.error}`
           },
           _disabled: {
             bg: color.background.input["outline-disabled"],
@@ -1929,10 +1982,10 @@
         _focusWithin: {
           bgColor: color.background.input["outline-focus"],
           borderColor: color.border.textarea.focus,
-          boxShadow: `0 0 0 1px ${color.border.textarea.focus}`
+          boxShadow: `inset 0 0 0 1px ${color.border.textarea.focus}`
         },
         _invalid: {
-          boxShadow: `0 0 0 1px ${color.border.input.error}`,
+          boxShadow: `inset 0 0 0 1px ${color.border.input.error}`,
           borderColor: color.border.input.error
         },
         _disabled: {
@@ -1953,11 +2006,11 @@
         outline: "none",
         rounded: "md",
         _focus: {
-          bgColor: "blue.500",
+          bgColor: "bg.brand.default",
           color: color.text.inverted
         },
         _placeholder: {
-          color: "red.500"
+          color: "destructive"
         }
       }
     }),
@@ -3720,7 +3773,7 @@
     return a;
   };
   var __spreadProps$t = (a, b) => __defProps$t(a, __getOwnPropDescs$t(b));
-  var __objRest$1R = (source, exclude) => {
+  var __objRest$1S = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$2g.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3741,7 +3794,7 @@
       "data-testid": testId,
       value = [],
       onError
-    } = _b, rest = __objRest$1R(_b, [
+    } = _b, rest = __objRest$1S(_b, [
       "options",
       "onChange",
       "isLoading",
@@ -3851,7 +3904,7 @@
       }
     return a;
   };
-  var __objRest$1Q = (source, exclude) => {
+  var __objRest$1R = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$2f.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3868,7 +3921,7 @@
       name,
       image,
       variant = "square"
-    } = _b, rest = __objRest$1Q(_b, [
+    } = _b, rest = __objRest$1R(_b, [
       "name",
       "image",
       "variant"
@@ -3910,7 +3963,7 @@
       }
     return a;
   };
-  var __objRest$1P = (source, exclude) => {
+  var __objRest$1Q = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$2e.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3926,7 +3979,7 @@
     var _b = _a, {
       variant = "success",
       children
-    } = _b, rest = __objRest$1P(_b, [
+    } = _b, rest = __objRest$1Q(_b, [
       "variant",
       "children"
     ]);
@@ -3967,7 +4020,7 @@
       }
     return a;
   };
-  var __objRest$1O = (source, exclude) => {
+  var __objRest$1P = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$2c.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -3985,7 +4038,7 @@
       size,
       color,
       boxSize
-    } = _b, rest = __objRest$1O(_b, [
+    } = _b, rest = __objRest$1P(_b, [
       "as",
       "size",
       "color",
@@ -4026,7 +4079,7 @@
       }
     return a;
   };
-  var __objRest$1N = (source, exclude) => {
+  var __objRest$1O = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$2b.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4046,7 +4099,7 @@
       image,
       size,
       bgColor
-    } = _b, rest = __objRest$1N(_b, [
+    } = _b, rest = __objRest$1O(_b, [
       "variant",
       "notificationCount",
       "name",
@@ -4071,7 +4124,7 @@
     ) : name ? /* @__PURE__ */ React.createElement(react.chakra.span, { sx: text }, getInitials(name)) : /* @__PURE__ */ React.createElement(
       Icon,
       {
-        as: variant === "square" ? icons.UserSquareDuo : icons.BusinessContactDuo,
+        as: variant === "square" ? NorthlightIcons.UserSquareDuo : NorthlightIcons.BusinessContactDuo,
         sx: icon,
         "aria-label": "user-avatar"
       }
@@ -4094,7 +4147,7 @@
       }
     return a;
   };
-  var __objRest$1M = (source, exclude) => {
+  var __objRest$1N = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$2a.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4110,7 +4163,7 @@
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1M(_b, [
+    } = _b, rest = __objRest$1N(_b, [
       "children",
       "sx"
     ]);
@@ -4142,7 +4195,7 @@
       }
     return a;
   };
-  var __objRest$1L = (source, exclude) => {
+  var __objRest$1M = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$29.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4158,7 +4211,7 @@
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1L(_b, [
+    } = _b, rest = __objRest$1M(_b, [
       "children",
       "sx"
     ]);
@@ -4190,7 +4243,7 @@
       }
     return a;
   };
-  var __objRest$1K = (source, exclude) => {
+  var __objRest$1L = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$28.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4206,7 +4259,7 @@
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1K(_b, [
+    } = _b, rest = __objRest$1L(_b, [
       "children",
       "sx"
     ]);
@@ -4238,7 +4291,7 @@
       }
     return a;
   };
-  var __objRest$1J = (source, exclude) => {
+  var __objRest$1K = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$27.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4254,7 +4307,7 @@
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1J(_b, [
+    } = _b, rest = __objRest$1K(_b, [
       "children",
       "sx"
     ]);
@@ -4286,7 +4339,7 @@
       }
     return a;
   };
-  var __objRest$1I = (source, exclude) => {
+  var __objRest$1J = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$26.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4302,7 +4355,7 @@
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1I(_b, [
+    } = _b, rest = __objRest$1J(_b, [
       "children",
       "sx"
     ]);
@@ -4334,7 +4387,7 @@
       }
     return a;
   };
-  var __objRest$1H = (source, exclude) => {
+  var __objRest$1I = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$25.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4350,7 +4403,7 @@
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1H(_b, [
+    } = _b, rest = __objRest$1I(_b, [
       "children",
       "sx"
     ]);
@@ -4382,7 +4435,7 @@
       }
     return a;
   };
-  var __objRest$1G = (source, exclude) => {
+  var __objRest$1H = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$24.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4399,7 +4452,7 @@
       children,
       variant = "16",
       sx = {}
-    } = _b, rest = __objRest$1G(_b, [
+    } = _b, rest = __objRest$1H(_b, [
       "children",
       "variant",
       "sx"
@@ -4432,7 +4485,7 @@
       }
     return a;
   };
-  var __objRest$1F = (source, exclude) => {
+  var __objRest$1G = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$23.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4446,7 +4499,7 @@
   };
   const Blockquote = React.forwardRef(
     (_a, ref) => {
-      var _b = _a, { children, sx = {} } = _b, rest = __objRest$1F(_b, ["children", "sx"]);
+      var _b = _a, { children, sx = {} } = _b, rest = __objRest$1G(_b, ["children", "sx"]);
       const styles = react.useStyleConfig("Blockquote", { sx });
       return /* @__PURE__ */ React.createElement(react.Text, __spreadValues$23({ as: "span", sx: styles, ref }, rest), children);
     }
@@ -4468,7 +4521,7 @@
       }
     return a;
   };
-  var __objRest$1E = (source, exclude) => {
+  var __objRest$1F = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$22.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4484,7 +4537,7 @@
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1E(_b, [
+    } = _b, rest = __objRest$1F(_b, [
       "children",
       "sx"
     ]);
@@ -4516,7 +4569,7 @@
       }
     return a;
   };
-  var __objRest$1D = (source, exclude) => {
+  var __objRest$1E = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$21.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4532,7 +4585,7 @@
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1D(_b, [
+    } = _b, rest = __objRest$1E(_b, [
       "children",
       "sx"
     ]);
@@ -4564,7 +4617,7 @@
       }
     return a;
   };
-  var __objRest$1C = (source, exclude) => {
+  var __objRest$1D = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$20.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4580,7 +4633,7 @@
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1C(_b, [
+    } = _b, rest = __objRest$1D(_b, [
       "children",
       "sx"
     ]);
@@ -4612,7 +4665,7 @@
       }
     return a;
   };
-  var __objRest$1B = (source, exclude) => {
+  var __objRest$1C = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1$.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4628,7 +4681,7 @@
     var _b = _a, {
       children,
       sx = {}
-    } = _b, rest = __objRest$1B(_b, [
+    } = _b, rest = __objRest$1C(_b, [
       "children",
       "sx"
     ]);
@@ -4660,7 +4713,7 @@
       }
     return a;
   };
-  var __objRest$1A = (source, exclude) => {
+  var __objRest$1B = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1_.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4677,7 +4730,7 @@
       children,
       size = "sm",
       sx = {}
-    } = _b, rest = __objRest$1A(_b, [
+    } = _b, rest = __objRest$1B(_b, [
       "children",
       "size",
       "sx"
@@ -4710,7 +4763,7 @@
       }
     return a;
   };
-  var __objRest$1z = (source, exclude) => {
+  var __objRest$1A = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1Z.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4724,7 +4777,7 @@
   };
   const NumVal = React.forwardRef(
     (_a, ref) => {
-      var _b = _a, { children, size = "sm", sx = {} } = _b, rest = __objRest$1z(_b, ["children", "size", "sx"]);
+      var _b = _a, { children, size = "sm", sx = {} } = _b, rest = __objRest$1A(_b, ["children", "size", "sx"]);
       const styles = react.useStyleConfig("NumVal", { sx, size });
       return /* @__PURE__ */ React.createElement(
         react.Text,
@@ -4834,7 +4887,7 @@
       }
     return a;
   };
-  var __objRest$1y = (source, exclude) => {
+  var __objRest$1z = (source, exclude) => {
     var target = {};
     for (var prop in source)
       if (__hasOwnProp$1Y.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -4851,7 +4904,7 @@
       children,
       max = Infinity,
       spacing = "-4"
-    } = _b, rest = __objRest$1y(_b, [
+    } = _b, rest = __objRest$1z(_b, [
       "children",
       "max",
       "spacing"
@@ -4881,7 +4934,33 @@
       }
     return a;
   };
-  const Badge = React.forwardRef((props, ref) => /* @__PURE__ */ React.createElement(react.Badge, __spreadValues$1X({ ref }, props)));
+  var __objRest$1y = (source, exclude) => {
+    var target = {};
+    for (var prop in source)
+      if (__hasOwnProp$1X.call(source, prop) && exclude.indexOf(prop) < 0)
+        target[prop] = source[prop];
+    if (source != null && __getOwnPropSymbols$1X)
+      for (var prop of __getOwnPropSymbols$1X(source)) {
+        if (exclude.indexOf(prop) < 0 && __propIsEnum$1X.call(source, prop))
+          target[prop] = source[prop];
+      }
+    return target;
+  };
+  const Badge = React.forwardRef((props, ref) => {
+    const _a = props, {
+      children,
+      withIcon,
+      iconPosition = "left",
+      iconAs
+    } = _a, rest = __objRest$1y(_a, [
+      "children",
+      "withIcon",
+      "iconPosition",
+      "iconAs"
+    ]);
+    const IconComponent = iconAs ? NorthlightIcons__namespace[iconAs] : NorthlightIcons.MediatoolLogoSolid;
+    return /* @__PURE__ */ React.createElement(react.Badge, __spreadValues$1X({ ref }, rest), /* @__PURE__ */ React.createElement(react.Flex, { align: "center", gap: "1" }, withIcon && iconPosition === "left" && IconComponent && /* @__PURE__ */ React.createElement(Icon, { as: IconComponent, boxSize: "3" }), children, withIcon && iconPosition === "right" && IconComponent && /* @__PURE__ */ React.createElement(Icon, { as: IconComponent, boxSize: "3" })));
+  });
 
   var __defProp$1W = Object.defineProperty;
   var __getOwnPropSymbols$1W = Object.getOwnPropertySymbols;
@@ -5566,7 +5645,7 @@
         "aria-label": `select-${color}`,
         onClick,
         sx: colorButton,
-        icon: /* @__PURE__ */ React.createElement(Icon, { as: icons.CheckDuo, boxSize: selected ? void 0 : "0" }),
+        icon: /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.CheckDuo, boxSize: selected ? void 0 : "0" }),
         color: getContrastColor(color)
       }
     );
@@ -5624,7 +5703,7 @@
         onClick,
         sx: colorButton
       },
-      /* @__PURE__ */ React.createElement(Icon, { as: expanded ? icons.ChevronUpDuo : icons.ChevronDownDuo })
+      /* @__PURE__ */ React.createElement(Icon, { as: expanded ? NorthlightIcons.ChevronUpDuo : NorthlightIcons.ChevronDownDuo })
     );
   };
 
@@ -5781,7 +5860,7 @@
           name,
           sx: trigger,
           size,
-          icon: /* @__PURE__ */ React.createElement(Icon, { as: icons.ColorsDuo })
+          icon: /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.ColorsDuo })
         }, rest)
       )),
       /* @__PURE__ */ React.createElement(RenderInPortal, { shouldRenderInPortal }, /* @__PURE__ */ React.createElement(react.PopoverContent, { w: "auto", boxShadow: "md", p: 2, bgColor: "background.default" }, /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(
@@ -6036,7 +6115,7 @@
         as: "label"
       },
       /* @__PURE__ */ React.createElement("input", __spreadValues$1H({}, flipButtonProps)),
-      icon && iconPlacement !== "none" ? /* @__PURE__ */ React.createElement(Icon, { as: icon || icons.CheckSolid, sx: buttonIcon }) : isSelected && iconPlacement !== "none" && /* @__PURE__ */ React.createElement(react.SlideFade, { in: isSelected }, /* @__PURE__ */ React.createElement(Icon, { as: icon || icons.CheckSolid, sx: buttonIcon })),
+      icon && iconPlacement !== "none" ? /* @__PURE__ */ React.createElement(Icon, { as: icon || NorthlightIcons.CheckSolid, sx: buttonIcon }) : isSelected && iconPlacement !== "none" && /* @__PURE__ */ React.createElement(react.SlideFade, { in: isSelected }, /* @__PURE__ */ React.createElement(Icon, { as: icon || NorthlightIcons.CheckSolid, sx: buttonIcon })),
       /* @__PURE__ */ React.createElement(react.Text, { textAlign: "center" }, children)
     );
   };
@@ -6290,7 +6369,7 @@
         onPointerDown: handleClick,
         pointerEvents: isDisabled ? "none" : "auto"
       }),
-      /* @__PURE__ */ React.createElement(Icon, { as: icons.CalendarDuo })
+      /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.CalendarDuo })
     );
   };
 
@@ -6909,7 +6988,7 @@
       const weekNumber = getWeekNumberAtStartOfMonth(startDate.year, startDate.month);
       return weekNumber;
     }, [startDate.year, startDate.month]);
-    return /* @__PURE__ */ React.createElement(react.Box, __spreadProps$h(__spreadValues$1u({}, calendarProps), { h: "265px", p: "0" }), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.Flex, { justify: "space-between", w: "full", p: "1", alignItems: "center" }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1u({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: icons.ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(react.HStack, { spacing: "0" }, /* @__PURE__ */ React.createElement(MonthSelect, { state }), /* @__PURE__ */ React.createElement(YearSelectRangeCalendar, { state })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1u({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: icons.ChevronRightSolid, boxSize: 4 }))), /* @__PURE__ */ React.createElement(react.chakra.table, __spreadProps$h(__spreadValues$1u({}, gridProps), { sx: { borderSpacing: "0" } }), /* @__PURE__ */ React.createElement(react.chakra.thead, __spreadValues$1u({}, headerProps), /* @__PURE__ */ React.createElement(react.chakra.tr, null, /* @__PURE__ */ React.createElement(react.chakra.th, null), /* @__PURE__ */ React.createElement(DayLabels, { weekDays }))), /* @__PURE__ */ React.createElement(react.chakra.tbody, null, ramda.times((weekIndex) => {
+    return /* @__PURE__ */ React.createElement(react.Box, __spreadProps$h(__spreadValues$1u({}, calendarProps), { h: "265px", p: "0" }), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.Flex, { justify: "space-between", w: "full", p: "1", alignItems: "center" }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1u({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(react.HStack, { spacing: "0" }, /* @__PURE__ */ React.createElement(MonthSelect, { state }), /* @__PURE__ */ React.createElement(YearSelectRangeCalendar, { state })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1u({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.ChevronRightSolid, boxSize: 4 }))), /* @__PURE__ */ React.createElement(react.chakra.table, __spreadProps$h(__spreadValues$1u({}, gridProps), { sx: { borderSpacing: "0" } }), /* @__PURE__ */ React.createElement(react.chakra.thead, __spreadValues$1u({}, headerProps), /* @__PURE__ */ React.createElement(react.chakra.tr, null, /* @__PURE__ */ React.createElement(react.chakra.th, null), /* @__PURE__ */ React.createElement(DayLabels, { weekDays }))), /* @__PURE__ */ React.createElement(react.chakra.tbody, null, ramda.times((weekIndex) => {
       const weekNumber = getDisplayWeek(
         weekNumberStart,
         weekIndex,
@@ -6962,7 +7041,7 @@
       props,
       state
     );
-    return /* @__PURE__ */ React.createElement(react.Box, __spreadProps$g(__spreadValues$1t({}, calendarProps), { __css: container }), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.Flex, { justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(react.Box, { paddingInlineStart: "2" }, /* @__PURE__ */ React.createElement(YearSelectCalendar, { state })), /* @__PURE__ */ React.createElement(react.HStack, { spacing: 2 }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: icons.ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: icons.ChevronRightSolid, boxSize: 4 })))), /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(react.Box, __spreadProps$g(__spreadValues$1t({}, calendarProps), { __css: container }), /* @__PURE__ */ React.createElement(react.Stack, null, /* @__PURE__ */ React.createElement(react.Flex, { justifyContent: "space-between" }, /* @__PURE__ */ React.createElement(react.Box, { paddingInlineStart: "2" }, /* @__PURE__ */ React.createElement(YearSelectCalendar, { state })), /* @__PURE__ */ React.createElement(react.HStack, { spacing: 2 }, /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, prevButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.ChevronLeftSolid, boxSize: 4 })), /* @__PURE__ */ React.createElement(MonthButton, __spreadValues$1t({}, nextButtonProps), /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.ChevronRightSolid, boxSize: 4 })))), /* @__PURE__ */ React.createElement(
       CalendarGrid,
       {
         state,
@@ -7060,7 +7139,7 @@
           onClick: resetDate,
           hidden: !state.dateValue || !isClearable,
           isDisabled,
-          icon: /* @__PURE__ */ React.createElement(Icon, { as: icons.XCloseSolid })
+          icon: /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.XCloseSolid })
         }
       ))),
       state.isOpen && /* @__PURE__ */ React.createElement(react.PopoverContent, __spreadProps$f(__spreadValues$1s({}, dialogProps), { ref, w: 64, border: "none" }), /* @__PURE__ */ React.createElement(focus.FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React.createElement(Calendar, __spreadProps$f(__spreadValues$1s({}, calendarProps), { firstDayOfWeek })))))
@@ -7726,7 +7805,7 @@
           onClick: resetDate,
           hidden: !isClearable,
           isDisabled,
-          icon: /* @__PURE__ */ React.createElement(Icon, { as: icons.XCloseSolid })
+          icon: /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.XCloseSolid })
         }
       ))),
       /* @__PURE__ */ React.createElement(PortalWrapper, { renderInPortal }, state.isOpen && /* @__PURE__ */ React.createElement(react.PopoverContent, __spreadProps$e(__spreadValues$1p({}, dialogProps), { ref, w: "max-content" }), /* @__PURE__ */ React.createElement(focus.FocusScope, { contain: true, restoreFocus: true }, /* @__PURE__ */ React.createElement(DatePickerLocaleWrapper, { firstDayOfWeek }, /* @__PURE__ */ React.createElement(
@@ -7988,14 +8067,14 @@
   });
 
   const tooltipIconMap = {
-    success: icons.CheckCircleSolid,
-    warning: icons.AlertTriangleSolid,
-    error: icons.AlertCircleSolid,
-    danger: icons.AlertOctagonSolid,
-    info: icons.InfoSolid,
-    ai: icons.BrightnessSolid,
-    default: icons.HelpCircleSolid,
-    ghost: icons.HelpCircleSolid
+    success: NorthlightIcons.CheckCircleSolid,
+    warning: NorthlightIcons.AlertTriangleSolid,
+    error: NorthlightIcons.AlertCircleSolid,
+    danger: NorthlightIcons.AlertOctagonSolid,
+    info: NorthlightIcons.InfoSolid,
+    ai: NorthlightIcons.BrightnessSolid,
+    default: NorthlightIcons.HelpCircleSolid,
+    ghost: NorthlightIcons.HelpCircleSolid
   };
 
   var __defProp$1l = Object.defineProperty;
@@ -8172,7 +8251,7 @@
   };
   const IntentButton = (_a) => {
     var _b = _a, {
-      icon = icons.TrashDuo,
+      icon = NorthlightIcons.TrashDuo,
       timeout = 1e3,
       ringColor = "border.error",
       onTimeout = () => {
@@ -8704,7 +8783,8 @@
       onClose,
       autoFocus = true,
       resizeLimit = "full",
-      zIndex = tokens.coreZIndex.overlay
+      zIndex = tokens.coreZIndex.overlay,
+      slideProps
     } = _b, rest = __objRest$10(_b, [
       "isResizable",
       "isOpen",
@@ -8715,7 +8795,8 @@
       "onClose",
       "autoFocus",
       "resizeLimit",
-      "zIndex"
+      "zIndex",
+      "slideProps"
     ]);
     const { container } = system.useMultiStyleConfig("Toolbox", { size });
     const newChildren = getChildrenWithProps(
@@ -8750,7 +8831,7 @@
       },
       /* @__PURE__ */ React.createElement(react.Portal, null, /* @__PURE__ */ React.createElement(
         Slide,
-        {
+        __spreadValues$1d({
           direction,
           in: isOpen,
           style: {
@@ -8758,7 +8839,7 @@
             width: adjustableWidth,
             zIndex
           }
-        },
+        }, slideProps),
         /* @__PURE__ */ React.createElement(
           react.Flex,
           __spreadValues$1d({
@@ -9119,7 +9200,7 @@
         sx: arrow,
         onClick
       }, rest),
-      /* @__PURE__ */ React.createElement(IconButton, { "aria-label": `move carousel to ${direction}`, variant: "ghost", size: "lg" }, /* @__PURE__ */ React.createElement(Icon, { as: direction === "right" ? icons.ChevronRightSolid : icons.ChevronLeftSolid }))
+      /* @__PURE__ */ React.createElement(IconButton, { "aria-label": `move carousel to ${direction}`, variant: "ghost", size: "lg" }, /* @__PURE__ */ React.createElement(Icon, { as: direction === "right" ? NorthlightIcons.ChevronRightSolid : NorthlightIcons.ChevronLeftSolid }))
     );
   };
 
@@ -9429,7 +9510,7 @@
         "data-testid": testId,
         value,
         onSearchInputChange = ramda.identity,
-        icon = icons.SearchDuo
+        icon = NorthlightIcons.SearchDuo
       } = _b, rest = __objRest$S(_b, [
         "defaultOptions",
         "isMulti",
@@ -9616,7 +9697,7 @@
           fontSize: "sm",
           hidden: ramda.isEmpty(value) || !isClearable,
           onClick: () => onChange([]),
-          icon: /* @__PURE__ */ React.createElement(Icon, { as: icons.XCloseSolid })
+          icon: /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.XCloseSolid })
         }
       ))
     );
@@ -9802,7 +9883,7 @@
           minW: "max-content"
         }, rest),
         /* @__PURE__ */ React.createElement(react.TagLabel, null, itemLabel),
-        /* @__PURE__ */ React.createElement(react.TagRightIcon, null, /* @__PURE__ */ React.createElement(Icon, { as: icons.DotsMatrixSolid }))
+        /* @__PURE__ */ React.createElement(react.TagRightIcon, null, /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.DotsMatrixSolid }))
       );
     }
   );
@@ -10083,7 +10164,7 @@
     return /* @__PURE__ */ React.createElement(
       Icon,
       __spreadValues$U({
-        as: icon || icons.DragDuo,
+        as: icon || NorthlightIcons.DragDuo,
         cursor: isDragging ? "grabbing" : "grab"
       }, rest)
     );
@@ -10474,7 +10555,7 @@
         sx: button,
         variant: mapEditableVariantsToButtonCancelVariants[variant]
       }, getCancelButtonProps()),
-      /* @__PURE__ */ React.createElement(Icon, { sx: icon, as: icons.XCloseSolid })
+      /* @__PURE__ */ React.createElement(Icon, { sx: icon, as: NorthlightIcons.XCloseSolid })
     ), /* @__PURE__ */ React.createElement(
       IconButton,
       __spreadValues$P({
@@ -10482,7 +10563,7 @@
         sx: button,
         variant: mapEditableVariantsToButtonSubmitVariants[variant]
       }, getSubmitButtonProps()),
-      /* @__PURE__ */ React.createElement(Icon, { sx: icon, as: icons.CheckDuo })
+      /* @__PURE__ */ React.createElement(Icon, { sx: icon, as: NorthlightIcons.CheckDuo })
     )) : /* @__PURE__ */ React.createElement(
       IconButton,
       {
@@ -10491,7 +10572,7 @@
         sx: button,
         onClick: onEdit
       },
-      /* @__PURE__ */ React.createElement(Icon, { sx: icon, as: icons.EditDuo })
+      /* @__PURE__ */ React.createElement(Icon, { sx: icon, as: NorthlightIcons.EditDuo })
     ));
   };
 
@@ -10773,7 +10854,7 @@
             onChange: (value) => setZoomLevel(value)
           },
           /* @__PURE__ */ React.createElement(react.SliderTrack, null, /* @__PURE__ */ React.createElement(react.SliderFilledTrack, null)),
-          /* @__PURE__ */ React.createElement(react.SliderThumb, { boxSize: 6 }, /* @__PURE__ */ React.createElement(Icon, { as: icons.ZoomInDuo }))
+          /* @__PURE__ */ React.createElement(react.SliderThumb, { boxSize: 6 }, /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.ZoomInDuo }))
         ))),
         canEditFileName && /* @__PURE__ */ React.createElement(react.Stack, { w: "90%", direction: isImage ? "row" : "column", pt: 2 }, /* @__PURE__ */ React.createElement(FormLabel, null, "Name the file:"), /* @__PURE__ */ React.createElement(react.Box, { maxW: "50%" }, /* @__PURE__ */ React.createElement(EditableText, { onSubmit: (v) => setFileName(v), value: fileName, size: "sm" })))
       ),
@@ -11446,7 +11527,7 @@
         /* @__PURE__ */ React.createElement(
           Icon,
           {
-            as: onlyImageAccepted ? icons.Image03Solid : icons.UploadCloudSolid,
+            as: onlyImageAccepted ? NorthlightIcons.Image03Solid : NorthlightIcons.UploadCloudSolid,
             boxSize: "32px",
             color: isInvalid ? "red.500" : editable ? "blue.500" : "gray.300",
             display: isImage && !hasLoaded ? "inline-block" : "none",
@@ -11456,7 +11537,7 @@
         /* @__PURE__ */ React.createElement(
           Icon,
           {
-            as: icons.FileBlankDuo,
+            as: NorthlightIcons.FileBlankDuo,
             boxSize: "32px",
             color: "gray.300",
             display: hasLoaded && !isImage ? "inline-block" : "none"
@@ -11513,7 +11594,7 @@
             {
               "aria-label": "edit-file",
               onClick: editModal.onOpen,
-              icon: icons.EditBoxDuo
+              icon: NorthlightIcons.EditBoxDuo
             }
           ),
           /* @__PURE__ */ React.createElement(
@@ -11521,7 +11602,7 @@
             {
               "aria-label": "download-file",
               onClick: handleDownload(file),
-              icon: icons.DownloadDuo
+              icon: NorthlightIcons.DownloadDuo
             }
           ),
           /* @__PURE__ */ React.createElement(
@@ -11529,7 +11610,7 @@
             {
               "aria-label": "delete-file",
               onClick: confirmDelete ? deleteModal.onOpen : clearImage,
-              icon: icons.TrashFullDuo,
+              icon: NorthlightIcons.TrashFullDuo,
               color: "red.500"
             }
           )
@@ -11767,7 +11848,7 @@
         /* @__PURE__ */ React.createElement(
           Icon,
           {
-            as: onlyImageAccepted ? icons.Image03Solid : icons.UploadCloudSolid,
+            as: onlyImageAccepted ? NorthlightIcons.Image03Solid : NorthlightIcons.UploadCloudSolid,
             boxSize: "32px",
             color: isInvalid ? "red.500 " : active ? "blue.500 " : "gray.300",
             "aria-label": "image-icon-upload",
@@ -11885,7 +11966,7 @@
         /* @__PURE__ */ React.createElement(react.HStack, { spacing: 4, alignItems: "start", maxW: "50%" }, isFileImage(file) ? file.isUploading || loadingImage ? /* @__PURE__ */ React.createElement(
           Icon,
           {
-            as: icons.Image03Duo,
+            as: NorthlightIcons.Image03Duo,
             bgColor: "gray.100",
             color: "gray.400",
             boxSize: "10",
@@ -11905,7 +11986,7 @@
         ) : /* @__PURE__ */ React.createElement(
           Icon,
           {
-            as: icons.FileBlankDuo,
+            as: NorthlightIcons.FileBlankDuo,
             boxSize: "10",
             p: "1",
             color: "gray.300"
@@ -11946,7 +12027,7 @@
             {
               "aria-label": "Edit-image",
               onClick: editModalDisclosure.onOpen,
-              icon: icons.EditBoxDuo
+              icon: NorthlightIcons.EditBoxDuo
             }
           ),
           /* @__PURE__ */ React.createElement(
@@ -11954,7 +12035,7 @@
             {
               "aria-label": "download-image",
               onClick: handleDownload(file),
-              icon: icons.DownloadDuo
+              icon: NorthlightIcons.DownloadDuo
             }
           ),
           /* @__PURE__ */ React.createElement(
@@ -12359,14 +12440,14 @@
   }) => /* @__PURE__ */ React.createElement(react.NumberInputStepper, null, /* @__PURE__ */ React.createElement(react.HStack, { alignItems: "center", h: "full" }, includePercentage && /* @__PURE__ */ React.createElement(react.Center, { bgColor: "gray.50", borderRadius: "md", boxSize: "6" }, /* @__PURE__ */ React.createElement(P, null, "%")), enableStepperArrows && /* @__PURE__ */ React.createElement(react.HStack, { alignItems: "center", h: "full" }, /* @__PURE__ */ React.createElement(react.Divider, { orientation: "vertical", h: "50%" }), /* @__PURE__ */ React.createElement(react.NumberIncrementStepper, { border: "none" }, /* @__PURE__ */ React.createElement(
     Icon,
     {
-      as: icons.ChevronUpSolid,
+      as: NorthlightIcons.ChevronUpSolid,
       color: "icon.input-stepper.default",
       boxSize: 4
     }
   )), /* @__PURE__ */ React.createElement(react.NumberDecrementStepper, null, /* @__PURE__ */ React.createElement(
     Icon,
     {
-      as: icons.ChevronDownSolid,
+      as: NorthlightIcons.ChevronDownSolid,
       color: "icon.input-stepper.default",
       boxSize: 4
     }
@@ -12898,7 +12979,7 @@
             onChange(void 0);
             onChangeCallback(void 0, { action: "clear", removedValues: value });
           },
-          icon: /* @__PURE__ */ React.createElement(Icon, { as: icons.XCloseSolid })
+          icon: /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.XCloseSolid })
         }
       ))
     );
@@ -13581,14 +13662,14 @@
   });
 
   const toastIconMap = {
-    success: icons.CheckCircleSolid,
-    warning: icons.AlertTriangleSolid,
-    error: icons.AlertCircleSolid,
-    danger: icons.AlertCircleSolid,
-    info: icons.BellSolid,
-    ai: icons.BrightnessSolid,
-    default: icons.HelpCircleSolid,
-    ghost: icons.HelpCircleSolid
+    success: NorthlightIcons.CheckCircleSolid,
+    warning: NorthlightIcons.AlertTriangleSolid,
+    error: NorthlightIcons.AlertCircleSolid,
+    danger: NorthlightIcons.AlertCircleSolid,
+    info: NorthlightIcons.BellSolid,
+    ai: NorthlightIcons.BrightnessSolid,
+    default: NorthlightIcons.HelpCircleSolid,
+    ghost: NorthlightIcons.HelpCircleSolid
   };
 
   var __defProp$g = Object.defineProperty;
@@ -14016,7 +14097,7 @@
         /* @__PURE__ */ React.createElement(
           Icon,
           {
-            as: hasCopied ? icons.CheckDuo : icons.CopyDuo,
+            as: hasCopied ? NorthlightIcons.CheckDuo : NorthlightIcons.CopyDuo,
             sx: icon
           }
         )
@@ -14292,7 +14373,7 @@
           justifyContent: "center",
           alignItems: "center"
         },
-        /* @__PURE__ */ React.createElement(Icon, { as: icons.PlusSolid, color: "brand" })
+        /* @__PURE__ */ React.createElement(Icon, { as: NorthlightIcons.PlusSolid, color: "brand" })
       ), !props.data.isCreation && /* @__PURE__ */ React.createElement(react.Box, { mr: 3, width: 1.5 }), /* @__PURE__ */ React.createElement(
         react.Text,
         {
@@ -14425,7 +14506,7 @@
     );
     const customOptions = [
       __spreadProps$1(__spreadValues$2({}, creationOption), {
-        icon: /* @__PURE__ */ React.createElement(react.Icon, { as: icons.PlusSolid, color: "brand" })
+        icon: /* @__PURE__ */ React.createElement(react.Icon, { as: NorthlightIcons.PlusSolid, color: "brand" })
       }),
       ...combinedOptions
     ];