diginet-core-ui 1.3.94-beta.7 → 1.3.94-beta.9

package/assets/images/menu/dhr/MHRM89N0002.svg

@@ -0,0 +1,17 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1074_66)">
+<path d="M25 0H7C5.9 0 5 0.9 5 2V9.4C5.1 9.4 5.1 9.3 5.2 9.3C5.5 9.1 5.9 8.9 6.2 8.7C6.3 8.7 6.4 8.6 6.5 8.6V5H25.5V21.1C26 21.2 26.5 21.4 27 21.7V2C27 0.9 26.1 0 25 0ZM18.5 3H13.5C13.2 3 13 2.8 13 2.5C13 2.2 13.2 2 13.5 2H18.5C18.8 2 19 2.2 19 2.5C19 2.8 18.8 3 18.5 3ZM25.5 32.5V33H6.5V18C6.1 18.3 5.7 18.6 5.2 18.8L5.1 18.9V19C5.1 21 5.1 23 5 24.9V37C5 38.1 5.9 39 7 39H25C25.3 39 25.6 38.9 25.9 38.8C25.7 38.6 25.5 38.4 25.4 38.1H21.2C20.1 38.1 19.3 37.2 19.3 36.2C19.3 35.2 20.2 34.3 21.2 34.3H25.4C25.8 33.7 26.3 33.1 27 32.8V32.5H25.5ZM16 38C14.9 38 14 37.1 14 36C14 34.9 14.9 34 16 34C17.1 34 18 34.9 18 36C18 37.1 17.1 38 16 38Z" fill="#2680EB"/>
+<path d="M24 8V9C24 9.6 23.5 10 23 10H10C9.9 9.7 9.8 9.5 9.6 9.3C9.3 9 9 8.7 8.6 8.6C8.4 8.5 8.2 8.4 8 8.4V8C8 7.4 8.5 7 9 7H23C23.5 7 24 7.4 24 8Z" fill="#7BC0F9"/>
+<path d="M24 13V14C24 14.6 23.5 15 23 15H9.5C9.7 14.6 9.9 14.1 10.1 13.7C10.3 13.2 10.4 12.6 10.4 12H23C23.5 12 24 12.4 24 13Z" fill="#7BC0F9"/>
+<path d="M23 20H9C8.4 20 8 19.6 8 19V18C8 17.4 8.4 17 9 17H23C23.6 17 24 17.4 24 18V19C24 19.6 23.5 20 23 20Z" fill="#7BC0F9"/>
+<path d="M22.5 22C22.2 22.3 21.9 22.6 21.7 23H21.2C20.1 23 19.3 23.9 19.3 24.9V25H9C8.5 25 8 24.6 8 24V23C8 22.4 8.5 22 9 22H22.5Z" fill="#7BC0F9"/>
+<path d="M24 28.6H21.2C20.3 28.6 19.6 29.2 19.3 30H9C8.5 30 8 29.6 8 29V28C8 27.4 8.5 27 9 27H21.8C22.3 27.8 23 28.4 24 28.6Z" fill="#7BC0F9"/>
+<path d="M9.1 13.4C8.8 14.5 8.1 15.5 7.1 16.3C6.3 16.9 5.5 17.5 4.6 18C4 18.4 4.1 18.1 4.1 19C4.1 21.4 4 23.8 3.9 26.1C3.8 27.6 3.8 29 3.7 30.5C3.7 30.9 3.5 31.4001 3.3 31.7001C2.7 32.4001 2.1 33 1.4 33.5C1 33.9 0.5 34.2001 0 34.4001V13.2C0.2 13 0.4 12.9 0.6 12.8C2 12 3.3 11.3 4.7 10.6C5.4 10.3 6 9.80005 6.7 9.50005C6.9 9.40005 7.2 9.30005 7.4 9.30005C7.7 9.30005 7.9 9.30005 8.2 9.40005C8.4 9.50005 8.6 9.70005 8.8 9.80005C9 10 9.1 10.2 9.2 10.5C9.5 11.5 9.4 12.5 9.1 13.4Z" fill="#2680EB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21.1998 25.9H22.2998C22.6998 27 23.6998 27.7999 24.8998 27.7999C26.0998 27.7999 27.1998 27 27.4998 25.9H37.9998C38.4998 25.9 38.8998 25.5 38.8998 25C38.8998 24.5 38.4998 24.1 37.9998 24.1H27.5998C27.1998 23 26.1998 22.2 24.9998 22.2C23.7998 22.2 22.6998 23 22.3998 24.1H21.2998C20.7998 24.1 20.3998 24.5 20.3998 25C20.1998 25.4 20.5998 25.9 21.1998 25.9ZM36.1998 27.7C34.9998 27.7 33.8998 28.5 33.5998 29.6H21.1998C20.6998 29.6 20.2998 30 20.2998 30.5C20.2998 31 20.6998 31.4 21.1998 31.4H33.5998C33.9998 32.5 34.9998 33.2999 36.1998 33.2999C37.7998 33.2999 38.9998 32 38.9998 30.5C38.9998 29 37.6998 27.7 36.1998 27.7ZM31.2998 35.2H37.9998C38.4998 35.2 38.8998 35.5999 38.8998 36.0999C38.8998 36.5999 38.4998 37 37.9998 37H31.2998C30.8998 38.1 29.8998 38.9 28.6998 38.9C27.4998 38.9 26.3998 38.1 26.0998 37H21.1998C20.6998 37 20.2998 36.5999 20.2998 36.0999C20.2998 35.5999 20.6998 35.2 21.1998 35.2H25.9998C26.3998 34.1 27.3998 33.2999 28.5998 33.2999C29.7998 33.2999 30.8998 34.2 31.2998 35.2Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_1074_66">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/dhr/MHRP09N0033.svg

