@startlibs/components 1.0.4 → 1.1.1

package/lib/Link.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.mjs","sources":["../src/Link.jsx"],"sourcesContent":["import React, {useMemo} from 'react'\nimport * as Wouter from 'wouter'\nimport { useBrowserLocation } from \"wouter/use-browser-location\"\nimport { useCallbackStable } from \"@startlibs/core\"\nimport {callIfFunction, addQueryString} from \"@startlibs/utils\";\nimport _ from 'lodash/fp'\n\nexport const Link = ({href,...props}) => _.isString(props.to) ? <Wouter.Link {...props} /> : <a {...props} href={href?.replace(\"~\",\"\")}  />\n\nexport const HistoryLink = ({to,onClick,...props}) => {\n  return <a onClick={(e) => {\n    if (onClick && !callIfFunction(onClick,e)) { return }\n    if (e.isDefaultPrevented()) { return }\n    if (!to) { return }\n    e.preventDefault()\n    const {state,pathname,search,hash} = _.isObject(to) ? to : {pathname:to}\n    const url = (pathname || \"\") + (search ? \"?\" + search.replace(/^\\?/,\"\") : \"\") + (hash ? \"#\" + hash.replace(/^#/,\"\") : \"\")\n    window.history.pushState(state, '', url)\n    var popStateEvent = new PopStateEvent('popstate', { state: state });\n    window.dispatchEvent(popStateEvent);\n  }} {...props} />\n}\n\nexport const Route = ({element,children,...props}) => <Wouter.Route {...props}>{element || children}</Wouter.Route>\nexport const Routes = Wouter.Switch\nexport const Navigate = Wouter.Redirect\nexport const useLocation = () => {\n  const [path] = Wouter.useLocation()\n  const [search] = Wouter.useSearchParams()\n  return {pathname:path,search:search ? \"?\" + search : \"\",state:window.history.state}\n}\nexport const useAbsolutePath = () => {\n  const router = Wouter.useRouter();\n  const [path] = Wouter.useLocation()\n  return router.base + path\n}\nexport const useAbsoluteLocation = () => {\n  const router = Wouter.useRouter();\n  const {pathname,search} = useLocation()\n  return router.base + pathname + search\n}\nexport const useNavigate = () => Wouter.useLocation()[1]\nexport const useParams = Wouter.useParams\nexport const useSearchParams = (defaultParams) => {\n  const [location, navigate] = Wouter.useLocation()\n  const search = Wouter.useSearch()\n  const searchParams = useMemo(() => _.assign(defaultParams,Object.fromEntries(new URLSearchParams(search).entries())), [search])\n\n  let tempSearchParams = searchParams\n\n  const setSearchParams = useCallbackStable((nextParams, options) => {\n    tempSearchParams = _.isFunction(nextParams) ? nextParams(tempSearchParams) : _.assign(tempSearchParams, nextParams)\n    const cleanParams = defaultParams\n      ? _.flow(\n        _.toPairs,\n        _.filter(([k,v]) => defaultParams[k] !== v),\n        _.fromPairs\n      )(tempSearchParams)\n      : tempSearchParams\n    navigate(addQueryString(location, cleanParams), options)\n  })\n\n  return [searchParams, setSearchParams]\n}\n\nexport const Router = Wouter.Router\n\nexport {useBrowserLocation}"],"names":["Link","_ref","href","props","_objectWithoutProperties","_excluded","_isString","to","React","createElement","Wouter","_extends","replace","HistoryLink","_ref2","onClick","_excluded2","e","callIfFunction","isDefaultPrevented","preventDefault","state","pathname","search","hash","_isObject","url","window","history","pushState","popStateEvent","PopStateEvent","dispatchEvent","Route","_ref3","element","children","_excluded3","Routes","Switch","Navigate","Redirect","useLocation","path","useSearchParams","useAbsolutePath","router","useRouter","base","useAbsoluteLocation","useNavigate","useParams","defaultParams","location","navigate","useSearch","searchParams","useMemo","_assign","Object","fromEntries","URLSearchParams","entries","tempSearchParams","setSearchParams","useCallbackStable","nextParams","options","_isFunction","cleanParams","_flow","_toPairs","_filter","_ref4","k","v","_fromPairs","addQueryString","Router"],"mappings":"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"}

package/lib/Loading.mjs

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+import { getColor } from '@startlibs/utils';
+
+const Loading = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Loading",
+  componentId: "sc-5t5spc-0"
+})(["z-index:1;--loading-color:", ";--loading-bw:", "px;width:", "px;aspect-ratio:1;flex-shrink:0;border-radius:50%;background:radial-gradient(farthest-side,var(--loading-color) 94%,#0000) top/var(--loading-bw) var(--loading-bw) no-repeat,conic-gradient(#0000 15%,var(--loading-color));-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - var(--loading-bw)),#000 0);mask:radial-gradient(farthest-side,#0000 calc(100% - var(--loading-bw)),#000 0);animation:loading-spin 0.6s infinite linear;", " @keyframes loading-spin{100%{transform:rotate(1turn)}}"], props => props.color || (props.white ? 'rgba(255,255,255,0.9)' : getColor("main")(props)), props => props.borderWidth || 4, props => props.size || 26, props => props.absolute && "\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin: auto;\n    ");
+
+export { Loading };
+//# sourceMappingURL=Loading.mjs.map

package/lib/Loading.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loading.mjs","sources":["../src/Loading.jsx"],"sourcesContent":["import styled from 'styled-components'\nimport {getColor} from '@startlibs/utils'\n\nexport const Loading = styled.div`\n    z-index:1;\n    --loading-color: ${props => props.color || (props.white ? 'rgba(255,255,255,0.9)' : getColor(\"main\")(props))};\n    --loading-bw: ${props => props.borderWidth || 4}px;\n    width: ${props => props.size || 26}px;\n    aspect-ratio: 1;\n    flex-shrink: 0;\n    border-radius: 50%;\n    background:\n      radial-gradient(farthest-side, var(--loading-color) 94%, #0000) top/var(--loading-bw) var(--loading-bw) no-repeat,\n      conic-gradient(#0000 15%, var(--loading-color));\n    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--loading-bw)), #000 0);\n    mask: radial-gradient(farthest-side, #0000 calc(100% - var(--loading-bw)), #000 0);\n    animation: loading-spin 0.6s infinite linear;\n    ${props => props.absolute && `\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      right: 0;\n      left: 0;\n      margin: auto;\n    `}\n    @keyframes loading-spin {\n      100% {transform: rotate(1turn)}\n    }\n  `\n"],"names":["Loading","styled","div","withConfig","displayName","componentId","props","color","white","getColor","borderWidth","size","absolute"],"mappings":";;;MAGaA,OAAO,gBAAGC,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,SAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4BAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,kbAAA,EAAA,yDAAA,CAAA,EAEVC,KAAK,IAAIA,KAAK,CAACC,KAAK,KAAKD,KAAK,CAACE,KAAK,GAAG,uBAAuB,GAAGC,QAAQ,CAAC,MAAM,CAAC,CAACH,KAAK,CAAC,CAAC,EAC5FA,KAAK,IAAIA,KAAK,CAACI,WAAW,IAAI,CAAC,EACtCJ,KAAK,IAAIA,KAAK,CAACK,IAAI,IAAI,EAAE,EAUhCL,KAAK,IAAIA,KAAK,CAACM,QAAQ,8HAOxB;;;;"}

package/lib/LoadingDiv.mjs

