@synerise/ds-file-uploader 1.0.8 → 1.0.10

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-file-uploader@1.0.9...@synerise/ds-file-uploader@1.0.10) (2025-05-26)
+
+**Note:** Version bump only for package @synerise/ds-file-uploader
+
+
+
+
+
+## [1.0.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-file-uploader@1.0.8...@synerise/ds-file-uploader@1.0.9) (2025-05-19)
+
+**Note:** Version bump only for package @synerise/ds-file-uploader
+
+
+
+
+
 ## [1.0.8](https://github.com/Synerise/synerise-design/compare/@synerise/ds-file-uploader@1.0.7...@synerise/ds-file-uploader@1.0.8) (2025-05-07)
 
 **Note:** Version bump only for package @synerise/ds-file-uploader

package/dist/AvatarUploader/AvatarUploader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarUploader.d.ts","sourceRoot":"","sources":["../../src/AvatarUploader/AvatarUploader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAE,iBAAiB,EAAe,MAAM,uBAAuB,CAAC;AAcvE,QAAA,MAAM,cAAc,yIAejB,iBAAiB,sBAiHnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"AvatarUploader.d.ts","sourceRoot":"","sources":["../../src/AvatarUploader/AvatarUploader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAE,iBAAiB,EAAe,MAAM,uBAAuB,CAAC;AAcvE,QAAA,MAAM,cAAc,yIAejB,iBAAiB,sBAmHnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/AvatarUploader/AvatarUploader.js

@@ -4,6 +4,7 @@ import { useDropzone } from 'react-dropzone';
 import Tooltip from '@synerise/ds-tooltip';
 import Icon, { InfoFillS, Add3M, FileTypePictureL } from '@synerise/ds-icon';
 import Button from '@synerise/ds-button';
+import { useTheme } from '@synerise/ds-core';
 import FileViewAvatar from './FileViewAvatar/FileViewAvatar';
 import * as S from './AvatarUploader.styles';
 function readAsText(file) {
@@ -41,6 +42,7 @@ var AvatarUploader = function AvatarUploader(_ref) {
   var _React$useState = React.useState(true),
     uploadSuccess = _React$useState[0],
     setUploadSuccess = _React$useState[1];
+  var theme = useTheme();
   var readFilesContent = React.useCallback(function (addedFiles) {
     var readerPromises = addedFiles.map(function (file) {
       return readAsText(file);
@@ -94,6 +96,7 @@ var AvatarUploader = function AvatarUploader(_ref) {
     "data-testid": "tooltip-info"
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(InfoFillS, null),
+    color: theme.palette['grey-400'],
     size: 24
   })))), files.length > 0 && files.map(function (file, index) {
     return /*#__PURE__*/React.createElement(FileViewAvatar, {

package/dist/AvatarUploader/AvatarUploader.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarUploader.styles.d.ts","sourceRoot":"","sources":["../../src/AvatarUploader/AvatarUploader.styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,SAAS,oEAGrB,CAAC;AACF,eAAO,MAAM,iBAAiB,oEAG7B,CAAC;AACF,eAAO,MAAM,WAAW;;SAMvB,CAAC;AAEF,eAAO,MAAM,iBAAiB;mBAA+B,OAAO;SAGnE,CAAC;AAEF,eAAO,MAAM,aAAa,uMAGzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,sEAO9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,uMAMpC,CAAC;AAEF,eAAO,MAAM,cAAc;;;UAGnB,MAAM;aACH,OAAO;iBACH,MAAM;SAuGpB,CAAC;AAEF,eAAO,MAAM,YAAY,uMAMxB,CAAC;AAEF,eAAO,MAAM,KAAK,sEAWjB,CAAC"}
+{"version":3,"file":"AvatarUploader.styles.d.ts","sourceRoot":"","sources":["../../src/AvatarUploader/AvatarUploader.styles.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,SAAS,oEAGrB,CAAC;AACF,eAAO,MAAM,iBAAiB,oEAG7B,CAAC;AACF,eAAO,MAAM,WAAW;;SAMvB,CAAC;AAEF,eAAO,MAAM,iBAAiB;mBAA+B,OAAO;SAGnE,CAAC;AAEF,eAAO,MAAM,aAAa,uMAGzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,sEAO9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,uMAMpC,CAAC;AAEF,eAAO,MAAM,cAAc;;;UAGnB,MAAM;aACH,OAAO;iBACH,MAAM;SAsGpB,CAAC;AAEF,eAAO,MAAM,YAAY,uMAMxB,CAAC;AAEF,eAAO,MAAM,KAAK,sEAOjB,CAAC"}

package/dist/AvatarUploader/AvatarUploader.styles.js

@@ -45,7 +45,7 @@ export var LargeDropAreaDescription = styled(Typography.Text).withConfig({
 export var DropAreaButton = styled.button.withConfig({
   displayName: "AvatarUploaderstyles__DropAreaButton",
   componentId: "sc-1lljrgr-7"
-})(["align-items:center;border:1px dashed ", ";padding:11px 12px;border-radius:3px;cursor:pointer;background-color:transparent;width:80px;height:80px;transition:height 0.3s;", ";", "{fill:", ";}span{display:inline-block;margin:0 0 0 12px;}", " ", " &:hover:not(:disabled){background-color:", ";border-color:", ";", ",", "{color:", ";}", "{fill:", ";color:", ";}}&:disabled{background-color:", ";", "{color:", ";}}&&:active{color:", ";border-color:", ";background-color:", ";}&:focus:not(:active):not(:disabled){border-color:", ";background-color:", ";}&:disabled{span,", "{opacity:0.4;}}", ""], function (props) {
+})(["align-items:center;border:1px dashed ", ";padding:11px 12px;border-radius:3px;cursor:pointer;background-color:transparent;width:80px;height:80px;transition:height 0.3s;", ";", "{color:", ";}span{display:inline-block;margin:0 0 0 12px;}", " ", " &:hover:not(:disabled){background-color:", ";border-color:", ";", ",", "{color:", ";}", "{color:", ";}}&:disabled{background-color:", ";", "{color:", ";}}&&:active{color:", ";border-color:", ";background-color:", ";}&:focus:not(:active):not(:disabled){border-color:", ";background-color:", ";}&:disabled{span,", "{opacity:0.4;}}", ""], function (props) {
   return props.theme.palette['grey-400'];
 }, function (props) {
   return props.mode === 'multi-large' && props.filesLength === 0 && "\n      height: 108px;\n      flex-direction: column;\n      text-align: center;\n      justify-content: center;\n  ";
@@ -63,8 +63,6 @@ export var DropAreaButton = styled.button.withConfig({
   return props.theme.palette['grey-700'];
 }, IconContainer, function (props) {
   return props.theme.palette['grey-700'];
-}, function (props) {
-  return props.theme.palette['grey-700'];
 }, function (props) {
   return props.theme.palette['grey-050'];
 }, LargeDropAreaLabel, function (props) {
@@ -80,7 +78,7 @@ export var DropAreaButton = styled.button.withConfig({
 }, function (props) {
   return props.theme.palette['blue-050'];
 }, IconContainer, function (props) {
-  return props.isDropping && !props.disabled && "\n      height: " + (props.mode === 'multi-large' ? '200px' : '80px') + ";\n      background-color: " + props.theme.palette['blue-050'] + " !important;\n      border-color: " + props.theme.palette['blue-300'] + " !important;\n\n      span, " + DropAreaLabel + ", " + LargeDropAreaLabel + ", " + LargeDropAreaDescription + " {\n        color: " + props.theme.palette['blue-500'] + " !important;\n      }\n\n      " + IconContainer + " {\n        fill: " + props.theme.palette['blue-500'] + " !important;\n      }\n    ";
+  return props.isDropping && !props.disabled && "\n      height: " + (props.mode === 'multi-large' ? '200px' : '80px') + ";\n      background-color: " + props.theme.palette['blue-050'] + " !important;\n      border-color: " + props.theme.palette['blue-300'] + " !important;\n\n      span, " + DropAreaLabel + ", " + LargeDropAreaLabel + ", " + LargeDropAreaDescription + " {\n        color: " + props.theme.palette['blue-500'] + " !important;\n      }\n\n      " + IconContainer + " {\n        color: " + props.theme.palette['blue-500'] + " !important;\n      }\n    ";
 });
 export var ErrorMessage = styled(Typography.Text).withConfig({
   displayName: "AvatarUploaderstyles__ErrorMessage",
@@ -91,6 +89,4 @@ export var ErrorMessage = styled(Typography.Text).withConfig({
 export var Label = styled(TypographyLabel).withConfig({
   displayName: "AvatarUploaderstyles__Label",
   componentId: "sc-1lljrgr-9"
-})(["&&{cursor:initial;margin:0 0 8px;display:flex;align-items:center;", "{fill:", ";}}"], IconContainer, function (props) {
-  return props.theme.palette['grey-400'];
-});
+})(["&&{cursor:initial;margin:0 0 8px;display:flex;align-items:center;}"]);

package/dist/AvatarUploader/FileViewAvatar/FileViewAvatar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileViewAvatar.styles.d.ts","sourceRoot":"","sources":["../../../src/AvatarUploader/FileViewAvatar/FileViewAvatar.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,oEAIxB,CAAC;AACF,eAAO,MAAM,UAAU,oEAOtB,CAAC;AACF,eAAO,MAAM,UAAU,oEAEtB,CAAC;AACF,eAAO,MAAM,gBAAgB,uCAQ5B,CAAC;AACF,eAAO,MAAM,WAAW;;;SAKvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAU5B,CAAC;AAEF,eAAO,MAAM,mBAAmB,oEAE/B,CAAC;AACF,eAAO,MAAM,iBAAiB,oEAAe,CAAC;AAE9C,eAAO,MAAM,IAAI,oEAIhB,CAAC;AACF,eAAO,MAAM,mBAAmB;;SAG/B,CAAC;AAEF,eAAO,MAAM,IAAI,sEAShB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;SA0B/B,CAAC;AACF,eAAO,MAAM,aAAa;;SAiBzB,CAAC;AACF,eAAO,MAAM,eAAe;YAAwB,MAAM;;;SAwBzD,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;SAsFpB,CAAC"}
+{"version":3,"file":"FileViewAvatar.styles.d.ts","sourceRoot":"","sources":["../../../src/AvatarUploader/FileViewAvatar/FileViewAvatar.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,oEAIxB,CAAC;AACF,eAAO,MAAM,UAAU,oEAOtB,CAAC;AACF,eAAO,MAAM,UAAU,oEAEtB,CAAC;AACF,eAAO,MAAM,gBAAgB,uCAQ5B,CAAC;AACF,eAAO,MAAM,WAAW;;;SAKvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAU5B,CAAC;AAEF,eAAO,MAAM,mBAAmB,oEAE/B,CAAC;AACF,eAAO,MAAM,iBAAiB,oEAAe,CAAC;AAE9C,eAAO,MAAM,IAAI,oEAIhB,CAAC;AACF,eAAO,MAAM,mBAAmB;;SAG/B,CAAC;AAEF,eAAO,MAAM,IAAI,sEAShB,CAAC;AAEF,eAAO,MAAM,mBAAmB;;SA0B/B,CAAC;AACF,eAAO,MAAM,aAAa;;SAiBzB,CAAC;AACF,eAAO,MAAM,eAAe;YAAwB,MAAM;;;SAuBzD,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;SAsFpB,CAAC"}

package/dist/AvatarUploader/FileViewAvatar/FileViewAvatar.styles.js

@@ -5,13 +5,13 @@ import { Loader } from '@synerise/ds-loader/dist/Loader.styles';
 export var PreviewImage = styled.div.withConfig({
   displayName: "FileViewAvatarstyles__PreviewImage",
   componentId: "sc-1jbyu2z-0"
-})(["", "{fill:", ";}"], IconContainer, function (props) {
+})(["", "{color:", ";}"], IconContainer, function (props) {
   return props.theme.palette['grey-700'];
 });
 export var RepeatIcon = styled.div.withConfig({
   displayName: "FileViewAvatarstyles__RepeatIcon",
   componentId: "sc-1jbyu2z-1"
-})(["", "{fill:", ";}&:hover{cursor:pointer;}"], IconContainer, function (props) {
+})(["", "{color:", ";}&:hover{cursor:pointer;}"], IconContainer, function (props) {
   return props.theme.palette['blue-600'];
 });
 export var LoaderIcon = styled.div.withConfig({
@@ -28,7 +28,7 @@ export var SmallLoader = styled(Loader).withConfig({
 export var PlaceholderImage = styled.div.withConfig({
   displayName: "FileViewAvatarstyles__PlaceholderImage",
   componentId: "sc-1jbyu2z-4"
-})(["background-color:", ";width:32px;height:32px;border-radius:3px;padding:4px;", "{fill:", ";}"], function (props) {
+})(["background-color:", ";width:32px;height:32px;border-radius:3px;padding:4px;", "{color:", ";}"], function (props) {
   return props.theme.palette['grey-200'];
 }, IconContainer, function (props) {
   return props.theme.palette['grey-500'];
@@ -60,7 +60,7 @@ export var Name = styled(Label).withConfig({
 export var RemoveButtonWrapper = styled.div.withConfig({
   displayName: "FileViewAvatarstyles__RemoveButtonWrapper",
   componentId: "sc-1jbyu2z-10"
-})(["display:", ";background-color:transparent;z-index:10;border:0;padding:0;margin:0 4px 0 0;height:16px;width:16px;position:absolute;top:8px;right:5px;cursor:pointer;overflow:", ";", "{position:absolute;right:-2px;top:-2px;transition:fill 0.3s;fill:", ";&:hover{fill:", ";}}"], function (props) {
+})(["display:", ";background-color:transparent;z-index:10;border:0;padding:0;margin:0 4px 0 0;height:16px;width:16px;position:absolute;top:8px;right:5px;cursor:pointer;overflow:", ";", "{position:absolute;right:-2px;top:-2px;transition:fill 0.3s;color:", ";&:hover{color:", ";}}"], function (props) {
   return props.pressed ? 'flex' : 'none';
 }, function (props) {
   return props.pressed ? 'visible' : 'hidden';
@@ -72,7 +72,7 @@ export var RemoveButtonWrapper = styled.div.withConfig({
 export var RemoveWrapper = styled.div.withConfig({
   displayName: "FileViewAvatarstyles__RemoveWrapper",
   componentId: "sc-1jbyu2z-11"
-})(["z-index:100;height:0;width:0;position:relative;bottom:10px;left:68px;cursor:pointer;overflow:hidden;", "{transition:fill 0.3s;fill:", ";&:hover{fill:", ";}}"], IconContainer, function (props) {
+})(["z-index:100;height:0;width:0;position:relative;bottom:10px;left:68px;cursor:pointer;overflow:hidden;", "{transition:fill 0.3s;color:", ";&:hover{color:", ";}}"], IconContainer, function (props) {
   return props.theme.palette['red-600'];
 }, function (props) {
   return props.theme.palette['red-600'];
@@ -88,7 +88,7 @@ export var AvatarContainer = styled.div.withConfig({
 export var FileView = styled.button.withConfig({
   displayName: "FileViewAvatarstyles__FileView",
   componentId: "sc-1jbyu2z-13"
-})(["background-color:", ";border-radius:3px;border:2px solid transparent;display:flex;align-items:center;padding:7px 12px 7px 6px;height:32px;text-align:left;line-height:initial;position:relative;margin:0 0 12px;&:last-of-type{margin:0;}&:hover{border-color:", ";padding-right:", ";", "{color:", ";}", "{", "{fill:", ";}}", "}&:focus{border-color:", ";background-color:", ";}&:hover{background-color:", ";}&:active{border-color:", ";background-color:", ";", "{color:", ";}", "{", "{fill:", ";}}}", ";", ";", ";"], function (props) {
+})(["background-color:", ";border-radius:3px;border:2px solid transparent;display:flex;align-items:center;padding:7px 12px 7px 6px;height:32px;text-align:left;line-height:initial;position:relative;margin:0 0 12px;&:last-of-type{margin:0;}&:hover{border-color:", ";padding-right:", ";", "{color:", ";}", "{", "{color:", ";}}", "}&:focus{border-color:", ";background-color:", ";}&:hover{background-color:", ";}&:active{border-color:", ";background-color:", ";", "{color:", ";}", "{", "{color:", ";}}}", ";", ";", ";"], function (props) {
   return props.theme.palette['grey-100'];
 }, function (props) {
   return props.theme.palette['grey-200'];

package/dist/FileUploader.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.styles.d.ts","sourceRoot":"","sources":["../src/FileUploader.styles.ts"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAIzC,eAAO,MAAM,SAAS,oEAErB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;SAMvB,CAAC;AAEF,eAAO,MAAM,iBAAiB;mBAA+B,OAAO;SAGnE,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;kDAKzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,sEAO9B,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;kDAMpC,CAAC;AAEF,eAAO,MAAM,cAAc;;;UAGnB,MAAM;aACH,OAAO;iBACH,MAAM;YACX,OAAO;SAyGhB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;kDAMxB,CAAC;AAEF,eAAO,MAAM,KAAK,sEAWjB,CAAC;AAEF,eAAO,MAAM,YAAY,4EAAmB,CAAC"}
+{"version":3,"file":"FileUploader.styles.d.ts","sourceRoot":"","sources":["../src/FileUploader.styles.ts"],"names":[],"mappings":";AAEA,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAIzC,eAAO,MAAM,SAAS,oEAErB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;SAMvB,CAAC;AAEF,eAAO,MAAM,iBAAiB;mBAA+B,OAAO;SAGnE,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;kDAKzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,sEAO9B,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;;;kDAMpC,CAAC;AAEF,eAAO,MAAM,cAAc;;;UAGnB,MAAM;aACH,OAAO;iBACH,MAAM;YACX,OAAO;SAwGhB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;kDAMxB,CAAC;AAEF,eAAO,MAAM,KAAK,sEAWjB,CAAC;AAEF,eAAO,MAAM,YAAY,4EAAmB,CAAC"}

package/dist/FileUploader.styles.js

@@ -42,7 +42,7 @@ export var LargeDropAreaDescription = styled(Text).withConfig({
 export var DropAreaButton = styled.button.withConfig({
   displayName: "FileUploaderstyles__DropAreaButton",
   componentId: "sc-62r2x6-6"
-})(["display:", ";align-items:center;border:1px dashed ", ";padding:11px 12px;border-radius:3px;cursor:pointer;background-color:transparent;width:100%;height:48px;transition:height 0.03s;", ";", ";", "{fill:", ";}", " ", " &:hover:not(:disabled){background-color:", ";border-color:", ";", ",", "{color:", ";}", "{fill:", ";color:", ";}}&:disabled{background-color:", ";", "{color:", ";}}&&:active{color:", ";border-color:", ";background-color:", ";}&:focus:not(:active):not(:disabled){border-color:", ";background-color:", ";}&:disabled{span,", "{opacity:0.4;}}", ""], function (props) {
+})(["display:", ";align-items:center;border:1px dashed ", ";padding:11px 12px;border-radius:3px;cursor:pointer;background-color:transparent;width:100%;height:48px;transition:height 0.03s;", ";", ";", "{color:", ";}", " ", " &:hover:not(:disabled){background-color:", ";border-color:", ";", ",", "{color:", ";}", "{color:", ";}}&:disabled{background-color:", ";", "{color:", ";}}&&:active{color:", ";border-color:", ";background-color:", ";}&:focus:not(:active):not(:disabled){border-color:", ";background-color:", ";}&:disabled{span,", "{opacity:0.4;}}", ""], function (props) {
   return props.hidden ? 'none' : 'flex';
 }, function (props) {
   return props.theme.palette['grey-400'];
@@ -64,8 +64,6 @@ export var DropAreaButton = styled.button.withConfig({
   return props.theme.palette['grey-700'];
 }, IconContainer, function (props) {
   return props.theme.palette['grey-700'];
-}, function (props) {
-  return props.theme.palette['grey-700'];
 }, function (props) {
   return props.theme.palette['grey-050'];
 }, LargeDropAreaLabel, function (props) {
@@ -81,7 +79,7 @@ export var DropAreaButton = styled.button.withConfig({
 }, function (props) {
   return props.theme.palette['blue-050'];
 }, IconContainer, function (props) {
-  return props.isDropping && !props.disabled && "\n      height: " + (props.mode === 'multi-large' && props.filesLength === 0 ? '160px' : 'auto') + ";\n      background-color: " + props.theme.palette['blue-050'] + " !important;\n      border-color: " + props.theme.palette['blue-300'] + " !important;\n\n      span, " + DropAreaLabel + ", " + LargeDropAreaLabel + ", " + LargeDropAreaDescription + " {\n        color: " + props.theme.palette['blue-500'] + " !important;\n      }\n\n      " + IconContainer + " {\n        fill: " + props.theme.palette['blue-500'] + " !important;\n      }\n    ";
+  return props.isDropping && !props.disabled && "\n      height: " + (props.mode === 'multi-large' && props.filesLength === 0 ? '160px' : 'auto') + ";\n      background-color: " + props.theme.palette['blue-050'] + " !important;\n      border-color: " + props.theme.palette['blue-300'] + " !important;\n\n      span, " + DropAreaLabel + ", " + LargeDropAreaLabel + ", " + LargeDropAreaDescription + " {\n        color: " + props.theme.palette['blue-500'] + " !important;\n      }\n\n      " + IconContainer + " {\n        color: " + props.theme.palette['blue-500'] + " !important;\n      }\n    ";
 });
 export var ErrorMessage = styled(Text).withConfig({
   displayName: "FileUploaderstyles__ErrorMessage",
@@ -92,7 +90,7 @@ export var ErrorMessage = styled(Text).withConfig({
 export var Label = styled(TypographyLabel).withConfig({
   displayName: "FileUploaderstyles__Label",
   componentId: "sc-62r2x6-8"
-})(["&&{cursor:initial;margin:0 0 8px;display:flex;align-items:center;", "{fill:", ";}}"], IconContainer, function (props) {
+})(["&&{cursor:initial;margin:0 0 8px;display:flex;align-items:center;", "{color:", ";}}"], IconContainer, function (props) {
   return props.theme.palette['grey-400'];
 });
 export var UploadButton = styled(Button).withConfig({

package/dist/FileView/FileView.styles.js

@@ -5,13 +5,13 @@ import Popconfirm from '@synerise/ds-popconfirm';
 export var PreviewImage = styled.div.withConfig({
   displayName: "FileViewstyles__PreviewImage",
   componentId: "sc-wpdc66-0"
-})(["", "{fill:", ";}margin:-4px -8px -4px -4px;"], IconContainer, function (props) {
+})(["", "{color:", ";}margin:-4px -8px -4px -4px;"], IconContainer, function (props) {
   return props.theme.palette['grey-700'];
 });
 export var PlaceholderImage = styled.div.withConfig({
   displayName: "FileViewstyles__PlaceholderImage",
   componentId: "sc-wpdc66-1"
-})(["background-color:", ";width:32px;height:32px;border-radius:3px;padding:4px;", "{fill:", ";}"], function (props) {
+})(["background-color:", ";width:32px;height:32px;border-radius:3px;padding:4px;", "{color:", ";}"], function (props) {
   return props.theme.palette['grey-200'];
 }, IconContainer, function (props) {
   return props.theme.palette['grey-500'];
@@ -47,7 +47,7 @@ export var SizeOrError = styled(Typography.Text).withConfig({
 export var RemoveWrapper = styled.div.withConfig({
   displayName: "FileViewstyles__RemoveWrapper",
   componentId: "sc-wpdc66-7"
-})(["display:flex;background-color:transparent;z-index:10;border:0;padding:0;margin:0;height:16px;width:16px;position:absolute;top:14px;right:10px;cursor:pointer;", "{position:absolute;right:-2px;top:-2px;transition:fill 0.3s;fill:", ";&:hover{fill:", ";}}"], IconContainer, function (props) {
+})(["display:flex;background-color:transparent;z-index:10;border:0;padding:0;margin:0;height:16px;width:16px;position:absolute;top:14px;right:10px;cursor:pointer;", "{position:absolute;right:-2px;top:-2px;transition:color 0.3s;color:", ";&:hover{color:", ";}}"], IconContainer, function (props) {
   return props.theme.palette['grey-300'];
 }, function (props) {
   return props.theme.palette['red-500'];
@@ -55,7 +55,7 @@ export var RemoveWrapper = styled.div.withConfig({
 export var CheckButtonWrapper = styled.div.withConfig({
   displayName: "FileViewstyles__CheckButtonWrapper",
   componentId: "sc-wpdc66-8"
-})(["display:flex;background-color:transparent;z-index:10;margin:0;height:16px;width:16px;position:absolute;top:14px;right:10px;cursor:pointer;", "{position:absolute;right:-2px;top:-2px;transition:fill 0.3s;fill:", ";&:hover{fill:", ";}}"], IconContainer, function (props) {
+})(["display:flex;background-color:transparent;z-index:10;margin:0;height:16px;width:16px;position:absolute;top:14px;right:10px;cursor:pointer;", "{position:absolute;right:-2px;top:-2px;transition:color 0.3s;color:", ";&:hover{color:", ";}}"], IconContainer, function (props) {
   return props.theme.palette['green-600'];
 }, function (props) {
   return props.theme.palette['green-500'];
@@ -63,7 +63,7 @@ export var CheckButtonWrapper = styled.div.withConfig({
 export var RemoveButtonWrapper = styled.div.withConfig({
   displayName: "FileViewstyles__RemoveButtonWrapper",
   componentId: "sc-wpdc66-9"
-})(["display:", ";background-color:transparent;z-index:10;border:0;padding:0;margin:0;height:16px;width:16px;position:absolute;top:14px;right:10px;cursor:pointer;overflow:", ";", "{position:absolute;right:-2px;top:-2px;transition:fill 0.3s;fill:", ";&:hover{fill:", ";}}"], function (props) {
+})(["display:", ";background-color:transparent;z-index:10;border:0;padding:0;margin:0;height:16px;width:16px;position:absolute;top:14px;right:10px;cursor:pointer;overflow:", ";", "{position:absolute;right:-2px;top:-2px;transition:color 0.3s;color:", ";&:hover{color:", ";}}"], function (props) {
   return props.pressed ? 'flex' : 'none';
 }, function (props) {
   return props.pressed ? 'visible' : 'hidden';

package/dist/ItemUploader/ItemUploader.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ItemUploader.styles.d.ts","sourceRoot":"","sources":["../../src/ItemUploader/ItemUploader.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,SAAS,oEAErB,CAAC;AACF,eAAO,MAAM,iBAAiB,oEAE7B,CAAC;AAEF,eAAO,MAAM,iBAAiB;mBAA+B,OAAO;SAGnE,CAAC;AAEF,eAAO,MAAM,aAAa,uMAGzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,sEAO9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,uMAMpC,CAAC;AAEF,eAAO,MAAM,cAAc;;;UAGnB,MAAM;aACH,OAAO;iBACH,MAAM;SAuGpB,CAAC;AAEF,eAAO,MAAM,YAAY,uMAMxB,CAAC;AACF,eAAO,MAAM,WAAW;;SAMvB,CAAC;AAEF,eAAO,MAAM,KAAK,sEAWjB,CAAC"}
+{"version":3,"file":"ItemUploader.styles.d.ts","sourceRoot":"","sources":["../../src/ItemUploader/ItemUploader.styles.ts"],"names":[],"mappings":";AAIA,eAAO,MAAM,SAAS,oEAErB,CAAC;AACF,eAAO,MAAM,iBAAiB,oEAE7B,CAAC;AAEF,eAAO,MAAM,iBAAiB;mBAA+B,OAAO;SAGnE,CAAC;AAEF,eAAO,MAAM,aAAa,uMAGzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,sEAO9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,uMAMpC,CAAC;AAEF,eAAO,MAAM,cAAc;;;UAGnB,MAAM;aACH,OAAO;iBACH,MAAM;SAsGpB,CAAC;AAEF,eAAO,MAAM,YAAY,uMAMxB,CAAC;AACF,eAAO,MAAM,WAAW;;SAMvB,CAAC;AAEF,eAAO,MAAM,KAAK,sEAWjB,CAAC"}

package/dist/ItemUploader/ItemUploader.styles.js

@@ -36,7 +36,7 @@ export var LargeDropAreaDescription = styled(Typography.Text).withConfig({
 export var DropAreaButton = styled.button.withConfig({
   displayName: "ItemUploaderstyles__DropAreaButton",
   componentId: "sc-a5v1d2-6"
-})(["align-items:center;border:1px dashed ", ";padding:11px 12px;border-radius:3px;cursor:pointer;background-color:transparent;width:80px;height:80px;transition:height 0.3s;", ";", "{fill:", ";}span{display:inline-block;margin:0 0 0 12px;}", " ", " &:hover:not(:disabled){background-color:", ";border-color:", ";", ",", "{color:", ";}", "{fill:", ";color:", ";}}&:disabled{background-color:", ";", "{color:", ";}}&&:active{color:", ";border-color:", ";background-color:", ";}&:focus:not(:active):not(:disabled){border-color:", ";background-color:", ";}&:disabled{span,", "{opacity:0.4;}}", ""], function (props) {
+})(["align-items:center;border:1px dashed ", ";padding:11px 12px;border-radius:3px;cursor:pointer;background-color:transparent;width:80px;height:80px;transition:height 0.3s;", ";", "{color:", ";}span{display:inline-block;margin:0 0 0 12px;}", " ", " &:hover:not(:disabled){background-color:", ";border-color:", ";", ",", "{color:", ";}", "{color:", ";}}&:disabled{background-color:", ";", "{color:", ";}}&&:active{color:", ";border-color:", ";background-color:", ";}&:focus:not(:active):not(:disabled){border-color:", ";background-color:", ";}&:disabled{span,", "{opacity:0.4;}}", ""], function (props) {
   return props.theme.palette['grey-300'];
 }, function (props) {
   return props.mode === 'multi-large' && props.filesLength === 0 && "\n      height: 108px;\n      flex-direction: column;\n      text-align: center;\n      justify-content: center;\n  ";
@@ -54,8 +54,6 @@ export var DropAreaButton = styled.button.withConfig({
   return props.theme.palette['grey-700'];
 }, IconContainer, function (props) {
   return props.theme.palette['grey-700'];
-}, function (props) {
-  return props.theme.palette['grey-700'];
 }, function (props) {
   return props.theme.palette['grey-050'];
 }, LargeDropAreaLabel, function (props) {
@@ -71,7 +69,7 @@ export var DropAreaButton = styled.button.withConfig({
 }, function (props) {
   return props.theme.palette['blue-050'];
 }, IconContainer, function (props) {
-  return props.isDropping && !props.disabled && "\n      height: " + (props.mode === 'multi-large' ? '168px' : 'auto') + ";\n      background-color: " + props.theme.palette['blue-050'] + " !important;\n      border-color: " + props.theme.palette['blue-300'] + " !important;\n\n      span, " + DropAreaLabel + ", " + LargeDropAreaLabel + ", " + LargeDropAreaDescription + " {\n        color: " + props.theme.palette['blue-500'] + " !important;\n      }\n\n      " + IconContainer + " {\n        fill: " + props.theme.palette['blue-500'] + " !important;\n      }\n    ";
+  return props.isDropping && !props.disabled && "\n      height: " + (props.mode === 'multi-large' ? '168px' : 'auto') + ";\n      background-color: " + props.theme.palette['blue-050'] + " !important;\n      border-color: " + props.theme.palette['blue-300'] + " !important;\n\n      span, " + DropAreaLabel + ", " + LargeDropAreaLabel + ", " + LargeDropAreaDescription + " {\n        color: " + props.theme.palette['blue-500'] + " !important;\n      }\n\n      " + IconContainer + " {\n        color: " + props.theme.palette['blue-500'] + " !important;\n      }\n    ";
 });
 export var ErrorMessage = styled(Typography.Text).withConfig({
   displayName: "ItemUploaderstyles__ErrorMessage",
@@ -90,6 +88,6 @@ export var Description = styled(Typography.Text).withConfig({
 export var Label = styled(TypographyLabel).withConfig({
   displayName: "ItemUploaderstyles__Label",
   componentId: "sc-a5v1d2-9"
-})(["&&{cursor:initial;margin:0 0 8px;display:flex;align-items:center;", "{fill:", ";}}"], IconContainer, function (props) {
+})(["&&{cursor:initial;margin:0 0 8px;display:flex;align-items:center;", "{color:", ";}}"], IconContainer, function (props) {
   return props.theme.palette['grey-400'];
 });

package/dist/ItemUploader/UploaderButton/FileViewItem.styles.js

@@ -5,13 +5,13 @@ import { Loader } from '@synerise/ds-loader/dist/Loader.styles';
 export var PreviewImage = styled.div.withConfig({
   displayName: "FileViewItemstyles__PreviewImage",
   componentId: "sc-1rkoxpv-0"
-})(["", "{display:flex;fill:", ";}"], IconContainer, function (props) {
+})(["", "{display:flex;color:", ";}"], IconContainer, function (props) {
   return props.theme.palette['grey-700'];
 });
 export var RepeatIcon = styled.div.withConfig({
   displayName: "FileViewItemstyles__RepeatIcon",
   componentId: "sc-1rkoxpv-1"
-})(["", "{fill:", ";}&:hover{cursor:pointer;}"], IconContainer, function (props) {
+})(["", "{color:", ";}&:hover{cursor:pointer;}"], IconContainer, function (props) {
   return props.theme.palette['blue-600'];
 });
 export var LoaderIcon = styled.div.withConfig({
@@ -28,7 +28,7 @@ export var SmallLoader = styled(Loader).withConfig({
 export var PlaceholderImage = styled.div.withConfig({
   displayName: "FileViewItemstyles__PlaceholderImage",
   componentId: "sc-1rkoxpv-4"
-})(["background-color:", ";width:32px;height:32px;border-radius:3px;padding:4px;", "{fill:", ";}"], function (props) {
+})(["background-color:", ";width:32px;height:32px;border-radius:3px;padding:4px;", "{color:", ";}"], function (props) {
   return props.theme.palette['grey-200'];
 }, IconContainer, function (props) {
   return props.theme.palette['grey-500'];
@@ -50,7 +50,7 @@ export var Name = styled(Label).withConfig({
 export var RemoveButtonWrapper = styled.div.withConfig({
   displayName: "FileViewItemstyles__RemoveButtonWrapper",
   componentId: "sc-1rkoxpv-8"
-})(["display:", ";background-color:transparent;z-index:10;border:0;padding:0;margin:0 4px 0 0;height:16px;width:16px;position:absolute;top:8px;right:5px;cursor:pointer;overflow:", ";", "{position:absolute;right:-2px;top:-2px;transition:fill 0.3s;fill:", ";&:hover{fill:", ";}}"], function (props) {
+})(["display:", ";background-color:transparent;z-index:10;border:0;padding:0;margin:0 4px 0 0;height:16px;width:16px;position:absolute;top:8px;right:5px;cursor:pointer;overflow:", ";", "{position:absolute;right:-2px;top:-2px;transition:fill 0.3s;color:", ";&:hover{color:", ";}}"], function (props) {
   return props.pressed ? 'flex' : 'none';
 }, function (props) {
   return props.pressed ? 'visible' : 'hidden';
@@ -62,7 +62,7 @@ export var RemoveButtonWrapper = styled.div.withConfig({
 export var FileView = styled.button.withConfig({
   displayName: "FileViewItemstyles__FileView",
   componentId: "sc-1rkoxpv-9"
-})(["background-color:", ";border-radius:3px;border:2px solid transparent;display:flex;align-items:center;padding:7px 12px 7px 6px;height:32px;text-align:left;line-height:initial;position:relative;margin:0 0 12px;&:last-of-type{margin:0;}&:hover{border-color:", ";padding-right:", ";", "{color:", ";}", "{", "{fill:", ";}}", "}&:focus{border-color:", ";background-color:", ";}&:hover{background-color:", ";}&:active{border-color:", ";background-color:", ";", "{color:", ";}", "{", "{fill:", ";}}}", ";", ";", ";"], function (props) {
+})(["background-color:", ";border-radius:3px;border:2px solid transparent;display:flex;align-items:center;padding:7px 12px 7px 6px;height:32px;text-align:left;line-height:initial;position:relative;margin:0 0 12px;&:last-of-type{margin:0;}&:hover{border-color:", ";padding-right:", ";", "{color:", ";}", "{", "{color:", ";}}", "}&:focus{border-color:", ";background-color:", ";}&:hover{background-color:", ";}&:active{border-color:", ";background-color:", ";", "{color:", ";}", "{", "{color:", ";}}}", ";", ";", ";"], function (props) {
   return props.theme.palette['grey-100'];
 }, function (props) {
   return props.theme.palette['grey-200'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-file-uploader",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "description": "FileUploader UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,14 +34,14 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-button": "^1.2.0",
-    "@synerise/ds-icon": "^1.4.2",
-    "@synerise/ds-loader": "^1.0.2",
-    "@synerise/ds-popconfirm": "^1.0.7",
-    "@synerise/ds-progress-bar": "^1.1.2",
-    "@synerise/ds-tooltip": "^1.1.6",
-    "@synerise/ds-typography": "^1.0.7",
-    "@synerise/ds-utils": "^1.1.0",
+    "@synerise/ds-button": "^1.3.1",
+    "@synerise/ds-icon": "^1.5.1",
+    "@synerise/ds-loader": "^1.0.3",
+    "@synerise/ds-popconfirm": "^1.0.9",
+    "@synerise/ds-progress-bar": "^1.1.4",
+    "@synerise/ds-tooltip": "^1.1.8",
+    "@synerise/ds-typography": "^1.0.9",
+    "@synerise/ds-utils": "^1.1.1",
     "filesize.js": "^2.0.0",
     "react-dropzone": "^10.2.1"
   },
@@ -51,5 +51,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "90af7549cf0f556340bdd0deec4bb59bacf3e95e"
+  "gitHead": "9e9cc54e3690b4d51323f91c81b3b79305984da6"
 }