@grandbazar/ui-baza 1.3.0 → 1.4.0

package/dist/index.cjs

@@ -51,23 +51,23 @@ function omit(object, ...keys) {
   return Object.fromEntries(filteredEntries);
 }
 
-const badge = "_badge_p5h5n_2";
-const primary$4 = "_primary_p5h5n_9";
-const secondary$5 = "_secondary_p5h5n_13";
-const accent$3 = "_accent_p5h5n_18";
-const violet = "_violet_p5h5n_23";
-const pink = "_pink_p5h5n_28";
-const red$1 = "_red_p5h5n_33";
-const orange = "_orange_p5h5n_38";
-const green = "_green_p5h5n_43";
-const neutral$3 = "_neutral_p5h5n_48";
-const lg$7 = "_lg_p5h5n_53";
-const md$a = "_md_p5h5n_60";
-const styles$x = {
+const badge = "_badge_1s8y9_2";
+const primary$4 = "_primary_1s8y9_9";
+const secondary$5 = "_secondary_1s8y9_13";
+const accent$4 = "_accent_1s8y9_18";
+const violet = "_violet_1s8y9_23";
+const pink = "_pink_1s8y9_28";
+const red$1 = "_red_1s8y9_33";
+const orange = "_orange_1s8y9_38";
+const green = "_green_1s8y9_43";
+const neutral$3 = "_neutral_1s8y9_48";
+const lg$7 = "_lg_1s8y9_53";
+const md$a = "_md_1s8y9_60";
+const styles$y = {
 	badge: badge,
 	primary: primary$4,
 	secondary: secondary$5,
-	accent: accent$3,
+	accent: accent$4,
 	violet: violet,
 	pink: pink,
 	red: red$1,
@@ -79,13 +79,13 @@ const styles$x = {
 };
 
 function Badge({ children, className, size = "lg", color = "accent", mode = "primary", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$x.badge, styles$x[size], styles$x[color], styles$x[mode], className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$y.badge, styles$y[size], styles$y[color], styles$y[mode], className), ...props, children });
 }
 
 const badgeTabsItem = "_badgeTabsItem_10lit_2";
 const primary$3 = "_primary_10lit_18";
 const secondary$4 = "_secondary_10lit_36";
-const styles$w = {
+const styles$x = {
 	badgeTabsItem: badgeTabsItem,
 	primary: primary$3,
 	secondary: secondary$4
@@ -98,7 +98,7 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
       type: "button",
       role: "tab",
       "aria-selected": Boolean(isActive),
-      className: classNames(styles$w.badgeTabsItem, styles$w[mode], className),
+      className: classNames(styles$x.badgeTabsItem, styles$x[mode], className),
       ...props,
       children
     }
@@ -106,12 +106,12 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
 }
 
 const badgeTabsRoot = "_badgeTabsRoot_1qkat_2";
-const styles$v = {
+const styles$w = {
 	badgeTabsRoot: badgeTabsRoot
 };
 
 function BadgeTabsRoot({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", className: classNames(styles$v.badgeTabsRoot, className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", className: classNames(styles$w.badgeTabsRoot, className), ...props, children });
 }
 
 function BadgeTabs(props) {
@@ -1068,7 +1068,7 @@ function IconXMarkCircle(props) {
 const breadcrumbs = "_breadcrumbs_1bfmb_2";
 const breadcrumbsItem = "_breadcrumbsItem_1bfmb_8";
 const defaultSeparator = "_defaultSeparator_1bfmb_14";
-const styles$u = {
+const styles$v = {
 	breadcrumbs: breadcrumbs,
 	breadcrumbsItem: breadcrumbsItem,
 	defaultSeparator: defaultSeparator
@@ -1117,7 +1117,7 @@ function Slot({
 }
 
 const breadcrumbItem = "_breadcrumbItem_cua4v_2";
-const styles$t = {
+const styles$u = {
 	breadcrumbItem: breadcrumbItem
 };
 
@@ -1128,7 +1128,7 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
     {
       "data-active": isActive,
       "data-disabled": props.disabled,
-      className: classNames(styles$t.breadcrumbItem, className),
+      className: classNames(styles$u.breadcrumbItem, className),
       ...isActive && { "aria-current": "page" },
       ...!asChild && { type: "button" },
       ...props,
@@ -1140,19 +1140,19 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
 function Breadcrumbs({
   className,
   children,
-  separator = /* @__PURE__ */ jsxRuntime.jsx(IconChevron, { className: styles$u.defaultSeparator })
+  separator = /* @__PURE__ */ jsxRuntime.jsx(IconChevron, { className: styles$v.defaultSeparator })
 }) {
   const childrenArray = Array.isArray(children) ? children : [children];
   const lastIndex = childrenArray.length - 1;
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: styles$u.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$u.breadcrumbsItem, children: item }),
-    index < lastIndex && /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$u.breadcrumbsItem, "aria-hidden": "true", children: separator })
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: styles$v.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$v.breadcrumbsItem, children: item }),
+    index < lastIndex && /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$v.breadcrumbsItem, "aria-hidden": "true", children: separator })
   ] }, index)) }) });
 }
 Breadcrumbs.Item = BreadcrumbItem;
 
 const button = "_button_1waqk_2";
-const accent$2 = "_accent_1waqk_11";
+const accent$3 = "_accent_1waqk_11";
 const primary$2 = "_primary_1waqk_12";
 const secondary$3 = "_secondary_1waqk_30";
 const tertiary = "_tertiary_1waqk_48";
@@ -1161,9 +1161,9 @@ const neutral$2 = "_neutral_1waqk_78";
 const lg$6 = "_lg_1waqk_145";
 const md$9 = "_md_1waqk_153";
 const sm$4 = "_sm_1waqk_161";
