@loomhq/lens 12.18.0 → 12.19.0

package/dist/cjs/index.js

@@ -1244,18 +1244,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)`,
@@ -2265,6 +2265,7 @@ var Avatar = (_a) => {
     size = 4,
     letter,
     imageSrc,
+    imageLoading,
     children,
     themeColor = "blue"
   } = _b, props = __objRest(_b, [
@@ -2272,6 +2273,7 @@ var Avatar = (_a) => {
     "size",
     "letter",
     "imageSrc",
+    "imageLoading",
     "children",
     "themeColor"
   ]);
@@ -2289,7 +2291,8 @@ var Avatar = (_a) => {
           alt: altText,
           src: imageSrc,
           height,
-          width
+          width,
+          loading: imageLoading
         }
       );
     }
@@ -2339,11 +2342,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)}
@@ -2495,24 +2493,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) => import_react10.css`
@@ -2607,7 +2608,6 @@ var widthStyles = (props) => ({
     min-width: max-content;
   `
 });
-var iconGap = u(1);
 var ButtonWrapper = import_styled5.default.button`
   appearance: none;
   padding: 0
@@ -2621,7 +2621,7 @@ var ButtonWrapper = import_styled5.default.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"};
@@ -2727,7 +2727,7 @@ var Button = (_a) => {
     {
       hasLoader,
       paddingLeft: "0",
-      paddingRight: children ? iconGap : "0"
+      paddingRight: children ? sizesStyles[size].iconGap : "0"
     },
     /* @__PURE__ */ import_react11.default.createElement(
       icon_default,
@@ -2743,7 +2743,7 @@ var Button = (_a) => {
     IconSection,
     {
       hasLoader,
-      paddingLeft: children ? iconGap : "0",
+      paddingLeft: children ? sizesStyles[size].iconGap : "0",
       paddingRight: "unset"
     },
     /* @__PURE__ */ import_react11.default.createElement(
@@ -3084,21 +3084,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),
@@ -3108,7 +3108,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) => {
@@ -3538,17 +3538,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 = import_styled14.default.button`
@@ -3689,7 +3689,7 @@ var CheckboxInput = import_styled15.default.input`
     cursor: pointer;
 
     & ~ .CheckboxBox {
-      border: 2px solid ${getColorValue("body")};
+      border: 2px solid ${(props) => getColorValue(props.borderColor || "body")};
     }
 
     &:checked ~ .CheckboxBox,
@@ -3746,14 +3746,16 @@ var Checkbox = (0, import_react21.forwardRef)(
       isIndeterminate,
       onFocus,
       onChange,
-      onBlur
+      onBlur,
+      borderColor
     } = _b, props = __objRest(_b, [
       "isDisabled",
       "isChecked",
       "isIndeterminate",
       "onFocus",
       "onChange",
-      "onBlur"
+      "onBlur",
+      "borderColor"
     ]);
     const defaultRef = (0, import_react21.useRef)();
     const checkboxRef = ref || defaultRef;
@@ -3773,7 +3775,8 @@ var Checkbox = (0, import_react21.forwardRef)(
         onChange,
         onBlur,
         ref: checkboxRef,
-        "aria-checked": isChecked
+        "aria-checked": isChecked,
+        borderColor
       }, props)
     ), /* @__PURE__ */ import_react21.default.createElement(CheckboxBox, { className: "CheckboxBox" }, /* @__PURE__ */ import_react21.default.createElement(SvgCheckboxMinus, { className: "Icon IconMinus", color: iconColor }), /* @__PURE__ */ import_react21.default.createElement(SvgCheckboxCheck, { className: "Icon IconCheck", color: iconColor })));
   }
@@ -3789,21 +3792,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 = import_styled16.default.button`
@@ -3819,7 +3822,7 @@ var TextButtonWrapper = import_styled16.default.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};
@@ -4021,7 +4024,7 @@ var MenuContainer = import_styled17.default.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 = import_styled17.default.div`
@@ -4040,10 +4043,10 @@ var MenuItemWrapper = import_styled17.default.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;
@@ -4138,7 +4141,7 @@ var MenuItem = (_a) => {
       showDeselectIcon
     }, updatedProps),
     icon && (typeof icon === "string" ? /* @__PURE__ */ import_react24.default.createElement(container_default, { radius: "50", width: 3, height: 3, overflow: "hidden" }, /* @__PURE__ */ import_react24.default.createElement(align_default, { alignment: "center" }, /* @__PURE__ */ import_react24.default.createElement(Image2, { src: icon, alt: "", isDisabled }))) : /* @__PURE__ */ import_react24.default.createElement(icon_default, { icon, color })),
-    /* @__PURE__ */ import_react24.default.createElement(text_default, { color, hasEllipsis: true }, children),
+    /* @__PURE__ */ import_react24.default.createElement(text_default, { fontWeight: "medium", color, hasEllipsis: true }, children),
     isSelected && /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, /* @__PURE__ */ import_react24.default.createElement("span", { className: "check-icon", "aria-hidden": "true" }, /* @__PURE__ */ import_react24.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react24.default.createElement(SvgCheck, null), color })), /* @__PURE__ */ import_react24.default.createElement("span", { className: "deselect-icon", "aria-hidden": "true" }, /* @__PURE__ */ import_react24.default.createElement(icon_default, { icon: /* @__PURE__ */ import_react24.default.createElement(SvgClose, null), color })))
   );
 };
@@ -4247,12 +4250,12 @@ var SelectHeaderWrapper = import_styled19.default.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)"};
 
@@ -4956,7 +4959,7 @@ var ModalCardWrapper = import_styled21.default.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};
@@ -5359,11 +5362,11 @@ var import_styled23 = __toESM(require("@emotion/styled"));
 var import_react32 = __toESM(require("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"
   }
 };
