@conveyorhq/arrow-ds 1.113.0 → 1.114.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@conveyorhq/arrow-ds",
   "author": "Conveyor",
   "license": "MIT",
-  "version": "1.113.0",
+  "version": "1.114.1",
   "description": "Arrow Design System",
   "repository": "https://github.com/conveyor/arrow-ds",
   "publishConfig": {

package/public/components/ConveyorLogo/ConveyorLogo.d.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { THEME } from "../../types";
 import { SvgProps } from "../Svg";
 export interface ConveyorLogoProps extends SvgProps {
@@ -7,4 +8,4 @@ export interface ConveyorLogoProps extends SvgProps {
     variant?: "icon" | "wordmark";
     color?: string;
 }
-export declare const ConveyorLogo: ({ height, monochrome, theme, variant, color, className, ...rest }: ConveyorLogoProps) => JSX.Element;
+export declare const ConveyorLogo: React.ForwardRefExoticComponent<ConveyorLogoProps & React.RefAttributes<SVGSVGElement>>;

package/public/components/ConveyorLogo/ConveyorLogo.js

@@ -12,7 +12,7 @@ const WIDTH = 165;
 const HEIGHT = 32;
 const RATIO = WIDTH / HEIGHT;
 const widthFromHeight = (height) => Math.ceil(height * RATIO);
-const ConveyorLogo = ({ height = HEIGHT, monochrome = false, theme = types_1.THEME.PRODUCT, variant = "wordmark", color, className, ...rest }) => {
+exports.ConveyorLogo = react_1.default.forwardRef(({ height = HEIGHT, monochrome = false, theme = types_1.THEME.PRODUCT, variant = "wordmark", color, className, ...rest }, ref) => {
     const wordmarkColor = {
         brand: tokens_1.tokens.color.white,
         product: tokens_1.tokens.color.brandBlack,
@@ -27,7 +27,7 @@ const ConveyorLogo = ({ height = HEIGHT, monochrome = false, theme = types_1.THE
         return tokens_1.tokens.color.brandGreen[400];
     };
     const iconColor = iconColorFunction();
-    return (react_1.default.createElement(Svg_1.Svg, Object.assign({ width: variant === "wordmark" ? widthFromHeight(height) : height, height: height, viewBox: variant === "wordmark" ? `0 0 ${WIDTH} ${HEIGHT}` : "0 0 32 32", className: className }, rest),
+    return (react_1.default.createElement(Svg_1.Svg, Object.assign({ ref: ref, width: variant === "wordmark" ? widthFromHeight(height) : height, height: height, viewBox: variant === "wordmark" ? `0 0 ${WIDTH} ${HEIGHT}` : "0 0 32 32", className: className }, rest),
         variant === "wordmark" && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("path", { fill: wordmarkColor[theme], d: "M44.159 22.858c-3.914 0-5.732-3.663-5.732-9.087 0-4.222 1.286-8.388 5.144-8.388 2.796 0 4.389 2.125 5.228 5.088h3.076l-0.28-5.088c-1.789-1.51-4.669-2.349-7.884-2.349-6.626 0-11.91 4.473-11.91 11.603 0 6.263 4.11 10.764 11.938 10.764 3.411 0 6.43-0.783 8.36-2.125l0.503-6.039h-3.048c-1.146 3.774-2.768 5.62-5.396 5.62z" }),
             react_1.default.createElement("path", { fill: wordmarkColor[theme], d: "M62.261 23.361c-1.789 0-2.6-2.88-2.6-6.85 0-3.075 0.419-5.088 2.013-5.088 1.789 0 2.6 2.88 2.6 6.85 0 3.075-0.42 5.088-2.013 5.088zM61.674 25.402c5.116 0 8.779-3.187 8.779-8.276 0-4.362-3.215-7.745-8.192-7.745-5.116 0-8.779 3.187-8.779 8.276 0 4.362 3.215 7.745 8.192 7.745z" }),
@@ -48,5 +48,4 @@ const ConveyorLogo = ({ height = HEIGHT, monochrome = false, theme = types_1.THE
             react_1.default.createElement("path", { fill: iconColor, d: "M31.314 15.338l-7.709-2.523c-1.98-0.64-3.471-2.149-4.105-4.12s-0.299-4.075 0.911-5.75l1.212-1.677c1.363 0.582 2.629 1.349 3.767 2.27-0.512 0.704-1.032 1.403-1.555 2.099-0.802 1.066-0.321 2.608 0.946 3.015l5.558 1.785c0.567 1.536 0.906 3.184 0.976 4.901z" }),
             react_1.default.createElement("path", { fill: iconColor, d: "M14.89 0.008c0.169-0.005 0.339-0.008 0.509-0.008 1.534 0 3.017 0.218 4.421 0.624l-4.725 6.537c-1.211 1.675-3.098 2.645-5.159 2.648s-3.949-0.956-5.166-2.651l-1.287-1.776c0.971-1.099 2.091-2.063 3.327-2.859l1.565 2.223c0.764 1.085 2.365 1.090 3.135 0.008l3.379-4.747z" }),
             react_1.default.createElement("path", { fill: iconColor, d: "M0.145 11.383c0.487-1.624 1.223-3.14 2.165-4.502l4.823 6.663c1.217 1.695 1.548 3.795 0.906 5.745-0.636 1.99-2.137 3.487-4.097 4.124l-2.253 0.733c-0.737-1.249-1.31-2.608-1.689-4.046l2.681-0.912c1.244-0.423 1.711-1.948 0.93-3.009-1.168-1.589-2.318-3.193-3.466-4.797z" })))));
-};
-exports.ConveyorLogo = ConveyorLogo;
+});

package/public/css/styles.css

@@ -1808,20 +1808,19 @@ override built-in Image component classes */
 }
 
 .ads-Button--product.ads-Button--utility {
-  --tw-border-opacity: 1;
-  border-color: rgb(185 200 210 / var(--tw-border-opacity));
+  border-color: transparent;
   --tw-bg-opacity: 1;
-  background-color: rgb(244 247 249 / var(--tw-bg-opacity));
+  background-color: rgb(222 231 238 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(134 163 181 / var(--tw-text-opacity));
+  color: rgb(71 104 125 / var(--tw-text-opacity));
 }
 
 .ads-Button--product.ads-Button--utility:hover, 
 .ads-Button--product.ads-Button--utility:active, 
 .ads-Button--product.ads-Button--utility:focus, 
 .ads-Button--product.ads-Button--utility.ads-Button--depressed {
-  --tw-bg-opacity: 1;
-  background-color: rgb(222 231 238 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(32 65 86 / var(--tw-text-opacity));
 }
 
 .ads-Button--product.ads-Button--danger {
@@ -1865,7 +1864,8 @@ override built-in Image component classes */
   height: 24px;
   padding-left: 8px;
   padding-right: 8px;
-  font-size: 12px;
+
+  font-size: 10px;
 }
 
 .ads-Button--product.ads-Button--medium {
@@ -1885,7 +1885,8 @@ override built-in Image component classes */
 .ads-Button--product.ads-Button--iconOnly--small {
   height: 24px;
   width: 24px;
-  font-size: 12px;
+
+  font-size: 10px;
 }
 
 .ads-Button--product.ads-Button--iconOnly--medium {