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.
@@ -2232,7 +2232,7 @@ var InputActionButton = styled.button.attrs({
2232
2232
  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"])));
2233
2233
  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"])));
2234
2234
  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);
2235
- 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) {
2235
+ 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) {
2236
2236
  var fieldState = _ref.fieldState;
2237
2237
  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);
2238
2238
  });
@@ -2243,7 +2243,7 @@ var InputContainer = styled.div(_templateObject8$3 || (_templateObject8$3 = _tag
2243
2243
  var Container$5 = styled.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n ", "\n\n"])), function (_ref3) {
2244
2244
  var fieldState = _ref3.fieldState,
2245
2245
  showFeedback = _ref3.showFeedback;
2246
- 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);
2246
+ 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);
2247
2247
  });
2248
2248
  var Input = function Input(_ref4) {
2249
2249
  var _ref4$type = _ref4.type,
@@ -2343,16 +2343,16 @@ var Label = function Label(_ref3) {
2343
2343
 
2344
2344
  var _excluded$6 = ["unit", "label", "name", "type", "placeholder", "defaultValue", "fieldState", "required", "className"];
2345
2345
  var _templateObject$j, _templateObject2$d, _templateObject3$c, _templateObject4$b, _templateObject5$9, _templateObject6$5, _templateObject7$5;
2346
- 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);
2347
- 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) {
2346
+ 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);
2347
+ 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) {
2348
2348
  var fieldState = _ref.fieldState;
2349
- 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);
2349
+ 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);
2350
2350
  }, function (_ref2) {
2351
2351
  var hasAction = _ref2.hasAction;
2352
2352
  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);
2353
2353
  });
2354
2354
  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"])));
2355
- var Container$6 = styled.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n \n ", ";\n"])), function (_ref3) {
2355
+ var Container$6 = styled.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n\n ", ";\n"])), function (_ref3) {
2356
2356
  var fieldState = _ref3.fieldState;
2357
2357
  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);
2358
2358
  });
@@ -2810,7 +2810,7 @@ var RadioButton = function RadioButton(_ref2) {
2810
2810
  var _excluded$7 = ["placeholder", "fieldState", "showFeedback", "feedbackMessage", "children"];
2811
2811
  var _templateObject$n, _templateObject2$h, _templateObject3$g, _templateObject4$f, _templateObject5$d, _templateObject6$9, _templateObject7$9, _templateObject8$7, _templateObject9$6;
2812
2812
  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"])));
2813
- 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) {
2813
+ 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) {
2814
2814
  var fieldState = _ref.fieldState;
2815
2815
  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);
2816
2816
  });
@@ -2819,7 +2819,7 @@ var FeedbackMessage$1 = styled.div(_templateObject5$d || (_templateObject5$d = _
2819
2819
  var Container$a = styled.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref2) {
2820
2820
  var fieldState = _ref2.fieldState,
2821
2821
  showFeedback = _ref2.showFeedback;
2822
- 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);
2822
+ 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);
2823
2823
  });
2824
2824
  var TextArea = function TextArea(_ref3) {
2825
2825
  var _ref3$placeholder = _ref3.placeholder,
@@ -2884,7 +2884,7 @@ var SubjectIcon = styled.div(_templateObject3$h || (_templateObject3$h = _tagged
2884
2884
  var isCompact = _ref2.isCompact;
2885
2885
  return isCompact ? '10px' : '12px';
2886
2886
  });
2887
- 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) {
2887
+ 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) {
2888
2888
  var fieldState = _ref3.fieldState;
2889
2889
  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);
2890
2890
  }, function (_ref4) {
@@ -2894,7 +2894,7 @@ var StyledSelect = styled.select(_templateObject4$g || (_templateObject4$g = _ta
2894
2894
  });
2895
2895
  var Container$b = styled.div(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n\n ", ";\n\n"])), function (_ref5) {
2896
2896
  var activePlaceholder = _ref5.activePlaceholder;
2897
- 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);
2897
+ 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);
2898
2898
  });
