@startlibs/components 1.1.5 → 1.2.0-rc.1

package/lib-yak/ToastNotifications.mjs

@@ -0,0 +1,316 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _map from 'lodash/fp/map';
+import _concat from 'lodash/fp/concat';
+import _differenceBy from 'lodash/fp/differenceBy';
+import _isObject from 'lodash/fp/isObject';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React, { useMemo, useEffect, useRef } from 'react';
+import { getColor, ifUndefined, getUID, oneWayAnimation, callIfFunction, constrainEvent } from '@startlibs/utils';
+import { styled, css } from '@yak/react';
+import { rgba } from 'polished';
+import { willUseSharedState, useToggle, Fill } from '@startlibs/core';
+import { FlipList } from './FlipList.mjs';
+import { Icon } from './Icon.mjs';
+import { Loading } from './Loading.mjs';
+import { SwitchDiv } from './SwitchDiv.mjs';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const NotificationContainer = styled(yakDomTag("div"))`
+  position: fixed;
+  bottom: 0;
+  max-height: 100%;
+  z-index: 999999;  
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: flex-end;
+  overflow-y: auto;
+  right: 1.5rem;
+  @media (min-width: 601px) {
+    padding-bottom: 1.5rem;
+  }
+  @media (max-width: 600px) {
+    padding-bottom: 0.75rem;
+  }
+  &::-webkit-scrollbar {
+    width: 21px;
+    height: 21px;
+  }
+  &::-webkit-scrollbar-thumb {
+    pointer-events: all;
+    background: rgba(0,0,0,0.4);
+    border-radius: 100px;
+    background-clip: padding-box;
+    border: 6px solid transparent;
+    min-height: 30px;
+    min-width: 30px;
+    &:hover {
+      background: rgba(0,0,0,0.5);
+      background-clip: padding-box;
+      border: 6px solid transparent;
+    }
+  }
+  &::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+  @media (min-width: 601px) {
+    &.JS-dialog-open {
+      right: 2.75rem;
+    }
+  }
+  @media (max-width: 600px) {
+    left: 0.75rem;
+    right: 0.75rem;
+  }
+`;
+const ToastBox = styled(yakDomTag("div"))`
+  color: white;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 12px;
+  flex-shrink: 0;
+  margin-top: 0.5rem;
+  overflow: hidden;
+  transition: 0.3s background ease, 0.4s opacity 1.5s;
+  /* styled-components (stylis) hoista bloco aninhado de @media para depois do flat; o
+     yak preserva a ordem do fonte. Esse fallback sólido precisa vir ANTES dos media
+     abaixo, ou o yak aplicaria ele por último (ganhando sempre) nos dois breakpoints. */
+  ${props => css`background: ${__yakProps => {
+  const v = getColor(props.type);
+  return typeof v === 'function' ? v(__yakProps) : v;
+}};`}
+  @media (min-width: 601px) {
+    background: ${props => rgba(getColor(props.type)(props), ifUndefined(props.opacity, 0.7))};
+    max-width: 300px;
+  }
+  @media (max-width: 600px) {
+    background: ${props => rgba(getColor(props.type)(props), ifUndefined(props.opacity, 0.8))};
+  }
+`;
+const NotificationTitleContainer = styled(yakDomTag("div"))`
+  background: rgba(0,0,0,0.1);
+  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
+  border-radius: 12px 12px 0 0;
+  position: relative;
+  min-height: 30px;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  font-weight: 400;
+  ${props => props.onClick && css`cursor: pointer;`}
+`;
+const NotificationTitle = styled(yakDomTag("div"))`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+`;
+const NotificationContent = styled(yakDomTag("div"))`
+  display: flex;
+  align-items: center;
+  text-align: left;
+  padding: 1rem 1.5rem;
+  @media (max-width: 600px) {
+    justify-content: center;
+  }
+`;
+// Task 13c: substitui a prop JSX `css="min-width: 0;"` (R13 proíbe essa forma no yak) por um
+// styled component equivalente.
+const NotificationContentBody = styled(yakDomTag("div"))`
+  min-width: 0;
+`;
+const NotificationIconWrapper = styled(yakDomTag("div"))`
+  margin-right: 1rem;
+  position: relative;
+  width: 36px;
+  text-align: center;
+  flex-shrink: 0;
+  ${Icon} {
+    font-size: ${props => props.isLoading ? 22 : props.iconFontSize || 40}px;
+  }
+`;
+const CloseIcon = styled(Icon).attrs({
+  icon: 'x'
+})`
+  font-size: 20px;
+  cursor: pointer;
+  width: 2rem;
+  height: 2rem;
+  line-height: 2rem;
+  text-align: center;
+  position: absolute;
+  top: 50%;
+  right: 0.25rem;
+  transform: translateY(-50%);
+  border-radius: 100px;
+  opacity: 0.8;
+  &:hover, &:active {
+    background: rgba(0,0,0,0.1);
+    opacity: 1;
+  }
+`;
+const NotificationDetails = styled(yakDomTag("div"))`
+  background: rgba(0,0,0,0.1);
+  border-radius: 8px;
+  padding: 1rem;
+  margin: 0 1rem 1rem;
+  font-weight: 400;
+  font-size: 13px;
+`;
+const [useToastNotifications, _useToastNotificationsRef, setToastNotifications] = willUseSharedState([]);
+const formatNotification = (notification, extra) => _isObject(notification) ? _objectSpread(_objectSpread(_objectSpread({}, notification), extra), {}, {
+  _key: getUID()
+}) : _objectSpread(_objectSpread({
+  type: "success",
+  content: notification
+}, extra), {}, {
+  _key: getUID()
+});
+const createToastNotification = (notification, timeout, closeCallback) => {
+  const uid = getUID();
+  let currentTimer = -1;
+  let hasClosed = false;
+  const close = () => {
+    clearTimeout(currentTimer);
+    if (hasClosed) return;
+    setToastNotifications(_differenceBy('uid', _differenceBy.placeholder, [{
+      uid
+    }]));
+    hasClosed = true;
+    callIfFunction(closeCallback);
+  };
+  const notificationObj = formatNotification(notification, {
+    uid,
+    close
+  });
+  setToastNotifications(_concat(notificationObj));
+  if (timeout > 0) {
+    currentTimer = setTimeout(close, timeout);
+  }
+  return {
+    close,
+    openWith: (obj, timeout) => {
+      clearTimeout(currentTimer);
+      if (timeout > 0) {
+        currentTimer = setTimeout(close, timeout);
+      }
+      const notificationObj = formatNotification(obj, {
+        uid,
+        close
+      });
+      if (hasClosed) {
+        hasClosed = false;
+        setToastNotifications(_concat(notificationObj));
+      } else {
+        setToastNotifications(_map(n => n.uid === uid ? _objectSpread(_objectSpread({}, notificationObj), {}, {
+          _key: n._key
+        }) : n));
+      }
+    }
+  };
+};
+const useToastNotificationToggle = (notification, timeout) => {
+  const toggle = useToggle();
+  const extraProps = useMemo(() => notification.content || notification.element ? {} : notification, []);
+  const make = (notification, timeout) => notification && createToastNotification(formatNotification(notification, extraProps), timeout, () => toggle.close());
+  useEffect(() => {
+    if (notification.content || notification.element) {
+      toggle.openWith(make(notification));
+    }
+  }, []);
+  return useMemo(() => ({
+    close: () => {
+      var _toggle$get;
+      return (_toggle$get = toggle.get()) === null || _toggle$get === void 0 ? void 0 : _toggle$get.close();
+    },
+    openWith: (notification, timeout) => toggle.get() ? toggle.get().openWith(formatNotification(notification, extraProps), timeout) : toggle.openWith(make(notification, timeout)),
+    open: () => toggle.get() ? toggle.get().openWith(formatNotification(notification, extraProps), timeout) : toggle.openWith(make(notification, timeout))
+  }), [toggle.isOpen]);
+};
+const willShowToastNotification = (str, timeout) => () => createToastNotification(str, timeout);
+const EXIT_ANIMATION_MS = 300;
+const TOAST_EASING = 'cubic-bezier(0.22, 0.61, 0.36, 1)';
+const TOAST_TIMING = `${EXIT_ANIMATION_MS}ms ${TOAST_EASING}`;
+const animation = oneWayAnimation('transform: translateY(0); opacity: 1;', 'transform: translateY(0.25rem); opacity: 1;', 'transform: translateY(1rem); opacity: 0;');
+const removeAnimationReinsertPosition = e => e.style.position = '';
+const ToastNotifications = () => {
+  const [notifications, setNotifications] = useToastNotifications();
+  const containerRef = useRef(null);
+  const {
+    lockWidth,
+    unlockWidth
+  } = useNotificationContainerWidthLock(containerRef);
+  return /*#__PURE__*/React.createElement(Fill, {
+    name: "Notifications"
+  }, /*#__PURE__*/React.createElement(NotificationContainer, {
+    ref: containerRef,
+    className: "JS-on-open-dialog"
+  }, /*#__PURE__*/React.createElement(FlipList, {
+    animation: animation,
+    timing: TOAST_TIMING,
+    onReinsert: removeAnimationReinsertPosition,
+    skipParentMorph: true,
+    anchoredDownList: true
+  }, notifications.map(notification => {
+    const closeWithLock = () => {
+      lockWidth();
+      notification.close();
+      setTimeout(unlockWidth, EXIT_ANIMATION_MS);
+    };
+    return callIfFunction(notification.element, closeWithLock) || /*#__PURE__*/React.createElement(ToastBox, {
+      key: `toast-${notification.uid}`,
+      type: notification.type,
+      onClick: notification.onClick,
+      opacity: notification.opacity
+    }, notification.title ? /*#__PURE__*/React.createElement(NotificationTitleContainer, {
+      onClick: notification.onClickTitle ? e => notification.onClickTitle(e, closeWithLock) : undefined
+    }, /*#__PURE__*/React.createElement(NotificationTitle, null, notification.title), notification.closeOnX && /*#__PURE__*/React.createElement(CloseIcon, {
+      onClick: constrainEvent(closeWithLock)
+    })) : notification.closeOnX && /*#__PURE__*/React.createElement(CloseIcon, {
+      onClick: closeWithLock
+    }), /*#__PURE__*/React.createElement(SwitchDiv, {
+      on: notification._key
+    }, /*#__PURE__*/React.createElement(NotificationContent, null, notification.icon && /*#__PURE__*/React.createElement(NotificationIconWrapper, {
+      isLoading: notification.isLoading,
+      iconFontSize: notification.iconFontSize
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: notification.icon
+    }), notification.isLoading && /*#__PURE__*/React.createElement(Loading, {
+      size: 36,
+      white: true,
+      absolute: true
+    })), /*#__PURE__*/React.createElement(NotificationContentBody, null, callIfFunction(notification.content, closeWithLock))), notification.details && /*#__PURE__*/React.createElement(NotificationDetails, {
+      onClick: constrainEvent()
+    }, notification.details)));
+  }))));
+};
+const useNotificationContainerWidthLock = containerRef => {
+  const lockCountRef = useRef(0);
+  const prevWidthRef = useRef(null);
+  const lockWidth = () => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (lockCountRef.current === 0) {
+      prevWidthRef.current = el.style.width;
+      const measured = el.getBoundingClientRect().width;
+      el.style.width = measured + 'px';
+    }
+    lockCountRef.current = lockCountRef.current + 1;
+  };
+  const unlockWidth = () => {
+    const el = containerRef.current;
+    if (!el) return;
+    const next = Math.max(0, lockCountRef.current - 1);
+    lockCountRef.current = next;
+    if (next === 0) {
+      el.style.width = prevWidthRef.current || '';
+      prevWidthRef.current = null;
+    }
+  };
+  return {
+    lockWidth,
+    unlockWidth
+  };
+};
+
+export { ToastNotifications, createToastNotification, useToastNotificationToggle, useToastNotifications, willShowToastNotification };
+//# sourceMappingURL=ToastNotifications.mjs.map

