scorer-ui-kit 2.9.1 → 2.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/Global/index.d.ts +3 -0
  2. package/dist/index.js +67 -31
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.modern.js +67 -31
  5. package/dist/index.modern.js.map +1 -1
  6. package/package.json +1 -1
package/dist/Global/index.d.ts CHANGED
@@ -35,6 +35,7 @@ export interface IMenu {
35
35
  logoMark?: string;
36
36
  logoText?: string;
37
37
  supportUrl?: string;
38
+ supportText?: string;
38
39
  keepOpenText?: string;
39
40
  autoHideText?: string;
40
41
  defaultMenuOpen?: boolean;
@@ -66,6 +67,8 @@ export interface ITopBar {
66
67
  loggedInUser: string;
67
68
  hasLanguage?: boolean;
68
69
  selectedLanguageText?: string;
70
+ languageOptionsText?: string;
71
+ selectedLangAttribute?: string;
69
72
  hasLogout?: boolean;
70
73
  logoutText?: string;
71
74
  logoutLink?: string;
package/dist/index.js CHANGED
@@ -2235,7 +2235,7 @@ var InputActionButton = styled__default.button.attrs({
2235
2235
  var FeedbackContainer = styled__default.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"])));
2236
2236
  var FeedbackMessage = styled__default.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"])));
2237
2237
  var FeedbackIcon = styled__default.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);
2238
- var StyledInput = styled__default.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) {
2238
+ var StyledInput = styled__default.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) {
2239
2239
  var fieldState = _ref.fieldState;
2240
2240
  return styled.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);
2241
2241
  });
@@ -2246,7 +2246,7 @@ var InputContainer = styled__default.div(_templateObject8$3 || (_templateObject8
2246
2246
  var Container$5 = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n ", "\n\n"])), function (_ref3) {
2247
2247
  var fieldState = _ref3.fieldState,
2248
2248
  showFeedback = _ref3.showFeedback;
2249
- return styled.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 && styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), FeedbackContainer, ['default', 'disabled'].indexOf(fieldState) !== -1 && styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n display: none;\n "]))), fieldState, fieldState, StyledInput, fieldState, fieldState, fieldState);
2249
+ return styled.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 && styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), FeedbackContainer, ['default', 'disabled'].indexOf(fieldState) !== -1 && styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n display: none;\n "]))), fieldState, fieldState, StyledInput, fieldState, fieldState, fieldState);
2250
2250
  });
2251
2251
  var Input = function Input(_ref4) {
2252
2252
  var _ref4$type = _ref4.type,
@@ -2346,16 +2346,16 @@ var Label = function Label(_ref3) {
2346
2346
 
2347
2347
  var _excluded$6 = ["unit", "label", "name", "type", "placeholder", "defaultValue", "fieldState", "required", "className"];
2348
2348
  var _templateObject$j, _templateObject2$d, _templateObject3$c, _templateObject4$b, _templateObject5$9, _templateObject6$5, _templateObject7$5;
2349
- var StyledInput$1 = styled__default.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);
2350
- var InputContainer$1 = styled__default.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) {
2349
+ var StyledInput$1 = styled__default.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);
2350
+ var InputContainer$1 = styled__default.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) {
2351
2351
  var fieldState = _ref.fieldState;
2352
- return styled.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);
2352
+ return styled.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);
2353
2353
  }, function (_ref2) {
2354
2354
  var hasAction = _ref2.hasAction;
2355
2355
  return hasAction && styled.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);
2356
2356
  });
2357
2357
  var UnitKey = styled__default.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"])));
2358
- var Container$6 = styled__default.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n \n ", ";\n"])), function (_ref3) {
2358
+ var Container$6 = styled__default.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n\n ", ";\n"])), function (_ref3) {
2359
2359
  var fieldState = _ref3.fieldState;
2360
2360
  return fieldState && styled.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);
2361
2361
  });
