profile-pane 3.2.3-0 → 3.2.3-2

package/lib/styles/EditDialogs.responsive.css

@@ -36,9 +36,9 @@ html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .
 
 html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob {
   display: block;
-  height: var(--min-touch-target, 44px);
-  min-height: var(--min-touch-target, 44px);
-  max-height: var(--min-touch-target, 44px);
+  height: var(--solid-ui-clickable-area, 42px);
+  min-height: var(--solid-ui-clickable-area, 42px);
+  max-height: var(--solid-ui-clickable-area, 42px);
   box-sizing: border-box;
   width: 100%;
   max-width: 100%;
@@ -62,21 +62,21 @@ html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .
 }
 
 @media (hover: none) and (pointer: coarse) {
-  /* Mobile date inputs can ignore the shared 44px field sizing and let the native picker chrome spill past the dialog field. */
+  /* Mobile date inputs can ignore the shared 42px field sizing and let the native picker chrome spill past the dialog field. */
   html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob {
-    height: var(--min-touch-target, 44px);
-    min-height: var(--min-touch-target, 44px);
-    max-height: var(--min-touch-target, 44px);
-    line-height: calc(var(--min-touch-target, 44px) - 2px);
+    height: var(--solid-ui-clickable-area, 42px);
+    min-height: var(--solid-ui-clickable-area, 42px);
+    max-height: var(--solid-ui-clickable-area, 42px);
+    line-height: calc(var(--solid-ui-clickable-area, 42px) - 2px);
     padding-block: 0;
-    width: calc(100% - 1.5rem);
-    max-width: calc(100% - 1.5rem);
+    width: calc(100% - 24px);
+    max-width: calc(100% - 24px);
   }
 
   html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob::-webkit-date-and-time-value,
   html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob::-webkit-datetime-edit,
   html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob::-webkit-datetime-edit-fields-wrapper {
-    line-height: calc(var(--min-touch-target, 44px) - 2px);
+    line-height: calc(var(--solid-ui-clickable-area, 42px) - 2px);
   }
 
   html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .profile-edit-dialog__input--dob::-webkit-calendar-picker-indicator {
@@ -86,8 +86,8 @@ html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog--heading .
 }
 
 html[data-layout='mobile'] .profile__edit-form {
-  --profile-edit-dialog-mobile-image-button-font-size: var(--font-size-md, 1rem);
-  --profile-edit-dialog-mobile-image-label-font-size: var(--font-size-sm, 0.875rem);
+  --profile-edit-dialog-mobile-image-button-font-size: var(--solid-ui-font-size-md, 1rem);
+  --profile-edit-dialog-mobile-image-label-font-size: var(--solid-ui-font-size-sm, 0.875rem);
   --profile-edit-dialog-mobile-image-description-font-size: 0.625rem;
 }
 
@@ -97,37 +97,23 @@ html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__field > .
 html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__field-type > .label,
 html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__field-description,
 html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__entry-heading {
-  font-size: var(--font-size-sm, 0.875rem);
-  line-height: var(--line-height-base, 1.5);
+  font-size: var(--solid-ui-font-size-sm, 0.875rem);
+  line-height: 1.5;
 }
 
 html[data-layout='mobile'] .profile-edit-dialog__section-heading {
-  font-size: var(--font-size-lg, 1.125rem);
-  line-height: var(--line-height-tight, 1.4);
+  font-size: var(--solid-ui-font-size-lg, 1.125rem);
+  line-height: 1.4;
 }
 
 html[data-layout='mobile'] #profile-modal .modal .profile__section-header .profile-edit-dialog__section-heading {
-  font-size: var(--font-size-lg, 1.125rem);
-  line-height: var(--line-height-tight, 1.4);
-}
-
-html[data-layout='mobile'] #profile-modal .modal .profile__section-header .profile__action-button,
-html[data-layout='mobile'] #profile-modal .modal .profile__section-header solid-ui-button.profile__action-button::part(button) {
-  font-size: var(--font-size-sm, 0.875rem);
-  line-height: var(--line-height-base, 1.5);
+  font-size: var(--solid-ui-font-size-lg, 1.125rem);
+  line-height: 1.4;
 }
 
 html[data-layout='mobile'] #profile-modal .modal .profile__section-header .profile__add-more-content,
 html[data-layout='mobile'] #profile-modal .modal .profile__section-header .profile-section-collapsible__edit-label {
