@chayns-components/core 5.0.0-beta.37 → 5.0.0-beta.38

package/lib/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["Checkbox","children","isChecked","isDisabled","onChange","shouldShowAsSwitch","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","displayName"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    useCallback,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactNode;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    onChange,\n    shouldShowAsSwitch,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange]\n    );\n\n    const uuid = useUuid();\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxLabel\n                htmlFor={uuid}\n                isChecked={isChecked ?? isActive}\n                isDisabled={isDisabled}\n                shouldShowAsSwitch={shouldShowAsSwitch}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":";;;;;;;AAAA;;AAQA;;AACA;;;;;;AAyBA,MAAMA,QAA2B,GAAG,QAM9B;EAAA,IAN+B;IACjCC,QADiC;IAEjCC,SAFiC;IAGjCC,UAHiC;IAIjCC,QAJiC;IAKjCC;EALiC,CAM/B;EACF,MAAM,CAACC,QAAD,EAAWC,WAAX,IAA0B,IAAAC,eAAA,EAASN,SAAT,aAASA,SAAT,cAASA,SAAT,GAAsB,KAAtB,CAAhC;EAEA,MAAMO,YAAY,GAAG,IAAAC,kBAAA,EAChBC,KAAD,IAA0C;IACtCJ,WAAW,CAACI,KAAK,CAACC,MAAN,CAAaC,OAAd,CAAX;;IAEA,IAAI,OAAOT,QAAP,KAAoB,UAAxB,EAAoC;MAChCA,QAAQ,CAACO,KAAD,CAAR;IACH;EACJ,CAPgB,EAQjB,CAACP,QAAD,CARiB,CAArB;EAWA,MAAMU,IAAI,GAAG,IAAAC,aAAA,GAAb;EAEA,oBACI,6BAAC,wBAAD,qBACI,6BAAC,6BAAD;IACI,OAAO,EAAEb,SADb;IAEI,QAAQ,EAAEC,UAFd;IAGI,EAAE,EAAEW,IAHR;IAII,QAAQ,EAAEL,YAJd;IAKI,IAAI,EAAC;EALT,EADJ,eAQI,6BAAC,6BAAD;IACI,OAAO,EAAEK,IADb;IAEI,SAAS,EAAEZ,SAAF,aAAEA,SAAF,cAAEA,SAAF,GAAeI,QAF5B;IAGI,UAAU,EAAEH,UAHhB;IAII,kBAAkB,EAAEE;EAJxB,GAMKJ,QANL,CARJ,CADJ;AAmBH,CAzCD;;AA2CAD,QAAQ,CAACgB,WAAT,GAAuB,UAAvB;eAEehB,Q"}
+{"version":3,"file":"Checkbox.js","names":["Checkbox","children","isChecked","isDisabled","onChange","shouldShowAsSwitch","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","displayName"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    useCallback,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactNode;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    onChange,\n    shouldShowAsSwitch,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange]\n    );\n\n    const uuid = useUuid();\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxLabel\n                htmlFor={uuid}\n                isChecked={isChecked ?? isActive}\n                isDisabled={isDisabled}\n                shouldShowAsSwitch={shouldShowAsSwitch}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":";;;;;;AAAA;AAQA;AACA;AAA6F;AAAA;AAyB7F,MAAMA,QAA2B,GAAG,QAM9B;EAAA,IAN+B;IACjCC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,QAAQ;IACRC;EACJ,CAAC;EACG,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAACN,SAAS,aAATA,SAAS,cAATA,SAAS,GAAI,KAAK,CAAC;EAE5D,MAAMO,YAAY,GAAG,IAAAC,kBAAW,EAC3BC,KAAoC,IAAK;IACtCJ,WAAW,CAACI,KAAK,CAACC,MAAM,CAACC,OAAO,CAAC;IAEjC,IAAI,OAAOT,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACO,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACP,QAAQ,CAAC,CACb;EAED,MAAMU,IAAI,GAAG,IAAAC,aAAO,GAAE;EAEtB,oBACI,6BAAC,wBAAc,qBACX,6BAAC,6BAAmB;IAChB,OAAO,EAAEb,SAAU;IACnB,QAAQ,EAAEC,UAAW;IACrB,EAAE,EAAEW,IAAK;IACT,QAAQ,EAAEL,YAAa;IACvB,IAAI,EAAC;EAAU,EACjB,eACF,6BAAC,6BAAmB;IAChB,OAAO,EAAEK,IAAK;IACd,SAAS,EAAEZ,SAAS,aAATA,SAAS,cAATA,SAAS,GAAII,QAAS;IACjC,UAAU,EAAEH,UAAW;IACvB,kBAAkB,EAAEE;EAAmB,GAEtCJ,QAAQ,CACS,CACT;AAEzB,CAAC;AAEDD,QAAQ,CAACgB,WAAW,GAAG,UAAU;AAAC,eAEnBhB,QAAQ;AAAA"}

package/lib/components/checkbox/Checkbox.styles.js

