diginet-core-ui 1.4.10 → 1.4.11

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

@@ -0,0 +1,13 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1438_35)">
+<path d="M38.7 9.5L29.3 0.2C29.2 0.1 28.9 0 28.7 0H12.3C10.5 0 9 1.4 9 3.2V4H10.8V3.2C10.8 2.4 11.4 1.8 12.2 1.8H27.7V7.8C27.7 9.6 29.2 11 31 11H35.2H36.9H37.2V20.8H38C38.4 20.8 38.7 20.9 39 21V10.2C39 9.9 38.9 9.7 38.7 9.5ZM31 9.3C30.2 9.3 29.6 8.7 29.6 7.9V3.1L30 3.5L35.4 8.8L35.8 9.2H31V9.3ZM19.3 38.4C18.4 38.4 17.6 37.9 17.1 37.2H12.3C11.5 37.2 10.9 36.6 10.9 35.8V16H9V35.8C9 37.6 10.5 39 12.3 39H24.2C24 38.8 23.9 38.6 23.7 38.4H19.3Z" fill="#2680EB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.2999 24.4999H20.4999C20.8999 25.6999 22.0999 26.5999 23.3999 26.5999C24.6999 26.5999 25.8999 25.6999 26.2999 24.4999H37.9999C38.5999 24.4999 38.9999 23.9999 38.9999 23.4999C38.9999 22.8999 38.4999 22.4999 37.9999 22.4999H26.2999C25.8999 21.2999 24.6999 20.3999 23.3999 20.3999C22.0999 20.3999 20.8999 21.2999 20.4999 22.4999H19.2999C18.6999 22.4999 18.2999 22.9999 18.2999 23.4999C18.1999 23.9999 18.6999 24.4999 19.2999 24.4999ZM35.8999 26.4999C34.4999 26.4999 33.3999 27.3999 32.9999 28.5999H19.2999C18.6999 28.5999 18.2999 29.0999 18.2999 29.5999C18.2999 30.1999 18.7999 30.5999 19.2999 30.5999H32.9999C33.3999 31.7999 34.5999 32.6999 35.8999 32.6999C37.5999 32.6999 38.9999 31.2999 38.9999 29.5999C38.9999 27.8999 37.5999 26.4999 35.8999 26.4999ZM30.4999 34.7999H37.9999C38.5999 34.7999 38.9999 35.2999 38.9999 35.7999C38.9999 36.2999 38.4999 36.7999 37.9999 36.7999H30.4999C30.0999 37.9999 28.8999 38.8999 27.5999 38.8999C26.2999 38.8999 25.0999 37.9999 24.6999 36.7999H19.2999C18.6999 36.7999 18.2999 36.2999 18.2999 35.7999C18.2999 35.2999 18.7999 34.7999 19.2999 34.7999H24.6999C25.0999 33.5999 26.2999 32.6999 27.5999 32.6999C28.8999 32.6999 30.0999 33.5999 30.4999 34.7999Z" fill="#FF8C00"/>
+<path d="M4.1 9.4H5.2L4.9 10.7H3.8L4.1 9.4Z" fill="#FF4444"/>
+<path d="M11.5 9.4L11.2 10.7H12.3L12.6 9.4H11.5ZM11.5 9.4L11.2 10.7H12.3L12.6 9.4H11.5ZM22 5H2C0.9 5 0 5.9 0 7V13C0 14.1 0.9 15 2 15H22C23.1 15 24 14.1 24 13V7C24 5.9 23.1 5 22 5ZM6.2 9.4L5.9 10.7H7.1V11.7H5.7L5.3 13.2H4.3L4.7 11.7H3.5L3.1 13.2H2.1L2.5 11.7H1.4V10.7H2.8L3.1 9.4H1.9V8.4H3.4L3.7 7H4.7L4.4 8.4H5.5L5.8 7H6.8L6.5 8.4H7.6V9.4H6.2ZM15 9.4H13.7L13.4 10.7H14.6V11.7H13.2L12.8 13.2H11.8L12.2 11.7H11L10.6 13.2H9.6L10 11.7H8.8V10.7H10.2L10.5 9.4H9.3V8.4H10.8L11.1 7H12.1L11.7 8.4H12.8L13.3 7H14.3L13.9 8.4H15V9.4ZM22.4 9.4H21.1L20.8 10.7H22V11.7H20.6L20.2 13.2H19.2L19.6 11.7H18.5L18 13.1H17L17.4 11.6H16.3V10.6H17.7L18 9.4H16.8V8.4H18.3L18.6 7H19.6L19.2 8.4H20.3L20.7 7H21.7L21.3 8.4H22.4V9.4ZM18.7 10.7H19.8L20.1 9.4H19L18.7 10.7ZM11.2 10.7H12.3L12.6 9.4H11.5L11.2 10.7Z" fill="#FF4444"/>
+</g>
+<defs>
+<clipPath id="clip0_1438_35">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/dhr/MHRM51N0005.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_1395_478)">
+<path d="M17.1 24.9H22C23.3 24.9 24.4 23.8 24.4 22.5V15.4C24.4 14.1 23.3 13 22 13H17.1C15.8 13 14.7 14.1 14.7 15.4V22.5C14.6 23.8 15.7 24.9 17.1 24.9Z" fill="#2680EB"/>
+<path d="M36.6 31.9C36.6 25.4 32.6 19.7 26.9 17V22.4C26.9 25 24.7 27.1 22 27.1H17.1C14.4 27.1 12.2 25 12.2 22.4V17C6.4 19.7 2.4 25.3 2.4 31.9C1.1 31.9 0 33 0 34.3V36.7C0 37.9 1.1 39 2.4 39H36.5C37.8 39 38.9 37.9 38.9 36.6V34.2C39 33 37.9 31.9 36.6 31.9Z" fill="#2680EB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M26.1 6.5C26.1 2.9 29 0 32.5 0C36 0 39 2.9 39 6.5C39 10.4 34.8 15.8 33.2 17.8C32.9 18.2 32.3 18.2 31.9 17.8C30.3 15.8 26.1 10.4 26.1 6.5ZM29.2 5.6C28.6 8.2 30.8 10.4 33.4 9.8C34.6 9.5 35.6 8.5 35.9 7.3C36.5 4.7 34.3 2.5 31.7 3.1C30.5 3.4 29.5 4.4 29.2 5.6Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_1395_478">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/assets/images/menu/dhr/MHRM51N0006.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_1395_480)">
+<path d="M38.7406 7.81484C37.4426 7.31387 34.4472 6.81291 33.249 5.6106C32.0508 4.40828 31.6515 1.60289 31.1522 0.300385C31.0524 -0.00019334 30.5531 -0.00019334 30.4533 0.300385C29.9541 1.5027 29.2551 4.10771 27.9571 5.5104C26.6591 6.81291 24.1629 7.41407 22.9648 7.81484C22.6652 7.91503 22.6652 8.3158 22.9648 8.51618C24.1629 9.11734 26.759 9.7185 27.9571 11.021C29.2551 12.3235 29.9541 15.0287 30.5531 16.231C30.653 16.5316 31.1522 16.5316 31.2521 16.231C31.6515 15.1289 32.0508 12.5239 33.5486 11.1212C34.9464 9.7185 37.6423 9.11734 38.9403 8.61638C39.0401 8.3158 39.0401 7.91503 38.7406 7.81484Z" fill="#FF8C00"/>
+<path d="M17.0738 24.9478H21.9663C23.2643 24.9478 24.3626 23.8457 24.3626 22.5432V15.4295C24.3626 14.127 23.2643 13.0249 21.9663 13.0249H17.0738C15.7758 13.0249 14.6775 14.127 14.6775 15.4295V22.5432C14.5776 23.8457 15.676 24.9478 17.0738 24.9478Z" fill="#2680EB"/>
+<path d="M36.544 31.9613C36.544 25.4487 32.5501 19.7378 26.8588 17.0326V22.443C26.8588 25.048 24.6622 27.152 21.9663 27.152H17.0738C14.378 27.152 12.1813 25.048 12.1813 22.443V17.0326C6.3902 19.7378 2.39633 25.3486 2.39633 31.9613C1.09832 31.9613 0 33.0634 0 34.3659V36.7705C0 37.9728 1.09832 39.075 2.39633 39.075H36.4441C37.7421 39.075 38.8404 37.9728 38.8404 36.6703V34.2657C38.9403 33.0634 37.842 31.9613 36.544 31.9613Z" fill="#2680EB"/>
+</g>
+<defs>
+<clipPath id="clip0_1395_480">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,9 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.8098 15.0801C14.2898 15.5001 14.7698 15.9201 15.2498 16.3301C15.3498 16.4201 15.3698 16.4901 15.3298 16.6101C14.9098 17.8901 14.4998 19.1801 14.0798 20.4701C13.9398 20.9001 13.6098 21.1501 13.1798 21.1601C12.7698 21.1701 12.3898 20.9501 12.2698 20.5601C12.2098 20.3701 12.1798 20.1201 12.2298 19.9301C12.7298 18.3201 13.2498 16.7201 13.7698 15.1201C13.7898 15.1001 13.8098 15.0801 13.8098 15.0801Z" fill="#111D5E"/>
+<path d="M14.18 10.6901C13.86 10.8001 13.63 10.9401 13.53 11.3001C13.33 12.0601 13.08 12.8101 12.84 13.5501C12.75 13.8201 12.55 14.0101 12.26 14.0601C12.09 14.0801 12.05 14.1701 12.02 14.3201C11.65 16.0801 11.27 17.8301 10.89 19.5901C10.87 19.6801 10.85 19.7601 10.83 19.8801C10.53 19.6101 10.19 19.5001 9.81 19.6001C9.43 19.7001 9.2 19.9601 9.09 20.3201C8.49 20.3501 8.03 19.8501 8.15 19.2801C8.39 18.0901 8.65 16.9001 8.91 15.7101C9.02 15.2401 9.48 14.9701 9.96 15.0601C10.42 15.1501 10.88 15.2501 11.34 15.3501C11.35 15.3501 11.35 15.3401 11.39 15.3301C11.48 14.9201 11.58 14.4901 11.66 14.0501C11.67 14.0001 11.63 13.9301 11.59 13.8901C11.31 13.6401 11.26 13.3201 11.36 12.9801C11.62 12.1201 11.88 11.2601 12.15 10.4101C12.27 10.0301 12.51 9.74008 12.87 9.55008C13.52 9.20008 14.18 8.86008 14.83 8.51008C14.94 8.45008 15.04 8.40008 15.16 8.36008C16.17 7.98008 17.08 8.68008 16.96 9.75008C16.89 10.3701 16.79 10.9801 16.71 11.5901C16.61 12.3001 16.51 13.0101 16.41 13.7201C16.37 14.0001 16.45 14.2201 16.67 14.4001C17.07 14.7501 17.47 15.1001 17.88 15.4401C18.24 15.7501 18.42 16.1301 18.45 16.6001C18.53 17.7701 18.62 18.9301 18.7 20.1001C18.73 20.5101 18.57 20.8301 18.2 21.0301C17.86 21.2201 17.51 21.1901 17.19 20.9701C16.94 20.8001 16.81 20.5501 16.78 20.2501C16.7 19.1901 16.62 18.1201 16.55 17.0601C16.54 16.8901 16.48 16.7801 16.36 16.6801C15.79 16.2001 15.26 15.6901 14.67 15.2401C13.86 14.6301 13.72 13.8401 13.88 12.9101C13.99 12.1901 14.07 11.4501 14.18 10.6901Z" fill="#111D5E"/>
+<path d="M17.9001 6.24007C17.9001 7.10007 17.2201 7.78007 16.3601 7.79007C15.5001 7.79007 14.8101 7.11007 14.8101 6.25007C14.8101 5.40007 15.5001 4.71007 16.3501 4.71007C17.2201 4.70007 17.9001 5.39007 17.9001 6.24007Z" fill="#111D5E"/>
+<path d="M17.2801 10.47C18.1401 11.13 18.9501 11.74 19.7601 12.37C20.1001 12.64 20.1501 13.16 19.8901 13.48C19.6001 13.83 19.1301 13.89 18.7601 13.61C18.2101 13.2 17.6701 12.77 17.1301 12.35C17.0901 12.32 17.0401 12.25 17.0501 12.2C17.1201 11.64 17.2001 11.08 17.2801 10.47Z" fill="#111D5E"/>
+<path d="M10.07 19.98C10.4 19.98 10.66 20.23 10.66 20.56C10.66 20.89 10.41 21.15 10.08 21.15C9.75003 21.15 9.49003 20.89 9.49003 20.57C9.48003 20.25 9.74003 19.98 10.07 19.98Z" fill="#111D5E"/>
+<path d="M7.40022 28.51L8.19021 26.91H7.98022C7.52022 26.91 7.14021 26.53 7.14021 26.07V2.51C7.14021 2.05 7.52022 1.67 7.98022 1.67H18.8702V5.86C18.8702 7.25 20.0002 8.37 21.3802 8.37H24.3702C24.3802 8.37 24.3802 8.37 24.3902 8.37H25.5702V21.57H27.2502V7.54C27.2502 7.31 27.1502 7.1 27.0002 6.95L20.3002 0.25C20.1502 0.09 19.9302 0 19.7102 0H7.98022C6.60022 0 5.47021 1.13 5.47021 2.51V26.07C5.47021 27.26 6.30022 28.25 7.40022 28.51ZM20.5502 2.86L24.3902 6.7H21.3902C20.9302 6.7 20.5502 6.32 20.5502 5.86V2.86Z" fill="#2680EB"/>
+<path d="M38.76 24.62L31.87 37.66C31.53 38.31 30.58 39 29.84 39H2.2C1.61 39 1.06 38.77 0.64 38.36C0.23 37.94 0 37.38 0 36.8V15.34C0 14.13 0.98 13.14 2.2 13.14H4.22V15.02H2.87C2.6 15.02 2.35 15.12 2.16 15.31C1.97 15.5 1.87 15.75 1.87 16.02V36.14C1.87 36.69 2.32 37.14 2.87 37.14H4.25L10.78 23.93C11.15 23.19 11.85 22.6 12.58 22.6H28.58V17.28C29.63 17.38 30.45 18.24 30.45 19.31V22.6H37.79C38.66 22.59 39.39 23.45 38.76 24.62Z" fill="#FF8C00"/>
+</svg>

