@loomhq/lens 12.18.0 → 12.19.0

package/dist/esm/index.js

@@ -981,18 +981,18 @@ var fontSettings = {
 };
 var radii = {
   none: u(0),
-  50: u(0.5),
-  100: u(1),
-  medium: u(1),
-  150: u(1.5),
-  175: u(1.75),
-  200: u(2),
-  large: u(2),
-  250: u(2.5),
-  300: u(3),
-  xlarge: u(3),
-  round: u(999),
-  full: u(999)
+  50: `var(--ds-radius-small, ${u(0.5)})`,
+  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)})`,
+  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)})`,
+  round: `var(--ds-radius-full, ${u(999)})`,
+  full: `var(--ds-radius-full, ${u(999)})`
 };
 var shadows = {
   small: `0 ${u(0.5)} ${u(1.25)} hsla(0, 0%, 0%, 0.05)`,
@@ -2002,6 +2002,7 @@ var Avatar = (_a) => {
     size = 4,
     letter,
     imageSrc,
+    imageLoading,
     children,
     themeColor = "blue"
   } = _b, props = __objRest(_b, [
@@ -2009,6 +2010,7 @@ var Avatar = (_a) => {
     "size",
     "letter",
     "imageSrc",
+    "imageLoading",
     "children",
     "themeColor"
   ]);
@@ -2026,7 +2028,8 @@ var Avatar = (_a) => {
           alt: altText,
           src: imageSrc,
           height,
-          width
+          width,
+          loading: imageLoading
         }
       );
     }
@@ -2076,11 +2079,6 @@ var buildGlobalStylesheet = (rootElement = ":root", bodyElement = "body") => {
       box-sizing: border-box;
     }
 
-    ${bodyElement} * {
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-    }
-
     ${getThemeStylesString(rootElement)}
 
     ${getAllCssVarsString(rootElement)}
@@ -2232,24 +2230,27 @@ var loader_default = Loader;
 var sizesStyles = {
   small: {
     height: u(4),
-    textSize: "small",
+    textSize: "medium",
     iconSize: 2,
     xSpace: u(1.5),
-    radius: "var(--lns-radius-150)"
+    radius: "var(--ds-radius-medium)",
+    iconGap: `var(--ds-space-075, ${u(1)})`
   },
   medium: {
     height: u(4.5),
     textSize: "medium",
     iconSize: 3,
-    xSpace: u(2),
-    radius: "var(--lns-radius-175)"
+    xSpace: `var(--ds-space-150)`,
+    radius: "var(--ds-radius-large)",
+    iconGap: `var(--ds-space-075)`
   },
   large: {
     height: u(7),
     textSize: "large",
     iconSize: 4,
-    xSpace: u(2.5),
-    radius: "var(--lns-radius-250)"
+    xSpace: `var(--ds-space-200)`,
+    radius: "var(--ds-radius-xlarge)",
+    iconGap: u(1)
   }
 };
 var hasLoaderStyles = (props) => css2`
@@ -2344,7 +2345,6 @@ var widthStyles = (props) => ({
     min-width: max-content;
   `
 });
-var iconGap = u(1);
 var ButtonWrapper = styled5.button`
   appearance: none;
   padding: 0
@@ -2358,7 +2358,7 @@ var ButtonWrapper = styled5.button`
   justify-content: center;
   vertical-align: middle;
   white-space: nowrap;
-  ${getFontWeight("bold")};
+  font-weight: var(--ds-font-weight-medium);
   border-radius: ${(props) => sizesStyles[props.size].radius};
   // TODO: remove hasFullWidth after deprecation period
   ${(props) => props.hasFullWidth ? "display: flex; width: 100%" : "display: inline-flex"};
