@grandbazar/ui-baza 1.3.1 → 1.4.1

package/dist/index.cjs

@@ -54,7 +54,7 @@ function omit(object, ...keys) {
 const badge = "_badge_1s8y9_2";
 const primary$4 = "_primary_1s8y9_9";
 const secondary$5 = "_secondary_1s8y9_13";
-const accent$3 = "_accent_1s8y9_18";
+const accent$4 = "_accent_1s8y9_18";
 const violet = "_violet_1s8y9_23";
 const pink = "_pink_1s8y9_28";
 const red$1 = "_red_1s8y9_33";
@@ -63,11 +63,11 @@ 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$x = {
+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) {
@@ -278,6 +278,16 @@ function IconCalendar(props) {
   ) });
 }
 
+function IconCamera(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M20.7992 8.39989C20.7992 8.16138 20.7046 7.9327 20.5361 7.76398C20.3673 7.5952 20.1378 7.49973 19.8991 7.49973H16.2995C15.9986 7.4997 15.7177 7.34941 15.5508 7.09906L14.018 4.80032H9.58161L8.04876 7.09906C7.88186 7.34941 7.60092 7.4997 7.30005 7.49973H3.70048C3.4618 7.49973 3.23227 7.5952 3.0635 7.76398C2.89493 7.9327 2.80035 8.16138 2.80032 8.39989V18.2995C2.80032 18.5382 2.89472 18.7677 3.0635 18.9365C3.23226 19.1052 3.46187 19.1997 3.70048 19.1997H19.8991C20.1377 19.1997 20.3673 19.1052 20.5361 18.9365C20.7048 18.7677 20.7992 18.5382 20.7992 18.2995V8.39989ZM14.4992 12.8996C14.4991 11.4086 13.2908 10.2002 11.7998 10.2002C10.3087 10.2002 9.10048 11.4086 9.10038 12.8996C9.10038 14.3907 10.3087 15.6001 11.7998 15.6001C13.2909 15.6001 14.4992 14.3907 14.4992 12.8996ZM16.2995 12.8996C16.2995 15.3848 14.285 17.3994 11.7998 17.3994C9.3146 17.3994 7.30005 15.3848 7.30005 12.8996C7.30016 10.4145 9.31466 8.39989 11.7998 8.39989C14.2849 8.39989 16.2994 10.4145 16.2995 12.8996ZM22.5996 18.2995C22.5996 19.0154 22.3151 19.702 21.809 20.2083C21.3026 20.7147 20.6151 21 19.8991 21H3.70048C2.98443 21 2.29692 20.7147 1.79059 20.2083C1.28451 19.702 1 19.0154 1 18.2995V8.39989C1.00003 7.68401 1.28447 6.99736 1.79059 6.49108C2.29692 5.98475 2.98443 5.70048 3.70048 5.70048H6.81882L8.3506 3.40067L8.41935 3.31151C8.58905 3.11527 8.83728 3 9.10038 3H14.4992L14.6109 3.00752C14.8687 3.03962 15.1028 3.18147 15.249 3.40067L16.7807 5.70048H19.8991C20.6151 5.70048 21.3026 5.98475 21.809 6.49108C22.3151 6.99736 22.5995 7.68401 22.5996 8.39989V18.2995Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+
 function IconCharacteristic(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -427,6 +437,16 @@ function IconCopy(props) {
   ) });
 }
 
