scorer-ui-kit 2.9.0 → 2.9.2

package/dist/index.modern.js

@@ -1,10 +1,10 @@
 import styled, { css, createGlobalStyle, keyframes } from 'styled-components';
-import React__default, { useState, useEffect, useCallback, useRef, createElement, Fragment, useContext, useMemo, useLayoutEffect, createContext, useReducer, forwardRef, useImperativeHandle } from 'react';
+import React__default, { useState, useEffect, useCallback, useRef, createElement, Fragment, useContext, useMemo, useLayoutEffect, forwardRef, useImperativeHandle, createContext, useReducer } from 'react';
 import { IconSVGs } from '@future-standard/icons';
 export { IconSVGs } from '@future-standard/icons';
 import ReactDom from 'react-dom';
+import { isEqual, format, min, endOfDay, set, startOfDay, eachWeekOfInterval, startOfMonth, endOfMonth, isAfter, add, addMonths, eachDayOfInterval, endOfWeek, isToday, isSameMonth, intervalToDuration, isWithinInterval, isSameDay } from 'date-fns';
 import { useHistory, Link, useLocation } from 'react-router-dom';
-import { format, min, endOfDay, set, isEqual, startOfDay, eachWeekOfInterval, startOfMonth, endOfMonth, isAfter, add, addMonths, eachDayOfInterval, endOfWeek, isToday, isSameMonth, intervalToDuration, isWithinInterval, isSameDay } from 'date-fns';
 import { ja, enUS } from 'date-fns/locale';
 import isequal from 'lodash.isequal';
 import debounce from 'lodash.debounce';
@@ -793,24 +793,6 @@ var typography = {
       "textDecoration": "none",
       "color": "var(--grey-a11)"
     }
-  },
-  "modal": {
-    "title": {
-      "textAlign": "left",
-      "fontSize": "20px",
-      "fontWeight": 400,
-      "textShadow": "0px 0px 10px var(--white-a5)",
-      "textDecoration": "none",
-      "color": "var(--grey-11)"
-    },
-    "basicContent": {
-      "textAlign": "left",
-      "fontSize": "14px",
-      "fontWeight": 400,
-      "lineHeight": "25px",
-      "textDecoration": "none",
-      "color": "var(--grey-11)"
-    }
   }
 };
 
@@ -1344,17 +1326,6 @@ var styles = {
       "borderColor": "var(--primary-7)",
       "border": "var(--primary-7) 1px solid"
     }
-  },
-  "modal": {
-    "overlay": {
-      "backgroundColor": "var(--grey-a3)"
-    },
-    "container": {
-      "boxShadow": "0px 10px 15px 0px var(--primary-a1)",
-      "backgroundColor": "var(--grey-1)",
-      "borderColor": "var(--grey-6)",
-      "border": "var(--grey-6) 1px solid"
-    }
   }
 };
 
@@ -2261,7 +2232,7 @@ var InputActionButton = styled.button.attrs({
 var FeedbackContainer = styled.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n  flex-shrink: 0;\n\n  background-color: transparent;\n  border: 1px solid transparent;\n\n  border-left: none;\n  border-radius: 0 3px 3px 0;\n  overflow: hidden;\n\n  display:flex;\n  justify-content:left;\n  align-items:center;\n"])));
 var FeedbackMessage = styled.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n  flex: 0 1 400px;\n  padding: 0 10px 0 0;\n\n  font-weight: 500;\n  color: var(--white-1);\n"])));
 var FeedbackIcon = styled.div(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n  flex: 0 0 40px;\n  width: 40px;\n  display: flex;\n  justify-content:center;\n  align-items:center;\n\n  ", " {\n    [stroke]{\n      stroke: var(--white-1);\n    }\n  }\n"])), IconWrapper);
-var StyledInput = styled.input(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", ";\n\n  font-family: var(--font-data);\n\n  height: var(--input-height);\n  width: 100%;\n  border-radius: 3px;\n\n  padding: 0 15px 0 15px;\n  box-sizing: border-box;\n  outline: none;\n\n  color: var(--input-color-default);\n  font-size: 14px;\n\n  transition: \n    border var(--speed-fast) var(--easing-primary-out),\n    background-color var(--speed-fast) var(--easing-primary-out),\n    box-shadow var(--speed-fast) var(--easing-primary-out);\n\n  &::placeholder {\n    font-family: var(--font-data);\n    color: var(--input-color-placeholder);\n    font-style: italic;\n    font-weight: 400;\n  }\n\n"])), removeAutoFillStyle, function (_ref) {
+var StyledInput = styled.input(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", ";\n\n  font-family: var(--font-data);\n\n  height: var(--input-height);\n  width: 100%;\n  border-radius: 3px;\n\n  padding: 0 15px 0 15px;\n  box-sizing: border-box;\n  outline: none;\n\n  color: var(--input-color-default);\n  font-size: 14px;\n\n  transition:\n    border var(--speed-fast) var(--easing-primary-out),\n    background-color var(--speed-fast) var(--easing-primary-out),\n    box-shadow var(--speed-fast) var(--easing-primary-out);\n\n  &::placeholder {\n    font-family: var(--font-data);\n    color: var(--input-color-placeholder);\n    font-style: italic;\n    font-weight: 400;\n  }\n\n  &:lang(ja)::placeholder {\n    font-style: normal;\n  };\n"])), removeAutoFillStyle, function (_ref) {
   var fieldState = _ref.fieldState;
   return css(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n    border: 1px solid var(--input-", "-border-color);\n    background: var(--input-", "-background-color);\n    box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread)  var(--input-", "-shadow-color, transparent);\n  "])), fieldState, fieldState, fieldState);
 });
@@ -2272,7 +2243,7 @@ var InputContainer = styled.div(_templateObject8$3 || (_templateObject8$3 = _tag
 var Container$5 = styled.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n  ", "\n\n"])), function (_ref3) {
   var fieldState = _ref3.fieldState,
     showFeedback = _ref3.showFeedback;
-  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  \n    display: flex;\n    position: relative;\n    flex-direction: row;\n\n    ", "{\n\n      &:disabled {\n        cursor: not-allowed;\n      }\n      \n      ", ";\n\n    }\n\n    ", " {\n      ", ";\n      border-color: var(--input-", "-border-color);\n      background: var(--input-", "-border-color);\n    }\n\n    &:focus-within ", " {\n      border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n      box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n    }\n  "])), StyledInput, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      "]))), FeedbackContainer, ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        display: none;\n      "]))), fieldState, fieldState, StyledInput, fieldState, fieldState, fieldState);
+  return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n\n    display: flex;\n    position: relative;\n    flex-direction: row;\n\n    ", "{\n\n      &:disabled {\n        cursor: not-allowed;\n      }\n\n      ", ";\n\n    }\n\n    ", " {\n      ", ";\n      border-color: var(--input-", "-border-color);\n      background: var(--input-", "-border-color);\n    }\n\n    &:focus-within ", " {\n      border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n      box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n    }\n  "])), StyledInput, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        border-top-right-radius: 0px;\n        border-bottom-right-radius: 0px;\n      "]))), FeedbackContainer, ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        display: none;\n      "]))), fieldState, fieldState, StyledInput, fieldState, fieldState, fieldState);
 });
 var Input = function Input(_ref4) {
   var _ref4$type = _ref4.type,
@@ -2372,16 +2343,16 @@ var Label = function Label(_ref3) {
 
 var _excluded$6 = ["unit", "label", "name", "type", "placeholder", "defaultValue", "fieldState", "required", "className"];
 var _templateObject$j, _templateObject2$d, _templateObject3$c, _templateObject4$b, _templateObject5$9, _templateObject6$5, _templateObject7$5;
-var StyledInput$1 = styled.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  font-family: var(--font-data);\n  line-height: var(--input-compact-height);\n\n  font-size: 14px;\n  flex: 1;\n  color: var(--input-color-default);\n  width: 100%;\n  border: none;\n  background-color: transparent;\n  box-sizing: border-box;\n  outline: none;\n    \n  &::placeholder {\n    color: var(--input-color-placeholder);\n    font-style: italic;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    color: var(--input-color-disabled);\n  }\n"])), removeAutoFillStyle);
-var InputContainer$1 = styled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: var(--input-compact-height);\n  padding: 0 8px;\n  align-items: center;\n  gap: 8px;\n  position: relative;\n  border-radius: 3px;\n  \n  ", ";\n\n  ", "\n\n"])), function (_ref) {
+var StyledInput$1 = styled.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  font-family: var(--font-data);\n  line-height: var(--input-compact-height);\n\n  font-size: 14px;\n  flex: 1;\n  color: var(--input-color-default);\n  width: 100%;\n  border: none;\n  background-color: transparent;\n  box-sizing: border-box;\n  outline: none;\n\n  &::placeholder {\n    color: var(--input-color-placeholder);\n    font-style: italic;\n  }\n\n  &:lang(ja)::placeholder {\n    font-style: normal;\n  };\n\n  &:disabled {\n    cursor: not-allowed;\n    color: var(--input-color-disabled);\n  }\n"])), removeAutoFillStyle);
+var InputContainer$1 = styled.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n  display: flex;\n  height: var(--input-compact-height);\n  padding: 0 8px;\n  align-items: center;\n  gap: 8px;\n  position: relative;\n  border-radius: 3px;\n\n  ", ";\n\n  ", "\n\n"])), function (_ref) {
   var fieldState = _ref.fieldState;
-  return css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n    border: 1px solid var(--input-", "-border-color);\n    background: var(--input-", "-background-color);\n    transition: \n      border var(--speed-normal) var(--easing-primary-out),\n      background-color var(--speed-normal) var(--easing-primary-out);\n  "])), fieldState, fieldState);
+  return css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n    border: 1px solid var(--input-", "-border-color);\n    background: var(--input-", "-background-color);\n    transition:\n      border var(--speed-normal) var(--easing-primary-out),\n      background-color var(--speed-normal) var(--easing-primary-out);\n  "])), fieldState, fieldState);
 }, function (_ref2) {
   var hasAction = _ref2.hasAction;
   return hasAction && css(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n    ", "{\n      padding-right: 200px;\n\n      // Used to control password manager injection.\n      background-position: calc(100% - 50px) 50% !important;\n    }\n  "])), StyledInput$1);
 });
 var UnitKey = styled.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n  flex: 0 1;\n  font-size: 12px;\n  font-family: var(--font-ui);\n  color: var(--input-color-unit);\n  margin-top: 1px;\n  white-space: nowrap;\n"])));
-var Container$6 = styled.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  \n  ", ";\n"])), function (_ref3) {
+var Container$6 = styled.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  ", ";\n"])), function (_ref3) {
   var fieldState = _ref3.fieldState;
   return fieldState && css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n    &:focus-within ", " {\n      transition: boxShadow var(--speed-fast) var(--easing-primary-in-out);\n      box-shadow: 0 3px 3px var(--input-", "-focused-shadow-color, var(--input-", "-shadow-color));\n    }\n  "])), InputContainer$1, fieldState, fieldState);
 });