2899
2899
  var SelectField = function SelectField(_ref6) {
2900
2900
  var _ref6$fieldState = _ref6.fieldState,
@@ -3060,7 +3060,7 @@ var Mark = styled.span(_templateObject5$f || (_templateObject5$f = _taggedTempla
3060
3060
  var leftValue = _ref4.leftValue;
3061
3061
  return "calc(" + leftValue + "% + 7px)";
3062
3062
  });
3063
- 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) {
3063
+ 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) {
3064
3064
  var leftValue = _ref5.leftValue;
3065
3065
  return "calc(" + leftValue + "% + 7px)";
3066
3066
  }, function (_ref6) {
@@ -3305,7 +3305,7 @@ var _templateObject$r, _templateObject2$l, _templateObject3$k, _templateObject4$
3305
3305
  var Container$d = styled.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose([""])));
3306
3306
  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"])));
3307
3307
  var ValueLabel = styled(Label)(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n margin-bottom: 0;\n"])));
3308
- var unitStyle = 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"])));
3308
+ 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"])));
3309
3309
  var Unit = styled.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n ", ";\n"])), unitStyle);
3310
3310
  var ValueTitle = styled.div(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
3311
3311
  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);
@@ -6176,15 +6176,15 @@ var FilterOption = function FilterOption(_ref2) {
6176
6176
  var _excluded$q = ["color", "hasBorder", "iconSize", "disabled", "noBackground", "hasCrossButton", "onCrossClick", "width"];
6177
6177
  var _templateObject$K, _templateObject2$D, _templateObject3$z, _templateObject4$v, _templateObject5$s, _templateObject6$n, _templateObject7$m, _templateObject8$j;
6178
6178
  var IconContainer$1 = styled.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n padding: 0 2px;\n"])));
6179
- 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) {
6179
+ 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) {
6180
6180
  var hasBorder = _ref.hasBorder,
6181
6181
  disabled = _ref.disabled,
6182
6182
  noBackground = _ref.noBackground,
6183
6183
  width = _ref.width;
6184
- 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)');
6184
+ 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)');
6185
6185
  }, IconWrapper);
6186
6186
  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);
6187
- 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) {
6187
+ 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) {
6188
6188
  var color = _ref2.color;
6189
6189
  return color && "color: var(--" + color + ")";
6190
6190
  });
