@vitality-ds/components 5.5.0 → 5.6.0

package/dist/Shortcuts/logic.spec.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _constants = require("./constants");
+var _logic = require("./logic");
+describe("Shortcuts logic", function () {
+  describe("getOS", function () {
+    var originalNavigator = global.navigator;
+    afterEach(function () {
+      Object.defineProperty(global, "navigator", {
+        value: originalNavigator,
+        writable: true
+      });
+    });
+    it("should return null when navigator is undefined", function () {
+      Object.defineProperty(global, "navigator", {
+        value: undefined,
+        writable: true
+      });
+      expect((0, _logic.getOS)()).toBeNull();
+    });
+    it("should return 'mac' when platform includes 'mac'", function () {
+      Object.defineProperty(global, "navigator", {
+        value: {
+          userAgentData: {
+            platform: "macOS"
+          }
+        },
+        writable: true
+      });
+      expect((0, _logic.getOS)()).toBe("mac");
+    });
+    it("should return 'windows' when platform includes 'win'", function () {
+      Object.defineProperty(global, "navigator", {
+        value: {
+          userAgentData: {
+            platform: "Windows"
+          }
+        },
+        writable: true
+      });
+      expect((0, _logic.getOS)()).toBe("windows");
+    });
+    it("should return 'linux' when platform includes 'linux'", function () {
+      Object.defineProperty(global, "navigator", {
+        value: {
+          userAgentData: {
+            platform: "Linux"
+          }
+        },
+        writable: true
+      });
+      expect((0, _logic.getOS)()).toBe("linux");
+    });
+    it("should return the platform string when platform is not recognized", function () {
+      Object.defineProperty(global, "navigator", {
+        value: {
+          userAgentData: {
+            platform: "ChromeOS"
+          }
+        },
+        writable: true
+      });
+      expect((0, _logic.getOS)()).toBe("chromeos");
+    });
+    it("should return null when userAgentData is undefined", function () {
+      Object.defineProperty(global, "navigator", {
+        value: {
+          userAgentData: undefined
+        },
+        writable: true
+      });
+      expect((0, _logic.getOS)()).toBeNull();
+    });
+  });
+  describe("transformKey", function () {
+    describe("on Mac", function () {
+      var os = "mac";
+      it.each(Object.entries(_constants.MAC_KEY_MAP))("should transform '%s' to '%s'", function (input, expected) {
+        expect((0, _logic.transformKey)(input, os)).toBe(expected);
+      });
+      it("should handle uppercase input", function () {
+        expect((0, _logic.transformKey)("CMD", os)).toBe("⌘");
+        expect((0, _logic.transformKey)("SHIFT", os)).toBe("⇧");
+        expect((0, _logic.transformKey)("CTRL", os)).toBe("⌃");
+      });
+      it("should handle input with whitespace", function () {
+        expect((0, _logic.transformKey)("  cmd  ", os)).toBe("⌘");
+        expect((0, _logic.transformKey)(" shift ", os)).toBe("⇧");
+      });
+      it("should return the original key if not in the map", function () {
+        expect((0, _logic.transformKey)("P", os)).toBe("P");
+        expect((0, _logic.transformKey)("Escape", os)).toBe("Escape");
+        expect((0, _logic.transformKey)("F5", os)).toBe("F5");
+      });
+    });
+    describe("on Windows", function () {
+      var os = "windows";
+      it.each(Object.entries(_constants.WINDOWS_KEY_MAP))("should transform '%s' to '%s'", function (input, expected) {
+        expect((0, _logic.transformKey)(input, os)).toBe(expected);
+      });
+      it("should handle uppercase input", function () {
+        expect((0, _logic.transformKey)("CMD", os)).toBe("Ctrl");
+        expect((0, _logic.transformKey)("SHIFT", os)).toBe("Shift");
+        expect((0, _logic.transformKey)("CTRL", os)).toBe("Ctrl");
+      });
+      it("should return the original key if not in the map", function () {
+        expect((0, _logic.transformKey)("P", os)).toBe("P");
+        expect((0, _logic.transformKey)("Escape", os)).toBe("Escape");
+      });
+    });
+    describe("on Linux", function () {
+      var os = "linux";
+      it("should use Windows key map for Linux", function () {
+        expect((0, _logic.transformKey)("cmd", os)).toBe("Ctrl");
+        expect((0, _logic.transformKey)("shift", os)).toBe("Shift");
+        expect((0, _logic.transformKey)("alt", os)).toBe("Alt");
+      });
+    });
+    describe("on null OS", function () {
+      var os = null;
+      it("should use Windows key map for null OS", function () {
+        expect((0, _logic.transformKey)("cmd", os)).toBe("Ctrl");
+        expect((0, _logic.transformKey)("shift", os)).toBe("Shift");
+      });
+    });
+  });
+  describe("transformKeys", function () {
+    it("should transform an array of keys for Mac", function () {
+      var result = (0, _logic.transformKeys)(["cmd", "shift", "P"], "mac");
+      expect(result).toEqual(["⌘", "⇧", "P"]);
+    });
+    it("should transform an array of keys for Windows", function () {
+      var result = (0, _logic.transformKeys)(["cmd", "shift", "P"], "windows");
+      expect(result).toEqual(["Ctrl", "Shift", "P"]);
+    });
+    it("should handle an empty array", function () {
+      var result = (0, _logic.transformKeys)([], "mac");
+      expect(result).toEqual([]);
+    });
+    it("should handle mixed mapped and unmapped keys", function () {
+      var result = (0, _logic.transformKeys)(["ctrl", "alt", "Delete", "F5"], "mac");
+      expect(result).toEqual(["⌃", "⌥", "Delete", "F5"]);
+    });
+    it("should preserve order of keys", function () {
+      var result = (0, _logic.transformKeys)(["shift", "cmd", "alt", "K"], "mac");
+      expect(result).toEqual(["⇧", "⌘", "⌥", "K"]);
+    });
+  });
+});