@@ -2813,7 +2813,7 @@ var RadioButton = function RadioButton(_ref2) {
2813
2813
  var _excluded$7 = ["placeholder", "fieldState", "showFeedback", "feedbackMessage", "children"];
2814
2814
  var _templateObject$n, _templateObject2$h, _templateObject3$g, _templateObject4$f, _templateObject5$d, _templateObject6$9, _templateObject7$9, _templateObject8$7, _templateObject9$6;
2815
2815
  var FeedbackIcon$1 = styled__default.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"])));
2816
- var StyledTextArea = styled__default.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) {
2816
+ var StyledTextArea = styled__default.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) {
2817
2817
  var fieldState = _ref.fieldState;
2818
2818
  return styled.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);
2819
2819
  });
@@ -2822,7 +2822,7 @@ var FeedbackMessage$1 = styled__default.div(_templateObject5$d || (_templateObje
2822
2822
  var Container$a = styled__default.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref2) {
2823
2823
  var fieldState = _ref2.fieldState,
2824
2824
  showFeedback = _ref2.showFeedback;
2825
- return styled.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 && styled.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 && styled.css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n display:none;\n "]))), FeedbackContainer$1, fieldState, fieldState);
2825
+ return styled.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 && styled.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 && styled.css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n display:none;\n "]))), FeedbackContainer$1, fieldState, fieldState);
2826
2826
  });
2827
2827
  var TextArea = function TextArea(_ref3) {
2828
2828
  var _ref3$placeholder = _ref3.placeholder,
@@ -2887,7 +2887,7 @@ var SubjectIcon = styled__default.div(_templateObject3$h || (_templateObject3$h
2887
2887
  var isCompact = _ref2.isCompact;
2888
2888
  return isCompact ? '10px' : '12px';
2889
2889
  });
2890
- var StyledSelect = styled__default.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) {
2890
+ var StyledSelect = styled__default.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) {
2891
2891
  var fieldState = _ref3.fieldState;
2892
2892
  return styled.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);
2893
2893
  }, function (_ref4) {
@@ -2897,7 +2897,7 @@ var StyledSelect = styled__default.select(_templateObject4$g || (_templateObject
2897
2897
  });
2898
2898
  var Container$b = styled__default.div(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n\n ", ";\n\n"])), function (_ref5) {
2899
2899
  var activePlaceholder = _ref5.activePlaceholder;
2900
- return activePlaceholder && styled.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);
2900
+ return activePlaceholder && styled.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);
2901
2901
  });
2902
2902
  var SelectField = function SelectField(_ref6) {
2903
2903
  var _ref6$fieldState = _ref6.fieldState,
@@ -3063,7 +3063,7 @@ var Mark = styled__default.span(_templateObject5$f || (_templateObject5$f = _tag
3063
3063
  var leftValue = _ref4.leftValue;
3064
3064
  return "calc(" + leftValue + "% + 7px)";
3065
3065
  });
3066
- var MarkLabel = styled__default.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) {
3066
+ var MarkLabel = styled__default.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) {
3067
3067
  var leftValue = _ref5.leftValue;
3068
3068
  return "calc(" + leftValue + "% + 7px)";
3069
3069
  }, function (_ref6) {
@@ -3308,7 +3308,7 @@ var _templateObject$r, _templateObject2$l, _templateObject3$k, _templateObject4$
3308
3308
  var Container$d = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose([""])));
3309
3309
  var Headers = styled__default.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"])));
3310
3310
  var ValueLabel = styled__default(Label)(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n margin-bottom: 0;\n"])));
3311
- var unitStyle = styled.css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n color: var(--grey-a11);\n font-style: italic;\n font-size: 12px;\n line-height: 1.5;\n"])));
3311
+ var unitStyle = styled.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"])));
3312
3312
  var Unit = styled__default.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n ", ";\n"])), unitStyle);
3313
3313
  var ValueTitle = styled__default.div(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
3314
3314
  var TitleTemplate = styled__default.div(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n ", ";\n span {\n font-style: normal;\n }\n"])), unitStyle);
@@ -6179,15 +6179,15 @@ var FilterOption = function FilterOption(_ref2) {
6179
6179
  var _excluded$q = ["color", "hasBorder", "iconSize", "disabled", "noBackground", "hasCrossButton", "onCrossClick", "width"];
6180
6180
  var _templateObject$K, _templateObject2$D, _templateObject3$z, _templateObject4$v, _templateObject5$s, _templateObject6$n, _templateObject7$m, _templateObject8$j;
6181
6181
  var IconContainer$1 = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n padding: 0 2px;\n"])));
6182
- var Container$r = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", " {\n flex-shrink: 0;\n display: flex;\n }\n\n \n"])), function (_ref) {
6182
+ var Container$r = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", " {\n flex-shrink: 0;\n display: flex;\n }\n\n\n"])), function (_ref) {
6183
6183
  var hasBorder = _ref.hasBorder,
6184
6184
  disabled = _ref.disabled,
6185
6185
  noBackground = _ref.noBackground,
6186
6186
  width = _ref.width;
6187
- return styled.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 && styled.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 && styled.css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && styled.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)');
6187
+ return styled.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 && styled.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 && styled.css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && styled.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)');
6188
6188
  }, IconWrapper);