@@ -5375,7 +5378,7 @@ var TextareaWrapper = import_styled23.default.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)};
@@ -5549,9 +5552,9 @@ var TypeaheadInputField = import_styled24.default.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)"};
 
@@ -6849,7 +6852,7 @@ var ToastWrapper = import_styled30.default.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")};
@@ -6861,7 +6864,7 @@ var ToastWrapper = import_styled30.default.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;
@@ -6936,8 +6939,8 @@ var tooltipYPadding = (tooltipMinHeight - textHeight) / 2;
 var TooltipBoxWrapper = import_styled31.default.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)};
@@ -6947,9 +6950,9 @@ var TooltipBoxWrapper = import_styled31.default.div`
 `;
 var ShortcutWrapper = import_styled31.default.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)};
@@ -7135,7 +7138,7 @@ var Tooltip = (_a) => {
         role: "tooltip",
         id: tooltipId
       }, rest),
-      /* @__PURE__ */ import_react45.default.createElement(arrange_default, { gap: "small" }, /* @__PURE__ */ import_react45.default.createElement(text_default, { size: "small", fontWeight: "bold" }, content), shortcut && /* @__PURE__ */ import_react45.default.createElement(arrange_default, { gap: "xsmall" }, shortcut.map((char, index) => /* @__PURE__ */ import_react45.default.createElement(ShortcutBox, { key: index }, char))))
+      /* @__PURE__ */ import_react45.default.createElement(arrange_default, { gap: "small" }, /* @__PURE__ */ import_react45.default.createElement(text_default, { size: "small", fontWeight: "medium" }, content), shortcut && /* @__PURE__ */ import_react45.default.createElement(arrange_default, { gap: "xsmall" }, shortcut.map((char, index) => /* @__PURE__ */ import_react45.default.createElement(ShortcutBox, { key: index }, char))))
     ))
   ));
 };
@@ -7944,7 +7947,7 @@ var TabsNav = import_styled36.default.div`
   }
 `;
 var TabsNavPilled = import_styled36.default.div`
-  ${getRadius("200")};
+  border-radius: var(--ds-radius-xlarge, var(--lns-radius-200));
   background-color: var(--lns-color-backgroundSecondary);
 
   padding: var(--lns-space-xsmall);
@@ -7989,7 +7992,7 @@ var TabWrapper = import_styled36.default.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(
@@ -8014,7 +8017,7 @@ var TabWrapper = import_styled36.default.button`
 
   &::after {
     bottom: 0;
-    ${getRadius("medium")};
+    border-radius: 0;
     content: '';
     height: var(--activeIndicatorHeight);
     position: absolute;
@@ -8029,7 +8032,7 @@ var TabWrapperPilled = import_styled36.default.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;
@@ -8039,7 +8042,7 @@ var TabWrapperPilled = import_styled36.default.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;
@@ -8315,13 +8318,13 @@ var PillWrapper = import_styled37.default.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) => {
@@ -8373,9 +8376,9 @@ var placements2 = {
 };
 var Wrapper2 = import_styled38.default.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 = import_styled38.default.div`
@@ -8394,7 +8397,8 @@ var Popover = (_a) => {
     rootId,
     boundaryElement = "body",
     transitionDuration = 0,
-    transitionDelay = 0
+    transitionDelay = 0,
+    width = "fit-content"
   } = _b, props = __objRest(_b, [
     "children",
     "content",
@@ -8407,7 +8411,8 @@ var Popover = (_a) => {
     "rootId",
     "boundaryElement",
     "transitionDuration",
-    "transitionDelay"
+    "transitionDelay",
+    "width"
   ]);
   const unitOffset = offset * unit;
   const unitBoundaryOffset = boundaryOffset * unit;
@@ -8456,10 +8461,20 @@ var Popover = (_a) => {
       opacity: stage === "enter" ? 1 : 0
     }
   };
-  return /* @__PURE__ */ import_react54.default.createElement(Wrapper2, __spreadProps(__spreadValues({ ref: reference }, props), { childrenZIndex }), children, shouldMount && /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, !rootNode && /* @__PURE__ */ import_react54.default.createElement(ContentWrapper2, __spreadValues({}, contentProps), content), rootNode && import_react_dom2.default.createPortal(
-    /* @__PURE__ */ import_react54.default.createElement(ContentWrapper2, __spreadValues({}, contentProps), content),
-    rootNode
-  )));
+  return /* @__PURE__ */ import_react54.default.createElement(
+    Wrapper2,
+    __spreadProps(__spreadValues({
+      ref: reference
+    }, props), {
+      childrenZIndex,
+      width
+    }),
+    children,
+    shouldMount && /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, !rootNode && /* @__PURE__ */ import_react54.default.createElement(ContentWrapper2, __spreadValues({}, contentProps), content), rootNode && import_react_dom2.default.createPortal(
+      /* @__PURE__ */ import_react54.default.createElement(ContentWrapper2, __spreadValues({}, contentProps), content),
+      rootNode
+    ))
+  );
 };
 var popover_default = Popover;
 
@@ -8669,7 +8684,7 @@ var ColorfulWrapper = import_styled41.default.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);
   }
 
@@ -8702,7 +8717,7 @@ var ColorPickerContainer = import_styled41.default.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);
@@ -8720,7 +8735,7 @@ var InputContainer = import_styled41.default.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);
@@ -8743,7 +8758,7 @@ var ColorBox = import_styled41.default.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 = import_styled41.default.div`
@@ -8763,7 +8778,7 @@ var Swatch = import_styled41.default.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)"};