@@ -4,84 +4,122 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledCheckboxLabel = exports.StyledCheckboxInput = exports.StyledCheckbox = void 0;
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-const StyledCheckbox = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    position: relative;\n"])));
-
+const StyledCheckbox = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    position: relative;
+`;
 exports.StyledCheckbox = StyledCheckbox;
-
-const StyledCheckboxInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: none;\n"])));
-
+const StyledCheckboxInput = _styledComponents.default.input`
+    display: none;
+`;
 exports.StyledCheckboxInput = StyledCheckboxInput;
-
-const StyledCheckboxLabel = _styledComponents.default.label(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    cursor: ", ";\n    opacity: ", ";\n    padding-left: ", ";\n    transition: opacity 0.2s ease;\n    user-select: none;\n\n    &:after {\n        ", "\n\n        content: ' ';\n        position: absolute;\n        top: 50%;\n        transform-origin: 100% 100%;\n    }\n\n    &:before {\n        background-color: ", ";\n        border: 1px solid rgba(", ", 0.5);\n        border-radius: ", ";\n        content: ' ';\n        height: ", ";\n        left: ", ";\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ", ";\n    }\n"])), _ref => {
+const StyledCheckboxLabel = _styledComponents.default.label`
+    cursor: ${_ref => {
   let {
     isDisabled
   } = _ref;
   return isDisabled ? 'default' : 'pointer';
-}, _ref2 => {
+}};
+    opacity: ${_ref2 => {
   let {
     isDisabled
   } = _ref2;
   return isDisabled ? 0.5 : 1;
-}, _ref3 => {
+}};
+    padding-left: ${_ref3 => {
   let {
     shouldShowAsSwitch
   } = _ref3;
   return shouldShowAsSwitch ? '48px' : '20px';
-}, _ref4 => {
+}};
+    transition: opacity 0.2s ease;
+    user-select: none;
+
+    &:after {
+        ${_ref4 => {
   let {
     isChecked,
     shouldShowAsSwitch
   } = _ref4;
-  return shouldShowAsSwitch ? (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      transform: translateY(-50%) translateX(", ");\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  "])), isChecked ? '18px' : 0) : (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 1px;\n                      opacity: ", ";\n                      transform: translateY(-50%) rotateZ(37deg);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  "])), isChecked ? 1 : 0);
-}, _ref5 => {
+  return shouldShowAsSwitch ? (0, _styledComponents.css)`
+                      background-color: white;
+                      border-radius: 50%;
+                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
+                      height: 16px;
+                      left: 7px;
+                      transform: translateY(-50%) translateX(${isChecked ? '18px' : 0});
+                      transition: transform 0.2s ease;
+                      width: 16px;
+                  ` : (0, _styledComponents.css)`
+                      border-right: 2px solid #fff;
+                      border-bottom: 2px solid #fff;
+                      height: 10px;
+                      left: 1px;
+                      opacity: ${isChecked ? 1 : 0};
+                      transform: translateY(-50%) rotateZ(37deg);
+                      transition: opacity 0.2s ease;
+                      width: 5.5px;
+                  `;
+}}
+
+        content: ' ';
+        position: absolute;
+        top: 50%;
+        transform-origin: 100% 100%;
+    }
+
+    &:before {
+        background-color: ${_ref5 => {
   let {
     isChecked,
     shouldShowAsSwitch,
     theme
   } = _ref5;
-
   if (shouldShowAsSwitch) {
     return isChecked ? theme.green : theme.red;
   }
-
   return isChecked ? theme['408'] : theme['403'];
-}, _ref6 => {
+}};
+        border: 1px solid rgba(${_ref6 => {
   let {
     theme
   } = _ref6;
   return theme['409-rgb'];
-}, _ref7 => {
+}}, 0.5);
+        border-radius: ${_ref7 => {
   let {
     shouldShowAsSwitch
   } = _ref7;
   return shouldShowAsSwitch ? '100px' : 0;
-}, _ref8 => {
+}};
+        content: ' ';
+        height: ${_ref8 => {
   let {
     shouldShowAsSwitch
   } = _ref8;
   return shouldShowAsSwitch ? '13px' : '15px';
-}, _ref9 => {
+}};
+        left: ${_ref9 => {
   let {
     shouldShowAsSwitch
   } = _ref9;
   return shouldShowAsSwitch ? '10px' : 0;
-}, _ref10 => {
+}};
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        transition: background-color 0.2s ease;
+        width: ${_ref10 => {
   let {
     shouldShowAsSwitch
   } = _ref10;
   return shouldShowAsSwitch ? '28px' : '15px';
-});
-
+}};
+    }
+`;
 exports.StyledCheckboxLabel = StyledCheckboxLabel;
 //# sourceMappingURL=Checkbox.styles.js.map

package/lib/components/checkbox/Checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.js","names":["StyledCheckbox","styled","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","isDisabled","shouldShowAsSwitch","isChecked","css","theme","green","red"],"sources":["../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<Omit<CheckboxProps, 'children' | 'onChange'>>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    padding-left: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n\n    &:after {\n        ${({ isChecked, shouldShowAsSwitch }) =>\n            shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      transform: translateY(-50%) translateX(${isChecked ? '18px' : 0});\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 1px;\n                      opacity: ${isChecked ? 1 : 0};\n                      transform: translateY(-50%) rotateZ(37deg);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n        top: 50%;\n        transform-origin: 100% 100%;\n    }\n\n    &:before {\n        background-color: ${({\n            isChecked,\n            shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxLabelProps) => {\n            if (shouldShowAsSwitch) {\n                return isChecked ? theme.green : theme.red;\n            }\n\n            return isChecked ? theme['408'] : theme['403'];\n        }};\n        border: 1px solid rgba(${({ theme }: StyledCheckboxLabelProps) => theme['409-rgb']}, 0.5);\n        border-radius: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '28px' : '15px')};\n    }\n`;\n"],"mappings":";;;;;;;AAAA;;;;;;;;;;AAIO,MAAMA,cAAc,GAAGC,yBAAA,CAAOC,GAAV,8IAApB;;;;AAMA,MAAMC,mBAAmB,GAAGF,yBAAA,CAAOG,KAAV,6FAAzB;;;;AAMA,MAAMC,mBAAmB,GAAGJ,yBAAA,CAAOK,KAAV,+rBAClB;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAAqBA,UAAU,GAAG,SAAH,GAAe,SAA9C;AAAA,CADkB,EAEjB;EAAA,IAAC;IAAEA;EAAF,CAAD;EAAA,OAAqBA,UAAU,GAAG,GAAH,GAAS,CAAxC;AAAA,CAFiB,EAGZ;EAAA,IAAC;IAAEC;EAAF,CAAD;EAAA,OAA6BA,kBAAkB,GAAG,MAAH,GAAY,MAA3D;AAAA,CAHY,EAQtB;EAAA,IAAC;IAAEC,SAAF;IAAaD;EAAb,CAAD;EAAA,OACEA,kBAAkB,OACZE,qBADY,+dAOiCD,SAAS,GAAG,MAAH,GAAY,CAPtD,QAWZC,qBAXY,mdAgBGD,SAAS,GAAG,CAAH,GAAO,CAhBnB,CADpB;AAAA,CARsB,EAsCJ,SAIY;EAAA,IAJX;IACjBA,SADiB;IAEjBD,kBAFiB;IAGjBG;EAHiB,CAIW;;EAC5B,IAAIH,kBAAJ,EAAwB;IACpB,OAAOC,SAAS,GAAGE,KAAK,CAACC,KAAT,GAAiBD,KAAK,CAACE,GAAvC;EACH;;EAED,OAAOJ,SAAS,GAAGE,KAAK,CAAC,KAAD,CAAR,GAAkBA,KAAK,CAAC,KAAD,CAAvC;AACH,CAhDuB,EAiDC;EAAA,IAAC;IAAEA;EAAF,CAAD;EAAA,OAAyCA,KAAK,CAAC,SAAD,CAA9C;AAAA,CAjDD,EAkDP;EAAA,IAAC;IAAEH;EAAF,CAAD;EAAA,OAA6BA,kBAAkB,GAAG,OAAH,GAAa,CAA5D;AAAA,CAlDO,EAoDd;EAAA,IAAC;IAAEA;EAAF,CAAD;EAAA,OAA6BA,kBAAkB,GAAG,MAAH,GAAY,MAA3D;AAAA,CApDc,EAqDhB;EAAA,IAAC;IAAEA;EAAF,CAAD;EAAA,OAA6BA,kBAAkB,GAAG,MAAH,GAAY,CAA3D;AAAA,CArDgB,EA0Df;EAAA,IAAC;IAAEA;EAAF,CAAD;EAAA,OAA6BA,kBAAkB,GAAG,MAAH,GAAY,MAA3D;AAAA,CA1De,CAAzB"}
+{"version":3,"file":"Checkbox.styles.js","names":["StyledCheckbox","styled","div","StyledCheckboxInput","input","StyledCheckboxLabel","label","isDisabled","shouldShowAsSwitch","isChecked","css","theme","green","red"],"sources":["../../../src/components/checkbox/Checkbox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { CheckboxProps } from './Checkbox';\n\nexport const StyledCheckbox = styled.div`\n    align-items: center;\n    display: flex;\n    position: relative;\n`;\n\nexport const StyledCheckboxInput = styled.input`\n    display: none;\n`;\n\ntype StyledCheckboxLabelProps = WithTheme<Omit<CheckboxProps, 'children' | 'onChange'>>;\n\nexport const StyledCheckboxLabel = styled.label<StyledCheckboxLabelProps>`\n    cursor: ${({ isDisabled }) => (isDisabled ? 'default' : 'pointer')};\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    padding-left: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '48px' : '20px')};\n    transition: opacity 0.2s ease;\n    user-select: none;\n\n    &:after {\n        ${({ isChecked, shouldShowAsSwitch }) =>\n            shouldShowAsSwitch\n                ? css`\n                      background-color: white;\n                      border-radius: 50%;\n                      box-shadow: 0 1px 4px rgb(0 0 0 / 35%);\n                      height: 16px;\n                      left: 7px;\n                      transform: translateY(-50%) translateX(${isChecked ? '18px' : 0});\n                      transition: transform 0.2s ease;\n                      width: 16px;\n                  `\n                : css`\n                      border-right: 2px solid #fff;\n                      border-bottom: 2px solid #fff;\n                      height: 10px;\n                      left: 1px;\n                      opacity: ${isChecked ? 1 : 0};\n                      transform: translateY(-50%) rotateZ(37deg);\n                      transition: opacity 0.2s ease;\n                      width: 5.5px;\n                  `}\n\n        content: ' ';\n        position: absolute;\n        top: 50%;\n        transform-origin: 100% 100%;\n    }\n\n    &:before {\n        background-color: ${({\n            isChecked,\n            shouldShowAsSwitch,\n            theme,\n        }: StyledCheckboxLabelProps) => {\n            if (shouldShowAsSwitch) {\n                return isChecked ? theme.green : theme.red;\n            }\n\n            return isChecked ? theme['408'] : theme['403'];\n        }};\n        border: 1px solid rgba(${({ theme }: StyledCheckboxLabelProps) => theme['409-rgb']}, 0.5);\n        border-radius: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '100px' : 0)};\n        content: ' ';\n        height: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '13px' : '15px')};\n        left: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '10px' : 0)};\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        transition: background-color 0.2s ease;\n        width: ${({ shouldShowAsSwitch }) => (shouldShowAsSwitch ? '28px' : '15px')};\n    }\n`;\n"],"mappings":";;;;;;AAAA;AAAgD;AAAA;AAIzC,MAAMA,cAAc,GAAGC,yBAAM,CAACC,GAAI;AACzC;AACA;AACA;AACA,CAAC;AAAC;AAEK,MAAMC,mBAAmB,GAAGF,yBAAM,CAACG,KAAM;AAChD;AACA,CAAC;AAAC;AAIK,MAAMC,mBAAmB,GAAGJ,yBAAM,CAACK,KAAgC;AAC1E,cAAc;EAAA,IAAC;IAAEC;EAAW,CAAC;EAAA,OAAMA,UAAU,GAAG,SAAS,GAAG,SAAS;AAAA,CAAE;AACvE,eAAe;EAAA,IAAC;IAAEA;EAAW,CAAC;EAAA,OAAMA,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D,oBAAoB;EAAA,IAAC;IAAEC;EAAmB,CAAC;EAAA,OAAMA,kBAAkB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAE;AACvF;AACA;AACA;AACA;AACA,UAAU;EAAA,IAAC;IAAEC,SAAS;IAAED;EAAmB,CAAC;EAAA,OAChCA,kBAAkB,GACZ,IAAAE,qBAAG,CAAC;AACtB;AACA;AACA;AACA;AACA;AACA,+DAA+DD,SAAS,GAAG,MAAM,GAAG,CAAE;AACtF;AACA;AACA,mBAAmB,GACD,IAAAC,qBAAG,CAAC;AACtB;AACA;AACA;AACA;AACA,iCAAiCD,SAAS,GAAG,CAAC,GAAG,CAAE;AACnD;AACA;AACA;AACA,mBAAmB;AAAA,CAAC;AACpB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,SAIY;EAAA,IAJX;IACjBA,SAAS;IACTD,kBAAkB;IAClBG;EACsB,CAAC;EACvB,IAAIH,kBAAkB,EAAE;IACpB,OAAOC,SAAS,GAAGE,KAAK,CAACC,KAAK,GAAGD,KAAK,CAACE,GAAG;EAC9C;EAEA,OAAOJ,SAAS,GAAGE,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAClD,CAAE;AACV,iCAAiC;EAAA,IAAC;IAAEA;EAAgC,CAAC;EAAA,OAAKA,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC3F,yBAAyB;EAAA,IAAC;IAAEH;EAAmB,CAAC;EAAA,OAAMA,kBAAkB,GAAG,OAAO,GAAG,CAAC;AAAA,CAAE;AACxF;AACA,kBAAkB;EAAA,IAAC;IAAEA;EAAmB,CAAC;EAAA,OAAMA,kBAAkB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAE;AACrF,gBAAgB;EAAA,IAAC;IAAEA;EAAmB,CAAC;EAAA,OAAMA,kBAAkB,GAAG,MAAM,GAAG,CAAC;AAAA,CAAE;AAC9E;AACA;AACA;AACA;AACA,iBAAiB;EAAA,IAAC;IAAEA;EAAmB,CAAC;EAAA,OAAMA,kBAAkB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAE;AACpF;AACA,CAAC;AAAC"}