-  font-size: var(--font-size-sm, 0.875rem);
-}
-
-html[data-layout='mobile'] #profile-modal .modal .profile__section-header .profile__add-more-icon,
-html[data-layout='mobile'] #profile-modal .modal .profile__section-header .profile-section-collapsible__edit-icon {
-  width: var(--icon-xxs, 1rem);
-  height: var(--icon-xxs, 1rem);
-  padding: 0.125rem;
-  box-sizing: border-box;
+  font-size: var(--solid-ui-font-size-sm, 0.875rem);
 }
 
 html[data-layout='mobile'] #profile-modal .modal .profile__section-header .profile__add-more-icon svg,
@@ -149,9 +135,10 @@ html[data-layout='mobile'] .profile-edit-dialog__textarea {
 }
 
 html[data-layout='mobile'] .profile-edit-dialog__input--with-action {
-  padding-right: 6.5rem;
+  padding-right: 104px;
 }
 
+/* leaving this in case i have to use the regular button */
 html[data-layout='mobile'] .profile-edit-dialog__paste-button {
   right: var(--spacing-xxs, 0.3125rem);
   --button-padding-md: var(--spacing-xxs, 0.3125rem) var(--spacing-xxs, 0.3125rem);
@@ -165,14 +152,14 @@ html[data-layout='mobile'] .profile-edit-dialog__field select,
 html[data-layout='mobile'] .profile-edit-dialog__field-type input,
 html[data-layout='mobile'] .profile-edit-dialog__field-type select,
 html[data-layout='mobile'] .profile-edit-dialog__textarea {
-  font-size: 1rem; 
+  font-size: var(--solid-ui-font-size-md, 1rem); 
 }
 
 html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__field solid-ui-select,
 html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__field solid-ui-combobox,
 html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__field-type solid-ui-select,
 html[data-layout='mobile'] #profile-modal .modal .profile-edit-dialog__field-type solid-ui-combobox {
-  --font-size-sm: 1rem; 
+  --font-size-sm: var(--solid-ui-font-size-md, 1rem); 
 }
 
 html[data-layout='mobile'] #profile-modal .modal solid-ui-combobox::part(input),
@@ -182,7 +169,7 @@ html[data-layout='mobile'] #profile-modal .modal solid-ui-select::part(select-tr
 html[data-layout='mobile'] #profile-modal .modal solid-ui-select::part(trigger-label),
 html[data-layout='mobile'] #profile-modal .modal solid-ui-select::part(option),
 html[data-layout='mobile'] #profile-modal .modal solid-ui-select::part(selected-option) {
-  font-size: 1rem;
+  font-size: var(--solid-ui-font-size-md, 1rem); 
 }
 
 
