@designsystem-se/af 39.2.1-beta.0 → 39.2.1-beta.1

package/dist/esm/digi-form-file-upload.entry.js

@@ -1,12 +1,11 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-148a7577.js';
-import { _ as _t } from './text-8f88c0f6.js';
-import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
-import { b as FormFileUploadVariation, a as FormFileUploadValidation, F as FormFileUploadHeadingLevel } from './form-file-upload-variation.enum-9c49ec5e.js';
-import { U as UtilBreakpointObserverBreakpoints } from './util-breakpoint-observer-breakpoints.enum-6d004731.js';
-import { F as FormValidationMessageVariation } from './form-validation-message-variation.enum-bcef8a9d.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, d as getElement } from './index-BnKuq1L7.js';
+import { _ as _t } from './text-DsO1BTml.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
+import { b as FormFileUploadVariation, a as FormFileUploadValidation, F as FormFileUploadHeadingLevel } from './form-file-upload-variation.enum-BfyJgcLA.js';
+import { U as UtilBreakpointObserverBreakpoints } from './util-breakpoint-observer-breakpoints.enum-DPq588Q4.js';
+import { F as FormValidationMessageVariation } from './form-validation-message-variation.enum-B8hpiXmh.js';
 
-const formFileUploadCss = ".sc-digi-form-file-upload-h {\n  --digi--form-file-upload--color--background--small--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--small--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--background--medium--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--medium--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--background--large--default: var(--digi--color--background--interactive--default--quaternary);\n  --digi--form-file-upload--color--background--large--hover: var(--digi--color--background--interactive--hover--secondary);\n  --digi--form-file-upload--color--border--small--default: var(--digi--color--border--interactive--default--on-input-nuance);\n  --digi--form-file-upload--color--border--small--hover: var(--digi--color--border--interactive--hover--primary);\n  --digi--form-file-upload--color--border--medium--default: var(--digi--color--border--interactive--default--on-input-nuance);\n  --digi--form-file-upload--color--border--medium--hover: var(--digi--color--border--interactive--hover--primary);\n  --digi--form-file-upload--color--border--large--default: var(--digi--color--border--interactive--default--on-input-nuance);\n  --digi--form-file-upload--color--border--large--hover: var(--digi--color--border--interactive--hover--primary);\n  --digi--form-file-upload--border-width--small--default: var(--digi--border-width--secondary);\n  --digi--form-file-upload--border-width--small--hover: var(--digi--border-width--primary);\n  --digi--form-file-upload--border-width--medium--default: var(--digi--border-width--secondary);\n  --digi--form-file-upload--border-width--medium--hover: var(--digi--border-width--primary);\n  --digi--form-file-upload--border-width--large--default: var(--digi--border-width--secondary);\n  --digi--form-file-upload--border-width--large--hover: var(--digi--border-width--primary);\n  --digi--form-file-upload--border-style--small--default: var(--digi--global--border-style--none);\n  --digi--form-file-upload--border-style--medium--default: var(--digi--global--border-style--dashed);\n  --digi--form-file-upload--border-style--large--default: var(--digi--global--border-style--dashed);\n  --digi--form-file-upload--border-radius--small--default: var(--digi--border-radius--secondary);\n  --digi--form-file-upload--border-radius--medium--default: var(--digi--border-radius--secondary);\n  --digi--form-file-upload--border-radius--large--default: var(--digi--border-radius--secondary);\n  --digi--form-file-upload--padding--small: var(--digi--gutter--medium) var(--digi--gutter--largest);\n  --digi--form-file-upload--padding--medium: var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);\n  --digi--form-file-upload--padding--large: var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);\n  --digi--form-file-upload--font-size--small: var(--digi--global--typography--font-size--small);\n  --digi--form-file-upload--font-size--medium: var(--digi--global--typography--font-size--base);\n  --digi--form-file-upload--font-size--large: var(--digi--global--typography--font-size--large);\n  --digi--form-file-upload--heading--font-family: var(--digi--global--typography--font-family--default);\n  --digi--form-file-upload--heading--font-weight: var(--digi--typography--heading-4--font-weight--desktop);\n  --digi--form-file-upload--heading--font-size: var(--digi--typography--heading-4--font-size--desktop);\n  --digi--form-file-upload--heading--font-size--large: var(--digi--typography--heading-4--font-size--desktop-large);\n  --digi--form-file-upload--font-family: var(--digi--global--typography--font-family--default);\n  --digi--form-file-upload--font-weight: var(--digi--typography--form-file-upload--font-weight--desktop);\n  --digi--form-file-upload--button-text--color--default: var(--digi--color--text--interactive--primary);\n  --digi--form-file-upload--button-text--color--hover: var(--digi--color--text--interactive--primary);\n  --digi--form-file-upload--padding--small--icon: var(--digi--global--spacing--smaller) var(--digi--global--spacing--smallest-2);\n  --digi--form-file-upload--padding--medium--icon: var(--digi--global--spacing--base) var(--digi--global--spacing--smallest-2);\n  --digi--form-file-upload--width--small: 132px;\n  --digi--form-file-upload--width--medium: 304px;\n  --digi--form-file-upload--width--large: inherit;\n  --digi--form-file-upload--border--error: var(--digi--global--border-style--solid) solid;\n  --digi--form-file-upload--border-color--error: var(--digi--color--border--interactive--validation--error);\n  --digi--form-file-upload--border--error--width: var(--digi--border-width--secondary);\n  --digi--form-file-upload--background--error: var(--digi--color--background--interactive--validation--error);\n  container-type: inline-size;\n  display: block;\n  width: 100%;\n}\n.sc-digi-form-file-upload-h a.sc-digi-form-file-upload {\n  font-weight: var(--digi--global--typography--font-weight--semibold);\n  color: var(--digi--color--text--interactive--primary);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload.sc-digi-form-file-upload {\n  font-family: var(--digi--global--typography--font-family--default);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--small.sc-digi-form-file-upload {\n  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--small--hover);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--small--default);\n  --COLOR--BORDER--HOVER: var(--digi--form-file-upload--color--border--small--hover);\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border-style--small--default);\n  --BORDER-RADIUS--DEFAULT: var(--digi--form-file-upload--border-radius--small--default);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border-width--small--default);\n  --WIDTH: var(--digi--form-file-upload--width--small);\n  --FONT-WEIGHT: var(--digi--form-file-upload--font-weight);\n  --PADDING: var(--digi--form-file-upload--padding--small);\n  --ICON--PADDING: var(--digi--form-file-upload--padding--small--icon);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--medium.sc-digi-form-file-upload {\n  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--medium--default);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--medium--hover);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--medium--default);\n  --COLOR--BORDER--HOVER: var(--digi--form-file-upload--color--border--medium--hover);\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border-style--medium--default);\n  --BORDER-RADIUS--DEFAULT: var(--digi--form-file-upload--border-radius--medium--default);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border-width--medium--default);\n  --WIDTH: var(--digi--form-file-upload--width--medium);\n  --FONT-WEIGHT: var(--digi--form-file-upload--font-weight);\n  --PADDING: var(--digi--form-file-upload--padding--medium);\n  --ICON--PADDING: var(--digi--form-file-upload--padding--medium--icon);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--large.sc-digi-form-file-upload {\n  --COLOR--BACKGROUND--FILE-LIST: var(--digi--form-file-upload--color--background--small--default);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--color--background--large--default);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--color--background--large--hover);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--color--border--large--default);\n  --COLOR--BORDER--HOVER: var(--digi--form-file-upload--color--border--large--hover);\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border-style--large--default);\n  --BORDER-RADIUS--DEFAULT: var(--digi--form-file-upload--border-radius--large--default);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border-width--large--default);\n  --WIDTH: var(--digi--form-file-upload--width--large);\n  --FONT-WEIGHT: var(--digi--form-file-upload--font-weight);\n  --PADDING: var(--digi--form-file-upload--padding--large);\n  --ICON--PADDING: var(--digi--form-file-upload--padding--medium--icon);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload--has-errors.sc-digi-form-file-upload {\n  --BORDER-STYLE--DEFAULT: var(--digi--form-file-upload--border--error);\n  --COLOR--BORDER--DEFAULT: var(--digi--form-file-upload--border-color--error);\n  --COLOR--BACKGROUND--HOVER: var(--digi--form-file-upload--border-color--error);\n  --BORDER-WIDTH--DEFAULT: var(--digi--form-file-upload--border--error--width);\n  --COLOR--BACKGROUND--DEFAULT: var(--digi--form-file-upload--background--error);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload {\n  margin-right: 0.5rem;\n  animation: animation__rotation 3s infinite linear;\n  transform-origin: center;\n  --digi--icon--height: 1rem;\n}\n@media (prefers-reduced-motion) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload {\n    animation: none;\n  }\n}\n@keyframes animation__rotation {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(359deg);\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__input.sc-digi-form-file-upload {\n  display: none;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload {\n  margin: 0 0 auto 0.5rem;\n  text-align: center;\n  white-space: nowrap;\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-weight: var(--digi--typography--button--font-weight--desktop);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  color: var(--digi--form-file-upload--button-text--color--default);\n  display: flex;\n  align-items: center;\n  font-family: var(--digi--global--typography--font-family--default);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover {\n  color: var(--digi--form-file-upload--button-text--color--hover);\n  text-decoration: underline;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover .digi-form-file-upload__button-icon.sc-digi-form-file-upload {\n  --digi--icon--color: var(--digi--form-file-upload--button-text--color--hover);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:focus-visible {\n  outline: 2px solid black;\n  outline-offset: 2px;\n  box-shadow: 0px 0px 0px 5px white;\n  text-decoration: underline;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload {\n  --digi--icon--height: 1.25rem;\n  --digi--icon--width: 1.25rem;\n  --digi--icon--color: var(--digi--color--text--interactive--primary);\n  margin-left: 5px;\n  padding: var(--ICON--PADDING);\n  padding-right: 0;\n  padding-left: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload:hover {\n  --digi--icon--color: var(--digi--form-file-upload--button-text--color--hover);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area.sc-digi-form-file-upload {\n  border-color: var(--COLOR--BORDER--DEFAULT);\n  border-radius: var(--BORDER-RADIUS--DEFAULT);\n  border-width: var(--BORDER-WIDTH--DEFAULT);\n  border-style: var(--BORDER-STYLE--DEFAULT);\n  max-width: var(--WIDTH);\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--COLOR--BACKGROUND--DEFAULT);\n  align-items: center;\n  padding: var(--PADDING);\n  margin-bottom: var(--digi--gutter--medium);\n  margin-top: var(--digi--gutter--button-block-small);\n  position: relative;\n  cursor: pointer;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area--hover.sc-digi-form-file-upload {\n  border-color: var(--COLOR--BORDER--HOVER);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area-overlay.sc-digi-form-file-upload {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background-color: var(--COLOR--BACKGROUND--HOVER);\n  opacity: 0.1;\n  top: 0;\n  left: 0;\n  z-index: 10;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload .paper-clip.sc-digi-form-file-upload {\n  padding-right: 0.5rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files-list.sc-digi-form-file-upload {\n  max-width: none;\n  padding: 0;\n  margin: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files.sc-digi-form-file-upload {\n  border-radius: var(--BORDER-RADIUS--DEFAULT);\n  max-width: 100%;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: var(--COLOR--BACKGROUND--FILE-LIST);\n  padding: var(--digi--gutter--largest-2) var(--digi--padding--large);\n  margin-bottom: var(--digi--gutter--medium);\n  margin-top: var(--digi--gutter--medium);\n  padding-bottom: var(--digi--padding--smaller);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading.sc-digi-form-file-upload {\n  font-family: var(--digi--form-file-upload--heading--font-family);\n  font-size: var(--digi--typography--label--font-size--desktop);\n  font-weight: var(--digi--form-file-upload--heading--font-weight);\n  color: var(--digi--color--text--primary);\n  margin: var(--digi--margin--small) 0 var(--digi--margin--medium) 0;\n  display: block;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading--and-errors.sc-digi-form-file-upload {\n  margin-top: var(--digi--margin--largest);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload {\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: 0.75rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.with-files.sc-digi-form-file-upload {\n  border-bottom: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload {\n  max-height: 1.5rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload .clear-icon.sc-digi-form-file-upload {\n  padding-right: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload {\n  margin: 0;\n  padding: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload {\n  list-style: none;\n  margin-bottom: 0.75rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload:last-of-type {\n  margin-bottom: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item.sc-digi-form-file-upload {\n  margin: var(--digi--margin--small) 0;\n  margin-bottom: var(--digi--margin--medium);\n  width: 100%;\n  box-sizing: border-box;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload {\n  list-style-type: none;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload:nth-child(n+2) {\n  border-top: var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .info-wrapper.sc-digi-form-file-upload {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n  height: auto;\n  min-width: 20%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .button-wrapper.sc-digi-form-file-upload {\n  display: flex;\n  min-width: 20%;\n  justify-content: flex-end;\n  align-items: center;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload p.sc-digi-form-file-upload {\n  margin: auto var(--digi--margin--small) !important;\n  font-weight: var(--digi--form-file-upload--font-weight);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  white-space: nowrap;\n  height: max-content;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .digi-form-file-upload__button-abort.sc-digi-form-file-upload {\n  margin: 0;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-and-thumbnail-container.sc-digi-form-file-upload {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  min-width: 20%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check.sc-digi-form-file-upload {\n  width: 1.375rem;\n  height: 1.375rem;\n  display: flex;\n  align-self: baseline;\n  position: relative;\n  top: 4px;\n  left: 0px;\n  margin-right: 4px;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check.sc-digi-form-file-upload svg.sc-digi-form-file-upload {\n  --digi--icon--height: 16px;\n  --digi--icon--width: 16px;\n  --digi--icon--color: var(--digi--color--icon--validation--success);\n  background-color: var(--digi--color--background--primary);\n  border-radius: 50%;\n  align-self: flex-start;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload {\n  width: 100%;\n  margin: auto 0;\n  font-weight: var(--digi--typography--button--font-weight--desktop);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  height: max-content;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-name--thumbnail.sc-digi-form-file-upload {\n  font-weight: var(--digi--typography--button--font-weight--desktop);\n  font-size: var(--digi--typography--body--font-size--desktop);\n  margin: auto 0 auto var(--digi--margin--small);\n  color: var(--digi--form-file-upload--button-text--color--default);\n}\n@media (max-width: 500px) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload {\n    max-width: 17.5rem;\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload:focus-visible {\n  outline: 2px solid black;\n  outline-offset: 2px;\n  box-shadow: 0px 0px 0px 5px white;\n}\n@container (max-width: 620px) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item-name {\n    max-width: 17.5rem;\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload {\n  position: relative;\n  display: flex;\n  padding: 0;\n  margin: 0;\n  justify-content: space-between;\n  align-items: center;\n  overflow-wrap: break-word;\n  gap: 32px;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-inner.sc-digi-form-file-upload {\n  display: flex;\n  width: 100%;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload {\n  margin: 0;\n  align-self: flex-start;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload::after {\n  position: absolute;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E\");\n  top: -6px;\n  left: 24px;\n  width: 18px;\n  height: 18px;\n  overflow: hidden;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .thumbnail.sc-digi-form-file-upload {\n  width: 2rem;\n  height: 2rem;\n  object-fit: cover;\n  flex-grow: 0;\n  margin-right: 0.75rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .hidden.sc-digi-form-file-upload {\n  margin-left: var(--digi--margin--larger);\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload {\n  position: relative;\n  top: 6px;\n  left: 5px;\n  margin-right: 1.25rem;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload::after {\n  position: absolute;\n  content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E\");\n  top: -7px;\n  left: 15px;\n  width: 18px;\n  height: 18px;\n  overflow: hidden;\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__item-info.sc-digi-form-file-upload {\n  width: 100%;\n}\n@container (max-width: 500px) {\n  .sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item span {\n    margin-left: 0;\n    margin-right: auto;\n  }\n}\n.sc-digi-form-file-upload-h .digi-form-file-upload__error.sc-digi-form-file-upload {\n  color: var(--digi--color--icon--validation--error);\n}\n.sc-digi-form-file-upload-h .visually-hidden.sc-digi-form-file-upload {\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n  -webkit-clip-path: inset(50%);\n  clip-path: inset(50%);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n  white-space: nowrap;\n}\n@container (min-width: 500px) {\n  .sc-digi-form-file-upload-h .hidden-desktop {\n    display: none !important;\n  }\n}\n@container (max-width: 499px) {\n  .sc-digi-form-file-upload-h .hidden-mobile {\n    display: none !important;\n  }\n}";
-const DigiFormFileUploadStyle0 = formFileUploadCss;
+const formFileUploadCss = () => `.sc-digi-form-file-upload-h{--digi--form-file-upload--color--background--small--default:var(--digi--color--background--interactive--default--quaternary);--digi--form-file-upload--color--background--small--hover:var(--digi--color--background--interactive--hover--secondary);--digi--form-file-upload--color--background--medium--default:var(--digi--color--background--interactive--default--quaternary);--digi--form-file-upload--color--background--medium--hover:var(--digi--color--background--interactive--hover--secondary);--digi--form-file-upload--color--background--large--default:var(--digi--color--background--interactive--default--quaternary);--digi--form-file-upload--color--background--large--hover:var(--digi--color--background--interactive--hover--secondary);--digi--form-file-upload--color--border--small--default:var(--digi--color--border--interactive--default--on-input-nuance);--digi--form-file-upload--color--border--small--hover:var(--digi--color--border--interactive--hover--primary);--digi--form-file-upload--color--border--medium--default:var(--digi--color--border--interactive--default--on-input-nuance);--digi--form-file-upload--color--border--medium--hover:var(--digi--color--border--interactive--hover--primary);--digi--form-file-upload--color--border--large--default:var(--digi--color--border--interactive--default--on-input-nuance);--digi--form-file-upload--color--border--large--hover:var(--digi--color--border--interactive--hover--primary);--digi--form-file-upload--border-width--small--default:var(--digi--border-width--secondary);--digi--form-file-upload--border-width--small--hover:var(--digi--border-width--primary);--digi--form-file-upload--border-width--medium--default:var(--digi--border-width--secondary);--digi--form-file-upload--border-width--medium--hover:var(--digi--border-width--primary);--digi--form-file-upload--border-width--large--default:var(--digi--border-width--secondary);--digi--form-file-upload--border-width--large--hover:var(--digi--border-width--primary);--digi--form-file-upload--border-style--small--default:var(--digi--global--border-style--none);--digi--form-file-upload--border-style--medium--default:var(--digi--global--border-style--dashed);--digi--form-file-upload--border-style--large--default:var(--digi--global--border-style--dashed);--digi--form-file-upload--border-radius--small--default:var(--digi--border-radius--secondary);--digi--form-file-upload--border-radius--medium--default:var(--digi--border-radius--secondary);--digi--form-file-upload--border-radius--large--default:var(--digi--border-radius--secondary);--digi--form-file-upload--padding--small:var(--digi--gutter--medium) var(--digi--gutter--largest);--digi--form-file-upload--padding--medium:var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);--digi--form-file-upload--padding--large:var(--digi--gutter--medium) var(--digi--gutter--medium) var(--digi--global--spacing--largest-2) var(--digi--gutter--medium);--digi--form-file-upload--font-size--small:var(--digi--global--typography--font-size--small);--digi--form-file-upload--font-size--medium:var(--digi--global--typography--font-size--base);--digi--form-file-upload--font-size--large:var(--digi--global--typography--font-size--large);--digi--form-file-upload--heading--font-family:var(--digi--global--typography--font-family--default);--digi--form-file-upload--heading--font-weight:var(--digi--typography--heading-4--font-weight--desktop);--digi--form-file-upload--heading--font-size:var(--digi--typography--heading-4--font-size--desktop);--digi--form-file-upload--heading--font-size--large:var(--digi--typography--heading-4--font-size--desktop-large);--digi--form-file-upload--font-family:var(--digi--global--typography--font-family--default);--digi--form-file-upload--font-weight:var(--digi--typography--form-file-upload--font-weight--desktop);--digi--form-file-upload--button-text--color--default:var(--digi--color--text--interactive--primary);--digi--form-file-upload--button-text--color--hover:var(--digi--color--text--interactive--primary);--digi--form-file-upload--padding--small--icon:var(--digi--global--spacing--smaller) var(--digi--global--spacing--smallest-2);--digi--form-file-upload--padding--medium--icon:var(--digi--global--spacing--base) var(--digi--global--spacing--smallest-2);--digi--form-file-upload--width--small:132px;--digi--form-file-upload--width--medium:304px;--digi--form-file-upload--width--large:inherit;--digi--form-file-upload--border--error:var(--digi--global--border-style--solid) solid;--digi--form-file-upload--border-color--error:var(--digi--color--border--interactive--validation--error);--digi--form-file-upload--border--error--width:var(--digi--border-width--secondary);--digi--form-file-upload--background--error:var(--digi--color--background--interactive--validation--error);container-type:inline-size;display:block;width:100%}.sc-digi-form-file-upload-h a.sc-digi-form-file-upload{font-weight:var(--digi--global--typography--font-weight--semibold);color:var(--digi--color--text--interactive--primary)}.sc-digi-form-file-upload-h .digi-form-file-upload.sc-digi-form-file-upload{font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-file-upload-h .digi-form-file-upload--small.sc-digi-form-file-upload{--COLOR--BACKGROUND--FILE-LIST:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--color--background--small--hover);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--color--border--small--default);--COLOR--BORDER--HOVER:var(--digi--form-file-upload--color--border--small--hover);--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border-style--small--default);--BORDER-RADIUS--DEFAULT:var(--digi--form-file-upload--border-radius--small--default);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border-width--small--default);--WIDTH:var(--digi--form-file-upload--width--small);--FONT-WEIGHT:var(--digi--form-file-upload--font-weight);--PADDING:var(--digi--form-file-upload--padding--small);--ICON--PADDING:var(--digi--form-file-upload--padding--small--icon)}.sc-digi-form-file-upload-h .digi-form-file-upload--medium.sc-digi-form-file-upload{--COLOR--BACKGROUND--FILE-LIST:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--color--background--medium--default);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--color--background--medium--hover);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--color--border--medium--default);--COLOR--BORDER--HOVER:var(--digi--form-file-upload--color--border--medium--hover);--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border-style--medium--default);--BORDER-RADIUS--DEFAULT:var(--digi--form-file-upload--border-radius--medium--default);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border-width--medium--default);--WIDTH:var(--digi--form-file-upload--width--medium);--FONT-WEIGHT:var(--digi--form-file-upload--font-weight);--PADDING:var(--digi--form-file-upload--padding--medium);--ICON--PADDING:var(--digi--form-file-upload--padding--medium--icon)}.sc-digi-form-file-upload-h .digi-form-file-upload--large.sc-digi-form-file-upload{--COLOR--BACKGROUND--FILE-LIST:var(--digi--form-file-upload--color--background--small--default);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--color--background--large--default);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--color--background--large--hover);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--color--border--large--default);--COLOR--BORDER--HOVER:var(--digi--form-file-upload--color--border--large--hover);--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border-style--large--default);--BORDER-RADIUS--DEFAULT:var(--digi--form-file-upload--border-radius--large--default);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border-width--large--default);--WIDTH:var(--digi--form-file-upload--width--large);--FONT-WEIGHT:var(--digi--form-file-upload--font-weight);--PADDING:var(--digi--form-file-upload--padding--large);--ICON--PADDING:var(--digi--form-file-upload--padding--medium--icon)}.sc-digi-form-file-upload-h .digi-form-file-upload--has-errors.sc-digi-form-file-upload{--BORDER-STYLE--DEFAULT:var(--digi--form-file-upload--border--error);--COLOR--BORDER--DEFAULT:var(--digi--form-file-upload--border-color--error);--COLOR--BACKGROUND--HOVER:var(--digi--form-file-upload--border-color--error);--BORDER-WIDTH--DEFAULT:var(--digi--form-file-upload--border--error--width);--COLOR--BACKGROUND--DEFAULT:var(--digi--form-file-upload--background--error)}.sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload{margin-right:0.5rem;animation:animation__rotation 3s infinite linear;transform-origin:center;--digi--icon--height:1rem}@media (prefers-reduced-motion){.sc-digi-form-file-upload-h .digi-form-file-upload__spinner.sc-digi-form-file-upload{animation:none}}@keyframes animation__rotation{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}.sc-digi-form-file-upload-h .digi-form-file-upload__input.sc-digi-form-file-upload{display:none}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload{margin:0 0 auto 0.5rem;text-align:center;white-space:nowrap;background:none;border:none;cursor:pointer;font-weight:var(--digi--typography--button--font-weight--desktop);font-size:var(--digi--typography--body--font-size--desktop);color:var(--digi--form-file-upload--button-text--color--default);display:flex;align-items:center;font-family:var(--digi--global--typography--font-family--default)}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover{color:var(--digi--form-file-upload--button-text--color--hover);text-decoration:underline}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:hover .digi-form-file-upload__button-icon.sc-digi-form-file-upload{--digi--icon--color:var(--digi--form-file-upload--button-text--color--hover)}.sc-digi-form-file-upload-h .digi-form-file-upload__button.sc-digi-form-file-upload:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white;text-decoration:underline}.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload{--digi--icon--height:1.25rem;--digi--icon--width:1.25rem;--digi--icon--color:var(--digi--color--text--interactive--primary);margin-left:5px;padding:var(--ICON--PADDING);padding-right:0;padding-left:0}.sc-digi-form-file-upload-h .digi-form-file-upload__button-icon.sc-digi-form-file-upload:hover{--digi--icon--color:var(--digi--form-file-upload--button-text--color--hover)}.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area.sc-digi-form-file-upload{border-color:var(--COLOR--BORDER--DEFAULT);border-radius:var(--BORDER-RADIUS--DEFAULT);border-width:var(--BORDER-WIDTH--DEFAULT);border-style:var(--BORDER-STYLE--DEFAULT);max-width:var(--WIDTH);margin:0;display:flex;flex-direction:column;background-color:var(--COLOR--BACKGROUND--DEFAULT);align-items:center;padding:var(--PADDING);margin-bottom:var(--digi--gutter--medium);margin-top:var(--digi--gutter--button-block-small);position:relative;cursor:pointer}.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area--hover.sc-digi-form-file-upload{border-color:var(--COLOR--BORDER--HOVER)}.sc-digi-form-file-upload-h .digi-form-file-upload__upload-area-overlay.sc-digi-form-file-upload{position:absolute;width:100%;height:100%;background-color:var(--COLOR--BACKGROUND--HOVER);opacity:0.1;top:0;left:0;z-index:10}.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.sc-digi-form-file-upload-h .digi-form-file-upload__text-area.sc-digi-form-file-upload .paper-clip.sc-digi-form-file-upload{padding-right:0.5rem}.sc-digi-form-file-upload-h .digi-form-file-upload__files-list.sc-digi-form-file-upload{max-width:none;padding:0;margin:0}.sc-digi-form-file-upload-h .digi-form-file-upload__files.sc-digi-form-file-upload{border-radius:var(--BORDER-RADIUS--DEFAULT);max-width:100%;width:100%;box-sizing:border-box;background-color:var(--COLOR--BACKGROUND--FILE-LIST);padding:var(--digi--gutter--largest-2) var(--digi--padding--large);margin-bottom:var(--digi--gutter--medium);margin-top:var(--digi--gutter--medium);padding-bottom:var(--digi--padding--smaller)}.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading.sc-digi-form-file-upload{font-family:var(--digi--form-file-upload--heading--font-family);font-size:var(--digi--typography--label--font-size--desktop);font-weight:var(--digi--form-file-upload--heading--font-weight);color:var(--digi--color--text--primary);margin:var(--digi--margin--small) 0 var(--digi--margin--medium) 0;display:block}.sc-digi-form-file-upload-h .digi-form-file-upload__files-heading--and-errors.sc-digi-form-file-upload{margin-top:var(--digi--margin--largest)}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload{display:flex;justify-content:space-between;padding-bottom:0.75rem}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.with-files.sc-digi-form-file-upload{border-bottom:var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary)}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload{max-height:1.5rem}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list-container.sc-digi-form-file-upload .clear-button.sc-digi-form-file-upload .clear-icon.sc-digi-form-file-upload{padding-right:0}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload{margin:0;padding:0}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload{list-style:none;margin-bottom:0.75rem}.sc-digi-form-file-upload-h .digi-form-file-upload__error-list.sc-digi-form-file-upload li.sc-digi-form-file-upload:last-of-type{margin-bottom:0}.sc-digi-form-file-upload-h .digi-form-file-upload__item.sc-digi-form-file-upload{margin:var(--digi--margin--small) 0;margin-bottom:var(--digi--margin--medium);width:100%;box-sizing:border-box}.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload{list-style-type:none}.sc-digi-form-file-upload-h .digi-form-file-upload__item-container.sc-digi-form-file-upload:nth-child(n+2){border-top:var(--BORDER-WIDTH--DEFAULT) solid var(--digi--color--divider--primary)}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload{display:flex;justify-content:space-between;align-items:center;width:100%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .info-wrapper.sc-digi-form-file-upload{display:flex;justify-content:flex-start;align-items:center;height:auto;min-width:20%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .button-wrapper.sc-digi-form-file-upload{display:flex;min-width:20%;justify-content:flex-end;align-items:center}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload p.sc-digi-form-file-upload{margin:auto var(--digi--margin--small) !important;font-weight:var(--digi--form-file-upload--font-weight);font-size:var(--digi--typography--body--font-size--desktop);white-space:nowrap;height:max-content;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pending-container.sc-digi-form-file-upload .digi-form-file-upload__button-abort.sc-digi-form-file-upload{margin:0}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-and-thumbnail-container.sc-digi-form-file-upload{display:flex;align-items:center;justify-content:flex-start;width:100%;min-width:20%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check.sc-digi-form-file-upload{width:1.375rem;height:1.375rem;display:flex;align-self:baseline;position:relative;top:4px;left:0px;margin-right:4px}.sc-digi-form-file-upload-h .digi-form-file-upload__item-green-check-icon.sc-digi-form-file-upload{--digi--icon--height:16px;--digi--icon--width:16px;--digi--icon--color:var(--digi--color--icon--validation--success);min-height:0;width:16px;height:16px;background-color:var(--digi--color--background--primary);border-radius:50%;align-self:flex-start}.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload{width:100%;margin:auto 0;font-weight:var(--digi--typography--button--font-weight--desktop);font-size:var(--digi--typography--body--font-size--desktop);height:max-content}.sc-digi-form-file-upload-h .digi-form-file-upload__item-name--thumbnail.sc-digi-form-file-upload{font-weight:var(--digi--typography--button--font-weight--desktop);font-size:var(--digi--typography--body--font-size--desktop);margin:auto 0 auto var(--digi--margin--small);color:var(--digi--form-file-upload--button-text--color--default)}@media (max-width: 500px){.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload{max-width:17.5rem}}.sc-digi-form-file-upload-h .digi-form-file-upload__item-name.sc-digi-form-file-upload:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}@container (max-width: 620px){.sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item-name{max-width:17.5rem}}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload{position:relative;display:flex;padding:0;margin:0;justify-content:space-between;align-items:center;overflow-wrap:break-word;gap:32px}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-inner.sc-digi-form-file-upload{display:flex;width:100%}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload{margin:0;align-self:flex-start}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container-figure.sc-digi-form-file-upload::after{position:absolute;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E");top:-6px;left:24px;width:18px;height:18px;overflow:hidden}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .thumbnail.sc-digi-form-file-upload{width:2rem;height:2rem;object-fit:cover;flex-grow:0;margin-right:0.75rem}.sc-digi-form-file-upload-h .digi-form-file-upload__item-text-container.sc-digi-form-file-upload .hidden.sc-digi-form-file-upload{margin-left:var(--digi--margin--larger)}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload{position:relative;top:6px;left:5px;margin-right:1.25rem}.sc-digi-form-file-upload-h .digi-form-file-upload__item-pdf-preview-bis.sc-digi-form-file-upload::after{position:absolute;content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='%23FFF' cx='8' cy='8' r='6'/%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-8.925 4.236L13.01 6.3a.516.516 0 0 0 0-.73l-.73-.73a.516.516 0 0 0-.73 0L6.71 9.682l-2.26-2.26a.516.516 0 0 0-.73 0l-.73.73a.516.516 0 0 0 0 .73l3.355 3.355a.516.516 0 0 0 .73 0Z' fill='%23009322'/%3E%3C/g%3E%3C/svg%3E");top:-7px;left:15px;width:18px;height:18px;overflow:hidden}.sc-digi-form-file-upload-h .digi-form-file-upload__item-info.sc-digi-form-file-upload{width:100%}@container (max-width: 500px){.sc-digi-form-file-upload-h .digi-form-file-upload__item .digi-form-file-upload__item span{margin-left:0;margin-right:auto}}.sc-digi-form-file-upload-h .digi-form-file-upload__error.sc-digi-form-file-upload{color:var(--digi--color--icon--validation--error)}.sc-digi-form-file-upload-h .visually-hidden.sc-digi-form-file-upload{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}@container (min-width: 500px){.sc-digi-form-file-upload-h .hidden-desktop{display:none !important}}@container (max-width: 499px){.sc-digi-form-file-upload-h .hidden-mobile{display:none !important}}`;
 
 const FormFileUpload = class {
     constructor(hostRef) {
@@ -16,44 +15,76 @@ const FormFileUpload = class {
         this.afOnCancelFile = createEvent(this, "afOnCancelFile", 7);
         this.afOnReady = createEvent(this, "afOnReady", 3);
         this.afShowModal = createEvent(this, "afShowModal", 7);
-        this.toBase64 = (file) => new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.readAsDataURL(file);
-            reader.onload = () => {
-                const encoded = reader.result.toString().replace(/^data:(.*,)?/, '');
-                resolve(encoded);
-            };
-            reader.onerror = (error) => reject(error);
-        });
-        this._input = undefined;
-        this._fileList = undefined;
-        this._uploadButton = undefined;
-        this._srTextContainer = undefined;
         this.files = [];
         this.error = false;
         this.errorMessages = [];
         this.fileHover = false;
+        /**
+         * Texten till label-elementet. Obligatoriskt fält.
+         * @en The label text. Required field.
+         */
         this.afLabel = _t.form.file_upload;
-        this.afLabelDescription = undefined;
+        /**
+         * Sätter variant. Kan vara 'small', 'medium' eller 'large'. Oberoende på satt storlek så kommer komponenten bli 'small' på mobilskärmar.
+         * @en Set input variation 'small', 'medium' or 'large'. On a mobile screen the variation will be automatically set to 'small'.
+         */
         this.afVariation = FormFileUploadVariation.SMALL;
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Input id attribute. Defaults to random string.
+         */
         this.afId = randomIdGenerator('digi-form-file-upload');
-        this.afFileTypes = undefined;
+        /**
+         * Sätter en maximal filstorlek i MB, 10MB är standard.
+         * @en Set file max size in MB
+         */
         this.afFileMaxSize = 10;
-        this.afMaxFiles = undefined;
-        this.afName = undefined;
-        this.afUploadBtnText = undefined;
-        this.afRequired = undefined;
-        this.afRequiredText = undefined;
+        /**
+         * Sätt denna till true om formuläret innehåller fler obligatoriska fält än valfria.
+         * @en Set this to true if the form contains more required fields than optional fields.
+         */
         this.afAnnounceIfOptional = false;
+        /**
+         * Sätt rubrik för uppladdade filer.
+         * @en Set heading for uploaded files.
+         */
         this.afHeadingFiles = _t.form.file_uploaded_files;
-        this.afAnnounceIfOptionalText = undefined;
-        this.afFileMaxSizeText = undefined;
+        /**
+         * Visar miniatyrbild/ikon på uppladdade filer.
+         * @en Shows thumbnail.
+         */
         this.afShowThumbnail = false;
+        /**
+         * Aktiverar förhandsgranskning.
+         * @en Activates preview of uploaded files.
+         */
         this.afEnablePreview = false;
-        this.afValidationText = undefined;
+        /**
+         * Sätter antivirus scan status. Kan vara 'enable' eller 'disabled'.
+         * @en Set antivirus scan status. Enable is default.
+         */
         this.afValidation = FormFileUploadValidation.DISABLED;
+        /**
+         * Sätt rubrikens vikt. 'h2' är förvalt.
+         * @en Set heading level. Default is 'h2'
+         */
         this.afHeadingLevel = FormFileUploadHeadingLevel.H2;
+        /**
+         * Om värdet är true får felmeddelandet attributet role="alert".
+         * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
+         * @en If the value is true, the error message gets the attribute role="alert".
+         * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
+         */
         this.afErrorMessageIsAlert = true;
+        this.toBase64 = (file) => new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+            reader.onload = () => {
+                const encoded = reader.result.toString().replace(/^data:(.*,)?/, '');
+                resolve(encoded);
+            };
+            reader.onerror = (error) => reject(error);
+        });
     }
     afValidationTextChange() {
         this.setValidationText();
@@ -511,7 +542,7 @@ const FormFileUpload = class {
         return this.renderCheckmark();
     }
     renderCheckmark() {
-        return (h("span", { class: "digi-form-file-upload__item-green-check" }, h("digi-icon-check-circle-solid", null)));
+        return (h("span", { class: "digi-form-file-upload__item-green-check" }, h("digi-icon-check-circle-solid", { class: "digi-form-file-upload__item-green-check-icon" })));
     }
     renderPDFThumbnail(file) {
         if (this.afShowThumbnail) {
@@ -571,28 +602,30 @@ const FormFileUpload = class {
             } }, this.renderFiles())));
     }
     render() {
-        return (h(Fragment, { key: 'bec280d44d534a720927ab737b34335600c3fe80' }, h("digi-util-breakpoint-observer", { key: '93983b718eda1869ff95f7a0abe8c6704395a1e0', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: '23f30473aa0dd681c6c4ea20138d3f13391bb070', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'c42a873187b3bf30ddfdb71561d6902a8b2f98fe', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: 'db1082e11bafb320c13a790d639d37ca821617ac', class: {
+        return (h(Fragment, { key: 'ea0f5e831e4b91840870f13a0f765bddde7f2b3f' }, h("digi-util-breakpoint-observer", { key: 'fdba1fa892784d3bfaa437c14ca7fe4a2d6211d0', onAfOnChange: (e) => this.breakpointHandler(e) }), h("div", { key: 'cc6ffd28d1478bd5f1205bd3dfe4fa84c19e8f55', class: Object.assign({ 'digi-form-file-upload': true }, this.cssModifiers) }, h("digi-form-label", { key: 'e341b099dceeadda16bb1b00c9f294b32eb619fa', afFor: this.afId, afLabel: this.afLabel, afDescription: this.afLabelDescription, afRequired: this.afRequired, afAnnounceIfOptional: this.afAnnounceIfOptional, afRequiredText: this.afRequiredText, afAnnounceIfOptionalText: this.afAnnounceIfOptionalText }), h("div", { key: 'ddb216147c7463573e772bd25cd8ea1313c0be8d', class: {
                 'digi-form-file-upload__upload-area': true,
                 'digi-form-file-upload__upload-area--hover': this.fileHover
             }, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), onDragEnter: (e) => this.handleOnDragEnterLeave(e), onDragLeave: (e) => this.handleOnDragEnterLeave(e), onClick: (e) => this.handleInputClick(e) }, this.fileHover &&
-            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: 'f58d5f61b5568263e9b60b255f47e6ef418c78e5', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: 'c58c52f7e2c8aa8d17fe510ef90435d488844237', class: "digi-form-file-upload__text-area" }, h("button", { key: '1bb7fa84e0778702d0e77008f7d468d560ac8e17', type: "button", id: this.afId + '-button', ref: (el) => {
+            this.afVariation != FormFileUploadVariation.SMALL && (h("div", { key: 'b5ed1a44293012aa6bdcfc86937f04bf751fc642', class: "digi-form-file-upload__upload-area-overlay" })), h("div", { key: 'ec86494fd7299db8e3c5e9ad9940a633fc9e73a8', class: "digi-form-file-upload__text-area" }, h("button", { key: 'adcc823a998bce77bd83f2c0ee486f55d060204b', type: "button", id: this.afId + '-button', ref: (el) => {
                 this._uploadButton = el;
             }, onClick: (e) => this.handleInputClick(e), class: "digi-form-file-upload__button hidden_mobile", style: {
                 margin: '0'
-            } }, h("digi-icon-paperclip", { key: 'a84b67ad055682b1c1b013ec948af0935c35ed0c', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
+            } }, h("digi-icon-paperclip", { key: 'ae23c375fcbbbf3e4b8b105d7e30d9c8316fc5f3', "aria-hidden": "true", class: "digi-form-file-upload__button-icon paper-clip", slot: "icon" }), this.afUploadBtnText
             ? this.afUploadBtnText
-            : _t.form.file_choose), h("input", { key: 'd0babe3bcbc5d03f2436c0f4a7ee23a93ecb0474', ref: (el) => {
+            : _t.form.file_choose), h("input", { key: '5d2beb87d1565c478cfa280b9790fc25de90e958', ref: (el) => {
                 this._input = el;
-            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: '20a4158d0462ee2f871bddb57b9e168d356573ed' }, this.afVariation !== FormFileUploadVariation.SMALL &&
-            _t.form.file_dropzone))), h("p", { key: 'ade6d22fde218536ce42daff285a1605ac16bdb1', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
+            }, onChange: (e) => this.onButtonUploadFileHandler(e), class: "digi-form-file-upload__input", multiple: true, type: "file", id: this.afId, accept: this.afFileTypes, name: this.afName ? this.afName : null, required: this.afRequired ? this.afRequired : null, onDrop: (e) => this.handleDrop(e), onDragOver: (e) => this.handleAllowDrop(e), "aria-errormessage": "digi-form-file-upload__error", "aria-describedBy": "digi-form-file-upload__error" }), h("span", { key: 'c8e9e00250ab4cb9da92bd7695fb389ddd74428a' }, this.afVariation !== FormFileUploadVariation.SMALL &&
+            _t.form.file_dropzone))), h("p", { key: 'e54f8e9d99ddd6b39833c32f3080c6f7eef840a9', class: "visually-hidden", role: this.errorMessageIsAlert ? 'alert' : null, "aria-atomic": "true", ref: (el) => {
                 this._srTextContainer = el;
-            } }), (this.files.length > 0 || this.error) && (h("div", { key: '06044ba8e2a5d7e76374af1dfa479c891554ab45', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
+            } }), (this.files.length > 0 || this.error) && (h("div", { key: '5f246f4669dc97e046855e46f25792da5325051c', class: "digi-form-file-upload__files" }, this.renderErrorMessage(), this.renderFileContainer())))));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
-        "afValidationText": ["afValidationTextChange"]
+        "afValidationText": [{
+                "afValidationTextChange": 0
+            }]
     }; }
 };
-FormFileUpload.style = DigiFormFileUploadStyle0;
+FormFileUpload.style = formFileUploadCss();
 
 export { FormFileUpload as digi_form_file_upload };

package/dist/esm/digi-form-filter.entry.js

@@ -1,13 +1,12 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-148a7577.js';
-import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
-import { l as logger } from './logger.util-ede3c48a.js';
-import { d as detectClickOutside } from './detectClickOutside.util-72594957.js';
-import { d as detectFocusOutside } from './detectFocusOutside.util-a8676bee.js';
-import { _ as _t } from './text-8f88c0f6.js';
-import './detectClosest.util-58a7504f.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-BnKuq1L7.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
+import { l as logger } from './logger.util-DdB9j8uV.js';
+import { d as detectClickOutside } from './detectClickOutside.util-ROzp1Ej2.js';
+import { d as detectFocusOutside } from './detectFocusOutside.util-aFLLVVle.js';
+import { _ as _t } from './text-DsO1BTml.js';
+import './detectClosest.util-DwBvm-Nc.js';
 
-const formFilterCss = ".sc-digi-form-filter-h{--digi--form-filter--footer--background:var(--digi--color--background--secondary-accent);--digi--form-filter--scroll--max-height:18.75rem;--digi--form-filter--scroll--max-height--large:23.4275rem;--digi--form-filter--scroll--padding:var(--digi--padding--small);--digi--form-filter--reset-button--margin-left:var(--digi--padding--small);--digi--form-filter--legend__border-bottom:var(--digi--border-width--primary) solid var(--digi--color--divider--primary);--digi--form-filter--list--margin:0;--digi--form-filter--list--padding:var(--digi--gutter--small) 0 0 0;--digi--form-filter--item--margin:var(--digi--gutter--small) 0;--digi--form-filter--toggle-icon--transition:ease-in-out 0.2s all;--digi--form-filter--dropdown--box-shadow:0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);--digi--form-filter--dropdown--border-radius:var(--digi--border--radius--primary);--digi--form-filter--dropdown--background:var(--digi--color--background--primary);--digi--form-filter--dropdown--min-width:18.75rem;--digi--form-filter--dropdown--margin-top:var(--digi--gutter--small);--digi--form-filter--dropdown--z-index:999;--digi--form-filter--toggle-button-indicator--color--default:transparent;--digi--form-filter--toggle-button-indicator--color--active:var(--digi--color--marking--indication--primary);--digi--form-filter--toggle-button-indicator--width:0.625rem;--digi--form-filter--toggle-button-indicator--height:0.625rem;--digi--form-filter--toggle-button-indicator--margin-right:var(--digi--margin--small);--digi--form-filter--toggle-button-indicator--margin-left:calc(var(--digi--margin--smaller) * -1);--digi--form-filter--toggle-button--text--margin-right:var(--digi--margin--smaller);--digi--form-filter--toggle-icon--width:0.875rem;--digi--form-filter--toggle-icon--height:0.875rem;--digi--form-filter--legend--font-weight:var(--digi--typography--preamble--font-weight--desktop);--digi--form-filter--legend--font-family:var(--digi--global--typography--font-family--default);--digi--form-filter--legend--font-size:var(--digi--typography--preamble--font-size--desktop)}.sc-digi-form-filter-h .digi-form-filter.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(--digi--form-filter--toggle-button-indicator--color--default);--SCROLL--MAX-HEIGHT:var(--digi--form-filter--scroll--max-height);position:relative}.sc-digi-form-filter-h .digi-form-filter--open.sc-digi-form-filter .digi-form-filter__toggle-icon.sc-digi-form-filter{transform:rotate(-180deg)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter{transition:var(--digi--form-filter--toggle-icon--transition)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter-s>[slot^=icon],.sc-digi-form-filter-h .digi-form-filter__toggle-icon .sc-digi-form-filter-s>[slot^=icon]{--digi--icon--width:var(--digi--form-filter--toggle-icon--width);--digi--icon--height:var(--digi--form-filter--toggle-icon--height)}.sc-digi-form-filter-h .digi-form-filter__legend.sc-digi-form-filter{font-weight:var(--digi--form-filter--legend--font-weight);font-family:var(--digi--form-filter--legend--font-family);font-size:var(--digi--form-filter--legend--font-size)}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{max-height:var(--SCROLL--MAX-HEIGHT);overflow-y:auto;padding:var(--digi--form-filter--scroll--padding);overflow-x:hidden}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{--SCROLL--MAX-HEIGHT:var(--digi--form-filter--scroll--max-height--large)}}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter fieldset.sc-digi-form-filter{border:none}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter legend.sc-digi-form-filter{width:100%;border-bottom:var(--digi--form-filter--legend__border-bottom);padding-bottom:0.25rem}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter .legend-hidden.sc-digi-form-filter{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-form-filter-h .digi-form-filter__footer.sc-digi-form-filter{display:flex;align-items:center;justify-content:center;background:var(--digi--form-filter--footer--background);padding:var(--digi--form-filter--scroll--padding)}.sc-digi-form-filter-h .digi-form-filter__reset-button.sc-digi-form-filter{display:inline-block;margin-left:var(--digi--form-filter--reset-button--margin-left)}.sc-digi-form-filter-h .digi-form-filter__dropdown.sc-digi-form-filter{min-width:var(--digi--form-filter--dropdown--min-width);position:absolute;z-index:var(--digi--form-filter--dropdown--z-index);background:var(--digi--form-filter--dropdown--background);border-radius:var(--digi--form-filter--dropdown--border-radius);box-shadow:var(--digi--form-filter--dropdown--box-shadow);overflow:hidden;margin-top:var(--digi--form-filter--dropdown--margin-top)}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__dropdown--right.sc-digi-form-filter{right:0}}.sc-digi-form-filter-h .digi-form-filter__dropdown--hidden.sc-digi-form-filter{display:none}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator.sc-digi-form-filter:before{content:\"\";width:var(--digi--form-filter--toggle-button-indicator--width);height:var(--digi--form-filter--toggle-button-indicator--height);background:var(--INDICATOR--BACKGROUND);display:inline-block;margin-right:var(--digi--form-filter--toggle-button-indicator--margin-right);border-radius:50% 50%;overflow:hidden;margin-left:var(--digi--form-filter--toggle-button-indicator--margin-left)}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator--active.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(--digi--form-filter--toggle-button-indicator--color--active)}.sc-digi-form-filter-h .digi-form-filter__list.sc-digi-form-filter{margin:var(--digi--form-filter--list--margin);padding:var(--digi--form-filter--list--padding)}.sc-digi-form-filter-h .digi-form-filter__item.sc-digi-form-filter{display:block}.sc-digi-form-filter-h .digi-form-filter__toggle-button-text.sc-digi-form-filter{margin-right:var(--digi--form-filter--toggle-button--text--margin-right)}";
-const DigiFormFilterStyle0 = formFilterCss;
+const formFilterCss = () => `.sc-digi-form-filter-h{--digi--form-filter--footer--background:var(--digi--color--background--secondary-accent);--digi--form-filter--scroll--max-height:18.75rem;--digi--form-filter--scroll--max-height--large:23.4275rem;--digi--form-filter--scroll--padding:var(--digi--padding--small);--digi--form-filter--reset-button--margin-left:var(--digi--padding--small);--digi--form-filter--legend__border-bottom:var(--digi--border-width--primary) solid var(--digi--color--divider--primary);--digi--form-filter--list--margin:0;--digi--form-filter--list--padding:var(--digi--gutter--small) 0 0 0;--digi--form-filter--item--margin:var(--digi--gutter--small) 0;--digi--form-filter--toggle-icon--transition:ease-in-out 0.2s all;--digi--form-filter--dropdown--box-shadow:0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);--digi--form-filter--dropdown--border-radius:var(--digi--border--radius--primary);--digi--form-filter--dropdown--background:var(--digi--color--background--primary);--digi--form-filter--dropdown--min-width:18.75rem;--digi--form-filter--dropdown--margin-top:var(--digi--gutter--small);--digi--form-filter--dropdown--z-index:999;--digi--form-filter--toggle-button-indicator--color--default:transparent;--digi--form-filter--toggle-button-indicator--color--active:var(--digi--color--marking--indication--primary);--digi--form-filter--toggle-button-indicator--width:0.625rem;--digi--form-filter--toggle-button-indicator--height:0.625rem;--digi--form-filter--toggle-button-indicator--margin-right:var(--digi--margin--small);--digi--form-filter--toggle-button-indicator--margin-left:calc(var(--digi--margin--smaller) * -1);--digi--form-filter--toggle-button--text--margin-right:var(--digi--margin--smaller);--digi--form-filter--toggle-icon--width:0.875rem;--digi--form-filter--toggle-icon--height:0.875rem;--digi--form-filter--legend--font-weight:var(--digi--typography--preamble--font-weight--desktop);--digi--form-filter--legend--font-family:var(--digi--global--typography--font-family--default);--digi--form-filter--legend--font-size:var(--digi--typography--preamble--font-size--desktop)}.sc-digi-form-filter-h .digi-form-filter.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(--digi--form-filter--toggle-button-indicator--color--default);--SCROLL--MAX-HEIGHT:var(--digi--form-filter--scroll--max-height);position:relative}.sc-digi-form-filter-h .digi-form-filter--open.sc-digi-form-filter .digi-form-filter__toggle-icon.sc-digi-form-filter{transform:rotate(-180deg)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter{transition:var(--digi--form-filter--toggle-icon--transition)}.sc-digi-form-filter-h .digi-form-filter__toggle-icon.sc-digi-form-filter-s>[slot^=icon],.sc-digi-form-filter-h .digi-form-filter__toggle-icon .sc-digi-form-filter-s>[slot^=icon]{--digi--icon--width:var(--digi--form-filter--toggle-icon--width);--digi--icon--height:var(--digi--form-filter--toggle-icon--height)}.sc-digi-form-filter-h .digi-form-filter__legend.sc-digi-form-filter{font-weight:var(--digi--form-filter--legend--font-weight);font-family:var(--digi--form-filter--legend--font-family);font-size:var(--digi--form-filter--legend--font-size)}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{max-height:var(--SCROLL--MAX-HEIGHT);overflow-y:auto;padding:var(--digi--form-filter--scroll--padding);overflow-x:hidden}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter{--SCROLL--MAX-HEIGHT:var(--digi--form-filter--scroll--max-height--large)}}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter fieldset.sc-digi-form-filter{border:none}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter legend.sc-digi-form-filter{width:100%;border-bottom:var(--digi--form-filter--legend__border-bottom);padding-bottom:0.25rem}.sc-digi-form-filter-h .digi-form-filter__scroll.sc-digi-form-filter .legend-hidden.sc-digi-form-filter{border:0;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sc-digi-form-filter-h .digi-form-filter__footer.sc-digi-form-filter{display:flex;align-items:center;justify-content:center;background:var(--digi--form-filter--footer--background);padding:var(--digi--form-filter--scroll--padding)}.sc-digi-form-filter-h .digi-form-filter__reset-button.sc-digi-form-filter{display:inline-block;margin-left:var(--digi--form-filter--reset-button--margin-left)}.sc-digi-form-filter-h .digi-form-filter__dropdown.sc-digi-form-filter{min-width:var(--digi--form-filter--dropdown--min-width);position:absolute;z-index:var(--digi--form-filter--dropdown--z-index);background:var(--digi--form-filter--dropdown--background);border-radius:var(--digi--form-filter--dropdown--border-radius);box-shadow:var(--digi--form-filter--dropdown--box-shadow);overflow:hidden;margin-top:var(--digi--form-filter--dropdown--margin-top)}@media (min-width: 48rem){.sc-digi-form-filter-h .digi-form-filter__dropdown--right.sc-digi-form-filter{right:0}}.sc-digi-form-filter-h .digi-form-filter__dropdown--hidden.sc-digi-form-filter{display:none}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator.sc-digi-form-filter:before{content:"";width:var(--digi--form-filter--toggle-button-indicator--width);height:var(--digi--form-filter--toggle-button-indicator--height);background:var(--INDICATOR--BACKGROUND);display:inline-block;margin-right:var(--digi--form-filter--toggle-button-indicator--margin-right);border-radius:50% 50%;overflow:hidden;margin-left:var(--digi--form-filter--toggle-button-indicator--margin-left)}.sc-digi-form-filter-h .digi-form-filter__toggle-button-indicator--active.sc-digi-form-filter{--INDICATOR--BACKGROUND:var(--digi--form-filter--toggle-button-indicator--color--active)}.sc-digi-form-filter-h .digi-form-filter__list.sc-digi-form-filter{margin:var(--digi--form-filter--list--margin);padding:var(--digi--form-filter--list--padding)}.sc-digi-form-filter-h .digi-form-filter__item.sc-digi-form-filter{display:block}.sc-digi-form-filter-h .digi-form-filter__toggle-button-text.sc-digi-form-filter{margin-right:var(--digi--form-filter--toggle-button--text--margin-right)}`;
 
 const FormFilter = class {
     constructor(hostRef) {
@@ -17,25 +16,31 @@ const FormFilter = class {
         this.afCloseFilter = createEvent(this, "afCloseFilter", 7);
         this.afResetFilter = createEvent(this, "afResetFilter", 7);
         this.afChangeFilter = createEvent(this, "afChangeFilter", 7);
-        this.refs = {};
         this.listItems = [];
         this.checkedItems = [];
         this.tabItems = [];
         this.isActive = false;
         this.activeListItemIndex = 0;
+        this.refs = {};
+        /**
+         * Prefixet för alla komponentens olika interna 'id'-attribut på dropdowns, filterlistor etc. Ex. 'my-cool-id' genererar 'my-cool-id-filter-list', 'my-cool-id-dropdown-menu' och så vidare. Ges inget värde så genereras ett slumpmässigt.
+         * @en Prefix for all id attributes inside the component. Example: 'my-cool-id' generates 'my-cool-id-filter-list', 'my-cool-id-dropdown-menu' and so on. Defaults to random string.
+         */
         this.afId = randomIdGenerator('digi-form-filter');
-        this.afFilterButtonText = undefined;
-        this.afSubmitButtonText = undefined;
-        this.afSubmitButtonTextAriaLabel = undefined;
+        /**
+         * Texten i rensaknappen
+         * @en Set the reset button text
+         */
         this.afResetButtonText = _t.clear;
-        this.afResetButtonTextAriaLabel = undefined;
+        /**
+         * Döljer rensaknappen när värdet sätts till true
+         * @en Hides the reset button when set to true
+         */
         this.afHideResetButton = false;
-        this.afAlignRight = undefined;
-        this.afName = undefined;
-        this.afFilterButtonAriaLabel = undefined;
-        this.afFilterButtonAriaDescribedby = undefined;
-        this.afAutofocus = undefined;
-        this.afListItems = undefined;
+        /**
+         * Definiera vilka kryssrutor som ska vara ikryssade, förväntar sig filtrets `id`
+         * @en Defines which checkboxes are checked, expects the `id` of the filter
+         */
         this.afCheckItems = [];
     }
     syncCheckItems() {
@@ -234,11 +239,17 @@ const FormFilter = class {
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
-        "afCheckItems": ["syncCheckItems"],
-        "afListItems": ["handleListItems"],
-        "listItems": ["setupAccessibility"]
+        "afCheckItems": [{
+                "syncCheckItems": 0
+            }],
+        "afListItems": [{
+                "handleListItems": 0
+            }],
+        "listItems": [{
+                "setupAccessibility": 0
+            }]
     }; }
 };
-FormFilter.style = DigiFormFilterStyle0;
+FormFilter.style = formFilterCss();
 
 export { FormFilter as digi_form_filter };

package/dist/esm/digi-form-input-search.entry.js

@@ -1,14 +1,13 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-148a7577.js';
-import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
-import { F as FormInputSearchVariation } from './form-input-search-variation.enum-f9d669f2.js';
-import { a as FormInputType, F as FormInputButtonVariation } from './form-input-type.enum-3da3db27.js';
-import { B as ButtonType } from './button-type.enum-5250ae0b.js';
-import { d as detectClickOutside } from './detectClickOutside.util-72594957.js';
-import { d as detectFocusOutside } from './detectFocusOutside.util-a8676bee.js';
-import './detectClosest.util-58a7504f.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-BnKuq1L7.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
+import { F as FormInputSearchVariation } from './form-input-search-variation.enum-BvWKyXb_.js';
+import { a as FormInputType, F as FormInputButtonVariation } from './form-input-type.enum-BSJH8Lpg.js';
+import { B as ButtonType } from './button-type.enum-DShzaNrQ.js';
+import { d as detectClickOutside } from './detectClickOutside.util-ROzp1Ej2.js';
+import { d as detectFocusOutside } from './detectFocusOutside.util-aFLLVVle.js';
+import './detectClosest.util-DwBvm-Nc.js';
 
-const formInputSearchCss = ".sc-digi-form-input-search-h{--digi--form-input-search--input--border-radius--default:var(--digi--border-radius--input-search);width:100%}.sc-digi-form-input-search-h .digi-form-input-search__input.sc-digi-form-input-search{--digi--form-input--border-radius:var(--digi--form-input-search--input--border-radius--default)}.sc-digi-form-input-search-h .digi-form-input-search--large.sc-digi-form-input-search .digi-form-input-search__button.sc-digi-form-input-search button.sc-digi-form-input-search{font-size:var(--digi--global--typography--font-size--interaction-large);padding:var(--digi--gutter--button-block-large) var(--digi--gutter--button-inline-large)}";
-const DigiFormInputSearchStyle0 = formInputSearchCss;
+const formInputSearchCss = () => `.sc-digi-form-input-search-h{--digi--form-input-search--input--border-radius--default:var(--digi--border-radius--input-search);width:100%}.sc-digi-form-input-search-h .digi-form-input-search__input.sc-digi-form-input-search{--digi--form-input--border-radius:var(--digi--form-input-search--input--border-radius--default)}`;
 
 const FormInputSearch = class {
     constructor(hostRef) {
@@ -26,26 +25,31 @@ const FormInputSearch = class {
         this.afOnClick = createEvent(this, "afOnClick", 7);
         this.afOnSubmitSearch = createEvent(this, "afOnSubmitSearch", 7);
         this.afOnReady = createEvent(this, "afOnReady", 3);
-        this.afLabel = undefined;
-        this.afLabelDescription = undefined;
+        /**
+         * Sätter attributet 'type'.
+         * @en Input type attribute
+         */
         this.afType = FormInputType.SEARCH;
+        /**
+         * Layout för hur inmatningsfältet ska visas då det finns en knapp
+         * @en Input layout when there is a button
+         */
         this.afButtonVariation = FormInputButtonVariation.PRIMARY;
-        this.afName = undefined;
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Input id attribute. Defaults to random string.
+         */
         this.afId = randomIdGenerator('digi-form-input-search');
-        this.value = undefined;
-        this.afValue = undefined;
-        this.afAutocomplete = undefined;
-        this.afAriaAutocomplete = undefined;
-        this.afAriaActivedescendant = undefined;
-        this.afAriaLabelledby = undefined;
-        this.afAriaDescribedby = undefined;
+        /**
+         * Sätter variant. Kan vara 'small', 'medium' eller 'large'
+         * @en Set input variation.
+         */
         this.afVariation = FormInputSearchVariation.MEDIUM;
-        this.afHideButton = undefined;
+        /**
+         * Sätter knappelementets attribut 'type'. Bör vara 'submit' eller 'button'
+         * @en Set button element's type attribute.
+         */
         this.afButtonType = ButtonType.SUBMIT;
-        this.afButtonText = undefined;
-        this.afButtonAriaLabel = undefined;
-        this.afButtonAriaLabelledby = undefined;
-        this.afAutofocus = undefined;
     }
     onValueChanged(value) {
         this.afValue = value;
@@ -138,10 +142,14 @@ const FormInputSearch = class {
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
-        "value": ["onValueChanged"],
-        "afValue": ["onAfValueChanged"]
+        "value": [{
+                "onValueChanged": 0
+            }],
+        "afValue": [{
+                "onAfValueChanged": 0
+            }]
     }; }
 };
-FormInputSearch.style = DigiFormInputSearchStyle0;
+FormInputSearch.style = formInputSearchCss();
 
 export { FormInputSearch as digi_form_input_search };

package/dist/esm/digi-form-input.entry.js

@@ -1,10 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-148a7577.js';
-import { r as randomIdGenerator } from './randomIdGenerator.util-56406f2e.js';
-import { a as FormInputType, F as FormInputButtonVariation } from './form-input-type.enum-3da3db27.js';
-import { F as FormInputMode, b as FormInputVariation, a as FormInputValidation } from './form-input-variation.enum-64d9450f.js';
+import { r as registerInstance, c as createEvent, h, a as Host, d as getElement } from './index-BnKuq1L7.js';
+import { r as randomIdGenerator } from './randomIdGenerator.util-BGaIliX6.js';
+import { a as FormInputType, F as FormInputButtonVariation } from './form-input-type.enum-BSJH8Lpg.js';
+import { F as FormInputMode, b as FormInputVariation, a as FormInputValidation } from './form-input-variation.enum-DfWZa2Wv.js';
 
-const formInputCss = ".sc-digi-form-input-h{--digi--form-input--height--small:var(--digi--input-height--small);--digi--form-input--height--medium:var(--digi--input-height--medium);--digi--form-input--height--large:var(--digi--input-height--large);--digi--form-input--border-radius:var(--digi--border-radius--input);--digi--form-input--padding:0 var(--digi--gutter--medium);--digi--form-input--background--empty:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--neutral:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--success:var(--digi--color--background--interactive--validation--success);--digi--form-input--background--warning:var(--digi--color--background--interactive--validation--warning);--digi--form-input--background--error:var(--digi--color--background--interactive--validation--error);--digi--form-input--border--neutral:var(--digi--border-width--input-regular) solid;--digi--form-input--border--error:var(--digi--border-width--input-validation) solid;--digi--form-input--border--success:var(--digi--border-width--input-validation) solid;--digi--form-input--border--warning:var(--digi--border-width--input-validation) solid;--digi--form-input--border-color--neutral:var(--digi--color--border--interactive--default--on-input);--digi--form-input--border-color--success:var(--digi--color--border--interactive--validation--success);--digi--form-input--border-color--warning:var(--digi--color--border--interactive--validation--warning);--digi--form-input--border-color--error:var(--digi--color--border--interactive--validation--error)}.sc-digi-form-input-h .digi-form-input.sc-digi-form-input{display:flex;flex-direction:column;gap:0.4em}.sc-digi-form-input-h .digi-form-input--small.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--small)}.sc-digi-form-input-h .digi-form-input--medium.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--medium)}.sc-digi-form-input-h .digi-form-input--large.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--large)}.sc-digi-form-input-h .digi-form-input--neutral.sc-digi-form-input{--BORDER:var(--digi--form-input--border--neutral);--BORDER-COLOR:var(--digi--form-input--border-color--neutral);--BACKGROUND:var(--digi--form-input--background--neutral)}.sc-digi-form-input-h .digi-form-input--empty.sc-digi-form-input:not(:focus-within){--BACKGROUND:var(--digi--form-input--background--empty)}.sc-digi-form-input-h .digi-form-input--success.sc-digi-form-input{--BORDER:var(--digi--form-input--border--success);--BORDER-COLOR:var(--digi--form-input--border-color--success);--BACKGROUND:var(--digi--form-input--background--success)}.sc-digi-form-input-h .digi-form-input--warning.sc-digi-form-input{--BORDER:var(--digi--form-input--border--warning);--BORDER-COLOR:var(--digi--form-input--border-color--warning);--BACKGROUND:var(--digi--form-input--background--warning)}.sc-digi-form-input-h .digi-form-input--error.sc-digi-form-input{--BORDER:var(--digi--form-input--border--error);--BORDER-COLOR:var(--digi--form-input--border-color--error);--BACKGROUND:var(--digi--form-input--background--error)}.digi-form-input__input-wrapper.sc-digi-form-input{position:relative;display:flex}.digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{--MIN-HEIGHT:100%}.digi-form-input--button-variation-primary .digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{border-start-start-radius:0;border-end-start-radius:0}.digi-form-input--button-variation-secondary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input-wrapper.sc-digi-form-input{gap:var(--digi--gutter--medium);flex-wrap:wrap}.digi-form-input__input.sc-digi-form-input{flex:1;height:var(--HEIGHT);font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--desktop);padding:var(--digi--form-input--padding);color:var(--digi--color--text--primary);background:var(--BACKGROUND);border:var(--BORDER);border-color:var(--BORDER-COLOR);border-radius:var(--digi--form-input--border-radius);box-sizing:border-box}.digi-form-input__input.sc-digi-form-input:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-form-input--button-variation-primary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input.sc-digi-form-input{border-end-end-radius:0;border-start-end-radius:0}";
-const DigiFormInputStyle0 = formInputCss;
+const formInputCss = () => `.sc-digi-form-input-h{--digi--form-input--height--small:var(--digi--input-height--small);--digi--form-input--height--medium:var(--digi--input-height--medium);--digi--form-input--height--large:var(--digi--input-height--large);--digi--form-input--border-radius:var(--digi--border-radius--input);--digi--form-input--padding:0 var(--digi--gutter--medium);--digi--form-input--background--empty:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--neutral:var(--digi--color--background--interactive--default--input-elements);--digi--form-input--background--success:var(--digi--color--background--interactive--validation--success);--digi--form-input--background--warning:var(--digi--color--background--interactive--validation--warning);--digi--form-input--background--error:var(--digi--color--background--interactive--validation--error);--digi--form-input--border--neutral:var(--digi--border-width--input-regular) solid;--digi--form-input--border--error:var(--digi--border-width--input-validation) solid;--digi--form-input--border--success:var(--digi--border-width--input-validation) solid;--digi--form-input--border--warning:var(--digi--border-width--input-validation) solid;--digi--form-input--border-color--neutral:var(--digi--color--border--interactive--default--on-input);--digi--form-input--border-color--success:var(--digi--color--border--interactive--validation--success);--digi--form-input--border-color--warning:var(--digi--color--border--interactive--validation--warning);--digi--form-input--border-color--error:var(--digi--color--border--interactive--validation--error)}.sc-digi-form-input-h .digi-form-input.sc-digi-form-input{display:flex;flex-direction:column;gap:0.4em}.sc-digi-form-input-h .digi-form-input--small.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--small)}.sc-digi-form-input-h .digi-form-input--medium.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--medium)}.sc-digi-form-input-h .digi-form-input--large.sc-digi-form-input{--HEIGHT:var(--digi--form-input--height--large)}.sc-digi-form-input-h .digi-form-input--neutral.sc-digi-form-input{--BORDER:var(--digi--form-input--border--neutral);--BORDER-COLOR:var(--digi--form-input--border-color--neutral);--BACKGROUND:var(--digi--form-input--background--neutral)}.sc-digi-form-input-h .digi-form-input--empty.sc-digi-form-input:not(:focus-within){--BACKGROUND:var(--digi--form-input--background--empty)}.sc-digi-form-input-h .digi-form-input--success.sc-digi-form-input{--BORDER:var(--digi--form-input--border--success);--BORDER-COLOR:var(--digi--form-input--border-color--success);--BACKGROUND:var(--digi--form-input--background--success)}.sc-digi-form-input-h .digi-form-input--warning.sc-digi-form-input{--BORDER:var(--digi--form-input--border--warning);--BORDER-COLOR:var(--digi--form-input--border-color--warning);--BACKGROUND:var(--digi--form-input--background--warning)}.sc-digi-form-input-h .digi-form-input--error.sc-digi-form-input{--BORDER:var(--digi--form-input--border--error);--BORDER-COLOR:var(--digi--form-input--border-color--error);--BACKGROUND:var(--digi--form-input--background--error)}.digi-form-input__input-wrapper.sc-digi-form-input{position:relative;display:flex}.digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{--MIN-HEIGHT:100%}.digi-form-input--button-variation-primary .digi-form-input__input-wrapper.sc-digi-form-input-s>[slot^=button] button,.digi-form-input__input-wrapper .sc-digi-form-input-s>[slot^=button] button{border-start-start-radius:0;border-end-start-radius:0}.digi-form-input--button-variation-secondary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input-wrapper.sc-digi-form-input{gap:var(--digi--gutter--medium);flex-wrap:wrap}.digi-form-input__input.sc-digi-form-input{flex:1;height:var(--HEIGHT);font-family:var(--digi--global--typography--font-family--default);font-size:var(--digi--typography--body--font-size--desktop);padding:var(--digi--form-input--padding);color:var(--digi--color--text--primary);background:var(--BACKGROUND);border:var(--BORDER);border-color:var(--BORDER-COLOR);border-radius:var(--digi--form-input--border-radius);box-sizing:border-box}.digi-form-input__input.sc-digi-form-input:focus-visible{outline:2px solid black;outline-offset:2px;box-shadow:0px 0px 0px 5px white}.digi-form-input--button-variation-primary.digi-form-input--has-button-true.sc-digi-form-input .digi-form-input__input.sc-digi-form-input{border-end-end-radius:0;border-start-end-radius:0}`;
 
 const FormInput = class {
     constructor(hostRef) {
@@ -19,41 +18,49 @@ const FormInput = class {
         this.afOnTouched = createEvent(this, "afOnTouched", 7);
         this.afOnReady = createEvent(this, "afOnReady", 3);
         this.hasActiveValidationMessage = false;
-        this.hasButton = undefined;
         this.dirty = false;
         this.touched = false;
-        this.afLabel = undefined;
-        this.afLabelDescription = undefined;
+        /**
+         * Sätter attributet 'type'.
+         * @en Input type attribute
+         */
         this.afType = FormInputType.TEXT;
+        /**
+         * Sätter attributet 'inputmode'.
+         * @en Inputmode  type attribute
+         */
         this.afInputmode = FormInputMode.DEFAULT;
+        /**
+         * Layout för hur inmatningsfältet ska visas då det finns en knapp
+         * @en Input layout when there is a button
+         */
         this.afButtonVariation = FormInputButtonVariation.PRIMARY;
-        this.afAutofocus = undefined;
+        /**
+         * Sätter variant. Kan vara 'small', 'medium' eller 'large'
+         * @en Set input variation.
+         */
         this.afVariation = FormInputVariation.MEDIUM;
-        this.afName = undefined;
+        /**
+         * Sätter attributet 'id'. Om inget väljs så skapas ett slumpmässigt id.
+         * @en Input id attribute. Defaults to random string.
+         */
         this.afId = randomIdGenerator('digi-form-input');
-        this.afMaxlength = undefined;
-        this.afMinlength = undefined;
-        this.afRequired = undefined;
-        this.afRequiredText = undefined;
+        /**
+         * Sätt denna till true om formuläret innehåller fler obligatoriska fält än valfria.
+         * @en Set this to true if the form contains more required fields than optional fields.
+         */
         this.afAnnounceIfOptional = false;
-        this.afAnnounceIfOptionalText = undefined;
-        this.value = undefined;
-        this.afValue = undefined;
+        /**
+         * Sätter valideringsstatus. Kan vara 'success', 'error', 'warning', 'neutral' eller ingenting.
+         * @en Set input validation status
+         */
         this.afValidation = FormInputValidation.NEUTRAL;
-        this.afValidationText = undefined;
-        this.afRole = undefined;
-        this.afAutocomplete = undefined;
-        this.afMin = undefined;
-        this.afMax = undefined;
-        this.afList = undefined;
-        this.afStep = undefined;
-        this.afDirname = undefined;
-        this.afAriaAutocomplete = undefined;
-        this.afAriaActivedescendant = undefined;
-        this.afAriaLabelledby = undefined;
-        this.afAriaDescribedby = undefined;
-        this.afAriaControls = undefined;
-        this.afTrimValue = undefined;
+        /**
+         * Om värdet är true får felmeddelandet attributet role="alert".
+         * Om felet visas tillsammans med flera andra fel (till exempel efter servervalidering) ska värdet sättas till false.
+         * @en If the value is true, the error message gets the attribute role="alert".
+         * If the error is shown together with multiple errors (for example after server-side validation), the value should be set to false.
+         */
         this.afErrorMessageIsAlert = true;
     }
     onValueChanged(value) {
@@ -180,11 +187,17 @@ const FormInput = class {
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
-        "value": ["onValueChanged"],
-        "afValue": ["onAfValueChanged"],
-        "afValidationText": ["afValidationTextWatch"]
+        "value": [{
+                "onValueChanged": 0
+            }],
+        "afValue": [{
+                "onAfValueChanged": 0
+            }],
+        "afValidationText": [{
+                "afValidationTextWatch": 0
+            }]
     }; }
 };
-FormInput.style = DigiFormInputStyle0;
+FormInput.style = formInputCss();
 
 export { FormInput as digi_form_input };