@edvisor/product-language 0.4.2 → 0.5.0

package/index.js

@@ -4531,20 +4531,18 @@ const LeftRightCard = props => {
 LeftRightCard.Right = Right;
 LeftRightCard.Controls = Controls$1;
 
-const WIDTH = 12;
-const HEIGHT = 10;
-/** no magic here, just copy/pasted the svg from the mockup
- * I had to tweak the width and height though
-*/
-
-const svg = `
-<svg xmlns='http://www.w3.org/2000/svg' width='${WIDTH}' height='${HEIGHT}' 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>
+const indeterminateSvg = `
+  <svg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 10 8'>
+    <rect fill='white' width='10' height='2' rx='1'/>
+  </svg>
 `;
+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() {
-  return css(["::before{position:absolute;content:url(\"data:image/svg+xml,", "\");top:3px;left:3px;}"], 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);
 }
 /** the reason I have this isNil to test
  * whether `checked` was passes is this:
@@ -4559,41 +4557,49 @@ function getCheckMark() {
   */
 
 
-function getCheckedStyles(color) {
+function getCheckedStyles(indeterminate, color) {
   return css(["", ""], ({
     checked
-  }) => isNil(checked) ? css([":checked{background:", ";border:2px solid ", ";", "}"], color, color, getCheckMark()) : checked ? css(["background:", ";border:2px solid ", ";", ""], color, color, getCheckMark()) : '');
+  }) => 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 = () => css(["background:", ";", ""], Surface.Default.Hover, getCheckedStyles(Interactive.Default.Hover));
-const getDisabledStyles = () => css(["pointer-events:none;background:", ";border:2px solid ", ";", ""], props => props.checked === true ? `${Borders.Default.Default}` : `${Surface.Default.Subdued}`, Borders.Default.Default, getCheckedStyles(Icons.Disabled));
-const getDefaultStyles = () => css(["background:", ";border:2px solid ", ";", ":hover{", "}"], Surface.Default.Default, Interactive.Default.Disabled, getCheckedStyles(Interactive.Default.Default), getHoverStyles);
-const getInvalidStyles = () => css(["background:", ";border:2px solid ", ";", ""], props => props.checked === true ? `${Actions.Critical.Default}` : `${Surface.Critical.Subdued}`, Borders.Critical.Default, getCheckedStyles(Icons.Critical));
+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));
+const getInvalidStyles = indeterminate => css(["background:", ";border:2px solid ", ";", ""], props => is(props.checked) || is(indeterminate) ? `${Actions.Critical.Default}` : `${Surface.Critical.Subdued}`, Borders.Critical.Default, getCheckedStyles(indeterminate, Icons.Critical));
 
 const CustomizedCheckbox = /*#__PURE__*/styled.input.withConfig({
   displayName: "checkbox__CustomizedCheckbox",
   componentId: "gcfss3-0"
 })(["appearance:none;position:relative;box-sizing:content-box;width:18px;height:18px;margin:", ";padding:", ";border-radius:4px;user-select:none;vertical-align:bottom;display:inline-block;", ":focus-visible{outline:2px solid ", ";outline-offset:1px;}"], Margin.none, Padding.none, ({
   disabled,
+  indeterminate,
   error
 }) => {
   if (is(disabled)) {
-    return getDisabledStyles();
+    return getDisabledStyles(indeterminate);
   } else if (is(error)) {
-    return getInvalidStyles();
+    return getInvalidStyles(indeterminate);
   } else {
-    return getDefaultStyles();
+    return getDefaultStyles(indeterminate);
   }
 }, Focused.Default);
 const Checkbox = props => {
   const {
-    error = false
+    error,
+    indeterminate
   } = props,
-        htmlProps = __rest(props, ["error"]);
+        htmlProps = __rest(props, ["error", "indeterminate"]);
 
   return jsx(CustomizedCheckbox, Object.assign({}, htmlProps, {
     type: 'checkbox',
-    error: error
+    error: error,
+    indeterminate: is(indeterminate),
+    ref: input => {
+      if (isDefined(input)) {
+        input.indeterminate = is(props.indeterminate);
+      }
+    }
   }));
 };
 
@@ -5987,7 +5993,7 @@ const HelpText = /*#__PURE__*/styled(Body).withConfig({
 const ErrorMessage$1 = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "labeled-input__ErrorMessage",
   componentId: "a0ln2j-3"
-})(["margin-bottom:", ";& path{fill:", ";}"], Margin.xxs, Icons.Warning);
+})(["margin-bottom:", ";& path{fill:", ";}div{color:", ";}"], Margin.xxs, Icons.Critical, Text$1.Critical);
 const LabeledInput = props => {
   return jsxs(HTMLLabel, {
     children: [jsxs("label", {
@@ -6045,13 +6051,13 @@ const Stepper = props => {
 const FancyBorder = /*#__PURE__*/styled(SpaceBetween).withConfig({
   displayName: "input-field__FancyBorder",
   componentId: "sc-1yq0rb7-0"
-})(["background:", ";border:1px solid ", ";border-radius:6px;box-sizing:border-box;margin-bottom:", ";padding-left:", ";user-select:none;:focus,:focus-within,:active{border:", ";}"], ({
+})(["background:", ";border:1px solid ", ";border-radius:6px;box-sizing:border-box;margin-bottom:", ";padding-left:", ";user-select:none;outline-offset:-2px;", "}"], ({
   invalid
 }) => is(invalid) ? Surface.Critical.Subdued : Surface.Default.Default, ({
   invalid
 }) => is(invalid) ? Borders.Critical.Default : Borders.Default.Default, Margin.xxs, Padding.s, ({
   invalid
-}) => is(invalid) ? `1px solid ${Borders.Critical.Default}` : `2px solid ${Focused.Default}`);
+}) => !is(invalid) && css([":focus,:focus-within,:active{outline:2px solid ", "}"], Focused.Default));
 const InputLayout = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "input-field__InputLayout",
   componentId: "sc-1yq0rb7-1"
@@ -7275,6 +7281,11 @@ $$3({ target: 'String', proto: true, forced: !correctIsRegExpLogic('includes') }
   }
 });
 
+const DEFAULT_ROW_HEIGHT = 44;
+const DEFAULT_MENU_HEIGHT = 190;
+const DEFAULT_EMPTY_TEXT = 'No results found';
+const DEFAULT_PLACEHOLDER = 'Select Something';
+
 var $$2 = _export;
 var call$2 = functionCall;
 
@@ -7553,18 +7564,22 @@ function toKey(value) {
   return JSON.stringify(value);
 }
 const topPosition = props => {
-  if (props.menuPosition === 'top' && isDefined(props.menuHeight) && typeof props.menuHeight === 'number') {
-    return `${-(props.menuHeight + (isDefined(props.label) && props.labelPosition !== 'side' ? 58 : 38))}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 '0';
+  return '4px';
 };
 
