@edvisor/product-language 0.10.6 → 0.10.8

package/index.js

@@ -1095,9 +1095,7 @@ $$g({ target: 'Object', stat: true, arity: 2, forced: Object.assign !== assign }
  * it is for juuuuust in case a third party sends us a null
  * or something, and the types are not correct
  */
-
 /* eslint-disable no-null/no-null */
-
 /* eslint-disable @typescript-eslint/ban-types */
 function isNil(value) {
   return value === null || value === undefined;
@@ -1112,7 +1110,6 @@ function isEmpty(obj) {
   return obj.length < 1;
 }
 /** used for evaluating tri-state logic (true | false | undefined) */
-
 function is(pred) {
   return isDefined(pred) && pred;
 }
@@ -2326,16 +2323,16 @@ $$a({ target: 'Promise', stat: true, forced: FORCED_PROMISE_CONSTRUCTOR }, {
   }
 });
 
-const isReactElementOfType = ( // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
-component) => // eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
+const isReactElementOfType = (
+// eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
+component) =>
+// eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-explicit-any
 element => {
   var _a, _b;
   /**
    * I'm going to leave this as a big if/else instead of a compound expression to make
    * it clear exactly what we are checking.
    */
-
-
   if ((element === null || element === void 0 ? void 0 : element.type) === component) {
     // component is a function or a class, and element is an element of that type
     return true;
@@ -2353,12 +2350,12 @@ element => {
     // but their underlying component type is the same
     return true;
   }
-
   return false;
 };
 
-const Nothing = () => null; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+// eslint-disable-next-line no-null/no-null
+const Nothing = () => null;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isNothing = isReactElementOfType(Nothing);
 function maybeRender(prop, JSX) {
   return isNil(prop) || false === Boolean(prop) || isNothing(prop) ? jsx(Nothing, {}) : JSX;
@@ -2384,30 +2381,24 @@ const If = props => {
  * Right? I want this...
  * */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
 function isReactElement(obj) {
   // eslint-disable-next-line no-prototype-builtins
   return isDefined(obj) && obj.hasOwnProperty('type');
-} // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const isSlotOfType = type => obj => {
   return isDefined(obj) && isReactElement(obj) && isDefined(obj.type) && (Object.getPrototypeOf(obj.type) === type || obj.type === type) || isDefined(obj.type) && isDefined(obj.type.target) && (Object.getPrototypeOf(obj.type.target) === type || obj.type.target === type);
 };
-
 const findSlotByType = (type, children) => {
   return Children.toArray(children).find(isSlotOfType(type));
 };
-
 const filterSlotByType = (type, children) => {
   return Children.toArray(children).filter(isSlotOfType(type));
 };
-
 class Slot extends PureComponent {
   render() {
     return this.props.children;
   }
-
 }
 class StylableSlot extends Slot {
   render() {
@@ -2415,39 +2406,31 @@ class StylableSlot extends Slot {
       children: this.props.children
     }));
   }
-
 }
 /** gets children that are _not_ slots */
-
 function getOtherChildren(children) {
   return Children.toArray(children).filter(child => !isSlotOfType(Slot)(child));
 }
 function getSlots(slot, children) {
   const result = filterSlotByType(slot, children);
-
   if (isNil(result)) {
     return [];
   }
-
   return result;
-} // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function hasProps(obj) {
   // eslint-disable-next-line no-prototype-builtins
   return isDefined(obj) && obj.hasOwnProperty('props');
 }
-
 function getSlot(slot, children) {
   const result = findSlotByType(slot, children);
-
   if (isNil(result)) {
     return jsx(Nothing, {});
   }
-
   if (hasProps(result)) {
     return result;
   }
-
   return result;
 }
 function applyProps(element, props) {
@@ -2456,13 +2439,11 @@ function applyProps(element, props) {
       props: props(element.props)
     });
   }
-
   return Object.assign(Object.assign({}, element), {
     props: Object.assign(Object.assign({}, element.props), props)
   });
 }
 /** given a ReactElement, like a child, apply the given styles to it, merging with the existing styles */
