@mage-ui/components 1.0.55 → 1.0.56

package/dist/components/navigations/breadcrumbs/Breadcrumbs.d.mts

@@ -1,6 +1,6 @@
 import { BreadcrumbsBarProps } from "./BreadcrumbsBar.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { ReactNode } from "react";
+import React, { ReactNode } from "react";
 
 //#region src/components/navigations/breadcrumbs/Breadcrumbs.d.ts
 type BreadcrumbsProps = {
@@ -25,7 +25,7 @@ declare const Breadcrumbs: {
   Item: {
     ({
       children
-    }: ItemProps): ReactNode;
+    }: ItemProps): React.ReactNode;
     displayName: string;
   };
   Bar: {

package/dist/components/navigations/breadcrumbs/Breadcrumbs.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.mts","names":[],"sources":["../../../../src/components/navigations/breadcrumbs/Breadcrumbs.tsx"],"mappings":";;;;;KAuBY,gBAAA;EACV,SAAA,GAAY,SAAA;EACZ,UAAA;IACE,WAAA;IACA,IAAA;IACA,OAAA;IACA,IAAA;IACA,IAAA;IACA,SAAA;IACA,OAAA;EAAA;EAEF,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,WAAA;EAAA;;;;KAIV,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;OAmFS,SAAA,GAAS,SAAA;;;;;;;;;;;;;KAJhC,SAAA;EACH,QAAA,EAAU,SAAA;AAAA"}
+{"version":3,"file":"Breadcrumbs.d.mts","names":[],"sources":["../../../../src/components/navigations/breadcrumbs/Breadcrumbs.tsx"],"mappings":";;;;;KAwBY,gBAAA;EACV,SAAA,GAAY,SAAA;EACZ,UAAA;IACE,WAAA;IACA,IAAA;IACA,OAAA;IACA,IAAA;IACA,IAAA;IACA,SAAA;IACA,OAAA;EAAA;EAEF,QAAA,GAAW,SAAA;AAAA;AAAA,cAGA,WAAA;EAAA;;;;KAIV,gBAAA,GAAgB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;OAsFS,SAAA,GAAS,KAAA,CAAA,SAAA;;;;;;;;;;;;;KAJhC,SAAA;EACH,QAAA,EAAU,SAAA;AAAA"}

package/dist/components/navigations/breadcrumbs/Breadcrumbs.mjs

@@ -1,2 +1,2 @@
-import{BreadcrumbsBar as e}from"./BreadcrumbsBar.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{breadcrumbs as n,breadcrumbsCurrent as r,breadcrumbsItem as i,breadcrumbsList as a,breadcrumbsRoot as o,breadcrumbsSeparator as s,breadcrumbsWrapper as c}from"@mage-ui/styled-system/recipes";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";import{Children as f,Fragment as p,cloneElement as m,isValidElement as h}from"react";const g=({separator:e=`/`,children:r,classNames:f})=>{let p=_(r);return u(`nav`,{"aria-label":`breadcrumb`,className:t(f?.breadcrumbs??n(),f?.root??o()),children:u(`div`,{className:f?.wrapper??c(),children:u(`ol`,{className:f?.list??a(),children:p.map((t,n)=>d(`li`,{className:f?.item??i(),children:[n<p.length-1&&d(l,{children:[t,u(`span`,{"aria-hidden":`true`,className:f?.separator??s(),children:e})]}),n===p.length-1&&v(t,f)]},t.key??`breadcrumbs-item-${n}`))})})})},_=e=>f.toArray(e).flatMap(e=>h(e)?e.type===p?_(e.props.children):e.type===y?[e]:[]:[]),v=(e,t)=>{if(h(e)&&h(e.props.children)){let t=e.props.children;return m(t,{"aria-current":`page`,...t.props??{}})}return u(`span`,{"aria-current":`page`,className:t?.current??r(),children:e})},y=({children:e})=>e;y.displayName=`Breadcrumbs.Item`,g.Item=y,g.Bar=e;export{g as Breadcrumbs};
+import{BreadcrumbsBar as e}from"./BreadcrumbsBar.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{breadcrumbs as n,breadcrumbsCurrent as r,breadcrumbsItem as i,breadcrumbsLink as a,breadcrumbsList as o,breadcrumbsRoot as s,breadcrumbsSeparator as c,breadcrumbsWrapper as l}from"@mage-ui/styled-system/recipes";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";import p,{Children as m,Fragment as h,cloneElement as g,isValidElement as _}from"react";const v=({separator:e=`/`,children:r,classNames:m})=>{let h=y(r);return d(`nav`,{"aria-label":`breadcrumb`,className:t(m?.breadcrumbs??n(),m?.root??s()),children:d(`div`,{className:m?.wrapper??l(),children:d(`ol`,{className:m?.list??o(),children:h.map((t,n)=>f(`li`,{className:m?.item??i(),children:[n<h.length-1&&f(u,{children:[p.cloneElement(t,{className:a(),...t.props}),d(`span`,{"aria-hidden":`true`,className:m?.separator??c(),children:e})]}),n===h.length-1&&b(t,m)]},t.key??`breadcrumbs-item-${n}`))})})})},y=e=>m.toArray(e).flatMap(e=>_(e)?e.type===h?y(e.props.children):e.type===x?[e]:[]:[]),b=(e,t)=>{if(_(e)&&_(e.props.children)){let t=e.props.children;return g(t,{"aria-current":`page`,...t.props??{}})}return d(`span`,{"aria-current":`page`,className:t?.current??r(),children:e})},x=({children:e})=>e;x.displayName=`Breadcrumbs.Item`,v.Item=x,v.Bar=e;export{v as Breadcrumbs};
 //# sourceMappingURL=Breadcrumbs.mjs.map

package/dist/components/navigations/breadcrumbs/Breadcrumbs.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.mjs","names":["Fragment"],"sources":["../../../../src/components/navigations/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  Fragment,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  breadcrumbs,\n  breadcrumbsCurrent,\n  breadcrumbsItem,\n  breadcrumbsList,\n  breadcrumbsRoot,\n  breadcrumbsSeparator,\n  breadcrumbsWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { BreadcrumbsBar } from './BreadcrumbsBar';\n\nexport type BreadcrumbsProps = {\n  separator?: ReactNode;\n  classNames?: {\n    breadcrumbs?: string;\n    root?: string;\n    wrapper?: string;\n    list?: string;\n    item?: string;\n    separator?: string;\n    current?: string;\n  };\n  children?: ReactNode;\n};\n\nexport const Breadcrumbs = ({\n  separator = '/',\n  children,\n  classNames,\n}: BreadcrumbsProps) => {\n  const items = getItems(children);\n\n  return (\n    <nav\n      aria-label='breadcrumb'\n      className={cx(\n        classNames?.breadcrumbs ?? breadcrumbs(),\n        classNames?.root ?? breadcrumbsRoot(),\n      )}\n    >\n      <div className={classNames?.wrapper ?? breadcrumbsWrapper()}>\n        <ol className={classNames?.list ?? breadcrumbsList()}>\n          {items.map((child, index) => (\n            <li\n              key={child.key ?? `breadcrumbs-item-${index}`}\n              className={classNames?.item ?? breadcrumbsItem()}\n            >\n              {index < items.length - 1 && (\n                <>\n                  {child}\n                  <span\n                    aria-hidden='true'\n                    className={classNames?.separator ?? breadcrumbsSeparator()}\n                  >\n                    {separator}\n                  </span>\n                </>\n              )}\n              {index === items.length - 1 && lastItem(child, classNames)}\n            </li>\n          ))}\n        </ol>\n      </div>\n    </nav>\n  );\n};\n\ntype Child = ReactElement<{ children?: ReactNode }>;\n\nconst getItems = (children: ReactNode): Child[] => {\n  return Children.toArray(children).flatMap((child) => {\n    if (!isValidElement<{ children?: ReactNode }>(child)) {\n      return [];\n    }\n\n    if (child.type === Fragment) {\n      return getItems(child.props.children);\n    }\n\n    if (child.type === Item) {\n      return [child];\n    }\n\n    return [];\n  });\n};\n\nconst lastItem = (\n  child: Child,\n  classNames?: BreadcrumbsProps['classNames'],\n) => {\n  if (isValidElement(child) && isValidElement(child.props.children)) {\n    const childChildren = child.props.children as Child;\n    return cloneElement(childChildren, {\n      'aria-current': 'page',\n      ...(childChildren.props ?? {}),\n    } as HTMLAttributes<HTMLElement>);\n  }\n  return (\n    <span\n      aria-current='page'\n      className={classNames?.current ?? breadcrumbsCurrent()}\n    >\n      {child}\n    </span>\n  );\n};\n\ntype ItemProps = {\n  children: ReactNode;\n};\n\nconst Item = ({ children }: ItemProps) => {\n  return children;\n};\n\nItem.displayName = 'Breadcrumbs.Item';\nBreadcrumbs.Item = Item;\nBreadcrumbs.Bar = BreadcrumbsBar;\n"],"mappings":"icAqCA,MAAa,GAAe,CAC1B,YAAY,IACZ,WACA,gBACsB,CACtB,IAAM,EAAQ,EAAS,EAAS,CAEhC,OACE,EAAC,MAAA,CACC,aAAW,aACX,UAAW,EACT,GAAY,aAAe,GAAa,CACxC,GAAY,MAAQ,GAAiB,CACtC,UAED,EAAC,MAAA,CAAI,UAAW,GAAY,SAAW,GAAoB,UACzD,EAAC,KAAA,CAAG,UAAW,GAAY,MAAQ,GAAiB,UACjD,EAAM,KAAK,EAAO,IACjB,EAAC,KAAA,CAEC,UAAW,GAAY,MAAQ,GAAiB,WAE/C,EAAQ,EAAM,OAAS,GACtB,EAAA,EAAA,CAAA,SAAA,CACG,EACD,EAAC,OAAA,CACC,cAAY,OACZ,UAAW,GAAY,WAAa,GAAsB,UAEzD,GACI,CAAA,CAAA,CACN,CAEJ,IAAU,EAAM,OAAS,GAAK,EAAS,EAAO,EAAW,CAAA,EAdrD,EAAM,KAAO,oBAAoB,IAenC,CACL,EACC,EACD,EACF,EAMJ,EAAY,GACT,EAAS,QAAQ,EAAS,CAAC,QAAS,GACpC,EAAyC,EAAM,CAIhD,EAAM,OAASA,EACV,EAAS,EAAM,MAAM,SAAS,CAGnC,EAAM,OAAS,EACV,CAAC,EAAM,CAGT,EAAE,CAXA,EAAE,CAYX,CAGE,GACJ,EACA,IACG,CACH,GAAI,EAAe,EAAM,EAAI,EAAe,EAAM,MAAM,SAAS,CAAE,CACjE,IAAM,EAAgB,EAAM,MAAM,SAClC,OAAO,EAAa,EAAe,CACjC,eAAgB,OAChB,GAAI,EAAc,OAAS,EAAE,CAC9B,CAAgC,CAEnC,OACE,EAAC,OAAA,CACC,eAAa,OACb,UAAW,GAAY,SAAW,GAAoB,UAErD,GACI,EAQL,GAAQ,CAAE,cACP,EAGT,EAAK,YAAc,mBACnB,EAAY,KAAO,EACnB,EAAY,IAAM"}
+{"version":3,"file":"Breadcrumbs.mjs","names":["Fragment"],"sources":["../../../../src/components/navigations/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, {\n  Children,\n  cloneElement,\n  Fragment,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  breadcrumbs,\n  breadcrumbsCurrent,\n  breadcrumbsItem,\n  breadcrumbsLink,\n  breadcrumbsList,\n  breadcrumbsRoot,\n  breadcrumbsSeparator,\n  breadcrumbsWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { BreadcrumbsBar } from './BreadcrumbsBar';\n\nexport type BreadcrumbsProps = {\n  separator?: ReactNode;\n  classNames?: {\n    breadcrumbs?: string;\n    root?: string;\n    wrapper?: string;\n    list?: string;\n    item?: string;\n    separator?: string;\n    current?: string;\n  };\n  children?: ReactNode;\n};\n\nexport const Breadcrumbs = ({\n  separator = '/',\n  children,\n  classNames,\n}: BreadcrumbsProps) => {\n  const items = getItems(children);\n\n  return (\n    <nav\n      aria-label='breadcrumb'\n      className={cx(\n        classNames?.breadcrumbs ?? breadcrumbs(),\n        classNames?.root ?? breadcrumbsRoot(),\n      )}\n    >\n      <div className={classNames?.wrapper ?? breadcrumbsWrapper()}>\n        <ol className={classNames?.list ?? breadcrumbsList()}>\n          {items.map((child, index) => (\n            <li\n              key={child.key ?? `breadcrumbs-item-${index}`}\n              className={classNames?.item ?? breadcrumbsItem()}\n            >\n              {index < items.length - 1 && (\n                <>\n                  {React.cloneElement(child, {\n                    className: breadcrumbsLink(),\n                    ...child.props,\n                  })}\n                  <span\n                    aria-hidden='true'\n                    className={classNames?.separator ?? breadcrumbsSeparator()}\n                  >\n                    {separator}\n                  </span>\n                </>\n              )}\n              {index === items.length - 1 && lastItem(child, classNames)}\n            </li>\n          ))}\n        </ol>\n      </div>\n    </nav>\n  );\n};\n\ntype Child = ReactElement<{ children?: ReactNode; className?: string }>;\n\nconst getItems = (children: ReactNode): Child[] => {\n  return Children.toArray(children).flatMap((child) => {\n    if (!isValidElement<{ children?: ReactNode }>(child)) {\n      return [];\n    }\n\n    if (child.type === Fragment) {\n      return getItems(child.props.children);\n    }\n\n    if (child.type === Item) {\n      return [child];\n    }\n\n    return [];\n  });\n};\n\nconst lastItem = (\n  child: Child,\n  classNames?: BreadcrumbsProps['classNames'],\n) => {\n  if (isValidElement(child) && isValidElement(child.props.children)) {\n    const childChildren = child.props.children as Child;\n    return cloneElement(childChildren, {\n      'aria-current': 'page',\n      ...(childChildren.props ?? {}),\n    } as HTMLAttributes<HTMLElement>);\n  }\n  return (\n    <span\n      aria-current='page'\n      className={classNames?.current ?? breadcrumbsCurrent()}\n    >\n      {child}\n    </span>\n  );\n};\n\ntype ItemProps = {\n  children: ReactNode;\n};\n\nconst Item = ({ children }: ItemProps) => {\n  return children;\n};\n\nItem.displayName = 'Breadcrumbs.Item';\nBreadcrumbs.Item = Item;\nBreadcrumbs.Bar = BreadcrumbsBar;\n"],"mappings":"ydAsCA,MAAa,GAAe,CAC1B,YAAY,IACZ,WACA,gBACsB,CACtB,IAAM,EAAQ,EAAS,EAAS,CAEhC,OACE,EAAC,MAAA,CACC,aAAW,aACX,UAAW,EACT,GAAY,aAAe,GAAa,CACxC,GAAY,MAAQ,GAAiB,CACtC,UAED,EAAC,MAAA,CAAI,UAAW,GAAY,SAAW,GAAoB,UACzD,EAAC,KAAA,CAAG,UAAW,GAAY,MAAQ,GAAiB,UACjD,EAAM,KAAK,EAAO,IACjB,EAAC,KAAA,CAEC,UAAW,GAAY,MAAQ,GAAiB,WAE/C,EAAQ,EAAM,OAAS,GACtB,EAAA,EAAA,CAAA,SAAA,CACG,EAAM,aAAa,EAAO,CACzB,UAAW,GAAiB,CAC5B,GAAG,EAAM,MACV,CAAC,CACF,EAAC,OAAA,CACC,cAAY,OACZ,UAAW,GAAY,WAAa,GAAsB,UAEzD,GACI,CAAA,CAAA,CACN,CAEJ,IAAU,EAAM,OAAS,GAAK,EAAS,EAAO,EAAW,CAAA,EAjBrD,EAAM,KAAO,oBAAoB,IAkBnC,CACL,EACC,EACD,EACF,EAMJ,EAAY,GACT,EAAS,QAAQ,EAAS,CAAC,QAAS,GACpC,EAAyC,EAAM,CAIhD,EAAM,OAASA,EACV,EAAS,EAAM,MAAM,SAAS,CAGnC,EAAM,OAAS,EACV,CAAC,EAAM,CAGT,EAAE,CAXA,EAAE,CAYX,CAGE,GACJ,EACA,IACG,CACH,GAAI,EAAe,EAAM,EAAI,EAAe,EAAM,MAAM,SAAS,CAAE,CACjE,IAAM,EAAgB,EAAM,MAAM,SAClC,OAAO,EAAa,EAAe,CACjC,eAAgB,OAChB,GAAI,EAAc,OAAS,EAAE,CAC9B,CAAgC,CAEnC,OACE,EAAC,OAAA,CACC,eAAa,OACb,UAAW,GAAY,SAAW,GAAoB,UAErD,GACI,EAQL,GAAQ,CAAE,cACP,EAGT,EAAK,YAAc,mBACnB,EAAY,KAAO,EACnB,EAAY,IAAM"}

package/dist/components/navigations/breadcrumbs/BreadcrumbsBar.mjs

@@ -1,2 +1,2 @@
-import{cx as e}from"@mage-ui/styled-system/css";import{breadcrumbsBar as t,breadcrumbsBarButtonBack as n,breadcrumbsBarDivider as r,breadcrumbsBarRoot as i,breadcrumbsBarWrapper as a}from"@mage-ui/styled-system/recipes";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{Breadcrumbs as c,Button as l,Icon as u}from"@mage-ui/components";const d=({backText:d,classNames:f,children:p,onBack:m})=>o(`div`,{className:e(f?.breadcrumbsBar??t(),f?.root??i()),children:s(`div`,{className:f?.wrapper??a(),children:[o(l,{startSlot:o(u,{path:`/icons/sprite-mage.svg`,name:`breadcrumbs-back`}),classNames:{button:f?.buttonBack??n()},onClick:m,children:d}),o(`span`,{className:f?.divider??r()}),o(c,{separator:o(u,{path:`/icons/sprite-mage.svg`,name:`breadcrumbs-separator`}),children:p})]})});d.displayName=`Breadcrumbs.Bar`;export{d as BreadcrumbsBar};
+import{cx as e}from"@mage-ui/styled-system/css";import{breadcrumbsBar as t,breadcrumbsBarButtonBack as n,breadcrumbsBarDivider as r,breadcrumbsBarRoot as i,breadcrumbsBarWrapper as a}from"@mage-ui/styled-system/recipes";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{Breadcrumbs as c,Button as l,Icon as u}from"@mage-ui/components";const d=({backText:d,classNames:f,children:p,onBack:m})=>o(`div`,{className:e(f?.breadcrumbsBar??t(),f?.root??i()),children:s(`div`,{className:f?.wrapper??a(),children:[o(l,{startSlot:o(u,{path:`/icons/sprite-mage.svg`,name:`mage-breadcrumbs-back`}),classNames:{button:f?.buttonBack??n()},onClick:m,children:d}),o(`span`,{className:f?.divider??r()}),o(c,{separator:o(u,{path:`/icons/sprite-mage.svg`,name:`mage-breadcrumbs-separator`}),children:p})]})});d.displayName=`Breadcrumbs.Bar`;export{d as BreadcrumbsBar};
 //# sourceMappingURL=BreadcrumbsBar.mjs.map

package/dist/components/navigations/breadcrumbs/BreadcrumbsBar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbsBar.mjs","names":[],"sources":["../../../../src/components/navigations/breadcrumbs/BreadcrumbsBar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Breadcrumbs, Button, Icon } from '@mage-ui/components';\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  breadcrumbsBar,\n  breadcrumbsBarButtonBack,\n  breadcrumbsBarDivider,\n  breadcrumbsBarRoot,\n  breadcrumbsBarWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nexport type BreadcrumbsBarProps = {\n  backText?: ReactNode;\n  classNames?: {\n    breadcrumbsBar?: string;\n    root?: string;\n    wrapper?: string;\n    divider?: string;\n    buttonBack?: string;\n  };\n  children?: ReactNode;\n  onBack?: () => void;\n};\n\nexport const BreadcrumbsBar = ({\n  backText,\n  classNames,\n  children,\n  onBack,\n}: BreadcrumbsBarProps): ReactNode => {\n  return (\n    <div\n      className={cx(\n        classNames?.breadcrumbsBar ?? breadcrumbsBar(),\n        classNames?.root ?? breadcrumbsBarRoot(),\n      )}\n    >\n      <div className={classNames?.wrapper ?? breadcrumbsBarWrapper()}>\n        <Button\n          startSlot={\n            <Icon path='/icons/sprite-mage.svg' name='breadcrumbs-back' />\n          }\n          classNames={{\n            button: classNames?.buttonBack ?? breadcrumbsBarButtonBack(),\n          }}\n          onClick={onBack}\n        >\n          {backText}\n        </Button>\n        <span className={classNames?.divider ?? breadcrumbsBarDivider()} />\n        <Breadcrumbs\n          separator={\n            <Icon path='/icons/sprite-mage.svg' name='breadcrumbs-separator' />\n          }\n        >\n          {children}\n        </Breadcrumbs>\n      </div>\n    </div>\n  );\n};\n\nBreadcrumbsBar.displayName = 'Breadcrumbs.Bar';\n"],"mappings":"sVAyBA,MAAa,GAAkB,CAC7B,WACA,aACA,WACA,YAGE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,gBAAkB,GAAgB,CAC9C,GAAY,MAAQ,GAAoB,CACzC,UAED,EAAC,MAAA,CAAI,UAAW,GAAY,SAAW,GAAuB,WAC5D,EAAC,EAAA,CACC,UACE,EAAC,EAAA,CAAK,KAAK,yBAAyB,KAAK,oBAAqB,CAEhE,WAAY,CACV,OAAQ,GAAY,YAAc,GAA0B,CAC7D,CACD,QAAS,WAER,GACM,CACT,EAAC,OAAA,CAAK,UAAW,GAAY,SAAW,GAAuB,CAAA,CAAI,CACnE,EAAC,EAAA,CACC,UACE,EAAC,EAAA,CAAK,KAAK,yBAAyB,KAAK,yBAA0B,CAGpE,YACW,GACV,EACF,CAIV,EAAe,YAAc"}
+{"version":3,"file":"BreadcrumbsBar.mjs","names":[],"sources":["../../../../src/components/navigations/breadcrumbs/BreadcrumbsBar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { Breadcrumbs, Button, Icon } from '@mage-ui/components';\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  breadcrumbsBar,\n  breadcrumbsBarButtonBack,\n  breadcrumbsBarDivider,\n  breadcrumbsBarRoot,\n  breadcrumbsBarWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nexport type BreadcrumbsBarProps = {\n  backText?: ReactNode;\n  classNames?: {\n    breadcrumbsBar?: string;\n    root?: string;\n    wrapper?: string;\n    divider?: string;\n    buttonBack?: string;\n  };\n  children?: ReactNode;\n  onBack?: () => void;\n};\n\nexport const BreadcrumbsBar = ({\n  backText,\n  classNames,\n  children,\n  onBack,\n}: BreadcrumbsBarProps): ReactNode => {\n  return (\n    <div\n      className={cx(\n        classNames?.breadcrumbsBar ?? breadcrumbsBar(),\n        classNames?.root ?? breadcrumbsBarRoot(),\n      )}\n    >\n      <div className={classNames?.wrapper ?? breadcrumbsBarWrapper()}>\n        <Button\n          startSlot={\n            <Icon path='/icons/sprite-mage.svg' name='mage-breadcrumbs-back' />\n          }\n          classNames={{\n            button: classNames?.buttonBack ?? breadcrumbsBarButtonBack(),\n          }}\n          onClick={onBack}\n        >\n          {backText}\n        </Button>\n        <span className={classNames?.divider ?? breadcrumbsBarDivider()} />\n        <Breadcrumbs\n          separator={\n            <Icon\n              path='/icons/sprite-mage.svg'\n              name='mage-breadcrumbs-separator'\n            />\n          }\n        >\n          {children}\n        </Breadcrumbs>\n      </div>\n    </div>\n  );\n};\n\nBreadcrumbsBar.displayName = 'Breadcrumbs.Bar';\n"],"mappings":"sVAyBA,MAAa,GAAkB,CAC7B,WACA,aACA,WACA,YAGE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,gBAAkB,GAAgB,CAC9C,GAAY,MAAQ,GAAoB,CACzC,UAED,EAAC,MAAA,CAAI,UAAW,GAAY,SAAW,GAAuB,WAC5D,EAAC,EAAA,CACC,UACE,EAAC,EAAA,CAAK,KAAK,yBAAyB,KAAK,yBAA0B,CAErE,WAAY,CACV,OAAQ,GAAY,YAAc,GAA0B,CAC7D,CACD,QAAS,WAER,GACM,CACT,EAAC,OAAA,CAAK,UAAW,GAAY,SAAW,GAAuB,CAAA,CAAI,CACnE,EAAC,EAAA,CACC,UACE,EAAC,EAAA,CACC,KAAK,yBACL,KAAK,8BACL,CAGH,YACW,GACV,EACF,CAIV,EAAe,YAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mage-ui/components",
-  "version": "1.0.55",
+  "version": "1.0.56",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,7 +25,7 @@
     "rimraf": "^6.1.3",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "@mage-ui/preset": "1.0.55",
+    "@mage-ui/preset": "1.0.56",
     "@mage-ui/styled-system": "1.0.8"
   },
   "peerDependencies": {