-const styles$s = {
+const styles$t = {
 	button: button,
-	accent: accent$2,
+	accent: accent$3,
 	primary: primary$2,
 	secondary: secondary$3,
 	tertiary: tertiary,
@@ -1175,13 +1175,13 @@ const styles$s = {
 };
 
 const buttonFunction = "_buttonFunction_o8iku_2";
-const accent$1 = "_accent_o8iku_10";
+const accent$2 = "_accent_o8iku_10";
 const neutral$1 = "_neutral_o8iku_22";
 const lg$5 = "_lg_o8iku_41";
 const md$8 = "_md_o8iku_46";
-const styles$r = {
+const styles$s = {
 	buttonFunction: buttonFunction,
-	accent: accent$1,
+	accent: accent$2,
 	neutral: neutral$1,
 	lg: lg$5,
 	md: md$8
@@ -1199,7 +1199,7 @@ function ButtonFunction({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: classNames(styles$r.buttonFunction, styles$r[color], styles$r[size], className),
+      className: classNames(styles$s.buttonFunction, styles$s[color], styles$s[size], className),
       ...props.disabled && { "data-disabled": true },
       ...!asChild && { type: "button" },
       ...props,
@@ -1221,7 +1221,7 @@ function Button({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: classNames(styles$s.button, styles$s[color], styles$s[size], styles$s[mode], className),
+      className: classNames(styles$t.button, styles$t[color], styles$t[size], styles$t[mode], className),
       ...!asChild && { type: "button" },
       ...props,
       children
@@ -1233,7 +1233,7 @@ Button.Function = ButtonFunction;
 const checkboxWrapper = "_checkboxWrapper_k1shg_2";
 const icon$2 = "_icon_k1shg_23";
 const checkbox = "_checkbox_k1shg_2";
-const styles$q = {
+const styles$r = {
 	checkboxWrapper: checkboxWrapper,
 	icon: icon$2,
 	checkbox: checkbox
@@ -1246,11 +1246,11 @@ function Checkbox({ className, label, indeterminate, ...props }) {
     {
       "data-disabled": `${Boolean(props.disabled)}`,
       "data-state": dataState,
-      className: classNames(styles$q.checkboxWrapper, className),
+      className: classNames(styles$r.checkboxWrapper, className),
       children: [
-        dataState === "checked" && /* @__PURE__ */ jsxRuntime.jsx(IconCheck, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$q.icon }),
-        dataState === "indeterminate" && /* @__PURE__ */ jsxRuntime.jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$q.icon }),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { "data-state": dataState, type: "checkbox", className: styles$q.checkbox, ...props }),
+        dataState === "checked" && /* @__PURE__ */ jsxRuntime.jsx(IconCheck, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$r.icon }),
+        dataState === "indeterminate" && /* @__PURE__ */ jsxRuntime.jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$r.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("input", { "data-state": dataState, type: "checkbox", className: styles$r.checkbox, ...props }),
         label
       ]
     }
@@ -1258,7 +1258,7 @@ function Checkbox({ className, label, indeterminate, ...props }) {
 }
 
 const chip = "_chip_dj4kw_2";
-const styles$p = {
+const styles$q = {
 	chip: chip
 };
 
@@ -1266,7 +1266,7 @@ function Chip({ isSelected, children, className, disabled, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames(styles$p.chip, className),
+      className: classNames(styles$q.chip, className),
       "data-selected": isSelected,
       "data-disabled": disabled,
       "aria-disabled": disabled,
@@ -1280,23 +1280,23 @@ const root$1 = "_root_ww0fb_2";
 const lg$4 = "_lg_ww0fb_16";
 const md$7 = "_md_ww0fb_24";
 const red = "_red_ww0fb_32";
-const accent = "_accent_ww0fb_37";
+const accent$1 = "_accent_ww0fb_37";
 const neutral = "_neutral_ww0fb_42";
 const secondary$2 = "_secondary_ww0fb_47";
 const white = "_white_ww0fb_52";
-const styles$o = {
+const styles$p = {
 	root: root$1,
 	lg: lg$4,
 	md: md$7,
 	red: red,
-	accent: accent,
+	accent: accent$1,
 	neutral: neutral,
 	secondary: secondary$2,
 	white: white
 };
 
 function Counter({ className, size = "lg", color = "red", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$o.root, styles$o[size], styles$o[color], className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$p.root, styles$p[size], styles$p[color], className), ...props });
 }
 
 const LOCALE_FIRST_DAY_OF_WEEK = {
@@ -1306,7 +1306,7 @@ const LOCALE_FIRST_DAY_OF_WEEK = {
 
 const datePickerCellWrapper = "_datePickerCellWrapper_np1gx_2";
 const datePickerCell = "_datePickerCell_np1gx_2";
-const styles$n = {
+const styles$o = {
 	datePickerCellWrapper: datePickerCellWrapper,
 	datePickerCell: datePickerCell,
 	"radius-none": "_radius-none_np1gx_83",
@@ -1316,10 +1316,10 @@ const styles$n = {
 };
 
 function DatePickerCell({ children, className, state, isCurrent, radius = "both", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$n.datePickerCellWrapper, styles$n[`radius-${radius}`]), "data-state": state, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$o.datePickerCellWrapper, styles$o[`radius-${radius}`]), "data-state": state, children: /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
-      className: classNames(styles$n.datePickerCell, styles$n[`radius-${radius}`], className),
+      className: classNames(styles$o.datePickerCell, styles$o[`radius-${radius}`], className),
       type: "button",
       role: "gridcell",
       "aria-selected": state === "selected",
@@ -1389,7 +1389,7 @@ function normalizeDateRange(firstDate, secondDate) {
 const datePickerField = "_datePickerField_1qk8s_2";
 const datePickerFieldCalendar = "_datePickerFieldCalendar_1qk8s_8";
 const datePickerFieldWeek = "_datePickerFieldWeek_1qk8s_14";
-const styles$m = {
+const styles$n = {
 	datePickerField: datePickerField,
 	datePickerFieldCalendar: datePickerFieldCalendar,
 	datePickerFieldWeek: datePickerFieldWeek
@@ -1404,9 +1404,9 @@ function DatePickerField({
   firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru
 }) {
   const weeks = React.useMemo(() => getCalendarGrid(month, year, firstDayOfWeek), [month, year, firstDayOfWeek]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames(styles$m.datePickerField, className), role: "grid", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames(styles$n.datePickerField, className), role: "grid", children: [
     renderWeekdays?.(),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$m.datePickerFieldCalendar, role: "rowgroup", children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$m.datePickerFieldWeek, role: "row", "aria-rowindex": weekIndex + 1, children: week.map((day, dayIndex) => /* @__PURE__ */ jsxRuntime.jsx(Slot, { role: "gridcell", "aria-colindex": dayIndex + 1, children: children(day) }, `${day.year}-${day.month}-${day.date}`)) }, weekIndex)) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$n.datePickerFieldCalendar, role: "rowgroup", children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$n.datePickerFieldWeek, role: "row", "aria-rowindex": weekIndex + 1, children: week.map((day, dayIndex) => /* @__PURE__ */ jsxRuntime.jsx(Slot, { role: "gridcell", "aria-colindex": dayIndex + 1, children: children(day) }, `${day.year}-${day.month}-${day.date}`)) }, weekIndex)) })
   ] });
 }
 
@@ -1447,13 +1447,13 @@ const I18N_MONTH_LABELS = {
 
 const datePickerWeekdays = "_datePickerWeekdays_p8tsm_2";
 const datePickerWeekday = "_datePickerWeekday_p8tsm_2";
-const styles$l = {
+const styles$m = {
 	datePickerWeekdays: datePickerWeekdays,
 	datePickerWeekday: datePickerWeekday
 };
 
 function DatePickerWeekDays({ className, locale = "ru" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$l.datePickerWeekdays, className), role: "row", children: I18N_WEEKDAY_LABELS[locale].map((label) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$l.datePickerWeekday, role: "columnheader", children: label }, label)) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$m.datePickerWeekdays, className), role: "row", children: I18N_WEEKDAY_LABELS[locale].map((label) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$m.datePickerWeekday, role: "columnheader", children: label }, label)) });
 }
 
 function DatePicker() {
@@ -1689,21 +1689,21 @@ const DROPDOWN_PORTAL_SIDE_CONFIG = {
 };
 
 const dropdownContent = "_dropdownContent_12tkb_2";
-const styles$k = {
+const styles$l = {
 	dropdownContent: dropdownContent
 };
 
 function DropdownContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$k.dropdownContent, className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$l.dropdownContent, className), ...props, children });
 }
 
 const dropdownItem = "_dropdownItem_msc4i_2";