package/lib/components/color-scheme-provider/ColorSchemeProvider.js

@@ -4,31 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _colors = require("@chayns/colors");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styledComponents = require("styled-components");
-
-var _templateObject;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var ColorMode;
-
 (function (ColorMode) {
   ColorMode[ColorMode["Classic"] = 0] = "Classic";
   ColorMode[ColorMode["Dark"] = 1] = "Dark";
   ColorMode[ColorMode["Light"] = 2] = "Light";
 })(ColorMode || (ColorMode = {}));
-
-const GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .ellipsis {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n"])));
-
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
+    .ellipsis {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+`;
 const ColorSchemeProvider = _ref => {
   let {
     children,
@@ -50,15 +43,13 @@ const ColorSchemeProvider = _ref => {
         colorMode,
         secondaryColor
       });
-
       if (hexColor) {
         const rgbColor = (0, _colors.hexToRgb255)(hexColor);
-        newColors["--chayns-color--".concat(colorName)] = hexColor;
+        newColors[`--chayns-color--${colorName}`] = hexColor;
         newThemeColors[colorName] = hexColor;
-
         if (rgbColor) {
-          newColors["--chayns-color-rgb--".concat(colorName)] = "".concat(rgbColor.r, ", ").concat(rgbColor.g, ", ").concat(rgbColor.b);
-          newThemeColors["".concat(colorName, "-rgb")] = "".concat(rgbColor.r, ", ").concat(rgbColor.g, ", ").concat(rgbColor.b);
+          newColors[`--chayns-color-rgb--${colorName}`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
+          newThemeColors[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
         }
       }
     });
@@ -68,13 +59,13 @@ const ColorSchemeProvider = _ref => {
   return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
     theme: themeColors
   }, /*#__PURE__*/_react.default.createElement("div", {
-    style: { ...colors,
+    style: {
+      ...colors,
       ...cssVariables,
       ...style
     }
   }, children), /*#__PURE__*/_react.default.createElement(GlobalStyle, null));
 };
-
 ColorSchemeProvider.displayName = 'ColorSchemeProvider';
 var _default = ColorSchemeProvider;
 exports.default = _default;

package/lib/components/color-scheme-provider/ColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.js","names":["ColorMode","GlobalStyle","createGlobalStyle","ColorSchemeProvider","children","color","colorMode","Classic","cssVariables","secondaryColor","style","colors","setColors","useState","themeColors","setThemeColors","useEffect","availableColors","getAvailableColorList","newColors","newThemeColors","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","r","g","b","displayName"],"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport React, { FC, ReactNode, useEffect, useState } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\n\nenum ColorMode {\n    Classic,\n    Dark,\n    Light,\n}\n\ntype ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * Css variables to be added in addition to the chayns variables\n     */\n    cssVariables?: { [key: string]: string | number };\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n`;\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color = '#005EB8',\n    colorMode = ColorMode.Classic,\n    cssVariables = {},\n    secondaryColor,\n    style = {},\n}) => {\n    const [colors, setColors] = useState<Theme>({});\n    const [themeColors, setThemeColors] = useState<Theme>({});\n\n    useEffect(() => {\n        const availableColors = getAvailableColorList();\n\n        const newColors: Theme = {};\n        const newThemeColors: Theme = {};\n\n        availableColors.forEach((colorName: string) => {\n            const hexColor = getColorFromPalette(colorName, {\n                color,\n                colorMode,\n                secondaryColor,\n            });\n\n            if (hexColor) {\n                const rgbColor = hexToRgb255(hexColor);\n\n                newColors[`--chayns-color--${colorName}`] = hexColor;\n                newThemeColors[colorName] = hexColor;\n\n                if (rgbColor) {\n                    newColors[\n                        `--chayns-color-rgb--${colorName}`\n                    ] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                    newThemeColors[\n                        `${colorName}-rgb`\n                    ] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                }\n            }\n        });\n\n        setColors(newColors);\n        setThemeColors(newThemeColors);\n    }, [color, colorMode, secondaryColor]);\n\n    return (\n        <ThemeProvider theme={themeColors}>\n            <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n            <GlobalStyle />\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;IAEKA,S;;WAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S;;AAyCL,MAAMC,WAAW,OAAGC,mCAAH,qLAAjB;;AAQA,MAAMC,mBAAiD,GAAG,QAOpD;EAAA,IAPqD;IACvDC,QADuD;IAEvDC,KAAK,GAAG,SAF+C;IAGvDC,SAAS,GAAGN,SAAS,CAACO,OAHiC;IAIvDC,YAAY,GAAG,EAJwC;IAKvDC,cALuD;IAMvDC,KAAK,GAAG;EAN+C,CAOrD;EACF,MAAM,CAACC,MAAD,EAASC,SAAT,IAAsB,IAAAC,eAAA,EAAgB,EAAhB,CAA5B;EACA,MAAM,CAACC,WAAD,EAAcC,cAAd,IAAgC,IAAAF,eAAA,EAAgB,EAAhB,CAAtC;EAEA,IAAAG,gBAAA,EAAU,MAAM;IACZ,MAAMC,eAAe,GAAG,IAAAC,6BAAA,GAAxB;IAEA,MAAMC,SAAgB,GAAG,EAAzB;IACA,MAAMC,cAAqB,GAAG,EAA9B;IAEAH,eAAe,CAACI,OAAhB,CAAyBC,SAAD,IAAuB;MAC3C,MAAMC,QAAQ,GAAG,IAAAC,2BAAA,EAAoBF,SAApB,EAA+B;QAC5CjB,KAD4C;QAE5CC,SAF4C;QAG5CG;MAH4C,CAA/B,CAAjB;;MAMA,IAAIc,QAAJ,EAAc;QACV,MAAME,QAAQ,GAAG,IAAAC,mBAAA,EAAYH,QAAZ,CAAjB;QAEAJ,SAAS,2BAAoBG,SAApB,EAAT,GAA4CC,QAA5C;QACAH,cAAc,CAACE,SAAD,CAAd,GAA4BC,QAA5B;;QAEA,IAAIE,QAAJ,EAAc;UACVN,SAAS,+BACkBG,SADlB,EAAT,aAEOG,QAAQ,CAACE,CAFhB,eAEsBF,QAAQ,CAACG,CAF/B,eAEqCH,QAAQ,CAACI,CAF9C;UAGAT,cAAc,WACPE,SADO,UAAd,aAEOG,QAAQ,CAACE,CAFhB,eAEsBF,QAAQ,CAACG,CAF/B,eAEqCH,QAAQ,CAACI,CAF9C;QAGH;MACJ;IACJ,CAtBD;IAwBAjB,SAAS,CAACO,SAAD,CAAT;IACAJ,cAAc,CAACK,cAAD,CAAd;EACH,CAhCD,EAgCG,CAACf,KAAD,EAAQC,SAAR,EAAmBG,cAAnB,CAhCH;EAkCA,oBACI,6BAAC,+BAAD;IAAe,KAAK,EAAEK;EAAtB,gBACI;IAAK,KAAK,EAAE,EAAE,GAAGH,MAAL;MAAa,GAAGH,YAAhB;MAA8B,GAAGE;IAAjC;EAAZ,GAAuDN,QAAvD,CADJ,eAEI,6BAAC,WAAD,OAFJ,CADJ;AAMH,CAnDD;;AAqDAD,mBAAmB,CAAC2B,WAApB,GAAkC,qBAAlC;eAEe3B,mB"}
+{"version":3,"file":"ColorSchemeProvider.js","names":["ColorMode","GlobalStyle","createGlobalStyle","ColorSchemeProvider","children","color","colorMode","Classic","cssVariables","secondaryColor","style","colors","setColors","useState","themeColors","setThemeColors","useEffect","availableColors","getAvailableColorList","newColors","newThemeColors","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","r","g","b","displayName"],"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport React, { FC, ReactNode, useEffect, useState } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\n\nenum ColorMode {\n    Classic,\n    Dark,\n    Light,\n}\n\ntype ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * Css variables to be added in addition to the chayns variables\n     */\n    cssVariables?: { [key: string]: string | number };\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n`;\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color = '#005EB8',\n    colorMode = ColorMode.Classic,\n    cssVariables = {},\n    secondaryColor,\n    style = {},\n}) => {\n    const [colors, setColors] = useState<Theme>({});\n    const [themeColors, setThemeColors] = useState<Theme>({});\n\n    useEffect(() => {\n        const availableColors = getAvailableColorList();\n\n        const newColors: Theme = {};\n        const newThemeColors: Theme = {};\n\n        availableColors.forEach((colorName: string) => {\n            const hexColor = getColorFromPalette(colorName, {\n                color,\n                colorMode,\n                secondaryColor,\n            });\n\n            if (hexColor) {\n                const rgbColor = hexToRgb255(hexColor);\n\n                newColors[`--chayns-color--${colorName}`] = hexColor;\n                newThemeColors[colorName] = hexColor;\n\n                if (rgbColor) {\n                    newColors[\n                        `--chayns-color-rgb--${colorName}`\n                    ] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                    newThemeColors[\n                        `${colorName}-rgb`\n                    ] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                }\n            }\n        });\n\n        setColors(newColors);\n        setThemeColors(newThemeColors);\n    }, [color, colorMode, secondaryColor]);\n\n    return (\n        <ThemeProvider theme={themeColors}>\n            <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n            <GlobalStyle />\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAqE;AAAA;AAAA,IAEhEA,SAAS;AAAA,WAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;AAAA,GAATA,SAAS,KAATA,SAAS;AAyCd,MAAMC,WAAW,GAAG,IAAAC,mCAAiB,CAAC;AACtC;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,mBAAiD,GAAG,QAOpD;EAAA,IAPqD;IACvDC,QAAQ;IACRC,KAAK,GAAG,SAAS;IACjBC,SAAS,GAAGN,SAAS,CAACO,OAAO;IAC7BC,YAAY,GAAG,CAAC,CAAC;IACjBC,cAAc;IACdC,KAAK,GAAG,CAAC;EACb,CAAC;EACG,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAC,eAAQ,EAAQ,CAAC,CAAC,CAAC;EAC/C,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAF,eAAQ,EAAQ,CAAC,CAAC,CAAC;EAEzD,IAAAG,gBAAS,EAAC,MAAM;IACZ,MAAMC,eAAe,GAAG,IAAAC,6BAAqB,GAAE;IAE/C,MAAMC,SAAgB,GAAG,CAAC,CAAC;IAC3B,MAAMC,cAAqB,GAAG,CAAC,CAAC;IAEhCH,eAAe,CAACI,OAAO,CAAEC,SAAiB,IAAK;MAC3C,MAAMC,QAAQ,GAAG,IAAAC,2BAAmB,EAACF,SAAS,EAAE;QAC5CjB,KAAK;QACLC,SAAS;QACTG;MACJ,CAAC,CAAC;MAEF,IAAIc,QAAQ,EAAE;QACV,MAAME,QAAQ,GAAG,IAAAC,mBAAW,EAACH,QAAQ,CAAC;QAEtCJ,SAAS,CAAE,mBAAkBG,SAAU,EAAC,CAAC,GAAGC,QAAQ;QACpDH,cAAc,CAACE,SAAS,CAAC,GAAGC,QAAQ;QAEpC,IAAIE,QAAQ,EAAE;UACVN,SAAS,CACJ,uBAAsBG,SAAU,EAAC,CACrC,GAAI,GAAEG,QAAQ,CAACE,CAAE,KAAIF,QAAQ,CAACG,CAAE,KAAIH,QAAQ,CAACI,CAAE,EAAC;UACjDT,cAAc,CACT,GAAEE,SAAU,MAAK,CACrB,GAAI,GAAEG,QAAQ,CAACE,CAAE,KAAIF,QAAQ,CAACG,CAAE,KAAIH,QAAQ,CAACI,CAAE,EAAC;QACrD;MACJ;IACJ,CAAC,CAAC;IAEFjB,SAAS,CAACO,SAAS,CAAC;IACpBJ,cAAc,CAACK,cAAc,CAAC;EAClC,CAAC,EAAE,CAACf,KAAK,EAAEC,SAAS,EAAEG,cAAc,CAAC,CAAC;EAEtC,oBACI,6BAAC,+BAAa;IAAC,KAAK,EAAEK;EAAY,gBAC9B;IAAK,KAAK,EAAE;MAAE,GAAGH,MAAM;MAAE,GAAGH,YAAY;MAAE,GAAGE;IAAM;EAAE,GAAEN,QAAQ,CAAO,eACtE,6BAAC,WAAW,OAAG,CACH;AAExB,CAAC;AAEDD,mBAAmB,CAAC2B,WAAW,GAAG,qBAAqB;AAAC,eAEzC3B,mBAAmB;AAAA"}

package/lib/components/context-menu/ContextMenu.js

@@ -4,29 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _framerMotion = require("framer-motion");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactDom = require("react-dom");
-
 var _uuid = require("../../hooks/uuid");
-
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
-
 var _alignment = require("./constants/alignment");
-
 var _ContextMenuContent = _interopRequireDefault(require("./context-menu-content/ContextMenuContent"));
-
 var _ContextMenu = require("./ContextMenu.styles");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     alignment,
@@ -45,8 +33,9 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
   const [internalAlignment, setInternalAlignment] = (0, _react.useState)(_alignment.ContextMenuAlignment.TopLeft);
   const [isContentShown, setIsContentShown] = (0, _react.useState)(false);
-  const uuid = (0, _uuid.useUuid)(); // ToDo: Replace with hook if new chayns api is ready
+  const uuid = (0, _uuid.useUuid)();
 
+  // ToDo: Replace with hook if new chayns api is ready
   const contextMenuContentRef = (0, _react.useRef)(null);
   const contextMenuRef = (0, _react.useRef)(null);
   const handleHide = (0, _react.useCallback)(() => {
@@ -57,10 +46,8 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       isMobile,
       isTablet
     } = chayns.env;
-
     if (isMobile || isTablet) {
       var _selection$;
-
       // ToDo: Replace with new api function if new api is ready
       const {
         buttonType,
@@ -80,10 +67,8 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         }),
         type: 2
       });
-
       if (buttonType === 1 && typeof ((_selection$ = selection[0]) === null || _selection$ === void 0 ? void 0 : _selection$.value) === 'number') {
         var _items$selection$0$va;
-
         (_items$selection$0$va = items[selection[0].value]) === null || _items$selection$0$va === void 0 ? void 0 : _items$selection$0$va.onClick();
       }
     } else if (contextMenuRef.current) {
@@ -102,7 +87,6 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
         height,
         width
       } = rootElement.getBoundingClientRect();