package/lib-yak/ToastNotifications.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastNotifications.mjs","sources":["../src/ToastNotifications.jsx"],"sourcesContent":["import React, {useEffect, useMemo, useRef} from 'react'\nimport {oneWayAnimation, constrainEvent} from '@startlibs/utils'\nimport _ from 'lodash/fp'\nimport styled, {css} from 'styled-components'\nimport {rgba} from 'polished'\nimport {Fill, useToggle, willUseSharedState} from '@startlibs/core'\nimport {getUID, ifUndefined, media, callIfFunction, getColor} from '@startlibs/utils'\nimport {FlipList} from './FlipList'\nimport {Icon} from './Icon'\nimport {Loading} from './Loading'\nimport {SwitchDiv} from './SwitchDiv'\n\nconst NotificationContainer = styled.div `\n  position: fixed;\n  bottom: 0;\n  max-height: 100%;\n  z-index: 999999;  \n  display: flex;\n  flex-direction: column-reverse;\n  align-items: flex-end;\n  overflow-y: auto;\n  right: 1.5rem;\n  ${media.desktop`\n    padding-bottom: 1.5rem;\n  `}\n  ${media.mobile`\n    padding-bottom: 0.75rem;\n  `}\n  &::-webkit-scrollbar {\n    width: 21px;\n    height: 21px;\n  }\n  &::-webkit-scrollbar-thumb {\n    pointer-events: all;\n    background: rgba(0,0,0,0.4);\n    border-radius: 100px;\n    background-clip: padding-box;\n    border: 6px solid transparent;\n    min-height: 30px;\n    min-width: 30px;\n    &:hover {\n      background: rgba(0,0,0,0.5);\n      background-clip: padding-box;\n      border: 6px solid transparent;\n    }\n  }\n  &::-webkit-scrollbar-corner {\n    background: transparent;\n  }\n  ${media.desktop`\n    &.JS-dialog-open {\n      right: 2.75rem;\n    }\n  `}\n  ${media.mobile`\n    left: 0.75rem;\n    right: 0.75rem;\n  `}\n`\n\nconst ToastBox = styled.div`\n  color: white;\n  font-size: 14px;\n  font-weight: 500;\n  border-radius: 12px;\n  flex-shrink: 0;\n  margin-top: 0.5rem;\n  overflow: hidden;\n  transition: 0.3s background ease, 0.4s opacity 1.5s;\n  /* styled-components (stylis) hoista bloco aninhado de @media para depois do flat; o\n     yak preserva a ordem do fonte. Esse fallback sólido precisa vir ANTES dos media\n     abaixo, ou o yak aplicaria ele por último (ganhando sempre) nos dois breakpoints. */\n  ${props => css`background: ${getColor(props.type)};`}\n  ${media.desktop`\n    background: ${props => rgba(getColor(props.type)(props),ifUndefined(props.opacity,0.7))};\n    max-width: 300px;\n  `}\n  ${media.mobile`\n    background: ${props => rgba(getColor(props.type)(props),ifUndefined(props.opacity,0.8))};\n  `}\n`\nconst NotificationTitleContainer = styled.div`\n  background: rgba(0,0,0,0.1);\n  padding: 0.5rem 2.25rem 0.5rem 0.75rem;\n  border-radius: 12px 12px 0 0;\n  position: relative;\n  min-height: 30px;\n  font-size: 13px;\n  display: flex;\n  align-items: center;\n  font-weight: 400;\n  ${props => props.onClick && \"cursor: pointer;\"}\n`\nconst NotificationTitle = styled.div`\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n`\nconst NotificationContent = styled.div`\n  display: flex;\n  align-items: center;\n  text-align: left;\n  padding: 1rem 1.5rem;\n  ${media.mobile`\n    justify-content: center;\n  `}\n`\n// Task 13c: substitui a prop JSX `css=\"min-width: 0;\"` (R13 proíbe essa forma no yak) por um\n// styled component equivalente.\nconst NotificationContentBody = styled.div`\n  min-width: 0;\n`\nconst NotificationIconWrapper = styled.div`\n  margin-right: 1rem;\n  position: relative;\n  width: 36px;\n  text-align: center;\n  flex-shrink: 0;\n  ${Icon} {\n    font-size: ${props => (props.isLoading ? 22 : (props.iconFontSize || 40))}px;\n  }\n`\nconst CloseIcon = styled(Icon).attrs({icon: 'x'})`\n  font-size: 20px;\n  cursor: pointer;\n  width: 2rem;\n  height: 2rem;\n  line-height: 2rem;\n  text-align: center;\n  position: absolute;\n  top: 50%;\n  right: 0.25rem;\n  transform: translateY(-50%);\n  border-radius: 100px;\n  opacity: 0.8;\n  &:hover, &:active {\n    background: rgba(0,0,0,0.1);\n    opacity: 1;\n  }\n`\nconst NotificationDetails = styled.div`\n  background: rgba(0,0,0,0.1);\n  border-radius: 8px;\n  padding: 1rem;\n  margin: 0 1rem 1rem;\n  font-weight: 400;\n  font-size: 13px;\n`\n\nconst [useToastNotifications, _useToastNotificationsRef,setToastNotifications] = willUseSharedState([])\nexport {useToastNotifications}\nconst formatNotification = (notification,extra) =>\n  _.isObject(notification)\n    ? {...notification,...extra, _key: getUID()}\n    : {type:\"success\",content:notification,...extra, _key: getUID()}\n\nexport const createToastNotification = (notification,timeout, closeCallback) => {\n  const uid = getUID()\n  let currentTimer = -1;\n  let hasClosed = false;\n  const close = () => {\n    clearTimeout(currentTimer);\n    if (hasClosed) return\n    setToastNotifications(_.differenceBy('uid',_, [{uid}]))\n    hasClosed = true\n    callIfFunction(closeCallback)\n  }\n  const notificationObj = formatNotification(notification,{uid,close})\n  setToastNotifications(_.concat(notificationObj))\n  if (timeout>0) {\n    currentTimer = setTimeout(close,timeout)\n  }\n  return {\n    close,\n    openWith:(obj,timeout) => {\n      clearTimeout(currentTimer);\n      if (timeout > 0) {\n        currentTimer = setTimeout(close,timeout)\n      }\n      const notificationObj = formatNotification(obj,{uid,close})\n      if (hasClosed) {\n        hasClosed = false\n        setToastNotifications(_.concat(notificationObj))\n      } else {\n        setToastNotifications(_.map(n => n.uid === uid ? {...notificationObj, _key: n._key} : n))\n      }\n    }\n  }\n}\nexport const useToastNotificationToggle = (notification,timeout) => {\n  const toggle = useToggle()\n  const extraProps = useMemo(() => notification.content || notification.element ? {} : notification,[])\n  const make = (notification,timeout) => notification && createToastNotification(formatNotification(notification,extraProps),timeout,() => toggle.close())\n  useEffect(() => {\n    if (notification.content || notification.element) {\n      toggle.openWith(make(notification))\n    }\n  },[])\n\n  return useMemo(() => ({\n    close: () => toggle.get()?.close(),\n    openWith: (notification,timeout) => toggle.get() ? toggle.get().openWith(formatNotification(notification,extraProps),timeout) : toggle.openWith(make(notification,timeout)),\n    open: () => toggle.get() ? toggle.get().openWith(formatNotification(notification,extraProps),timeout) : toggle.openWith(make(notification,timeout))\n  }),[toggle.isOpen])\n}\nexport const willShowToastNotification = (str,timeout) => () => createToastNotification(str,timeout)\n\nconst EXIT_ANIMATION_MS = 300\nconst TOAST_EASING = 'cubic-bezier(0.22, 0.61, 0.36, 1)'\nconst TOAST_TIMING = `${EXIT_ANIMATION_MS}ms ${TOAST_EASING}`\n\nconst animation = oneWayAnimation(\n  'transform: translateY(0); opacity: 1;',\n  'transform: translateY(0.25rem); opacity: 1;',\n  'transform: translateY(1rem); opacity: 0;'\n)\nconst removeAnimationReinsertPosition = e => e.style.position=''\nexport const ToastNotifications = () => {\n  const [notifications,setNotifications] = useToastNotifications()\n  const containerRef = useRef(null)\n  const {lockWidth, unlockWidth} = useNotificationContainerWidthLock(containerRef)\n\n  return (<Fill name=\"Notifications\">\n    <NotificationContainer ref={containerRef} className=\"JS-on-open-dialog\">\n      <FlipList animation={animation} timing={TOAST_TIMING} onReinsert={removeAnimationReinsertPosition} skipParentMorph anchoredDownList>\n        {\n          notifications.map(notification => {\n          const closeWithLock = () => {\n            lockWidth()\n            notification.close()\n              setTimeout(unlockWidth, EXIT_ANIMATION_MS)\n          }\n\n          return (\n            callIfFunction(notification.element,closeWithLock) ||\n            <ToastBox\n              key={`toast-${notification.uid}`}\n              type={notification.type}\n              onClick={notification.onClick}\n              opacity={notification.opacity}\n            >\n              {notification.title ? \n                <NotificationTitleContainer onClick={notification.onClickTitle ? (e) => notification.onClickTitle(e,closeWithLock) : undefined}>\n                  <NotificationTitle>{notification.title}</NotificationTitle>\n                  {notification.closeOnX && <CloseIcon onClick={constrainEvent(closeWithLock)}/>}\n                </NotificationTitleContainer>\n                :\n                notification.closeOnX && <CloseIcon onClick={closeWithLock}/>\n              }\n              <SwitchDiv on={notification._key}>\n                <NotificationContent>\n                  {notification.icon &&\n                    <NotificationIconWrapper\n                      isLoading={notification.isLoading}\n                      iconFontSize={notification.iconFontSize}\n                    >\n                      <Icon icon={notification.icon}/>\n                      {notification.isLoading && <Loading size={36} white absolute/>}\n                    </NotificationIconWrapper>\n                  }\n                  <NotificationContentBody>{callIfFunction(notification.content,closeWithLock)}</NotificationContentBody>\n                </NotificationContent>\n                {notification.details &&\n                  <NotificationDetails onClick={constrainEvent()}>\n                    {notification.details}\n                  </NotificationDetails>\n                }\n              </SwitchDiv>\n            </ToastBox>\n          )\n        })\n        }\n      </FlipList>\n    </NotificationContainer>\n  </Fill>)\n}\n\nconst useNotificationContainerWidthLock = (containerRef) => {\n  const lockCountRef = useRef(0)\n  const prevWidthRef = useRef(null)\n\n  const lockWidth = () => {\n    const el = containerRef.current\n    if (!el) return\n    if (lockCountRef.current === 0) {\n      prevWidthRef.current = el.style.width\n      const measured = el.getBoundingClientRect().width\n      el.style.width = measured + 'px'\n    }\n    lockCountRef.current = lockCountRef.current + 1\n  }\n\n  const unlockWidth = () => {\n    const el = containerRef.current\n    if (!el) return\n    const next = Math.max(0, lockCountRef.current - 1)\n    lockCountRef.current = next\n    if (next === 0) {\n      el.style.width = prevWidthRef.current || ''\n      prevWidthRef.current = null\n    }\n  }\n\n  return {lockWidth, unlockWidth}\n}"],"names":["NotificationContainer","styled","yakDomTag","ToastBox","props","css","__yakProps","v","getColor","type","rgba","ifUndefined","opacity","NotificationTitleContainer","onClick","NotificationTitle","NotificationContent","NotificationContentBody","NotificationIconWrapper","Icon","isLoading","iconFontSize","CloseIcon","attrs","icon","NotificationDetails","useToastNotifications","_useToastNotificationsRef","setToastNotifications","willUseSharedState","formatNotification","notification","extra","_isObject","_objectSpread","_key","getUID","content","createToastNotification","timeout","closeCallback","uid","currentTimer","hasClosed","close","clearTimeout","_differenceBy","placeholder","callIfFunction","notificationObj","_concat","setTimeout","openWith","obj","_map","n","useToastNotificationToggle","toggle","useToggle","extraProps","useMemo","element","make","useEffect","_toggle$get","get","open","isOpen","willShowToastNotification","str","EXIT_ANIMATION_MS","TOAST_EASING","TOAST_TIMING","animation","oneWayAnimation","removeAnimationReinsertPosition","e","style","position","ToastNotifications","notifications","setNotifications","containerRef","useRef","lockWidth","unlockWidth","useNotificationContainerWidthLock","React","createElement","Fill","name","ref","className","FlipList","timing","onReinsert","skipParentMorph","anchoredDownList","map","closeWithLock","key","title","onClickTitle","undefined","closeOnX","constrainEvent","SwitchDiv","on","Loading","size","white","absolute","details","lockCountRef","prevWidthRef","el","current","width","measured","getBoundingClientRect","next","Math","max"],"mappings":"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"}