-const styles$j = {
+const styles$k = {
 	dropdownItem: dropdownItem
 };
 
 function DropdownItem({ className, children, disabled, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$j.dropdownItem, className), role: "menuitem", "data-disabled": disabled, ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$k.dropdownItem, className), role: "menuitem", "data-disabled": disabled, ...props, children });
 }
 
 const CLICK_OUTSIDE_IGNORE_DATA_NAME = "data-clickoutside-ignore";
@@ -2131,7 +2131,7 @@ function useTriggerHandlersByEventTrigger() {
 }
 
 const dropdownPortal = "_dropdownPortal_p3tdk_2";
-const styles$i = {
+const styles$j = {
 	dropdownPortal: dropdownPortal
 };
 
@@ -2171,7 +2171,7 @@ function DropdownPortal({
           ...style
         },
         ref: portalRef,
-        className: classNames(styles$i.dropdownPortal, className),
+        className: classNames(styles$j.dropdownPortal, className),
         ...handlersByTrigger[triggerEvent],
         ...isNested && { [CLICK_OUTSIDE_IGNORE_DATA_NAME]: "true" },
         children
@@ -2213,6 +2213,69 @@ DropdownMenu.Content = DropdownContent;
 DropdownMenu.Item = DropdownItem;
 DropdownMenu.Portal = DropdownPortal;
 
+const notificationInline = "_notificationInline_1kerp_2";
+const accent = "_accent_1kerp_10";
+const negative = "_negative_1kerp_16";
+const positive = "_positive_1kerp_22";
+const warning = "_warning_1kerp_28";
+const outline = "_outline_1kerp_34";
+const filled = "_filled_1kerp_39";
+const statusIcon = "_statusIcon_1kerp_44";
+const body = "_body_1kerp_51";
+const titleRow = "_titleRow_1kerp_59";
+const title = "_title_1kerp_59";
+const closeButton = "_closeButton_1kerp_74";
+const closeIcon = "_closeIcon_1kerp_95";
+const description = "_description_1kerp_100";
+const actions = "_actions_1kerp_108";
+const styles$i = {
+	notificationInline: notificationInline,
+	accent: accent,
+	negative: negative,
+	positive: positive,
+	warning: warning,
+	outline: outline,
+	filled: filled,
+	statusIcon: statusIcon,
+	body: body,
+	titleRow: titleRow,
+	title: title,
+	closeButton: closeButton,
+	closeIcon: closeIcon,
+	description: description,
+	actions: actions
+};
+
+const STATUS_ICONS = {
+  accent: IconInfo.Filled,
+  negative: IconXMarkCircle,
+  positive: IconCheckCircle,
+  warning: IconCheckCircle
+};
+function NotificationInline({
+  title,
+  description,
+  color = "accent",
+  mode = "filled",
+  onClose,
+  children,
+  className,
+  ...props
+}) {
+  const StatusIcon = STATUS_ICONS[color];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames(styles$i.notificationInline, styles$i[color], styles$i[mode], className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(StatusIcon, { className: styles$i.statusIcon, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles$i.body, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles$i.titleRow, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$i.title, children: title }),
+        onClose && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close", className: styles$i.closeButton, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(IconXMark.Small, { className: styles$i.closeIcon, "aria-hidden": "true" }) })
+      ] }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$i.description, children: description }),
+      children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$i.actions, children })
+    ] })
+  ] });
+}
+
 const ELLIPSIS = "...";
 const ELLIPSIS_SYMBOL = Symbol(ELLIPSIS);
 const DEFAULT_MAX_VISIBLE_PAGES_WITH_ELLIPSIS = 11;
@@ -3409,6 +3472,7 @@ exports.IconTrash = IconTrash;
 exports.IconXMark = IconXMark;
 exports.IconXMarkCircle = IconXMarkCircle;
 exports.LOCALE_FIRST_DAY_OF_WEEK = LOCALE_FIRST_DAY_OF_WEEK;
+exports.NotificationInline = NotificationInline;
 exports.Pagination = Pagination;
 exports.ProgressBar = ProgressBar;
 exports.RadioButton = RadioButton;

package/dist/index.d.ts

@@ -401,6 +401,24 @@ export declare const LOCALE_FIRST_DAY_OF_WEEK: TLabel<number>;
 
 declare const LOCALES: readonly ["en", "ru"];
 
