@loomhq/lens 12.19.0 → 12.20.3

package/dist/esm/index.js

@@ -74,7 +74,7 @@ var hslaBaseColors = {
   magenta: { h: 323, s: 42, l: 48, a: 1 },
   magentaDark: { h: 324, s: 37, l: 23, a: 1 },
   orangeLight: { h: 4, s: 100, l: 91.2, a: 1 },
-  orange: { h: 11, s: 100, l: 62.2, a: 1 },
+  orange: { h: 11.2, s: 100, l: 58, a: 1 },
   orangeDark: { h: 10.9, s: 100, l: 42.2, a: 1 },
   purpleLight: { h: 277.3, s: 86.05, l: 91.57, a: 1 },
   purple: { h: 278.33, s: 85.71, l: 67.06, a: 1 },
@@ -122,7 +122,7 @@ var themeSharedColors = {
   recordActive: darken(hslaBaseColors.orange, activeIncrease),
   backdropDark: alphaFunction(hslaGreys.grey8, backdropDarkAlpha),
   backdropTwilight: alphaFunction(
-    hslaBaseColors.blurpleStrong,
+    hslaBaseColors.blueDark,
     backdropTwilightAlpha
   ),
   highlight: alphaFunction(hslaBaseColors.blurple, highlightAlpha),
@@ -142,7 +142,7 @@ var themeColors = {
     primaryHover: __spreadProps(__spreadValues({}, hslaBaseColors.blurpleDark), {
       ads: "--ds-background-brand-bold-hovered"
     }),
-    primaryActive: __spreadProps(__spreadValues({}, hslaBaseColors.blurpleStrong), {
+    primaryActive: __spreadProps(__spreadValues({}, hslaBaseColors.blueDark), {
       ads: "--ds-background-brand-bold-pressed"
     }),
     body: { h: 228, s: 6, l: 17, a: 1, ads: "--ds-text" },
@@ -170,13 +170,6 @@ var themeColors = {
       a: 1,
       ads: "--ds-surface-sunken"
     },
-    backgroundSecondary2: {
-      h: 0,
-      s: 0,
-      l: 97.25,
-      a: 1,
-      ads: "--ds-surface-sunken"
-    },
     backgroundNeutral: {
       h: 209,
       s: 76,
@@ -385,13 +378,6 @@ var themeColors = {
       a: 1,
       ads: "--ds-surface-sunken"
     },
-    backgroundSecondary2: {
-      h: 210,
-      s: 4,
-      l: 9.8,
-      a: 1,
-      ads: "--ds-surface-sunken"
-    },
     // Same base hsl to backgroundHover
     backgroundNeutral: {
       h: 240,
@@ -426,7 +412,7 @@ var themeColors = {
       s: 85.1,
       l: 76.3,
       a: 1,
-      ads: "--ds-background-accent-blue-subtle-hovered"
+      ads: "--ds-border-focused"
     },
     overlay: { h: 225, s: 4, l: 17.6, a: 1, ads: "--ds-surface-overlay" },
     overlayHover: {
@@ -597,34 +583,6 @@ var colorsNames = [
   ...Object.keys(themeColors.light)
 ];
 
-// src/utilities/color.ts
-var getColorAlpha = (color, alpha) => {
-  return `hsla(${hslaColors[color].h},${hslaColors[color].s}%,${hslaColors[color].l}%,${alpha})`;
-};
-var getColorScale = (color, scaleType, scaleIncrement) => {
-  const scaledValue = () => {
-    if (scaleType === "dark") {
-      return hslaColors[color].l - hslaColors[color].l * scaleIncrement;
-    } else if (scaleType === "light") {
-      return hslaColors[color].l + hslaColors[color].l * scaleIncrement;
-    }
-  };
-  return `hsla(${hslaColors[color].h},${hslaColors[color].s}%,${Math.round(
-    scaledValue()
-  )}%,${hslaColors[color].a})`;
-};
-var getColorValue = (color) => {
-  if (color) {
-    if (color in hslaColors || color in themeColors.light) {
-      return `var(--lns-color-${color})`;
-    }
-    if (color in gradients) {
-      return `var(--lns-gradient-${color})`;
-    }
-    return color;
-  }
-};
-
 // src/hooks/use-media.ts
 import _debounce from "lodash/debounce";
 import React from "react";
@@ -644,41 +602,6 @@ function useMedia(queries, values, defaultValue) {
   return value;
 }
 
-// src/utilities/size.ts
-var u = (amount) => amount && `calc(${amount} * var(--lns-unit, ${unit}px))`;
-var getSizeValue = (size) => {
-  if (size in spaces) {
-    return `var(--lns-space-${size})`;
-  }
-  if (size && isNaN(size)) {
-    return `${size}`;
-  }
-  if (size === 0) {
-    return `0`;
-  }
-  if (size) {
-    return `${u(size)}`;
-  }
-};
-var getSize = (property, size) => {
-  if (size || size === 0) {
-    if (Array.isArray(size)) {
-      const rulesetsArray = size.map((sizeItem) => {
-        return `${property}: ${getSizeValue(sizeItem)}`;
-      });
-      return arrayToBreakpoints(rulesetsArray);
-    }
-    if (typeof size === "object") {
-      const sizeValesObject = {};
-      Object.entries(size).forEach(
-        ([key, value]) => sizeValesObject[key] = getSizeValue(value)
-      );
-      return objectToBreakpoints(property, sizeValesObject);
-    }
-    return `${property}: ${getSizeValue(size)};`;
-  }
-};
-
 // src/utilities/responsive.ts
 var getMediaCss = (widthType, breakpoint, declaration) => `@media(${widthType}: ${breakpoint}){${declaration}}`;
 var arrayToBreakpoints = (values) => {
@@ -790,6 +713,34 @@ var Media = ({ children, queries, values, defaultValue }) => {
   return children(value);
 };
 
+// src/utilities/color.ts
+var getColorAlpha = (color, alpha) => {
+  return `hsla(${hslaColors[color].h},${hslaColors[color].s}%,${hslaColors[color].l}%,${alpha})`;
+};
+var getColorScale = (color, scaleType, scaleIncrement) => {
+  const scaledValue = () => {
+    if (scaleType === "dark") {
+      return hslaColors[color].l - hslaColors[color].l * scaleIncrement;
+    } else if (scaleType === "light") {
+      return hslaColors[color].l + hslaColors[color].l * scaleIncrement;
+    }
+  };
+  return `hsla(${hslaColors[color].h},${hslaColors[color].s}%,${Math.round(
+    scaledValue()
+  )}%,${hslaColors[color].a})`;
+};
+var getColorValue = (color) => {
+  if (color) {
+    if (color in hslaColors || color in themeColors.light) {
+      return `var(--lns-color-${color})`;
+    }
+    if (color in gradients) {
+      return `var(--lns-gradient-${color})`;
+    }
+    return color;
+  }
+};
+
 // src/utilities/styles.ts
 var getTextSize = (size) => size && `
   font-size: var(--lns-fontSize-${size});
@@ -821,7 +772,7 @@ var getListContainer = (tag) => {
   }
 };
 var getPlacement = (maxHeight, placement) => {
-  const placementStyles = {
+  const placementStyles2 = {
     center: {
       bottom: 0,
       top: `calc((100vh - ${maxHeight}) / 2)`,
@@ -838,7 +789,7 @@ var getPlacement = (maxHeight, placement) => {
       position: "relative"
     }
   };
-  return placementStyles[placement];
+  return placementStyles2[placement];
 };
 
 // src/utilities/case.ts
@@ -905,6 +856,41 @@ function StyleProvider({
   return /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
 }
 
+// src/utilities/size.ts
+var u = (amount) => amount && `calc(${amount} * var(--lns-unit, ${unit}px))`;
+var getSizeValue = (size) => {
+  if (size in spaces) {
+    return `var(--lns-space-${size})`;
+  }
+  if (size && isNaN(size)) {
+    return `${size}`;
+  }
+  if (size === 0) {
+    return `0`;
+  }
+  if (size) {
+    return `${u(size)}`;
+  }
+};
+var getSize = (property, size) => {
+  if (size || size === 0) {
+    if (Array.isArray(size)) {
+      const rulesetsArray = size.map((sizeItem) => {
+        return `${property}: ${getSizeValue(sizeItem)}`;
+      });
+      return arrayToBreakpoints(rulesetsArray);
+    }
+    if (typeof size === "object") {
+      const sizeValesObject = {};
+      Object.entries(size).forEach(
+        ([key, value]) => sizeValesObject[key] = getSizeValue(value)
+      );
+      return objectToBreakpoints(property, sizeValesObject);
+    }
+    return `${property}: ${getSizeValue(size)};`;
+  }
+};
+
 // src/variables.ts
 var unit = 8;
 var textSizes = {
@@ -981,17 +967,20 @@ var fontSettings = {
 };
 var radii = {
   none: u(0),
+  25: `var(--ds-radius-xsmall, ${u(0.25)})`,
   50: `var(--ds-radius-small, ${u(0.5)})`,
+  75: `var(--ds-radius-medium, ${u(0.75)})`,
   100: `var(--ds-radius-large, ${u(1)})`,
   medium: `var(--ds-radius-large, ${u(1)})`,
   150: `var(--ds-radius-xlarge, ${u(1.5)})`,
-  175: `var(--ds-radius-xlarge, ${u(1.75)})`,
+  175: `var(--ds-radius-xlarge, ${u(1.5)})`,
   200: `var(--ds-radius-xxlarge, ${u(2)})`,
   large: `var(--ds-radius-xxlarge, ${u(2)})`,
-  250: `var(--ds-radius-xxlarge, ${u(2.5)})`,
-  300: `var(--ds-radius-xxlarge, ${u(3)})`,
-  xlarge: `var(--ds-radius-xxlarge, ${u(3)})`,
+  250: `var(--ds-radius-xxlarge, ${u(2)})`,
+  300: `var(--ds-radius-xxlarge, ${u(2)})`,
+  xlarge: `var(--ds-radius-xxlarge, ${u(2)})`,
   round: `var(--ds-radius-full, ${u(999)})`,
+  tile: `var(--ds-radius-tile, 25%)`,
   full: `var(--ds-radius-full, ${u(999)})`
 };
 var shadows = {
@@ -1015,7 +1004,7 @@ var breakpoints = {
 };
 var gradients = {
   "ai-primary": "conic-gradient(from 270deg, #0469FF 90deg, #BF63F3 180deg, #FFA900 270deg, #0065FF 360deg)",
-  "ai-secondary": "radial-gradient(138.41% 100% at 100% 100%, #E9F2FE 0%, #FFF 100%)"
+  "ai-secondary": "radial-gradient(138.41% 100% at 100% 100%, var(--ds-background-accent-blue-subtlest) 0%, var(--ds-surface) 100%)"
 };
 
 // src/components/text/text.tsx
@@ -1781,7 +1770,7 @@ var formFieldVariables = getCssVarsFromObject(void 0, {
   formFieldBorderWidth: "1px",
   formFieldBorderWidthFocus: "2px",
   formFieldHeight: u(4.5),
-  formFieldRadius: "var(--lns-radius-175)",
+  formFieldRadius: "var(--lns-radius-100)",
   formFieldHorizontalPadding: u(2),
   formFieldBorderShadow: `
     inset 0 0 0 var(--lns-formFieldBorderWidth) var(--lns-color-formFieldBorder)
@@ -2327,7 +2316,7 @@ var statusStyles = (props) => ({
     pointer-events: none;
     background-color: ${getColorValue("disabledBackground")};
     color: ${getColorValue("disabledContent")};
-    border: none;
+    border: ${variantStyles[props.variant].borderColor ? `1px solid ${variantStyles[props.variant].borderColor}` : "none"};
   `
 });
 var widthStyles = (props) => ({
@@ -3225,7 +3214,7 @@ var error_container_default = ErrorContainer;
 
 // src/components/layout/layout.tsx
 import styled13 from "@emotion/styled";
-import React17, { Component } from "react";
+import React17 from "react";
 var alignments3 = {
   start: "flex-start",
   center: "center",
@@ -3259,11 +3248,9 @@ var LayoutSection = (_a) => {
   console.warn(layoutDeprecatedWarning);
   return /* @__PURE__ */ React17.createElement(LayoutSectionWrapper, __spreadValues({ width, maxWidth }, props), children);
 };
-var Layout = class extends Component {
-  render() {
-    console.warn(layoutDeprecatedWarning);
-    return /* @__PURE__ */ React17.createElement(LayoutWrapper, __spreadValues({}, this.props), this.props.children);
-  }
+var Layout = (props) => {
+  console.warn(layoutDeprecatedWarning);
+  return /* @__PURE__ */ React17.createElement(LayoutWrapper, __spreadValues({}, props), props.children);
 };
 Layout.Section = LayoutSection;
 var layout_default = Layout;
@@ -4804,6 +4791,15 @@ var ModalCard = (_a) => {
     "initialFocus",
     "closeOnEscape"
   ]);
+  const dialogRef = useRef3(null);
+  const setDialogRef = (node) => {
+    dialogRef.current = node;
+    if (typeof ref === "function") {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  };
   const keyListener = (e) => {
     if (e.key === "Escape" && closeOnEscape) {
       e.preventDefault();
@@ -4825,7 +4821,11 @@ var ModalCard = (_a) => {
       active: isOpen,
       focusTrapOptions: __spreadValues({
         clickOutsideDeactivates: false,
-        allowOutsideClick: true
+        allowOutsideClick: true,
+        // The dialog element is always rendered, so it is a safe focus target
+        // when no tabbable content exists yet (e.g. lazy-loaded children still
+        // resolving, or `removeClose` modals with no interactive elements).
+        fallbackFocus: () => dialogRef.current
       }, initialFocus !== void 0 ? { initialFocus } : {})
     },
     /* @__PURE__ */ React30.createElement(
@@ -4836,7 +4836,7 @@ var ModalCard = (_a) => {
         maxHeight,
         placement,
         onClick: (e) => e.stopPropagation(),
-        ref,
+        ref: setDialogRef,
         "aria-label": ariaLabel,
         "aria-modal": ariaModal,
         "aria-labelledby": ariaLabelledBy
@@ -4850,13 +4850,7 @@ var ModalCard = (_a) => {
           onClick: onCloseClick
         }
       )),
-      /* @__PURE__ */ React30.createElement(
-        ModalCardChildrenSection,
-        __spreadProps(__spreadValues({}, removeClose ? { tabIndex: 0 } : { tabIndex: -1 }), {
-          maxHeight
-        }),
-        children
-      )
+      /* @__PURE__ */ React30.createElement(ModalCardChildrenSection, { maxHeight }, children)
     )
   );
 };
@@ -6329,6 +6323,7 @@ var FormField = (_a) => {
 var form_field_default = FormField;
 
 // src/components/notification-bar/notification-bar.tsx
+import { css as css4 } from "@emotion/react";
 import styled29 from "@emotion/styled";
 import React41, { useEffect as useEffect8 } from "react";
 
@@ -6451,6 +6446,27 @@ var severityStyles = {
     fontFamily: "var(--lns-fontFamily-code)"
   }
 };
+var placementStyles = {
+  pageTop: {
+    wrapper: css4`
+      position: fixed;
+      padding: var(--lns-space-medium) var(--paddingXOffset);
+      top: 0;
+      bottom: auto;
+    `,
+    closedTransform: "translateY(-100%)"
+  },
+  containerBottom: {
+    wrapper: css4`
+      position: absolute;
+      padding: var(--lns-space-medium);
+      top: auto;
+      bottom: 0;
+    `,
+    closedTransform: "translateY(100%)"
+  }
+};
+var getPlacementStyles = (placement = "pageTop") => placementStyles[placement];
 var DURATION = 350;
 var NotificationBarWrapper = styled29.aside`
   --paddingXOffset: var(--lns-space-large);
@@ -6464,18 +6480,22 @@ var NotificationBarWrapper = styled29.aside`
   ${(props) => `font-family: ${severityStyles[props.severity].fontFamily}`};
 
   ${(props) => `color: ${severityStyles[props.severity].color}`};
-  position: fixed;
-  padding: var(--lns-space-medium) var(--paddingXOffset);
-  top: 0;
+  ${(props) => getPlacementStyles(props.placement).wrapper};
   left: 0;
   transition:
     ${DURATION}ms box-shadow,
     ${DURATION}ms transform;
+  pointer-events: ${(props) => props.isOpen ? "auto" : "none"};
   width: 100%;
   box-sizing: border-box;
   z-index: 1100;
   opacity: ${(props) => props.isOpen ? "1" : "0"};
-  transform: ${(props) => props.isOpen ? "translateY(0px)" : "translateY(-100%)"};
+  transform: ${(props) => {
+  if (props.isOpen) {
+    return "translateY(0px)";
+  }
+  return getPlacementStyles(props.placement).closedTransform;
+}};
   @media (min-width: 872px) {
     --alignItems: center;
   }
@@ -6485,69 +6505,88 @@ var NotificationBar = ({
   onCloseClick,
   isOpen,
   severity = "info",
-  id
+  placement = "pageTop",
+  id,
+  keepMounted = false
 }) => {
   var _a, _b, _c;
   useEffect8(() => {
-    if (!isOpen) {
+    if (!isOpen || !onCloseClick) {
       return;
     }
     const keyListener = (e) => {
       if (e.key === "Escape") {
-        e.preventDefault();
-        onCloseClick && onCloseClick();
+        if (placement === "pageTop") {
+          e.preventDefault();
+        }
+        onCloseClick();
       }
     };
     window.addEventListener("keydown", keyListener);
     return () => {
       window.removeEventListener("keydown", keyListener);
     };
-  }, [isOpen, onCloseClick]);
-  use_push_page_down_default(isOpen);
+  }, [isOpen, onCloseClick, placement]);
+  use_push_page_down_default(placement === "pageTop" && isOpen === true);
   const isInternalAlert = severity === "internal";
-  return isOpen ? /* @__PURE__ */ React41.createElement(NotificationBarWrapper, { isOpen, severity, id }, /* @__PURE__ */ React41.createElement(
-    arrange_default,
+  const isContainerBottom = placement === "containerBottom";
+  if (isOpen !== true && !keepMounted) {
+    return null;
+  }
+  return /* @__PURE__ */ React41.createElement(
+    NotificationBarWrapper,
     {
-      alignItems: { default: "start", small: "center" },
-      justifyContent: "space-between",
-      autoFlow: isInternalAlert ? "column" : void 0,
-      columns: !isInternalAlert ? ["1fr auto"] : void 0
+      "aria-hidden": isOpen === true ? void 0 : true,
+      isOpen: isOpen === true,
+      severity,
+      placement,
+      id
     },
     /* @__PURE__ */ React41.createElement(
-      container_default,
+      arrange_default,
       {
-        paddingY: { default: "xsmall", xsmall: 0 },
-        paddingLeft: !isInternalAlert ? { default: 0, medium: u(3.5) } : void 0,
-        width: "100%"
+        alignItems: { default: "start", small: "center" },
+        justifyContent: "space-between",
+        autoFlow: isInternalAlert ? "column" : void 0,
+        columns: !isInternalAlert ? ["1fr auto"] : void 0
       },
       /* @__PURE__ */ React41.createElement(
-        arrange_default,
+        container_default,
         {
-          autoFlow: "column",
-          gap: isInternalAlert ? "medium" : "small",
-          justifyContent: "center"
+          paddingY: { default: "xsmall", xsmall: 0 },
+          paddingLeft: !isInternalAlert && !isContainerBottom ? { default: 0, medium: u(3.5) } : void 0,
+          width: "100%"
         },
-        ((_a = severityStyles[severity]) == null ? void 0 : _a.icon) ? /* @__PURE__ */ React41.createElement(align_default, { alignment: "topLeft" }, /* @__PURE__ */ React41.createElement(
-          icon_default,
+        /* @__PURE__ */ React41.createElement(
+          arrange_default,
           {
-            icon: severityStyles[severity].icon,
-            color: (_b = severityStyles[severity].color) != null ? _b : "var(--lns-color-white)"
-          }
-        )) : null,
-        " ",
-        children
+            autoFlow: "column",
+            gap: isInternalAlert ? "medium" : "small",
+            justifyContent: isContainerBottom ? "start" : "center"
+          },
+          ((_a = severityStyles[severity]) == null ? void 0 : _a.icon) ? /* @__PURE__ */ React41.createElement(align_default, { alignment: "topLeft" }, /* @__PURE__ */ React41.createElement(
+            icon_default,
+            {
+              icon: severityStyles[severity].icon,
+              color: (_b = severityStyles[severity].color) != null ? _b : "var(--lns-color-white)"
+            }
+          )) : null,
+          " ",
+          children
+        )
       )
+    ),
+    isOpen === true && onCloseClick && /* @__PURE__ */ React41.createElement(
+      icon_button_default,
+      {
+        iconColor: (_c = severityStyles[severity].color) != null ? _c : "var(--lns-color-white)",
+        tabIndex: 0,
+        altText: "Close",
+        icon: /* @__PURE__ */ React41.createElement(SvgClose, null),
+        onClick: onCloseClick
+      }
     )
-  ), onCloseClick && /* @__PURE__ */ React41.createElement(
-    icon_button_default,
-    {
-      iconColor: (_c = severityStyles[severity].color) != null ? _c : "var(--lns-color-white)",
-      tabIndex: 0,
-      altText: "Close",
-      icon: /* @__PURE__ */ React41.createElement(SvgClose, null),
-      onClick: onCloseClick
-    }
-  )) : null;
+  );
 };
 var notification_bar_default = NotificationBar;
 
@@ -6894,10 +6933,10 @@ var availablePlacements = Object.keys(placements);
 var tooltip_default = Tooltip;
 
 // src/components/skeleton/skeleton.tsx
-import { css as css4 } from "@emotion/react";
+import { css as css5 } from "@emotion/react";
 import styled32 from "@emotion/styled";
 import React44 from "react";
-var SkeletonAnimation = css4`
+var SkeletonAnimation = css5`
   @media (prefers-reduced-motion: no-preference) {
     animation: shimmer 2s infinite linear;
     background: linear-gradient(
@@ -7472,12 +7511,12 @@ var LogoLoader = ({
 var logo_loader_default = LogoLoader;
 
 // src/components/list/list.tsx
-import { css as css5 } from "@emotion/react";
+import { css as css6 } from "@emotion/react";
 import styled35 from "@emotion/styled";
 import React47 from "react";
 var ssrComment = `/* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */`;
 var variantStyles2 = {
-  border: css5`
+  border: css6`
     .ListRowWrapper:last-child {
       border-bottom: 1px solid ${getColorValue("border")};
     }
@@ -7487,7 +7526,7 @@ var variantStyles2 = {
       border-top: 1px solid ${getColorValue("border")};
     }
   `,
-  stripe: css5`
+  stripe: css6`
     .ListRowWrapper {
       &:nth-child(odd) ${ssrComment} {
         background-color: ${getColorValue("backgroundSecondary")};
@@ -7498,7 +7537,7 @@ var variantStyles2 = {
       ${getRadius("medium")};
     }
   `,
-  clear: css5``
+  clear: css6``
 };
 var ListWrapper = styled35.div`
   .ListRowWrapper {
@@ -7556,7 +7595,8 @@ var ListRow = (_a) => {
     backgroundColor,
     onClick,
     href,
-    role
+    role,
+    tabIndex
   } = _b, props = __objRest(_b, [
     "children",
     "htmlTag",
@@ -7564,7 +7604,8 @@ var ListRow = (_a) => {
     "backgroundColor",
     "onClick",
     "href",
-    "role"
+    "role",
+    "tabIndex"
   ]);
   const classNameFromProp = className ? ` ${className}` : ``;
   const nonInteractiveElements = [
@@ -7591,7 +7632,7 @@ var ListRow = (_a) => {
   if (!isAutoInteractive) {
     isNonInteractive = nonInteractiveElements.includes(actualHtmlTag);
   }
-  const interactiveProps = !isNonInteractive || isAutoInteractive ? {
+  const interactiveProps = (!isNonInteractive || isAutoInteractive) && (onClick || href) ? __spreadValues({
     onClick,
     onKeyDown: (e) => {
       if (e.key === "Enter") {
@@ -7599,7 +7640,7 @@ var ListRow = (_a) => {
         onClick == null ? void 0 : onClick(e);
       }
     }
-  } : {};
+  }, onClick && !href ? { tabIndex: tabIndex != null ? tabIndex : 0 } : {}) : {};
   return /* @__PURE__ */ React47.createElement(
     ListRowWrapper,
     __spreadValues(__spreadValues({
@@ -8276,10 +8317,10 @@ var Illustration = (_a) => {
 var illustration_default = Illustration;
 
 // src/components/split/split.tsx
-import { css as css6 } from "@emotion/react";
+import { css as css7 } from "@emotion/react";
 import styled40 from "@emotion/styled";
 import React52, { Children, cloneElement } from "react";
-var getSizeStyles = (props) => css6`
+var getSizeStyles = (props) => css7`
   ${getSize("width", props.width)};
   ${getSize("height", props.height)};
   ${getSize("min-width", props.minWidth)};