@shapesos/clay 0.3.1 → 0.4.0

package/dist/index.cjs

@@ -16345,6 +16345,7 @@ __export(src_exports, {
   Chat: () => Chat,
   Icon: () => Icon,
   IconButton: () => IconButton,
+  KeyboardShortcut: () => KeyboardShortcut,
   Lottie: () => Lottie,
   colors: () => colors,
   fontFamilies: () => fontFamilies,
@@ -17411,12 +17412,34 @@ var Chat = {
   Composer: ChatComposer
 };
 
+// src/keyboard-shortcut/keyboard-shortcut-styles.ts
+var import_styled_components9 = __toESM(require("styled-components"), 1);
+var Wrapper = import_styled_components9.default.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+`;
+var Key = import_styled_components9.default.kbd`
+  padding: 1px 4px;
+  border-radius: 4px;
+  border: 1px solid ${colors["brown-70"]};
+  border-bottom-width: 2px;
+  ${typographyMixin(typographyTypes.GEIST_LABEL_CAPTION_MEDIUM)};
+  color: inherit;
+`;
+
+// src/keyboard-shortcut/keyboard-shortcut.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function KeyboardShortcut({ keys, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Wrapper, { className, children: keys.map((key2) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Key, { children: key2 }, key2)) });
+}
+
 // src/lottie/lottie.tsx
 var import_react11 = require("react");
 
 // src/lottie/lottie-styles.ts
-var import_styled_components9 = __toESM(require("styled-components"), 1);
-var LottieContainer = import_styled_components9.default.div`
+var import_styled_components10 = __toESM(require("styled-components"), 1);
+var LottieContainer = import_styled_components10.default.div`
   display: inline-flex;
   width: ${({ $width }) => typeof $width === "number" ? `${$width}px` : $width};
   height: ${({ $height }) => typeof $height === "number" ? `${$height}px` : $height};
@@ -17545,7 +17568,7 @@ function createLottieRef(animationRef) {
 }
 
 // src/lottie/lottie.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var Lottie = (0, import_react11.forwardRef)(function Lottie2({
   animationData: animationData2,
   autoplay,
@@ -17577,7 +17600,7 @@ var Lottie = (0, import_react11.forwardRef)(function Lottie2({
     onEnterFrame
   });
   (0, import_react11.useImperativeHandle)(ref, () => createLottieRef(animationRef), [animationRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     LottieContainer,
     {
       ref: containerRef,
@@ -17594,6 +17617,7 @@ var Lottie = (0, import_react11.forwardRef)(function Lottie2({
   Chat,
   Icon,
   IconButton,
+  KeyboardShortcut,
   Lottie,
   colors,
   fontFamilies,