@jorilindell/hds-core 4.10.1

package/lib/components/text-input/text-input.css

@@ -0,0 +1,301 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.hds-text-input {
+  --border-width: 2px;
+  --outline-width: 3px;
+  --outline-offset-readonly: 4px;
+  --input-height: 56px;
+  --textarea-height: 149px;
+  --icon-size: var(--spacing-m);
+  --icon-color: var(--color-black);
+  --helper-color-default: var(--color-black-60);
+  --helper-color-invalid: var(--color-black);
+  --helper-background-color-invalid: var(--color-error-light);
+  --helper-icon-color-invalid: var(--color-error);
+  --helper-color-success: var(--color-black);
+  --helper-background-color-success: var(--color-success-light);
+  --helper-icon-color-success: var(--color-success);
+  --helper-color-info: var(--color-black);
+  --helper-background-color-info: var(--color-info-light);
+  --helper-icon-color-info: var(--color-info);
+  --input-background-default: var(--color-white);
+  --input-background-disabled: var(--color-black-10);
+  --input-border-color-default: var(--color-black-50);
+  --input-border-color-hover: var(--color-black-90);
+  --input-border-color-focus: var(--color-black-90);
+  --input-border-color-invalid: var(--color-error);
+  --input-border-color-disabled: var(--color-black-10);
+  --input-border-color-success: var(--color-success);
+  --input-color-default: var(--color-black-90);
+  --input-color-disabled: var(--color-black-40);
+  --label-color-default: var(--color-black-90);
+  --label-color-invalid: var(--color-black-90);
+  --placeholder-color: var(--color-black-60);
+}
+.hds-text-input .hds-text-input__input {
+  /* removes the input shadow on iOS */
+  -webkit-appearance: none;
+  background-color: var(--input-background-default);
+  border: var(--border-width) solid var(--input-border-color-default);
+  /* removes the border radius on iOS */
+  border-radius: 0;
+  box-sizing: border-box;
+  color: var(--input-color-default);
+  /*
+  * Normalize.css rules
+  * 1. Change the font styles in all browsers.
+  */
+  font-family: inherit; /* 1 */
+  font-size: 1.125em;
+  height: var(--input-height);
+  line-height: normal;
+  /*
+  * Normalize.css rules
+  * 2. Remove the margin in Firefox and Safari.
+  */
+  margin: 0; /* 2 */
+  padding: 0 var(--spacing-s);
+  width: 100%;
+  will-change: transform, box-shadow;
+}
+.hds-text-input:not([data-hds-textinput-filled]) .hds-text-input__button-clear,
+.hds-text-input__input-clear::-webkit-search-cancel-button {
+  display: none;
+}
+.hds-text-input .hds-text-input__button-clear > * {
+  pointer-events: none;
+}
+/* text-input transitions */
+.hds-text-input .hds-text-input__input:hover {
+  border-color: var(--input-border-color-hover);
+  transition: border-color 85ms ease-out;
+}
+.hds-text-input__input-wrapper:focus-within .hds-text-input__input {
+  border-color: var(--input-border-color-focus);
+  outline: none;
+}
+.hds-text-input.hds-text-input--invalid .hds-text-input__input {
+  border-color: var(--input-border-color-invalid);
+}
+.hds-text-input.hds-text-input--success .hds-text-input__input {
+  border-color: var(--input-border-color-success);
+}
+.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]) {
+  box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);
+  transform: translate3d(0, 0, 0);
+  transition: 85ms ease-out;
+  transition-property: box-shadow, transform;
+}
+.hds-text-input__label {
+  color: var(--label-color-default);
+  display: block;
+  font-size: var(--fontsize-body-m);
+  font-weight: 500;
+  margin-bottom: var(--spacing-3-xs);
+}
+.hds-text-input--invalid .hds-text-input__label {
+  color: var(--label-color-invalid);
+  transition: color 85ms linear;
+}
+/* REQUIRED */
+.hds-text-input__required {
+  display: inline-block;
+  font-size: var(--fontsize-body-xl);
+  line-height: 1;
+  margin-left: var(--spacing-2-xs);
+  transform: translateY(var(--spacing-3-xs));
+}
+/* INPUT */
+.hds-text-input__input-wrapper {
+  display: flex;
+  position: relative;
+}
+.hds-text-input textarea.hds-text-input__input {
+  /*
+  * Normalize.css rules
+  * 1. Change the font styles in all browsers.
+  */
+  font-family: inherit; /* 1 */
+  height: var(--textarea-height);
+  /*
+  * Normalize.css rules
+  * 2. Remove the margin in Firefox and Safari.
+  */
+  margin: 0; /* 2 */
+  min-height: var(--input-height);
+  /*
+   * Normalize.css rule
+   * 1. Remove the default vertical scrollbar in IE 10+.
+   */
+  overflow: auto; /* 1 */
+  padding: var(--spacing-s);
+  resize: vertical;
+}
+.hds-text-input .hds-text-input__input::-ms-reveal {
+  display: none;
+}
+.hds-text-input .hds-text-input__input::-moz-placeholder {
+  color: var(--placeholder-color);
+  opacity: 1;
+}
+.hds-text-input .hds-text-input__input::placeholder {
+  color: var(--placeholder-color);
+  opacity: 1;
+}
+/* HELPER TEXT */
+.hds-text-input__helper-text {
+  color: var(--helper-color-default);
+  display: block;
+  font-size: var(--fontsize-body-m);
+  line-height: var(--lineheight-l);
+  margin-top: var(--spacing-3-xs);
+  white-space: pre-line;
+}
+/* ERROR TEXT */
+.hds-text-input__error-text {
+  background-color: var(--helper-background-color-invalid);
+  border-left: 8px solid var(--color-error);
+  color: var(--helper-color-invalid);
+  display: flex;
+  font-size: var(--fontsize-body-m);
+  line-height: var(--lineheight-l);
+  margin-top: var(--spacing-2-xs);
+  padding: var(--spacing-2-xs);
+  white-space: pre-line;
+}
+.hds-text-input__error-text:not(:last-child) {
+  margin-bottom: var(--spacing-2-xs);
+}
+.hds-text-input__error-text:before {
+  animation: fadeIn 85ms ease-out;
+  background: var(--helper-icon-color-invalid);
+  content: "";
+  display: inline-block;
+  flex-shrink: 0;
+  height: var(--icon-size);
+  margin-right: var(--spacing-2-xs);
+  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  pointer-events: none;
+  width: var(--icon-size);
+}
+.hds-text-input__success-text {
+  background-color: var(--helper-background-color-success);
+  border-left: 8px solid var(--color-success);
+  color: var(--helper-color-success);
+  display: flex;
+  font-size: var(--fontsize-body-m);
+  line-height: var(--lineheight-l);
+  margin-top: var(--spacing-2-xs);
+  padding: var(--spacing-2-xs);
+  position: relative;
+  white-space: pre-wrap;
+}
+.hds-text-input__success-text:not(:last-child) {
+  margin-bottom: var(--spacing-2-xs);
+}
+.hds-text-input__success-text:before {
+  animation: fadeIn 85ms ease-out;
+  background: var(--helper-icon-color-success);
+  content: "";
+  display: inline-block;
+  flex-shrink: 0;
+  height: var(--icon-size);
+  margin-right: var(--spacing-2-xs);
+  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E");
+  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E");
+  pointer-events: none;
+  width: var(--icon-size);
+}
+/* INFO TEXT */
+.hds-text-input__info-text {
+  background-color: var(--helper-background-color-info);
+  border-left: 8px solid var(--color-info);
+  color: var(--helper-color-info);
+  display: flex;
+  font-size: var(--fontsize-body-m);
+  line-height: var(--lineheight-l);
+  margin-top: var(--spacing-2-xs);
+  padding: var(--spacing-2-xs);
+  position: relative;
+}
+.hds-text-input__info-text:not(:last-child) {
+  margin-bottom: var(--spacing-2-xs);
+}
+.hds-text-input__info-text:before {
+  animation: fadeIn 85ms ease-out;
+  background: var(--helper-icon-color-info);
+  content: "";
+  display: inline-block;
+  flex-shrink: 0;
+  height: var(--icon-size);
+  margin-right: var(--spacing-2-xs);
+  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E");
+  mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E");
+  pointer-events: none;
+  width: var(--icon-size);
+}
+/* DISABLED */
+.hds-text-input .hds-text-input__input[disabled] {
+  background-color: var(--input-background-disabled);
+  border-color: var(--input-border-color-disabled);
+  color: var(--input-color-disabled);
+  cursor: not-allowed;
+}
+/* READ-ONLY */
+.hds-text-input .hds-text-input__input[readonly] {
+  background-color: transparent;
+  border: 0;
+  color: var(--input-color-default);
+  outline-offset: var(--outline-offset-readonly);
+  padding: 0;
+  /* fixes faded text color on Safari */
+  -webkit-text-fill-color: var(--input-color-default);
+  transform: translate3d(0, 0, 0);
+  transition: 85ms ease-out;
+  transition-property: outline, transform;
+}
+.hds-text-input__input-wrapper:focus-within input.hds-text-input__input[readonly] {
+  /* the following calculation and margin is needed to keep the outline not to overlap
+  the other content vertically and make it look nice */
+  height: calc(var(--input-height) - 2 * var(--outline-offset-readonly));
+  margin: var(--outline-offset-readonly) 0;
+  outline: var(--color-focus-outline) solid var(--outline-width);
+}
+.hds-text-input__input-wrapper:focus-within textarea.hds-text-input__input[readonly] {
+  outline: var(--color-focus-outline) solid var(--outline-width);
+}
+/* BUTTON */
+.hds-text-input__buttons {
+  align-items: center;
+  bottom: 0;
+  display: flex;
+  font-size: 1rem;
+  justify-content: center;
+  margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2);
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.hds-text-input__button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  background: none;
+  border: none;
+  color: var(--icon-color);
+  cursor: pointer;
+  display: flex;
+  font: inherit;
+  outline: none;
+  padding: var(--spacing-xs) calc(var(--spacing-xs) / 2);
+}
+.hds-text-input__button:focus {
+  outline: var(--outline-width) solid var(--color-focus-outline);
+}