package/components/form-control/checkbox/index.js

@@ -4,28 +4,16 @@ import { css, jsx } from '@emotion/core';
 import { Typography } from "../..";
 import PropTypes from 'prop-types';
 import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { bgColor, border, borderColor, borderRadius, boxBorder, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, flexRow, itemsCenter, itemsStart, left, mg, mgb, parseMinWidthHeight, parseWidth, parseWidthHeight, positionAbsolute, positionRelative, scale, textColor, top } from "../../../styles/general";
+import { bgColor, border, borderColor, borderRadius, boxBorder, cursorNotAllowed, cursorPointer, displayBlock, displayFlex, flexRow, itemsCenter, itemsStart, left, mg, mgb, mgl, parseMinWidthHeight, parseWidth, parseWidthHeight, positionAbsolute, positionRelative, scale, textColor, top } from "../../../styles/general";
 import { useTheme } from "../../../theme";
-import { classNames, randomString, refType as ref } from "../../../utils";
-const {
-  colors: {
-    system: {
-      white: systemWhite
-    },
-    fill: {
-      hover: fillHover,
-      pressed: fillPressed
-    }
-  },
-  spacing
-} = useTheme();
+import { classNames, randomString, refType as ref, getProp } from "../../../utils";
 const padding = 0.75;
 const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   checked,
   children,
   className,