@@ -2464,7 +2464,7 @@ var Button = (_a) => {
     {
       hasLoader,
       paddingLeft: "0",
-      paddingRight: children ? iconGap : "0"
+      paddingRight: children ? sizesStyles[size].iconGap : "0"
     },
     /* @__PURE__ */ React8.createElement(
       icon_default,
@@ -2480,7 +2480,7 @@ var Button = (_a) => {
     IconSection,
     {
       hasLoader,
-      paddingLeft: children ? iconGap : "0",
+      paddingLeft: children ? sizesStyles[size].iconGap : "0",
       paddingRight: "unset"
     },
     /* @__PURE__ */ React8.createElement(
@@ -2821,21 +2821,21 @@ var sizesStyles2 = {
     height: u(4),
     width: u(5),
     iconSize: 2,
-    padding: u(1.75),
+    padding: `var(--ds-space-150)`,
     withIconPadding: u(4.5),
     passwordAdditionalPadding: u(0.5),
     textSize: "small",
-    radius: "var(--lns-radius-150)"
+    radius: "var(--ds-radius-medium)"
   },
   medium: {
     height: "var(--lns-formFieldHeight)",
     width: u(6),
     iconSize: 3,
-    padding: "var(--lns-formFieldHorizontalPadding)",
+    padding: "var(--ds-space-150)",
     withIconPadding: u(5.5),
     passwordAdditionalPadding: u(0.5),
     textSize: "medium",
-    radius: "var(--lns-radius-175)"
+    radius: "var(--ds-radius-large)"
   },
   large: {
     height: u(7),
@@ -2845,7 +2845,7 @@ var sizesStyles2 = {
     withIconPadding: u(5.5),
     passwordAdditionalPadding: u(0.5),
     textSize: "large",
-    radius: "var(--lns-radius-250)"
+    radius: "var(--ds-radius-xlarge)"
   }
 };
 var inputRightPadding = (props) => {
@@ -3275,17 +3275,17 @@ var sizeStyles = {
   small: {
     size: u(3),
     iconSize: 2.25,
-    radius: "var(--lns-radius-100)"
+    radius: "var(--ds-radius-small)"
   },
   medium: {
     size: u(4),
     iconSize: 3,
-    radius: "var(--lns-radius-150)"
+    radius: "var(--ds-radius-medium)"
   },
   large: {
     size: u(5),
     iconSize: 4,
-    radius: "var(--lns-radius-175)"
+    radius: "var(--ds-radius-large)"
   }
 };
 var IconButtonBox = styled14.button`
@@ -3426,7 +3426,7 @@ var CheckboxInput = styled15.input`
     cursor: pointer;
 
     & ~ .CheckboxBox {
-      border: 2px solid ${getColorValue("body")};
+      border: 2px solid ${(props) => getColorValue(props.borderColor || "body")};
     }
 
     &:checked ~ .CheckboxBox,
@@ -3483,14 +3483,16 @@ var Checkbox = forwardRef2(
       isIndeterminate,
       onFocus,
       onChange,
-      onBlur
+      onBlur,
+      borderColor
     } = _b, props = __objRest(_b, [
       "isDisabled",
       "isChecked",
       "isIndeterminate",
       "onFocus",
       "onChange",
-      "onBlur"
+      "onBlur",
+      "borderColor"
     ]);
     const defaultRef = useRef2();
     const checkboxRef = ref || defaultRef;
@@ -3510,7 +3512,8 @@ var Checkbox = forwardRef2(
         onChange,
         onBlur,
         ref: checkboxRef,
-        "aria-checked": isChecked
+        "aria-checked": isChecked,
+        borderColor
       }, props)
     ), /* @__PURE__ */ React19.createElement(CheckboxBox, { className: "CheckboxBox" }, /* @__PURE__ */ React19.createElement(SvgCheckboxMinus, { className: "Icon IconMinus", color: iconColor }), /* @__PURE__ */ React19.createElement(SvgCheckboxCheck, { className: "Icon IconCheck", color: iconColor })));
   }
@@ -3526,21 +3529,21 @@ var sizeStyles2 = {
     iconSize: 2.25,
     height: u(3),
     xSpace: u(1),
-    radius: "var(--lns-radius-100)"
+    radius: "var(--ds-radius-small)"
   },
   medium: {
     textSize: "medium",
     iconSize: 3,
     height: u(4),
     xSpace: u(1.5),
-    radius: "var(--lns-radius-150)"
+    radius: "var(--ds-radius-medium)"
   },
   large: {
     textSize: "large",
     iconSize: 4,
     height: u(6),
-    xSpace: u(3),
-    radius: "var(--lns-radius-200)"
+    xSpace: `var(--ds-space-200)`,
+    radius: "var(--ds-radius-large)"
   }
 };
 var TextButtonWrapper = styled16.button`
@@ -3556,7 +3559,7 @@ var TextButtonWrapper = styled16.button`
   cursor: pointer;
   transition: 0.6s background-color;
   color: ${(props) => getColorValue(props.color || "body")};
