@chayns-components/core 5.0.0-beta.16 → 5.0.0-beta.160

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

@@ -1,98 +1,58 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 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 _getRequireWildcardCache(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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-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) {
+var _font = require("./font");
+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; }
+var ColorMode = /*#__PURE__*/function (ColorMode) {
   ColorMode[ColorMode["Classic"] = 0] = "Classic";
   ColorMode[ColorMode["Dark"] = 1] = "Dark";
   ColorMode[ColorMode["Light"] = 2] = "Light";
-})(ColorMode || (ColorMode = {}));
-
-var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .ellipsis {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n"])));
-
-var ColorSchemeProvider = function ColorSchemeProvider(_ref) {
-  var children = _ref.children,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? '#005EB8' : _ref$color,
-      _ref$colorMode = _ref.colorMode,
-      colorMode = _ref$colorMode === void 0 ? ColorMode.Classic : _ref$colorMode,
-      _ref$cssVariables = _ref.cssVariables,
-      cssVariables = _ref$cssVariables === void 0 ? {} : _ref$cssVariables,
-      secondaryColor = _ref.secondaryColor,
-      _ref$style = _ref.style,
-      style = _ref$style === void 0 ? {} : _ref$style;
-
-  var _useState = (0, _react.useState)({}),
-      _useState2 = _slicedToArray(_useState, 2),
-      colors = _useState2[0],
-      setColors = _useState2[1];
-
-  var _useState3 = (0, _react.useState)({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      themeColors = _useState4[0],
-      setThemeColors = _useState4[1];
-
-  (0, _react.useEffect)(function () {
-    var availableColors = (0, _colors.getAvailableColorList)();
-    var newColors = {};
-    var newThemeColors = {};
-    availableColors.forEach(function (colorName) {
-      var hexColor = (0, _colors.getColorFromPalette)(colorName, {
-        color: color,
-        colorMode: colorMode,
-        secondaryColor: secondaryColor
+  return ColorMode;
+}(ColorMode || {});
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
+  ${_font.generateFontFaces}
+
+  .ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+`;
+const ColorSchemeProvider = _ref => {
+  let {
+    children,
+    color = '#005EB8',
+    colorMode = ColorMode.Classic,
+    cssVariables = {},
+    secondaryColor,
+    style = {}
+  } = _ref;
+  const [colors, setColors] = (0, _react.useState)({});
+  const [themeColors, setThemeColors] = (0, _react.useState)({});
+  (0, _react.useEffect)(() => {
+    const availableColors = (0, _colors.getAvailableColorList)();
+    const newColors = {};
+    const newThemeColors = {};
+    availableColors.forEach(colorName => {
+      const hexColor = (0, _colors.getColorFromPalette)(colorName, {
+        color,
+        colorMode,
+        secondaryColor
       });
-
-      if (colorName === 'text') {// console.debug('textColor', hexColor);
-      }
-
       if (hexColor) {
-        var rgbColor = (0, _colors.hexToRgb255)(hexColor);
-        newColors["--chayns-color--".concat(colorName)] = hexColor;
+        const rgbColor = (0, _colors.hexToRgb255)(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}`;
         }
       }
     });
@@ -102,10 +62,13 @@ var ColorSchemeProvider = function ColorSchemeProvider(_ref) {
   return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
     theme: themeColors
   }, /*#__PURE__*/_react.default.createElement("div", {
-    style: _objectSpread(_objectSpread(_objectSpread({}, colors), cssVariables), style)
+    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,"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"names":["ColorMode","GlobalStyle","createGlobalStyle","ColorSchemeProvider","children","color","colorMode","Classic","cssVariables","secondaryColor","style","colors","setColors","themeColors","setThemeColors","availableColors","newColors","newThemeColors","forEach","colorName","hexColor","rgbColor","r","g","b","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAEKA,S;;WAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;AAAAA,EAAAA,S,CAAAA,S;GAAAA,S,KAAAA,S;;AAyCL,IAAMC,WAAW,OAAGC,mCAAH,qLAAjB;;AAQA,IAAMC,mBAAiD,GAAG,SAApDA,mBAAoD,OAOpD;AAAA,MANFC,QAME,QANFA,QAME;AAAA,wBALFC,KAKE;AAAA,MALFA,KAKE,2BALM,SAKN;AAAA,4BAJFC,SAIE;AAAA,MAJFA,SAIE,+BAJUN,SAAS,CAACO,OAIpB;AAAA,+BAHFC,YAGE;AAAA,MAHFA,YAGE,kCAHa,EAGb;AAAA,MAFFC,cAEE,QAFFA,cAEE;AAAA,wBADFC,KACE;AAAA,MADFA,KACE,2BADM,EACN;;AACF,kBAA4B,qBAAgB,EAAhB,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,mBAAsC,qBAAgB,EAAhB,CAAtC;AAAA;AAAA,MAAOC,WAAP;AAAA,MAAoBC,cAApB;;AAEA,wBAAU,YAAM;AACZ,QAAMC,eAAe,GAAG,oCAAxB;AAEA,QAAMC,SAAgB,GAAG,EAAzB;AACA,QAAMC,cAAqB,GAAG,EAA9B;AAEAF,IAAAA,eAAe,CAACG,OAAhB,CAAwB,UAACC,SAAD,EAAuB;AAC3C,UAAMC,QAAQ,GAAG,iCAAoBD,SAApB,EAA+B;AAC5Cd,QAAAA,KAAK,EAALA,KAD4C;AAE5CC,QAAAA,SAAS,EAATA,SAF4C;AAG5CG,QAAAA,cAAc,EAAdA;AAH4C,OAA/B,CAAjB;;AAMA,UAAIU,SAAS,KAAK,MAAlB,EAA0B,CACtB;AACH;;AAED,UAAIC,QAAJ,EAAc;AACV,YAAMC,QAAQ,GAAG,yBAAYD,QAAZ,CAAjB;AAEAJ,QAAAA,SAAS,2BAAoBG,SAApB,EAAT,GAA4CC,QAA5C;AACAH,QAAAA,cAAc,CAACE,SAAD,CAAd,GAA4BC,QAA5B;;AAEA,YAAIC,QAAJ,EAAc;AACVL,UAAAA,SAAS,+BACkBG,SADlB,EAAT,aAEOE,QAAQ,CAACC,CAFhB,eAEsBD,QAAQ,CAACE,CAF/B,eAEqCF,QAAQ,CAACG,CAF9C;AAGAP,UAAAA,cAAc,WACPE,SADO,UAAd,aAEOE,QAAQ,CAACC,CAFhB,eAEsBD,QAAQ,CAACE,CAF/B,eAEqCF,QAAQ,CAACG,CAF9C;AAGH;AACJ;AACJ,KA1BD;AA4BAZ,IAAAA,SAAS,CAACI,SAAD,CAAT;AACAF,IAAAA,cAAc,CAACG,cAAD,CAAd;AACH,GApCD,EAoCG,CAACZ,KAAD,EAAQC,SAAR,EAAmBG,cAAnB,CApCH;AAsCA,sBACI,6BAAC,+BAAD;AAAe,IAAA,KAAK,EAAEI;AAAtB,kBACI;AAAK,IAAA,KAAK,gDAAOF,MAAP,GAAkBH,YAAlB,GAAmCE,KAAnC;AAAV,KAAuDN,QAAvD,CADJ,eAEI,6BAAC,WAAD,OAFJ,CADJ;AAMH,CAvDD;;AAyDAD,mBAAmB,CAACsB,WAApB,GAAkC,qBAAlC;eAEetB,mB","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 (colorName === 'text') {\n                // console.debug('textColor', hexColor);\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"],"file":"ColorSchemeProvider.js"}
+{"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_react","_interopRequireWildcard","_styledComponents","_font","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ColorMode","GlobalStyle","createGlobalStyle","generateFontFaces","ColorSchemeProvider","_ref","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","createElement","ThemeProvider","theme","displayName","_default","exports"],"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';\nimport { generateFontFaces } from './font';\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  ${generateFontFaces}\n\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":"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"}

package/lib/components/color-scheme-provider/font.d.ts

@@ -0,0 +1,6 @@
+export interface Font {
+    family: string;
+    src: string;
+    unicodeRange?: string;
+}
+export declare const generateFontFaces: () => string;

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.generateFontFaces = void 0;
+const fonts = [{
+  family: 'Noto Color Emoji',
+  src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.0.woff2',
+  unicodeRange: 'U+1f1e6-1f1ff'
+}, {
+  family: 'Noto Color Emoji',
+  src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.1.woff2',
+  unicodeRange: 'U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f'
+}, {
+  family: 'Noto Color Emoji',
+  src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.2.woff2',
+  unicodeRange: 'U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4a2, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f50a, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9e1, U+1fa75-1fa77, U+1faaf'
+}, {
+  family: 'Noto Color Emoji',
+  src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.3.woff2',
+  unicodeRange: 'U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f50b-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae'
+}, {
+  family: 'Noto Color Emoji',
+  src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.4.woff2',
+  unicodeRange: 'U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa88, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9'
+}, {
+  family: 'Noto Color Emoji',
+  src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.5.woff2',
+  unicodeRange: 'U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c'
+}, {
+  family: 'Noto Color Emoji',
+  src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.6.woff2',
+  unicodeRange: 'U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f345-1f37f, U+1f382, U+1f52a, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadb'
+}, {
+  family: 'Noto Color Emoji',
+  src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.7.woff2',
+  unicodeRange: 'U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ab, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabd, U+1fabf, U+1face-1facf, U+1fae7'
+}, {
+  family: 'Noto Color Emoji',
+  src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.8.woff2',
+  unicodeRange: 'U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f466-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa82, U+1fac3-1fac5'
+}, {
+  family: 'Noto Color Emoji',
+  src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.9.woff2',
+  unicodeRange: 'U+200d, U+261d, U+2620, U+2639-263a, U+2665, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f383, U+1f389, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fae0-1fae6, U+1fae8, U+1faf0-1faf8'
+}];
+const generateFontFaces = () => fonts.map(font => `
+  @font-face {
+    font-display: swap;
+    font-family: "${font.family}";
+    font-style: normal;
+    font-weight: 400;
+    src: url("${font.src}") format("woff2");
+    ${font.unicodeRange ? `unicode-range: ${font.unicodeRange};` : ''}
+  }
+`).join('');
+exports.generateFontFaces = generateFontFaces;
+//# sourceMappingURL=font.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"font.js","names":["fonts","family","src","unicodeRange","generateFontFaces","map","font","join","exports"],"sources":["../../../src/components/color-scheme-provider/font.ts"],"sourcesContent":["export interface Font {\n    family: string;\n    src: string;\n    unicodeRange?: string;\n}\n\nconst fonts: Font[] = [\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.0.woff2',\n        unicodeRange: 'U+1f1e6-1f1ff',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.1.woff2',\n        unicodeRange:\n            'U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.2.woff2',\n        unicodeRange:\n            'U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4a2, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f50a, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9e1, U+1fa75-1fa77, U+1faaf',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.3.woff2',\n        unicodeRange:\n            'U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f50b-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.4.woff2',\n        unicodeRange:\n            'U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa88, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.5.woff2',\n        unicodeRange:\n            'U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.6.woff2',\n        unicodeRange:\n            'U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f345-1f37f, U+1f382, U+1f52a, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadb',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.7.woff2',\n        unicodeRange:\n            'U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ab, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabd, U+1fabf, U+1face-1facf, U+1fae7',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.8.woff2',\n        unicodeRange:\n            'U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f466-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa82, U+1fac3-1fac5',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.9.woff2',\n        unicodeRange:\n            'U+200d, U+261d, U+2620, U+2639-263a, U+2665, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f383, U+1f389, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fae0-1fae6, U+1fae8, U+1faf0-1faf8',\n    },\n];\n\nexport const generateFontFaces = () =>\n    fonts\n        .map(\n            (font) => `\n  @font-face {\n    font-display: swap;\n    font-family: \"${font.family}\";\n    font-style: normal;\n    font-weight: 400;\n    src: url(\"${font.src}\") format(\"woff2\");\n    ${font.unicodeRange ? `unicode-range: ${font.unicodeRange};` : ''}\n  }\n`\n        )\n        .join('');\n"],"mappings":";;;;;;AAMA,MAAMA,KAAa,GAAG,CAClB;EACIC,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EAAE;AAClB,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,CACJ;AAEM,MAAMC,iBAAiB,GAAGA,CAAA,KAC7BJ,KAAK,CACAK,GAAG,CACCC,IAAI,IAAM;AACvB;AACA;AACA,oBAAoBA,IAAI,CAACL,MAAO;AAChC;AACA;AACA,gBAAgBK,IAAI,CAACJ,GAAI;AACzB,MAAMI,IAAI,CAACH,YAAY,GAAI,kBAAiBG,IAAI,CAACH,YAAa,GAAE,GAAG,EAAG;AACtE;AACA,CACQ,CAAC,CACAI,IAAI,CAAC,EAAE,CAAC;AAACC,OAAA,CAAAJ,iBAAA,GAAAA,iBAAA"}

package/lib/components/context-menu/ContextMenu.d.ts

@@ -0,0 +1,51 @@
+import React, { MouseEvent, ReactNode } from 'react';
+import { ContextMenuAlignment } from './constants/alignment';
+export type ContextMenuCoordinates = {
+    x: number;
+    y: number;
+};
+export type ContextMenuItem = {
+    icons: string[];
+    key: string;
+    onClick: (event?: MouseEvent<HTMLDivElement>) => void;
+    text: string;
+};
+type ContextMenuRef = {
+    hide: VoidFunction;
+    show: VoidFunction;
+};
+type ContextMenuProps = {
+    /**
+     * Optional custom alignment used instead of calculating it using the
+     * alignment within the page. The available alignment can be taken from the
+     * ContextMenuAlignment enum.
+     */
+    alignment?: ContextMenuAlignment;
+    /**
+     * The element over which the content of the `ContextMenu` should be displayed.
+     */
+    children?: ReactNode;
+    /**
+     * The element where the content of the `ContextMenu` should be rendered via React Portal.
+     */
+    container?: Element;
+    /**
+     * Optional own coordinates to be used instead of calculating the alignment
+     * based on the alignment of the children.
+     */
+    coordinates?: ContextMenuCoordinates;
+    /**
+     * The items that will be displayed in the content of the `ContextMenu`.
+     */
+    items: ContextMenuItem[];
+    /**
+     * Function to be executed when the content of the Context menu has been hidden.
+     */
+    onHide?: VoidFunction;
+    /**
+     * Function to be executed when the content of the Context menu has been shown.
+     */
+    onShow?: VoidFunction;
+};
+declare const ContextMenu: React.ForwardRefExoticComponent<ContextMenuProps & React.RefAttributes<ContextMenuRef>>;
+export default ContextMenu;

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

@@ -0,0 +1,157 @@
+"use strict";
+
+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,
+    children = /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      icons: ['ts-ellipsis_v']
+    }),
+    container = document.body,
+    coordinates,
+    items,
+    onHide,
+    onShow
+  } = _ref;
+  const [internalCoordinates, setInternalCoordinates] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const [internalAlignment, setInternalAlignment] = (0, _react.useState)(_alignment.ContextMenuAlignment.TopLeft);
+  const [isContentShown, setIsContentShown] = (0, _react.useState)(false);
+  const [portal, setPortal] = (0, _react.useState)();
+  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)(() => {
+    setIsContentShown(false);
+  }, []);
+  const handleShow = (0, _react.useCallback)(async () => {
+    const {
+      isMobile,
+      isTablet
+    } = chayns.env;
+    if (isMobile || isTablet) {
+      var _selection$;
+      // ToDo: Replace with new api function if new api is ready
+      const {
+        buttonType,
+        selection
+      } = await chayns.dialog.select({
+        buttons: [],
+        list: items.map((_ref2, index) => {
+          let {
+            icons,
+            text
+          } = _ref2;
+          return {
+            name: text,
+            value: index,
+            icon: icons[0]
+          };
+        }),
+        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) {
+      const rootElement = document.querySelector('.tapp') || document.body;
+      const {
+        x,
+        y,
+        height: childrenHeight,
+        width: childrenWidth
+      } = contextMenuRef.current.getBoundingClientRect();
+      setInternalCoordinates({
+        x: x + childrenWidth / 2,
+        y: y + childrenHeight / 2
+      });
+      const {
+        height,
+        width
+      } = rootElement.getBoundingClientRect();
+      if (x < width / 2) {
+        if (y < height / 2) {
+          setInternalAlignment(_alignment.ContextMenuAlignment.BottomRight);
+        } else {
+          setInternalAlignment(_alignment.ContextMenuAlignment.TopRight);
+        }
+      } else if (y < height / 2) {
+        setInternalAlignment(_alignment.ContextMenuAlignment.BottomLeft);
+      } else {
+        setInternalAlignment(_alignment.ContextMenuAlignment.TopLeft);
+      }
+      setIsContentShown(true);
+    }
+  }, [items]);
+  const handleClick = (0, _react.useCallback)(event => {
+    event.preventDefault();
+    event.stopPropagation();
+    void handleShow();
+  }, [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, () => ({
+    hide: handleHide,
+    show: handleShow
+  }), [handleHide, handleShow]);
+  (0, _react.useEffect)(() => {
+    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);
+    };
+  }, [handleDocumentClick, handleHide, isContentShown, onHide, onShow]);
+  (0, _react.useEffect)(() => {
+    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+      initial: false
+    }, isContentShown && /*#__PURE__*/_react.default.createElement(_ContextMenuContent.default, {
+      coordinates: coordinates !== null && coordinates !== void 0 ? coordinates : internalCoordinates,
+      items: items,
+      key: `contextMenu_${uuid}`,
+      alignment: alignment !== null && alignment !== void 0 ? alignment : internalAlignment,
+      ref: contextMenuContentRef
+    })), container));
+  }, [alignment, container, coordinates, internalAlignment, internalCoordinates, isContentShown, items, uuid]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ContextMenu.StyledContextMenu, {
+    className: "beta-chayns-context-menu",
+    onClick: handleClick,
+    ref: contextMenuRef
+  }, children), portal);
+});
+ContextMenu.displayName = 'ContextMenu';
+var _default = ContextMenu;
+exports.default = _default;
+//# sourceMappingURL=ContextMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_reactDom","_uuid","_Icon","_interopRequireDefault","_alignment","_ContextMenuContent","_ContextMenu","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","ContextMenu","forwardRef","_ref","ref","alignment","children","createElement","icons","container","document","body","coordinates","items","onHide","onShow","internalCoordinates","setInternalCoordinates","useState","x","y","internalAlignment","setInternalAlignment","ContextMenuAlignment","TopLeft","isContentShown","setIsContentShown","portal","setPortal","uuid","useUuid","contextMenuContentRef","useRef","contextMenuRef","handleHide","useCallback","handleShow","isMobile","isTablet","chayns","env","_selection$","buttonType","selection","dialog","select","buttons","list","map","_ref2","index","text","name","value","icon","type","_items$selection$0$va","onClick","current","rootElement","querySelector","height","childrenHeight","width","childrenWidth","getBoundingClientRect","BottomRight","TopRight","BottomLeft","handleClick","event","preventDefault","stopPropagation","handleDocumentClick","_contextMenuContentRe","contains","target","useImperativeHandle","hide","show","useEffect","addEventListener","window","removeEventListener","createPortal","AnimatePresence","initial","Fragment","StyledContextMenu","className","displayName","_default","exports"],"sources":["../../../src/components/context-menu/ContextMenu.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    MouseEvent,\n    MouseEventHandler,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\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        const [portal, setPortal] = useState<ReactPortal>();\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        useEffect(() => {\n            setPortal(() =>\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        }, [\n            alignment,\n            container,\n            coordinates,\n            internalAlignment,\n            internalCoordinates,\n            isContentShown,\n            items,\n            uuid,\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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"}

