welcome-ui 1.0.0-beta.9 → 7.0.0-alpha.6

package/dist/Breadcrumb.js

@@ -1 +1,54 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react");require("@juggle/resize-observer");require("./Icon.js");require("./index-BNwz4P5j.js");require("./System.js");const e=require("./index-DSZG0Sqy.js");require("./throttle-BB1Y3bfD.js");exports.Breadcrumb=e.Breadcrumb;exports.BreadcrumbComponent=e.BreadcrumbComponent;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react"),de=require("./throttle-BB1Y3bfD.js"),u=require("@xstyled/styled-components"),j=require("./System.js"),ve=require("./Box.js"),fe=require("./hex-to-rgba-cCYXRc5D.js");require("./Icon.js");const he=require("./index-BNwz4P5j.js");var E=[],pe=function(){return E.some(function(e){return e.activeTargets.length>0})},be=function(){return E.some(function(e){return e.skippedTargets.length>0})},G="ResizeObserver loop completed with undelivered notifications.",ge=function(){var e;typeof ErrorEvent=="function"?e=new ErrorEvent("error",{message:G}):(e=document.createEvent("Event"),e.initEvent("error",!1,!1),e.message=G),window.dispatchEvent(e)},C;(function(e){e.BORDER_BOX="border-box",e.CONTENT_BOX="content-box",e.DEVICE_PIXEL_CONTENT_BOX="device-pixel-content-box"})(C||(C={}));var w=function(e){return Object.freeze(e)},me=function(){function e(t,r){this.inlineSize=t,this.blockSize=r,w(this)}return e}(),ee=function(){function e(t,r,n,i){return this.x=t,this.y=r,this.width=n,this.height=i,this.top=this.y,this.left=this.x,this.bottom=this.top+this.height,this.right=this.left+this.width,w(this)}return e.prototype.toJSON=function(){var t=this,r=t.x,n=t.y,i=t.top,a=t.right,o=t.bottom,v=t.left,f=t.width,l=t.height;return{x:r,y:n,top:i,right:a,bottom:o,left:v,width:f,height:l}},e.fromRect=function(t){return new e(t.x,t.y,t.width,t.height)},e}(),_=function(e){return e instanceof SVGElement&&"getBBox"in e},te=function(e){if(_(e)){var t=e.getBBox(),r=t.width,n=t.height;return!r&&!n}var i=e,a=i.offsetWidth,o=i.offsetHeight;return!(a||o||e.getClientRects().length)},V=function(e){var t;if(e instanceof Element)return!0;var r=(t=e==null?void 0:e.ownerDocument)===null||t===void 0?void 0:t.defaultView;return!!(r&&e instanceof r.Element)},xe=function(e){switch(e.tagName){case"INPUT":if(e.type!=="image")break;case"VIDEO":case"AUDIO":case"EMBED":case"OBJECT":case"CANVAS":case"IFRAME":case"IMG":return!0}return!1},S=typeof window<"u"?window:{},M=new WeakMap,X=/auto|scroll/,Ee=/^tb|vertical/,we=/msie|trident/i.test(S.navigator&&S.navigator.userAgent),p=function(e){return parseFloat(e||"0")},y=function(e,t,r){return e===void 0&&(e=0),t===void 0&&(t=0),r===void 0&&(r=!1),new me((r?t:e)||0,(r?e:t)||0)},J=w({devicePixelContentBoxSize:y(),borderBoxSize:y(),contentBoxSize:y(),contentRect:new ee(0,0,0,0)}),re=function(e,t){if(t===void 0&&(t=!1),M.has(e)&&!t)return M.get(e);if(te(e))return M.set(e,J),J;var r=getComputedStyle(e),n=_(e)&&e.ownerSVGElement&&e.getBBox(),i=!we&&r.boxSizing==="border-box",a=Ee.test(r.writingMode||""),o=!n&&X.test(r.overflowY||""),v=!n&&X.test(r.overflowX||""),f=n?0:p(r.paddingTop),l=n?0:p(r.paddingRight),z=n?0:p(r.paddingBottom),h=n?0:p(r.paddingLeft),N=n?0:p(r.borderTopWidth),k=n?0:p(r.borderRightWidth),D=n?0:p(r.borderBottomWidth),W=n?0:p(r.borderLeftWidth),O=h+l,x=f+z,B=W+k,T=N+D,c=v?e.offsetHeight-T-e.clientHeight:0,d=o?e.offsetWidth-B-e.clientWidth:0,b=i?O+B:0,g=i?x+T:0,m=n?n.width:p(r.width)-b-d,R=n?n.height:p(r.height)-g-c,ue=m+O+d+B,le=R+x+c+T,H=w({devicePixelContentBoxSize:y(Math.round(m*devicePixelRatio),Math.round(R*devicePixelRatio),a),borderBoxSize:y(ue,le,a),contentBoxSize:y(m,R,a),contentRect:new ee(h,f,m,R)});return M.set(e,H),H},ne=function(e,t,r){var n=re(e,r),i=n.borderBoxSize,a=n.contentBoxSize,o=n.devicePixelContentBoxSize;switch(t){case C.DEVICE_PIXEL_CONTENT_BOX:return o;case C.BORDER_BOX:return i;default:return a}},Re=function(){function e(t){var r=re(t);this.target=t,this.contentRect=r.contentRect,this.borderBoxSize=w([r.borderBoxSize]),this.contentBoxSize=w([r.contentBoxSize]),this.devicePixelContentBoxSize=w([r.devicePixelContentBoxSize])}return e}(),ie=function(e){if(te(e))return 1/0;for(var t=0,r=e.parentNode;r;)t+=1,r=r.parentNode;return t},ye=function(){var e=1/0,t=[];E.forEach(function(o){if(o.activeTargets.length!==0){var v=[];o.activeTargets.forEach(function(l){var z=new Re(l.target),h=ie(l.target);v.push(z),l.lastReportedSize=ne(l.target,l.observedBox),h<e&&(e=h)}),t.push(function(){o.callback.call(o.observer,v,o.observer)}),o.activeTargets.splice(0,o.activeTargets.length)}});for(var r=0,n=t;r<n.length;r++){var i=n[r];i()}return e},U=function(e){E.forEach(function(r){r.activeTargets.splice(0,r.activeTargets.length),r.skippedTargets.splice(0,r.skippedTargets.length),r.observationTargets.forEach(function(i){i.isActive()&&(ie(i.target)>e?r.activeTargets.push(i):r.skippedTargets.push(i))})})},ze=function(){var e=0;for(U(e);pe();)e=ye(),U(e);return be()&&ge(),e>0},$,oe=[],Oe=function(){return oe.splice(0).forEach(function(e){return e()})},Be=function(e){if(!$){var t=0,r=document.createTextNode(""),n={characterData:!0};new MutationObserver(function(){return Oe()}).observe(r,n),$=function(){r.textContent="".concat(t?t--:t++)}}oe.push(e),$()},Te=function(e){Be(function(){requestAnimationFrame(e)})},L=0,Se=function(){return!!L},Ce=250,ke={attributes:!0,characterData:!0,childList:!0,subtree:!0},Y=["resize","load","transitionend","animationend","animationstart","animationiteration","keyup","keydown","mouseup","mousedown","mouseover","mouseout","blur","focus"],K=function(e){return e===void 0&&(e=0),Date.now()+e},P=!1,De=function(){function e(){var t=this;this.stopped=!0,this.listener=function(){return t.schedule()}}return e.prototype.run=function(t){var r=this;if(t===void 0&&(t=Ce),!P){P=!0;var n=K(t);Te(function(){var i=!1;try{i=ze()}finally{if(P=!1,t=n-K(),!Se())return;i?r.run(1e3):t>0?r.run(t):r.start()}})}},e.prototype.schedule=function(){this.stop(),this.run()},e.prototype.observe=function(){var t=this,r=function(){return t.observer&&t.observer.observe(document.body,ke)};document.body?r():S.addEventListener("DOMContentLoaded",r)},e.prototype.start=function(){var t=this;this.stopped&&(this.stopped=!1,this.observer=new MutationObserver(this.listener),this.observe(),Y.forEach(function(r){return S.addEventListener(r,t.listener,!0)}))},e.prototype.stop=function(){var t=this;this.stopped||(this.observer&&this.observer.disconnect(),Y.forEach(function(r){return S.removeEventListener(r,t.listener,!0)}),this.stopped=!0)},e}(),q=new De,Q=function(e){!L&&e>0&&q.start(),L+=e,!L&&q.stop()},Me=function(e){return!_(e)&&!xe(e)&&getComputedStyle(e).display==="inline"},Ie=function(){function e(t,r){this.target=t,this.observedBox=r||C.CONTENT_BOX,this.lastReportedSize={inlineSize:0,blockSize:0}}return e.prototype.isActive=function(){var t=ne(this.target,this.observedBox,!0);return Me(this.target)&&(this.lastReportedSize=t),this.lastReportedSize.inlineSize!==t.inlineSize||this.lastReportedSize.blockSize!==t.blockSize},e}(),Ae=function(){function e(t,r){this.activeTargets=[],this.skippedTargets=[],this.observationTargets=[],this.observer=t,this.callback=r}return e}(),I=new WeakMap,Z=function(e,t){for(var r=0;r<e.length;r+=1)if(e[r].target===t)return r;return-1},A=function(){function e(){}return e.connect=function(t,r){var n=new Ae(t,r);I.set(t,n)},e.observe=function(t,r,n){var i=I.get(t),a=i.observationTargets.length===0;Z(i.observationTargets,r)<0&&(a&&E.push(i),i.observationTargets.push(new Ie(r,n&&n.box)),Q(1),q.schedule())},e.unobserve=function(t,r){var n=I.get(t),i=Z(n.observationTargets,r),a=n.observationTargets.length===1;i>=0&&(a&&E.splice(E.indexOf(n),1),n.observationTargets.splice(i,1),Q(-1))},e.disconnect=function(t){var r=this,n=I.get(t);n.observationTargets.slice().forEach(function(i){return r.unobserve(t,i.target)}),n.activeTargets.splice(0,n.activeTargets.length)},e}(),Le=function(){function e(t){if(arguments.length===0)throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");if(typeof t!="function")throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");A.connect(this,t)}return e.prototype.observe=function(t,r){if(arguments.length===0)throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");if(!V(t))throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");A.observe(this,t,r)},e.prototype.unobserve=function(t){if(arguments.length===0)throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");if(!V(t))throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");A.unobserve(this,t)},e.prototype.disconnect=function(){A.disconnect(this)},e.toString=function(){return"function ResizeObserver () { [polyfill code] }"},e}();const Ne=(e,t,r)=>Math.min(Math.max(e,t),r),We=u.aBox`
+  ${u.th("breadcrumbs.item.default")};
+  align-items: center;
+  transition: medium;
+  direction: initial;
+
+  &:hover {
+    ${u.th("breadcrumbs.item.hover")};
+  }
+
+  &[aria-current='page'] {
+    ${u.th("breadcrumbs.item.active")};
+  }
+
+  &[aria-disabled='true'] {
+    pointer-events: none;
+    cursor: default;
+  }
+`,$e=u.spanBox`
+  ${u.th("breadcrumbs.separator")};
+  display: flex;
+  align-items: center;
+`,Pe=j.forwardRef(({children:e,dataTestId:t,isActive:r,separator:n,...i},a)=>{const o=i.href||i.to;return s.createElement(ve.Box,{"aria-label":"breadcrumb",as:"li","data-testid":t,display:"inline-flex",flex:"0 0 auto",lineHeight:"normal"},n&&s.createElement($e,{role:"presentation"},n),s.createElement(We,{"aria-current":r?"page":void 0,"aria-disabled":!o,...i,ref:a},e))}),se=u.spanBox(({gradientBackground:e,theme:t})=>u.css`
+    left: 0;
+    background-image: ${ce(t,e)};
+    transform-origin: left;
+  `),ae=u.spanBox(({gradientBackground:e,theme:t})=>u.css`
+    right: 0;
+    background-image: ${ce(t,e,"left")};
+    transform-origin: right;
+  `),qe=u.divBox`
+  ${u.th("breadcrumbs.list")};
+  height: 100%;
+  position: relative;
+  overflow-x: hidden;
+
+  ${se},
+  ${ae} {
+    position: absolute;
+    bottom: 0;
+    top: 0;
+    width: 30;
+  }
+`,_e=u.olBox`
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  white-space: nowrap;
+`,ce=(e,t,r="right")=>{const n=u.th(`colors.${t}`)({theme:e}),i=fe.hexToRGBA(n,0);return`linear-gradient(to ${r}, ${n}, ${i} 100%)`},F=j.forwardRef(({children:e,gradientBackground:t="neutral-10",lastChildNotClickable:r=!0,separator:n=s.createElement(he.RightIcon,{size:"xs"}),...i},a)=>{const o=s.useRef(null),v=s.useRef(),f=s.useRef(),[l,z]=s.useState(!1),[h,N]=s.useState(0),k=s.Children.toArray(e).filter(Boolean),D=k.length,W=k.map((c,d)=>{const b=D===1||D===d+1,g=b&&r;return s.cloneElement(c,{key:`breadcrumb-${d}`,separator:b?void 0:n,isActive:g,...c.props})});function O(c,d){c&&(c.style.transform=`scale3d(${d}, 1, 1)`)}const x=s.useCallback(c=>{const d=1-c;O(v.current,d),O(f.current,c)},[]),B=s.useCallback(()=>{const{current:{offsetWidth:c,scrollLeft:d,scrollWidth:b}}=o,g=b-c,R=Ne(Math.abs(d-h),0,g)/g;x(R)},[h,x]),T=s.useMemo(()=>de.throttle(c=>{const[{target:{offsetWidth:d,scrollLeft:b,scrollWidth:g}}]=c,m=g-d;h||N(b===0?0:m),z(m>0)},300,!1),[h]);return s.useEffect(()=>{const c=new Le(T);return c.observe(o.current),()=>c.disconnect()},[]),s.useEffect(()=>{v.current&&f.current&&x(0)},[l,x]),s.createElement(qe,{as:"nav",ref:a,...i},l&&s.createElement(se,{gradientBackground:t,ref:v}),s.createElement(_e,{dir:"rtl",onScroll:B,ref:o},W.reverse()),l&&s.createElement(ae,{gradientBackground:t,ref:f}))});F.displayName="Breadcrumb";const Fe=Object.assign(F,{Item:Pe});exports.Breadcrumb=Fe;exports.BreadcrumbComponent=F;

