@equinor/roma-framework 6.0.1-beta.0 → 6.0.1-beta.1

package/dev-portal/roma-framework.umd.js

@@ -85940,11 +85940,11 @@ attempted value: ${formattedValue}
   "production" !== process.env.NODE_ENV && "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");
   var mt = "__sc-".concat(a$1, "__");
   "production" !== process.env.NODE_ENV && "test" !== process.env.NODE_ENV && "undefined" != typeof window && (window[mt] || (window[mt] = 0), 1 === window[mt] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page for more info."), window[mt] += 1);
-  var clickbounds = {
+  const clickbounds = {
     default__base: "48px",
     compact__standard: "32px"
   };
-  var colors$2 = {
+  const colors$2 = {
     text: {
       static_icons__default: {
         rgba: "var(--eds_text__static_icons__default, rgba(61, 61, 61, 1))"
@@ -86039,7 +86039,7 @@ attempted value: ${formattedValue}
       }
     }
   };
-  var elevation$1 = {
+  const elevation$1 = {
     raised: "0 1px 5px rgba(0, 0, 0, 0.2),0 3px 4px rgba(0, 0, 0, 0.12),0 2px 4px rgba(0, 0, 0, 0.14)",
     none: "0 0 1px rgba(0, 0, 0, 0.14)",
     overlay: "0 1px 10px rgba(0, 0, 0, 0.2),0 4px 5px rgba(0, 0, 0, 0.12),0 2px 4px rgba(0, 0, 0, 0.14)",
@@ -86047,13 +86047,13 @@ attempted value: ${formattedValue}
     temporary_nav: "0 7px 8px rgba(0, 0, 0, 0.2),0 5px 22px rgba(0, 0, 0, 0.12),0 12px 17px rgba(0, 0, 0, 0.14)",
     above_scrim: "0 11px 15px rgba(0, 0, 0, 0.2),0 9px 46px rgba(0, 0, 0, 0.12),0 24px 38px rgba(0, 0, 0, 0.14)"
   };
-  var interactions = {
+  const interactions = {
     focused: {
       color: "rgba(0, 112, 121, 1)",
       width: "2px"
     }
   };
-  var shape$2 = {
+  const shape$2 = {
     _modes: {
       compact: {
         button: {
@@ -86080,7 +86080,7 @@ attempted value: ${formattedValue}
       minWidth: "40px"
     }
   };
-  var typography$6 = {
+  const typography$6 = {
     heading: {
       h1_bold: {
         color: "var(--eds_heading__h1_bold_color, rgba(61, 61, 61, 1))",
@@ -86516,7 +86516,7 @@ attempted value: ${formattedValue}
       }
     }
   };
-  var spacings$6 = {
+  const spacings$6 = {
     comfortable: {
       large: "24px",
       medium: "16px",
@@ -86525,7 +86525,7 @@ attempted value: ${formattedValue}
       xx_small: "2px"
     }
   };
-  var tokens$1 = {
+  const tokens$1 = {
     clickbounds,
     colors: colors$2,
     elevation: elevation$1,
@@ -87225,6 +87225,135 @@ attempted value: ${formattedValue}
       contained_icon: danger$2
     }
   };
+  const shorthand = (token2) => {
+    if (!token2) {
+      return void 0;
+    }
+    const {
+      width = "",
+      style: style2 = "",
+      color = ""
+    } = token2;
+    if (!width) {
+      return null;
+    }
+    return `${width} ${style2} ${color}`;
+  };
+  const bordersTemplate = (border2) => {
+    if (!border2) {
+      return st({});
+    }
+    switch (border2.type) {
+      case "border":
+        return st({
+          border: shorthand(border2),
+          borderRadius: border2.radius
+        });
+      case "bordergroup":
+        return st({
+          borderBottom: shorthand(border2.bottom),
+          borderTop: shorthand(border2.top),
+          borderLeft: shorthand(border2.left),
+          borderRight: shorthand(border2.right),
+          borderBottomLeftRadius: border2?.left?.radius,
+          borderTopLeftRadius: border2?.left?.radius,
+          borderBottomRightRadius: border2?.right?.radius,
+          borderTopRightRadius: border2?.right?.radius
+        });
+      default:
+        return st({});
+    }
+  };
+  const typographyTemplate = (typography2, link2) => {
+    if (!typography2) {
+      return "";
+    }
+    let base = `
+  margin: 0;
+  color: ${typography2.color};
+  font-family: ${typography2.fontFamily};
+  font-size: ${typography2.fontSize};
+  font-weight: ${typography2.fontWeight};
+  line-height: ${typography2.lineHeight};
+  `;
+    if (typography2.fontStyle) {
+      base += `
+font-style: ${typography2.fontStyle};`;
+    }
+    if (typography2.letterSpacing) {
+      base += `
+letter-spacing: ${typography2.letterSpacing};`;
+    }
+    if (typography2.textTransform) {
+      base += `
+text-transform: ${typography2.textTransform};`;
+    }
+    if (typography2.textDecoration) {
+      base += `
+text-decoration: ${typography2.textDecoration};`;
+    }
+    if (typography2.textAlign) {
+      base += `
+text-align: ${typography2.textAlign};`;
+    }
+    if (typography2.fontFeature) {
+      base += `
+font-feature-settings: ${typography2.fontFeature};`;
+    }
+    if (link2) {
+      base += `
+cursor: pointer;`;
+    }
+    return base;
+  };
+  const spacingsTemplate = ({
+    left,
+    right,
+    top,
+    bottom
+  }) => st({
+    paddingLeft: left,
+    paddingTop: top,
+    paddingRight: right,
+    paddingBottom: bottom
+  });
+  const mergeRefs$2 = (...refs) => {
+    return (element) => refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(element);
+      } else if (ref && typeof ref === "object") {
+        ref.current = element;
+      }
+    });
+  };
+  const {
+    colors: {
+      interactive: {
+        focus: {
+          rgba: focusColor$2
+        }
+      }
+    }
+  } = tokens$1;
+  const outlineTemplate = (outline2) => {
+    const {
+      color = focusColor$2,
+      style: style2 = "dashed",
+      width = "2px",
+      offset: offset3 = "0px",
+      type
+    } = outline2;
+    const outline_ = {
+      color,
+      style: style2,
+      width,
+      offset: offset3
+    };
+    return st({
+      outline: shorthand(outline_),
+      outlineOffset: outline_.offset
+    });
+  };
   const useGlobalKeyPress = (targetKey, callback) => {
     reactExports.useEffect(() => {
       const handleGlobalKeyPress = (e2) => {
@@ -87243,17 +87372,6 @@ attempted value: ${formattedValue}
       };
     }, [targetKey, callback]);
   };
-  let counter$1 = 0;
-  const useId$1 = (idOverride, type) => {
-    const [defaultId, setDefaultId] = reactExports.useState(idOverride);
-    const id2 = idOverride || defaultId;
-    reactExports.useEffect(() => {
-      if (defaultId == null) {
-        setDefaultId(`eds-${type ? type + `-` : ""}${counter$1++}`);
-      }
-    }, [defaultId, type]);
-    return id2;
-  };
   const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? reactExports.useLayoutEffect : reactExports.useEffect;
   function _isPlaceholder(a2) {
     return a2 != null && typeof a2 === "object" && a2["@@functional/placeholder"] === true;
@@ -87365,135 +87483,6 @@ attempted value: ${formattedValue}
     }
     return token2;
   }, [options, token2]);
-  const mergeRefs$2 = (...refs) => {
-    return (element) => refs.forEach((ref) => {
-      if (typeof ref === "function") {
-        ref(element);
-      } else if (ref && typeof ref === "object") {
-        ref.current = element;
-      }
-    });
-  };
-  const shorthand = (token2) => {
-    if (!token2) {
-      return void 0;
-    }
-    const {
-      width = "",
-      style: style2 = "",
-      color = ""
-    } = token2;
-    if (!width) {
-      return null;
-    }
-    return `${width} ${style2} ${color}`;
-  };
-  const bordersTemplate = (border2) => {
-    if (!border2) {
-      return st({});
-    }
-    switch (border2.type) {
-      case "border":
-        return st({
-          border: shorthand(border2),
-          borderRadius: border2.radius
-        });
-      case "bordergroup":
-        return st({
-          borderBottom: shorthand(border2.bottom),
-          borderTop: shorthand(border2.top),
-          borderLeft: shorthand(border2.left),
-          borderRight: shorthand(border2.right),
-          borderBottomLeftRadius: border2?.left?.radius,
-          borderTopLeftRadius: border2?.left?.radius,
-          borderBottomRightRadius: border2?.right?.radius,
-          borderTopRightRadius: border2?.right?.radius
-        });
-      default:
-        return st({});
-    }
-  };
-  const {
-    colors: {
-      interactive: {
-        focus: {
-          rgba: focusColor$2
-        }
-      }
-    }
-  } = tokens$1;
-  const outlineTemplate = (outline2) => {
-    const {
-      color = focusColor$2,
-      style: style2 = "dashed",
-      width = "2px",
-      offset: offset3 = "0px",
-      type
-    } = outline2;
-    const outline_ = {
-      color,
-      style: style2,
-      width,
-      offset: offset3
-    };
-    return st({
-      outline: shorthand(outline_),
-      outlineOffset: outline_.offset
-    });
-  };
-  const typographyTemplate = (typography2, link2) => {
-    if (!typography2) {
-      return "";
-    }
-    let base = `
-  margin: 0;
-  color: ${typography2.color};
-  font-family: ${typography2.fontFamily};
-  font-size: ${typography2.fontSize};
-  font-weight: ${typography2.fontWeight};
-  line-height: ${typography2.lineHeight};
-  `;
-    if (typography2.fontStyle) {
-      base += `
-font-style: ${typography2.fontStyle};`;
-    }
-    if (typography2.letterSpacing) {
-      base += `
-letter-spacing: ${typography2.letterSpacing};`;
-    }
-    if (typography2.textTransform) {
-      base += `
-text-transform: ${typography2.textTransform};`;
-    }
-    if (typography2.textDecoration) {
-      base += `
-text-decoration: ${typography2.textDecoration};`;
-    }
-    if (typography2.textAlign) {
-      base += `
-text-align: ${typography2.textAlign};`;
-    }
-    if (typography2.fontFeature) {
-      base += `
-font-feature-settings: ${typography2.fontFeature};`;
-    }
-    if (link2) {
-      base += `
-cursor: pointer;`;
-    }
-    return base;
-  };
-  const spacingsTemplate = ({
-    left,
-    right,
-    top,
-    bottom
-  }) => st({
-    paddingLeft: left,
-    paddingTop: top,
-    paddingRight: right,
-    paddingBottom: bottom
-  });
   const FullWidthCenterContent = ct.span.withConfig({
     displayName: "InnerFullWidth__FullWidthCenterContent",
     componentId: "sc-qeawkb-0"
@@ -90735,6 +90724,7 @@ cursor: pointer;`;
     children: children2,
     style: style2,
     enterDelay = 100,
+    disabled: disabled2 = false,
     portalContainer,
     ...rest
   }, ref) {
@@ -90769,7 +90759,7 @@ cursor: pointer;`;
       })],
       whileElementsMounted: autoUpdate$1
     });
-    const anchorRef = reactExports.useMemo(() => mergeRefs$2(refs.setReference, children2?.ref), [refs.setReference, children2?.ref]);
+    const mergedAnchorRef = reactExports.useMemo(() => mergeRefs$2(refs.setReference), [refs.setReference]);
     const tooltipRef = reactExports.useMemo(() => mergeRefs$2(refs.setFloating, ref), [refs.setFloating, ref]);
     const {
       getReferenceProps,
@@ -90814,12 +90804,18 @@ cursor: pointer;`;
         });
       }
     });
-    const updatedChildren = /* @__PURE__ */ reactExports.cloneElement(children2, {
-      ...getReferenceProps({
-        ref: anchorRef,
-        ...children2.props
-      })
-    });
+    const updatedChildren = /* @__PURE__ */ reactExports.cloneElement(
+      children2,
+      // eslint-disable-line @typescript-eslint/no-explicit-any
+      {
+        ...getReferenceProps(children2.props),
+        ref: mergeRefs$2(
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+          children2.props.ref,
+          mergedAnchorRef
+        )
+      }
+    );
     reactExports.useEffect(() => {
       if (!elements.floating) return;
       if (elements.floating.isConnected && shouldOpen && open) {
@@ -90850,7 +90846,7 @@ cursor: pointer;`;
       })]
     });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-      children: [shouldOpen && open && /* @__PURE__ */ reactDomExports.createPortal(TooltipEl, portalContainer ?? rootElement ?? document.body), updatedChildren]