package/dist/Shortcuts/styled.js

@@ -8,5 +8,5 @@ exports.BaseShortcutGroup = exports.BaseShortcut = void 0;
 var _system = require("@vitality-ds/system");
 var _BaseShortcut = _interopRequireDefault(require("./styles/BaseShortcut.styles"));
 var _BaseShortcutGroup = _interopRequireDefault(require("./styles/BaseShortcutGroup.styles"));
-var BaseShortcut = exports.BaseShortcut = (0, _system.styled)("span", _BaseShortcut["default"]);
-var BaseShortcutGroup = exports.BaseShortcutGroup = (0, _system.styled)("span", _BaseShortcutGroup["default"]);
+var BaseShortcut = exports.BaseShortcut = (0, _system.styled)("kbd", _BaseShortcut["default"]);
+var BaseShortcutGroup = exports.BaseShortcutGroup = (0, _system.styled)("kbd", _BaseShortcutGroup["default"]);

package/dist/Shortcuts/styles/BaseShortcut.styles.js

@@ -5,29 +5,314 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _system = require("@vitality-ds/system");
-var text = _system.colorUseCases.text,
-  borders = _system.colorUseCases.borders;
+var _helpers = require("./helpers");
 var _default = exports["default"] = (0, _system.css)({
-  fontSize: "$caption",
-  fontFamily: 'SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace',
-  color: (0, _system.getColorScaleValueByUseCase)("neutralA", text.lowContrast),
-  minWidth: ".625rem",
+  $$fontSize: "$fontSizes$caption",
+  $$paddingHorizontal: "$space$sm",
+  fontSize: "$$fontSize",
+  fontWeight: "$caption",
+  "&, kbd": {
+    fontFamily: "$body",
+    lineHeight: "$caption",
+    boxSizing: "border-box"
+  },
+  borderRadius: "$default",
+  display: "inline-flex",
+  padding: "$xs $$paddingHorizontal",
+  justifyContent: "center",
+  alignItems: "center",
+  alignSelf: "center",
+  minWidth: "calc($$fontSize + $$paddingHorizontal * 2)",
   variants: {
-    variant: {
-      stylized: {
-        borderRadius: 2,
-        borderStyle: "solid",
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        borderWidth: "1px 1px 3px",
-        borderColor: (0, _system.getColorScaleValueByUseCase)("neutralA", borders.uiElement)
-      },
-      color: {
-        inherit: {
-          color: "inherit"
-        }
+    /**
+     * When combinedKeys = true, adds spacing between characters
+     */
+    separateCombinedKeys: {
+      "true": {
+        gap: "$xs"
       }
+    },
+    /**
+     * The stylistic changes in the element (Internal Prop - Not Exposed)
+     * Note that these variants are empty on purpose
+     * to allow for the compound variants
+     */
+    variant: {
+      uiElement: {},
+      uiElementSolid: {},
+      onSolidBackground: {},
+      onUiElementBackground: {},
+      onSurfaceBackground: {},
+      ghost: {},
+      link: {}
+    },
+    /**
+     * The tint of the element (Internal Prop - Not Exposed)
+     * Note that these variants are empty on purpose
+     * to allow for the compound variants
+     */
+    color: {
+      neutral: {},
+      primary: {},
+      critical: {},
+      success: {},
+      warning: {},
+      info: {},
+      brand: {},
+      accent: {}
     }
-  }
+  },
+  compoundVariants: [
+  /**
+   * Standard Variants
+   */
+  {
+    color: "neutral",
+    variant: "uiElement",
+    css: (0, _helpers.getUiElementVariant)("neutral")
+  }, {
+    color: "primary",
+    variant: "uiElement",
+    css: (0, _helpers.getUiElementVariant)("primary")
+  }, {
+    color: "success",
+    variant: "uiElement",
+    css: (0, _helpers.getUiElementVariant)("success")
+  }, {
+    color: "warning",
+    variant: "uiElement",
+    css: (0, _helpers.getUiElementVariant)("warning")
+  }, {
+    color: "critical",
+    variant: "uiElement",
+    css: (0, _helpers.getUiElementVariant)("critical")
+  }, {
+    color: "info",
+    variant: "uiElement",
+    css: (0, _helpers.getUiElementVariant)("info")
+  }, {
+    color: "brand",
+    variant: "uiElement",
+    css: (0, _helpers.getUiElementVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "uiElement",
+    css: (0, _helpers.getUiElementVariant)("accent")
+  },
+  /**
+   * Solid Variants
+   */
+  {
+    color: "neutral",
+    variant: "uiElementSolid",
+    css: (0, _helpers.getSolidVariant)("neutral")
+  }, {
+    color: "primary",
+    variant: "uiElementSolid",
+    css: (0, _helpers.getSolidVariant)("primary")
+  }, {
+    color: "success",
+    variant: "uiElementSolid",
+    css: (0, _helpers.getSolidVariant)("success")
+  }, {
+    color: "warning",
+    variant: "uiElementSolid",
+    css: (0, _helpers.getSolidVariant)("warning")
+  }, {
+    color: "critical",
+    variant: "uiElementSolid",
+    css: (0, _helpers.getSolidVariant)("critical")
+  }, {
+    color: "info",
+    variant: "uiElementSolid",
+    css: (0, _helpers.getSolidVariant)("info")
+  }, {
+    color: "brand",
+    variant: "uiElementSolid",
+    css: (0, _helpers.getSolidVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "uiElementSolid",
+    css: (0, _helpers.getSolidVariant)("accent")
+  },
+  /**
+   * onUiElementBackground Variants
+   */
+  {
+    color: "neutral",
+    variant: "onUiElementBackground",
+    css: (0, _helpers.getOnUiElementBackgroundVariant)("neutral")
+  }, {
+    color: "primary",
+    variant: "onUiElementBackground",
+    css: (0, _helpers.getOnUiElementBackgroundVariant)("primary")
+  }, {
+    color: "success",
+    variant: "onUiElementBackground",
+    css: (0, _helpers.getOnUiElementBackgroundVariant)("success")
+  }, {
+    color: "warning",
+    variant: "onUiElementBackground",
+    css: (0, _helpers.getOnUiElementBackgroundVariant)("warning")
+  }, {
+    color: "critical",
+    variant: "onUiElementBackground",
+    css: (0, _helpers.getOnUiElementBackgroundVariant)("critical")
+  }, {
+    color: "info",
+    variant: "onUiElementBackground",
+    css: (0, _helpers.getOnUiElementBackgroundVariant)("info")
+  }, {
+    color: "brand",
+    variant: "onUiElementBackground",
+    css: (0, _helpers.getOnUiElementBackgroundVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "onUiElementBackground",
+    css: (0, _helpers.getOnUiElementBackgroundVariant)("accent")
+  },
+  /**
+   * OnSurface Variants
+   */
+  {
+    color: "neutral",
+    variant: "onSurfaceBackground",
+    css: (0, _helpers.getOnSurfaceVariant)("neutral")
+  }, {
+    color: "primary",
+    variant: "onSurfaceBackground",
+    css: (0, _helpers.getOnSurfaceVariant)("primary")
+  }, {
+    color: "success",
+    variant: "onSurfaceBackground",
+    css: (0, _helpers.getOnSurfaceVariant)("success")
+  }, {
+    color: "warning",
+    variant: "onSurfaceBackground",
+    css: (0, _helpers.getOnSurfaceVariant)("warning")
+  }, {
+    color: "critical",
+    variant: "onSurfaceBackground",
+    css: (0, _helpers.getOnSurfaceVariant)("critical")
+  }, {
+    color: "info",
+    variant: "onSurfaceBackground",
+    css: (0, _helpers.getOnSurfaceVariant)("info")
+  }, {
+    color: "brand",
+    variant: "onSurfaceBackground",
+    css: (0, _helpers.getOnSurfaceVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "onSurfaceBackground",
+    css: (0, _helpers.getOnSurfaceVariant)("accent")
+  },
+  /**
+   * Ghost Variants
+   */
+  {
+    color: "neutral",
+    variant: "ghost",
+    css: (0, _helpers.getGhostVariant)("neutralA")
+  }, {
+    color: "primary",
+    variant: "ghost",
+    css: (0, _helpers.getGhostVariant)("primary")
+  }, {
+    color: "success",
+    variant: "ghost",
+    css: (0, _helpers.getGhostVariant)("success")
+  }, {
+    color: "warning",
+    variant: "ghost",
+    css: (0, _helpers.getGhostVariant)("warning")
+  }, {
+    color: "critical",
+    variant: "ghost",
+    css: (0, _helpers.getGhostVariant)("critical")
+  }, {
+    color: "info",
+    variant: "ghost",
+    css: (0, _helpers.getGhostVariant)("info")
+  }, {
+    color: "brand",
+    variant: "ghost",
+    css: (0, _helpers.getGhostVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "ghost",
+    css: (0, _helpers.getGhostVariant)("accent")
+  },
+  /**
+   * Link Variants
+   */
+  {
+    color: "neutral",
+    variant: "link",
+    css: (0, _helpers.getLinkVariant)("neutralA")
+  }, {
+    color: "primary",
+    variant: "link",
+    css: (0, _helpers.getLinkVariant)("primary")
+  }, {
+    color: "success",
+    variant: "link",
+    css: (0, _helpers.getLinkVariant)("success")
+  }, {
+    color: "warning",
+    variant: "link",
+    css: (0, _helpers.getLinkVariant)("warning")
+  }, {
+    color: "critical",
+    variant: "link",
+    css: (0, _helpers.getLinkVariant)("critical")
+  }, {
+    color: "info",
+    variant: "link",
+    css: (0, _helpers.getLinkVariant)("info")
+  }, {
+    color: "brand",
+    variant: "link",
+    css: (0, _helpers.getLinkVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "link",
+    css: (0, _helpers.getLinkVariant)("accent")
+  },
+  /**
+   * Solid Variants
+   */
+  {
+    color: "neutral",
+    variant: "onSolidBackground",
+    css: (0, _helpers.getOnSolidBackgroundVariant)("neutral")
+  }, {
+    color: "primary",
+    variant: "onSolidBackground",
+    css: (0, _helpers.getOnSolidBackgroundVariant)("primary")
+  }, {
+    color: "success",
+    variant: "onSolidBackground",
+    css: (0, _helpers.getOnSolidBackgroundVariant)("success")
+  }, {
+    color: "warning",
+    variant: "onSolidBackground",
+    css: (0, _helpers.getOnSolidBackgroundVariant)("warning")
+  }, {
+    color: "critical",
+    variant: "onSolidBackground",
+    css: (0, _helpers.getOnSolidBackgroundVariant)("critical")
+  }, {
+    color: "info",
+    variant: "onSolidBackground",
+    css: (0, _helpers.getOnSolidBackgroundVariant)("info")
+  }, {
+    color: "brand",
+    variant: "onSolidBackground",
+    css: (0, _helpers.getOnSolidBackgroundVariant)("brand")
+  }, {
+    color: "accent",
+    variant: "onSolidBackground",
+    css: (0, _helpers.getOnSolidBackgroundVariant)("accent")
+  }]
 });

package/dist/Shortcuts/styles/BaseShortcutGroup.styles.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _system = require("@vitality-ds/system");
 var _default = exports["default"] = (0, _system.css)({
-  display: "flex",
-  userSelect: "none"
+  display: "inline-flex",
+  userSelect: "none",
+  gap: "$xs",
+  justifyContent: "center"
 });

package/dist/Shortcuts/styles/helpers.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getUiElementVariant = exports.getSolidVariant = exports.getOnUiElementBackgroundVariant = exports.getOnSurfaceVariant = exports.getOnSolidBackgroundVariant = exports.getLinkVariant = exports.getGhostVariant = void 0;
+var _system = require("@vitality-ds/system");
+var _tokens = require("@vitality-ds/tokens");
+var text = _tokens.colorUseCases.text,
+  backgrounds = _tokens.colorUseCases.backgrounds;
+var getUiElementVariant = exports.getUiElementVariant = function getUiElementVariant(colorScale) {
+  return {
+    color: (0, _system.getColorScaleValueByUseCase)(colorScale, text.lowContrast),
+    backgroundColor: (0, _system.getColorScaleValueByUseCase)(colorScale, backgrounds.uiElement)
+  };
+};
+var getSolidVariant = exports.getSolidVariant = function getSolidVariant(colorScale) {
+  return {
+    color: (0, _system.getColorScaleValueByUseCase)(colorScale, text.hiContrastOnSolidBackgrounds),
+    backgroundColor: (0, _system.getColorScaleValueByUseCase)(colorScale, backgrounds.uiElementSolid)
+  };
+};
+var getOnSolidBackgroundVariant = exports.getOnSolidBackgroundVariant = function getOnSolidBackgroundVariant(colorScale) {
+  return {
+    color: (0, _system.getColorScaleValueByUseCase)(colorScale, text.hiContrastOnSolidBackgrounds),
+    backgroundColor: (0, _system.getColorScaleValueByUseCase)(colorScale, backgrounds.blanket),
+    // Black alpha uses to maintain consistent indentation style
+    boxShadow: "0 0 2px 1px hsla(0, 100%, 0%, 0.4) inset"
+  };
+};
+var getOnUiElementBackgroundVariant = exports.getOnUiElementBackgroundVariant = function getOnUiElementBackgroundVariant(colorScale) {
+  return {
+    color: (0, _system.getColorScaleValueByUseCase)(colorScale, text.lowContrast),
+    backgroundColor: (0, _system.getColorScaleValueByUseCase)(colorScale, backgrounds.uiElement_active)
+  };
+};
+var getOnSurfaceVariant = exports.getOnSurfaceVariant = function getOnSurfaceVariant(colorScale) {
+  return {
+    color: (0, _system.getColorScaleValueByUseCase)(colorScale, text.hiSaturation),
+    backgroundColor: (0, _system.getColorScaleValueByUseCase)(colorScale, backgrounds.uiElementOnSurface)
+  };
+};
+var getGhostVariant = exports.getGhostVariant = function getGhostVariant(colorScale) {
+  return {
+    backgroundColor: "transparent",
+    color: (0, _system.getColorScaleValueByUseCase)(colorScale, text.lowContrast)
+  };
+};
+var getLinkVariant = exports.getLinkVariant = function getLinkVariant(colorScale) {
+  return {
+    backgroundColor: "transparent",
+    color: (0, _system.getColorScaleValueByUseCase)(colorScale, text.hiSaturation)
+  };
+};

package/dist/components/src/Button/logic.d.ts

@@ -8,13 +8,13 @@ export declare const getAppearance: (appearance: keyof Appearances) => {
     } & {
         [x: string]: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand";
     });
-    variant: "link" | "subtle" | "solid" | "onSurface" | "ghost" | ({
-        "@bp1"?: "link" | "subtle" | "solid" | "onSurface" | "ghost";
-        "@bp2"?: "link" | "subtle" | "solid" | "onSurface" | "ghost";
-        "@bp3"?: "link" | "subtle" | "solid" | "onSurface" | "ghost";
-        "@initial"?: "link" | "subtle" | "solid" | "onSurface" | "ghost";
+    variant: "link" | "subtle" | "solid" | "ghost" | "onSurface" | ({
+        "@bp1"?: "link" | "subtle" | "solid" | "ghost" | "onSurface";
+        "@bp2"?: "link" | "subtle" | "solid" | "ghost" | "onSurface";
+        "@bp3"?: "link" | "subtle" | "solid" | "ghost" | "onSurface";
+        "@initial"?: "link" | "subtle" | "solid" | "ghost" | "onSurface";
     } & {
-        [x: string]: "link" | "subtle" | "solid" | "onSurface" | "ghost";
+        [x: string]: "link" | "subtle" | "solid" | "ghost" | "onSurface";
     });
     spinnerColor: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand" | ({
         "@bp1"?: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand";
@@ -24,4 +24,12 @@ export declare const getAppearance: (appearance: keyof Appearances) => {
     } & {
         [x: string]: "neutral" | "primary" | "accent" | "success" | "info" | "warning" | "critical" | "brand";
     });
+    shortcutsVariant: "link" | "uiElement" | "uiElementSolid" | "onSolidBackground" | "onUiElementBackground" | "onSurfaceBackground" | "ghost" | ({
+        "@bp1"?: "link" | "uiElement" | "uiElementSolid" | "onSolidBackground" | "onUiElementBackground" | "onSurfaceBackground" | "ghost";
+        "@bp2"?: "link" | "uiElement" | "uiElementSolid" | "onSolidBackground" | "onUiElementBackground" | "onSurfaceBackground" | "ghost";
+        "@bp3"?: "link" | "uiElement" | "uiElementSolid" | "onSolidBackground" | "onUiElementBackground" | "onSurfaceBackground" | "ghost";
+        "@initial"?: "link" | "uiElement" | "uiElementSolid" | "onSolidBackground" | "onUiElementBackground" | "onSurfaceBackground" | "ghost";
+    } & {
+        [x: string]: "link" | "uiElement" | "uiElementSolid" | "onSolidBackground" | "onUiElementBackground" | "onSurfaceBackground" | "ghost";
+    });
 };

package/dist/components/src/Button/primitives/styled.d.ts

@@ -55,6 +55,11 @@ export declare const BaseButton: import("@stitches/react/types/styled-component"
                 pointerEvents: string;
             };
         };
+        hasShortcut: {
+            true: {
+                paddingInlineEnd: string;
+            };
+        };
     };
     compoundVariants: {
         color: string;
@@ -853,6 +858,9 @@ export declare const BaseButton: import("@stitches/react/types/styled-component"
 export declare const BaseContentContainer: import("@stitches/react/types/styled-component").StyledComponent<"span", import("@stitches/react/types/styled-component").StyledComponentProps<[import("@stitches/react/types/styled-component").CssComponent<never, import("@stitches/react/types/styled-component").StyledComponentProps<[{
     transition: string;
     opacity: number;
+    display: string;
+    gap: string;
+    alignItems: string;
     variants: {
         isLoading: {
             true: {

package/dist/components/src/Button/primitives/styles/BaseButton.styles.d.ts

@@ -68,6 +68,11 @@ declare const _default: import("@stitches/react/types/styled-component").CssComp
                 pointerEvents: string;
             };
         };
+        hasShortcut: {
+            true: {
+                paddingInlineEnd: string;
+            };
+        };
     };
     compoundVariants: {
         color: string;

package/dist/components/src/Button/primitives/styles/BaseContentContainer.styles.d.ts

@@ -1,6 +1,9 @@
 declare const _default: import("@stitches/react/types/styled-component").CssComponent<never, import("@stitches/react/types/styled-component").StyledComponentProps<[{
     transition: string;
     opacity: number;
+    display: string;
+    gap: string;
+    alignItems: string;
     variants: {
         isLoading: {
             true: {

package/dist/components/src/Button/primitives/types.d.ts

@@ -1,7 +1,10 @@
 /// <reference types="react" />
 import { ComponentProps, ExcludedProps, VariantProps } from "@vitality-ds/system";
+import { BaseShortcut } from "../../Shortcuts/styled";
+import { ShortcutsProps } from "../../Shortcuts/types";
 import { BaseSpinnerCircle } from "../../Spinner/styled";
 import { BaseButton } from "./styled";
+declare type ShortcutVariantOptions = VariantProps<typeof BaseShortcut>["variant"];
 export declare type ButtonPrimitiveProps = ExcludedProps & ComponentProps<typeof BaseButton> & {
     /**
      * Text contents of the component.
@@ -26,4 +29,7 @@ export declare type ButtonPrimitiveProps = ExcludedProps & ComponentProps<typeof
      * different visual styles.
      */
     spinnerColor?: VariantProps<typeof BaseSpinnerCircle>["color"];
+    shortcut?: ShortcutsProps["keys"];
+    shortcutsVariant?: ShortcutVariantOptions;
 };
+export {};