+declare const NOTIFICATION_INLINE_COLORS: readonly ["accent", "negative", "positive", "warning"];
+
+declare const NOTIFICATION_INLINE_MODES: readonly ["outline", "filled"];
+
+/**
+ * NotificationInline informs users with concise, timely information inside a content area.
+ * Renders a status icon, a title, an optional description, an optional close button
+ * and an optional row of action buttons passed as children.
+ *
+ * @param title - Notification heading
+ * @param description - Supporting text below the title
+ * @param color - Status of the notification (accent, negative, positive, warning)
+ * @param mode - Surface style (outline, filled)
+ * @param onClose - Called when the close button is clicked; the button renders only when provided
+ * @param children - Action buttons rendered in a row below the text
+ */
+export declare function NotificationInline({ title, description, color, mode, onClose, children, className, ...props }: TNotificationInlineProps): JSX.Element;
+
 /**
  * Pagination is a compound component for building pagination interfaces.
  * Provides flexible building blocks for navigating through pages with customizable rendering.
@@ -780,6 +798,14 @@ declare type TLabel<T = string> = Record<TLocale, T>;
 
 declare type TLocale = TArrayElement<typeof LOCALES>;
 
+declare type TNotificationInlineProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
+    title: string;
+    description?: string;
+    color?: TArrayElement<typeof NOTIFICATION_INLINE_COLORS>;
+    mode?: TArrayElement<typeof NOTIFICATION_INLINE_MODES>;
+    onClose?: () => void;
+};
+
 /**
  * Tooltip is a compound component for displaying contextual hints.
  * Provides a trigger wrapper and content rendering for short descriptions.

package/dist/index.js

@@ -47,23 +47,23 @@ function omit(object, ...keys) {
   return Object.fromEntries(filteredEntries);
 }
 
-const badge = "_badge_p5h5n_2";
-const primary$4 = "_primary_p5h5n_9";
-const secondary$5 = "_secondary_p5h5n_13";
-const accent$3 = "_accent_p5h5n_18";
-const violet = "_violet_p5h5n_23";
-const pink = "_pink_p5h5n_28";
-const red$1 = "_red_p5h5n_33";
-const orange = "_orange_p5h5n_38";
-const green = "_green_p5h5n_43";
-const neutral$3 = "_neutral_p5h5n_48";
-const lg$7 = "_lg_p5h5n_53";
-const md$a = "_md_p5h5n_60";
-const styles$x = {
+const badge = "_badge_1s8y9_2";
+const primary$4 = "_primary_1s8y9_9";
+const secondary$5 = "_secondary_1s8y9_13";
+const accent$4 = "_accent_1s8y9_18";
+const violet = "_violet_1s8y9_23";
+const pink = "_pink_1s8y9_28";
+const red$1 = "_red_1s8y9_33";
+const orange = "_orange_1s8y9_38";
+const green = "_green_1s8y9_43";
+const neutral$3 = "_neutral_1s8y9_48";
+const lg$7 = "_lg_1s8y9_53";
+const md$a = "_md_1s8y9_60";
+const styles$y = {
 	badge: badge,
 	primary: primary$4,
 	secondary: secondary$5,
-	accent: accent$3,
+	accent: accent$4,
 	violet: violet,
 	pink: pink,
 	red: red$1,
@@ -75,13 +75,13 @@ const styles$x = {
 };
 
 function Badge({ children, className, size = "lg", color = "accent", mode = "primary", ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames(styles$x.badge, styles$x[size], styles$x[color], styles$x[mode], className), ...props, children });
+  return /* @__PURE__ */ jsx("div", { className: classNames(styles$y.badge, styles$y[size], styles$y[color], styles$y[mode], className), ...props, children });
 }
 
 const badgeTabsItem = "_badgeTabsItem_10lit_2";
 const primary$3 = "_primary_10lit_18";
 const secondary$4 = "_secondary_10lit_36";
-const styles$w = {
+const styles$x = {
 	badgeTabsItem: badgeTabsItem,
 	primary: primary$3,
 	secondary: secondary$4
@@ -94,7 +94,7 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
       type: "button",
       role: "tab",
       "aria-selected": Boolean(isActive),
-      className: classNames(styles$w.badgeTabsItem, styles$w[mode], className),
+      className: classNames(styles$x.badgeTabsItem, styles$x[mode], className),
       ...props,
       children
     }
@@ -102,12 +102,12 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
 }
 
 const badgeTabsRoot = "_badgeTabsRoot_1qkat_2";
