@conveyorhq/arrow-ds 1.77.1 → 1.78.1

package/package.json

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

package/public/components/Reference/Reference.d.ts

@@ -10,6 +10,7 @@ export interface ReferenceProps {
     badgeVariant?: STATUS_VARIANT;
     badgeLabel?: string;
     noLink?: boolean;
+    reverse?: boolean;
     [key: string]: any;
 }
 export declare type ReferenceWithReferenceGroup = ForwardRefExoticComponent<ReferenceProps> & {

package/public/components/Reference/Reference.js

@@ -31,9 +31,8 @@ const Icon_1 = require("../Icon");
 const Badge_1 = require("../Badge");
 const cn = "Reference";
 const ReferenceGroup = ({ className, ...rest }) => (react_1.default.createElement(Box_1.Box, Object.assign({ className: classnames_1.default(bem_1.bem(`${cn}Group`), className) }, rest)));
-exports.Reference = react_1.forwardRef(({ as: Component = "a", disabled, className, icon, iconPrefix, badgeVariant, badgeLabel, children, target, noLink, ...rest }, ref) => (react_1.default.createElement(Component, Object.assign({ className: classnames_1.default(bem_1.bem(cn), !noLink && bem_1.bem(cn, { m: "isLink" }), disabled && bem_1.bem(cn, { m: "disabled" }), className), disabled: Component === "button" && disabled, target: target, rel: `${target === "_blank" ? "noopener noreferrer" : ""}`, ref: ref }, rest),
-    icon && (react_1.default.createElement(Box_1.Box, null,
-        react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default(bem_1.bem(cn, { e: "icon" })), icon: icon, prefix: iconPrefix }))),
+exports.Reference = react_1.forwardRef(({ as: Component = "a", disabled, className, icon, iconPrefix, badgeVariant, badgeLabel, children, target, noLink, reverse = false, ...rest }, ref) => (react_1.default.createElement(Component, Object.assign({ className: classnames_1.default(bem_1.bem(cn), !noLink && bem_1.bem(cn, { m: "isLink" }), disabled && bem_1.bem(cn, { m: "disabled" }), reverse && "flex-row-reverse", className), disabled: Component === "button" && disabled, target: target, rel: `${target === "_blank" ? "noopener noreferrer" : ""}`, ref: ref }, rest),
+    icon && (react_1.default.createElement(Icon_1.Icon, { className: classnames_1.default(bem_1.bem(cn, { e: "icon" })), icon: icon, prefix: iconPrefix })),
     children,
     badgeLabel && (react_1.default.createElement(Badge_1.Badge, { className: classnames_1.default(bem_1.bem(cn, { e: "badge" })), variant: badgeVariant, size: Badge_1.BADGE_SIZE.MICRO }, badgeLabel)))));
 exports.Reference.Group = ReferenceGroup;

package/public/css/styles.css

@@ -4725,8 +4725,8 @@ override built-in Image component classes */
 }
 
 .ads-Modal-tabs {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-left: 24px;
+  padding-right: 24px;
 }
 
 .ads-Modal-body {
@@ -5364,6 +5364,7 @@ override built-in Image component classes */
 .ads-Reference {
   display: flex;
   align-items: center;
+  gap: 4px;
   white-space: nowrap;
   border-radius: 3px;
   border-width: 1px;
@@ -5373,7 +5374,8 @@ override built-in Image component classes */
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   padding-left: 4px;
   padding-right: 4px;
-  font-size: 13px;
+  font-size: 12px;
+  line-height: 1.25;
   transition-duration: 200ms;
 
   height: 22px;
@@ -5403,27 +5405,17 @@ override built-in Image component classes */
 }
 
 .ads-Reference-icon {
-  margin-right: 4px;
-  padding-right: 1px;
-}
+  --tw-text-opacity: 1;
+  color: rgb(71 104 125 / var(--tw-text-opacity));
 
-.ads-Reference-badge {
-  margin-left: 8px;
+  font-size: 0.75em;
 }
 
 .ads-ReferenceGroup {
-  margin-bottom: -4px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-}
-
-.ads-ReferenceGroup > * {
-  margin-bottom: 4px;
-}
-
-.ads-ReferenceGroup > *:not(:last-child) {
-  margin-right: 4px;
+  gap: 4px;
 }
 
 .ads-ScrollPane {