@@ -0,0 +1,83 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _isString from 'lodash/fp/isString';
+import React from 'react';
+import styled from 'styled-components';
+import { willUseFlipSwitch } from './Flip.mjs';
+import { Loading } from './Loading.mjs';
+import { useLazyConstant, useEnsureRef } from '@startlibs/core';
+import { twoWayAnimation } from '@startlibs/utils';
+
+const _excluded = ["useAnimation", "outerRef", "onEnter", "onLeave"];
+const [loadingEnter, loadingLeave] = twoWayAnimation('opacity:0;', 'opacity:1;');
+twoWayAnimation('opacity:0; transform:translateY(50%)', 'opacity:1;transform:translateY(0)');
+const BlockContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "LoadingDiv__BlockContainer",
+  componentId: "sc-1g7ljba-0"
+})(["position:relative;"]);
+const FlipDiv = _ref => {
+  let {
+      useAnimation,
+      outerRef,
+      onEnter = onEnter,
+      onLeave = onLeave
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const ensuredRef = useEnsureRef(outerRef);
+  useAnimation(ensuredRef, onEnter, onLeave);
+  return /*#__PURE__*/React.createElement(BlockContainer, _extends({}, props, {
+    ref: ensuredRef
+  }));
+};
+const PaddingDiv = /*#__PURE__*/styled.div.withConfig({
+  displayName: "LoadingDiv__PaddingDiv",
+  componentId: "sc-1g7ljba-1"
+})(["padding:", " 0;"], props => props.height);
+const LoadingDiv = _ref2 => {
+  let {
+    defaultToSuspense = true,
+    fallback,
+    isLoading,
+    className,
+    height = 12,
+    size = 32,
+    borderWidth = 5,
+    children
+  } = _ref2;
+  const flipAnimation = useLazyConstant(willUseFlipSwitch);
+  const loadingBlock = /*#__PURE__*/React.createElement(PaddingDiv, {
+    height: _isString(height) ? borderWidth : height + 'rem'
+  }, /*#__PURE__*/React.createElement(Loading, {
+    autoFocus: true,
+    absolute: true,
+    size: size,
+    borderWidth: borderWidth
+  }));
+  return /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement(FlipDiv, {
+      key: "loading",
+      padded: true,
+      onEnter: loadingEnter,
+      onLeave: loadingLeave,
+      useAnimation: flipAnimation,
+      className: className
+    }, fallback, loadingBlock)
+  }, typeof isLoading === 'boolean' || defaultToSuspense ? isLoading ? /*#__PURE__*/React.createElement(FlipDiv, {
+    key: "loading",
+    padded: true,
+    onEnter: loadingEnter,
+    onLeave: loadingLeave,
+    useAnimation: flipAnimation,
+    className: className
+  }, fallback, loadingBlock) : /*#__PURE__*/React.createElement(FlipDiv, {
+    key: "loaded",
+    loaded: true,
+    onEnter: loadingEnter,
+    onLeave: loadingLeave,
+    useAnimation: flipAnimation,
+    className: className
+  }, children) : children);
+};
+
+export { LoadingDiv };
+//# sourceMappingURL=LoadingDiv.mjs.map

package/lib/LoadingDiv.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingDiv.mjs","sources":["../src/LoadingDiv.jsx"],"sourcesContent":["import React from 'react'\nimport _ from 'lodash/fp'\nimport styled from 'styled-components'\nimport {willUseFlipSwitch} from './Flip'\nimport {Loading} from './Loading'\nimport {useEnsureRef, useLazyConstant} from '@startlibs/core'\nimport {twoWayAnimation} from '@startlibs/utils'\n\n\nconst [loadingEnter, loadingLeave] = twoWayAnimation('opacity:0;', 'opacity:1;')\nconst [onEnter, onLeave] = twoWayAnimation('opacity:0; transform:translateY(50%)', 'opacity:1;transform:translateY(0)')\n\nconst BlockContainer = styled.div`\n  position:relative;\n`\n\nconst FlipDiv = ({useAnimation, outerRef, onEnter = onEnter, onLeave = onLeave, ...props}) => {\n  const ensuredRef = useEnsureRef(outerRef)\n  useAnimation(ensuredRef, onEnter, onLeave)\n  return <BlockContainer {...props} ref={ensuredRef}/>\n}\n\nconst PaddingDiv = styled.div`\n  padding: ${props => props.height} 0;\n`\n\nexport const LoadingDiv = ({defaultToSuspense = true, fallback, isLoading, className, height = 12, size = 32, borderWidth = 5, children}) => {\n  const flipAnimation = useLazyConstant(willUseFlipSwitch)\n\n  const loadingBlock = <PaddingDiv height={_.isString(height) ? borderWidth : (height+'rem')}>\n    <Loading autoFocus absolute size={size} borderWidth={borderWidth}/>\n  </PaddingDiv>\n\n  return <React.Suspense\n    fallback={<FlipDiv\n      key=\"loading\"\n      padded\n      onEnter={loadingEnter}\n      onLeave={loadingLeave}\n      useAnimation={flipAnimation}\n      className={className}\n    >\n      {fallback}\n      {loadingBlock}\n    </FlipDiv>}\n  >\n    {\n      (typeof isLoading === 'boolean' || defaultToSuspense)\n        ? (isLoading\n          ? <FlipDiv\n            key=\"loading\"\n            padded\n            onEnter={loadingEnter}\n            onLeave={loadingLeave}\n            useAnimation={flipAnimation}\n            className={className}\n          >\n            {fallback}\n            {loadingBlock}\n          </FlipDiv>\n          : <FlipDiv\n            key=\"loaded\"\n            loaded\n            onEnter={loadingEnter}\n            onLeave={loadingLeave}\n            useAnimation={flipAnimation}\n            className={className}\n          >\n            {children}\n          </FlipDiv>\n        )\n        : children\n    }\n  </React.Suspense>\n}"],"names":["loadingEnter","loadingLeave","twoWayAnimation","BlockContainer","styled","div","withConfig","displayName","componentId","FlipDiv","_ref","useAnimation","outerRef","onEnter","onLeave","props","_objectWithoutProperties","_excluded","ensuredRef","useEnsureRef","React","createElement","_extends","ref","PaddingDiv","height","LoadingDiv","_ref2","defaultToSuspense","fallback","isLoading","className","size","borderWidth","children","flipAnimation","useLazyConstant","willUseFlipSwitch","loadingBlock","_isString","Loading","autoFocus","absolute","Suspense","key","padded","loaded"],"mappings":"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"}

package/lib/Notifications.mjs

@@ -0,0 +1,63 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _isObject from 'lodash/fp/isObject';
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { willUseSharedState, useToggle, Fill } from '@startlibs/core';
+import { oneWayAnimation, callIfFunction, getColor } from '@startlibs/utils';
+import { useFlipAnimation } from './Flip.mjs';
+import { Icon } from './Icon.mjs';
+
+const NotificationContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Notifications__NotificationContainer",
+  componentId: "sc-naxsn6-0"
+})(["position:fixed;top:0;height:1px;left:0;right:0;text-align:center;"]);
+const Notification = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Notifications__Notification",
+  componentId: "sc-naxsn6-1"
+})(["padding:1rem 4.5rem 1rem 1.5rem;font-size:14px;font-weight:500;border-radius:10px;color:white;text-align:left;background:", ";box-shadow:0 2px 0px 0px rgba(0,0,0,0.1);min-width:12rem;min-height:48px;display:inline-flex;align-items:center;position:relative;top:1rem;", "{color:white;display:inline-block;background-color:rgba(0,0,0,0.1);font-size:18px;width:24px;height:24px;text-align:center;line-height:24px;border-radius:50%;cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);right:1rem;&:hover{background-color:rgba(0,0,0,0.2);}}"], props => getColor(props.type)(props), Icon);
+const [useNotification, useNotificationRef, setNotification] = willUseSharedState();
+const willSetNotification = str => () => setNotification(str);
+const animation = oneWayAnimation('opacity:0; transform:translateY(-20px)', 'opacity:1;transform:translate(0)');
+const Notifications = () => {
+  const toggle = useToggle();
+  const [rawNotification, setNotification] = useNotification();
+  const {
+    msg,
+    type,
+    timeout = 5000
+  } = _isObject(rawNotification) ? rawNotification : {
+    type: "success",
+    msg: rawNotification
+  };
+  useEffect(() => {
+    if (msg) {
+      toggle.open();
+      setTimeout(toggle.willCloseAfter(timeout), 100);
+    }
+  }, [msg]);
+  useEffect(() => {
+    if (!toggle.isOpen) {
+      setNotification(null);
+    }
+  }, [toggle.isOpen]);
+  return toggle.isOpen && /*#__PURE__*/React.createElement(Fill, {
+    name: "Notifications"
+  }, /*#__PURE__*/React.createElement(FlipNotification, {
+    type: type
+  }, callIfFunction(msg, toggle.close), /*#__PURE__*/React.createElement(Icon, {
+    icon: "x",
+    onClick: toggle.close
+  })));
+};
+const FlipNotification = props => {
+  const ref = useRef();
+  useFlipAnimation(ref, animation);
+  return /*#__PURE__*/React.createElement(NotificationContainer, {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Notification, _extends({
+    id: "js-share-notification"
+  }, props)));
+};
+
+export { Notifications, setNotification, useNotification, useNotificationRef, willSetNotification };
+//# sourceMappingURL=Notifications.mjs.map