package/lib/components/text-input/text-input.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/animations.css","../../../src/components/text-input/text-input.css","../../../src/components/text-input/text-input.css%23sass"],"names":[],"mappings":"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","file":"text-input.css","sourcesContent":["@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n","@use '../../utils/animations.css';\n\n.hds-text-input {\n  --border-width: 2px;\n  --outline-width: 3px;\n  --outline-offset-readonly: 4px;\n  --input-height: 56px;\n  --textarea-height: 149px;\n  --icon-size: var(--spacing-m);\n  --icon-color: var(--color-black);\n  --helper-color-default: var(--color-black-60);\n  --helper-color-invalid: var(--color-black);\n  --helper-background-color-invalid: var(--color-error-light);\n  --helper-icon-color-invalid: var(--color-error);\n  --helper-color-success: var(--color-black);\n  --helper-background-color-success: var(--color-success-light);\n  --helper-icon-color-success: var(--color-success);\n  --helper-color-info: var(--color-black);\n  --helper-background-color-info: var(--color-info-light);\n  --helper-icon-color-info: var(--color-info);\n  --input-background-default: var(--color-white);\n  --input-background-disabled: var(--color-black-10);\n  --input-border-color-default: var(--color-black-50);\n  --input-border-color-hover: var(--color-black-90);\n  --input-border-color-focus: var(--color-black-90);\n  --input-border-color-invalid: var(--color-error);\n  --input-border-color-disabled: var(--color-black-10);\n  --input-border-color-success: var(--color-success);\n  --input-color-default: var(--color-black-90);\n  --input-color-disabled: var(--color-black-40);\n  --label-color-default: var(--color-black-90);\n  --label-color-invalid: var(--color-black-90);\n  --placeholder-color: var(--color-black-60);\n}\n\n.hds-text-input .hds-text-input__input {\n  /* removes the input shadow on iOS */\n  -webkit-appearance: none;\n  background-color: var(--input-background-default);\n  border: var(--border-width) solid var(--input-border-color-default);\n\n  /* removes the border radius on iOS */\n  border-radius: 0;\n  box-sizing: border-box;\n  color: var(--input-color-default);\n\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  */\n  font-family: inherit; /* 1 */\n  font-size: 1.125em;\n  height: var(--input-height);\n  line-height: normal;\n\n  /*\n  * Normalize.css rules\n  * 2. Remove the margin in Firefox and Safari.\n  */\n  margin: 0; /* 2 */\n  padding: 0 var(--spacing-s);\n  width: 100%;\n  will-change: transform, box-shadow;\n}\n\n.hds-text-input:not([data-hds-textinput-filled]) .hds-text-input__button-clear,\n.hds-text-input__input-clear::-webkit-search-cancel-button {\n  display: none;\n}\n\n.hds-text-input .hds-text-input__button-clear > * {\n  pointer-events: none;\n}\n\n/* text-input transitions */\n.hds-text-input .hds-text-input__input:hover {\n  border-color: var(--input-border-color-hover);\n  transition: border-color 85ms ease-out;\n}\n\n.hds-text-input__input-wrapper:focus-within .hds-text-input__input {\n  border-color: var(--input-border-color-focus);\n  outline: none;\n}\n\n.hds-text-input.hds-text-input--invalid .hds-text-input__input {\n  border-color: var(--input-border-color-invalid);\n}\n\n.hds-text-input.hds-text-input--success .hds-text-input__input {\n  border-color: var(--input-border-color-success);\n}\n\n.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]) {\n  box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n  transform: translate3d(0, 0, 0);\n  transition: 85ms ease-out;\n  transition-property: box-shadow, transform;\n}\n\n.hds-text-input__label {\n  color: var(--label-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  font-weight: 500;\n  margin-bottom: var(--spacing-3-xs);\n}\n\n.hds-text-input--invalid .hds-text-input__label {\n  color: var(--label-color-invalid);\n  transition: color 85ms linear;\n}\n\n/* REQUIRED */\n\n.hds-text-input__required {\n  display: inline-block;\n  font-size: var(--fontsize-body-xl);\n  line-height: 1;\n  margin-left: var(--spacing-2-xs);\n  transform: translateY(var(--spacing-3-xs));\n}\n\n/* INPUT */\n\n.hds-text-input__input-wrapper {\n  display: flex;\n  position: relative;\n}\n\n.hds-text-input textarea.hds-text-input__input {\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  */\n  font-family: inherit; /* 1 */\n  height: var(--textarea-height);\n\n  /*\n  * Normalize.css rules\n  * 2. Remove the margin in Firefox and Safari.\n  */\n  margin: 0; /* 2 */\n  min-height: var(--input-height);\n\n  /*\n   * Normalize.css rule\n   * 1. Remove the default vertical scrollbar in IE 10+.\n   */\n  overflow: auto; /* 1 */\n  padding: var(--spacing-s);\n  resize: vertical;\n}\n\n.hds-text-input .hds-text-input__input::-ms-reveal {\n  display: none;\n}\n\n.hds-text-input .hds-text-input__input::placeholder {\n  color: var(--placeholder-color);\n  opacity: 1;\n}\n\n/* HELPER TEXT */\n\n.hds-text-input__helper-text {\n  color: var(--helper-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-3-xs);\n  white-space: pre-line;\n}\n\n/* ERROR TEXT */\n.hds-text-input__error-text {\n  background-color: var(--helper-background-color-invalid);\n  border-left: 8px solid var(--color-error);\n  color: var(--helper-color-invalid);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  white-space: pre-line;\n}\n\n.hds-text-input__error-text:not(:last-child) {\n  margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__error-text:before {\n  animation: fadeIn 85ms ease-out;\n  background: var(--helper-icon-color-invalid);\n  content: '';\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n.hds-text-input__success-text {\n  background-color: var(--helper-background-color-success);\n  border-left: 8px solid var(--color-success);\n  color: var(--helper-color-success);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  position: relative;\n  white-space: pre-wrap;\n}\n\n.hds-text-input__success-text:not(:last-child) {\n  margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__success-text:before {\n  animation: fadeIn 85ms ease-out;\n  background: var(--helper-icon-color-success);\n  content: '';\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n/* INFO TEXT */\n.hds-text-input__info-text {\n  background-color: var(--helper-background-color-info);\n  border-left: 8px solid var(--color-info);\n  color: var(--helper-color-info);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  position: relative;\n}\n\n.hds-text-input__info-text:not(:last-child) {\n  margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__info-text:before {\n  animation: fadeIn 85ms ease-out;\n  background: var(--helper-icon-color-info);\n  content: '';\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n/* DISABLED */\n\n.hds-text-input .hds-text-input__input[disabled] {\n  background-color: var(--input-background-disabled);\n  border-color: var(--input-border-color-disabled);\n  color: var(--input-color-disabled);\n  cursor: not-allowed;\n}\n\n/* READ-ONLY */\n\n.hds-text-input .hds-text-input__input[readonly] {\n  background-color: transparent;\n  border: 0;\n  color: var(--input-color-default);\n  outline-offset: var(--outline-offset-readonly);\n  padding: 0;\n\n  /* fixes faded text color on Safari */\n  -webkit-text-fill-color: var(--input-color-default);\n  transform: translate3d(0, 0, 0);\n  transition: 85ms ease-out;\n  transition-property: outline, transform;\n}\n\n.hds-text-input__input-wrapper:focus-within input.hds-text-input__input[readonly] {\n  /* the following calculation and margin is needed to keep the outline not to overlap\n  the other content vertically and make it look nice */\n  height: calc(var(--input-height) - 2 * var(--outline-offset-readonly));\n  margin: var(--outline-offset-readonly) 0;\n  outline: var(--color-focus-outline) solid var(--outline-width);\n}\n\n.hds-text-input__input-wrapper:focus-within textarea.hds-text-input__input[readonly] {\n  outline: var(--color-focus-outline) solid var(--outline-width);\n}\n\n/* BUTTON */\n\n.hds-text-input__buttons {\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  font-size: 1rem;\n  justify-content: center;\n  margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2);\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hds-text-input__button {\n  appearance: none;\n  background: none;\n  border: none;\n  color: var(--icon-color);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  outline: none;\n  padding: var(--spacing-xs) calc(var(--spacing-xs) / 2);\n}\n\n.hds-text-input__button:focus {\n  outline: var(--outline-width) solid var(--color-focus-outline);\n}\n","@use '../../utils/animations.css';\n\n.hds-text-input {\n  --border-width: 2px;\n  --outline-width: 3px;\n  --outline-offset-readonly: 4px;\n  --input-height: 56px;\n  --textarea-height: 149px;\n  --icon-size: var(--spacing-m);\n  --icon-color: var(--color-black);\n  --helper-color-default: var(--color-black-60);\n  --helper-color-invalid: var(--color-black);\n  --helper-background-color-invalid: var(--color-error-light);\n  --helper-icon-color-invalid: var(--color-error);\n  --helper-color-success: var(--color-black);\n  --helper-background-color-success: var(--color-success-light);\n  --helper-icon-color-success: var(--color-success);\n  --helper-color-info: var(--color-black);\n  --helper-background-color-info: var(--color-info-light);\n  --helper-icon-color-info: var(--color-info);\n  --input-background-default: var(--color-white);\n  --input-background-disabled: var(--color-black-10);\n  --input-border-color-default: var(--color-black-50);\n  --input-border-color-hover: var(--color-black-90);\n  --input-border-color-focus: var(--color-black-90);\n  --input-border-color-invalid: var(--color-error);\n  --input-border-color-disabled: var(--color-black-10);\n  --input-border-color-success: var(--color-success);\n  --input-color-default: var(--color-black-90);\n  --input-color-disabled: var(--color-black-40);\n  --label-color-default: var(--color-black-90);\n  --label-color-invalid: var(--color-black-90);\n  --placeholder-color: var(--color-black-60);\n}\n\n.hds-text-input .hds-text-input__input {\n  /* removes the input shadow on iOS */\n  -webkit-appearance: none;\n  background-color: var(--input-background-default);\n  border: var(--border-width) solid var(--input-border-color-default);\n\n  /* removes the border radius on iOS */\n  border-radius: 0;\n  box-sizing: border-box;\n  color: var(--input-color-default);\n\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  */\n  font-family: inherit; /* 1 */\n  font-size: 1.125em;\n  height: var(--input-height);\n  line-height: normal;\n\n  /*\n  * Normalize.css rules\n  * 2. Remove the margin in Firefox and Safari.\n  */\n  margin: 0; /* 2 */\n  padding: 0 var(--spacing-s);\n  width: 100%;\n  will-change: transform, box-shadow;\n}\n\n.hds-text-input:not([data-hds-textinput-filled]) .hds-text-input__button-clear,\n.hds-text-input__input-clear::-webkit-search-cancel-button {\n  display: none;\n}\n\n.hds-text-input .hds-text-input__button-clear > * {\n  pointer-events: none;\n}\n\n/* text-input transitions */\n.hds-text-input .hds-text-input__input:hover {\n  border-color: var(--input-border-color-hover);\n  transition: border-color 85ms ease-out;\n}\n\n.hds-text-input__input-wrapper:focus-within .hds-text-input__input {\n  border-color: var(--input-border-color-focus);\n  outline: none;\n}\n\n.hds-text-input.hds-text-input--invalid .hds-text-input__input {\n  border-color: var(--input-border-color-invalid);\n}\n\n.hds-text-input.hds-text-input--success .hds-text-input__input {\n  border-color: var(--input-border-color-success);\n}\n\n.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]) {\n  box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n  transform: translate3d(0, 0, 0);\n  transition: 85ms ease-out;\n  transition-property: box-shadow, transform;\n}\n\n.hds-text-input__label {\n  color: var(--label-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  font-weight: 500;\n  margin-bottom: var(--spacing-3-xs);\n}\n\n.hds-text-input--invalid .hds-text-input__label {\n  color: var(--label-color-invalid);\n  transition: color 85ms linear;\n}\n\n/* REQUIRED */\n\n.hds-text-input__required {\n  display: inline-block;\n  font-size: var(--fontsize-body-xl);\n  line-height: 1;\n  margin-left: var(--spacing-2-xs);\n  transform: translateY(var(--spacing-3-xs));\n}\n\n/* INPUT */\n\n.hds-text-input__input-wrapper {\n  display: flex;\n  position: relative;\n}\n\n.hds-text-input textarea.hds-text-input__input {\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  */\n  font-family: inherit; /* 1 */\n  height: var(--textarea-height);\n\n  /*\n  * Normalize.css rules\n  * 2. Remove the margin in Firefox and Safari.\n  */\n  margin: 0; /* 2 */\n  min-height: var(--input-height);\n\n  /*\n   * Normalize.css rule\n   * 1. Remove the default vertical scrollbar in IE 10+.\n   */\n  overflow: auto; /* 1 */\n  padding: var(--spacing-s);\n  resize: vertical;\n}\n\n.hds-text-input .hds-text-input__input::-ms-reveal {\n  display: none;\n}\n\n.hds-text-input .hds-text-input__input::placeholder {\n  color: var(--placeholder-color);\n  opacity: 1;\n}\n\n/* HELPER TEXT */\n\n.hds-text-input__helper-text {\n  color: var(--helper-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-3-xs);\n  white-space: pre-line;\n}\n\n/* ERROR TEXT */\n.hds-text-input__error-text {\n  background-color: var(--helper-background-color-invalid);\n  border-left: 8px solid var(--color-error);\n  color: var(--helper-color-invalid);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  white-space: pre-line;\n}\n\n.hds-text-input__error-text:not(:last-child) {\n  margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__error-text:before {\n  animation: fadeIn 85ms ease-out;\n  background: var(--helper-icon-color-invalid);\n  content: '';\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n.hds-text-input__success-text {\n  background-color: var(--helper-background-color-success);\n  border-left: 8px solid var(--color-success);\n  color: var(--helper-color-success);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  position: relative;\n  white-space: pre-wrap;\n}\n\n.hds-text-input__success-text:not(:last-child) {\n  margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__success-text:before {\n  animation: fadeIn 85ms ease-out;\n  background: var(--helper-icon-color-success);\n  content: '';\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n/* INFO TEXT */\n.hds-text-input__info-text {\n  background-color: var(--helper-background-color-info);\n  border-left: 8px solid var(--color-info);\n  color: var(--helper-color-info);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  position: relative;\n}\n\n.hds-text-input__info-text:not(:last-child) {\n  margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__info-text:before {\n  animation: fadeIn 85ms ease-out;\n  background: var(--helper-icon-color-info);\n  content: '';\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n/* DISABLED */\n\n.hds-text-input .hds-text-input__input[disabled] {\n  background-color: var(--input-background-disabled);\n  border-color: var(--input-border-color-disabled);\n  color: var(--input-color-disabled);\n  cursor: not-allowed;\n}\n\n/* READ-ONLY */\n\n.hds-text-input .hds-text-input__input[readonly] {\n  background-color: transparent;\n  border: 0;\n  color: var(--input-color-default);\n  outline-offset: var(--outline-offset-readonly);\n  padding: 0;\n\n  /* fixes faded text color on Safari */\n  -webkit-text-fill-color: var(--input-color-default);\n  transform: translate3d(0, 0, 0);\n  transition: 85ms ease-out;\n  transition-property: outline, transform;\n}\n\n.hds-text-input__input-wrapper:focus-within input.hds-text-input__input[readonly] {\n  /* the following calculation and margin is needed to keep the outline not to overlap\n  the other content vertically and make it look nice */\n  height: calc(var(--input-height) - 2 * var(--outline-offset-readonly));\n  margin: var(--outline-offset-readonly) 0;\n  outline: var(--color-focus-outline) solid var(--outline-width);\n}\n\n.hds-text-input__input-wrapper:focus-within textarea.hds-text-input__input[readonly] {\n  outline: var(--color-focus-outline) solid var(--outline-width);\n}\n\n/* BUTTON */\n\n.hds-text-input__buttons {\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  font-size: 1rem;\n  justify-content: center;\n  margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2);\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hds-text-input__button {\n  appearance: none;\n  background: none;\n  border: none;\n  color: var(--icon-color);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  outline: none;\n  padding: var(--spacing-xs) calc(var(--spacing-xs) / 2);\n}\n\n.hds-text-input__button:focus {\n  outline: var(--outline-width) solid var(--color-focus-outline);\n}\n"]}

package/lib/components/text-input/text-input.min.css

@@ -0,0 +1 @@
+@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.hds-text-input{--border-width:2px;--outline-width:3px;--outline-offset-readonly:4px;--input-height:56px;--textarea-height:149px;--icon-size:var(--spacing-m);--icon-color:var(--color-black);--helper-color-default:var(--color-black-60);--helper-color-invalid:var(--color-black);--helper-background-color-invalid:var(--color-error-light);--helper-icon-color-invalid:var(--color-error);--helper-color-success:var(--color-black);--helper-background-color-success:var(--color-success-light);--helper-icon-color-success:var(--color-success);--helper-color-info:var(--color-black);--helper-background-color-info:var(--color-info-light);--helper-icon-color-info:var(--color-info);--input-background-default:var(--color-white);--input-background-disabled:var(--color-black-10);--input-border-color-default:var(--color-black-50);--input-border-color-hover:var(--color-black-90);--input-border-color-focus:var(--color-black-90);--input-border-color-invalid:var(--color-error);--input-border-color-disabled:var(--color-black-10);--input-border-color-success:var(--color-success);--input-color-default:var(--color-black-90);--input-color-disabled:var(--color-black-40);--label-color-default:var(--color-black-90);--label-color-invalid:var(--color-black-90);--placeholder-color:var(--color-black-60)}.hds-text-input .hds-text-input__input{-webkit-appearance:none;background-color:var(--input-background-default);border:var(--border-width) solid var(--input-border-color-default);border-radius:0;box-sizing:border-box;color:var(--input-color-default);font-family:inherit;font-size:1.125em;height:var(--input-height);line-height:normal;margin:0;padding:0 var(--spacing-s);width:100%;will-change:transform,box-shadow}.hds-text-input:not([data-hds-textinput-filled]) .hds-text-input__button-clear,.hds-text-input__input-clear::-webkit-search-cancel-button{display:none}.hds-text-input .hds-text-input__button-clear>*{pointer-events:none}.hds-text-input .hds-text-input__input:hover{border-color:var(--input-border-color-hover);transition:border-color 85ms ease-out}.hds-text-input__input-wrapper:focus-within .hds-text-input__input{border-color:var(--input-border-color-focus);outline:none}.hds-text-input.hds-text-input--invalid .hds-text-input__input{border-color:var(--input-border-color-invalid)}.hds-text-input.hds-text-input--success .hds-text-input__input{border-color:var(--input-border-color-success)}.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]){box-shadow:0 0 0 var(--outline-width) var(--color-focus-outline);transform:translateZ(0);transition:85ms ease-out;transition-property:box-shadow,transform}.hds-text-input__label{color:var(--label-color-default);display:block;font-size:var(--fontsize-body-m);font-weight:500;margin-bottom:var(--spacing-3-xs)}.hds-text-input--invalid .hds-text-input__label{color:var(--label-color-invalid);transition:color 85ms linear}.hds-text-input__required{display:inline-block;font-size:var(--fontsize-body-xl);line-height:1;margin-left:var(--spacing-2-xs);transform:translateY(var(--spacing-3-xs))}.hds-text-input__input-wrapper{display:flex;position:relative}.hds-text-input textarea.hds-text-input__input{font-family:inherit;height:var(--textarea-height);margin:0;min-height:var(--input-height);overflow:auto;padding:var(--spacing-s);resize:vertical}.hds-text-input .hds-text-input__input::-ms-reveal{display:none}.hds-text-input .hds-text-input__input::-moz-placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input .hds-text-input__input::placeholder{color:var(--placeholder-color);opacity:1}.hds-text-input__helper-text{color:var(--helper-color-default);display:block;margin-top:var(--spacing-3-xs)}.hds-text-input__error-text,.hds-text-input__helper-text{font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);white-space:pre-line}.hds-text-input__error-text{background-color:var(--helper-background-color-invalid);border-left:8px solid var(--color-error);color:var(--helper-color-invalid);display:flex;margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs)}.hds-text-input__error-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__error-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-icon-color-invalid);content:"";display:inline-block;flex-shrink:0;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.456c.349-.586 1.223-.607 1.61-.063l.04.063 9.052 15.21c.343.577-.072 1.285-.753 1.332l-.072.002H2.948c-.7 0-1.15-.689-.858-1.273l.033-.06 9.052-15.21zM13 16v2h-2v-2h2zm0-7.5v6h-2v-6h2z' fill='currentColor'/%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-text-input__success-text{background-color:var(--helper-background-color-success);border-left:8px solid var(--color-success);color:var(--helper-color-success);display:flex;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative;white-space:pre-wrap}.hds-text-input__success-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__success-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-icon-color-success);content:"";display:inline-block;flex-shrink:0;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 100 18 9 9 0 000-18zm4.5 5L18 9.5 10.5 17 6 12.5 7.5 11l3 3 6-6z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-text-input__info-text{background-color:var(--helper-background-color-info);border-left:8px solid var(--color-info);color:var(--helper-color-info);display:flex;font-size:var(--fontsize-body-m);line-height:var(--lineheight-l);margin-top:var(--spacing-2-xs);padding:var(--spacing-2-xs);position:relative}.hds-text-input__info-text:not(:last-child){margin-bottom:var(--spacing-2-xs)}.hds-text-input__info-text:before{animation:fadeIn 85ms ease-out;background:var(--helper-icon-color-info);content:"";display:inline-block;flex-shrink:0;height:var(--icon-size);margin-right:var(--spacing-2-xs);-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M0 0h24v24H0z'/%3E%3Cpath fill='currentColor' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none;width:var(--icon-size)}.hds-text-input .hds-text-input__input[disabled]{background-color:var(--input-background-disabled);border-color:var(--input-border-color-disabled);color:var(--input-color-disabled);cursor:not-allowed}.hds-text-input .hds-text-input__input[readonly]{background-color:transparent;border:0;color:var(--input-color-default);outline-offset:var(--outline-offset-readonly);padding:0;-webkit-text-fill-color:var(--input-color-default);transform:translateZ(0);transition:85ms ease-out;transition-property:outline,transform}.hds-text-input__input-wrapper:focus-within input.hds-text-input__input[readonly]{height:calc(var(--input-height) - 2 * var(--outline-offset-readonly));margin:var(--outline-offset-readonly) 0;outline:var(--color-focus-outline) solid var(--outline-width)}.hds-text-input__input-wrapper:focus-within textarea.hds-text-input__input[readonly]{outline:var(--color-focus-outline) solid var(--outline-width)}.hds-text-input__buttons{align-items:center;bottom:0;display:flex;font-size:1rem;justify-content:center;margin-right:calc(var(--spacing-s) - var(--spacing-xs) / 2);position:absolute;right:0;top:0}.hds-text-input__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;color:var(--icon-color);cursor:pointer;display:flex;font:inherit;outline:none;padding:var(--spacing-xs) calc(var(--spacing-xs) / 2)}.hds-text-input__button:focus{outline:var(--outline-width) solid var(--color-focus-outline)}

package/lib/components/text-input/text-input.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/animations.css","../../../src/components/text-input/text-input.css","../../../src/components/text-input/text-input.css%23sass"],"names":[],"mappings":"AAAA,kBACE,GCCF,SACE,CDEA,GCAA,SACA,CACF,CCLA,gBACE,kBAAA,CACA,mBAAA,CACA,6BAAA,CACA,mBAAA,CACA,uBAAA,CACA,4BAAA,CACA,+BAAA,CACA,4CAAA,CACA,yCAAA,CACA,0DAAA,CACA,8CAAA,CACA,yCAAA,CACA,4DAAA,CACA,gDAAA,CACA,sCAAA,CACA,sDAAA,CACA,0CAAA,CACA,6CAAA,CACA,iDAAA,CACA,kDAAA,CACA,gDAAA,CACA,gDAAA,CACA,+CAAA,CACA,mDAAA,CDOF,iDAAA,CCLE,2CAAA,CDOF,4CAAA,CCLE,2CAAA,CACA,2CAAA,CACA,yCDOF,CCJA,uCAEE,uBAAA,CACA,gDAAA,CACA,kEAAA,CAGA,eAAA,CACA,qBAAA,CACA,gCAAA,CAMA,mBAAA,CACA,iBAAA,CACA,0BAAA,CACA,kBAAA,CAMA,QAAA,CDIF,0BAAA,CCFE,UAAA,CDIF,gCACA,CCDA,0IDKA,YACA,CCDA,gDDIA,mBACA,CCAA,6CACE,4CAAA,CDIF,qCACA,CCDA,mEACE,4CAAA,CDIF,YACA,CCDA,+DDIA,8CACA,CCDA,+DDIA,8CACA,CCDA,mFACE,gEAAA,CDIF,uBAAA,CCFE,wBAAA,CDIF,wCACA,CCDA,uBACE,gCAAA,CACA,aAAA,CDIF,gCAAA,CCFE,eAAA,CDIF,iCACA,CCDA,gDACE,gCAAA,CDIF,4BACA,CCCA,0BACE,oBAAA,CACA,iCAAA,CACA,aAAA,CDGF,+BAAA,CCDE,yCDGF,CCEA,+BACE,YAAA,CDEF,iBACA,CCCA,+CAKE,mBAAA,CACA,6BAAA,CAMA,QAAA,CACA,8BAAA,CAMA,aAAA,CACA,wBAAA,CACA,eDAF,CCGA,mDDAA,YACA,CCGA,yDDAA,8BAAA,CCEE,SDAF,CCFA,oDDAA,8BAAA,CCEE,SDAF,CCKA,6BACE,iCAAA,CDDF,aAAA,CCKE,8BDAF,CCKA,yDAPE,gCAAA,CACA,+BAAA,CAEA,oBDYF,CCRA,4BDDA,uDCEE,CDDF,wCAAA,CCGE,iCAAA,CACA,YAAA,CAGA,8BAAA,CACA,2BDAF,CCIA,6CACE,iCDDF,CCIA,mCACE,8BAAA,CDDF,2CAAA,CCGE,UAAA,CACA,oBAAA,CACA,aAAA,CACA,uBAAA,CACA,gCAAA,CACA,mZAAA,CACA,2YAAA,CACA,mBAAA,CACA,sBDDF,CCIA,8BACE,uDAAA,CDDF,0CAAA,CCGE,iCAAA,CACA,YAAA,CACA,gCAAA,CACA,+BAAA,CACA,8BAAA,CACA,2BAAA,CACA,iBAAA,CACA,oBDDF,CCIA,+CACE,iCDDF,CCIA,qCACE,8BAAA,CDDF,2CAAA,CCGE,UAAA,CACA,oBAAA,CACA,aAAA,CACA,uBAAA,CACA,gCAAA,CACA,iUAAA,CACA,yTAAA,CACA,mBAAA,CACA,sBDDF,CCKA,2BDDA,oDCEE,CDDF,uCAAA,CCGE,8BAAA,CACA,YAAA,CACA,gCAAA,CACA,+BAAA,CACA,8BAAA,CACA,2BAAA,CACA,iBDDF,CCIA,4CACE,iCDDF,CCIA,kCACE,8BAAA,CDDF,wCAAA,CCGE,UAAA,CACA,oBAAA,CACA,aAAA,CACA,uBAAA,CACA,gCAAA,CACA,oTAAA,CACA,4SAAA,CACA,mBAAA,CACA,sBDDF,CCMA,iDDFA,iDCGE,CACA,+CAAA,CDFF,iCAAA,CCIE,kBDFF,CCOA,iDACE,4BAAA,CDHF,QAAA,CCKE,gCAAA,CDHF,6CAAA,CCKE,SAAA,CAGA,kDAAA,CACA,uBAAA,CACA,wBAAA,CACA,qCDJF,CCOA,kFDFA,qEAAA,CCME,uCAAA,CDJF,6DACA,CCOA,qFACE,6DDJF,CCSA,yBACE,kBAAA,CDLF,QAAA,CCOE,YAAA,CDLF,cCME,CACA,sBAAA,CDLF,2DAAA,CCOE,iBAAA,CACA,OAAA,CACA,KDLF,CCQA,wBACE,uBAAA,CAAA,oBAAA,CAAA,eAAA,CACA,eAAA,CACA,WAAA,CDLF,uBAAA,CCOE,cAAA,CDLF,YAAA,CCOE,YAAA,CACA,YAAA,CACA,qDDLF,CCQA,8BACE,6DDLF","file":"text-input.min.css","sourcesContent":["@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n","@use '../../utils/animations.css';\n\n.hds-text-input {\n  --border-width: 2px;\n  --outline-width: 3px;\n  --outline-offset-readonly: 4px;\n  --input-height: 56px;\n  --textarea-height: 149px;\n  --icon-size: var(--spacing-m);\n  --icon-color: var(--color-black);\n  --helper-color-default: var(--color-black-60);\n  --helper-color-invalid: var(--color-black);\n  --helper-background-color-invalid: var(--color-error-light);\n  --helper-icon-color-invalid: var(--color-error);\n  --helper-color-success: var(--color-black);\n  --helper-background-color-success: var(--color-success-light);\n  --helper-icon-color-success: var(--color-success);\n  --helper-color-info: var(--color-black);\n  --helper-background-color-info: var(--color-info-light);\n  --helper-icon-color-info: var(--color-info);\n  --input-background-default: var(--color-white);\n  --input-background-disabled: var(--color-black-10);\n  --input-border-color-default: var(--color-black-50);\n  --input-border-color-hover: var(--color-black-90);\n  --input-border-color-focus: var(--color-black-90);\n  --input-border-color-invalid: var(--color-error);\n  --input-border-color-disabled: var(--color-black-10);\n  --input-border-color-success: var(--color-success);\n  --input-color-default: var(--color-black-90);\n  --input-color-disabled: var(--color-black-40);\n  --label-color-default: var(--color-black-90);\n  --label-color-invalid: var(--color-black-90);\n  --placeholder-color: var(--color-black-60);\n}\n\n.hds-text-input .hds-text-input__input {\n  /* removes the input shadow on iOS */\n  -webkit-appearance: none;\n  background-color: var(--input-background-default);\n  border: var(--border-width) solid var(--input-border-color-default);\n\n  /* removes the border radius on iOS */\n  border-radius: 0;\n  box-sizing: border-box;\n  color: var(--input-color-default);\n\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  */\n  font-family: inherit; /* 1 */\n  font-size: 1.125em;\n  height: var(--input-height);\n  line-height: normal;\n\n  /*\n  * Normalize.css rules\n  * 2. Remove the margin in Firefox and Safari.\n  */\n  margin: 0; /* 2 */\n  padding: 0 var(--spacing-s);\n  width: 100%;\n  will-change: transform, box-shadow;\n}\n\n.hds-text-input:not([data-hds-textinput-filled]) .hds-text-input__button-clear,\n.hds-text-input__input-clear::-webkit-search-cancel-button {\n  display: none;\n}\n\n.hds-text-input .hds-text-input__button-clear > * {\n  pointer-events: none;\n}\n\n/* text-input transitions */\n.hds-text-input .hds-text-input__input:hover {\n  border-color: var(--input-border-color-hover);\n  transition: border-color 85ms ease-out;\n}\n\n.hds-text-input__input-wrapper:focus-within .hds-text-input__input {\n  border-color: var(--input-border-color-focus);\n  outline: none;\n}\n\n.hds-text-input.hds-text-input--invalid .hds-text-input__input {\n  border-color: var(--input-border-color-invalid);\n}\n\n.hds-text-input.hds-text-input--success .hds-text-input__input {\n  border-color: var(--input-border-color-success);\n}\n\n.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]) {\n  box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n  transform: translate3d(0, 0, 0);\n  transition: 85ms ease-out;\n  transition-property: box-shadow, transform;\n}\n\n.hds-text-input__label {\n  color: var(--label-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  font-weight: 500;\n  margin-bottom: var(--spacing-3-xs);\n}\n\n.hds-text-input--invalid .hds-text-input__label {\n  color: var(--label-color-invalid);\n  transition: color 85ms linear;\n}\n\n/* REQUIRED */\n\n.hds-text-input__required {\n  display: inline-block;\n  font-size: var(--fontsize-body-xl);\n  line-height: 1;\n  margin-left: var(--spacing-2-xs);\n  transform: translateY(var(--spacing-3-xs));\n}\n\n/* INPUT */\n\n.hds-text-input__input-wrapper {\n  display: flex;\n  position: relative;\n}\n\n.hds-text-input textarea.hds-text-input__input {\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  */\n  font-family: inherit; /* 1 */\n  height: var(--textarea-height);\n\n  /*\n  * Normalize.css rules\n  * 2. Remove the margin in Firefox and Safari.\n  */\n  margin: 0; /* 2 */\n  min-height: var(--input-height);\n\n  /*\n   * Normalize.css rule\n   * 1. Remove the default vertical scrollbar in IE 10+.\n   */\n  overflow: auto; /* 1 */\n  padding: var(--spacing-s);\n  resize: vertical;\n}\n\n.hds-text-input .hds-text-input__input::-ms-reveal {\n  display: none;\n}\n\n.hds-text-input .hds-text-input__input::placeholder {\n  color: var(--placeholder-color);\n  opacity: 1;\n}\n\n/* HELPER TEXT */\n\n.hds-text-input__helper-text {\n  color: var(--helper-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-3-xs);\n  white-space: pre-line;\n}\n\n/* ERROR TEXT */\n.hds-text-input__error-text {\n  background-color: var(--helper-background-color-invalid);\n  border-left: 8px solid var(--color-error);\n  color: var(--helper-color-invalid);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  white-space: pre-line;\n}\n\n.hds-text-input__error-text:not(:last-child) {\n  margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__error-text:before {\n  animation: fadeIn 85ms ease-out;\n  background: var(--helper-icon-color-invalid);\n  content: '';\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n.hds-text-input__success-text {\n  background-color: var(--helper-background-color-success);\n  border-left: 8px solid var(--color-success);\n  color: var(--helper-color-success);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  position: relative;\n  white-space: pre-wrap;\n}\n\n.hds-text-input__success-text:not(:last-child) {\n  margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__success-text:before {\n  animation: fadeIn 85ms ease-out;\n  background: var(--helper-icon-color-success);\n  content: '';\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n/* INFO TEXT */\n.hds-text-input__info-text {\n  background-color: var(--helper-background-color-info);\n  border-left: 8px solid var(--color-info);\n  color: var(--helper-color-info);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  position: relative;\n}\n\n.hds-text-input__info-text:not(:last-child) {\n  margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__info-text:before {\n  animation: fadeIn 85ms ease-out;\n  background: var(--helper-icon-color-info);\n  content: '';\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n/* DISABLED */\n\n.hds-text-input .hds-text-input__input[disabled] {\n  background-color: var(--input-background-disabled);\n  border-color: var(--input-border-color-disabled);\n  color: var(--input-color-disabled);\n  cursor: not-allowed;\n}\n\n/* READ-ONLY */\n\n.hds-text-input .hds-text-input__input[readonly] {\n  background-color: transparent;\n  border: 0;\n  color: var(--input-color-default);\n  outline-offset: var(--outline-offset-readonly);\n  padding: 0;\n\n  /* fixes faded text color on Safari */\n  -webkit-text-fill-color: var(--input-color-default);\n  transform: translate3d(0, 0, 0);\n  transition: 85ms ease-out;\n  transition-property: outline, transform;\n}\n\n.hds-text-input__input-wrapper:focus-within input.hds-text-input__input[readonly] {\n  /* the following calculation and margin is needed to keep the outline not to overlap\n  the other content vertically and make it look nice */\n  height: calc(var(--input-height) - 2 * var(--outline-offset-readonly));\n  margin: var(--outline-offset-readonly) 0;\n  outline: var(--color-focus-outline) solid var(--outline-width);\n}\n\n.hds-text-input__input-wrapper:focus-within textarea.hds-text-input__input[readonly] {\n  outline: var(--color-focus-outline) solid var(--outline-width);\n}\n\n/* BUTTON */\n\n.hds-text-input__buttons {\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  font-size: 1rem;\n  justify-content: center;\n  margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2);\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hds-text-input__button {\n  appearance: none;\n  background: none;\n  border: none;\n  color: var(--icon-color);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  outline: none;\n  padding: var(--spacing-xs) calc(var(--spacing-xs) / 2);\n}\n\n.hds-text-input__button:focus {\n  outline: var(--outline-width) solid var(--color-focus-outline);\n}\n","@use '../../utils/animations.css';\n\n.hds-text-input {\n  --border-width: 2px;\n  --outline-width: 3px;\n  --outline-offset-readonly: 4px;\n  --input-height: 56px;\n  --textarea-height: 149px;\n  --icon-size: var(--spacing-m);\n  --icon-color: var(--color-black);\n  --helper-color-default: var(--color-black-60);\n  --helper-color-invalid: var(--color-black);\n  --helper-background-color-invalid: var(--color-error-light);\n  --helper-icon-color-invalid: var(--color-error);\n  --helper-color-success: var(--color-black);\n  --helper-background-color-success: var(--color-success-light);\n  --helper-icon-color-success: var(--color-success);\n  --helper-color-info: var(--color-black);\n  --helper-background-color-info: var(--color-info-light);\n  --helper-icon-color-info: var(--color-info);\n  --input-background-default: var(--color-white);\n  --input-background-disabled: var(--color-black-10);\n  --input-border-color-default: var(--color-black-50);\n  --input-border-color-hover: var(--color-black-90);\n  --input-border-color-focus: var(--color-black-90);\n  --input-border-color-invalid: var(--color-error);\n  --input-border-color-disabled: var(--color-black-10);\n  --input-border-color-success: var(--color-success);\n  --input-color-default: var(--color-black-90);\n  --input-color-disabled: var(--color-black-40);\n  --label-color-default: var(--color-black-90);\n  --label-color-invalid: var(--color-black-90);\n  --placeholder-color: var(--color-black-60);\n}\n\n.hds-text-input .hds-text-input__input {\n  /* removes the input shadow on iOS */\n  -webkit-appearance: none;\n  background-color: var(--input-background-default);\n  border: var(--border-width) solid var(--input-border-color-default);\n\n  /* removes the border radius on iOS */\n  border-radius: 0;\n  box-sizing: border-box;\n  color: var(--input-color-default);\n\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  */\n  font-family: inherit; /* 1 */\n  font-size: 1.125em;\n  height: var(--input-height);\n  line-height: normal;\n\n  /*\n  * Normalize.css rules\n  * 2. Remove the margin in Firefox and Safari.\n  */\n  margin: 0; /* 2 */\n  padding: 0 var(--spacing-s);\n  width: 100%;\n  will-change: transform, box-shadow;\n}\n\n.hds-text-input:not([data-hds-textinput-filled]) .hds-text-input__button-clear,\n.hds-text-input__input-clear::-webkit-search-cancel-button {\n  display: none;\n}\n\n.hds-text-input .hds-text-input__button-clear > * {\n  pointer-events: none;\n}\n\n/* text-input transitions */\n.hds-text-input .hds-text-input__input:hover {\n  border-color: var(--input-border-color-hover);\n  transition: border-color 85ms ease-out;\n}\n\n.hds-text-input__input-wrapper:focus-within .hds-text-input__input {\n  border-color: var(--input-border-color-focus);\n  outline: none;\n}\n\n.hds-text-input.hds-text-input--invalid .hds-text-input__input {\n  border-color: var(--input-border-color-invalid);\n}\n\n.hds-text-input.hds-text-input--success .hds-text-input__input {\n  border-color: var(--input-border-color-success);\n}\n\n.hds-text-input__input-wrapper:focus-within .hds-text-input__input:not([readonly]) {\n  box-shadow: 0 0 0 var(--outline-width) var(--color-focus-outline);\n  transform: translate3d(0, 0, 0);\n  transition: 85ms ease-out;\n  transition-property: box-shadow, transform;\n}\n\n.hds-text-input__label {\n  color: var(--label-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  font-weight: 500;\n  margin-bottom: var(--spacing-3-xs);\n}\n\n.hds-text-input--invalid .hds-text-input__label {\n  color: var(--label-color-invalid);\n  transition: color 85ms linear;\n}\n\n/* REQUIRED */\n\n.hds-text-input__required {\n  display: inline-block;\n  font-size: var(--fontsize-body-xl);\n  line-height: 1;\n  margin-left: var(--spacing-2-xs);\n  transform: translateY(var(--spacing-3-xs));\n}\n\n/* INPUT */\n\n.hds-text-input__input-wrapper {\n  display: flex;\n  position: relative;\n}\n\n.hds-text-input textarea.hds-text-input__input {\n  /*\n  * Normalize.css rules\n  * 1. Change the font styles in all browsers.\n  */\n  font-family: inherit; /* 1 */\n  height: var(--textarea-height);\n\n  /*\n  * Normalize.css rules\n  * 2. Remove the margin in Firefox and Safari.\n  */\n  margin: 0; /* 2 */\n  min-height: var(--input-height);\n\n  /*\n   * Normalize.css rule\n   * 1. Remove the default vertical scrollbar in IE 10+.\n   */\n  overflow: auto; /* 1 */\n  padding: var(--spacing-s);\n  resize: vertical;\n}\n\n.hds-text-input .hds-text-input__input::-ms-reveal {\n  display: none;\n}\n\n.hds-text-input .hds-text-input__input::placeholder {\n  color: var(--placeholder-color);\n  opacity: 1;\n}\n\n/* HELPER TEXT */\n\n.hds-text-input__helper-text {\n  color: var(--helper-color-default);\n  display: block;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-3-xs);\n  white-space: pre-line;\n}\n\n/* ERROR TEXT */\n.hds-text-input__error-text {\n  background-color: var(--helper-background-color-invalid);\n  border-left: 8px solid var(--color-error);\n  color: var(--helper-color-invalid);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  white-space: pre-line;\n}\n\n.hds-text-input__error-text:not(:last-child) {\n  margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__error-text:before {\n  animation: fadeIn 85ms ease-out;\n  background: var(--helper-icon-color-invalid);\n  content: '';\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.175 3.45608C11.5239 2.86969 12.3977 2.84875 12.7842 3.39325L12.825 3.45608L21.8771 18.6666C22.2202 19.2432 21.8055 19.951 21.1235 19.9976L21.052 20H2.94799C2.24813 20 1.7987 19.3114 2.09013 18.7267L2.12295 18.6666L11.175 3.45608ZM13 16V18H11V16H13ZM13 8.5V14.5H11V8.5H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n.hds-text-input__success-text {\n  background-color: var(--helper-background-color-success);\n  border-left: 8px solid var(--color-success);\n  color: var(--helper-color-success);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  position: relative;\n  white-space: pre-wrap;\n}\n\n.hds-text-input__success-text:not(:last-child) {\n  margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__success-text:before {\n  animation: fadeIn 85ms ease-out;\n  background: var(--helper-icon-color-success);\n  content: '';\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C7.02943725,3 3,7.02943725 3,12 C3,16.9705627 7.02943725,21 12,21 C16.9705627,21 21,16.9705627 21,12 C21,7.02943725 16.9705627,3 12,3 Z M16.5,8 L18,9.5 L10.5,17 L6,12.5 L7.5,11 L10.5,14 L16.5,8 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n/* INFO TEXT */\n.hds-text-input__info-text {\n  background-color: var(--helper-background-color-info);\n  border-left: 8px solid var(--color-info);\n  color: var(--helper-color-info);\n  display: flex;\n  font-size: var(--fontsize-body-m);\n  line-height: var(--lineheight-l);\n  margin-top: var(--spacing-2-xs);\n  padding: var(--spacing-2-xs);\n  position: relative;\n}\n\n.hds-text-input__info-text:not(:last-child) {\n  margin-bottom: var(--spacing-2-xs);\n}\n\n.hds-text-input__info-text:before {\n  animation: fadeIn 85ms ease-out;\n  background: var(--helper-icon-color-info);\n  content: '';\n  display: inline-block;\n  flex-shrink: 0;\n  height: var(--icon-size);\n  margin-right: var(--spacing-2-xs);\n  -webkit-mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  mask-image: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cg fill='none' fill-rule='evenodd'%3E %3Crect width='24' height='24'/%3E %3Cpath fill='currentColor' d='M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M13,16 L13,18 L11,18 L11,16 L13,16 Z M13,6 L13,14 L11,14 L11,6 L13,6 Z'/%3E %3C/g%3E %3C/svg%3E\");\n  pointer-events: none;\n  width: var(--icon-size);\n}\n\n/* DISABLED */\n\n.hds-text-input .hds-text-input__input[disabled] {\n  background-color: var(--input-background-disabled);\n  border-color: var(--input-border-color-disabled);\n  color: var(--input-color-disabled);\n  cursor: not-allowed;\n}\n\n/* READ-ONLY */\n\n.hds-text-input .hds-text-input__input[readonly] {\n  background-color: transparent;\n  border: 0;\n  color: var(--input-color-default);\n  outline-offset: var(--outline-offset-readonly);\n  padding: 0;\n\n  /* fixes faded text color on Safari */\n  -webkit-text-fill-color: var(--input-color-default);\n  transform: translate3d(0, 0, 0);\n  transition: 85ms ease-out;\n  transition-property: outline, transform;\n}\n\n.hds-text-input__input-wrapper:focus-within input.hds-text-input__input[readonly] {\n  /* the following calculation and margin is needed to keep the outline not to overlap\n  the other content vertically and make it look nice */\n  height: calc(var(--input-height) - 2 * var(--outline-offset-readonly));\n  margin: var(--outline-offset-readonly) 0;\n  outline: var(--color-focus-outline) solid var(--outline-width);\n}\n\n.hds-text-input__input-wrapper:focus-within textarea.hds-text-input__input[readonly] {\n  outline: var(--color-focus-outline) solid var(--outline-width);\n}\n\n/* BUTTON */\n\n.hds-text-input__buttons {\n  align-items: center;\n  bottom: 0;\n  display: flex;\n  font-size: 1rem;\n  justify-content: center;\n  margin-right: calc(var(--spacing-s) - var(--spacing-xs) / 2);\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n\n.hds-text-input__button {\n  appearance: none;\n  background: none;\n  border: none;\n  color: var(--icon-color);\n  cursor: pointer;\n  display: flex;\n  font: inherit;\n  outline: none;\n  padding: var(--spacing-xs) calc(var(--spacing-xs) / 2);\n}\n\n.hds-text-input__button:focus {\n  outline: var(--outline-width) solid var(--color-focus-outline);\n}\n"]}

package/lib/icons/alert-circle-fill.css

@@ -0,0 +1,12 @@
+.hds-icon--alert-circle-fill {
+  --mask-image-alert-circle-fill: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  --mask-image: var(--mask-image-alert-circle-fill);
+}
+
+.hds-icon-start--alert-circle-fill {
+  --mask-image-before: var(--mask-image-alert-circle-fill);
+}
+
+.hds-icon-end--alert-circle-fill {
+  --mask-image-after: var(--mask-image-alert-circle-fill);
+}

package/lib/icons/alert-circle-fill.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/icons/alert-circle-fill.css%23sass","../../src/icons/alert-circle-fill.css"],"names":[],"mappings":"AAAA;EACE,yYAAA;EACA,iDAAA;ACCF;;ADEA;EACE,wDAAA;ACCF;;ADEA;EACE,uDAAA;ACCF","file":"alert-circle-fill.css","sourcesContent":[".hds-icon--alert-circle-fill {\n  --mask-image-alert-circle-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-alert-circle-fill);\n}\n\n.hds-icon-start--alert-circle-fill {\n  --mask-image-before: var(--mask-image-alert-circle-fill);\n}\n\n.hds-icon-end--alert-circle-fill {\n  --mask-image-after: var(--mask-image-alert-circle-fill);\n}\n",".hds-icon--alert-circle-fill {\n  --mask-image-alert-circle-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-alert-circle-fill);\n}\n\n.hds-icon-start--alert-circle-fill {\n  --mask-image-before: var(--mask-image-alert-circle-fill);\n}\n\n.hds-icon-end--alert-circle-fill {\n  --mask-image-after: var(--mask-image-alert-circle-fill);\n}\n"]}

package/lib/icons/alert-circle-fill.min.css

@@ -0,0 +1 @@
+.hds-icon--alert-circle-fill{--mask-image-alert-circle-fill:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3a9 9 0 110 18 9 9 0 010-18zm1 13v2h-2v-2h2zm0-10v8h-2V6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-alert-circle-fill)}.hds-icon-start--alert-circle-fill{--mask-image-before:var(--mask-image-alert-circle-fill)}.hds-icon-end--alert-circle-fill{--mask-image-after:var(--mask-image-alert-circle-fill)}

package/lib/icons/alert-circle-fill.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/icons/alert-circle-fill.css%23sass","../../src/icons/alert-circle-fill.css"],"names":[],"mappings":"AAAA,6BACE,4RAAA,CACA,gDCCF,CDEA,mCACE,uDCCF,CDEA,iCACE,sDCCF","file":"alert-circle-fill.min.css","sourcesContent":[".hds-icon--alert-circle-fill {\n  --mask-image-alert-circle-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-alert-circle-fill);\n}\n\n.hds-icon-start--alert-circle-fill {\n  --mask-image-before: var(--mask-image-alert-circle-fill);\n}\n\n.hds-icon-end--alert-circle-fill {\n  --mask-image-after: var(--mask-image-alert-circle-fill);\n}\n",".hds-icon--alert-circle-fill {\n  --mask-image-alert-circle-fill: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-alert-circle-fill);\n}\n\n.hds-icon-start--alert-circle-fill {\n  --mask-image-before: var(--mask-image-alert-circle-fill);\n}\n\n.hds-icon-end--alert-circle-fill {\n  --mask-image-after: var(--mask-image-alert-circle-fill);\n}\n"]}

package/lib/icons/alert-circle.css

@@ -0,0 +1,12 @@
+.hds-icon--alert-circle {
+  --mask-image-alert-circle: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  --mask-image: var(--mask-image-alert-circle);
+}
+
+.hds-icon-start--alert-circle {
+  --mask-image-before: var(--mask-image-alert-circle);
+}
+
+.hds-icon-end--alert-circle {
+  --mask-image-after: var(--mask-image-alert-circle);
+}

package/lib/icons/alert-circle.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/icons/alert-circle.css%23sass","../../src/icons/alert-circle.css"],"names":[],"mappings":"AAAA;EACE,ofAAA;EACA,4CAAA;ACCF;;ADEA;EACE,mDAAA;ACCF;;ADEA;EACE,kDAAA;ACCF","file":"alert-circle.css","sourcesContent":[".hds-icon--alert-circle {\n  --mask-image-alert-circle: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-alert-circle);\n}\n\n.hds-icon-start--alert-circle {\n  --mask-image-before: var(--mask-image-alert-circle);\n}\n\n.hds-icon-end--alert-circle {\n  --mask-image-after: var(--mask-image-alert-circle);\n}\n",".hds-icon--alert-circle {\n  --mask-image-alert-circle: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-alert-circle);\n}\n\n.hds-icon-start--alert-circle {\n  --mask-image-before: var(--mask-image-alert-circle);\n}\n\n.hds-icon-end--alert-circle {\n  --mask-image-after: var(--mask-image-alert-circle);\n}\n"]}

package/lib/icons/alert-circle.min.css

@@ -0,0 +1 @@
+.hds-icon--alert-circle{--mask-image-alert-circle:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2a8 8 0 100 16 8 8 0 000-16zm1 12v2h-2v-2h2zm0-10v8h-2V6h2z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-alert-circle)}.hds-icon-start--alert-circle{--mask-image-before:var(--mask-image-alert-circle)}.hds-icon-end--alert-circle{--mask-image-after:var(--mask-image-alert-circle)}

package/lib/icons/alert-circle.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/icons/alert-circle.css%23sass","../../src/icons/alert-circle.css"],"names":[],"mappings":"AAAA,wBACE,8VAAA,CACA,2CCCF,CDEA,8BACE,kDCCF,CDEA,4BACE,iDCCF","file":"alert-circle.min.css","sourcesContent":[".hds-icon--alert-circle {\n  --mask-image-alert-circle: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-alert-circle);\n}\n\n.hds-icon-start--alert-circle {\n  --mask-image-before: var(--mask-image-alert-circle);\n}\n\n.hds-icon-end--alert-circle {\n  --mask-image-after: var(--mask-image-alert-circle);\n}\n",".hds-icon--alert-circle {\n  --mask-image-alert-circle: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-alert-circle);\n}\n\n.hds-icon-start--alert-circle {\n  --mask-image-before: var(--mask-image-alert-circle);\n}\n\n.hds-icon-end--alert-circle {\n  --mask-image-after: var(--mask-image-alert-circle);\n}\n"]}

package/lib/icons/angle-down.css

@@ -0,0 +1,12 @@
+.hds-icon--angle-down {
+  --mask-image-angle-down: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  --mask-image: var(--mask-image-angle-down);
+}
+
+.hds-icon-start--angle-down {
+  --mask-image-before: var(--mask-image-angle-down);
+}
+
+.hds-icon-end--angle-down {
+  --mask-image-after: var(--mask-image-angle-down);
+}

package/lib/icons/angle-down.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/icons/angle-down.css%23sass","../../src/icons/angle-down.css"],"names":[],"mappings":"AAAA;EACE,mSAAA;EACA,0CAAA;ACCF;;ADEA;EACE,iDAAA;ACCF;;ADEA;EACE,gDAAA;ACCF","file":"angle-down.css","sourcesContent":[".hds-icon--angle-down {\n  --mask-image-angle-down: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-down);\n}\n\n.hds-icon-start--angle-down {\n  --mask-image-before: var(--mask-image-angle-down);\n}\n\n.hds-icon-end--angle-down {\n  --mask-image-after: var(--mask-image-angle-down);\n}\n",".hds-icon--angle-down {\n  --mask-image-angle-down: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-down);\n}\n\n.hds-icon-start--angle-down {\n  --mask-image-before: var(--mask-image-angle-down);\n}\n\n.hds-icon-end--angle-down {\n  --mask-image-after: var(--mask-image-angle-down);\n}\n"]}

package/lib/icons/angle-down.min.css

@@ -0,0 +1 @@
+.hds-icon--angle-down{--mask-image-angle-down:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 13.5l5-5 1.5 1.5-6.5 6.5L5.5 10 7 8.5l5 5z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-angle-down)}.hds-icon-start--angle-down{--mask-image-before:var(--mask-image-angle-down)}.hds-icon-end--angle-down{--mask-image-after:var(--mask-image-angle-down)}

