@startlibs/components 1.0.3 → 1.1.0

package/lib/BasicBulletList.mjs

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const BasicBulletList = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "BasicBulletList",
+  componentId: "sc-1u3hhup-0"
+})(["margin-bottom:0;font-size:13px;li{margin-top:4px;padding-left:1rem;position:relative;:before{content:'\u2022';font-size:17px;line-height:0;position:absolute;left:0;top:7px;}}"]);
+
+export { BasicBulletList };
+//# sourceMappingURL=BasicBulletList.mjs.map

package/lib/BasicBulletList.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicBulletList.mjs","sources":["../src/BasicBulletList.jsx"],"sourcesContent":["import styled from 'styled-components'\n\nexport const BasicBulletList = styled.ul`\n  margin-bottom: 0;\n  font-size: 13px;\n\n  li {\n    margin-top: 4px;\n    padding-left: 1rem;\n    position: relative;\n\n    :before {\n      content: '•';\n      font-size: 17px;\n      line-height: 0;\n      position: absolute;\n      left: 0;\n      top: 7px;\n    }\n  }\n`"],"names":["BasicBulletList","styled","ul","withConfig","displayName","componentId"],"mappings":";;MAEaA,eAAe,gBAAGC,MAAM,CAACC,EAAE,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,iBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAkBvC,CAAA,CAAA,CAAA,gLAAA,CAAA;;;;"}

package/lib/Button.mjs