@@ -2839,7 +2810,7 @@ var RadioButton = function RadioButton(_ref2) {
 var _excluded$7 = ["placeholder", "fieldState", "showFeedback", "feedbackMessage", "children"];
 var _templateObject$n, _templateObject2$h, _templateObject3$g, _templateObject4$f, _templateObject5$d, _templateObject6$9, _templateObject7$9, _templateObject8$7, _templateObject9$6;
 var FeedbackIcon$1 = styled.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n  flex: 0 0 40px;\n  width: 40px;\n  display: flex;\n  justify-content:center;\n  align-items:center;\n  padding-top: 2px;\n"])));
-var StyledTextArea = styled.textarea(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n\n  ", ";\n\n  padding: 8px 15px;\n  box-sizing: border-box;\n  outline: none;\n  height: 100%;\n  width: 100%;\n  border-radius: 3px;\n\n\n  color: var(--input-color-default);\n  font-size: 14px;\n  \n  transition: \n    border var(--speed-fast) var(--easing-primary-out),\n    background-color var(--speed-fast) var(--easing-primary-out),\n    box-shadow var(--speed-fast) var(--easing-primary-out);\n\n  &::placeholder {\n    font-family: var(--font-data);\n    color: var(--input-color-placeholder);\n    font-style: italic;\n    font-weight: 400;\n  }\n\n"])), function (_ref) {
+var StyledTextArea = styled.textarea(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n\n  ", ";\n\n  padding: 8px 15px;\n  box-sizing: border-box;\n  outline: none;\n  height: 100%;\n  width: 100%;\n  border-radius: 3px;\n\n\n  color: var(--input-color-default);\n  font-size: 14px;\n\n  transition:\n    border var(--speed-fast) var(--easing-primary-out),\n    background-color var(--speed-fast) var(--easing-primary-out),\n    box-shadow var(--speed-fast) var(--easing-primary-out);\n\n  &::placeholder {\n    font-family: var(--font-data);\n    color: var(--input-color-placeholder);\n    font-style: italic;\n    font-weight: 400;\n  }\n\n  &:lang(ja)::placeholder {\n    font-style: normal;\n  };\n"])), function (_ref) {
   var fieldState = _ref.fieldState;
   return css(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n    font-family: var(--font-data);\n    border: 1px solid var(--input-", "-border-color);\n    background: var(--input-", "-background-color);\n    box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread)  var(--input-", "-shadow-color, transparent);\n  "])), fieldState, fieldState, fieldState);
 });
@@ -2848,7 +2819,7 @@ var FeedbackMessage$1 = styled.div(_templateObject5$d || (_templateObject5$d = _
 var Container$a = styled.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref2) {
   var fieldState = _ref2.fieldState,
     showFeedback = _ref2.showFeedback;
-  return css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["      \n    display: flex;\n    position: relative;\n    flex-direction: column;\n\n    ", "{\n      ", ";\n      \n      &:disabled {\n        cursor: not-allowed;\n      }\n      \n      &:focus {\n        box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n      }\n    }\n\n    ", " {\n      border-color: var(--input-", "-border-color);\n      background: var(--input-", "-border-color);\n\n      ", "\n    }\n\n    &:focus-within ", " {\n      border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n    }\n\n  "])), StyledTextArea, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n        border-bottom-left-radius: 0px;\n        border-bottom-right-radius: 0px;\n      "]))), fieldState, FeedbackContainer$1, fieldState, fieldState, ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n        display:none;\n      "]))), FeedbackContainer$1, fieldState, fieldState);
+  return css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["\n    display: flex;\n    position: relative;\n    flex-direction: column;\n\n    ", "{\n      ", ";\n\n      &:disabled {\n        cursor: not-allowed;\n      }\n\n      &:focus {\n        box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n      }\n    }\n\n    ", " {\n      border-color: var(--input-", "-border-color);\n      background: var(--input-", "-border-color);\n\n      ", "\n    }\n\n    &:focus-within ", " {\n      border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n    }\n\n  "])), StyledTextArea, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n        border-bottom-left-radius: 0px;\n        border-bottom-right-radius: 0px;\n      "]))), fieldState, FeedbackContainer$1, fieldState, fieldState, ['default', 'disabled'].indexOf(fieldState) !== -1 && css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n        display:none;\n      "]))), FeedbackContainer$1, fieldState, fieldState);
 });
 var TextArea = function TextArea(_ref3) {
   var _ref3$placeholder = _ref3.placeholder,
@@ -2913,7 +2884,7 @@ var SubjectIcon = styled.div(_templateObject3$h || (_templateObject3$h = _tagged
   var isCompact = _ref2.isCompact;
   return isCompact ? '10px' : '12px';
 });
-var StyledSelect = styled.select(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  outline: none;\n  border-radius: 3px;\n  appearance: none;\n  font-family: var(--font-data);\n  height: var(--input-height);\n  width: 100%;\n  border-radius: 3px;\n  color: var(--input-color-default);\n  font-size: 14px;\n  cursor: pointer;\n\n  transition: \n    border var(--speed-fast) var(--easing-primary-out),\n    background-color var(--speed-fast) var(--easing-primary-out),\n    box-shadow var(--speed-fast) var(--easing-primary-out);\n\n  ", ";\n\n\n  ", ";\n\n  &:disabled {\n    opacity: 1;\n    cursor: not-allowed;\n    color: var(--input-disabled-color-default);\n    border: 1px solid var(--input-disabled-border-color);\n    background: var(--input-disabled-background-color);\n    box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread)  var(--input-disabled-shadow-color, transparent);\n  }\n\n  &::-ms-expand {\n    display: none;\n  }\n"])), function (_ref3) {
+var StyledSelect = styled.select(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n  box-sizing: border-box;\n  outline: none;\n  border-radius: 3px;\n  appearance: none;\n  font-family: var(--font-data);\n  height: var(--input-height);\n  width: 100%;\n  border-radius: 3px;\n  color: var(--input-color-default);\n  font-size: 14px;\n  cursor: pointer;\n\n  transition:\n    border var(--speed-fast) var(--easing-primary-out),\n    background-color var(--speed-fast) var(--easing-primary-out),\n    box-shadow var(--speed-fast) var(--easing-primary-out);\n\n  ", ";\n\n\n  ", ";\n\n  &:disabled {\n    opacity: 1;\n    cursor: not-allowed;\n    color: var(--input-disabled-color-default);\n    border: 1px solid var(--input-disabled-border-color);\n    background: var(--input-disabled-background-color);\n    box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread)  var(--input-disabled-shadow-color, transparent);\n  }\n\n  &::-ms-expand {\n    display: none;\n  }\n"])), function (_ref3) {
   var fieldState = _ref3.fieldState;
   return css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n    border: 1px solid var(--input-", "-border-color);\n    background: var(--input-", "-background-color);\n    box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread)  var(--input-", "-shadow-color, transparent);\n  "])), fieldState, fieldState, fieldState);
 }, function (_ref4) {
@@ -2923,7 +2894,7 @@ var StyledSelect = styled.select(_templateObject4$g || (_templateObject4$g = _ta
 });
 var Container$b = styled.div(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n\n  ", ";\n\n"])), function (_ref5) {
   var activePlaceholder = _ref5.activePlaceholder;
-  return activePlaceholder && css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n    ", " {\n      font-family: var(--font-data);\n      color: var(--input-color-placeholder);\n      font-style: italic;\n      font-weight: 400;\n    }\n  "])), StyledSelect);
+  return activePlaceholder && css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n    ", " {\n      font-family: var(--font-data);\n      color: var(--input-color-placeholder);\n      font-style: italic;\n      &:lang(ja) {\n        font-style: normal;\n      }\n      font-weight: 400;\n    }\n  "])), StyledSelect);
 });
 var SelectField = function SelectField(_ref6) {
   var _ref6$fieldState = _ref6.fieldState,
@@ -3054,6 +3025,21 @@ var isNotNumber = function isNotNumber(value) {
   var intValue = Number(value);
   return intValue !== intValue;
 };
+var areDatesEqual = function areDatesEqual(storedValue, currentDisplay) {
+  if (storedValue === null && currentDisplay === null) {
+    return true;
+  }
+  if (storedValue === undefined && currentDisplay === null) {
+    return true;
+  }
+  if (isDateInterval(storedValue) && isDateInterval(currentDisplay)) {
+    return isEqual(storedValue === null || storedValue === void 0 ? void 0 : storedValue.start, currentDisplay === null || currentDisplay === void 0 ? void 0 : currentDisplay.start) && isEqual(storedValue === null || storedValue === void 0 ? void 0 : storedValue.end, currentDisplay === null || currentDisplay === void 0 ? void 0 : currentDisplay.end);
+  }
+  if (storedValue instanceof Date && currentDisplay instanceof Date) {
+    return isEqual(storedValue, currentDisplay);
+  }
+  return false;
+};
 
 var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback", "allMarkCentered"];
 var _templateObject$p, _templateObject2$j, _templateObject3$i, _templateObject4$h, _templateObject5$f, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$8, _templateObject10$5, _templateObject11$3, _templateObject12$3;
@@ -3074,7 +3060,7 @@ var Mark = styled.span(_templateObject5$f || (_templateObject5$f = _taggedTempla
   var leftValue = _ref4.leftValue;
   return "calc(" + leftValue + "% + 7px)";
 });
-var MarkLabel = styled.span(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -24px;\n  left: ", ";\n\n  font-size: 10px;\n  font-style: italic;\n  line-height: normal;\n  text-align: center;\n  color: var(--grey-a11);\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref5) {
+var MarkLabel = styled.span(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: -24px;\n  left: ", ";\n\n  font-size: 10px;\n  font-style: italic;\n  &:lang(ja) {\n    font-style: normal;\n  }\n  line-height: normal;\n  text-align: center;\n  color: var(--grey-a11);\n\n  ", "\n  ", "\n  ", "\n"])), function (_ref5) {
   var leftValue = _ref5.leftValue;
   return "calc(" + leftValue + "% + 7px)";
 }, function (_ref6) {
@@ -3314,30 +3300,93 @@ var InputFileButton = function InputFileButton(_ref) {
   }, text));
 };
 
-var _excluded$b = ["max", "min", "defaultValue", "title", "timeUnit", "controlledValue", "inputCallback"];
-var _templateObject$r, _templateObject2$l, _templateObject3$k, _templateObject4$i, _templateObject5$g;
+var _excluded$b = ["max", "min", "defaultValue", "title", "timeUnit", "controlledValue", "inputCallback", "timeFormat"];
+var _templateObject$r, _templateObject2$l, _templateObject3$k, _templateObject4$i, _templateObject5$g, _templateObject6$c, _templateObject7$c;
 var Container$d = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose([""])));
 var Headers = styled.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  color: var(--grey-10);\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 30px;\n  padding: 0 6px;\n"])));