package/lib-yak/Tooltip.mjs

@@ -0,0 +1,176 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _isFunction from 'lodash/fp/isFunction';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React, { useEffect } from 'react';
+import { styled, css } from '@yak/react';
+import { Popup } from './Popup.mjs';
+import { useToggle, useRefState } from '@startlibs/core';
+import { twoWayAnimation } from '@startlibs/utils';
+
+const _excluded = ["children", "delay", "instant", "whenEllipsis", "content", "showOnClick", "showOnMount", "clickTimeout"];
+const TooltipContainer = styled(yakDomTag("div"))`
+  display: inline-block;
+  ${props => props.isWrapper ? css`position:relative;` : css`
+    position:absolute;
+    top:0;
+    left:0;
+    bottom:0;
+    right:0;
+    ${props => props.isOpen && css`pointer-events: none;`}
+  `}   
+`;
+const TooltipPopup = styled(Popup).attrs({
+  className: "styled-theme-tooltip"
+})`
+  font-size: 12px;
+  pointer-events: none;
+  background-color: rgba(0,0,0,0.6);
+  box-shadow: none;
+  color: white;
+  padding: 0.25rem 1rem;
+  border-radius: 100px;
+  
+`;
+const [fadeIn, fadeOut] = twoWayAnimation(`opacity:0;`, `opacity:1;`);
+const isEllipsis = event => event.currentTarget.firstChild && event.currentTarget.firstChild.offsetWidth < event.currentTarget.firstChild.scrollWidth;
+const RECENTLY_CLOSED_TIMEOUT = 200;
+let recentlyClosed = false;
+const openRef = {
+  current: null
+};
+const Tooltip = _ref => {
+  let {
+      children,
+      delay = 400,
+      instant,
+      whenEllipsis,
+      content,
+      showOnClick,
+      showOnMount,
+      clickTimeout = 3000
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const tooltip = useToggle();
+  const timeout = useRefState(-1);
+
+  // showOnMount (ms): abre sozinho ao montar (hint) e some após o tempo dado. O
+  // hover continua normal — se o usuário passa o mouse durante a janela, o open
+  // cancela o closeAfter (clearClosing) e o tooltip fica até o mouseleave.
+  useEffect(() => {
+    if (!showOnMount) return;
+    tooltip.open();
+    tooltip.closeAfter(showOnMount);
+    // Dispensa o hint na primeira interação do usuário: clique em qualquer lugar
+    // (o popup tem pointer-events:none, então todo clique é "fora") ou scroll.
+    // O assentamento da página é resize (não scroll), então não dispara isso.
+    const dismiss = () => tooltip.close();
+    document.addEventListener('click', dismiss, {
+      once: true
+    });
+    window.addEventListener('scroll', dismiss, {
+      once: true,
+      passive: true
+    });
+    // O conteúdo da página pode assentar depois do mount (imagens/dados async),
+    // mudando a posição do âncora — mas o popup fixed só reposiciona em scroll/
+    // resize, então ficava travado no lugar antigo. Enquanto o hint está visível,
+    // observa o crescimento da página e reposiciona (portalReposition → setPosition).
+    const ro = new ResizeObserver(() => window.dispatchEvent(new CustomEvent('portalReposition')));
+    ro.observe(document.body);
+    const stopRO = setTimeout(() => ro.disconnect(), showOnMount);
+    return () => {
+      document.removeEventListener('click', dismiss);
+      window.removeEventListener('scroll', dismiss);
+      ro.disconnect();
+      clearTimeout(stopRO);
+    };
+  }, []);
+
+  // Modo clique: abre no clique e some sozinho após clickTimeout (closeAfter é
+  // à prova de unmount). Não borbulha stopPropagation — quem usa decide isso.
+  const openOnClick = () => {
+    tooltip.open();
+    tooltip.closeAfter(clickTimeout);
+  };
+
+  // Long-press no mobile: hover não existe e "segurar" não dispara mouseenter, então
+  // sem isso o tooltip não reaparece no toque. touchstart arma um timer; se segurou
+  // além do delay, reusa o openOnClick. Se o press disparou, preventDefault no touchend
+  // suprime o clique sintético (segurar espia, não aciona).
+  const touchTimer = useRefState(-1);
+  const didLongPress = useRefState(false);
+  const onTouchStart = () => {
+    didLongPress.set(false);
+    touchTimer.set(setTimeout(() => {
+      didLongPress.set(true);
+      openOnClick();
+      // Dispensa no scroll em QUALQUER lugar (como o hint do showOnMount): o touchmove do
+      // container só pegaria scroll com o dedo ainda no alvo — soltar e rolar não fecharia.
+      // tooltip.close é estável (useMemo []) e no-op após unmount; {once} se auto-remove.
+      window.addEventListener('scroll', tooltip.close, {
+        once: true,
+        passive: true
+      });
+    }, delay));
+  };
+  const onTouchEnd = e => {
+    clearTimeout(touchTimer.get());
+    if (didLongPress.get()) e.preventDefault();
+  };
+  // Só cancela o press pendente — não abrir no meio de um scroll iniciado sobre o alvo.
+  const onTouchMove = () => clearTimeout(touchTimer.get());
+
+  // Remove o listener de scroll pendente se desmontar antes de rolar (evita leak da closure).
+  useEffect(() => () => window.removeEventListener('scroll', tooltip.close), []);
+  const mouseEnter = e => {
+    if (!whenEllipsis || (_isFunction(whenEllipsis) ? whenEllipsis : isEllipsis)(e)) {
+      timeout.set(setTimeout(() => {
+        tooltip.open();
+        if (recentlyClosed && openRef.current) {
+          openRef.current.remove();
+        }
+      }, instant || recentlyClosed ? 0 : delay));
+      !children && e.currentTarget.parentNode.addEventListener('mouseleave', onMouseLeave);
+    }
+  };
+  const onMouseLeave = e => {
+    clearTimeout(timeout.get());
+    if (tooltip.get()) {
+      timeout.set(false);
+      !children && e.currentTarget.removeEventListener('mouseleave', onMouseLeave);
+      const currentlyClosed = recentlyClosed = setTimeout(() => {
+        recentlyClosed = recentlyClosed === currentlyClosed ? false : recentlyClosed;
+      }, RECENTLY_CLOSED_TIMEOUT);
+      tooltip.close();
+    }
+  };
+  const getAnimation = () => {
+    if (recentlyClosed && timeout.get() !== false) {
+      return '';
+    } else {
+      return fadeIn;
+    }
+  };
+  const canLongPress = content && !showOnClick;
+  return /*#__PURE__*/React.createElement(TooltipContainer, {
+    isOpen: tooltip.isOpen,
+    isWrapper: !!children,
+    onMouseUp: showOnClick ? undefined : onMouseLeave,
+    onMouseLeave: children && !showOnClick ? onMouseLeave : undefined,
+    onMouseEnter: showOnClick ? undefined : mouseEnter,
+    onTouchStart: canLongPress ? onTouchStart : undefined,
+    onTouchEnd: canLongPress ? onTouchEnd : undefined,
+    onTouchMove: canLongPress ? onTouchMove : undefined,
+    onClick: showOnClick ? openOnClick : undefined
+  }, tooltip.isOpen && content && /*#__PURE__*/React.createElement(TooltipPopup, _extends({
+    animation: getAnimation,
+    animationOptions: {
+      ref: openRef
+    },
+    top: !(rest.bottom || rest.left || rest.right || rest.at || rest.my)
+  }, rest), content), children);
+};
+
+export { Tooltip };
+//# sourceMappingURL=Tooltip.mjs.map

package/lib-yak/Tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.mjs","sources":["../src/Tooltip.jsx"],"sourcesContent":["import React, {useEffect, useMemo} from 'react'\nimport _ from 'lodash/fp'\nimport styled, {css} from 'styled-components'\nimport {Popup} from './Popup'\nimport {useRefState, useToggle} from '@startlibs/core'\nimport {customTheme,twoWayAnimation} from '@startlibs/utils'\n\nconst TooltipContainer = styled.div`\n  display: inline-block;\n  ${props => props.isWrapper ?\n             `position:relative;` :\n             css`\n    position:absolute;\n    top:0;\n    left:0;\n    bottom:0;\n    right:0;\n    ${props => props.isOpen && 'pointer-events: none;'}\n  `}   \n`\nconst TooltipPopup = styled(Popup)`\n  font-size: 12px;\n  pointer-events: none;\n  background-color: rgba(0,0,0,0.6);\n  box-shadow: none;\n  color: white;\n  padding: 0.25rem 1rem;\n  border-radius: 100px;\n  ${customTheme('Tooltip')}\n`\n\nconst [fadeIn, fadeOut] = twoWayAnimation(`opacity:0;`, `opacity:1;`)\n\nconst isEllipsis = (event) => event.currentTarget.firstChild && event.currentTarget.firstChild.offsetWidth < event.currentTarget.firstChild.scrollWidth\n\nconst RECENTLY_CLOSED_TIMEOUT = 200\nlet recentlyClosed = false\nconst openRef = {current:null}\n\nexport const Tooltip = ({children, delay = 400, instant, whenEllipsis, content, showOnClick, showOnMount, clickTimeout = 3000, ...rest}) => {\n\n  const tooltip = useToggle()\n  const timeout = useRefState(-1)\n\n  // showOnMount (ms): abre sozinho ao montar (hint) e some após o tempo dado. O\n  // hover continua normal — se o usuário passa o mouse durante a janela, o open\n  // cancela o closeAfter (clearClosing) e o tooltip fica até o mouseleave.\n  useEffect(() => {\n    if (!showOnMount) return\n    tooltip.open()\n    tooltip.closeAfter(showOnMount)\n    // Dispensa o hint na primeira interação do usuário: clique em qualquer lugar\n    // (o popup tem pointer-events:none, então todo clique é \"fora\") ou scroll.\n    // O assentamento da página é resize (não scroll), então não dispara isso.\n    const dismiss = () => tooltip.close()\n    document.addEventListener('click', dismiss, {once: true})\n    window.addEventListener('scroll', dismiss, {once: true, passive: true})\n    // O conteúdo da página pode assentar depois do mount (imagens/dados async),\n    // mudando a posição do âncora — mas o popup fixed só reposiciona em scroll/\n    // resize, então ficava travado no lugar antigo. Enquanto o hint está visível,\n    // observa o crescimento da página e reposiciona (portalReposition → setPosition).\n    const ro = new ResizeObserver(() => window.dispatchEvent(new CustomEvent('portalReposition')))\n    ro.observe(document.body)\n    const stopRO = setTimeout(() => ro.disconnect(), showOnMount)\n    return () => {\n      document.removeEventListener('click', dismiss)\n      window.removeEventListener('scroll', dismiss)\n      ro.disconnect()\n      clearTimeout(stopRO)\n    }\n  }, [])\n\n  // Modo clique: abre no clique e some sozinho após clickTimeout (closeAfter é\n  // à prova de unmount). Não borbulha stopPropagation — quem usa decide isso.\n  const openOnClick = () => {\n    tooltip.open()\n    tooltip.closeAfter(clickTimeout)\n  }\n\n  // Long-press no mobile: hover não existe e \"segurar\" não dispara mouseenter, então\n  // sem isso o tooltip não reaparece no toque. touchstart arma um timer; se segurou\n  // além do delay, reusa o openOnClick. Se o press disparou, preventDefault no touchend\n  // suprime o clique sintético (segurar espia, não aciona).\n  const touchTimer = useRefState(-1)\n  const didLongPress = useRefState(false)\n  const onTouchStart = () => {\n    didLongPress.set(false)\n    touchTimer.set(setTimeout(() => {\n      didLongPress.set(true)\n      openOnClick()\n      // Dispensa no scroll em QUALQUER lugar (como o hint do showOnMount): o touchmove do\n      // container só pegaria scroll com o dedo ainda no alvo — soltar e rolar não fecharia.\n      // tooltip.close é estável (useMemo []) e no-op após unmount; {once} se auto-remove.\n      window.addEventListener('scroll', tooltip.close, {once: true, passive: true})\n    }, delay))\n  }\n  const onTouchEnd = (e) => {\n    clearTimeout(touchTimer.get())\n    if (didLongPress.get()) e.preventDefault()\n  }\n  // Só cancela o press pendente — não abrir no meio de um scroll iniciado sobre o alvo.\n  const onTouchMove = () => clearTimeout(touchTimer.get())\n\n  // Remove o listener de scroll pendente se desmontar antes de rolar (evita leak da closure).\n  useEffect(() => () => window.removeEventListener('scroll', tooltip.close), [])\n\n  const mouseEnter = (e) => {\n    if (!whenEllipsis || (_.isFunction(whenEllipsis) ? whenEllipsis : isEllipsis)(e)) {\n      timeout.set(setTimeout(() => {\n\n        tooltip.open()\n        if (recentlyClosed && openRef.current) {\n          openRef.current.remove()\n        }\n      },(instant || recentlyClosed) ? 0 : delay))\n      !children && e.currentTarget.parentNode.addEventListener('mouseleave', onMouseLeave)\n    }\n  }\n\n  const onMouseLeave = (e) => {\n    clearTimeout(timeout.get())\n    if (tooltip.get()) {\n      timeout.set(false)\n      !children && e.currentTarget.removeEventListener('mouseleave', onMouseLeave)\n      const currentlyClosed = recentlyClosed = setTimeout(() => {\n        recentlyClosed = recentlyClosed === currentlyClosed ? false : recentlyClosed\n      },RECENTLY_CLOSED_TIMEOUT)\n      tooltip.close()\n    }\n  }\n\n  const getAnimation = () => {\n    if (recentlyClosed && timeout.get()!==false) {\n      return ''\n    } else {\n      return fadeIn\n    }\n  }\n\n  const canLongPress = content && !showOnClick\n\n  return <TooltipContainer isOpen={tooltip.isOpen} isWrapper={!!children}\n                           onMouseUp={showOnClick ? undefined : onMouseLeave}\n                           onMouseLeave={(children && !showOnClick) ? onMouseLeave : undefined}\n                           onMouseEnter={showOnClick ? undefined : mouseEnter}\n                           onTouchStart={canLongPress ? onTouchStart : undefined}\n                           onTouchEnd={canLongPress ? onTouchEnd : undefined}\n                           onTouchMove={canLongPress ? onTouchMove : undefined}\n                           onClick={showOnClick ? openOnClick : undefined}>\n    {\n      tooltip.isOpen && content &&\n      <TooltipPopup  animation={getAnimation} animationOptions={{ref:openRef}}  top={!(rest.bottom || rest.left || rest.right || rest.at || rest.my)} {...rest}>\n        {content}\n      </TooltipPopup>\n    }\n    {children}\n  </TooltipContainer>\n}\n"],"names":["TooltipContainer","styled","yakDomTag","props","isWrapper","css","isOpen","TooltipPopup","Popup","attrs","className","fadeIn","fadeOut","twoWayAnimation","isEllipsis","event","currentTarget","firstChild","offsetWidth","scrollWidth","RECENTLY_CLOSED_TIMEOUT","recentlyClosed","openRef","current","Tooltip","_ref","children","delay","instant","whenEllipsis","content","showOnClick","showOnMount","clickTimeout","rest","_objectWithoutProperties","_excluded","tooltip","useToggle","timeout","useRefState","useEffect","open","closeAfter","dismiss","close","document","addEventListener","once","window","passive","ro","ResizeObserver","dispatchEvent","CustomEvent","observe","body","stopRO","setTimeout","disconnect","removeEventListener","clearTimeout","openOnClick","touchTimer","didLongPress","onTouchStart","set","onTouchEnd","e","get","preventDefault","onTouchMove","mouseEnter","_isFunction","remove","parentNode","onMouseLeave","currentlyClosed","getAnimation","canLongPress","React","createElement","onMouseUp","undefined","onMouseEnter","onClick","_extends","animation","animationOptions","ref","top","bottom","left","right","at","my"],"mappings":"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"}

package/lib-yak/TransitionDiv.mjs

@@ -0,0 +1,59 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React, { useRef } from 'react';
+import { styled, css } from '@yak/react';
+import { FlipList } from './FlipList.mjs';
+import { oneWayAnimation } from '@startlibs/utils';
+
+const _excluded = ["children", "animation", "skipChromeFix", "className", "block", "inline"];
+const DEFAULT_ANIMATION = oneWayAnimation(`opacity: 1;`, `opacity: 0;`);
+const AnimationBlockContainer = styled(yakDomTag("div")).attrs({
+  className: "styled-animation-block-container"
+})`
+  ${props => props.inline ? css`display: inline-block; ` : css``}
+  position:relative;
+`;
+const TransitionDiv = _ref => {
+  let {
+      children,
+      animation,
+      skipChromeFix,
+      className,
+      block,
+      inline
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const blockRef = useRef();
+  const overflowEffect = () => {
+    if (blockRef.current) {
+      const prevOverflow = blockRef.current.style.overflow;
+      blockRef.current.style.overflow = 'hidden';
+      return () => {
+        blockRef.current.style.overflow = prevOverflow;
+      };
+    }
+  };
+  const content = children ? /*#__PURE__*/React.createElement(FlipList, _extends({
+    smallJumpFix: inline && -3,
+    effect: overflowEffect,
+    skipChromeFix: skipChromeFix,
+    animation: animation || DEFAULT_ANIMATION
+  }, rest), [/*#__PURE__*/React.createElement("div", {
+    className: block || inline ? "" : className,
+    key: "first"
+  }, children)]) : /*#__PURE__*/React.createElement(FlipList, _extends({
+    smallJumpFix: inline && -3,
+    effect: overflowEffect,
+    skipChromeFix: skipChromeFix,
+    animation: animation || DEFAULT_ANIMATION
+  }, rest), []);
+  return block || inline ? /*#__PURE__*/React.createElement(AnimationBlockContainer, {
+    inline: inline,
+    ref: blockRef,
+    className: className
+  }, content) : content;
+};
+
+export { AnimationBlockContainer, TransitionDiv };
+//# sourceMappingURL=TransitionDiv.mjs.map

package/lib-yak/TransitionDiv.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransitionDiv.mjs","sources":["../src/TransitionDiv.jsx"],"sourcesContent":["import React, {useRef} from 'react'\nimport styled from 'styled-components'\nimport {FlipList} from './FlipList'\nimport {oneWayAnimation} from '@startlibs/utils'\n\n\nconst DEFAULT_ANIMATION = oneWayAnimation(`opacity: 1;`, `opacity: 0;`)\n\nexport const AnimationBlockContainer = styled.div`\n  ${props => props.inline ? 'display: inline-block; ' : ''}\n  position:relative;\n`\n\n\nexport const TransitionDiv = ({children,animation, skipChromeFix, className, block, inline,...rest}) => {\n\n  const blockRef = useRef()\n\n  const overflowEffect = () => {\n    if (blockRef.current) {\n      const prevOverflow = blockRef.current.style.overflow\n      blockRef.current.style.overflow = 'hidden'\n      return () => {\n        blockRef.current.style.overflow = prevOverflow\n      }\n    }\n  }\n\n  const content = children\n    ? <FlipList smallJumpFix={inline && -3} effect={overflowEffect} skipChromeFix={skipChromeFix} animation={animation || DEFAULT_ANIMATION} {...rest}>{[<div className={(block || inline) ? \"\" : className} key=\"first\">{children}</div>]}</FlipList>\n    : <FlipList smallJumpFix={inline && -3} effect={overflowEffect} skipChromeFix={skipChromeFix} animation={animation || DEFAULT_ANIMATION} {...rest}>{[]}</FlipList>\n\n  return (block || inline) ? <AnimationBlockContainer inline={inline} ref={blockRef} className={className}>{content}</AnimationBlockContainer> : content\n}"],"names":["DEFAULT_ANIMATION","oneWayAnimation","AnimationBlockContainer","styled","yakDomTag","attrs","className","props","inline","css","TransitionDiv","_ref","children","animation","skipChromeFix","block","rest","_objectWithoutProperties","_excluded","blockRef","useRef","overflowEffect","current","prevOverflow","style","overflow","content","React","createElement","FlipList","_extends","smallJumpFix","effect","key","ref"],"mappings":";;;;;;;;;AAMA,MAAMA,iBAAiB,GAAGC,eAAe,CAAC,CAAa,WAAA,CAAA,EAAE,aAAa,CAAC,CAAA;MAE1DC,uBAAuB,GAAGC,MAAA,CAAAC,SAAA,SAAAC,KAAA,CAAA;EAAAC,SAAA,EAAA,kCAAA;AAAA,CAAA,CAAA,CAAA;AACvC,EAAIC,EAAAA,KAAK,IAAIA,KAAK,CAACC,MAAM,GAAAC,GAAA,CAAAA,uBAAAA,CAAAA,GAAAA,GAAA,CAAiC,CAAA,CAAA;AAC1D;AACA,EAAC;AAGYC,MAAAA,aAAa,GAAGC,IAAA,IAA2E;EAAA,IAA1E;MAACC,QAAQ;MAACC,SAAS;MAAEC,aAAa;MAAER,SAAS;MAAES,KAAK;AAAEP,MAAAA,MAAAA;AAAc,KAAC,GAAAG,IAAA;AAALK,IAAAA,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA,CAAA;AAEhG,EAAA,MAAMC,QAAQ,GAAGC,MAAM,EAAE,CAAA;EAEzB,MAAMC,cAAc,GAAGA,MAAM;IAC3B,IAAIF,QAAQ,CAACG,OAAO,EAAE;MACpB,MAAMC,YAAY,GAAGJ,QAAQ,CAACG,OAAO,CAACE,KAAK,CAACC,QAAQ,CAAA;AACpDN,MAAAA,QAAQ,CAACG,OAAO,CAACE,KAAK,CAACC,QAAQ,GAAG,QAAQ,CAAA;AAC1C,MAAA,OAAO,MAAM;AACXN,QAAAA,QAAQ,CAACG,OAAO,CAACE,KAAK,CAACC,QAAQ,GAAGF,YAAY,CAAA;OAC/C,CAAA;AACH,KAAA;GACD,CAAA;EAED,MAAMG,OAAO,GAAGd,QAAQ,gBACpBe,KAAA,CAAAC,aAAA,CAACC,QAAQ,EAAAC,QAAA,CAAA;AAACC,IAAAA,YAAY,EAAEvB,MAAM,IAAI,CAAC,CAAE;AAACwB,IAAAA,MAAM,EAAEX,cAAe;AAACP,IAAAA,aAAa,EAAEA,aAAc;IAACD,SAAS,EAAEA,SAAS,IAAIb,iBAAAA;AAAkB,GAAA,EAAKgB,IAAI,CAAA,EAAG,cAACW,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKtB,IAAAA,SAAS,EAAGS,KAAK,IAAIP,MAAM,GAAI,EAAE,GAAGF,SAAU;AAAC2B,IAAAA,GAAG,EAAC,OAAA;GAASrB,EAAAA,QAAc,CAAC,CAAY,CAAC,gBAChPe,KAAA,CAAAC,aAAA,CAACC,QAAQ,EAAAC,QAAA,CAAA;AAACC,IAAAA,YAAY,EAAEvB,MAAM,IAAI,CAAC,CAAE;AAACwB,IAAAA,MAAM,EAAEX,cAAe;AAACP,IAAAA,aAAa,EAAEA,aAAc;IAACD,SAAS,EAAEA,SAAS,IAAIb,iBAAAA;GAAuBgB,EAAAA,IAAI,CAAG,EAAA,EAAa,CAAC,CAAA;EAEpK,OAAQD,KAAK,IAAIP,MAAM,gBAAImB,KAAA,CAAAC,aAAA,CAAC1B,uBAAuB,EAAA;AAACM,IAAAA,MAAM,EAAEA,MAAO;AAAC0B,IAAAA,GAAG,EAAEf,QAAS;AAACb,IAAAA,SAAS,EAAEA,SAAAA;GAAYoB,EAAAA,OAAiC,CAAC,GAAGA,OAAO,CAAA;AACxJ;;;;"}