-  color,
+  color: colorProp,
   defaultChecked,
   determinate,
   disabled,
@@ -48,6 +36,10 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   if (!inputRef) inputRef = useRef(null);
   const ref = useRef(null);
   if (typeof width === 'number') width += 'px';
+  const {
+    colors
+  } = useTheme();
+  const color = getProp(colors, colorProp, colorProp);
   const [checkedState, setCheckedState] = useState(checked || defaultChecked);
   if (!id) {
     [id] = useState('DGN-UI-' + randomString(10, {
@@ -55,8 +47,8 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       allowSymbol: false
     }));
   }
-  const _CheckBoxSquareCSS = CheckBoxSquareCSS(width, color);
-  const _CheckBoxInputCSS = CheckBoxInputCSS(_CheckBoxSquareCSS.name, color);
+  const _CheckBoxSquareCSS = CheckBoxSquareCSS(width, color, colors);
+  const _CheckBoxInputCSS = CheckBoxInputCSS(_CheckBoxSquareCSS.name, color, colors);
   const handleChange = event => {
     stopPropagation && event.stopPropagation();
     if (readOnly || inputProps.readOnly || disabled || inputProps.disabled) return;
@@ -72,7 +64,7 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       value: forTreeView ? oldLogicChecked : !checkedState,
       target: currentInputRef
     };