-var ValueLabel = styled(Label)(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  margin-bottom: 0;\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme.fontFamily.ui;
-});
-var Unit = styled.div(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n  color: var(--grey-a11);\n  font-style: italic;\n  font-size: 12px;\n  line-height: 1.5;\n"])), function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.fontFamily.data;
-});
-var ValueTitle = styled.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
-var DurationSlider = function DurationSlider(_ref3) {
-  var max = _ref3.max,
-    min = _ref3.min,
-    _ref3$defaultValue = _ref3.defaultValue,
-    defaultValue = _ref3$defaultValue === void 0 ? 0 : _ref3$defaultValue,
-    _ref3$title = _ref3.title,
-    title = _ref3$title === void 0 ? '' : _ref3$title,
-    timeUnit = _ref3.timeUnit,
-    controlledValue = _ref3.controlledValue,
-    inputCallback = _ref3.inputCallback,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$b);
+var ValueLabel = styled(Label)(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  margin-bottom: 0;\n"])));
+var unitStyle = css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-data);\n  color: var(--grey-a11);\n  font-style: italic;\n  &:lang(ja) {\n    font-style: normal;\n  }\n  font-size: 12px;\n  line-height: 1.5;\n"])));
+var Unit = styled.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), unitStyle);
+var ValueTitle = styled.div(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
+var TitleTemplate = styled.div(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  ", ";\n  span {\n    font-style: normal;\n  }\n"])), unitStyle);
+var getTimeValues = function getTimeValues(value, unit) {
+  switch (unit) {
+    case 'seconds':
+      return {
+        hours: Math.floor(value / 3600),
+        minutes: Math.floor(value % 3600 / 60),
+        seconds: value % 60
+      };
+    case 'minutes':
+      return {
+        hours: Math.floor(value / 60),
+        minutes: value % 60,
+        seconds: 0
+      };
+    default:
+      return {
+        hours: value,
+        minutes: 0,
+        seconds: 0
+      };
+  }
+};
+var getValueTitle = function getValueTitle(value, timeUnit, timeFormat) {
+  if (!timeFormat || !isTimeUnit(timeUnit)) {
+    var unit = isTimeUnit(timeUnit) ? getShortTextTimeUnit(value, timeUnit) : timeUnit;
+    return React__default.createElement(ValueTitle, null, React__default.createElement(ValueLabel, {
+      htmlFor: 'duration-slider',
+      labelText: "" + value
+    }), React__default.createElement(Unit, null, unit));
+  }
+  var timeValues = getTimeValues(value, timeUnit);
+  var updatedTitle = timeFormat.split(/(\[H+\]|\[M+\]|\[S+\])/).map(function (part, index) {
+    switch (part) {
+      case '[HH]':
+        return React__default.createElement("span", {
+          key: index
+        }, timeValues.hours.toString().padStart(2, '0'));
+      case '[H]':
+        return React__default.createElement("span", {
+          key: index
+        }, timeValues.hours);
+      case '[MM]':
+        return React__default.createElement("span", {
+          key: index
+        }, timeValues.minutes.toString().padStart(2, '0'));
+      case '[M]':
+        return React__default.createElement("span", {
+          key: index
+        }, timeValues.minutes);
+      case '[SS]':
+        return React__default.createElement("span", {
+          key: index
+        }, timeValues.seconds.toString().padStart(2, '0'));
+      case '[S]':
+        return React__default.createElement("span", {
+          key: index
+        }, timeValues.seconds);
+      default:
+        {
+          var preserveSpacesInPart = part.replace(/\s+/g, "\xA0");
+          return preserveSpacesInPart;
+        }
+    }
+  });
+  return React__default.createElement(ValueTitle, null, React__default.createElement(TitleTemplate, null, updatedTitle));
+};
+var DurationSlider = function DurationSlider(_ref) {
+  var max = _ref.max,
+    min = _ref.min,
+    _ref$defaultValue = _ref.defaultValue,
+    defaultValue = _ref$defaultValue === void 0 ? 0 : _ref$defaultValue,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '' : _ref$title,
+    timeUnit = _ref.timeUnit,
+    controlledValue = _ref.controlledValue,
+    inputCallback = _ref.inputCallback,
+    timeFormat = _ref.timeFormat,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   var _useState = useState(defaultValue),
     selectedValue = _useState[0],
     setSelectedValue = _useState[1];
@@ -3348,14 +3397,10 @@ var DurationSlider = function DurationSlider(_ref3) {
     setSelectedValue(value);
   }, [inputCallback]);
   var labelValue = controlledValue ? controlledValue : selectedValue;
-  var unit = isTimeUnit(timeUnit) ? getShortTextTimeUnit(labelValue, timeUnit) : timeUnit;
   return React__default.createElement(Container$d, null, React__default.createElement(Headers, null, React__default.createElement(Label, {
     htmlFor: 'duration-slider',
     labelText: title
-  }), React__default.createElement(ValueTitle, null, React__default.createElement(ValueLabel, {
-    htmlFor: 'duration-slider',
-    labelText: "" + labelValue
-  }), React__default.createElement(Unit, null, unit))), React__default.createElement(SliderInput, Object.assign({}, props, {
+  }), getValueTitle(labelValue, timeUnit, timeFormat)), React__default.createElement(SliderInput, Object.assign({}, props, {
     id: 'duration-slider',
     max: max,
     min: min,
@@ -3801,14 +3846,14 @@ var areDimensionsDiff = function areDimensionsDiff(oldDimensions, newValues) {
   return isDifferent;
 };
 
-var _templateObject$u, _templateObject2$o, _templateObject3$m, _templateObject4$j, _templateObject5$h, _templateObject6$c, _templateObject7$c, _templateObject8$a, _templateObject9$9, _templateObject10$6, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+var _templateObject$u, _templateObject2$o, _templateObject3$m, _templateObject4$j, _templateObject5$h, _templateObject6$d, _templateObject7$d, _templateObject8$a, _templateObject9$9, _templateObject10$6, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
 var CropLineStyle = css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  display: block;\n  opacity: 0.1;\n"])));
 var TopLine = styled.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n  ", ";\n  cursor: n-resize;\n  width: 100%;\n  height: 5px;\n  left: 0;\n  top: -3px;\n"])), CropLineStyle);
 var RightLine = styled.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n  ", ";\n  cursor: e-resize;\n  right: -3px;\n  top: 0;\n  width: 5px;\n  height: 100%;\n"])), CropLineStyle);
 var BottomLine = styled.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n  ", "\n  cursor: s-resize;\n  bottom: -3px;\n  height: 5px;\n  width: 100%;\n  left: 0;\n"])), CropLineStyle);
 var LeftLine = styled.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n  ", ";\n  cursor: w-resize;\n  left: -3px;\n  top: 0;\n  width: 5px;\n  height: 100%;\n"])), CropLineStyle);
-var resizeSquaresCss = css(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  border: solid 1px var(--black-a12);\n  background-color: var(--white-1);\n"])));
-var PointN = styled.div(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n  ", ";\n  top: -5px;\n  margin-left: -5px;\n  left: 50%;\n  ", ";\n"])), resizeSquaresCss, function (_ref) {
+var resizeSquaresCss = css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  border: solid 1px var(--black-a12);\n  background-color: var(--white-1);\n"])));
+var PointN = styled.div(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  ", ";\n  top: -5px;\n  margin-left: -5px;\n  left: 50%;\n  ", ";\n"])), resizeSquaresCss, function (_ref) {
   var isResizable = _ref.isResizable;
   return isResizable && css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n    cursor: n-resize;\n  "])));
 });
@@ -3878,7 +3923,7 @@ var CropArea = function CropArea(_ref9) {
   })));
 };
 
-var _templateObject$v, _templateObject2$p, _templateObject3$n, _templateObject4$k, _templateObject5$i, _templateObject6$d, _templateObject7$d, _templateObject8$b, _templateObject9$a;
+var _templateObject$v, _templateObject2$p, _templateObject3$n, _templateObject4$k, _templateObject5$i, _templateObject6$e, _templateObject7$e, _templateObject8$b, _templateObject9$a;
 var Container$g = styled.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--grey-3);\n  -webkit-backdrop-filter: blur(5px);\n  backdrop-filter: blur(5px);\n  font-family: ", ";\n  z-index: 999;\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
@@ -3887,14 +3932,14 @@ var InnerContainer$2 = styled.div(_templateObject2$p || (_templateObject2$p = _t
 var ToolHeader = styled.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 17px;\n"])));
 var TextGroup = styled.div(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  font-size: 20px;\n  font-weight: 500;\n  color: var(--mono);\n\n  ", " {\n    display: flex;\n    align-items: center;\n    margin-right: 14px;\n  }\n"])), IconWrapper);
 var ButtonsGroup = styled.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n  button + button {\n    margin-left: 10px;\n  }\n"])));
-var PreviewArea = styled.div(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  height: ", ";\n  width: ", ";\n  border-radius: 5px;\n  background-color: var(--grey-3);\n  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, var(--white-a10) 35px, var(--white-a10) 70px);\n"])), function (_ref2) {
+var PreviewArea = styled.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n  height: ", ";\n  width: ", ";\n  border-radius: 5px;\n  background-color: var(--grey-3);\n  background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, var(--white-a10) 35px, var(--white-a10) 70px);\n"])), function (_ref2) {
   var canvasHeight = _ref2.canvasHeight;
   return canvasHeight ? canvasHeight + "px" : "462px";
 }, function (_ref3) {
   var canvasWidth = _ref3.canvasWidth;
   return canvasWidth ? canvasWidth + "px" : "485px";
 });
-var HiddenImage = styled.img(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
+var HiddenImage = styled.img(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n  display: none;\n"])));
 var SelectedArea = styled.div(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  border: dashed 1px var(--black-a12);\n  box-shadow: 0 0 0 9999em var(--black-a11);\n  ", ";\n  cursor: move;\n"])), function (_ref4) {
   var cropLeft = _ref4.cropLeft,
     cropTop = _ref4.cropTop,
@@ -4164,7 +4209,7 @@ var CropTool = function CropTool(_ref5) {
   })))))), document.body);
 };
 
-var _templateObject$w, _templateObject2$q, _templateObject3$o, _templateObject4$l, _templateObject5$j, _templateObject6$e, _templateObject7$e, _templateObject8$c, _templateObject9$b;
+var _templateObject$w, _templateObject2$q, _templateObject3$o, _templateObject4$l, _templateObject5$j, _templateObject6$f, _templateObject7$f, _templateObject8$c, _templateObject9$b;
 var CROP_HEIGHT_AREA = 500;
 var CROP_WIDTH_AREA = 475;
 var CANVAS_HEIGHT = 490;
@@ -4179,8 +4224,8 @@ var Container$h = styled.div(_templateObject$w || (_templateObject$w = _taggedTe
 var PreviewImageGroup = styled.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin-bottom: 17px;\n  height: ", ";\n  width: ", ";\n"])), PHOTO_HEIGHT, PHOTO_WIDTH);
 var PhotoContainerStyle = css(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  border-radius: 5px;\n  background-color: var(--grey-5);\n"])));
 var PreviewImage = styled.img(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n  ", "\n  object-fit: cover;\n"])), PhotoContainerStyle);
-var PlaceholderText = styled.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n  color: var(--grey-10);\n  font-size: 14px;\n"])));
-var NoPhoto = styled.div(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n  ", "\n  padding-top: 15px;\n  ", " {\n    margin-top: 18px;\n  }\n"])), PhotoContainerStyle, PlaceholderText);
+var PlaceholderText = styled.div(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  color: var(--grey-10);\n  font-size: 14px;\n"])));
+var NoPhoto = styled.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n  ", "\n  padding-top: 15px;\n  ", " {\n    margin-top: 18px;\n  }\n"])), PhotoContainerStyle, PlaceholderText);
 var StyledInputFileButton = styled(InputFileButton)(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
 var ButtonsWrapper = styled.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n\n  button {\n    margin-bottom: 10px;\n  }\n\n"])));
 var AvatarUploader = function AvatarUploader(_ref2) {
@@ -4355,7 +4400,7 @@ var BigIconsSummary = function BigIconsSummary(_ref) {
   }));
 };
 
-var _templateObject$y, _templateObject2$s, _templateObject3$q, _templateObject4$m, _templateObject5$k, _templateObject6$f;
+var _templateObject$y, _templateObject2$s, _templateObject3$q, _templateObject4$m, _templateObject5$k, _templateObject6$g;
 var Container$j = styled.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n  font-family: ", ";\n"])), function (_ref) {
   var theme = _ref.theme;
   return theme.fontFamily.ui;
@@ -4367,7 +4412,7 @@ var FilesUploadGroup = styled.div(_templateObject4$m || (_templateObject4$m = _t
   return hasFiles ? '26px 0 20px 0' : '65px 0 42px 0';
 });
 var Title = styled.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n  color: var(--grey-11);\n  font-size: 20px;\n"])));
-var Description = styled.div(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 2.14;\n  text-align: center;\n  color: var(--grey-10);\n  margin-top: 10px;\n  max-width: 386px;\n"])));
+var Description = styled.div(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  line-height: 2.14;\n  text-align: center;\n  color: var(--grey-10);\n  margin-top: 10px;\n  max-width: 386px;\n"])));
 var getUpdateFiles = function getUpdateFiles(newFiles, files, allowedFileTypes) {
   var newFilesTransfer = new DataTransfer();
   var rejectedFilesTransfer = new DataTransfer();
@@ -4487,7 +4532,7 @@ var Form = function Form(_ref2) {
 };
 
 var _excluded$j = ["text", "icon", "design", "noBorderTop", "textMaxWidth", "size", "onClickCallback", "closeCallback", "hasOnSelectLoading"];
-var _templateObject$A, _templateObject2$u, _templateObject3$r, _templateObject4$n, _templateObject5$l, _templateObject6$g, _templateObject7$f, _templateObject8$d;
+var _templateObject$A, _templateObject2$u, _templateObject3$r, _templateObject4$n, _templateObject5$l, _templateObject6$h, _templateObject7$g, _templateObject8$d;
 var StyledButton$3 = styled.button(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n  ", "\n  ", ";\n\n  color: var(--text-color);\n  height: var(--button-height);\n  display: flex;\n  flex: 1 0 0;\n  align-items: center;\n  align-self: stretch;\n\n  &:hover:enabled {\n    background: var(--button-hover-bg);\n\n    ", " {\n      svg g, svg path {\n        stroke: var(--white-a12);\n      }\n    }\n  }\n\n  &:active:enabled {\n    background: var(--button-active-bg);\n\n    ", ";\n\n    ", " {\n      svg g, svg path {\n        stroke: var(--white-a12);\n      }\n    }\n  }\n\n  &:disabled {\n    color: var(--text-disabled-color);\n    cursor: not-allowed;\n  }\n"])), resetButtonStyles, function (_ref) {
   var noBorderTop = _ref.noBorderTop;
   return noBorderTop ? "border-top: none" : css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n        border-top: 1px solid var(--border-color)"])));
@@ -4498,9 +4543,9 @@ var StyledButton$3 = styled.button(_templateObject$A || (_templateObject$A = _ta
 var OptionText = styled.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  font-size: var(--button-font-size);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  text-align: center;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n"])));
 var TextWrapper = styled.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n  ", "\n  display: flex;\n  padding: 0px var(--button-h-padding);\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n"])), function (_ref3) {
   var textMaxWidth = _ref3.textMaxWidth;
-  return textMaxWidth && css(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["max-width: ", ";"])), textMaxWidth);
+  return textMaxWidth && css(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["max-width: ", ";"])), textMaxWidth);
 });
-var LeftIconWrapper = styled.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  height: var(--button-height);\n  display: flex;\n  padding: 3px var(--button-icon-h-padding);\n  align-items: center;\n  align-self: stretch;\n\n  ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    svg {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: var(--button-icon-size);\n      width: var(--button-icon-size);\n      g, path {\n        stroke: var(--white-a10);\n      }\n    }\n  }\n"])), function (_ref4) {
+var LeftIconWrapper = styled.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  height: var(--button-height);\n  display: flex;\n  padding: 3px var(--button-icon-h-padding);\n  align-items: center;\n  align-self: stretch;\n\n  ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    svg {\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      height: var(--button-icon-size);\n      width: var(--button-icon-size);\n      g, path {\n        stroke: var(--white-a10);\n      }\n    }\n  }\n"])), function (_ref4) {
   var isAscendingIcon = _ref4.isAscendingIcon;
   return isAscendingIcon && css(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n      transform: scaleY(-1);\n  "])));
 }, IconWrapper);
@@ -4700,50 +4745,38 @@ function useClickOutside(elRef, elCallback) {
   }, [elCallback, elRef]);
 }
 