-  ${getFontWeight("bold")};
+  font-weight: var(--ds-font-weight-medium);
   border-radius: ${(props) => sizeStyles2[props.size].radius};
   ${(props) => getTextSize(sizeStyles2[props.size].textSize)};
   padding: 0 ${(props) => sizeStyles2[props.size].xSpace};
@@ -3762,7 +3765,7 @@ var MenuContainer = styled17.div`
   z-index: ${(props) => props.zIndex};
   border: 1px solid ${getColorValue("border")};
   ${getShadow("medium")};
-  ${getRadius("250")};
+  border-radius: var(--ds-radius-large);
   overflow: hidden;
 `;
 var SearchWrapper = styled17.div`
@@ -3781,10 +3784,10 @@ var MenuItemWrapper = styled17.li`
   grid-auto-flow: column;
   grid-template-columns: ${(props) => props.columns};
   ${getSize("grid-gap", "small")};
-  ${getRadius("175")};
+  border-radius: var(--ds-radius-medium);
   align-items: center;
   min-height: ${u(5)};
-  padding: 0 ${u(2)};
+  padding: 0 var(--ds-space-150);
   cursor: ${(props) => props.isDisabled ? "default" : "pointer"};
   &:focus-visible {
     outline: 1px solid transparent;
@@ -3879,7 +3882,7 @@ var MenuItem = (_a) => {
       showDeselectIcon
     }, updatedProps),
     icon && (typeof icon === "string" ? /* @__PURE__ */ React25.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ React25.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ React25.createElement(Image2, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ React25.createElement(icon_default, { icon, color })),
-    /* @__PURE__ */ React25.createElement(text_default, { color, hasEllipsis: true }, children),
+    /* @__PURE__ */ React25.createElement(text_default, { fontWeight: "medium", color, hasEllipsis: true }, children),
     isSelected && /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement("span", { className: "check-icon", "aria-hidden": "true" }, /* @__PURE__ */ React25.createElement(icon_default, { icon: /* @__PURE__ */ React25.createElement(SvgCheck, null), color })), /* @__PURE__ */ React25.createElement("span", { className: "deselect-icon", "aria-hidden": "true" }, /* @__PURE__ */ React25.createElement(icon_default, { icon: /* @__PURE__ */ React25.createElement(SvgClose, null), color })))
   );
 };
@@ -3988,12 +3991,12 @@ var SelectHeaderWrapper = styled19.button`
   cursor: pointer;
   width: 100%;
   min-height: ${u(4.5)};
-  padding: 0 ${u(1.5)} 0 var(--lns-formFieldHorizontalPadding);
+  padding: 0 ${u(1.5)} 0 var(--ds-space-150);
   color: ${getColorValue("body")};
   border: none;
   background-color: ${getColorValue("formFieldBackground")};
   transition: 0.3s box-shadow;
-  border-radius: var(--lns-formFieldRadius);
+  border-radius: var(--ds-radius-large);
   box-shadow: inset 0 0 0
     ${(props) => props.hasError ? "var(--lns-formFieldBorderWidthFocus) var(--lns-color-danger)" : "var(--lns-formFieldBorderWidth) var(--lns-color-formFieldBorder)"};
 
@@ -4697,7 +4700,7 @@ var ModalCardWrapper = styled21.dialog`
   color: ${getColorValue("body")};
   bottom: ${(props) => getPlacement(props.maxHeight, props.placement).bottom};
   ${getShadow("large")};
