@pega/cosmos-react-core 7.0.0-build.7.1 → 7.0.0-build.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (112) hide show
  1. package/lib/components/File/FileDisplay.d.ts.map +1 -1
  2. package/lib/components/File/FileDisplay.js +1 -1
  3. package/lib/components/File/FileDisplay.js.map +1 -1
  4. package/lib/components/File/FileInput.d.ts.map +1 -1
  5. package/lib/components/File/FileInput.js +35 -21
  6. package/lib/components/File/FileInput.js.map +1 -1
  7. package/lib/components/File/FileItem.d.ts +2 -4
  8. package/lib/components/File/FileItem.d.ts.map +1 -1
  9. package/lib/components/File/FileItem.js +3 -4
  10. package/lib/components/File/FileItem.js.map +1 -1
  11. package/lib/components/Icon/streamline-icons/arrow-down.icon.d.ts.map +1 -1
  12. package/lib/components/Icon/streamline-icons/arrow-down.icon.js +1 -1
  13. package/lib/components/Icon/streamline-icons/arrow-down.icon.js.map +1 -1
  14. package/lib/components/Icon/streamline-icons/arrow-left.icon.d.ts.map +1 -1
  15. package/lib/components/Icon/streamline-icons/arrow-left.icon.js +1 -1
  16. package/lib/components/Icon/streamline-icons/arrow-left.icon.js.map +1 -1
  17. package/lib/components/Icon/streamline-icons/arrow-micro-down.icon.js +1 -1
  18. package/lib/components/Icon/streamline-icons/arrow-micro-down.icon.js.map +1 -1
  19. package/lib/components/Icon/streamline-icons/arrow-micro-left.icon.js +1 -1
  20. package/lib/components/Icon/streamline-icons/arrow-micro-left.icon.js.map +1 -1
  21. package/lib/components/Icon/streamline-icons/arrow-micro-right.icon.js +1 -1
  22. package/lib/components/Icon/streamline-icons/arrow-micro-right.icon.js.map +1 -1
  23. package/lib/components/Icon/streamline-icons/arrow-micro-up.icon.js +1 -1
  24. package/lib/components/Icon/streamline-icons/arrow-micro-up.icon.js.map +1 -1
  25. package/lib/components/Icon/streamline-icons/arrow-right.icon.d.ts.map +1 -1
  26. package/lib/components/Icon/streamline-icons/arrow-right.icon.js +1 -1
  27. package/lib/components/Icon/streamline-icons/arrow-right.icon.js.map +1 -1
  28. package/lib/components/Icon/streamline-icons/arrow-up.icon.d.ts.map +1 -1
  29. package/lib/components/Icon/streamline-icons/arrow-up.icon.js +1 -1
  30. package/lib/components/Icon/streamline-icons/arrow-up.icon.js.map +1 -1
  31. package/lib/components/Icon/streamline-icons/caret-down.icon.d.ts.map +1 -1
  32. package/lib/components/Icon/streamline-icons/caret-down.icon.js +1 -1
  33. package/lib/components/Icon/streamline-icons/caret-down.icon.js.map +1 -1
  34. package/lib/components/Icon/streamline-icons/caret-left.icon.d.ts.map +1 -1
  35. package/lib/components/Icon/streamline-icons/caret-left.icon.js +1 -1
  36. package/lib/components/Icon/streamline-icons/caret-left.icon.js.map +1 -1
  37. package/lib/components/Icon/streamline-icons/caret-right.icon.d.ts.map +1 -1
  38. package/lib/components/Icon/streamline-icons/caret-right.icon.js +1 -1
  39. package/lib/components/Icon/streamline-icons/caret-right.icon.js.map +1 -1
  40. package/lib/components/Icon/streamline-icons/caret-up.icon.d.ts.map +1 -1
  41. package/lib/components/Icon/streamline-icons/caret-up.icon.js +1 -1
  42. package/lib/components/Icon/streamline-icons/caret-up.icon.js.map +1 -1
  43. package/lib/components/Icon/streamline-icons/case-solid.icon.d.ts +1 -1
  44. package/lib/components/Icon/streamline-icons/case-solid.icon.d.ts.map +1 -1
  45. package/lib/components/Icon/streamline-icons/case-solid.icon.js +2 -2
  46. package/lib/components/Icon/streamline-icons/case-solid.icon.js.map +1 -1
  47. package/lib/components/Icon/streamline-icons/clipboard-pencil-solid.icon.d.ts.map +1 -1
  48. package/lib/components/Icon/streamline-icons/clipboard-pencil-solid.icon.js +2 -2
  49. package/lib/components/Icon/streamline-icons/clipboard-pencil-solid.icon.js.map +1 -1
  50. package/lib/components/Icon/streamline-icons/clock-solid.icon.d.ts.map +1 -1
  51. package/lib/components/Icon/streamline-icons/clock-solid.icon.js +2 -2
  52. package/lib/components/Icon/streamline-icons/clock-solid.icon.js.map +1 -1
  53. package/lib/components/Icon/streamline-icons/disc-stack-solid.icon.d.ts.map +1 -1
  54. package/lib/components/Icon/streamline-icons/disc-stack-solid.icon.js +2 -2
  55. package/lib/components/Icon/streamline-icons/disc-stack-solid.icon.js.map +1 -1
  56. package/lib/components/Icon/streamline-icons/drag.icon.js +1 -1
  57. package/lib/components/Icon/streamline-icons/drag.icon.js.map +1 -1
  58. package/lib/components/Icon/streamline-icons/information-solid.icon.d.ts +5 -0
  59. package/lib/components/Icon/streamline-icons/information-solid.icon.d.ts.map +1 -0
  60. package/lib/components/Icon/streamline-icons/information-solid.icon.js +7 -0
  61. package/lib/components/Icon/streamline-icons/information-solid.icon.js.map +1 -0
  62. package/lib/components/Icon/streamline-icons/micro-arrow-down.icon.d.ts +5 -0
  63. package/lib/components/Icon/streamline-icons/micro-arrow-down.icon.d.ts.map +1 -0
  64. package/lib/components/Icon/streamline-icons/micro-arrow-down.icon.js +7 -0
  65. package/lib/components/Icon/streamline-icons/micro-arrow-down.icon.js.map +1 -0
  66. package/lib/components/Icon/streamline-icons/micro-arrow-left.icon.d.ts +5 -0
  67. package/lib/components/Icon/streamline-icons/micro-arrow-left.icon.d.ts.map +1 -0
  68. package/lib/components/Icon/streamline-icons/micro-arrow-left.icon.js +7 -0
  69. package/lib/components/Icon/streamline-icons/micro-arrow-left.icon.js.map +1 -0
  70. package/lib/components/Icon/streamline-icons/micro-arrow-right.icon.d.ts +5 -0
  71. package/lib/components/Icon/streamline-icons/micro-arrow-right.icon.d.ts.map +1 -0
  72. package/lib/components/Icon/streamline-icons/micro-arrow-right.icon.js +7 -0
  73. package/lib/components/Icon/streamline-icons/micro-arrow-right.icon.js.map +1 -0
  74. package/lib/components/Icon/streamline-icons/micro-arrow-up.icon.d.ts +5 -0
  75. package/lib/components/Icon/streamline-icons/micro-arrow-up.icon.d.ts.map +1 -0
  76. package/lib/components/Icon/streamline-icons/micro-arrow-up.icon.js +7 -0
  77. package/lib/components/Icon/streamline-icons/micro-arrow-up.icon.js.map +1 -0
  78. package/lib/components/Icon/streamline-icons/minus.icon.d.ts.map +1 -1
  79. package/lib/components/Icon/streamline-icons/minus.icon.js +1 -1
  80. package/lib/components/Icon/streamline-icons/minus.icon.js.map +1 -1
  81. package/lib/components/Icon/streamline-icons/open.icon.d.ts.map +1 -1
  82. package/lib/components/Icon/streamline-icons/open.icon.js +1 -1
  83. package/lib/components/Icon/streamline-icons/open.icon.js.map +1 -1
  84. package/lib/components/Icon/streamline-icons/plus.icon.d.ts.map +1 -1
  85. package/lib/components/Icon/streamline-icons/plus.icon.js +1 -1
  86. package/lib/components/Icon/streamline-icons/plus.icon.js.map +1 -1
  87. package/lib/components/Icon/streamline-icons/rule-library-solid.icon.d.ts.map +1 -1
  88. package/lib/components/Icon/streamline-icons/rule-library-solid.icon.js +2 -2
  89. package/lib/components/Icon/streamline-icons/rule-library-solid.icon.js.map +1 -1
  90. package/lib/components/Icon/streamline-icons/search-analytics-solid.icon.d.ts.map +1 -1
  91. package/lib/components/Icon/streamline-icons/search-analytics-solid.icon.js +2 -2
  92. package/lib/components/Icon/streamline-icons/search-analytics-solid.icon.js.map +1 -1
  93. package/lib/components/Icon/streamline-icons/times.icon.d.ts.map +1 -1
  94. package/lib/components/Icon/streamline-icons/times.icon.js +1 -1
  95. package/lib/components/Icon/streamline-icons/times.icon.js.map +1 -1
  96. package/lib/components/Icon/streamline-icons/warn-solid.icon.d.ts.map +1 -1
  97. package/lib/components/Icon/streamline-icons/warn-solid.icon.js +2 -2
  98. package/lib/components/Icon/streamline-icons/warn-solid.icon.js.map +1 -1
  99. package/lib/components/Icon/streamlineIconNames.d.ts +1 -1
  100. package/lib/components/Icon/streamlineIconNames.d.ts.map +1 -1
  101. package/lib/components/Icon/streamlineIconNames.js +5 -0
  102. package/lib/components/Icon/streamlineIconNames.js.map +1 -1
  103. package/lib/components/Lightbox/Lightbox.d.ts.map +1 -1
  104. package/lib/components/Lightbox/Lightbox.js +8 -6
  105. package/lib/components/Lightbox/Lightbox.js.map +1 -1
  106. package/lib/components/Location/utils.d.ts +18 -0
  107. package/lib/components/Location/utils.d.ts.map +1 -1
  108. package/lib/components/Location/utils.js +132 -18
  109. package/lib/components/Location/utils.js.map +1 -1
  110. package/lib/i18n/default.js +1 -1
  111. package/lib/i18n/default.js.map +1 -1
  112. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"FileDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,WAAW,GAAG,YAAY,CAAC,EAC5D,SAAS,EACT,cAAc;IAChB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,iBAAiB,GAAG,eAAe,CAAC,CAAC;CACjE;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA2CnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"FileDisplay.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileDisplay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAmB,GAAG,EAAE,MAAM,OAAO,CAAC;AAErE,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAK3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,WAAW,GAAG,YAAY,CAAC,EAC5D,SAAS,EACT,cAAc;IAChB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IACnC,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,iBAAiB,GAAG,eAAe,CAAC,CAAC;CACjE;AAED,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,GAAG,YAAY,CA0CnE,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -9,7 +9,7 @@ const FileDisplay = forwardRef(function FileDisplay({ id, displayText, value, va
9
9
  }
10
10
  if (variant === 'link')
11
11
  return (_jsx(Link, { ref: ref, ...restProps, href: value, children: displayText || value }));
12
- return (_jsx(FileItem, { ...restProps, id: id, ref: ref, format: value.split('.').pop() ?? value, name: displayText || value, url: value, thumbnail: thumbnail, onDownload: onDownload, onPreview: onPreview }));
12
+ return (_jsx(FileItem, { ...restProps, id: id, ref: ref, format: value.split('.').pop() ?? value, name: displayText || value, thumbnail: thumbnail, onDownload: onDownload, onPreview: onPreview }));
13
13
  });