@@ -0,0 +1,12 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1072_22)">
+<path d="M7.4 28.5L8.2 26.9H8C7.5 26.9 7.2 26.5 7.2 26.1V2.5C7.2 2 7.6 1.7 8 1.7H18.9V5.9C18.9 7.3 20 8.4 21.4 8.4H24.4H25.6V12.5V13.3V21.6H27.3V13.2V12.4V8.4V8.3V7.5C27.3 7.3 27.2 7.1 27.1 6.9L20.4 0.2C20.1 0.1 19.9 0 19.7 0H8C6.6 0 5.5 1.1 5.5 2.5V26.1C5.5 27.3 6.3 28.2 7.4 28.5ZM20.5 2.9L24.3 6.7H21.3C20.8 6.7 20.5 6.3 20.5 5.9V2.9Z" fill="#2680EB"/>
+<path d="M38.8 24.6L31.9 37.6C31.6 38.2 30.6 38.9 29.9 38.9L2.2 39C1.6 39 1.1 38.8 0.6 38.4C0.2 38 0 37.4 0 36.8V15.3C0 14.1 1 13.1 2.2 13.1H4.2V15H2.9C2.6 15 2.4 15.1 2.2 15.3C2 15.5 1.9 15.7 1.9 16V36.1C1.9 36.7 2.3 37.1 2.9 37.1H4.3L10.8 23.9C11.2 23.2 11.9 22.6 12.6 22.6H28.6V17.3C29.6 17.4 30.5 18.3 30.5 19.3V22.6H37.8C38.7 22.6 39.4 23.4 38.8 24.6Z" fill="#FF8C00"/>
+<path d="M11 21C11.1 21 11.2 20.9 11.4 20.9H21.7V20.2C21.7 19.8 21.6 19.5 21.4 19.2C21.2 18.9 20.9 18.6 20.6 18.4L18.4 17.2C18.3 17.2 18.2 17.1 18.1 17C18 16.9 18 16.8 18 16.7V16C18.4 15.5 18.7 15 18.8 14.4C18.9 14.3 19 14.2 19.1 14.1C19.2 14 19.2 13.8 19.2 13.7V12.8C19.2 12.7 19.2 12.6 19.1 12.5C19.1 12.4 19 12.3 18.9 12.2V10.9C18.9 10.6 18.9 10.3 18.8 10.1C18.7 9.8 18.6 9.6 18.4 9.4C18.1 9.1 17.7 8.9 17.3 8.7C16.9 8.6 16.5 8.5 16.1 8.5C15.7 8.5 15.3 8.5 14.9 8.7C14.5 8.8 14.1 9.1 13.8 9.4C13.5 9.8 13.3 10.4 13.3 10.9V12.2C13.1 12.4 13 12.6 13 12.8V13.7C13 13.9 13 14 13.1 14.2C13.2 14.3 13.3 14.5 13.5 14.5C13.7 15 14 15.4 14.2 15.9C14.3 15.9 14.3 16 14.4 16.1V16.9C14.4 17 14.4 17.1 14.3 17.2C14.2 17.3 14.1 17.4 14 17.4L12 18.4C11.6 18.5 11.4 18.8 11.2 19.1C11 19.5 11 19.9 11 20.2V21Z" fill="#2680EB"/>
+</g>
+<defs>
+<clipPath id="clip0_1072_22">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/dhr/MHRP29N0029.svg