+function IconDocument(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M19.2 9.246C19.1906 9.16332 19.1725 9.08187 19.146 9.003V8.922C19.1027 8.82946 19.045 8.7444 18.975 8.67L13.575 3.27C13.5006 3.19999 13.4155 3.14227 13.323 3.099H13.242C13.1506 3.04657 13.0496 3.01291 12.945 3H7.5C6.78392 3 6.09716 3.28446 5.59081 3.79081C5.08447 4.29716 4.8 4.98392 4.8 5.7V18.3C4.8 19.0161 5.08447 19.7028 5.59081 20.2092C6.09716 20.7155 6.78392 21 7.5 21H16.5C17.2161 21 17.9028 20.7155 18.4092 20.2092C18.9155 19.7028 19.2 19.0161 19.2 18.3V9.3C19.2 9.3 19.2 9.3 19.2 9.246ZM13.8 6.069L16.131 8.4H14.7C14.4613 8.4 14.2324 8.30518 14.0636 8.1364C13.8948 7.96761 13.8 7.73869 13.8 7.5V6.069ZM17.4 18.3C17.4 18.5387 17.3052 18.7676 17.1364 18.9364C16.9676 19.1052 16.7387 19.2 16.5 19.2H7.5C7.26131 19.2 7.03239 19.1052 6.86361 18.9364C6.69482 18.7676 6.6 18.5387 6.6 18.3V5.7C6.6 5.46131 6.69482 5.23239 6.86361 5.0636C7.03239 4.89482 7.26131 4.8 7.5 4.8H12V7.5C12 8.21608 12.2845 8.90284 12.7908 9.40919C13.2972 9.91554 13.9839 10.2 14.7 10.2H17.4V18.3Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+
 function IconDots(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -759,6 +779,25 @@ function IconOneCircle(props) {
   ) });
 }
 
+function IconPause(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M7.92615 21C8.44915 21 8.8632 20.6077 8.8632 20.0956V3.91525C8.8632 3.40315 8.44915 3 7.92615 3C7.41404 3 7 3.40315 7 3.91525V20.0956C7 20.6077 7.41404 21 7.92615 21ZM15.1283 21C15.6404 21 16.0654 20.6077 16.0654 20.0956V3.91525C16.0654 3.40315 15.6404 3 15.1283 3C14.6162 3 14.2022 3.40315 14.2022 3.91525V20.0956C14.2022 20.6077 14.6162 21 15.1283 21Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+IconPause.Filled = function IconPauseFilled(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M6.46961 21H8.98896C9.95029 21 10.4586 20.4918 10.4586 19.5193V4.46961C10.4586 3.46409 9.95029 3 8.98896 3H6.46961C5.50829 3 5 3.50829 5 4.46961V19.5193C5 20.4918 5.50829 21 6.46961 21ZM14.5028 21H17.0111C17.9834 21 18.4807 20.4918 18.4807 19.5193V4.46961C18.4807 3.46409 17.9834 3 17.0111 3H14.5028C13.5304 3 13.0221 3.50829 13.0221 4.46961V19.5193C13.0221 20.4918 13.5304 21 14.5028 21Z",
+      fill: "currentColor"
+    }
+  ) });
+};
+
 function IconPerson(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -792,6 +831,25 @@ function IconPhone(props) {
   ) });
 }
 
+function IconPlay(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M5.09742 21C5.5227 21 5.88419 20.8299 6.30947 20.5853L18.7063 13.4194C19.5888 12.8984 19.8972 12.5582 19.8972 11.9947C19.8972 11.4312 19.5888 11.091 18.7063 10.5806L6.30947 3.40402C5.88419 3.15948 5.5227 3 5.09742 3C4.31065 3 3.82158 3.59539 3.82158 4.52038V19.469C3.82158 20.3939 4.31065 21 5.09742 21ZM5.63966 18.9693C5.57586 18.9693 5.53333 18.9267 5.53333 18.8417V5.14766C5.53333 5.06261 5.57586 5.02008 5.63966 5.02008C5.68218 5.02008 5.72471 5.04135 5.76723 5.07324L17.5369 11.8777C17.59 11.9096 17.6326 11.9415 17.6326 11.9947C17.6326 12.0478 17.59 12.0904 17.5369 12.1116L5.76723 18.9267C5.72471 18.948 5.68218 18.9693 5.63966 18.9693Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+IconPlay.Filled = function IconPlayFilled(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M5.09742 21C5.5227 21 5.88419 20.8299 6.30947 20.5853L18.7063 13.4194C19.5888 12.8984 19.8972 12.5582 19.8972 11.9947C19.8972 11.4312 19.5888 11.091 18.7063 10.5806L6.30947 3.40402C5.88419 3.15948 5.5227 3 5.09742 3C4.31065 3 3.82158 3.59539 3.82158 4.52038V19.469C3.82158 20.3939 4.31065 21 5.09742 21Z",
+      fill: "currentColor"
+    }
+  ) });
+};
+
 function IconPlus(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1028,6 +1086,16 @@ IconTrash.Filled = function IconTrashFilled(props) {
   ) });
 };
 