@@ -6367,7 +6367,7 @@ var FilterDropHandler = forwardRef(function (_ref3, imperativeRef) {
6367
6367
 
6368
6368
  var _templateObject$M, _templateObject2$F;
6369
6369
  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"])));
6370
- 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"])));
6370
+ 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"])));
6371
6371
  var LoadingBox = function LoadingBox(_ref) {
6372
6372
  var loadingText = _ref.loadingText;
6373
6373
  return React__default.createElement(Container$t, null, React__default.createElement(Spinner, {
@@ -6385,7 +6385,7 @@ var OptionList = styled.div(_templateObject3$B || (_templateObject3$B = _taggedT
6385
6385
  return moreItem ? '228px' : '196px';
6386
6386
  }, StyledFilterOption);
6387
6387
  var ResultsContainer = styled.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n min-width: 216px;\n"])));
6388
- 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"])));
6388
+ 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"])));
6389
6389
  var SearchWrapper = styled.div(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n height: 40px;\n display: flex;\n align-items: center;\n padding: 0 8px;\n"])));
6390
6390
  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"])));
6391
6391
  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"])));
@@ -12418,7 +12418,7 @@ var _templateObject$1u, _templateObject2$1f, _templateObject3$17, _templateObjec
12418
12418
  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"])));
12419
12419
  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"])));
12420
12420
  var Breadcrumbs = styled.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
12421
- 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"])));
12421
+ 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"])));
12422
12422
  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"])));
12423
12423
  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"])));
12424
12424
  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);
@@ -13290,6 +13290,8 @@ var MainMenu = function MainMenu(_ref3) {
13290
13290
  _ref3$autoHideText = _ref3.autoHideText,
13291
13291
  autoHideText = _ref3$autoHideText === void 0 ? "Auto-Hide" : _ref3$autoHideText,
13292
13292
  supportUrl = _ref3.supportUrl,
13293
+ _ref3$supportText = _ref3.supportText,
13294
+ supportText = _ref3$supportText === void 0 ? "Help & Support" : _ref3$supportText,
13293
13295
  _ref3$defaultMenuOpen = _ref3.defaultMenuOpen,
13294
13296
  defaultMenuOpen = _ref3$defaultMenuOpen === void 0 ? true : _ref3$defaultMenuOpen,
13295
13297
  _ref3$canAlwaysPin = _ref3.canAlwaysPin,
@@ -13363,7 +13365,7 @@ var MainMenu = function MainMenu(_ref3) {
13363
13365
  compact: true,
13364
13366
  isActive: false,
13365
13367
  icon: 'Question',
13366
- title: 'Help & Support',
13368
+ title: supportText,
13367
13369
  href: supportUrl,
13368
13370
  menuOpen: menuState.isMenuOpen
13369
13371
  })), menuState.canPin ? React__default.createElement(FooterItemContainer, null, React__default.createElement(ContextItem, {
@@ -13453,7 +13455,7 @@ var _templateObject$1E, _templateObject2$1p, _templateObject3$1g, _templateObjec
13453
13455
  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"])));
13454
13456
  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"])));
13455
13457
  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"])));
13456
- 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"])));
13458
+ 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"])));
13457
13459
  var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
13458
13460
  var _ref$icon = _ref.icon,
13459
13461
  icon = _ref$icon === void 0 ? 'Settings' : _ref$icon,
@@ -13493,11 +13495,27 @@ var FooterText = styled.div(_templateObject14$b || (_templateObject14$b = _tagge
13493
13495
  var icon = _ref3.icon;
13494
13496
  return icon !== '' ? '136px;' : '164px;';
13495
13497
  });
13498
+ var updateLanguageAttribute = function updateLanguageAttribute(initLanguage) {
13499
+ if (initLanguage) {
13500
+ document.documentElement.setAttribute("lang", initLanguage);
13501
+ return initLanguage;
13502
+ }
13503
+ var browserLang = navigator.language.split("-")[0];
13504
+ var htmlLang = document.documentElement.lang;
13505
+ if (!htmlLang) {
13506
+ document.documentElement.setAttribute("lang", browserLang);
13507
+ return browserLang;
13508
+ }
13509
+ return htmlLang;
13510
+ };
13496
13511
  var UserMenu = function UserMenu(_ref4) {
13497
13512
  var _ref4$hasLanguage = _ref4.hasLanguage,
13498
13513
  hasLanguage = _ref4$hasLanguage === void 0 ? false : _ref4$hasLanguage,
13499
13514
  _ref4$selectedLanguag = _ref4.selectedLanguageText,
13500
13515
  selectedLanguageText = _ref4$selectedLanguag === void 0 ? '' : _ref4$selectedLanguag,
13516
+ _ref4$languageOptions = _ref4.languageOptionsText,
13517
+ languageOptionsText = _ref4$languageOptions === void 0 ? 'LANGUAGE / 言語' : _ref4$languageOptions,
13518
+ selectedLangAttribute = _ref4.selectedLangAttribute,
13501
13519
  _ref4$hasLogout = _ref4.hasLogout,
13502
13520
  hasLogout = _ref4$hasLogout === void 0 ? true : _ref4$hasLogout,
13503
13521
  _ref4$logoutLink = _ref4.logoutLink,
@@ -13561,6 +13579,9 @@ var UserMenu = function UserMenu(_ref4) {
13561
13579
  closeOnClick();
13562
13580
  }
13563
13581
  }, [closeOnClick]);
13582
+ useEffect(function () {
13583
+ updateLanguageAttribute(selectedLangAttribute);
13584
+ }, [selectedLangAttribute]);
13564
13585
  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) {
13565
13586
  return React__default.createElement(UserDrawerMeta, Object.assign({
13566
13587
  onUserDrawerMetaClick: onUserDrawerMetaClick,
@@ -13589,7 +13610,7 @@ var UserMenu = function UserMenu(_ref4) {
13589
13610
  onClickCallback: onThemeToggle
13590
13611
  }), hasLanguage && React__default.createElement(DrawerBottomMenu, {
13591
13612
  icon: 'Language',
13592
- title: "LANGUAGE / \u8A00\u8A9E",
13613
+ title: languageOptionsText,
13593
13614
  subTitle: selectedLanguageText,
13594
13615
  onClickCallback: onLanguageToggle
13595
13616
  }), hasUserDrawerFooter ? React__default.createElement(FooterMeta, {
@@ -13743,17 +13764,17 @@ var Container$16 = styled.div(_templateObject$1J || (_templateObject$1J = _tagge
13743
13764
  var RightArea$1 = styled.div(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 24px;\n height: 100%;\n"])));
13744
13765
  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"])));
13745
13766
  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"])));
13746
- 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);
13767
+ 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);
13747
13768
  var ButtonArea = styled.div(_templateObject6$S || (_templateObject6$S = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n gap: 0;\n"])));
13748
13769
  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"])));
13749
13770
  var DrawerToggle = styled.button.attrs({
13750
13771
  type: 'button'
13751
- })(_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) {
13772
+ })(_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) {
13752
13773
  var isActive = _ref.isActive;
13753
13774
  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);
13754
13775
  });
13755
13776
  var DrawerPortalWrapper = styled.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose([""])));
13756
- 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) {
13777
+ 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) {
13757
13778
  var baseWidth = _ref2.baseWidth;
13758
13779
  return baseWidth ? baseWidth : "200px";
13759
13780
  }, function (_ref3) {
@@ -13768,6 +13789,8 @@ var TopBar = function TopBar(_ref4) {
13768
13789
  hasLanguage = _ref4$hasLanguage === void 0 ? false : _ref4$hasLanguage,
13769
13790
  _ref4$selectedLanguag = _ref4.selectedLanguageText,
13770
13791
  selectedLanguageText = _ref4$selectedLanguag === void 0 ? '' : _ref4$selectedLanguag,
13792
+ languageOptionsText = _ref4.languageOptionsText,
13793
+ selectedLangAttribute = _ref4.selectedLangAttribute,
13771
13794
  _ref4$hasLogout = _ref4.hasLogout,
13772
13795
  hasLogout = _ref4$hasLogout === void 0 ? true : _ref4$hasLogout,
13773
13796
  _ref4$logoutLink = _ref4.logoutLink,
@@ -13869,6 +13892,8 @@ var TopBar = function TopBar(_ref4) {
13869
13892
  onLogout: onLogout,
13870
13893
  onLanguageToggle: onLanguageToggle,
13871
13894
  selectedLanguageText: selectedLanguageText,
13895
+ languageOptionsText: languageOptionsText,
13896
+ selectedLangAttribute: selectedLangAttribute,
13872
13897
  hasSwitchTheme: hasSwitchTheme,
13873
13898
  isLightMode: isLightMode,
13874
13899
  switchThemeText: switchThemeText,
@@ -14001,7 +14026,7 @@ var Title$a = styled.div(_templateObject4$1f || (_templateObject4$1f = _taggedTe
14001
14026
  var active = _ref3.active;
14002
14027
  return active ? 'var(--primary-11)' : 'var(--grey-11)';
14003
14028
  });
14004
- 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) {
14029
+ 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) {
14005
14030
  var theme = _ref4.theme;
14006
14031
  return theme.fontFamily.data;
14007
14032
  });
@@ -14113,6 +14138,8 @@ var ItemWrapper = styled.div(_templateObject2$1B || (_templateObject2$1B = _tagg
14113
14138
  var MobileMenu = function MobileMenu(_ref) {
14114
14139
  var content = _ref.content,
14115
14140
  supportUrl = _ref.supportUrl,
14141
+ _ref$supportText = _ref.supportText,
14142
+ supportText = _ref$supportText === void 0 ? "Help & Support" : _ref$supportText,
14116
14143
  closeId = _ref.closeId;
14117
14144
  var _useState = useState(0),
14118
14145
  focusedContext = _useState[0],
@@ -14151,7 +14178,7 @@ var MobileMenu = function MobileMenu(_ref) {
14151
14178
  compact: true,
14152
14179
  isActive: false,
14153
14180
  icon: 'Question',
14154
- title: 'Help & Support',
14181
+ title: supportText,
14155
14182
  href: supportUrl,
14156
14183
  menuOpen: true,
14157
14184
  onClickCallback: handleCloseMenu
@@ -14182,7 +14209,7 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
14182
14209
 
14183
14210
  var _excluded$N = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
14184
14211
  var _templateObject$1U;
14185
- 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"])));
14212
+ 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"])));
14186
14213
  var MobileUserMenu = function MobileUserMenu(_ref) {
14187
14214
  var closeId = _ref.closeId,
14188
14215
  hasLanguage = _ref.hasLanguage,
@@ -14215,7 +14242,7 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
14215
14242
  })));
14216
14243
  };
14217
14244
 
14218
- var _excluded$O = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
14245
+ var _excluded$O = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "supportText", "onLogout", "onLanguageToggle"];
14219
14246
  var _templateObject$1V, _templateObject2$1D;
14220
14247
  var CLOSE_ID = 'closeMenu';
14221
14248
  var NOTI_TAB = 'notifications';
@@ -14242,6 +14269,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
14242
14269
  loggedInUser = _ref.loggedInUser,
14243
14270
  notificationsHistory = _ref.notificationsHistory,
14244
14271
  customDrawer = _ref.customDrawer,
14272
+ supportText = _ref.supportText,
14245
14273
  onLogout = _ref.onLogout,
14246
14274
  onLanguageToggle = _ref.onLanguageToggle,
14247
14275
  props = _objectWithoutPropertiesLoose(_ref, _excluded$O);
@@ -14292,6 +14320,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
14292
14320
  }, React__default.createElement(MobileMenu, Object.assign({}, {
14293
14321
  content: content,
14294
14322
  supportUrl: supportUrl,
14323
+ supportText: supportText,
14295
14324
  defaultMenuOpen: defaultMenuOpen
14296
14325
  }, {
14297
14326
  closeId: CLOSE_ID
@@ -14302,7 +14331,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
14302
14331
  })))));
14303
14332
  };
14304
14333
 
14305
- var _excluded$P = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "canAlwaysPin", "paddingOverride", "maxWidth", "legacyLayout", "children", "onMenuToggle"];
14334
+ var _excluded$P = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "canAlwaysPin", "paddingOverride", "maxWidth", "legacyLayout", "children", "keepOpenText", "autoHideText", "supportText", "onMenuToggle"];
14306
14335
  var GlobalUI = function GlobalUI(_ref) {
14307
14336
  var content = _ref.content,
14308
14337
  home = _ref.home,
@@ -14316,6 +14345,9 @@ var GlobalUI = function GlobalUI(_ref) {
14316
14345
  maxWidth = _ref.maxWidth,
14317
14346
  legacyLayout = _ref.legacyLayout,
14318
14347
  children = _ref.children,
14348
+ keepOpenText = _ref.keepOpenText,
14349
+ autoHideText = _ref.autoHideText,
14350
+ supportText = _ref.supportText,
14319
14351
  onMenuToggle = _ref.onMenuToggle,
14320
14352
  props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
14321
14353
  var _useBreakpoints = useBreakpoints(),
@@ -14329,7 +14361,10 @@ var GlobalUI = function GlobalUI(_ref) {
14329
14361
  supportUrl: supportUrl,
14330
14362
  defaultMenuOpen: defaultMenuOpen,
14331
14363
  canAlwaysPin: canAlwaysPin,
14332
- onMenuToggle: onMenuToggle
14364
+ onMenuToggle: onMenuToggle,
14365
+ keepOpenText: keepOpenText,
14366
+ autoHideText: autoHideText,
14367
+ supportText: supportText
14333
14368
  })), React__default.createElement(MainContainer, null, React__default.createElement(TopBar, Object.assign({}, _extends({}, props))), React__default.createElement(ContentArea, Object.assign({}, {
14334
14369
  maxWidth: maxWidth,
14335
14370
  paddingOverride: paddingOverride,
@@ -14339,7 +14374,8 @@ var GlobalUI = function GlobalUI(_ref) {
14339
14374
  home: home,
14340
14375
  logoMark: logoMark,
14341
14376
  supportUrl: supportUrl,
14342
- defaultMenuOpen: defaultMenuOpen
14377
+ defaultMenuOpen: defaultMenuOpen,
14378
+ supportText: supportText
14343
14379
  }, props))), React__default.createElement(ContentArea, null, children));
14344
14380
  };
14345
14381