@majoo-ui/react 2.0.1 → 2.1.0-rc.1

package/components/upload/utils/canvasPreview.esm.js

@@ -0,0 +1,39 @@
+import { __awaiter } from 'tslib';
+
+const TO_RADIANS = Math.PI / 180;
+function canvasPreview(image_1, canvas_1, crop_1) {
+  return __awaiter(this, arguments, void 0, function* (image, canvas, crop, scale = 1, rotate = 0, ratio) {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      throw new Error('No 2d context');
+    }
+    const scaleX = image.naturalWidth / image.width;
+    let scaleY = image.naturalHeight / image.height;
+    if (ratio === 1) {
+      scaleY = scaleX;
+    }
+    const pixelRatio = 1;
+    canvas.width = Math.round(crop.width * scaleX * pixelRatio);
+    canvas.height = Math.round(crop.height * scaleY * pixelRatio);
+    ctx.scale(pixelRatio, pixelRatio);
+    ctx.imageSmoothingQuality = 'high';
+    const cropX = crop.x * scaleX;
+    const cropY = crop.y * scaleY;
+    const rotateRads = rotate * TO_RADIANS;
+    const centerX = image.naturalWidth / 2;
+    let centerY = image.naturalHeight / 2;
+    if (ratio === 1) {
+      centerY = centerX;
+    }
+    ctx.save();
+    ctx.translate(-cropX, -cropY);
+    ctx.translate(centerX, centerY);
+    ctx.rotate(rotateRads);
+    ctx.scale(scale, scale);
+    ctx.translate(-centerX, -centerY);
+    ctx.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight, 0, 0, image.naturalWidth, image.naturalHeight);
+    ctx.restore();
+  });
+}
+
+export { canvasPreview };

package/components/upload/utils/imgPreview.esm.js

@@ -0,0 +1,21 @@
+import { __awaiter } from 'tslib';
+import { canvasPreview } from './canvasPreview.esm.js';
+
+function toBlob(canvas, type) {
+  return new Promise(resolve => {
+    canvas.toBlob(resolve, type);
+  });
+}
+function imgPreview(image_1, crop_1) {
+  return __awaiter(this, arguments, void 0, function* (image, crop, scale = 1, rotate = 0, ratio, type) {
+    if (ratio === 1) {
+      crop.width = crop.height;
+    }
+    const canvas = document.createElement('canvas');
+    canvasPreview(image, canvas, crop, scale, rotate, ratio);
+    const blob = yield toBlob(canvas, type);
+    return blob;
+  });
+}
+
+export { imgPreview };

package/config/stitches.config.esm.js