+function IconUpload(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "M2.99989 18.3V14.6999C2.99989 14.2029 3.40284 13.7999 3.8999 13.7999C4.39697 13.7999 4.79991 14.2029 4.79991 14.6999V18.3C4.79991 18.5387 4.8948 18.7675 5.06359 18.9363C5.23237 19.1051 5.46123 19.2 5.69992 19.2H18.3001C18.5388 19.2 18.7676 19.1051 18.9364 18.9363C19.1052 18.7675 19.2001 18.5387 19.2001 18.3V14.6999C19.2001 14.2029 19.603 13.7999 20.1001 13.7999C20.5972 13.7999 21.0001 14.2029 21.0001 14.6999V18.3C21.0001 19.0161 20.7154 19.7026 20.2091 20.209C19.7027 20.7153 19.0162 21 18.3001 21H5.69992C4.98383 21 4.29727 20.7153 3.79092 20.209C3.28456 19.7026 2.99989 19.0161 2.99989 18.3ZM11.1 14.6999V6.07248L8.13628 9.03619C7.78481 9.38766 7.21509 9.38766 6.86361 9.03619C6.51213 8.68471 6.51213 8.11499 6.86361 7.76352L11.3637 3.26346L11.4322 3.20194C11.7857 2.91362 12.3068 2.93396 12.6363 3.26346L17.1364 7.76352C17.4879 8.11499 17.4879 8.68471 17.1364 9.03619C16.7849 9.38766 16.2152 9.38766 15.8637 9.03619L12.9 6.07248V14.6999C12.9 15.197 12.4971 15.5999 12 15.5999C11.5029 15.5999 11.1 15.197 11.1 14.6999Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+
 function IconXMark(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
@@ -1068,7 +1136,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 +1185,7 @@ function Slot({
 }
 
 const breadcrumbItem = "_breadcrumbItem_cua4v_2";
-const styles$t = {
+const styles$u = {
 	breadcrumbItem: breadcrumbItem
 };
 
@@ -1128,7 +1196,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 +1208,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 +1229,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 +1243,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 +1267,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 +1289,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 +1301,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 +1314,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 +1326,7 @@ function Checkbox({ className, label, indeterminate, ...props }) {
 }
 
 const chip = "_chip_dj4kw_2";
-const styles$p = {
+const styles$q = {
 	chip: chip
 };
 
@@ -1266,7 +1334,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 +1348,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 +1374,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 +1384,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 +1457,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 +1472,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 +1515,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 +1757,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 +2199,7 @@ function useTriggerHandlersByEventTrigger() {
 }
 
 const dropdownPortal = "_dropdownPortal_p3tdk_2";
-const styles$i = {
+const styles$j = {
 	dropdownPortal: dropdownPortal
 };
 
@@ -2171,7 +2239,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 +2281,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;
@@ -3365,6 +3496,7 @@ exports.IconArrowUTurn = IconArrowUTurn;
 exports.IconBell = IconBell;
 exports.IconBox = IconBox;
 exports.IconCalendar = IconCalendar;
+exports.IconCamera = IconCamera;
 exports.IconCharacteristic = IconCharacteristic;
 exports.IconCheck = IconCheck;
 exports.IconCheckCircle = IconCheckCircle;
@@ -3373,6 +3505,7 @@ exports.IconChevronDouble = IconChevronDouble;
 exports.IconClock = IconClock;
 exports.IconCollapse = IconCollapse;
 exports.IconCopy = IconCopy;
+exports.IconDocument = IconDocument;
 exports.IconDots = IconDots;
 exports.IconDownload = IconDownload;
 exports.IconEye = IconEye;
@@ -3388,8 +3521,10 @@ exports.IconLogo = IconLogo;
 exports.IconMail = IconMail;
 exports.IconMinus = IconMinus;
 exports.IconOneCircle = IconOneCircle;
+exports.IconPause = IconPause;
 exports.IconPerson = IconPerson;
 exports.IconPhone = IconPhone;
+exports.IconPlay = IconPlay;
 exports.IconPlus = IconPlus;
 exports.IconPrize = IconPrize;
 exports.IconProject = IconProject;
@@ -3406,9 +3541,11 @@ exports.IconStop = IconStop;
 exports.IconStore = IconStore;
 exports.IconSwitch = IconSwitch;
 exports.IconTrash = IconTrash;
+exports.IconUpload = IconUpload;
 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

@@ -239,6 +239,8 @@ export declare function IconBox(props: TSvgIconProps): JSX.Element;
 
 export declare function IconCalendar(props: TSvgIconProps): JSX.Element;
 
+export declare function IconCamera(props: TSvgIconProps): JSX.Element;
+
 export declare function IconCharacteristic(props: TSvgIconProps): JSX.Element;
 
 export declare function IconCheck(props: TSvgIconProps): JSX.Element;
@@ -263,6 +265,8 @@ export declare function IconCollapse(props: TSvgIconProps): JSX.Element;
 
 export declare function IconCopy(props: TSvgIconProps): JSX.Element;
 
+export declare function IconDocument(props: TSvgIconProps): JSX.Element;
+
 export declare function IconDots(props: TSvgIconProps): JSX.Element;
 
 export declare function IconDownload(props: TSvgIconProps): JSX.Element;
@@ -325,6 +329,12 @@ export declare function IconMinus(props: TSvgIconProps): JSX.Element;
 
 export declare function IconOneCircle(props: TSvgIconProps): JSX.Element;
 
+export declare function IconPause(props: TSvgIconProps): JSX.Element;
+
+export declare namespace IconPause {
+    var Filled: (props: TSvgIconProps) => JSX.Element;
+}
+
 export declare function IconPerson(props: TSvgIconProps): JSX.Element;
 
 export declare namespace IconPerson {
@@ -333,6 +343,12 @@ export declare namespace IconPerson {
 
 export declare function IconPhone(props: TSvgIconProps): JSX.Element;
 
+export declare function IconPlay(props: TSvgIconProps): JSX.Element;
+
+export declare namespace IconPlay {
+    var Filled: (props: TSvgIconProps) => JSX.Element;
+}
+
 export declare function IconPlus(props: TSvgIconProps): JSX.Element;
 
 export declare function IconPrize(props: TSvgIconProps): JSX.Element;
@@ -383,6 +399,8 @@ export declare namespace IconTrash {
     var Filled: (props: TSvgIconProps) => JSX.Element;
 }
 
+export declare function IconUpload(props: TSvgIconProps): JSX.Element;
+
 declare function IconVK(props: TSvgIconProps): JSX.Element;
 
 export declare function IconXMark(props: TSvgIconProps): JSX.Element;
@@ -401,6 +419,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 +816,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

@@ -50,7 +50,7 @@ function omit(object, ...keys) {
 const badge = "_badge_1s8y9_2";
 const primary$4 = "_primary_1s8y9_9";
 const secondary$5 = "_secondary_1s8y9_13";
-const accent$3 = "_accent_1s8y9_18";
+const accent$4 = "_accent_1s8y9_18";
 const violet = "_violet_1s8y9_23";
 const pink = "_pink_1s8y9_28";
 const red$1 = "_red_1s8y9_33";
@@ -59,11 +59,11 @@ 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$x = {
+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) {
@@ -274,6 +274,16 @@ function IconCalendar(props) {
   ) });
 }
 
+function IconCamera(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M20.7992 8.39989C20.7992 8.16138 20.7046 7.9327 20.5361 7.76398C20.3673 7.5952 20.1378 7.49973 19.8991 7.49973H16.2995C15.9986 7.4997 15.7177 7.34941 15.5508 7.09906L14.018 4.80032H9.58161L8.04876 7.09906C7.88186 7.34941 7.60092 7.4997 7.30005 7.49973H3.70048C3.4618 7.49973 3.23227 7.5952 3.0635 7.76398C2.89493 7.9327 2.80035 8.16138 2.80032 8.39989V18.2995C2.80032 18.5382 2.89472 18.7677 3.0635 18.9365C3.23226 19.1052 3.46187 19.1997 3.70048 19.1997H19.8991C20.1377 19.1997 20.3673 19.1052 20.5361 18.9365C20.7048 18.7677 20.7992 18.5382 20.7992 18.2995V8.39989ZM14.4992 12.8996C14.4991 11.4086 13.2908 10.2002 11.7998 10.2002C10.3087 10.2002 9.10048 11.4086 9.10038 12.8996C9.10038 14.3907 10.3087 15.6001 11.7998 15.6001C13.2909 15.6001 14.4992 14.3907 14.4992 12.8996ZM16.2995 12.8996C16.2995 15.3848 14.285 17.3994 11.7998 17.3994C9.3146 17.3994 7.30005 15.3848 7.30005 12.8996C7.30016 10.4145 9.31466 8.39989 11.7998 8.39989C14.2849 8.39989 16.2994 10.4145 16.2995 12.8996ZM22.5996 18.2995C22.5996 19.0154 22.3151 19.702 21.809 20.2083C21.3026 20.7147 20.6151 21 19.8991 21H3.70048C2.98443 21 2.29692 20.7147 1.79059 20.2083C1.28451 19.702 1 19.0154 1 18.2995V8.39989C1.00003 7.68401 1.28447 6.99736 1.79059 6.49108C2.29692 5.98475 2.98443 5.70048 3.70048 5.70048H6.81882L8.3506 3.40067L8.41935 3.31151C8.58905 3.11527 8.83728 3 9.10038 3H14.4992L14.6109 3.00752C14.8687 3.03962 15.1028 3.18147 15.249 3.40067L16.7807 5.70048H19.8991C20.6151 5.70048 21.3026 5.98475 21.809 6.49108C22.3151 6.99736 22.5995 7.68401 22.5996 8.39989V18.2995Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+
 function IconCharacteristic(props) {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
     "path",
@@ -423,6 +433,16 @@ function IconCopy(props) {
   ) });
 }
 
+function IconDocument(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M19.2 9.246C19.1906 9.16332 19.1725 9.08187 19.146 9.003V8.922C19.1027 8.82946 19.045 8.7444 18.975 8.67L13.575 3.27C13.5006 3.19999 13.4155 3.14227 13.323 3.099H13.242C13.1506 3.04657 13.0496 3.01291 12.945 3H7.5C6.78392 3 6.09716 3.28446 5.59081 3.79081C5.08447 4.29716 4.8 4.98392 4.8 5.7V18.3C4.8 19.0161 5.08447 19.7028 5.59081 20.2092C6.09716 20.7155 6.78392 21 7.5 21H16.5C17.2161 21 17.9028 20.7155 18.4092 20.2092C18.9155 19.7028 19.2 19.0161 19.2 18.3V9.3C19.2 9.3 19.2 9.3 19.2 9.246ZM13.8 6.069L16.131 8.4H14.7C14.4613 8.4 14.2324 8.30518 14.0636 8.1364C13.8948 7.96761 13.8 7.73869 13.8 7.5V6.069ZM17.4 18.3C17.4 18.5387 17.3052 18.7676 17.1364 18.9364C16.9676 19.1052 16.7387 19.2 16.5 19.2H7.5C7.26131 19.2 7.03239 19.1052 6.86361 18.9364C6.69482 18.7676 6.6 18.5387 6.6 18.3V5.7C6.6 5.46131 6.69482 5.23239 6.86361 5.0636C7.03239 4.89482 7.26131 4.8 7.5 4.8H12V7.5C12 8.21608 12.2845 8.90284 12.7908 9.40919C13.2972 9.91554 13.9839 10.2 14.7 10.2H17.4V18.3Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+
 function IconDots(props) {
   return /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: [
     /* @__PURE__ */ jsx(
@@ -755,6 +775,25 @@ function IconOneCircle(props) {
   ) });
 }
 
+function IconPause(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M7.92615 21C8.44915 21 8.8632 20.6077 8.8632 20.0956V3.91525C8.8632 3.40315 8.44915 3 7.92615 3C7.41404 3 7 3.40315 7 3.91525V20.0956C7 20.6077 7.41404 21 7.92615 21ZM15.1283 21C15.6404 21 16.0654 20.6077 16.0654 20.0956V3.91525C16.0654 3.40315 15.6404 3 15.1283 3C14.6162 3 14.2022 3.40315 14.2022 3.91525V20.0956C14.2022 20.6077 14.6162 21 15.1283 21Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+IconPause.Filled = function IconPauseFilled(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M6.46961 21H8.98896C9.95029 21 10.4586 20.4918 10.4586 19.5193V4.46961C10.4586 3.46409 9.95029 3 8.98896 3H6.46961C5.50829 3 5 3.50829 5 4.46961V19.5193C5 20.4918 5.50829 21 6.46961 21ZM14.5028 21H17.0111C17.9834 21 18.4807 20.4918 18.4807 19.5193V4.46961C18.4807 3.46409 17.9834 3 17.0111 3H14.5028C13.5304 3 13.0221 3.50829 13.0221 4.46961V19.5193C13.0221 20.4918 13.5304 21 14.5028 21Z",
+      fill: "currentColor"
+    }
+  ) });
+};
+
 function IconPerson(props) {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
     "path",
@@ -788,6 +827,25 @@ function IconPhone(props) {
   ) });
 }
 
+function IconPlay(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M5.09742 21C5.5227 21 5.88419 20.8299 6.30947 20.5853L18.7063 13.4194C19.5888 12.8984 19.8972 12.5582 19.8972 11.9947C19.8972 11.4312 19.5888 11.091 18.7063 10.5806L6.30947 3.40402C5.88419 3.15948 5.5227 3 5.09742 3C4.31065 3 3.82158 3.59539 3.82158 4.52038V19.469C3.82158 20.3939 4.31065 21 5.09742 21ZM5.63966 18.9693C5.57586 18.9693 5.53333 18.9267 5.53333 18.8417V5.14766C5.53333 5.06261 5.57586 5.02008 5.63966 5.02008C5.68218 5.02008 5.72471 5.04135 5.76723 5.07324L17.5369 11.8777C17.59 11.9096 17.6326 11.9415 17.6326 11.9947C17.6326 12.0478 17.59 12.0904 17.5369 12.1116L5.76723 18.9267C5.72471 18.948 5.68218 18.9693 5.63966 18.9693Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+IconPlay.Filled = function IconPlayFilled(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M5.09742 21C5.5227 21 5.88419 20.8299 6.30947 20.5853L18.7063 13.4194C19.5888 12.8984 19.8972 12.5582 19.8972 11.9947C19.8972 11.4312 19.5888 11.091 18.7063 10.5806L6.30947 3.40402C5.88419 3.15948 5.5227 3 5.09742 3C4.31065 3 3.82158 3.59539 3.82158 4.52038V19.469C3.82158 20.3939 4.31065 21 5.09742 21Z",
+      fill: "currentColor"
+    }
+  ) });
+};
+
 function IconPlus(props) {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
     "path",
@@ -1024,6 +1082,16 @@ IconTrash.Filled = function IconTrashFilled(props) {
   ) });
 };
 