-var _templateObject$B, _templateObject2$v, _templateObject3$s, _templateObject4$o, _templateObject5$m, _templateObject6$h, _templateObject7$g;
-var Container$k = styled.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--grey-3);\n  -webkit-backdrop-filter: blur(5px);\n  backdrop-filter: blur(5px);\n  z-index: 999;\n  ", "\n\n  font-family: ", ";\n  ", ";\n"])), function (_ref) {
-  var theme = _ref.theme;
-  return theme && css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose([""])));
-}, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.fontFamily.ui;
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.styles.modal.overlay;
-});
-var CloseIcon = styled(Icon)(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose([""])));
-var CloseButton = styled.button(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  right: 0;\n  top: -30px;\n  color: var(--mono);\n  font-size: 14px;\n  font-weight: 500;\n\n  ", " {\n    display: flex;\n    margin-left: 12px;\n  }\n  ", "\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    ", "\n  }\n\n  &:active:enabled {\n    opacity: .9;\n  }\n  &:disabled {\n    opacity: 0.1;\n  }\n"])), resetButtonStyles, IconWrapper, function (_ref4) {
-  var _ref4$selected = _ref4.selected,
-    selected = _ref4$selected === void 0 ? false : _ref4$selected;
-  return selected && css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid var(--primary-7);\n  "])));
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme && css(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n      opacity: .8;\n      transition: transform ", " ", ";\n    "])), theme.animation.speed.normal, theme.animation.easing.primary.inOut);
+var _templateObject$B, _templateObject2$v, _templateObject3$s, _templateObject4$o, _templateObject5$m;
+var Container$k = styled.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--grey-3);\n  -webkit-backdrop-filter: blur(5px);\n  backdrop-filter: blur(5px);\n  z-index: 999;\n  font-family: var(--font-ui);\n  background-color: var(--grey-a3);\n"])));
+var CloseIcon = styled(Icon)(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose([""])));
+var CloseButton = styled.button(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  right: 0;\n  top: -30px;\n  color: var(--mono);\n  font-size: 14px;\n  font-weight: 500;\n\n  ", " {\n    display: flex;\n    margin-left: 12px;\n  }\n  ", "\n  &:focus {\n    outline: none;\n  }\n\n  &:hover:enabled {\n    opacity: .8;\n    transition: transform var(--speed-normal) var(--easing-primary-in-out);\n  }\n\n  &:active:enabled {\n    opacity: .9;\n  }\n  &:disabled {\n    opacity: 0.1;\n  }\n"])), resetButtonStyles, IconWrapper, function (_ref) {
+  var _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected;
+  return selected && css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n    border-bottom: 5px solid var(--primary-7);\n  "])));
 });
-var LightBox = styled.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin: 27px 0 0;\n  z-index: 9999;\n  width: ", ";\n  padding: ", ";\n  border-radius: 5px;\n  ", ";\n"])), function (_ref6) {
-  var width = _ref6.width;
+var LightBox = styled.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n  position: relative;\n  margin: ", ";\n  z-index: 9999;\n  width: ", ";\n  padding: ", ";\n  border-radius: 5px;\n  box-shadow: 0px 10px 15px 0px var(--primary-a1);\n  background-color: var(--grey-1);\n  border: var(--grey-6) 1px solid;\n"])), function (_ref2) {
+  var isCloseEnable = _ref2.isCloseEnable;
+  return isCloseEnable ? "27px 0 0" : "0";
+}, function (_ref3) {
+  var width = _ref3.width;
   return width ? width : "580px";
-}, function (_ref7) {
-  var padding = _ref7.padding;
+}, function (_ref4) {
+  var padding = _ref4.padding;
   return padding ? "30px 40px" : "0";
-}, function (_ref8) {
-  var theme = _ref8.theme;
-  return theme.styles.modal.container;
-});
-var Modal = function Modal(_ref9) {
-  var _ref9$isOpen = _ref9.isOpen,
-    isOpen = _ref9$isOpen === void 0 ? false : _ref9$isOpen,
-    _ref9$isCloseEnable = _ref9.isCloseEnable,
-    isCloseEnable = _ref9$isCloseEnable === void 0 ? true : _ref9$isCloseEnable,
-    _ref9$closeText = _ref9.closeText,
-    closeText = _ref9$closeText === void 0 ? '' : _ref9$closeText,
-    _ref9$width = _ref9.width,
-    width = _ref9$width === void 0 ? '' : _ref9$width,
-    _ref9$padding = _ref9.padding,
-    padding = _ref9$padding === void 0 ? true : _ref9$padding,
-    customComponent = _ref9.customComponent,
-    onDismiss = _ref9.onDismiss,
-    dismissCallback = _ref9.dismissCallback;
+});
+var Modal = function Modal(_ref5) {
+  var _ref5$isOpen = _ref5.isOpen,
+    isOpen = _ref5$isOpen === void 0 ? false : _ref5$isOpen,
+    _ref5$isCloseEnable = _ref5.isCloseEnable,
+    isCloseEnable = _ref5$isCloseEnable === void 0 ? true : _ref5$isCloseEnable,
+    _ref5$closeText = _ref5.closeText,
+    closeText = _ref5$closeText === void 0 ? '' : _ref5$closeText,
+    _ref5$width = _ref5.width,
+    width = _ref5$width === void 0 ? '' : _ref5$width,
+    _ref5$padding = _ref5.padding,
+    padding = _ref5$padding === void 0 ? true : _ref5$padding,
+    customComponent = _ref5.customComponent,
+    onDismiss = _ref5.onDismiss,
+    dismissCallback = _ref5.dismissCallback;
   var lightBoxRef = useRef(null);
   var onClickOutside = function onClickOutside() {
     if (isCloseEnable) {
@@ -4763,7 +4796,8 @@ var Modal = function Modal(_ref9) {
   return isOpen ? ReactDom.createPortal(React__default.createElement(Container$k, null, React__default.createElement(LightBox, {
     ref: lightBoxRef,
     width: width,
-    padding: padding
+    padding: padding,
+    isCloseEnable: isCloseEnable
   }, isCloseEnable ? React__default.createElement(CloseButton, {
     onClick: function onClick() {
       return dismiss();
@@ -4771,7 +4805,7 @@ var Modal = function Modal(_ref9) {
   }, closeText ? closeText : 'CLOSE', React__default.createElement(CloseIcon, {
     icon: 'CloseCompact',
     size: 15,
-    color: 'mono',
+    color: 'grey-12',
     weight: 'regular'
   })) : null, customComponent)), document.body) : null;
 };
@@ -5639,7 +5673,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
   })))));
 };
 