package/lib/Notifications.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notifications.mjs","sources":["../src/Notifications.jsx"],"sourcesContent":["import React, {useEffect, useRef} from 'react'\nimport _ from 'lodash/fp'\nimport styled from 'styled-components'\nimport {Fill, useToggle, willUseSharedState} from '@startlibs/core'\nimport {callIfFunction, getColor, oneWayAnimation} from '@startlibs/utils'\nimport {useFlipAnimation} from './Flip'\nimport {Icon} from './Icon'\n\nconst NotificationContainer = styled.div `\n  position: fixed;\n  top: 0;\n  height: 1px;\n  left: 0;\n  right: 0;\n  text-align: center;\n`\n\nconst Notification = styled.div `\n  padding: 1rem 4.5rem 1rem 1.5rem;\n  font-size: 14px;\n  font-weight: 500;\n  border-radius: 10px;\n  color: white;\n  text-align: left;\n  background: ${props => getColor(props.type)(props)};\n  box-shadow: 0 2px 0px 0px rgba(0,0,0,0.1);\n  min-width: 12rem;\n  min-height: 48px;\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  top: 1rem;\n  ${Icon} {\n    color: white;\n    display: inline-block;\n    background-color: rgba(0,0,0,0.1);\n    font-size: 18px;\n    width: 24px;\n    height: 24px;\n    text-align: center;\n    line-height: 24px;\n    border-radius: 50%;\n    cursor: pointer;\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    right: 1rem;\n    &:hover {\n      background-color: rgba(0,0,0,0.2);\n    }\n  }\n`\n\nconst [useNotification, useNotificationRef,setNotification] = willUseSharedState()\nexport {useNotification, useNotificationRef, setNotification}\nexport const willSetNotification = (str) => () => setNotification(str)\n\nconst animation = oneWayAnimation('opacity:0; transform:translateY(-20px)', 'opacity:1;transform:translate(0)')\n\nexport const Notifications = () => {\n  const toggle = useToggle()\n  const [rawNotification,setNotification] = useNotification()\n\n  const {msg,type,timeout = 5000} = _.isObject(rawNotification) ? rawNotification : {type:\"success\",msg:rawNotification}\n\n  useEffect(() => {\n    if (msg) {\n      toggle.open()\n      setTimeout(toggle.willCloseAfter(timeout), 100)\n    }\n  },[msg])\n  useEffect(() => {\n    if (!toggle.isOpen) {\n      setNotification(null)\n    }\n  },[toggle.isOpen])\n\n  return toggle.isOpen && (<Fill name=\"Notifications\">\n    <FlipNotification type={type}>\n      {callIfFunction(msg,toggle.close)}\n      <Icon icon=\"x\" onClick={toggle.close}/>\n    </FlipNotification>\n  </Fill>)\n}\nconst FlipNotification = (props) => {\n  const ref = useRef()\n  useFlipAnimation(ref,animation)\n  return <NotificationContainer ref={ref}><Notification id=\"js-share-notification\" {...props}/></NotificationContainer>\n}"],"names":["NotificationContainer","styled","div","withConfig","displayName","componentId","Notification","props","getColor","type","Icon","useNotification","useNotificationRef","setNotification","willUseSharedState","willSetNotification","str","animation","oneWayAnimation","Notifications","toggle","useToggle","rawNotification","msg","timeout","_isObject","useEffect","open","setTimeout","willCloseAfter","isOpen","React","createElement","Fill","name","FlipNotification","callIfFunction","close","icon","onClick","ref","useRef","useFlipAnimation","_extends","id"],"mappings":";;;;;;;;;AAQA,MAAMA,qBAAqB,gBAAGC,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,sCAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAOvC,CAAA,CAAA,CAAA,mEAAA,CAAA,CAAA,CAAA;AAED,MAAMC,YAAY,gBAAGL,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,6BAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAAA,CAAA,CAAA,CAAA,2HAAA,EAAA,8IAAA,EAAA,0RAAA,CAAA,EAOfE,KAAK,IAAIC,QAAQ,CAACD,KAAK,CAACE,IAAI,CAAC,CAACF,KAAK,CAAC,EAQhDG,IAAI,CAmBP,CAAA;AAEK,MAAA,CAACC,eAAe,EAAEC,kBAAkB,EAACC,eAAe,CAAC,GAAGC,kBAAkB,GAAE;AAE3E,MAAMC,mBAAmB,GAAIC,GAAG,IAAK,MAAMH,eAAe,CAACG,GAAG,EAAC;AAEtE,MAAMC,SAAS,GAAGC,eAAe,CAAC,wCAAwC,EAAE,kCAAkC,CAAC,CAAA;AAElGC,MAAAA,aAAa,GAAGA,MAAM;AACjC,EAAA,MAAMC,MAAM,GAAGC,SAAS,EAAE,CAAA;EAC1B,MAAM,CAACC,eAAe,EAACT,eAAe,CAAC,GAAGF,eAAe,EAAE,CAAA;EAE3D,MAAM;IAACY,GAAG;IAACd,IAAI;AAACe,IAAAA,OAAO,GAAG,IAAA;AAAI,GAAC,GAAGC,SAAA,CAAWH,eAAe,CAAC,GAAGA,eAAe,GAAG;AAACb,IAAAA,IAAI,EAAC,SAAS;AAACc,IAAAA,GAAG,EAACD,eAAAA;GAAgB,CAAA;AAEtHI,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAIH,GAAG,EAAE;MACPH,MAAM,CAACO,IAAI,EAAE,CAAA;MACbC,UAAU,CAACR,MAAM,CAACS,cAAc,CAACL,OAAO,CAAC,EAAE,GAAG,CAAC,CAAA;AACjD,KAAA;AACF,GAAC,EAAC,CAACD,GAAG,CAAC,CAAC,CAAA;AACRG,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAI,CAACN,MAAM,CAACU,MAAM,EAAE;MAClBjB,eAAe,CAAC,IAAI,CAAC,CAAA;AACvB,KAAA;AACF,GAAC,EAAC,CAACO,MAAM,CAACU,MAAM,CAAC,CAAC,CAAA;EAElB,OAAOV,MAAM,CAACU,MAAM,iBAAKC,KAAA,CAAAC,aAAA,CAACC,IAAI,EAAA;AAACC,IAAAA,IAAI,EAAC,eAAA;AAAe,GAAA,eACjDH,KAAA,CAAAC,aAAA,CAACG,gBAAgB,EAAA;AAAC1B,IAAAA,IAAI,EAAEA,IAAAA;AAAK,GAAA,EAC1B2B,cAAc,CAACb,GAAG,EAACH,MAAM,CAACiB,KAAK,CAAC,eACjCN,KAAA,CAAAC,aAAA,CAACtB,IAAI,EAAA;AAAC4B,IAAAA,IAAI,EAAC,GAAG;IAACC,OAAO,EAAEnB,MAAM,CAACiB,KAAAA;GAAO,CACtB,CACd,CAAE,CAAA;AACV,EAAC;AACD,MAAMF,gBAAgB,GAAI5B,KAAK,IAAK;AAClC,EAAA,MAAMiC,GAAG,GAAGC,MAAM,EAAE,CAAA;AACpBC,EAAAA,gBAAgB,CAACF,GAAG,EAACvB,SAAS,CAAC,CAAA;AAC/B,EAAA,oBAAOc,KAAA,CAAAC,aAAA,CAAChC,qBAAqB,EAAA;AAACwC,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,eAACT,KAAA,CAAAC,aAAA,CAAC1B,YAAY,EAAAqC,QAAA,CAAA;AAACC,IAAAA,EAAE,EAAC,uBAAA;GAA4BrC,EAAAA,KAAK,CAAE,CAAwB,CAAC,CAAA;AACvH,CAAC;;;;"}