package/dist/Breadcrumb.mjs

@@ -1,11 +1,441 @@
-import "react";
-import "@juggle/resize-observer";
+"use client";
+import g, { useRef as $, useState as X, Children as ge, cloneElement as me, useCallback as q, useMemo as xe, useEffect as J } from "react";
+import { t as Ee } from "./throttle-BDBzFeFj.mjs";
+import R, { th as z, css as ne } from "@xstyled/styled-components";
+import { forwardRef as ie } from "./System.mjs";
+import { Box as we } from "./Box.mjs";
+import { h as ze } from "./hex-to-rgba-BIDK-3ab.mjs";
 import "./Icon.mjs";
-import "./index-BRDOakbf.mjs";
-import "./System.mjs";
-import { a as B, B as b } from "./index-BFQbRuqA.mjs";
-import "./throttle-BDBzFeFj.mjs";
+import { R as Oe } from "./index-BRDOakbf.mjs";
+var x = [], Re = function() {
+  return x.some(function(e) {
+    return e.activeTargets.length > 0;
+  });
+}, ye = function() {
+  return x.some(function(e) {
+    return e.skippedTargets.length > 0;
+  });
+}, U = "ResizeObserver loop completed with undelivered notifications.", Be = function() {
+  var e;
+  typeof ErrorEvent == "function" ? e = new ErrorEvent("error", {
+    message: U
+  }) : (e = document.createEvent("Event"), e.initEvent("error", !1, !1), e.message = U), window.dispatchEvent(e);
+}, k;
+(function(e) {
+  e.BORDER_BOX = "border-box", e.CONTENT_BOX = "content-box", e.DEVICE_PIXEL_CONTENT_BOX = "device-pixel-content-box";
+})(k || (k = {}));
+var E = function(e) {
+  return Object.freeze(e);
+}, Te = /* @__PURE__ */ function() {
+  function e(t, r) {
+    this.inlineSize = t, this.blockSize = r, E(this);
+  }
+  return e;
+}(), oe = function() {
+  function e(t, r, n, i) {
+    return this.x = t, this.y = r, this.width = n, this.height = i, this.top = this.y, this.left = this.x, this.bottom = this.top + this.height, this.right = this.left + this.width, E(this);
+  }
+  return e.prototype.toJSON = function() {
+    var t = this, r = t.x, n = t.y, i = t.top, s = t.right, o = t.bottom, l = t.left, d = t.width, c = t.height;
+    return { x: r, y: n, top: i, right: s, bottom: o, left: l, width: d, height: c };
+  }, e.fromRect = function(t) {
+    return new e(t.x, t.y, t.width, t.height);
+  }, e;
+}(), G = function(e) {
+  return e instanceof SVGElement && "getBBox" in e;
+}, se = function(e) {
+  if (G(e)) {
+    var t = e.getBBox(), r = t.width, n = t.height;
+    return !r && !n;
+  }
+  var i = e, s = i.offsetWidth, o = i.offsetHeight;
+  return !(s || o || e.getClientRects().length);
+}, Y = function(e) {
+  var t;
+  if (e instanceof Element)
+    return !0;
+  var r = (t = e == null ? void 0 : e.ownerDocument) === null || t === void 0 ? void 0 : t.defaultView;
+  return !!(r && e instanceof r.Element);
+}, Se = function(e) {
+  switch (e.tagName) {
+    case "INPUT":
+      if (e.type !== "image")
+        break;
+    case "VIDEO":
+    case "AUDIO":
+    case "EMBED":
+    case "OBJECT":
+    case "CANVAS":
+    case "IFRAME":
+    case "IMG":
+      return !0;
+  }
+  return !1;
+}, C = typeof window < "u" ? window : {}, M = /* @__PURE__ */ new WeakMap(), K = /auto|scroll/, Ce = /^tb|vertical/, ke = /msie|trident/i.test(C.navigator && C.navigator.userAgent), f = function(e) {
+  return parseFloat(e || "0");
+}, O = function(e, t, r) {
+  return e === void 0 && (e = 0), t === void 0 && (t = 0), r === void 0 && (r = !1), new Te((r ? t : e) || 0, (r ? e : t) || 0);
+}, Q = E({
+  devicePixelContentBoxSize: O(),
+  borderBoxSize: O(),
+  contentBoxSize: O(),
+  contentRect: new oe(0, 0, 0, 0)
+}), ae = function(e, t) {
+  if (t === void 0 && (t = !1), M.has(e) && !t)
+    return M.get(e);
+  if (se(e))
+    return M.set(e, Q), Q;
+  var r = getComputedStyle(e), n = G(e) && e.ownerSVGElement && e.getBBox(), i = !ke && r.boxSizing === "border-box", s = Ce.test(r.writingMode || ""), o = !n && K.test(r.overflowY || ""), l = !n && K.test(r.overflowX || ""), d = n ? 0 : f(r.paddingTop), c = n ? 0 : f(r.paddingRight), y = n ? 0 : f(r.paddingBottom), v = n ? 0 : f(r.paddingLeft), _ = n ? 0 : f(r.borderTopWidth), D = n ? 0 : f(r.borderRightWidth), I = n ? 0 : f(r.borderBottomWidth), W = n ? 0 : f(r.borderLeftWidth), B = v + c, m = d + y, T = W + D, S = _ + I, a = l ? e.offsetHeight - S - e.clientHeight : 0, u = o ? e.offsetWidth - T - e.clientWidth : 0, h = i ? B + T : 0, p = i ? m + S : 0, b = n ? n.width : f(r.width) - h - u, w = n ? n.height : f(r.height) - p - a, pe = b + B + u + T, be = w + m + a + S, V = E({
+    devicePixelContentBoxSize: O(Math.round(b * devicePixelRatio), Math.round(w * devicePixelRatio), s),
+    borderBoxSize: O(pe, be, s),
+    contentBoxSize: O(b, w, s),
+    contentRect: new oe(v, d, b, w)
+  });
+  return M.set(e, V), V;
+}, ce = function(e, t, r) {
+  var n = ae(e, r), i = n.borderBoxSize, s = n.contentBoxSize, o = n.devicePixelContentBoxSize;
+  switch (t) {
+    case k.DEVICE_PIXEL_CONTENT_BOX:
+      return o;
+    case k.BORDER_BOX:
+      return i;
+    default:
+      return s;
+  }
+}, De = /* @__PURE__ */ function() {
+  function e(t) {
+    var r = ae(t);
+    this.target = t, this.contentRect = r.contentRect, this.borderBoxSize = E([r.borderBoxSize]), this.contentBoxSize = E([r.contentBoxSize]), this.devicePixelContentBoxSize = E([r.devicePixelContentBoxSize]);
+  }
+  return e;
+}(), ue = function(e) {
+  if (se(e))
+    return 1 / 0;
+  for (var t = 0, r = e.parentNode; r; )
+    t += 1, r = r.parentNode;
+  return t;
+}, Ie = function() {
+  var e = 1 / 0, t = [];
+  x.forEach(function(o) {
+    if (o.activeTargets.length !== 0) {
+      var l = [];
+      o.activeTargets.forEach(function(c) {
+        var y = new De(c.target), v = ue(c.target);
+        l.push(y), c.lastReportedSize = ce(c.target, c.observedBox), v < e && (e = v);
+      }), t.push(function() {
+        o.callback.call(o.observer, l, o.observer);
+      }), o.activeTargets.splice(0, o.activeTargets.length);
+    }
+  });
+  for (var r = 0, n = t; r < n.length; r++) {
+    var i = n[r];
+    i();
+  }
+  return e;
+}, Z = function(e) {
+  x.forEach(function(r) {
+    r.activeTargets.splice(0, r.activeTargets.length), r.skippedTargets.splice(0, r.skippedTargets.length), r.observationTargets.forEach(function(i) {
+      i.isActive() && (ue(i.target) > e ? r.activeTargets.push(i) : r.skippedTargets.push(i));
+    });
+  });
+}, Me = function() {
+  var e = 0;
+  for (Z(e); Re(); )
+    e = Ie(), Z(e);
+  return ye() && Be(), e > 0;
+}, P, le = [], Ae = function() {
+  return le.splice(0).forEach(function(e) {
+    return e();
+  });
+}, Le = function(e) {
+  if (!P) {
+    var t = 0, r = document.createTextNode(""), n = { characterData: !0 };
+    new MutationObserver(function() {
+      return Ae();
+    }).observe(r, n), P = function() {
+      r.textContent = "".concat(t ? t-- : t++);
+    };
+  }
+  le.push(e), P();
+}, Ne = function(e) {
+  Le(function() {
+    requestAnimationFrame(e);
+  });
+}, N = 0, _e = function() {
+  return !!N;
+}, We = 250, $e = { attributes: !0, characterData: !0, childList: !0, subtree: !0 }, j = [
+  "resize",
+  "load",
+  "transitionend",
+  "animationend",
+  "animationstart",
+  "animationiteration",
+  "keyup",
+  "keydown",
+  "mouseup",
+  "mousedown",
+  "mouseover",
+  "mouseout",
+  "blur",
+  "focus"
+], ee = function(e) {
+  return e === void 0 && (e = 0), Date.now() + e;
+}, F = !1, Pe = function() {
+  function e() {
+    var t = this;
+    this.stopped = !0, this.listener = function() {
+      return t.schedule();
+    };
+  }
+  return e.prototype.run = function(t) {
+    var r = this;
+    if (t === void 0 && (t = We), !F) {
+      F = !0;
+      var n = ee(t);
+      Ne(function() {
+        var i = !1;
+        try {
+          i = Me();
+        } finally {
+          if (F = !1, t = n - ee(), !_e())
+            return;
+          i ? r.run(1e3) : t > 0 ? r.run(t) : r.start();
+        }
+      });
+    }
+  }, e.prototype.schedule = function() {
+    this.stop(), this.run();
+  }, e.prototype.observe = function() {
+    var t = this, r = function() {
+      return t.observer && t.observer.observe(document.body, $e);
+    };
+    document.body ? r() : C.addEventListener("DOMContentLoaded", r);
+  }, e.prototype.start = function() {
+    var t = this;
+    this.stopped && (this.stopped = !1, this.observer = new MutationObserver(this.listener), this.observe(), j.forEach(function(r) {
+      return C.addEventListener(r, t.listener, !0);
+    }));
+  }, e.prototype.stop = function() {
+    var t = this;
+    this.stopped || (this.observer && this.observer.disconnect(), j.forEach(function(r) {
+      return C.removeEventListener(r, t.listener, !0);
+    }), this.stopped = !0);
+  }, e;
+}(), H = new Pe(), te = function(e) {
+  !N && e > 0 && H.start(), N += e, !N && H.stop();
+}, Fe = function(e) {
+  return !G(e) && !Se(e) && getComputedStyle(e).display === "inline";
+}, He = function() {
+  function e(t, r) {
+    this.target = t, this.observedBox = r || k.CONTENT_BOX, this.lastReportedSize = {
+      inlineSize: 0,
+      blockSize: 0
+    };
+  }
+  return e.prototype.isActive = function() {
+    var t = ce(this.target, this.observedBox, !0);
+    return Fe(this.target) && (this.lastReportedSize = t), this.lastReportedSize.inlineSize !== t.inlineSize || this.lastReportedSize.blockSize !== t.blockSize;
+  }, e;
+}(), Ge = /* @__PURE__ */ function() {
+  function e(t, r) {
+    this.activeTargets = [], this.skippedTargets = [], this.observationTargets = [], this.observer = t, this.callback = r;
+  }
+  return e;
+}(), A = /* @__PURE__ */ new WeakMap(), re = function(e, t) {
+  for (var r = 0; r < e.length; r += 1)
+    if (e[r].target === t)
+      return r;
+  return -1;
+}, L = function() {
+  function e() {
+  }
+  return e.connect = function(t, r) {
+    var n = new Ge(t, r);
+    A.set(t, n);
+  }, e.observe = function(t, r, n) {
+    var i = A.get(t), s = i.observationTargets.length === 0;
+    re(i.observationTargets, r) < 0 && (s && x.push(i), i.observationTargets.push(new He(r, n && n.box)), te(1), H.schedule());
+  }, e.unobserve = function(t, r) {
+    var n = A.get(t), i = re(n.observationTargets, r), s = n.observationTargets.length === 1;
+    i >= 0 && (s && x.splice(x.indexOf(n), 1), n.observationTargets.splice(i, 1), te(-1));
+  }, e.disconnect = function(t) {
+    var r = this, n = A.get(t);
+    n.observationTargets.slice().forEach(function(i) {
+      return r.unobserve(t, i.target);
+    }), n.activeTargets.splice(0, n.activeTargets.length);
+  }, e;
+}(), Ve = function() {
+  function e(t) {
+    if (arguments.length === 0)
+      throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
+    if (typeof t != "function")
+      throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");
+    L.connect(this, t);
+  }
+  return e.prototype.observe = function(t, r) {
+    if (arguments.length === 0)
+      throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");
+    if (!Y(t))
+      throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");
+    L.observe(this, t, r);
+  }, e.prototype.unobserve = function(t) {
+    if (arguments.length === 0)
+      throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");
+    if (!Y(t))
+      throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");
+    L.unobserve(this, t);
+  }, e.prototype.disconnect = function() {
+    L.disconnect(this);
+  }, e.toString = function() {
+    return "function ResizeObserver () { [polyfill code] }";
+  }, e;
+}();
+const Xe = (e, t, r) => Math.min(Math.max(e, t), r), qe = R.aBox`
+  ${z("breadcrumbs.item.default")};
+  align-items: center;
+  transition: medium;
+  direction: initial;
+
+  &:hover {
+    ${z("breadcrumbs.item.hover")};
+  }
+
+  &[aria-current='page'] {
+    ${z("breadcrumbs.item.active")};
+  }
+
+  &[aria-disabled='true'] {
+    pointer-events: none;
+    cursor: default;
+  }
+`, Je = R.spanBox`
+  ${z("breadcrumbs.separator")};
+  display: flex;
+  align-items: center;
+`, Ue = ie(
+  ({ children: e, dataTestId: t, isActive: r, separator: n, ...i }, s) => {
+    const o = i.href || i.to;
+    return /* @__PURE__ */ g.createElement(
+      we,
+      {
+        "aria-label": "breadcrumb",
+        as: "li",
+        "data-testid": t,
+        display: "inline-flex",
+        flex: "0 0 auto",
+        lineHeight: "normal"
+      },
+      n && /* @__PURE__ */ g.createElement(Je, { role: "presentation" }, n),
+      /* @__PURE__ */ g.createElement(
+        qe,
+        {
+          "aria-current": r ? "page" : void 0,
+          "aria-disabled": !o,
+          ...i,
+          ref: s
+        },
+        e
+      )
+    );
+  }
+), de = R.spanBox(
+  ({ gradientBackground: e, theme: t }) => ne`
+    left: 0;
+    background-image: ${fe(t, e)};
+    transform-origin: left;
+  `
+), ve = R.spanBox(
+  ({ gradientBackground: e, theme: t }) => ne`
+    right: 0;
+    background-image: ${fe(t, e, "left")};
+    transform-origin: right;
+  `
+), Ye = R.divBox`
+  ${z("breadcrumbs.list")};
+  height: 100%;
+  position: relative;
+  overflow-x: hidden;
+
+  ${de},
+  ${ve} {
+    position: absolute;
+    bottom: 0;
+    top: 0;
+    width: 30;
+  }
+`, Ke = R.olBox`
+  display: inline-flex;
+  align-items: center;
+  max-width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  white-space: nowrap;
+`, fe = (e, t, r = "right") => {
+  const n = z(`colors.${t}`)({ theme: e }), i = ze(n, 0);
+  return `linear-gradient(to ${r}, ${n}, ${i} 100%)`;
+}, he = ie(
+  ({
+    children: e,
+    gradientBackground: t = "neutral-10",
+    lastChildNotClickable: r = !0,
+    separator: n = /* @__PURE__ */ g.createElement(Oe, { size: "xs" }),
+    ...i
+  }, s) => {
+    const o = $(null), l = $(), d = $(), [c, y] = X(!1), [v, _] = X(0), D = ge.toArray(e).filter(Boolean), I = D.length, W = D.map((a, u) => {
+      const h = I === 1 || I === u + 1, p = h && r;
+      return me(a, {
+        // eslint-disable-next-line react/no-array-index-key
+        key: `breadcrumb-${u}`,
+        separator: h ? void 0 : n,
+        isActive: p,
+        ...a.props
+      });
+    });
+    function B(a, u) {
+      a && (a.style.transform = `scale3d(${u}, 1, 1)`);
+    }
+    const m = q((a) => {
+      const u = 1 - a;
+      B(l.current, u), B(d.current, a);
+    }, []), T = q(() => {
+      const {
+        current: { offsetWidth: a, scrollLeft: u, scrollWidth: h }
+      } = o, p = h - a, w = Xe(Math.abs(u - v), 0, p) / p;
+      m(w);
+    }, [v, m]), S = xe(
+      () => Ee(
+        (a) => {
+          const [
+            {
+              // Is offsetWidth really needed ?
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
+              target: { offsetWidth: u, scrollLeft: h, scrollWidth: p }
+            }
+          ] = a, b = p - u;
+          v || _(h === 0 ? 0 : b), y(b > 0);
+        },
+        300,
+        !1
+      ),
+      [v]
+    );
+    return J(() => {
+      const a = new Ve(S);
+      return a.observe(o.current), () => a.disconnect();
+    }, []), J(() => {
+      l.current && d.current && m(0);
+    }, [c, m]), /* @__PURE__ */ g.createElement(Ye, { as: "nav", ref: s, ...i }, c && /* @__PURE__ */ g.createElement(de, { gradientBackground: t, ref: l }), /* @__PURE__ */ g.createElement(Ke, { dir: "rtl", onScroll: T, ref: o }, W.reverse()), c && /* @__PURE__ */ g.createElement(ve, { gradientBackground: t, ref: d }));
+  }
+);
+he.displayName = "Breadcrumb";
+const ot = Object.assign(he, {
+  Item: Ue
+});
 export {
-  B as Breadcrumb,
-  b as BreadcrumbComponent
+  ot as Breadcrumb,
+  he as BreadcrumbComponent
 };