-    if (onChange) onChange(e, checkedState);
+    if (onChange) onChange(e);
   };
   const setChecked = check => {
     if (typeof check === 'boolean') {
@@ -132,25 +124,23 @@ const Checkbox = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: _CheckBoxSquareCSS
   }), children || label ? jsx(Typography, {
     type: 'p1',
-    style: {
-      marginLeft: spacing(1)
-    },
-    color: disabled ? 'system.disabled' : '',
+    css: mgl([1]),
+    color: disabled ? 'system/disabled' : undefined,
     ...labelProps
   }, jsx(Fragment, null, children || label, required ? jsx("span", {
-    css: textColor(disabled ? 'system.disabled' : 'semantic.danger')
+    css: textColor(disabled ? getProp(colors, 'system/disabled') : getProp(colors, 'semantic/danger'))
   }, "*") : null)) : null)));
 }));
-const CheckBoxSquareCSS = (width, color) => css`
+const CheckBoxSquareCSS = (width, color, colors) => css`
     ${displayFlex};
     ${flexRow};
     ${positionRelative};
     ${cursorPointer};
     ${boxBorder};
     ${parseWidthHeight(width)};
-    ${border(2, 'system.rest')};
+    ${border(2, getProp(colors, 'system/rest'))};
     ${parseMinWidthHeight(width)};