package/lib/PageLoader.mjs

@@ -0,0 +1,42 @@
+import React, { useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { getColor, oneWayAnimation, animationTiming } from '@startlibs/utils';
+import { useToggle } from '@startlibs/core';
+import { useFlipLeave } from './Flip.mjs';
+
+const LoadingBar = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PageLoader__LoadingBar",
+  componentId: "sc-96jeob-0"
+})(["width:100%;border-radius:0 1px 1px 0;height:4px;position:fixed;background:", ";transform:translateX(-100%);", " left:0;z-index:99999;box-shadow:", ";", " ", ""], props => props.bottom ? css(["", ""], getColor('main')) : "#84D359", props => props.bottom ? "bottom:69px;" : "top: 0;", props => props.bottom ? "0 0 1px 1px rgba(0,132,214,0.2);" : "0 0 2px 0 rgba(0,0,0,0.5);", props => props.loading && "\n    transform: translateX(-30%);\n    transition: transform 1.5s ease;\n  ", props => props.closing && "\n    transform: translateX(0);\n    transition: transform 0.3s ease-in;\n  ");
+const PageLoader = _ref => {
+  let {
+    isLoading
+  } = _ref;
+  const loader = useToggle();
+  useEffect(() => {
+    if (isLoading) {
+      loader.open();
+    } else {
+      loader.closeAfter(500);
+    }
+  }, [isLoading]);
+  return /*#__PURE__*/React.createElement(LoadingBar, {
+    loading: loader.isOpen,
+    closing: loader.closing
+  });
+};
+const animation = oneWayAnimation('transform:translateX(-30%);', 'transform:translateX(0);');
+const SuspenseLoadingBar = () => {
+  const ref = React.useRef();
+  useFlipLeave(ref, animation, {
+    reverse: false,
+    timing: animationTiming('0.3s ease-in')
+  });
+  return /*#__PURE__*/React.createElement(LoadingBar, {
+    ref: ref,
+    loading: true
+  });
+};
+
+export { LoadingBar, PageLoader, SuspenseLoadingBar };
+//# sourceMappingURL=PageLoader.mjs.map

package/lib/PageLoader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageLoader.mjs","sources":["../src/PageLoader.jsx"],"sourcesContent":["import React, {useEffect} from 'react'\nimport styled, {css} from 'styled-components'\nimport {oneWayAnimation, getColor} from '@startlibs/utils'\nimport {useToggle} from '@startlibs/core'\nimport {useFlipLeave} from './Flip'\nimport {animationTiming} from '@startlibs/utils'\n\nexport const LoadingBar = styled.div`\n  width: 100%;\n  border-radius: 0 1px 1px 0;\n  height: 4px;\n  position: fixed;\n  background: ${props => props.bottom ? css`${getColor('main')}`:`#84D359`};\n  transform: translateX(-100%);\n  ${props => props.bottom ? \"bottom:69px;\" : \"top: 0;\"}\n  left: 0;\n  z-index: 99999;\n  box-shadow: ${props => props.bottom ? `0 0 1px 1px rgba(0,132,214,0.2);`:`0 0 2px 0 rgba(0,0,0,0.5);`};\n  ${props => props.loading && `\n    transform: translateX(-30%);\n    transition: transform 1.5s ease;\n  `}\n  ${props => props.closing && `\n    transform: translateX(0);\n    transition: transform 0.3s ease-in;\n  `}\n`\n\n\nexport const PageLoader = ({isLoading}) => {\n  const loader = useToggle()\n  useEffect(() => {\n    if (isLoading) {\n      loader.open()\n    } else {\n      loader.closeAfter(500)\n    }\n  },[isLoading])\n\n  return <LoadingBar loading={loader.isOpen} closing={loader.closing}/>\n}\n\nconst animation = oneWayAnimation('transform:translateX(-30%);','transform:translateX(0);')\nexport const SuspenseLoadingBar = () => {\n  const ref = React.useRef()\n  useFlipLeave(ref,animation,{reverse: false,timing:animationTiming('0.3s ease-in')})\n  return <LoadingBar ref={ref} loading/>\n}"],"names":["LoadingBar","styled","div","withConfig","displayName","componentId","props","bottom","css","getColor","loading","closing","PageLoader","_ref","isLoading","loader","useToggle","useEffect","open","closeAfter","React","createElement","isOpen","animation","oneWayAnimation","SuspenseLoadingBar","ref","useRef","useFlipLeave","reverse","timing","animationTiming"],"mappings":";;;;;;MAOaA,UAAU,gBAAGC,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,wBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAKpBC,CAAAA,CAAAA,CAAAA,4EAAAA,EAAAA,+BAAAA,EAAAA,mCAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,EAAAA,CAAAA,EAAAA,KAAK,IAAIA,KAAK,CAACC,MAAM,GAAGC,GAAG,WAAGC,QAAQ,CAAC,MAAM,CAAC,CAAA,GAAA,SAAY,EAEtEH,KAAK,IAAIA,KAAK,CAACC,MAAM,GAAG,cAAc,GAAG,SAAS,EAGtCD,KAAK,IAAIA,KAAK,CAACC,MAAM,GAAkE,kCAAA,GAAA,4BAAA,EACnGD,KAAK,IAAIA,KAAK,CAACI,OAAO,IAAA,8EAGvB,EACCJ,KAAK,IAAIA,KAAK,CAACK,OAAO,kFAGvB,EACF;AAGYC,MAAAA,UAAU,GAAGC,IAAA,IAAiB;EAAA,IAAhB;AAACC,IAAAA,SAAAA;AAAS,GAAC,GAAAD,IAAA,CAAA;AACpC,EAAA,MAAME,MAAM,GAAGC,SAAS,EAAE,CAAA;AAC1BC,EAAAA,SAAS,CAAC,MAAM;AACd,IAAA,IAAIH,SAAS,EAAE;MACbC,MAAM,CAACG,IAAI,EAAE,CAAA;AACf,KAAC,MAAM;AACLH,MAAAA,MAAM,CAACI,UAAU,CAAC,GAAG,CAAC,CAAA;AACxB,KAAA;AACF,GAAC,EAAC,CAACL,SAAS,CAAC,CAAC,CAAA;AAEd,EAAA,oBAAOM,KAAA,CAAAC,aAAA,CAACrB,UAAU,EAAA;IAACU,OAAO,EAAEK,MAAM,CAACO,MAAO;IAACX,OAAO,EAAEI,MAAM,CAACJ,OAAAA;AAAQ,GAAC,CAAC,CAAA;AACvE,EAAC;AAED,MAAMY,SAAS,GAAGC,eAAe,CAAC,6BAA6B,EAAC,0BAA0B,CAAC,CAAA;AAC9EC,MAAAA,kBAAkB,GAAGA,MAAM;AACtC,EAAA,MAAMC,GAAG,GAAGN,KAAK,CAACO,MAAM,EAAE,CAAA;AAC1BC,EAAAA,YAAY,CAACF,GAAG,EAACH,SAAS,EAAC;AAACM,IAAAA,OAAO,EAAE,KAAK;IAACC,MAAM,EAACC,eAAe,CAAC,cAAc,CAAA;AAAC,GAAC,CAAC,CAAA;AACnF,EAAA,oBAAOX,KAAA,CAAAC,aAAA,CAACrB,UAAU,EAAA;AAAC0B,IAAAA,GAAG,EAAEA,GAAI;IAAChB,OAAO,EAAA,IAAA;AAAA,GAAC,CAAC,CAAA;AACxC;;;;"}

package/lib/PersistentNotifications.mjs