-const styles$v = {
+const styles$w = {
 	badgeTabsRoot: badgeTabsRoot
 };
 
 function BadgeTabsRoot({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx("div", { role: "tablist", className: classNames(styles$v.badgeTabsRoot, className), ...props, children });
+  return /* @__PURE__ */ jsx("div", { role: "tablist", className: classNames(styles$w.badgeTabsRoot, className), ...props, children });
 }
 
 function BadgeTabs(props) {
@@ -1064,7 +1064,7 @@ function IconXMarkCircle(props) {
 const breadcrumbs = "_breadcrumbs_1bfmb_2";
 const breadcrumbsItem = "_breadcrumbsItem_1bfmb_8";
 const defaultSeparator = "_defaultSeparator_1bfmb_14";
-const styles$u = {
+const styles$v = {
 	breadcrumbs: breadcrumbs,
 	breadcrumbsItem: breadcrumbsItem,
 	defaultSeparator: defaultSeparator
@@ -1113,7 +1113,7 @@ function Slot({
 }
 
 const breadcrumbItem = "_breadcrumbItem_cua4v_2";
-const styles$t = {
+const styles$u = {
 	breadcrumbItem: breadcrumbItem
 };
 
@@ -1124,7 +1124,7 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
     {
       "data-active": isActive,
       "data-disabled": props.disabled,
-      className: classNames(styles$t.breadcrumbItem, className),
+      className: classNames(styles$u.breadcrumbItem, className),
       ...isActive && { "aria-current": "page" },
       ...!asChild && { type: "button" },
       ...props,
@@ -1136,19 +1136,19 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
 function Breadcrumbs({
   className,
   children,
-  separator = /* @__PURE__ */ jsx(IconChevron, { className: styles$u.defaultSeparator })
+  separator = /* @__PURE__ */ jsx(IconChevron, { className: styles$v.defaultSeparator })
 }) {
   const childrenArray = Array.isArray(children) ? children : [children];
   const lastIndex = childrenArray.length - 1;
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: styles$u.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("li", { className: styles$u.breadcrumbsItem, children: item }),
-    index < lastIndex && /* @__PURE__ */ jsx("li", { className: styles$u.breadcrumbsItem, "aria-hidden": "true", children: separator })
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: styles$v.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("li", { className: styles$v.breadcrumbsItem, children: item }),
+    index < lastIndex && /* @__PURE__ */ jsx("li", { className: styles$v.breadcrumbsItem, "aria-hidden": "true", children: separator })
   ] }, index)) }) });
 }
 Breadcrumbs.Item = BreadcrumbItem;
 
 const button = "_button_1waqk_2";
-const accent$2 = "_accent_1waqk_11";
+const accent$3 = "_accent_1waqk_11";
 const primary$2 = "_primary_1waqk_12";
 const secondary$3 = "_secondary_1waqk_30";
 const tertiary = "_tertiary_1waqk_48";
@@ -1157,9 +1157,9 @@ const neutral$2 = "_neutral_1waqk_78";
 const lg$6 = "_lg_1waqk_145";
 const md$9 = "_md_1waqk_153";
 const sm$4 = "_sm_1waqk_161";
-const styles$s = {
+const styles$t = {
 	button: button,
-	accent: accent$2,
+	accent: accent$3,
 	primary: primary$2,
 	secondary: secondary$3,
 	tertiary: tertiary,
@@ -1171,13 +1171,13 @@ const styles$s = {
 };
 
 const buttonFunction = "_buttonFunction_o8iku_2";
-const accent$1 = "_accent_o8iku_10";
+const accent$2 = "_accent_o8iku_10";
 const neutral$1 = "_neutral_o8iku_22";
 const lg$5 = "_lg_o8iku_41";
 const md$8 = "_md_o8iku_46";
-const styles$r = {
+const styles$s = {
 	buttonFunction: buttonFunction,
-	accent: accent$1,
+	accent: accent$2,
 	neutral: neutral$1,
 	lg: lg$5,
 	md: md$8
@@ -1195,7 +1195,7 @@ function ButtonFunction({
   return /* @__PURE__ */ jsx(
     Component,
     {
-      className: classNames(styles$r.buttonFunction, styles$r[color], styles$r[size], className),
+      className: classNames(styles$s.buttonFunction, styles$s[color], styles$s[size], className),
       ...props.disabled && { "data-disabled": true },
       ...!asChild && { type: "button" },
       ...props,
@@ -1217,7 +1217,7 @@ function Button({
   return /* @__PURE__ */ jsx(
     Component,
     {
-      className: classNames(styles$s.button, styles$s[color], styles$s[size], styles$s[mode], className),
+      className: classNames(styles$t.button, styles$t[color], styles$t[size], styles$t[mode], className),
       ...!asChild && { type: "button" },
       ...props,
       children
@@ -1229,7 +1229,7 @@ Button.Function = ButtonFunction;
 const checkboxWrapper = "_checkboxWrapper_k1shg_2";
 const icon$2 = "_icon_k1shg_23";
 const checkbox = "_checkbox_k1shg_2";
-const styles$q = {
+const styles$r = {
 	checkboxWrapper: checkboxWrapper,
 	icon: icon$2,
 	checkbox: checkbox
@@ -1242,11 +1242,11 @@ function Checkbox({ className, label, indeterminate, ...props }) {
     {
       "data-disabled": `${Boolean(props.disabled)}`,
       "data-state": dataState,
-      className: classNames(styles$q.checkboxWrapper, className),
+      className: classNames(styles$r.checkboxWrapper, className),
       children: [
-        dataState === "checked" && /* @__PURE__ */ jsx(IconCheck, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$q.icon }),
-        dataState === "indeterminate" && /* @__PURE__ */ jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$q.icon }),
-        /* @__PURE__ */ jsx("input", { "data-state": dataState, type: "checkbox", className: styles$q.checkbox, ...props }),
+        dataState === "checked" && /* @__PURE__ */ jsx(IconCheck, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$r.icon }),
+        dataState === "indeterminate" && /* @__PURE__ */ jsx(IconMinus, { "data-disabled": `${Boolean(props.disabled)}`, className: styles$r.icon }),
+        /* @__PURE__ */ jsx("input", { "data-state": dataState, type: "checkbox", className: styles$r.checkbox, ...props }),
         label
       ]
     }
@@ -1254,7 +1254,7 @@ function Checkbox({ className, label, indeterminate, ...props }) {
 }
 
 const chip = "_chip_dj4kw_2";
-const styles$p = {
+const styles$q = {
 	chip: chip
 };
 
@@ -1262,7 +1262,7 @@ function Chip({ isSelected, children, className, disabled, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames(styles$p.chip, className),
+      className: classNames(styles$q.chip, className),
       "data-selected": isSelected,
       "data-disabled": disabled,
       "aria-disabled": disabled,
@@ -1276,23 +1276,23 @@ const root$1 = "_root_ww0fb_2";
 const lg$4 = "_lg_ww0fb_16";
 const md$7 = "_md_ww0fb_24";
 const red = "_red_ww0fb_32";
-const accent = "_accent_ww0fb_37";
+const accent$1 = "_accent_ww0fb_37";
 const neutral = "_neutral_ww0fb_42";
 const secondary$2 = "_secondary_ww0fb_47";
 const white = "_white_ww0fb_52";
-const styles$o = {
+const styles$p = {
 	root: root$1,
 	lg: lg$4,
 	md: md$7,
 	red: red,
-	accent: accent,
+	accent: accent$1,
 	neutral: neutral,
 	secondary: secondary$2,
 	white: white
 };
 
 function Counter({ className, size = "lg", color = "red", ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames(styles$o.root, styles$o[size], styles$o[color], className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: classNames(styles$p.root, styles$p[size], styles$p[color], className), ...props });
 }
 
 const LOCALE_FIRST_DAY_OF_WEEK = {
@@ -1302,7 +1302,7 @@ const LOCALE_FIRST_DAY_OF_WEEK = {
 
 const datePickerCellWrapper = "_datePickerCellWrapper_np1gx_2";
 const datePickerCell = "_datePickerCell_np1gx_2";
-const styles$n = {
+const styles$o = {
 	datePickerCellWrapper: datePickerCellWrapper,
 	datePickerCell: datePickerCell,
 	"radius-none": "_radius-none_np1gx_83",
@@ -1312,10 +1312,10 @@ const styles$n = {
 };
 
 function DatePickerCell({ children, className, state, isCurrent, radius = "both", ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames(styles$n.datePickerCellWrapper, styles$n[`radius-${radius}`]), "data-state": state, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: classNames(styles$o.datePickerCellWrapper, styles$o[`radius-${radius}`]), "data-state": state, children: /* @__PURE__ */ jsx(
     "button",
     {
-      className: classNames(styles$n.datePickerCell, styles$n[`radius-${radius}`], className),
+      className: classNames(styles$o.datePickerCell, styles$o[`radius-${radius}`], className),
       type: "button",
       role: "gridcell",
       "aria-selected": state === "selected",
@@ -1385,7 +1385,7 @@ function normalizeDateRange(firstDate, secondDate) {
 const datePickerField = "_datePickerField_1qk8s_2";
 const datePickerFieldCalendar = "_datePickerFieldCalendar_1qk8s_8";
 const datePickerFieldWeek = "_datePickerFieldWeek_1qk8s_14";
-const styles$m = {
+const styles$n = {
 	datePickerField: datePickerField,
 	datePickerFieldCalendar: datePickerFieldCalendar,
 	datePickerFieldWeek: datePickerFieldWeek
@@ -1400,9 +1400,9 @@ function DatePickerField({
   firstDayOfWeek = LOCALE_FIRST_DAY_OF_WEEK.ru
 }) {
   const weeks = useMemo(() => getCalendarGrid(month, year, firstDayOfWeek), [month, year, firstDayOfWeek]);
-  return /* @__PURE__ */ jsxs("div", { className: classNames(styles$m.datePickerField, className), role: "grid", children: [
+  return /* @__PURE__ */ jsxs("div", { className: classNames(styles$n.datePickerField, className), role: "grid", children: [
     renderWeekdays?.(),
-    /* @__PURE__ */ jsx("div", { className: styles$m.datePickerFieldCalendar, role: "rowgroup", children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", { className: styles$m.datePickerFieldWeek, role: "row", "aria-rowindex": weekIndex + 1, children: week.map((day, dayIndex) => /* @__PURE__ */ jsx(Slot, { role: "gridcell", "aria-colindex": dayIndex + 1, children: children(day) }, `${day.year}-${day.month}-${day.date}`)) }, weekIndex)) })
+    /* @__PURE__ */ jsx("div", { className: styles$n.datePickerFieldCalendar, role: "rowgroup", children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("div", { className: styles$n.datePickerFieldWeek, role: "row", "aria-rowindex": weekIndex + 1, children: week.map((day, dayIndex) => /* @__PURE__ */ jsx(Slot, { role: "gridcell", "aria-colindex": dayIndex + 1, children: children(day) }, `${day.year}-${day.month}-${day.date}`)) }, weekIndex)) })
   ] });
 }
 
@@ -1443,13 +1443,13 @@ const I18N_MONTH_LABELS = {
 
 const datePickerWeekdays = "_datePickerWeekdays_p8tsm_2";
 const datePickerWeekday = "_datePickerWeekday_p8tsm_2";
-const styles$l = {
+const styles$m = {
 	datePickerWeekdays: datePickerWeekdays,
 	datePickerWeekday: datePickerWeekday
 };
 
 function DatePickerWeekDays({ className, locale = "ru" }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames(styles$l.datePickerWeekdays, className), role: "row", children: I18N_WEEKDAY_LABELS[locale].map((label) => /* @__PURE__ */ jsx("div", { className: styles$l.datePickerWeekday, role: "columnheader", children: label }, label)) });
+  return /* @__PURE__ */ jsx("div", { className: classNames(styles$m.datePickerWeekdays, className), role: "row", children: I18N_WEEKDAY_LABELS[locale].map((label) => /* @__PURE__ */ jsx("div", { className: styles$m.datePickerWeekday, role: "columnheader", children: label }, label)) });
 }
 
 function DatePicker() {
@@ -1685,21 +1685,21 @@ const DROPDOWN_PORTAL_SIDE_CONFIG = {
 };
 
 const dropdownContent = "_dropdownContent_12tkb_2";
-const styles$k = {
+const styles$l = {
 	dropdownContent: dropdownContent
 };
 
 function DropdownContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames(styles$k.dropdownContent, className), ...props, children });
+  return /* @__PURE__ */ jsx("div", { className: classNames(styles$l.dropdownContent, className), ...props, children });
 }
 
 const dropdownItem = "_dropdownItem_msc4i_2";
-const styles$j = {
+const styles$k = {
 	dropdownItem: dropdownItem
 };
 
 function DropdownItem({ className, children, disabled, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames(styles$j.dropdownItem, className), role: "menuitem", "data-disabled": disabled, ...props, children });
+  return /* @__PURE__ */ jsx("div", { className: classNames(styles$k.dropdownItem, className), role: "menuitem", "data-disabled": disabled, ...props, children });
 }
 
 const CLICK_OUTSIDE_IGNORE_DATA_NAME = "data-clickoutside-ignore";
@@ -2127,7 +2127,7 @@ function useTriggerHandlersByEventTrigger() {
 }
 
 const dropdownPortal = "_dropdownPortal_p3tdk_2";
-const styles$i = {
+const styles$j = {
 	dropdownPortal: dropdownPortal
 };
 
@@ -2167,7 +2167,7 @@ function DropdownPortal({
           ...style
         },
         ref: portalRef,
-        className: classNames(styles$i.dropdownPortal, className),
+        className: classNames(styles$j.dropdownPortal, className),
         ...handlersByTrigger[triggerEvent],
         ...isNested && { [CLICK_OUTSIDE_IGNORE_DATA_NAME]: "true" },
         children
@@ -2209,6 +2209,69 @@ DropdownMenu.Content = DropdownContent;
 DropdownMenu.Item = DropdownItem;
 DropdownMenu.Portal = DropdownPortal;
 
+const notificationInline = "_notificationInline_1kerp_2";
+const accent = "_accent_1kerp_10";
+const negative = "_negative_1kerp_16";
+const positive = "_positive_1kerp_22";
+const warning = "_warning_1kerp_28";
+const outline = "_outline_1kerp_34";
+const filled = "_filled_1kerp_39";
+const statusIcon = "_statusIcon_1kerp_44";
+const body = "_body_1kerp_51";
+const titleRow = "_titleRow_1kerp_59";
+const title = "_title_1kerp_59";
+const closeButton = "_closeButton_1kerp_74";
+const closeIcon = "_closeIcon_1kerp_95";
+const description = "_description_1kerp_100";
+const actions = "_actions_1kerp_108";
+const styles$i = {
+	notificationInline: notificationInline,
+	accent: accent,
+	negative: negative,
+	positive: positive,
+	warning: warning,
+	outline: outline,
+	filled: filled,
+	statusIcon: statusIcon,
+	body: body,
+	titleRow: titleRow,
+	title: title,
+	closeButton: closeButton,
+	closeIcon: closeIcon,
+	description: description,
+	actions: actions
+};
+
+const STATUS_ICONS = {
+  accent: IconInfo.Filled,
+  negative: IconXMarkCircle,
+  positive: IconCheckCircle,
+  warning: IconCheckCircle
+};
+function NotificationInline({
+  title,
+  description,
+  color = "accent",
+  mode = "filled",
+  onClose,
+  children,
+  className,
+  ...props
+}) {
+  const StatusIcon = STATUS_ICONS[color];
+  return /* @__PURE__ */ jsxs("div", { className: classNames(styles$i.notificationInline, styles$i[color], styles$i[mode], className), ...props, children: [
+    /* @__PURE__ */ jsx(StatusIcon, { className: styles$i.statusIcon, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("span", { className: styles$i.body, children: [
+      /* @__PURE__ */ jsxs("span", { className: styles$i.titleRow, children: [
+        /* @__PURE__ */ jsx("span", { className: styles$i.title, children: title }),
+        onClose && /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Close", className: styles$i.closeButton, onClick: onClose, children: /* @__PURE__ */ jsx(IconXMark.Small, { className: styles$i.closeIcon, "aria-hidden": "true" }) })
+      ] }),
+      description && /* @__PURE__ */ jsx("span", { className: styles$i.description, children: description }),
+      children && /* @__PURE__ */ jsx("span", { className: styles$i.actions, children })
+    ] })
+  ] });
+}
+
 const ELLIPSIS = "...";
 const ELLIPSIS_SYMBOL = Symbol(ELLIPSIS);
 const DEFAULT_MAX_VISIBLE_PAGES_WITH_ELLIPSIS = 11;
@@ -3342,4 +3405,4 @@ function Tooltip(props) {
 }
 Tooltip.Content = TooltipContent;
 
-export { Badge, BadgeTabs, Breadcrumbs, Button, Checkbox, Chip, Counter, DatePicker, DropdownMenu, I18N_MONTH_LABELS, I18N_WEEKDAY_LABELS, IconArrow, IconArrowCircle, IconArrowCircleUp, IconArrowDiagonal, IconArrowUTurn, IconBell, IconBox, IconCalendar, IconCharacteristic, IconCheck, IconCheckCircle, IconChevron, IconChevronDouble, IconClock, IconCollapse, IconCopy, IconDots, IconDownload, IconEye, IconFace, IconFile, IconFilters, IconGear, IconHanger, IconHome, IconInfo, IconLogOut, IconLogo, IconMail, IconMinus, IconOneCircle, IconPerson, IconPhone, IconPlus, IconPrize, IconProject, IconQRCode, IconRequest, IconResizeCorner, IconScan, IconSearch, IconShopping, IconSort, IconStar, IconSticker, IconStop, IconStore, IconSwitch, IconTrash, IconXMark, IconXMarkCircle, LOCALE_FIRST_DAY_OF_WEEK, Pagination, ProgressBar, RadioButton, Search, SegmentControl, Slider, Stepper, Switch, Tabs, Tag, TextField, Tooltip, useDatePickerControls, useDatePickerMultiSelect, useDatePickerSelect };
+export { Badge, BadgeTabs, Breadcrumbs, Button, Checkbox, Chip, Counter, DatePicker, DropdownMenu, I18N_MONTH_LABELS, I18N_WEEKDAY_LABELS, IconArrow, IconArrowCircle, IconArrowCircleUp, IconArrowDiagonal, IconArrowUTurn, IconBell, IconBox, IconCalendar, IconCharacteristic, IconCheck, IconCheckCircle, IconChevron, IconChevronDouble, IconClock, IconCollapse, IconCopy, IconDots, IconDownload, IconEye, IconFace, IconFile, IconFilters, IconGear, IconHanger, IconHome, IconInfo, IconLogOut, IconLogo, IconMail, IconMinus, IconOneCircle, IconPerson, IconPhone, IconPlus, IconPrize, IconProject, IconQRCode, IconRequest, IconResizeCorner, IconScan, IconSearch, IconShopping, IconSort, IconStar, IconSticker, IconStop, IconStore, IconSwitch, IconTrash, IconXMark, IconXMarkCircle, LOCALE_FIRST_DAY_OF_WEEK, NotificationInline, Pagination, ProgressBar, RadioButton, Search, SegmentControl, Slider, Stepper, Switch, Tabs, Tag, TextField, Tooltip, useDatePickerControls, useDatePickerMultiSelect, useDatePickerSelect };

package/dist/style.css

@@ -272,6 +272,7 @@ textarea {
     --color-accent-900: color-mix(in srgb, var(--color-accent) 94.8%, var(--color-white) 5.2%);
     --color-accent-800: color-mix(in srgb, var(--color-accent) 90%, var(--color-white) 10%);
 
+    --color-accent-alpha-500: color-mix(in srgb, var(--color-accent) 50%, var(--color-transparent));
     --color-accent-alpha-200: color-mix(in srgb, var(--color-accent) 20%, var(--color-transparent));
     --color-accent-alpha-150: color-mix(in srgb, var(--color-accent) 15%, var(--color-transparent));
     --color-accent-alpha-100: color-mix(in srgb, var(--color-accent) 10%, var(--color-transparent));
@@ -283,12 +284,15 @@ textarea {
     --color-pink-alpha-100: color-mix(in srgb, var(--color-pink) 10%, var(--color-transparent));
 
     --color-red: #fe0f2f;
+    --color-red-alpha-500: color-mix(in srgb, var(--color-red) 50%, var(--color-transparent));
     --color-red-alpha-100: color-mix(in srgb, var(--color-red) 10%, var(--color-transparent));
 
     --color-orange: #f8a100;
+    --color-orange-alpha-500: color-mix(in srgb, var(--color-orange) 50%, var(--color-transparent));
     --color-orange-alpha-100: color-mix(in srgb, var(--color-orange) 10%, var(--color-transparent));
 
     --color-green: #00d06f;
+    --color-green-alpha-500: color-mix(in srgb, var(--color-green) 50%, var(--color-transparent));
     --color-green-alpha-100: color-mix(in srgb, var(--color-green) 10%, var(--color-transparent));
 
     --radius-xs: 4px;
@@ -354,65 +358,65 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._badge_p5h5n_2 {
+  ._badge_1s8y9_2 {
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--color-white);
     font-weight: var(--font-weight-bold);
 
-    &._primary_p5h5n_9 {
+    &._primary_1s8y9_9 {
       background-color: var(--badge-color);
     }
 
-    &._secondary_p5h5n_13 {
+    &._secondary_1s8y9_13 {
       background-color: var(--badge-color-alpha);
       color: var(--badge-color);
     }
 
-    &._accent_p5h5n_18 {
+    &._accent_1s8y9_18 {
       --badge-color: var(--color-accent);
       --badge-color-alpha: var(--color-accent-alpha-100);
     }
 
-    &._violet_p5h5n_23 {
+    &._violet_1s8y9_23 {
       --badge-color: var(--color-violet);
       --badge-color-alpha: var(--color-violet-alpha-100);
     }
 
-    &._pink_p5h5n_28 {
+    &._pink_1s8y9_28 {
       --badge-color: var(--color-pink);
       --badge-color-alpha: var(--color-pink-alpha-100);
     }
 
-    &._red_p5h5n_33 {
+    &._red_1s8y9_33 {
       --badge-color: var(--color-red);
       --badge-color-alpha: var(--color-red-alpha-100);
     }
 
-    &._orange_p5h5n_38 {
+    &._orange_1s8y9_38 {
       --badge-color: var(--color-orange);
       --badge-color-alpha: var(--color-orange-alpha-100);
     }
 
-    &._green_p5h5n_43 {
+    &._green_1s8y9_43 {
       --badge-color: var(--color-green);
       --badge-color-alpha: var(--color-green-alpha-100);
     }
 
-    &._neutral_p5h5n_48 {
+    &._neutral_1s8y9_48 {
       --badge-color: var(--color-neutral);
-      --badge-color-alpha: var(--color-neutral-alpha-100);
+      --badge-color-alpha: var(--color-neutral-alpha-60);
     }
 
-    &._lg_p5h5n_53 {
+    &._lg_1s8y9_53 {
       padding: var(--space-sm);
       border-radius: var(--radius-md);
       font-size: var(--size-sm);
       line-height: var(--line-height-md);
     }
 
-    &._md_p5h5n_60 {
+    &._md_1s8y9_60 {
       padding: var(--space-xs);
       border-radius: var(--radius-sm);
       font-size: var(--size-xs);
@@ -1110,6 +1114,119 @@ textarea {
     }
   }
 }
+@layer ui_baza_components {
+  ._notificationInline_1kerp_2 {
+    display: flex;
+    align-items: flex-start;
+    width: 100%;
+    padding: var(--space-xl);
+    gap: var(--space-sm);
+    border-radius: var(--radius-xl);
+
+    &._accent_1kerp_10 {
+      --notification-inline-color: var(--color-accent);
+      --notification-inline-background: var(--color-accent-alpha-100);
+      --notification-inline-border-color: var(--color-accent-alpha-500);
+    }
+
+    &._negative_1kerp_16 {
+      --notification-inline-color: var(--color-red);
+      --notification-inline-background: var(--color-red-alpha-100);
+      --notification-inline-border-color: var(--color-red-alpha-500);
+    }
+
+    &._positive_1kerp_22 {
+      --notification-inline-color: var(--color-green);
+      --notification-inline-background: var(--color-green-alpha-100);
+      --notification-inline-border-color: var(--color-green-alpha-500);
+    }
+
+    &._warning_1kerp_28 {
+      --notification-inline-color: var(--color-orange);
+      --notification-inline-background: var(--color-orange-alpha-100);
+      --notification-inline-border-color: var(--color-orange-alpha-500);
+    }
+
+    &._outline_1kerp_34 {
+      border: 2px solid var(--notification-inline-border-color);
+      background-color: var(--color-white);
+    }
+
+    &._filled_1kerp_39 {
+      background-color: var(--notification-inline-background);
+    }
+  }
+
+  ._statusIcon_1kerp_44 {
+    flex-shrink: 0;
+    width: var(--size-xl);
+    height: var(--size-xl);
+    color: var(--notification-inline-color);
+  }
+
+  ._body_1kerp_51 {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    gap: var(--space-xs);
+  }
+
+  ._titleRow_1kerp_59 {
+    display: flex;
+    align-items: center;
+    padding-left: var(--space-xs);
+    gap: var(--space-md);
+  }
+
+  ._title_1kerp_59 {
+    flex: 1;
+    color: var(--color-neutral);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--size-md);
+    line-height: var(--line-height-lg);
+  }
+
+  ._closeButton_1kerp_74 {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--size-xl);
+    height: var(--size-xl);
+    border-radius: var(--radius-sm);
+    color: var(--color-neutral-500);
+    cursor: pointer;
+    transition: color var(--transition-duration-default) ease-in-out;
+
+    &:hover {
+      color: var(--color-neutral);
+    }
+
+    &:focus-visible {
+      outline: var(--space-2xs) solid var(--color-accent);
+    }
+  }
+
+  ._closeIcon_1kerp_95 {
+    width: var(--size-xl);
+    height: var(--size-xl);
+  }
+
+  ._description_1kerp_100 {
+    display: block;
+    padding-inline: var(--space-xs);
+    color: var(--color-neutral-540);
+    font-size: var(--size-sm);
+    line-height: var(--line-height-md);
+  }
+
+  ._actions_1kerp_108 {
+    display: flex;
+    align-items: center;
+    padding-top: var(--space-md);
+  }
+}
 @layer ui_baza_components {
   ._paginationItem_1ll6p_2 {
     display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grandbazar/ui-baza",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",