+      children: [updatedChildren, shouldOpen && open && !disabled2 && /* @__PURE__ */ reactDomExports.createPortal(TooltipEl, portalContainer ?? rootElement ?? document.body)]
     });
   });
   const ToggleButton = /* @__PURE__ */ reactExports.forwardRef(function ToggleButton2({
@@ -90983,7 +90979,7 @@ cursor: pointer;`;
       $height: icon2.height ? parseInt(icon2.height) : size3,
       $size: size3 || parseInt(icon2.height)
     };
-    const titleId = useId$1(null, `${icon2.prefix}-${icon2.name}`);
+    const titleId = reactExports.useId();
     if (title) {
       svgProps = {
         ...svgProps,
@@ -91069,16 +91065,7 @@ cursor: pointer;`;
     prefix: "eds",
     height: "24",
     width: "24",
-    svgPathData: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",
-    sizes: {
-      small: {
-        name: "close_small",
-        prefix: "eds",
-        height: "18",
-        width: "18",
-        svgPathData: "M14 5.007 12.993 4 9 7.993 5.007 4 4 5.007 7.993 9 4 12.993 5.007 14 9 10.007 12.993 14 14 12.993 10.007 9z"
-      }
-    }
+    svgPathData: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
   };
   const account_circle = {
     name: "account_circle",
@@ -91120,48 +91107,21 @@ cursor: pointer;`;
     prefix: "eds",
     height: "24",
     width: "24",
-    svgPathData: "m7.41 8.295 4.59 4.58 4.59-4.58L18 9.705l-6 6-6-6z",
-    sizes: {
-      small: {
-        name: "chevron_down_small",
-        prefix: "eds",
-        height: "18",
-        width: "18",
-        svgPathData: "M5.175 6 9 9.709 12.825 6 14 7.142 9 12 4 7.142z"
-      }
-    }
+    svgPathData: "m7.41 8.295 4.59 4.58 4.59-4.58L18 9.705l-6 6-6-6z"
   };
   const chevron_up = {
     name: "chevron_up",
     prefix: "eds",
     height: "24",
     width: "24",
-    svgPathData: "m7.41 15.705 4.59-4.58 4.59 4.58 1.41-1.41-6-6-6 6z",
-    sizes: {
-      small: {
-        name: "chevron_up_small",
-        prefix: "eds",
-        height: "18",
-        width: "18",
-        svgPathData: "m5.174 12.002 3.825-3.709 3.825 3.709 1.175-1.142-5-4.859-5 4.859z"
-      }
-    }
+    svgPathData: "m7.41 15.705 4.59-4.58 4.59 4.58 1.41-1.41-6-6-6 6z"
   };
   const arrow_drop_down = {
     name: "arrow_drop_down",
     prefix: "eds",
     height: "24",
     width: "24",
-    svgPathData: "m7 9.5 5 5 5-5z",
-    sizes: {
-      small: {
-        name: "arrow_drop_down_small",
-        prefix: "eds",
-        height: "18",
-        width: "18",
-        svgPathData: "m4 6.5 5 5 5-5z"
-      }
-    }
+    svgPathData: "m7 9.5 5 5 5-5z"
   };
   const collapse = {
     name: "collapse",
@@ -91175,16 +91135,7 @@ cursor: pointer;`;
     prefix: "eds",
     height: "24",
     width: "24",
-    svgPathData: "M14 4c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2m-2 3c2.83 0 5.89-.3 8.5-1l.5 2c-1.86.5-4 .83-6 1v13h-2v-6h-2v6H9V9c-2-.17-4.14-.5-6-1l.5-2c2.61.7 5.67 1 8.5 1",
-    sizes: {
-      small: {
-        name: "accessible_small",
-        prefix: "eds",
-        height: "18",
-        width: "18",
-        svgPathData: "M10.5 3c0 .825-.675 1.5-1.5 1.5S7.5 3.825 7.5 3 8.175 1.5 9 1.5s1.5.675 1.5 1.5M9 5.25c2.123 0 4.418-.225 6.375-.75L15.75 6c-1.395.375-3 .622-4.5.75v9.75h-1.5V12h-1.5v4.5h-1.5V6.75c-1.5-.128-3.105-.375-4.5-.75l.375-1.5c1.957.525 4.253.75 6.375.75"
-      }
-    }
+    svgPathData: "M14 4c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2m-2 3c2.83 0 5.89-.3 8.5-1l.5 2c-1.86.5-4 .83-6 1v13h-2v-6h-2v6H9V9c-2-.17-4.14-.5-6-1l.5-2c2.61.7 5.67 1 8.5 1"
   };
   const {
     colors: {
@@ -93049,7 +93000,8 @@ cursor: pointer;`;
     disabled: disabled2,
     ...rest
   }, ref) {
-    const accordionId = useId$1(id2, "accordion");
+    const generatedAccordionId = reactExports.useId();
+    const accordionId = id2 ?? generatedAccordionId;
     const [menuIsOpen, setMenuIsOpen] = reactExports.useState(false);
     const [accordionIsOpen, setAccordionIsOpen] = reactExports.useState(isExpanded);
     const [anchorEl, setAnchorEl] = reactExports.useState(null);
@@ -93164,10 +93116,9 @@ cursor: pointer;`;
         onClose: closeMenu,
         anchorEl,
         children: reactExports.Children.map(children2, (child) => {
-          const item = child;
           return /* @__PURE__ */ jsxRuntimeExports.jsx(Menu$1.Item, {
             ...child.props,
-            children: item.props.label
+            children: child.props.label
           });
         })
       })]
@@ -93263,104 +93214,6 @@ cursor: pointer;`;
   SideBar.Button.displayName = "SideBar.Button";
   SideBar.Accordion.displayName = "SideBar.Accordion";
   SideBar.AccordionItem.displayName = "SideBar.AccordionItem";
-  const {
-    colors: {
-      ui: {
-        background__default: {
-          rgba: background$2
-        },
-        background__light: {
-          rgba: borderColor
-        }
-      }
-    },
-    spacings: {
-      comfortable: {
-        xx_small: spacingXXS,
-        medium: spacingMedium
-      }
-    },
-    typography: {
-      paragraph: {
-        body_short
-      }
-    }
-  } = tokens$1;
-  const comfortable = {
-    background: background$2,
-    spacings: {
-      left: "14px",
-      // padding left is 14px, because of border-left 'steals' 2px of the padding
-      right: spacingMedium,
-      top: spacingMedium
-    },
-    border: {
-      type: "bordergroup",
-      left: {
-        color: borderColor,
-        width: spacingXXS,
-        style: "solid"
-      }
-    },
-    typography: {
-      ...body_short
-    }
-  };
-  const variants = {
-    small: "240px",
-    medium: "320px",
-    large: "480px",
-    xlarge: "640px"
-  };
-  const {
-    background: background$1,
-    spacings: spacings$1,
-    border: border$1,
-    typography: typography$1
-  } = comfortable;
-  const StyledSideSheet$1 = ct.div.withConfig({
-    displayName: "SideSheet__StyledSideSheet",
-    componentId: "sc-wkzlnn-0"
-  })(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background$1, ({
-    width
-  }) => width, bordersTemplate(border$1), spacingsTemplate(spacings$1), typographyTemplate(typography$1));
-  const Header$1 = ct.div.withConfig({
-    displayName: "SideSheet__Header",
-    componentId: "sc-wkzlnn-1"
-  })(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;& > button{margin-left:auto;flex-shrink:0;}"]);
-  const SideSheet = /* @__PURE__ */ reactExports.forwardRef(function SideSheet2({
-    variant = "medium",
-    width,
-    title,
-    children: children2,
-    open,
-    onClose,
-    ...rest
-  }, ref) {
-    const props = {
-      ...rest,
-      ref,
-      width: width || variants[variant]
-    };
-    return open && /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledSideSheet$1, {
-      ...props,
-      children: [(title || onClose) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$1, {
-        children: [title && /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, {
-          variant: "h2",
-          children: title
-        }), onClose && /* @__PURE__ */ jsxRuntimeExports.jsx(Button$2, {
-          variant: "ghost_icon",
-          onClick: onClose,
-          title: "Close",
-          "aria-label": "Close sidesheet",
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1, {
-            name: "clear",
-            data: clear
-          })
-        })]
-      }), children2]
-    });
-  });
   const {
     spacings: {
       comfortable: {
@@ -93540,11 +93393,11 @@ cursor: pointer;`;
     error
   } = Chip_tokens;
   const {
-    background,
+    background: background$2,
     height,
-    typography,
-    spacings,
-    border,
+    typography: typography$1,
+    spacings: spacings$1,
+    border: border$1,
     states
   } = enabled;
   const StyledChips = ct.div.attrs(({
@@ -93556,7 +93409,7 @@ cursor: pointer;`;
   })).withConfig({
     displayName: "Chip__StyledChips",
     componentId: "sc-wzsllq-0"
-  })(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background, height, typography.color, outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography), ({
+  })(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$2, height, typography$1.color, outlineTemplate(states.focus.outline), outlineTemplate(states.focus.outline), bordersTemplate(border$1), spacingsTemplate(spacings$1), typographyTemplate(typography$1), ({
     $clickable
   }) => $clickable && st(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;color:", ";svg{fill:", ";}}}"], states.hover.typography.color, states.hover.typography.color), ({
     $variant,
@@ -93572,7 +93425,7 @@ cursor: pointer;`;
     }
   }, ({
     $disabled
-  }) => $disabled && st(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color), ({
+  }) => $disabled && st(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background$2, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color, states.disabled.typography.color), ({
     $deletable
   }) => $deletable && st(["padding-right:4px;"]), ({
     $onlyChild
@@ -93613,7 +93466,7 @@ cursor: pointer;`;
       }
     };
     const resizedChildren = reactExports.Children.map(children2, (child) => {
-      if (child.props) {
+      if (child?.props) {
         return /* @__PURE__ */ reactExports.cloneElement(child, {
           size: 16,
           disabled: disabled2
@@ -93641,6 +93494,104 @@ cursor: pointer;`;
       })]
     });
   });