-
 function applyStyle(element, style) {
   return Object.assign(Object.assign({}, element), {
     props: Object.assign(Object.assign({}, element.props), {
@@ -2472,7 +2453,7 @@ function applyStyle(element, style) {
 }
 
 // eslint-disable-next-line no-restricted-syntax
-
+// eslint-disable-next-line @typescript-eslint/ban-types
 function forwardRef(render) {
   return /*#__PURE__*/React.forwardRef(render);
 }
@@ -2731,7 +2712,6 @@ function concatHex(a, b) {
  * const levelEnum = toLevel(level)
  * ```
 */
-
 function bitwiseOr$1(flags) {
   return flags.reduce((mask, flag, i) => mask | Number(flag) << i, 0);
 }
@@ -2743,7 +2723,6 @@ function bitwiseOr$1(flags) {
  * ```
  *
  * */
-
 function getRightmostSetBitNumber(n) {
   return n & -n;
 }
@@ -3746,7 +3725,6 @@ const CONTROLLED_TO_UNCONTROLLED = 'Warning: A component is changing a controlle
  * if you give it value only, you get a warning
  * if you give it value and onChange, state management if deferred to the parent (controlled input)
  */
-
 function useInputElementState(props) {
   const [initialValue] = useState(props.value);
   const [state, setState] = useState(props.defaultValue);
@@ -3761,11 +3739,9 @@ function useInputElementState(props) {
       console.error(CONTROLLED_TO_UNCONTROLLED);
     }
   }, [props.value, initialValue]);
-
   if (isDefined(props.value) && isNil(props.onChange)) {
     console.error(READ_ONLY_WARNING);
   }
-
   return [value, onChange];
 }
 
@@ -3835,7 +3811,6 @@ function addOpacity(hex, opacity) {
   const opacityHex = toHex(clamp(0, Math.floor(0xFF * opacity), 0xFF), 2);
   return concatHex(hex, opacityHex);
 }
-
 const Background = {
   Default: GRAY[100],
   Overlay: addOpacity(GRAY[800], 0.6)
@@ -3943,7 +3918,6 @@ const Interactive = {
 };
 /** in order for disabled to appear light gray on any background
  * we have to give a darker gray some opacity */
-
 const DisabledGray = addOpacity(GRAY[800], 0.06);
 const PressedGray = addOpacity(GRAY[800], 0.12);
 const Actions = {
@@ -3977,77 +3951,31 @@ const Actions = {
 
 function toTextAspect(n) {
   switch (n) {
-    case 2
-    /* TextAspects.subdued */
-    :
-      return 2
-      /* TextAspects.subdued */
-      ;
-
-    case 4
-    /* TextAspects.light */
-    :
-      return 4
-      /* TextAspects.light */
-      ;
-
-    case 8
-    /* TextAspects.critical */
-    :
-      return 8
-      /* TextAspects.critical */
-      ;
-
-    case 16
-    /* TextAspects.success */
-    :
-      return 16
-      /* TextAspects.success */
-      ;
-
-    case 32
-    /* TextAspects.onPrimary */
-    :
-      return 32
-      /* TextAspects.onPrimary */
-      ;
-
-    case 64
-    /* TextAspects.onCritical */
-    :
-      return 64
-      /* TextAspects.onCritical */
-      ;
-
+    case 2 /* TextAspects.subdued */:
+      return 2 /* TextAspects.subdued */;
+    case 4 /* TextAspects.light */:
+      return 4 /* TextAspects.light */;
+    case 8 /* TextAspects.critical */:
+      return 8 /* TextAspects.critical */;
+    case 16 /* TextAspects.success */:
+      return 16 /* TextAspects.success */;
+    case 32 /* TextAspects.onPrimary */:
+      return 32 /* TextAspects.onPrimary */;
+    case 64 /* TextAspects.onCritical */:
+      return 64 /* TextAspects.onCritical */;
     default:
-      return 1
-      /* TextAspects.default */
-      ;
+      return 1 /* TextAspects.default */;
   }
 }
 
 const TextAspectColors = {
-  [1
-  /* TextAspects.default */
-  ]: Text$1.Default,
-  [2
-  /* TextAspects.subdued */
-  ]: Text$1.Subdued,
-  [4
-  /* TextAspects.light */
-  ]: Text$1.Light,
-  [32
-  /* TextAspects.onPrimary */
-  ]: Text$1.OnPrimary,
-  [64
-  /* TextAspects.onCritical */
-  ]: Text$1.OnPrimary,
-  [16
-  /* TextAspects.success */
-  ]: Text$1.Success,
-  [8
-  /* TextAspects.critical */
-  ]: Text$1.Critical
+  [1 /* TextAspects.default */]: Text$1.Default,
+  [2 /* TextAspects.subdued */]: Text$1.Subdued,
+  [4 /* TextAspects.light */]: Text$1.Light,
+  [32 /* TextAspects.onPrimary */]: Text$1.OnPrimary,
+  [64 /* TextAspects.onCritical */]: Text$1.OnPrimary,
+  [16 /* TextAspects.success */]: Text$1.Success,
+  [8 /* TextAspects.critical */]: Text$1.Critical
 };
 function getTextAspect(props) {
   return TextAspectColors[toTextAspect(bitwiseOr$1([props.default, props.subdued, props.light, props.critical, props.success, isDefined(props.onPrimary) ? props.onPrimary : props.$onPrimary, isDefined(props.onCritical) ? props.onCritical : props.$onCritical]))];
@@ -4281,39 +4209,21 @@ const LightText = /*#__PURE__*/css(["  color:", ";"], getTextAspect({
   light: true
 }));
 const Base = /*#__PURE__*/css(["color:", ";", " font-family:'Inter';"], props => getTextAspect(props), InterFontFace);
-const Display$1 = /*#__PURE__*/css(["", " font-weight:", ";font-size:", ";line-height:", ";"], Base, "400"
-/* FontWeight.Regular */
-, FontSize.g, LineHeight.f);
-const Heading1$1 = /*#__PURE__*/css(["", " font-weight:", ";font-size:", ";line-height:", ";"], Base, "600"
-/* FontWeight.SemiBold */
-, FontSize.f, LineHeight.e);
+const Display$1 = /*#__PURE__*/css(["", " font-weight:", ";font-size:", ";line-height:", ";"], Base, "400" /* FontWeight.Regular */, FontSize.g, LineHeight.f);
+const Heading1$1 = /*#__PURE__*/css(["", " font-weight:", ";font-size:", ";line-height:", ";"], Base, "600" /* FontWeight.SemiBold */, FontSize.f, LineHeight.e);
 const Heading2$1 = /*#__PURE__*/css(["", " font-size:", ";line-height:", ";"], Heading1$1, FontSize.e, LineHeight.d);
 const Heading3$1 = /*#__PURE__*/css(["", " font-size:", ";line-height:", ";"], Heading1$1, FontSize.c, LineHeight.c);
 const Heading4$1 = /*#__PURE__*/css(["", " font-size:", ";line-height:", ";"], Heading1$1, FontSize.b, LineHeight.b);
 const Body$1 = /*#__PURE__*/css(["", " font-weight:", ";font-size:", ";line-height:", ";"], Base, ({
   strong
-}) => is(strong) ? "500"
-/* FontWeight.Medium */
-: "400"
-/* FontWeight.Regular */
-, FontSize.b, LineHeight.b);
+}) => is(strong) ? "500" /* FontWeight.Medium */ : "400" /* FontWeight.Regular */, FontSize.b, LineHeight.b);
 const BodyLarge$1 = /*#__PURE__*/css(["", " font-weight:", ";font-size:", ";line-height:", ";"], Base, ({
   strong
-}) => is(strong) ? "600"
-/* FontWeight.SemiBold */
-: "400"
-/* FontWeight.Regular */
-, FontSize.d, LineHeight.d);
-const Caption$1 = /*#__PURE__*/css(["", " font-weight:", ";font-size:", ";line-height:", ";"], Base, "400"
-/* FontWeight.Regular */
-, FontSize.a, LineHeight.a);
+}) => is(strong) ? "600" /* FontWeight.SemiBold */ : "400" /* FontWeight.Regular */, FontSize.d, LineHeight.d);
+const Caption$1 = /*#__PURE__*/css(["", " font-weight:", ";font-size:", ";line-height:", ";"], Base, "400" /* FontWeight.Regular */, FontSize.a, LineHeight.a);
 const Label$2 = /*#__PURE__*/css(["", " font-weight:", ";font-size:", ";line-height:", ";"], Base, ({
   strong
-}) => is(strong) ? "500"
-/* FontWeight.Medium */
-: "400"
-/* FontWeight.Regular */
-, ({
+}) => is(strong) ? "500" /* FontWeight.Medium */ : "400" /* FontWeight.Regular */, ({
   subtle
 }) => is(subtle) ? FontSize.a : FontSize.b, ({
   subtle
@@ -4334,7 +4244,6 @@ const _Typography = {
 };
 
 var SPACING;
-
 (function (SPACING) {
   SPACING["Size2"] = "2px";
   SPACING["Size4"] = "4px";
@@ -4396,7 +4305,6 @@ const shadow2Xl = /*#__PURE__*/css(["box-shadow:0px 25px 50px -12px rgba(0,0,0,0
 const shadowInner = /*#__PURE__*/css(["box-shadow:inset 0px 2px 4px rgba(0,0,0,0.06);border-radius:6px;"]);
 
 /* eslint-disable no-restricted-syntax */
-
 const IconListMajor = {
   'arrows-up-down-left-right': jsxs(Fragment, {
     children: [jsx("g", Object.assign({
@@ -5224,7 +5132,6 @@ Svg$1.defaultProps = {
   role: 'icon',
   'aria-label': 'icon'
 };
-
 const ProductLanguageIcon = props => jsx(BoundingBox$1, Object.assign({}, props, {
   children: jsx(Svg$1, Object.assign({
     props: props
@@ -5232,7 +5139,6 @@ const ProductLanguageIcon = props => jsx(BoundingBox$1, Object.assign({}, props,
     children: props.icon
   }))
 }));
-
 const Icon = {
   ArrowsUpDownLeftRight: props => jsx(ProductLanguageIcon, Object.assign({}, props, {
     icon: IconListMajor['arrows-up-down-left-right']
@@ -5702,113 +5608,55 @@ const IconMinor = {
 };
 
 // this file was generated, but it is safe to modify
-
 function toAlertLevel(n) {
   switch (n) {
-    case 1
-    /* AlertLevel.neutral */
-    :
-      return 1
-      /* AlertLevel.neutral */
-      ;
-
-    case 2
-    /* AlertLevel.info */
-    :
-      return 2
-      /* AlertLevel.info */
-      ;
-
-    case 4
-    /* AlertLevel.success */
-    :
-      return 4
-      /* AlertLevel.success */
-      ;
-
-    case 8
-    /* AlertLevel.warning */
-    :
-      return 8
-      /* AlertLevel.warning */
-      ;
-
-    case 16
-    /* AlertLevel.critical */
-    :
-      return 16
-      /* AlertLevel.critical */
-      ;
-
+    case 1 /* AlertLevel.neutral */:
+      return 1 /* AlertLevel.neutral */;
+    case 2 /* AlertLevel.info */:
+      return 2 /* AlertLevel.info */;
+    case 4 /* AlertLevel.success */:
+      return 4 /* AlertLevel.success */;
+    case 8 /* AlertLevel.warning */:
+      return 8 /* AlertLevel.warning */;
+    case 16 /* AlertLevel.critical */:
+      return 16 /* AlertLevel.critical */;
     default:
-      return 1
-      /* AlertLevel.neutral */
-      ;
+      return 1 /* AlertLevel.neutral */;
   }
 }
 
 const AlertLevelBackgroundColors = {
-  [1
-  /* AlertLevel.neutral */
-  ]: Surface.Neutral.Subdued,
-  [2
-  /* AlertLevel.info */
-  ]: Surface.Highlight.Subdued,
-  [4
-  /* AlertLevel.success */
-  ]: Surface.Success.Subdued,
-  [8
-  /* AlertLevel.warning */
-  ]: Surface.Warning.Subdued,
-  [16
-  /* AlertLevel.critical */
-  ]: Surface.Critical.Subdued
+  [1 /* AlertLevel.neutral */]: Surface.Neutral.Subdued,
+  [2 /* AlertLevel.info */]: Surface.Highlight.Subdued,
+  [4 /* AlertLevel.success */]: Surface.Success.Subdued,
+  [8 /* AlertLevel.warning */]: Surface.Warning.Subdued,
+  [16 /* AlertLevel.critical */]: Surface.Critical.Subdued
 };
 const AlertLevelBorderColors = {
-  [1
-  /* AlertLevel.neutral */
-  ]: Borders.Default.Default,
-  [2
-  /* AlertLevel.info */
-  ]: Borders.Highlight.Subdued,
-  [4
-  /* AlertLevel.success */
-  ]: Borders.Success.Subdued,
-  [8
-  /* AlertLevel.warning */
-  ]: Borders.Warning.Subdued,
-  [16
-  /* AlertLevel.critical */
-  ]: Borders.Critical.Subdued
+  [1 /* AlertLevel.neutral */]: Borders.Default.Default,
+  [2 /* AlertLevel.info */]: Borders.Highlight.Subdued,
+  [4 /* AlertLevel.success */]: Borders.Success.Subdued,
+  [8 /* AlertLevel.warning */]: Borders.Warning.Subdued,
+  [16 /* AlertLevel.critical */]: Borders.Critical.Subdued
 };
 const AlertLevelIcons = {
-  [1
-  /* AlertLevel.neutral */
-  ]: {
+  [1 /* AlertLevel.neutral */]: {
     icon: Icon.CircleInfo,
     color: Icons.Default
   },
-  [2
-  /* AlertLevel.info */
-  ]: {
+  [2 /* AlertLevel.info */]: {
     icon: Icon.CircleInfo,
     color: Icons.Highlight
   },
-  [4
-  /* AlertLevel.success */
-  ]: {
+  [4 /* AlertLevel.success */]: {
     icon: Icon.CircleCheck,
     color: Icons.Success
   },
-  [8
-  /* AlertLevel.warning */
-  ]: {
+  [8 /* AlertLevel.warning */]: {
     icon: Icon.TriangleExclamation,
     color: Icons.Warning
   },
-  [16
-  /* AlertLevel.critical */
-  ]: {
+  [16 /* AlertLevel.critical */]: {
     icon: Icon.DiamondExclamation,
     color: Icons.Critical
   }
@@ -5829,7 +5677,6 @@ function getIcon(props) {
  *
  * We might use it to implement the AlertBanner, or put a table in it.
 */
-
 const CardFrame$1 = /*#__PURE__*/styled.section.withConfig({
   displayName: "card-frame__CardFrame",
   componentId: "l58n4z-0"
@@ -5863,483 +5710,194 @@ function __rest(s, e) {
 }
 
 // this file was generated, but it is safe to modify
-
 function toButtonSize(n) {
   switch (n) {
-    case 1
-    /* ButtonSize.default */
-    :
-      return 1
-      /* ButtonSize.default */
-      ;
-
-    case 2
-    /* ButtonSize.small */
-    :
-      return 2
-      /* ButtonSize.small */
-      ;
-
-    case 4
-    /* ButtonSize.large */
-    :
-      return 4
-      /* ButtonSize.large */
-      ;
-
+    case 1 /* ButtonSize.default */:
+      return 1 /* ButtonSize.default */;
+    case 2 /* ButtonSize.small */:
+      return 2 /* ButtonSize.small */;
+    case 4 /* ButtonSize.large */:
+      return 4 /* ButtonSize.large */;
     default:
-      return 1
-      /* ButtonSize.default */
-      ;
+      return 1 /* ButtonSize.default */;
   }
 }
 
 function toButtonDisabledType(n) {
   switch (n) {
-    case 1
-    /* ButtonDisabledType.enabled */
-    :
-      return 1
-      /* ButtonDisabledType.enabled */
-      ;
-
-    case 2
-    /* ButtonDisabledType.disabled */
-    :
-      return 2
-      /* ButtonDisabledType.disabled */
-      ;
-
+    case 1 /* ButtonDisabledType.enabled */:
+      return 1 /* ButtonDisabledType.enabled */;
+    case 2 /* ButtonDisabledType.disabled */:
+      return 2 /* ButtonDisabledType.disabled */;
     default:
-      return 1
-      /* ButtonDisabledType.enabled */
-      ;
+      return 1 /* ButtonDisabledType.enabled */;
   }
 }
 
 function toButtonTypes(n) {
   const defaultType = 0;
-
   switch (n) {
     case defaultType:
-    case 1
-    /* ButtonType.basic */
-    :
-      return 1
-      /* ButtonType.basic */
-      ;
-
-    case 2
-    /* ButtonType.primary */
-    :
-      return 2
-      /* ButtonType.primary */
-      ;
-
-    case 6
-    /* ButtonType.destructivePrimary */
-    :
-      return 6
-      /* ButtonType.destructivePrimary */
-      ;
-
-    case 4
-    /* ButtonType.destructive */
-    :
-      return 4
-      /* ButtonType.destructive */
-      ;
-
-    case 8
-    /* ButtonType.outline */
-    :
-      return 8
-      /* ButtonType.outline */
-      ;
-
-    case 16
-    /* ButtonType.plain */
-    :
-      return 16
-      /* ButtonType.plain */
-      ;
-
-    case 48
-    /* ButtonType.plainSubtle */
-    :
-      return 48
-      /* ButtonType.plainSubtle */
-      ;
-
+    case 1 /* ButtonType.basic */:
+      return 1 /* ButtonType.basic */;
+    case 2 /* ButtonType.primary */:
+      return 2 /* ButtonType.primary */;
+    case 6 /* ButtonType.destructivePrimary */:
+      return 6 /* ButtonType.destructivePrimary */;
+    case 4 /* ButtonType.destructive */:
+      return 4 /* ButtonType.destructive */;
+    case 8 /* ButtonType.outline */:
+      return 8 /* ButtonType.outline */;
+    case 16 /* ButtonType.plain */:
+      return 16 /* ButtonType.plain */;
+    case 48 /* ButtonType.plainSubtle */:
+      return 48 /* ButtonType.plainSubtle */;
     default:
       return getRightmostSetBitNumber(n);
   }
 }
-
 const ButtonBackgroundColorValues = {
-  [1
-  /* ButtonType.basic */
-  ]: Actions.Secondary.Default,
-  [2
-  /* ButtonType.primary */
-  ]: Actions.Primary.Default,
-  [6
-  /* ButtonType.destructivePrimary */
-  ]: Actions.Critical.Default,
-  [4
-  /* ButtonType.destructive */
-  ]: 'none',
-  [8
-  /* ButtonType.outline */
-  ]: 'none',
-  [16
-  /* ButtonType.plain */
-  ]: 'none',
-  [32
-  /* ButtonType.subtle */
-  ]: 'none',
-  [48
-  /* ButtonType.plainSubtle */
-  ]: 'none'
+  [1 /* ButtonType.basic */]: Actions.Secondary.Default,
+  [2 /* ButtonType.primary */]: Actions.Primary.Default,
+  [6 /* ButtonType.destructivePrimary */]: Actions.Critical.Default,
+  [4 /* ButtonType.destructive */]: 'none',
+  [8 /* ButtonType.outline */]: 'none',
+  [16 /* ButtonType.plain */]: 'none',
+  [32 /* ButtonType.subtle */]: 'none',
+  [48 /* ButtonType.plainSubtle */]: 'none'
 };
 const ButtonBackgroundColorDisabledValues = {
-  [1
-  /* ButtonType.basic */
-  ]: Actions.Secondary.Disabled,
-  [2
-  /* ButtonType.primary */
-  ]: Actions.Primary.Disabled,
-  [6
-  /* ButtonType.destructivePrimary */
-  ]: Actions.Critical.Disabled,
-  [4
-  /* ButtonType.destructive */
-  ]: Actions.Secondary.Disabled,
-  [8
-  /* ButtonType.outline */
-  ]: 'none',
-  [16
-  /* ButtonType.plain */
-  ]: 'none',
-  [32
-  /* ButtonType.subtle */
-  ]: Actions.Secondary.Disabled,
-  [48
-  /* ButtonType.plainSubtle */
-  ]: 'none'
+  [1 /* ButtonType.basic */]: Actions.Secondary.Disabled,
+  [2 /* ButtonType.primary */]: Actions.Primary.Disabled,
+  [6 /* ButtonType.destructivePrimary */]: Actions.Critical.Disabled,
+  [4 /* ButtonType.destructive */]: Actions.Secondary.Disabled,
+  [8 /* ButtonType.outline */]: 'none',
+  [16 /* ButtonType.plain */]: 'none',
+  [32 /* ButtonType.subtle */]: Actions.Secondary.Disabled,
+  [48 /* ButtonType.plainSubtle */]: 'none'
 };
 const ButtonBackgroundColorHoverValues = {
-  [1
-  /* ButtonType.basic */
-  ]: Actions.Secondary.Hover,
-  [2
-  /* ButtonType.primary */
-  ]: Actions.Primary.Hover,
-  [6
-  /* ButtonType.destructivePrimary */
-  ]: Actions.Critical.Hover,
-  [4
-  /* ButtonType.destructive */
-  ]: Actions.Critical.Hover,
-  [8
-  /* ButtonType.outline */
-  ]: Actions.Secondary.Hover,
-  [16
-  /* ButtonType.plain */
-  ]: '',
-  [32
-  /* ButtonType.subtle */
-  ]: Actions.Secondary.Hover,
-  [48
-  /* ButtonType.plainSubtle */
-  ]: ''
+  [1 /* ButtonType.basic */]: Actions.Secondary.Hover,
+  [2 /* ButtonType.primary */]: Actions.Primary.Hover,
+  [6 /* ButtonType.destructivePrimary */]: Actions.Critical.Hover,
+  [4 /* ButtonType.destructive */]: Actions.Critical.Hover,
+  [8 /* ButtonType.outline */]: Actions.Secondary.Hover,
+  [16 /* ButtonType.plain */]: '',
+  [32 /* ButtonType.subtle */]: Actions.Secondary.Hover,
+  [48 /* ButtonType.plainSubtle */]: ''
 };
 const ButtonTextDecorationHoverValues = {
-  [1
-  /* ButtonType.basic */
-  ]: '',
-  [2
-  /* ButtonType.primary */
-  ]: '',
-  [6
-  /* ButtonType.destructivePrimary */
-  ]: '',
-  [4
-  /* ButtonType.destructive */
-  ]: '',
-  [8
-  /* ButtonType.outline */
-  ]: '',
-  [16
-  /* ButtonType.plain */
-  ]: 'underline',
-  [32
-  /* ButtonType.subtle */
-  ]: '',
-  [48
-  /* ButtonType.plainSubtle */
-  ]: 'underline'
+  [1 /* ButtonType.basic */]: '',
+  [2 /* ButtonType.primary */]: '',
+  [6 /* ButtonType.destructivePrimary */]: '',
+  [4 /* ButtonType.destructive */]: '',
+  [8 /* ButtonType.outline */]: '',
+  [16 /* ButtonType.plain */]: 'underline',
+  [32 /* ButtonType.subtle */]: '',
+  [48 /* ButtonType.plainSubtle */]: 'underline'
 };
 const ButtonBackgroundColorPressedValues = {
-  [1
-  /* ButtonType.basic */
-  ]: Actions.Secondary.Pressed,
-  [2
-  /* ButtonType.primary */
-  ]: Actions.Primary.Pressed,
-  [6
-  /* ButtonType.destructivePrimary */
-  ]: Actions.Critical.Pressed,
-  [4
-  /* ButtonType.destructive */
-  ]: Actions.Critical.Pressed,
-  [8
-  /* ButtonType.outline */
-  ]: Actions.Secondary.Pressed,
-  [16
-  /* ButtonType.plain */
-  ]: Actions.Secondary.Hover,
-  [32
-  /* ButtonType.subtle */
-  ]: Actions.Secondary.Pressed,
-  [48
-  /* ButtonType.plainSubtle */
-  ]: Actions.Secondary.Hover
+  [1 /* ButtonType.basic */]: Actions.Secondary.Pressed,
+  [2 /* ButtonType.primary */]: Actions.Primary.Pressed,
+  [6 /* ButtonType.destructivePrimary */]: Actions.Critical.Pressed,
+  [4 /* ButtonType.destructive */]: Actions.Critical.Pressed,
+  [8 /* ButtonType.outline */]: Actions.Secondary.Pressed,
+  [16 /* ButtonType.plain */]: Actions.Secondary.Hover,
+  [32 /* ButtonType.subtle */]: Actions.Secondary.Pressed,
+  [48 /* ButtonType.plainSubtle */]: Actions.Secondary.Hover
 };
 const ButtonTextColorValues = {
-  [1
-  /* ButtonType.basic */
-  ]: Text$1.Default,
-  [2
-  /* ButtonType.primary */
-  ]: Text$1.OnPrimary,
-  [6
-  /* ButtonType.destructivePrimary */
-  ]: Text$1.OnCritical,
-  [4
-  /* ButtonType.destructive */
-  ]: Text$1.Default,
-  [8
-  /* ButtonType.outline */
-  ]: Text$1.Default,
-  [16
-  /* ButtonType.plain */
-  ]: Interactive.Default.Default,
-  [32
-  /* ButtonType.subtle */
-  ]: Text$1.Default,
-  [48
-  /* ButtonType.plainSubtle */
-  ]: Interactive.Subtle.Default
+  [1 /* ButtonType.basic */]: Text$1.Default,
+  [2 /* ButtonType.primary */]: Text$1.OnPrimary,
+  [6 /* ButtonType.destructivePrimary */]: Text$1.OnCritical,
+  [4 /* ButtonType.destructive */]: Text$1.Default,
+  [8 /* ButtonType.outline */]: Text$1.Default,
+  [16 /* ButtonType.plain */]: Interactive.Default.Default,
+  [32 /* ButtonType.subtle */]: Text$1.Default,
+  [48 /* ButtonType.plainSubtle */]: Interactive.Subtle.Default
 };
 const IconTextColorValues = {
-  [1
-  /* ButtonType.basic */
-  ]: Icons.Default,
-  [2
-  /* ButtonType.primary */
-  ]: Icons.OnPrimary,
-  [6
-  /* ButtonType.destructivePrimary */
-  ]: Icons.OnCritical,
-  [4
-  /* ButtonType.destructive */
-  ]: Icons.Default,
-  [8
-  /* ButtonType.outline */
-  ]: Icons.Default,
-  [16
-  /* ButtonType.plain */
-  ]: Interactive.Default.Default,
-  [32
-  /* ButtonType.subtle */
-  ]: Icons.Default,
-  [48
-  /* ButtonType.plainSubtle */
-  ]: Icons.Default
+  [1 /* ButtonType.basic */]: Icons.Default,
+  [2 /* ButtonType.primary */]: Icons.OnPrimary,
+  [6 /* ButtonType.destructivePrimary */]: Icons.OnCritical,
+  [4 /* ButtonType.destructive */]: Icons.Default,
+  [8 /* ButtonType.outline */]: Icons.Default,
+  [16 /* ButtonType.plain */]: Interactive.Default.Default,
+  [32 /* ButtonType.subtle */]: Icons.Default,
+  [48 /* ButtonType.plainSubtle */]: Icons.Default
 };
 const ButtonTextColorHoverValues = {
-  [1
-  /* ButtonType.basic */
-  ]: Text$1.Default,
-  [2
-  /* ButtonType.primary */
-  ]: Text$1.OnPrimary,
-  [6
-  /* ButtonType.destructivePrimary */
-  ]: Text$1.OnCritical,
-  [4
-  /* ButtonType.destructive */
-  ]: Text$1.OnCritical,
-  [8
-  /* ButtonType.outline */
-  ]: Text$1.Default,
-  [16
-  /* ButtonType.plain */
-  ]: Interactive.Default.Hover,
-  [32
-  /* ButtonType.subtle */
-  ]: Text$1.Default,
-  [48
-  /* ButtonType.plainSubtle */
-  ]: Interactive.Subtle.Hover
+  [1 /* ButtonType.basic */]: Text$1.Default,
+  [2 /* ButtonType.primary */]: Text$1.OnPrimary,
+  [6 /* ButtonType.destructivePrimary */]: Text$1.OnCritical,
+  [4 /* ButtonType.destructive */]: Text$1.OnCritical,
+  [8 /* ButtonType.outline */]: Text$1.Default,
+  [16 /* ButtonType.plain */]: Interactive.Default.Hover,
+  [32 /* ButtonType.subtle */]: Text$1.Default,
+  [48 /* ButtonType.plainSubtle */]: Interactive.Subtle.Hover
 };
 const IconColorHoverValues = {
-  [1
-  /* ButtonType.basic */
-  ]: Icons.Default,
-  [2
-  /* ButtonType.primary */
-  ]: Icons.OnPrimary,
-  [6
-  /* ButtonType.destructivePrimary */
-  ]: Icons.OnCritical,
-  [4
-  /* ButtonType.destructive */
-  ]: Icons.OnCritical,
-  [8
-  /* ButtonType.outline */
-  ]: Icons.Default,
-  [16
-  /* ButtonType.plain */
-  ]: Interactive.Default.Hover,
-  [32
-  /* ButtonType.subtle */
-  ]: Icons.Default,
-  [48
-  /* ButtonType.plainSubtle */
-  ]: Interactive.Subtle.Hover
+  [1 /* ButtonType.basic */]: Icons.Default,
+  [2 /* ButtonType.primary */]: Icons.OnPrimary,
+  [6 /* ButtonType.destructivePrimary */]: Icons.OnCritical,
+  [4 /* ButtonType.destructive */]: Icons.OnCritical,
+  [8 /* ButtonType.outline */]: Icons.Default,
+  [16 /* ButtonType.plain */]: Interactive.Default.Hover,
+  [32 /* ButtonType.subtle */]: Icons.Default,
+  [48 /* ButtonType.plainSubtle */]: Interactive.Subtle.Hover
 };
 const ButtonBorderValues = {
-  [1
-  /* ButtonType.basic */
-  ]: `1px solid ${Borders.Default.Default}`,
-  [2
-  /* ButtonType.primary */
-  ]: 'none',
-  [6
-  /* ButtonType.destructivePrimary */
-  ]: 'none',
-  [4
-  /* ButtonType.destructive */
-  ]: `1px solid ${Borders.Default.Default}`,
-  [8
-  /* ButtonType.outline */
-  ]: `1px solid ${Borders.Default.Default}`,
-  [16
-  /* ButtonType.plain */
-  ]: 'none',
-  [32
-  /* ButtonType.subtle */
-  ]: `1px solid ${Borders.Default.Default}`,
-  [48
-  /* ButtonType.plainSubtle */
-  ]: 'none'
+  [1 /* ButtonType.basic */]: `1px solid ${Borders.Default.Default}`,
+  [2 /* ButtonType.primary */]: 'none',
+  [6 /* ButtonType.destructivePrimary */]: 'none',
+  [4 /* ButtonType.destructive */]: `1px solid ${Borders.Default.Default}`,
+  [8 /* ButtonType.outline */]: `1px solid ${Borders.Default.Default}`,
+  [16 /* ButtonType.plain */]: 'none',
+  [32 /* ButtonType.subtle */]: `1px solid ${Borders.Default.Default}`,
+  [48 /* ButtonType.plainSubtle */]: 'none'
 };
 const ButtonBorderDisabledValues = {
-  [1
-  /* ButtonType.basic */
-  ]: `1px solid ${Borders.Default.Subdued}`,
-  [2
-  /* ButtonType.primary */
-  ]: 'none',
-  [6
-  /* ButtonType.destructivePrimary */
-  ]: 'none',
-  [4
-  /* ButtonType.destructive */
-  ]: `1px solid ${Borders.Default.Subdued}`,
-  [8
-  /* ButtonType.outline */
-  ]: `1px solid ${Borders.Default.Default}`,
-  [16
-  /* ButtonType.plain */
-  ]: 'none',
-  [32
-  /* ButtonType.subtle */
-  ]: `1px solid ${Borders.Default.Subdued}`,
-  [48
-  /* ButtonType.plainSubtle */
-  ]: 'none'
+  [1 /* ButtonType.basic */]: `1px solid ${Borders.Default.Subdued}`,
+  [2 /* ButtonType.primary */]: 'none',
+  [6 /* ButtonType.destructivePrimary */]: 'none',
+  [4 /* ButtonType.destructive */]: `1px solid ${Borders.Default.Subdued}`,
+  [8 /* ButtonType.outline */]: `1px solid ${Borders.Default.Default}`,
+  [16 /* ButtonType.plain */]: 'none',
+  [32 /* ButtonType.subtle */]: `1px solid ${Borders.Default.Subdued}`,
+  [48 /* ButtonType.plainSubtle */]: 'none'
 };
 const ButtonTextColorDisabled = {
-  [1
-  /* ButtonDisabledType.enabled */
-  ]: '',
-  [2
-  /* ButtonDisabledType.disabled */
-  ]: Text$1.Light
+  [1 /* ButtonDisabledType.enabled */]: '',
+  [2 /* ButtonDisabledType.disabled */]: Text$1.Light
 };
 const ButtonCursor = {
-  [1
-  /* ButtonDisabledType.enabled */
-  ]: 'pointer',
-  [2
-  /* ButtonDisabledType.disabled */
-  ]: 'not-allowed'
+  [1 /* ButtonDisabledType.enabled */]: 'pointer',
+  [2 /* ButtonDisabledType.disabled */]: 'not-allowed'
 };
 const ButtonSizeValues = {
-  [2
-  /* ButtonSize.small */
-  ]: `${Padding.xxs} ${Padding.s}`,
-  [1
-  /* ButtonSize.default */
-  ]: `${Padding.xs} ${Padding.m}`,
-  [4
-  /* ButtonSize.large */
-  ]: `${Padding.s} ${Padding.l}`
+  [2 /* ButtonSize.small */]: `${Padding.xxs} ${Padding.s}`,
+  [1 /* ButtonSize.default */]: `${Padding.xs} ${Padding.m}`,
+  [4 /* ButtonSize.large */]: `${Padding.s} ${Padding.l}`
 };
 const ButtonSizeValuesByType = {
-  [1
-  /* ButtonType.basic */
-  ]: '',
-  [2
-  /* ButtonType.primary */
-  ]: '',
-  [6
-  /* ButtonType.destructivePrimary */
-  ]: '',
-  [4
-  /* ButtonType.destructive */
-  ]: '',
-  [8
-  /* ButtonType.outline */
-  ]: '',
-  [16
-  /* ButtonType.plain */
-  ]: `${Padding.xxxs} ${Padding.xxs}`,
-  [32
-  /* ButtonType.subtle */
-  ]: '',
-  [48
-  /* ButtonType.plainSubtle */
-  ]: `${Padding.xxxs} ${Padding.xxs}`
+  [1 /* ButtonType.basic */]: '',
+  [2 /* ButtonType.primary */]: '',
+  [6 /* ButtonType.destructivePrimary */]: '',
+  [4 /* ButtonType.destructive */]: '',
+  [8 /* ButtonType.outline */]: '',
+  [16 /* ButtonType.plain */]: `${Padding.xxxs} ${Padding.xxs}`,
+  [32 /* ButtonType.subtle */]: '',
+  [48 /* ButtonType.plainSubtle */]: `${Padding.xxxs} ${Padding.xxs}`
 };
 const ButtonTypeValues = {
-  [1
-  /* ButtonType.basic */
-  ]: 1,
-  [2
-  /* ButtonType.primary */
-  ]: 2,
-  [4
-  /* ButtonType.destructive */
-  ]: 4,
-  [6
-  /* ButtonType.destructivePrimary */
-  ]: 6,
-  [8
-  /* ButtonType.outline */
-  ]: 8,
-  [16
-  /* ButtonType.plain */
-  ]: 16,
-  [32
-  /* ButtonType.subtle */
-  ]: 32,
-  [48
-  /* ButtonType.plainSubtle */
-  ]: 48
+  [1 /* ButtonType.basic */]: 1,
+  [2 /* ButtonType.primary */]: 2,
+  [4 /* ButtonType.destructive */]: 4,
+  [6 /* ButtonType.destructivePrimary */]: 6,
+  [8 /* ButtonType.outline */]: 8,
+  [16 /* ButtonType.plain */]: 16,
+  [32 /* ButtonType.subtle */]: 32,
+  [48 /* ButtonType.plainSubtle */]: 48
 };
 function getBackgroundColorByType(type) {
   return ButtonBackgroundColorValues[type];
@@ -6387,30 +5945,27 @@ function getCursor(props) {
   return ButtonCursor[toButtonDisabledType(bitwiseOr$1([props.enabled, props.disabled]))];
 }
 function getIsDisabled(props) {
-  return toButtonDisabledType(bitwiseOr$1([props.enabled, props.disabled])) === 2
-  /* ButtonDisabledType.disabled */
-  ;
+  return toButtonDisabledType(bitwiseOr$1([props.enabled, props.disabled])) === 2 /* ButtonDisabledType.disabled */;
 }
+
 function getButtonType(props) {
   return ButtonTypeValues[toButtonTypes(bitwiseOr$1([props.basic, props.primary, props.destructive, props.outline, props.plain, props.subtle]))];
 }
 
 function toTransientProps(props) {
   const {
-    onCritical,
-    onPrimary,
-    emphasis,
-    children
-  } = props,
-        rest = __rest(props, ["onCritical", "onPrimary", "emphasis", "children"]);
-
+      onCritical,
+      onPrimary,
+      emphasis,
+      children
+    } = props,
+    rest = __rest(props, ["onCritical", "onPrimary", "emphasis", "children"]);
   return Object.assign(Object.assign({}, rest), {
     $onCritical: onCritical,
     $onPrimary: onPrimary,
     $emphasis: emphasis
   });
 }
-
 const DISPLAY = /*#__PURE__*/styled.div.withConfig({
   displayName: "typography__DISPLAY",
   componentId: "sc-5x0jko-0"
@@ -6495,44 +6050,21 @@ const Label$1 = props => {
 
 function toSpinner(n) {
   switch (n) {
-    case 1
-    /* SpinnerSize.small */
-    :
-      return 1
-      /* SpinnerSize.small */
-      ;
-
-    case 2
-    /* SpinnerSize.medium */
-    :
-      return 2
-      /* SpinnerSize.medium */
-      ;
-
-    case 4
-    /* SpinnerSize.large */
-    :
-      return 4
-      /* SpinnerSize.large */
-      ;
-
+    case 1 /* SpinnerSize.small */:
+      return 1 /* SpinnerSize.small */;
+    case 2 /* SpinnerSize.medium */:
+      return 2 /* SpinnerSize.medium */;
+    case 4 /* SpinnerSize.large */:
+      return 4 /* SpinnerSize.large */;
     default:
-      return 2
-      /* SpinnerSize.medium */
-      ;
+      return 2 /* SpinnerSize.medium */;
   }
 }
 
 const SpinnerValues = {
-  [1
-  /* SpinnerSize.small */
-  ]: '18px',
-  [2
-  /* SpinnerSize.medium */
-  ]: '40px',
-  [4
-  /* SpinnerSize.large */
-  ]: '60px'
+  [1 /* SpinnerSize.small */]: '18px',
+  [2 /* SpinnerSize.medium */]: '40px',
+  [4 /* SpinnerSize.large */]: '60px'
 };
 function getValuesBySize$3(props) {
   return SpinnerValues[toSpinner(bitwiseOr$1([props.small, props.medium, props.large]))];
@@ -6580,7 +6112,6 @@ const Loading = /*#__PURE__*/styled(Spinner).withConfig({
   displayName: "button__Loading",
   componentId: "v4884z-3"
 })(["position:absolute;"]);
-
 function makeButtonConfig(props) {
   const buttonType = getButtonType(props);
   const isDisabled = getIsDisabled(props);
@@ -6615,25 +6146,22 @@ function makeButtonConfig(props) {
     buttonType
   };
 }
-
 const Button = props => {
   const {
-    children,
-    loading,
-    IconPrefix,
-    IconSuffix,
-    type = 'button'
-  } = props,
-        htmlProps = __rest(props, ["children", "loading", "IconPrefix", "IconSuffix", "type"]);
-
+      children,
+      loading,
+      IconPrefix,
+      IconSuffix,
+      type = 'button'
+    } = props,
+    htmlProps = __rest(props, ["children", "loading", "IconPrefix", "IconSuffix", "type"]);
   const _a = makeButtonConfig(props),
-        {
-    textColor,
-    textColorDisabled,
-    buttonType
-  } = _a,
-        buttonConfig = __rest(_a, ["textColor", "textColorDisabled", "buttonType"]);
-
+    {
+      textColor,
+      textColorDisabled,
+      buttonType
+    } = _a,
+    buttonConfig = __rest(_a, ["textColor", "textColorDisabled", "buttonType"]);
   return jsxs(ButtonFrame, Object.assign({}, htmlProps, {
     type: type
   }, buttonConfig, {
@@ -6653,11 +6181,7 @@ const Button = props => {
       children: children
     })), is(loading) ? jsx(Loading, {
       small: true,
-      onPrimary: buttonType === 2
-      /* ButtonType.primary */
-      || buttonType === 6
-      /* ButtonType.destructivePrimary */
-
+      onPrimary: buttonType === 2 /* ButtonType.primary */ || buttonType === 6 /* ButtonType.destructivePrimary */
     }) : '', isDefined(IconSuffix) ? jsx(IconContainer$1, Object.assign({
       isLoading: is(loading)
     }, {
@@ -6708,15 +6232,12 @@ const AlertBanner = props => {
     icon: LevelIcon,
     color: iconColor
   } = getIcon(props);
-
   const handleClose = () => {
     safeCallback(onClose);
   };
-
   if (!is(open)) {
     return jsx(Nothing, {});
   }
-
   return jsxs(InCardFrame, Object.assign({
     role: "alert",
     background: background,
@@ -6753,70 +6274,31 @@ const AlertBanner = props => {
 
 function toBadgeType(n) {
   switch (n) {
-    case 1
-    /* BadgeType.neutral */
-    :
-      return 1
-      /* BadgeType.neutral */
-      ;
-
-    case 2
-    /* BadgeType.info */
-    :
-      return 2
-      /* BadgeType.info */
-      ;
-
-    case 4
-    /* BadgeType.success */
-    :
-      return 4
-      /* BadgeType.success */
-      ;
-
-    case 8
-    /* BadgeType.warning */
-    :
-      return 8
-      /* BadgeType.warning */
-      ;
-
-    case 16
-    /* BadgeType.critical */
-    :
-      return 16
-      /* BadgeType.critical */
-      ;
-
+    case 1 /* BadgeType.neutral */:
+      return 1 /* BadgeType.neutral */;
+    case 2 /* BadgeType.info */:
+      return 2 /* BadgeType.info */;
+    case 4 /* BadgeType.success */:
+      return 4 /* BadgeType.success */;
+    case 8 /* BadgeType.warning */:
+      return 8 /* BadgeType.warning */;
+    case 16 /* BadgeType.critical */:
+      return 16 /* BadgeType.critical */;
     default:
-      return 1
-      /* BadgeType.neutral */
-      ;
+      return 1 /* BadgeType.neutral */;
   }
 }
 
 const BadgeTypeColors = {
-  [1
-  /* BadgeType.neutral */
-  ]: Surface.Neutral.Default,
-  [2
-  /* BadgeType.info */
-  ]: Surface.Highlight.Default,
-  [4
-  /* BadgeType.success */
-  ]: Surface.Success.Default,
-  [8
-  /* BadgeType.warning */
-  ]: Surface.Warning.Default,
-  [16
-  /* BadgeType.critical */
-  ]: Surface.Critical.Default
+  [1 /* BadgeType.neutral */]: Surface.Neutral.Default,
+  [2 /* BadgeType.info */]: Surface.Highlight.Default,
+  [4 /* BadgeType.success */]: Surface.Success.Default,
+  [8 /* BadgeType.warning */]: Surface.Warning.Default,
+  [16 /* BadgeType.critical */]: Surface.Critical.Default
 };
-
 function bitwiseOr(flags) {
   return flags.reduce((mask, flag, i) => mask | Number(flag) << i, 0);
 }
-
 function getColor$1(props) {
   return BadgeTypeColors[toBadgeType(bitwiseOr([props.neutral, props.info, props.success, props.warning, props.critical]))];
 }
@@ -6868,13 +6350,11 @@ function leftRightLayoutGenerator(layoutProps = {}) {
     })([""]),
     BodyText: Body
   };
-
   const Layout = props => {
     return jsx(LayoutFrame, {
       children: props.children
     });
   };
-
   Layout.Left = Left;
   Layout.Right = Right;
   Layout.HeadingText = Slots.HeadingText;
@@ -6940,7 +6420,6 @@ class CardAlertBannerSlot extends Slot {
       children: this.props.children
     }));
   }
-
 }
 
 const ControlsFrame$1 = /*#__PURE__*/styled(Flex).withConfig({
@@ -6953,7 +6432,6 @@ class CardControlsSlot extends Slot {
       children: this.props.children
     });
   }
-
 }
 
 class CardHeadingActionSlot extends Slot {}
@@ -6994,7 +6472,6 @@ class CardSectionSlot extends Slot {
       })), children]
     }));
   }
-
 }
 
 const CardHeading = /*#__PURE__*/styled(SpaceBetween).withConfig({
@@ -7002,7 +6479,6 @@ const CardHeading = /*#__PURE__*/styled(SpaceBetween).withConfig({
   componentId: "sc-14canq2-0"
 })(["margin:", " ", " ", " ", ";padding-top:", ";"], Margin.none, Margin.l, Margin.none, Margin.l, Padding.l);
 /** remove the margin bottom here since the frame handles it */
-
 const CardHeadingText = /*#__PURE__*/styled(Heading3).withConfig({
   displayName: "card__CardHeadingText",
   componentId: "sc-14canq2-1"
@@ -7013,11 +6489,10 @@ const CardFrame = /*#__PURE__*/styled(CardFrame$1).withConfig({
 })(["", ";> section:nth-of-type(1){border:none;}"], shadow);
 const Card = props => {
   const {
-    children,
-    heading
-  } = props,
-        htmlProps = __rest(props, ["children", "heading"]);
-
+      children,
+      heading
+    } = props,
+    htmlProps = __rest(props, ["children", "heading"]);
   const sections = getSlots(CardSectionSlot, children);
   const controls = getSlot(CardControlsSlot, children);
   const headingAction = getSlot(CardHeadingActionSlot, children);
@@ -7055,7 +6530,6 @@ const Card = props => {
   }));
 };
 /** export the slots and some sub-components */
-
 Card.Section = CardSectionSlot;
 Card.Controls = CardControlsSlot;
 Card.HeadingAction = CardHeadingActionSlot;
@@ -7064,11 +6538,8 @@ Card.AlertBanner = CardAlertBannerSlot;
 const {
   Layout
 } = leftRightLayoutGenerator();
-
 class Right extends Slot {}
-
 class Controls$1 extends Slot {}
-
 const LeftRightCard = props => {
   const right = getSlot(Right, props.children);
   const controls = getSlot(Controls$1, props.children);
@@ -7124,7 +6595,6 @@ const checkSvg = `
   <svg xmlns='http://www.w3.org/2000/svg' width='10' height='12' viewBox='0 0 10 8'>
     <path d='M4.50846 7.37941C4.0689 7.81898 3.35108 7.81898 2.91151 7.37941L0.330581 4.79848C-0.110194 4.35892 -0.110194 3.64109 0.330581 3.20153C0.770146 2.76196 1.48797 2.76196 1.92753 3.20153L3.70999 4.98399L8.07338 0.620598C8.51294 0.181033 9.23076 0.181033 9.67033 0.620598C10.1099 1.06016 10.1099 1.77798 9.67033 2.21755L4.50846 7.37941Z' fill='white'/>
   </svg>`;
-
 function getCheckMark(indeterminate) {
   return css(["::before{position:absolute;content:url(\"data:image/svg+xml,", "\");left:", "px;top:", "px;}"], indeterminate ? indeterminateSvg : checkSvg, indeterminate ? 3 : 4, indeterminate ? 6 : 3);
 }
@@ -7139,14 +6609,11 @@ function getCheckMark(indeterminate) {
  * the styles to depend on the browser's
  * idea of the state of the button.
   */
-
-
 function getCheckedStyles(indeterminate, color) {
   return css(["", ""], ({
     checked
   }) => isNil(checked) ? css([":checked{background:", ";border:2px solid ", ";", "}"], color, color, getCheckMark(indeterminate)) : is(checked) || is(indeterminate) ? css(["background:", ";border:2px solid ", ";", ""], color, color, getCheckMark(indeterminate)) : '');
 }
-
 const getHoverStyles = indeterminate => css(["background:", ";", ""], Surface.Default.Hover, getCheckedStyles(indeterminate, Interactive.Default.Hover));
 const getDisabledStyles = indeterminate => css(["pointer-events:none;background:", ";border:2px solid ", ";", ""], props => is(props.checked) || is(indeterminate) ? `${Borders.Default.Default}` : `${Surface.Default.Subdued}`, Borders.Default.Default, getCheckedStyles(indeterminate, Icons.Disabled));
 const getDefaultStyles = indeterminate => css(["background:", ";border:2px solid ", ";", ":hover{", "}"], Surface.Default.Default, Interactive.Default.Disabled, getCheckedStyles(indeterminate, Interactive.Default.Default), getHoverStyles(indeterminate));
@@ -7170,11 +6637,10 @@ const CustomizedCheckbox = /*#__PURE__*/styled.input.withConfig({
 }, Focused.Default);
 const Checkbox = props => {
   const {
-    error,
-    indeterminate
-  } = props,
-        htmlProps = __rest(props, ["error", "indeterminate"]);
-
+      error,
+      indeterminate
+    } = props,
+    htmlProps = __rest(props, ["error", "indeterminate"]);
   return jsx(CustomizedCheckbox, Object.assign({}, htmlProps, {
     type: 'checkbox',
     error: error,
@@ -7201,12 +6667,11 @@ const LabelText$2 = /*#__PURE__*/styled.span.withConfig({
 })(["margin-left:", ";"], Margin.xs);
 const RadioButton$1 = props => {
   const {
-    className,
-    label,
-    disabled
-  } = props,
-        htmlProps = __rest(props, ["className", "label", "disabled"]);
-
+      className,
+      label,
+      disabled
+    } = props,
+    htmlProps = __rest(props, ["className", "label", "disabled"]);
   return jsxs(Label, Object.assign({
     disabled: is(disabled),
     className: className
@@ -7221,37 +6686,20 @@ const RadioButton$1 = props => {
 };
 
 // this file was generated, but it is safe to modify
-
 function toDividerType(n) {
   switch (n) {
-    case 1
-    /* DividerType.default */
-    :
-      return 1
-      /* DividerType.default */
-      ;
-
-    case 2
-    /* DividerType.subdued */
-    :
-      return 2
-      /* DividerType.subdued */
-      ;
-
+    case 1 /* DividerType.default */:
+      return 1 /* DividerType.default */;
+    case 2 /* DividerType.subdued */:
+      return 2 /* DividerType.subdued */;
     default:
-      return 1
-      /* DividerType.default */
-      ;
+      return 1 /* DividerType.default */;
   }
 }
 
 const DividerTypeColor = {
-  [1
-  /* DividerType.default */
-  ]: Borders.Default.Default,
-  [2
-  /* DividerType.subdued */
-  ]: Borders.Default.Subdued
+  [1 /* DividerType.default */]: Borders.Default.Default,
+  [2 /* DividerType.subdued */]: Borders.Default.Subdued
 };
 function getColor(props) {
   return DividerTypeColor[toDividerType(bitwiseOr$1([props.default, props.subdued]))];
@@ -7266,7 +6714,6 @@ function getColor(props) {
  * this comment and feel like experimenting, go crazy. Check out the
  * card stories for an example of the divider (it's way at the bottom)
  */
-
 const DividerWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "divider__DividerWrapper",
   componentId: "hcchmo-0"
@@ -7385,25 +6832,18 @@ const SuffixFrame = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "input-field__SuffixFrame",
   componentId: "sc-1yq0rb7-4"
 })(["margin-right:", ";"], Margin.xs);
-
 class IconSlot extends Slot {}
-
 class ControlsSlot$1 extends Slot {}
-
 const InputFrame = /*#__PURE__*/styled.label.withConfig({
   displayName: "input-field__InputFrame",
   componentId: "sc-1yq0rb7-5"
 })(["width:100%;padding:", " ", " ", " ", ";display:flex;flex-direction:", ";", ""], Padding.xs, Padding.none, Padding.none, Padding.none, ({
   label,
   labelPosition
-}) => isDefined(label) && !isEmpty(label) && labelPosition === "side"
-/* labelPositionType.SIDE */
-? 'row' : 'column', ({
+}) => isDefined(label) && !isEmpty(label) && labelPosition === "side" /* labelPositionType.SIDE */ ? 'row' : 'column', ({
   label,
   labelPosition
-}) => isDefined(label) && !isEmpty(label) && labelPosition === "side"
-/* labelPositionType.SIDE */
-&& css(["width:fit-content;white-space:pre;"]));
+}) => isDefined(label) && !isEmpty(label) && labelPosition === "side" /* labelPositionType.SIDE */ && css(["width:fit-content;white-space:pre;"]));
 const ControlsFrame = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "input-field__ControlsFrame",
   componentId: "sc-1yq0rb7-6"
@@ -7413,23 +6853,18 @@ const InputLabel = /*#__PURE__*/styled(Label$1).withConfig({
   componentId: "sc-1yq0rb7-7"
 })(["margin-bottom:", ";", ""], Margin.xxs, ({
   labelPosition
-}) => labelPosition === "side"
-/* labelPositionType.SIDE */
-&& css(["padding-right:", ";"], Padding.xs));
+}) => labelPosition === "side" /* labelPositionType.SIDE */ && css(["padding-right:", ";"], Padding.xs));
 const InputField$1 = forwardRef((props, ref) => {
   const {
-    children,
-    prefix,
-    suffix,
-    label,
-    className,
-    style,
-    labelPosition = "top"
-    /* labelPositionType.TOP */
-
-  } = props,
-        inputProps = __rest(props, ["children", "prefix", "suffix", "label", "className", "style", "labelPosition"]);
-
+      children,
+      prefix,
+      suffix,
+      label,
+      className,
+      style,
+      labelPosition = "top" /* labelPositionType.TOP */
+    } = props,
+    inputProps = __rest(props, ["children", "prefix", "suffix", "label", "className", "style", "labelPosition"]);
   const icon = getSlot(IconSlot, children);
   const controls = getSlot(ControlsSlot$1, children);
   const required = is(props.required) ? '*' : '';
@@ -7568,11 +7003,10 @@ $$5({ global: true, forced: parseFloat != $parseFloat }, {
 
 const InputNumber = props => {
   const {
-    onChange,
-    value
-  } = props,
-        inputFieldProps = __rest(props, ["onChange", "value"]);
-
+      onChange,
+      value
+    } = props,
+    inputFieldProps = __rest(props, ["onChange", "value"]);
   return jsx(InputField$1, Object.assign({
     type: 'number',
     value: isNil(value) || isNaN(value) ? '' : value,
@@ -7589,10 +7023,9 @@ InputNumber.Stepper = Stepper;
 
 const InputText = props => {
   const {
-    onChange
-  } = props,
-        inputFieldProps = __rest(props, ["onChange"]);
-
+      onChange
+    } = props,
+    inputFieldProps = __rest(props, ["onChange"]);
   return jsx(InputField$1, Object.assign({
     type: 'text',
     onChange: e => onChange(e.target.value)
@@ -7614,12 +7047,11 @@ const HTMLAnchor = /*#__PURE__*/styled.a.withConfig({
 }) => interactionColor);
 const Link = props => {
   const {
-    label,
-    disabled = false,
-    subtle
-  } = props,
-        rest = __rest(props, ["label", "disabled", "subtle"]);
-
+      label,
+      disabled = false,
+      subtle
+    } = props,
+    rest = __rest(props, ["label", "disabled", "subtle"]);
   const initialColor = getInitialColor(props);
   const interactionColor = getInteractionColor(props);
   return jsx(HTMLAnchor, Object.assign({}, rest, {
@@ -7630,7 +7062,6 @@ const Link = props => {
     children: label
   }));
 };
-
 function getInitialColor({
   subtle,
   disabled
@@ -7638,10 +7069,8 @@ function getInitialColor({
   if (is(disabled)) {
     return Interactive.Default.Disabled;
   }
-
   return is(subtle) ? Interactive.Subtle.Default : Interactive.Default.Default;
 }
-
 function getInteractionColor({
   subtle
 }) {
@@ -7684,13 +7113,11 @@ const ClosableIcon = /*#__PURE__*/styled.svg.withConfig({
 })(["path{fill:", ";}"], Icons.Default);
 const CloseButton$1 = props => {
   const disabled = is(props.disabled);
-
   const onClickHandler = () => {
     if (!disabled && isDefined(props.onClick)) {
       props.onClick();
     }
   };
-
   return jsx(ClosableWrapper, Object.assign({
     disabled: disabled,
     onClick: onClickHandler,
@@ -7738,12 +7165,11 @@ const TagFrame = /*#__PURE__*/styled(Flex).withConfig({
 })(["flex-direction:row;align-items:stretch;padding:", ";width:fit-content;"], Padding.none);
 const Tag = props => {
   const {
-    disabled,
-    closable,
-    onClick
-  } = props,
-        domProps = __rest(props, ["disabled", "closable", "onClick"]);
-
+      disabled,
+      closable,
+      onClick
+    } = props,
+    domProps = __rest(props, ["disabled", "closable", "onClick"]);
   return jsxs(TagFrame, Object.assign({}, domProps, {
     className: props.className
   }, {
@@ -7757,47 +7183,23 @@ const Tag = props => {
 };
 
 // this file was generated, but it is safe to modify
-
 function toThumbnailSize(n) {
   switch (n) {
-    case 1
-    /* ThumbnailSize.small */
-    :
-      return 1
-      /* ThumbnailSize.small */
-      ;
-
-    case 2
-    /* ThumbnailSize.medium */
-    :
-      return 2
-      /* ThumbnailSize.medium */
-      ;
-
-    case 4
-    /* ThumbnailSize.large */
-    :
-      return 4
-      /* ThumbnailSize.large */
-      ;
-
+    case 1 /* ThumbnailSize.small */:
+      return 1 /* ThumbnailSize.small */;
+    case 2 /* ThumbnailSize.medium */:
+      return 2 /* ThumbnailSize.medium */;
+    case 4 /* ThumbnailSize.large */:
+      return 4 /* ThumbnailSize.large */;
     default:
-      return 2
-      /* ThumbnailSize.medium */
-      ;
+      return 2 /* ThumbnailSize.medium */;
   }
 }
 
 const ThumbnailSizeValues = {
-  [1
-  /* ThumbnailSize.small */
-  ]: '40px',
-  [2
-  /* ThumbnailSize.medium */
-  ]: '60px',
-  [4
-  /* ThumbnailSize.large */
-  ]: '80px'
+  [1 /* ThumbnailSize.small */]: '40px',
+  [2 /* ThumbnailSize.medium */]: '60px',
+  [4 /* ThumbnailSize.large */]: '80px'
 };
 function getValuesBySize$2(props) {
   return ThumbnailSizeValues[toThumbnailSize(bitwiseOr$1([props.small, props.medium, props.large]))];
@@ -7822,11 +7224,9 @@ const Thumbnail = props => {
     className = ''
   } = props;
   const size = getValuesBySize$2(props);
-
   if (isNil(imageUrl)) {
     return jsx(Nothing, {});
   }
-
   return jsx(Box, Object.assign({
     size: size,
     "data-testid": "thumbnail-test",
@@ -7855,7 +7255,6 @@ const getStylesToTypePrimary = ({
     borderBottom: `3px solid ${Borders.Highlight.Default}`
   }
 });
-
 const getStylesToTypeSecondary = ({
   selected
 }) => ({
@@ -7869,33 +7268,29 @@ const getStylesToTypeSecondary = ({
   borderRadius: '18px',
   alignItems: 'center'
 });
-
 const getStylesByType = (secondary, selected) => {
   if (secondary) {
     return getStylesToTypeSecondary({
       selected
     });
   }
-
   return getStylesToTypePrimary({
     selected
   });
 };
-
 const Tab$1 = props => {
   const {
-    Prefix,
-    selected = false,
-    secondary = false
-  } = props,
-        rest = __rest(props // eslint-disable-next-line no-null/no-null
-  , ["Prefix", "selected", "secondary"]); // eslint-disable-next-line no-null/no-null
-
-
+      Prefix,
+      selected = false,
+      secondary = false
+    } = props,
+    rest = __rest(props
+    // eslint-disable-next-line no-null/no-null
+    , ["Prefix", "selected", "secondary"]);
+  // eslint-disable-next-line no-null/no-null
   const ref = useRef(null);
   useEffect(() => {
     var _a, _b;
-
     selected ? (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus() : (_b = ref.current) === null || _b === void 0 ? void 0 : _b.blur();
   }, [selected]);
   /**
@@ -7906,12 +7301,10 @@ const Tab$1 = props => {
    * we will have to use a div and style it the old fashioned way until
    * we upgrade rwc's styled-components or drop rwc
    */
-
   return jsxs("div", Object.assign({}, rest, {
     tabIndex: 0,
     onClick: () => {
       var _a;
-
       (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
     },
     role: 'tab',
@@ -7948,11 +7341,8 @@ const TabListPrimary = /*#__PURE__*/styled(TabList).withConfig({
   displayName: "tabs__TabListPrimary",
   componentId: "kpjo9y-3"
 })(["border-bottom:1px solid ", ";"], Borders.Default.Subdued);
-
 class Content extends StylableSlot {}
-
 class Navigation extends Slot {}
-
 const isTab = isReactElementOfType(Tab);
 const isTabList = isReactElementOfType(Navigation);
 const isContent = isReactElementOfType(Content);
@@ -7964,18 +7354,15 @@ const Tabs = props => {
     if (isContent(child)) {
       return decorateContent(child, props, contentCount++);
     }
-
     if (isTabList(child)) {
       const tabs = Children.map(child.props.children, tab => {
         return isTab(tab) ? decorateTab(tab, props, tabCount++) : tab;
       });
-
       if (is(props.secondary) && props.secondary === true) {
         return jsx(TabListSecondary, {
           children: tabs
         });
       }
-
       return jsx(TabListPrimary, {
         children: tabs
       });
@@ -7987,7 +7374,6 @@ const Tabs = props => {
     children: children
   });
 };
-
 function decorateTab(tab, {
   selected,
   secondary,
@@ -7998,7 +7384,6 @@ function decorateTab(tab, {
     selected: is(tab.props.selected) ? tab.props.selected : index === selected,
     onFocus: e => {
       safeCallback(tab.props.onFocus, e);
-
       if (index !== selected) {
         onChange(index);
       }
@@ -8008,8 +7393,6 @@ function decorateTab(tab, {
   }));
 }
 /** content could be anything, but it needs to at least show and hide appropriately */
-
-
 function decorateContent(child, props, index) {
   return applyProps(applyStyle(child, {
     display: index === props.selected ? 'inherit' : 'none'
@@ -8018,61 +7401,31 @@ function decorateContent(child, props, index) {
     'aria-hidden': !(index === props.selected)
   });
 }
-
 Tabs.Content = Content;
 Tabs.TabList = Navigation;
 
 function toFlag(n) {
   switch (n) {
-    case 1
-    /* FlagSize.small */
-    :
-      return 1
-      /* FlagSize.small */
-      ;
-
-    case 2
-    /* FlagSize.medium */
-    :
-      return 2
-      /* FlagSize.medium */
-      ;
-
-    case 4
-    /* FlagSize.large */
-    :
-      return 4
-      /* FlagSize.large */
-      ;
-
+    case 1 /* FlagSize.small */:
+      return 1 /* FlagSize.small */;
+    case 2 /* FlagSize.medium */:
+      return 2 /* FlagSize.medium */;
+    case 4 /* FlagSize.large */:
+      return 4 /* FlagSize.large */;
     default:
-      return 2
-      /* FlagSize.medium */
-      ;
+      return 2 /* FlagSize.medium */;
   }
 }
 
 const FlagWidthValues = {
-  [1
-  /* FlagSize.small */
-  ]: '20',
-  [2
-  /* FlagSize.medium */
-  ]: '20',
-  [4
-  /* FlagSize.large */
-  ]: '32'
+  [1 /* FlagSize.small */]: '20',
+  [2 /* FlagSize.medium */]: '20',
+  [4 /* FlagSize.large */]: '32'
 };
 const FlagHeightValues = {
-  [1
-  /* FlagSize.small */
-  ]: '20',
-  [2
-  /* FlagSize.medium */
-  ]: '20',
-  [4
-  /* FlagSize.large */
-  ]: '24'
+  [1 /* FlagSize.small */]: '20',
+  [2 /* FlagSize.medium */]: '20',
+  [4 /* FlagSize.large */]: '24'
 };
 function getHeigthBySize(props) {
   return FlagHeightValues[getFlagSize(props)];
@@ -8088,23 +7441,14 @@ const SmallFlags={'AD':jsxs(React.Fragment,{children:[jsxs("g",Object.assign({cl
 
 const getCoordsStyles = props => {
   switch (getFlagSize(props)) {
-    case 4
-    /* FlagSize.large */
-    :
+    case 4 /* FlagSize.large */:
       return css(["& .coords{width:32px;height:24px;x:0;y:0;}"]);
-
-    case 2
-    /* FlagSize.medium */
-    :
+    case 2 /* FlagSize.medium */:
       return css(["& .coords{width:20px;height:16px;x:0;y:2;}"]);
-
-    case 1
-    /* FlagSize.small */
-    :
+    case 1 /* FlagSize.small */:
       return css(["& .coords{width:16px;height:12px;x:2;y:4;}"]);
   }
 };
-
 const BoundingBox = /*#__PURE__*/styled.i.withConfig({
   displayName: "flag__BoundingBox",
   componentId: "sc-1qckhuo-0"
@@ -8131,29 +7475,18 @@ const Svg = /*#__PURE__*/styled.svg.attrs(({
 }) => getWidthBySize(props), ({
   props
 }) => getCoordsStyles(props));
-
 const getFlagPathByCode = props => {
   switch (getFlagSize(props)) {
-    case 1
-    /* FlagSize.small */
-    :
+    case 1 /* FlagSize.small */:
       return SmallFlags[props.code];
-
-    case 2
-    /* FlagSize.medium */
-    :
+    case 2 /* FlagSize.medium */:
       return MediumFlags[props.code];
-
-    case 4
-    /* FlagSize.large */
-    :
+    case 4 /* FlagSize.large */:
       return LargeFlags[props.code];
-
     default:
       return SmallFlags[props.code];
   }
 };
-
 const Flag = props => {
   return jsx(BoundingBox, Object.assign({
     className: props.className,
@@ -8476,26 +7809,21 @@ function getDocument() {
   if (typeof document !== 'undefined') {
     return document;
   }
-
   return undefined;
 }
 function equal(valueA, valueB) {
   if (valueA === valueB) {
     return true;
   }
-
   if (isNil(valueA) || isNil(valueB)) {
     return false;
   }
-
   if (typeof valueA === 'object' && typeof valueB === 'object') {
     if (isDefined(valueA.toJSON) && isDefined(valueB.toJSON)) {
       return JSON.stringify(valueA.toJSON()) === JSON.stringify(valueB.toJSON());
     }
-
     return JSON.stringify(valueA) === JSON.stringify(valueB);
   }
-
   return false;
 }
 function getValueOptions(options, value, multi) {
@@ -8528,32 +7856,23 @@ function toKey(value) {
   if (typeof value === 'string') {
     return value;
   }
-
   if (isDefined(value) && typeof value === 'object') {
     const jsonObject = isDefined(value.toJSON) ? value.toJSON() : value;
     return JSON.stringify(jsonObject);
   }
-
   return JSON.stringify(value);
 }
 const topPosition = props => {
-  if (props.menuPosition === "top"
-  /* menuPositionType.TOP */
-  && isDefined(props.menuHeight) && typeof props.menuHeight === 'number') {
-    return `${-(props.menuHeight + (isDefined(props.label) && !isEmpty(props.label) && props.labelPosition === "top"
-    /* labelPositionType.TOP */
-    ? 64 : 44))}px`;
+  if (props.menuPosition === "top" /* menuPositionType.TOP */ && isDefined(props.menuHeight) && typeof props.menuHeight === 'number') {
+    return `${-(props.menuHeight + (isDefined(props.label) && !isEmpty(props.label) && props.labelPosition === "top" /* labelPositionType.TOP */ ? 64 : 44))}px`;
   }
-
   return '4px';
 };
 
 const MenuWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "menu-container__MenuWrapper",
   componentId: "dadn7s-0"
-})(["z-index:1;position:relative;background:", ";top:", ";box-sizing:border-box;.menu-list{box-sizing:border-box;box-shadow:", ";border:1px solid ", ";background-color:", ";border-radius:6px;opacity:0;transition:opacity 0.1s ease;padding:", ";&:focus{outline:none;}::-webkit-scrollbar{width:10px;height:0;}::-webkit-scrollbar-thumb{min-height:50px;border:2px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:1em;background-color:", ";}::-webkit-scrollbar-corner{background-color:transparent;}}"], Surface.Default.Default, props => topPosition(props), props => props.menuPosition === "bottom"
-/* menuPositionType.BOTTOM */
-? '0px 2px 10px 0px rgba(0, 0, 0, 0.10)' : '0px -2px 10px 0px rgba(0, 0, 0, 0.10)', Borders.Default.Subdued, Surface.Default.Default, Padding.xxs, Surface.Neutral.Default);
+})(["z-index:1;position:relative;background:", ";top:", ";box-sizing:border-box;.menu-list{box-sizing:border-box;box-shadow:", ";border:1px solid ", ";background-color:", ";border-radius:6px;opacity:0;transition:opacity 0.1s ease;padding:", ";&:focus{outline:none;}::-webkit-scrollbar{width:10px;height:0;}::-webkit-scrollbar-thumb{min-height:50px;border:2px solid rgba(0,0,0,0);background-clip:padding-box;border-radius:1em;background-color:", ";}::-webkit-scrollbar-corner{background-color:transparent;}}"], Surface.Default.Default, props => topPosition(props), props => props.menuPosition === "bottom" /* menuPositionType.BOTTOM */ ? '0px 2px 10px 0px rgba(0, 0, 0, 0.10)' : '0px -2px 10px 0px rgba(0, 0, 0, 0.10)', Borders.Default.Subdued, Surface.Default.Default, Padding.xxs, Surface.Neutral.Default);
 const MenuContainer = props => {
   const {
     onClick,
@@ -8624,9 +7943,7 @@ const EmptyOptionItem = /*#__PURE__*/styled(OptionItem).withConfig({
   componentId: "sc-15t2iwx-1"
 })(["border:1px solid ", ";background-color:", ";position:absolute;margin:", ";width:100%;height:54px;box-shadow:", ";&:hover{background-color:", ";}"], Borders.Default.Subdued, Surface.Default.Default, Margin.none, ({
   props
-}) => props.menuPosition === "bottom"
-/* menuPositionType.BOTTOM */
-? '0px 2px 10px 0px rgba(0, 0, 0, 0.10)' : '0px -2px 10px 0px rgba(0, 0, 0, 0.10)', Surface.Default.Default);
+}) => props.menuPosition === "bottom" /* menuPositionType.BOTTOM */ ? '0px 2px 10px 0px rgba(0, 0, 0, 0.10)' : '0px -2px 10px 0px rgba(0, 0, 0, 0.10)', Surface.Default.Default);
 
 const CheckedIcon$1 = /*#__PURE__*/styled(IconMinor.Check).withConfig({
   displayName: "option__CheckedIcon",
@@ -8636,7 +7953,6 @@ const OptionComponent = /*#__PURE__*/memo(props => {
   const onClick = () => {
     props.onSelect(props.option.value, props.option);
   };
-
   const {
     active,
     selected,
@@ -8707,18 +8023,14 @@ const Menu = props => {
     open,
     invalid,
     menuHeight = DEFAULT_MENU_HEIGHT,
-    menuPosition = "bottom"
-    /* menuPositionType.BOTTOM */
-    ,
-    labelPosition = "top"
-    /* labelPositionType.TOP */
-    ,
+    menuPosition = "bottom" /* menuPositionType.BOTTOM */,
+    labelPosition = "top" /* labelPositionType.TOP */,
     label
   } = props;
-  const options = safeArray(props.options); // eslint-disable-next-line no-null/no-null
-
-  const list = useRef(null); // eslint-disable-next-line no-null/no-null
-
+  const options = safeArray(props.options);
+  // eslint-disable-next-line no-null/no-null
+  const list = useRef(null);
+  // eslint-disable-next-line no-null/no-null
   const outerRef = useRef(null);
   const height = Math.min(Math.max(options.length * rowHeight, rowHeight) + 10, menuHeight);
   useEffect(() => {
@@ -8745,15 +8057,12 @@ const Menu = props => {
       }
     });
   }, [props, options]);
-
   const renderList = () => {
     const MenuComponent = props.menuComponent;
     const itemCount = options.length;
-
     if (isDefined(MenuComponent)) {
       return jsx(MenuComponent, Object.assign({}, props));
     }
-
     if (itemCount === 0) {
       const {
         emptyText
@@ -8768,7 +8077,6 @@ const Menu = props => {
         })
       }));
     }
-
     return jsx(FixedSizeList, Object.assign({
       className: "menu-list",
       style: {
@@ -8785,7 +8093,6 @@ const Menu = props => {
       children: MenuRow$1
     }));
   };
-
   return maybeRender(open, jsx(MenuContainer, Object.assign({
     invalid: invalid,
     label: label,
@@ -8829,7 +8136,6 @@ const TagContainer = /*#__PURE__*/styled(Tag).withConfig({
   displayName: "value-component-multi__TagContainer",
   componentId: "sc-1fc9cnm-0"
 })(["div:first-child{min-height:auto;padding:", " ", " ", " ", ";}div:last-child{padding:", ";}"], Padding.none, Padding.none, Padding.none, Padding.xxs, Padding.none);
-
 const ValueComponentMulti = props => {
   const {
     option,
@@ -8850,7 +8156,6 @@ const ValueComponentMulti = props => {
     }))
   }));
 };
-
 var ValueComponentMulti$1 = /*#__PURE__*/memo(ValueComponentMulti);
 
 const ValueComponentSingle = props => {
@@ -8869,7 +8174,6 @@ const ValueComponentSingle = props => {
     children: props.option.label
   }));
 };
-
 var ValueComponentSingle$1 = /*#__PURE__*/memo(ValueComponentSingle);
 
 const valueStyles = ({
@@ -8888,7 +8192,6 @@ const valueStyles = ({
   lineHeight: '20px',
   color: `${Text$1.Default}`
 });
-
 const ValueContainer = /*#__PURE__*/styled(SpaceBetween).withConfig({
   displayName: "value__ValueContainer",
   componentId: "sc-1aps7dx-0"
@@ -8908,25 +8211,17 @@ const ValueWrapper$1 = /*#__PURE__*/styled(Flex).withConfig({
 })(["width:100%;display:", ";"], ({
   label,
   labelPosition
-}) => isDefined(label) && !isEmpty(label) && labelPosition === "top"
-/* labelPositionType.TOP */
-? 'block' : 'flex');
+}) => isDefined(label) && !isEmpty(label) && labelPosition === "top" /* labelPositionType.TOP */ ? 'block' : 'flex');
 const ValueLabel = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "value__ValueLabel",
   componentId: "sc-1aps7dx-2"
 })(["padding-left:", ";margin-bottom:", ";display:flex;align-self:", ";width:fit-content;white-space:pre;", ""], Padding.s, ({
   labelPosition
-}) => labelPosition === "top"
-/* labelPositionType.TOP */
-? Margin.xxs : Margin.none, ({
+}) => labelPosition === "top" /* labelPositionType.TOP */ ? Margin.xxs : Margin.none, ({
   labelPosition
-}) => labelPosition === "top"
-/* labelPositionType.TOP */
-? 'flex-start' : 'center', ({
+}) => labelPosition === "top" /* labelPositionType.TOP */ ? 'flex-start' : 'center', ({
   labelPosition
-}) => labelPosition === "top"
-/* labelPositionType.TOP */
-&& css(["flex-basis:100%;"]));
+}) => labelPosition === "top" /* labelPositionType.TOP */ && css(["flex-basis:100%;"]));
 const ValueLeft = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "value__ValueLeft",
   componentId: "sc-1aps7dx-3"
@@ -8950,7 +8245,6 @@ const ErrorMessage = /*#__PURE__*/styled.div.withConfig({
   displayName: "value__ErrorMessage",
   componentId: "sc-1aps7dx-7"
 })(["display:", ";flex-direction:'row';width:100%;padding:", " ", ";& path{fill:", ";}div{color:", ";margin:", " ", "}"], props => is(props.visible) ? 'flex' : 'none', Padding.xxs, Padding.none, Icons.Critical, Text$1.Critical, Margin.none, Margin.xxs);
-
 const Value = props => {
   const search = /*#__PURE__*/createRef();
   useEffect(() => {
@@ -8970,25 +8264,20 @@ const Value = props => {
     errors,
     label,
     searchable,
-    labelPosition = "top"
-    /* labelPositionType.TOP */
-
+    labelPosition = "top" /* labelPositionType.TOP */
   } = props;
   const valueOptions = getValueOptions(options, value, multi);
   const showClearer = is(clearable) && valueOptions.length > 0;
   const searchAtStart = !is(multi) || valueOptions.length === 0;
   const searchAtEnd = is(multi) && valueOptions.length > 0;
-
   const renderSearch = () => {
     const {
       onSearchFocus,
       onSearchBlur
     } = props;
-
     if (is(disabled) || !is(searchable)) {
       return jsx(Nothing, {});
     }
-
     const canSearch = open && is(searchable) || !isDefined(value) && is(searchable) || isDefined(search.current);
     /**
     * @TODO this is a hack to be able to use the ref in react-web-client
@@ -8998,7 +8287,6 @@ const Value = props => {
     * we will have to use a div and style it the old fashioned way until
     * we upgrade rwc's styled-components or drop rwc
     */
-
     return jsx("span", {
       className: "search",
       contentEditable: true,
@@ -9012,7 +8300,6 @@ const Value = props => {
       ref: search
     });
   };
-
   const renderLabel = () => {
     return maybeRender(label, jsx(ValueLabel, Object.assign({
       labelPosition: labelPosition,
@@ -9022,23 +8309,19 @@ const Value = props => {
       children: label
     })));
   };
-
   const renderValues = () => {
     const {
       placeholder,
       labelComponent
     } = props;
-
     if (isDefined(search) && is(searchable) && open && !is(multi)) {
       return jsx(Nothing, {});
     }
-
     if (valueOptions.length === 0 && isNil(search === null || search === void 0 ? void 0 : search.current)) {
       return jsx(Placeholder, {
         children: defaultTo(placeholder, DEFAULT_PLACEHOLDER)
       });
     }
-
     return valueOptions.map(option => is(multi) ? jsx(ValueComponentMulti$1, {
       option: option,
       labelComponent: labelComponent,
@@ -9049,27 +8332,22 @@ const Value = props => {
       labelComponent: labelComponent
     }, toKey(option.value)));
   };
-
   const focus = () => {
     const el = search.current;
-
     if (isDefined(el)) {
       el.focus();
     }
   };
-
   const onClick = () => {
     if (!is(props.disabled)) {
       focus();
       props.onClick();
     }
   };
-
   const onClear = event => {
     event.stopPropagation();
     props.onClear();
   };
-
   const onSearch = event => {
     if (is(props.searchable)) {
       props.onSearch(event.currentTarget.innerText.trim());
@@ -9077,13 +8355,11 @@ const Value = props => {
       event.preventDefault();
     }
   };
-
   const onKeyDown = event => {
     if (!is(searchable) && event.key !== keys.TAB || event.key === keys.ENTER || event.key === keys.ARROW_UP || event.key === keys.ARROW_DOWN) {
       event.preventDefault();
     }
   };
-
   return jsxs(React.Fragment, {
     children: [jsxs(ValueContainer, Object.assign({
       "data-role": "value",
@@ -9130,14 +8406,12 @@ const Value = props => {
     }), e.message))]
   });
 };
-
 var Value$1 = /*#__PURE__*/memo(Value);
 
 /**
  * @TODO Use this container and remove the ContainerStyles
  * when we have a solution for  RWC styled components, or move away from it.
  */
-
 /*const Container = styled.div`
   position: relative;
   cursor: default;
@@ -9148,7 +8422,6 @@ var Value$1 = /*#__PURE__*/memo(Value);
   opacity: ${(props: { disabled?: boolean }) => (is(props.disabled) ? 0.75 : 1)};
   user-select: none;
 `*/
-
 const ContainerStyles = ({
   disabled
 }) => ({
@@ -9160,13 +8433,11 @@ const ContainerStyles = ({
   opacity: is(disabled) ? 0.75 : 1,
   userSelect: 'none'
 });
-
 const SelectImpl = (props, selectRef) => {
   if (isNil(selectRef)) {
     // eslint-disable-next-line no-null/no-null, react-hooks/rules-of-hooks
     selectRef = useRef(null);
   }
-
   const [open, setOpen] = useState(false);
   const [selectedIndex, setSelectedIndex] = useState(undefined);
   const [search, setSearch] = useState(undefined);
@@ -9196,76 +8467,61 @@ const SelectImpl = (props, selectRef) => {
   const options = getOptions();
   const onDocumentClick = useCallback(e => {
     const target = e.target;
-
     if (isDefined(target) && isDefined(target.closest('.select-menu'))) {
       return;
     }
-
     if (isDefined(selectRef) && typeof selectRef === 'object') {
       const {
         current
       } = selectRef;
-
       if (isDefined(current) && !current.contains(target)) {
         closeMenu(props.value);
       }
     }
   }, [props.value]);
-
   function getOptions() {
     if (isDefined(search)) {
       return safeArray(props.options).filter(option => option.label.toLowerCase().includes(search.toLowerCase()));
     }
-
     return defaultTo(props.options, []);
   }
-
   function openMenu() {
     var _a;
-
     setOpen(true);
     setSearch(isNil(props.value) ? search : undefined);
     setSelectedIndex(options.findIndex(option => equal(option.value, props.value)));
     (_a = props.onOpen) === null || _a === void 0 ? void 0 : _a.call(props);
     addDocumentListener();
   }
-
   function closeMenu(val, callback) {
     var _a;
-
     removeDocumentListener();
     setOpen(false);
     setSearch(isNil(val) ? search : undefined);
     setSelectedIndex(undefined);
     (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-
     if (typeof callback === 'function') {
       callback();
     }
   }
-
   function addDocumentListener() {
     removeDocumentListener();
     document === null || document === void 0 ? void 0 : document.addEventListener('click', onDocumentClick, {
       capture: true
     });
   }
-
   function onOptionSelect(selectValue, option) {
     setFocused(true);
     closeMenu(selectValue, () => {
       var _a;
-
       return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, selectValue, option);
     });
   }
-
   function removeDocumentListener() {
     document === null || document === void 0 ? void 0 : document.removeEventListener('click', onDocumentClick, {
       capture: true
     });
   }
-
   function onKeyDown({
     key
   }) {
@@ -9274,29 +8530,23 @@ const SelectImpl = (props, selectRef) => {
         if (open) {
           closeMenu(props.value);
         }
-
         break;
-
       case keys.ARROW_UP:
         if (open) {
           setSelectedIndex(getNewSelectedIndex(key));
         } else {
           openMenu();
         }
-
         break;
-
       case keys.ARROW_DOWN:
         if (open) {
           setSelectedIndex(getNewSelectedIndex(key));
         } else {
           openMenu();
         }
-
         break;
     }
   }
-
   function onKeyUp({
     key
   }) {
@@ -9307,33 +8557,25 @@ const SelectImpl = (props, selectRef) => {
           const newValue = option.value;
           onOptionSelect(Array.isArray(value) && is(multi) ? [...value, newValue] : newValue, option);
         }
-
         break;
-
       case keys.ESC:
         if (open) {
           closeMenu(value);
         }
-
         break;
     }
   }
-
   const getNewSelectedIndex = key => {
     if (isNil(selectedIndex)) {
       return 0;
     }
-
     let newSelectedIndex = selectedIndex;
-
     if (key === keys.ARROW_UP) {
       newSelectedIndex = newSelectedIndex - 1;
-
       if (newSelectedIndex < 0) {
         newSelectedIndex = options.length - 1;
       }
     }
-
     if (key === keys.ARROW_DOWN) {
       if (newSelectedIndex === options.length - 1) {
         newSelectedIndex = 0;
@@ -9341,14 +8583,11 @@ const SelectImpl = (props, selectRef) => {
         newSelectedIndex = newSelectedIndex + 1;
       }
     }
-
     return newSelectedIndex;
   };
-
   function onClear() {
     onOptionSelect(is(props.multi) ? [] : undefined);
   }
-
   function toggleMenu() {
     if (!open) {
       openMenu();
@@ -9356,41 +8595,32 @@ const SelectImpl = (props, selectRef) => {
       closeMenu(props.value);
     }
   }
-
   function onSearch(searchValue) {
     var _a;
-
     setSearch(searchValue);
     setOpen(true);
-
     if (options.length === 1 || isDefined(searchValue)) {
       setSelectedIndex(0);
     } else {
       setSelectedIndex(undefined);
     }
-
     (_a = props.onSearch) === null || _a === void 0 ? void 0 : _a.call(props, searchValue);
   }
-
   function onSearchFocus() {
     if (!open && !focused) {
       openMenu();
     }
-
     setFocused(true);
   }
-
   function onSearchBlur() {
     setFocused(false);
   }
-
   function onOptionRemove(removedValue) {
     if (Array.isArray(props.value) && is(props.multi)) {
       const values = props.value.filter(val => !equal(val, removedValue));
       onOptionSelect(values);
     }
   }
-
   const classNames = ['select', className, open && 'open', is(invalid) && 'has-error'].filter(c => Boolean(c));
   /**
   * @TODO this is a hack to be able to use the ref in react-web-client
@@ -9400,7 +8630,6 @@ const SelectImpl = (props, selectRef) => {
   * we will have to use a div and style it the old fashioned way until
   * we upgrade rwc's styled-components or drop rwc
   */
-
   return jsxs("div", Object.assign({
     style: Object.assign(Object.assign({}, style), ContainerStyles({
       disabled
@@ -9453,7 +8682,6 @@ const SelectImpl = (props, selectRef) => {
     })]
   }));
 };
-
 const Select = forwardRef(SelectImpl);
 
 const MenuListFrame = /*#__PURE__*/styled.div.withConfig({
@@ -9480,7 +8708,6 @@ const TitleRow = /*#__PURE__*/styled(Heading4).withConfig({
   displayName: "menu-list__TitleRow",
   componentId: "sxh4rn-5"
 })(["height:44px;margin:", " ", ";border-bottom:1px solid ", ";display:flex;align-items:center;padding-left:", ";"], Margin.none, Margin.xxs, Borders.Default.Subdued, Padding.s);
-
 const Row = props => {
   const {
     index,
@@ -9510,7 +8737,6 @@ const Row = props => {
     }), maybeRender(currentValue.some(val => equal(val, option.value)), jsx(CheckedIcon, {}))]
   }));
 };
-
 const MenuList = props => {
   const {
     menuHeight = 184
@@ -9519,10 +8745,10 @@ const MenuList = props => {
   const optionsHeight = options.reduce(function (acc, obj) {
     return acc + (isDefined(obj['helperText']) ? 72 : 52);
   }, 0);
-  const height = Math.min(Math.max(optionsHeight, 40), menuHeight); // eslint-disable-next-line no-null/no-null
-
-  const list = useRef(null); // const { open, selectedIndex, rowHeight } = props
-
+  const height = Math.min(Math.max(optionsHeight, 40), menuHeight);
+  // eslint-disable-next-line no-null/no-null
+  const list = useRef(null);
+  // const { open, selectedIndex, rowHeight } = props
   const handleClick = option => {
     const newValue = Array.isArray(props.value) && is(props.multi) ? [...props.value, option.value] : option.value;
     props.onSelect(newValue);
@@ -9536,8 +8762,6 @@ const MenuList = props => {
   *  }
   *}, [open, list, selectedIndex, rowHeight])
   */
-
-
   if (options.length === 0) {
     const {
       emptyText
@@ -9552,7 +8776,6 @@ const MenuList = props => {
       })
     }));
   }
-
   return jsxs(MenuListFrame, Object.assign({
     height: height,
     ref: list
@@ -9567,7 +8790,6 @@ const MenuList = props => {
 };
 
 var CheckboxState;
-
 (function (CheckboxState) {
   CheckboxState[CheckboxState["UNCHECKED"] = 0] = "UNCHECKED";
   CheckboxState[CheckboxState["CHECKED"] = 1] = "CHECKED";
@@ -9608,7 +8830,6 @@ const TreeNode = props => {
     label,
     expanded
   } = props;
-
   const handleCheck = () => {
     const {
       onCheck
@@ -9621,18 +8842,15 @@ const TreeNode = props => {
       })
     });
   };
-
   const handleClick = () => {
     const {
       onClick,
       isParent,
       expandDisabled
     } = props;
-
     if (isParent && !expandDisabled) {
       handleOnExpand();
     }
-
     onClick({
       label,
       value,
@@ -9641,7 +8859,6 @@ const TreeNode = props => {
       })
     });
   };
-
   const handleOnExpand = () => {
     const {
       onExpand
@@ -9652,29 +8869,23 @@ const TreeNode = props => {
       expanded: !is(expanded)
     });
   };
-
   const getCheckState = ({
     toggle
   }) => {
     const {
       checkState
     } = props;
-
     if (checkState === CheckboxState.UNCHECKED && toggle) {
       return true;
     }
-
     if (checkState === CheckboxState.CHECKED && !toggle) {
       return true;
     }
-
     if (checkState === CheckboxState.INDETERMINATE) {
       return true;
     }
-
     return false;
   };
-
   const renderCollapseButton = () => {
     const {
       expandDisabled,
@@ -9687,7 +8898,6 @@ const TreeNode = props => {
       IconSuffix: expanded ? IconMinor.ChevronUpSolid : IconMinor.ChevronDownSolid
     }));
   };
-
   const renderCheckboxLabel = () => {
     const {
       checkState,
@@ -9731,7 +8941,6 @@ const TreeNode = props => {
       }), renderCollapseButton()]
     });
   };
-
   const {
     disabled
   } = props;
@@ -9771,45 +8980,36 @@ const flattenNodes = (flattenList, nodes, parent, depth = 0) => {
 const getNode = (nodes, value) => {
   return nodes.find(node => node.value === value);
 };
-
 const nodeHasChildren = node => {
   return isDefined(node.children) && Array.isArray(node.children) && !isEmpty(node.children);
 };
-
 const getDisabledState = (node, parent) => {
   if (isDefined(parent) && is(parent.disabled)) {
     return true;
   }
-
   return is(node.disabled);
 };
-
 const deserializeList = (flatNodes, lists) => {
   flatNodes.forEach(flatNode => {
     if (lists.checked.includes(flatNode.value)) {
       flatNode.checked = true;
-
       if (flatNode.isParent) {
         checkAllChildren(flatNodes, flatNode);
       }
     }
-
     if (lists.expanded.includes(flatNode.value)) {
       flatNode.expanded = true;
     }
   });
 };
-
 const checkAllChildren = (flatNodes, flatNode) => {
   defaultTo(flatNode.children, []).forEach(node => {
     const _flatoNode = getNode(flatNodes, node.value);
-
     if (isDefined(_flatoNode)) {
       _flatoNode.checked = true;
     }
   });
 };
-
 const serializeList = (flatNodes, key) => {
   const list = [];
   flatNodes.forEach(node => {
@@ -9818,7 +9018,6 @@ const serializeList = (flatNodes, key) => {
         list.push(node.value);
       }
     }
-
     if (key === 'checked') {
       if (node.checked) {
         list.push(node.value);
@@ -9829,22 +9028,18 @@ const serializeList = (flatNodes, key) => {
 };
 const toggleChecked = (flatNodes, node, isChecked) => {
   const flatNode = getNode(flatNodes, node.value);
-
   if (isNil(flatNode)) {
     return;
   }
-
   if (flatNode.isLeaf) {
     if (is(node.disabled)) {
       return;
     }
-
     toggleNode(flatNodes, node.value, 'checked', isChecked);
   } else {
     if (isDefined(flatNode.children) && flatNode.children.length === 0) {
       toggleNode(flatNodes, node.value, 'checked', isChecked);
     }
-
     safeArray(flatNode.children).forEach(child => {
       toggleChecked(flatNodes, child, isChecked);
     });
@@ -9852,41 +9047,32 @@ const toggleChecked = (flatNodes, node, isChecked) => {
 };
 const toggleNode = (flatNodes, nodeValue, key, toggleValue) => {
   const node = flatNodes.find(_node => _node.value === nodeValue);
-
   if (isDefined(node)) {
     key === 'checked' ? node.checked = toggleValue : node.expanded = toggleValue;
   }
 };
 const getNodeCheckState = (flattenNodeList, node) => {
   const flatNode = getNode(flattenNodeList, node.value);
-
   if (is(flatNode === null || flatNode === void 0 ? void 0 : flatNode.isLeaf) || isDefined(node.children) && node.children.length === 0) {
     return is(flatNode === null || flatNode === void 0 ? void 0 : flatNode.checked) ? CheckboxState.CHECKED : CheckboxState.UNCHECKED;
   }
-
   if (is(isEveryChildChecked(flattenNodeList, node))) {
     return CheckboxState.CHECKED;
   }
-
   if (is(isSomeChildChecked(flattenNodeList, node))) {
     return CheckboxState.INDETERMINATE;
   }
-
   return CheckboxState.UNCHECKED;
 };
-
 const isEveryChildChecked = (flattenNodeList, node) => {
   return safeArray(node.children).every(child => {
     const _node = getNode(flattenNodeList, child.value);
-
     return isDefined(_node) && _node.checkState === 1;
   });
 };
-
 const isSomeChildChecked = (flattenNodeList, node) => {
   return safeArray(node.children).some(child => {
     const _node = getNode(flattenNodeList, child.value);
-
     return isDefined(_node) && _node.checkState > 0;
   });
 };
@@ -9922,62 +9108,49 @@ const TreeView = props => {
     });
     return _nodeList;
   }, [nodes, checkedList]);
-
   const handleOnCheck = nodeInfo => {
     const {
       onCheck
     } = props;
     toggleChecked(flattenNodeList, nodeInfo, nodeInfo.checked);
-
     if (isDefined(onCheck)) {
       onCheck(serializeList(flattenNodeList, 'checked'), Object.assign({}, nodeInfo));
     }
   };
-
   const handleOnExpand = nodeInfo => {
     const {
       onExpand
     } = props;
     toggleNode(flattenNodeList, nodeInfo.value, 'expanded', nodeInfo.expanded);
-
     if (isDefined(onExpand)) {
       onExpand(serializeList(flattenNodeList, 'expanded'), Object.assign({}, nodeInfo));
     }
-
     setExpandedList(serializeList(flattenNodeList, 'expanded'));
   };
-
   const onNodeClick = nodeInfo => {
     const {
       onClick
     } = props;
     const node = getNode(flattenNodeList, nodeInfo.value);
-
     if (isDefined(onClick)) {
       onClick(Object.assign(Object.assign({}, node), nodeInfo));
     }
   };
-
   const renderTreeNodes = (nodeList, parent) => {
     const {
       expandDisabled = false
     } = props;
     const treeNodes = nodeList.map(node => {
       var _a, _b;
-
       const flatNode = getNode(flattenNodeList, node.value);
       const children = is(flatNode === null || flatNode === void 0 ? void 0 : flatNode.isParent) ? renderTreeNodes(defaultTo(node.children, []), node) : jsx(Nothing, {}, node.value);
-
       if (isDefined(flatNode)) {
         flatNode.checkState = getNodeCheckState(flattenNodeList, node);
       }
-
       const parentExpanded = isDefined(parent) && isDefined(parent.value) ? (_a = getNode(flattenNodeList, parent.value)) === null || _a === void 0 ? void 0 : _a.expanded : true;
-
       if (!is(parentExpanded)) {
         return jsx(Nothing, {}, node.value);
       }
-
       return jsx(TreeNode, Object.assign({
         checkState: defaultTo(flatNode === null || flatNode === void 0 ? void 0 : flatNode.checkState, 0),
         disabled: is(flatNode === null || flatNode === void 0 ? void 0 : flatNode.disabled),
@@ -10006,7 +9179,6 @@ const TreeView = props => {
       children: treeNodes
     }));
   };
-
   const renderTree = () => {
     return useCardContainer ? jsx(Card, Object.assign({
       heading: title
@@ -10028,24 +9200,20 @@ const TreeView = props => {
       children: renderTreeNodes(nodes)
     }));
   };
-
   return maybeRender(!isEmpty(nodes), renderTree());
 };
 
 var TooltipPosition;
-
 (function (TooltipPosition) {
   TooltipPosition[TooltipPosition["TOP"] = 0] = "TOP";
   TooltipPosition[TooltipPosition["BOTTOM"] = 1] = "BOTTOM";
   TooltipPosition[TooltipPosition["LEFT"] = 2] = "LEFT";
   TooltipPosition[TooltipPosition["RIGHT"] = 3] = "RIGHT";
 })(TooltipPosition || (TooltipPosition = {}));
-
 const TooltipWrapper = /*#__PURE__*/styled.div.withConfig({
   displayName: "tooltip__TooltipWrapper",
   componentId: "sc-1rhmjz7-0"
 })(["position:relative;display:inline-flex;"]);
-
 const getContainerPosition = tooltipPosition => {
   const position = {
     TOP: css([""]),
@@ -10056,7 +9224,6 @@ const getContainerPosition = tooltipPosition => {
   const key = TooltipPosition[tooltipPosition];
   return position[key];
 };
-
 const getTooltipBoxPosition = tooltipPosition => {
   const position = {
     TOP: css([""]),
@@ -10067,7 +9234,6 @@ const getTooltipBoxPosition = tooltipPosition => {
   const key = TooltipPosition[tooltipPosition];
   return position[key];
 };
-
 const CenterContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "tooltip__CenterContainer",
   componentId: "sc-1rhmjz7-1"
@@ -10126,7 +9292,6 @@ const Tooltip = props => {
  * For a reasonable description of the class names etc,
  * @see https://shahabyazdi.github.io/react-multi-date-picker/classes-&-styles/
  */
-
 const CustomCalendar = /*#__PURE__*/styled(Calendar$1).withConfig({
   displayName: "custom-calendar__CustomCalendar",
   componentId: "luqga3-0"
@@ -10145,9 +9310,7 @@ const InputField = /*#__PURE__*/styled(InputField$1).withConfig({
   componentId: "sc-1pii8by-2"
 })(["margin-bottom:", ";"], Margin.xxs);
 const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD';
-
 class ControlsSlot extends Slot {}
-
 function datePickerFactory({
   fromDate,
   toDate,
@@ -10155,21 +9318,20 @@ function datePickerFactory({
 }) {
   const ConcreteDatePicker = props => {
     const {
-      value: valueProp,
-      defaultValue,
-      onChange: onChangeProp,
-      onClick,
-      isAvailable = () => true,
-      isOpen,
-      defaultOpen,
-      label,
-      format,
-      children,
-      min,
-      max
-    } = props,
-          HTMLInputProps = __rest(props, ["value", "defaultValue", "onChange", "onClick", "isAvailable", "isOpen", "defaultOpen", "label", "format", "children", "min", "max"]);
-
+        value: valueProp,
+        defaultValue,
+        onChange: onChangeProp,
+        onClick,
+        isAvailable = () => true,
+        isOpen,
+        defaultOpen,
+        label,
+        format,
+        children,
+        min,
+        max
+      } = props,
+      HTMLInputProps = __rest(props, ["value", "defaultValue", "onChange", "onClick", "isAvailable", "isOpen", "defaultOpen", "label", "format", "children", "min", "max"]);
     const [value, onChange] = useInputElementState({
       value: valueProp,
       defaultValue,
@@ -10181,19 +9343,17 @@ function datePickerFactory({
       onChange: onClick
     });
     const controls = getSlot(ControlsSlot, children);
-    const calendarChildren = getOtherChildren(children); // eslint-disable-next-line @typescript-eslint/ban-types
-
+    const calendarChildren = getOtherChildren(children);
+    // eslint-disable-next-line @typescript-eslint/ban-types
     const handleChange = selectedDates => {
       const date = first(toArray(selectedDates));
       const change = fromDate(date === null || date === void 0 ? void 0 : date.toDate());
       onChange(change);
-
       if (isNil(props.isOpen)) {
         // we don't want to override the user's custom open/close behaviour
         setOpen(false);
       }
     };
-
     return jsxs(InputDatePicker, {
       children: [!isNothing(controls) ? applyProps(controls.props.children, childProps => Object.assign(Object.assign({}, childProps), {
         onClick: isDefined(childProps.onClick) ? childProps.onClick : () => setOpen(!is(open)),
@@ -10211,9 +9371,7 @@ function datePickerFactory({
         children: jsx(InputField.Icon, {
           children: jsx(IconMinor.Calendar, {})
         })
-      })), is(open) ?
-      /** temporary fix while we wait for https://github.com/shahabyazdi/react-multi-date-picker/pull/153 */
-      jsx("div", Object.assign({
+      })), is(open) ? /** temporary fix while we wait for https://github.com/shahabyazdi/react-multi-date-picker/pull/153 */jsx("div", Object.assign({
         role: 'dialog'
       }, {
         children: jsx(Calendar, {
@@ -10240,23 +9398,18 @@ function datePickerFactory({
       })) : jsx(Nothing, {})]
     });
   };
-
   ConcreteDatePicker.Controls = ControlsSlot;
   ConcreteDatePicker.displayName = 'DatePicker';
   return ConcreteDatePicker;
-
   function toDateObject(date) {
     return new DateObject(toDate(date));
   }
-
   function defaultFormatter(date, format) {
     if (isNil(date)) {
       return '';
     }
-
     return toDateObject(date).format(defaultTo(format, DEFAULT_DATE_FORMAT));
   }
-
   function formatDate(date, format) {
     if (isFunction(format)) {
       return format({
@@ -10264,17 +9417,14 @@ function datePickerFactory({
         defaultFormatter
       });
     }
-
     if (isNil(date) || empty(date)) {
       // same behavior as html input type='date', it shows the format
       // even though if you open the picker it goes to TODAY
       return isString(format) ? format : DEFAULT_DATE_FORMAT;
     }
-
     return toDateObject(date).format(defaultTo(format, DEFAULT_DATE_FORMAT));
   }
 }
-
 function renderArrows(direction, handleClick) {
   return jsx("button", Object.assign({
     type: 'button',
@@ -10291,19 +9441,15 @@ const DatePicker = datePickerFactory({
 });
 
 var SliderType;
-
 (function (SliderType) {
   SliderType[SliderType["SLIDER"] = 0] = "SLIDER";
   SliderType[SliderType["RANGE_SLIDER"] = 1] = "RANGE_SLIDER";
 })(SliderType || (SliderType = {}));
-
 var ValueType;
-
 (function (ValueType) {
   ValueType[ValueType["MIN"] = 0] = "MIN";
   ValueType[ValueType["MAX"] = 1] = "MAX";
 })(ValueType || (ValueType = {}));
-
 const FieldContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "types__FieldContainer",
   componentId: "xsdaaw-0"
@@ -10338,7 +9484,6 @@ const HandleComponent = /*#__PURE__*/memo(props => {
     "aria-valuenow": handle.value
   }, getHandleProps(handle.id)));
 }, arePropsEqual$1);
-
 function arePropsEqual$1(oldProps, newProps) {
   return oldProps.handle.value === newProps.handle.value && oldProps.handle.percent === newProps.handle.percent;
 }
@@ -10416,7 +9561,6 @@ const TrackComponent = /*#__PURE__*/memo(props => {
     }, getTrackProps()))]
   });
 }, arePropsEqual);
-
 function arePropsEqual(oldProps, newProps) {
   return oldProps.source.value === newProps.source.value && oldProps.target.percent === newProps.target.percent;
 }
@@ -10437,13 +9581,11 @@ const SliderComponent = props => {
     onChange,
     onUpdate
   } = props;
-
   const handleOnChange = newValues => {
     if (values.some((val, index) => val !== newValues[index])) {
       onChange(newValues);
     }
   };
-
   return jsxs(Slider$1, Object.assign({
     mode: mode,
     step: 1,
@@ -10507,7 +9649,6 @@ const Input = /*#__PURE__*/styled(InputField$1).withConfig({
   displayName: "slider-inputs__Input",
   componentId: "mcw7y8-0"
 })(["width:52px;padding:", " ", ";text-align:center;"], Padding.none, Padding.xs);
-
 const getNewValue = (intValue, valueType, props) => {
   const {
     type,
@@ -10515,15 +9656,12 @@ const getNewValue = (intValue, valueType, props) => {
     minValue,
     maxValue
   } = props;
-
   if (valueType === ValueType.MIN) {
     return Math.min(intValue < range[0] ? range[0] : intValue, maxValue - 1);
   }
-
   const actualMin = type === SliderType.SLIDER ? range[0] : minValue;
   return Math.max(intValue > range[1] ? range[1] : intValue, actualMin + 1);
 };
-
 const SliderInputs = props => {
   const {
     type,
@@ -10540,47 +9678,37 @@ const SliderInputs = props => {
     setMinValue(minValue);
     setMaxValue(maxValue);
   }, [minValue, maxValue]);
-
   const handleOnBlur = (e, valueType) => {
     const intValue = +e.target.value;
     const newValue = getNewValue(intValue, valueType, props);
     mayCallOnChange(newValue, valueType);
-
     if (type === SliderType.SLIDER) {
       setMaxValue(newValue);
       return;
     }
-
     if (valueType === ValueType.MIN) {
       setMinValue(newValue);
       return;
     }
-
     setMaxValue(newValue);
   };
-
   const mayCallOnChange = (newValue, valueType) => {
     if (type === SliderType.SLIDER) {
       if (newValue !== maxValue) {
         onChange([newValue]);
       }
-
       return;
     }
-
     if (valueType === ValueType.MIN) {
       if (newValue !== minValue) {
         onChange([newValue, stateMaxValue]);
       }
-
       return;
     }
-
     if (newValue !== maxValue) {
       onChange([stateMinValue, newValue]);
     }
   };
-
   return type === SliderType.RANGE_SLIDER ? jsxs(Fragment$1, {
     children: [jsx(FieldContainer, Object.assign({
       margin: 'right'
@@ -10634,7 +9762,6 @@ const getChartData = (data, highlight) => {
     };
   }).sort((valueA, valueB) => valueA.value - valueB.value);
 };
-
 const BarChartComponent = props => {
   const {
     data,
@@ -10694,18 +9821,14 @@ const RangeSlider = props => {
     onChange
   } = props;
   const [update, setUpdate] = useState(values);
-
   if (isNil(max) && (isNil(data) || isEmpty(data))) {
     return jsx(Nothing, {});
   }
-
   const range = isDefined(data) ? [Math.min(...data), Math.max(...data)] : [min, max];
-
   const handleChange = newValues => {
     setUpdate(newValues);
     onChange === null || onChange === void 0 ? void 0 : onChange(newValues);
   };
-
   return jsxs(ComponentWrapper$1, {
     children: [isDefined(data) && jsx(ChartContainer, Object.assign({
       height: graphHeight,
@@ -10776,11 +9899,9 @@ const Slider = props => {
     editable = false
   } = props;
   const domain = [min, max];
-
   const handleChange = newValues => {
     onChange === null || onChange === void 0 ? void 0 : onChange(newValues[0]);
   };
-
   return jsxs(ComponentWrapper, {
     children: [isDefined(prefix) && jsx(Label$1, {
       children: prefix
@@ -10812,7 +9933,6 @@ function useKeyDown(targetKey, handler) {
       handler();
     }
   }
-
   useEffect(() => {
     window.addEventListener('keydown', downHandler);
     return () => {
@@ -10848,13 +9968,11 @@ const MODAL_SIZE_TEXT = {
   LARGE: 'large',
   XLARGE: 'xLarge'
 };
-
 function getModalSize(size) {
   const isValidKey = Object.keys(MODAL_SIZE).includes(size);
   const validSize = isValidKey ? size : MODAL_SIZE_TEXT.DEFAULT;
   return MODAL_SIZE[validSize];
 }
-
 const ModalBase = props => {
   const {
     open,
@@ -10863,33 +9981,27 @@ const ModalBase = props => {
     modalSize = MODAL_SIZE_TEXT.DEFAULT,
     onOverlayClick,
     onClose
-  } = props; // eslint-disable-next-line no-null/no-null
-
+  } = props;
+  // eslint-disable-next-line no-null/no-null
   const modalRef = useRef(null);
-
   const handleEscPress = () => {
     if (is(closeOnEsc)) {
       onClose();
     }
   };
-
   useKeyDown('Escape', handleEscPress);
-
   if (!is(open)) {
     document.body.style.overflow = 'unset';
     return jsx(Nothing, {});
   } else {
     document.body.style.overflow = 'hidden';
   }
-
   const handleOverlayClick = event => {
     if (isNil(modalRef.current) || modalRef.current.contains(event.target)) {
       return;
     }
-
     safeCallback(onOverlayClick);
   };
-
   return jsx(OverlayFrame, Object.assign({
     center: true,
     onClick: handleOverlayClick,
@@ -11037,40 +10149,20 @@ const ModalDestructive = props => {
 
 function toProgressBarSize(n) {
   switch (n) {
-    case 2
-    /* ProgressBarSize.medium */
-    :
-      return 2
-      /* ProgressBarSize.medium */
-      ;
-
-    case 4
-    /* ProgressBarSize.large */
-    :
-      return 4
-      /* ProgressBarSize.large */
-      ;
-
-    case 1
-    /* ProgressBarSize.small */
-    :
+    case 2 /* ProgressBarSize.medium */:
+      return 2 /* ProgressBarSize.medium */;
+    case 4 /* ProgressBarSize.large */:
+      return 4 /* ProgressBarSize.large */;
+    case 1 /* ProgressBarSize.small */:
     default:
-      return 1
-      /* ProgressBarSize.small */
-      ;
+      return 1 /* ProgressBarSize.small */;
   }
 }
 
 const ProgressBarValues = {
-  [1
-  /* ProgressBarSize.small */
-  ]: '8px',
-  [2
-  /* ProgressBarSize.medium */
-  ]: '16px',
-  [4
-  /* ProgressBarSize.large */
-  ]: '32px'
+  [1 /* ProgressBarSize.small */]: '8px',
+  [2 /* ProgressBarSize.medium */]: '16px',
+  [4 /* ProgressBarSize.large */]: '32px'
 };
 function getValuesBySize$1(props) {
   return ProgressBarValues[toProgressBarSize(bitwiseOr$1([props.small, props.medium, props.large]))];
@@ -11104,58 +10196,28 @@ const ProgressBar = props => {
 };
 
 // this file was generated, but it is safe to modify
-
 function toAvatarSize(n) {
   switch (n) {
-    case 1
-    /* AvatarSize.small */
-    :
-      return 1
-      /* AvatarSize.small */
-      ;
-
-    case 2
-    /* AvatarSize.medium */
-    :
-      return 2
-      /* AvatarSize.medium */
-      ;
-
-    case 4
-    /* AvatarSize.large */
-    :
-      return 4
-      /* AvatarSize.large */
-      ;
-
+    case 1 /* AvatarSize.small */:
+      return 1 /* AvatarSize.small */;
+    case 2 /* AvatarSize.medium */:
+      return 2 /* AvatarSize.medium */;
+    case 4 /* AvatarSize.large */:
+      return 4 /* AvatarSize.large */;
     default:
-      return 2
-      /* AvatarSize.medium */
-      ;
+      return 2 /* AvatarSize.medium */;
   }
 }
 
 const AvatarSizeValues = {
-  [1
-  /* AvatarSize.small */
-  ]: '32px',
-  [2
-  /* AvatarSize.medium */
-  ]: '40px',
-  [4
-  /* AvatarSize.large */
-  ]: '60px'
+  [1 /* AvatarSize.small */]: '32px',
+  [2 /* AvatarSize.medium */]: '40px',
+  [4 /* AvatarSize.large */]: '60px'
 };
 const AvatarSizeNodes = {
-  [1
-  /* AvatarSize.small */
-  ]: Label$1,
-  [2
-  /* AvatarSize.medium */
-  ]: Body,
-  [4
-  /* AvatarSize.large */
-  ]: Display
+  [1 /* AvatarSize.small */]: Label$1,
+  [2 /* AvatarSize.medium */]: Body,
+  [4 /* AvatarSize.large */]: Display
 };
 function getValuesBySize(props) {
   return AvatarSizeValues[toAvatarSize(bitwiseOr$1([props.small, props.medium, props.large]))];
@@ -11184,17 +10246,13 @@ const FullName = /*#__PURE__*/styled(Label$1).withConfig({
   displayName: "avatar__FullName",
   componentId: "sc-3qe63w-3"
 })(["margin-left:", ";"], Margin.xs);
-
 const isFirstOrLast = (el, index, items) => isDefined(el) && index === 0 || index === items.length - 1;
-
 const getInitial = text => isNil(text) ? '' : text.charAt(0);
-
 const getInitialsFromName = name => {
   const allNames = name.trim().split(' ');
   const initials = allNames.filter(isFirstOrLast).map(getInitial).join('');
   return initials;
 };
-
 const Avatar = props => {
   const {
     name,
@@ -11204,11 +10262,9 @@ const Avatar = props => {
   } = props;
   const size = getValuesBySize(props);
   const Text = getNodeToRenderText(props);
-
   if (!isDefined(name)) {
     return jsx(Nothing, {});
   }
-
   return jsxs(Container$1, Object.assign({
     className: props.className
   }, {
@@ -11240,11 +10296,9 @@ const InputCheckbox = props => {
     label = '',
     onChange
   } = props;
-
   if (isEmpty(label)) {
     return jsx(Nothing, {});
   }
-
   return jsxs(Wrapper, {
     children: [jsx(Checkbox, Object.assign({}, props, {
       name: isDefined(props.name) ? props.name : label,
@@ -11272,11 +10326,9 @@ const MultiChoiceList = props => {
     options,
     className = ''
   } = props;
-
   if (isEmpty(options)) {
     return jsx(Nothing, {});
   }
-
   return jsx(Group, Object.assign({
     role: "group",
     className: className
@@ -11302,7 +10354,6 @@ const RadioButton = /*#__PURE__*/styled(RadioButton$1).withConfig({
   displayName: "choice-list__RadioButton",
   componentId: "sc-1jen314-1"
 })(["margin-bottom:", ";"], Margin.xxs);
-
 const RadioGroup = props => {
   return jsx(Fragment, {
     children: props.options.map((option, index) => {
@@ -11320,12 +10371,10 @@ const RadioGroup = props => {
     })
   });
 };
-
 const ChoiceList = props => {
   const handleChange = event => {
     props.onChange(event.target.value);
   };
-
   return jsx(Container, {
     children: jsx(RadioGroup, {
       options: props.options,