-  ${getRadius("xlarge")};
+  border-radius: var(--ds-radius-xlarge);
   // Unsets bottom-radius for bottom-aligned modals
   border-bottom-left-radius: ${(props) => props.placement === "bottom" ? "initial" : void 0};
   border-bottom-right-radius: ${(props) => props.placement === "bottom" ? "initial" : void 0};
@@ -5100,11 +5103,11 @@ import styled23 from "@emotion/styled";
 import React32 from "react";
 var sizesStyles3 = {
   small: {
-    padding: `${u(1.5)} ${u(1.75)}`,
+    padding: `var(--ds-space-100) var(--ds-space-150)`,
     textSize: "small"
   },
   medium: {
-    padding: `${u(1.5)} var(--lns-formFieldHorizontalPadding)`,
+    padding: `var(--ds-space-100) var(--ds-space-150)`,
     textSize: "medium"
   }
 };
@@ -5116,7 +5119,7 @@ var TextareaWrapper = styled23.textarea`
   background-color: ${getColorValue("formFieldBackground")};
   transition: 0.3s box-shadow;
   padding: ${(props) => sizesStyles3[props.size].padding};
-  ${getRadius("250")};
+  border-radius: var(--ds-radius-large);
   box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidth)
     ${(props) => props.error ? "var(--lns-color-danger)" : "var(--lns-color-formFieldBorder)"};
   ${(props) => getTextSize(sizesStyles3[props.size].textSize)};
@@ -5297,9 +5300,9 @@ var TypeaheadInputField = styled24.input`
   padding-top: 0;
   padding-bottom: 0;
   id: ${(props) => props.id};
-  padding-left: ${(props) => props.hasIcon ? u(5.5) : "var(--lns-formFieldHorizontalPadding)"};
-  padding-right: ${(props) => props.hasAddOn ? u(5.5) : "var(--lns-formFieldHorizontalPadding)"};
-  border-radius: var(--lns-formFieldRadius);
+  padding-left: ${(props) => props.hasIcon ? u(5.5) : "var(--ds-space-150)"};
+  padding-right: ${(props) => props.hasAddOn ? u(5.5) : "var(--ds-space-150)"};
+  border-radius: var(--ds-radius-large, var(--lns-formFieldRadius));
   box-shadow: inset 0 0 0
     ${(props) => props.hasError ? "var(--lns-formFieldBorderWidthFocus) var(--lns-color-danger)" : "var(--lns-formFieldBorderWidth) var(--lns-color-formFieldBorder)"};
 
@@ -6597,7 +6600,7 @@ var ToastWrapper = styled30.div`
   animation: ${(props) => enter(props.toastDuration, props.platform)}
     ${(props) => props.toastDuration}ms forwards;
   background-color: ${getColorValue("backgroundInverse")};
-  ${getRadius("250")};
+  border-radius: var(--ds-radius-large);
   top: ${(props) => getTop(props.platform)};
   bottom: ${(props) => getBottom(props.platform)};
   ${getShadow("large")};
@@ -6609,7 +6612,7 @@ var ToastWrapper = styled30.div`
   left: 50%;
   max-width: ${u(50)}; // Fallback when min() function is not supported
   max-width: min(90%, ${u(50)});
-  padding: ${u(1.5)} var(--lns-space-medium) ${u(1.5)} var(--lns-space-large);
+  padding: ${u(1.5)} var(--ds-space-150) ${u(1.5)} var(--ds-space-200);
   position: fixed;
   transform: translateX(-50%);
   width: max-content;
@@ -6684,8 +6687,8 @@ var tooltipYPadding = (tooltipMinHeight - textHeight) / 2;
 var TooltipBoxWrapper = styled31.div`
   background-color: ${getColorValue("backgroundInverse")};
   color: ${getColorValue("bodyInverse")};
-  ${getRadius("150")};
-  ${getFontWeight("bold")};
+  border-radius: var(--ds-radius-medium);
+  font-weight: var(--ds-font-weight-medium);
   ${getTextSize("small")};
   ${getShadow("medium")};
   ${(props) => getSize("max-width", props.maxWidth)};
@@ -6695,9 +6698,9 @@ var TooltipBoxWrapper = styled31.div`
 `;
 var ShortcutWrapper = styled31.div`
   background-color: ${getColorValue("grey7")};
