@loomhq/lens 12.3.0 → 12.3.2

package/dist/cjs/index.js

@@ -291,6 +291,7 @@ var hslaBaseColors = {
   blueLight: { h: 216.5, s: 92, l: 90.2, a: 1 },
   blue: { h: 215.4, s: 80, l: 47.65, a: 1 },
   blueDark: { h: 216.3, s: 69.2, l: 23, a: 1 },
+  magenta: { h: 323, s: 42, l: 48, a: 1 },
   orangeLight: { h: 4, s: 100, l: 91.2, a: 1 },
   orange: { h: 11, s: 100, l: 62.2, a: 1 },
   orangeDark: { h: 10.9, s: 100, l: 42.2, a: 1 },
@@ -4094,8 +4095,7 @@ var Select = (_a) => {
   }) => {
     return (
       // Don't set the role to combobox to ensure a consistent experience for screen readers
-      /* eslint-disable-next-line jsx-a11y/aria-role */
-      /* @__PURE__ */ import_react23.default.createElement("div", { role: null }, /* @__PURE__ */ import_react23.default.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ import_react23.default.createElement(
+      /* @__PURE__ */ import_react23.default.createElement("div", { role: "presentation" }, /* @__PURE__ */ import_react23.default.createElement("div", __spreadValues({}, triggerProps), trigger ? /* @__PURE__ */ import_react23.default.createElement(
         CustomHeader,
         {
           getToggleButtonProps,
@@ -4393,15 +4393,15 @@ var ModalCard = (_a) => {
     "removeClose",
     "initialFocus"
   ]);
-  (0, import_react26.useEffect)(() => {
-    const keyListener = (e) => {
-      if (e.key === "Escape") {
-        e.preventDefault();
-        if (!removeClose) {
-          onCloseClick(e);
-        }
+  const keyListener = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      if (!removeClose) {
+        onCloseClick(e);
       }
-    };
+    }
+  };
+  (0, import_react26.useEffect)(() => {
     window.addEventListener("keydown", keyListener);
     return () => {
       window.removeEventListener("keydown", keyListener);
@@ -4440,10 +4440,9 @@ var ModalCard = (_a) => {
       )),
       /* @__PURE__ */ import_react26.default.createElement(
         ModalCardChildrenSection,
-        {
-          tabIndex: removeClose ? 0 : -1,
+        __spreadProps(__spreadValues({}, removeClose ? { tabIndex: 0 } : { tabIndex: -1 }), {
           maxHeight
-        },
+        }),
         children
       )
     )
@@ -5200,8 +5199,7 @@ var Typeahead = (_a) => {
   }) => {
     return (
       // Don't set the role to combobox to ensure a consistent experience for screen readers
-      /* eslint-disable-next-line jsx-a11y/aria-role */
-      /* @__PURE__ */ import_react30.default.createElement("div", { role: null }, /* @__PURE__ */ import_react30.default.createElement("div", __spreadValues({}, triggerProps), /* @__PURE__ */ import_react30.default.createElement(
+      /* @__PURE__ */ import_react30.default.createElement("div", { role: "presentation" }, /* @__PURE__ */ import_react30.default.createElement("div", __spreadValues({}, triggerProps), /* @__PURE__ */ import_react30.default.createElement(
         TypeaheadHeader,
         {
           inputRef,
@@ -5495,21 +5493,18 @@ var Radio = (0, import_react32.forwardRef)(
       "onChange",
       "onBlur"
     ]);
-    return (
-      /* eslint-disable-next-line styled-components-a11y/label-has-associated-control */
-      /* @__PURE__ */ import_react32.default.createElement(RadioLabel, null, /* @__PURE__ */ import_react32.default.createElement(
-        RadioInput,
-        __spreadValues({
-          type: "radio",
-          disabled: isDisabled,
-          checked: isChecked,
-          onFocus,
-          onChange,
-          onBlur,
-          ref
-        }, props)
-      ), /* @__PURE__ */ import_react32.default.createElement(RadioBox, { className: "RadioBox" }))
-    );
+    return /* @__PURE__ */ import_react32.default.createElement(RadioLabel, { htmlFor: props.id }, /* @__PURE__ */ import_react32.default.createElement(
+      RadioInput,
+      __spreadValues({
+        type: "radio",
+        disabled: isDisabled,
+        checked: isChecked,
+        onFocus,
+        onChange,
+        onBlur,
+        ref
+      }, props)
+    ), /* @__PURE__ */ import_react32.default.createElement(RadioBox, { className: "RadioBox" }));
   }
 );
 var radio_default = Radio;
@@ -5638,30 +5633,27 @@ var Switch = (_a) => {
       "ariaLabelledby and ariaLabel serve the same purpose and therefore cannot be used at the same time. Choose the one that best suites your needs."
     );
   }
-  return (
-    /* eslint-disable-next-line styled-components-a11y/label-has-associated-control */
-    /* @__PURE__ */ import_react33.default.createElement(SwitchLabel, null, /* @__PURE__ */ import_react33.default.createElement(
-      SwitchInput,
-      __spreadProps(__spreadValues({}, props), {
-        checked: isActive,
-        disabled: isDisabled,
-        onChange,
-        type: "checkbox",
-        switchSize: size,
-        "aria-labelledby": ariaLabelledby,
-        "aria-label": ariaLabel,
-        "aria-checked": isActive
-      })
-    ), /* @__PURE__ */ import_react33.default.createElement(
-      SwitchBox,
-      {
-        className: "SwitchBox",
-        isDisabled,
-        isActive,
-        switchSize: size
-      }
-    ))
-  );
+  return /* @__PURE__ */ import_react33.default.createElement(SwitchLabel, { htmlFor: props.id }, /* @__PURE__ */ import_react33.default.createElement(
+    SwitchInput,
+    __spreadProps(__spreadValues({}, props), {
+      checked: isActive,
+      disabled: isDisabled,
+      onChange,
+      type: "checkbox",
+      switchSize: size,
+      "aria-labelledby": ariaLabelledby,
+      "aria-label": ariaLabel,
+      "aria-checked": isActive
+    })
+  ), /* @__PURE__ */ import_react33.default.createElement(
+    SwitchBox,
+    {
+      className: "SwitchBox",
+      isDisabled,
+      isActive,
+      switchSize: size
+    }
+  ));
 };
 var switch_default = Switch;
 
@@ -6047,10 +6039,10 @@ var Toast = ({
     }, toastDuration);
     return () => clearTimeout(timer);
   }, [isOpen]);
-  return /* @__PURE__ */ import_react41.default.createElement(import_react41.default.Fragment, null, isOpen && /* eslint-disable-next-line styled-components-a11y/click-events-have-key-events, styled-components-a11y/no-static-element-interactions */
-  /* @__PURE__ */ import_react41.default.createElement(
+  return /* @__PURE__ */ import_react41.default.createElement(import_react41.default.Fragment, null, isOpen && /* @__PURE__ */ import_react41.default.createElement(
     ToastWrapper,
     {
+      role: "presentation",
       onClick: (e) => e.stopPropagation(),
       zIndex,
       isOpen,
@@ -6134,6 +6126,7 @@ var TooltipBox = (_a) => {
     "zIndex"
   ]);
   return (
+    // These are being added to hide the tooltip when users hover over
     /* eslint-disable-next-line styled-components-a11y/no-static-element-interactions */
     /* @__PURE__ */ import_react42.default.createElement(
       TooltipBoxWrapper,
@@ -6740,19 +6733,24 @@ var ListRow = (_a) => {
     "href"
   ]);
   const classNameFromProp = className ? ` ${className}` : ``;
-  return (
-    /* eslint-disable styled-components-a11y/no-static-element-interactions, styled-components-a11y/click-events-have-key-events */
-    /* @__PURE__ */ import_react48.default.createElement(
-      ListRowWrapper,
-      __spreadValues({
-        className: `ListRowWrapper${classNameFromProp}`,
-        as: htmlTag,
-        backgroundColor,
-        onClick,
-        href
-      }, props),
-      children
-    )
+  return /* @__PURE__ */ import_react48.default.createElement(
+    ListRowWrapper,
+    __spreadValues({
+      role: "row",
+      className: `ListRowWrapper${classNameFromProp}`,
+      as: htmlTag,
+      backgroundColor,
+      onClick,
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          onClick(e);
+        }
+      },
+      href
+    }, props),
+    children
   );
 };
 var formatColumns = (columns) => columns.map((columnValue) => getSizeValue(columnValue)).join(" ");
@@ -7479,17 +7477,22 @@ var Swatch = import_styled40.default.div`
 `;
 var SwatchSelector = ({ swatches, currentColor, onSwatchClick }) => {
   const selectedSwatch = swatches.includes(currentColor) && currentColor;
-  return /* @__PURE__ */ import_react55.default.createElement(SwatchesContainer, null, swatches.map((swatch) => (
-    /* eslint-disable styled-components-a11y/click-events-have-key-events, styled-components-a11y/no-static-element-interactions */
-    /* @__PURE__ */ import_react55.default.createElement(
-      Swatch,
-      {
-        key: swatch,
-        color: swatch,
-        selected: selectedSwatch,
-        onClick: () => onSwatchClick(swatch)
+  return /* @__PURE__ */ import_react55.default.createElement(SwatchesContainer, null, swatches.map((swatch) => /* @__PURE__ */ import_react55.default.createElement(
+    Swatch,
+    {
+      key: swatch,
+      color: swatch,
+      selected: selectedSwatch,
+      onClick: () => onSwatchClick(swatch),
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          onSwatchClick(swatch);
+        }
       }
-    )
+    }
   )));
 };
 var ColorSelector = ({ color, setColor }) => {