14
14
  export default FileDisplay;
15
15
  //# sourceMappingURL=FileDisplay.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FileDisplay.js","sourceRoot":"","sources":["../../../src/components/File/FileDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAsBlC,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAClB,EACE,EAAE,EACF,WAAW,EACX,KAAK,EACL,OAAO,EACP,SAAS,EACT,SAAS,EACT,UAAU,EACV,GAAG,SAAS,EACsB,EACpC,GAA4B;IAE5B,IAAI,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,EAAE;QAChC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,CAAC,CAAC,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,GACtC,CACR,CAAC;KACH;IAED,IAAI,OAAO,KAAK,MAAM;QACpB,OAAO,CACL,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,KAAK,YACjE,WAAW,IAAI,KAAK,GAChB,CACR,CAAC;IAEJ,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAA0B,EAC/B,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,EACvC,IAAI,EAAE,WAAW,IAAI,KAAK,EAC1B,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\nimport NoValue from '../NoValue/NoValue';\n\nimport FileItem from './FileItem';\nimport type { FileItemProps } from './FileItem';\n\nexport interface FileDisplayProps\n extends Pick<FileItemProps, 'id' | 'onPreview' | 'onDownload'>,\n BaseProps,\n NoChildrenProp {\n /** URL address */\n value?: string;\n /** The text to be displayed. */\n displayText?: string;\n /**\n * Display value either as file, link only or textual representation.\n * @default 'file'\n */\n variant?: 'file' | 'link' | 'text';\n /** Thumbnail image. */\n thumbnail?: string;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement | HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst FileDisplay: FunctionComponent<FileDisplayProps & ForwardProps> = forwardRef(\n function FileDisplay(\n {\n id,\n displayText,\n value,\n variant,\n thumbnail,\n onPreview,\n onDownload,\n ...restProps\n }: PropsWithoutRef<FileDisplayProps>,\n ref: FileDisplayProps['ref']\n ) {\n if (variant === 'text' || !value) {\n return (\n <span ref={ref} {...restProps}>\n {value ? displayText || value : <NoValue />}\n </span>\n );\n }\n\n if (variant === 'link')\n return (\n <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={value}>\n {displayText || value}\n </Link>\n );\n\n return (\n <FileItem\n {...restProps}\n id={id}\n ref={ref as Ref<HTMLDivElement>}\n format={value.split('.').pop() ?? value}\n name={displayText || value}\n url={value}\n thumbnail={thumbnail}\n onDownload={onDownload}\n onPreview={onPreview}\n />\n );\n }\n);\n\nexport default FileDisplay;\n"]}