package/lib/icons/angle-down.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/icons/angle-down.css%23sass","../../src/icons/angle-down.css"],"names":[],"mappings":"AAAA,sBACE,oQAAA,CACA,yCCCF,CDEA,4BACE,gDCCF,CDEA,0BACE,+CCCF","file":"angle-down.min.css","sourcesContent":[".hds-icon--angle-down {\n  --mask-image-angle-down: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-down);\n}\n\n.hds-icon-start--angle-down {\n  --mask-image-before: var(--mask-image-angle-down);\n}\n\n.hds-icon-end--angle-down {\n  --mask-image-after: var(--mask-image-angle-down);\n}\n",".hds-icon--angle-down {\n  --mask-image-angle-down: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 13.5L17 8.5L18.5 10L12 16.5L5.5 10L7 8.5L12 13.5Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-down);\n}\n\n.hds-icon-start--angle-down {\n  --mask-image-before: var(--mask-image-angle-down);\n}\n\n.hds-icon-end--angle-down {\n  --mask-image-after: var(--mask-image-angle-down);\n}\n"]}

package/lib/icons/angle-left.css

@@ -0,0 +1,12 @@
+.hds-icon--angle-left {
+  --mask-image-angle-left: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  --mask-image: var(--mask-image-angle-left);
+}
+
+.hds-icon-start--angle-left {
+  --mask-image-before: var(--mask-image-angle-left);
+}
+
+.hds-icon-end--angle-left {
+  --mask-image-after: var(--mask-image-angle-left);
+}