@@ -0,0 +1,130 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import _over from 'lodash/fp/over';
+import _isString from 'lodash/fp/isString';
+import _without from 'lodash/fp/without';
+import _isObject from 'lodash/fp/isObject';
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+import { willUseSharedState, Fill } from '@startlibs/core';
+import { getColor, media, oneWayAnimation, printerMedia, callIfFunction } from '@startlibs/utils';
+import { useFlipAnimation } from './Flip.mjs';
+import { Icon } from './Icon.mjs';
+import { transparentize, darken } from 'polished';
+import { Button } from './Button.mjs';
+
+const _excluded = ["content", "type", "marginTop"];
+var _templateObject, _templateObject2, _templateObject3;
+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 PersistentNotification = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PersistentNotifications__PersistentNotification",
+  componentId: "sc-1t7i0dh-0"
+})(["color:", ";h4{font-size:15px;font-weight:500;margin-bottom:0.5rem;}p{font-size:13px;margin-bottom:0;}"], getColor('warning'));
+const PersistentNotificationContent = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PersistentNotifications__PersistentNotificationContent",
+  componentId: "sc-1t7i0dh-1"
+})(["display:flex;align-items:center;padding:1.5rem;"]);
+const PersistentNotificationIcon = /*#__PURE__*/styled(Icon).withConfig({
+  displayName: "PersistentNotifications__PersistentNotificationIcon",
+  componentId: "sc-1t7i0dh-2"
+})(["font-size:38px;width:4rem;height:4rem;line-height:4rem;border-radius:100px;text-align:center;background:", ";margin-right:1rem;flex-shrink:0;", ""], props => transparentize(0.88, getColor("warning")(props)), props => props.icon === 'warning' && "font-size:30px;");
+const PersistentNotificationActions = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PersistentNotifications__PersistentNotificationActions",
+  componentId: "sc-1t7i0dh-3"
+})(["display:flex;margin-top:-0.25rem;padding:0 1.5rem 1.5rem;", "{flex-grow:1;}", " ~ ", "{margin-left:0;margin-right:1rem;}", ""], Button, Button, Button, media.max(390)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: block;\n    ", " {\n      width: 100%;\n    }\n    ", " ~ ", " {\n      margin-left: 0;\n      margin-top: 0.75rem;\n    }\n  "])), Button, Button, Button));
+const PersistentNotificationCloseIcon = /*#__PURE__*/styled(Icon).attrs({
+  icon: 'x'
+}).withConfig({
+  displayName: "PersistentNotifications__PersistentNotificationCloseIcon",
+  componentId: "sc-1t7i0dh-4"
+})(["position:absolute;width:30px;height:30px;font-size:20px;line-height:30px;cursor:pointer;border-radius:50%;text-align:center;z-index:1000;top:0.5rem;right:0.5rem;color:", ";background:", ";:hover{background:", ";}:active{background:", ";}"], props => props.type && props.type !== 'main' ? getColor(props.type)(props) : darken(0.1, getColor("main")(props)), props => transparentize(0.90, getColor(props.type || "main")(props)), props => transparentize(0.85, getColor(props.type || "main")(props)), props => transparentize(0.82, getColor(props.type || "main")(props)));
+const [useNotifications,, setNotifications] = willUseSharedState([]);
+const openPersistentNotification = notification => {
+  const newNotification = _objectSpread({
+    priority: 0,
+    type: "success"
+  }, _isObject(notification) ? notification : {
+    content: notification
+  });
+  setNotifications(list => {
+    const nextIndex = list.findIndex(n => n.priority < newNotification.priority);
+    return nextIndex < 0 ? [...list, newNotification] : [...list.slice(0, nextIndex), newNotification, ...list.slice(nextIndex)];
+  });
+  return () => setNotifications(_without([newNotification]));
+};
+const animation = oneWayAnimation('opacity:0; transform:translateY(-20px)', 'opacity:1;transform:translate(0)');
+const NotificationContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PersistentNotifications__NotificationContainer",
+  componentId: "sc-1t7i0dh-5"
+})(["position:fixed;top:0;height:0;right:0;z-index:20;"]);
+const Notification = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PersistentNotifications__Notification",
+  componentId: "sc-1t7i0dh-6"
+})(["background:", ";position:relative;border-radius:19px;"], props => transparentize(0.9, getColor(props.type)(props)));
+const NotificationWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PersistentNotifications__NotificationWrapper",
+  componentId: "sc-1t7i0dh-7"
+})(["background:white;margin-top:", ";margin-right:0.75rem;margin-left:0.75rem;padding:5px;border-radius:22px;box-shadow:0 0 10px 0 rgba(0,0,0,0.1),0 1px 2px 1px rgba(0,0,0,0.15);max-width:364px;", " ", ""], props => props.marginTop || "3.5rem", media.mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin-top: ", ";\n  "])), props => props.marginTop || "4rem"), printerMedia(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+const [useIsHiddenPersistentNotifications,, hidePersistentNotifications] = willUseSharedState(false);
+const PersistentNotifications = () => {
+  const [notifications, setNotifications] = useNotifications();
+  const [isHidden] = useIsHiddenPersistentNotifications();
+  if (!notifications.length || isHidden) {
+    return null;
+  }
+  const closeMessage = e => {
+    setNotifications(list => list.slice(1));
+  };
+  const _notifications$ = notifications[0],
+    {
+      content,
+      type,
+      marginTop
+    } = _notifications$,
+    notification = _objectWithoutProperties(_notifications$, _excluded);
+  return /*#__PURE__*/React.createElement(Fill, {
+    name: "PersistentNotifications"
+  }, /*#__PURE__*/React.createElement(FlipNotification, {
+    type: type,
+    marginTop: marginTop
+  }, content ? callIfFunction(content, closeMessage) : /*#__PURE__*/React.createElement(DefaultNotification, _extends({
+    type: type,
+    _onClose: closeMessage
+  }, notification))));
+};
+const DefaultNotification = _ref => {
+  let {
+    type,
+    title,
+    body,
+    actions,
+    icon,
+    skipClose,
+    _onClose,
+    onClose
+  } = _ref;
+  return /*#__PURE__*/React.createElement(PersistentNotification, null, /*#__PURE__*/React.createElement(PersistentNotificationContent, null, _isString(icon) || !icon ? /*#__PURE__*/React.createElement(PersistentNotificationIcon, {
+    icon: icon || type
+  }) : icon, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h4", null, title), body)), actions && /*#__PURE__*/React.createElement(PersistentNotificationActions, null, actions), !skipClose && /*#__PURE__*/React.createElement(PersistentNotificationCloseIcon, {
+    type: "warning",
+    onClick: _over([_onClose, onClose])
+  }));
+};
+const FlipNotification = props => {
+  const ref = useRef();
+  useFlipAnimation(ref, animation);
+  return /*#__PURE__*/React.createElement(NotificationContainer, {
+    className: "JS-fix-dialog-scroll",
+    ref: ref
+  }, /*#__PURE__*/React.createElement(NotificationWrapper, {
+    marginTop: props.marginTop
+  }, /*#__PURE__*/React.createElement(Notification, _extends({
+    id: "js-share-notification"
+  }, props))));
+};
+
+export { PersistentNotification, PersistentNotificationActions, PersistentNotificationCloseIcon, PersistentNotificationContent, PersistentNotificationIcon, PersistentNotifications, hidePersistentNotifications, openPersistentNotification, useIsHiddenPersistentNotifications };
+//# sourceMappingURL=PersistentNotifications.mjs.map