-
       if (x < width / 2) {
         if (y < height / 2) {
           setInternalAlignment(_alignment.ContextMenuAlignment.BottomRight);
@@ -114,7 +98,6 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       } else {
         setInternalAlignment(_alignment.ContextMenuAlignment.TopLeft);
       }
-
       setIsContentShown(true);
     }
   }, [items]);
@@ -125,12 +108,10 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }, [handleShow]);
   const handleDocumentClick = (0, _react.useCallback)(event => {
     var _contextMenuContentRe;
-
     if (!((_contextMenuContentRe = contextMenuContentRef.current) !== null && _contextMenuContentRe !== void 0 && _contextMenuContentRe.contains(event.target))) {
       event.preventDefault();
       event.stopPropagation();
     }
-
     handleHide();
   }, [handleHide]);
   (0, _react.useImperativeHandle)(ref, () => ({
@@ -141,14 +122,12 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     if (isContentShown) {
       document.addEventListener('click', handleDocumentClick, true);
       window.addEventListener('blur', handleHide);
-
       if (typeof onShow === 'function') {
         onShow();
       }
     } else if (typeof onHide === 'function') {
       onHide();
     }
-
     return () => {
       document.removeEventListener('click', handleDocumentClick, true);
       window.removeEventListener('blur', handleHide);
@@ -159,7 +138,7 @@ const ContextMenu = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }, isContentShown && /*#__PURE__*/_react.default.createElement(_ContextMenuContent.default, {
     coordinates: coordinates !== null && coordinates !== void 0 ? coordinates : internalCoordinates,
     items: items,
-    key: "contextMenu_".concat(uuid),
+    key: `contextMenu_${uuid}`,
     alignment: alignment !== null && alignment !== void 0 ? alignment : internalAlignment,
     ref: contextMenuContentRef
   })), container), [container, coordinates, internalCoordinates, internalAlignment, isContentShown, items, alignment, uuid]);

