chore(styling): reduce and make image width more flexible

Author: codenaz

dist/index.cjs.js

@@ -3892,7 +3892,7 @@ var ImageBox = styled(FlexBox)(_templateObject$2(), function (props) {
 });
 
 function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["\n  flex-direction: column;\n  max-width: 10rem;\n  justify-content: center;\n  margin-right: 1rem;\n  position: relative;\n"]);
+  var data = _taggedTemplateLiteral(["\n  flex-direction: column;\n  width: auto;\n  max-width: 9rem;\n  justify-content: center;\n  margin-right: 1rem;\n  position: relative;\n"]);
 
   _templateObject$3 = function _templateObject() {
     return data;

dist/index.esm.js

@@ -3887,7 +3887,7 @@ var ImageBox = styled(FlexBox)(_templateObject$2(), function (props) {
 });
 
 function _templateObject$3() {
-  var data = _taggedTemplateLiteral(["\n  flex-direction: column;\n  max-width: 10rem;\n  justify-content: center;\n  margin-right: 1rem;\n  position: relative;\n"]);
+  var data = _taggedTemplateLiteral(["\n  flex-direction: column;\n  width: auto;\n  max-width: 9rem;\n  justify-content: center;\n  margin-right: 1rem;\n  position: relative;\n"]);
 
   _templateObject$3 = function _templateObject() {
     return data;

src/__tests__/__snapshots__/MultiImageInput.test.js.snap

@@ -7,7 +7,7 @@ exports[`renders correctly 1`] = `
       class="sc-AxirZ sc-AxiKw cQXkMQ"
     >
       <div
-        class="sc-AxirZ sc-AxhCb cMEKOH"
+        class="sc-AxirZ sc-AxhCb ibDyVp"
       >
         <div
           role="button"

src/lib/components/ImageInput.js

@@ -3,7 +3,8 @@ import FlexBox from './FlexBox';
 
 const ImageInput = styled(FlexBox)`
   flex-direction: column;
-  max-width: 10rem;
+  width: auto;
+  max-width: 9rem;
   justify-content: center;
   margin-right: 1rem;
   position: relative;