1
+ {"version":3,"file":"FileDisplay.js","sourceRoot":"","sources":["../../../src/components/File/FileDisplay.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAInC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,OAAO,MAAM,oBAAoB,CAAC;AAEzC,OAAO,QAAQ,MAAM,YAAY,CAAC;AAsBlC,MAAM,WAAW,GAAuD,UAAU,CAChF,SAAS,WAAW,CAClB,EACE,EAAE,EACF,WAAW,EACX,KAAK,EACL,OAAO,EACP,SAAS,EACT,SAAS,EACT,UAAU,EACV,GAAG,SAAS,EACsB,EACpC,GAA4B;IAE5B,IAAI,OAAO,KAAK,MAAM,IAAI,CAAC,KAAK,EAAE;QAChC,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,KAAM,SAAS,YAC1B,KAAK,CAAC,CAAC,CAAC,WAAW,IAAI,KAAK,CAAC,CAAC,CAAC,KAAC,OAAO,KAAG,GACtC,CACR,CAAC;KACH;IAED,IAAI,OAAO,KAAK,MAAM;QACpB,OAAO,CACL,KAAC,IAAI,IAAC,GAAG,EAAE,GAA6B,KAAM,SAAS,EAAE,IAAI,EAAE,KAAK,YACjE,WAAW,IAAI,KAAK,GAChB,CACR,CAAC;IAEJ,OAAO,CACL,KAAC,QAAQ,OACH,SAAS,EACb,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAA0B,EAC/B,MAAM,EAAE,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,IAAI,KAAK,EACvC,IAAI,EAAE,WAAW,IAAI,KAAK,EAC1B,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,GACpB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import { forwardRef } from 'react';\nimport type { FunctionComponent, PropsWithoutRef, Ref } from 'react';\n\nimport type { BaseProps, ForwardProps, NoChildrenProp } from '../../types';\nimport Link from '../Link';\nimport NoValue from '../NoValue/NoValue';\n\nimport FileItem from './FileItem';\nimport type { FileItemProps } from './FileItem';\n\nexport interface FileDisplayProps\n extends Pick<FileItemProps, 'id' | 'onPreview' | 'onDownload'>,\n BaseProps,\n NoChildrenProp {\n /** URL address */\n value?: string;\n /** The text to be displayed. */\n displayText?: string;\n /**\n * Display value either as file, link only or textual representation.\n * @default 'file'\n */\n variant?: 'file' | 'link' | 'text';\n /** Thumbnail image. */\n thumbnail?: string;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement | HTMLAnchorElement | HTMLSpanElement>;\n}\n\nconst FileDisplay: FunctionComponent<FileDisplayProps & ForwardProps> = forwardRef(\n function FileDisplay(\n {\n id,\n displayText,\n value,\n variant,\n thumbnail,\n onPreview,\n onDownload,\n ...restProps\n }: PropsWithoutRef<FileDisplayProps>,\n ref: FileDisplayProps['ref']\n ) {\n if (variant === 'text' || !value) {\n return (\n <span ref={ref} {...restProps}>\n {value ? displayText || value : <NoValue />}\n </span>\n );\n }\n\n if (variant === 'link')\n return (\n <Link ref={ref as Ref<HTMLAnchorElement>} {...restProps} href={value}>\n {displayText || value}\n </Link>\n );\n\n return (\n <FileItem\n {...restProps}\n id={id}\n ref={ref as Ref<HTMLDivElement>}\n format={value.split('.').pop() ?? value}\n name={displayText || value}\n thumbnail={thumbnail}\n onDownload={onDownload}\n onPreview={onPreview}\n />\n );\n }\n);\n\nexport default FileDisplay;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAA2C,MAAM,OAAO,CAAC;AAI7F,OAAO,KAAK,EACV,SAAS,EACT,YAAY,EACZ,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAUrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAWvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAOhD,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC3E,qEAAqE;IACrE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,sEAAsE;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;cAAmC,OAAO;SAYnE,CAAC;AAEH,eAAO,MAAM,eAAe,wMAkB3B,CAAC;;;;AAwJF,wBAA2D"}
1
+ {"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAA2C,MAAM,OAAO,CAAC;AAI7F,OAAO,KAAK,EACV,SAAS,EACT,YAAY,EACZ,cAAc,EAEd,UAAU,EACX,MAAM,aAAa,CAAC;AAUrB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAWvD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAOhD,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc,EAAE,UAAU;IAC3E,qEAAqE;IACrE,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACvC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,KAAK,CAAC,EAAE,aAAa,EAAE,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC3B;;;OAGG;IACH,EAAE,CAAC,EAAE,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC5B,oDAAoD;IACpD,MAAM,CAAC,EAAE,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IACpC,2DAA2D;IAC3D,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC,uCAAuC;IACvC,WAAW,CAAC,EAAE,gBAAgB,CAAC,aAAa,CAAC,CAAC;IAC9C,6GAA6G;IAC7G,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,wEAAwE;IACxE,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;IACxC,+FAA+F;IAC/F,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAChC,8EAA8E;IAC9E,cAAc,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IACpD,sEAAsE;IACtE,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AAED,eAAO,MAAM,cAAc;cAAmC,OAAO;SAoBpE,CAAC;AAIF,eAAO,MAAM,eAAe,wMAc3B,CAAC;;;;AA8KF,wBAA2D"}
@@ -1,6 +1,6 @@
1
1
  import { createElement as _createElement } from "react";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
- import { forwardRef, useCallback, useState } from 'react';
3
+ import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
4
4
  import styled, { css } from 'styled-components';
5
5
  import { hideVisually } from 'polished';
6
6
  import { useConsolidatedRef, useI18n, useUID, useDirection, useTestIds, useTheme } from '../../hooks';
@@ -12,23 +12,24 @@ import Icon, { registerIcon } from '../Icon';
12
12
  import * as paperClipIcon from '../Icon/icons/paper-clip.icon';
13
13
  import FormField from '../FormField';
14
14
  import Grid from '../Grid';
15
- import { withTestIds } from '../../utils';
15
+ import { getFocusables, withTestIds } from '../../utils';
16
16
  import FileItem from './FileItem';
17
17
  import { getFileInputTestIds } from './File.test-ids';
18
18
  registerIcon(paperClipIcon);
19
- export const StyledDropZone = styled(FormControl)(({ dragOver, theme }) => {
19
+ export const StyledDropZone = styled(FormControl)(({ dragOver, theme: { base: { spacing }, components } }) => {
20
20
  return css `
21
- padding: calc(2 * ${theme.base.spacing});
22
- min-height: 4rem;
23
- border-style: dashed;
24
- cursor: pointer;
21
+ padding: calc(2 * ${spacing});
22
+ height: ${components.input.height};
23
+ border-style: dashed;
24
+ cursor: pointer;
25
25
 
26
- ${dragOver &&
26
+ ${dragOver &&
27
27
  css `
28
- border-style: solid;
29
- `}
30
- `;
28
+ border-style: solid;
29
+ `}
30
+ `;
31
31
  });
32
+ StyledDropZone.defaultProps = defaultThemeProp;
32
33
  export const StyledFileInput = styled.div(({ theme }) => {
33
34
  return css `
34
35
  position: relative;
@@ -40,10 +41,6 @@ export const StyledFileInput = styled.div(({ theme }) => {
40
41
  input:enabled:focus + ${StyledDropZone} {
41
42
  box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};
42
43
  }
43
-
44
- input[hidden] + ${StyledDropZone} {
45
- display: none;
46
- }
47
44
  `;
48
45
  });
49
46
  StyledFileInput.defaultProps = defaultThemeProp;
@@ -60,6 +57,9 @@ const FileInput = forwardRef(function FileInput(props, ref) {
60
57
  const testIds = useTestIds(testId, getFileInputTestIds);
61
58
  const icon = _jsx(Icon, { name: 'paper-clip' });
62
59
  const inputRef = useConsolidatedRef(ref);
60
+ const fileItemListRef = useRef(null);
61
+ // Tracks whether at least one file is uploaded -- used for updating the focus to DropZone when the files are deleted
62
+ const isFilesAdded = useRef(false);
63
63
  const onChange = useCallback((e) => {
64
64
  if (e.target.files) {
65
65
  onFilesAdded?.(Array.from(e.target.files));
@@ -78,6 +78,7 @@ const FileInput = forwardRef(function FileInput(props, ref) {
78
78
  const t = useI18n();
79
79
  const [dragOver, setDragOver] = useState(false);
80
80
  const { ltr, rtl } = useDirection();
81
+ const hideFileInput = !multiple && files && files.length > 0;
81
82
  const fileInput = (_jsxs(StyledFileInput, { children: [_jsx("input", { "data-testid": testIds.control, ...restProps, ref: inputRef, type: 'file', id: id, disabled: disabled, onChange: onChange, multiple: multiple, accept: Array.isArray(accept) ? accept.join(',') : accept }), _jsxs(Flex, { container: { alignItems: 'center', justify: 'center' }, item: { grow: 1 }, as: StyledDropZone, dragOver: dragOver, onClick: () => {
82
83
  inputRef.current?.focus();
83
84
  inputRef.current?.click();
@@ -90,12 +91,25 @@ const FileInput = forwardRef(function FileInput(props, ref) {
90
91
  }, children: [ltr && icon, _jsxs(Text, { variant: 'primary', children: ["\u00A0", t('file_upload_text_main', [
91
92
  _jsx(StyledInteractiveText, { children: t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one') })
92
93
  ]), "\u00A0"] }), rtl && icon] })] }));
93
- return (_jsxs(Grid, { container: { rowGap: 1 }, children: [label ? (_jsx(FormField, { testId: testIds, label: label, labelHidden: labelHidden, id: id, info: info, required: required, disabled: disabled, status: status, additionalInfo: additionalInfo, children: fileInput })) : (fileInput), !!files?.length && (_jsx(Grid, { "data-testid": testIds.files, container: {
94
- gap: 1,
95
- cols: `repeat(auto-fill, minmax(min(${md}, 100%), 1fr));`
96
- }, as: 'ul', children: files.map(file => {
97
- return _createElement(FileItem, { ...file, key: file.id });
98
- }) }))] }));
94
+ const fileItemList = (_jsx(Grid, { "data-testid": testIds.files, container: {
95
+ gap: 1,
96
+ cols: `repeat(auto-fill, minmax(min(${md}, 100%), 1fr));`
97
+ }, as: 'ul', ref: fileItemListRef, children: files?.map(file => {
98
+ return _createElement(FileItem, { ...file, key: file.id });
99
+ }) }));
100
+ useEffect(() => {
101
+ if (files && files.length > 0 && !isFilesAdded.current)
102
+ isFilesAdded.current = true;
103
+ else if (files?.length === 0 && isFilesAdded.current) {
104
+ isFilesAdded.current = false;
105
+ inputRef.current?.focus();
106
+ }
107
+ if (hideFileInput && fileItemListRef.current) {
108
+ getFocusables(fileItemListRef)[0]?.focus();
109
+ }
110
+ }, [files]);
111
+ const renderElement = hideFileInput ? fileItemList : fileInput;
112
+ return (_jsxs(Grid, { container: { rowGap: hideFileInput ? undefined : 1 }, children: [label ? (_jsx(FormField, { testId: testIds, label: label, labelHidden: labelHidden, id: id, info: info, required: required, disabled: !hideFileInput && disabled, status: status, additionalInfo: additionalInfo, children: renderElement })) : (renderElement), !hideFileInput && fileItemList] }));
99
113
  });
100
114
  export default withTestIds(FileInput, getFileInputTestIds);
101
115
  //# sourceMappingURL=FileInput.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE1D,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AASxC,OAAO,EACL,kBAAkB,EAClB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,UAAU,EACV,QAAQ,EACT,MAAM,aAAa,CAAC;AACrB,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,aAAa,MAAM,+BAA+B,CAAC;AAC/D,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,YAAY,CAAC,aAAa,CAAC,CAAC;AA8C5B,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,WAAW,CAAC,CAAwB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/F,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;MAKpC,QAAQ;QACV,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CACvC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACZ,OAAO,GAAG,CAAA;;;;UAIJ,YAAY;;;8BAGQ,cAAc;sBACtB,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC;;;wBAGtD,cAAc;;;KAGjC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,qBAAqB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACtD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;GACxC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,SAAS,GAAqD,UAAU,CAAC,SAAS,SAAS,CAC/F,KAAsC,EACtC,GAA0B;IAE1B,MAAM,GAAG,GAAG,MAAM,EAAE,CAAC;IACrB,MAAM,EACJ,MAAM,EACN,EAAE,GAAG,GAAG,EACR,KAAK,EACL,WAAW,EACX,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,MAAM,EACN,cAAc,EACd,MAAM,EACN,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,EACJ,IAAI,EAAE,EACJ,eAAe,EAAE,EAAE,EAAE,EAAE,EACxB,EACF,GAAG,QAAQ,EAAE,CAAC;IAEf,MAAM,OAAO,GAAG,UAAU,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAExD,MAAM,IAAI,GAAG,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,CAAC;IACxC,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;IAEzC,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,CAAgC,EAAE,EAAE;QACnC,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE;YAClB,YAAY,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;SAC5C;QACD;;;;;;;WAOG;QACH,IAAI,QAAQ,CAAC,OAAO;YAAE,QAAQ,CAAC,OAAO,CAAC,KAAK,GAAG,EAAE,CAAC;IACpD,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IACpB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAEpC,MAAM,SAAS,GAAG,CAChB,MAAC,eAAe,eACd,+BACe,OAAO,CAAC,OAAO,KACxB,SAAS,EACb,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,MAAM,EACX,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,GACzD,EACF,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,EACtD,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,cAAc,EAClB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;oBAC1B,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC;gBAC5B,CAAC,EACD,UAAU,EAAE,CAAC,CAA4B,EAAE,EAAE;oBAC3C,CAAC,CAAC,cAAc,EAAE,CAAC;gBACrB,CAAC,EACD,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EACpC,WAAW,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EACrC,MAAM,EAAE,CAAC,CAA4B,EAAE,EAAE;oBACvC,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,WAAW,CAAC,KAAK,CAAC,CAAC;oBACnB,YAAY,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;gBACnD,CAAC,aAEA,GAAG,IAAI,IAAI,EACZ,MAAC,IAAI,IAAC,OAAO,EAAC,SAAS,uBAEpB,CAAC,CAAC,uBAAuB,EAAE;gCAC1B,KAAC,qBAAqB,cACnB,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,sBAAsB,CAAC,GAC7C;6BACzB,CAAC,cAEG,EACN,GAAG,IAAI,IAAI,IACP,IACS,CACnB,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAC3B,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,SAAS,IACR,MAAM,EAAE,OAAO,EACf,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,YAE7B,SAAS,GACA,CACb,CAAC,CAAC,CAAC,CACF,SAAS,CACV,EACA,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,CAClB,KAAC,IAAI,mBACU,OAAO,CAAC,KAAK,EAC1B,SAAS,EAAE;oBACT,GAAG,EAAE,CAAC;oBACN,IAAI,EAAE,gCAAgC,EAAE,iBAAiB;iBAC1D,EACD,EAAE,EAAC,IAAI,YAEN,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;oBAChB,OAAO,eAAC,QAAQ,OAAK,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,EAAE,GAAI,CAAC;gBAC9C,CAAC,CAAC,GACG,CACR,IACI,CACR,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC,SAAS,EAAE,mBAAmB,CAAC,CAAC","sourcesContent":["import { forwardRef, useCallback, useState } from 'react';\nimport type { FunctionComponent, Ref, ChangeEvent, PropsWithoutRef, DragEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type {\n BaseProps,\n ForwardProps,\n NoChildrenProp,\n PropsWithDefaults,\n TestIdProp\n} from '../../types';\nimport {\n useConsolidatedRef,\n useI18n,\n useUID,\n useDirection,\n useTestIds,\n useTheme\n} from '../../hooks';\nimport FormControl from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport FormField from '../FormField';\nimport Grid from '../Grid';\nimport { withTestIds } from '../../utils';\n\nimport FileItem from './FileItem';\nimport type { FileItemProps } from './FileItem';\nimport { getFileInputTestIds } from './File.test-ids';\n\nregisterIcon(paperClipIcon);\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** Called when files are added either via the input or drop zone. */\n onFilesAdded?: (files: File[]) => void;\n /**\n * Allow multiple files to be selected from the OS specific file browser.\n * NOTE: This does not restrict multiple files from being added via drag and drop.\n * Restrict multi file drag and drop via onFilesAdded and custom info message.\n * @default false\n */\n multiple?: boolean;\n /** An array of files that have been uploaded. */\n files?: FileItemProps[];\n /**\n * Specify allowed file types.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept}\n */\n accept?: string | string[];\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** Ref for the input element within the component's dom structure. */\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledDropZone = styled(FormControl)<{ dragOver: boolean }>(({ dragOver, theme }) => {\n return css`\n padding: calc(2 * ${theme.base.spacing});\n min-height: 4rem;\n border-style: dashed;\n cursor: pointer;\n\n ${dragOver &&\n css`\n border-style: solid;\n `}\n `;\n});\n\nexport const StyledFileInput = styled.div<FileInputPropsWithDefaults & ForwardProps>(\n ({ theme }) => {\n return css`\n position: relative;\n\n input {\n ${hideVisually}\n }\n\n input:enabled:focus + ${StyledDropZone} {\n box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n }\n\n input[hidden] + ${StyledDropZone} {\n display: none;\n }\n `;\n }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nconst StyledInteractiveText = styled.span(({ theme }) => {\n return css`\n color: ${theme.base.palette.interactive};\n `;\n});\n\nStyledInteractiveText.defaultProps = defaultThemeProp;\n\nconst FileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(function FileInput(\n props: PropsWithoutRef<FileInputProps>,\n ref: FileInputProps['ref']\n) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n label,\n labelHidden,\n info,\n required = false,\n disabled = false,\n files,\n onFilesAdded,\n multiple = false,\n status,\n additionalInfo,\n accept,\n ...restProps\n } = props;\n\n const {\n base: {\n 'content-width': { md }\n }\n } = useTheme();\n\n const testIds = useTestIds(testId, getFileInputTestIds);\n\n const icon = <Icon name='paper-clip' />;\n const inputRef = useConsolidatedRef(ref);\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.files) {\n onFilesAdded?.(Array.from(e.target.files));\n }\n /**\n * WHY are we doing this?\n * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n * Since we can not modify the input value of files for browser security reasons,\n * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n */\n if (inputRef.current) inputRef.current.value = '';\n },\n [onFilesAdded]\n );\n\n const t = useI18n();\n const [dragOver, setDragOver] = useState(false);\n const { ltr, rtl } = useDirection();\n\n const fileInput = (\n <StyledFileInput>\n <input\n data-testid={testIds.control}\n {...restProps}\n ref={inputRef}\n type='file'\n id={id}\n disabled={disabled}\n onChange={onChange}\n multiple={multiple}\n accept={Array.isArray(accept) ? accept.join(',') : accept}\n />\n <Flex\n container={{ alignItems: 'center', justify: 'center' }}\n item={{ grow: 1 }}\n as={StyledDropZone}\n dragOver={dragOver}\n onClick={() => {\n inputRef.current?.focus();\n inputRef.current?.click();\n }}\n onDragOver={(e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n }}\n onDragEnter={() => setDragOver(true)}\n onDragLeave={() => setDragOver(false)}\n onDrop={(e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n setDragOver(false);\n onFilesAdded?.(Array.from(e.dataTransfer.files));\n }}\n >\n {ltr && icon}\n <Text variant='primary'>\n &nbsp;\n {t('file_upload_text_main', [\n <StyledInteractiveText>\n {t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')}\n </StyledInteractiveText>\n ])}\n &nbsp;\n </Text>\n {rtl && icon}\n </Flex>\n </StyledFileInput>\n );\n\n return (\n <Grid container={{ rowGap: 1 }}>\n {label ? (\n <FormField\n testId={testIds}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n required={required}\n disabled={disabled}\n status={status}\n additionalInfo={additionalInfo}\n >\n {fileInput}\n </FormField>\n ) : (\n fileInput\n )}\n {!!files?.length && (\n <Grid\n data-testid={testIds.files}\n container={{\n gap: 1,\n cols: `repeat(auto-fill, minmax(min(${md}, 100%), 1fr));`\n }}\n as='ul'\n >\n {files.map(file => {\n return <FileItem {...file} key={file.id} />;\n })}\n </Grid>\n )}\n </Grid>\n );\n});\n\nexport default withTestIds(FileInput, getFileInputTestIds);\n"]}
1
+ {"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\nimport type { FunctionComponent, Ref, ChangeEvent, PropsWithoutRef, DragEvent } from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport type {\n BaseProps,\n ForwardProps,\n NoChildrenProp,\n PropsWithDefaults,\n TestIdProp\n} from '../../types';\nimport {\n useConsolidatedRef,\n useI18n,\n useUID,\n useDirection,\n useTestIds,\n useTheme\n} from '../../hooks';\nimport FormControl from '../FormControl';\nimport type { FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport FormField from '../FormField';\nimport Grid from '../Grid';\nimport { getFocusables, withTestIds } from '../../utils';\n\nimport FileItem from './FileItem';\nimport type { FileItemProps } from './FileItem';\nimport { getFileInputTestIds } from './File.test-ids';\n\nregisterIcon(paperClipIcon);\n\ntype FileInputPropsWithDefaults = PropsWithDefaults<FileInputProps>;\n\nexport interface FileInputProps extends BaseProps, NoChildrenProp, TestIdProp {\n /** Called when files are added either via the input or drop zone. */\n onFilesAdded?: (files: File[]) => void;\n /**\n * Allow multiple files to be selected from the OS specific file browser.\n * NOTE: This does not restrict multiple files from being added via drag and drop.\n * Restrict multi file drag and drop via onFilesAdded and custom info message.\n * @default false\n */\n multiple?: boolean;\n /** An array of files that have been uploaded. */\n files?: FileItemProps[];\n /**\n * Specify allowed file types.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept}\n */\n accept?: string | string[];\n /**\n * Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n */\n id?: FormControlProps['id'];\n /** Set visual state based on a validation state. */\n status?: FormControlProps['status'];\n /** Pass a string or a fragment with an Icon and string. */\n label?: FormControlProps['label'];\n /** Visually hides the label region. */\n labelHidden?: FormControlProps['labelHidden'];\n /** It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. */\n info?: FormControlProps['info'];\n /** Indicate if the field is required. The browser defaults to false. */\n required?: FormControlProps['required'];\n /** Disable the control. The browser defaults to false. */\n disabled?: FormControlProps['disabled'];\n /** Sets html name attribute for the underlying control. Useful for mapping to a data field. */\n name?: FormControlProps['name'];\n /** Pass a heading and content to show additional information on the field. */\n additionalInfo?: FormControlProps['additionalInfo'];\n /** Ref for the input element within the component's dom structure. */\n ref?: Ref<HTMLInputElement>;\n}\n\nexport const StyledDropZone = styled(FormControl)<{ dragOver: boolean }>(\n ({\n dragOver,\n theme: {\n base: { spacing },\n components\n }\n }) => {\n return css`\n padding: calc(2 * ${spacing});\n height: ${components.input.height};\n border-style: dashed;\n cursor: pointer;\n\n ${dragOver &&\n css`\n border-style: solid;\n `}\n `;\n }\n);\n\nStyledDropZone.defaultProps = defaultThemeProp;\n\nexport const StyledFileInput = styled.div<FileInputPropsWithDefaults & ForwardProps>(\n ({ theme }) => {\n return css`\n position: relative;\n\n input {\n ${hideVisually}\n }\n\n input:enabled:focus + ${StyledDropZone} {\n box-shadow: ${theme.components['form-control'][':focus']['box-shadow']};\n }\n `;\n }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nconst StyledInteractiveText = styled.span(({ theme }) => {\n return css`\n color: ${theme.base.palette.interactive};\n `;\n});\n\nStyledInteractiveText.defaultProps = defaultThemeProp;\n\nconst FileInput: FunctionComponent<FileInputProps & ForwardProps> = forwardRef(function FileInput(\n props: PropsWithoutRef<FileInputProps>,\n ref: FileInputProps['ref']\n) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n label,\n labelHidden,\n info,\n required = false,\n disabled = false,\n files,\n onFilesAdded,\n multiple = false,\n status,\n additionalInfo,\n accept,\n ...restProps\n } = props;\n\n const {\n base: {\n 'content-width': { md }\n }\n } = useTheme();\n\n const testIds = useTestIds(testId, getFileInputTestIds);\n\n const icon = <Icon name='paper-clip' />;\n const inputRef = useConsolidatedRef(ref);\n const fileItemListRef = useRef<HTMLElement | null>(null);\n\n // Tracks whether at least one file is uploaded -- used for updating the focus to DropZone when the files are deleted\n const isFilesAdded = useRef(false);\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.files) {\n onFilesAdded?.(Array.from(e.target.files));\n }\n /**\n * WHY are we doing this?\n * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n * Since we can not modify the input value of files for browser security reasons,\n * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n */\n if (inputRef.current) inputRef.current.value = '';\n },\n [onFilesAdded]\n );\n\n const t = useI18n();\n const [dragOver, setDragOver] = useState(false);\n const { ltr, rtl } = useDirection();\n const hideFileInput = !multiple && files && files.length > 0;\n\n const fileInput = (\n <StyledFileInput>\n <input\n data-testid={testIds.control}\n {...restProps}\n ref={inputRef}\n type='file'\n id={id}\n disabled={disabled}\n onChange={onChange}\n multiple={multiple}\n accept={Array.isArray(accept) ? accept.join(',') : accept}\n />\n <Flex\n container={{ alignItems: 'center', justify: 'center' }}\n item={{ grow: 1 }}\n as={StyledDropZone}\n dragOver={dragOver}\n onClick={() => {\n inputRef.current?.focus();\n inputRef.current?.click();\n }}\n onDragOver={(e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n }}\n onDragEnter={() => setDragOver(true)}\n onDragLeave={() => setDragOver(false)}\n onDrop={(e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n setDragOver(false);\n onFilesAdded?.(Array.from(e.dataTransfer.files));\n }}\n >\n {ltr && icon}\n <Text variant='primary'>\n &nbsp;\n {t('file_upload_text_main', [\n <StyledInteractiveText>\n {t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')}\n </StyledInteractiveText>\n ])}\n &nbsp;\n </Text>\n {rtl && icon}\n </Flex>\n </StyledFileInput>\n );\n\n const fileItemList = (\n <Grid\n data-testid={testIds.files}\n container={{\n gap: 1,\n cols: `repeat(auto-fill, minmax(min(${md}, 100%), 1fr));`\n }}\n as='ul'\n ref={fileItemListRef}\n >\n {files?.map(file => {\n return <FileItem {...file} key={file.id} />;\n })}\n </Grid>\n );\n\n useEffect(() => {\n if (files && files.length > 0 && !isFilesAdded.current) isFilesAdded.current = true;\n else if (files?.length === 0 && isFilesAdded.current) {\n isFilesAdded.current = false;\n inputRef.current?.focus();\n }\n\n if (hideFileInput && fileItemListRef.current) {\n getFocusables(fileItemListRef)[0]?.focus();\n }\n }, [files]);\n\n const renderElement = hideFileInput ? fileItemList : fileInput;\n\n return (\n <Grid container={{ rowGap: hideFileInput ? undefined : 1 }}>\n {label ? (\n <FormField\n testId={testIds}\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n required={required}\n disabled={!hideFileInput && disabled}\n status={status}\n additionalInfo={additionalInfo}\n >\n {renderElement}\n </FormField>\n ) : (\n renderElement\n )}\n {!hideFileInput && fileItemList}\n </Grid>\n );\n});\n\nexport default withTestIds(FileInput, getFileInputTestIds);\n"]}
@@ -6,8 +6,6 @@ export interface FileItemProps extends BaseProps {
6
6
  id: string;
7
7
  /** Name of the file. */
8
8
  name: string;
9
- /** Url of the file. */
10
- url: string;
11
9
  /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */
12
10
  thumbnail?: FileVisualProps['thumbnail'];
13
11
  /** File extension. Use 'url' for link */
@@ -16,9 +14,9 @@ export interface FileItemProps extends BaseProps {
16
14
  onCancel?: (id: FileItemProps['id']) => void;
17
15
  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */
18
16
  onEdit?: (id: FileItemProps['id']) => void;
19
- /** When passed, will be called on click of the name. Passes file url as the parameter. */
17
+ /** When passed, will be called on click of the name. Passes file id as the parameter. */
20
18
  onPreview?: (id: FileItemProps['id']) => void;
21
- /** When passed, will render a single icon button or within a MenuButton if other actions are defined. Passes file url as the parameter. */
19
+ /** When passed, will render a single icon button or within a MenuButton if other actions are defined. Passes file id as the parameter. */
22
20
  onDownload?: (id: FileItemProps['id']) => void;
23
21
  /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */
24
22
  onDelete?: (id: FileItemProps['id']) => void;
@@ -1 +1 @@
1
- {"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAMtD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAU,MAAM,aAAa,CAAC;AAanE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,0BAA0B;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,uBAAuB;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,oIAAoI;IACpI,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzC,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8IAA8I;IAC9I,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,yGAAyG;IACzG,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC3C,0FAA0F;IAC1F,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC9C,2IAA2I;IAC3I,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC/C,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,gIAAgI;IAChI,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oGAAoG;IACpG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAqFD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CA0J7C,CAAC;AAEH,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"FileItem.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAmB,EAAE,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAMtD,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAU,MAAM,aAAa,CAAC;AAanE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,0BAA0B;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,oIAAoI;IACpI,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzC,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8IAA8I;IAC9I,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,yGAAyG;IACzG,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC3C,yFAAyF;IACzF,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC9C,0IAA0I;IAC1I,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC/C,yGAAyG;IACzG,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC;IAC7C,gIAAgI;IAChI,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oGAAoG;IACpG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAqFD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAwJ7C,CAAC;AAEH,eAAe,QAAQ,CAAC"}
@@ -76,14 +76,13 @@ const StyledFileItem = styled.div(({ theme: { base: { palette, 'border-radius':
76
76
  });
77
77
  StyledFileItem.defaultProps = defaultThemeProp;
78
78
  const FileItem = forwardRef(function FileItem(props, ref) {
79
- const { id, name, url, thumbnail, format, error, onCancel, onEdit, onPreview, onDownload, onDelete, progress, ...restProps } = props;
79
+ const { id, name, thumbnail, format, error, onCancel, onEdit, onPreview, onDownload, onDelete, progress, ...restProps } = props;
80
80
  const [thumbnailError, setThumbnailError] = useState(false);
81
81
  const [textTarget, setTextTarget] = useElement();
82
82
  const [metaTarget, setMetaTarget] = useElement();
83
83
  const { locale } = useConfiguration();
84
84
  const t = useI18n();
85
85
  const uploading = typeof progress === 'number' && progress < 100;
86
- const text = name || url;
87
86
  let metaMessage;
88
87
  if (uploading) {
89
88
  metaMessage = formatNumber(progress, {
@@ -123,7 +122,7 @@ const FileItem = forwardRef(function FileItem(props, ref) {
123
122
  visual = _jsx(StyledErrorIcon, { name: 'warn-solid' });
124
123
  }
125
124
  else {
126
- visual = format && (_jsx(FileVisual, { type: format === 'url' ? 'link' : getKindFromMimeType(getMimeTypeFromFile(format) ?? ''), thumbnail: thumbnailError ? undefined : thumbnail, onThumbnailError: () => {
125
+ visual = (_jsx(FileVisual, { type: format === 'url' ? 'link' : getKindFromMimeType(getMimeTypeFromFile(format ?? '') ?? ''), thumbnail: thumbnailError ? undefined : thumbnail, onThumbnailError: () => {
127
126
  setThumbnailError(true);
128
127
  } }));
129
128
  }
@@ -134,7 +133,7 @@ const FileItem = forwardRef(function FileItem(props, ref) {
134
133
  gap: 1
135
134
  }, ref: ref, children: [visual, onPreview && !(error || uploading) ? (_jsxs(Button, { ...restProps, as: StyledPreviewTitle, variant: 'link', ref: setTextTarget, onClick: () => {
136
135
  onPreview(id);
137
- }, "aria-label": t('preview_file', [text]), children: [text, format === 'url' && _jsx(Icon, { name: 'open' })] })) : (_jsx(Text, { ...restProps, as: StyledTextTitle, ref: setTextTarget, children: text })), metaMessage && (_jsxs(_Fragment, { children: [_jsx(Text, { as: StyledMeta, variant: 'secondary', error: error && !uploading, ref: setMetaTarget, children: metaMessage }), metaTarget && (_jsx(Tooltip, { target: metaTarget, describeTarget: false, smart: true, children: metaMessage }))] })), (error || uploading) && onCancel && (_jsx(StyledActionsWrapper, { meta: !!metaMessage, children: _jsx(Button, { label: t('cancel'), "aria-label": `${t('cancel')} - ${text}`, variant: 'simple', compact: true, icon: true, onClick: () => onCancel(id), children: _jsx(Icon, { name: 'times' }) }) })), !(error || uploading) && !!definedActions.length && (_jsx(StyledActionsWrapper, { meta: !!metaMessage, children: _jsx(Actions, { items: definedActions, compact: true, iconOnly: true, contextualLabel: name }) })), textTarget && (_jsx(Tooltip, { target: textTarget, smart: true, describeTarget: false, children: text }))] }));
136
+ }, "aria-label": t('preview_file', [name]), children: [name, format === 'url' && _jsx(Icon, { name: 'open' })] })) : (_jsx(Text, { ...restProps, as: StyledTextTitle, ref: setTextTarget, children: name })), metaMessage && (_jsxs(_Fragment, { children: [_jsx(Text, { as: StyledMeta, variant: 'secondary', error: error && !uploading, ref: setMetaTarget, children: metaMessage }), metaTarget && (_jsx(Tooltip, { target: metaTarget, describeTarget: false, smart: true, children: metaMessage }))] })), (error || uploading) && onCancel && (_jsx(StyledActionsWrapper, { meta: !!metaMessage, children: _jsx(Button, { label: t('cancel'), "aria-label": `${t('cancel')} - ${name}`, variant: 'simple', compact: true, icon: true, onClick: () => onCancel(id), children: _jsx(Icon, { name: 'times' }) }) })), !(error || uploading) && !!definedActions.length && (_jsx(StyledActionsWrapper, { meta: !!metaMessage, children: _jsx(Actions, { items: definedActions, compact: true, iconOnly: true, contextualLabel: name }) })), textTarget && (_jsx(Tooltip, { target: textTarget, smart: true, describeTarget: false, children: name }))] }));
138
137
  });
139
138
  export default FileItem;
140
139
  //# sourceMappingURL=FileItem.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"FileItem.js","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState } from 'react';\nimport type { PropsWithoutRef, FC, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text, { StyledText } from '../Text';\nimport Icon from '../Icon';\nimport Tooltip from '../Tooltip';\nimport type { ForwardProps, BaseProps, Action } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Button from '../Button';\nimport { useI18n, useElement, useConfiguration } from '../../hooks';\nimport Actions from '../Actions';\nimport Progress from '../Progress';\nimport { StyledProgressRing } from '../Progress/Progress.styles';\nimport { formatNumber } from '../Number';\nimport Flex from '../Flex';\nimport { StyledIconShape } from '../Icon/Icon';\n\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\nimport FileVisual, { StyledFileVisual } from './FileVisual';\nimport type { FileVisualProps } from './FileVisual';\n\nexport interface FileItemProps extends BaseProps {\n /** Unique id for item. */\n id: string;\n /** Name of the file. */\n name: string;\n /** Url of the file. */\n url: string;\n /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n thumbnail?: FileVisualProps['thumbnail'];\n /** File extension. Use 'url' for link */\n format?: string;\n /** When passed, will render a single icon button for yet to be or in progress uploads. Use this action to trigger xhr request termination. */\n onCancel?: (id: FileItemProps['id']) => void;\n /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n onEdit?: (id: FileItemProps['id']) => void;\n /** When passed, will be called on click of the name. Passes file url as the parameter. */\n onPreview?: (id: FileItemProps['id']) => void;\n /** When passed, will render a single icon button or within a MenuButton if other actions are defined. Passes file url as the parameter. */\n onDownload?: (id: FileItemProps['id']) => void;\n /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n onDelete?: (id: FileItemProps['id']) => void;\n /** If the attachment is in an upload state, pass progress as a number between 0-100 representing the percentage of progress. */\n progress?: number;\n /** Set if there is an error uploading the file. Applies error styling to the meta string passed. */\n error?: string;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledErrorIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.palette.urgent};\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nconst titleEllipsisStyle = css`\n flex-shrink: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nconst StyledPreviewTitle = styled(Button)`\n ${titleEllipsisStyle}\n`;\n\nconst StyledTextTitle = styled(Text)`\n ${titleEllipsisStyle}\n`;\n\nconst StyledMeta = styled(StyledText)<{ error: boolean }>(({ theme, error }) => {\n return css`\n /* min width to show percentage in full */\n min-width: 4ch;\n margin-inline-start: auto;\n ${titleEllipsisStyle}\n ${error &&\n css`\n color: ${theme.base.palette.urgent};\n `}\n `;\n});\n\nStyledMeta.defaultProps = defaultThemeProp;\n\nconst StyledActionsWrapper = styled.div<{ meta: boolean }>(({ meta }) => {\n return css`\n margin-inline-start: ${meta ? 'unset' : 'auto'};\n `;\n});\n\nStyledActionsWrapper.defaultProps = defaultThemeProp;\n\nconst StyledFileItem = styled.div(\n ({\n theme: {\n base: {\n palette,\n 'border-radius': borderRadius,\n spacing,\n 'hit-area': { compact }\n },\n components\n }\n }) => {\n return css`\n border-radius: calc(0.5 * ${borderRadius});\n border: 0.0625rem solid ${palette['border-line']};\n background-color: ${palette['primary-background']};\n height: ${components.input.height};\n min-width: calc(${components.input.height} + 12ch + 1.5 * ${spacing} + ${compact});\n > ${StyledProgressRing} {\n margin-inline-start: calc(0.5 * ${spacing});\n }\n\n > ${StyledFileVisual}, > ${StyledIconShape} {\n border-start-start-radius: inherit;\n border-end-start-radius: inherit;\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n width: ${components.input.height};\n flex-shrink: 0;\n }\n `;\n }\n);\n\nStyledFileItem.defaultProps = defaultThemeProp;\n\nconst FileItem: FC<FileItemProps & ForwardProps> = forwardRef(function FileItem(\n props: PropsWithoutRef<FileItemProps>,\n ref: FileItemProps['ref']\n) {\n const {\n id,\n name,\n url,\n thumbnail,\n format,\n error,\n onCancel,\n onEdit,\n onPreview,\n onDownload,\n onDelete,\n progress,\n ...restProps\n } = props;\n\n const [thumbnailError, setThumbnailError] = useState(false);\n const [textTarget, setTextTarget] = useElement();\n const [metaTarget, setMetaTarget] = useElement();\n const { locale } = useConfiguration();\n const t = useI18n();\n\n const uploading = typeof progress === 'number' && progress < 100;\n\n const text = name || url;\n\n let metaMessage;\n\n if (uploading) {\n metaMessage = formatNumber(progress, {\n locale,\n options: {\n style: 'unit',\n unit: 'percent',\n maximumFractionDigits: 0\n }\n });\n } else if (error) {\n metaMessage = error;\n }\n\n const definedActions: Action[] = [\n { onClick: onEdit, text: t('edit'), icon: 'pencil' },\n { onClick: onDownload, text: t('download'), icon: 'download' },\n { onClick: onDelete, text: t('delete'), icon: 'trash' }\n ]\n .filter(action => {\n return !!action.onClick;\n })\n .map(({ text: actiontext, icon, onClick }) => ({\n id: actiontext,\n text: actiontext,\n icon,\n onClick: () => {\n if (onClick) onClick(id);\n }\n }));\n\n let visual;\n\n if (uploading) {\n visual = <Progress variant='ring' placement='inline' value={progress} />;\n } else if (error) {\n visual = <StyledErrorIcon name='warn-solid' />;\n } else {\n visual = format && (\n <FileVisual\n type={format === 'url' ? 'link' : getKindFromMimeType(getMimeTypeFromFile(format) ?? '')}\n thumbnail={thumbnailError ? undefined : thumbnail}\n onThumbnailError={() => {\n setThumbnailError(true);\n }}\n />\n );\n }\n\n return (\n <Flex\n as={StyledFileItem}\n container={{\n pad: [undefined, 0.5, undefined, undefined],\n alignItems: 'center',\n justify: 'start',\n gap: 1\n }}\n ref={ref}\n >\n {visual}\n\n {onPreview && !(error || uploading) ? (\n <Button\n {...restProps}\n as={StyledPreviewTitle}\n variant='link'\n ref={setTextTarget}\n onClick={() => {\n onPreview(id);\n }}\n aria-label={t('preview_file', [text])}\n >\n {text}\n {format === 'url' && <Icon name='open' />}\n </Button>\n ) : (\n <Text {...restProps} as={StyledTextTitle} ref={setTextTarget}>\n {text}\n </Text>\n )}\n {metaMessage && (\n <>\n <Text as={StyledMeta} variant='secondary' error={error && !uploading} ref={setMetaTarget}>\n {metaMessage}\n </Text>\n\n {metaTarget && (\n <Tooltip target={metaTarget} describeTarget={false} smart>\n {metaMessage}\n </Tooltip>\n )}\n </>\n )}\n\n {(error || uploading) && onCancel && (\n <StyledActionsWrapper meta={!!metaMessage}>\n <Button\n label={t('cancel')}\n aria-label={`${t('cancel')} - ${text}`}\n variant='simple'\n compact\n icon\n onClick={() => onCancel(id)}\n >\n <Icon name='times' />\n </Button>\n </StyledActionsWrapper>\n )}\n\n {!(error || uploading) && !!definedActions.length && (\n <StyledActionsWrapper meta={!!metaMessage}>\n <Actions items={definedActions} compact iconOnly contextualLabel={name} />\n </StyledActionsWrapper>\n )}\n\n {textTarget && (\n <Tooltip target={textTarget} smart describeTarget={false}>\n {text}\n </Tooltip>\n )}\n </Flex>\n );\n});\n\nexport default FileItem;\n"]}
1
+ {"version":3,"file":"FileItem.js","sourceRoot":"","sources":["../../../src/components/File/FileItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useState } from 'react';\nimport type { PropsWithoutRef, FC, Ref } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport Text, { StyledText } from '../Text';\nimport Icon from '../Icon';\nimport Tooltip from '../Tooltip';\nimport type { ForwardProps, BaseProps, Action } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport Button from '../Button';\nimport { useI18n, useElement, useConfiguration } from '../../hooks';\nimport Actions from '../Actions';\nimport Progress from '../Progress';\nimport { StyledProgressRing } from '../Progress/Progress.styles';\nimport { formatNumber } from '../Number';\nimport Flex from '../Flex';\nimport { StyledIconShape } from '../Icon/Icon';\n\nimport { getKindFromMimeType, getMimeTypeFromFile } from './utils';\nimport FileVisual, { StyledFileVisual } from './FileVisual';\nimport type { FileVisualProps } from './FileVisual';\n\nexport interface FileItemProps extends BaseProps {\n /** Unique id for item. */\n id: string;\n /** Name of the file. */\n name: string;\n /** A string to be used as an image src for a attachment thumbnail. Falls back to a provided icon or the default attachment icon. */\n thumbnail?: FileVisualProps['thumbnail'];\n /** File extension. Use 'url' for link */\n format?: string;\n /** When passed, will render a single icon button for yet to be or in progress uploads. Use this action to trigger xhr request termination. */\n onCancel?: (id: FileItemProps['id']) => void;\n /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n onEdit?: (id: FileItemProps['id']) => void;\n /** When passed, will be called on click of the name. Passes file id as the parameter. */\n onPreview?: (id: FileItemProps['id']) => void;\n /** When passed, will render a single icon button or within a MenuButton if other actions are defined. Passes file id as the parameter. */\n onDownload?: (id: FileItemProps['id']) => void;\n /** When passed, will render a single icon button or within a MenuButton if other actions are defined. */\n onDelete?: (id: FileItemProps['id']) => void;\n /** If the attachment is in an upload state, pass progress as a number between 0-100 representing the percentage of progress. */\n progress?: number;\n /** Set if there is an error uploading the file. Applies error styling to the meta string passed. */\n error?: string;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLDivElement>;\n}\n\nconst StyledErrorIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.palette.urgent};\n margin-inline-start: calc(0.5 * ${theme.base.spacing});\n `;\n});\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nconst titleEllipsisStyle = css`\n flex-shrink: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n\nconst StyledPreviewTitle = styled(Button)`\n ${titleEllipsisStyle}\n`;\n\nconst StyledTextTitle = styled(Text)`\n ${titleEllipsisStyle}\n`;\n\nconst StyledMeta = styled(StyledText)<{ error: boolean }>(({ theme, error }) => {\n return css`\n /* min width to show percentage in full */\n min-width: 4ch;\n margin-inline-start: auto;\n ${titleEllipsisStyle}\n ${error &&\n css`\n color: ${theme.base.palette.urgent};\n `}\n `;\n});\n\nStyledMeta.defaultProps = defaultThemeProp;\n\nconst StyledActionsWrapper = styled.div<{ meta: boolean }>(({ meta }) => {\n return css`\n margin-inline-start: ${meta ? 'unset' : 'auto'};\n `;\n});\n\nStyledActionsWrapper.defaultProps = defaultThemeProp;\n\nconst StyledFileItem = styled.div(\n ({\n theme: {\n base: {\n palette,\n 'border-radius': borderRadius,\n spacing,\n 'hit-area': { compact }\n },\n components\n }\n }) => {\n return css`\n border-radius: calc(0.5 * ${borderRadius});\n border: 0.0625rem solid ${palette['border-line']};\n background-color: ${palette['primary-background']};\n height: ${components.input.height};\n min-width: calc(${components.input.height} + 12ch + 1.5 * ${spacing} + ${compact});\n > ${StyledProgressRing} {\n margin-inline-start: calc(0.5 * ${spacing});\n }\n\n > ${StyledFileVisual}, > ${StyledIconShape} {\n border-start-start-radius: inherit;\n border-end-start-radius: inherit;\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n width: ${components.input.height};\n flex-shrink: 0;\n }\n `;\n }\n);\n\nStyledFileItem.defaultProps = defaultThemeProp;\n\nconst FileItem: FC<FileItemProps & ForwardProps> = forwardRef(function FileItem(\n props: PropsWithoutRef<FileItemProps>,\n ref: FileItemProps['ref']\n) {\n const {\n id,\n name,\n thumbnail,\n format,\n error,\n onCancel,\n onEdit,\n onPreview,\n onDownload,\n onDelete,\n progress,\n ...restProps\n } = props;\n\n const [thumbnailError, setThumbnailError] = useState(false);\n const [textTarget, setTextTarget] = useElement();\n const [metaTarget, setMetaTarget] = useElement();\n const { locale } = useConfiguration();\n const t = useI18n();\n const uploading = typeof progress === 'number' && progress < 100;\n\n let metaMessage;\n\n if (uploading) {\n metaMessage = formatNumber(progress, {\n locale,\n options: {\n style: 'unit',\n unit: 'percent',\n maximumFractionDigits: 0\n }\n });\n } else if (error) {\n metaMessage = error;\n }\n\n const definedActions: Action[] = [\n { onClick: onEdit, text: t('edit'), icon: 'pencil' },\n { onClick: onDownload, text: t('download'), icon: 'download' },\n { onClick: onDelete, text: t('delete'), icon: 'trash' }\n ]\n .filter(action => {\n return !!action.onClick;\n })\n .map(({ text: actiontext, icon, onClick }) => ({\n id: actiontext,\n text: actiontext,\n icon,\n onClick: () => {\n if (onClick) onClick(id);\n }\n }));\n\n let visual;\n\n if (uploading) {\n visual = <Progress variant='ring' placement='inline' value={progress} />;\n } else if (error) {\n visual = <StyledErrorIcon name='warn-solid' />;\n } else {\n visual = (\n <FileVisual\n type={\n format === 'url' ? 'link' : getKindFromMimeType(getMimeTypeFromFile(format ?? '') ?? '')\n }\n thumbnail={thumbnailError ? undefined : thumbnail}\n onThumbnailError={() => {\n setThumbnailError(true);\n }}\n />\n );\n }\n\n return (\n <Flex\n as={StyledFileItem}\n container={{\n pad: [undefined, 0.5, undefined, undefined],\n alignItems: 'center',\n justify: 'start',\n gap: 1\n }}\n ref={ref}\n >\n {visual}\n\n {onPreview && !(error || uploading) ? (\n <Button\n {...restProps}\n as={StyledPreviewTitle}\n variant='link'\n ref={setTextTarget}\n onClick={() => {\n onPreview(id);\n }}\n aria-label={t('preview_file', [name])}\n >\n {name}\n {format === 'url' && <Icon name='open' />}\n </Button>\n ) : (\n <Text {...restProps} as={StyledTextTitle} ref={setTextTarget}>\n {name}\n </Text>\n )}\n {metaMessage && (\n <>\n <Text as={StyledMeta} variant='secondary' error={error && !uploading} ref={setMetaTarget}>\n {metaMessage}\n </Text>\n\n {metaTarget && (\n <Tooltip target={metaTarget} describeTarget={false} smart>\n {metaMessage}\n </Tooltip>\n )}\n </>\n )}\n\n {(error || uploading) && onCancel && (\n <StyledActionsWrapper meta={!!metaMessage}>\n <Button\n label={t('cancel')}\n aria-label={`${t('cancel')} - ${name}`}\n variant='simple'\n compact\n icon\n onClick={() => onCancel(id)}\n >\n <Icon name='times' />\n </Button>\n </StyledActionsWrapper>\n )}\n\n {!(error || uploading) && !!definedActions.length && (\n <StyledActionsWrapper meta={!!metaMessage}>\n <Actions items={definedActions} compact iconOnly contextualLabel={name} />\n </StyledActionsWrapper>\n )}\n\n {textTarget && (\n <Tooltip target={textTarget} smart describeTarget={false}>\n {name}\n </Tooltip>\n )}\n </Flex>\n );\n});\n\nexport default FileItem;\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"arrow-down.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-down.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,eAAe,CAAC;AAEjC,eAAO,MAAM,SAAS,mBAQrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}
1
+ {"version":3,"file":"arrow-down.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-down.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,eAAe,CAAC;AAEjC,eAAO,MAAM,SAAS,mBAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  // This file is autogenerated. Any changes will be overwritten.
3
3
  export const set = 'streamline';
4
4
  export const name = 'arrow-down';
5
- export const Component = () => (_jsx("path", { fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M9 .563v16.875m7.875-7.875L9 17.436 1.125 9.563' }));
5
+ export const Component = () => (_jsx("path", { stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M9 3v13m6-6.067L9 16 3 9.933' }));
6
6
  export const viewBox = '0 0 18 18';
7
7
  //# sourceMappingURL=arrow-down.icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"arrow-down.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-down.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,iDAAiD,GACnD,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-down';\n\nexport const Component = () => (\n <path\n fill='none'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M9 .563v16.875m7.875-7.875L9 17.436 1.125 9.563'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
1
+ {"version":3,"file":"arrow-down.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-down.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,8BAA8B,GAChC,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-down';\n\nexport const Component = () => (\n <path\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M9 3v13m6-6.067L9 16 3 9.933'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"arrow-left.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-left.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,eAAe,CAAC;AAEjC,eAAO,MAAM,SAAS,mBAQrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}
1
+ {"version":3,"file":"arrow-left.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-left.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,eAAe,CAAC;AAEjC,eAAO,MAAM,SAAS,mBAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  // This file is autogenerated. Any changes will be overwritten.
3
3
  export const set = 'streamline';
4
4
  export const name = 'arrow-left';
5
- export const Component = () => (_jsx("path", { fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M17.438 9H.563m7.875-7.875L.561 9l7.875 7.875' }));
5
+ export const Component = () => (_jsx("path", { stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M15 9H2m6.067-6L2 9l6.067 6' }));
6
6
  export const viewBox = '0 0 18 18';
7
7
  //# sourceMappingURL=arrow-left.icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"arrow-left.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-left.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,+CAA+C,GACjD,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-left';\n\nexport const Component = () => (\n <path\n fill='none'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M17.438 9H.563m7.875-7.875L.561 9l7.875 7.875'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
1
+ {"version":3,"file":"arrow-left.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-left.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,6BAA6B,GAC/B,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-left';\n\nexport const Component = () => (\n <path\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M15 9H2m6.067-6L2 9l6.067 6'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  // This file is autogenerated. Any changes will be overwritten.
3
3
  export const set = 'streamline';
4
4
  export const name = 'arrow-micro-down';
5
- export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M12.6 6.192H5.4c-.432 0-.72.36-.504.648l3.6 6.408c.216.288.576.36.864.144.072-.072.144-.072.144-.144l3.6-6.408c.216-.288-.072-.648-.504-.648z' }));
5
+ export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M11.585 8h-5.17c-.31 0-.517.147-.362.265l2.585 2.625a.654.654 0 0 0 .62.059c.052-.03.104-.03.104-.06l2.585-2.624c.155-.118-.051-.265-.362-.265z' }));
6
6
  export const viewBox = '0 0 18 18';
7
7
  //# sourceMappingURL=arrow-micro-down.icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"arrow-micro-down.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-down.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC;AAEvC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,+IAA+I,GACjJ,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-micro-down';\n\nexport const Component = () => (\n <path\n fill='currentColor'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M12.6 6.192H5.4c-.432 0-.72.36-.504.648l3.6 6.408c.216.288.576.36.864.144.072-.072.144-.072.144-.144l3.6-6.408c.216-.288-.072-.648-.504-.648z'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
1
+ {"version":3,"file":"arrow-micro-down.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-down.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC;AAEvC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,iJAAiJ,GACnJ,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-micro-down';\n\nexport const Component = () => (\n <path\n fill='currentColor'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M11.585 8h-5.17c-.31 0-.517.147-.362.265l2.585 2.625a.654.654 0 0 0 .62.059c.052-.03.104-.03.104-.06l2.585-2.624c.155-.118-.051-.265-.362-.265z'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  // This file is autogenerated. Any changes will be overwritten.
3
3
  export const set = 'streamline';
4
4
  export const name = 'arrow-micro-left';
5
- export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M11.808 12.6V5.4c0-.432-.36-.72-.648-.504l-6.408 3.6c-.288.216-.36.576-.144.864.072.072.072.144.144.144l6.408 3.6c.288.216.648-.072.648-.504z' }));
5
+ export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M10 11.585v-5.17c0-.31-.147-.517-.265-.362L7.11 8.638a.654.654 0 0 0-.059.62c.03.052.03.104.06.104l2.624 2.585c.118.155.265-.051.265-.362z' }));
6
6
  export const viewBox = '0 0 18 18';
7
7
  //# sourceMappingURL=arrow-micro-left.icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"arrow-micro-left.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-left.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC;AAEvC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,+IAA+I,GACjJ,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-micro-left';\n\nexport const Component = () => (\n <path\n fill='currentColor'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M11.808 12.6V5.4c0-.432-.36-.72-.648-.504l-6.408 3.6c-.288.216-.36.576-.144.864.072.072.072.144.144.144l6.408 3.6c.288.216.648-.072.648-.504z'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
1
+ {"version":3,"file":"arrow-micro-left.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-left.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC;AAEvC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,4IAA4I,GAC9I,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-micro-left';\n\nexport const Component = () => (\n <path\n fill='currentColor'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M10 11.585v-5.17c0-.31-.147-.517-.265-.362L7.11 8.638a.654.654 0 0 0-.059.62c.03.052.03.104.06.104l2.624 2.585c.118.155.265-.051.265-.362z'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  // This file is autogenerated. Any changes will be overwritten.
3
3
  export const set = 'streamline';
4
4
  export const name = 'arrow-micro-right';
5
- export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6.192 5.4v7.2c0 .432.36.72.648.504l6.408-3.6c.288-.216.36-.576.144-.864-.072-.072-.072-.144-.144-.144l-6.408-3.6c-.288-.216-.648.072-.648.504z' }));
5
+ export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M7 6.415v5.17c0 .31.147.517.265.362L9.89 9.362a.654.654 0 0 0 .059-.62c-.03-.052-.03-.104-.06-.104L7.266 6.053C7.147 5.898 7 6.104 7 6.415z' }));
6
6
  export const viewBox = '0 0 18 18';
7
7
  //# sourceMappingURL=arrow-micro-right.icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"arrow-micro-right.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-right.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,mBAAmB,CAAC;AAExC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,iJAAiJ,GACnJ,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-micro-right';\n\nexport const Component = () => (\n <path\n fill='currentColor'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M6.192 5.4v7.2c0 .432.36.72.648.504l6.408-3.6c.288-.216.36-.576.144-.864-.072-.072-.072-.144-.144-.144l-6.408-3.6c-.288-.216-.648.072-.648.504z'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
1
+ {"version":3,"file":"arrow-micro-right.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-right.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,mBAAmB,CAAC;AAExC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,6IAA6I,GAC/I,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-micro-right';\n\nexport const Component = () => (\n <path\n fill='currentColor'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M7 6.415v5.17c0 .31.147.517.265.362L9.89 9.362a.654.654 0 0 0 .059-.62c-.03-.052-.03-.104-.06-.104L7.266 6.053C7.147 5.898 7 6.104 7 6.415z'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  // This file is autogenerated. Any changes will be overwritten.
3
3
  export const set = 'streamline';
4
4
  export const name = 'arrow-micro-up';
5
- export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M5.535 12.663h7.2c.432 0 .72-.36.504-.648l-3.6-6.408c-.216-.288-.576-.36-.864-.144-.072.072-.144.072-.144.144l-3.6 6.408c-.216.288.072.648.504.648z' }));
5
+ export const Component = () => (_jsx("path", { fill: 'currentColor', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M6.415 11h5.17c.31 0 .517-.147.362-.265L9.362 8.11a.654.654 0 0 0-.62-.059c-.052.03-.104.03-.104.06l-2.585 2.624c-.155.118.051.265.362.265z' }));
6
6
  export const viewBox = '0 0 18 18';
7
7
  //# sourceMappingURL=arrow-micro-up.icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"arrow-micro-up.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-up.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,gBAAgB,CAAC;AAErC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,qJAAqJ,GACvJ,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-micro-up';\n\nexport const Component = () => (\n <path\n fill='currentColor'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M5.535 12.663h7.2c.432 0 .72-.36.504-.648l-3.6-6.408c-.216-.288-.576-.36-.864-.144-.072.072-.144.072-.144.144l-3.6 6.408c-.216.288.072.648.504.648z'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
1
+ {"version":3,"file":"arrow-micro-up.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-micro-up.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,gBAAgB,CAAC;AAErC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,cAAc,EACnB,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,6IAA6I,GAC/I,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-micro-up';\n\nexport const Component = () => (\n <path\n fill='currentColor'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M6.415 11h5.17c.31 0 .517-.147.362-.265L9.362 8.11a.654.654 0 0 0-.62-.059c-.052.03-.104.03-.104.06l-2.585 2.624c-.155.118.051.265.362.265z'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"arrow-right.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-right.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,gBAAgB,CAAC;AAElC,eAAO,MAAM,SAAS,mBAQrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}
1
+ {"version":3,"file":"arrow-right.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-right.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,gBAAgB,CAAC;AAElC,eAAO,MAAM,SAAS,mBAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  // This file is autogenerated. Any changes will be overwritten.
3
3
  export const set = 'streamline';
4
4
  export const name = 'arrow-right';
5
- export const Component = () => (_jsx("path", { fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M.563 9h16.875M9.563 1.125 17.436 9l-7.875 7.875' }));
5
+ export const Component = () => (_jsx("path", { stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M2 9h13M8.933 3 15 9l-6.067 6' }));
6
6
  export const viewBox = '0 0 18 18';
7
7
  //# sourceMappingURL=arrow-right.icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"arrow-right.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-right.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,aAAa,CAAC;AAElC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,kDAAkD,GACpD,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-right';\n\nexport const Component = () => (\n <path\n fill='none'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M.563 9h16.875M9.563 1.125 17.436 9l-7.875 7.875'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
1
+ {"version":3,"file":"arrow-right.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-right.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,aAAa,CAAC;AAElC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,+BAA+B,GACjC,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-right';\n\nexport const Component = () => (\n <path\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M2 9h13M8.933 3 15 9l-6.067 6'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"arrow-up.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-up.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,aAAa,CAAC;AAE/B,eAAO,MAAM,SAAS,mBAQrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}
1
+ {"version":3,"file":"arrow-up.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-up.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,aAAa,CAAC;AAE/B,eAAO,MAAM,SAAS,mBAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  // This file is autogenerated. Any changes will be overwritten.
3
3
  export const set = 'streamline';
4
4
  export const name = 'arrow-up';
5
- export const Component = () => (_jsx("path", { fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M9 17.438V.563M1.125 8.438 9 .561l7.875 7.875' }));
5
+ export const Component = () => (_jsx("path", { stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'M9 16V3M3 9.067 9 3l6 6.067' }));
6
6
  export const viewBox = '0 0 18 18';
7
7
  //# sourceMappingURL=arrow-up.icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"arrow-up.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-up.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAC;AAE/B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,+CAA+C,GACjD,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-up';\n\nexport const Component = () => (\n <path\n fill='none'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M9 17.438V.563M1.125 8.438 9 .561l7.875 7.875'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
1
+ {"version":3,"file":"arrow-up.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/arrow-up.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAAC;AAE/B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,6BAA6B,GAC/B,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'arrow-up';\n\nexport const Component = () => (\n <path\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='M9 16V3M3 9.067 9 3l6 6.067'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"caret-down.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/caret-down.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,eAAe,CAAC;AAEjC,eAAO,MAAM,SAAS,mBAQrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}
1
+ {"version":3,"file":"caret-down.icon.d.ts","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/caret-down.icon.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,GAAG,eAAe,CAAC;AAEhC,eAAO,MAAM,IAAI,eAAe,CAAC;AAEjC,eAAO,MAAM,SAAS,mBAOrB,CAAC;AAEF,eAAO,MAAM,OAAO,cAAc,CAAC"}
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  // This file is autogenerated. Any changes will be overwritten.
3
3
  export const set = 'streamline';
4
4
  export const name = 'caret-down';
5
- export const Component = () => (_jsx("path", { fill: 'none', stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'm17.438 5.483-8.04 8.04a.562.562 0 0 1-.796 0l-8.04-8.04' }));
5
+ export const Component = () => (_jsx("path", { stroke: 'currentColor', strokeLinecap: 'round', strokeLinejoin: 'round', d: 'm14 7-4.764 4.9A.333.333 0 0 1 9 12a.326.326 0 0 1-.236-.1L4 7' }));
6
6
  export const viewBox = '0 0 18 18';
7
7
  //# sourceMappingURL=caret-down.icon.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"caret-down.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/caret-down.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,0DAA0D,GAC5D,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'caret-down';\n\nexport const Component = () => (\n <path\n fill='none'\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='m17.438 5.483-8.04 8.04a.562.562 0 0 1-.796 0l-8.04-8.04'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}
1
+ {"version":3,"file":"caret-down.icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/streamline-icons/caret-down.icon.tsx"],"names":[],"mappings":";AAAA,+DAA+D;AAE/D,MAAM,CAAC,MAAM,GAAG,GAAG,YAAY,CAAC;AAEhC,MAAM,CAAC,MAAM,IAAI,GAAG,YAAY,CAAC;AAEjC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC7B,eACE,MAAM,EAAC,cAAc,EACrB,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,CAAC,EAAC,gEAAgE,GAClE,CACH,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,WAAW,CAAC","sourcesContent":["// This file is autogenerated. Any changes will be overwritten.\n\nexport const set = 'streamline';\n\nexport const name = 'caret-down';\n\nexport const Component = () => (\n <path\n stroke='currentColor'\n strokeLinecap='round'\n strokeLinejoin='round'\n d='m14 7-4.764 4.9A.333.333 0 0 1 9 12a.326.326 0 0 1-.236-.1L4 7'\n />\n);\n\nexport const viewBox = '0 0 18 18';\n"]}