@@ -0,0 +1,17 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1073_43)">
+<path d="M33.6 3.09998H31V5.69998C31 7.39998 29.7 8.69998 28 8.69998C26.3 8.69998 25 7.39998 25 5.69998V3.09998H14V5.69998C14 7.39998 12.7 8.69998 11 8.69998C9.3 8.69998 8 7.39998 8 5.69998V3.09998H5.4C2.4 3.09998 0 5.49998 0 8.39998V33.6C0 36.6 2.4 39 5.4 39H33.6C36.6 39 39 36.6 39 33.6V8.39998C39 5.49998 36.6 3.09998 33.6 3.09998ZM36.2 32.9C36.2 34.7 34.7 36.2 32.9 36.2H6.1C4.3 36.2 2.8 34.7 2.8 32.9V14.1H36.1V32.9H36.2Z" fill="#2680EB"/>
+<path d="M11 7.7C9.9 7.7 9 6.8 9 5.7V2C9 0.9 9.9 0 11 0C12.1 0 13 0.9 13 2V5.7C13 6.8 12.1 7.7 11 7.7ZM30 5.7V2C30 0.9 29.1 0 28 0C26.9 0 26 0.9 26 2V5.7C26 6.8 26.9 7.7 28 7.7C29.1 7.7 30 6.8 30 5.7Z" fill="#7BC0F9"/>
+<path d="M7 17.7C7 17.3 7.3 17 7.7 17H22.4C22.8 17 23.1 17.3 23.1 17.7V20.4C23.1 20.8 22.8 21.1 22.4 21.1H7.7C7.3 21 7 20.7 7 20.3V17.7Z" fill="#FF8C00"/>
+<path d="M24 17.7C24 17.3 24.3 17 24.7 17H27.4C27.8 17 28.1 17.3 28.1 17.7V20.4C28.1 20.8 27.8 21.1 27.4 21.1H24.7C24.3 21.1 24 20.8 24 20.4V17.7Z" fill="#FF8C00"/>
+<path d="M29 29.7C29 29.3 29.3 29 29.7 29H32.4C32.8 29 33.1 29.3 33.1 29.7V32.4C33.1 32.8 32.8 33.1 32.4 33.1H29.7C29.3 33.1 29 32.8 29 32.4V29.7Z" fill="#FF8C00"/>
+<path d="M12 23.7C12 23.3 12.3 23 12.7 23H15.4C15.8 23 16.1 23.3 16.1 23.7V26.4C16.1 26.8 15.8 27.1 15.4 27.1H12.7C12.3 27.1 12 26.8 12 26.4V23.7Z" fill="#FF8C00"/>
+<path d="M17 23.7C17 23.3 17.3 23 17.7 23H32.4C32.8 23 33.1 23.3 33.1 23.7V26.4C33.1 26.8 32.8 27.1 32.4 27.1H17.7C17.3 27.1 17 26.8 17 26.4V23.7Z" fill="#FF8C00"/>
+<path d="M6 29.7C6 29.3 6.3 29 6.7 29H27.4C27.8 29 28.1 29.3 28.1 29.7V32.4C28.1 32.8 27.8 33.1 27.4 33.1H6.7C6.3 33 6 32.7 6 32.3V29.7Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_1073_43">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/button/icon.js

@@ -301,14 +301,14 @@ ButtonIcon.propTypes = {
   onClick: PropTypes.func,
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
-  /**
-   * 	The size of the component.
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+  /**
+   * 	The size of the component.
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'extraGiant']),
   /** Style inline of component. */
@@ -319,19 +319,19 @@ ButtonIcon.propTypes = {
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * 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 (ref.current.instance.*method*)
+   *
+   * * 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: ref
 };

package/components/button/index.js

@@ -405,19 +405,19 @@ Button.propTypes = {
   urlParams: PropTypes.object,
   /** The variant to use. */
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'link']),
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * 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 (ref.current.instance.*method*)
+   *
+   * * 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: ref
 };

package/components/form-control/calendar/function.js

@@ -5,7 +5,7 @@ import { Button, ButtonIcon, Typography } from "../..";
 import { getGlobal } from "../../../global";
 import locale from "../../../locale";
 import { render } from 'react-dom';