package/lib/components/context-menu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","names":["ContextMenu","forwardRef","ref","alignment","children","container","document","body","coordinates","items","onHide","onShow","internalCoordinates","setInternalCoordinates","useState","x","y","internalAlignment","setInternalAlignment","ContextMenuAlignment","TopLeft","isContentShown","setIsContentShown","uuid","useUuid","contextMenuContentRef","useRef","contextMenuRef","handleHide","useCallback","handleShow","isMobile","isTablet","chayns","env","buttonType","selection","dialog","select","buttons","list","map","index","icons","text","name","value","icon","type","onClick","current","rootElement","querySelector","height","childrenHeight","width","childrenWidth","getBoundingClientRect","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","useImperativeHandle","hide","show","useEffect","addEventListener","window","removeEventListener","portal","useMemo","createPortal","displayName"],"sources":["../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport Icon from '../icon/Icon';\nimport { ContextMenuAlignment } from './constants/alignment';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: (event?: MouseEvent<HTMLDivElement>) => void;\n    text: string;\n};\n\ntype ContextMenuRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n};\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} />,\n            container = document.body,\n            coordinates,\n            items,\n            onHide,\n            onShow,\n        },\n        ref\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft\n        );\n        const [isContentShown, setIsContentShown] = useState(false);\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(async () => {\n            const { isMobile, isTablet } = chayns.env;\n\n            if (isMobile || isTablet) {\n                // ToDo: Replace with new api function if new api is ready\n                const { buttonType, selection } = await chayns.dialog.select({\n                    buttons: [],\n                    list: items.map(({ icons, text }, index) => ({\n                        name: text,\n                        value: index,\n                        icon: icons[0],\n                    })),\n                    type: 2,\n                });\n\n                if (buttonType === 1 && typeof selection[0]?.value === 'number') {\n                    items[selection[0].value]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                const rootElement = document.querySelector('.tapp') || document.body;\n\n                const {\n                    x,\n                    y,\n                    height: childrenHeight,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({ x: x + childrenWidth / 2, y: y + childrenHeight / 2 });\n\n                const { height, width } = rootElement.getBoundingClientRect();\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [items]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow]\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!contextMenuContentRef.current?.contains(event.target as Node)) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                handleHide();\n            },\n            [handleHide]\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow]\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n        const portal = useMemo(\n            () =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container\n                ),\n            [\n                container,\n                coordinates,\n                internalCoordinates,\n                internalAlignment,\n                isContentShown,\n                items,\n                alignment,\n                uuid,\n            ]\n        );\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    }\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":"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"}
+{"version":3,"file":"ContextMenu.js","names":["ContextMenu","forwardRef","ref","alignment","children","container","document","body","coordinates","items","onHide","onShow","internalCoordinates","setInternalCoordinates","useState","x","y","internalAlignment","setInternalAlignment","ContextMenuAlignment","TopLeft","isContentShown","setIsContentShown","uuid","useUuid","contextMenuContentRef","useRef","contextMenuRef","handleHide","useCallback","handleShow","isMobile","isTablet","chayns","env","buttonType","selection","dialog","select","buttons","list","map","index","icons","text","name","value","icon","type","onClick","current","rootElement","querySelector","height","childrenHeight","width","childrenWidth","getBoundingClientRect","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","contains","target","useImperativeHandle","hide","show","useEffect","addEventListener","window","removeEventListener","portal","useMemo","createPortal","displayName"],"sources":["../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport Icon from '../icon/Icon';\nimport { ContextMenuAlignment } from './constants/alignment';\nimport ContextMenuContent from './context-menu-content/ContextMenuContent';\nimport { StyledContextMenu } from './ContextMenu.styles';\n\nexport type ContextMenuCoordinates = {\n    x: number;\n    y: number;\n};\n\nexport type ContextMenuItem = {\n    icons: string[];\n    key: string;\n    onClick: (event?: MouseEvent<HTMLDivElement>) => void;\n    text: string;\n};\n\ntype ContextMenuRef = {\n    hide: VoidFunction;\n    show: VoidFunction;\n};\n\ntype ContextMenuProps = {\n    /**\n     * Optional custom alignment used instead of calculating it using the\n     * alignment within the page. The available alignment can be taken from the\n     * ContextMenuAlignment enum.\n     */\n    alignment?: ContextMenuAlignment;\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The element where the content of the `ContextMenu` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * Optional own coordinates to be used instead of calculating the alignment\n     * based on the alignment of the children.\n     */\n    coordinates?: ContextMenuCoordinates;\n    /**\n     * The items that will be displayed in the content of the `ContextMenu`.\n     */\n    items: ContextMenuItem[];\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n};\n\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>(\n    (\n        {\n            alignment,\n            children = <Icon icons={['ts-ellipsis_v']} />,\n            container = document.body,\n            coordinates,\n            items,\n            onHide,\n            onShow,\n        },\n        ref\n    ) => {\n        const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const [internalAlignment, setInternalAlignment] = useState<ContextMenuAlignment>(\n            ContextMenuAlignment.TopLeft\n        );\n        const [isContentShown, setIsContentShown] = useState(false);\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const contextMenuContentRef = useRef<HTMLDivElement>(null);\n        const contextMenuRef = useRef<HTMLSpanElement>(null);\n\n        const handleHide = useCallback(() => {\n            setIsContentShown(false);\n        }, []);\n\n        const handleShow = useCallback(async () => {\n            const { isMobile, isTablet } = chayns.env;\n\n            if (isMobile || isTablet) {\n                // ToDo: Replace with new api function if new api is ready\n                const { buttonType, selection } = await chayns.dialog.select({\n                    buttons: [],\n                    list: items.map(({ icons, text }, index) => ({\n                        name: text,\n                        value: index,\n                        icon: icons[0],\n                    })),\n                    type: 2,\n                });\n\n                if (buttonType === 1 && typeof selection[0]?.value === 'number') {\n                    items[selection[0].value]?.onClick();\n                }\n            } else if (contextMenuRef.current) {\n                const rootElement = document.querySelector('.tapp') || document.body;\n\n                const {\n                    x,\n                    y,\n                    height: childrenHeight,\n                    width: childrenWidth,\n                } = contextMenuRef.current.getBoundingClientRect();\n\n                setInternalCoordinates({ x: x + childrenWidth / 2, y: y + childrenHeight / 2 });\n\n                const { height, width } = rootElement.getBoundingClientRect();\n\n                if (x < width / 2) {\n                    if (y < height / 2) {\n                        setInternalAlignment(ContextMenuAlignment.BottomRight);\n                    } else {\n                        setInternalAlignment(ContextMenuAlignment.TopRight);\n                    }\n                } else if (y < height / 2) {\n                    setInternalAlignment(ContextMenuAlignment.BottomLeft);\n                } else {\n                    setInternalAlignment(ContextMenuAlignment.TopLeft);\n                }\n\n                setIsContentShown(true);\n            }\n        }, [items]);\n\n        const handleClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n            (event) => {\n                event.preventDefault();\n                event.stopPropagation();\n\n                void handleShow();\n            },\n            [handleShow]\n        );\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!contextMenuContentRef.current?.contains(event.target as Node)) {\n                    event.preventDefault();\n                    event.stopPropagation();\n                }\n\n                handleHide();\n            },\n            [handleHide]\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow]\n        );\n\n        useEffect(() => {\n            if (isContentShown) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);\n\n        const portal = useMemo(\n            () =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isContentShown && (\n                            <ContextMenuContent\n                                coordinates={coordinates ?? internalCoordinates}\n                                items={items}\n                                key={`contextMenu_${uuid}`}\n                                alignment={alignment ?? internalAlignment}\n                                ref={contextMenuContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container\n                ),\n            [\n                container,\n                coordinates,\n                internalCoordinates,\n                internalAlignment,\n                isContentShown,\n                items,\n                alignment,\n                uuid,\n            ]\n        );\n\n        return (\n            <>\n                <StyledContextMenu\n                    className=\"beta-chayns-context-menu\"\n                    onClick={handleClick}\n                    ref={contextMenuRef}\n                >\n                    {children}\n                </StyledContextMenu>\n                {portal}\n            </>\n        );\n    }\n);\n\nContextMenu.displayName = 'ContextMenu';\n\nexport default ContextMenu;\n"],"mappings":";;;;;;AAAA;AACA;AAYA;AACA;AACA;AACA;AACA;AACA;AAAyD;AAAA;AAAA;AAqDzD,MAAMA,WAAW,gBAAG,IAAAC,iBAAU,EAC1B,OAUIC,GAAG,KACF;EAAA,IAVD;IACIC,SAAS;IACTC,QAAQ,gBAAG,6BAAC,aAAI;MAAC,KAAK,EAAE,CAAC,eAAe;IAAE,EAAG;IAC7CC,SAAS,GAAGC,QAAQ,CAACC,IAAI;IACzBC,WAAW;IACXC,KAAK;IACLC,MAAM;IACNC;EACJ,CAAC;EAGD,MAAM,CAACC,mBAAmB,EAAEC,sBAAsB,CAAC,GAAG,IAAAC,eAAQ,EAAyB;IACnFC,CAAC,EAAE,CAAC;IACJC,CAAC,EAAE;EACP,CAAC,CAAC;EACF,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAG,IAAAJ,eAAQ,EACtDK,+BAAoB,CAACC,OAAO,CAC/B;EACD,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAR,eAAQ,EAAC,KAAK,CAAC;EAE3D,MAAMS,IAAI,GAAG,IAAAC,aAAO,GAAE;;EAEtB;EACA,MAAMC,qBAAqB,GAAG,IAAAC,aAAM,EAAiB,IAAI,CAAC;EAC1D,MAAMC,cAAc,GAAG,IAAAD,aAAM,EAAkB,IAAI,CAAC;EAEpD,MAAME,UAAU,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACjCP,iBAAiB,CAAC,KAAK,CAAC;EAC5B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMQ,UAAU,GAAG,IAAAD,kBAAW,EAAC,YAAY;IACvC,MAAM;MAAEE,QAAQ;MAAEC;IAAS,CAAC,GAAGC,MAAM,CAACC,GAAG;IAEzC,IAAIH,QAAQ,IAAIC,QAAQ,EAAE;MAAA;MACtB;MACA,MAAM;QAAEG,UAAU;QAAEC;MAAU,CAAC,GAAG,MAAMH,MAAM,CAACI,MAAM,CAACC,MAAM,CAAC;QACzDC,OAAO,EAAE,EAAE;QACXC,IAAI,EAAE/B,KAAK,CAACgC,GAAG,CAAC,QAAkBC,KAAK;UAAA,IAAtB;YAAEC,KAAK;YAAEC;UAAK,CAAC;UAAA,OAAa;YACzCC,IAAI,EAAED,IAAI;YACVE,KAAK,EAAEJ,KAAK;YACZK,IAAI,EAAEJ,KAAK,CAAC,CAAC;UACjB,CAAC;QAAA,CAAC,CAAC;QACHK,IAAI,EAAE;MACV,CAAC,CAAC;MAEF,IAAIb,UAAU,KAAK,CAAC,IAAI,uBAAOC,SAAS,CAAC,CAAC,CAAC,gDAAZ,YAAcU,KAAK,MAAK,QAAQ,EAAE;QAAA;QAC7D,yBAAArC,KAAK,CAAC2B,SAAS,CAAC,CAAC,CAAC,CAACU,KAAK,CAAC,0DAAzB,sBAA2BG,OAAO,EAAE;MACxC;IACJ,CAAC,MAAM,IAAItB,cAAc,CAACuB,OAAO,EAAE;MAC/B,MAAMC,WAAW,GAAG7C,QAAQ,CAAC8C,aAAa,CAAC,OAAO,CAAC,IAAI9C,QAAQ,CAACC,IAAI;MAEpE,MAAM;QACFQ,CAAC;QACDC,CAAC;QACDqC,MAAM,EAAEC,cAAc;QACtBC,KAAK,EAAEC;MACX,CAAC,GAAG7B,cAAc,CAACuB,OAAO,CAACO,qBAAqB,EAAE;MAElD5C,sBAAsB,CAAC;QAAEE,CAAC,EAAEA,CAAC,GAAGyC,aAAa,GAAG,CAAC;QAAExC,CAAC,EAAEA,CAAC,GAAGsC,cAAc,GAAG;MAAE,CAAC,CAAC;MAE/E,MAAM;QAAED,MAAM;QAAEE;MAAM,CAAC,GAAGJ,WAAW,CAACM,qBAAqB,EAAE;MAE7D,IAAI1C,CAAC,GAAGwC,KAAK,GAAG,CAAC,EAAE;QACf,IAAIvC,CAAC,GAAGqC,MAAM,GAAG,CAAC,EAAE;UAChBnC,oBAAoB,CAACC,+BAAoB,CAACuC,WAAW,CAAC;QAC1D,CAAC,MAAM;UACHxC,oBAAoB,CAACC,+BAAoB,CAACwC,QAAQ,CAAC;QACvD;MACJ,CAAC,MAAM,IAAI3C,CAAC,GAAGqC,MAAM,GAAG,CAAC,EAAE;QACvBnC,oBAAoB,CAACC,+BAAoB,CAACyC,UAAU,CAAC;MACzD,CAAC,MAAM;QACH1C,oBAAoB,CAACC,+BAAoB,CAACC,OAAO,CAAC;MACtD;MAEAE,iBAAiB,CAAC,IAAI,CAAC;IAC3B;EACJ,CAAC,EAAE,CAACb,KAAK,CAAC,CAAC;EAEX,MAAMoD,WAAW,GAAG,IAAAhC,kBAAW,EAC1BiC,KAAK,IAAK;IACPA,KAAK,CAACC,cAAc,EAAE;IACtBD,KAAK,CAACE,eAAe,EAAE;IAEvB,KAAKlC,UAAU,EAAE;EACrB,CAAC,EACD,CAACA,UAAU,CAAC,CACf;EAED,MAAMmC,mBAAmB,GAAG,IAAApC,kBAAW,EAClCiC,KAAK,IAAK;IAAA;IACP,IAAI,2BAACrC,qBAAqB,CAACyB,OAAO,kDAA7B,sBAA+BgB,QAAQ,CAACJ,KAAK,CAACK,MAAM,CAAS,GAAE;MAChEL,KAAK,CAACC,cAAc,EAAE;MACtBD,KAAK,CAACE,eAAe,EAAE;IAC3B;IAEApC,UAAU,EAAE;EAChB,CAAC,EACD,CAACA,UAAU,CAAC,CACf;EAED,IAAAwC,0BAAmB,EACflE,GAAG,EACH,OAAO;IACHmE,IAAI,EAAEzC,UAAU;IAChB0C,IAAI,EAAExC;EACV,CAAC,CAAC,EACF,CAACF,UAAU,EAAEE,UAAU,CAAC,CAC3B;EAED,IAAAyC,gBAAS,EAAC,MAAM;IACZ,IAAIlD,cAAc,EAAE;MAChBf,QAAQ,CAACkE,gBAAgB,CAAC,OAAO,EAAEP,mBAAmB,EAAE,IAAI,CAAC;MAC7DQ,MAAM,CAACD,gBAAgB,CAAC,MAAM,EAAE5C,UAAU,CAAC;MAE3C,IAAI,OAAOjB,MAAM,KAAK,UAAU,EAAE;QAC9BA,MAAM,EAAE;MACZ;IACJ,CAAC,MAAM,IAAI,OAAOD,MAAM,KAAK,UAAU,EAAE;MACrCA,MAAM,EAAE;IACZ;IAEA,OAAO,MAAM;MACTJ,QAAQ,CAACoE,mBAAmB,CAAC,OAAO,EAAET,mBAAmB,EAAE,IAAI,CAAC;MAChEQ,MAAM,CAACC,mBAAmB,CAAC,MAAM,EAAE9C,UAAU,CAAC;IAClD,CAAC;EACL,CAAC,EAAE,CAACqC,mBAAmB,EAAErC,UAAU,EAAEP,cAAc,EAAEX,MAAM,EAAEC,MAAM,CAAC,CAAC;EAErE,MAAMgE,MAAM,GAAG,IAAAC,cAAO,EAClB,mBACI,IAAAC,sBAAY,gBACR,6BAAC,6BAAe;IAAC,OAAO,EAAE;EAAM,GAC3BxD,cAAc,iBACX,6BAAC,2BAAkB;IACf,WAAW,EAAEb,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAII,mBAAoB;IAChD,KAAK,EAAEH,KAAM;IACb,GAAG,EAAG,eAAcc,IAAK,EAAE;IAC3B,SAAS,EAAEpB,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIc,iBAAkB;IAC1C,GAAG,EAAEQ;EAAsB,EAElC,CACa,EAClBpB,SAAS,CACZ,EACL,CACIA,SAAS,EACTG,WAAW,EACXI,mBAAmB,EACnBK,iBAAiB,EACjBI,cAAc,EACdZ,KAAK,EACLN,SAAS,EACToB,IAAI,CACP,CACJ;EAED,oBACI,yEACI,6BAAC,8BAAiB;IACd,SAAS,EAAC,0BAA0B;IACpC,OAAO,EAAEsC,WAAY;IACrB,GAAG,EAAElC;EAAe,GAEnBvB,QAAQ,CACO,EACnBuE,MAAM,CACR;AAEX,CAAC,CACJ;AAED3E,WAAW,CAAC8E,WAAW,GAAG,aAAa;AAAC,eAEzB9E,WAAW;AAAA"}

package/lib/components/context-menu/ContextMenu.styles.js

@@ -4,16 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledContextMenu = void 0;
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject;
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-const StyledContextMenu = _styledComponents.default.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n"])));
-
+const StyledContextMenu = _styledComponents.default.span`
+    cursor: pointer;
+`;
 exports.StyledContextMenu = StyledContextMenu;
 //# sourceMappingURL=ContextMenu.styles.js.map

package/lib/components/context-menu/ContextMenu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.styles.js","names":["StyledContextMenu","styled","span"],"sources":["../../../src/components/context-menu/ContextMenu.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledContextMenu = styled.span`\n    cursor: pointer;\n`;\n"],"mappings":";;;;;;;AAAA;;;;;;;;AAEO,MAAMA,iBAAiB,GAAGC,yBAAA,CAAOC,IAAV,6FAAvB"}
+{"version":3,"file":"ContextMenu.styles.js","names":["StyledContextMenu","styled","span"],"sources":["../../../src/components/context-menu/ContextMenu.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledContextMenu = styled.span`\n    cursor: pointer;\n`;\n"],"mappings":";;;;;;AAAA;AAAuC;AAEhC,MAAMA,iBAAiB,GAAGC,yBAAM,CAACC,IAAK;AAC7C;AACA,CAAC;AAAC"}

package/lib/components/context-menu/constants/alignment.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.ContextMenuAlignment = void 0;
 let ContextMenuAlignment;
 exports.ContextMenuAlignment = ContextMenuAlignment;
-
 (function (ContextMenuAlignment) {
   ContextMenuAlignment[ContextMenuAlignment["TopLeft"] = 0] = "TopLeft";
   ContextMenuAlignment[ContextMenuAlignment["BottomLeft"] = 1] = "BottomLeft";

package/lib/components/context-menu/constants/alignment.js.map

@@ -1 +1 @@
-{"version":3,"file":"alignment.js","names":["ContextMenuAlignment"],"sources":["../../../../src/components/context-menu/constants/alignment.ts"],"sourcesContent":["export enum ContextMenuAlignment {\n    TopLeft,\n    BottomLeft,\n    TopRight,\n    BottomRight,\n    TopCenter,\n    BottomCenter,\n}\n"],"mappings":";;;;;;IAAYA,oB;;;WAAAA,oB;EAAAA,oB,CAAAA,oB;EAAAA,oB,CAAAA,oB;EAAAA,oB,CAAAA,oB;EAAAA,oB,CAAAA,oB;EAAAA,oB,CAAAA,oB;EAAAA,oB,CAAAA,oB;GAAAA,oB,oCAAAA,oB"}
+{"version":3,"file":"alignment.js","names":["ContextMenuAlignment"],"sources":["../../../../src/components/context-menu/constants/alignment.ts"],"sourcesContent":["export enum ContextMenuAlignment {\n    TopLeft,\n    BottomLeft,\n    TopRight,\n    BottomRight,\n    TopCenter,\n    BottomCenter,\n}\n"],"mappings":";;;;;;IAAYA,oBAAoB;AAAA;AAAA,WAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;EAApBA,oBAAoB,CAApBA,oBAAoB;AAAA,GAApBA,oBAAoB,oCAApBA,oBAAoB"}

package/lib/components/context-menu/context-menu-content/ContextMenuContent.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Icon = _interopRequireDefault(require("../../icon/Icon"));
-
 var _alignment = require("../constants/alignment");
-
 var _ContextMenuContent = require("./ContextMenuContent.styles");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const ContextMenuContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     alignment,
@@ -55,7 +49,13 @@ const ContextMenuContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
       let {
         y = '0px'
       } = _ref2;
-      return "\n                    translateX(".concat(percentageOffsetX, "%)\n                    translateY(").concat(percentageOffsetY, "%)\n                    translateX(").concat(anchorOffsetX, "px)\n                    translateY(").concat(anchorOffsetY, "px)\n                    translateY(").concat(y, ")\n                ");
+      return `
+                    translateX(${percentageOffsetX}%)
+                    translateY(${percentageOffsetY}%)
+                    translateX(${anchorOffsetX}px)
+                    translateY(${anchorOffsetY}px)
+                    translateY(${y})
+                `;
     }
   }, items.map(_ref3 => {
     let {
@@ -72,7 +72,6 @@ const ContextMenuContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     })), /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItemText, null, text));
   }));
 });
