@loomhq/lens 11.15.0 → 11.15.2

package/dist/components/icon-button/icon-button.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 export declare const IconButtonBox: import("@emotion/styled").StyledComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IconButtonBoxProps, object>;
-declare const IconButton: ({ altText, icon, onClick, iconColor, isActive, isDisabled, size, ...props }: IconButtonProps & React.ComponentProps<typeof IconButtonBox>) => React.JSX.Element;
+declare const IconButton: ({ altText, icon, onClick, iconColor, backgroundColor, isActive, isDisabled, size, ...props }: IconButtonProps & React.ComponentProps<typeof IconButtonBox>) => React.JSX.Element;
 type IconButtonProps = {
     altText: string;
     icon?: React.ReactNode;
     onClick?: React.ReactEventHandler;
     iconColor?: string;
+    backgroundColor?: string;
     isActive?: boolean;
     isDisabled?: boolean;
     size?: 'small' | 'medium' | 'large';
@@ -13,5 +14,6 @@ type IconButtonProps = {
 type IconButtonBoxProps = {
     size?: 'small' | 'medium';
     isActive?: boolean;
+    backgroundColor?: string;
 };
 export default IconButton;

package/dist/icons/highlight-text.js

@@ -22,7 +22,7 @@ function SvgHighlightText(props) {
     "path",
     {
       d: "M5 4H6C6.79565 4 7.55871 4.31607 8.12132 4.87868C8.68393 5.44129 9 6.20435 9 7C9 6.20435 9.31607 5.44129 9.87868 4.87868C10.4413 4.31607 11.2044 4 12 4H13",
-      stroke: "#111019",
+      stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
@@ -32,7 +32,7 @@ function SvgHighlightText(props) {
     "path",
     {
       d: "M13 20H12C11.2044 20 10.4413 19.6839 9.87868 19.1213C9.31607 18.5587 9 17.7956 9 17C9 17.7956 8.68393 18.5587 8.12132 19.1213C7.55871 19.6839 6.79565 20 6 20H5",
-      stroke: "#111019",
+      stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
@@ -42,7 +42,7 @@ function SvgHighlightText(props) {
     "path",
     {
       d: "M5 16H4C3.46957 16 2.96086 15.7893 2.58579 15.4142C2.21071 15.0391 2 14.5304 2 14V10C2 9.46957 2.21071 8.96086 2.58579 8.58579C2.96086 8.21071 3.46957 8 4 8H5",
-      stroke: "#111019",
+      stroke: "currentColor",
       fill: "none",
       strokeWidth: "2",
       strokeLinecap: "round",
@@ -52,7 +52,7 @@ function SvgHighlightText(props) {
     "path",
     {
       d: "M13 8H20C20.5304 8 21.0391 8.21071 21.4142 8.58579C21.7893 8.96086 22 9.46957 22 10V14C22 14.5304 21.7893 15.0391 21.4142 15.4142C21.0391 15.7893 20.5304 16 20 16H13",
-      stroke: "#111019",
+      stroke: "currentColor",
       fill: "none",
       strokeWidth: "2",
       strokeLinecap: "round",
@@ -62,7 +62,7 @@ function SvgHighlightText(props) {
     "path",
     {
       d: "M9 7V17",
-      stroke: "#111019",
+      stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",

package/dist/icons/index.js

@@ -2607,7 +2607,7 @@ function SvgHighlightText(props) {
     "path",
     {
       d: "M5 4H6C6.79565 4 7.55871 4.31607 8.12132 4.87868C8.68393 5.44129 9 6.20435 9 7C9 6.20435 9.31607 5.44129 9.87868 4.87868C10.4413 4.31607 11.2044 4 12 4H13",
-      stroke: "#111019",
+      stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
@@ -2617,7 +2617,7 @@ function SvgHighlightText(props) {
     "path",
     {
       d: "M13 20H12C11.2044 20 10.4413 19.6839 9.87868 19.1213C9.31607 18.5587 9 17.7956 9 17C9 17.7956 8.68393 18.5587 8.12132 19.1213C7.55871 19.6839 6.79565 20 6 20H5",
-      stroke: "#111019",
+      stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
@@ -2627,7 +2627,7 @@ function SvgHighlightText(props) {
     "path",
     {
       d: "M5 16H4C3.46957 16 2.96086 15.7893 2.58579 15.4142C2.21071 15.0391 2 14.5304 2 14V10C2 9.46957 2.21071 8.96086 2.58579 8.58579C2.96086 8.21071 3.46957 8 4 8H5",
-      stroke: "#111019",
+      stroke: "currentColor",
       fill: "none",
       strokeWidth: "2",
       strokeLinecap: "round",
@@ -2637,7 +2637,7 @@ function SvgHighlightText(props) {
     "path",
     {
       d: "M13 8H20C20.5304 8 21.0391 8.21071 21.4142 8.58579C21.7893 8.96086 22 9.46957 22 10V14C22 14.5304 21.7893 15.0391 21.4142 15.4142C21.0391 15.7893 20.5304 16 20 16H13",
-      stroke: "#111019",
+      stroke: "currentColor",
       fill: "none",
       strokeWidth: "2",
       strokeLinecap: "round",
@@ -2647,7 +2647,7 @@ function SvgHighlightText(props) {
     "path",
     {
       d: "M9 7V17",
-      stroke: "#111019",
+      stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "2",
       strokeLinecap: "round",
@@ -4360,45 +4360,29 @@ var SvgTask = () => /* @__PURE__ */ React191.createElement("svg", { viewBox: "0
 
 // src/components/icon/available-icons/thumbs-down.tsx
 import React192 from "react";
-var SvgThumbsDown = () => /* @__PURE__ */ React192.createElement(
-  "svg",
+var SvgThumbsDown = () => /* @__PURE__ */ React192.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React192.createElement(
+  "path",
   {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor"
-  },
-  /* @__PURE__ */ React192.createElement(
-    "path",
-    {
-      d: "M12.2574 9.65011L9.65746 15.5C9.1403 15.5 8.64432 15.2946 8.27863 14.9289C7.91294 14.5632 7.7075 14.0672 7.7075 13.55V10.9501H4.02856C3.84013 10.9522 3.65348 10.9134 3.48155 10.8362C3.30963 10.759 3.15653 10.6454 3.03287 10.5032C2.90922 10.361 2.81796 10.1936 2.76542 10.0126C2.71287 9.83166 2.70031 9.64142 2.72859 9.45511L3.62557 3.60521C3.67258 3.29523 3.83004 3.01268 4.06893 2.80963C4.30781 2.60657 4.61204 2.49669 4.92555 2.50023H12.2574M12.2574 9.65011V2.50023M12.2574 9.65011H13.9929C14.3608 9.65661 14.7182 9.52782 14.9974 9.28818C15.2766 9.04854 15.458 8.71473 15.5074 8.35013V3.80021C15.458 3.43561 15.2766 3.1018 14.9974 2.86216C14.7182 2.62252 14.3608 2.49373 13.9929 2.50023H12.2574",
-      stroke: "#111019",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )
-);
+    d: "M12.2574 9.65011L9.65746 15.5C9.1403 15.5 8.64432 15.2946 8.27863 14.9289C7.91294 14.5632 7.7075 14.0672 7.7075 13.55V10.9501H4.02856C3.84013 10.9522 3.65348 10.9134 3.48155 10.8362C3.30963 10.759 3.15653 10.6454 3.03287 10.5032C2.90922 10.361 2.81796 10.1936 2.76542 10.0126C2.71287 9.83166 2.70031 9.64142 2.72859 9.45511L3.62557 3.60521C3.67258 3.29523 3.83004 3.01268 4.06893 2.80963C4.30781 2.60657 4.61204 2.49669 4.92555 2.50023H12.2574M12.2574 9.65011V2.50023M12.2574 9.65011H13.9929C14.3608 9.65661 14.7182 9.52782 14.9974 9.28818C15.2766 9.04854 15.458 8.71473 15.5074 8.35013V3.80021C15.458 3.43561 15.2766 3.1018 14.9974 2.86216C14.7182 2.62252 14.3608 2.49373 13.9929 2.50023H12.2574",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
 
 // src/components/icon/available-icons/thumbs-up.tsx
 import React193 from "react";
-var SvgThumbsUp = () => /* @__PURE__ */ React193.createElement(
-  "svg",
+var SvgThumbsUp = () => /* @__PURE__ */ React193.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React193.createElement(
+  "path",
   {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor"
-  },
-  /* @__PURE__ */ React193.createElement(
-    "path",
-    {
-      d: "M5.74998 8.34996L8.34996 2.5C8.86713 2.5 9.36312 2.70544 9.72881 3.07114C10.0945 3.43683 10.3 3.93282 10.3 4.44999V7.04997H13.9789C14.1674 7.04784 14.354 7.0867 14.5259 7.16386C14.6979 7.24103 14.851 7.35465 14.9746 7.49685C15.0983 7.63906 15.1895 7.80645 15.2421 7.98743C15.2946 8.16841 15.3072 8.35864 15.2789 8.54496L14.3819 14.3949C14.3349 14.7049 14.1775 14.9875 13.9386 15.1905C13.6997 15.3936 13.3954 15.5035 13.0819 15.4999H5.74998M5.74998 8.34996V15.4999M5.74998 8.34996H3.79999C3.45521 8.34996 3.12455 8.48693 2.88076 8.73072C2.63696 8.97452 2.5 9.30517 2.5 9.64995V14.1999C2.5 14.5447 2.63696 14.8754 2.88076 15.1192C3.12455 15.363 3.45521 15.4999 3.79999 15.4999H5.74998",
-      stroke: "#111019",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )
-);
+    d: "M5.74998 8.34996L8.34996 2.5C8.86713 2.5 9.36312 2.70544 9.72881 3.07114C10.0945 3.43683 10.3 3.93282 10.3 4.44999V7.04997H13.9789C14.1674 7.04784 14.354 7.0867 14.5259 7.16386C14.6979 7.24103 14.851 7.35465 14.9746 7.49685C15.0983 7.63906 15.1895 7.80645 15.2421 7.98743C15.2946 8.16841 15.3072 8.35864 15.2789 8.54496L14.3819 14.3949C14.3349 14.7049 14.1775 14.9875 13.9386 15.1905C13.6997 15.3936 13.3954 15.5035 13.0819 15.4999H5.74998M5.74998 8.34996V15.4999M5.74998 8.34996H3.79999C3.45521 8.34996 3.12455 8.48693 2.88076 8.73072C2.63696 8.97452 2.5 9.30517 2.5 9.64995V14.1999C2.5 14.5447 2.63696 14.8754 2.88076 15.1192C3.12455 15.363 3.45521 15.4999 3.79999 15.4999H5.74998",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
 
 // src/components/icon/available-icons/timer.tsx
 import * as React194 from "react";

package/dist/icons/thumbs-down.js

@@ -1,23 +1,15 @@
 // src/components/icon/available-icons/thumbs-down.tsx
 import React from "react";
-var SvgThumbsDown = () => /* @__PURE__ */ React.createElement(
-  "svg",
+var SvgThumbsDown = () => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(
+  "path",
   {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor"
-  },
-  /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      d: "M12.2574 9.65011L9.65746 15.5C9.1403 15.5 8.64432 15.2946 8.27863 14.9289C7.91294 14.5632 7.7075 14.0672 7.7075 13.55V10.9501H4.02856C3.84013 10.9522 3.65348 10.9134 3.48155 10.8362C3.30963 10.759 3.15653 10.6454 3.03287 10.5032C2.90922 10.361 2.81796 10.1936 2.76542 10.0126C2.71287 9.83166 2.70031 9.64142 2.72859 9.45511L3.62557 3.60521C3.67258 3.29523 3.83004 3.01268 4.06893 2.80963C4.30781 2.60657 4.61204 2.49669 4.92555 2.50023H12.2574M12.2574 9.65011V2.50023M12.2574 9.65011H13.9929C14.3608 9.65661 14.7182 9.52782 14.9974 9.28818C15.2766 9.04854 15.458 8.71473 15.5074 8.35013V3.80021C15.458 3.43561 15.2766 3.1018 14.9974 2.86216C14.7182 2.62252 14.3608 2.49373 13.9929 2.50023H12.2574",
-      stroke: "#111019",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )
-);
+    d: "M12.2574 9.65011L9.65746 15.5C9.1403 15.5 8.64432 15.2946 8.27863 14.9289C7.91294 14.5632 7.7075 14.0672 7.7075 13.55V10.9501H4.02856C3.84013 10.9522 3.65348 10.9134 3.48155 10.8362C3.30963 10.759 3.15653 10.6454 3.03287 10.5032C2.90922 10.361 2.81796 10.1936 2.76542 10.0126C2.71287 9.83166 2.70031 9.64142 2.72859 9.45511L3.62557 3.60521C3.67258 3.29523 3.83004 3.01268 4.06893 2.80963C4.30781 2.60657 4.61204 2.49669 4.92555 2.50023H12.2574M12.2574 9.65011V2.50023M12.2574 9.65011H13.9929C14.3608 9.65661 14.7182 9.52782 14.9974 9.28818C15.2766 9.04854 15.458 8.71473 15.5074 8.35013V3.80021C15.458 3.43561 15.2766 3.1018 14.9974 2.86216C14.7182 2.62252 14.3608 2.49373 13.9929 2.50023H12.2574",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
 export {
   SvgThumbsDown
 };

package/dist/icons/thumbs-up.js

@@ -1,23 +1,15 @@
 // src/components/icon/available-icons/thumbs-up.tsx
 import React from "react";
-var SvgThumbsUp = () => /* @__PURE__ */ React.createElement(
-  "svg",
+var SvgThumbsUp = () => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, /* @__PURE__ */ React.createElement(
+  "path",
   {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    fill: "currentColor"
-  },
-  /* @__PURE__ */ React.createElement(
-    "path",
-    {
-      d: "M5.74998 8.34996L8.34996 2.5C8.86713 2.5 9.36312 2.70544 9.72881 3.07114C10.0945 3.43683 10.3 3.93282 10.3 4.44999V7.04997H13.9789C14.1674 7.04784 14.354 7.0867 14.5259 7.16386C14.6979 7.24103 14.851 7.35465 14.9746 7.49685C15.0983 7.63906 15.1895 7.80645 15.2421 7.98743C15.2946 8.16841 15.3072 8.35864 15.2789 8.54496L14.3819 14.3949C14.3349 14.7049 14.1775 14.9875 13.9386 15.1905C13.6997 15.3936 13.3954 15.5035 13.0819 15.4999H5.74998M5.74998 8.34996V15.4999M5.74998 8.34996H3.79999C3.45521 8.34996 3.12455 8.48693 2.88076 8.73072C2.63696 8.97452 2.5 9.30517 2.5 9.64995V14.1999C2.5 14.5447 2.63696 14.8754 2.88076 15.1192C3.12455 15.363 3.45521 15.4999 3.79999 15.4999H5.74998",
-      stroke: "#111019",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )
-);
+    d: "M5.74998 8.34996L8.34996 2.5C8.86713 2.5 9.36312 2.70544 9.72881 3.07114C10.0945 3.43683 10.3 3.93282 10.3 4.44999V7.04997H13.9789C14.1674 7.04784 14.354 7.0867 14.5259 7.16386C14.6979 7.24103 14.851 7.35465 14.9746 7.49685C15.0983 7.63906 15.1895 7.80645 15.2421 7.98743C15.2946 8.16841 15.3072 8.35864 15.2789 8.54496L14.3819 14.3949C14.3349 14.7049 14.1775 14.9875 13.9386 15.1905C13.6997 15.3936 13.3954 15.5035 13.0819 15.4999H5.74998M5.74998 8.34996V15.4999M5.74998 8.34996H3.79999C3.45521 8.34996 3.12455 8.48693 2.88076 8.73072C2.63696 8.97452 2.5 9.30517 2.5 9.64995V14.1999C2.5 14.5447 2.63696 14.8754 2.88076 15.1192C3.12455 15.363 3.45521 15.4999 3.79999 15.4999H5.74998",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }
+));
 export {
   SvgThumbsUp
 };

package/dist/index.js

@@ -2505,7 +2505,9 @@ var sizeStyles = {
   }
 };
 var IconButtonBox = styled13.button`
-  background-color: ${(props) => props.isActive ? getColorValue("backgroundActive") : "transparent"};
+  background-color: ${(props) => getColorValue(
+  props.isActive ? "backgroundActive" : props.backgroundColor
+) || "transparent"};
   border: none;
   appearance: none;
   cursor: pointer;
@@ -2561,6 +2563,7 @@ var IconButton = (_a) => {
     icon,
     onClick,
     iconColor = "body",
+    backgroundColor,
     isActive,
     isDisabled,
     size = "medium"
@@ -2569,6 +2572,7 @@ var IconButton = (_a) => {
     "icon",
     "onClick",
     "iconColor",
+    "backgroundColor",
     "isActive",
     "isDisabled",
     "size"
@@ -2580,7 +2584,8 @@ var IconButton = (_a) => {
       onClick,
       isActive,
       disabled: isDisabled,
-      size
+      size,
+      backgroundColor
     }, props),
     /* @__PURE__ */ React16.createElement(
       icon_default,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "11.15.0",
+  "version": "11.15.2",
   "packageManager": "pnpm@8.9.2",
   "scripts": {
     "preinstall": "npx only-allow pnpm",