@mrfylke/contact-form 0.1.4 → 0.1.7

package/lib/components/form/form.module.css

@@ -3,571 +3,587 @@
 @value typo-body__m from "@atb-as/theme/lib/generated/typography.module.css";
 
 .container {
-    composes: typo-body__s;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    gap: token('spacing.small');
-    color: token('color.background.neutral.0.foreground.primary');
-    background-color: token('color.background.neutral.0.background');
+  composes: typo-body__s;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: token('spacing.small');
+  color: token('color.background.neutral.0.foreground.primary');
+  background-color: token('color.background.neutral.0.background');
 }
 
 .rowDisplay {
-    flex-direction: row-reverse;
-    justify-content: start;
-    gap: token('spacing.small');
+  flex-direction: row-reverse;
+  justify-content: start;
+  gap: token('spacing.small');
 }
 
 .input {
-    background: transparent;
-    color: token('color.foreground.dynamic.primary');
+  background: transparent;
+  color: token('color.foreground.dynamic.primary');
 
-    padding: token('spacing.small');
+  padding: token('spacing.small');
 
-    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
-    border-radius: token('border.radius.small');
-    width: 100%;
+  border: token('border.width.slim') solid
+    token('color.foreground.dynamic.primary');
+  border-radius: token('border.radius.small');
+  width: 100%;
 }
 
 .input:focus {
-    outline: 0;
+  outline: 0;
 }
 
 .input::placeholder {
-    color: token('color.foreground.dynamic.secondary');
-    opacity: 1;
+  color: token('color.foreground.dynamic.secondary');
+  opacity: 1;
 }
 
 .input:disabled {
-    cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .input:disabled::placeholder {
-    color: token('color.foreground.dynamic.disabled');
+  color: token('color.foreground.dynamic.disabled');
 }
 
 .input:focus-within {
-    outline: 0;
-    box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.2.outline.background');
+  outline: 0;
+  box-shadow: inset 0 0 0 token('border.width.slim')
+    token('color.interactive.2.outline.background');
 }
 
 .input__error {
-    border-color: token('color.status.error.primary.background');
+  border-color: token('color.status.error.primary.background');
 }
 
 /* radio */
 .input__radio {
-    clip: rect(0 0 0 0);
-    clip-path: inset(100%);
-    height: 1px;
-    overflow: hidden;
-    position: absolute;
-    white-space: nowrap;
-    width: 1px;
-    display: block;
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+  display: block;
 }
 
 .input__radio:focus + .label__radio .label__radioBox {
-    outline: 2px solid token('color.interactive.2.outline.background');
-    outline-offset: 2px;
+  outline: 2px solid token('color.interactive.2.outline.background');
+  outline-offset: 2px;
 }
 
 .label__radioBox:hover {
-    background-color: token('color.interactive.2.hover.background');
-    color: token('color.interactive.2.hover.foreground.primary');
+  background-color: token('color.interactive.2.hover.background');
+  color: token('color.interactive.2.hover.foreground.primary');
 }
 
 .label__radioBox {
-    display: block;
-    border-radius: 50%;
-    height: 1.25rem;
-    width: 1.25rem;
-    --padding: 2px;
-    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
-    padding: var(--padding);
-    margin-right: token('spacing.medium');
+  display: block;
+  border-radius: 50%;
+  height: 1.25rem;
+  width: 1.25rem;
+  --padding: 2px;
+  border: token('border.width.slim') solid
+    token('color.foreground.dynamic.primary');
+  padding: var(--padding);
+  margin-right: token('spacing.medium');
 }
 
 .label__radioBox::after {
-    content: '';
-    display: block;
-    height: calc(1rem - 2 * token('border.width.slim'));
-    width: calc(1rem - 2 * token('border.width.slim'));
-    border-radius: 50%;
-    background: token('color.foreground.dynamic.primary');
+  content: '';
+  display: block;
+  height: calc(1rem - 2 * token('border.width.slim'));
+  width: calc(1rem - 2 * token('border.width.slim'));
+  border-radius: 50%;
+  background: token('color.foreground.dynamic.primary');
 
-    transition: transform 100ms ease-in;
-    transform: scale(0);
+  transition: transform 100ms ease-in;
+  transform: scale(0);
 }
 
 .input__radio:checked + .label__radio .label__radioBox::after {
-    transform: scale(1);
+  transform: scale(1);
 }
 
 .label__radio {
-    display: flex;
-    cursor: pointer;
+  display: flex;
+  cursor: pointer;
 
-    background: token('color.background.neutral.0.background');
-    color: token('color.background.neutral.0.foreground.primary');
+  background: token('color.background.neutral.0.background');
+  color: token('color.background.neutral.0.foreground.primary');
 
-    border-radius: token('border.radius.regular');
+  border-radius: token('border.radius.regular');
 
-    border: token('border.width.slim') solid transparent;
+  border: token('border.width.slim') solid transparent;
 
-    padding: token('spacing.small') 0;
+  padding: token('spacing.small') 0;
 }
 
 .label__info {
-    display: flex;
-    align-items: center;
-    gap: token('spacing.medium');
-    margin: token('spacing.small');
-    margin-left: token('spacing.large');
-    padding: token('spacing.small');
-    background: token('color.background.neutral.1.background');
+  display: flex;
+  align-items: center;
+  gap: token('spacing.medium');
+  margin: token('spacing.small');
+  margin-left: token('spacing.large');
+  padding: token('spacing.small');
+  background: token('color.background.neutral.1.background');
 }
 
 .label_container {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
 
 /* Icon button */
 .iconButton {
-    background: transparent;
-    padding: 0;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    border: none;
-    border-radius: 50%;
+  background: transparent;
+  padding: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  border: none;
+  border-radius: 50%;
 }
 
 .iconButton:focus {
-    outline: 2px solid token('color.interactive.2.outline.background');
-    outline-offset: 2px;
+  outline: 2px solid token('color.interactive.2.outline.background');
+  outline-offset: 2px;
 }
 
 .iconButton:hover {
-    background-color: token('color.interactive.2.hover.background');
-    color: token('color.interactive.2.hover.foreground.primary');
+  background-color: token('color.interactive.2.hover.background');
+  color: token('color.interactive.2.hover.foreground.primary');
 }
 
 /* textare */
 .textarea_container {
-    display: flex;
-    flex-direction: column;
-    gap: token('spacing.small');
+  display: flex;
+  flex-direction: column;
+  gap: token('spacing.small');
 }
 
 .textarea {
-    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
-    border-radius: token('border.radius.small');
-    padding: token('spacing.small');
-    width: 100%;
-    min-height: 6rem;
-    font-family: var(--font-main) !important;
-    font-size: 1rem !important;
-    line-height: var(--baseTypo-body__m-lineHeight, 1.25rem) !important;
-    letter-spacing: var(
-            --baseTypo-body__m-letterSpacing,
-            0.03125rem
-    ) !important;
+  border: token('border.width.slim') solid
+    token('color.foreground.dynamic.primary');
+  border-radius: token('border.radius.small');
+  padding: token('spacing.small');
+  width: 100%;
+  min-height: 6rem;
+  font-family: var(--font-main) !important;
+  font-size: 1rem !important;
+  line-height: var(--baseTypo-body__m-lineHeight, 1.25rem) !important;
+  letter-spacing: var(--baseTypo-body__m-letterSpacing, 0.03125rem) !important;
 }
 
 /** file input */
 .file_input__container {
-    display: flex;
-    flex-direction: column;
-    gap: token('spacing.small');
+  display: flex;
+  flex-direction: column;
+  gap: token('spacing.small');
 }
 
 .input__file {
-    opacity: 0;
-    display: none;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
+  opacity: 0;
+  display: none;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
 }
 
 .label__file {
-    display: flex;
-    gap: token('spacing.small');
-    align-items: center;
-    background-color: token('color.background.neutral.1.background');
-    color: token('color.foreground.dynamic.primary');
-    padding: token('spacing.small');
-    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
-    border-radius: token('border.radius.small');
-    cursor: pointer;
+  display: flex;
+  gap: token('spacing.small');
+  align-items: center;
+  background-color: token('color.background.neutral.1.background');
+  color: token('color.foreground.dynamic.primary');
+  padding: token('spacing.small');
+  border: token('border.width.slim') solid
+    token('color.foreground.dynamic.primary');
+  border-radius: token('border.radius.small');
+  cursor: pointer;
 }
 
 .label__file:focus {
-    outline: 0;
-    box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.2.outline.background');
+  outline: 0;
+  box-shadow: inset 0 0 0 token('border.width.slim')
+    token('color.interactive.2.outline.background');
 }
 
 .label__file:hover {
-    background-color: token('color.interactive.2.hover.background');
-    color: token('color.interactive.2.hover.foreground.primary');
+  background-color: token('color.interactive.2.hover.background');
+  color: token('color.interactive.2.hover.foreground.primary');
 }
 
 .fileList {
-    display: flex;
-    flex-direction: column;
-    gap: token('spacing.small');
-    padding: token('spacing.small') 0;
+  display: flex;
+  flex-direction: column;
+  gap: token('spacing.small');
+  padding: token('spacing.small') 0;
 }
 
 .fileItem {
-    display: flex;
-    align-items: center;
-    gap: token('spacing.small');
+  display: flex;
+  align-items: center;
+  gap: token('spacing.small');
 }
 
 /* modal */
 .modal_wrapper {
-    position: fixed;
-    z-index: 200;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  position: fixed;
+  z-index: 200;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .modal_content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    max-width: 32rem;
-    padding: token('spacing.large');
-    border: token('border.width.medium') solid token('color.interactive.2.outline.background'); /* Use border property */
-    box-shadow: inset 0 0 0 token('border.width.medium') token('color.interactive.2.outline.background');
-    color: token('color.background.neutral.0.foreground.primary');
-    background-color: token('color.background.neutral.0.background');
-    border-radius: token('border.radius.regular');
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  max-width: 32rem;
+  padding: token('spacing.large');
+  border: token('border.width.medium') solid
+    token('color.interactive.2.outline.background'); /* Use border property */
+  box-shadow: inset 0 0 0 token('border.width.medium')
+    token('color.interactive.2.outline.background');
+  color: token('color.background.neutral.0.foreground.primary');
+  background-color: token('color.background.neutral.0.background');
+  border-radius: token('border.radius.regular');
 }
 
 .modal_content > * + * {
-    margin-top: token('spacing.small');
+  margin-top: token('spacing.small');
 }
 
 .modal_header {
-    display: flex;
-    justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 }
 
 .modal__rules_list {
-    padding: token('spacing.medium');
-    padding-left: token('spacing.xLarge');
+  padding: token('spacing.medium');
+  padding-left: token('spacing.xLarge');
 }
 
 .modal__rules_list > li {
-    padding: token('spacing.xSmall') 0;
+  padding: token('spacing.xSmall') 0;
 }
 
 /* select and searchable-select*/
 .select__select_container,
 .searchable_select__comboBox {
-    display: flex;
-    flex-direction: column;
-    gap: token('spacing.small');
+  display: flex;
+  flex-direction: column;
+  gap: token('spacing.small');
 }
 
 .searchable_select__input_container {
-    position: relative;
-    display: flex;
-    align-items: center;
+  position: relative;
+  display: flex;
+  align-items: center;
 }
 
 .searchable_select__group,
 .searchable_select__disabled {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
-    border-radius: token('border.radius.small');
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  border: token('border.width.slim') solid
+    token('color.foreground.dynamic.primary');
+  border-radius: token('border.radius.small');
 }
 
 .searchable_select__group:focus-within {
-    outline: 0;
-    box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.2.outline.background');
+  outline: 0;
+  box-shadow: inset 0 0 0 token('border.width.slim')
+    token('color.interactive.2.outline.background');
 }
 
 .searchable_select__input {
-    flex-grow: 2;
-    border: none;
-    outline: none;
-    padding: token('spacing.small');
-    background-color: transparent;
-    color: token('color.background.neutral.2.foreground.primary');
+  flex-grow: 2;
+  border: none;
+  outline: none;
+  padding: token('spacing.small');
+  background-color: transparent;
+  color: token('color.background.neutral.2.foreground.primary');
 }
 
 .searchable_select__input_disabled {
-    cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .searchable_select__input::placeholder {
-    color: token('color.foreground.dynamic.secondary');
-    opacity: 1;
+  color: token('color.foreground.dynamic.secondary');
+  opacity: 1;
 }
 
 .searchable_select__input:not(:focus):placeholder-shown {
-    color: token('color.foreground.dynamic.secondary');
-    font-style: italic;
-    opacity: 0.7;
+  color: token('color.foreground.dynamic.secondary');
+  font-style: italic;
+  opacity: 0.7;
 }
 
 .searchable_select__button {
-    display: flex;
-    border: none;
-    padding: token('spacing.small');
-    background-color: transparent;
+  display: flex;
+  border: none;
+  padding: token('spacing.small');
+  background-color: transparent;
 }
 
 .searchable_select__button:disabled {
-    cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .select__popover,
 .searchable_select__popover {
-    overflow: auto;
-    max-height: 16rem;
-    width: var(--trigger-width);
-    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
-    border-radius: token('border.radius.small');
-    color: token('color.background.neutral.0.foreground.primary');
-    background: token('color.background.neutral.0.background');
-    animation: fadeIn 0.2s;
-    padding: token('spacing.small');
-    margin-bottom: token('spacing.small');
+  overflow: auto;
+  max-height: 16rem;
+  width: var(--trigger-width);
+  border: token('border.width.slim') solid
+    token('color.foreground.dynamic.primary');
+  border-radius: token('border.radius.small');
+  color: token('color.background.neutral.0.foreground.primary');
+  background: token('color.background.neutral.0.background');
+  animation: fadeIn 0.2s;
+  padding: token('spacing.small');
+  margin-bottom: token('spacing.small');
 }
 
 @keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .select__listBox,
 .searchable_select__listBox {
-    max-height: 16rem;
-    overflow-y: auto;
-    outline: none;
+  max-height: 16rem;
+  overflow-y: auto;
+  outline: none;
 }
 
 .searchable_select__truncate {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .select__listBoxItem,
 .searchable_select__listBoxItem {
-    display: flex;
-    align-items: center;
-    cursor: default;
-    color: token('color.background.neutral.0.foreground.primary');
-    border-radius: token('border.radius.small');
-    border-bottom: 1px solid token('color.background.neutral.2.background');
-    z-index: 1;
+  display: flex;
+  align-items: center;
+  cursor: default;
+  color: token('color.background.neutral.0.foreground.primary');
+  border-radius: token('border.radius.small');
+  border-bottom: 1px solid token('color.background.neutral.2.background');
+  z-index: 1;
 }
 
 .select__item,
 .searchable_select__item {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: token('spacing.small');
-    padding: token('spacing.small');
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: token('spacing.small');
+  padding: token('spacing.small');
 }
 
 .select__item:active,
 .searchable_select__item:active {
-    background-color: token('color.interactive.3.active.background');
-    color: token('color.interactive.3.active.foreground.primary');
-    z-index: 2;
+  background-color: token('color.interactive.3.active.background');
+  color: token('color.interactive.3.active.foreground.primary');
+  z-index: 2;
 }
 
 .select__highlight,
 .searchable_select__highlight {
-    position: relative;
-    border-radius: token('border.radius.small');
-    background-color: token('color.interactive.2.active.background');
-    color: token('color.interactive.2.active.foreground.primary');
-    z-index: 2;
+  position: relative;
+  border-radius: token('border.radius.small');
+  background-color: token('color.interactive.2.active.background');
+  color: token('color.interactive.2.active.foreground.primary');
+  z-index: 2;
 }
 
 .searchable_select__selected {
-    position: relative;
-    border-radius: token('border.radius.small');
-    background-color: token('color.interactive.2.active.background');
-    color: token('color.interactive.2.active.foreground.primary');
-    z-index: 2;
+  position: relative;
+  border-radius: token('border.radius.small');
+  background-color: token('color.interactive.2.active.background');
+  color: token('color.interactive.2.active.foreground.primary');
+  z-index: 2;
 }
 
 .select__button {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: token('spacing.small');
-    color: token('color.foreground.dynamic.primary');
-    background-color: transparent;
-    border-radius: token('border.radius.small');
-    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: token('spacing.small');
+  color: token('color.foreground.dynamic.primary');
+  background-color: transparent;
+  border-radius: token('border.radius.small');
+  border: token('border.width.slim') solid
+    token('color.foreground.dynamic.primary');
 }
 
 .select__button:disabled {
-    cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .select__button:focus-within {
-    outline: 0;
-    box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.2.outline.background');
+  outline: 0;
+  box-shadow: inset 0 0 0 token('border.width.slim')
+    token('color.interactive.2.outline.background');
 }
 
 .select__item:focus,
 .select__listBoxItem:focus {
-    outline: 0;
-    border-radius: token('border.radius.small');
+  outline: 0;
+  border-radius: token('border.radius.small');
 }
 
 .select__placholder {
-    font-style: italic;
-    opacity: 0.7;
-    padding-right: token('spacing.small');
+  font-style: italic;
+  opacity: 0.7;
+  padding-right: token('spacing.small');
 }
 
 /* Time and date selector */
 .dateSelectorContainer,
 .timeSelectorContainer {
-    display: flex;
-    flex-direction: column;
-    gap: token('spacing.small');
+  display: flex;
+  flex-direction: column;
+  gap: token('spacing.small');
 }
 
 .dateSelector,
 .timeSelector {
-    display: contents;
-    --height: 2.75rem;
-    overflow: hidden;
-    border-radius: token('border.radius.small');
+  display: contents;
+  --height: 2.75rem;
+  overflow: hidden;
+  border-radius: token('border.radius.small');
 }
 
 .dateSelector input[type='date'],
 .timeSelector input[type='time'] {
-    height: var(--height);
-    padding: token('spacing.medium');
-    border: none;
-    background-color: transparent;
-    color: token('color.background.neutral.0.foreground.primary');
-    flex: 1;
+  height: var(--height);
+  padding: token('spacing.medium');
+  border: none;
+  background-color: transparent;
+  color: token('color.background.neutral.0.foreground.primary');
+  flex: 1;
 }
 
 .dateSelectorInput,
 .timeSelectorInput {
-    width: 100%;
-    height: var(--height);
-    display: flex;
-    align-items: center;
-    padding: token('spacing.medium');
-    color: token('color.background.neutral.0.foreground.primary');
-    border-radius: token('border.radius.small');
-    border: token('border.width.slim') solid token('color.foreground.dynamic.primary');
+  width: 100%;
+  height: var(--height);
+  display: flex;
+  align-items: center;
+  padding: token('spacing.medium');
+  color: token('color.background.neutral.0.foreground.primary');
+  border-radius: token('border.radius.small');
+  border: token('border.width.slim') solid
+    token('color.foreground.dynamic.primary');
 }
 
 .dateSelectorInput:focus-within,
 .timeSelectorInput:focus-within {
-    box-shadow: inset 0 0 0 token('border.width.slim') token('color.interactive.2.outline.background');
+  box-shadow: inset 0 0 0 token('border.width.slim')
+    token('color.interactive.2.outline.background');
 }
 
 .dateSelectorSegment:focus,
 .timeSelectorSegment:focus {
-    border-radius: token('border.radius.small');
+  border-radius: token('border.radius.small');
 }
 
 .calendarSelectorGroup {
-    display: flex;
-    position: relative;
-    width: 100%;
+  display: flex;
+  position: relative;
+  width: 100%;
 }
 
 .calendarButton {
-    position: absolute;
-    right: 0;
-    border: none;
-    cursor: pointer;
-    background: none;
-    margin: token('spacing.medium');
-    border-radius: token('border.radius.small');
+  position: absolute;
+  right: 0;
+  border: none;
+  cursor: pointer;
+  background: none;
+  margin: token('spacing.medium');
+  border-radius: token('border.radius.small');
 }
 
 .calendarDialog {
-    padding: token('spacing.xSmall');
-    background: token('color.background.neutral.0.background');
-    box-shadow: 0.2rem 0.2rem 0.3rem rgba(0, 0, 0, 0.15);
+  padding: token('spacing.xSmall');
+  background: token('color.background.neutral.0.background');
+  box-shadow: 0.2rem 0.2rem 0.3rem rgba(0, 0, 0, 0.15);
 }
 
 .calendarDialog__header {
-    display: flex;
-    gap: token('spacing.medium');
-    justify-content: center;
-    align-items: center;
-    padding: token('spacing.small');
+  display: flex;
+  gap: token('spacing.medium');
+  justify-content: center;
+  align-items: center;
+  padding: token('spacing.small');
 }
 
 .calendarDialog__title {
-    composes: typo-heading__m from '@atb-as/theme/lib/generated/typography.module.css';
+  composes: typo-heading__m from '@atb-as/theme/lib/generated/typography.module.css';
 }
 
 .calendarDialog__headerButtons {
-    background: none;
-    border: none;
-    padding: token('spacing.xSmall') token('spacing.medium');
-    cursor: pointer;
+  background: none;
+  border: none;
+  padding: token('spacing.xSmall') token('spacing.medium');
+  cursor: pointer;
 }
 
 .calendarGrid {
-    width: 100%;
+  width: 100%;
 }
 
 .calendarGrid__cell {
-    padding: token('spacing.xSmall') token('spacing.medium');
-    cursor: pointer;
-    text-align: center;
-    border-radius: token('border.radius.small');
+  padding: token('spacing.xSmall') token('spacing.medium');
+  cursor: pointer;
+  text-align: center;
+  border-radius: token('border.radius.small');
 }
 
 .calendarGrid__cell[data-disabled] {
-    opacity: 0.3;
-    cursor: default;
+  opacity: 0.3;
+  cursor: default;
 }
 
 .calendarGrid__cell[data-selected] {
-    background-color: token('color.interactive.2.active.background');
-    color: token('color.interactive.2.active.foreground.primary');
-    font-weight: bold;
-    border-radius: token('border.radius.small');
+  background-color: token('color.interactive.2.active.background');
+  color: token('color.interactive.2.active.foreground.primary');
+  font-weight: bold;
+  border-radius: token('border.radius.small');
 }
 
-:global(.dark) .dateSelector input[type='date']::-webkit-calendar-picker-indicator,
-:global(.dark) .timeSelector input[type='time']::-webkit-calendar-picker-indicator {
-    filter: invert(1);
+:global(.dark)
+  .dateSelector
+  input[type='date']::-webkit-calendar-picker-indicator,
+:global(.dark)
+  .timeSelector
+  input[type='time']::-webkit-calendar-picker-indicator {
+  filter: invert(1);
 }
 
 .required::after {
-    content: '*';
-    color: token('color.status.error.primary.background');
-    margin-left: token('spacing.small');
+  content: '*';
+  color: token('color.status.error.primary.background');
+  margin-left: token('spacing.small');
 }