@linzjs/lui 11.2.2 → 11.3.0

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.
package/dist/lui.esm.js CHANGED
@@ -962,7 +962,7 @@ var LuiError = function LuiError(_ref) {
962
962
  }, error));
963
963
  };
964
964
 
965
- var css$2 = ":root {\n --grey-80: #2a292c;\n --grey-60: #6b6966;\n --$gray: #989189;\n --grey-20: #beb9b4;\n --grey-10: #eaeaea;\n --grey-05: #f9f9f9;\n --teal: #00425d;\n --sea: #007198;\n --electric: #0096cc;\n --spray: #73c8e1;\n --polar: #e2f3f7;\n --sherpa: #004b50;\n --surfie: #017a76;\n --persian: #00a599;\n --downy: #73cdc8;\n --iceberg: #dcf5f0;\n --sacramento: #004e32;\n --salem: #08814d;\n --pigment: #0aa245;\n --granny: #9bd79b;\n --panache: #e9fae7;\n --brand-primary: #004b50;\n --brand-secondary: #017a76;\n --success: #0aa245;\n --success-bg: #e9fae7;\n --info: #3a7cdf;\n --info-bg: #d8e5f9;\n --warning: #ea6a2e;\n --warning-bg: #fbdfd2;\n --error: #cc0000;\n --error-focus: #5a0000;\n --error-bg: #f5cccc;\n --visited: #00425d;\n --green-hover: #08814d;\n --color-green-active: #004e32;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #007198;\n --color-selection: #c7e9f3;\n --heading-color: #017a76;\n --heading-color--secondary: #2a292c;\n --base-type-color: #2a292c;\n --base-icon-color: #007198;\n --disabled-color: #989189;\n --disabled-color-dark: #6b6966;\n --linz-color-primary: #023d48;\n --linz-color-primary-hover: #01818a;\n --linz-color-tertiary: #e1e44a;\n --linz-color-tertiary-hover: #cdcf59;\n --color-test-pink: #f09;\n --linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n --linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}\n\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiTextInput_LuiTextInput__947a60fa {\n margin-bottom: 24px;\n}\n.LuiTextInput_LuiTextInputLabel__947a60fa {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: 600;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.5rem;\n color: #2a292c;\n}\n\n.LuiTextInput_LuiTextInputInputWrapper__947a60fa {\n position: relative;\n display: block;\n box-shadow: -1px 0 0 0 transparent;\n border-radius: 4px;\n transition: box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n}\n.LuiTextInput_hasError__947a60fa .LuiTextInput_LuiTextInputInputWrapper__947a60fa {\n box-shadow: -8px 0px 0 0 #cc0000;\n border-radius: 4px;\n}\n\n.LuiTextInput_LuiTextInputPasswordReveal__947a60fa {\n position: absolute;\n background: transparent;\n min-height: 0;\n min-width: 0;\n margin: 0;\n padding: 12px;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n.LuiTextInput_LuiTextInputPasswordReveal__947a60fa:hover {\n background: transparent;\n}\n\n.LuiTextInput_LuiTextInputInput__947a60fa {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n margin-bottom: 0;\n border: 1px solid #b2b2b2;\n border-radius: 4px;\n height: 48px;\n color: #000000;\n caret-color: #000000;\n padding-top: 14px;\n padding-right: 32px;\n padding-bottom: 14px;\n padding-left: 16px;\n min-width: 300px;\n transition: all 0.15 ease-in-out;\n transition: border 0.2s ease;\n}\n.LuiTextInput_LuiTextInputInput__947a60fa::placeholder {\n font-weight: normal;\n color: #6b6966;\n opacity: 1;\n}\n.LuiTextInput_isDisabled__947a60fa .LuiTextInput_LuiTextInputInput__947a60fa::placeholder {\n color: #989189;\n}\n.LuiTextInput_LuiTextInputInput__947a60fa:hover, .LuiTextInput_LuiTextInputInput__947a60fa:active {\n border-color: #053d52;\n}\n.LuiTextInput_LuiTextInputInput__947a60fa:focus {\n outline: none;\n border-color: #053d52;\n}\n.LuiTextInput_hasError__947a60fa .LuiTextInput_LuiTextInputInput__947a60fa {\n border-color: #cc0000 !important;\n}\n.LuiTextInput_isDisabled__947a60fa .LuiTextInput_LuiTextInputInput__947a60fa {\n border-color: #beb9b4;\n background-color: #eaeaea;\n cursor: not-allowed;\n}\n\n.LuiTextInput_LuiTextInputError__947a60fa {\n position: relative;\n display: flex;\n color: #cc0000;\n text-align: left;\n padding-left: 22px;\n font-size: 14px;\n line-height: 20px;\n margin-top: 2px;\n}\n\n.LuiTextInput_LuiTextInputErrorIcon__947a60fa {\n position: absolute;\n left: 0;\n top: 2px;\n}\n\n.LuiTextInput_LuiFieldWrapper__947a60fa {\n position: relative;\n box-shadow: -1px 0 0 0 transparent;\n border-radius: 4px;\n transition: box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n}\n.LuiTextInput_LuiFieldWrapper__947a60fa input {\n transition: border 0.2s ease;\n}\n.LuiTextInput_LuiFieldWrapper__947a60fa.LuiTextInput_LuiFieldWrapper_Error__947a60fa {\n box-shadow: -12px 0px 0 0 #cc0000;\n border-radius: 4px;\n}\n.LuiTextInput_LuiFieldWrapper__947a60fa.LuiTextInput_LuiFieldWrapper_Error__947a60fa input {\n border-color: #cc0000;\n}";
965
+ var css$2 = ":root {\n --grey-80: #2a292c;\n --grey-60: #6b6966;\n --$gray: #989189;\n --grey-20: #beb9b4;\n --grey-10: #eaeaea;\n --grey-05: #f9f9f9;\n --teal: #00425d;\n --sea: #007198;\n --electric: #0096cc;\n --spray: #73c8e1;\n --polar: #e2f3f7;\n --sherpa: #004b50;\n --surfie: #017a76;\n --persian: #00a599;\n --downy: #73cdc8;\n --iceberg: #dcf5f0;\n --sacramento: #004e32;\n --salem: #08814d;\n --pigment: #0aa245;\n --granny: #9bd79b;\n --panache: #e9fae7;\n --brand-primary: #004b50;\n --brand-secondary: #017a76;\n --success: #0aa245;\n --success-bg: #e9fae7;\n --info: #3a7cdf;\n --info-bg: #d8e5f9;\n --warning: #ea6a2e;\n --warning-bg: #fbdfd2;\n --error: #cc0000;\n --error-focus: #5a0000;\n --error-bg: #f5cccc;\n --visited: #00425d;\n --green-hover: #08814d;\n --color-green-active: #004e32;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #007198;\n --color-selection: #c7e9f3;\n --heading-color: #017a76;\n --heading-color--secondary: #2a292c;\n --base-type-color: #2a292c;\n --base-icon-color: #007198;\n --disabled-color: #989189;\n --disabled-color-dark: #6b6966;\n --linz-color-primary: #023d48;\n --linz-color-primary-hover: #01818a;\n --linz-color-tertiary: #e1e44a;\n --linz-color-tertiary-hover: #cdcf59;\n --color-test-pink: #f09;\n --linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n --linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}\n\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiTextInput_LuiTextInput__7a248431 {\n margin-bottom: 24px;\n}\n.LuiTextInput_LuiTextInputLabel__7a248431 {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: 600;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.5rem;\n color: #2a292c;\n}\n\n.LuiTextInput_LuiTextInputInputWrapper__7a248431 {\n position: relative;\n display: block;\n box-shadow: -1px 0 0 0 transparent;\n border-radius: 4px;\n transition: box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n}\n.LuiTextInput_hasError__7a248431 .LuiTextInput_LuiTextInputInputWrapper__7a248431 {\n box-shadow: -8px 0px 0 0 #cc0000;\n border-radius: 4px;\n}\n\n.LuiTextInput_LuiTextInputPasswordReveal__7a248431 {\n position: absolute;\n background: transparent;\n min-height: 0;\n min-width: 0;\n margin: 0;\n padding: 12px;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n.LuiTextInput_LuiTextInputPasswordReveal__7a248431:hover {\n background: transparent;\n}\n\n.LuiTextInput_LuiTextInputInput__7a248431 {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n margin-bottom: 0;\n border: 1px solid #b2b2b2;\n border-radius: 4px;\n height: 48px;\n color: #000000;\n caret-color: #000000;\n padding-top: 14px;\n padding-right: 32px;\n padding-bottom: 14px;\n padding-left: 16px;\n min-width: 300px;\n transition: all 0.15 ease-in-out;\n transition: border 0.2s ease;\n}\n.LuiTextInput_LuiTextInputInput__7a248431::placeholder {\n font-weight: normal;\n color: #6b6966;\n opacity: 1;\n}\n.LuiTextInput_isDisabled__7a248431 .LuiTextInput_LuiTextInputInput__7a248431::placeholder {\n color: #989189;\n}\n.LuiTextInput_LuiTextInputInput__7a248431:hover, .LuiTextInput_LuiTextInputInput__7a248431:active {\n border-color: #053d52;\n}\n.LuiTextInput_LuiTextInputInput__7a248431:focus {\n outline: none;\n border-color: #053d52;\n}\n.LuiTextInput_hasError__7a248431 .LuiTextInput_LuiTextInputInput__7a248431 {\n border-color: #cc0000 !important;\n}\n.LuiTextInput_isDisabled__7a248431 .LuiTextInput_LuiTextInputInput__7a248431 {\n border-color: #beb9b4;\n background-color: #eaeaea;\n cursor: not-allowed;\n}\n\n.LuiTextInput_LuiTextInputError__7a248431 {\n position: relative;\n display: flex;\n color: #cc0000;\n text-align: left;\n padding-left: 22px;\n font-size: 14px;\n line-height: 20px;\n margin-top: 2px;\n}\n\n.LuiTextInput_LuiTextInputErrorIcon__7a248431 {\n position: absolute;\n left: 0;\n top: 2px;\n}\n\n.LuiTextInput_LuiTextInputMandatory__7a248431 {\n display: inline-block;\n width: 10px;\n margin: 0 0 0 -10px;\n color: #cc0000;\n}\n\n.LuiTextInput_LuiFieldWrapper__7a248431 {\n position: relative;\n box-shadow: -1px 0 0 0 transparent;\n border-radius: 4px;\n transition: box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n}\n.LuiTextInput_LuiFieldWrapper__7a248431 input {\n transition: border 0.2s ease;\n}\n.LuiTextInput_LuiFieldWrapper__7a248431.LuiTextInput_LuiFieldWrapper_Error__7a248431 {\n box-shadow: -12px 0px 0 0 #cc0000;\n border-radius: 4px;\n}\n.LuiTextInput_LuiFieldWrapper__7a248431.LuiTextInput_LuiFieldWrapper_Error__7a248431 input {\n border-color: #cc0000;\n}";
966
966
  n(css$2,{});
967
967
 
968
968
  function useGenerateOrDefaultId(idFromProps) {
@@ -980,7 +980,9 @@ var LuiTextInput = function LuiTextInput(props) {
980
980
  }, React__default.createElement("label", {
981
981
  className: 'LuiTextInput-label',
982
982
  htmlFor: id
983
- }, React__default.createElement("span", {
983
+ }, props.mandatory && React__default.createElement("span", {
984
+ className: "LuiTextInput-mandatory"
985
+ }, "*"), React__default.createElement("span", {
984
986
  className: clsx(props.hideLabel ? 'LuiScreenReadersOnly' : '')
985
987
  }, props.label), React__default.createElement("span", {
986
988
  className: "LuiTextInput-inputWrapper"