@@ -215,7 +202,7 @@ html[data-layout='mobile'] .profile-edit-dialog__row--address-header {
 
 html[data-layout='mobile'] .profile-edit-dialog__row--social {
   margin-left: 0;
-  gap: var(--spacing-2xs, 0.625rem);
+  gap: 10px;
   flex-direction: row;
   align-items: center;
   flex-wrap: nowrap;
@@ -226,9 +213,9 @@ html[data-layout='mobile'] .profile-edit-dialog__row--social .profile-edit-dialo
 }
 
 html[data-layout='mobile'] .profile-edit-dialog__field--social-type {
-  flex: 0 0 4.75rem;
-  width: 4.75rem;
-  max-width: 4.75rem;
+  flex: 0 0 76px;
+  width: 76px;
+  max-width: 76px;
 }
 
 html[data-layout='mobile'] .profile-edit-dialog__field--social-url {
@@ -246,27 +233,20 @@ html[data-layout='mobile'] .profile-edit-dialog__row--language {
   flex-direction: row;
   align-items: center;
   flex-wrap: nowrap;
-  gap: var(--spacing-xxs, 0.3125rem);
-  margin-left: calc(-1 * var(--spacing-xxs, 0.3125rem));
+  gap: 5px;
+  margin-left: calc(-1 * 5px);
 }
 
 html[data-layout='mobile'] .profile-edit-dialog__row--language > .profile-edit-dialog__field--language-name {
   flex: 1 1 0;
   min-width: 0;
-  margin-left: calc(-1 * var(--spacing-xxs, 0.3125rem));
+  margin-left: calc(-1 * 5px);
 }
 
 html[data-layout='mobile'] .profile-edit-dialog__actions--language {
   margin-left: 0;
 }
 
-html[data-layout='mobile'] .profile-edit-dialog__row--language > .profile-edit-dialog__drag-handle,
-html[data-layout='mobile'] .profile-edit-dialog__actions--language > solid-ui-button.profile-edit-dialog__delete-button {
-  min-width: var(--min-touch-target, 44px);
-  min-height: var(--min-touch-target, 44px);
-  --button-height-md: var(--min-touch-target, 44px);
-}
-
 html[data-layout='mobile'] .profile-edit-dialog__row--resume-entry-header {
   flex-direction: row;
   align-items: center;
@@ -283,7 +263,7 @@ html[data-layout='mobile'] .profile-edit-dialog__row--skill {
   flex-direction: row;
   align-items: center;
   flex-wrap: nowrap;
-  gap: var(--spacing-2xs, 0.625rem);
+  gap: 10px;
 }
 
 html[data-layout='mobile'] .profile-edit-dialog__row--skill > .profile-edit-dialog__field {
@@ -300,7 +280,7 @@ html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__r
   flex-direction: row;
   align-items: center;
   flex-wrap: nowrap;
-  gap: var(--spacing-xs, 0.75rem);
+  gap: 12px;
   width: 100%;
   max-width: 100%;
 }
@@ -326,38 +306,27 @@ html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__r
   justify-content: center;
 }
 
-html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-camera-button {
-  display: inline-flex;
-  right: var(--spacing-xxs, 0.3125rem);
-  bottom: var(--spacing-xxs, 0.3125rem);
-  width: var(--min-touch-target, 44px);
-  height: var(--min-touch-target, 44px);
-  min-width: var(--min-touch-target, 44px);
-  min-height: var(--min-touch-target, 44px);
-  --button-height-md: var(--min-touch-target, 44px);
-}
-
 html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview {
   flex: 1 1 auto;
   min-width: 0;
-  gap: var(--spacing-xxs, 0.3125rem);
+  gap: 5px;
   width: 100%;
 }
 
 html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview-label {
   font-size: var(--profile-edit-dialog-mobile-image-label-font-size);
-  line-height: var(--line-height-tight, 1.25);
+  line-height: 1.25;
 }
 
 html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview-description {
   font-size: var(--profile-edit-dialog-mobile-image-description-font-size);
-  line-height: var(--line-height-base, 1.4);
+  line-height: 1.4;
 }
 
 html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview-actions {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--spacing-xxs, 0.3125rem);
+  gap: 5px;
   width: 100%;
   align-items: stretch;
 }
@@ -371,7 +340,7 @@ html[data-layout='mobile'] .profile-edit-dialog--heading .profile-edit-dialog__r
   min-width: 0;
   width: 100%;
   justify-content: center;
-  padding: var(--spacing-xxs, 0.3125rem) var(--spacing-2xs, 0.625rem);
+  padding: 5px 10px;
   font-size: var(--profile-edit-dialog-mobile-image-button-font-size);
 }
 