-  border-radius: 3px;
+  border-radius: var(--ds-radius-xsmall);
   color: ${getColorValue("grey3")};
-  ${getFontWeight("bold")};
+  font-weight: var(--ds-font-weight-medium);
   ${getTextSize("small")};
   padding-left: ${u(0.5)};
   padding-right: ${u(0.5)};
@@ -6883,7 +6886,7 @@ var Tooltip = (_a) => {
         role: "tooltip",
         id: tooltipId
       }, rest),
-      /* @__PURE__ */ React43.createElement(arrange_default, { gap: "small" }, /* @__PURE__ */ React43.createElement(text_default, { size: "small", fontWeight: "bold" }, content), shortcut && /* @__PURE__ */ React43.createElement(arrange_default, { gap: "xsmall" }, shortcut.map((char, index) => /* @__PURE__ */ React43.createElement(ShortcutBox, { key: index }, char))))
+      /* @__PURE__ */ React43.createElement(arrange_default, { gap: "small" }, /* @__PURE__ */ React43.createElement(text_default, { size: "small", fontWeight: "medium" }, content), shortcut && /* @__PURE__ */ React43.createElement(arrange_default, { gap: "xsmall" }, shortcut.map((char, index) => /* @__PURE__ */ React43.createElement(ShortcutBox, { key: index }, char))))
     ))
   ));
 };
@@ -7692,7 +7695,7 @@ var TabsNav = styled36.div`
   }
 `;
 var TabsNavPilled = styled36.div`
-  ${getRadius("200")};
+  border-radius: var(--ds-radius-xlarge, var(--lns-radius-200));
   background-color: var(--lns-color-backgroundSecondary);
 
   padding: var(--lns-space-xsmall);
@@ -7737,7 +7740,7 @@ var TabWrapper = styled36.button`
   color: inherit;
   text-decoration: none;
   flex-shrink: 0;
