@vitality-ds/components 5.6.0-alpha.2 → 5.6.0

package/dist/Breadcrumbs/components/Breadcrumb/hooks/useIsOverflowing.js

@@ -10,7 +10,7 @@ var _lodashEs = require("lodash-es");
 var _react = require("react");
 var _logic = require("../logic");
 var useIsOverflowing = function useIsOverflowing() {
-  var overflowContainerRef = (0, _react.useRef)(null);
+  var overflowContainerRef = (0, _react.useRef)();
   var _useState = (0, _react.useState)(undefined),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isOverflowing = _useState2[0],

package/dist/Button/constants.js

@@ -9,36 +9,43 @@ var APPEARANCES = exports.APPEARANCES = {
   standard: {
     color: "neutral",
     variant: "subtle",
-    spinnerColor: null
+    spinnerColor: null,
+    shortcutsVariant: "onUiElementBackground"
   },
   onSurface: {
     color: "neutral",
     variant: "onSurface",
-    spinnerColor: null
+    spinnerColor: null,
+    shortcutsVariant: "onSurfaceBackground"
   },
   primary: {
     color: "primary",
     variant: "solid",
-    spinnerColor: "primary"
+    spinnerColor: "primary",
+    shortcutsVariant: "onSolidBackground"
   },
   destructive: {
     color: "critical",
     variant: "solid",
-    spinnerColor: "critical"
+    spinnerColor: "critical",
+    shortcutsVariant: "onSolidBackground"
   },
   warning: {
     color: "warning",
     variant: "solid",
-    spinnerColor: "warning"
+    spinnerColor: "warning",
+    shortcutsVariant: "onSolidBackground"
   },
   ghost: {
     color: "neutral",
     variant: "ghost",
-    spinnerColor: null
+    spinnerColor: null,
+    shortcutsVariant: "ghost"
   },
   link: {
     color: "primary",
     variant: "link",
-    spinnerColor: null
+    spinnerColor: null,
+    shortcutsVariant: "link"
   }
 };

package/dist/Button/index.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _logic = require("./logic");
 var _primitives = _interopRequireDefault(require("./primitives"));
-var _excluded = ["appearance", "as", "children", "className", "css", "iconLeft", "iconRight", "size", "style", "variant", "isLoading"];
+var _excluded = ["appearance", "as", "children", "className", "css", "iconLeft", "iconRight", "size", "style", "variant", "isLoading", "shortcut"];
 var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? "standard" : _ref$appearance,
@@ -25,11 +25,13 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     style = _ref.style,
     ignoredVariant = _ref.variant,
     isLoading = _ref.isLoading,
+    shortcut = _ref.shortcut,
     restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var _getAppearance = (0, _logic.getAppearance)(appearance),
     color = _getAppearance.color,
     variant = _getAppearance.variant,
-    spinnerColor = _getAppearance.spinnerColor;
+    spinnerColor = _getAppearance.spinnerColor,
+    shortcutsVariant = _getAppearance.shortcutsVariant;
   return /*#__PURE__*/_react["default"].createElement(_primitives["default"], (0, _extends2["default"])({
     color: color,
     variant: variant,
@@ -38,7 +40,9 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     iconRight: iconRight,
     size: size,
     ref: ref,
-    isLoading: isLoading
+    isLoading: isLoading,
+    shortcut: shortcut,
+    shortcutsVariant: shortcutsVariant
   }, restProps), children);
 });
 Button.displayName = "Button";

package/dist/Button/logic.spec.js