-const OptionItem = /*#__PURE__*/styled.div.withConfig({
+const OptionItem = /*#__PURE__*/styled(SpaceBetween).withConfig({
   displayName: "option__OptionItem",
   componentId: "sc-1hb1qjt-0"
-})(["display:flex;align-items:center;justify-content:space-between;flex:1;height:", "px;padding:", " ", ";min-width:0;cursor:pointer;box-sizing:border-box;background-color:", ";&:hover{background-color:", ";}&:active{background-color:", ";}"], props => defaultTo(props.height, 44), Padding.none, Padding.s, props => is(props.active) ? Surface.Selected.Default : is(props.selected) ? Surface.Default.Hover : Surface.Default.Default, props => is(props.active) ? Surface.Selected.Hover : Surface.Default.Hover, props => is(props.active) ? Surface.Selected.Pressed : Surface.Default.Pressed);
-const CheckedIcon = /*#__PURE__*/styled(IconMinor.Check).withConfig({
+})(["flex:1;height:", "px;min-width:0;cursor:pointer;box-sizing:border-box;margin:", ";border-radius:6px;background-clip:content-box;background-color:", ";& div{padding:", " ", ";}& i:last-child{right:8px;}&:hover{background-color:", ";}&:active{background-color:", ";}"], props => defaultTo(props.height, DEFAULT_ROW_HEIGHT), Margin.xxs, props => is(props.active) ? Surface.Selected.Default : is(props.selected) ? Surface.Default.Hover : Surface.Default.Default, Padding.none, Padding.xs, props => is(props.active) ? Surface.Selected.Hover : Surface.Default.Hover, props => is(props.active) ? Surface.Selected.Pressed : Surface.Default.Pressed);
+const CheckedIcon$1 = /*#__PURE__*/styled(IconMinor.Check).withConfig({
   displayName: "option__CheckedIcon",
   componentId: "sc-1hb1qjt-1"
 })(["svg{path{fill:", "}}"], Icons.Highlight);
@@ -7585,6 +7600,7 @@ const OptionComponent = /*#__PURE__*/memo(props => {
   return jsxs(OptionItem, Object.assign({
     className: className.join(' '),
     "data-role": "option",
+    center: true,
     selected: selected,
     active: active,
     height: height,
@@ -7595,18 +7611,20 @@ const OptionComponent = /*#__PURE__*/memo(props => {
       active: active
     }, option, {
       children: option.label
-    })), is(active) && jsx(CheckedIcon, {})]
+    })), is(active) && jsx(CheckedIcon$1, {})]
   }));
 }, areEqual);
 
 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;&:focus{outline:none;}::-webkit-scrollbar{width:6px;height:8px;}::-webkit-scrollbar-thumb{border-radius:4px;background:", ";min-height:50px;}}"], Surface.Default.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:6px;height:8px;}::-webkit-scrollbar-thumb{border-radius:4px;background:", ";min-height:50px;}}"], Surface.Default.Default, ({
   props
 }) => topPosition(props), ({
   props
-}) => props.menuPosition === '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, Surface.Neutral.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)', Borders.Default.Subdued, Surface.Default.Default, Padding.xxs, Surface.Neutral.Default);
 const MenuContainer = props => {
   const {
     onClick,
@@ -7668,7 +7686,7 @@ fixRegExpWellKnownSymbolLogic$1('search', function (SEARCH, nativeSearch, maybeC
   ];
 });
 
-const MenuRow = /*#__PURE__*/memo(({
+const MenuRow$1 = /*#__PURE__*/memo(({
   index,
   style,
   data
@@ -7707,18 +7725,24 @@ const SelectLabel = /*#__PURE__*/styled(Label).withConfig({
 const EmptyOptionItem = /*#__PURE__*/styled(OptionItem).withConfig({
   displayName: "menu__EmptyOptionItem",
   componentId: "sc-1086ljy-0"
-})(["border:1px solid ", ";background-color:", ";border-radius:6px;position:absolute;top:", ";width:100%;", ""], Borders.Default.Subdued, Surface.Default.Default, ({
+})(["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
-}) => topPosition(props), shadowSm);
+}) => 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 Menu = props => {
   const {
-    rowHeight = 44,
+    rowHeight = DEFAULT_ROW_HEIGHT,
     selectedIndex,
     open,
     invalid,
-    menuHeight,
-    menuPosition,
-    labelPosition,
+    menuHeight = DEFAULT_MENU_HEIGHT,
+    menuPosition = "bottom"
+    /* menuPositionType.BOTTOM */
+    ,
+    labelPosition = "top"
+    /* labelPositionType.TOP */
+    ,
     label
   } = props;
   const options = safeArray(props.options); // eslint-disable-next-line no-null/no-null
@@ -7726,7 +7750,7 @@ const Menu = props => {
   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) + 2, defaultTo(menuHeight, 185));
+  const height = Math.min(Math.max(options.length * rowHeight, rowHeight) + 10, menuHeight);
   useEffect(() => {
     if (is(open) && isDefined(list.current) && selectedIndex !== undefined && selectedIndex !== -1) {
       list.current.scrollToItem(selectedIndex, 'center');
@@ -7769,7 +7793,7 @@ const Menu = props => {
       }, {
         children: jsx(SelectLabel, {
           children: jsx("span", {
-            children: defaultTo(emptyText, 'No results found')
+            children: defaultTo(emptyText, DEFAULT_EMPTY_TEXT)
           })
         })
       }));
@@ -7788,7 +7812,7 @@ const Menu = props => {
       itemCount: itemCount,
       itemData: itemData
     }, {
-      children: MenuRow
+      children: MenuRow$1
     }));
   };
 
@@ -7834,7 +7858,7 @@ $({ target: 'String', proto: true, forced: forcedStringTrimMethod('trim') }, {
 const TagContainer = /*#__PURE__*/styled(Tag).withConfig({
   displayName: "value-component-multi__TagContainer",
   componentId: "sc-1fc9cnm-0"
-})(["&:last-of-type{margin-right:", ";}div:first-child{min-height:auto;padding:", " ", " ", " ", ";}div:last-child{padding:", ";}"], Margin.xs, Padding.none, Padding.none, Padding.none, Padding.xxs, Padding.none);
+})(["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 {
@@ -8414,33 +8438,7 @@ function getButtonType(props) {
 const ButtonFrame = /*#__PURE__*/styled.button.withConfig({
   displayName: "button__ButtonFrame",
   componentId: "v4884z-0"
-})(["padding:", ";border:", ";border-radius:6px;background:", ";cursor:", ";display:flex;flex-direction:row;justify-content:center;gap:8px;align-items:center;position:relative;svg[role='icon']{path{fill:", ";}}", ""], props => props.buttonSize, props => props.buttonBorder, props => props.backgroundColor, props => props.cursor, props => props.iconColor, props => !props.isDisabled ? `
-    &:hover {
-      background: ${props.backgroundHover};
-      text-decoration:  ${props.textDecorationHover};
-      div {
-        color: ${props.textColorHover};
-      }
-      svg[role='icon'] {
-        path {
-          fill: ${props.iconColorHover};
-        }
-      }
-    }
-
-    &:focus  {
-      outline: 2px solid ${Focused.Default}
-    }
-
-    &:focus-visible  {
-      border: 2px solid ${Focused.Default}
-    }
-
-    &:active {
-      text-decoration: 'none'
-      background: ${props.backgroundPressed}
-    }
-  ` : '');
+})(["padding:", ";border:", ";border-radius:6px;background:", ";cursor:", ";display:flex;flex-direction:row;justify-content:center;gap:8px;align-items:center;position:relative;svg[role='icon']{path{fill:", ";}}", ""], props => props.buttonSize, props => props.buttonBorder, props => props.backgroundColor, props => props.cursor, props => props.iconColor, props => !props.isDisabled && css(["&:hover{background:", ";text-decoration:", ";div{color:", ";}svg[role='icon']{path{fill:", ";}}}outline-offset:-2px;&:focus,focus-visible{outline:2px solid ", "}&:active{text-decoration:'none' background:", "}"], props.backgroundHover, props.textDecorationHover, props.textColorHover, props.iconColorHover, Focused.Default, props.backgroundPressed));
 const ButtonText = /*#__PURE__*/styled(Label).withConfig({
   displayName: "button__ButtonText",
   componentId: "v4884z-1"
@@ -8539,10 +8537,10 @@ const Button = props => {
   }));
 };
 
-const ValueContainer = /*#__PURE__*/styled.div.withConfig({
+const ValueContainer = /*#__PURE__*/styled(SpaceBetween).withConfig({
   displayName: "value__ValueContainer",
   componentId: "sc-1aps7dx-0"
-})(["display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;flex:1;pointer-events:", ";padding:", " ", " ", " ", ";background:", ";cursor:default;border:1px solid ", ";z-index:0;box-sizing:border-box;max-width:100%;border-radius:6px;outline-offset:-2px;", " ", " ", ""], props => is(props.disabled) ? 'none' : 'auto', Padding.xs, Padding.xs, Padding.xs, Padding.s, Surface.Default.Default, props => is(props.invalid) ? Borders.Critical.Default : Borders.Default.Default, props => is(props.hasLabel) && css(["& div:first-of-type{align-self:flex-start;}"]), props => is(props.menuIsOpen) && css(["outline:2px solid ", ";"], Focused.Default), props => !is(props.disabled) && !is(props.invalid) && `
+})(["pointer-events:", ";padding:", " ", ";background:", ";cursor:default;border:1px solid ", ";z-index:0;border-radius:6px;outline-offset:-2px;", " ", " ", ""], props => is(props.disabled) ? 'none' : 'auto', Padding.xs, Padding.none, props => is(props.invalid) ? Surface.Critical.Subdued : Surface.Default.Default, props => is(props.invalid) ? Borders.Critical.Default : Borders.Default.Default, props => is(props.hasLabel) && css(["& div:first-of-type{align-self:flex-start;}"]), props => is(props.menuIsOpen) && css(["outline:2px solid ", ";"], Focused.Default), props => !is(props.disabled) && !is(props.invalid) && `
 
     &:focus  {
       outline: 2px solid ${Focused.Default}
@@ -8552,39 +8550,50 @@ const ValueContainer = /*#__PURE__*/styled.div.withConfig({
       outline: 2px solid ${Focused.Default}
     }
   `);
+const ValueWrapper$1 = /*#__PURE__*/styled(Flex).withConfig({
+  displayName: "value__ValueWrapper",
+  componentId: "sc-1aps7dx-1"
+})(["width:100%;display:", ";"], ({
+  label,
+  labelPosition
+}) => isDefined(label) && !isEmpty(label) && labelPosition === "top"
+/* labelPositionType.TOP */
+? 'block' : 'flex');
 const ValueLabel = /*#__PURE__*/styled(Label).withConfig({
   displayName: "value__ValueLabel",
-  componentId: "sc-1aps7dx-1"
-})(["margin-right:", ";", ""], Margin.xs, ({
+  componentId: "sc-1aps7dx-2"
+})(["padding-left:", ";width:fit-content;white-space:pre;", ""], Padding.xs, ({
   labelPosition
-}) => labelPosition !== 'side' && css(["flex-basis:100%;}"]));
-const ValueLeft = /*#__PURE__*/styled.div.withConfig({
+}) => labelPosition === "top"
+/* labelPositionType.TOP */
+&& css(["flex-basis:100%;"]));
+const ValueLeft = /*#__PURE__*/styled(Flex).withConfig({
   displayName: "value__ValueLeft",
-  componentId: "sc-1aps7dx-2"
-})(["display:flex;flex:1;align-items:center;flex-wrap:", ";user-select:none;min-width:0;min-height:20px;box-sizing:border-box;gap:", ";"], props => is(props.multi) && is(props.hasValue) ? 'wrap' : 'nowrap', props => is(props.multi) ? '4px' : 0);
-const ValueRight = /*#__PURE__*/styled.div.withConfig({
-  displayName: "value__ValueRight",
   componentId: "sc-1aps7dx-3"
-})(["display:flex;position:absolute;right:8px;align-items:center;margin-left:", ";box-sizing:border-box;"], Margin.xxs);
+})(["padding-left:", ";width:100%;flex-wrap:", ";user-select:none;min-width:0;min-height:20px;box-sizing:border-box;gap:", ";"], Padding.xs, props => is(props.multi) && is(props.hasValue) ? 'wrap' : 'nowrap', props => is(props.multi) ? '4px' : 0);
+const ValueRight = /*#__PURE__*/styled(Flex).withConfig({
+  displayName: "value__ValueRight",
+  componentId: "sc-1aps7dx-4"
+})(["padding-right:", ";pointer-events:none;"], Padding.xxs);
 const Placeholder = /*#__PURE__*/styled(Label).withConfig({
   displayName: "value__Placeholder",
-  componentId: "sc-1aps7dx-4"
-})(["pointer-events:none;color:", ";"], Text$1.Default);
+  componentId: "sc-1aps7dx-5"
+})(["pointer-events:none;color:", ";"], Text$1.Light);
 const ClearButton = /*#__PURE__*/styled(Button).attrs({
   plain: true,
   subtle: true
 }).withConfig({
   displayName: "value__ClearButton",
-  componentId: "sc-1aps7dx-5"
+  componentId: "sc-1aps7dx-6"
 })(["padding:", ";margin-right:", ";gap:0;&:focus{outline:none;}&:active{background-color:transparent;}"], Padding.none, Margin.none);
 const Search = /*#__PURE__*/styled.span.withConfig({
   displayName: "value__Search",
-  componentId: "sc-1aps7dx-6"
+  componentId: "sc-1aps7dx-7"
 })(["min-width:1px;margin-left:-1px;user-select:text;", " &:focus{outline:none;}"], props => is(props.canSearch) ? css(["opacity:1;position:relative;left:1px;"]) : css(["position:absolute;opacity:0;"]));
 const ErrorMessage = /*#__PURE__*/styled.div.withConfig({
   displayName: "value__ErrorMessage",
-  componentId: "sc-1aps7dx-7"
-})(["display:", ";flex-direction:'row';margin-bottom:", ";width:100%;& path{fill:", ";}"], props => is(props.visible) ? 'flex' : 'none', Margin.xxs, Icons.Warning);
+  componentId: "sc-1aps7dx-8"
+})(["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();
@@ -8605,7 +8614,9 @@ const Value = props => {
     errors,
     label,
     searchable,
-    labelPosition
+    labelPosition = "top"
+    /* labelPositionType.TOP */
+
   } = props;
   const valueOptions = getValueOptions(options, value, multi);
   const showClearer = is(clearable) && valueOptions.length > 0;
@@ -8656,7 +8667,7 @@ const Value = props => {
 
     if (valueOptions.length === 0 && isNil(search === null || search === void 0 ? void 0 : search.current)) {
       return jsx(Placeholder, {
-        children: placeholder
+        children: defaultTo(placeholder, DEFAULT_PLACEHOLDER)
       });
     }
 
@@ -8716,16 +8727,24 @@ const Value = props => {
       multi: true,
       menuIsOpen: open,
       tabIndex: 0,
-      onClick: onClick
+      onClick: onClick,
+      center: true
     }, {
-      children: [renderLabel(), jsxs(ValueLeft, Object.assign({
-        className: "value-left",
-        multi: multi,
-        hasValue: !(valueOptions.length === 0)
+      children: [jsxs(ValueWrapper$1, Object.assign({
+        label: label,
+        labelPosition: labelPosition
       }, {
-        children: [searchAtStart && renderSearch(), renderValues(), searchAtEnd && renderSearch()]
+        children: [renderLabel(), jsxs(ValueLeft, Object.assign({
+          className: "value-left",
+          multi: multi,
+          showClearer: showClearer,
+          hasValue: !(valueOptions.length === 0)
+        }, {
+          children: [searchAtStart && renderSearch(), renderValues(), searchAtEnd && renderSearch()]
+        }))]
       })), jsxs(ValueRight, Object.assign({
-        className: "value-right"
+        className: "value-right",
+        center: true
       }, {
         children: [showClearer && jsx(ClearButton, {
           tabIndex: -1,
@@ -8746,14 +8765,38 @@ const Value = props => {
 
 var Value$1 = /*#__PURE__*/memo(Value);
 
-const Container$1 = /*#__PURE__*/styled.div.withConfig({
-  displayName: "select__Container",
-  componentId: "iypjy6-0"
-})(["position:relative;cursor:default;width:100%;box-sizing:border-box;pointer-events:", ";opacity:", ";user-select:none;"], props => is(props.disabled) ? 'none' : 'auto', props => is(props.disabled) ? 0.75 : 1);
-const SelectImpl = (props, ref) => {
-  if (isNil(ref)) {
+/**
+ * @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;
+  width: 100%;
+  box-sizing: border-box;
+  pointer-events: ${(props: { disabled?: boolean }) =>
+    is(props.disabled) ? 'none' : 'auto'};
+  opacity: ${(props: { disabled?: boolean }) => (is(props.disabled) ? 0.75 : 1)};
+  user-select: none;
+`*/
+
+const ContainerStyles = ({
+  disabled
+}) => ({
+  position: 'relative',
+  cursor: 'default',
+  width: '100%',
+  boxSizing: 'border-box',
+  pointerEvents: is(disabled) ? 'none' : 'auto',
+  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
-    ref = useRef(null);
+    selectRef = useRef(null);
   }
 
   const [open, setOpen] = useState(false);
@@ -8774,6 +8817,7 @@ const SelectImpl = (props, ref) => {
     emptyText,
     rowHeight,
     menuHeight,
+    menuTitle,
     menuPosition,
     label,
     labelPosition
@@ -8788,18 +8832,16 @@ const SelectImpl = (props, ref) => {
       return;
     }
 
-    if (isDefined(ref) && typeof ref === 'object' && 'current' in ref) {
+    if (isDefined(selectRef) && typeof selectRef === 'object') {
       const {
         current
-      } = ref;
+      } = selectRef;
 
-      if (isDefined(current) && 'contains' in current && current.contains(target)) {
-        return;
+      if (isDefined(current) && !current.contains(target)) {
+        closeMenu(props.value);
       }
-
-      closeMenu(props.value);
     }
-  }, []);
+  }, [props.value]);
 
   function getOptions() {
     if (isDefined(search)) {
@@ -8977,10 +9019,21 @@ const SelectImpl = (props, ref) => {
   }
 
   const classNames = ['select', className, open && 'open', is(invalid) && 'has-error'].filter(c => Boolean(c));
-  return jsxs(Container$1, Object.assign({
+  /**
+  * @TODO this is a hack to be able to use the ref in react-web-client
+  * RWC uses styled-components < v4 and expects the ref to be passes as
+  * "innerRef" not just "ref", but product-language uses > v4 and wants
+  * to use ref. So for some components that need a ref, like this one
+  * 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: ContainerStyles({
+      disabled
+    }),
+    ref: selectRef,
     className: classNames.join(' '),
-    disabled: disabled,
-    ref: ref,
     onKeyUp: onKeyUp,
     onKeyDown: onKeyDown
   }, {
@@ -9020,14 +9073,102 @@ const SelectImpl = (props, ref) => {
       menuComponent: menuComponent,
       emptyText: emptyText,
       rowHeight: rowHeight,
+      menuTitle: menuTitle,
       menuHeight: menuHeight,
       menuPosition: menuPosition,
       onSelect: onOptionSelect
     })]
   }));
 };
+
 const Select = forwardRef(SelectImpl);
 
+const MenuListFrame = /*#__PURE__*/styled.div.withConfig({
+  displayName: "menu-list__MenuListFrame",
+  componentId: "sxh4rn-0"
+})(["border:1px solid ", ";background-color:", ";position:absolute;width:100%;width:-moz-available;width:-webkit-fill-available;max-height:184px;overflow-y:auto;overflow-x:hidden;::-webkit-scrollbar{width:6px;height:8px;}::-webkit-scrollbar-thumb{border-radius:4px;background:", ";min-height:50px;}", ";"], Borders.Default.Subdued, Surface.Default.Default, Surface.Neutral.Default, shadowMd);
+const MenuRow = /*#__PURE__*/styled(SpaceBetween).withConfig({
+  displayName: "menu-list__MenuRow",
+  componentId: "sxh4rn-1"
+})(["  border:none;text-align:left;padding:", ";margin:", " ", ";background-color:", ";border-radius:6px;i:first-child{align-self:start;margin-right:", ";}i:last-child{align-self:center;}&:first-of-type{margin-top:", ";}&:last-of-type{margin-bottom:", ";}&:hover{background-color:", ";}&:hover{background-color:", ";}&:active{background-color:", ";}"], Padding.s, Margin.none, Margin.xxs, props => is(props.active) ? Surface.Selected.Default : Surface.Default.Default, Margin.xs, Margin.xxs, Margin.xxs, Surface.Default.Hover, props => is(props.active) ? Surface.Selected.Hover : Surface.Default.Hover, props => is(props.active) ? Surface.Selected.Pressed : Surface.Default.Pressed);
+const OptionLabel = /*#__PURE__*/styled(Label).withConfig({
+  displayName: "menu-list__OptionLabel",
+  componentId: "sxh4rn-2"
+})(["cursor:pointer;"]);
+const CheckedIcon = /*#__PURE__*/styled(IconMinor.Check).withConfig({
+  displayName: "menu-list__CheckedIcon",
+  componentId: "sxh4rn-3"
+})(["svg{path{fill:", "}}"], Icons.Highlight);
+const ValueWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "menu-list__ValueWrapper",
+  componentId: "sxh4rn-4"
+})(["width:100%;"]);
+const TitleRow = /*#__PURE__*/styled(Heading4).withConfig({
+  displayName: "menu-list__TitleRow",
+  componentId: "sxh4rn-5"
+})(["height:30px;margin:", " ", ";border-bottom:1px solid ", ";padding:", " ", " ", " ", ";"], Margin.none, Margin.xxs, Borders.Default.Subdued, Padding.s, Padding.none, Padding.none, Padding.s);
+
+const Row = props => {
+  const {
+    index,
+    options = [],
+    handleClick
+  } = props;
+  const hasIcon = safeArray(options).some(option => isDefined(option['icon']));
+  const currentValue = Array.isArray(props.value) && is(props.multi) ? props.value : [props.value];
+  const option = options[index];
+  return jsxs(MenuRow, Object.assign({
+    className: "row",
+    center: true,
+    active: currentValue.some(val => equal(val, option.value)),
+    onClick: () => handleClick(option)
+  }, {
+    children: [maybeRender(hasIcon, option['icon']), jsxs(ValueWrapper, {
+      children: [jsx(OptionLabel, Object.assign({
+        hasIcon: hasIcon
+      }, {
+        children: option.label
+      })), maybeRender(option['helperText'], jsx(OptionLabel, Object.assign({
+        subdued: true,
+        hasIcon: hasIcon
+      }, {
+        children: option['helperText']
+      })))]
+    }), maybeRender(currentValue.some(val => equal(val, option.value)), jsx(CheckedIcon, {}))]
+  }));
+};
+
+const MenuList = props => {
+  // 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);
+  };
+  /**
+  * @TODO
+  * This doesnt work with the styled components that RWC uses, so I'll leave comented for now
+  *useEffect(() => {
+  *  if(is(open) && isDefined(list.current) && isDefined(selectedIndex)) {
+  *    list.current.scrollTo(0, selectedIndex * (defaultTo(rowHeight, DEFAULT_ROW_HEIGHT)+4))
+  *  }
+  *}, [open, list, selectedIndex, rowHeight])
+  */
+
+
+  return jsxs(MenuListFrame, Object.assign({
+    ref: list
+  }, {
+    children: [maybeRender(props.menuTitle, jsx(TitleRow, {
+      children: props.menuTitle
+    })), safeArray(props.options).map((_, index) => jsx(Row, Object.assign({
+      index: index,
+      handleClick: handleClick
+    }, props), index))]
+  }));
+};
+
 var apply = functionApply;
 var call = functionCall;
 var uncurryThis = functionUncurryThis;
@@ -9184,6 +9325,455 @@ fixRegExpWellKnownSymbolLogic('split', function (SPLIT, nativeSplit, maybeCallNa
   ];
 }, !SPLIT_WORKS_WITH_OVERWRITTEN_EXEC, UNSUPPORTED_Y);
 
+var CheckboxState;
+
+(function (CheckboxState) {
+  CheckboxState[CheckboxState["UNCHECKED"] = 0] = "UNCHECKED";
+  CheckboxState[CheckboxState["CHECKED"] = 1] = "CHECKED";
+  CheckboxState[CheckboxState["INDETERMINATE"] = 2] = "INDETERMINATE";
+})(CheckboxState || (CheckboxState = {}));
+
+const ListItem = /*#__PURE__*/styled.li.withConfig({
+  displayName: "tree-node__ListItem",
+  componentId: "sc-1wjf7p9-0"
+})(["& ol{margin-top:", ";}", ""], Margin.xs, ({
+  disabled
+}) => is(disabled) && css(["opacity:.75;cursor:not-allowed;"]));
+const ItemWrapper = /*#__PURE__*/styled(Flex).withConfig({
+  displayName: "tree-node__ItemWrapper",
+  componentId: "sc-1wjf7p9-1"
+})(["align-items:center;padding:", " ", ";gap:8px;flex:none;order:0;align-self:stretch;flex-grow:0;"], Padding.xxxs, Padding.none);
+const ClickableLabel = /*#__PURE__*/styled(Label).withConfig({
+  displayName: "tree-node__ClickableLabel",
+  componentId: "sc-1wjf7p9-2"
+})(["cursor:pointer;&:hover{background:", ";}&:focus{outline:0;background:", ";}"], Surface.Default.Default, Surface.Default.Default);
+const CollapseButton = /*#__PURE__*/styled(Button).withConfig({
+  displayName: "tree-node__CollapseButton",
+  componentId: "sc-1wjf7p9-3"
+})(["align-self:baseline;top:10px;border:0;cursor:pointer;padding:", ";gap:0;width:8px;margin-left:auto;right:8px;&:active{outline:none;}"], Padding.none);
+const InputWrapper = /*#__PURE__*/styled(Flex).withConfig({
+  displayName: "tree-node__InputWrapper",
+  componentId: "sc-1wjf7p9-4"
+})(["gap:8px;"]);
+const HelpfulMessage$1 = /*#__PURE__*/styled(Label).withConfig({
+  displayName: "tree-node__HelpfulMessage",
+  componentId: "sc-1wjf7p9-5"
+})(["margin-left:", ";user-select:none;"], Margin.xl);
+const TreeNode = props => {
+  const {
+    value,
+    label,
+    expanded
+  } = props;
+
+  const handleCheck = () => {
+    const {
+      onCheck
+    } = props;
+    onCheck({
+      label,
+      value,
+      checked: getCheckState({
+        toggle: true
+      })
+    });
+  };
+
+  const handleClick = () => {
+    const {
+      onClick,
+      isParent,
+      expandDisabled
+    } = props;
+
+    if (isParent && !expandDisabled) {
+      handleOnExpand();
+    }
+
+    onClick({
+      label,
+      value,
+      checked: getCheckState({
+        toggle: false
+      })
+    });
+  };
+
+  const handleOnExpand = () => {
+    const {
+      onExpand
+    } = props;
+    onExpand({
+      value,
+      label,
+      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,
+      isParent
+    } = props;
+    return maybeRender(isParent, jsx(CollapseButton, {
+      subtle: true,
+      disabled: expandDisabled,
+      onClick: handleOnExpand,
+      IconSuffix: expanded ? IconMinor.ChevronUpSolid : IconMinor.ChevronDownSolid
+    }));
+  };
+
+  const renderCheckboxLabel = () => {
+    const {
+      checkState,
+      disabled,
+      treeId,
+      childCount,
+      isParent,
+      invalid,
+      showChildCount,
+      helpfulMessage
+    } = props;
+    const inputId = `${treeId}-${String(value).split(' ').join('_')}`;
+    const displayText = showChildCount && isParent ? `${label} (${childCount})` : label;
+    return jsxs(React.Fragment, {
+      children: [jsxs("div", {
+        children: [jsxs(InputWrapper, Object.assign({
+          center: true
+        }, {
+          children: [jsx(Checkbox, {
+            checked: checkState === CheckboxState.CHECKED,
+            indeterminate: checkState === CheckboxState.INDETERMINATE,
+            disabled: disabled,
+            error: invalid,
+            id: `input-${inputId}`,
+            onClick: handleCheck,
+            onChange: () => void 0
+          }), jsx(ClickableLabel, Object.assign({
+            onClick: handleClick,
+            role: "link",
+            tabIndex: 0
+          }, {
+            children: displayText
+          }), 1)]
+        })), maybeRender(helpfulMessage, jsx(HelpfulMessage$1, Object.assign({
+          subdued: true,
+          id: `error-${inputId}`
+        }, {
+          children: helpfulMessage
+        })))]
+      }), renderCollapseButton()]
+    });
+  };
+
+  const {
+    disabled
+  } = props;
+  return jsxs(ListItem, Object.assign({
+    role: "treeitem",
+    disabled: disabled
+  }, {
+    children: [jsx(ItemWrapper, Object.assign({
+      center: true
+    }, {
+      children: renderCheckboxLabel()
+    })), expanded && props.children]
+  }));
+};
+
+const flattenNodes = (flattenList, nodes, parent, depth = 0) => {
+  safeArray(nodes).forEach((node, index) => {
+    const isParent = nodeHasChildren(node);
+    flattenList.push({
+      label: node.label,
+      value: node.value,
+      children: node.children,
+      parent,
+      isChild: isDefined(parent) && isDefined(parent.value),
+      isParent,
+      isLeaf: !isParent,
+      disabled: getDisabledState(node, parent),
+      treeDepth: depth,
+      index,
+      checked: false,
+      checkState: 0,
+      expanded: false
+    });
+    flattenNodes(flattenList, safeArray(node.children), node, depth + 1);
+  });
+};
+const getNode = (nodes, value) => {
+  return nodes.find(node => node.value === value);
+};
+
+const nodeHasChildren = node => {
+  return isDefined(node.children) && Array.isArray(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 => {
+    if (key === 'expanded') {
+      if (node.expanded) {
+        list.push(node.value);
+      }
+    }
+
+    if (key === 'checked') {
+      if (node.checked) {
+        list.push(node.value);
+      }
+    }
+  });
+  return list;
+};
+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);
+    });
+  }
+};
+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;
+  });
+};
+
+const ParentNode = /*#__PURE__*/styled.ol.withConfig({
+  displayName: "tree-view__ParentNode",
+  componentId: "sc-4bkb59-0"
+})(["display:flex;flex-direction:column;gap:8px;margin:", ";padding-left:", ";list-style-type:none;& ol{padding-left:", ";}"], Margin.none, Padding.none, Padding.l);
+const Container$1 = /*#__PURE__*/styled.div.withConfig({
+  displayName: "tree-view__Container",
+  componentId: "sc-4bkb59-1"
+})(["display:block;margin:", ";padding:", ";"], Margin.none, Padding.none);
+const TreeView = props => {
+  const {
+    checkedList = [],
+    expanded = [],
+    title,
+    nodes,
+    className,
+    showChildCount = false
+  } = props;
+  const [expandedList, setExpandedList] = useState(expanded);
+  const treeId = new Date().getTime().toString();
+  const flattenNodeList = useMemo(() => {
+    const _nodeList = [];
+    flattenNodes(_nodeList, nodes);
+    deserializeList(_nodeList, {
+      checked: checkedList,
+      expanded: expandedList
+    });
+    return _nodeList;
+  }, [nodes]);
+
+  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),
+        expandDisabled: expandDisabled,
+        expanded: is(flatNode === null || flatNode === void 0 ? void 0 : flatNode.expanded),
+        label: node.label,
+        isLeaf: is(flatNode === null || flatNode === void 0 ? void 0 : flatNode.isLeaf),
+        isParent: is(flatNode === null || flatNode === void 0 ? void 0 : flatNode.isParent),
+        treeId: treeId,
+        invalid: defaultTo(node.invalid, false),
+        value: node.value,
+        showChildCount: showChildCount,
+        childCount: defaultTo((_b = flatNode === null || flatNode === void 0 ? void 0 : flatNode.children) === null || _b === void 0 ? void 0 : _b.length, 0),
+        helpfulMessage: node.helpfulMessage,
+        onClick: onNodeClick,
+        onCheck: handleOnCheck,
+        onExpand: handleOnExpand
+      }, {
+        children: children
+      }), node.value);
+    });
+    return jsx(ParentNode, Object.assign({
+      role: "tree",
+      className: 'tree-view'
+    }, {
+      children: treeNodes
+    }));
+  };
+
+  return maybeRender(!isEmpty(nodes), jsx(Card, Object.assign({
+    heading: title
+  }, {
+    children: jsx(Card.Section, {
+      children: jsx(Container$1, Object.assign({
+        className: className,
+        id: treeId
+      }, {
+        children: renderTreeNodes(nodes)
+      }))
+    })
+  })));
+};
+
 // this file was generated, but it is safe to modify
 
 function toAvatarSize(n) {
@@ -9318,7 +9908,6 @@ const Wrapper = /*#__PURE__*/styled.label.withConfig({
 })(["display:flex;width:100%;align-items:center;"]);
 const InputCheckbox = props => {
   const {
-    onChange,
     label = ''
   } = props;
 
@@ -9328,11 +9917,6 @@ const InputCheckbox = props => {
 
   return jsxs(Wrapper, {
     children: [jsx(Checkbox, Object.assign({}, props, {
-      onChange: e => {
-        if (isDefined(onChange)) {
-          onChange(e.target.checked);
-        }
-      },
       name: isDefined(props.name) ? props.name : label
     })), jsx(Text, {
       children: label
@@ -9373,4 +9957,4 @@ const MultiChoiceList = props => {
   }));
 };
 
-export { Actions, AlertBanner, Avatar, BODY, BODY_LARGE, Background, Badge, Body, BodyLarge, Borders, Button, CAPTION, Caption, Card, Center, Checkbox, Display, Divider, Flag, Flex, Focused, HTMLAnchor, HTMLInput, Heading1, Heading2, Heading3, Heading4, Icon, IconMinor, Icons, InputCheckbox, InputField, InputNumber, InputText, Interactive, LABEL, Label, LeftRightCard, Link, Margin, MultiChoiceList, Padding, Select, SelectImpl, SpaceAround, SpaceBetween, Spinner, Surface, Tab$1 as Tab, Tabs, Tag, Text$1 as Text, Thumbnail, Typography, _Typography, gridLayoutGenerator, leftRightLayoutGenerator, shadow, shadow2Xl, shadowInner, shadowLg, shadowMd, shadowSm, shadowXl };
+export { Actions, AlertBanner, Avatar, BODY, BODY_LARGE, Background, Badge, Body, BodyLarge, Borders, Button, CAPTION, Caption, Card, Center, Checkbox, Display, Divider, Flag, Flex, Focused, HTMLAnchor, HTMLInput, Heading1, Heading2, Heading3, Heading4, Icon, IconMinor, Icons, InputCheckbox, InputField, InputNumber, InputText, Interactive, LABEL, Label, LeftRightCard, Link, Margin, MenuList, MultiChoiceList, Padding, Select, SpaceAround, SpaceBetween, Spinner, Surface, Tab$1 as Tab, Tabs, Tag, Text$1 as Text, Thumbnail, TreeView, Typography, _Typography, gridLayoutGenerator, leftRightLayoutGenerator, shadow, shadow2Xl, shadowInner, shadowLg, shadowMd, shadowSm, shadowXl };