@@ -0,0 +1,216 @@
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.reduce.js';
+import 'core-js/modules/es.set.difference.v2.js';
+import 'core-js/modules/es.set.intersection.v2.js';
+import 'core-js/modules/es.set.is-disjoint-from.v2.js';
+import 'core-js/modules/es.set.is-subset-of.v2.js';
+import 'core-js/modules/es.set.is-superset-of.v2.js';
+import 'core-js/modules/es.set.symmetric-difference.v2.js';
+import 'core-js/modules/es.set.union.v2.js';
+import { createStitches } from '@stitches/react';
+import { foundations } from '@majoo-ui/core';
+import img$3 from '../components/pageDialog/logo.svg.esm.js';
+import img$2 from '../components/devicePreview/deviceFrame/ic-majoo-profpic.png.esm.js';
+import img$1 from '../components/table/images/img-emptydata.webp.esm.js';
+import img from '../components/table/images/img-emptysearchdata.webp.esm.js';
+
+const {
+  styled,
+  css,
+  globalCss,
+  keyframes,
+  getCssText,
+  theme,
+  createTheme,
+  config
+} = createStitches({
+  theme: {
+    colors: Object.assign({}, foundations.colors),
+    space: Object.assign({}, foundations.space),
+    shadows: Object.assign({}, foundations.shadows),
+    fontSizes: Object.assign({}, foundations.fontSizes),
+    fonts: Object.assign({}, foundations.fonts),
+    fontWeights: Object.assign({}, foundations.fontWeights),
+    lineHeights: Object.assign({}, foundations.lineHeights),
+    letterSpacings: Object.assign({}, foundations.letterSpacings),
+    radii: Object.assign({}, foundations.radii),
+    sizes: Object.assign({}, foundations.sizes),
+    zIndices: Object.assign({}, foundations.zIndices),
+    toastPosition: Object.assign({}, foundations.toastPosition),
+    brandAssets: {
+      logo: `url("${img$3}")`,
+      icon: `url("${img$2}")`,
+      emptyData: `url("${img$1}")`,
+      emptySearchData: `url("${img}")`
+    }
+  },
+  media: {
+    sm: '(min-width: 359px)',
+    md: '(min-width: 767px)',
+    lg: '(min-width: 1023px)',
+    xl: '(min-width: 1199px)',
+    '2xl': '(min-width: 1399px)',
+    '3xl': '(min-width: 1600px)'
+  },
+  utils: {
+    m: value => ({
+      margin: value
+    }),
+    mt: value => ({
+      marginTop: value
+    }),
+    mr: value => ({
+      marginRight: value
+    }),
+    mb: value => ({
+      marginBottom: value
+    }),
+    ml: value => ({
+      marginLeft: value
+    }),
+    mx: value => ({
+      marginLeft: value,
+      marginRight: value
+    }),
+    my: value => ({
+      marginTop: value,
+      marginBottom: value
+    }),
+    size: value => ({
+      width: value,
+      height: value
+    }),
+    subtleColor: value => ({
+      color: `$${value}800`,
+      backgroundColor: `$${value}100`
+    })
+  }
+});
+const darkThemeColors = {
+  bgWhite: '#003030',
+  bgGray: '#003030',
+  bgDark: '#FFFFFF',
+  textPrimary: '#FFFFFF',
+  textSecondary: '#FFFFFF',
+  bgHeader: '#004a48',
+  btnPrimary: '#001f1f',
+  btnSecondary: '#003030',
+  primary50: '#001f1f',
+  primary100: '#001f1f',
+  iconPrimary: '#FFFFFF',
+  bgBorder: '#004a49'
+};
+createTheme({
+  colors: darkThemeColors
+});
+const blueThemeColors = {
+  btnPrimary: '#124FE3',
+  btnHoverPrimary: '#124FE3',
+  btnActivePrimary: '#183B90',
+  textBrand: '#124FE3',
+  primary50: '#EDF2FD',
+  primary100: '#D1DDFA',
+  primary200: '#A3BBF6',
+  primary300: '#6B93F0',
+  primary400: '#3A70EE',
+  primary500: '#124FE3',
+  primary600: '#0D41BA',
+  primary700: '#093395',
+  primary800: '#09276C',
+  primary900: '#081A45',
+  btnNegative: '#D50B3E',
+  btnHoverNegative: '#AF0932',
+  btnActiveNegative: '#880727',
+  textRed: '#D50B3E',
+  btnHoverSecondary: '#EDF2FD',
+  btnActiveSecondary: '#D1DDFA',
+  btnHoverNegativeSecondary: '#FCE9EA',
+  btnActiveNegativeSecondary: '#F5BCC0',
+  gray50: '#F6F8FA',
+  gray100: '#ECEFF5',
+  gray150: '#D6DCE3',
+  gray200: '#D6DCE3',
+  gray300: '#AFBECB',
+  gray400: '#819CB0',
+  gray500: '#627F95',
+  gray600: '#4C677B',
+  gray700: '#3F5264',
+  gray800: '#384655',
+  gray900: '#323C49',
+  textDisable: '#819BAF',
+  bgBorder: '#EBEFF3',
+  textPrimary: '#29323C',
+  textSecondary: '#3F5265',
+  borderFocus: '#BBDDFF',
+  iconBrand: '#124FE3',
+  iconAccent: '#8DC8FF',
+  bgBrand: '#124FE3',
+  iconGreen: '#9BE9D8',
+  borderActive: '#29323C',
+  red50: '#FEF0F3',
+  red100: '#FCD8DE',
+  red200: '#F9A8B4',
+  red300: '#F47689',
+  red400: '#E83D57',
+  red500: '#D50B3E',
+  red600: '#AF0932',
+  red700: '#880727',
+  red800: '#62051C',
+  red900: '#3B0311',
+  red1000: '#1F0209',
+  bgGray: '#F6F8F9',
+  bgSuccess: '#EEFBF4',
+  bgFailed: '#FEF0F4',
+  bgInactive: '#F7F7F8',
+  textGreen: '#17663A',
+  hlFailed: '#D50B3E',
+  hlSuccess: '#56B35F',
+  hlPending: '#F07167',
+  hlNews: '#124FE3',
+  textBlue: '#0075AD',
+  cardBorder: '#EBEFF3',
+  bgSelectedLight: '#EFF7FF',
+  btnSelect: '#29323C',
+  chartBrand: '#124FE3',
+  chartLightBrand: '#EBEFF3',
+  iconPrimary: '#29323C',
+  bgAccent: '#D9EBFF'
+};
+createTheme({
+  colors: blueThemeColors,
+  shadows: {
+    card: 'none'
+  },
+  sizes: {
+    cardLineHeight: '0px'
+  },
+  fontWeights: {
+    cardLabel: '400',
+    cardLabelMd: '400',
+    cardDesc: '700'
+  },
+  fontSizes: {
+    cardLabelMd: '12px',
+    cardDescMd: '14px'
+  },
+  lineHeights: {
+    cardLabelMd: '16px',
+    cardDescMd: '20px'
+  }
+});
+const runtimeColorTokenNames = Array.from(new Set([...Object.keys(foundations.colors), ...Object.keys(darkThemeColors), ...Object.keys(blueThemeColors)]));
+function getRuntimeColorVariable(tokenName) {
+  return `var(--colors-${String(tokenName)})`;
+}
+function buildRuntimeColors() {
+  return runtimeColorTokenNames.reduce((accumulator, tokenName) => {
+    // Some semantic tokens are present in generated CSS variables but omitted from theme.colors at runtime.
+    accumulator[tokenName] = getRuntimeColorVariable(tokenName);
+    return accumulator;
+  }, {});
+}
+// Use CSS variable strings for runtime props passed outside Stitches.
+const runtimeColors = buildRuntimeColors();
+const colors = runtimeColors;
+
+export { colors, config, createTheme, css, getCssText, globalCss, keyframes, styled, theme };

