@liner-fe/design-library 1.2.16 → 1.2.18

package/lib/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ButtonProps, TextButtonProps } from '@liner-fe/prism';
 import { ClassValue } from 'clsx';
-import { ReactNode } from 'react';
+import { ReactNode, MouseEventHandler } from 'react';
 
 declare const TemplateDialog: {
     ({ open, preventEscape, onOpenChange, children, }: {
@@ -69,7 +69,7 @@ declare const SideBanner: ({ button, onCloseClick }: SideBannerProps) => react_j
 
 interface BaseType {
     onClick: () => void;
-    onCloseClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
+    onCloseClick?: MouseEventHandler<HTMLButtonElement>;
     mountEffectCallback?: () => void;
     content: string;
 }
@@ -79,6 +79,7 @@ interface NewsType extends BaseType {
 }
 interface AlertType extends BaseType {
     type: 'alert';
+    label?: string;
 }
 interface PromotionType extends BaseType {
     type: 'promotion';

package/lib/index.js

@@ -220,11 +220,11 @@ var NewsBanner = ({ tag, onClick, onCloseClick, content }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "px-positive-400 py-component-200 hover:bg-brand-fill-low-hover bg-brand-fill-low flex h-[44px] w-full items-center justify-between cursor-pointer",
+      className: "pl-positive-600 pr-positive-400 m:pl-positive-400 py-component-200 hover:bg-brand-fill-low-hover bg-brand-fill-low flex h-[44px] w-full items-center justify-between cursor-pointer gap-positive-300",
       onClick,
       children: [
         /* @__PURE__ */ jsx("div", { className: "flex w-full grow flex-col items-start", children: /* @__PURE__ */ jsxs("div", { className: "gap-positive-200 flex items-center", children: [
-          tag && /* @__PURE__ */ jsxs("div", { className: "gap-positive-150 flex items-center", children: [
+          tag && /* @__PURE__ */ jsxs("div", { className: "gap-positive-150 items-center s:flex hidden", children: [
             /* @__PURE__ */ jsx(Paragraph, { color: "brand-label-primary", size: 4, weight: "medium", type: "normal", children: tag }),
             /* @__PURE__ */ jsx("div", { className: "bg-neutral-border-overlay-normal h-[12px] w-px" })
           ] }),
@@ -249,7 +249,7 @@ var NewsBanner = ({ tag, onClick, onCloseClick, content }) => {
             icon: {
               icon: IconClose
             },
-            level: "primary",
+            level: "quaternary",
             size: "s"
           }
         )
@@ -257,12 +257,12 @@ var NewsBanner = ({ tag, onClick, onCloseClick, content }) => {
     }
   );
 };
-var AlertBanner = ({ onClick, onCloseClick, content }) => {
+var AlertBanner = ({ onClick, onCloseClick, content, label }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
       onClick,
-      className: "py-component-200 pl-gap-positive-600 pr-gap-positive-400 flex h-[44px] w-full items-center justify-between bg-[rgba(254,143,22,0.45)] hover:bg-[rgba(254,143,22,0.48)] cursor-pointer",
+      className: "m:pl-positive-400 py-component-200 pl-positive-600 pr-positive-400 flex h-[44px] w-full items-center justify-between bg-[rgba(254,143,22,0.45)] hover:bg-[rgba(254,143,22,0.48)] cursor-pointer gap-positive-300",
       children: [
         /* @__PURE__ */ jsx("div", { className: "flex w-full grow flex-col items-start", children: /* @__PURE__ */ jsxs("div", { className: "gap-positive-200 flex items-center", children: [
           /* @__PURE__ */ jsx("div", { className: "flex h-[16px] w-[16px] items-center justify-center", children: /* @__PURE__ */ jsx(IconExclamationmarkFill, { size: "xs", fill: true }) }),
@@ -277,7 +277,7 @@ var AlertBanner = ({ onClick, onCloseClick, content }) => {
                 children: content
               }
             ) }),
-            /* @__PURE__ */ jsx("div", { className: "flex flex-col items-start justify-center", children: /* @__PURE__ */ jsx("div", { className: "pl-component-200 flex flex-col items-start", children: /* @__PURE__ */ jsx(
+            label && /* @__PURE__ */ jsx("div", { className: "flex-col items-start justify-center hidden s:flex", children: /* @__PURE__ */ jsx("div", { className: "pl-component-200 flex flex-col items-start", children: /* @__PURE__ */ jsx(
               "div",
               {
                 className: "border-neutral-border-opaque-strong bg-neutral-fill-overlay-lowest flex h-[24px] flex-col items-end justify-center rounded-xs border",
@@ -288,7 +288,7 @@ var AlertBanner = ({ onClick, onCloseClick, content }) => {
                     size: 1,
                     weight: "regular",
                     type: "normal",
-                    children: "Label"
+                    children: label
                   }
                 ) }) })
               }
@@ -301,7 +301,7 @@ var AlertBanner = ({ onClick, onCloseClick, content }) => {
             icon: {
               icon: IconClose
             },
-            level: "primary",
+            level: "quaternary",
             size: "s",
             onClick: onCloseClick
           }
@@ -327,7 +327,7 @@ var PromotionBanner = ({
     "div",
     {
       onClick,
-      className: "px-positive-600 m:px-positive-400 py-component-200 bg-inverse-container-static-high hover:bg-inverse-container-static-high-hover flex h-[44px] w-full items-center justify-between cursor-pointer",
+      className: "px-positive-600 m:px-positive-400 py-component-200 bg-inverse-container-static-high hover:bg-inverse-container-static-high-hover flex h-[44px] w-full items-center justify-between cursor-pointer gap-positive-300",
       children: [
         /* @__PURE__ */ jsx("div", { className: "flex w-full grow flex-col items-start", children: /* @__PURE__ */ jsxs("div", { className: "gap-positive-200 flex items-center", children: [
           tag && /* @__PURE__ */ jsxs("div", { className: "gap-positive-150 s:flex items-center hidden", children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liner-fe/design-library",
-  "version": "1.2.16",
+  "version": "1.2.18",
   "type": "module",
   "dependencies": {
     "@tailwindcss/vite": "^4.1.14",
@@ -10,9 +10,9 @@
     "react-dom": "18.2.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.14",
-    "@liner-fe/design-token": "^2.5.50",
     "@liner-fe/icon": "^0.2.76",
-    "@liner-fe/prism": "^2.12.12"
+    "@liner-fe/prism": "^2.12.12",
+    "@liner-fe/design-token": "^2.5.50"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",