-  ${getFontWeight("bold")};
+  font-weight: var(--ds-font-weight-medium);
   transition: 0.6s color;
   white-space: nowrap;
   color: ${(props) => getColorValue(
@@ -7762,7 +7765,7 @@ var TabWrapper = styled36.button`
 
   &::after {
     bottom: 0;
-    ${getRadius("medium")};
+    border-radius: 0;
     content: '';
     height: var(--activeIndicatorHeight);
     position: absolute;
@@ -7777,7 +7780,7 @@ var TabWrapperPilled = styled36.button`
   font: inherit;
   background: transparent;
   border: none;
-  ${getRadius("175")};
+  border-radius: var(--ds-radius-large, var(--lns-radius-175));
   cursor: pointer;
   display: inline-flex;
   align-items: center;
@@ -7787,7 +7790,7 @@ var TabWrapperPilled = styled36.button`
   color: inherit;
   text-decoration: none;
   flex-shrink: 0;
-  ${getFontWeight("bold")};
+  font-weight: var(--ds-font-weight-medium);
 
   transition: 0.6s color;
   white-space: nowrap;
@@ -8063,13 +8066,13 @@ var PillWrapper = styled37.div`
   grid-auto-flow: column;
   align-items: center;
   vertical-align: middle;
-  padding: 0 ${u(1.5)};
+  padding: 0 var(--ds-space-100);
   min-height: ${u(3.25)};
   color: ${(props) => getColorValue(props.color)};
   background-color: ${(props) => getColorValue(props.backgroundColor)};
-  ${getRadius("100")};
+  border-radius: var(--ds-radius-medium);
   ${getTextSize("small")};
-  ${getFontWeight("bold")};
+  font-weight: var(--ds-font-weight-medium);
   ${getSize("gap", "xsmall")};
 `;
 var Pill = (_a) => {
@@ -8128,9 +8131,9 @@ var placements2 = {
 };
 var Wrapper2 = styled38.div`
   position: relative;
-  width: fit-content;
   // transform forces the popover to calculate the position from the trigger instead of the viewport
   transform: translate(0);
+  width: ${(props) => props.width};
   z-index: ${(props) => props.childrenZIndex};
 `;
 var ContentWrapper2 = styled38.div`
@@ -8149,7 +8152,8 @@ var Popover = (_a) => {
     rootId,
     boundaryElement = "body",
     transitionDuration = 0,
-    transitionDelay = 0
+    transitionDelay = 0,
+    width = "fit-content"
   } = _b, props = __objRest(_b, [
     "children",
     "content",
@@ -8162,7 +8166,8 @@ var Popover = (_a) => {
     "rootId",
     "boundaryElement",
     "transitionDuration",
-    "transitionDelay"
+    "transitionDelay",
+    "width"
   ]);
   const unitOffset = offset * unit;
   const unitBoundaryOffset = boundaryOffset * unit;
@@ -8211,10 +8216,20 @@ var Popover = (_a) => {
       opacity: stage === "enter" ? 1 : 0
     }
   };
-  return /* @__PURE__ */ React50.createElement(Wrapper2, __spreadProps(__spreadValues({ ref: reference }, props), { childrenZIndex }), children, shouldMount && /* @__PURE__ */ React50.createElement(React50.Fragment, null, !rootNode && /* @__PURE__ */ React50.createElement(ContentWrapper2, __spreadValues({}, contentProps), content), rootNode && ReactDOM.createPortal(
-    /* @__PURE__ */ React50.createElement(ContentWrapper2, __spreadValues({}, contentProps), content),
-    rootNode
-  )));
+  return /* @__PURE__ */ React50.createElement(
+    Wrapper2,
+    __spreadProps(__spreadValues({
+      ref: reference
+    }, props), {
+      childrenZIndex,
+      width
+    }),
+    children,
+    shouldMount && /* @__PURE__ */ React50.createElement(React50.Fragment, null, !rootNode && /* @__PURE__ */ React50.createElement(ContentWrapper2, __spreadValues({}, contentProps), content), rootNode && ReactDOM.createPortal(
+      /* @__PURE__ */ React50.createElement(ContentWrapper2, __spreadValues({}, contentProps), content),
+      rootNode
+    ))
+  );
 };
 var popover_default = Popover;
 
@@ -8424,7 +8439,7 @@ var ColorfulWrapper = styled41.div`
     height: ${u(14)};
     border-bottom: none;
     box-shadow: inset 0 0 0 1px var(--lns-color-border);
-    ${getRadius(100)};
+    border-radius: var(--ds-radius-small);
     margin-bottom: var(--lns-space-small);
   }
 
@@ -8457,7 +8472,7 @@ var ColorPickerContainer = styled41.div`
   position: relative;
   width: ${u(31)};
   background-color: var(--lns-color-overlay);
-  ${getRadius("250")};
+  border-radius: var(--ds-radius-large);
   box-shadow:
     0 0 0 1px var(--lns-color-border),
     var(--lns-shadow-medium);
@@ -8475,7 +8490,7 @@ var InputContainer = styled41.div`
     border: none;
     box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidth)
       var(--lns-color-formFieldBorder);
-    ${getRadius("150")};
+    border-radius: var(--ds-radius-medium);
     transition: 0.3s box-shadow;
     background-color: var(--lns-color-overlay);
     color: var(--lns-color-body);
@@ -8498,7 +8513,7 @@ var ColorBox = styled41.div`
   left: var(--lns-space-xsmall);
   top: var(--lns-space-xsmall);
   border: 1px solid rgba(0, 0, 0, 0.1);
-  ${getRadius("100")};
+  border-radius: var(--ds-radius-medium);
   background-color: ${(props) => props.color};
 `;
 var ButtonWrapper2 = styled41.div`
@@ -8518,7 +8533,7 @@ var Swatch = styled41.div`
   cursor: pointer;
   width: ${u(3)};
   height: ${u(3)};
-  ${getRadius("100")};
+  border-radius: var(--ds-radius-medium);
   background-color: ${(props) => props.color};
   border: ${(props) => props.selected === props.color ? "1px solid white" : "1px solid var(--lns-color-border)"};
   box-shadow: ${(props) => props.selected === props.color && "0 0 0 2px var(--lns-color-focusRing)"};