-var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$s, _templateObject5$p, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$c, _templateObject10$7, _templateObject11$5, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32;
+var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$s, _templateObject5$p, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$c, _templateObject10$7, _templateObject11$5, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34;
 var initializeInterval = function initializeInterval(day) {
   return {
     start: set(day, {
@@ -5653,7 +5687,7 @@ var TODAY = new Date();
 var TODAY_INTERVAL = initializeInterval(startOfDay(new Date()));
 var Container$o = styled.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n  display: flex;\n"])));
 var DateTimeArea = styled.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n  border-right: var(--grey-6) 1px solid;\n  width: 170px;\n  display: flex;\n  flex-direction: column;\n"])));
-var TimeZoneOption = styled.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  border-top: var(--grey-6) 1px solid;\n  margin-top: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 10px;\n  box-sizing: border-box;\n"])));
+var TimeZoneOption = styled.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n  border-top: var(--grey-6) 1px solid;\n  margin-top: auto;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 11px;\n  box-sizing: border-box;\n"])));
 var TimeZoneLabel = styled.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  text-align: left;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--grey-11);\n"])));
 var TimeZoneValue = styled.div(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-data);\n  text-align: left;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--grey-11);\n"])));
 var CalendarArea = styled.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n  user-select: none;\n"])));
@@ -5662,54 +5696,56 @@ var CurrentMonth = styled.div(_templateObject8$g || (_templateObject8$g = _tagge
 var IconWrap$1 = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n  [stroke]{\n    stroke: var(--grey-8);\n  }\n"])));
 var PaginateMonth = styled.button(_templateObject10$7 || (_templateObject10$7 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  flex: 0 0 72px;\n  border: none;\n  background: transparent;\n  outline: none;\n  text-align: center;\n  font-size: 12px;\n  font-weight: 700;\n  line-height: 20px;\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n  color: var(--grey-10);\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n\n  transition: color var(--speed-fast) var(--easing-primary-in-out);\n\n  ", "{\n    svg * {\n      transition: stroke var(--speed-fast) var(--easing-primary-in-out);\n    }\n  }\n\n  &:hover:enabled  {\n    color: var(--grey-12);\n\n    ", "{\n      [stroke]{\n        stroke: var(--grey-12);\n      }\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n"])), IconWrap$1, IconWrap$1);
 var CalBody = styled.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n  padding: 5px 0;\n"])));
-var CalRow = styled.div(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(7, 40px);\n  height: 40px;\n  box-sizing: border-box;\n\n  padding: 0 10px;\n"])));
-var CalHRow = styled(CalRow)(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n  border-bottom: var(--grey-6) 1px solid;\n"])));
-var CalCell = styled.button(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  text-align: center;\n  justify-content: center;\n  align-items: center;\n  border-radius: 5px;\n  font-size: 14px;\n  font-weight: 400;\n  text-decoration: none;\n  color: var(--grey-12);\n  font-family: var(--font-data);\n"])), resetButtonStyles);
-var CalHCell = styled(CalCell)(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--grey-a11);\n"])));
-var ContentDot = styled.div(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 18px;\n  bottom: 5px;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: var(--primary-11);\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+var CalButtons = styled.div(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  padding: 4px;\n  justify-content: flex-end;\n  align-items: flex-start;\n  gap: 4px;\n  align-self: stretch;\n  border-top: 1px solid var(--grey-6);\n"])));
+var CalRightButtons = styled.div(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])));
+var CalRow = styled.div(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteralLoose(["\n  display: grid;\n  grid-template-columns: repeat(7, 40px);\n  height: 40px;\n  box-sizing: border-box;\n\n  padding: 0 10px;\n"])));
+var CalHRow = styled(CalRow)(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n  border-bottom: var(--grey-6) 1px solid;\n"])));
+var CalCell = styled.button(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  text-align: center;\n  justify-content: center;\n  align-items: center;\n  border-radius: 5px;\n  font-size: 14px;\n  font-weight: 400;\n  text-decoration: none;\n  color: var(--grey-12);\n  font-family: var(--font-data);\n"])), resetButtonStyles);
+var CalHCell = styled(CalCell)(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-size: 12px;\n  font-weight: 700;\n  color: var(--grey-a11);\n"])));
+var ContentDot = styled.div(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: 18px;\n  bottom: 5px;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: var(--primary-11);\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
   var state = _ref.state;
-  return (state === 'single' || state === 'start' || state === 'end') && css(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n    background-color: var(--white-12);"])));
+  return (state === 'single' || state === 'start' || state === 'end') && css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n    background-color: var(--white-12);"])));
 }, function (_ref2) {
   var state = _ref2.state;
-  return state === 'inside' && css(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n    background-color: var(--primary-12);"])));
+  return state === 'inside' && css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n    background-color: var(--primary-12);"])));
 }, function (_ref3) {
   var isToday = _ref3.isToday;
-  return isToday && css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n    left: 16px;\n    bottom: 3px;\n  "])));
+  return isToday && css(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n    left: 16px;\n    bottom: 3px;\n  "])));
 }, function (_ref4) {
   var hasContent = _ref4.hasContent;
-  return !hasContent && css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n    display: none;\n  "])));
+  return !hasContent && css(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose(["\n    display: none;\n  "])));
 });
-var DayText = styled.span(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n  transform: translateY(-1px);\n"])));
-var CalCellB = styled(CalCell)(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: relative;\n  text-align: center;\n  font-size: 14px;\n  font-weight: 400;\n\n  ", "\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    color: var(--grey-6);\n    cursor: not-allowed;\n\n    ", "\n\n    ", ";\n  }\n\n"])), function (_ref5) {
+var DayText = styled.span(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n  transform: translateY(-1px);\n"])));
+var CalCellB = styled(CalCell)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: relative;\n  text-align: center;\n  font-size: 14px;\n  font-weight: 400;\n\n  ", "\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &:disabled {\n    color: var(--grey-6);\n    cursor: not-allowed;\n\n    ", "\n\n    ", ";\n  }\n\n"])), function (_ref5) {
   var thisMonth = _ref5.thisMonth;
-  return !thisMonth && css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n    color: var(--grey-a8);\n  "])));
+  return !thisMonth && css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n    color: var(--grey-a8);\n  "])));
 }, function (_ref6) {
   var isToday = _ref6.isToday;
-  return isToday && css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n    border: 2px solid var(--primary-a7);\n  "])));
+  return isToday && css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n    border: 2px solid var(--primary-a7);\n  "])));
 }, function (_ref7) {
   var state = _ref7.state;
-  return state !== 'single' && state !== 'start' && state !== 'end' && css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n    &:hover:enabled {\n      background: var(--primary-a6);\n      color: var(--white-1);\n    }\n  "])));
+  return state !== 'single' && state !== 'start' && state !== 'end' && css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n    &:hover:enabled {\n      background: var(--primary-a6);\n      color: var(--white-1);\n    }\n  "])));
 }, function (_ref8) {
   var state = _ref8.state;
-  return (state === 'single' || state === 'start' || state === 'end') && css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n    background: var(--primary-9);\n    color: var(--white-1);\n  "])));
+  return (state === 'single' || state === 'start' || state === 'end') && css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n    background: var(--primary-9);\n    color: var(--white-1);\n  "])));
 }, function (_ref9) {
   var state = _ref9.state;
-  return state === 'start' && css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  "])));
+  return state === 'start' && css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n  "])));
 }, function (_ref10) {
   var state = _ref10.state;
-  return state === 'end' && css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  "])));
+  return state === 'end' && css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n  "])));
 }, function (_ref11) {
   var state = _ref11.state;
-  return state === 'insideHover' && css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n    background: var(--primary-a9) !important;\n    color: var(--white-1);\n  "])));
+  return state === 'insideHover' && css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n    background: var(--primary-a9) !important;\n    color: var(--white-1);\n  "])));
 }, function (_ref12) {
   var state = _ref12.state;
-  return state === 'inside' && css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n    background: var(--primary-a5);\n    border-radius: 0;\n    opacity: 1;\n\n    &:nth-child(7n+1), &:nth-child(7n){\n      &::after {\n        background: var(--primary-a5);\n        display: block;\n        content: '';\n        position: absolute;\n        left: -10px;\n        width: 10px;\n        top: 0;\n        height: 40px;\n      }\n    }\n\n    &:nth-child(7n)::after {\n      left: auto;\n      right: -10px;\n    }\n  "])));
+  return state === 'inside' && css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n    background: var(--primary-a5);\n    border-radius: 0;\n    opacity: 1;\n\n    &:nth-child(7n+1), &:nth-child(7n){\n      &::after {\n        background: var(--primary-a5);\n        display: block;\n        content: '';\n        position: absolute;\n        left: -10px;\n        width: 10px;\n        top: 0;\n        height: 40px;\n      }\n    }\n\n    &:nth-child(7n)::after {\n      left: auto;\n      right: -10px;\n    }\n  "])));
 }, function (_ref13) {
   var state = _ref13.state;
-  return (state === 'single' || state === 'start' || state === 'end') && css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n      color: var(--white-1);\n      background: var(--red-a9);\n    "])));
+  return (state === 'single' || state === 'start' || state === 'end') && css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n      color: var(--white-1);\n      background: var(--red-a9);\n    "])));
 }, function (_ref14) {
   var state = _ref14.state;
-  return state === 'inside' && css(_templateObject32 || (_templateObject32 = _taggedTemplateLiteralLoose(["\n      color: var(--white-1);\n      background: var(--red-a7);\n      &:nth-child(7n+1), &:nth-child(7n){\n        &::after {\n          background: var(--red-a7);\n        }\n      }\n    "])));
+  return state === 'inside' && css(_templateObject34 || (_templateObject34 = _taggedTemplateLiteralLoose(["\n      color: var(--white-1);\n      background: var(--red-a7);\n      &:nth-child(7n+1), &:nth-child(7n){\n        &::after {\n          background: var(--red-a7);\n        }\n      }\n    "])));
 });
 var enDayGuide = ["S", "M", "T", "W", "T", "F", "S"];
 var jpDayGuide = ['日', '月', '火', '水', '木', '金', '土'];
@@ -5746,7 +5782,19 @@ var DatePicker = function DatePicker(_ref15) {
     availableRange = _ref15.availableRange,
     contentDays = _ref15.contentDays,
     _ref15$lang = _ref15.lang,
-    lang = _ref15$lang === void 0 ? 'en' : _ref15$lang;
+    lang = _ref15$lang === void 0 ? 'en' : _ref15$lang,
+    _ref15$cancelText = _ref15.cancelText,
+    cancelText = _ref15$cancelText === void 0 ? 'Cancel' : _ref15$cancelText,
+    _ref15$applyText = _ref15.applyText,
+    applyText = _ref15$applyText === void 0 ? 'Apply' : _ref15$applyText,
+    _ref15$hasApply = _ref15.hasApply,
+    hasApply = _ref15$hasApply === void 0 ? false : _ref15$hasApply,
+    _ref15$disableApply = _ref15.disableApply,
+    disableApply = _ref15$disableApply === void 0 ? false : _ref15$disableApply,
+    _ref15$applyCallback = _ref15.applyCallback,
+    applyCallback = _ref15$applyCallback === void 0 ? function () {} : _ref15$applyCallback,
+    _ref15$cancelCallback = _ref15.cancelCallback,
+    cancelCallback = _ref15$cancelCallback === void 0 ? function () {} : _ref15$cancelCallback;
   var _useState = useState(getInitialValue(hasEmptyValue, initialValue)),
     selectedRange = _useState[0],
     setSelectedRange = _useState[1];
@@ -5915,7 +5963,13 @@ var DatePicker = function DatePicker(_ref15) {
         isToday: isTodayValue
       }));
     }));
-  }))));
+  })), hasApply && React__default.createElement(CalButtons, null, hasApply && React__default.createElement(CalRightButtons, null, React__default.createElement(Button, {
+    design: 'secondary',
+    onClick: cancelCallback
+  }, cancelText), React__default.createElement(Button, {
+    onClick: applyCallback,
+    disabled: !isTimeRangeValid || selectedRange === null || disableApply
+  }, applyText)))));
 };
 var cellState = function cellState(day, interval, _hoverDate) {
   var state = "off";
@@ -6122,15 +6176,15 @@ var FilterOption = function FilterOption(_ref2) {
 var _excluded$q = ["color", "hasBorder", "iconSize", "disabled", "noBackground", "hasCrossButton", "onCrossClick", "width"];
 var _templateObject$K, _templateObject2$D, _templateObject3$z, _templateObject4$v, _templateObject5$s, _templateObject6$n, _templateObject7$m, _templateObject8$j;
 var IconContainer$1 = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n  padding: 0 2px;\n"])));
-var Container$r = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", " {\n    flex-shrink: 0;\n    display: flex;\n  }\n\n  \n"])), function (_ref) {
+var Container$r = styled.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  ", " {\n    flex-shrink: 0;\n    display: flex;\n  }\n\n\n"])), function (_ref) {
   var hasBorder = _ref.hasBorder,
     disabled = _ref.disabled,
     noBackground = _ref.noBackground,
     width = _ref.width;
-  return css(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n  \n    transition: all var(--speed-normal) var(--easing-primary-in);\n    gap: 6px;\n    height: var(--input-compact-height);\n    padding: 0;\n    align-items: center;\n    display: flex;\n    border-radius: 3px;\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    background-color: ", ";\n    \n    &:focus-within {\n      background-color: ", ";\n      border: ", ";\n      box-shadow: 0px 4px 9px 0px ", ";\n    }\n\n  "])), hasBorder && css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n      padding: 0 8px;\n      border: 1px solid var(--filter-button-stroke-color);\n      box-shadow: 0px 4px 9px 0px var(--filter-button-shadow-color);\n\n      &:hover {\n        border: var(--primary-7) 1px solid;\n        box-shadow: 0px 4px 9px 0px var(--primary-a2);\n\n      }\n      ", "{\n        padding: 0;\n      }\n    "])), IconContainer$1), disabled && css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n      opacity: 50%;\n      cursor: not-allowed;\n      "]))), width && css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), width), noBackground ? 'transparent' : 'var(--grey-1)', noBackground ? 'transparent' : 'var(--grey-1)', hasBorder ? '1px solid var(--primary-9)' : 'none', noBackground ? 'transparent' : 'var(--primary-a2)');
+  return css(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n\n    transition: all var(--speed-normal) var(--easing-primary-in);\n    gap: 6px;\n    height: var(--input-compact-height);\n    padding: 0;\n    align-items: center;\n    display: flex;\n    border-radius: 3px;\n\n    ", ";\n\n    ", ";\n\n    ", ";\n\n    background-color: ", ";\n\n    &:focus-within {\n      background-color: ", ";\n      border: ", ";\n      box-shadow: 0px 4px 9px 0px ", ";\n    }\n\n  "])), hasBorder && css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n      padding: 0 8px;\n      border: 1px solid var(--filter-button-stroke-color);\n      box-shadow: 0px 4px 9px 0px var(--filter-button-shadow-color);\n\n      &:hover {\n        border: var(--primary-7) 1px solid;\n        box-shadow: 0px 4px 9px 0px var(--primary-a2);\n\n      }\n      ", "{\n        padding: 0;\n      }\n    "])), IconContainer$1), disabled && css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n      opacity: 50%;\n      cursor: not-allowed;\n      "]))), width && css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n      width: ", ";\n    "])), width), noBackground ? 'transparent' : 'var(--grey-1)', noBackground ? 'transparent' : 'var(--grey-1)', hasBorder ? '1px solid var(--primary-9)' : 'none', noBackground ? 'transparent' : 'var(--primary-a2)');
 }, IconWrapper);
 var CrossButton = styled.button(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n  ", ";\n  flex-shrink: 0;\n  flex-grow: 0;\n  flex-basis: auto;\n  width: 26px;\n\n  ", " {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n"])), resetButtonStyles, IconWrapper);
-var StyledInput$2 = styled.input(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  font-family: var(--font-ui);\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--grey-12);\n  \n  &::placeholder {\n    ", ";\n    color: var(--grey-11);\n    font-style: italic;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  font-size: 12px;\n  border: none;\n  height: 100%;\n  width: 100%;\n  background-color: transparent;\n  box-sizing: border-box;\n  border-radius: 3px;\n  outline: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n"])), removeAutoFillStyle, function (_ref2) {
+var StyledInput$2 = styled.input(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n  ", ";\n\n  font-family: var(--font-ui);\n  font-size: 12px;\n  font-weight: 500;\n  color: var(--grey-12);\n\n  &::placeholder {\n    ", ";\n    color: var(--grey-11);\n    font-style: italic;\n  }\n\n  &:lang(ja)::placeholder {\n    font-style: normal;\n  };\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  font-size: 12px;\n  border: none;\n  height: 100%;\n  width: 100%;\n  background-color: transparent;\n  box-sizing: border-box;\n  border-radius: 3px;\n  outline: none;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n"])), removeAutoFillStyle, function (_ref2) {
   var color = _ref2.color;
   return color && "color: var(--" + color + ")";
 });
@@ -6187,7 +6241,7 @@ var isFilterItem = function isFilterItem(item) {
   return (typeof item.value === 'number' || typeof item.value === 'string') && typeof item.text === 'string';
 };
 
-var _excluded$r = ["buttonIcon", "buttonText", "disabled", "minWidth", "minHeight", "isSortAscending", "design", "children", "onToggleOpenCallback", "onCloseCallback"];
+var _excluded$r = ["buttonIcon", "buttonText", "disabled", "minWidth", "minHeight", "isSortAscending", "design", "noCloseOnClickOutside", "children", "onToggleOpenCallback", "onCloseCallback"];
 var _templateObject$L, _templateObject2$E, _templateObject3$A, _templateObject4$w;
 var Container$s = styled.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
 var ButtonWrapper = styled.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n"])));
@@ -6215,7 +6269,7 @@ var getDropPosition = function getDropPosition(buttonRect, minWidth, minHeight)
   }
   return position;
 };
