@liner-fe/prism 2.8.26 → 2.8.27

package/lib/index.css

@@ -1805,10 +1805,10 @@
 }
 
 /* esbuild-sass-plugin:css-chunk:src/components/coach-mark/primitive/style.module.scss */
-._anchor_1pmfi_1 {
+._anchor_1d9jc_1 {
   transform: rotate(270deg) translateX(7px);
 }
-._content_1pmfi_5 {
+._content_1d9jc_5 {
   border-radius: var(--lp-sys-radius-m);
   width: 100%;
   box-shadow:
@@ -1816,7 +1816,10 @@
     0px 1px 8px 0px rgba(0, 0, 0, 0.06),
     0px 0px 1px 0px rgba(0, 0, 0, 0.06);
 }
-._overlay_1pmfi_11 {
+._content_1d9jc_5 p {
+  margin: 0;
+}
+._overlay_1d9jc_14 {
   position: fixed;
   top: 0;
   left: 0;
@@ -1825,18 +1828,21 @@
   background: rgba(255, 255, 255, 0.7490196078);
   z-index: 9;
 }
+._close_1d9jc_24 {
+  cursor: pointer;
+}
 
 /* esbuild-sass-plugin:css-chunk:src/components/coach-mark/compact/style.module.scss */
-._content_1tkjk_1 {
+._content_mrnt5_1 {
   position: relative;
   display: flex;
   align-items: center;
   gap: var(--lp-sys-gap-positive-100);
   padding: var(--lp-sys-padding-component-200);
   width: fit-content;
-  animation: _slideIn_1tkjk_1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
+  animation: _slideIn_mrnt5_1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 }
-@keyframes _slideIn_1tkjk_1 {
+@keyframes _slideIn_mrnt5_1 {
   from {
     transform: translateY(10px);
     opacity: 0;
@@ -1846,33 +1852,35 @@
     opacity: 1;
   }
 }
-._content_1tkjk_1:hover ._closeButton_1tkjk_20 {
+._content_mrnt5_1:hover ._closeButton_mrnt5_20 {
   display: block;
 }
-._brand_1tkjk_24 {
+._brand_mrnt5_24 {
   background: var(--brand-container-mid);
 }
-._brand_1tkjk_24 svg > path {
+._brand_mrnt5_24 svg > path {
   fill: var(--brand-container-mid);
 }
-._inverse-static_1tkjk_31 {
+._inverse-static_mrnt5_31 {
   background: var(--inverse-container-static-high);
 }
-._inverse-static_1tkjk_31 svg > path {
+._inverse-static_mrnt5_31 svg > path {
   fill: var(--inverse-container-static-high);
 }
-._inverse_1tkjk_31 {
+._inverse_mrnt5_31 {
   background: var(--inverse-container-lowest);
 }
-._inverse_1tkjk_31 svg > path {
+._inverse_mrnt5_31 svg > path {
   fill: var(--inverse-container-lowest);
 }
-._closeButton_1tkjk_20 {
+._close_mrnt5_20 {
   position: absolute;
   top: 0;
   right: 0;
   transform: translate(40%, -40%);
-  display: none;
+}
+._main_mrnt5_52 {
+  margin: 0;
 }
 
 /* esbuild-sass-plugin:css-chunk:src/components/Tag/style.module.scss */

package/lib/index.d.ts

@@ -563,6 +563,7 @@ interface PrimitiveCoachMarkContentProps extends PopoverPrimitive.PopoverContent
 declare const PrimitiveCoachMark: (({ trigger, children, ...props }: PrimitiveCoachMarkRootProps) => react_jsx_runtime.JSX.Element) & {
     Content: react.ForwardRefExoticComponent<PrimitiveCoachMarkContentProps & react.RefAttributes<HTMLDivElement>>;
     Portal: react.FC<PopoverPrimitive.PopoverPortalProps>;
+    Close: ({ className }: HTMLAttributes<HTMLOrSVGElement>) => react_jsx_runtime.JSX.Element;
 };
 
 interface Step {

package/lib/index.js

@@ -7910,12 +7910,14 @@ import { forwardRef as forwardRef28 } from "react";
 
 // src/components/coach-mark/primitive/style.module.scss
 var style_module_default18 = {
-  "anchor": "_anchor_1pmfi_1",
-  "content": "_content_1pmfi_5",
-  "overlay": "_overlay_1pmfi_11"
+  "anchor": "_anchor_1d9jc_1",
+  "content": "_content_1d9jc_5",
+  "overlay": "_overlay_1d9jc_14",
+  "close": "_close_1d9jc_24"
 };
 
 // src/components/coach-mark/primitive/index.tsx
+import { IconCloseFill as IconCloseFill4 } from "@liner-fe/icon";
 import { jsx as jsx41, jsxs as jsxs15 } from "react/jsx-runtime";
 var primitiveCoachMarkVariants = cva9({
   base: style_module_default18.content
@@ -7948,6 +7950,7 @@ var PrimitiveCoachMarkAnchor = /* @__PURE__ */ __name(({ className }) => /* @__P
     )
   }
 ), "PrimitiveCoachMarkAnchor");
+var PrimitiveCoachMarkClose = /* @__PURE__ */ __name(({ className }) => /* @__PURE__ */ jsx41(Close, { asChild: true, className: clsx19(style_module_default18.close, className), children: /* @__PURE__ */ jsx41(IconCloseFill4, { fill: true, size: "xs", type: "neutral-label-static-primary" }) }), "PrimitiveCoachMarkClose");
 var PrimitiveCoachMarkContent = forwardRef28(({ children, className, container, ...rest }, ref) => /* @__PURE__ */ jsx41(Portal2, { container, children: /* @__PURE__ */ jsxs15(
   Content2,
   {
@@ -7963,20 +7966,23 @@ var PrimitiveCoachMarkContent = forwardRef28(({ children, className, container,
 PrimitiveCoachMarkContent.displayName = "CoachMarkContent";
 var PrimitiveCoachMark = Object.assign(PrimitiveCoachMarkRoot, {
   Content: PrimitiveCoachMarkContent,
-  Portal: Portal2
+  Portal: Portal2,
+  Close: PrimitiveCoachMarkClose
 });
 
 // src/components/coach-mark/compact/index.tsx
-import { forwardRef as forwardRef30 } from "react";
+import { forwardRef as forwardRef30, useState as useState19 } from "react";
 
 // src/components/coach-mark/compact/style.module.scss
 var style_module_default19 = {
-  "content": "_content_1tkjk_1",
-  "slideIn": "_slideIn_1tkjk_1",
-  "closeButton": "_closeButton_1tkjk_20",
-  "brand": "_brand_1tkjk_24",
-  "inverse-static": "_inverse-static_1tkjk_31",
-  "inverse": "_inverse_1tkjk_31"
+  "content": "_content_mrnt5_1",
+  "slideIn": "_slideIn_mrnt5_1",
+  "closeButton": "_closeButton_mrnt5_20",
+  "brand": "_brand_mrnt5_24",
+  "inverse-static": "_inverse-static_mrnt5_31",
+  "inverse": "_inverse_mrnt5_31",
+  "close": "_close_mrnt5_20",
+  "main": "_main_mrnt5_52"
 };
 
 // src/components/coach-mark/compact/index.tsx
@@ -8194,27 +8200,43 @@ var compactCoachMarkVariants = cva11({
 var CompactCoachMarkRoot = /* @__PURE__ */ __name((props) => {
   return /* @__PURE__ */ jsx43(PrimitiveCoachMark, { ...props });
 }, "CompactCoachMarkRoot");
-var CompactCoachMarkContent = forwardRef30(({ tag, title, level = "brand", className, side = "top", sideOffset = -15, ...props }, ref) => /* @__PURE__ */ jsxs16(
-  PrimitiveCoachMark.Content,
-  {
-    ref,
-    className: clsx21(compactCoachMarkVariants({ level }), className),
-    side,
-    sideOffset,
-    ...props,
-    children: [
-      tag && /* @__PURE__ */ jsx43(
-        Tag,
-        {
-          color: level === "inverse" ? "neutral-label-primary" : "neutral-label-static-primary",
-          backgroundColor: level === "inverse" ? "neutral-container-lowest" : "neutral-container-static-lowest",
-          children: tag
-        }
-      ),
-      /* @__PURE__ */ jsx43(Caption, { size: 2, type: "normal", weight: "bold", color: "inverse-label-static-primary", children: title })
-    ]
-  }
-));
+var CompactCoachMarkContent = forwardRef30(({ tag, title, level = "brand", className, side = "top", sideOffset = -15, ...props }, ref) => {
+  const [isHover, setIsHover] = useState19(false);
+  return /* @__PURE__ */ jsxs16(
+    PrimitiveCoachMark.Content,
+    {
+      ref,
+      className: clsx21(compactCoachMarkVariants({ level }), className),
+      side,
+      sideOffset,
+      onMouseEnter: () => setIsHover(true),
+      onMouseLeave: () => setIsHover(false),
+      ...props,
+      children: [
+        tag && /* @__PURE__ */ jsx43(
+          Tag,
+          {
+            color: level === "inverse" ? "neutral-label-primary" : "neutral-label-static-primary",
+            backgroundColor: level === "inverse" ? "neutral-container-lowest" : "neutral-container-static-lowest",
+            children: tag
+          }
+        ),
+        /* @__PURE__ */ jsx43(
+          Caption,
+          {
+            size: 2,
+            type: "normal",
+            weight: "bold",
+            color: "inverse-label-static-primary",
+            className: style_module_default19.main,
+            children: title
+          }
+        ),
+        isHover && /* @__PURE__ */ jsx43(PrimitiveCoachMark.Close, { className: style_module_default19.close })
+      ]
+    }
+  );
+});
 CompactCoachMarkContent.displayName = "CompactCoachMarkContent";
 var CompactCoachMark = Object.assign(CompactCoachMarkRoot, {
   Content: CompactCoachMarkContent,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/prism",
-  "version": "2.8.26",
+  "version": "2.8.27",
   "type": "module",
   "sideEffects": false,
   "scripts": {