@cerebruminc/cerebellum 13.9.2 → 14.0.0

package/lib/cjs/{RJSFormRenderer-DEbHQ_kY.js → RJSFormRenderer-DkuTGTRg.js}

@@ -11,7 +11,6 @@ require('./Inputs-C0rtyojv.js');
 var helpers = require('./helpers-C-IoiH8X.js');
 var isEmptyObject = require('./isEmptyObject.cjs');
 var dayjs = require('dayjs');
-var types = require('./types-5wgDsApd.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -98,22 +97,35 @@ function formatDate(unknownStringOrNumber, dateFormat) {
     return unknownStringOrNumber;
 }
 
+var RJSFormFields;
+(function (RJSFormFields) {
+    RJSFormFields["Array"] = "Array";
+    RJSFormFields["Checkbox"] = "Checkbox";
+    RJSFormFields["Date"] = "Date";
+    RJSFormFields["Hidden"] = "Hidden";
+    RJSFormFields["Number"] = "Number";
+    RJSFormFields["Phone"] = "Phone";
+    RJSFormFields["Select"] = "Select";
+    RJSFormFields["Text"] = "Text";
+    RJSFormFields["File"] = "File";
+})(RJSFormFields || (RJSFormFields = {}));
+
 var isCheckbox = function (_a) {
     var _b;
     var uiSchema = _a.uiSchema, name = _a.name, type = _a.type;
-    return (uiSchema && ((_b = uiSchema[name]) === null || _b === void 0 ? void 0 : _b["ui:field"]) === types.RJSFormFields.Checkbox) || type === "boolean";
+    return (uiSchema && ((_b = uiSchema[name]) === null || _b === void 0 ? void 0 : _b["ui:field"]) === RJSFormFields.Checkbox) || type === "boolean";
 };
 
 var isDate = function (_a) {
     var _b;
     var uiSchema = _a.uiSchema, name = _a.name, type = _a.type;
-    return !!(uiSchema && ((_b = uiSchema[name]) === null || _b === void 0 ? void 0 : _b["ui:field"]) === types.RJSFormFields.Date) && type === "string";
+    return !!(uiSchema && ((_b = uiSchema[name]) === null || _b === void 0 ? void 0 : _b["ui:field"]) === RJSFormFields.Date) && type === "string";
 };
 
 var isPhone = function (_a) {
     var _b;
     var uiSchema = _a.uiSchema, name = _a.name, type = _a.type;
-    return !!(uiSchema && ((_b = uiSchema[name]) === null || _b === void 0 ? void 0 : _b["ui:field"]) === types.RJSFormFields.Phone) && type === "string";
+    return !!(uiSchema && ((_b = uiSchema[name]) === null || _b === void 0 ? void 0 : _b["ui:field"]) === RJSFormFields.Phone) && type === "string";
 };
 
 function orderSchemaKeys(_a) {
@@ -194,4 +206,4 @@ var RJSFormRenderer = function (_a) {
 };
 
 exports.RJSFormRenderer = RJSFormRenderer;
-//# sourceMappingURL=RJSFormRenderer-DEbHQ_kY.js.map
+//# sourceMappingURL=RJSFormRenderer-DkuTGTRg.js.map

package/lib/{esm/RJSFormRenderer-D0CSfA10.js.map → cjs/RJSFormRenderer-DkuTGTRg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RJSFormRenderer-D0CSfA10.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RJSFormRenderer-DkuTGTRg.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/RJSFormRenderer.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var RJSFormRenderer = require('./RJSFormRenderer-DEbHQ_kY.js');
+var RJSFormRenderer = require('./RJSFormRenderer-DkuTGTRg.js');
 require('react/jsx-runtime');
 require('react');
 require('./_tslib-D1hVYMxL.js');
@@ -13,7 +13,6 @@ require('./helpers-C-IoiH8X.js');
 require('./northAmericanPhoneMask.cjs');
 require('./isEmptyObject.cjs');
 require('dayjs');
-require('./types-5wgDsApd.js');
 
 
 

package/lib/cjs/RJSFormRenderer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RJSFormRenderer.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"RJSFormRenderer.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/lib/cjs/UserCard.cjs

@@ -3,6 +3,7 @@
 var _tslib = require('./_tslib-D1hVYMxL.js');
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var styled = require('styled-components');
 var Avatar = require('./Avatar-BKFQ9CRV.js');
 var getInitialsOnly = require('./getInitialsOnly.cjs');
 var colors = require('./colors.cjs');
@@ -12,26 +13,31 @@ var CheckmarkCircle = require('./CheckmarkCircle.cjs');
 var LogOut = require('./LogOut.cjs');
 var TruncatePicker = require('./TruncatePicker-Jj0nb9la.js');
 var gradients = require('./gradients.cjs');
-var styled = require('styled-components');
+var useMeasureWatchResize = require('./useMeasureWatchResize-CU_JgvQD.js');
 var BodyLEmphasis = require('./BodyLEmphasis.cjs');
 var Loading = require('./Loading.cjs');
 var Scroller = require('./Scroller.cjs');
 var focusAfter = require('./focusAfter.cjs');
+var isEmptyObject = require('./isEmptyObject.cjs');
+var SearchInput = require('./SearchInput-C_l6yEs0.js');
 require('./colors-BudXQEyU.js');
 require('./Truncate-DSAmkPQL.js');
 require('./getPosition.cjs');
 require('./useIsomorphicLayoutEffect-kdlV9QVN.js');
-require('./isEmptyObject.cjs');
 require('./useMeasure-CDq3dPfD.js');
 require('./addOrRemoveById.cjs');
 require('dayjs');
+require('./IconButton-CQJHjOTO.js');
+require('./ButtonColorFamilyEnum.cjs');
+require('./Search.cjs');
+require('./InlineInput-Ct3Zz8pE.js');
+require('./CloseCircle.cjs');
+require('./Inputs-C0rtyojv.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefault(React);
-
-var SIGN_OUT_HEIGHT = 90;
-var UserCardBase = styled.styled.div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  max-height: calc(100% - 20px);\n  position: relative;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: ", ";\n  width: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  max-height: calc(100% - 20px);\n  position: relative;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: ", ";\n  width: ", ";\n"])), function (_a) {
+var USER_DETAILS_PADDING = 21;
+var BASE_HEIGHT_OFFSET = 20;
+var ORG_SCROLLER_PADDING = 16;
+var UserCardBase = styled.styled.div(templateObject_1 || (templateObject_1 = _tslib.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  max-height: calc(100% - ", "px);\n  position: relative;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: ", ";\n  width: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  max-height: calc(100% - ", "px);\n  position: relative;\n  border-radius: ", "px;\n  background-color: ", ";\n  box-shadow: ", ";\n  width: ", ";\n"])), BASE_HEIGHT_OFFSET, function (_a) {
     var $themeOverride = _a.$themeOverride, theme = _a.theme;
     return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.cardBorderRadius) || theme.userCard.cardBorderRadius;
 }, function (_a) {
@@ -65,10 +71,13 @@ var AvatarWrapper = styled.styled.div(templateObject_3 || (templateObject_3 = _t
     var $themeOverride = _a.$themeOverride, theme = _a.theme;
     return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.avatarSize) || theme.userCard.avatarSize;
 });
-var UserDetails = styled.styled(Scroller.Scroller)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  position: relative;\n  padding: 21px 42px 37px;\n  overflow: auto;\n  max-height: ", ";\n"], ["\n  position: relative;\n  padding: 21px 42px 37px;\n  overflow: auto;\n  max-height: ", ";\n"])), function (_a) {
-    var $hasSignOut = _a.$hasSignOut, $topOffset = _a.$topOffset, $themeOverride = _a.$themeOverride, theme = _a.theme;
-    return "calc(90vh - (".concat(($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.gradientSectionHeight) || theme.userCard.gradientSectionHeight, "px + ").concat($topOffset || 0, "px + ").concat($hasSignOut ? SIGN_OUT_HEIGHT : 0, "px))");
-});
+var UserDetails = styled.styled(Scroller.Scroller)(templateObject_4 || (templateObject_4 = _tslib.__makeTemplateObject(["\n  max-height: ", ";\n  overflow-y: ", ";\n  padding-top: ", "px;\n  position: relative;\n"], ["\n  max-height: ", ";\n  overflow-y: ", ";\n  padding-top: ", "px;\n  position: relative;\n"])), function (_a) {
+    var $heightOffset = _a.$heightOffset;
+    return "calc(90vh - ".concat($heightOffset, "px)");
+}, function (_a) {
+    var $isScroller = _a.$isScroller;
+    return ($isScroller ? "auto" : "hidden");
+}, USER_DETAILS_PADDING);
 var Name = styled.styled(BodyLEmphasis.BodyLEmphasis)(templateObject_5 || (templateObject_5 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  height: ", ";\n  line-height: 24px;\n  margin-bottom: ", "px;\n  margin-top: ", "px;\n  width: ", ";\n  ", ";\n"], ["\n  color: ", ";\n  height: ", ";\n  line-height: 24px;\n  margin-bottom: ", "px;\n  margin-top: ", "px;\n  width: ", ";\n  ", ";\n"])), function (_a) {
     var $isLoading = _a.$isLoading, theme = _a.theme, $themeOverride = _a.$themeOverride;
     return ($isLoading ? "transparent" : ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.textColor) || theme.userCard.textColor);
@@ -104,15 +113,26 @@ var Email = styled.styled(BodyLEmphasis.BodyMPrimary)(templateObject_6 || (templ
     var $isLoading = _a.$isLoading;
     return $isLoading && Loading.loadingPseudo({});
 });
+var OptionsBox = styled.styled.div(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n\tmargin-top: 27px;\n\tpadding-bottom: 10px;\n"], ["\n\tmargin-top: 27px;\n\tpadding-bottom: 10px;\n"])));
+var ScrollingGroup = styled.styled(Scroller.Scroller)(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n\theight: ", ";\n\toverflow-y: ", ";\n\tpadding: 0px 42px ", "px;\n\tposition: relative;\n\t"], ["\n\theight: ", ";\n\toverflow-y: ", ";\n\tpadding: 0px 42px ", "px;\n\tposition: relative;\n\t"])), function (_a) {
+    var $isScroller = _a.$isScroller, $scrollerHeight = _a.$scrollerHeight;
+    return ($isScroller ? "".concat($scrollerHeight, "px") : "auto");
+}, function (_a) {
+    var $isScroller = _a.$isScroller;
+    return ($isScroller ? "auto" : "hidden");
+}, ORG_SCROLLER_PADDING);
+var NonScrollingGroup = styled.styled.div(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n\tpadding: 0px 42px;\n\tposition: relative;\n"], ["\n\tpadding: 0px 42px;\n\tposition: relative;\n"])));
+var SearchGroup = styled.styled.div(templateObject_10 || (templateObject_10 = _tslib.__makeTemplateObject(["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tmargin: 0 -7px;\n\toverflow: hidden;\n\tpadding-bottom: 15px;\n\tposition: relative;\n\twidth: 320px;\n\t"], ["\n\talign-items: center;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tmargin: 0 -7px;\n\toverflow: hidden;\n\tpadding-bottom: 15px;\n\tposition: relative;\n\twidth: 320px;\n\t"])));
+var SearchText = styled.styled(BodyLEmphasis.BodyMSecondary)(templateObject_11 || (templateObject_11 = _tslib.__makeTemplateObject(["\n\tcolor: ", ";\n"], ["\n\tcolor: ", ";\n"])), colors.colors.COOL_GREY_65);
 // ------ dividers ------
-var Divider = styled.styled.hr(templateObject_7 || (templateObject_7 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  height: 1px;\n  margin: ", ";\n  outline: none;\n"], ["\n  background-color: ", ";\n  border: none;\n  height: 1px;\n  margin: ", ";\n  outline: none;\n"])), function (_a) {
+var Divider = styled.styled.hr(templateObject_12 || (templateObject_12 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  border: none;\n  height: 1px;\n  margin: ", ";\n  outline: none;\n"], ["\n  background-color: ", ";\n  border: none;\n  height: 1px;\n  margin: ", ";\n  outline: none;\n"])), function (_a) {
     var $themeOverride = _a.$themeOverride, theme = _a.theme;
     return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.dividerColor) || theme.userCard.dividerColor;
 }, function (_a) {
     var $bottomMargin = _a.$bottomMargin, $topMargin = _a.$topMargin;
     return "".concat($topMargin || 0, "px -7px ").concat($bottomMargin || 0, "px");
 });
-var Option = styled.styled.div(templateObject_8 || (templateObject_8 = _tslib.__makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  gap: ", "px;\n  margin-bottom: ", "px;\n  position: relative;\n  ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n  z-index: 1;\n  &:after {\n    content: \"\";\n    background-color: transparent;\n    border-radius: 4px;\n    bottom: -7px;\n    left: -10px;\n    position: absolute;\n    right: -10px;\n    top: -7px;\n    transition: background-color 350ms ease-out 50ms;\n    z-index: -1;\n  }\n  &:hover {\n    &:after {\n      background-color: ", ";\n    }\n  }\n  &:active {\n    top: 1px;\n  }\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  gap: ", "px;\n  margin-bottom: ", "px;\n  position: relative;\n  ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n  z-index: 1;\n  &:after {\n    content: \"\";\n    background-color: transparent;\n    border-radius: 4px;\n    bottom: -7px;\n    left: -10px;\n    position: absolute;\n    right: -10px;\n    top: -7px;\n    transition: background-color 350ms ease-out 50ms;\n    z-index: -1;\n  }\n  &:hover {\n    &:after {\n      background-color: ", ";\n    }\n  }\n  &:active {\n    top: 1px;\n  }\n"])), function (_a) {
+var Option = styled.styled.div(templateObject_13 || (templateObject_13 = _tslib.__makeTemplateObject(["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  gap: ", "px;\n  margin-bottom: ", "px;\n  position: relative;\n  ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n  z-index: 1;\n  &:after {\n    content: \"\";\n    background-color: transparent;\n    border-radius: 4px;\n    bottom: -7px;\n    left: -10px;\n    position: absolute;\n    right: -10px;\n    top: -7px;\n    transition: background-color 350ms ease-out 50ms;\n    z-index: -1;\n  }\n  &:hover {\n    &:after {\n      background-color: ", ";\n    }\n  }\n  &:active {\n    top: 1px;\n  }\n"], ["\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  gap: ", "px;\n  margin-bottom: ", "px;\n  position: relative;\n  ", ";\n  height: ", ";\n  width: ", ";\n  ", ";\n  z-index: 1;\n  &:after {\n    content: \"\";\n    background-color: transparent;\n    border-radius: 4px;\n    bottom: -7px;\n    left: -10px;\n    position: absolute;\n    right: -10px;\n    top: -7px;\n    transition: background-color 350ms ease-out 50ms;\n    z-index: -1;\n  }\n  &:hover {\n    &:after {\n      background-color: ", ";\n    }\n  }\n  &:active {\n    top: 1px;\n  }\n"])), function (_a) {
     var $iconSize = _a.$iconSize;
     return 29 - ($iconSize || 16);
 }, function (_a) {
@@ -134,25 +154,25 @@ var Option = styled.styled.div(templateObject_8 || (templateObject_8 = _tslib.__
     var $themeOverride = _a.$themeOverride, theme = _a.theme;
     return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.linkHoverColor) || theme.userCard.linkHoverColor;
 });
-var OptionIconBox = styled.styled.div(templateObject_9 || (templateObject_9 = _tslib.__makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  height: ", "px;\n  width: ", "px;\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  height: ", "px;\n  width: ", "px;\n"])), function (_a) {
+var OptionIconBox = styled.styled.div(templateObject_14 || (templateObject_14 = _tslib.__makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  height: ", "px;\n  width: ", "px;\n"], ["\n  align-items: center;\n  display: flex;\n  justify-content: center;\n  height: ", "px;\n  width: ", "px;\n"])), function (_a) {
     var $iconSize = _a.$iconSize;
     return $iconSize || 16;
 }, function (_a) {
     var $iconSize = _a.$iconSize;
     return $iconSize || 16;
 });
-var OptionIcon = styled.styled.div(templateObject_10 || (templateObject_10 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n"], ["\n  height: ", "px;\n  width: ", "px;\n"])), function (_a) {
+var OptionIcon = styled.styled.div(templateObject_15 || (templateObject_15 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n"], ["\n  height: ", "px;\n  width: ", "px;\n"])), function (_a) {
     var $iconSize = _a.$iconSize;
     return $iconSize || 16;
 }, function (_a) {
     var $iconSize = _a.$iconSize;
     return $iconSize || 16;
 });
-var OptionText = styled.styled(BodyLEmphasis.BodySSemiBold)(templateObject_11 || (templateObject_11 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  white-space: normal;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  padding-right: 5px;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  word-break: break-word;\n\toverflow-wrap: break-word;\n"], ["\n  color: ", ";\n  white-space: normal;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  padding-right: 5px;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  word-break: break-word;\n\toverflow-wrap: break-word;\n"])), function (_a) {
+var OptionText = styled.styled(BodyLEmphasis.BodySSemiBold)(templateObject_16 || (templateObject_16 = _tslib.__makeTemplateObject(["\n  color: ", ";\n  padding-right: 5px;\n"], ["\n  color: ", ";\n  padding-right: 5px;\n"])), function (_a) {
     var theme = _a.theme, $themeOverride = _a.$themeOverride;
     return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.textColor) || theme.userCard.textColor;
 });
-var Organization = styled.styled.div(templateObject_12 || (templateObject_12 = _tslib.__makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid ", ";\n  border-radius: 4px;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  gap: 14px;\n  height: ", "px;\n  margin-bottom: ", "px;\n  margin-left: -7px;\n  margin-right: -7px;\n  padding-left: ", "px;\n  pointer-events: ", ";\n  position: relative;\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    top: 1px;\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid ", ";\n  border-radius: 4px;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  gap: 14px;\n  height: ", "px;\n  margin-bottom: ", "px;\n  margin-left: -7px;\n  margin-right: -7px;\n  padding-left: ", "px;\n  pointer-events: ", ";\n  position: relative;\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    top: 1px;\n  }\n"])), function (_a) {
+var Organization = styled.styled.div(templateObject_17 || (templateObject_17 = _tslib.__makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid ", ";\n  border-radius: 4px;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  gap: 14px;\n  height: ", "px;\n  margin-bottom: ", "px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n  padding-left: ", "px;\n  pointer-events: ", ";\n  position: relative;\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    top: 1px;\n  }\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: 1px solid ", ";\n  border-radius: 4px;\n  cursor: ", ";\n  display: flex;\n  ", ";\n  gap: 14px;\n  height: ", "px;\n  margin-bottom: ", "px;\n  margin-left: ", "px;\n  margin-right: ", "px;\n  padding-left: ", "px;\n  pointer-events: ", ";\n  position: relative;\n  ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    top: 1px;\n  }\n"])), function (_a) {
     var $isActive = _a.$isActive;
     return ($isActive ? colors.colors.BLUE_25 : "transparent");
 }, function (_a) {
@@ -167,6 +187,12 @@ var Organization = styled.styled.div(templateObject_12 || (templateObject_12 = _
 }, function (_a) {
     var $isLoading = _a.$isLoading, $noBottomMargin = _a.$noBottomMargin;
     return ($noBottomMargin ? ($isLoading ? 2 : 0) : $isLoading ? 27 : 5);
+}, function (_a) {
+    var $isLoading = _a.$isLoading;
+    return ($isLoading ? 0 : -7);
+}, function (_a) {
+    var $isLoading = _a.$isLoading;
+    return ($isLoading ? 0 : -7);
 }, function (_a) {
     var $hasIcon = _a.$hasIcon;
     return ($hasIcon ? 7 : 21);
@@ -180,20 +206,19 @@ var Organization = styled.styled.div(templateObject_12 || (templateObject_12 = _
     var $themeOverride = _a.$themeOverride, theme = _a.theme;
     return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.linkHoverColor) || theme.userCard.linkHoverColor;
 });
-var OrganizationIconBox = styled.styled(OptionIconBox)(templateObject_13 || (templateObject_13 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: 36px;\n  flex-shrink: 0;\n"], ["\n  height: ", "px;\n  width: 36px;\n  flex-shrink: 0;\n"])), function (_a) {
+var OrganizationIconBox = styled.styled(OptionIconBox)(templateObject_18 || (templateObject_18 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: 36px;\n  flex-shrink: 0;\n"], ["\n  height: ", "px;\n  width: 36px;\n  flex-shrink: 0;\n"])), function (_a) {
     var $iconSize = _a.$iconSize;
     return $iconSize || 36;
 });
-var OrganizationIcon = styled.styled.div(templateObject_14 || (templateObject_14 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n"], ["\n  height: ", "px;\n  width: ", "px;\n"])), function (_a) {
+var OrganizationIcon = styled.styled.div(templateObject_19 || (templateObject_19 = _tslib.__makeTemplateObject(["\n  height: ", "px;\n  width: ", "px;\n"], ["\n  height: ", "px;\n  width: ", "px;\n"])), function (_a) {
     var $iconSize = _a.$iconSize;
     return $iconSize || 36;
 }, function (_a) {
     var $iconSize = _a.$iconSize;
     return $iconSize || 36;
 });
-var ActiveIcon = styled.styled.div(templateObject_15 || (templateObject_15 = _tslib.__makeTemplateObject(["\n  height: 15px;\n  margin: 0 10px 0 auto;\n  width: 15px;\n  flex-shrink: 0;\n"], ["\n  height: 15px;\n  margin: 0 10px 0 auto;\n  width: 15px;\n  flex-shrink: 0;\n"])));
-var NegativeCreep = styled.styled.div(templateObject_16 || (templateObject_16 = _tslib.__makeTemplateObject(["\n  margin: 0 -11px;\n"], ["\n  margin: 0 -11px;\n"])));
-var SignOutWrapper = styled.styled.div(templateObject_17 || (templateObject_17 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  padding: 0 42px 30px;\n  z-index: 2;\n  border-radius: 0 0\n    ", ";\n"], ["\n  background-color: ", ";\n  padding: 0 42px 30px;\n  z-index: 2;\n  border-radius: 0 0\n    ", ";\n"])), function (_a) {
+var ActiveIcon = styled.styled.div(templateObject_20 || (templateObject_20 = _tslib.__makeTemplateObject(["\n  height: 15px;\n  margin: 0 10px 0 auto;\n  width: 15px;\n  flex-shrink: 0;\n"], ["\n  height: 15px;\n  margin: 0 10px 0 auto;\n  width: 15px;\n  flex-shrink: 0;\n"])));
+var SignOutWrapper = styled.styled.div(templateObject_21 || (templateObject_21 = _tslib.__makeTemplateObject(["\n  background-color: ", ";\n  padding: 0 42px 30px;\n  z-index: 2;\n  border-radius: 0 0\n    ", ";\n"], ["\n  background-color: ", ";\n  padding: 0 42px 30px;\n  z-index: 2;\n  border-radius: 0 0\n    ", ";\n"])), function (_a) {
     var $themeOverride = _a.$themeOverride, theme = _a.theme;
     return ($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.backgroundColor) || theme.userCard.backgroundColor;
 }, function (_a) {
@@ -202,16 +227,45 @@ var SignOutWrapper = styled.styled.div(templateObject_17 || (templateObject_17 =
         ? "".concat($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.cardBorderRadius, "px ").concat($themeOverride === null || $themeOverride === void 0 ? void 0 : $themeOverride.cardBorderRadius, "px")
         : "".concat(theme.userCard.cardBorderRadius, "px ").concat(theme.userCard.cardBorderRadius, "px");
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
 
-var OPTIONS_DIVIDER_ID = "optionsDivider";
+var ORGS_DIVIDER_ID = "orgsDivider";
 var SIGN_OUT_DIVIDER_ID = "signOutDivider";
 var SIGN_OUT_TEXT = "Sign Out";
-var ELEMENTS_DIVIDER_ID = "elementsDivider";
 
+function getWindowDimensions() {
+    var height = isEmptyObject.isBrowser ? window.innerHeight : 0;
+    var width = isEmptyObject.isBrowser ? window.innerWidth : 0;
+    return {
+        width: width,
+        height: height,
+    };
+}
+function useWindowDimensions() {
+    var _a = React.useState(getWindowDimensions()), windowDimensions = _a[0], setWindowDimensions = _a[1];
+    React.useEffect(function () {
+        function handleResize() {
+            setWindowDimensions(isEmptyObject.isBrowser ? getWindowDimensions() : { height: 0, width: 0 });
+        }
+        window === null || window === void 0 ? void 0 : window.addEventListener("resize", handleResize);
+        return function () { return window === null || window === void 0 ? void 0 : window.removeEventListener("resize", handleResize); };
+    }, []);
+    return windowDimensions;
+}
+
+// This returns a number that is the nearest number of whole rows that fits inside of space, plus 0.5 rows. This is so that it will be obvious that the container will scroll.
+var findOptimalScrollingheight = function (_a) {
+    var space = _a.space, row = _a.row;
+    var numberOfRows = Math.floor(space / row);
+    var optimalHeight = (numberOfRows + 0.5) * row;
+    return optimalHeight;
+};
+
+var FLUFF = 25; // Something is off in the measurements. This corrects it. It may be a Storybook issue.
+var SIGN_OUT_HEIGHT = 80;
 var UserCard = function (_a) {
     var _b, _c, _d;
-    var activeOrg = _a.activeOrg, avatarImageUrl = _a.avatarImageUrl, children = _a.children, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, isVisible = _a.isVisible, loopTabing = _a.loopTabing, options = _a.options, onEsc = _a.onEsc, onSignOut = _a.onSignOut, organizations = _a.organizations, topOffset = _a.topOffset, userEmail = _a.userEmail, userName = _a.userName, themeOverride = _a.themeOverride;
+    var activeOrg = _a.activeOrg, avatarImageUrl = _a.avatarImageUrl, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, isVisible = _a.isVisible, loopTabing = _a.loopTabing, options = _a.options, onEsc = _a.onEsc, onSignOut = _a.onSignOut, organizations = _a.organizations, _f = _a.orgSearchThreshold, orgSearchThreshold = _f === void 0 ? 10 : _f, topOffset = _a.topOffset, userEmail = _a.userEmail, userName = _a.userName, themeOverride = _a.themeOverride;
     var baseRef = React.useRef(null);
     var hasOptions = ((_b = options === null || options === void 0 ? void 0 : options.length) !== null && _b !== void 0 ? _b : 0) > 0;
     var hasOrgs = ((_c = organizations === null || organizations === void 0 ? void 0 : organizations.length) !== null && _c !== void 0 ? _c : 0) > 0;
@@ -226,6 +280,49 @@ var UserCard = function (_a) {
             borderRadius: themeOverride.avatarBorderRadius,
         }
         : undefined;
+    // ----- Calculate menu height -----
+    // Mostly this is to allow the orgs to expand to fill the space.
+    var _g = useMeasureWatchResize.useMeasureWatchResize(), nameGroupRef = _g[0], nameGroupMeasure = _g[1];
+    var theme = styled.useTheme();
+    var middleSectionHeightOffset = ((themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.gradientSectionHeight) || theme.userCard.gradientSectionHeight) + (topOffset || 0) + (hasSignOut ? SIGN_OUT_HEIGHT : 0);
+    var avatarHeightHalf = ((themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.avatarSize) || theme.userCard.avatarSize) / 2;
+    var userDetailsPadding = USER_DETAILS_PADDING;
+    var scrollingHeightOffset = middleSectionHeightOffset + userDetailsPadding + avatarHeightHalf + (nameGroupMeasure.height || 0);
+    // Org search
+    var _h = React.useState(""), searchValue = _h[0], setSearchValue = _h[1];
+    var _j = React.useState(), filteredOrganizations = _j[0], setFilteredOrganizations = _j[1];
+    React.useEffect(function () {
+        if (!searchValue) {
+            setFilteredOrganizations(organizations);
+            return;
+        }
+        var filtered = organizations === null || organizations === void 0 ? void 0 : organizations.filter(function (org) { return org.text.toLowerCase().includes(searchValue.toLowerCase()); });
+        setFilteredOrganizations(filtered);
+    }, [organizations, searchValue]);
+    // Pin org height during search
+    var height = useWindowDimensions().height;
+    var _k = React.useState(0), orgsScrollerHeight = _k[0], setOrgsScrollHeight = _k[1];
+    // Switch scrolling strategy based on the size of the contents
+    // - if there's enough room, the organizations scroll independently
+    // - if there isn't enough room, or there aren't any organizations, everything except the logout button and header scroll together
+    var _l = React.useState(hasOrgs), onlyScrollOrgs = _l[0], setOnlyScrollOrgs = _l[1];
+    React.useEffect(function () {
+        var _a;
+        var numberOfOrgs = (_a = organizations === null || organizations === void 0 ? void 0 : organizations.length) !== null && _a !== void 0 ? _a : 0;
+        var maxSpaceForOrgs = 450; // 8.5 orgs worth of space
+        var minSpaceForOrgs = 150;
+        var baseHeight = height - BASE_HEIGHT_OFFSET;
+        var orgListHeight = numberOfOrgs * 53 + ORG_SCROLLER_PADDING;
+        var optimalScrollingHeight = findOptimalScrollingheight({ space: baseHeight - scrollingHeightOffset - FLUFF, row: 53 });
+        var availableSpaceForOrgs = optimalScrollingHeight > maxSpaceForOrgs ? maxSpaceForOrgs : optimalScrollingHeight;
+        var orgsNeedToScroll = orgListHeight > availableSpaceForOrgs;
+        var orgsHaveSpaceToScroll = availableSpaceForOrgs > minSpaceForOrgs;
+        setOnlyScrollOrgs(orgsNeedToScroll && orgsHaveSpaceToScroll);
+        if (orgsNeedToScroll && orgsHaveSpaceToScroll) {
+            setOrgsScrollHeight(availableSpaceForOrgs);
+        }
+    }, [height, organizations, scrollingHeightOffset]);
+    // ----- Handle tabbing behavior -----
     var eventListener = function (event) {
         var _a;
         var isEscPressed = event.key === "Escape" || event.keyCode === 27;
@@ -269,26 +366,26 @@ var UserCard = function (_a) {
             window.removeEventListener("keydown", eventListener);
         };
     }, [isVisible]);
-    return (jsxRuntime.jsxs(UserCardBase, { ref: baseRef, "$themeOverride": themeOverride, children: [jsxRuntime.jsx(GradientHeader, { "$themeOverride": themeOverride }), jsxRuntime.jsx(AvatarWrapper, { "$themeOverride": themeOverride, children: jsxRuntime.jsx(Avatar.Avatar, { backgroundGradient: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.avatarBackgroundColor) || gradients.gradients.avatar, square: themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.squareAvatar, imageUrl: avatarImageUrl, placeholderInitials: getInitialsOnly.getInitialsOnly(userName), themeOverride: avatarThemeOverride }) }), jsxRuntime.jsxs(UserDetails, { "$themeOverride": themeOverride, "$topOffset": topOffset, "$hasSignOut": hasSignOut, children: [jsxRuntime.jsx(Name, { "$isLoading": isLoading, "$themeOverride": themeOverride, children: userName }), jsxRuntime.jsx(Email, { "$isLoading": isLoading, "$themeOverride": themeOverride, children: jsxRuntime.jsx(TruncatePicker.TruncatePicker, { children: userEmail }) }), (hasOrgs || showLoadingOrgs) && (jsxRuntime.jsx(Divider, { "$topMargin": 16, "$bottomMargin": 16, "data-testid": OPTIONS_DIVIDER_ID, "$themeOverride": themeOverride })), showLoadingOrgs ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Organization, { "$isLoading": true, "$loadingWidth": 85 }), jsxRuntime.jsx(Organization, { "$isLoading": true, "$loadingWidth": 135 })] })) : (organizations === null || organizations === void 0 ? void 0 : organizations.map(function (option, index) {
-                        var Icon = option.Icon, iconSize = option.iconSize, onClick = option.onClick, text = option.text, id = option.id;
-                        var isActive = activeOrg === id;
-                        var hasIcon = !!Icon;
-                        return (jsxRuntime.jsxs(Organization, _tslib.__assign({ "$iconSize": iconSize, "$isActive": !!(isActive && multipleOrgs), "$hasIcon": hasIcon, "$noBottomMargin": index === organizations.length - 1, "$onlyOrg": !multipleOrgs, onClick: function (event) { return onClick({ option: option, event: event }); }, onKeyPress: function (event) {
-                                if (pressedEnter.pressedEnter(event)) {
-                                    onClick({ option: option, event: event });
-                                }
-                            } }, (!isActive ? { role: "button" } : {}), { tabIndex: isActive ? -1 : 0, "$themeOverride": themeOverride, children: [hasIcon && (jsxRuntime.jsx(OrganizationIconBox, { "$iconSize": iconSize, children: jsxRuntime.jsx(OrganizationIcon, { "$iconSize": iconSize, children: jsxRuntime.jsx(Icon, { fill: themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.textColor }) }) })), jsxRuntime.jsx(OptionText, { "$themeOverride": themeOverride, children: text }), isActive && multipleOrgs && (jsxRuntime.jsx(ActiveIcon, { children: jsxRuntime.jsx(CheckmarkCircle.CheckmarkCircle, { fill: colors.colors.AQUA_75 }) }))] }), id));
-                    })), (hasOptions || showLoadingOptions) && (jsxRuntime.jsx(Divider, { "$topMargin": 16, "$bottomMargin": 30, "data-testid": OPTIONS_DIVIDER_ID, "$themeOverride": themeOverride })), showLoadingOptions ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Option, { "$isLoading": true, "$loadingWidth": 85 }), jsxRuntime.jsx(Option, { "$isLoading": true, "$loadingWidth": 135 })] })) : (options === null || options === void 0 ? void 0 : options.map(function (option, index) {
-                        var Icon = option.Icon, iconSize = option.iconSize, onClick = option.onClick, text = option.text;
-                        var hasIcon = !!Icon;
-                        return (jsxRuntime.jsxs(Option, { "$iconSize": iconSize, "$noBottomMargin": index === options.length - 1, onClick: function (event) { return onClick({ option: option, event: event }); }, onKeyPress: function (event) {
-                                if (pressedEnter.pressedEnter(event)) {
-                                    onClick({ option: option, event: event });
-                                }
-                            }, role: "button", tabIndex: 0, "$themeOverride": themeOverride, children: [hasIcon && (jsxRuntime.jsx(OptionIconBox, { "$iconSize": iconSize, children: jsxRuntime.jsx(OptionIcon, { "$iconSize": iconSize, children: jsxRuntime.jsx(Icon, { fill: themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.textColor }) }) })), jsxRuntime.jsx(OptionText, { "$themeOverride": themeOverride, children: text })] }, text));
-                    })), React__default.default.Children.map(children, function (element) {
-                        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Divider, { "$topMargin": hasOptions ? 30 : 16, "$bottomMargin": 16, "data-testid": ELEMENTS_DIVIDER_ID, "$themeOverride": themeOverride }), jsxRuntime.jsx(NegativeCreep, { children: element })] }));
-                    })] }), hasSignOut && (jsxRuntime.jsxs(SignOutWrapper, { "$themeOverride": themeOverride, children: [jsxRuntime.jsx(Divider, { "$topMargin": 1, "$bottomMargin": 30, "data-testid": SIGN_OUT_DIVIDER_ID, "$themeOverride": themeOverride }), jsxRuntime.jsxs(Option, { "$loadingWidth": 100, "$noBottomMargin": true, onClick: function () { return onSignOut === null || onSignOut === void 0 ? void 0 : onSignOut(); }, onKeyPress: function (event) {
+    return (jsxRuntime.jsxs(UserCardBase, { ref: baseRef, "$themeOverride": themeOverride, children: [jsxRuntime.jsx(GradientHeader, { "$themeOverride": themeOverride }), jsxRuntime.jsx(AvatarWrapper, { "$themeOverride": themeOverride, children: jsxRuntime.jsx(Avatar.Avatar, { backgroundGradient: (themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.avatarBackgroundColor) || gradients.gradients.avatar, square: themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.squareAvatar, imageUrl: avatarImageUrl, placeholderInitials: getInitialsOnly.getInitialsOnly(userName), themeOverride: avatarThemeOverride }) }), jsxRuntime.jsxs(UserDetails, { "$heightOffset": middleSectionHeightOffset, "$isScroller": !onlyScrollOrgs, children: [jsxRuntime.jsxs(NonScrollingGroup, { ref: nameGroupRef, children: [jsxRuntime.jsx(Name, { "$isLoading": isLoading, "$themeOverride": themeOverride, children: userName }), jsxRuntime.jsx(Email, { "$isLoading": isLoading, "$themeOverride": themeOverride, children: jsxRuntime.jsx(TruncatePicker.TruncatePicker, { children: userEmail }) }), jsxRuntime.jsx(OptionsBox, { children: showLoadingOptions ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Option, { "$isLoading": true, "$loadingWidth": 85 }), jsxRuntime.jsx(Option, { "$isLoading": true, "$loadingWidth": 135 })] })) : (options === null || options === void 0 ? void 0 : options.map(function (option, index) {
+                                    var Icon = option.Icon, iconSize = option.iconSize, onClick = option.onClick, text = option.text;
+                                    var hasIcon = !!Icon;
+                                    return (jsxRuntime.jsxs(Option, { "$iconSize": iconSize, "$noBottomMargin": index === options.length - 1, onClick: function (event) { return onClick({ option: option, event: event }); }, onKeyPress: function (event) {
+                                            if (pressedEnter.pressedEnter(event)) {
+                                                onClick({ option: option, event: event });
+                                            }
+                                        }, role: "button", tabIndex: 0, "$themeOverride": themeOverride, children: [hasIcon && (jsxRuntime.jsx(OptionIconBox, { "$iconSize": iconSize, children: jsxRuntime.jsx(OptionIcon, { "$iconSize": iconSize, children: jsxRuntime.jsx(Icon, { fill: themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.textColor }) }) })), jsxRuntime.jsx(OptionText, { "$themeOverride": themeOverride, children: jsxRuntime.jsx(TruncatePicker.TruncatePicker, { lines: 2, children: text }) })] }, text));
+                                })) }), (hasOrgs || showLoadingOrgs) && (jsxRuntime.jsx(Divider, { "$topMargin": 16, "$bottomMargin": 16, "data-testid": ORGS_DIVIDER_ID, "$themeOverride": themeOverride })), 
+                            // Passing 0 intentionally disables the search feature
+                            organizations && orgSearchThreshold && organizations.length > orgSearchThreshold ? (jsxRuntime.jsxs(SearchGroup, { className: "SearchGroup", children: [jsxRuntime.jsx(SearchText, { children: "Organizations:" }), jsxRuntime.jsx(SearchInput.SearchInput, { clearButton: true, inputHeight: 32, inputWidth: 189, onValueChange: function (value) { return setSearchValue(value); }, value: searchValue })] })) : null] }), hasOrgs || showLoadingOrgs ? (showLoadingOrgs ? (jsxRuntime.jsxs(NonScrollingGroup, { children: [jsxRuntime.jsx(Organization, { "$isLoading": true, "$loadingWidth": 85 }), jsxRuntime.jsx(Organization, { "$isLoading": true, "$loadingWidth": 135 })] })) : (jsxRuntime.jsx(ScrollingGroup, { "$isScroller": onlyScrollOrgs, "$scrollerHeight": orgsScrollerHeight, children: filteredOrganizations === null || filteredOrganizations === void 0 ? void 0 : filteredOrganizations.map(function (option, index) {
+                            var Icon = option.Icon, iconSize = option.iconSize, onClick = option.onClick, text = option.text, id = option.id;
+                            var isActive = activeOrg === id;
+                            var hasIcon = !!Icon;
+                            return (jsxRuntime.jsxs(Organization, _tslib.__assign({ "$iconSize": iconSize, "$isActive": !!(isActive && multipleOrgs), "$hasIcon": hasIcon, "$noBottomMargin": true, "$onlyOrg": !multipleOrgs, onClick: function (event) { return onClick({ option: option, event: event }); }, onKeyPress: function (event) {
+                                    if (pressedEnter.pressedEnter(event)) {
+                                        onClick({ option: option, event: event });
+                                    }
+                                } }, (!isActive ? { role: "button" } : {}), { tabIndex: isActive ? -1 : 0, "$themeOverride": themeOverride, children: [hasIcon && (jsxRuntime.jsx(OrganizationIconBox, { "$iconSize": iconSize, children: jsxRuntime.jsx(OrganizationIcon, { "$iconSize": iconSize, children: jsxRuntime.jsx(Icon, { fill: themeOverride === null || themeOverride === void 0 ? void 0 : themeOverride.textColor }) }) })), jsxRuntime.jsx(OptionText, { "$themeOverride": themeOverride, children: text }), isActive && multipleOrgs && (jsxRuntime.jsx(ActiveIcon, { children: jsxRuntime.jsx(CheckmarkCircle.CheckmarkCircle, { fill: colors.colors.AQUA_75 }) }))] }), id));
+                        }) }))) : null] }), hasSignOut && (jsxRuntime.jsxs(SignOutWrapper, { "$themeOverride": themeOverride, children: [jsxRuntime.jsx(Divider, { "$topMargin": 0, "$bottomMargin": 27, "data-testid": SIGN_OUT_DIVIDER_ID, "$themeOverride": themeOverride }), jsxRuntime.jsxs(Option, { "$loadingWidth": 100, "$noBottomMargin": true, onClick: function () { return onSignOut === null || onSignOut === void 0 ? void 0 : onSignOut(); }, onKeyPress: function (event) {
                             if (pressedEnter.pressedEnter(event)) {
                                 onSignOut === null || onSignOut === void 0 ? void 0 : onSignOut();
                             }

package/lib/cjs/UserCard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UserCard.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"UserCard.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/UserCardModal.cjs

@@ -25,10 +25,18 @@ require('./useMeasure-CDq3dPfD.js');
 require('./addOrRemoveById.cjs');
 require('dayjs');
 require('./gradients.cjs');
+require('./useMeasureWatchResize-CU_JgvQD.js');
 require('./BodyLEmphasis.cjs');
 require('./Loading.cjs');
 require('./Scroller.cjs');
 require('./focusAfter.cjs');
+require('./SearchInput-C_l6yEs0.js');
+require('./IconButton-CQJHjOTO.js');
+require('./ButtonColorFamilyEnum.cjs');
+require('./Search.cjs');
+require('./InlineInput-Ct3Zz8pE.js');
+require('./CloseCircle.cjs');
+require('./Inputs-C0rtyojv.js');
 
 var UserCardModal = function (props) {
     var _a;

package/lib/cjs/UserCardModal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UserCardModal.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"UserCardModal.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/cjs/cerebellumTheme.cjs

@@ -625,7 +625,7 @@ var cerebellumTheme = {
         squareAvatar: false,
         linkHoverColor: colors.colors.BLUE_3,
         textColor: colors.colors.COOL_GREY_100,
-        width: 309,
+        width: 400,
     },
     userInformationCard: {
         backgroundGradient: "#5377ec, #c0aaff",

package/lib/cjs/focusAfter.cjs

@@ -15,7 +15,7 @@ var absoluteAfter = function (props) {
 };
 var focusAfter = function (props) {
     var borderRadius = props.borderRadius, focusColor = props.focusColor, offset = props.offset;
-    return "\n\t\t&:after {\n\t\t\t".concat(absoluteAfter({ offset: offset !== null && offset !== void 0 ? offset : -5 }), "\n\t\t\tborder: 1px solid transparent;\n\t\t\tborder-radius: ").concat(borderRadius !== null && borderRadius !== void 0 ? borderRadius : 8, "px;\n\t\t\topacity: 1;\n\t\t}\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t\t&:after {\n\t\t\t\tborder: 1px solid ").concat(focusColor, ";\n\t\t\t}\n\t\t}\n\t");
+    return "\n\t\t&:after {\n\t\t\t".concat(absoluteAfter({ offset: offset !== null && offset !== void 0 ? offset : -5 }), "\n\t\t\tborder: 1px solid transparent;\n\t\t\tborder-radius: ").concat(borderRadius !== null && borderRadius !== void 0 ? borderRadius : 8, "px;\n\t\t\topacity: 1;\n\t\t\tpointer-events: none;\n\t\t}\n\t\t&:focus-visible {\n\t\t\toutline: none;\n\t\t\t&:after {\n\t\t\t\tborder: 1px solid ").concat(focusColor, ";\n\t\t\t}\n\t\t}\n\t");
 };
 
 exports.absoluteAfter = absoluteAfter;

package/lib/cjs/index.cjs

@@ -74,9 +74,7 @@ var PieChart = require('./PieChart-D3uL_1aI.js');
 var Radio = require('./Radio-C0Z72B-6.js');
 var RadioGroup = require('./RadioGroup-5kqdUsH_.js');
 var RadioItem = require('./RadioItem-BzjbTvVQ.js');
-var RJSForm = require('./RJSForm-BYMmS7or.js');
-require('./types-5wgDsApd.js');
-var RJSFormRenderer = require('./RJSFormRenderer-DEbHQ_kY.js');
+var RJSFormRenderer = require('./RJSFormRenderer-DkuTGTRg.js');
 var Toast = require('./Toast-yHq_R4D7.js');
 require('react-dom');
 var ButtonColorFamilyEnum = require('./ButtonColorFamilyEnum.cjs');
@@ -303,8 +301,6 @@ require('dayjs');
 require('./filtering-BklQ4Sgb.js');
 require('./position-Ccz-m8HN.js');
 require('formik');
-require('@rjsf/core');
-require('@rjsf/validator-ajv8');
 require('./TableStyles-DHUGhvTF.js');
 require('immutability-helper');
 require('./DropdownInputStyles-B8RvsKz3.js');
@@ -749,7 +745,6 @@ exports.PieChart = PieChart.PieChart;
 exports.Radio = Radio.Radio;
 exports.RadioGroup = RadioGroup.RadioGroup;
 exports.RadioItem = RadioItem.RadioItem;
-exports.RJSForm = RJSForm.RJSForm;
 exports.RJSFormRenderer = RJSFormRenderer.RJSFormRenderer;
 exports.DialogHandler = Toast.DialogHandler;
 Object.defineProperty(exports, "ButtonColorFamilyEnum", {

package/lib/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/{AddButton-D3rUGbUd.js → AddButton-DeNvxRVt.js}

@@ -1,12 +1,12 @@
-import { b as __makeTemplateObject, _ as __assign } from './_tslib-Cea_sJmA.js';
+import { b as __makeTemplateObject, _ as __assign } from './_tslib-BcwB1KkQ.js';
 import { jsx } from 'react/jsx-runtime';
 import 'react';
 import { styled } from 'styled-components';
 import './colors.js';
-import './IconComponentStyles-BBt1vuNf.js';
+import './IconComponentStyles-DsanQokf.js';
 import { PlusCircle } from './PlusCircle.js';
 import { ButtonColorFamilyEnum } from './ButtonColorFamilyEnum.js';
-import './LoadingEllipsis-C1NXXo2M.js';
+import './LoadingEllipsis-4SpjEvys.js';
 import './Button.js';
 import { SecondaryButton } from './SecondaryButton.js';
 import './ButtonVariantEnum.js';
@@ -20,4 +20,4 @@ var AddButton = function (props) {
 };
 
 export { AddButton as A };
-//# sourceMappingURL=AddButton-D3rUGbUd.js.map
+//# sourceMappingURL=AddButton-DeNvxRVt.js.map

package/lib/esm/AddButton-DeNvxRVt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddButton-DeNvxRVt.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/esm/AddButton.js

@@ -1,15 +1,15 @@
-export { A as AddButton } from './AddButton-D3rUGbUd.js';
-import './_tslib-Cea_sJmA.js';
+export { A as AddButton } from './AddButton-DeNvxRVt.js';
+import './_tslib-BcwB1KkQ.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'styled-components';
 import './colors.js';
-import './IconComponentStyles-BBt1vuNf.js';
+import './IconComponentStyles-DsanQokf.js';
 import './PlusCircle.js';
 import './colors-D-UTb8yU.js';
 import './pressedEnter.js';
 import './ButtonColorFamilyEnum.js';
-import './LoadingEllipsis-C1NXXo2M.js';
+import './LoadingEllipsis-4SpjEvys.js';
 import './Button.js';
 import './ArrowLong.js';
 import './CaretDown.js';

package/lib/esm/{AddMenu-DxgYV6Rn.js → AddMenu-DGzK7716.js}

@@ -1,12 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
-import { S as SearchMenu } from './SearchMenu-h5HqVgJs.js';
-import { S as SlideIn } from './SlideIn-M1Hsy2X8.js';
-import { A as AddButton } from './AddButton-D3rUGbUd.js';
+import { S as SearchMenu } from './SearchMenu-mI5sW4n0.js';
+import { S as SlideIn } from './SlideIn-DEzdj3h8.js';
+import { A as AddButton } from './AddButton-DeNvxRVt.js';
 import { colors } from './colors.js';
 import { isBrowser } from './isEmptyObject.js';
 import { u as useMeasure } from './useMeasure-D89v6c_A.js';
-import { b as __makeTemplateObject } from './_tslib-Cea_sJmA.js';
+import { b as __makeTemplateObject } from './_tslib-BcwB1KkQ.js';
 import { styled } from 'styled-components';
 
 var AddMenuGroup = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: ", "px;\n  position: relative;\n"], ["\n  max-width: ", "px;\n  position: relative;\n"])), function (_a) {
@@ -47,4 +47,4 @@ var AddMenu = function (_a) {
 };
 
 export { AddMenu as A };
-//# sourceMappingURL=AddMenu-DxgYV6Rn.js.map
+//# sourceMappingURL=AddMenu-DGzK7716.js.map

package/lib/esm/AddMenu-DGzK7716.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddMenu-DGzK7716.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}