+  const {
+    colors: {
+      ui: {
+        background__default: {
+          rgba: background$1
+        },
+        background__light: {
+          rgba: borderColor
+        }
+      }
+    },
+    spacings: {
+      comfortable: {
+        xx_small: spacingXXS,
+        medium: spacingMedium
+      }
+    },
+    typography: {
+      paragraph: {
+        body_short
+      }
+    }
+  } = tokens$1;
+  const comfortable = {
+    background: background$1,
+    spacings: {
+      left: "14px",
+      // padding left is 14px, because of border-left 'steals' 2px of the padding
+      right: spacingMedium,
+      top: spacingMedium
+    },
+    border: {
+      type: "bordergroup",
+      left: {
+        color: borderColor,
+        width: spacingXXS,
+        style: "solid"
+      }
+    },
+    typography: {
+      ...body_short
+    }
+  };
+  const variants = {
+    small: "240px",
+    medium: "320px",
+    large: "480px",
+    xlarge: "640px"
+  };
+  const {
+    background,
+    spacings,
+    border,
+    typography
+  } = comfortable;
+  const StyledSideSheet$1 = ct.div.withConfig({
+    displayName: "SideSheet__StyledSideSheet",
+    componentId: "sc-wkzlnn-0"
+  })(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background, ({
+    width
+  }) => width, bordersTemplate(border), spacingsTemplate(spacings), typographyTemplate(typography));
+  const Header$1 = ct.div.withConfig({
+    displayName: "SideSheet__Header",
+    componentId: "sc-wkzlnn-1"
+  })(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;& > button{margin-left:auto;flex-shrink:0;}"]);
+  const SideSheet = /* @__PURE__ */ reactExports.forwardRef(function SideSheet2({
+    variant = "medium",
+    width,
+    title,
+    children: children2,
+    open,
+    onClose,
+    ...rest
+  }, ref) {
+    const props = {
+      ...rest,
+      ref,
+      width: width || variants[variant]
+    };
+    return open && /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledSideSheet$1, {
+      ...props,
+      children: [(title || onClose) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$1, {
+        children: [title && /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, {
+          variant: "h2",
+          children: title
+        }), onClose && /* @__PURE__ */ jsxRuntimeExports.jsx(Button$2, {
+          variant: "ghost_icon",
+          onClick: onClose,
+          title: "Close",
+          "aria-label": "Close sidesheet",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon$1, {
+            name: "clear",
+            data: clear
+          })
+        })]
+      }), children2]
+    });
+  });
   class CustomAppClient {
     constructor(client2, graphClient) {
       this.client = client2;