6189
6189
  var CrossButton = styled__default.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);
6190
- var StyledInput$2 = styled__default.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) {
6190
+ var StyledInput$2 = styled__default.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) {
6191
6191
  var color = _ref2.color;
6192
6192
  return color && "color: var(--" + color + ")";
6193
6193
  });
@@ -6370,7 +6370,7 @@ var FilterDropHandler = React.forwardRef(function (_ref3, imperativeRef) {
6370
6370
 
6371
6371
  var _templateObject$M, _templateObject2$F;
6372
6372
  var Container$t = styled__default.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"])));
6373
- var LoadingText = styled__default.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"])));
6373
+ var LoadingText = styled__default.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"])));
6374
6374
  var LoadingBox = function LoadingBox(_ref) {
6375
6375
  var loadingText = _ref.loadingText;
6376
6376
  return React__default.createElement(Container$t, null, React__default.createElement(Spinner, {
@@ -6388,7 +6388,7 @@ var OptionList = styled__default.div(_templateObject3$B || (_templateObject3$B =
6388
6388
  return moreItem ? '228px' : '196px';
6389
6389
  }, StyledFilterOption);
6390
6390
  var ResultsContainer = styled__default.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n min-width: 216px;\n"])));
6391
- var ResultCounter = styled__default.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"])));
6391
+ var ResultCounter = styled__default.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"])));
6392
6392
  var SearchWrapper = styled__default.div(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n height: 40px;\n display: flex;\n align-items: center;\n padding: 0 8px;\n"])));
6393
6393
  var EmptyResultText = styled__default.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"])));
6394
6394
  var Gradient = styled__default.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"])));
@@ -12421,7 +12421,7 @@ var _templateObject$1u, _templateObject2$1f, _templateObject3$17, _templateObjec
12421
12421
  var Container$Y = styled__default.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"])));
12422
12422
  var LeftArea = styled__default.div(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: var(--columnPadding, 16px);\n flex: 1 0 0;\n"])));
12423
12423
  var Breadcrumbs = styled__default.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
12424
- var Breadcrumb = styled__default.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"])));
12424
+ var Breadcrumb = styled__default.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"])));
12425
12425
  var BreadcrumbIcon = styled__default.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"])));
12426
12426
  var HomeIcon = styled__default(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"])));
12427
12427
  var BreadcrumbLink = styled__default(reactRouterDom.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);
@@ -13293,6 +13293,8 @@ var MainMenu = function MainMenu(_ref3) {
13293
13293
  _ref3$autoHideText = _ref3.autoHideText,
13294
13294
  autoHideText = _ref3$autoHideText === void 0 ? "Auto-Hide" : _ref3$autoHideText,
13295
13295
  supportUrl = _ref3.supportUrl,
13296
+ _ref3$supportText = _ref3.supportText,
13297
+ supportText = _ref3$supportText === void 0 ? "Help & Support" : _ref3$supportText,
13296
13298
  _ref3$defaultMenuOpen = _ref3.defaultMenuOpen,
13297
13299
  defaultMenuOpen = _ref3$defaultMenuOpen === void 0 ? true : _ref3$defaultMenuOpen,
13298
13300
  _ref3$canAlwaysPin = _ref3.canAlwaysPin,
@@ -13366,7 +13368,7 @@ var MainMenu = function MainMenu(_ref3) {
13366
13368
  compact: true,
13367
13369
  isActive: false,
13368
13370
  icon: 'Question',
13369
- title: 'Help & Support',
13371
+ title: supportText,
13370
13372
  href: supportUrl,
13371
13373
  menuOpen: menuState.isMenuOpen
13372
13374
  })), menuState.canPin ? React__default.createElement(FooterItemContainer, null, React__default.createElement(ContextItem, {
@@ -13456,7 +13458,7 @@ var _templateObject$1E, _templateObject2$1p, _templateObject3$1g, _templateObjec
13456
13458
  var Container$12 = styled__default.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"])));
13457
13459
  var ColumnContainer = styled__default.div(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n padding-left: 14px;\n align-items: flex-start;\n"])));
13458
13460
  var Title$8 = styled__default.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"])));
13459
- var SubTitle$1 = styled__default.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"])));
13461
+ var SubTitle$1 = styled__default.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"])));
13460
13462
  var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
13461
13463
  var _ref$icon = _ref.icon,
13462
13464
  icon = _ref$icon === void 0 ? 'Settings' : _ref$icon,
@@ -13496,11 +13498,27 @@ var FooterText = styled__default.div(_templateObject14$b || (_templateObject14$b
13496
13498
  var icon = _ref3.icon;
13497
13499
  return icon !== '' ? '136px;' : '164px;';
13498
13500
  });
13501
+ var updateLanguageAttribute = function updateLanguageAttribute(initLanguage) {
13502
+ if (initLanguage) {
13503
+ document.documentElement.setAttribute("lang", initLanguage);
13504
+ return initLanguage;
13505
+ }
13506
+ var browserLang = navigator.language.split("-")[0];
13507
+ var htmlLang = document.documentElement.lang;
13508
+ if (!htmlLang) {
13509
+ document.documentElement.setAttribute("lang", browserLang);
13510
+ return browserLang;
13511
+ }
13512
+ return htmlLang;
13513
+ };
13499
13514
  var UserMenu = function UserMenu(_ref4) {
13500
13515
  var _ref4$hasLanguage = _ref4.hasLanguage,
13501
13516
  hasLanguage = _ref4$hasLanguage === void 0 ? false : _ref4$hasLanguage,
13502
13517
  _ref4$selectedLanguag = _ref4.selectedLanguageText,
13503
13518
  selectedLanguageText = _ref4$selectedLanguag === void 0 ? '' : _ref4$selectedLanguag,
13519
+ _ref4$languageOptions = _ref4.languageOptionsText,
13520
+ languageOptionsText = _ref4$languageOptions === void 0 ? 'LANGUAGE / 言語' : _ref4$languageOptions,
13521
+ selectedLangAttribute = _ref4.selectedLangAttribute,
13504
13522
  _ref4$hasLogout = _ref4.hasLogout,
13505
13523
  hasLogout = _ref4$hasLogout === void 0 ? true : _ref4$hasLogout,
13506
13524
  _ref4$logoutLink = _ref4.logoutLink,
@@ -13564,6 +13582,9 @@ var UserMenu = function UserMenu(_ref4) {
13564
13582
  closeOnClick();
13565
13583
  }
13566
13584
  }, [closeOnClick]);
13585
+ React.useEffect(function () {
13586
+ updateLanguageAttribute(selectedLangAttribute);
13587
+ }, [selectedLangAttribute]);
13567
13588
  return React__default.createElement(React.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) {
13568
13589
  return React__default.createElement(UserDrawerMeta, Object.assign({
13569
13590
  onUserDrawerMetaClick: onUserDrawerMetaClick,
@@ -13592,7 +13613,7 @@ var UserMenu = function UserMenu(_ref4) {
13592
13613
  onClickCallback: onThemeToggle
13593
13614
  }), hasLanguage && React__default.createElement(DrawerBottomMenu, {
13594
13615
  icon: 'Language',
13595
- title: "LANGUAGE / \u8A00\u8A9E",
13616
+ title: languageOptionsText,
13596
13617
  subTitle: selectedLanguageText,
13597
13618
  onClickCallback: onLanguageToggle
13598
13619
  }), hasUserDrawerFooter ? React__default.createElement(FooterMeta, {
@@ -13746,17 +13767,17 @@ var Container$16 = styled__default.div(_templateObject$1J || (_templateObject$1J
13746
13767
  var RightArea$1 = styled__default.div(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 24px;\n height: 100%;\n"])));
13747
13768
  var SearchBar = styled__default.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"])));
13748
13769
  var IconWrapper$4 = styled__default.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"])));
13749
- var SearchInput = styled__default.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);
13770
+ var SearchInput = styled__default.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);
13750
13771
  var ButtonArea = styled__default.div(_templateObject6$S || (_templateObject6$S = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n gap: 0;\n"])));
13751
13772
  var buttonClickAnimation = styled.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"])));
13752
13773
  var DrawerToggle = styled__default.button.attrs({
13753
13774
  type: 'button'
13754
- })(_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) {
13775
+ })(_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) {
13755
13776
  var isActive = _ref.isActive;
13756
13777
  return isActive && styled.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);
13757
13778
  });
13758
13779
  var DrawerPortalWrapper = styled__default.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose([""])));
13759
- var Drawer = styled__default.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) {
13780
+ var Drawer = styled__default.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) {
13760
13781
  var baseWidth = _ref2.baseWidth;
13761
13782
  return baseWidth ? baseWidth : "200px";
13762
13783
  }, function (_ref3) {
@@ -13771,6 +13792,8 @@ var TopBar = function TopBar(_ref4) {
13771
13792
  hasLanguage = _ref4$hasLanguage === void 0 ? false : _ref4$hasLanguage,
13772
13793
  _ref4$selectedLanguag = _ref4.selectedLanguageText,
13773
13794
  selectedLanguageText = _ref4$selectedLanguag === void 0 ? '' : _ref4$selectedLanguag,
13795
+ languageOptionsText = _ref4.languageOptionsText,
13796
+ selectedLangAttribute = _ref4.selectedLangAttribute,
13774
13797
  _ref4$hasLogout = _ref4.hasLogout,
13775
13798
  hasLogout = _ref4$hasLogout === void 0 ? true : _ref4$hasLogout,
13776
13799
  _ref4$logoutLink = _ref4.logoutLink,
@@ -13872,6 +13895,8 @@ var TopBar = function TopBar(_ref4) {
13872
13895
  onLogout: onLogout,
13873
13896
  onLanguageToggle: onLanguageToggle,
13874
13897
  selectedLanguageText: selectedLanguageText,
13898
+ languageOptionsText: languageOptionsText,
13899
+ selectedLangAttribute: selectedLangAttribute,
13875
13900
  hasSwitchTheme: hasSwitchTheme,
13876
13901
  isLightMode: isLightMode,
13877
13902
  switchThemeText: switchThemeText,
@@ -14004,7 +14029,7 @@ var Title$a = styled__default.div(_templateObject4$1f || (_templateObject4$1f =
14004
14029
  var active = _ref3.active;
14005
14030
  return active ? 'var(--primary-11)' : 'var(--grey-11)';
14006
14031
  });
14007
- var SubTitle$2 = styled__default.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) {
14032
+ var SubTitle$2 = styled__default.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) {
14008
14033
  var theme = _ref4.theme;
14009
14034
  return theme.fontFamily.data;
14010
14035
  });
@@ -14116,6 +14141,8 @@ var ItemWrapper = styled__default.div(_templateObject2$1B || (_templateObject2$1
14116
14141
  var MobileMenu = function MobileMenu(_ref) {
14117
14142
  var content = _ref.content,
14118
14143
  supportUrl = _ref.supportUrl,
14144
+ _ref$supportText = _ref.supportText,
14145
+ supportText = _ref$supportText === void 0 ? "Help & Support" : _ref$supportText,
14119
14146
  closeId = _ref.closeId;
14120
14147
  var _useState = React.useState(0),
14121
14148
  focusedContext = _useState[0],
@@ -14154,7 +14181,7 @@ var MobileMenu = function MobileMenu(_ref) {
14154
14181
  compact: true,
14155
14182
  isActive: false,
14156
14183
  icon: 'Question',
14157
- title: 'Help & Support',
14184
+ title: supportText,
14158
14185
  href: supportUrl,
14159
14186
  menuOpen: true,
14160
14187
  onClickCallback: handleCloseMenu
@@ -14185,7 +14212,7 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
14185
14212
 
14186
14213
  var _excluded$N = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
14187
14214
  var _templateObject$1U;
14188
- var Container$1d = styled__default.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"])));
14215
+ var Container$1d = styled__default.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"])));
14189
14216
  var MobileUserMenu = function MobileUserMenu(_ref) {
14190
14217
  var closeId = _ref.closeId,
14191
14218
  hasLanguage = _ref.hasLanguage,
@@ -14218,7 +14245,7 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
14218
14245
  })));
14219
14246
  };
14220
14247
 
14221
- var _excluded$O = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
14248
+ var _excluded$O = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "supportText", "onLogout", "onLanguageToggle"];
14222
14249
  var _templateObject$1V, _templateObject2$1D;
14223
14250
  var CLOSE_ID = 'closeMenu';
14224
14251
  var NOTI_TAB = 'notifications';
@@ -14245,6 +14272,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
14245
14272
  loggedInUser = _ref.loggedInUser,
14246
14273
  notificationsHistory = _ref.notificationsHistory,
14247
14274
  customDrawer = _ref.customDrawer,
14275
+ supportText = _ref.supportText,
14248
14276
  onLogout = _ref.onLogout,
14249
14277
  onLanguageToggle = _ref.onLanguageToggle,
14250
14278
  props = _objectWithoutPropertiesLoose(_ref, _excluded$O);
@@ -14295,6 +14323,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
14295
14323
  }, React__default.createElement(MobileMenu, Object.assign({}, {
14296
14324
  content: content,
14297
14325
  supportUrl: supportUrl,
14326
+ supportText: supportText,
14298
14327
  defaultMenuOpen: defaultMenuOpen
14299
14328
  }, {
14300
14329
  closeId: CLOSE_ID
@@ -14305,7 +14334,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
14305
14334
  })))));
14306
14335
  };
14307
14336
 
14308
- var _excluded$P = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "canAlwaysPin", "paddingOverride", "maxWidth", "legacyLayout", "children", "onMenuToggle"];
14337
+ var _excluded$P = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "canAlwaysPin", "paddingOverride", "maxWidth", "legacyLayout", "children", "keepOpenText", "autoHideText", "supportText", "onMenuToggle"];
14309
14338
  var GlobalUI = function GlobalUI(_ref) {
14310
14339
  var content = _ref.content,
14311
14340
  home = _ref.home,
@@ -14319,6 +14348,9 @@ var GlobalUI = function GlobalUI(_ref) {
14319
14348
  maxWidth = _ref.maxWidth,
14320
14349
  legacyLayout = _ref.legacyLayout,
14321
14350
  children = _ref.children,
14351
+ keepOpenText = _ref.keepOpenText,
14352
+ autoHideText = _ref.autoHideText,
14353
+ supportText = _ref.supportText,
14322
14354
  onMenuToggle = _ref.onMenuToggle,
14323
14355
  props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
14324
14356
  var _useBreakpoints = useBreakpoints(),
@@ -14332,7 +14364,10 @@ var GlobalUI = function GlobalUI(_ref) {
14332
14364
  supportUrl: supportUrl,
14333
14365
  defaultMenuOpen: defaultMenuOpen,
14334
14366
  canAlwaysPin: canAlwaysPin,
14335
- onMenuToggle: onMenuToggle
14367
+ onMenuToggle: onMenuToggle,
14368
+ keepOpenText: keepOpenText,
14369
+ autoHideText: autoHideText,
14370
+ supportText: supportText
14336
14371
  })), React__default.createElement(MainContainer, null, React__default.createElement(TopBar, Object.assign({}, _extends({}, props))), React__default.createElement(ContentArea, Object.assign({}, {
14337
14372
  maxWidth: maxWidth,
14338
14373
  paddingOverride: paddingOverride,
@@ -14342,7 +14377,8 @@ var GlobalUI = function GlobalUI(_ref) {
14342
14377
  home: home,
14343
14378
  logoMark: logoMark,
14344
14379
  supportUrl: supportUrl,
14345
- defaultMenuOpen: defaultMenuOpen
14380
+ defaultMenuOpen: defaultMenuOpen,
14381
+ supportText: supportText
14346
14382
  }, props))), React__default.createElement(ContentArea, null, children));
14347
14383
  };
14348
14384