-import { bgColor, border, borderRadius, boxBorder, cursorDefault, cursorPointer, displayFlex, flexCol, flexRow, inset, itemsCenter, justifyBetween, mg, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textColor, userSelectNone } from "../../../styles/general";
+import { bgColor, border, borderRadius, boxBorder, cursorDefault, cursorPointer, displayFlex, flexCol, flexRow, inset, itemsCenter, justifyBetween, mg, mgt, parseHeight, parseMaxWidth, parseMinWidth, parseWidth, parseWidthHeight, pd, pointerEventsNone, positionAbsolute, positionRelative, textCenter, textColor, userSelectNone } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { date as moment } from "../../../utils";
 const {
@@ -22,6 +22,7 @@ const {
  *
  * @param {Object} unique
  * @param {Boolean} boxShadow
+ * @param onClickActive
  * @returns
  */
 const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) => css`
@@ -29,9 +30,8 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
     ${flexCol};
     ${boxBorder};
     ${borderRadius('0px 0px 4px 4px')};
-    ${bgColor('system.white')};
+    ${bgColor('system/white')};
     ${parseWidth('100%')};
-    ${parseMinWidth(260)};
     ${parseMaxWidth(400)};
     box-shadow: ${boxShadow ? boxShadowsLarge : 'none'};
     .${unique.navigator.navigator} {
@@ -56,9 +56,9 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
     }
     .${unique.table.table} {
         ${mg([0, 4])};
+        ${pd(0)};
         ${parseWidth('calc(100% - 32px)')};
         border-collapse: separate;
-        padding: 0;
         table-layout: fixed;
         .${unique.table.data} {
             &:not(.empty) {
@@ -66,7 +66,7 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
                 ${positionRelative};
                 ${textCenter};
                 ${userSelectNone};
-                ${textColor('text.main')};
+                ${textColor('text/main')};
                 &:nth-of-type(7n - 1) {
                     ${textColor('info8')};
                 }
@@ -84,37 +84,37 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
                 }
                 &:hover {
                     span.${unique.day.day} {
-                        ${bgColor('fill.hover')};
+                        ${bgColor('fill/hover')};
                     }
                 }
                 ${onClickActive && css`
                     &:active {
                         span.${unique.day.day} {
-                            ${bgColor('fill.pressed')};
+                            ${bgColor('fill/pressed')};
                         }
                     }
                 `}
                 &.${unique.day.active} {
                     span.${unique.day.day} {
-                        ${bgColor('fill.focus')};
+                        ${bgColor('fill/focus')};
                     }
                 }
                 &.${unique.day.today} {
                     span {
                         ${boxBorder};
-                        ${border(1, 'system.active')};
+                        ${border(1, 'system/active')};
                     }
                 }
                 &.${unique.day.between} {
                     opacity: 1;
                     &::before {
-                        ${bgColor('fill.hover')};
+                        ${bgColor('fill/hover')};
                     }
                 }
                 &.${unique.day.from} {
                     opacity: 1;
                     &::before {
-                        ${bgColor('fill.hover')};
+                        ${bgColor('fill/hover')};
                         border-bottom-left-radius: 12px;
                         border-top-left-radius: 12px;
                         left: calc((100% - 24px) / 2);
@@ -123,7 +123,7 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
                 &.${unique.day.to} {
                     opacity: 1;
                     &::before {
-                        ${bgColor('fill.hover')};
+                        ${bgColor('fill/hover')};
                         border-bottom-right-radius: 12px;
                         border-top-right-radius: 12px;
                         right: calc((100% - 24px) / 2);
@@ -140,7 +140,7 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
             ${userSelectNone};
             ${textCenter};
             ${parseHeight(24)};
-            ${textColor('text.normal_label')};
+            ${textColor('text/normal_label')};
             &:nth-of-type(6) {
                 ${textColor('info8')};
             }
@@ -149,43 +149,34 @@ const generateCalendarCSS = (unique, boxShadow = true, onClickActive = true) =>
             }
         }
     }
-    @media only screen and (max-width: 599px) {
+    @media only screen and (max-width: 800px) {
         .${unique.navigator.navigator} {
-            height: 24px;
-            margin-top: 14px;
+            ${parseHeight(24)};
+            ${mgt(14)};
             .${unique.navigator.center} {
-                height: 24px;
-                margin: 0;
-                min-width: 130px;
-                button {
-                    height: 24px;
-                }
-                .DGN-UI-Typography {
-                    font-size: 18px;
-                    min-width: 130px;
-                }
+                ${parseMinWidth(130)};
+                ${parseHeight(24)};
+                ${mg(0)};
             }
             .${unique.navigator.around} {
-                height: 24px;
-                width: 56px;
+                ${parseWidthHeight(56, 24)};
             }
             .${unique.icon} {
-                height: 24px;
-                margin: 0 2px;
-                width: 24px;
+                ${parseWidthHeight(24)};
+                ${mg('0 2px')};
                 svg,
                 path,
                 g {
-                    ${pointerEventsNone}
+                    ${pointerEventsNone};
                 }
             }
         }
         .${unique.table.container} {
-            margin: 6px 0;
+            ${mg('6px 0')};
         }
         .${unique.table.table} {
-            margin: 0 10px;
-            width: calc(100% - 20px);
+            ${mg('0 10px')};
+            ${parseWidth('calc(100% - 20px)')};
             .DGN-UI-Typography {
                 font-size: 14px;
             }
@@ -476,10 +467,9 @@ const renderHeader = className => {
       type: 'h6'
     }, weekdays[i])));
   }
-  const header = jsx("thead", null, jsx("tr", {
+  return jsx("thead", null, jsx("tr", {
     className: className.table.raw
   }, tableHeader));
-  return header;
 };
 /**
  *
@@ -489,6 +479,7 @@ const renderHeader = className => {
  * @param {Function} leftFn
  * @param {Function} rightFn
  * @param {Function} dbRightFn
+ * @param fn
  * @returns navigator
  */
 const renderNavigator = (className, refs, dbLeftFn, leftFn, rightFn, dbRightFn, fn) => jsx("div", {

package/components/form-control/date-range-picker/index.js

@@ -7,7 +7,7 @@ import locale from "../../../locale";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { render } from 'react-dom';
-import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, justifyEnd, left, mg, parseHeight, parseMaxWidth, parseMinWidth, parseWidthHeight, pd, pointerEventsNone, positionFixed, textCenter, top, userSelectNone, whiteSpaceNoWrap } from "../../../styles/general";
+import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyEnd, left, mg, parseHeight, parseMaxWidth, parseMinWidth, parseWidthHeight, pd, pointerEventsNone, positionFixed, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
 import { capitalizeSentenceCase, classNames, date as moment, isEqual, randomString, updatePosition } from "../../../utils";
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from "../calendar/function";
@@ -103,6 +103,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   ...props
 }, reference) => {
+  if (!reference) reference = useRef(null);
   const footerRef = useRef(null);
   const iconRef = useRef(null);
   const ipConRef = useRef(null);
@@ -366,7 +367,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       height,
       top,
       width
-    } = anchor instanceof Element ? anchor.getBoundingClientRect() : ipConRef.current.getBoundingClientRect();
+    } = anchor instanceof Element ? anchor.getBoundingClientRect() : ref.current.getBoundingClientRect();
     const pickerHeight = innerWidth < 567 ? controls ? 550 : 495 : controls ? 310 : 256;
     let style = {};
     style.left = left;
@@ -885,7 +886,7 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     className: unique.tooltip,
     ref: tooltipRef
   }, jsx(Typography, {
-    color: 'system.white',
+    color: 'system/white',
     type: 'p2'
   }));
   const pickerComp = jsx("div", {
@@ -1023,7 +1024,7 @@ const pickerCSS = {
         ${displayFlex};
         ${flexCol};
         ${borderRadius4px};
-        ${bgColor('system.white')};
+        ${bgColor('system/white')};
         box-shadow: ${boxShadowsLarge};
         .${unique.wrapper} {
             ${displayFlex};
@@ -1041,13 +1042,13 @@ const pickerCSS = {
             ${parseMinWidth(65)};
             ${bgColor('rgba(21, 26, 48, 0.9)')};
             ${pd([0.75, 1.5])};
+            ${invisible};
+            ${z(3)};
             transition: left 0.05s ease-in, top 0.05s ease-in;
             vertical-align: middle;
-            visibility: hidden;
             will-change: left top visibility;
-            z-index: ${zIndexCORE(3)};
         }
-        @media only screen and (max-width: 599px) {
+        @media only screen and (max-width: 800px) {
             ${parseMaxWidth(400)};
             .${unique.wrapper} {
                 ${displayFlex};
@@ -1069,11 +1070,11 @@ const pickerCSS = {
         ${parseMaxWidth(805)};
         ${top(position.top)};
         ${left(position.left)};
+        ${z(2)};
         opacity: 0;
         transform: scale(0);
         transform-origin: ${position.transformOrigin};
         transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-        z-index: ${zIndexCORE(2)};
     `,
   active: {
     opacity: 1,

package/icons/effect.js

@@ -105,19 +105,19 @@ Icon.propTypes = {
   viewBox: PropTypes.bool,
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * 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 (ref.current.instance.*method*)
+   *
+   * * 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: ref
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.94-beta.7",
+  "version": "1.3.94-beta.9",
   "description": "",
   "main": "index.js",
   "license": "UNLICENSED",