@@ -7,7 +7,8 @@ describe("getAppearance", function () {
     expect(appearance).toEqual({
       color: "primary",
       variant: "solid",
-      spinnerColor: "primary"
+      spinnerColor: "primary",
+      shortcutsVariant: "onSolidBackground"
     });
   });
   it("should return the correct appearance object when given a valid key (destructive)", function () {
@@ -15,7 +16,8 @@ describe("getAppearance", function () {
     expect(appearance).toEqual({
       color: "critical",
       variant: "solid",
-      spinnerColor: "critical"
+      spinnerColor: "critical",
+      shortcutsVariant: "onSolidBackground"
     });
   });
   it("should return the correct appearance object when given a valid key (standard)", function () {
@@ -23,7 +25,8 @@ describe("getAppearance", function () {
     expect(appearance).toEqual({
       color: "neutral",
       variant: "subtle",
-      spinnerColor: null
+      spinnerColor: null,
+      shortcutsVariant: "onUiElementBackground"
     });
   });
   it("should return the correct appearance object when given a valid key (warning)", function () {
@@ -31,7 +34,8 @@ describe("getAppearance", function () {
     expect(appearance).toEqual({
       color: "warning",
       variant: "solid",
-      spinnerColor: "warning"
+      spinnerColor: "warning",
+      shortcutsVariant: "onSolidBackground"
     });
   });
   it("should return the correct appearance object when given a valid key (ghost)", function () {
@@ -39,7 +43,8 @@ describe("getAppearance", function () {
     expect(appearance).toEqual({
       color: "neutral",
       variant: "ghost",
-      spinnerColor: null
+      spinnerColor: null,
+      shortcutsVariant: "ghost"
     });
   });
   it("should return the correct appearance object when given a valid key (link)", function () {
@@ -47,7 +52,8 @@ describe("getAppearance", function () {
     expect(appearance).toEqual({
       color: "primary",
       variant: "link",
-      spinnerColor: null
+      spinnerColor: null,
+      shortcutsVariant: "link"
     });
   });
 });

package/dist/Button/primitives/index.js

@@ -8,10 +8,11 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
+var _Shortcuts = _interopRequireDefault(require("../../Shortcuts"));
 var _Spinner = _interopRequireDefault(require("../../Spinner"));
 var _ButtonIcon = require("../components/ButtonIcon");
 var _styled = require("./styled");
-var _excluded = ["as", "children", "className", "css", "iconLeft", "iconRight", "size", "style", "variant", "isLoading", "color", "spinnerColor"];
+var _excluded = ["as", "children", "className", "css", "iconLeft", "iconRight", "size", "style", "variant", "isLoading", "color", "spinnerColor", "shortcut", "shortcutsVariant"];
 var ButtonPrimitive = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var as = _ref.as,
     children = _ref.children,
@@ -26,19 +27,27 @@ var ButtonPrimitive = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     isLoading = _ref.isLoading,
     color = _ref.color,
     spinnerColor = _ref.spinnerColor,
+    shortcut = _ref.shortcut,
+    shortcutsVariant = _ref.shortcutsVariant,
     restProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_styled.BaseButton, (0, _extends2["default"])({
     ref: ref,
     size: size,
     isLoading: isLoading,
     color: color,
-    variant: variant
+    variant: variant,
+    hasShortcut: !!shortcut
   }, restProps), /*#__PURE__*/_react["default"].createElement(_styled.BaseContentContainer, {
     isLoading: isLoading
   }, iconLeft && /*#__PURE__*/_react["default"].createElement(_ButtonIcon.ButtonIcon, {
     spacing: "end",
     size: size
-  }, iconLeft), children, iconRight && /*#__PURE__*/_react["default"].createElement(_ButtonIcon.ButtonIcon, {
+  }, iconLeft), children, shortcut && /*#__PURE__*/_react["default"].createElement(_Shortcuts["default"], {
+    keys: shortcut,
+    variant: shortcutsVariant,
+    color: color,
+    combineKeys: true
+  }), iconRight && /*#__PURE__*/_react["default"].createElement(_ButtonIcon.ButtonIcon, {
     spacing: "start",
     size: size
   }, iconRight)), isLoading && /*#__PURE__*/_react["default"].createElement(_styled.BaseLoadingContainer, {

package/dist/Button/primitives/styles/BaseButton.styles.js

@@ -7,14 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _system = require("@vitality-ds/system");
-var _constants = require("../constants");
 var _helpers = require("./helpers");
 var text = _system.colorUseCases.text;
 var _default = exports["default"] = (0, _system.css)({
   fontFamily: "$button",
   fontSize: "$button",
   fontWeight: "$button",
-  lineHeight: "calc($button * 1em - (".concat(_constants.BUTTON_BORDER_WIDTH, " * 2))"),
+  lineHeight: "$button",
   letterSpacing: "$button",
   borderRadius: "$default",
   border: "none",
@@ -79,6 +78,11 @@ var _default = exports["default"] = (0, _system.css)({
       "true": {
         pointerEvents: "none"
       }
+    },
+    hasShortcut: {
+      "true": {
+        paddingInlineEnd: "$md"
+      }
     }
   },
   compoundVariants: [

package/dist/Button/primitives/styles/BaseContentContainer.styles.js

@@ -8,6 +8,9 @@ var _system = require("@vitality-ds/system");
 var _default = exports["default"] = (0, _system.css)({
   transition: "opacity 300ms",
   opacity: 1,
+  display: "flex",
+  gap: "$sm",
+  alignItems: "baseline",
   variants: {
     isLoading: {
       "true": {

package/dist/DropdownMenu/components/DropdownMenuItem/styles/BaseItem.styles.js

@@ -30,10 +30,13 @@ var _default = exports["default"] = (0, _system.css)((0, _defineProperty2["defau
 }), "&[aria-disabled='true']", (0, _defineProperty2["default"])({}, "&, ".concat(_styled2.BaseDropdownMenuItemIcon, ", ").concat(_styled.BaseShortcut), {
   color: (0, _system.getColorScaleValueByUseCase)("neutral", text.disabled),
   pointerEvents: "none"
-})), "&:hover:not([aria-disabled='true']), &:focus", (0, _defineProperty2["default"])((0, _defineProperty2["default"])({
-  backgroundColor: (0, _system.getColorScaleValueByUseCase)("primary", backgrounds.uiElementSolid)
-}, "&, ".concat(_styled2.BaseDropdownMenuItemIcon, ", ").concat(_styled.BaseShortcut), {
+})), "&:hover:not([aria-disabled='true']), &:focus", (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
+  backgroundColor: (0, _system.getColorScaleValueByUseCase)("primary", backgrounds.uiElementSolid),
   color: (0, _system.getColorScaleValueByUseCase)("primary", text.onSolidBackgrounds)
+}, "".concat(_styled2.BaseDropdownMenuItemIcon, ", ").concat(_styled.BaseShortcut), {
+  color: (0, _system.getColorScaleValueByUseCase)("primary", text.hiContrastOnSolidBackgrounds)
+}), "".concat(_styled.BaseShortcut), {
+  backgroundColor: (0, _system.getColorScaleValueByUseCase)("primary", backgrounds.uiElementSolid_selected)
 }), "outline", "none")), "&:active:not([aria-disabled='true'])", {
   backgroundColor: (0, _system.getColorScaleValueByUseCase)("primary", backgrounds.uiElementSolid_active)
 }), "&[data-state='open']", {

package/dist/Input/DatePicker/logic.js

@@ -32,7 +32,7 @@ var handleOnInteractOutside = exports.handleOnInteractOutside = function handleO
   return function (event) {
     // when we click outside the datepicker, check if it's the input field or the icon button
     var target = event.target;
-    if (target && allowedElementIds.includes(target === null || target === void 0 ? void 0 : target.id)) {
+    if (allowedElementIds.includes(target === null || target === void 0 ? void 0 : target.id)) {
       return;
     }
     setIsOpen(false);

package/dist/Input/RadioButtons/index.js

@@ -10,7 +10,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _RadioButton = _interopRequireDefault(require("./components/RadioButton"));
 var _styled = require("./styled");
-var _excluded = ["onChange", "options", "direction", "value", "name", "css", "asChild", "as", "style", "className", "disabled"];
+var _excluded = ["onChange", "options", "direction", "value", "name", "css", "asChild", "as", "style", "className", "disabled"],
+  _excluded2 = ["id", "disabled"];
 var RadioButtons = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardedRef) {
   var onChange = _ref.onChange,
     options = _ref.options,
@@ -35,15 +36,12 @@ var RadioButtons = /*#__PURE__*/_react["default"].forwardRef(function (_ref, for
   }, props), options === null || options === void 0 ? void 0 : options.map(function (_ref2) {
     var id = _ref2.id,
       optionDisabled = _ref2.disabled,
-      label = _ref2.label,
-      optionValue = _ref2.value;
-    return /*#__PURE__*/_react["default"].createElement(_RadioButton["default"], {
+      restProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+    return /*#__PURE__*/_react["default"].createElement(_RadioButton["default"], (0, _extends2["default"])({}, restProps, {
       key: id,
       id: id,
-      label: label,
-      value: optionValue,
       disabled: disabled || optionDisabled
-    });
+    }));
   }));
 });
 RadioButtons.displayName = "RadioButtons";

package/dist/Input/TextInput/components/ShortcutAdornment/index.js

@@ -8,9 +8,14 @@ exports["default"] = ShortcutAdornment;
 var _react = _interopRequireDefault(require("react"));
 var _Shortcuts = _interopRequireDefault(require("../../../../Shortcuts"));
 function ShortcutAdornment(_ref) {
-  var keys = _ref.keys;
+  var keys = _ref.keys,
+    combineKeys = _ref.combineKeys,
+    color = _ref.color,
+    variant = _ref.variant;
   return /*#__PURE__*/_react["default"].createElement(_Shortcuts["default"], {
-    variant: "stylized",
-    keys: keys
+    keys: keys,
+    combineKeys: combineKeys,
+    color: color,
+    variant: variant
   });
 }

package/dist/Shortcuts/constants.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WINDOWS_KEY_MAP = exports.MAC_KEY_MAP = void 0;
+/**
+ * Key mappings for platform-specific modifier keys.
+ * Mac uses symbols, Windows/Linux uses text labels.
+ */
+var MAC_KEY_MAP = exports.MAC_KEY_MAP = {
+  cmd: "⌘",
+  command: "⌘",
+  ctrl: "⌃",
+  control: "⌃",
+  alt: "⌥",
+  option: "⌥",
+  opt: "⌥",
+  shift: "⇧",
+  meta: "⌘",
+  enter: "⏎",
+  "return": "⏎"
+};
+var WINDOWS_KEY_MAP = exports.WINDOWS_KEY_MAP = {
+  cmd: "Ctrl",
+  command: "Ctrl",
+  ctrl: "Ctrl",
+  control: "Ctrl",
+  alt: "Alt",
+  option: "Alt",
+  opt: "Alt",
+  shift: "Shift",
+  meta: "Win",
+  enter: "Enter",
+  "return": "Enter"
+};

package/dist/Shortcuts/hooks/useOS.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _logic = require("../logic");
+/**
+ * Hook to detect the user's operating system.
+ * Uses the modern User-Agent Client Hints API (navigator.userAgentData).
+ *
+ * @returns The detected operating system: "mac" | "windows" | "linux" | "unknown"
+ *
+ * @example
+ * const os = useOS();
+ * const modifierKey = os === "mac" ? "⌘" : "Ctrl";
+ */
+var useOS = function useOS() {
+  var _useState = (0, _react.useState)("unknown"),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    os = _useState2[0],
+    setOS = _useState2[1];
+  (0, _react.useEffect)(function () {
+    setOS((0, _logic.getOS)());
+  }, []);
+  return os;
+};
+var _default = exports["default"] = useOS;

package/dist/Shortcuts/index.js

@@ -6,14 +6,39 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = Shortcuts;
 var _react = _interopRequireDefault(require("react"));
+var _useOS = _interopRequireDefault(require("./hooks/useOS"));
+var _logic = require("./logic");
 var _styled = require("./styled");
 function Shortcuts(_ref) {
-  var variant = _ref.variant,
-    keys = _ref.keys;
-  return /*#__PURE__*/_react["default"].createElement(_styled.BaseShortcutGroup, null, keys === null || keys === void 0 ? void 0 : keys.map(function (key) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "uiElement" : _ref$variant,
+    keys = _ref.keys,
+    combineKeys = _ref.combineKeys,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "neutral" : _ref$color;
+  var os = (0, _useOS["default"])();
+  var transformedKeys = (0, _logic.transformKeys)(keys !== null && keys !== void 0 ? keys : [], os);
+  if (combineKeys) {
+    var keyOccurrences = {};
+    return /*#__PURE__*/_react["default"].createElement(_styled.BaseShortcut, {
+      separateCombinedKeys: true,
+      as: "span",
+      variant: variant,
+      color: color
+    }, transformedKeys === null || transformedKeys === void 0 ? void 0 : transformedKeys.map(function (key) {
+      var _keyOccurrences$key;
+      keyOccurrences[key] = ((_keyOccurrences$key = keyOccurrences[key]) !== null && _keyOccurrences$key !== void 0 ? _keyOccurrences$key : 0) + 1;
+      var reactKey = "".concat(key, "-").concat(keyOccurrences[key]);
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+        key: reactKey
+      }, /*#__PURE__*/_react["default"].createElement("kbd", null, key));
+    }));
+  }
+  return /*#__PURE__*/_react["default"].createElement(_styled.BaseShortcutGroup, null, transformedKeys === null || transformedKeys === void 0 ? void 0 : transformedKeys.map(function (key) {
     return /*#__PURE__*/_react["default"].createElement(_styled.BaseShortcut, {
       key: key,
-      variant: variant
+      variant: variant,
+      color: color
     }, key);
   }));
 }

package/dist/Shortcuts/logic.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.transformKeys = exports.transformKey = exports.getOS = void 0;
+var _constants = require("./constants");
+var getOS = exports.getOS = function getOS() {
+  var _navigator$userAgentD, _navigator$userAgentD2, _navigator$userAgentD3;
+  if (typeof navigator === "undefined") return null;
+  var platform = (_navigator$userAgentD = (_navigator$userAgentD2 = navigator.userAgentData) === null || _navigator$userAgentD2 === void 0 ? void 0 : (_navigator$userAgentD3 = _navigator$userAgentD2.platform) === null || _navigator$userAgentD3 === void 0 ? void 0 : _navigator$userAgentD3.toLowerCase()) !== null && _navigator$userAgentD !== void 0 ? _navigator$userAgentD : null;
+  if (platform !== null && platform !== void 0 && platform.includes("mac")) return "mac";
+  if (platform !== null && platform !== void 0 && platform.includes("win")) return "windows";
+  if (platform !== null && platform !== void 0 && platform.includes("linux")) return "linux";
+  return platform;
+};
+
+/**
+ * Transforms a key label to its platform-specific representation.
+ *
+ * @param key - The key to transform (e.g., "cmd", "ctrl", "shift")
+ * @param os - The target operating system
+ * @returns The platform-appropriate key label
+ */
+var transformKey = exports.transformKey = function transformKey(key, os) {
+  var _keyMap$normalizedKey;
+  var normalizedKey = key.toLowerCase().trim();
+  var keyMap = os === "mac" ? _constants.MAC_KEY_MAP : _constants.WINDOWS_KEY_MAP;
+  return (_keyMap$normalizedKey = keyMap[normalizedKey]) !== null && _keyMap$normalizedKey !== void 0 ? _keyMap$normalizedKey : key;
+};
+
+/**
+ * Transforms an array of keys to their platform-specific representations.
+ *
+ * @param keys - Array of key labels
+ * @param os - The target operating system
+ * @returns Array of platform-appropriate key labels
+ *
+ * @example
+ * transformKeys(["cmd", "shift", "P"], "mac") // ["⌘", "⇧", "P"]
+ * transformKeys(["cmd", "shift", "P"], "windows") // ["Ctrl", "Shift", "P"]
+ */
+var transformKeys = exports.transformKeys = function transformKeys(keys, os) {
+  return keys.map(function (key) {
+    return transformKey(key, os);
+  });
+};

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"]);