@@ -0,0 +1,95 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import React from 'react';
+import { styledExtend, getColor, media, customTheme } from '@startlibs/utils';
+import { darken, transparentize } from 'polished';
+import styled, { css } from 'styled-components';
+import { Icon } from './Icon.mjs';
+import { Link } from './Link.mjs';
+import { Loading } from './Loading.mjs';
+
+const _excluded = ["type", "locked", "color", "alpha", "success", "alert", "warning", "highlight", "light", "hover", "white", "icon", "onlyIcon", "small", "withDropdown", "onlyDropdown", "outline", "dashed", "textOnly", "isLoading", "isLoadingIcon", "dark", "innerAs", "className", "children", "rounded", "tabIndex", "focused", "noFocus", "colorSet", "concealed", "concealedModule", "buttonRef"];
+var _templateObject, _templateObject2, _templateObject3;
+const DropdownIcon = styledExtend(Icon)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 51%;\n  transform: translateY(-50%);\n  right: 1rem;\n  font-size: 12px;\n"])));
+const LockIcon = /*#__PURE__*/styled(Icon).withConfig({
+  displayName: "Button__LockIcon",
+  componentId: "sc-qe54pl-0"
+})(["position:absolute;bottom:10px;right:.75rem;left:auto;top:auto;font-size:18px;"]);
+const focus = /*#__PURE__*/css([":after{content:'';pointer-events:none;position:absolute;top:-3px;right:-3px;left:-3px;bottom:-3px;border-radius:", ";border:2px solid rgba(0,0,0,0.15);}"], props => props.rounded ? '100px' : '11px');
+const Button = /*#__PURE__*/styled(/*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      type = "button",
+      locked,
+      color,
+      alpha,
+      success,
+      alert,
+      warning,
+      highlight,
+      light,
+      hover,
+      white,
+      icon,
+      onlyIcon,
+      small,
+      withDropdown,
+      onlyDropdown,
+      outline,
+      dashed,
+      textOnly,
+      isLoading,
+      isLoadingIcon,
+      dark,
+      innerAs: Wrapper = 'button',
+      className,
+      children,
+      rounded,
+      tabIndex = 1,
+      focused,
+      noFocus,
+      colorSet,
+      concealed,
+      concealedModule,
+      buttonRef
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Wrapper, _extends({
+    ref: ref || buttonRef,
+    tabIndex: tabIndex,
+    className: className + ' styled-button' + (color || success || alert || warning || highlight || dark || hover || outline || dashed || textOnly || white || alpha || props.lightAlert || props.lightWarning ? ' styled-button-colored' : ''),
+    type: Wrapper === 'button' ? type : ''
+  }, props), icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: icon,
+    "aria-hidden": "true"
+  }), isLoadingIcon && /*#__PURE__*/React.createElement(Loading, {
+    white: !light && !outline && !dashed && !white,
+    size: small ? '10' : '18',
+    borderWidth: small ? '2' : '3'
+  }), (withDropdown || onlyDropdown) && !locked && /*#__PURE__*/React.createElement(DropdownIcon, {
+    icon: "arrow-down",
+    "aria-hidden": "true"
+  }), locked && /*#__PURE__*/React.createElement(LockIcon, {
+    icon: "lock",
+    "aria-hidden": "true"
+  }), children, isLoading && /*#__PURE__*/React.createElement(Loading, {
+    white: !light && !outline && !dashed && !white,
+    absolute: true,
+    size: small && '16',
+    borderWidth: small && '3'
+  }));
+})).withConfig({
+  displayName: "Button",
+  componentId: "sc-qe54pl-1"
+})(["vertical-align:top;border:0;font-size:13px;border-radius:", ";background:", ";color:white;min-width:8rem;font-weight:600;display:inline-block;text-align:center;padding:10px 1.25rem;outline:none;cursor:pointer;position:relative;text-decoration:none;user-select:none;flex-shrink:0;:hover{background:", ";}:active{background:", ";}", " ", " & + &{margin-left:1rem;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], props => props.rounded ? '100px' : '8px', getColor, props => darken(0.05, getColor(props, true)), props => darken(0.08, getColor(props, true)), props => props.nowrap && "\n    white-space: nowrap;\n  ", props => !props.noFocus && !props.isLoading && css([":focus{", "}", ""], focus, props => props.focused && focus), props => props.hasErrors && css([":after{content:'';pointer-events:none;position:absolute;top:-4px;right:-4px;left:-4px;bottom:-4px;border-radius:", ";border:3px solid ", ";}"], props => props.rounded ? '100px' : '11px', props => transparentize(0.7, getColor("alert")(props))), props => props.icon && css(["display:inline-flex;align-items:center;justify-content:center;min-width:3rem;min-height:3rem;", "{font-size:23px;margin-left:-4px;margin-right:8px;pointer-events:none;line-height:0;}"], Icon), props => props.onlyIcon && css(["padding:0;", "{margin:0;}"], Icon), props => props.small && css(["font-size:13px;padding:3px 1rem;min-width:2rem;min-height:2rem;font-weight:550;", " ", ""], props.icon && css(["", "{font-size:18px;margin-left:-5px;margin-right:5px;line-height:0.9;}"], Icon), props.onlyIcon && css(["padding:0;", "{margin:0;}"], Icon)), props => props.big && css(["font-size:14px;padding:13px 1.75rem;min-height:42px;"]), props => props.withDropdown && css(["padding-right:2.25rem;text-align:left;"]), props => props.onlyDropdown && css(["", "{right:50%;transform:translate(50%,-50%);}"], DropdownIcon), props => props.light && css(["background:", ";color:", ";:hover{background:", ";}:active{background:", ";}"], getColor('bluishGray'), getColor('gray90'), props => darken(0.05, getColor('bluishGray')(props)), props => darken(0.08, getColor('bluishGray')(props))), props => props.lightAlert && css(["background:", ";color:", ";:hover{background:", ";}:active{background:", ";}"], props => transparentize(0.86, getColor("alert")(props)), getColor('alert'), props => transparentize(0.83, getColor("alert")(props)), props => transparentize(0.80, getColor("alert")(props))), props => props.lightWarning && css(["background:", ";color:", ";:hover{background:", ";}:active{background:", ";}"], props => transparentize(0.84, darken(0.05, getColor('warning')(props))), props => darken(0.05, getColor('warning')(props)), props => transparentize(0.78, darken(0.05, getColor('warning')(props))), props => transparentize(0.76, darken(0.05, getColor('warning')(props)))), props => (props.outline || props.dashed || props.textOnly) && css(["color:", ";background:none;", ",", "{color:", ";}:before{content:'';border:1px ", " ", ";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:", ";pointer-events:none;}:hover{background-color:rgba(0,0,0,0.05);}:active{background-color:rgba(0,0,0,0.08);}:focus{:before{box-shadow:0 0 0 2px rgba(0,0,0,0.1);", "}:after{content:none;}}"], props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.6)', Icon, DropdownIcon, props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.5)', props.outline ? 'solid' : props.dashed ? 'dashed' : '', props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.35)', props.rounded ? '100px' : '8px', props.textOnly && 'content: none;'), props => props.alpha && css(["background:rgba(0,0,0,0.45);:hover{background:rgba(0,0,0,0.50);}:active{background:rgba(0,0,0,0.55);}"]), props => props.white && !props.outline && !props.dashed && css(["color:", ";background:#FFFFFF;:hover{background:", ";}:active{background:", ";}"], getColor('main'), darken(0.05, '#FFFFFF'), darken(0.08, '#FFFFFF')), props => props.isLoading && css(["color:transparent !important;pointer-events:none;", "{visibility:hidden;}"], Icon), props => props.isLoadingIcon && css(["pointer-events:none;", "{visibility:hidden;}", "{left:10px;position:absolute;}"], Icon, Loading), media.mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", "\n    ", "\n    ", "\n  "])), props => !props.small && !props.onlyIcon && css(["padding:13px 1.5rem;font-size:14px;"]), props => !props.small && props.onlyIcon && css(["min-width:3.5rem;min-height:3.5rem;"]), props => props.withDropdown && css(["padding-right:2.5rem;", "{right:14px;}"], DropdownIcon)), media.max(359)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    ", "\n  "])), props => !props.small && !props.onlyIcon && !props.onlyDropdown && css(["min-width:0;"])), props => props.fullwidth && "\n    width: 100%;\n  ", customTheme("Button"));
+Button.a = props => /*#__PURE__*/React.createElement(Button, _extends({}, props, {
+  className: props.className,
+  innerAs: "a"
+}));
+Button.Link = props => /*#__PURE__*/React.createElement(Button, _extends({}, props, {
+  className: props.className,
+  innerAs: Link
+}));
+
+export { Button, DropdownIcon, Button as default };
+//# sourceMappingURL=Button.mjs.map

package/lib/Button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.mjs","sources":["../src/Button.jsx"],"sourcesContent":["import React from 'react'\n\nimport {customTheme, getColor, media, styledExtend} from '@startlibs/utils'\nimport {darken, transparentize} from 'polished'\nimport styled, {css} from 'styled-components'\n\nimport {Icon} from './Icon'\nimport {Link} from './Link'\nimport {Loading} from './Loading'\n\nexport const DropdownIcon = styledExtend(Icon)`\n  position: absolute;\n  top: 51%;\n  transform: translateY(-50%);\n  right: 1rem;\n  font-size: 12px;\n`\nconst LockIcon = styled(Icon)`\n  position:absolute;\n  bottom: 10px;\n  right: .75rem;\n  left: auto;\n  top: auto;\n  font-size: 18px;\n`\n\nconst focus = css`\n:after{\n  content: '';\n  pointer-events: none;\n  position: absolute;\n  top: -3px;\n  right: -3px;\n  left: -3px;\n  bottom: -3px;\n  border-radius: ${props => props.rounded ? '100px' : '11px'};\n  border: 2px solid rgba(0, 0, 0, 0.15);\n}\n`\n\nexport const Button = styled(React.forwardRef(({\n                                type = \"button\", locked, color, alpha, success, alert, warning, highlight, light, hover, white, icon, onlyIcon, small, withDropdown, onlyDropdown, outline, dashed, textOnly, isLoading, isLoadingIcon, dark,\n                                innerAs: Wrapper = 'button', className, children, rounded, tabIndex = 1, focused, noFocus,\n                                colorSet, concealed, concealedModule, buttonRef, ...props\n                              },ref) =>\n  <Wrapper ref={ref || buttonRef} tabIndex={tabIndex} className={className + ' styled-button' + ((color || success || alert || warning || highlight || dark || hover || outline || dashed || textOnly || white || alpha || props.lightAlert || props.lightWarning) ? ' styled-button-colored' : '')} type={Wrapper === 'button' ? type : ''} {...props}>\n    {icon && <Icon icon={icon} aria-hidden=\"true\"/>}\n    {isLoadingIcon && <Loading white={!light && !outline && !dashed && !white} size={small ? '10' : '18'} borderWidth={small ? '2' : '3'}/>}\n    {(withDropdown || onlyDropdown) && !locked && <DropdownIcon icon='arrow-down' aria-hidden=\"true\"/>}\n    {locked && <LockIcon icon=\"lock\" aria-hidden=\"true\"/>}\n    {children}\n    {isLoading && <Loading white={!light && !outline && !dashed && !white} absolute size={small && '16'} borderWidth={small && '3'} />}\n  </Wrapper>))`\n  vertical-align: top;\n  border: 0;\n  font-size: 13px;\n  border-radius: ${props => props.rounded ? '100px' : '8px'};\n  background: ${getColor};\n  color: white;\n  min-width: 8rem;\n  font-weight: 600;\n  display: inline-block;\n  // line-height: 16px;\n  text-align: center;\n  padding: 10px 1.25rem;\n  outline: none;\n  cursor: pointer;\n  position: relative;\n  text-decoration: none;\n  user-select: none;\n  flex-shrink: 0;\n  :hover {\n    background: ${props => darken(0.05, getColor(props, true))};\n  }\n  :active {\n    background: ${props => darken(0.08, getColor(props, true))};\n  }\n  ${props => props.nowrap && `\n    white-space: nowrap;\n  `}\n  ${props => !props.noFocus && !props.isLoading && css`\n    :focus {\n      ${focus}\n    }\n    ${props => props.focused && focus}\n  `}\n  & + & {\n    margin-left: 1rem;\n  }\n  \n  ${props => props.hasErrors && css`\n    :after {\n      content: '';\n      pointer-events: none;\n      position: absolute;\n      top: -4px;\n      right: -4px;\n      left: -4px;\n      bottom: -4px;\n      border-radius: ${props => props.rounded ? '100px' : '11px'};\n      border: 3px solid ${props => transparentize(0.7, getColor(\"alert\")(props))};\n    }\n  `}\n  ${props => props.icon && css`\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 3rem;\n    min-height: 3rem;\n    ${Icon} {\n      font-size: 23px;\n      margin-left: -4px;\n      margin-right: 8px;\n      pointer-events: none;\n      line-height: 0;\n    }\n  `}\n  ${props => props.onlyIcon && css`\n    padding: 0;\n    ${Icon} {\n      margin: 0;\n    }\n  `}\n  ${props => props.small && css`\n    font-size: 13px;\n    padding: 3px 1rem;\n    min-width: 2rem;\n    min-height: 2rem;\n    font-weight: 550;\n    ${props.icon && css`\n      ${Icon} {\n        font-size: 18px;\n        margin-left: -5px;\n        margin-right: 5px;\n        line-height: 0.9;\n      }\n    `}\n    ${props.onlyIcon && css`\n      padding: 0;\n      ${Icon} {\n        margin: 0;\n      }\n    `}\n  `}\n  ${props => props.big && css`\n    font-size: 14px;\n    padding: 13px 1.75rem;\n    min-height: 42px;\n  `}\n  ${props => props.withDropdown && css`\n    padding-right: 2.25rem;\n    text-align: left;\n  `}\n  ${props => props.onlyDropdown && css`\n    ${DropdownIcon} {\n      right: 50%;\n      transform: translate(50%,-50%);\n    }\n  `}\n  ${props => props.light && css`\n    background: ${getColor('bluishGray')};\n    color: ${getColor('gray90')};\n    :hover {\n      background: ${props => darken(0.05, getColor('bluishGray')(props))};\n    }\n    :active {\n      background: ${props => darken(0.08, getColor('bluishGray')(props))};\n    }\n  `}\n  ${props => props.lightAlert && css`\n    background: ${props => transparentize(0.86, getColor(\"alert\")(props))};\n    color: ${getColor('alert')};\n    :hover {\n      background: ${props => transparentize(0.83, getColor(\"alert\")(props))};\n    }\n    :active {\n      background: ${props => transparentize(0.80, getColor(\"alert\")(props))};\n    }\n  `}\n  ${props => props.lightWarning && css`\n    background: ${props => transparentize(0.84, darken(0.05, getColor('warning')(props)))};\n    color: ${props => darken(0.05, getColor('warning')(props))};\n    :hover {\n      background: ${props => transparentize(0.78, darken(0.05, getColor('warning')(props)))};\n    }\n    :active {\n      background: ${props => transparentize(0.76, darken(0.05, getColor('warning')(props)))};\n    }\n  `}\n  ${props => (props.outline || props.dashed || props.textOnly) && css`\n    color: ${props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.6)'};\n    background: none;\n    ${Icon}, ${DropdownIcon} {\n      color: ${props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.5)'};\n    }\n    :before {\n      content: '';\n      border: 1px ${props.outline ? 'solid' : props.dashed ? 'dashed' : ''} ${props.white ? 'white' : props.highlight ? getColor('main') : 'rgba(0,0,0,0.35)'};\n      position: absolute;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      border-radius: ${props.rounded ? '100px' : '8px'};\n      pointer-events: none;\n    }\n    :hover {\n        background-color: rgba(0,0,0,0.05);\n    }\n    :active {\n        background-color: rgba(0,0,0,0.08);\n    }\n    :focus {\n      :before {\n        box-shadow: 0 0 0 2px rgba(0,0,0,0.1);\n        ${props.textOnly && 'content: none;'}\n      }\n      :after {\n        content: none;\n      }\n    }\n  `}\n  ${props => props.alpha && css`\n    background: rgba(0,0,0,0.45);\n    :hover {\n      background: rgba(0,0,0,0.50);\n    }\n    :active {\n      background: rgba(0,0,0,0.55);\n    }\n  `}\n  ${props => props.white && !props.outline && !props.dashed && css`\n    color: ${getColor('main')};\n    background: #FFFFFF;\n    :hover {\n      background: ${darken(0.05, '#FFFFFF')};\n    }\n    :active {\n      background: ${darken(0.08, '#FFFFFF')};\n    }\n  `}\n  ${props => props.isLoading && css`\n    color: transparent !important;\n    pointer-events: none;\n    ${Icon} {\n      visibility: hidden;\n    }\n  `}\n  ${props => props.isLoadingIcon && css`\n    pointer-events: none;\n    ${Icon} {\n      visibility: hidden;\n    }\n    ${Loading} {\n      left: 10px;\n      position: absolute;\n    }\n  `}\n  ${media.mobile`\n    ${props => !props.small && !props.onlyIcon && css`\n      padding: 13px 1.5rem;\n      font-size: 14px;\n    `}\n    ${props => !props.small && props.onlyIcon && css`\n      min-width: 3.5rem;\n      min-height: 3.5rem;\n    `}\n    ${props => props.withDropdown && css`\n      padding-right: 2.5rem;\n      ${DropdownIcon} {\n        right: 14px;\n      }\n    `}\n  `}\n  ${media.max(359)`\n    ${props => !props.small && !props.onlyIcon && !props.onlyDropdown && css`\n      min-width: 0;\n    `}\n  `}\n  ${props => props.fullwidth && `\n    width: 100%;\n  `}\n  ${customTheme(\"Button\")}\n`\n\nButton.a = (props) => <Button {...props} className={props.className} innerAs=\"a\"/>\nButton.Link = (props) => <Button {...props} className={props.className} innerAs={Link}/>\nexport default Button\n"],"names":["DropdownIcon","styledExtend","Icon","_templateObject","_taggedTemplateLiteral","LockIcon","styled","withConfig","displayName","componentId","focus","css","props","rounded","Button","React","forwardRef","_ref","ref","type","locked","color","alpha","success","alert","warning","highlight","light","hover","white","icon","onlyIcon","small","withDropdown","onlyDropdown","outline","dashed","textOnly","isLoading","isLoadingIcon","dark","innerAs","Wrapper","className","children","tabIndex","focused","noFocus","colorSet","concealed","concealedModule","buttonRef","_objectWithoutProperties","_excluded","createElement","_extends","lightAlert","lightWarning","Loading","size","borderWidth","absolute","getColor","darken","nowrap","hasErrors","transparentize","big","media","mobile","_templateObject2","max","_templateObject3","fullwidth","customTheme","a","Link"],"mappings":"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"}

package/lib/ContextMenu.mjs

@@ -0,0 +1,452 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _extends from '@babel/runtime/helpers/extends';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import React, { useRef, useEffect, forwardRef, useState, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+import styled, { css, isStyledComponent } from 'styled-components';
+import { useEnsureRef, useToggle, useRefState, willUseLayers, willUseSharedState, Fill } from '@startlibs/core';
+import { transparentize, darken } from 'polished';
+import { isMemo } from 'react-is';
+import { oneWayAnimation, animationTiming, media, ifProp, getColor, customTheme, styledExtend, isMobile, callIfFunction, createPressAndMoveEvent, stopPropagation } from '@startlibs/utils';
+import mitt from 'mitt';
+import { Button } from './Button.mjs';
+import { useFlipEnter, useFlipLeave } from './Flip.mjs';
+import { Icon } from './Icon.mjs';
+import { Link } from './Link.mjs';
+import { getDialogLayersSize } from './containers/DialogContainer.mjs';
+import { usePositioning } from './containers/usePositioning.mjs';
+
+const _excluded = ["label", "layerIndex", "href", "linkTo", "prefixWith", "subMenu", "icon", "children"],
+  _excluded2 = ["emitter", "index", "menuSlot", "keepOpen", "hover", "layerIndex", "hoverCursor", "passTouchThrough", "children", "setCursorOnHover", "onClick", "prefixWith", "linkTo", "icon", "label", "descText", "helpText", "target", "href"],
+  _excluded3 = ["children", "sub", "hoverIndex", "autoHover", "menuSlot", "withoutIcons", "onClose", "onHover", "fill", "onClick"],
+  _excluded4 = ["slot", "sub", "withoutIcons", "children"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+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 fadeIn = oneWayAnimation('opacity: 0', 'opacity: 1');
+const slideDown = oneWayAnimation('transform: translateY(-10px); pointer-events: none', 'transform: translateY(0); pointer-events: none');
+const slideUpOnTop = oneWayAnimation('transform: translateY(10px); pointer-events: none', 'transform: translateY(0); pointer-events: none');
+const slideRight = oneWayAnimation('transform: translateX(-10px)', 'transform: none;');
+const slideLeftOnLeft = oneWayAnimation('transform: translateX(10px); pointer-events: none', 'transform: translateX(0px); pointer-events: none');
+animationTiming('0.2s ease-out');
+const areComponentsEqual = (a, b) => a === b;
+const ListItem = /*#__PURE__*/styled.li.withConfig({
+  displayName: "ContextMenu__ListItem",
+  componentId: "sc-13y1vvt-0"
+})(["position:relative;font-size:13px;& > *{padding:11px 1.5rem 11px 3.5rem;display:block;}", " ", ",.icon{font-size:", "px;position:absolute;padding-left:0.25rem;left:0;top:50%;transform:translateY(-50%);width:3.5rem;text-align:center;}", " & > a{color:inherit;font-weight:inherit;text-decoration:inherit;}& > a,& > label{cursor:pointer;}", " ", " input[type=\"radio\"]{display:none;}", " ", " ", " ", ""], props => props.hasSubmenu && "\n    & > * {\n      padding-right: 3rem;\n    }\n  ", Icon, props => props.iconSize || 23, media.mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: 15px;\n    & > * {\n      padding-top: 15px;\n      padding-bottom: 15px;\n    }\n    ", ", .icon {\n      font-size: ", "px;\n    }\n  "])), Icon, props => (props.iconSize || 23) + 2), ifProp('hover', css(["& > a,& > label{background:", ";color:", ";}"], props => transparentize(0.88, getColor("main")(props)), props => darken(0.03, getColor("main")(props)))), ifProp('highlight', css(["color:", ";"], getColor('main'))), ifProp('noActions', "\n    max-width: 17rem;\n    color: rgba(0,0,0,0.4);\n    pointer-events: none;\n    text-align: center;\n    white-space: normal;\n  "), ifProp('withButton', css(["padding:0.25rem 1rem;", "{width:100%;color:white;font-weight:500;padding:10px 1.25rem;", "}"], Button, media.mobile(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        padding: 13px 1.25rem;\n      "]))))), ifProp('smallPaddingRight', css(["& > *{padding-right:1.5rem;}"])), customTheme('ListItem'));
+const ListItemDescText = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ContextMenu__ListItemDescText",
+  componentId: "sc-13y1vvt-1"
+})(["font-size:11px;margin-top:0.25rem;opacity:0.6;", ""], media.mobile(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    font-size: 12px;\n  "]))));
+const ListItemHelpText = /*#__PURE__*/styled.span.withConfig({
+  displayName: "ContextMenu__ListItemHelpText",
+  componentId: "sc-13y1vvt-2"
+})(["opacity:0.5;"]);
+const ListMenu = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "ContextMenu__ListMenu",
+  componentId: "sc-13y1vvt-3"
+})(["padding:0.5rem 0;cursor:default;overflowY:auto;text-align:left;color:inherit;user-select:none;"]);
+const ContextListMenu = /*#__PURE__*/styled(ListMenu).withConfig({
+  displayName: "ContextMenu__ContextListMenu",
+  componentId: "sc-13y1vvt-4"
+})(["position:absolute;z-index:999;background-color:white;backdrop-filter:blur(20px);background-color:rgb(255 255 255 / 80%);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:12px;margin-bottom:0.5rem;overflow:auto;max-height:100vh;max-height:100dvh;max-width:100vw;max-width:100dvw;", " ", " ", ""], props => props.withoutIcons && "\n    ".concat(ListItem, " > * {\n      padding-left: 1.5rem;\n    }\n  "), ifProp('sub', css(["", " ", ""], props => props.fullHeight ? '' : props.atTop ? 'margin-top: -0.5rem;' : 'margin-top: 0.5rem;', ifProp('atRight', "\n      margin-left: -4px;\n      ", "\n      margin-left: 4px;\n    "))), customTheme('ContextMenu'));
+const StickyContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "ContextMenu__StickyContainer",
+  componentId: "sc-13y1vvt-5"
+})(["position:sticky;background:white;", " ", ""], props => props.atBottom && "\n    bottom: -0.5rem;\n    padding-bottom: 0.5rem;\n    margin-bottom: -0.5rem;\n  ", props => props.atTop && "\n    top: -0.5rem;\n    padding-top: 0.5rem;\n    margin-top: -0.5rem;\n  ");
+const ListSeparator = /*#__PURE__*/styled.li.withConfig({
+  displayName: "ContextMenu__ListSeparator",
+  componentId: "sc-13y1vvt-6"
+})(["border-bottom:1px solid rgba(0,0,0,0.1);margin-top:0.5rem;margin-bottom:0.5rem;cursor:default;height:0;", ""], ifProp('lighten', css(["border-color:rgba(255,255,255,0.15);"])));
+const ListHeading = /*#__PURE__*/styled.li.withConfig({
+  displayName: "ContextMenu__ListHeading",
+  componentId: "sc-13y1vvt-7"
+})(["display:flex;align-items:center;padding:.5rem 1rem;color:rgba(0,0,0,0.4);font-size:12px;text-transform:uppercase;:after{content:'';flex-grow:1;margin-left:0.75rem;height:1px;background:rgba(0,0,0,0.15);}"]);
+const SubmenuArrowIcon = styledExtend(Icon)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  font-size: 13px;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 3rem;\n  text-align: center;\n"])));
+class SimpleLi extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.scrollToVisibility = () => {
+      const el = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this);
+      const list = el.parentNode;
+      if (el.offsetTop < list.scrollTop) {
+        list.scrollTop = el.offsetTop;
+      } else if (el.offsetTop + el.offsetHeight > list.scrollTop + list.offsetHeight) {
+        list.scrollTop = el.offsetTop + el.offsetHeight - list.offsetHeight;
+      }
+    };
+    this.confirm = () => {
+      if (this.props.hover) {
+        const node = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this);
+        node.click();
+      }
+    };
+    this.onMouseEnter = () => this.props.setCursorOnHover && this.props.setCursorOnHover(this.props.index);
+    this.onMouseOut = () => this.props.setCursorOnHover && this.props.setCursorOnHover(-1);
+    this.touchEnd = e => {
+      if (this.props.children) {
+        e.preventDefault();
+        if (!this.props.hover) this.onMouseEnter();
+      }
+    };
+    this.onClick = e => {
+      this.props.onClick && this.props.onClick();
+    };
+  }
+  componentWillUnmount() {
+    this.props.emitter.off('confirm', this.confirm);
+  }
+  componentDidUpdate() {
+    if (this.props.hover) {
+      this.scrollToVisibility();
+    }
+  }
+  componentDidMount() {
+    this.props.emitter.on('confirm', this.confirm);
+    if (this.props.selected && this.props.setCursorOnHover) {
+      this.props.setCursorOnHover(this.props.index);
+      const el = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this);
+      const list = el.parentNode;
+      list.scrollTop = el.offsetTop + el.offsetHeight / 2 - list.offsetHeight / 2;
+    }
+  }
+  render() {
+    const _this$props = this.props,
+      {
+        label,
+        layerIndex,
+        href,
+        linkTo,
+        prefixWith,
+        subMenu,
+        icon,
+        children
+      } = _this$props,
+      rest = _objectWithoutProperties(_this$props, _excluded);
+    const Tag = linkTo ? Link : 'a';
+    return /*#__PURE__*/React.createElement(ListItem, _extends({}, rest, {
+      onClick: this.onClick,
+      onMouseLeave: this.onMouseOut,
+      onMouseEnter: this.onMouseEnter,
+      onTouchEnd: this.touchEnd
+    }), /*#__PURE__*/React.createElement(Tag, {
+      href: href,
+      to: linkTo
+    }, prefixWith, icon && /*#__PURE__*/React.createElement(Icon, {
+      icon: icon
+    }), label));
+  }
+}
+SimpleLi.isKeyboardNavigable = true;
+SimpleLi.defaultProps = {
+  emitter: mitt()
+};
+const Li = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      emitter = mitt(),
+      index,
+      menuSlot,
+      keepOpen,
+      hover,
+      layerIndex,
+      hoverCursor,
+      passTouchThrough,
+      children,
+      setCursorOnHover,
+      onClick,
+      prefixWith,
+      linkTo,
+      icon,
+      label,
+      descText,
+      helpText,
+      target,
+      href
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded2);
+  const nodeRef = useEnsureRef(ref);
+  const tagRef = useRef();
+  const subMenu = useToggle();
+  const subPrevented = useRefState(false);
+  const onOpenSub = () => {
+    subPrevented.set(false);
+    if (hover && children) {
+      subMenu.open();
+    }
+  };
+  const onPreventSub = subIndex => {
+    if (index !== subIndex) subMenu.close();
+    subPrevented.set(true);
+  };
+  const confirm = () => {
+    if (hover) {
+      nodeRef.current.click();
+    }
+  };
+  useEffect(() => {
+    if (hover) {
+      try {
+        const el = nodeRef.current;
+        const parent = el.parentElement;
+        const stickyContainer = parent.lastChild;
+        const stickyContainerHeight = stickyContainer && stickyContainer.tagName === "DIV" && stickyContainer.offsetTop - parent.scrollTop < parent.offsetHeight ? stickyContainer.offsetHeight : 0;
+        if (el.offsetTop > parent.offsetHeight + parent.scrollTop - stickyContainerHeight - el.offsetHeight) {
+          parent.scroll(0, el.offsetTop - parent.offsetHeight + el.offsetHeight + stickyContainerHeight);
+        } else if (el.offsetTop < parent.scrollTop) {
+          parent.scroll(0, el.offsetTop);
+        }
+      } catch (e) {}
+    }
+    emitter.on('confirm', confirm);
+    emitter.on('preventSub', onPreventSub);
+    emitter.on('openSub', onOpenSub);
+    return () => {
+      emitter.off('confirm', confirm);
+      emitter.off('preventSub', onPreventSub);
+      emitter.off('openSub', onOpenSub);
+    };
+  }, [hover]);
+  useEffect(() => () => subMenu.close(), []);
+  useEffect(() => {
+    if (children && !isMobile()) {
+      if (hover) {
+        if (!subMenu.isOpen || subMenu.closing || !subPrevented.get()) {
+          subMenu.open();
+        }
+      } else {
+        if (subMenu.isOpen) {
+          if (hoverCursor === -1) {
+            // Mouse saiu de todos os itens — provavelmente indo até o submenu (que
+            // abre ao lado, com um pequeno gap). Janela generosa; ao alcançá-lo, o
+            // onMouseEnter/onMouseMove do submenu chama subMenu.open e cancela.
+            subMenu.closeAfter(450);
+          } else {
+            // Mouse foi para outro item do menu — mantém os 200ms originais.
+            subMenu.closeAfter(200);
+          }
+          emitter.emit('preventSub', index);
+        }
+      }
+    }
+  }, [hoverCursor]);
+  const onMouseMove = e => {
+    if (!hover) {
+      callIfFunction(setCursorOnHover, index);
+    }
+    e === null || e === void 0 || e.stopPropagation();
+  };
+  const onMouseOut = e => {
+    callIfFunction(setCursorOnHover, -1);
+    e === null || e === void 0 || e.stopPropagation();
+  };
+  const onClickHandler = e => {
+    if (children || keepOpen) {
+      e.stopPropagation();
+    }
+    if (children) {
+      if (hover) {
+        subMenu.toggle();
+      } else {
+        onMouseMove();
+      }
+    } else {
+      callIfFunction(onClick, e);
+    }
+  };
+  const onCloseSub = () => emitter.emit('openSub');
+  const addProps = children => React.Children.map(children, c => /*#__PURE__*/React.cloneElement(c, {
+    fixed: rest.fixedPosition,
+    closing: subMenu.closing,
+    onMouseMove: subMenu.open,
+    // onMouseEnter não borbulha, então não é barrado pelo stopPropagation dos itens
+    // do submenu (linha onMouseMove do Li). Garante que alcançar o submenu sempre
+    // cancele o fechamento agendado por closeAfter(200), mantendo-o aberto.
+    onMouseEnter: subMenu.open,
+    onClose: onCloseSub,
+    sub: true,
+    slot: c.props.slot || menuSlot
+  }));
+  const content = /*#__PURE__*/React.createElement(React.Fragment, null, prefixWith, icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  }), label, " ", helpText && /*#__PURE__*/React.createElement(ListItemHelpText, null, "(", helpText, ")"), descText && /*#__PURE__*/React.createElement(ListItemDescText, null, descText), children && /*#__PURE__*/React.createElement(SubmenuArrowIcon, {
+    icon: "arrow-right"
+  }));
+  const Tag = linkTo ? Link : 'a';
+  return /*#__PURE__*/React.createElement(ListItem, _extends({
+    ref: nodeRef
+  }, rest, {
+    hover: hover,
+    onClick: onClickHandler,
+    onMouseLeave: onMouseOut,
+    onMouseMove: onMouseMove,
+    hasSubmenu: children
+  }), rest.withButton || rest.noActions ? content : /*#__PURE__*/React.createElement(Tag, {
+    href: href,
+    target: target,
+    to: linkTo,
+    ref: tagRef,
+    onMouseEnter: onMouseMove
+  }, content), subMenu.isOpen && addProps(children));
+});
+Li.isKeyboardNavigable;
+Li.Simple = SimpleLi;
+const [useContextMenuLayers, contextMenuLayersSize] = willUseLayers();
+const contextMenuLayersQuantity = contextMenuLayersSize;
+const [useContextMenuSharedState] = willUseSharedState();
+const ContextMenuComponent = /*#__PURE__*/forwardRef((_ref2, unesuredRef) => {
+  let {
+      children,
+      sub,
+      hoverIndex,
+      autoHover,
+      menuSlot,
+      withoutIcons,
+      onClose,
+      onHover = () => 0,
+      fill,
+      onClick
+    } = _ref2,
+    props = _objectWithoutProperties(_ref2, _excluded3);
+  const ref = useEnsureRef(unesuredRef);
+  const [hoverCursor, setHoverCursor] = useState(autoHover || sub ? 0 : -1);
+  const [layerCursor, setLayerCursor] = useContextMenuSharedState(0);
+  const [layerIndex, {
+    getSize
+  }] = useContextMenuLayers();
+  const itemsEmitter = useMemo(() => mitt(), []);
+  useEffect(() => {
+    window.addEventListener('keydown', keydown);
+    return () => {
+      callIfFunction(onClose);
+      window.removeEventListener('keydown', keydown);
+    };
+  }, [layerIndex, layerCursor, hoverCursor]);
+  useEffect(() => {
+    if (hoverIndex !== undefined) {
+      setHoverCursor(Math.min(Math.max(hoverIndex, -1), getTotalKeyboardItems(children) + 1));
+    }
+  }, [hoverIndex !== hoverCursor]);
+  const keydown = e => {
+    if (e.keyCode === 37 || e.keyCode === 39) {
+      if (!e.defaultPrevented) {
+        const layers = getSize();
+        const direction = e.keyCode - 38;
+        setLayerCursor((layerCursor + direction + layers) % layers);
+      }
+      e.preventDefault();
+    }
+    if (layerIndex !== layerCursor) return;
+    if (e.keyCode === 27 && ref.current) {
+      ref.current.click();
+    }
+    if (e.keyCode === 13 || e.keyCode === 32 && hoverCursor >= 0) {
+      // enter
+      e.preventDefault();
+      itemsEmitter.emit('confirm');
+    }
+    if (e.keyCode === 38 || e.keyCode === 40) {
+      // up down
+      e.preventDefault();
+      const direction = e.keyCode - 39;
+      const max = getTotalKeyboardItems(children);
+      const newIndex = (hoverCursor + direction + max) % max;
+      setHoverCursor(newIndex);
+      onHover(newIndex);
+    }
+  };
+  const getTotalKeyboardItems = children => {
+    let sum = 0;
+    React.Children.forEach(children, child => {
+      if (child && !child.props.disabled && !child.props.readOnly) {
+        if (!isStyledComponent(child.type) && child.type === Li || child.type.isKeyboardNavigable) {
+          sum += 1;
+        }
+        if (areComponentsEqual(child.type, StickyContainer) || child.props.nested) {
+          sum += getTotalKeyboardItems(child.props.children);
+        }
+      }
+    });
+    return sum;
+  };
+  const setCursorOnHover = index => {
+    setLayerCursor(layerIndex);
+    setHoverCursor(index);
+    onHover(index);
+  };
+  const formatChildren = function (children) {
+    let indexRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      current: 0
+    };
+    return React.Children.map(children, (child, j) => child && !child.props.disabled && !child.props.readOnly ? child.props.nested ? /*#__PURE__*/React.cloneElement(child, child.props, formatChildren(child.props.children, indexRef)) : !isStyledComponent(child.type) && !isMemo(child.type) && areComponentsEqual(child.type, Li) || child.type.isKeyboardNavigable ? /*#__PURE__*/React.cloneElement(child, {
+      fixedPosition: props.fixed,
+      hover: hoverCursor === indexRef.current && layerIndex === layerCursor,
+      hoverCursor: hoverCursor,
+      index: indexRef.current++,
+      setCursorOnHover,
+      emitter: itemsEmitter,
+      layerIndex: layerIndex,
+      menuSlot
+    }) : areComponentsEqual(child.type, StickyContainer) ? /*#__PURE__*/React.cloneElement(child, _objectSpread(_objectSpread({}, child.props), {}, {
+      children: formatChildren(child.props.children, indexRef)
+    })) : child : child);
+  };
+  const touchStart = createPressAndMoveEvent((e, prevPos) => {
+    // e.preventDefault()
+    e.stopPropagation();
+    e.target.dispatchEvent(new MouseEvent('mousemove', {
+      bubbles: true
+    }));
+    return (e, nextPos) => {
+      const delta = prevPos.clientY - nextPos.clientY;
+      if (Math.abs(delta) > 10) {
+        setCursorOnHover(-1);
+      }
+    };
+  });
+  return /*#__PURE__*/React.createElement(ContextListMenu, _extends({
+    "data-drag": false,
+    ref: ref,
+    sub: sub,
+    onWheel: e => e.stopPropagation(),
+    onTouchStart: touchStart,
+    withoutIcons: withoutIcons,
+    onMouseDown: stopPropagation()
+  }, props), formatChildren(children));
+});
+const ContextMenu = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+      slot = 'Popup',
+      sub,
+      withoutIcons,
+      children
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded4);
+  const contextMenuRef = useEnsureRef(ref);
+  const [positionInfo, placeholder, arrow] = usePositioning(contextMenuRef, rest);
+  const {
+    atRight,
+    atBottom
+  } = _objectSpread({}, positionInfo);
+  const slotName = useMemo(() => getDialogLayersSize() === 0 ? slot : slot + '-' + (getDialogLayersSize() - 1), []);
+  const enterAnimation = useMemo(() => [fadeIn, sub ? atRight ? slideRight : slideLeftOnLeft : atBottom ? slideDown : slideUpOnTop], [atRight, atBottom]);
+  useFlipEnter(contextMenuRef, !!positionInfo && enterAnimation);
+  useFlipLeave(contextMenuRef, !!positionInfo && enterAnimation, sub && {
+    events: {
+      mouseover: rest.onMouseMove
+    }
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, placeholder, /*#__PURE__*/React.createElement(Fill, {
+    name: slotName
+  }, /*#__PURE__*/React.createElement(ContextMenuComponent, _extends({}, rest, {
+    menuSlot: slot,
+    sub: sub
+  }, positionInfo, {
+    ref: contextMenuRef,
+    withoutIcons: withoutIcons
+  }), arrow, children)));
+});
+ContextMenu.ListItem = ListItem;
+
+export { ContextListMenu, ContextMenu, ContextMenuComponent, Li, ListHeading, ListItem, ListMenu, ListSeparator, SimpleLi, StickyContainer, contextMenuLayersQuantity };
+//# sourceMappingURL=ContextMenu.mjs.map