@economic/taco 1.26.0 → 1.26.1

package/dist/taco.cjs.development.js

@@ -14904,8 +14904,9 @@ const Logo = /*#__PURE__*/React__default.forwardRef(function Logo(props, ref) {
 const getChildWidths = parent => {
   const widths = [];
   for (let index = 0; index < parent.children.length; index++) {
-    const childRect = parent.children[index].getBoundingClientRect();
-    widths.push(childRect.width);
+    var _parent$children$inde, _childRect$width;
+    const childRect = (_parent$children$inde = parent.children[index].firstElementChild) === null || _parent$children$inde === void 0 ? void 0 : _parent$children$inde.getBoundingClientRect();
+    widths.push((_childRect$width = childRect === null || childRect === void 0 ? void 0 : childRect.width) !== null && _childRect$width !== void 0 ? _childRect$width : 0);
   }
   return widths;
 };
@@ -15041,31 +15042,58 @@ const MenuButton = /*#__PURE__*/React__default.forwardRef(function MenuButton(pr
   }));
 });
 
-const AgreementDetails = props => {
+const AgreementAvatar = /*#__PURE__*/React__default.forwardRef(function AgreementAvatar(props, ref) {
   const {
-    children,
-    className: customClassName,
-    fallbackImageSrc,
-    ...agreement
+    src,
+    fallbackSrc,
+    ...otherProps
   } = props;
-  const className = cn('w-full rounded flex w-full px-1.5 xl:px-2 gap-2 overflow-hidden text-left items-center', customClassName);
-  let badge;
+  const [loaded, setLoaded] = React__default.useState(false);
+  const handleLoad = () => setLoaded(true);
+  const handleError = event => {
+    event.target.src = fallbackSrc;
+  };
+  const className = cn('h-9 w-9 rounded-full shrink-0 group-focus:yt-focus-dark xl:group-focus:shadow-none', {
+    visible: loaded
+  }, props.className);
+  return /*#__PURE__*/React__default.createElement("img", Object.assign({}, otherProps, {
+    className: className,
+    src: src,
+    onLoad: handleLoad,
+    onError: handleError,
+    ref: ref
+  }));
+});
+
+const AgreementBadge = ({
+  agreement,
+  ...props
+}) => {
   if (agreement.isAdministrator) {
-    badge = /*#__PURE__*/React__default.createElement(Badge, {
+    return /*#__PURE__*/React__default.createElement(Badge, Object.assign({}, props, {
       color: "blue",
-      small: true,
-      className: "ml-2"
-    }, "Admin");
+      small: true
+    }), "Admin");
   } else if (agreement.isDeveloper) {
-    badge = /*#__PURE__*/React__default.createElement(Badge, {
+    return /*#__PURE__*/React__default.createElement(Badge, Object.assign({}, props, {
       color: "blue",
-      small: true,
-      className: "ml-2"
-    }, "Developer");
+      small: true
+    }), "Developer");
   }
+  return null;
+};
+
+const AgreementItem = props => {
+  const {
+    children,
+    className: customClassName,
+    fallbackImageSrc,
+    ...agreement
+  } = props;
+  const className = cn('w-full rounded flex px-2 gap-2 overflow-hidden text-left items-center', customClassName);
   return /*#__PURE__*/React__default.createElement("span", {
     className: className
-  }, /*#__PURE__*/React__default.createElement(Image, {
+  }, /*#__PURE__*/React__default.createElement(AgreementAvatar, {
     fallbackSrc: fallbackImageSrc,
     src: agreement.imageSrc,
     title: `${agreement.name} - ${agreement.number} ${agreement.userId}`
@@ -15081,50 +15109,60 @@ const AgreementDetails = props => {
     className: "ml-1 mt-0.5 mb-0.5 !h-4 !w-4 flex-shrink-0 flex-grow-0"
   }) : null), /*#__PURE__*/React__default.createElement("span", {
     className: "text-grey-100 whitespace-nowrap text-xs"
-  }, agreement.number, " ", agreement.userId, " ", badge)), children);
+  }, agreement.number, " ", agreement.userId, " ", /*#__PURE__*/React__default.createElement(AgreementBadge, {
+    agreement: agreement
+  }))), children);
 };