package/editor.esm.js

@@ -1,264 +1 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import { EditorState } from 'draft-js';
-import { Editor } from 'react-draft-wysiwyg';
-import { s as styled } from './stitches.config.esm.js';
-import '@stitches/react';
-import '@majoo-ui/core';
-
-var img$a = "data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M19.375 10L15 14.375L14.1187 13.4938L17.6063 10L14.1187 6.50625L15 5.625L19.375 10ZM0.625 10L5 5.625L5.88125 6.50625L2.39375 10L5.88125 13.4938L5 14.375L0.625 10Z' fill='%23272A2A'/%3e%3c/svg%3e";
-
-var img$9 = "data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M11.4062 15.625H5.625V4.375H10.9375C11.5639 4.37504 12.1771 4.55435 12.7048 4.89174C13.2325 5.22914 13.6526 5.71052 13.9155 6.27903C14.1784 6.84754 14.2731 7.47942 14.1884 8.10001C14.1037 8.72061 13.8431 9.30399 13.4375 9.78125C13.9673 10.205 14.3528 10.7825 14.5408 11.4344C14.7289 12.0862 14.7102 12.7803 14.4875 13.4211C14.2647 14.0619 13.8488 14.6179 13.297 15.0126C12.7452 15.4073 12.0847 15.6213 11.4062 15.625ZM7.5 13.75H11.3937C11.5784 13.75 11.7613 13.7136 11.9319 13.643C12.1025 13.5723 12.2575 13.4687 12.3881 13.3381C12.5187 13.2075 12.6223 13.0525 12.693 12.8819C12.7636 12.7113 12.8 12.5284 12.8 12.3438C12.8 12.1591 12.7636 11.9762 12.693 11.8056C12.6223 11.635 12.5187 11.48 12.3881 11.3494C12.2575 11.2188 12.1025 11.1152 11.9319 11.0445C11.7613 10.9739 11.5784 10.9375 11.3937 10.9375H7.5V13.75ZM7.5 9.0625H10.9375C11.1222 9.0625 11.305 9.02613 11.4756 8.95546C11.6463 8.88478 11.8013 8.7812 11.9319 8.65062C12.0625 8.52004 12.166 8.36501 12.2367 8.1944C12.3074 8.02378 12.3438 7.84092 12.3438 7.65625C12.3438 7.47158 12.3074 7.28872 12.2367 7.1181C12.166 6.94749 12.0625 6.79246 11.9319 6.66188C11.8013 6.5313 11.6463 6.42772 11.4756 6.35704C11.305 6.28637 11.1222 6.25 10.9375 6.25H7.5V9.0625Z' fill='%23272A2A'/%3e%3c/svg%3e";
-
-var img$8 = "data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M15.625 5.625V4.375H7.5V5.625H10.7125L7.98125 14.375H4.375V15.625H12.5V14.375H9.2875L12.0187 5.625H15.625Z' fill='%23272A2A'/%3e%3c/svg%3e";
-
-var img$7 = "data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M2.5 16.25H17.5V17.5H2.5V16.25ZM10 14.375C8.83968 14.375 7.72688 13.9141 6.90641 13.0936C6.08594 12.2731 5.625 11.1603 5.625 10V3.125H6.875V10C6.875 10.8288 7.20424 11.6237 7.79029 12.2097C8.37634 12.7958 9.1712 13.125 10 13.125C10.8288 13.125 11.6237 12.7958 12.2097 12.2097C12.7958 11.6237 13.125 10.8288 13.125 10V3.125H14.375V10C14.375 11.1603 13.9141 12.2731 13.0936 13.0936C12.2731 13.9141 11.1603 14.375 10 14.375Z' fill='%23272A2A'/%3e%3c/svg%3e";
-
-var img$6 = "data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M17.5 9.375H11.2225C10.945 9.30038 10.6662 9.23058 10.3863 9.16562C8.63125 8.75062 7.63875 8.44687 7.63875 7.02625C7.6245 6.78101 7.66081 6.53546 7.74542 6.30484C7.83004 6.07422 7.96115 5.86345 8.13062 5.68562C8.6615 5.24906 9.32644 5.00851 10.0137 5.00437C11.7825 4.96062 12.5981 5.56063 13.265 6.47313L14.2744 5.73563C13.8019 5.0571 13.1578 4.51616 12.4078 4.16807C11.6578 3.81998 10.8288 3.67722 10.0056 3.75437C8.99439 3.76083 8.01887 4.12909 7.25563 4.7925C6.96634 5.08594 6.74024 5.43552 6.59125 5.8197C6.44227 6.20388 6.37356 6.6145 6.38937 7.02625C6.36197 7.4768 6.4466 7.92713 6.63572 8.33699C6.82483 8.74685 7.11254 9.10347 7.47312 9.375H2.5V10.625H11.0325C12.2619 10.9812 12.9969 11.445 13.0156 12.7237C13.0359 12.9969 12.9985 13.2713 12.9056 13.529C12.8128 13.7867 12.6667 14.0219 12.4769 14.2194C11.8155 14.7407 10.9938 15.0166 10.1519 15C9.52345 14.9818 8.90738 14.8209 8.35029 14.5295C7.7932 14.2382 7.30966 13.8239 6.93625 13.3181L5.97812 14.1206C6.46358 14.7676 7.08994 15.2955 7.80972 15.6645C8.52951 16.0334 9.32384 16.2336 10.1325 16.25H10.195C11.3492 16.2633 12.4695 15.8596 13.35 15.1131C13.6625 14.798 13.9054 14.4209 14.0632 14.0061C14.2209 13.5914 14.2898 13.1481 14.2656 12.705C14.289 11.947 14.0332 11.2069 13.5469 10.625H17.5V9.375Z' fill='%23272A2A'/%3e%3c/svg%3e";
-
-var img$5 = "data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18.3988 10.3575L13.4081 5.36625C13.1736 5.13187 12.8556 5.00021 12.5241 5.00021C12.1925 5.00021 11.8745 5.13187 11.64 5.36625L8.29125 8.715L5.625 1.25H4.375L1.25 10H2.5L3.12438 8.125H6.87437L7.37625 9.63L2.86625 14.14C2.75012 14.2561 2.658 14.3939 2.59515 14.5456C2.5323 14.6973 2.49995 14.8599 2.49995 15.0241C2.49995 15.1883 2.5323 15.3508 2.59515 15.5025C2.658 15.6542 2.75012 15.792 2.86625 15.9081L5.7075 18.75H11.7013L18.3988 12.0519C18.5101 11.9406 18.5984 11.8085 18.6587 11.6631C18.719 11.5177 18.75 11.3618 18.75 11.2044C18.75 11.047 18.719 10.8911 18.6587 10.7457C18.5984 10.6003 18.5101 10.4681 18.3988 10.3569V10.3575ZM3.54063 6.875L4.9975 2.5L6.4575 6.875H3.54063ZM11.1844 17.5H6.225L3.75 15.0238L7.695 11.0794L12.65 16.0337L11.1844 17.5ZM13.5344 15.15L8.57938 10.1956L12.5244 6.25L17.4788 11.2044L13.5344 15.15Z' fill='%23272A2A'/%3e%3c/svg%3e";
-
-var img$4 = "data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.5 6.25H4.88438L7.12625 4.00875L6.25 3.125L2.5 6.875L6.25 10.625L7.12625 9.74062L4.88625 7.5H12.5C13.4946 7.5 14.4484 7.89509 15.1517 8.59835C15.8549 9.30161 16.25 10.2554 16.25 11.25C16.25 12.2446 15.8549 13.1984 15.1517 13.9017C14.4484 14.6049 13.4946 15 12.5 15H7.5V16.25H12.5C13.8261 16.25 15.0979 15.7232 16.0355 14.7855C16.9732 13.8479 17.5 12.5761 17.5 11.25C17.5 9.92392 16.9732 8.65215 16.0355 7.71447C15.0979 6.77678 13.8261 6.25 12.5 6.25Z' fill='%23272A2A'/%3e%3c/svg%3e";
-
-var img$3 = "data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.5 6.25H15.1156L12.8737 4.00875L13.75 3.125L17.5 6.875L13.75 10.625L12.8737 9.74062L15.1137 7.5H7.5C6.50544 7.5 5.55161 7.89509 4.84835 8.59835C4.14509 9.30161 3.75 10.2554 3.75 11.25C3.75 12.2446 4.14509 13.1984 4.84835 13.9017C5.55161 14.6049 6.50544 15 7.5 15H12.5V16.25H7.5C6.17392 16.25 4.90215 15.7232 3.96447 14.7855C3.02678 13.8479 2.5 12.5761 2.5 11.25C2.5 9.92392 3.02678 8.65215 3.96447 7.71447C4.90215 6.77678 6.17392 6.25 7.5 6.25Z' fill='%23272A2A'/%3e%3c/svg%3e";
-
-var img$2 = "data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.375 7.5C5.41053 7.5 6.25 6.66053 6.25 5.625C6.25 4.58947 5.41053 3.75 4.375 3.75C3.33947 3.75 2.5 4.58947 2.5 5.625C2.5 6.66053 3.33947 7.5 4.375 7.5Z' fill='%23272A2A'/%3e%3cpath d='M4.375 16.25C5.41053 16.25 6.25 15.4105 6.25 14.375C6.25 13.3395 5.41053 12.5 4.375 12.5C3.33947 12.5 2.5 13.3395 2.5 14.375C2.5 15.4105 3.33947 16.25 4.375 16.25Z' fill='%23272A2A'/%3e%3cpath d='M10 13.75H18.75V15H10V13.75ZM10 5H18.75V6.25H10V5Z' fill='%23272A2A'/%3e%3c/svg%3e";
-
-var img$1 = "data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M10 13.75H18.75V15H10V13.75ZM10 5H18.75V6.25H10V5ZM5 7.5V2.5H3.75V3.125H2.5V4.375H3.75V7.5H2.5V8.75H6.25V7.5H5ZM6.25 17.5H2.5V15C2.5 14.6685 2.6317 14.3505 2.86612 14.1161C3.10054 13.8817 3.41848 13.75 3.75 13.75H5V12.5H2.5V11.25H5C5.33152 11.25 5.64946 11.3817 5.88388 11.6161C6.1183 11.8505 6.25 12.1685 6.25 12.5V13.75C6.25 14.0815 6.1183 14.3995 5.88388 14.6339C5.64946 14.8683 5.33152 15 5 15H3.75V16.25H6.25V17.5Z' fill='%23272A2A'/%3e%3c/svg%3e";
-
-var img = "data:image/svg+xml,%3csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18.2813 4.225C17.9329 3.8754 17.5189 3.59801 17.0631 3.40874C16.6073 3.21947 16.1186 3.12204 15.625 3.12204C15.1315 3.12204 14.6428 3.21947 14.187 3.40874C13.7312 3.59801 13.3172 3.8754 12.9688 4.225L13.8563 5.1125C14.089 4.87981 14.3652 4.69523 14.6692 4.56931C14.9733 4.44338 15.2991 4.37856 15.6282 4.37856C15.9572 4.37856 16.2831 4.44338 16.5871 4.56931C16.8911 4.69523 17.1674 4.87981 17.4 5.1125C17.6327 5.34518 17.8173 5.62142 17.9432 5.92544C18.0692 6.22946 18.134 6.5553 18.134 6.88437C18.134 7.21344 18.0692 7.53928 17.9432 7.8433C17.8173 8.14732 17.6327 8.42356 17.4 8.65625L12.4 13.6562C11.9309 14.1262 11.2944 14.3905 10.6304 14.3911C9.96638 14.3917 9.32935 14.1285 8.85942 13.6594C8.38949 13.1903 8.12515 12.5537 8.12457 11.8897C8.12398 11.2257 8.38719 10.5887 8.85629 10.1187L9.73754 9.23125L8.85629 8.34375L7.96879 9.23125C7.61919 9.57963 7.3418 9.99361 7.15253 10.4494C6.96326 10.9052 6.86583 11.3939 6.86583 11.8875C6.86583 12.381 6.96326 12.8697 7.15253 13.3256C7.3418 13.7814 7.61919 14.1954 7.96879 14.5437C8.67597 15.2419 9.63134 15.6308 10.625 15.625C11.1205 15.627 11.6114 15.5309 12.0695 15.3421C12.5276 15.1533 12.9437 14.8756 13.2938 14.525L18.2938 9.525C18.9944 8.82021 19.3866 7.86616 19.3842 6.87241C19.3819 5.87866 18.9852 4.92647 18.2813 4.225Z' fill='%23272A2A'/%3e%3cpath d='M2.61879 15.5125C2.38541 15.2802 2.20022 15.0041 2.07386 14.7C1.94749 14.3959 1.88244 14.0699 1.88244 13.7406C1.88244 13.4113 1.94749 13.0853 2.07386 12.7812C2.20022 12.4772 2.38541 12.201 2.61879 11.9687L7.61879 6.96875C7.85109 6.73537 8.1272 6.55018 8.43127 6.42381C8.73534 6.29745 9.06138 6.2324 9.39067 6.2324C9.71995 6.2324 10.046 6.29745 10.3501 6.42381C10.6541 6.55018 10.9302 6.73537 11.1625 6.96875C11.3944 7.20287 11.577 7.48116 11.6994 7.78713C11.8218 8.0931 11.8815 8.42052 11.875 8.75C11.8769 9.0805 11.8133 9.4081 11.6878 9.71385C11.5623 10.0196 11.3774 10.2974 11.1438 10.5312L9.81879 11.875L10.7063 12.7625L12.0313 11.4375C12.7366 10.7322 13.1328 9.77558 13.1328 8.77812C13.1328 7.78066 12.7366 6.82406 12.0313 6.11875C11.326 5.41344 10.3694 5.0172 9.37192 5.0172C8.37446 5.0172 7.41785 5.41344 6.71254 6.11875L1.71254 11.1187C1.362 11.4672 1.08382 11.8816 0.893994 12.338C0.704168 12.7944 0.606445 13.2838 0.606445 13.7781C0.606445 14.2724 0.704168 14.7618 0.893994 15.2182C1.08382 15.6746 1.362 16.089 1.71254 16.4375C2.42431 17.1303 3.38185 17.5124 4.37504 17.5C5.37698 17.501 6.33862 17.1055 7.05004 16.4L6.16254 15.5125C5.93025 15.7459 5.65413 15.9311 5.35006 16.0574C5.04599 16.1838 4.71995 16.2488 4.39067 16.2488C4.06138 16.2488 3.73534 16.1838 3.43127 16.0574C3.1272 15.9311 2.85109 15.7459 2.61879 15.5125Z' fill='%23272A2A'/%3e%3c/svg%3e";
-
-function seqNumberVariants(variantFn, max) {
-  var _a;
-  let variants = {};
-  for (let i = 1; (_a = i <= max) !== null && _a !== void 0 ? _a : 100; i++) {
-    variants = Object.assign(Object.assign({}, variants), {
-      [i]: variantFn(i)
-    });
-  }
-  return variants;
-}
-const Container = styled('div', {
-  width: 460,
-  '& > .wrapper-root > .toolbar-root': {
-    border: '1px solid $bgOutline',
-    borderRadius: 8,
-    backgroundColor: '$bgWhite'
-  },
-  '& > .wrapper-root > .toolbar-root > div > .rdw-option-wrapper': {
-    border: 'none !important',
-    height: 'unset !important',
-    borderRadius: '4px !important'
-  },
-  '& > .wrapper-root > .toolbar-root > div > .rdw-option-wrapper:hover': {
-    boxShadow: 'none !important',
-    backgroundColor: '$gray100 !important'
-  },
-  '& > .wrapper-root > .toolbar-root > div > .rdw-option-active': {
-    backgroundColor: '$gray100 !important'
-  },
-  '& > .wrapper-root > .toolbar-root > div > .rdw-link-modal': {
-    height: 'unset !important'
-  },
-  '& > .wrapper-root > .toolbar-root > div > .rdw-dropdown-wrapper': {
-    border: 'unset !important'
-  },
-  '& > .wrapper-root > .toolbar-root > div > .rdw-dropdown-wrapper:hover': {
-    boxShadow: 'none !important',
-    backgroundColor: '$gray100 !important'
-  },
-  '& > .wrapper-root > .toolbar-root > div > .rdw-dropdown-wrapper:active': {
-    backgroundColor: '$gray100 !important'
-  },
-  '& > .wrapper-root > .editor-root': {
-    border: '1px solid $bgOutline',
-    borderRadius: 8,
-    backgroundColor: '$bgWhite',
-    padding: '$spacing-05',
-    height: 400,
-    '& > .DraftEditor-root > .public-DraftEditorPlaceholder-root': {
-      fontWeight: 400,
-      color: '$textDisable'
-    }
-  },
-  '& > .wrapper-root > .editor-root > div > div > div > div > div > .public-DraftStyleDefault-ltr': {
-    textAlign: 'unset !important'
-  },
-  variants: {
-    editorHeight: seqNumberVariants(value => ({
-      '& > .wrapper-root > .editor-root': {
-        height: value
-      }
-    }), 1000),
-    disabled: {
-      true: {
-        '& > .wrapper-root > .editor-root': {
-          backgroundColor: '$formDisable',
-          color: '$textDisable'
-        },
-        '& > .wrapper-root > .toolbar-root': {
-          backgroundColor: '$formDisable',
-          color: '$textDisable'
-        },
-        '& > .wrapper-root > .toolbar-root > div > .rdw-option-wrapper': {
-          backgroundColor: '$formDisable !important',
-          '& img': {
-            filter: 'contrast(0)'
-          }
-        },
-        '& > .wrapper-root > .toolbar-root > .rdw-dropdown-wrapper': {
-          backgroundColor: '$formDisable !important',
-          '& img': {
-            filter: 'contrast(0)'
-          },
-          '& a': {
-            pointerEvents: 'none'
-          },
-          '& > a > div': {
-            borderTop: '6px solid $textDisable'
-          }
-        },
-        '& > .wrapper-root > .toolbar-root > div > .rdw-dropdown-wrapper': {
-          backgroundColor: '$formDisable !important',
-          '& a': {
-            pointerEvents: 'none'
-          },
-          '& > a > span': {
-            color: '$textDisable'
-          },
-          '& > a > div': {
-            borderTop: '6px solid $textDisable'
-          }
-        }
-      }
-    }
-  }
-});
-const MaxLengthText = styled('p', {
-  fontSize: 12,
-  fontWeight: 400,
-  color: '$textSecondary',
-  textAlign: 'right',
-  padding: '$spacing-03',
-  variants: {
-    warning: {
-      true: {
-        color: '$textRed'
-      }
-    }
-  }
-});
-function ContentEditor(props) {
-  var _a, _b, _c, _d;
-  const {
-    css,
-    editorState: value,
-    onChange,
-    toolbar,
-    editorHeight,
-    uploadCallback,
-    maxLength,
-    disabled,
-    placeholder
-  } = props;
-  const [editorState, setEditorState] = useState(() => EditorState.createEmpty());
-  useEffect(() => {
-    if (value) {
-      setEditorState(value);
-    }
-  }, [value]);
-  function onEditorStateChange(e) {
-    setEditorState(e);
-    onChange === null || onChange === void 0 ? void 0 : onChange(e);
-  }
-  const config = {
-    options: ['history', 'fontFamily', 'inline', 'remove', 'blockType', 'textAlign', 'colorPicker', 'list', 'link', 'image'],
-    history: {
-      options: ['undo', 'redo'],
-      undo: {
-        icon: img$4
-      },
-      redo: {
-        icon: img$3
-      }
-    },
-    inline: {
-      options: ['bold', 'italic', 'underline', 'strikethrough', 'monospace'],
-      bold: {
-        icon: img$9
-      },
-      italic: {
-        icon: img$8
-      },
-      underline: {
-        icon: img$7
-      },
-      strikethrough: {
-        icon: img$6
-      },
-      monospace: {
-        icon: img$a
-      }
-    },
-    remove: {
-      icon: img$5
-    },
-    blockType: {
-      inDropdown: true,
-      options: ['Normal', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'Blockquote', 'Code']
-    },
-    textAlign: {
-      inDropdown: true
-    },
-    list: {
-      inDropdown: false,
-      options: ['unordered', 'ordered'],
-      unordered: {
-        icon: img$2
-      },
-      ordered: {
-        icon: img$1
-      }
-    },
-    link: {
-      inDropdown: false,
-      defaultTargetOption: '_self',
-      options: ['link'],
-      link: {
-        icon: img
-      }
-    },
-    fontFamily: {
-      options: ['Inter', 'Roboto', 'Poppins', 'Tinos', 'Montserrat']
-    },
-    image: {
-      uploadCallback: uploadCallback,
-      previewImage: true,
-      alt: {
-        present: true,
-        mandatory: false
-      },
-      inputAccept: 'image/gif,image/jpeg,image/jpg,image/png,image/svg'
-    }
-  };
-  return jsxs(Container, {
-    css: css,
-    editorHeight: editorHeight,
-    disabled: disabled,
-    children: [jsx(Editor, {
-      wrapperClassName: "wrapper-root",
-      editorClassName: "editor-root",
-      toolbarClassName: "toolbar-root",
-      placeholder: placeholder,
-      editorState: editorState,
-      onEditorStateChange: onEditorStateChange,
-      toolbar: toolbar ? toolbar(config) : config,
-      readOnly: disabled
-    }), maxLength && typeof maxLength === 'number' && jsx(MaxLengthText, {
-      warning: ((_b = (_a = editorState === null || editorState === void 0 ? void 0 : editorState.getCurrentContent()) === null || _a === void 0 ? void 0 : _a.getPlainText()) === null || _b === void 0 ? void 0 : _b.length) > maxLength,
-      children: `${(_d = (_c = editorState === null || editorState === void 0 ? void 0 : editorState.getCurrentContent()) === null || _c === void 0 ? void 0 : _c.getPlainText()) === null || _d === void 0 ? void 0 : _d.length} / ${maxLength}`
-    })]
-  });
-}
-
-export { ContentEditor };
+export { default as ContentEditor } from './components/contentEditor/ContentEditor.esm.js';