package/lib/PersistentNotifications.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersistentNotifications.mjs","sources":["../src/PersistentNotifications.jsx"],"sourcesContent":["import React, {useRef} from 'react'\nimport _ from 'lodash/fp'\nimport styled from 'styled-components'\nimport {Fill, willUseSharedState} from '@startlibs/core'\nimport {media,getColor, callIfFunction, oneWayAnimation, printerMedia} from '@startlibs/utils'\nimport {useFlipAnimation} from './Flip'\nimport {Icon} from './Icon'\nimport {darken, transparentize } from 'polished';\nimport {Button} from './Button'\n\nexport const PersistentNotification = styled.div`\n  color: ${getColor('warning')};\n  h4 {\n    font-size: 15px;\n    font-weight: 500;\n    margin-bottom: 0.5rem;\n  }\n  p {\n    font-size: 13px;\n    margin-bottom: 0;\n  }\n`\n\nexport const PersistentNotificationContent = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 1.5rem;\n`\nexport const PersistentNotificationIcon = styled(Icon)`\n  font-size: 38px;\n  width: 4rem;\n  height: 4rem;\n  line-height: 4rem;\n  border-radius: 100px;\n  text-align: center;\n  background: ${props => transparentize(0.88, getColor(\"warning\")(props))};\n  margin-right: 1rem;\n  flex-shrink: 0;\n  ${props => props.icon === 'warning' && `font-size:30px;`}\n`\nexport const PersistentNotificationActions = styled.div`\n  display: flex;\n  margin-top: -0.25rem;\n  padding: 0 1.5rem 1.5rem;\n  ${Button} {\n    flex-grow: 1;\n  }\n  ${Button} ~ ${Button} {\n    margin-left: 0;\n    margin-right: 1rem;\n  }\n  ${media.max(390)`\n    display: block;\n    ${Button} {\n      width: 100%;\n    }\n    ${Button} ~ ${Button} {\n      margin-left: 0;\n      margin-top: 0.75rem;\n    }\n  `}\n`\nexport const PersistentNotificationCloseIcon = styled(Icon).attrs({icon: 'x'})`\n    position: absolute;\n    width: 30px;\n    height: 30px;\n    font-size: 20px;\n    line-height: 30px;\n    cursor: pointer;\n    border-radius: 50%;\n    text-align: center;\n    z-index: 1000;\n    top: 0.5rem;\n    right: 0.5rem;\n    color: ${props => props.type && props.type!== 'main' ? getColor(props.type)(props) : darken(0.1, getColor(\"main\")(props))};\n    background: ${props => transparentize(0.90, getColor(props.type || \"main\")(props))};\n    :hover {\n      background: ${props => transparentize(0.85, getColor(props.type || \"main\")(props))};\n    }\n    :active {\n      background: ${props => transparentize(0.82, getColor(props.type || \"main\")(props))};\n    }\n  `\n\n\nconst [useNotifications, ,setNotifications] = willUseSharedState([])\n\nexport const openPersistentNotification = (notification) => {\n  const newNotification = {priority:0,type:\"success\",...(_.isObject(notification) ? notification : {content:notification})}\n\n  setNotifications(list => {\n    const nextIndex = list.findIndex(n => n.priority < newNotification.priority)\n    return nextIndex < 0\n      ? [...list,newNotification]\n      : [...list.slice(0,nextIndex),newNotification,...list.slice(nextIndex)]\n  })\n  return () => setNotifications(_.without([newNotification]))\n}\n\n\nconst animation = oneWayAnimation('opacity:0; transform:translateY(-20px)', 'opacity:1;transform:translate(0)')\n\nconst NotificationContainer = styled.div `\n  position: fixed;\n  top: 0;\n  height: 0;\n  right: 0;\n  z-index:20;\n`\n\nconst Notification = styled.div `\n  background: ${props => transparentize(0.9, getColor(props.type)(props))};\n  position: relative;\n  border-radius: 19px;\n`\nconst NotificationWrapper = styled.div `\n  background: white;\n  margin-top: ${props => props.marginTop || \"3.5rem\"};\n  margin-right: 0.75rem;\n  margin-left: 0.75rem;\n  padding: 5px;\n  border-radius: 22px;\n  box-shadow: 0 0 10px 0 rgba(0,0,0,0.1), 0 1px 2px 1px rgba(0,0,0,0.15);\n  max-width: 364px;\n  ${media.mobile`\n    margin-top: ${props => props.marginTop || \"4rem\"};\n  `}\n  ${printerMedia`\n    display: none;\n  `}\n`\nconst [useIsHiddenPersistentNotifications,,hidePersistentNotifications] = willUseSharedState(false)\nexport {useIsHiddenPersistentNotifications, hidePersistentNotifications}\nexport const PersistentNotifications = () => {\n  const [notifications,setNotifications] = useNotifications()\n  const [isHidden] = useIsHiddenPersistentNotifications()\n\n  if (!notifications.length || isHidden) {\n    return null;\n  }\n  const closeMessage = (e) => {\n    setNotifications((list) => list.slice(1))\n  }\n\n  const {content,type,marginTop,...notification} = notifications[0]\n\n  return <Fill name=\"PersistentNotifications\">\n    <FlipNotification type={type} marginTop={marginTop}>\n      {content\n        ? callIfFunction(content,closeMessage)\n        : <DefaultNotification type={type} _onClose={closeMessage} {...notification} />\n      }\n    </FlipNotification>\n  </Fill>\n}\n\nconst DefaultNotification = ({type, title,body,actions, icon, skipClose,_onClose,onClose}) => {\n  return  <PersistentNotification>\n    <PersistentNotificationContent>\n      {(_.isString(icon) || !icon) ? <PersistentNotificationIcon icon={icon || type}/> : icon}\n      <div>\n        <h4>{title}</h4>\n        {body}\n      </div>\n    </PersistentNotificationContent>\n    {\n      actions &&\n      <PersistentNotificationActions>\n        {actions}\n      </PersistentNotificationActions>\n    }\n    {!skipClose && <PersistentNotificationCloseIcon type=\"warning\" onClick={_.over([_onClose,onClose])}/>}\n  </PersistentNotification>\n}\n\nconst FlipNotification = (props) => {\n  const ref = useRef()\n  useFlipAnimation(ref,animation)\n  return <NotificationContainer className=\"JS-fix-dialog-scroll\" ref={ref}>\n    <NotificationWrapper marginTop={props.marginTop}><Notification id=\"js-share-notification\" {...props}/></NotificationWrapper>\n  </NotificationContainer>\n}\n"],"names":["PersistentNotification","styled","div","withConfig","displayName","componentId","getColor","PersistentNotificationContent","PersistentNotificationIcon","Icon","props","transparentize","icon","PersistentNotificationActions","Button","media","max","_templateObject","_taggedTemplateLiteral","PersistentNotificationCloseIcon","attrs","type","darken","useNotifications","setNotifications","willUseSharedState","openPersistentNotification","notification","newNotification","_objectSpread","priority","_isObject","content","list","nextIndex","findIndex","n","slice","_without","animation","oneWayAnimation","NotificationContainer","Notification","NotificationWrapper","marginTop","mobile","_templateObject2","printerMedia","_templateObject3","useIsHiddenPersistentNotifications","hidePersistentNotifications","PersistentNotifications","notifications","isHidden","length","closeMessage","e","_notifications$","_objectWithoutProperties","_excluded","React","createElement","Fill","name","FlipNotification","callIfFunction","DefaultNotification","_extends","_onClose","_ref","title","body","actions","skipClose","onClose","_isString","onClick","_over","ref","useRef","useFlipAnimation","className","id"],"mappings":"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"}

package/lib/Popup.mjs

@@ -0,0 +1,49 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useMemo } from 'react';
+import styled, { css } from 'styled-components';
+import { useEnsureRef, Fill } from '@startlibs/core';
+import { useFlipAnimation } from './Flip.mjs';
+import { getDialogLayersSize } from './containers/DialogContainer.mjs';
+import { usePositioning } from './containers/usePositioning.mjs';
+import { twoWayAnimation, customTheme } from '@startlibs/utils';
+
+const _excluded = ["slot", "skipPortal", "animation", "leaveAnimation", "animationOptions", "arrowRef", "className", "onClick", "children"];
+const [fadeIn, fadeOut] = twoWayAnimation("opacity:0;", "opacity:1;");
+const PopupDiv = /*#__PURE__*/styled.div.withConfig({
+  displayName: "Popup__PopupDiv",
+  componentId: "sc-sq2sfn-0"
+})(["position:absolute;background-color:#FFF;box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 10px -2px rgba(0,0,0,0.15),0 0px 2px 0px rgba(0,0,0,0.2);border-radius:8px;padding:1rem;text-align:initial;line-height:140%;font-size:14px;z-index:999;", " ", " ", ""], props => props.atTop && css(["margin-top:-0.25rem;"]), props => props.atBottom && css(["margin-top:0.25rem;"]), customTheme('Popup'));
+const Popup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      slot = 'Popup',
+      skipPortal,
+      animation = fadeIn,
+      leaveAnimation = true,
+      animationOptions,
+      arrowRef,
+      className,
+      onClick,
+      children
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  const popupRef = useEnsureRef(ref);
+  const [positionInfo, placeholder, arrow] = usePositioning(popupRef, rest, arrowRef);
+
+  // leaveAnimation=false → sem animação de saída (nenhum clone no unmount): útil quando
+  // o popup é portalado num slot persistente (ex: NavbarPopup) e o dono desmonta na
+  // navegação — senão o clone da saída fica órfão no slot. Default true = comportamento atual.
+  useFlipAnimation(popupRef, animation, leaveAnimation, animationOptions);
+  const slotName = useMemo(() => getDialogLayersSize() === 0 ? slot : slot + '-' + (getDialogLayersSize() - 1), []);
+  const popupContainer = /*#__PURE__*/React.createElement(PopupDiv, _extends({}, positionInfo, {
+    onClick: onClick,
+    className: className,
+    ref: popupRef
+  }), arrow, children);
+  return skipPortal ? popupContainer : /*#__PURE__*/React.createElement(React.Fragment, null, placeholder, /*#__PURE__*/React.createElement(Fill, {
+    name: slotName
+  }, popupContainer));
+});
+
+export { Popup };
+//# sourceMappingURL=Popup.mjs.map

