diginet-core-ui 1.3.73 → 1.3.74

package/icons/basic.js

@@ -392,6 +392,34 @@ export const ApprovalCancel = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const ApprovalDouble = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M22.2399 5.58997L11.6599 16.17L7.47991 12L6.06991 13.41L11.6599 19L23.6599 6.99997L22.2399 5.58997ZM17.9999 6.99997L16.5899 5.58997L10.2499 11.93L11.6599 13.34L17.9999 6.99997ZM5.99991 19L0.409912 13.41L1.82991 12L7.40991 17.59L5.99991 19Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 14,
+    viewBox: "0 0 24 14",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M22.2399 0.589966L11.6599 11.17L7.47991 6.99997L6.06991 8.40997L11.6599 14L23.6599 1.99997L22.2399 0.589966ZM17.9999 1.99997L16.5899 0.589966L10.2499 6.92997L11.6599 8.33997L17.9999 1.99997ZM5.99991 14L0.409912 8.40997L1.82991 6.99997L7.40991 12.59L5.99991 14Z",
+    fill: colors[color] || color
+  }));
+});
 export const ApprovalOutline = /*#__PURE__*/memo(({
   width,
   height,
@@ -714,6 +742,34 @@ export const Assessment = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const AssignmentFilled = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M19 3H14.82C14.4 1.84 13.3 1 12 1C10.7 1 9.6 1.84 9.18 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM12 3C12.55 3 13 3.45 13 4C13 4.55 12.55 5 12 5C11.45 5 11 4.55 11 4C11 3.45 11.45 3 12 3ZM7 17H14V15H7V17ZM17 13H7V11H17V13ZM7 9H17V7H7V9Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 20,
+    viewBox: "0 0 18 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 2H11.82C11.4 0.84 10.3 0 9 0C7.7 0 6.6 0.84 6.18 2H2C0.9 2 0 2.9 0 4V18C0 19.1 0.9 20 2 20H16C17.1 20 18 19.1 18 18V4C18 2.9 17.1 2 16 2ZM9 2C9.55 2 10 2.45 10 3C10 3.55 9.55 4 9 4C8.45 4 8 3.55 8 3C8 2.45 8.45 2 9 2ZM4 16H11V14H4V16ZM14 12H4V10H14V12ZM4 8H14V6H4V8Z",
+    fill: colors[color] || color
+  }));
+});
 export const AssignmentInd = /*#__PURE__*/memo(({
   width,
   height,
@@ -1972,6 +2028,34 @@ export const Emoji = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Error = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM11 17V15H13V17H11ZM11 7V13H13V7H11Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 20,
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM9 15V13H11V15H9ZM9 5V11H11V5H9Z",
+    fill: colors[color] || color
+  }));
+});
 export const Event = /*#__PURE__*/memo(({
   width,
   height,
@@ -2262,6 +2346,34 @@ export const First = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const FiveSquare = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM11 9H15V7H9V13H13V15H9V17H13C14.1 17 15 16.11 15 15V13C15 11.89 14.1 11 13 11H11V9Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2 0H16C17.1 0 18 0.9 18 2V16C18 17.1 17.1 18 16 18H2C0.9 18 0 17.1 0 16V2C0 0.9 0.9 0 2 0ZM8 6H12V4H6V10H10V12H6V14H10C11.1 14 12 13.11 12 12V10C12 8.89 11.1 8 10 8H8V6Z",
+    fill: colors[color] || color
+  }));
+});
 export const Flag = /*#__PURE__*/memo(({
   width,
   height,
@@ -2340,6 +2452,34 @@ export const FolderInsurance = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const FourSquare = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.83846 3H18.2785C19.3345 3 20.1985 3.9 20.1985 5V19C20.1985 20.1 19.3345 21 18.2785 21H4.83846C3.78246 21 2.91846 20.1 2.91846 19V5C2.91846 3.9 3.78246 3 4.83846 3ZM12.5185 17H14.4385V7H12.5185V11H10.5985V7H8.67846V13H12.5185V17Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.83846 0H16.2785C17.3345 0 18.1985 0.9 18.1985 2V16C18.1985 17.1 17.3345 18 16.2785 18H2.83846C1.78246 18 0.918457 17.1 0.918457 16V2C0.918457 0.9 1.78246 0 2.83846 0ZM10.5185 14H12.4385V4H10.5185V8H8.59846V4H6.67846V10H10.5185V14Z",
+    fill: colors[color] || color
+  }));
+});
 export const Gavel = /*#__PURE__*/memo(({
   width,
   height,
@@ -3748,6 +3888,34 @@ export const NotificationV2 = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const OneSquare = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM12 17H14V7H10V9H12V17Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2 0H16C17.1 0 18 0.9 18 2V16C18 17.1 17.1 18 16 18H2C0.9 18 0 17.1 0 16V2C0 0.9 0.9 0 2 0ZM9 14H11V4H7V6H9V14Z",
+    fill: colors[color] || color
+  }));
+});
 export const Undo = /*#__PURE__*/memo(({
   width,
   height,
@@ -4999,6 +5167,30 @@ export const ReviewAdd = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const ReviewOutline = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M20 2H4C2.9 2 2.01 2.9 2.01 4L2 22L6 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2ZM20 16H5.17L4.58 16.59L4 17.17V4H20V16ZM10.5 14H18V12H12.5L10.5 14ZM14.36 8.13C14.56 7.93 14.56 7.62 14.36 7.42L12.59 5.65C12.39 5.45 12.08 5.45 11.88 5.65L6 11.53V14H8.47L14.36 8.13Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 20,
+    height: height || 20,
+    viewBox: "0 0 20 20",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M18 0H2C0.9 0 0.00999999 0.9 0.00999999 2L0 20L4 16H18C19.1 16 20 15.1 20 14V2C20 0.9 19.1 0 18 0ZM18 14H3.17L2.58 14.59L2 15.17V2H18V14ZM8.5 12H16V10H10.5L8.5 12ZM12.36 6.13C12.56 5.93 12.56 5.62 12.36 5.42L10.59 3.65C10.39 3.45 10.08 3.45 9.88 3.65L4 9.53V12H6.47L12.36 6.13Z",
+    fill: colors[color] || color
+  }));
+});
 export const Link = /*#__PURE__*/memo(({
   width,
   height,
@@ -5557,6 +5749,34 @@ export const SyncHorizontal = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const ThreeSquare = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.01001 3H19.01C20.11 3 21 3.9 21 5V19C21 20.1 20.11 21 19.01 21H5.01001C3.91001 21 3.01001 20.1 3.01001 19V5C3.01001 3.9 3.91001 3 5.01001 3ZM13.51 12C14.34 12 15.01 11.33 15.01 10.5V9C15.01 7.89 14.11 7 13.01 7H9.00001V9H13V11H11V13H13V15H9.00001V17H13.01C14.11 17 15.01 16.11 15.01 15V13.5C15.01 12.67 14.34 12 13.51 12Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2.01001 0H16.01C17.11 0 18 0.9 18 2V16C18 17.1 17.11 18 16.01 18H2.01001C0.91001 18 0.0100098 17.1 0.0100098 16V2C0.0100098 0.9 0.91001 0 2.01001 0ZM10.51 9C11.34 9 12.01 8.33 12.01 7.5V6C12.01 4.89 11.11 4 10.01 4H6.00001V6H10V8H8.00001V10H10V12H6.00001V14H10.01C11.11 14 12.01 13.11 12.01 12V10.5C12.01 9.67 11.34 9 10.51 9Z",
+    fill: colors[color] || color
+  }));
+});
 export const Touch = /*#__PURE__*/memo(({
   width,
   height,
@@ -5641,6 +5861,34 @@ export const Treeview = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const TwoSquare = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5 3H19C20.1 3 21 3.9 21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3ZM13 13C14.1 13 15 12.11 15 11V9C15 7.89 14.1 7 13 7H9V9H13V11H11C9.9 11 9 11.89 9 13V17H15V15H11V13H13Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M2 0H16C17.1 0 18 0.9 18 2V16C18 17.1 17.1 18 16 18H2C0.9 18 0 17.1 0 16V2C0 0.9 0.9 0 2 0ZM10 10C11.1 10 12 9.11 12 8V6C12 4.89 11.1 4 10 4H6V6H10V8H8C6.9 8 6 8.89 6 10V14H12V12H8V10H10Z",
+    fill: colors[color] || color
+  }));
+});
 export const View = /*#__PURE__*/memo(({
   width,
   height,

package/icons/effect.js

@@ -15,6 +15,7 @@ const {
   }
 } = colors;
 const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   name,
   className,
   style,
@@ -27,28 +28,35 @@ const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 }, reference) => {
   const ref = useRef(null);
   const IconCss = css`
-            ${flexRow};
-            ${justifyCenter};
-            ${alignCenter};
-            ${borderBox};
-            ${outlineNone};
-            ${userSelectNone};
-            width: max-content;
-            height: max-content;
-            min-width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
-            min-height: ${width ? isNaN(height) ? height : height + 'px' : '24px'};
-        `;
+                ${flexRow};
+                ${justifyCenter};
+                ${alignCenter};
+                ${borderBox};
+                ${outlineNone};
+                ${userSelectNone};
+                width: max-content;
+                height: max-content;
+                min-width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
+                min-height: ${width ? isNaN(height) ? height : height + 'px' : '24px'};
+            `;
   const NotFoundIcon = css`
-            ${flexRow};
-            ${borderBox};
-            width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
-            height: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
-            border: 1px dashed ${rest};
-        `;
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+                ${flexRow};
+                ${borderBox};
+                width: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
+                height: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
+                border: 1px dashed ${rest};
+            `;
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     if (!name) return null;
     let node = null;
@@ -89,8 +97,8 @@ Icon.propTypes = {
   /** name of icon in icons store */
   name: PropTypes.string.isRequired,
 
-  /** color of icon<br />
-   * default: #7F828E
+  /** color of icon<br />
+   * default: #7F828E
    */
   color: PropTypes.string,
 
@@ -112,19 +120,19 @@ Icon.propTypes = {
   /** have view box if true */
   onClick: PropTypes.func,
 
-  /**
-   * ref methods
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
   reference: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
     current: PropTypes.instanceOf(Element)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.73",
+  "version": "1.3.74",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,46 @@ npm test
 ```
 
 ## Changelog
+## 1.3.74
+- \[Added\]: Icon – ApprovalDouble, Error, OneSquare, TwoSquare, ThreeSquare, FourSquare, FiveSquare, AssignmentFilled, ReviewOutline
+- \[Added\]: MenuIcon – MHRP29N0026 , MHRP29N0027, MHRP29N0028
+- \[Changed\]: Dropdown – Update UI mode multi and optimize render multi selected
+- \[Changed\]: Chip – Update Chip with new design, clean and optimize code
+- \[Changed\]: Modal – Update Padding Modal with new design
+- \[Changed\]: Modal – Update option Show/Hide Box-shadow for Footer
+- \[Changed\]: Tab – Add prop width in TabHeader
+- \[Changed\]: Popover – Add target to method show; Add prop className
+- \[Changed\]: OptionWrapper – Update OptionWrapper
+- \[Changed\]: Typography – Add cursor pointer when clickable
+- \[Changed\]: Dropdown – Add no data text when treeview datasource empty
+- \[Changed\]: Attachment – Add recentRemovedAttached and change removedAttached in onChange
+- \[Changed\]: Popover – Add anchor's cursor pointer; Update position when children is changed
+- \[Changed\]: Attachment – Add default for prop uploadErrorInfo
+- \[Changed\]: Tab – Add proptype string for prop tabIndex in TabContainer
+- \[Changed\]: Tab – Add prop labelProps in TabItem; Fix max-width TabItem; Remove border TabHeader
+- \[Changed\]: Avatar – Add default when src url error
+- \[Changed\]: Image – Add component Image
+- \[Changed\]: InputBase, TextInput – Add hover tooltip when readOnly
+- \[Changed\]: DateRangePicker – Add prop showUnitCount
+- \[Fixed\]: DatePicker – Fix not show placeholder
+- \[Fixed\]: Label – Fix margin of label inside input components
+- \[Fixed\]: TreeView – Fix bug disabledRelevantValue
+- \[Fixed\]: Dropdown – Fix bug not close after select dropdown treeview by children
+- \[Fixed\]: Grid – Add missing useMemo dependency
+- \[Fixed\]: Popover – Fix css min-width, max-height, justify-content
+- \[Fixed\]: Dropdown – Chip disable when Dropdown is disabled
+- \[Fixed\]: Accordion – Fix bug onExpand, onCollapse not return element AccordionSummary
+- \[Fixed\]: DatePicker – Recalculate position of picker
+- \[Fixed\]: Dropdown – Fix bug render selected item [object Object]
+- \[Fixed\]: Dropdown – Fix bug lost icon when select same value
+- \[Fixed\]: Dropdown – Fix bug not show clear when use only defaultValue
+- \[Fixed\]: Popover – Fix bug trigger hover
+- \[Fixed\]: Typography – Fix hover tooltip height
+- \[Fixed\]: DateRangePicker – Fix not show placeholder
+- \[Fixed\]: Dropdown – Fix viewType outlined not show placeholder
+- \[Fixed\]: Popover – Calculate position center when overflow
+
+
 ## 1.3.73
 - \[Added\]: Icon – PersonArrowRight
 - \[Added\]: MenuIcon – MHRM82N0001, MHRM82N0002

package/styles/general.js

@@ -96,6 +96,9 @@ export const positionFixed = css`
 export const borderRadius4px = css`
     border-radius: 4px;
 `;
+export const borderRadius50 = css`
+    border-radius: 50%;
+`;
 export const borderBox = css`
     box-sizing: border-box;
 `;
@@ -185,4 +188,24 @@ export const parseHeight = height => css`
 export const parseWidthHeight = (width, height = width) => css`
     width: ${isNaN(width) ? width : width + 'px'};
     height: ${isNaN(height) ? height : height + 'px'};
+`;
+export const parseMinWidth = width => css`
+    min-width: ${isNaN(width) ? width : width + 'px'};
+`;
+export const parseMinHeight = height => css`
+    min-height: ${isNaN(height) ? height : height + 'px'};
+`;
+export const parseMinWidthHeight = (width, height = width) => css`
+    min-width: ${isNaN(width) ? width : width + 'px'};
+    min-height: ${isNaN(height) ? height : height + 'px'};
+`;
+export const parseMaxWidth = width => css`
+    max-width: ${isNaN(width) ? width : width + 'px'};
+`;
+export const parseMaxHeight = height => css`
+    max-height: ${isNaN(height) ? height : height + 'px'};
+`;
+export const parseMaxWidthHeight = (width, height = width) => css`
+    max-width: ${isNaN(width) ? width : width + 'px'};
+    max-height: ${isNaN(height) ? height : height + 'px'};
 `;

package/theme/index.js

@@ -1,3 +1,3 @@
 export { default as ThemeProvider } from './theme-provider';
-export { useTheme } from './set-theme';
+export { useTheme, useColor } from './set-theme';
 export { default as makeStyles } from './make-styles';

package/theme/set-theme.js

@@ -36,4 +36,5 @@ export const setTheme = theme => {
     });
   }
 };
-export const useTheme = () => Settings;
+export const useTheme = () => Settings;
+export const useColor = Settings.colors;

package/utils/index.js

@@ -1,27 +1,30 @@
 import * as utils from '.';
 export * from './array/array';
-export { default as capitalize } from './string/capitalize';
-export { default as capitalizeSentenceCase } from './string/capitalizeSentenceCase';
-export * from './string/string';
+export { default as classNames } from './classNames';
 export * from './date';
 export { default as date } from './date';
 export { default as getFileType } from './getFileType';
+export { default as handleBreakpoints } from './handleBreakpoints';
+export { default as isMobile } from './isMobile';
 export { default as mapParent } from './map-parent';
 export { default as parseTextToHTML } from './parseHTML';
 export { default as promisify } from './promisify';
 export { default as randomString } from './randomString';
+export { default as refType } from './refType';
 export { default as removeUnicode } from './remove-unicode';
-export { default as renderIcon } from './renderIcon';
-export { default as renderHTML } from './renderHTML';
 export * from './render-portal';
+export { default as renderHTML } from './renderHTML';
+export { default as renderIcon } from './renderIcon';
+export * from './sb-template';
+export { default as SbTemplate } from './sb-template';
+export { default as capitalize } from './string/capitalize';
+export { default as capitalizeSentenceCase } from './string/capitalizeSentenceCase';
+export * from './string/string';
 export { default as updatePosition } from './updatePosition';
+export { default as useDelayUnmount } from './useDelayUnmount';
+export { default as useMediaQuery } from './useMediaQuery';
 export { default as useOnClickOutside } from './useOnClickOutside';
 export { default as usePortal } from './usePortal';
 export * from './validate';
 export { default as onValidate } from './validate';
-export { default as classNames } from './classNames';
-export { default as refType } from './refType';
-export * from './sb-template';
-export { default as SbTemplate } from './sb-template';
-export { default as handleBreakpoints } from './handleBreakpoints';
 export default utils;

package/utils/useMediaQuery.js

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'; // Usage:
 //     return <div>{`The view port is ${matches ? 'at least' : 'less than'} 768 pixels wide`}</div>;
 // }
 
-export const useMediaQuery = query => {
+const useMediaQuery = query => {
   const getMatches = query => {
     // Prevents SSR issues
     if (typeof window !== 'undefined') {
@@ -41,4 +41,6 @@ export const useMediaQuery = query => {
     };
   }, [query]);
   return matches;
-};
+};
+
+export default useMediaQuery;