package/lib/icons/angle-left.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/icons/angle-left.css%23sass","../../src/icons/angle-left.css"],"names":[],"mappings":"AAAA;EACE,oSAAA;EACA,0CAAA;ACCF;;ADEA;EACE,iDAAA;ACCF;;ADEA;EACE,gDAAA;ACCF","file":"angle-left.css","sourcesContent":[".hds-icon--angle-left {\n  --mask-image-angle-left: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-left);\n}\n\n.hds-icon-start--angle-left {\n  --mask-image-before: var(--mask-image-angle-left);\n}\n\n.hds-icon-end--angle-left {\n  --mask-image-after: var(--mask-image-angle-left);\n}\n",".hds-icon--angle-left {\n  --mask-image-angle-left: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-left);\n}\n\n.hds-icon-start--angle-left {\n  --mask-image-before: var(--mask-image-angle-left);\n}\n\n.hds-icon-end--angle-left {\n  --mask-image-after: var(--mask-image-angle-left);\n}\n"]}

package/lib/icons/angle-left.min.css

@@ -0,0 +1 @@
+.hds-icon--angle-left{--mask-image-angle-left:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12l5 5-1.5 1.5L7.5 12 14 5.5 15.5 7l-5 5z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-angle-left)}.hds-icon-start--angle-left{--mask-image-before:var(--mask-image-angle-left)}.hds-icon-end--angle-left{--mask-image-after:var(--mask-image-angle-left)}