package/dist/Button.js

@@ -1,10 +1,10 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),m=require("./Loader.js"),l=require("./System.js"),u=require("./Box.js"),t=require("@xstyled/styled-components"),y=require("./X5NMLKT6-BzhcQu_I.js"),p=require("./hide-focus-rings-root-DGU4Klq5.js"),g=(e,s="square")=>t.css`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),t=require("@xstyled/styled-components"),m=require("./X5NMLKT6-BzhcQu_I.js"),y=require("./hide-focus-rings-root-DGU4Klq5.js"),l=require("./System.js"),p=require("./Loader.js"),u=require("./Box.js"),g=(e,s="square")=>t.css`
   width: ${t.th(`buttons.sizes.${e}.height`)};
   padding: 0;
   ${s==="circle"&&t.css`
     border-radius: ${t.th(`buttons.sizes.${e}.height`)};
   `};
-`,d=t(y.Button).withConfig({shouldForwardProp:l.shouldForwardProp})(({danger:e,disabled:s,shape:r,size:n="md",variant:o="primary"})=>t.css`
+`,d=t(m.Button).withConfig({shouldForwardProp:l.shouldForwardProp})(({danger:e,disabled:s,shape:r,size:n="md",variant:o="primary"})=>t.css`
     ${t.th(`buttons.${o}`)};
     ${e&&t.css`
       ${t.th(`buttons.danger.${o}`)};
@@ -49,7 +49,7 @@
     }
 
     ${!s&&t.css`
-      [${p.hideFocusRingsDataAttribute}] &:focus {
+      [${y.hideFocusRingsDataAttribute}] &:focus {
         box-shadow: none;
       }
       &:focus {
@@ -75,4 +75,4 @@
     &[disabled] {
       cursor: not-allowed;
     }
-  `),h=l.forwardRef(({children:e,danger:s,dataTestId:r,disabled:n,isLoading:o,size:a="md",variant:$="primary",...b},f)=>{const c=n||o;return i.createElement(d,{danger:s,"data-loading":o,"data-testid":r,disabled:c,ref:f,size:a,variant:c?"disabled":$,...b},o&&i.createElement("div",null,i.createElement(u.Box,{alignItems:"center",bottom:0,display:"flex",justifyContent:"center",left:0,m:0,position:"absolute",right:0,top:0},i.createElement(m.Loader,{size:"xs"})),i.createElement(u.Box,{opacity:"0"},e)),!o&&e)});h.displayName="Button";const w=d;exports.Button=h;exports.StyledButton=w;
+  `),h=l.forwardRef(({children:e,danger:s,dataTestId:r,disabled:n,isLoading:o,size:a="md",variant:$="primary",...b},f)=>{const c=n||o;return i.createElement(d,{danger:s,"data-loading":o,"data-testid":r,disabled:c,ref:f,size:a,variant:c?"disabled":$,...b},o&&i.createElement("div",null,i.createElement(u.Box,{alignItems:"center",bottom:0,display:"flex",justifyContent:"center",left:0,m:0,position:"absolute",right:0,top:0},i.createElement(p.Loader,{size:"xs"})),i.createElement(u.Box,{opacity:"0"},e)),!o&&e)});h.displayName="Button";const w=d;exports.Button=h;exports.StyledButton=w;

package/dist/Button.mjs

@@ -1,18 +1,18 @@
 "use client";
 import r from "react";
-import { Loader as h } from "./Loader.mjs";
-import { shouldForwardProp as b, forwardRef as p } from "./System.mjs";
+import h, { css as i, th as t, system as b } from "@xstyled/styled-components";
+import { B as p } from "./X5NMLKT6-uFSu0Lii.mjs";
+import { h as y } from "./hide-focus-rings-root-BNyva1yb.mjs";
+import { shouldForwardProp as w, forwardRef as g } from "./System.mjs";
+import { Loader as x } from "./Loader.mjs";
 import { Box as d } from "./Box.mjs";
-import y, { css as i, th as t, system as w } from "@xstyled/styled-components";
-import { B as g } from "./X5NMLKT6-DGZEtYXj.mjs";
-import { h as x } from "./hide-focus-rings-root-BNyva1yb.mjs";
 const B = (e, s = "square") => i`
   width: ${t(`buttons.sizes.${e}.height`)};
   padding: 0;
   ${s === "circle" && i`
     border-radius: ${t(`buttons.sizes.${e}.height`)};
   `};
-`, a = y(g).withConfig({ shouldForwardProp: b })(
+`, a = h(p).withConfig({ shouldForwardProp: w })(
   ({ danger: e, disabled: s, shape: l, size: n = "md", variant: o = "primary" }) => i`
     ${t(`buttons.${o}`)};
     ${e && i`
@@ -35,7 +35,7 @@ const B = (e, s = "square") => i`
     overflow: hidden;
     transition: medium;
     ${l && B(n, l)};
-    ${w};
+    ${b};
 
     & > svg.wui-icon,
     & > i.wui-icon-font {
@@ -58,7 +58,7 @@ const B = (e, s = "square") => i`
     }
 
     ${!s && i`
-      [${x}] &:focus {
+      [${y}] &:focus {
         box-shadow: none;
       }
       &:focus {
@@ -85,7 +85,7 @@ const B = (e, s = "square") => i`
       cursor: not-allowed;
     }
   `
-), E = p(
+), E = g(
   ({
     children: e,
     danger: s,
@@ -122,7 +122,7 @@ const B = (e, s = "square") => i`
           right: 0,
           top: 0
         },
-        /* @__PURE__ */ r.createElement(h, { size: "xs" })
+        /* @__PURE__ */ r.createElement(x, { size: "xs" })
       ), /* @__PURE__ */ r.createElement(d, { opacity: "0" }, e)),
       !o && e
     );

package/dist/ButtonGroup.js

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),u=require("./System.js"),e=require("@xstyled/styled-components"),c=e.div`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),e=require("@xstyled/styled-components"),u=require("./System.js"),c=e.div`
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;

package/dist/ButtonGroup.mjs

@@ -1,8 +1,8 @@
 "use client";
 import d, { Children as p, cloneElement as u } from "react";
-import { forwardRef as f } from "./System.mjs";
-import m, { system as b } from "@xstyled/styled-components";
-const c = m.div`
+import f, { system as m } from "@xstyled/styled-components";
+import { forwardRef as b } from "./System.mjs";
+const c = f.div`
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
@@ -32,8 +32,8 @@ const c = m.div`
     }
   }
 
-  ${b};
-`, y = f(
+  ${m};
+`, y = b(
   ({ children: t, dataTestId: o, disabled: e, size: i, variant: a }, s) => {
     function l(n) {
       return p.toArray(n).filter(Boolean).map((r) => u(r, {

package/dist/Card.js

@@ -1,4 +1,4 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),c=require("./System.js"),e=require("@xstyled/styled-components"),d=require("./Shape.js"),a=e(d.Shape)`
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react"),e=require("@xstyled/styled-components"),c=require("./Shape.js"),d=require("./System.js"),a=e(c.Shape)`
   ${e.th("cards.cover")};
 
   ${e.system};
@@ -14,4 +14,4 @@
   padding: lg;
 
   ${e.system};
-`,n=c.forwardRef(({children:t,...r},s)=>o.createElement(u,{ref:s,...r},t)),l=Object.assign(n,{Body:m,Cover:i});exports.Card=l;exports.CardComponent=n;
+`,n=d.forwardRef(({children:t,...r},s)=>o.createElement(u,{ref:s,...r},t)),l=Object.assign(n,{Body:m,Cover:i});exports.Card=l;exports.CardComponent=n;