@@ -386,43 +355,29 @@ html[data-layout='mobile'] .profile-edit-dialog__row--address-header .profile-ed
     align-items: stretch;
   }
   .profile__edit-form {
-    --profile-edit-dialog-mobile-image-button-font-size: var(--font-size-md, 1rem);
-    --profile-edit-dialog-mobile-image-label-font-size: var(--font-size-sm, 0.875rem);
+    --profile-edit-dialog-mobile-image-button-font-size: var(--solid-ui-font-size-md, 1rem);
+    --profile-edit-dialog-mobile-image-label-font-size: var(--solid-ui-font-size-sm, 0.875rem);
     --profile-edit-dialog-mobile-image-description-font-size: 0.625rem;
   }
 
   .profile-edit-dialog__section-heading {
-    font-size: var(--font-size-lg, 1.125rem);
-    line-height: var(--line-height-tight, 1.4);
+    font-size: var(--solid-ui-font-size-lg, 1.125rem);
+    line-height: 1.4;
   }
 
   #profile-modal .modal .profile__section-header:not(.profile-edit-dialog__contact-section-header) {
-    padding: var(--spacing-sm, 0.938rem);
-    gap: var(--spacing-lg, 1.5625rem);
+    padding: 15px;
+    gap: 25px;
   }
 
   #profile-modal .modal .profile__section-header .profile-edit-dialog__section-heading {
-    font-size: var(--font-size-lg, 1.125rem);
-    line-height: var(--line-height-tight, 1.4);
-  }
-
-  #profile-modal .modal .profile__section-header .profile__action-button,
-  #profile-modal .modal .profile__section-header solid-ui-button.profile__action-button::part(button) {
-    font-size: var(--font-size-sm, 0.875rem);
-    line-height: var(--line-height-base, 1.5);
+    font-size: var(--solid-ui-font-size-lg, 1.125rem);
+    line-height: 1.4;
   }
 
   #profile-modal .modal .profile__section-header .profile__add-more-content,
   #profile-modal .modal .profile__section-header .profile-section-collapsible__edit-label {
-    font-size: var(--font-size-sm, 0.875rem);
-  }
-
-  #profile-modal .modal .profile__section-header .profile__add-more-icon,
-  #profile-modal .modal .profile__section-header .profile-section-collapsible__edit-icon {
-    width: var(--icon-xxs, 1rem);
-    height: var(--icon-xxs, 1rem);
-    padding: 0.125rem;
-    box-sizing: border-box;
+    font-size: var(--solid-ui-font-size-sm, 0.875rem);
   }
 
   #profile-modal .modal .profile__section-header .profile__add-more-icon svg,
@@ -456,6 +411,7 @@ html[data-layout='mobile'] .profile-edit-dialog__row--address-header .profile-ed
     padding-right: 6.5rem;
   }
 
+  /* leaving this in case i have to use the regular button */
   .profile-edit-dialog__paste-button {
     right: var(--spacing-xxs, 0.3125rem);
     --button-padding-md: var(--spacing-xxs, 0.3125rem) var(--spacing-xxs, 0.3125rem);
@@ -469,7 +425,7 @@ html[data-layout='mobile'] .profile-edit-dialog__row--address-header .profile-ed
   .profile-edit-dialog__field-type input,
   .profile-edit-dialog__field-type select,
   .profile-edit-dialog__textarea {
-    font-size: var(--font-size-sm, 0.875rem);
+    font-size: var(--solid-ui-font-size-sm, 0.875rem);
   }
 
   #profile-modal .modal .profile-edit-dialog__field solid-ui-select,
@@ -691,43 +647,29 @@ html[data-layout='mobile'] .profile-edit-dialog__row--address-header .profile-ed
   }
 
   .profile__edit-form {
-    --profile-edit-dialog-mobile-image-button-font-size: var(--font-size-md, 1rem);
-    --profile-edit-dialog-mobile-image-label-font-size: var(--font-size-sm, 0.875rem);
+    --profile-edit-dialog-mobile-image-button-font-size: var(--solid-ui-font-size-md, 1rem);
+    --profile-edit-dialog-mobile-image-label-font-size: var(--solid-ui-font-size-sm, 0.875rem);
     --profile-edit-dialog-mobile-image-description-font-size: 0.625rem;
   }
 
   .profile-edit-dialog__section-heading {
-    font-size: var(--font-size-lg, 1.125rem);
-    line-height: var(--line-height-tight, 1.4);
+    font-size: var(--solid-ui-font-size-lg, 1.125rem);
+    line-height: 1.4;
   }
 
   #profile-modal .modal .profile__section-header:not(.profile-edit-dialog__contact-section-header) {