package/lib/components/context-menu/ContextMenu.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledContextMenu: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledContextMenu = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledContextMenu = _styledComponents.default.span`
+    cursor: pointer;
+`;
+exports.StyledContextMenu = StyledContextMenu;
+//# sourceMappingURL=ContextMenu.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledContextMenu","styled","span","exports"],"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,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,iBAAiB,GAAGC,yBAAM,CAACC,IAAK;AAC7C;AACA,CAAC;AAACC,OAAA,CAAAH,iBAAA,GAAAA,iBAAA"}

package/lib/components/context-menu/constants/alignment.d.ts

@@ -0,0 +1,8 @@
+export declare enum ContextMenuAlignment {
+    TopLeft = 0,
+    BottomLeft = 1,
+    TopRight = 2,
+    BottomRight = 3,
+    TopCenter = 4,
+    BottomCenter = 5
+}

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

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContextMenuAlignment = void 0;
+let ContextMenuAlignment = /*#__PURE__*/function (ContextMenuAlignment) {
+  ContextMenuAlignment[ContextMenuAlignment["TopLeft"] = 0] = "TopLeft";
+  ContextMenuAlignment[ContextMenuAlignment["BottomLeft"] = 1] = "BottomLeft";
+  ContextMenuAlignment[ContextMenuAlignment["TopRight"] = 2] = "TopRight";
+  ContextMenuAlignment[ContextMenuAlignment["BottomRight"] = 3] = "BottomRight";
+  ContextMenuAlignment[ContextMenuAlignment["TopCenter"] = 4] = "TopCenter";
+  ContextMenuAlignment[ContextMenuAlignment["BottomCenter"] = 5] = "BottomCenter";
+  return ContextMenuAlignment;
+}({});
+exports.ContextMenuAlignment = ContextMenuAlignment;
+//# sourceMappingURL=alignment.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"alignment.js","names":["ContextMenuAlignment","exports"],"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,0BAApBA,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;EAAA,OAApBA,oBAAoB;AAAA;AAAAC,OAAA,CAAAD,oBAAA,GAAAA,oBAAA"}

package/lib/components/context-menu/context-menu-content/ContextMenuContent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ContextMenuAlignment } from '../constants/alignment';
+import type { ContextMenuCoordinates, ContextMenuItem } from '../ContextMenu';
+type ContextMenuContentProps = {
+    alignment: ContextMenuAlignment;
+    coordinates: ContextMenuCoordinates;
+    items: ContextMenuItem[];
+};
+declare const ContextMenuContent: React.ForwardRefExoticComponent<ContextMenuContentProps & React.RefAttributes<HTMLDivElement>>;
+export default ContextMenuContent;