-
 ContextMenuContent.displayName = 'ContextMenuContent';
 var _default = ContextMenuContent;
 exports.default = _default;

package/lib/components/context-menu/context-menu-content/ContextMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuContent.js","names":["ContextMenuContent","React","forwardRef","ref","alignment","coordinates","items","isBottomLeftAlignment","ContextMenuAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","opacity","y","left","x","top","type","map","icons","key","onClick","text","displayName"],"sources":["../../../../src/components/context-menu/context-menu-content/ContextMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport Icon from '../../icon/Icon';\nimport { ContextMenuAlignment } from '../constants/alignment';\nimport type { ContextMenuCoordinates, ContextMenuItem } from '../ContextMenu';\nimport {\n    StyledContextMenuContentItem,\n    StyledContextMenuContentItemIconWrapper,\n    StyledContextMenuContentItemText,\n    StyledMotionContextMenuContent,\n} from './ContextMenuContent.styles';\n\ntype ContextMenuContentProps = {\n    alignment: ContextMenuAlignment;\n    coordinates: ContextMenuCoordinates;\n    items: ContextMenuItem[];\n};\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n    ({ alignment, coordinates, items }, ref) => {\n        const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;\n        const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionContextMenuContent\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                position={alignment}\n                ref={ref}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                {items.map(({ icons, key, onClick, text }) => (\n                    <StyledContextMenuContentItem key={key} onClick={onClick}>\n                        <StyledContextMenuContentItemIconWrapper>\n                            <Icon icons={icons} />\n                        </StyledContextMenuContentItemIconWrapper>\n                        <StyledContextMenuContentItemText>{text}</StyledContextMenuContentItemText>\n                    </StyledContextMenuContentItem>\n                ))}\n            </StyledMotionContextMenuContent>\n        );\n    }\n);\n\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport default ContextMenuContent;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;AAaA,MAAMA,kBAAkB,gBAAGC,cAAA,CAAMC,UAAN,CACvB,OAAoCC,GAApC,KAA4C;EAAA,IAA3C;IAAEC,SAAF;IAAaC,WAAb;IAA0BC;EAA1B,CAA2C;EACxC,MAAMC,qBAAqB,GAAGH,SAAS,KAAKI,+BAAA,CAAqBC,UAAjE;EACA,MAAMC,kBAAkB,GAAGN,SAAS,KAAKI,+BAAA,CAAqBG,OAA9D;EACA,MAAMC,mBAAmB,GAAGR,SAAS,KAAKI,+BAAA,CAAqBK,QAA/D;EAEA,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAzB,GAA8C,CAAC,GAA/C,GAAqD,CAA/E;EACA,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAvB,GAA4C,CAAC,GAA7C,GAAmD,CAA7E;EAEA,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAzB,GAA8C,EAA9C,GAAmD,CAAC,EAA1E;EACA,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAvB,GAA4C,CAAC,EAA7C,GAAkD,EAAxE;EAEA,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAtB,GAA4C,CAAC,EAA7C,GAAkD,EAA1E;EAEA,oBACI,6BAAC,kDAAD;IACI,OAAO,EAAE;MAAEO,OAAO,EAAE,CAAX;MAAcC,CAAC,EAAE;IAAjB,CADb;IAEI,IAAI,EAAE;MAAED,OAAO,EAAE,CAAX;MAAcC,CAAC,EAAEF;IAAjB,CAFV;IAGI,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAX;MAAcC,CAAC,EAAEF;IAAjB,CAHb;IAII,QAAQ,EAAEd,SAJd;IAKI,GAAG,EAAED,GALT;IAMI,KAAK,EAAE;MAAEkB,IAAI,EAAEhB,WAAW,CAACiB,CAApB;MAAuBC,GAAG,EAAElB,WAAW,CAACe;IAAxC,CANX;IAOI,UAAU,EAAE;MAAEI,IAAI,EAAE;IAAR,CAPhB;IAQI,iBAAiB,EAAE;MAAA,IAAC;QAAEJ,CAAC,GAAG;MAAN,CAAD;MAAA,kDACFN,iBADE,gDAEFC,iBAFE,gDAGFC,aAHE,iDAIFC,aAJE,iDAKFG,CALE;IAAA;EARvB,GAgBKd,KAAK,CAACmB,GAAN,CAAU;IAAA,IAAC;MAAEC,KAAF;MAASC,GAAT;MAAcC,OAAd;MAAuBC;IAAvB,CAAD;IAAA,oBACP,6BAAC,gDAAD;MAA8B,GAAG,EAAEF,GAAnC;MAAwC,OAAO,EAAEC;IAAjD,gBACI,6BAAC,2DAAD,qBACI,6BAAC,aAAD;MAAM,KAAK,EAAEF;IAAb,EADJ,CADJ,eAII,6BAAC,oDAAD,QAAmCG,IAAnC,CAJJ,CADO;EAAA,CAAV,CAhBL,CADJ;AA2BH,CAzCsB,CAA3B;;AA4CA7B,kBAAkB,CAAC8B,WAAnB,GAAiC,oBAAjC;eAEe9B,kB"}
+{"version":3,"file":"ContextMenuContent.js","names":["ContextMenuContent","React","forwardRef","ref","alignment","coordinates","items","isBottomLeftAlignment","ContextMenuAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","opacity","y","left","x","top","type","map","icons","key","onClick","text","displayName"],"sources":["../../../../src/components/context-menu/context-menu-content/ContextMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport Icon from '../../icon/Icon';\nimport { ContextMenuAlignment } from '../constants/alignment';\nimport type { ContextMenuCoordinates, ContextMenuItem } from '../ContextMenu';\nimport {\n    StyledContextMenuContentItem,\n    StyledContextMenuContentItemIconWrapper,\n    StyledContextMenuContentItemText,\n    StyledMotionContextMenuContent,\n} from './ContextMenuContent.styles';\n\ntype ContextMenuContentProps = {\n    alignment: ContextMenuAlignment;\n    coordinates: ContextMenuCoordinates;\n    items: ContextMenuItem[];\n};\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n    ({ alignment, coordinates, items }, ref) => {\n        const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;\n        const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionContextMenuContent\n                animate={{ opacity: 1, y: 0 }}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                position={alignment}\n                ref={ref}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                {items.map(({ icons, key, onClick, text }) => (\n                    <StyledContextMenuContentItem key={key} onClick={onClick}>\n                        <StyledContextMenuContentItemIconWrapper>\n                            <Icon icons={icons} />\n                        </StyledContextMenuContentItemIconWrapper>\n                        <StyledContextMenuContentItemText>{text}</StyledContextMenuContentItemText>\n                    </StyledContextMenuContentItem>\n                ))}\n            </StyledMotionContextMenuContent>\n        );\n    }\n);\n\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport default ContextMenuContent;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAEA;AAKqC;AAQrC,MAAMA,kBAAkB,gBAAGC,cAAK,CAACC,UAAU,CACvC,OAAoCC,GAAG,KAAK;EAAA,IAA3C;IAAEC,SAAS;IAAEC,WAAW;IAAEC;EAAM,CAAC;EAC9B,MAAMC,qBAAqB,GAAGH,SAAS,KAAKI,+BAAoB,CAACC,UAAU;EAC3E,MAAMC,kBAAkB,GAAGN,SAAS,KAAKI,+BAAoB,CAACG,OAAO;EACrE,MAAMC,mBAAmB,GAAGR,SAAS,KAAKI,+BAAoB,CAACK,QAAQ;EAEvE,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACI,6BAAC,kDAA8B;IAC3B,OAAO,EAAE;MAAEO,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9B,IAAI,EAAE;MAAED,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEF;IAAgB,CAAE;IACzC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEF;IAAgB,CAAE;IAC5C,QAAQ,EAAEd,SAAU;IACpB,GAAG,EAAED,GAAI;IACT,KAAK,EAAE;MAAEkB,IAAI,EAAEhB,WAAW,CAACiB,CAAC;MAAEC,GAAG,EAAElB,WAAW,CAACe;IAAE,CAAE;IACnD,UAAU,EAAE;MAAEI,IAAI,EAAE;IAAQ,CAAE;IAC9B,iBAAiB,EAAE;MAAA,IAAC;QAAEJ,CAAC,GAAG;MAAM,CAAC;MAAA,OAAM;AACvD,iCAAiCN,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCG,CAAE;AACnC,iBAAiB;IAAA;EAAC,GAEDd,KAAK,CAACmB,GAAG,CAAC;IAAA,IAAC;MAAEC,KAAK;MAAEC,GAAG;MAAEC,OAAO;MAAEC;IAAK,CAAC;IAAA,oBACrC,6BAAC,gDAA4B;MAAC,GAAG,EAAEF,GAAI;MAAC,OAAO,EAAEC;IAAQ,gBACrD,6BAAC,2DAAuC,qBACpC,6BAAC,aAAI;MAAC,KAAK,EAAEF;IAAM,EAAG,CACgB,eAC1C,6BAAC,oDAAgC,QAAEG,IAAI,CAAoC,CAChD;EAAA,CAClC,CAAC,CAC2B;AAEzC,CAAC,CACJ;AAED7B,kBAAkB,CAAC8B,WAAW,GAAG,oBAAoB;AAAC,eAEvC9B,kBAAkB;AAAA"}