package/lib/icons/angle-left.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/icons/angle-left.css%23sass","../../src/icons/angle-left.css"],"names":[],"mappings":"AAAA,sBACE,qQAAA,CACA,yCCCF,CDEA,4BACE,gDCCF,CDEA,0BACE,+CCCF","file":"angle-left.min.css","sourcesContent":[".hds-icon--angle-left {\n  --mask-image-angle-left: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-left);\n}\n\n.hds-icon-start--angle-left {\n  --mask-image-before: var(--mask-image-angle-left);\n}\n\n.hds-icon-end--angle-left {\n  --mask-image-after: var(--mask-image-angle-left);\n}\n",".hds-icon--angle-left {\n  --mask-image-angle-left: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 12L15.5 17L14 18.5L7.5 12L14 5.5L15.5 7L10.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-left);\n}\n\n.hds-icon-start--angle-left {\n  --mask-image-before: var(--mask-image-angle-left);\n}\n\n.hds-icon-end--angle-left {\n  --mask-image-after: var(--mask-image-angle-left);\n}\n"]}

package/lib/icons/angle-right.css

@@ -0,0 +1,12 @@
+.hds-icon--angle-right {
+  --mask-image-angle-right: url("data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E");
+  --mask-image: var(--mask-image-angle-right);
+}
+
+.hds-icon-start--angle-right {
+  --mask-image-before: var(--mask-image-angle-right);
+}
+
+.hds-icon-end--angle-right {
+  --mask-image-after: var(--mask-image-angle-right);
+}