-    padding: var(--spacing-sm, 0.938rem);
-    gap: var(--spacing-lg, 1.5625rem);
+    padding: 15px;
+    gap: 25px;
   }
 
   #profile-modal .modal .profile__section-header .profile-edit-dialog__section-heading {
-    font-size: var(--font-size-lg, 1.125rem);
-    line-height: var(--line-height-tight, 1.4);
-  }
-
-  #profile-modal .modal .profile__section-header .profile__action-button,
-  #profile-modal .modal .profile__section-header solid-ui-button.profile__action-button::part(button) {
-    font-size: var(--font-size-sm, 0.875rem);
-    line-height: var(--line-height-base, 1.5);
+    font-size: var(--solid-ui-font-size-lg, 1.125rem);
+    line-height: 1.4;
   }
 
   #profile-modal .modal .profile__section-header .profile__add-more-content,
   #profile-modal .modal .profile__section-header .profile-section-collapsible__edit-label {
-    font-size: var(--font-size-sm, 0.875rem);
-  }
-
-  #profile-modal .modal .profile__section-header .profile__add-more-icon,
-  #profile-modal .modal .profile__section-header .profile-section-collapsible__edit-icon {
-    width: var(--icon-xxs, 1rem);
-    height: var(--icon-xxs, 1rem);
-    padding: 0.125rem;
-    box-sizing: border-box;
+    font-size: var(--solid-ui-font-size-sm, 0.875rem);
   }
 
   #profile-modal .modal .profile__section-header .profile__add-more-icon svg,
@@ -761,6 +703,7 @@ html[data-layout='mobile'] .profile-edit-dialog__row--address-header .profile-ed
     padding-right: 6.5rem;
   }
 