package/hooks/useListOption/useListOption.esm.js

@@ -0,0 +1,56 @@
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.array.push.js';
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.for-each.js';
+import 'core-js/modules/es.iterator.map.js';
+import isArray from 'lodash/isArray';
+import isFunction from 'lodash/isFunction';
+import get from 'lodash/get';
+import isNil from 'lodash/isNil';
+
+// transform to labelInValue select AntDesign
+function useListOption(list, nameKey, valueKey, disableList, separator) {
+  if (!list) return [];
+  return list.map((item, index) => {
+    const name = [];
+    if (isArray(nameKey)) {
+      nameKey.forEach(key => {
+        name.push(get(item, key));
+      });
+    } else if (isNil(nameKey)) {
+      name.push(item);
+    } else {
+      name.push(get(item, nameKey));
+    }
+    let value;
+    if (isNil(valueKey)) {
+      value = item;
+    } else if (isArray(valueKey)) {
+      for (let i = 0; i < valueKey.length; i += 1) {
+        const val = get(item, valueKey[i]);
+        if (val !== undefined) {
+          value = val;
+          // stop loop jika value ada
+          break;
+        }
+      }
+    } else {
+      value = get(item, valueKey);
+    }
+    const isDisabled = disableList ? disableList === null || disableList === void 0 ? void 0 : disableList.includes(value) : false;
+    const label = isFunction(separator) ?
+    // @ts-ignore
+    separator(name.length <= 1 ? name[0] : name, item, index) :
+    // @ts-ignore
+    name.join(separator || ' - ');
+    return {
+      name: label,
+      rec: item,
+      value,
+      key: value,
+      isDisabled
+    };
+  });
+}
+
+export { useListOption };

package/hooks/useToggle/useToggle.esm.js

@@ -0,0 +1,8 @@
+import { useReducer } from 'react';
+
+const toggleReducer = (state, nextValue) => typeof nextValue === 'boolean' ? nextValue : !state;
+const useToggle = initialValue => {
+  return useReducer(toggleReducer, initialValue);
+};
+
+export { useToggle };