package/lib/icons/angle-right.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/icons/angle-right.css%23sass","../../src/icons/angle-right.css"],"names":[],"mappings":"AAAA;EACE,oSAAA;EACA,2CAAA;ACCF;;ADEA;EACE,kDAAA;ACCF;;ADEA;EACE,iDAAA;ACCF","file":"angle-right.css","sourcesContent":[".hds-icon--angle-right {\n  --mask-image-angle-right: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-right);\n}\n\n.hds-icon-start--angle-right {\n  --mask-image-before: var(--mask-image-angle-right);\n}\n\n.hds-icon-end--angle-right {\n  --mask-image-after: var(--mask-image-angle-right);\n}\n",".hds-icon--angle-right {\n  --mask-image-angle-right: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-right);\n}\n\n.hds-icon-start--angle-right {\n  --mask-image-before: var(--mask-image-angle-right);\n}\n\n.hds-icon-end--angle-right {\n  --mask-image-after: var(--mask-image-angle-right);\n}\n"]}

package/lib/icons/angle-right.min.css

@@ -0,0 +1 @@
+.hds-icon--angle-right{--mask-image-angle-right:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12l-5-5L10 5.5l6.5 6.5-6.5 6.5L8.5 17l5-5z' fill='currentColor'/%3E%3C/svg%3E");--mask-image:var(--mask-image-angle-right)}.hds-icon-start--angle-right{--mask-image-before:var(--mask-image-angle-right)}.hds-icon-end--angle-right{--mask-image-after:var(--mask-image-angle-right)}

package/lib/icons/angle-right.min.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/icons/angle-right.css%23sass","../../src/icons/angle-right.css"],"names":[],"mappings":"AAAA,uBACE,uQAAA,CACA,0CCCF,CDEA,6BACE,iDCCF,CDEA,2BACE,gDCCF","file":"angle-right.min.css","sourcesContent":[".hds-icon--angle-right {\n  --mask-image-angle-right: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-right);\n}\n\n.hds-icon-start--angle-right {\n  --mask-image-before: var(--mask-image-angle-right);\n}\n\n.hds-icon-end--angle-right {\n  --mask-image-after: var(--mask-image-angle-right);\n}\n",".hds-icon--angle-right {\n  --mask-image-angle-right: url(\"data:image/svg+xml;charset=utf-8,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5 12L8.5 7L10 5.5L16.5 12L10 18.5L8.5 17L13.5 12Z' fill='currentColor'%3E%3C/path%3E %3C/svg%3E\");\n  --mask-image: var(--mask-image-angle-right);\n}\n\n.hds-icon-start--angle-right {\n  --mask-image-before: var(--mask-image-angle-right);\n}\n\n.hds-icon-end--angle-right {\n  --mask-image-after: var(--mask-image-angle-right);\n}\n"]}