-    ${bgColor('white')};
+    ${bgColor(getProp(colors, 'system/white'))};
     ${borderRadius(2)};
     ${mg([padding])};
     &.determinate {
@@ -171,7 +161,7 @@ const CheckBoxSquareCSS = (width, color) => css`
             ${flexRow};
             ${positionAbsolute};
             ${parseWidthHeight(10, 2)};
-            ${bgColor('white')};
+            ${bgColor(getProp(colors, 'system/white'))};
             ${left(2)};
             ${top(6)};
             ${scale(0)};
@@ -181,32 +171,34 @@ const CheckBoxSquareCSS = (width, color) => css`
     }
     &:not(.disabled):not(.read-only) {
         &:hover {
-            box-shadow: 0 0 0 3px ${fillHover};
-            ${bgColor('fill.hover')};
+            box-shadow: 0 0 0 3px ${getProp(colors, 'fill/hover')};
+            ${bgColor(getProp(colors, 'fill/hover'))};
             ${borderColor(color)};
         }
         &:focus,
         &:active {
-            box-shadow: 0 0 0 3px ${fillPressed};
-            ${bgColor('fill.pressed')};
+            box-shadow: 0 0 0 3px ${getProp(colors, 'fill/pressed')};
+            ${bgColor(getProp(colors, 'fill/pressed'))};
         }
     }
     &:not(disabled):focus {
-        box-shadow: 0 0 0 3px ${fillPressed};
-        ${bgColor('fill.pressed')};
+        box-shadow: 0 0 0 3px ${getProp(colors, 'fill/pressed')};
+        ${bgColor(getProp(colors, 'fill/pressed'))};
     }
     &.disabled,
     &.read-only {
         ${cursorNotAllowed};
     }
 `;
-const CheckBoxInputCSS = (CheckBoxSquareCSSName, color) => css`
+const CheckBoxInputCSS = (CheckBoxSquareCSSName, color, colors) => css`
     &:checked + label > span.css-${CheckBoxSquareCSSName} {
         &.determinate {
             &::after {
                 transform: translate(-50%, -66%) scale(1) rotate(-45deg);
-                background: linear-gradient(${systemWhite}, ${systemWhite}) left bottom/2px 100%,
-                    linear-gradient(${systemWhite}, ${systemWhite}) left bottom/100% 2px;
+                background: linear-gradient(${getProp(colors, 'system/white')}, ${getProp(colors, 'system/white')}) left
+                        bottom/2px 100%,
+                    linear-gradient(${getProp(colors, 'system/white')}, ${getProp(colors, 'system/white')}) left
+                        bottom/100% 2px;
                 background-repeat: no-repeat;
             }
         }
@@ -223,17 +215,17 @@ const CheckBoxInputCSS = (CheckBoxSquareCSSName, color) => css`
     &:checked:disabled {
         & + label > span.css-${CheckBoxSquareCSSName} {
             &:not(.indeterminate) {
-                ${bgColor('system.disabled')};
+                ${bgColor(getProp(colors, 'system/disabled'))};
             }
             &.indeterminate {
-                ${bgColor('formal2')};
-                ${borderColor('formal2')};
+                ${bgColor(getProp(colors, 'formal2'))};
+                ${borderColor(getProp(colors, 'formal2'))};
             }
         }
     }
     &:disabled {
         & + label > span.css-${CheckBoxSquareCSSName} {
-            ${borderColor('system.disabled')};
+            ${borderColor(getProp(colors, 'system/disabled'))};
         }
     }
 `;

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

@@ -7,15 +7,12 @@ 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, invisible, justifyEnd, left, mg, parseHeight, parseMaxWidth, parseMinWidth, pd, pointerEventsNone, positionFixed, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } from "../../../styles/general";
+import { bgColor, borderRadius4px, cursorPointer, displayBlock, displayFlex, displayNone, flexCol, flexRow, invisible, justifyEnd, left, mg, parseHeight, parseMaxWidth, parseMinWidth, pd, pointerEventsNone, positionFixed, shadowLarge, textCenter, top, userSelectNone, whiteSpaceNoWrap, z } from "../../../styles/general";
 import { useTheme } from "../../../theme";
-import { capitalizeSentenceCase, classNames, date as moment, isEqual, randomString, updatePosition } from "../../../utils";
+import { capitalizeSentenceCase, classNames, isEqual, date as moment, randomString, updatePosition } from "../../../utils";
 import { generateCalendarCSS, onUpdateNavigator, renderHeader, renderNavigator } from "../calendar/function";
 import ControlComp from "../control";
 const {
-  boxShadows: {
-    large: boxShadowsLarge
-  },
   spacing,
   zIndex: zIndexCORE
 } = useTheme();
@@ -103,7 +100,9 @@ const DateRangePicker = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   viewType,
   ...props
 }, reference) => {
+  var _placeholder;
   if (!reference) reference = useRef(null);
+  placeholder = (_placeholder = placeholder) !== null && _placeholder !== void 0 ? _placeholder : `${displayFormat} - ${displayFormat}`;
   const footerRef = useRef(null);
   const iconRef = useRef(null);
   const ipConRef = useRef(null);
@@ -1032,7 +1031,7 @@ const pickerCSS = {
         ${flexCol};
         ${borderRadius4px};
         ${bgColor('system/white')};
-        box-shadow: ${boxShadowsLarge};
+        ${shadowLarge};
         .${unique.wrapper} {
             ${displayFlex};
             ${flexRow};