-var FilterDropHandler = function FilterDropHandler(_ref3) {
+var FilterDropHandler = forwardRef(function (_ref3, imperativeRef) {
   var buttonIcon = _ref3.buttonIcon,
     buttonText = _ref3.buttonText,
     _ref3$disabled = _ref3.disabled,
@@ -6227,6 +6281,7 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
     isSortAscending = _ref3.isSortAscending,
     _ref3$design = _ref3.design,
     design = _ref3$design === void 0 ? 'default' : _ref3$design,
+    noCloseOnClickOutside = _ref3.noCloseOnClickOutside,
     children = _ref3.children,
     _ref3$onToggleOpenCal = _ref3.onToggleOpenCallback,
     onToggleOpenCallback = _ref3$onToggleOpenCal === void 0 ? function () {} : _ref3$onToggleOpenCal,
@@ -6241,7 +6296,10 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
     setOpenState = _useState[1];
   var buttonWrapperRef = useRef(null);
   var mainRef = useRef(null);
-  var handleClose = useCallback(function () {
+  var clickOutsideClose = useCallback(function () {
+    if (noCloseOnClickOutside) {
+      return;
+    }
     if (openState.isOpen) {
       onCloseCallback();
     }
@@ -6251,8 +6309,8 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
         isOpen: isOpen
       });
     });
-  }, [onCloseCallback, openState.isOpen]);
-  useClickOutside(mainRef, handleClose);
+  }, [noCloseOnClickOutside, onCloseCallback, openState.isOpen]);
+  useClickOutside(mainRef, clickOutsideClose);
   var handleToggleOpen = useCallback(function (minWidth, minHeight) {
     if (!buttonWrapperRef.current) {
       return;
@@ -6262,7 +6320,7 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
       return;
     }
     var position = getDropPosition(buttonRect, minWidth, minHeight);
-    onToggleOpenCallback(openState.isOpen);
+    onToggleOpenCallback(!openState.isOpen);
     setOpenState(function (prev) {
       var isOpen = !prev.isOpen;
       return _extends({}, prev, {
@@ -6271,6 +6329,19 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
       });
     });
   }, [onToggleOpenCallback, openState.isOpen]);
+  var handleCancel = useCallback(function () {
+    setOpenState(function (prev) {
+      var isOpen = false;
+      return _extends({}, prev, {
+        isOpen: isOpen
+      });
+    });
+  }, []);
+  useImperativeHandle(imperativeRef, function () {
+    return {
+      cancelClose: handleCancel
+    };
+  });
   return React__default.createElement(Container$s, Object.assign({
     ref: mainRef
   }, props), React__default.createElement(ButtonWrapper, {
@@ -6292,11 +6363,11 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
     disabled: disabled,
     minWidth: minWidth
   }), children));
-};
+});
 
 var _templateObject$M, _templateObject2$F;
 var Container$t = styled.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 146px;\n  border-top: 1px solid var(--grey-5);\n"])));
-var LoadingText = styled.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-data);\n  color: var(--grey-11);\n  font-size: 12px;\n  font-style: italic;\n  padding: 15px 0;\n"])));
+var LoadingText = styled.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-data);\n  color: var(--grey-11);\n  font-size: 12px;\n  font-style: italic;\n  &:lang(ja) {\n      font-style: normal;\n  }\n  padding: 15px 0;\n"])));
 var LoadingBox = function LoadingBox(_ref) {
   var loadingText = _ref.loadingText;
   return React__default.createElement(Container$t, null, React__default.createElement(Spinner, {
@@ -6314,7 +6385,7 @@ var OptionList = styled.div(_templateObject3$B || (_templateObject3$B = _taggedT
   return moreItem ? '228px' : '196px';
 }, StyledFilterOption);
 var ResultsContainer = styled.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n  min-width: 216px;\n"])));
-var ResultCounter = styled.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-data);\n  color: var(--grey-10);\n  font-size: 12px;\n  font-style: italic;\n  font-weight: 300;\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  height: 32px;\n  padding: 0 12px;\n  border-top: 1px solid var(--grey-5);\n  border-bottom: 1px solid var(--grey-5);\n"])));
+var ResultCounter = styled.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-data);\n  color: var(--grey-10);\n  font-size: 12px;\n  font-style: italic;\n  &:lang(ja) {\n      font-style: normal;\n  }\n  font-weight: 300;\n  display: flex;\n  align-items: center;\n  justify-content: left;\n  height: 32px;\n  padding: 0 12px;\n  border-top: 1px solid var(--grey-5);\n  border-bottom: 1px solid var(--grey-5);\n"])));
 var SearchWrapper = styled.div(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n  height: 40px;\n  display: flex;\n  align-items: center;\n  padding: 0 8px;\n"])));
 var EmptyResultText = styled.div(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 24px;\n  color: var(--grey-11);\n  font-weight: 700;\n  margin-left: 12px;\n  user-select: none;\n  pointer-events: none;\n  height: inherit;\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n"])));
 var Gradient = styled.div(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 0px;\n  height: 15px;\n  background-image: linear-gradient(to bottom, transparent, var(--grey-3));\n  width: 99%;\n  left: 50%;\n  transform: translateX(-50%);\n  pointer-events: none;\n"])));
@@ -6778,7 +6849,7 @@ var FilterLayout = function FilterLayout(_ref6) {
   }))))))));
 };
 
-var _excluded$u = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "hasEmptyValue", "availableRange", "contentDays", "onCloseCallback", "onUpdateCallback", "onToggleCallback"];
+var _excluded$u = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "hasEmptyValue", "availableRange", "contentDays", "cancelText", "applyText", "hasApply", "onCloseCallback", "onUpdateCallback", "onToggleCallback", "onCancelCallback", "onApplyCallback"];
 var _templateObject$Q;
 var MIN_WIDTH = 470;
 var MIN_HEIGHT = 360;
@@ -6798,12 +6869,22 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
     lang = _ref.lang,
     availableRange = _ref.availableRange,
     contentDays = _ref.contentDays,
+    _ref$cancelText = _ref.cancelText,
+    cancelText = _ref$cancelText === void 0 ? 'Cancel' : _ref$cancelText,
+    _ref$applyText = _ref.applyText,
+    applyText = _ref$applyText === void 0 ? 'Apply' : _ref$applyText,
+    _ref$hasApply = _ref.hasApply,
+    hasApply = _ref$hasApply === void 0 ? true : _ref$hasApply,
     _ref$onCloseCallback = _ref.onCloseCallback,
     onCloseCallback = _ref$onCloseCallback === void 0 ? function () {} : _ref$onCloseCallback,
     _ref$onUpdateCallback = _ref.onUpdateCallback,
     onUpdateCallback = _ref$onUpdateCallback === void 0 ? function () {} : _ref$onUpdateCallback,
     _ref$onToggleCallback = _ref.onToggleCallback,
     onToggleCallback = _ref$onToggleCallback === void 0 ? function () {} : _ref$onToggleCallback,
+    _ref$onCancelCallback = _ref.onCancelCallback,
+    onCancelCallback = _ref$onCancelCallback === void 0 ? function () {} : _ref$onCancelCallback,
+    _ref$onApplyCallback = _ref.onApplyCallback,
+    onApplyCallback = _ref$onApplyCallback === void 0 ? function () {} : _ref$onApplyCallback,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   var pickerValue = useRef(null);
   var _useState = useState({
@@ -6812,48 +6893,76 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
     }),
     mountedPicker = _useState[0],
     setMountedPicker = _useState[1];
