@lucca-front/scss 22.0.0-rc.1 → 22.0.0-rc.3

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@lucca-front/scss",
-  "version": "22.0.0-rc.1",
+  "version": "22.0.0-rc.3",
   "description": "A Sass framework for Lucca products.",
   "main": "src/main.scss",
   "scripts": {},
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/LuccaSA/lucca-front.git"
+    "url": "git+https://github.com/LuccaSA/lucca-front.git",
+    "directory": "packages/scss"
   },
   "keywords": [
     "lucca",
@@ -23,7 +24,7 @@
     "normalize.css": "^8.0.0"
   },
   "peerDependencies": {
-    "@lucca-front/icons": "22.0.0-rc.1",
-    "@lucca/prisme": "22.0.0-rc.1"
+    "@lucca-front/icons": "22.0.0-rc.3",
+    "@lucca/prisme": "22.0.0-rc.3"
   }
 }

package/src/commons/config.scss

@@ -73,7 +73,7 @@ $fontTokens: (
 	highlight-XXL-lineHeight: var(--pr-t-font-lineHeight-400),
 	highlight-XXL-fontWeight: var(--pr-t-font-fontWeight-black),
 	highlight-XL-fontSize: var(--pr-t-font-fontSize-275),
-	highlight-XL-lineHeight: var(--pr-t-font-lineHeight-350),
+	highlight-XL-lineHeight: var(--pr-t-font-lineHeight-300),
 	highlight-XL-fontWeight: var(--pr-t-font-fontWeight-bold),
 	highlight-L-fontSize: var(--pr-t-font-fontSize-225),
 	highlight-L-lineHeight: var(--pr-t-font-lineHeight-300),
@@ -116,7 +116,7 @@ $palettesDefault: 'brand', 'brandContrasted', 'neutral', 'navigation', 'AI';
 $palettesProduct: 'product';
 $palettesOtherProduct: () !default;
 $palettesDecorative: 'kiwi', 'cucumber', 'mint', 'lagoon', 'blueberry', 'lavender', 'watermelon', 'pumpkin' !default;
-$palettesDecorativeMandatory: 'pineapple', 'lime', 'grape', 'glacier';
+$palettesDecorativeMandatory: 'pineapple', 'lime', 'grape', 'glacier', 'pineappleContrasted';
 
 // pineapple, lime, grape, glacier
 $palettesDeprecated: ('lucca', 'grey', 'primary', 'secondary') !default;
@@ -378,7 +378,7 @@ $critical: (
 	text: #ffffff,
 	0: #ffffff,
 	50: #ffebec,
-	100: #ffd6d8,
+	100: #ffd2d4,
 	200: #fdbebe,
 	300: #faa3a3,
 	400: #fa8989,
@@ -492,7 +492,7 @@ $lavender: (
 	600: #9165d2,
 	700: #7647bd,
 	800: #5f369b,
-	900: #4a2a79,
+	900: #24075a,
 ) !default;
 
 $grape: (
@@ -547,6 +547,19 @@ $pineapple: (
 	900: #665400,
 ) !default;
 
+$pineappleContrasted: (
+	50: #fef7d7,
+	100: #fbf1b6,
+	200: #fae999,
+	300: #f9e16c,
+	400: #f8dc4f,
+	500: #e7c623,
+	600: #b89600,
+	700: #8f7500,
+	800: #7b6500,
+	900: #665400,
+) !default;
+
 // https://sass-lang.com/documentation/variables/#advanced-variable-functions
 $productsInterpolation: (
 	'brand': $brand,
@@ -587,6 +600,7 @@ $palettesInterpolation: (
 	'watermelon': $watermelon,
 	'pumpkin': $pumpkin,
 	'pineapple': $pineapple,
+	'pineappleContrasted': $pineappleContrasted,
 	'pagga': $pagga,
 	'poplee': $poplee,
 	'coreHR': $coreHR,

package/src/commons/utils/color.scss

@@ -29,6 +29,7 @@
 	@include core.rosetta('--palettes-brand', '--palettes-brandContrasted', config.$palettesShades);
 	@include core.rosetta('--palettes-success', '--palettes-successContrasted', config.$palettesShades);
 	@include core.rosetta('--palettes-warning', '--palettes-warningContrasted', config.$palettesShades);
+	@include core.rosetta('--palettes-pineapple', '--palettes-pineappleContrasted', config.$palettesShades);
 }
 
 @mixin borderGradient($angle: 0, $color1: var(--palettes-neutral-0) , $color2:  var(--palettes-neutral-900), $radius: var(--pr-t-border-radius-default), $width: var(--commons-divider-width)) {

package/src/commons/utils/index.scss

@@ -13,10 +13,109 @@
 @use '@lucca-front/scss/src/commons/utils/container';
 @use '@lucca-front/scss/src/components/title/exports' as title;
 
+@mixin animated {
+	&FadeIn {
+		@extend %animatedFadeIn;
+	}
+
+	&ScaleIn {
+		@extend %animatedScaleIn;
+	}
+
+	&ScaleOut {
+		@extend %animatedScaleOut;
+	}
+
+	&ScaleInTop {
+		@extend %animatedScaleInTop;
+	}
+
+	&ScaleOutTop {
+		@extend %animatedScaleOutTop;
+	}
+
+	&ScaleInRight {
+		@extend %animatedScaleInRight;
+	}
+
+	&ScaleOutRight {
+		@extend %animatedScaleOutRight;
+	}
+
+	&ScaleInBottom {
+		@extend %animatedScaleInBottom;
+	}
+
+	&ScaleOutBottom {
+		@extend %animatedScaleOutBottom;
+	}
+
+	&ScaleInLeft {
+		@extend %animatedScaleInLeft;
+	}
+
+	&ScaleOutLeft {
+		@extend %animatedScaleOutLeft;
+	}
+
+	&SlideIn {
+		@extend %animatedSlideIn;
+	}
+
+	&SlideInTop {
+		@extend %animatedSlideInTop;
+	}
+
+	&SlideOut {
+		@extend %animatedSlideOut;
+	}
+
+	&SlideOutTop {
+		@extend %animatedSlideOutTop;
+	}
+
+	&SlideInRight {
+		@extend %animatedSlideInRight;
+	}
+
+	&SlideOutRight {
+		@extend %animatedSlideOutRight;
+	}
+
+	&SlideInBottom {
+		@extend %animatedSlideInBottom;
+	}
+
+	&SlideOutBottom {
+		@extend %animatedSlideOutBottom;
+	}
+
+	&SlideInLeft {
+		@extend %animatedSlideInLeft;
+	}
+
+	&SlideOutLeft {
+		@extend %animatedSlideOutLeft;
+	}
+
+	&Shake {
+		@extend %animatedShake;
+	}
+
+	&Pulse {
+		@extend %animatedPulse;
+	}
+
+	&FadeOut {
+		@extend %animatedFadeOut;
+	}
+}
+
 @layer utils {
 	%animatedAll {
 		animation-duration: var(--commons-animations-duration, var(--commons-animations-durations-standard));
 		animation-timing-function: var(--commons-animations-function);
+		animation-fill-mode: both;
 
 		&.mod-animation-duration-fast {
 			--commons-animations-duration: var(--commons-animations-durations-fast);
@@ -46,7 +145,7 @@
 		&ScaleOutTop {
 			animation-name: scaleInTop;
 
-			@include keyframe.scaleIn;
+			@include keyframe.scaleInTop;
 		}
 
 		&ScaleInRight,
@@ -296,7 +395,7 @@
 	}
 
 	.pr-u-animated {
-		@extend %animated;
+		@include animated;
 	}
 
 	.pr-u-mask {
@@ -575,7 +674,7 @@
 		}
 
 		.u-animated {
-			@extend %animated;
+			@include animated;
 		}
 
 		.u-mask {

package/src/commons/vars.scss

@@ -69,9 +69,9 @@
 	}
 
 	// stylelint-disable custom-property-pattern
-	--palettes-assets-primary-lighter: var(--palettes-#{config.$product}-50);
-	--palettes-assets-primary-light: var(--palettes-#{config.$product}-100);
-	--palettes-assets-primary-dark: var(--palettes-#{config.$product}-200);
+	--palettes-assets-primary-lighter: var(--palettes-#{config.$product}-50, var(--palettes-50));
+	--palettes-assets-primary-light: var(--palettes-#{config.$product}-100, var(--palettes-100));
+	--palettes-assets-primary-dark: var(--palettes-#{config.$product}-200, var(--palettes-200));
 	--palettes-assets-brand-lighter: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'brand')}-50);
 	--palettes-assets-brand-light: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'brand')}-100);
 	--palettes-assets-brand-dark: var(--palettes-#{map.get(map.get(config.$palettesAssets, config.$product), 'brand')}-200);

package/src/components/appLayout/mods.scss

@@ -2,13 +2,13 @@
 	--components-appLayout-gridTemplate:
 		'banner  banner' var(--commons-banner-height)
 		'navSide main  ' 1fr
-		/ auto    1fr;
+		/ auto 1fr;
 }
 
 @mixin mobileNavSideBottom {
 	--components-appLayout-gridTemplate:
 		'banner ' var(--commons-banner-height)
-		'main'    1fr
+		'main' 1fr
 		'navSide' auto;
 	--components-appLayout-navSide-overflowX: visible;
 	--components-appLayout-navSide-overflowY: visible;

package/src/components/avatar/component.scss

@@ -74,11 +74,9 @@
 
 		.avatarWrapper-item-action-more {
 			box-shadow: 0 0 0 var(--components-avatar-border) var(--components-avatar-background);
-			border-radius: var(--pr-t-border-radius-full);
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			background-color: var(--palettes-neutral-200);
 			inline-size: var(--components-avatar-size);
 			block-size: var(--components-avatar-size);
 			font-size: var(--components-avatarWrapper-fontSize);

package/src/components/dialog/component.scss

@@ -130,7 +130,7 @@
 			grid-template-areas: var(--components-dialog-insideHeaderAreas);
 			grid-template-columns: var(--components-dialog-insideHeaderColumns);
 			box-shadow: var(--components-dialog-inside-header-boxShadow);
-			gap: var(--pr-t-spacings-200);
+			gap: 0 var(--pr-t-spacings-200);
 			position: var(--components-dialog-inside-header-position);
 			z-index: 1;
 			grid-area: header;
@@ -142,6 +142,14 @@
 			inset-inline-end: var(--components-dialog-inside-header-button-insetInlineEnd);
 		}
 
+		.dialog-inside-header-content {
+			grid-area: content;
+
+			&:empty {
+				display: none;
+			}
+		}
+
 		.dialog-inside-content {
 			background-color: var(--components-dialog-insideContent-background);
 			padding-block: var(--components-dialog-insideContent-paddingBlock);
@@ -163,6 +171,12 @@
 			overflow-wrap: anywhere;
 		}
 
+		.dialog-inside-header-container-subtitle {
+			font: var(--pr-t-font-body-S);
+			color: var(--palettes-neutral-700);
+			text-align: var(--components-dialog-insideHeaderTitleAlign);
+		}
+
 		.dialog_backdrop {
 			background-color: var(--palettes-neutral-900);
 			position: fixed;

package/src/components/dialog/mods.scss

@@ -91,14 +91,16 @@
 }
 
 @mixin withAction {
-	--components-dialog-insideHeaderAreas: 'container action close';
+	--components-dialog-insideHeaderAreas:
+		'container action close'
+		'content content content';
 	--components-dialog-insideHeaderColumns: 1fr auto auto;
 }
 
 @mixin fancy {
 	// padding and minimum height are in pixels because they correspond to the size of the image
 	--components-dialog-inside-paddingInlineEnd: 224px;
-	--components-dialog-minBlockSize: calc(288px + var(--pr-t-spacings-400));
+	--components-dialog-minBlockSize: calc(288px + var(--pr-t-spacings-200));
 	--components-dialog-inside-gridTemplateRows: auto auto auto;
 	--components-dialog-inside-alignContent: center;
 	--components-dialog-inside-header-boxShadow: none;
@@ -132,7 +134,7 @@
 @mixin fancySmall {
 	// padding and minimum height are in pixels because they correspond to the size of the image
 	--components-dialog-inside-paddingInlineEnd: 168px;
-	--components-dialog-minBlockSize: calc(216px + var(--pr-t-spacings-400));
+	--components-dialog-minBlockSize: calc(216px + var(--pr-t-spacings-200));
 }
 
 @mixin fancyNarrow {

package/src/components/dialog/vars.scss

@@ -8,7 +8,9 @@
 	--components-dialog-borderRadius: var(--pr-t-border-radius-structure);
 	--components-dialog-inset: 0 var(--commons-pushPanel-inlineSize) 0 0;
 	--components-dialog-animationOpening: scaleIn;
-	--components-dialog-insideHeaderAreas: 'container close';
+	--components-dialog-insideHeaderAreas:
+		'container close'
+		'content content';
 	--components-dialog-insideHeaderTitleAlign: left;
 	--components-dialog-insideHeaderTitlePadding: calc(var(--pr-t-spacings-50) / 2) 0;
 	--components-dialog-insideHeaderButtonDisplay: flex;

package/src/components/fieldset/component.scss

@@ -37,11 +37,13 @@
 			gap: var(--components-fieldset-gap);
 			max-inline-size: var(--components-fieldset-contentMaxWidth);
 
-			.lucca-icon {
-				transform: rotate(var(--components-fieldset-title-iconRotation));
-				transition-property: transform;
-				transition-duration: var(--commons-animations-durations-fast);
-				color: var(--palettes-neutral-700);
+			&[aria-expanded] {
+				.icon-arrowChevronBottom {
+					transform: rotate(var(--components-fieldset-title-iconRotation));
+					transition-property: transform;
+					transition-duration: var(--commons-animations-durations-fast);
+					color: var(--palettes-neutral-700);
+				}
 			}
 		}
 

package/src/components/fileEntry/component.scss

@@ -3,13 +3,14 @@
 @use '@lucca-front/scss/src/commons/utils/a11y';
 @use '@lucca-front/scss/src/commons/utils/text';
 
+@use '@lucca-front/scss/src/components/loading/exports' as loading;
 @use '@lucca-front/icons/src/icon/exports' as icon;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	border: 1px solid var(--components-fileEntry-borderColor);
 	padding: var(--components-fileEntry-padding);
 	margin: 0;
-	border-radius: var(--pr-t-border-radius-default);
+	border-radius: var(--components-fileEntry-borderRadius);
 	background-color: var(--pr-t-elevation-surface-raised);
 	gap: 0 var(--components-fileEntry-gapInline);
 	position: relative;
@@ -31,6 +32,12 @@
 	}
 
 	@at-root ($atRoot) {
+		.fileEntry-status-content-inside-icon {
+			color: var(--palettes-critical-700);
+
+			@include icon.S;
+		}
+
 		.fileEntryDisplayWrapper {
 			display: grid;
 			grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
@@ -78,14 +85,11 @@
 			inline-size: 100%;
 		}
 
-		.fileEntry-status-content-inside-icon {
-			color: var(--palettes-critical-700);
-		}
-
 		.fileEntry-status-content-inlineMessage.inlineMessage {
 			flex-direction: column;
 			align-items: center;
 			text-align: center;
+			padding: var(--pr-t-spacings-100);
 
 			.inlineMessage-statusIcon:first-child {
 				@include icon.M;
@@ -194,5 +198,9 @@
 			flex-basis: 0;
 			min-inline-size: fit-content;
 		}
+
+		.fileEntry-status-content-inside-loading.loading {
+			@include loading.S;
+		}
 	}
 }

package/src/components/fileEntry/index.scss

@@ -7,38 +7,46 @@
 	}
 
 	@layer mods {
-		&.mod-S {
-			@include S;
+		&.mod-L {
+			@include L;
+
+			&.mod-structure {
+				@include structure;
+			}
 		}
 
 		&.mod-media {
 			@include media;
 
-			&.mod-S {
-				@include mediaS;
+			&.mod-L {
+				@include mediaL;
 			}
 		}
 
 		&.is-error {
 			@include error;
 
-			&.mod-S {
-				@include errorS;
+			&.mod-L {
+				@include errorL;
+
+				&.mod-media {
+					@include mediaErrorL;
+				}
 			}
 		}
 
 		&.is-loading {
 			@include loading;
 
-			&.mod-S {
-				@include loadingS;
+			&.mod-L {
+				@include loadingL;
 			}
 		}
 	}
 }
 
-.fileEntry-description-divider.divider.mod-vertical {
-	@layer mods {
+@layer mods {
+	.fileEntry-description-divider.divider.mod-vertical {
 		@include divider;
 	}
 }

package/src/components/fileEntry/mods.scss

@@ -1,42 +1,47 @@
 @use '@lucca-front/icons/src/icon/exports' as icon;
 
-@mixin S {
-	--components-fileEntry-padding: var(--pr-t-spacings-50);
-	--components-fileEntry-status-inlineSize: 32px;
-	--components-fileEntry-description-display: none;
-	--components-fileEntry-gridTemplateAreas: 'picture title title toolbar';
-	--components-fileEntry-filename-alignSelf: center;
-	--components-fileEntry-gapInline: var(--pr-t-spacings-75);
-	--components-fileEntry-status-content-svg-margin: calc(var(--pr-t-spacings-100) * -1);
+@mixin L {
+	--components-fileEntry-padding: var(--pr-t-spacings-150);
+	--components-fileEntry-status-inlineSize: 48px;
+	--components-fileEntry-description-display: flex;
+	--components-fileEntry-gridTemplateAreas: 'picture title toolbar' 'picture description toolbar';
+	--components-fileEntry-filename-alignSelf: end;
+	--components-fileEntry-gapInline: var(--components-fileEntry-padding);
+	--components-fileEntry-status-content-svg-margin: 0;
+	--components-fileEntry-status-blockSize: var(--components-fileEntry-status-inlineSize);
 
 	.fileEntry-status-content-inside-icon {
-		@include icon.S;
+		@include icon.M;
 	}
 }
 
 @mixin media {
 	--components-fileEntry-padding: var(--pr-t-spacings-75);
-	--components-fileEntry-status-aspectRatio: auto;
 	--components-fileEntry-status-inlineSize: 100%;
-	--components-fileEntry-status-blockSize: calc(21.5rem - 1rem + 2px);
 	--components-fileEntry-description-display: none;
 	--components-fileEntry-display: block;
-	--components-fileEntry-gridColumn: 1 / -1;
 	--components-fileEntry-status-content-svg-width: 72px;
+	--components-fileEntry-gridColumn: auto;
+	--components-fileEntry-status-blockSize: auto;
+	--components-fileEntry-status-aspectRatio: 1;
 
 	&:has(.fileEntry-status-content-fileName) {
 		--components-fileEntry-status-content-inside-insetBlockEnd: calc(var(--pr-t-spacings-400) + var(--pr-t-spacings-25));
 	}
 }
 
-@mixin mediaS {
+@mixin mediaL {
 	--components-fileEntry-minHeight: calc(5rem + 2px);
-	--components-fileEntry-gridColumn: auto;
-	--components-fileEntry-status-blockSize: auto;
-	--components-fileEntry-status-aspectRatio: 1;
+	--components-fileEntry-gridColumn: 1 / -1;
+	--components-fileEntry-status-blockSize: calc(21.5rem - 1rem + 2px);
+	--components-fileEntry-status-aspectRatio: auto;
 }
 
 @mixin divider {
 	--components-divider-marginBlock: var(--pr-t-spacings-25);
 	--components-divider-marginInline: 0;
 }
+
+@mixin structure {
+	--components-fileEntry-borderRadius: var(--pr-t-border-radius-structure);
+}

package/src/components/fileEntry/states.scss

@@ -5,18 +5,23 @@
 	--components-fileEntry-gridTemplateAreas: 'picture title toolbar' 'picture description toolbar';
 	--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-critical-50);
 	--components-fileEntry-minHeight: 3.75rem;
+	--components-fileEntry-description-display: flex;
 }
 
 @mixin loading {
 	--components-fileEntry-status-content-img-opacity: 0.08;
 }
 
-@mixin loadingS {
+@mixin loadingL {
 	.fileEntry-status-content-inside-loading.loading {
-		@include loading.S;
+		@include loading.M;
 	}
 }
 
-@mixin errorS {
-	--components-fileEntry-status-blockSize: 100%;
+@mixin errorL {
+	--components-fileEntry-status-blockSize: var(--components-fileEntry-status-inlineSize);
+}
+
+@mixin mediaErrorL {
+	--components-fileEntry-status-blockSize: calc(21.5rem - 1rem + 2px);
 }

package/src/components/fileEntry/vars.scss

@@ -1,26 +1,23 @@
 @mixin vars {
-	--components-fileEntry-padding: var(--pr-t-spacings-150);
-	--components-fileEntry-gapInline: var(--components-fileEntry-padding);
+	--components-fileEntry-borderRadius: var(--pr-t-border-radius-default);
 	--components-fileEntry-gridColumn: 1 / -1;
 	--components-fileEntry-borderColor: var(--palettes-neutral-100);
 	--components-fileEntry-minHeight: auto;
-	--components-fileEntry-gridTemplateAreas: 'picture title toolbar' 'picture description toolbar';
-
 	--components-fileEntry-status-content-inside-backgroundColor: var(--palettes-neutral-25);
-
 	--components-fileEntry-status-content-img-opacity: 1;
 	--components-fileEntry-status-content-svg-width: 48px;
 	--components-fileEntry-status-content-svg-height: var(--components-fileEntry-status-content-svg-width);
-	--components-fileEntry-status-content-svg-margin: 0;
-
-	--components-fileEntry-filename-alignSelf: end;
-
-	--components-fileEntry-status-inlineSize: 48px;
-	--components-fileEntry-status-blockSize: var(--components-fileEntry-status-inlineSize);
+	--components-fileEntry-status-blockSize: 100%;
 	--components-fileEntry-status-margin: 0;
-	--components-fileEntry-description-display: flex;
 	--components-fileEntry-display: grid;
 	--components-fileEntry-status-content-padding: 0;
-
 	--components-fileEntry-status-content-inside-insetBlockEnd: 0;
+
+	--components-fileEntry-padding: var(--pr-t-spacings-50);
+	--components-fileEntry-status-inlineSize: 32px;
+	--components-fileEntry-description-display: none;
+	--components-fileEntry-gridTemplateAreas: 'picture title title toolbar';
+	--components-fileEntry-filename-alignSelf: center;
+	--components-fileEntry-gapInline: var(--pr-t-spacings-75);
+	--components-fileEntry-status-content-svg-margin: calc(var(--pr-t-spacings-100) * -1);
 }

package/src/components/fileToolbar/component.scss

@@ -1,8 +1,6 @@
 @use '@lucca-front/scss/src/commons/utils/namespace';
 @use '@lucca-front/scss/src/commons/utils/reset';
 
-@use '@lucca-front/icons/src/icon/exports' as icon;
-
 @mixin component($atRoot: namespace.$defaultAtRoot) {
 	border-radius: var(--pr-t-border-radius-default);
 	position: absolute;

package/src/components/fileToolbar/index.scss

@@ -10,8 +10,8 @@
 		&.mod-disablePositioning {
 			@include disablePositioning;
 
-			&.mod-S {
-				@include disablePositioningS;
+			&.mod-L {
+				@include disablePositioningL;
 			}
 		}
 	}

package/src/components/fileToolbar/mods.scss

@@ -1,17 +1,22 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
-@mixin disablePositioning {
-	--components-fileToolbar-display: contents;
-}
-
-@mixin disablePositioningS {
-	--components-fileToolbar-list-padding: 0;
-}
-
 @mixin button {
 	@include button.ghost;
 	@include button.S;
 
 	--components-button-borderRadius: 4px;
 	--components-button-padding: var(--pr-t-spacings-75);
+
+	&:has(.icon-trashDelete) {
+		@include button.critical;
+	}
+}
+
+@mixin disablePositioning {
+	--components-fileToolbar-display: contents;
+	--components-fileToolbar-list-padding: 0;
+}
+
+@mixin disablePositioningL {
+	--components-fileToolbar-list-padding: var(--pr-t-spacings-50);
 }

package/src/components/fileUpload/component.scss

@@ -5,7 +5,8 @@
 @use '@lucca-front/scss/src/components/button/exports' as button;
 
 @mixin component($atRoot: namespace.$defaultAtRoot) {
-	position: relative;
+	position: var(--components-fileUpload-position);
+	inset: var(--components-fileUpload-inset);
 	border: 1px var(--components-fileUpload-borderStyle) var(--components-fileUpload-borderColor);
 	overflow: hidden;
 	border-radius: var(--components-fileUpload-borderRadius);