+  /* leaving because I may use a regular button */
   .profile-edit-dialog__paste-button {
     right: var(--spacing-xxs, 0.3125rem);
     --button-padding-md: var(--spacing-xxs, 0.3125rem) var(--spacing-xxs, 0.3125rem);
@@ -774,7 +717,7 @@ html[data-layout='mobile'] .profile-edit-dialog__row--address-header .profile-ed
   .profile-edit-dialog__field-type input,
   .profile-edit-dialog__field-type select,
   .profile-edit-dialog__textarea {
-    font-size: var(--font-size-sm, 0.875rem);
+    font-size: var(--solid-ui-font-size-sm, 0.875rem);
   }
 
   #profile-modal .modal .profile-edit-dialog__field solid-ui-select,
@@ -823,7 +766,7 @@ html[data-layout='mobile'] .profile-edit-dialog__row--address-header .profile-ed
 
   .profile-edit-dialog__row--social {
     margin-left: 0;
-    gap: var(--spacing-2xs, 0.625rem);
+    gap: 10px;
     flex-direction: row;
     align-items: center;
     flex-wrap: nowrap;
@@ -854,27 +797,20 @@ html[data-layout='mobile'] .profile-edit-dialog__row--address-header .profile-ed
     flex-direction: row;
     align-items: center;
     flex-wrap: nowrap;
-    gap: var(--spacing-xxs, 0.3125rem);
-    margin-left: calc(-1 * var(--spacing-xxs, 0.3125rem));
+    gap: 5px;
+    margin-left: calc(-1 * 5px);
   }
 
   .profile-edit-dialog__row--language > .profile-edit-dialog__field--language-name {
     flex: 1 1 0;
     min-width: 0;
-    margin-left: calc(-1 * var(--spacing-xxs, 0.3125rem));
+    margin-left: calc(-1 * 5px);
   }
 
   .profile-edit-dialog__actions--language {
     margin-left: 0;
   }
 
-  .profile-edit-dialog__row--language > solid-ui-button.profile-edit-dialog__drag-handle,
-  .profile-edit-dialog__actions--language > solid-ui-button.profile-edit-dialog__delete-button {
-    min-width: var(--min-touch-target, 44px);
-    min-height: var(--min-touch-target, 44px);
-    --button-height-md: var(--min-touch-target, 44px);
-  }
-
   .profile-edit-dialog__row--resume-entry-header {
     flex-direction: row;
     align-items: center;
@@ -891,7 +827,7 @@ html[data-layout='mobile'] .profile-edit-dialog__row--address-header .profile-ed
     flex-direction: row;
     align-items: center;
     flex-wrap: nowrap;
-    gap: var(--spacing-2xs, 0.625rem);
+    gap: 10px;
   }
 
   .profile-edit-dialog__row--skill > .profile-edit-dialog__field {
@@ -914,7 +850,7 @@ html[data-layout='mobile'] .profile-edit-dialog__row--address-header .profile-ed
     flex-direction: row;
     align-items: center;
     flex-wrap: nowrap;
-    gap: var(--spacing-xs, 0.75rem);
+    gap: 12px;
     width: 100%;
     max-width: 100%;
   }
@@ -934,38 +870,27 @@ html[data-layout='mobile'] .profile-edit-dialog__row--address-header .profile-ed
     justify-content: center;
   }
 
-  .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-camera-button {
-    display: inline-flex;
-    right: var(--spacing-xxs, 0.3125rem);
-    bottom: var(--spacing-xxs, 0.3125rem);
-    width: var(--min-touch-target, 44px);
-    height: var(--min-touch-target, 44px);
-    min-width: var(--min-touch-target, 44px);
-    min-height: var(--min-touch-target, 44px);
-    --button-height-md: var(--min-touch-target, 44px);
-  }
-
   .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview {
     flex: 1 1 auto;
     min-width: 0;
-    gap: var(--spacing-xxs, 0.3125rem);
+    gap: 5px;
     width: 100%;
   }
 
   .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview-label {
     font-size: var(--profile-edit-dialog-mobile-image-label-font-size);
-    line-height: var(--line-height-tight, 1.25);
+    line-height: 1.25;
   }
 
   .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview-description {
     font-size: var(--profile-edit-dialog-mobile-image-description-font-size);
-    line-height: var(--line-height-base, 1.4);
+    line-height: 1.4;
   }
 
   .profile-edit-dialog--heading .profile-edit-dialog__row--heading-photo .profile-edit-dialog__image-preview-actions {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: var(--spacing-xs, 0.5rem);
+    gap: 12px;
     width: 100%;
     align-items: stretch;
   }
@@ -979,7 +904,7 @@ html[data-layout='mobile'] .profile-edit-dialog__row--address-header .profile-ed
     min-width: 0;
     width: 100%;
     justify-content: center;
-    padding: var(--spacing-xxs, 0.3125rem) var(--spacing-2xs, 0.625rem);
+    padding: 5px 10px;
     font-size: var(--profile-edit-dialog-mobile-image-button-font-size);
   }
 

package/lib/types.d.ts

@@ -1,2 +1,3 @@
 export type ViewerMode = 'owner' | 'authenticated' | 'anonymous';
+export type Layout = 'mobile' | 'desktop';
 //# sourceMappingURL=types.d.ts.map

package/lib/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,eAAe,GAAG,WAAW,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,eAAe,GAAG,WAAW,CAAA;AAEhE,MAAM,MAAM,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAA"}