+  var _useState2 = useState(false),
+    disableApply = _useState2[0],
+    setDisableApply = _useState2[1];
+  var DropdownHandlerRef = useRef(null);
   var handleUpdateCallback = useCallback(function (data) {
     pickerValue.current = data;
     onUpdateCallback(data);
-  }, [onUpdateCallback]);
+    setDisableApply(areDatesEqual(selected, data));
+  }, [onUpdateCallback, selected]);
   var handleOnClose = useCallback(function () {
     if (pickerValue.current && pickerValue.current !== selected) {
       onCloseCallback(pickerValue.current);
     }
   }, [onCloseCallback, selected]);
   var handleOnToggle = useCallback(function (isOpen) {
-    if (pickerValue.current && pickerValue.current !== selected) {
+    if (!hasApply && pickerValue.current && pickerValue.current !== selected) {
       onToggleCallback(pickerValue.current, isOpen);
     }
-    if (!isOpen && pickerValue.current !== null && !mountedPicker.isMount) {
-      pickerValue.current = null;
+    if (isOpen && !mountedPicker.isMount) {
+      setMountedPicker(function (prev) {
+        return _extends({}, prev, {
+          isMount: true
+        });
+      });
+    }
+  }, [hasApply, mountedPicker.isMount, onToggleCallback, selected]);
+  var handleOnCancel = useCallback(function () {
+    var _DropdownHandlerRef$c;
+    if (pickerValue.current && pickerValue.current !== selected) {
+      pickerValue.current = selected === undefined ? null : selected;
+      var validInitialValue = selected === null ? undefined : selected;
       setMountedPicker({
-        initialValue: undefined,
-        isMount: true
+        initialValue: validInitialValue,
+        isMount: false
       });
     }
-  }, [mountedPicker, onToggleCallback, selected]);
+    onCancelCallback();
+    (_DropdownHandlerRef$c = DropdownHandlerRef.current) === null || _DropdownHandlerRef$c === void 0 ? void 0 : _DropdownHandlerRef$c.cancelClose();
+  }, [onCancelCallback, selected]);
+  var handleOnApply = useCallback(function () {
+    var _DropdownHandlerRef$c2;
+    if (pickerValue.current && pickerValue.current !== selected) {
+      onApplyCallback(pickerValue.current);
+    }
+    (_DropdownHandlerRef$c2 = DropdownHandlerRef.current) === null || _DropdownHandlerRef$c2 === void 0 ? void 0 : _DropdownHandlerRef$c2.cancelClose();
+  }, [onApplyCallback, selected]);
   useEffect(function () {
-    var canReset = true;
-    if (canReset && selected === null && pickerValue.current !== null) {
+    var canUnmount = true;
+    if (canUnmount && selected === null && pickerValue.current !== null) {
+      pickerValue.current = selected;
       setMountedPicker({
         initialValue: undefined,
         isMount: false
       });
     }
     return function () {
-      canReset = false;
+      canUnmount = false;
     };
   }, [selected]);
-  return React__default.createElement(Container$x, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({}, {
-    buttonIcon: buttonIcon,
-    buttonText: buttonText,
-    disabled: disabled
-  }, {
+  return React__default.createElement(Container$x, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({
+    ref: DropdownHandlerRef,
     minWidth: MIN_WIDTH,
     minHeight: MIN_HEIGHT,
     onCloseCallback: handleOnClose,
-    onToggleOpenCallback: handleOnToggle
+    onToggleOpenCallback: handleOnToggle,
+    noCloseOnClickOutside: hasApply
+  }, {
+    buttonIcon: buttonIcon,
+    buttonText: buttonText,
+    disabled: disabled
   }), React__default.createElement(FilterDropdownContainer, null, mountedPicker.isMount && React__default.createElement(DatePicker, Object.assign({}, {
     dateMode: dateMode,
     timeMode: timeMode,
@@ -6863,11 +6972,17 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
     timeZoneValueTitle: timeZoneValueTitle,
     lang: lang,
     availableRange: availableRange,
-    contentDays: contentDays
+    contentDays: contentDays,
+    cancelText: cancelText,
+    applyText: applyText,
+    hasApply: hasApply
   }, {
     updateCallback: handleUpdateCallback,
+    cancelCallback: handleOnCancel,
+    applyCallback: handleOnApply,
     hasEmptyValue: true,
-    initialValue: mountedPicker.initialValue
+    initialValue: mountedPicker.initialValue,
+    disableApply: disableApply
   })))));
 };
 
@@ -7152,10 +7267,13 @@ var createDatePickers = function createDatePickers(datePickersConfig, filtersVal
       handleDatePickers(value, datePicker.id);
     };
     var onToggleCallback = function onToggleCallback(value, isOpen) {
-      if (isOpen) {
+      if (!isOpen) {
         handleDatePickers(value, datePicker.id);
       }
     };
+    var onApplyCallback = function onApplyCallback(value) {
+      handleDatePickers(value, datePicker.id);
+    };
     var disabled = getDisableValue(filtersValues, singleFilter, datePicker);
     var foundPicker = filtersValues.find(function (filter) {
       return filter.id === datePicker.id;
@@ -7169,6 +7287,7 @@ var createDatePickers = function createDatePickers(datePickersConfig, filtersVal
     var newPicker = _extends({}, datePicker, {
       onCloseCallback: onCloseCallback,
       onToggleCallback: onToggleCallback,
+      onApplyCallback: onApplyCallback,
       disabled: disabled,
       selected: foundPicker && (foundPicker.selected instanceof Date || isDateInterval(foundPicker.selected)) ? foundPicker.selected : null,
       initialValue: validInitialValue
@@ -12187,33 +12306,27 @@ var Pagination = function Pagination(props) {
 
 var _templateObject$1r, _templateObject2$1c, _templateObject3$15, _templateObject4$$, _templateObject5$V;
 var Container$X = styled.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose([""])));
-var Title$7 = styled.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose(["\n  ", ";\n"])), function (_ref) {
-  var typography = _ref.theme.typography;
-  return typography.modal.title;
-});
-var MessageBox$1 = styled.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n  ", ";\n  margin: 28px 0;\n"])), function (_ref2) {
-  var typography = _ref2.theme.typography;
-  return typography.modal.basicContent;
-});
+var Title$7 = styled.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose(["\n  font-size: 20px;\n  font-weight: 400;\n  text-align: left;\n  text-shadow: 0px 0px 10px var(--white-a5);\n  text-decoration: none;\n  color: var(--grey-11);\n"])));
+var MessageBox$1 = styled.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 25px;\n  text-align: left;\n  text-decoration: none;\n  color: var(--grey-11);\n  margin: 28px 0;\n"])));
 var StyledButton$6 = styled(Button)(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n  margin-left: 10px;\n"])));
-var ButtonsGroup$1 = styled.div(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n  text-align: right;\n"])));
-var ConfirmationModal = function ConfirmationModal(_ref3) {
-  var _ref3$title = _ref3.title,
-    title = _ref3$title === void 0 ? '' : _ref3$title,
-    _ref3$message = _ref3.message,
-    message = _ref3$message === void 0 ? '' : _ref3$message,
-    _ref3$leftButtonText = _ref3.leftButtonText,
-    leftButtonText = _ref3$leftButtonText === void 0 ? 'submit' : _ref3$leftButtonText,
-    _ref3$leftButtonDesig = _ref3.leftButtonDesign,
-    leftButtonDesign = _ref3$leftButtonDesig === void 0 ? 'primary' : _ref3$leftButtonDesig,
-    _ref3$leftButtonCallb = _ref3.leftButtonCallback,
-    leftButtonCallback = _ref3$leftButtonCallb === void 0 ? function () {} : _ref3$leftButtonCallb,
-    _ref3$rightButtonDesi = _ref3.rightButtonDesign,
-    rightButtonDesign = _ref3$rightButtonDesi === void 0 ? 'secondary' : _ref3$rightButtonDesi,
-    _ref3$rightButtonText = _ref3.rightButtonText,
-    rightButtonText = _ref3$rightButtonText === void 0 ? 'cancel' : _ref3$rightButtonText,
-    _ref3$rightButtonCall = _ref3.rightButtonCallback,
-    rightButtonCallback = _ref3$rightButtonCall === void 0 ? function () {} : _ref3$rightButtonCall;
+var ButtonsGroup$1 = styled.div(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n  text-align: right;\n  display: flex;\n  justify-content: flex-end;\n"])));
+var ConfirmationModal = function ConfirmationModal(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '' : _ref$title,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? '' : _ref$message,
+    _ref$leftButtonText = _ref.leftButtonText,
+    leftButtonText = _ref$leftButtonText === void 0 ? 'submit' : _ref$leftButtonText,
+    _ref$leftButtonDesign = _ref.leftButtonDesign,
+    leftButtonDesign = _ref$leftButtonDesign === void 0 ? 'primary' : _ref$leftButtonDesign,
+    _ref$leftButtonCallba = _ref.leftButtonCallback,
+    leftButtonCallback = _ref$leftButtonCallba === void 0 ? function () {} : _ref$leftButtonCallba,
+    _ref$rightButtonDesig = _ref.rightButtonDesign,
+    rightButtonDesign = _ref$rightButtonDesig === void 0 ? 'secondary' : _ref$rightButtonDesig,
+    _ref$rightButtonText = _ref.rightButtonText,
+    rightButtonText = _ref$rightButtonText === void 0 ? 'cancel' : _ref$rightButtonText,
+    _ref$rightButtonCallb = _ref.rightButtonCallback,
+    rightButtonCallback = _ref$rightButtonCallb === void 0 ? function () {} : _ref$rightButtonCallb;
   var _useModal = useModal(),
     setModalOpen = _useModal.setModalOpen;
   var handlePrimaryBtn = function handlePrimaryBtn() {
@@ -12305,7 +12418,7 @@ var _templateObject$1u, _templateObject2$1f, _templateObject3$17, _templateObjec
 var Container$Y = styled.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose(["\n  max-width: var(--max-content-width);\n  margin-top: var(--utility-header-padding-top);\n  padding: 0 var(--content-layout-padding-right) 0 var(--content-layout-padding-left);\n  height: 48px;\n  width: 100%;\n  display: flex;\n"])));
 var LeftArea = styled.div(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: var(--columnPadding, 16px);\n  flex: 1 0 0;\n"])));
 var Breadcrumbs = styled.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n"])));
-var Breadcrumb = styled.div(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n\n"])));
+var Breadcrumb = styled.div(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n  display: flex;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  white-space: nowrap;\n\n"])));
 var BreadcrumbIcon = styled.div(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n  flex: 0;\n  display: flex;\n  align-items: center;\n\n  > div {\n    flex: 1;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n"])));
 var HomeIcon = styled(BreadcrumbIcon)(_templateObject6$H || (_templateObject6$H = _taggedTemplateLiteralLoose(["\n  padding-bottom: 1px;\n  svg path {\n    transition: stroke var(--speed-normal) var(--easing-primary-out);\n  }\n"])));
 var BreadcrumbLink = styled(Link)(_templateObject7$D || (_templateObject7$D = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  flex: 1;\n  color: var(--grey-10);\n  font-family: var(--font-ui);\n  text-decoration: none;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 12px; /* 100% */\n  transition: color var(--speed-normal) var(--easing-primary-out);\n\n  &:hover {\n    color: var(--grey-12);\n    ", " svg {\n      path {\n        stroke: var(--grey-12);\n      }\n    }\n  }\n"])), HomeIcon);
@@ -13177,6 +13290,8 @@ var MainMenu = function MainMenu(_ref3) {
     _ref3$autoHideText = _ref3.autoHideText,
     autoHideText = _ref3$autoHideText === void 0 ? "Auto-Hide" : _ref3$autoHideText,
     supportUrl = _ref3.supportUrl,
+    _ref3$supportText = _ref3.supportText,
+    supportText = _ref3$supportText === void 0 ? "Help & Support" : _ref3$supportText,
     _ref3$defaultMenuOpen = _ref3.defaultMenuOpen,
     defaultMenuOpen = _ref3$defaultMenuOpen === void 0 ? true : _ref3$defaultMenuOpen,
     _ref3$canAlwaysPin = _ref3.canAlwaysPin,
@@ -13250,7 +13365,7 @@ var MainMenu = function MainMenu(_ref3) {
     compact: true,
     isActive: false,
     icon: 'Question',
-    title: 'Help & Support',
+    title: supportText,
     href: supportUrl,
     menuOpen: menuState.isMenuOpen
   })), menuState.canPin ? React__default.createElement(FooterItemContainer, null, React__default.createElement(ContextItem, {
@@ -13340,7 +13455,7 @@ var _templateObject$1E, _templateObject2$1p, _templateObject3$1g, _templateObjec
 var Container$12 = styled.div(_templateObject$1E || (_templateObject$1E = _taggedTemplateLiteralLoose(["\n  padding: 16px 10px 14px 23px;\n  display: flex;\n  flex-direction: row;\n  border-top: 1px solid var(--dividing-line);\n  align-items: center;\n  cursor: pointer;\n  svg {\n    margin-top: 7px;\n  }\n"])));
 var ColumnContainer = styled.div(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  padding-left: 14px;\n  align-items: flex-start;\n"])));
 var Title$8 = styled.div(_templateObject3$1g || (_templateObject3$1g = _taggedTemplateLiteralLoose(["\n  opacity: 0.76;\n  font-family: var(--font-ui);\n  font-size: 12px;\n  font-weight: 500;\n  letter-spacing: 0.34px;\n  color: var(--grey-11);\n"])));
-var SubTitle$1 = styled.div(_templateObject4$19 || (_templateObject4$19 = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  font-size: 10px;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: var(--grey-11);\n  padding-top: 2px;\n  opacity: 0.5;\n"])));
+var SubTitle$1 = styled.div(_templateObject4$19 || (_templateObject4$19 = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n  font-size: 10px;\n  line-height: 12px;\n  font-weight: 500;\n  letter-spacing: 0.29px;\n  color: var(--grey-11);\n  padding-top: 2px;\n  opacity: 0.5;\n"])));
 var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
   var _ref$icon = _ref.icon,
     icon = _ref$icon === void 0 ? 'Settings' : _ref$icon,
@@ -13380,11 +13495,27 @@ var FooterText = styled.div(_templateObject14$b || (_templateObject14$b = _tagge
   var icon = _ref3.icon;
   return icon !== '' ? '136px;' : '164px;';
 });
+var updateLanguageAttribute = function updateLanguageAttribute(initLanguage) {
+  if (initLanguage) {
+    document.documentElement.setAttribute("lang", initLanguage);
+    return initLanguage;
+  }
+  var browserLang = navigator.language.split("-")[0];
+  var htmlLang = document.documentElement.lang;
+  if (!htmlLang) {
+    document.documentElement.setAttribute("lang", browserLang);
+    return browserLang;
+  }
+  return htmlLang;
+};
 var UserMenu = function UserMenu(_ref4) {
   var _ref4$hasLanguage = _ref4.hasLanguage,
     hasLanguage = _ref4$hasLanguage === void 0 ? false : _ref4$hasLanguage,
     _ref4$selectedLanguag = _ref4.selectedLanguageText,
     selectedLanguageText = _ref4$selectedLanguag === void 0 ? '' : _ref4$selectedLanguag,
+    _ref4$languageOptions = _ref4.languageOptionsText,
+    languageOptionsText = _ref4$languageOptions === void 0 ? 'LANGUAGE / 言語' : _ref4$languageOptions,
+    selectedLangAttribute = _ref4.selectedLangAttribute,
     _ref4$hasLogout = _ref4.hasLogout,
     hasLogout = _ref4$hasLogout === void 0 ? true : _ref4$hasLogout,
     _ref4$logoutLink = _ref4.logoutLink,
@@ -13448,6 +13579,9 @@ var UserMenu = function UserMenu(_ref4) {
       closeOnClick();
     }
   }, [closeOnClick]);
+  useEffect(function () {
+    updateLanguageAttribute(selectedLangAttribute);
+  }, [selectedLangAttribute]);
   return React__default.createElement(Fragment, null, React__default.createElement(DrawerTop, null, hasCurrentUser ? React__default.createElement(CurrentUser, null, React__default.createElement(DrawerHeader, null, currentUserText), loggedInUser) : null, hasUserDrawerMeta ? React__default.createElement(NavigationContainer$1, null, userDrawerMeta === null || userDrawerMeta === void 0 ? void 0 : userDrawerMeta.map(function (item, key) {
     return React__default.createElement(UserDrawerMeta, Object.assign({
       onUserDrawerMetaClick: onUserDrawerMetaClick,
@@ -13476,7 +13610,7 @@ var UserMenu = function UserMenu(_ref4) {
     onClickCallback: onThemeToggle
   }), hasLanguage && React__default.createElement(DrawerBottomMenu, {
     icon: 'Language',
-    title: "LANGUAGE / \u8A00\u8A9E",
+    title: languageOptionsText,
     subTitle: selectedLanguageText,
     onClickCallback: onLanguageToggle
   }), hasUserDrawerFooter ? React__default.createElement(FooterMeta, {
@@ -13630,17 +13764,17 @@ var Container$16 = styled.div(_templateObject$1J || (_templateObject$1J = _tagge
 var RightArea$1 = styled.div(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  height: 100%;\n"])));
 var SearchBar = styled.div(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n  flex: 0 1 500px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n"])));
 var IconWrapper$4 = styled.div(_templateObject4$1d || (_templateObject4$1d = _taggedTemplateLiteralLoose(["\n  flex: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  > div {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n"])));
-var SearchInput = styled.input(_templateObject5$16 || (_templateObject5$16 = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-family: var(--font-data);\n  flex: 1;\n  height: 35px;\n  line-height: 35px;\n  border: none;\n  outline: none;\n  background: transparent;  \n  color: var(--grey-10);\n  font-size: 14px;\n\n  &::placeholder {\n    font-family: var(--font-data);\n    font-weight: 400;\n    font-style: italic;\n    font-size: 14px;\n    color: var(--grey-8);\n  }\n"])), removeAutoFillStyle);
+var SearchInput = styled.input(_templateObject5$16 || (_templateObject5$16 = _taggedTemplateLiteralLoose(["\n  ", ";\n  font-family: var(--font-data);\n  flex: 1;\n  height: 35px;\n  line-height: 35px;\n  border: none;\n  outline: none;\n  background: transparent;\n  color: var(--grey-10);\n  font-size: 14px;\n\n  &::placeholder {\n    font-family: var(--font-data);\n    font-weight: 400;\n    font-style: italic;\n    font-size: 14px;\n    color: var(--grey-8);\n  }\n\n  &:lang(ja)::placeholder {\n    font-style: normal;\n  };\n"])), removeAutoFillStyle);
 var ButtonArea = styled.div(_templateObject6$S || (_templateObject6$S = _taggedTemplateLiteralLoose(["\n  height: inherit;\n  display: flex;\n  gap: 0;\n"])));
 var buttonClickAnimation = keyframes(_templateObject7$O || (_templateObject7$O = _taggedTemplateLiteralLoose(["\n  0% {\n    opacity:0.9;\n    transform: scale(0.85);\n  }\n  100% {\n    opacity:1;\n    transform: scale(1);\n  }\n"])));
 var DrawerToggle = styled.button.attrs({
   type: 'button'
-})(_templateObject8$F || (_templateObject8$F = _taggedTemplateLiteralLoose(["\n  position: relative;\n  flex: 0 56px;\n  width: 56px;\n  height: inherit;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  background: none;\n  outline: none;\n  cursor: pointer;\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    height: 5px;\n    background-color: transparent;\n    border-radius: 2px 2px 0 0;\n  }\n  \n  transition: background-color var(--speed-normal) var(--easing-primary-out);\n  \n  svg {\n    transition: transform var(--speed-normal) var(--easing-primary-out);\n  }\n\n  &:hover {\n    opacity: 0.9;\n    &::after {\n      background-color: var(--primary-6);\n    }\n  }\n \n  ", "\n"])), function (_ref) {
+})(_templateObject8$F || (_templateObject8$F = _taggedTemplateLiteralLoose(["\n  position: relative;\n  flex: 0 56px;\n  width: 56px;\n  height: inherit;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  background: none;\n  outline: none;\n  cursor: pointer;\n\n  &::after {\n    content: '';\n    position: absolute;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    height: 5px;\n    background-color: transparent;\n    border-radius: 2px 2px 0 0;\n  }\n\n  transition: background-color var(--speed-normal) var(--easing-primary-out);\n\n  svg {\n    transition: transform var(--speed-normal) var(--easing-primary-out);\n  }\n\n  &:hover {\n    opacity: 0.9;\n    &::after {\n      background-color: var(--primary-6);\n    }\n  }\n\n  ", "\n"])), function (_ref) {
   var isActive = _ref.isActive;
   return isActive && css(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n    &, &:hover {\n      border-bottom-color: var(--primary-9);\n      &::after {\n        background-color: var(--primary-9);\n      }\n      svg {\n        transform: scale(1);\n        animation: ", " 0.35s cubic-bezier(0.7, 0, 0.84, 0);\n      }\n\n    }\n  "])), buttonClickAnimation);
 });
 var DrawerPortalWrapper = styled.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose([""])));
-var Drawer = styled.div(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n\n  position: fixed;\n  right: -10px;\n  top: 56px;\n  bottom: 0;\n  background: var(--global-element-background);\n  border-left: var(--dividing-line) 1px solid;\n  \n  width: ", ";\n  opacity: 0;\n  visibility: hidden;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  transition:\n    opacity var(--speed-normal) var(--easing-primary-in-out),\n    right var(--speed-normal) var(--easing-primary-in-out);\n\n  ", "\n"])), function (_ref2) {
+var Drawer = styled.div(_templateObject11$h || (_templateObject11$h = _taggedTemplateLiteralLoose(["\n  font-family: var(--font-ui);\n\n  position: fixed;\n  right: -10px;\n  top: 56px;\n  bottom: 0;\n  background: var(--global-element-background);\n  border-left: var(--dividing-line) 1px solid;\n\n  width: ", ";\n  opacity: 0;\n  visibility: hidden;\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  transition:\n    opacity var(--speed-normal) var(--easing-primary-in-out),\n    right var(--speed-normal) var(--easing-primary-in-out);\n\n  ", "\n"])), function (_ref2) {
   var baseWidth = _ref2.baseWidth;
   return baseWidth ? baseWidth : "200px";
 }, function (_ref3) {
@@ -13655,6 +13789,8 @@ var TopBar = function TopBar(_ref4) {
     hasLanguage = _ref4$hasLanguage === void 0 ? false : _ref4$hasLanguage,
     _ref4$selectedLanguag = _ref4.selectedLanguageText,
     selectedLanguageText = _ref4$selectedLanguag === void 0 ? '' : _ref4$selectedLanguag,
+    languageOptionsText = _ref4.languageOptionsText,
+    selectedLangAttribute = _ref4.selectedLangAttribute,
     _ref4$hasLogout = _ref4.hasLogout,
     hasLogout = _ref4$hasLogout === void 0 ? true : _ref4$hasLogout,
     _ref4$logoutLink = _ref4.logoutLink,
@@ -13756,6 +13892,8 @@ var TopBar = function TopBar(_ref4) {
     onLogout: onLogout,
     onLanguageToggle: onLanguageToggle,
     selectedLanguageText: selectedLanguageText,
+    languageOptionsText: languageOptionsText,
+    selectedLangAttribute: selectedLangAttribute,
     hasSwitchTheme: hasSwitchTheme,
     isLightMode: isLightMode,
     switchThemeText: switchThemeText,
@@ -13888,7 +14026,7 @@ var Title$a = styled.div(_templateObject4$1f || (_templateObject4$1f = _taggedTe
   var active = _ref3.active;
   return active ? 'var(--primary-11)' : 'var(--grey-11)';
 });
-var SubTitle$2 = styled.div(_templateObject5$17 || (_templateObject5$17 = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  font-family: ", ";\n  font-style: italic;\n  color: var(--grey-a10);\n  flex-shrink: 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])), function (_ref4) {
+var SubTitle$2 = styled.div(_templateObject5$17 || (_templateObject5$17 = _taggedTemplateLiteralLoose(["\n  font-size: 12px;\n  font-family: ", ";\n  font-style: italic;\n  &:lang(ja) {\n    font-style: normal;\n  }\n  color: var(--grey-a10);\n  flex-shrink: 0;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])), function (_ref4) {
   var theme = _ref4.theme;
   return theme.fontFamily.data;
 });
@@ -14000,6 +14138,8 @@ var ItemWrapper = styled.div(_templateObject2$1B || (_templateObject2$1B = _tagg
 var MobileMenu = function MobileMenu(_ref) {
   var content = _ref.content,
     supportUrl = _ref.supportUrl,
+    _ref$supportText = _ref.supportText,
+    supportText = _ref$supportText === void 0 ? "Help & Support" : _ref$supportText,
     closeId = _ref.closeId;
   var _useState = useState(0),
     focusedContext = _useState[0],
@@ -14038,7 +14178,7 @@ var MobileMenu = function MobileMenu(_ref) {
     compact: true,
     isActive: false,
     icon: 'Question',
-    title: 'Help & Support',
+    title: supportText,
     href: supportUrl,
     menuOpen: true,
     onClickCallback: handleCloseMenu
@@ -14069,7 +14209,7 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
 
 var _excluded$N = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
 var _templateObject$1U;
-var Container$1d = styled.div(_templateObject$1U || (_templateObject$1U = _taggedTemplateLiteralLoose(["\n  background: var(--global-element-background);\n  \n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n"])));
+var Container$1d = styled.div(_templateObject$1U || (_templateObject$1U = _taggedTemplateLiteralLoose(["\n  background: var(--global-element-background);\n\n  z-index: 100;\n  display: flex;\n  flex-direction: column;\n"])));
 var MobileUserMenu = function MobileUserMenu(_ref) {
   var closeId = _ref.closeId,
     hasLanguage = _ref.hasLanguage,
@@ -14102,7 +14242,7 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
   })));
 };
 
-var _excluded$O = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
+var _excluded$O = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "supportText", "onLogout", "onLanguageToggle"];
 var _templateObject$1V, _templateObject2$1D;
 var CLOSE_ID = 'closeMenu';
 var NOTI_TAB = 'notifications';
@@ -14129,6 +14269,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
     loggedInUser = _ref.loggedInUser,
     notificationsHistory = _ref.notificationsHistory,
     customDrawer = _ref.customDrawer,
+    supportText = _ref.supportText,
     onLogout = _ref.onLogout,
     onLanguageToggle = _ref.onLanguageToggle,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$O);
@@ -14179,6 +14320,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
   }, React__default.createElement(MobileMenu, Object.assign({}, {
     content: content,
     supportUrl: supportUrl,
+    supportText: supportText,
     defaultMenuOpen: defaultMenuOpen
   }, {
     closeId: CLOSE_ID
@@ -14189,7 +14331,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
   })))));
 };
 
-var _excluded$P = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "canAlwaysPin", "paddingOverride", "maxWidth", "legacyLayout", "children", "onMenuToggle"];
+var _excluded$P = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "canAlwaysPin", "paddingOverride", "maxWidth", "legacyLayout", "children", "keepOpenText", "autoHideText", "supportText", "onMenuToggle"];
 var GlobalUI = function GlobalUI(_ref) {
   var content = _ref.content,
     home = _ref.home,
@@ -14203,6 +14345,9 @@ var GlobalUI = function GlobalUI(_ref) {
     maxWidth = _ref.maxWidth,
     legacyLayout = _ref.legacyLayout,
     children = _ref.children,
+    keepOpenText = _ref.keepOpenText,
+    autoHideText = _ref.autoHideText,
+    supportText = _ref.supportText,
     onMenuToggle = _ref.onMenuToggle,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
   var _useBreakpoints = useBreakpoints(),
@@ -14216,7 +14361,10 @@ var GlobalUI = function GlobalUI(_ref) {
     supportUrl: supportUrl,
     defaultMenuOpen: defaultMenuOpen,
     canAlwaysPin: canAlwaysPin,
-    onMenuToggle: onMenuToggle
+    onMenuToggle: onMenuToggle,
+    keepOpenText: keepOpenText,
+    autoHideText: autoHideText,
+    supportText: supportText
   })), React__default.createElement(MainContainer, null, React__default.createElement(TopBar, Object.assign({}, _extends({}, props))), React__default.createElement(ContentArea, Object.assign({}, {
     maxWidth: maxWidth,
     paddingOverride: paddingOverride,
@@ -14226,7 +14374,8 @@ var GlobalUI = function GlobalUI(_ref) {
     home: home,
     logoMark: logoMark,
     supportUrl: supportUrl,
-    defaultMenuOpen: defaultMenuOpen
+    defaultMenuOpen: defaultMenuOpen,
+    supportText: supportText
   }, props))), React__default.createElement(ContentArea, null, children));
 };