package/lib/Popup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.mjs","sources":["../src/Popup.jsx"],"sourcesContent":["import React, {useMemo} from 'react'\nimport styled, {css} from 'styled-components'\nimport {Fill, useEnsureRef} from '@startlibs/core'\nimport {useFlipAnimation} from './Flip'\nimport {getDialogLayersSize} from './containers/DialogContainer'\nimport {usePositioning} from './containers/usePositioning'\nimport {twoWayAnimation, customTheme} from '@startlibs/utils'\n\nconst [fadeIn, fadeOut] = twoWayAnimation(`opacity:0;`, `opacity:1;`)\n\nconst PopupDiv = styled.div`\n    position: absolute;\n    background-color: #FFF;\n    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 10px -2px rgba(0,0,0,0.15), 0 0px 2px 0px rgba(0,0,0,0.2);\n    border-radius: 8px;\n    padding: 1rem;\n    text-align: initial;\n    line-height: 140%;\n    font-size: 14px;\n    z-index: 999;\n    ${props => props.atTop && css`\n        margin-top: -0.25rem;\n    `}\n    ${props => props.atBottom && css`\n        margin-top: 0.25rem;\n    `}\n    ${customTheme('Popup')}\n`\n\nexport const Popup = React.forwardRef(({slot = 'Popup',skipPortal, animation = fadeIn, leaveAnimation = true, animationOptions, arrowRef, className, onClick, children, ...rest},ref) => {\n  const popupRef = useEnsureRef(ref)\n  const [positionInfo, placeholder, arrow] = usePositioning(popupRef, rest, arrowRef)\n\n  // leaveAnimation=false → sem animação de saída (nenhum clone no unmount): útil quando\n  // o popup é portalado num slot persistente (ex: NavbarPopup) e o dono desmonta na\n  // navegação — senão o clone da saída fica órfão no slot. Default true = comportamento atual.\n  useFlipAnimation(popupRef, animation, leaveAnimation, animationOptions)\n  const slotName = useMemo(() => getDialogLayersSize() === 0 ? slot : (slot + '-' + (getDialogLayersSize() - 1)), [])\n  const popupContainer = <PopupDiv {...positionInfo} onClick={onClick} className={className} ref={popupRef}>\n    {arrow}\n    {children}\n  </PopupDiv>\n  return skipPortal ? popupContainer : <>\n    {placeholder}\n    <Fill name={slotName}>\n      {popupContainer}\n    </Fill>\n  </>\n})"],"names":["fadeIn","fadeOut","twoWayAnimation","PopupDiv","styled","div","withConfig","displayName","componentId","props","atTop","css","atBottom","customTheme","Popup","React","forwardRef","_ref","ref","slot","skipPortal","animation","leaveAnimation","animationOptions","arrowRef","className","onClick","children","rest","_objectWithoutProperties","_excluded","popupRef","useEnsureRef","positionInfo","placeholder","arrow","usePositioning","useFlipAnimation","slotName","useMemo","getDialogLayersSize","popupContainer","createElement","_extends","Fragment","Fill","name"],"mappings":";;;;;;;;;;;AAQA,MAAM,CAACA,MAAM,EAAEC,OAAO,CAAC,GAAGC,eAAe,2BAA2B,CAAC,CAAA;AAErE,MAAMC,QAAQ,gBAAGC,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,iBAAA;EAAAC,WAAA,EAAA,aAAA;AAAA,CAUrBC,CAAAA,CAAAA,CAAAA,+OAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,EAAAA,CAAAA,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,IAAIC,GAAG,CAE5B,CAAA,sBAAA,CAAA,CAAA,EACCF,KAAK,IAAIA,KAAK,CAACG,QAAQ,IAAID,GAAG,CAAA,CAAA,qBAAA,CAAA,CAE/B,EACCE,WAAW,CAAC,OAAO,CAAC,CACzB,CAAA;AAEM,MAAMC,KAAK,gBAAGC,KAAK,CAACC,UAAU,CAAC,CAAAC,IAAA,EAA2IC,GAAG,KAAK;EAAA,IAAlJ;AAACC,MAAAA,IAAI,GAAG,OAAO;MAACC,UAAU;AAAEC,MAAAA,SAAS,GAAGrB,MAAM;AAAEsB,MAAAA,cAAc,GAAG,IAAI;MAAEC,gBAAgB;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,OAAO;AAAEC,MAAAA,QAAAA;AAAiB,KAAC,GAAAV,IAAA;AAALW,IAAAA,IAAI,GAAAC,wBAAA,CAAAZ,IAAA,EAAAa,SAAA,CAAA,CAAA;AAC7K,EAAA,MAAMC,QAAQ,GAAGC,YAAY,CAACd,GAAG,CAAC,CAAA;AAClC,EAAA,MAAM,CAACe,YAAY,EAAEC,WAAW,EAAEC,KAAK,CAAC,GAAGC,cAAc,CAACL,QAAQ,EAAEH,IAAI,EAAEJ,QAAQ,CAAC,CAAA;;AAEnF;AACA;AACA;EACAa,gBAAgB,CAACN,QAAQ,EAAEV,SAAS,EAAEC,cAAc,EAAEC,gBAAgB,CAAC,CAAA;EACvE,MAAMe,QAAQ,GAAGC,OAAO,CAAC,MAAMC,mBAAmB,EAAE,KAAK,CAAC,GAAGrB,IAAI,GAAIA,IAAI,GAAG,GAAG,IAAIqB,mBAAmB,EAAE,GAAG,CAAC,CAAE,EAAE,EAAE,CAAC,CAAA;EACnH,MAAMC,cAAc,gBAAG1B,KAAA,CAAA2B,aAAA,CAACvC,QAAQ,EAAAwC,QAAA,CAAA,EAAA,EAAKV,YAAY,EAAA;AAAEP,IAAAA,OAAO,EAAEA,OAAQ;AAACD,IAAAA,SAAS,EAAEA,SAAU;AAACP,IAAAA,GAAG,EAAEa,QAAAA;GAC7FI,CAAAA,EAAAA,KAAK,EACLR,QACO,CAAC,CAAA;AACX,EAAA,OAAOP,UAAU,GAAGqB,cAAc,gBAAG1B,KAAA,CAAA2B,aAAA,CAAA3B,KAAA,CAAA6B,QAAA,QAClCV,WAAW,eACZnB,KAAA,CAAA2B,aAAA,CAACG,IAAI,EAAA;AAACC,IAAAA,IAAI,EAAER,QAAAA;GACTG,EAAAA,cACG,CACN,CAAC,CAAA;AACL,CAAC;;;;"}

package/lib/SplitColumnsContainer.mjs

@@ -0,0 +1,43 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import React from 'react';
+import { media, getMargin } from '@startlibs/utils';
+import styled, { css } from 'styled-components';
+
+var _templateObject, _templateObject2;
+const getMarginFromFieldChild = props => {
+  if (!props.last) return 0;
+  const fields = React.Children.toArray(props.children).filter(c => c.type.displayName === "Field" || c.type.displayName === "EnhancedInput");
+  if (!fields.length) return 0;
+  const lastField = fields.slice(-1)[0];
+  return '-' + getMargin(props.theme.Field.margins)(lastField.props);
+};
+const splitColumnMargins = {
+  small: 0.5,
+  'default': 1,
+  big: 2
+};
+const SplitColumnsContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SplitColumnsContainer",
+  componentId: "sc-1h4sw88-0"
+})(["margin-bottom:", "rem;", " ", ""], getMarginFromFieldChild, props => css(["", ""], media.min(props.viewportMinWidth || 0)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      flex-wrap: nowrap;\n      margin-left: -", "rem;\n      margin-right: -", "rem;\n      margin-top: -", "rem;\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n        margin-left: ", "rem;\n        margin-right: ", "rem;\n        margin-top: ", "rem;\n      }\n    "])), props => getMargin(splitColumnMargins)(props) / 2, props => getMargin(splitColumnMargins)(props) / 2, props => getMargin(splitColumnMargins)(props), props => getMargin(splitColumnMargins)(props) / 2, props => getMargin(splitColumnMargins)(props) / 2, props => getMargin(splitColumnMargins)(props))), props => props.twoColumnsBelowVW && css(["", ""], media.max(props.twoColumnsBelowVW)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      flex-wrap: wrap;\n      > * {\n        flex-basis: 47%;\n      }\n    "])))));
+const fixDoubledLastMarginBottom = children => {
+  let last = React.Children.count(children) - 1;
+  function processChild(child, i) {
+    if (i === last && child && child.type && child.type.displayName === SplitColumnsContainer.displayName) {
+      return /*#__PURE__*/React.cloneElement(child, {
+        last: true
+      });
+    }
+    return child;
+  }
+  if (!Array.isArray(children) || children.length === 0) {
+    return processChild(children, 0);
+  }
+  while ((!children[last] || children[last] && children[last].type && children[last].type.displayName === "Errors") && last > 0) {
+    last--;
+  }
+  return React.Children.map(children, processChild);
+};
+
+export { SplitColumnsContainer, fixDoubledLastMarginBottom };
+//# sourceMappingURL=SplitColumnsContainer.mjs.map