+function IconUpload(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M2.99989 18.3V14.6999C2.99989 14.2029 3.40284 13.7999 3.8999 13.7999C4.39697 13.7999 4.79991 14.2029 4.79991 14.6999V18.3C4.79991 18.5387 4.8948 18.7675 5.06359 18.9363C5.23237 19.1051 5.46123 19.2 5.69992 19.2H18.3001C18.5388 19.2 18.7676 19.1051 18.9364 18.9363C19.1052 18.7675 19.2001 18.5387 19.2001 18.3V14.6999C19.2001 14.2029 19.603 13.7999 20.1001 13.7999C20.5972 13.7999 21.0001 14.2029 21.0001 14.6999V18.3C21.0001 19.0161 20.7154 19.7026 20.2091 20.209C19.7027 20.7153 19.0162 21 18.3001 21H5.69992C4.98383 21 4.29727 20.7153 3.79092 20.209C3.28456 19.7026 2.99989 19.0161 2.99989 18.3ZM11.1 14.6999V6.07248L8.13628 9.03619C7.78481 9.38766 7.21509 9.38766 6.86361 9.03619C6.51213 8.68471 6.51213 8.11499 6.86361 7.76352L11.3637 3.26346L11.4322 3.20194C11.7857 2.91362 12.3068 2.93396 12.6363 3.26346L17.1364 7.76352C17.4879 8.11499 17.4879 8.68471 17.1364 9.03619C16.7849 9.38766 16.2152 9.38766 15.8637 9.03619L12.9 6.07248V14.6999C12.9 15.197 12.4971 15.5999 12 15.5999C11.5029 15.5999 11.1 15.197 11.1 14.6999Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+
 function IconXMark(props) {
   return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx(
     "path",
@@ -1064,7 +1132,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 +1181,7 @@ function Slot({
 }
 
 const breadcrumbItem = "_breadcrumbItem_cua4v_2";
-const styles$t = {
+const styles$u = {
 	breadcrumbItem: breadcrumbItem
 };
 
@@ -1124,7 +1192,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 +1204,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 +1225,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 +1239,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 +1263,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 +1285,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 +1297,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 +1310,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 +1322,7 @@ function Checkbox({ className, label, indeterminate, ...props }) {
 }
 
 const chip = "_chip_dj4kw_2";
-const styles$p = {
+const styles$q = {
 	chip: chip
 };
 
@@ -1262,7 +1330,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 +1344,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 +1370,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 +1380,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 +1453,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 +1468,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 +1511,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 +1753,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 +2195,7 @@ function useTriggerHandlersByEventTrigger() {
 }
 
 const dropdownPortal = "_dropdownPortal_p3tdk_2";
-const styles$i = {
+const styles$j = {
 	dropdownPortal: dropdownPortal
 };
 
@@ -2167,7 +2235,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 +2277,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 +3473,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, IconCamera, IconCharacteristic, IconCheck, IconCheckCircle, IconChevron, IconChevronDouble, IconClock, IconCollapse, IconCopy, IconDocument, IconDots, IconDownload, IconEye, IconFace, IconFile, IconFilters, IconGear, IconHanger, IconHome, IconInfo, IconLogOut, IconLogo, IconMail, IconMinus, IconOneCircle, IconPause, IconPerson, IconPhone, IconPlay, IconPlus, IconPrize, IconProject, IconQRCode, IconRequest, IconResizeCorner, IconScan, IconSearch, IconShopping, IconSort, IconStar, IconSticker, IconStop, IconStore, IconSwitch, IconTrash, IconUpload, 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;
@@ -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.1",
+  "version": "1.4.1",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",