-const Image = /*#__PURE__*/React__default.forwardRef(function AccountImage(props, ref) {
+
+const useMatchMedia = (query, defaultMatches = false) => {
+  const [matches, setMatches] = React__default.useState(defaultMatches);
+  const handleChange = React__default.useCallback(event => setMatches(event.matches), []);
+  React__default.useEffect(() => {
+    const mediaQuery = window.matchMedia(query);
+    setMatches(mediaQuery.matches);
+    mediaQuery.addEventListener('change', handleChange);
+    return () => {
+      mediaQuery.removeEventListener('change', handleChange);
+    };
+  }, []);
+  return matches;
+};
+
+const AgreementDisplay = props => {
   const {
-    src,
-    fallbackSrc,
-    ...otherProps
+    children,
+    currentAgreement,
+    fallbackImageSrc
   } = props;
-  const [loaded, setLoaded] = React__default.useState(false);
-  const handleLoad = () => setLoaded(true);
-  const handleError = event => {
-    event.target.src = fallbackSrc;
-  };
-  const className = cn('h-9 w-9 rounded-full shrink-0 group-focus:yt-focus-dark xl:group-focus:shadow-none', {
-    visible: loaded
-  }, props.className);
-  return /*#__PURE__*/React__default.createElement("img", Object.assign({}, otherProps, {
-    className: className,
-    src: src,
-    onLoad: handleLoad,
-    onError: handleError,
-    alt: "Company logo",
-    ref: ref
+  const isXlScreen = useMatchMedia('(min-width: 1280px)', window.innerWidth > 1280);
+  if (isXlScreen) {
+    const className = cn('h-12 flex-grow xl:[button>&]:hover:bg-white/[0.16]', props.className);
+    return /*#__PURE__*/React__default.createElement(AgreementItem, Object.assign({}, currentAgreement, {
+      children: children,
+      className: className,
+      fallbackImageSrc: fallbackImageSrc
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement("span", {
+    className: "relative flex h-12 flex-grow items-center pr-2"
+  }, /*#__PURE__*/React__default.createElement(AgreementAvatar, {
+    fallbackSrc: fallbackImageSrc,
+    src: currentAgreement.imageSrc,
+    title: `${currentAgreement.name} - ${currentAgreement.number} ${currentAgreement.userId}`
+  }), /*#__PURE__*/React__default.createElement(AgreementBadge, {
+    agreement: currentAgreement,
+    className: "absolute top-0 right-0 -mr-1 w-8 !justify-start"
   }));
-});
+};
 
 const Container$1 = props => {
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "-ml-3 flex flex-shrink-0 flex-grow-0 items-center gap-2 xl:ml-auto xl:w-64 xl:pr-2",
+    className: "-ml-2 flex flex-shrink-0 flex-grow-0 items-center gap-2 pr-2 xl:ml-auto xl:w-64",
     "data-taco": "header-agreements"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex"
   }), props.children);
 };
-function AgreementDisplay(props) {
-  const {
-    currentAgreement,
-    fallbackImageSrc
-  } = props;
-  return /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement(AgreementDetails, Object.assign({}, currentAgreement, {
-    className: "h-12 [&>span>span]:hidden xl:[&>span>span]:flex ",
-    fallbackImageSrc: fallbackImageSrc
-  })));
-}
 function AgreementSelector(props) {
   const {
     agreements,
@@ -15166,10 +15204,10 @@ function AgreementSelector(props) {
     onOpenChange: setOpen
   }, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Trigger, {
     className: "xl:focus-visible:yt-focus-dark [&:focus-visible_img]:yt-focus-dark w-full rounded outline-none xl:[&:focus-visible_img]:shadow-none"
-  }, /*#__PURE__*/React__default.createElement(AgreementDetails, Object.assign({}, currentAgreement, {
-    className: "h-12 flex-grow xl:hover:bg-white/[0.16] [&>span>span]:hidden xl:[&>span>span]:flex [[aria-current='true']>&]:bg-white/[0.16]",
+  }, /*#__PURE__*/React__default.createElement(AgreementDisplay, {
+    currentAgreement: currentAgreement,
     fallbackImageSrc: fallbackImageSrc
-  }), agreements ? /*#__PURE__*/React__default.createElement(Icon, {
+  }, agreements ? /*#__PURE__*/React__default.createElement(Icon, {
     className: "ml-auto hidden flex-shrink-0 flex-grow-0 text-white xl:flex",
     name: open ? 'chevron-up' : 'chevron-down'
   }) : null)), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Content, {
@@ -15230,11 +15268,21 @@ const createAgreementButton = (agreement, fallbackImageSrc, onChangeAgreement, i
     onClick: () => onChangeAgreement(agreement),
     onKeyDown: handleKeyDown,
     tabIndex: 0
-  }, /*#__PURE__*/React__default.createElement(AgreementDetails, Object.assign({}, agreement, {
+  }, /*#__PURE__*/React__default.createElement(AgreementItem, Object.assign({}, agreement, {
     className: "h-14 bg-white/[0.08] xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]",
     fallbackImageSrc: fallbackImageSrc
   })));
 };
+function AgreementDisplay$1(props) {
+  const {
+    currentAgreement,
+    fallbackImageSrc
+  } = props;
+  return /*#__PURE__*/React__default.createElement(Container$1, null, /*#__PURE__*/React__default.createElement(AgreementDisplay, {
+    currentAgreement: currentAgreement,
+    fallbackImageSrc: fallbackImageSrc
+  }));
+}
 
 const Header$2 = /*#__PURE__*/React__default.forwardRef(function Header(props, ref) {
   const className = cn('bg-blue-900 flex h-16 w-full shrink-0 items-center gap-4 pl-2', '[&>a:focus-visible]:yt-focus-dark [&>a]:px-2 [&>a]:rounded [&>a]:h-[calc(100%-14px)]',
@@ -15245,7 +15293,7 @@ const Header$2 = /*#__PURE__*/React__default.forwardRef(function Header(props, r
     ref: ref
   }));
 });
-Header$2.AgreementDisplay = AgreementDisplay;
+Header$2.AgreementDisplay = AgreementDisplay$1;
 Header$2.AgreementSelector = AgreementSelector;
 Header$2.Button = Button$3;
 Header$2.Link = Link$1;
@@ -15267,20 +15315,6 @@ const Content$9 = /*#__PURE__*/React__default.forwardRef(function LayoutContent(
   }));
 });
 
-const useMatchMedia = (query, defaultMatches = false) => {
-  const [matches, setMatches] = React__default.useState(defaultMatches);
-  const handleChange = React__default.useCallback(event => setMatches(event.matches), []);
-  React__default.useEffect(() => {
-    const mediaQuery = window.matchMedia(query);
-    setMatches(mediaQuery.matches);
-    mediaQuery.addEventListener('change', handleChange);
-    return () => {
-      mediaQuery.removeEventListener('change', handleChange);
-    };
-  }, []);
-  return matches;
-};
-
 const useIsLargeScreen = () => useMatchMedia('(min-width: 1024px)', window.innerWidth > 1024);
 
 const SidebarBackdrop = /*#__PURE__*/framerMotion.motion(Backdrop);