package/lib/SplitColumnsContainer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitColumnsContainer.mjs","sources":["../src/SplitColumnsContainer.jsx"],"sourcesContent":["import React from 'react'\n\nimport {getMargin, media} from '@startlibs/utils'\nimport styled, {css} from 'styled-components'\n\nconst getMarginFromFieldChild = (props) => {\n  if (!props.last) return 0;\n  const fields = React.Children.toArray(props.children).filter(c => c.type.displayName === \"Field\" || c.type.displayName === \"EnhancedInput\")\n  if (!fields.length) return 0\n  const lastField = fields.slice(-1)[0]\n  return '-' + getMargin(props.theme.Field.margins)(lastField.props)\n}\n\n\nconst splitColumnMargins = {small:0.5,'default':1, big:2}\n\nexport const SplitColumnsContainer = styled.div`\n\n  margin-bottom: ${getMarginFromFieldChild}rem;\n  \n  ${props => css`\n    ${media.min(props.viewportMinWidth || 0)`\n      display: flex;\n      flex-wrap: nowrap;\n      margin-left: -${props=>getMargin(splitColumnMargins)(props)/2}rem;\n      margin-right: -${props=>getMargin(splitColumnMargins)(props)/2}rem;\n      margin-top: -${props=>getMargin(splitColumnMargins)(props)}rem;\n      > * {\n        flex-basis: 0;\n        flex-grow: 1;\n        margin-left: ${props=>getMargin(splitColumnMargins)(props)/2}rem;\n        margin-right: ${props=>getMargin(splitColumnMargins)(props)/2}rem;\n        margin-top: ${props=>getMargin(splitColumnMargins)(props)}rem;\n      }\n    `}\n  `}\n  ${props => props.twoColumnsBelowVW && css`\n    ${media.max(props.twoColumnsBelowVW)`\n      flex-wrap: wrap;\n      > * {\n        flex-basis: 47%;\n      }\n    `}\n  `}\n`\n\nexport const fixDoubledLastMarginBottom = (children) => {\n  let last = React.Children.count(children)-1\n\n  function processChild(child, i) {\n    if (i === last && child && child.type && child.type.displayName === SplitColumnsContainer.displayName) {\n      return React.cloneElement(child, {last: true})\n    }\n    return child\n  }\n  if (!Array.isArray(children) || children.length===0) {\n    return processChild(children,0)\n  }\n  while ((!children[last] || (children[last] && children[last].type && children[last].type.displayName === \"Errors\")) && last > 0) {\n    last--\n  }\n  return React.Children.map(children,processChild)\n}\n"],"names":["getMarginFromFieldChild","props","last","fields","React","Children","toArray","children","filter","c","type","displayName","length","lastField","slice","getMargin","theme","Field","margins","splitColumnMargins","small","big","SplitColumnsContainer","styled","div","withConfig","componentId","css","media","min","viewportMinWidth","_templateObject","_taggedTemplateLiteral","twoColumnsBelowVW","max","_templateObject2","fixDoubledLastMarginBottom","count","processChild","child","i","cloneElement","Array","isArray","map"],"mappings":"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"}

package/lib/SwitchDiv.mjs

@@ -0,0 +1,61 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React, { useRef } from 'react';
+import styled from 'styled-components';
+import { twoWayAnimation, oneWayAnimation, callIfFunction } from '@startlibs/utils';
+import { willUseFlipSwitch } from './Flip.mjs';
+import { useLazyConstant } from '@startlibs/core';
+
+const _excluded = ["children", "className", "enterAnimation", "effect", "leaveAnimation", "skipChromeFix", "on"];
+const BlockContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "SwitchDiv__BlockContainer",
+  componentId: "sc-htfwpl-0"
+})(["position:relative;"]);
+const [fadeIn, relativeFadeout] = twoWayAnimation('opacity: 0;', 'opacity: 0;', 'opacity: 1;');
+const absoluteOnLeave = oneWayAnimation('position: absolute;', 'position: absolute;');
+const fadeOut = [absoluteOnLeave, relativeFadeout];
+const SwitchDiv = /*#__PURE__*/styled(_ref => {
+  let {
+      children,
+      className,
+      enterAnimation = fadeIn,
+      effect,
+      leaveAnimation = fadeOut,
+      skipChromeFix,
+      on
+    } = _ref;
+    _objectWithoutProperties(_ref, _excluded);
+  const switchAnimation = useLazyConstant(willUseFlipSwitch);
+  return /*#__PURE__*/React.createElement(SwitchContainer, {
+    enterAnimation: enterAnimation,
+    effect: effect,
+    className: className,
+    leaveAnimation: leaveAnimation,
+    key: on + "",
+    switchAnimation: switchAnimation,
+    children: children
+  });
+}).withConfig({
+  displayName: "SwitchDiv",
+  componentId: "sc-htfwpl-1"
+})([""]);
+const SwitchContainer = _ref2 => {
+  let {
+    children,
+    switchAnimation,
+    className,
+    effect,
+    enterAnimation,
+    leaveAnimation
+  } = _ref2;
+  const contentRef = useRef();
+  switchAnimation(contentRef, enterAnimation, leaveAnimation, {
+    effect
+  });
+  return /*#__PURE__*/React.createElement(BlockContainer, {
+    ref: contentRef,
+    className: className
+  }, callIfFunction(children));
+};
+
+export { SwitchDiv };
+//# sourceMappingURL=SwitchDiv.mjs.map