@razorpay/blade 11.6.0 → 11.6.2
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.
- package/build/lib/native/components/FileUpload/FileUpload.native.js +7 -0
- package/build/lib/native/components/FileUpload/FileUpload.native.js.map +1 -0
- package/build/lib/native/components/index.js +1 -0
- package/build/lib/native/components/index.js.map +1 -1
- package/build/lib/web/development/components/FileUpload/FileUpload.web.js +434 -0
- package/build/lib/web/development/components/FileUpload/FileUpload.web.js.map +1 -0
- package/build/lib/web/development/components/FileUpload/FileUploadItem.js +149 -0
- package/build/lib/web/development/components/FileUpload/FileUploadItem.js.map +1 -0
- package/build/lib/web/development/components/FileUpload/FileUploadItemIcon.js +122 -0
- package/build/lib/web/development/components/FileUpload/FileUploadItemIcon.js.map +1 -0
- package/build/lib/web/development/components/FileUpload/StyledFileUploadItemWrapper.js +47 -0
- package/build/lib/web/development/components/FileUpload/StyledFileUploadItemWrapper.js.map +1 -0
- package/build/lib/web/development/components/FileUpload/StyledFileUploadWrapper.js +45 -0
- package/build/lib/web/development/components/FileUpload/StyledFileUploadWrapper.js.map +1 -0
- package/build/lib/web/development/components/FileUpload/fileUploadTokens.js +66 -0
- package/build/lib/web/development/components/FileUpload/fileUploadTokens.js.map +1 -0
- package/build/lib/web/development/components/FileUpload/index.js +2 -0
- package/build/lib/web/development/components/FileUpload/index.js.map +1 -0
- package/build/lib/web/development/components/FileUpload/isFileAccepted.js +28 -0
- package/build/lib/web/development/components/FileUpload/isFileAccepted.js.map +1 -0
- package/build/lib/web/development/components/index.js +2 -0
- package/build/lib/web/development/components/index.js.map +1 -1
- package/build/lib/web/development/tokens/global/fontFamily/fontFamily.web.js +3 -2
- package/build/lib/web/development/tokens/global/fontFamily/fontFamily.web.js.map +1 -1
- package/build/lib/web/production/components/FileUpload/FileUpload.web.js +434 -0
- package/build/lib/web/production/components/FileUpload/FileUpload.web.js.map +1 -0
- package/build/lib/web/production/components/FileUpload/FileUploadItem.js +149 -0
- package/build/lib/web/production/components/FileUpload/FileUploadItem.js.map +1 -0
- package/build/lib/web/production/components/FileUpload/FileUploadItemIcon.js +122 -0
- package/build/lib/web/production/components/FileUpload/FileUploadItemIcon.js.map +1 -0
- package/build/lib/web/production/components/FileUpload/StyledFileUploadItemWrapper.js +47 -0
- package/build/lib/web/production/components/FileUpload/StyledFileUploadItemWrapper.js.map +1 -0
- package/build/lib/web/production/components/FileUpload/StyledFileUploadWrapper.js +45 -0
- package/build/lib/web/production/components/FileUpload/StyledFileUploadWrapper.js.map +1 -0
- package/build/lib/web/production/components/FileUpload/fileUploadTokens.js +66 -0
- package/build/lib/web/production/components/FileUpload/fileUploadTokens.js.map +1 -0
- package/build/lib/web/production/components/FileUpload/index.js +2 -0
- package/build/lib/web/production/components/FileUpload/index.js.map +1 -0
- package/build/lib/web/production/components/FileUpload/isFileAccepted.js +28 -0
- package/build/lib/web/production/components/FileUpload/isFileAccepted.js.map +1 -0
- package/build/lib/web/production/components/index.js +2 -0
- package/build/lib/web/production/components/index.js.map +1 -1
- package/build/lib/web/production/tokens/global/fontFamily/fontFamily.web.js +3 -2
- package/build/lib/web/production/tokens/global/fontFamily/fontFamily.web.js.map +1 -1
- package/build/types/components/index.d.ts +190 -1
- package/build/types/components/index.native.d.ts +140 -1
- package/codemods/brand-refresh/transformers/__tests__/migrate-colors.test.ts +11 -1
- package/codemods/brand-refresh/transformers/__tests__/migrate-typography.test.ts +5 -1
- package/codemods/brand-refresh/transformers/index.ts +3 -1
- package/codemods/brand-refresh/transformers/migrate-typography.ts +22 -0
- package/fonts.css +19 -0
- package/package.json +3 -3
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
import { memo } from 'react';
|
|
2
|
+
import { StyledFileUploadItemWrapper } from './StyledFileUploadItemWrapper.js';
|
|
3
|
+
import { FileUploadItemIcon } from './FileUploadItemIcon.js';
|
|
4
|
+
import '../Icons/index.js';
|
|
5
|
+
import '../Box/BaseBox/index.js';
|
|
6
|
+
import '../Typography/index.js';
|
|
7
|
+
import '../Divider/index.js';
|
|
8
|
+
import '../Button/IconButton/index.js';
|
|
9
|
+
import '../ProgressBar/index.js';
|
|
10
|
+
import isUndefined from '../../utils/lodashButBetter/isUndefined.js';
|
|
11
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
12
|
+
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
|
|
13
|
+
import { Text } from '../Typography/Text/Text.js';
|
|
14
|
+
import CheckCircleIcon from '../Icons/CheckCircleIcon/CheckCircleIcon.js';
|
|
15
|
+
import { IconButton } from '../Button/IconButton/IconButton.js';
|
|
16
|
+
import CloseIcon from '../Icons/CloseIcon/CloseIcon.js';
|
|
17
|
+
import EyeIcon from '../Icons/EyeIcon/EyeIcon.js';
|
|
18
|
+
import { Divider } from '../Divider/Divider.js';
|
|
19
|
+
import TrashIcon from '../Icons/TrashIcon/TrashIcon.js';
|
|
20
|
+
import { ProgressBar } from '../ProgressBar/ProgressBar.js';
|
|
21
|
+
|
|
22
|
+
var FileUploadItem = /*#__PURE__*/memo(function (_ref) {
|
|
23
|
+
var file = _ref.file,
|
|
24
|
+
onPreview = _ref.onPreview,
|
|
25
|
+
onRemove = _ref.onRemove,
|
|
26
|
+
onDismiss = _ref.onDismiss;
|
|
27
|
+
var name = file.name,
|
|
28
|
+
size = file.size,
|
|
29
|
+
uploadPercent = file.uploadPercent,
|
|
30
|
+
errorText = file.errorText,
|
|
31
|
+
status = file.status;
|
|
32
|
+
var isUploading = status === 'uploading';
|
|
33
|
+
var sizeInKB = size / 1024;
|
|
34
|
+
var sizeInMB = sizeInKB / 1024;
|
|
35
|
+
var showSizeInKB = sizeInKB < 1024;
|
|
36
|
+
return /*#__PURE__*/jsx(StyledFileUploadItemWrapper, {
|
|
37
|
+
status: status !== null && status !== void 0 ? status : 'success',
|
|
38
|
+
borderRadius: "medium",
|
|
39
|
+
borderWidth: "thin",
|
|
40
|
+
children: /*#__PURE__*/jsxs(BaseBox, {
|
|
41
|
+
width: "100%",
|
|
42
|
+
display: "flex",
|
|
43
|
+
flexDirection: "column",
|
|
44
|
+
children: [/*#__PURE__*/jsxs(BaseBox, {
|
|
45
|
+
display: "flex",
|
|
46
|
+
flexDirection: "row",
|
|
47
|
+
margin: "spacing.3",
|
|
48
|
+
children: [/*#__PURE__*/jsx(BaseBox, {
|
|
49
|
+
marginRight: "spacing.3",
|
|
50
|
+
children: /*#__PURE__*/jsx(FileUploadItemIcon, {
|
|
51
|
+
fileName: name,
|
|
52
|
+
uploadStatus: status
|
|
53
|
+
})
|
|
54
|
+
}), /*#__PURE__*/jsxs(BaseBox, {
|
|
55
|
+
flexGrow: 1,
|
|
56
|
+
children: [/*#__PURE__*/jsxs(BaseBox, {
|
|
57
|
+
alignItems: "center",
|
|
58
|
+
display: "flex",
|
|
59
|
+
children: [/*#__PURE__*/jsx(BaseBox, {
|
|
60
|
+
alignItems: "center",
|
|
61
|
+
maxWidth: "70%",
|
|
62
|
+
display: "flex",
|
|
63
|
+
marginRight: "spacing.3",
|
|
64
|
+
children: /*#__PURE__*/jsx(Text, {
|
|
65
|
+
size: "medium",
|
|
66
|
+
weight: "medium",
|
|
67
|
+
color: "surface.text.gray.subtle",
|
|
68
|
+
truncateAfterLines: 1,
|
|
69
|
+
children: name
|
|
70
|
+
})
|
|
71
|
+
}), status === 'success' && /*#__PURE__*/jsx(CheckCircleIcon, {
|
|
72
|
+
size: "medium",
|
|
73
|
+
marginRight: "spacing.2",
|
|
74
|
+
color: "interactive.icon.positive.normal"
|
|
75
|
+
})]
|
|
76
|
+
}), /*#__PURE__*/jsx(Text, {
|
|
77
|
+
size: "small",
|
|
78
|
+
weight: "regular",
|
|
79
|
+
color: status === 'error' ? 'feedback.text.negative.intense' : 'surface.text.gray.muted',
|
|
80
|
+
children: errorText !== null && errorText !== void 0 ? errorText : "".concat((showSizeInKB ? sizeInKB : sizeInMB).toFixed(2), " ").concat(showSizeInKB ? 'KB' : 'MB', " ").concat(isUploading && uploadPercent ? "(".concat(uploadPercent, "%)") : '')
|
|
81
|
+
})]
|
|
82
|
+
}), status === 'error' || status === 'uploading' ? /*#__PURE__*/jsx(BaseBox, {
|
|
83
|
+
children: /*#__PURE__*/jsx(IconButton, {
|
|
84
|
+
accessibilityLabel: "Remove File",
|
|
85
|
+
icon: CloseIcon,
|
|
86
|
+
onClick: function onClick() {
|
|
87
|
+
return onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss({
|
|
88
|
+
file: file
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
})
|
|
92
|
+
}) : /*#__PURE__*/jsx(BaseBox, {
|
|
93
|
+
display: "flex",
|
|
94
|
+
flexDirection: "row",
|
|
95
|
+
alignItems: "center",
|
|
96
|
+
children: onPreview ? /*#__PURE__*/jsxs(BaseBox, {
|
|
97
|
+
display: "flex",
|
|
98
|
+
flexDirection: "row",
|
|
99
|
+
alignItems: "center",
|
|
100
|
+
padding: "spacing.0",
|
|
101
|
+
gap: "spacing.3",
|
|
102
|
+
children: [/*#__PURE__*/jsx(IconButton, {
|
|
103
|
+
accessibilityLabel: "Preview File",
|
|
104
|
+
icon: EyeIcon,
|
|
105
|
+
onClick: function onClick() {
|
|
106
|
+
return onPreview === null || onPreview === void 0 ? void 0 : onPreview({
|
|
107
|
+
file: file
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
}), /*#__PURE__*/jsx(Divider, {
|
|
111
|
+
orientation: "vertical",
|
|
112
|
+
thickness: "thinner",
|
|
113
|
+
variant: "normal"
|
|
114
|
+
}), /*#__PURE__*/jsx(IconButton, {
|
|
115
|
+
accessibilityLabel: "Remove File",
|
|
116
|
+
icon: TrashIcon,
|
|
117
|
+
onClick: function onClick() {
|
|
118
|
+
return onRemove === null || onRemove === void 0 ? void 0 : onRemove({
|
|
119
|
+
file: file
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
})]
|
|
123
|
+
}) : /*#__PURE__*/jsx(IconButton, {
|
|
124
|
+
accessibilityLabel: "Remove File",
|
|
125
|
+
icon: TrashIcon,
|
|
126
|
+
onClick: function onClick() {
|
|
127
|
+
return onRemove === null || onRemove === void 0 ? void 0 : onRemove({
|
|
128
|
+
file: file
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
})
|
|
132
|
+
})]
|
|
133
|
+
}), isUploading && /*#__PURE__*/jsx(BaseBox, {
|
|
134
|
+
width: "100%",
|
|
135
|
+
position: "absolute",
|
|
136
|
+
bottom: "spacing.0",
|
|
137
|
+
children: /*#__PURE__*/jsx(ProgressBar, {
|
|
138
|
+
left: "spacing.0",
|
|
139
|
+
showPercentage: false,
|
|
140
|
+
value: uploadPercent !== null && uploadPercent !== void 0 ? uploadPercent : 0,
|
|
141
|
+
isIndeterminate: isUndefined(uploadPercent)
|
|
142
|
+
})
|
|
143
|
+
})]
|
|
144
|
+
})
|
|
145
|
+
});
|
|
146
|
+
});
|
|
147
|
+
|
|
148
|
+
export { FileUploadItem };
|
|
149
|
+
//# sourceMappingURL=FileUploadItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileUploadItem.js","sources":["../../../../../../src/components/FileUpload/FileUploadItem.tsx"],"sourcesContent":["import { memo } from 'react';\nimport { StyledFileUploadItemWrapper } from './StyledFileUploadItemWrapper';\nimport type { FileUploadItemProps } from './types';\nimport { FileUploadItemIcon } from './FileUploadItemIcon';\nimport { TrashIcon, EyeIcon, CloseIcon, CheckCircleIcon } from '~components/Icons';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { Divider } from '~components/Divider';\nimport { IconButton } from '~components/Button/IconButton';\nimport { ProgressBar } from '~components/ProgressBar';\nimport isUndefined from '~utils/lodashButBetter/isUndefined';\n\nconst FileUploadItem = memo(\n ({ file, onPreview, onRemove, onDismiss }: FileUploadItemProps): React.ReactElement => {\n const { name, size, uploadPercent, errorText, status } = file;\n const isUploading = status === 'uploading';\n const sizeInKB = size / 1024;\n const sizeInMB = sizeInKB / 1024;\n const showSizeInKB = sizeInKB < 1024;\n\n return (\n <StyledFileUploadItemWrapper\n status={status ?? 'success'}\n borderRadius=\"medium\"\n borderWidth=\"thin\"\n >\n <BaseBox width=\"100%\" display=\"flex\" flexDirection=\"column\">\n <BaseBox display=\"flex\" flexDirection=\"row\" margin=\"spacing.3\">\n <BaseBox marginRight=\"spacing.3\">\n <FileUploadItemIcon fileName={name} uploadStatus={status} />\n </BaseBox>\n <BaseBox flexGrow={1}>\n <BaseBox alignItems=\"center\" display=\"flex\">\n <BaseBox alignItems=\"center\" maxWidth=\"70%\" display=\"flex\" marginRight=\"spacing.3\">\n <Text\n size=\"medium\"\n weight=\"medium\"\n color=\"surface.text.gray.subtle\"\n truncateAfterLines={1}\n >\n {name}\n </Text>\n </BaseBox>\n {status === 'success' && (\n <CheckCircleIcon\n size=\"medium\"\n marginRight=\"spacing.2\"\n color=\"interactive.icon.positive.normal\"\n />\n )}\n </BaseBox>\n <Text\n size=\"small\"\n weight=\"regular\"\n color={\n status === 'error' ? 'feedback.text.negative.intense' : 'surface.text.gray.muted'\n }\n >\n {errorText ??\n `${(showSizeInKB ? sizeInKB : sizeInMB).toFixed(2)} ${\n showSizeInKB ? 'KB' : 'MB'\n } ${isUploading && uploadPercent ? `(${uploadPercent}%)` : ''}`}\n </Text>\n </BaseBox>\n {status === 'error' || status === 'uploading' ? (\n <BaseBox>\n <IconButton\n accessibilityLabel=\"Remove File\"\n icon={CloseIcon}\n onClick={() => onDismiss?.({ file })}\n />\n </BaseBox>\n ) : (\n <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n {onPreview ? (\n <BaseBox\n display=\"flex\"\n flexDirection=\"row\"\n alignItems=\"center\"\n padding=\"spacing.0\"\n gap=\"spacing.3\"\n >\n <IconButton\n accessibilityLabel=\"Preview File\"\n icon={EyeIcon}\n onClick={() => onPreview?.({ file })}\n />\n <Divider orientation=\"vertical\" thickness=\"thinner\" variant=\"normal\" />\n <IconButton\n accessibilityLabel=\"Remove File\"\n icon={TrashIcon}\n onClick={() => onRemove?.({ file })}\n />\n </BaseBox>\n ) : (\n <IconButton\n accessibilityLabel=\"Remove File\"\n icon={TrashIcon}\n onClick={() => onRemove?.({ file })}\n />\n )}\n </BaseBox>\n )}\n </BaseBox>\n {isUploading && (\n <BaseBox width=\"100%\" position=\"absolute\" bottom=\"spacing.0\">\n <ProgressBar\n left=\"spacing.0\"\n showPercentage={false}\n value={uploadPercent ?? 0}\n isIndeterminate={isUndefined(uploadPercent)}\n />\n </BaseBox>\n )}\n </BaseBox>\n </StyledFileUploadItemWrapper>\n );\n },\n);\n\nexport { FileUploadItem };\n"],"names":["FileUploadItem","memo","_ref","file","onPreview","onRemove","onDismiss","name","size","uploadPercent","errorText","status","isUploading","sizeInKB","sizeInMB","showSizeInKB","_jsx","StyledFileUploadItemWrapper","borderRadius","borderWidth","children","_jsxs","BaseBox","width","display","flexDirection","margin","marginRight","FileUploadItemIcon","fileName","uploadStatus","flexGrow","alignItems","maxWidth","Text","weight","color","truncateAfterLines","CheckCircleIcon","concat","toFixed","IconButton","accessibilityLabel","icon","CloseIcon","onClick","padding","gap","EyeIcon","Divider","orientation","thickness","variant","TrashIcon","position","bottom","ProgressBar","left","showPercentage","value","isIndeterminate","isUndefined"],"mappings":"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"}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
3
|
+
import '../Box/BaseBox/index.js';
|
|
4
|
+
import '../Icons/_Svg/index.js';
|
|
5
|
+
import '../Typography/index.js';
|
|
6
|
+
import '../../utils/index.js';
|
|
7
|
+
import getIn from '../../utils/lodashButBetter/get.js';
|
|
8
|
+
import '../../tokens/global/index.js';
|
|
9
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
10
|
+
import useTheme from '../BladeProvider/useTheme.js';
|
|
11
|
+
import Svg from '../Icons/_Svg/Svg/Svg.web.js';
|
|
12
|
+
import Path from '../Icons/_Svg/Path/Path.web.js';
|
|
13
|
+
import { colors } from '../../tokens/global/colors.js';
|
|
14
|
+
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
|
|
15
|
+
import { Text } from '../Typography/Text/Text.js';
|
|
16
|
+
|
|
17
|
+
var _excluded = ["fileName", "uploadStatus"];
|
|
18
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
19
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
20
|
+
var FileUploadItemIcon = function FileUploadItemIcon(_ref) {
|
|
21
|
+
var fileName = _ref.fileName,
|
|
22
|
+
uploadStatus = _ref.uploadStatus,
|
|
23
|
+
styledProps = _objectWithoutProperties(_ref, _excluded);
|
|
24
|
+
var _useTheme = useTheme(),
|
|
25
|
+
theme = _useTheme.theme;
|
|
26
|
+
if (uploadStatus === 'error') {
|
|
27
|
+
return /*#__PURE__*/jsx(Svg, _objectSpread(_objectSpread({}, styledProps), {}, {
|
|
28
|
+
width: "38",
|
|
29
|
+
height: "38",
|
|
30
|
+
viewBox: "0 0 38 38",
|
|
31
|
+
fill: "none",
|
|
32
|
+
children: /*#__PURE__*/jsx(Path, {
|
|
33
|
+
fillRule: "evenodd",
|
|
34
|
+
clipRule: "evenodd",
|
|
35
|
+
d: "M5.95314 2.04416C6.56342 1.3756 7.39114 1 8.25422 1H26.0591L33.2032 8.82636V33.085C33.2032 34.0305 32.8603 34.9373 32.2501 35.6058C31.6398 36.2744 30.8121 36.65 29.949 36.65H8.25422C7.39114 36.65 6.56342 36.2744 5.95314 35.6058C5.34285 34.9373 5 34.0305 5 33.085V4.565C5 3.6195 5.34285 2.71273 5.95314 2.04416ZM24.2408 14.2499C25.5737 15.5828 26.3224 17.3905 26.3224 19.2755C26.3224 21.1604 25.5737 22.9682 24.2408 24.301C22.9079 25.6339 21.1002 26.3827 19.2152 26.3827C17.3303 26.3827 15.5225 25.6339 14.1897 24.301C12.8568 22.9682 12.108 21.1604 12.108 19.2755C12.108 17.3905 12.8568 15.5828 14.1897 14.2499C15.5225 12.917 17.3303 12.1683 19.2152 12.1683C21.1002 12.1683 22.9079 12.917 24.2408 14.2499ZM19.926 20.46V15.248C19.926 15.0596 19.8511 14.8788 19.7178 14.7455C19.5845 14.6122 19.4037 14.5373 19.2152 14.5373C19.0267 14.5373 18.846 14.6122 18.7127 14.7455C18.5794 14.8788 18.5045 15.0596 18.5045 15.248V20.46C18.5045 20.6485 18.5794 20.8293 18.7127 20.9626C18.846 21.0958 19.0267 21.1707 19.2152 21.1707C19.4037 21.1707 19.5845 21.0958 19.7178 20.9626C19.8511 20.8293 19.926 20.6485 19.926 20.46ZM19.8853 23.736C20.063 23.5583 20.1629 23.3173 20.1629 23.066C20.1629 22.8146 20.063 22.5736 19.8853 22.3959C19.7076 22.2182 19.4666 22.1183 19.2152 22.1183C18.9639 22.1183 18.7229 22.2182 18.5452 22.3959C18.3674 22.5736 18.2676 22.8146 18.2676 23.066C18.2676 23.3173 18.3674 23.5583 18.5452 23.736C18.7229 23.9138 18.9639 24.0136 19.2152 24.0136C19.4666 24.0136 19.7076 23.9138 19.8853 23.736Z",
|
|
36
|
+
fill: getIn(theme.colors, 'interactive.icon.negative.disabled')
|
|
37
|
+
})
|
|
38
|
+
}));
|
|
39
|
+
}
|
|
40
|
+
var fileType = fileName.split('.').pop();
|
|
41
|
+
var iconColors = {
|
|
42
|
+
background: colors.chromatic.cloud[50],
|
|
43
|
+
border: colors.chromatic.cloud[600],
|
|
44
|
+
cover: colors.chromatic.cloud[700],
|
|
45
|
+
fold: colors.chromatic.cloud[800]
|
|
46
|
+
};
|
|
47
|
+
switch (fileType) {
|
|
48
|
+
case 'pdf':
|
|
49
|
+
iconColors.background = colors.chromatic.crimson[50];
|
|
50
|
+
iconColors.border = colors.chromatic.crimson[600];
|
|
51
|
+
iconColors.cover = colors.chromatic.crimson[700];
|
|
52
|
+
iconColors.fold = colors.chromatic.crimson[800];
|
|
53
|
+
break;
|
|
54
|
+
case 'doc':
|
|
55
|
+
case 'docx':
|
|
56
|
+
iconColors.background = colors.chromatic.azure[50];
|
|
57
|
+
iconColors.border = colors.chromatic.azure[600];
|
|
58
|
+
iconColors.cover = colors.chromatic.azure[700];
|
|
59
|
+
iconColors.fold = colors.chromatic.azure[800];
|
|
60
|
+
break;
|
|
61
|
+
case 'xls':
|
|
62
|
+
case 'xlsx':
|
|
63
|
+
case 'csv':
|
|
64
|
+
iconColors.background = colors.chromatic.emerald[50];
|
|
65
|
+
iconColors.border = colors.chromatic.emerald[600];
|
|
66
|
+
iconColors.cover = colors.chromatic.emerald[700];
|
|
67
|
+
iconColors.fold = colors.chromatic.emerald[800];
|
|
68
|
+
break;
|
|
69
|
+
case 'jpg':
|
|
70
|
+
case 'jpeg':
|
|
71
|
+
case 'png':
|
|
72
|
+
case 'gif':
|
|
73
|
+
iconColors.background = colors.chromatic.sapphire[50];
|
|
74
|
+
iconColors.border = colors.chromatic.sapphire[600];
|
|
75
|
+
iconColors.cover = colors.chromatic.sapphire[700];
|
|
76
|
+
iconColors.fold = colors.chromatic.sapphire[800];
|
|
77
|
+
break;
|
|
78
|
+
default:
|
|
79
|
+
iconColors.background = colors.chromatic.cloud[50];
|
|
80
|
+
iconColors.border = colors.chromatic.cloud[600];
|
|
81
|
+
iconColors.cover = colors.chromatic.cloud[700];
|
|
82
|
+
iconColors.fold = colors.chromatic.cloud[800];
|
|
83
|
+
}
|
|
84
|
+
return /*#__PURE__*/jsxs(BaseBox, {
|
|
85
|
+
display: "flex",
|
|
86
|
+
position: "relative",
|
|
87
|
+
justifyContent: "center",
|
|
88
|
+
children: [/*#__PURE__*/jsxs(Svg, _objectSpread(_objectSpread({
|
|
89
|
+
width: "38",
|
|
90
|
+
height: "39",
|
|
91
|
+
viewBox: "0 0 38 39",
|
|
92
|
+
fill: "none"
|
|
93
|
+
}, styledProps), {}, {
|
|
94
|
+
children: [/*#__PURE__*/jsx(Path, {
|
|
95
|
+
d: "M5.5 31.5801H3L5.5 34.0801V31.5801Z",
|
|
96
|
+
fill: iconColors.fold
|
|
97
|
+
}), /*#__PURE__*/jsx(Path, {
|
|
98
|
+
d: "M32.7998 31.5801H35.2998L32.7998 34.0801V31.5801Z",
|
|
99
|
+
fill: iconColors.fold
|
|
100
|
+
}), /*#__PURE__*/jsx(Path, {
|
|
101
|
+
fillRule: "evenodd",
|
|
102
|
+
clipRule: "evenodd",
|
|
103
|
+
d: "M6.35552 2.71162C6.91384 2.09227 7.66518 1.75 8.44238 1.75H25.9153L32.832 9.42294V33.5872C32.832 34.4743 32.514 35.3206 31.955 35.9408C31.3966 36.5601 30.6453 36.9024 29.8681 36.9024H8.44238C7.66518 36.9024 6.91384 36.5601 6.35552 35.9408C5.79644 35.3206 5.47852 34.4743 5.47852 33.5872V5.06524C5.47852 4.17809 5.79644 3.33184 6.35552 2.71162Z",
|
|
104
|
+
fill: iconColors.background,
|
|
105
|
+
stroke: iconColors.border
|
|
106
|
+
}), /*#__PURE__*/jsx(Path, {
|
|
107
|
+
d: "M3 19.3262H35.31V31.5817H3V19.3262Z",
|
|
108
|
+
fill: iconColors.cover,
|
|
109
|
+
strokeWidth: "0.5"
|
|
110
|
+
})]
|
|
111
|
+
})), /*#__PURE__*/jsx(Text, {
|
|
112
|
+
position: "absolute",
|
|
113
|
+
top: "46%",
|
|
114
|
+
color: "interactive.text.staticWhite.normal",
|
|
115
|
+
size: "xsmall",
|
|
116
|
+
children: ".".concat(fileType)
|
|
117
|
+
})]
|
|
118
|
+
});
|
|
119
|
+
};
|
|
120
|
+
|
|
121
|
+
export { FileUploadItemIcon };
|
|
122
|
+
//# sourceMappingURL=FileUploadItemIcon.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileUploadItemIcon.js","sources":["../../../../../../src/components/FileUpload/FileUploadItemIcon.tsx"],"sourcesContent":["import type { BladeFile } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Svg, Path } from '~components/Icons/_Svg';\nimport { Text } from '~components/Typography';\nimport { useTheme } from '~utils';\nimport getIn from '~utils/lodashButBetter/get';\nimport { colors as globalColors } from '~tokens/global';\n\ntype FileUploadItemIconProps = { fileName: string; uploadStatus: BladeFile['status'] };\n\nconst FileUploadItemIcon: React.ComponentType<FileUploadItemIconProps> = ({\n fileName,\n uploadStatus,\n ...styledProps\n}: FileUploadItemIconProps) => {\n const { theme } = useTheme();\n\n if (uploadStatus === 'error') {\n return (\n <Svg {...styledProps} width=\"38\" height=\"38\" viewBox=\"0 0 38 38\" fill=\"none\">\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M5.95314 2.04416C6.56342 1.3756 7.39114 1 8.25422 1H26.0591L33.2032 8.82636V33.085C33.2032 34.0305 32.8603 34.9373 32.2501 35.6058C31.6398 36.2744 30.8121 36.65 29.949 36.65H8.25422C7.39114 36.65 6.56342 36.2744 5.95314 35.6058C5.34285 34.9373 5 34.0305 5 33.085V4.565C5 3.6195 5.34285 2.71273 5.95314 2.04416ZM24.2408 14.2499C25.5737 15.5828 26.3224 17.3905 26.3224 19.2755C26.3224 21.1604 25.5737 22.9682 24.2408 24.301C22.9079 25.6339 21.1002 26.3827 19.2152 26.3827C17.3303 26.3827 15.5225 25.6339 14.1897 24.301C12.8568 22.9682 12.108 21.1604 12.108 19.2755C12.108 17.3905 12.8568 15.5828 14.1897 14.2499C15.5225 12.917 17.3303 12.1683 19.2152 12.1683C21.1002 12.1683 22.9079 12.917 24.2408 14.2499ZM19.926 20.46V15.248C19.926 15.0596 19.8511 14.8788 19.7178 14.7455C19.5845 14.6122 19.4037 14.5373 19.2152 14.5373C19.0267 14.5373 18.846 14.6122 18.7127 14.7455C18.5794 14.8788 18.5045 15.0596 18.5045 15.248V20.46C18.5045 20.6485 18.5794 20.8293 18.7127 20.9626C18.846 21.0958 19.0267 21.1707 19.2152 21.1707C19.4037 21.1707 19.5845 21.0958 19.7178 20.9626C19.8511 20.8293 19.926 20.6485 19.926 20.46ZM19.8853 23.736C20.063 23.5583 20.1629 23.3173 20.1629 23.066C20.1629 22.8146 20.063 22.5736 19.8853 22.3959C19.7076 22.2182 19.4666 22.1183 19.2152 22.1183C18.9639 22.1183 18.7229 22.2182 18.5452 22.3959C18.3674 22.5736 18.2676 22.8146 18.2676 23.066C18.2676 23.3173 18.3674 23.5583 18.5452 23.736C18.7229 23.9138 18.9639 24.0136 19.2152 24.0136C19.4666 24.0136 19.7076 23.9138 19.8853 23.736Z\"\n fill={getIn(theme.colors, 'interactive.icon.negative.disabled')}\n />\n </Svg>\n );\n }\n\n const fileType = fileName.split('.').pop();\n\n const iconColors: Record<'background' | 'border' | 'cover' | 'fold', string> = {\n background: globalColors.chromatic.cloud[50],\n border: globalColors.chromatic.cloud[600],\n cover: globalColors.chromatic.cloud[700],\n fold: globalColors.chromatic.cloud[800],\n };\n\n switch (fileType) {\n case 'pdf':\n iconColors.background = globalColors.chromatic.crimson[50];\n iconColors.border = globalColors.chromatic.crimson[600];\n iconColors.cover = globalColors.chromatic.crimson[700];\n iconColors.fold = globalColors.chromatic.crimson[800];\n break;\n case 'doc':\n case 'docx':\n iconColors.background = globalColors.chromatic.azure[50];\n iconColors.border = globalColors.chromatic.azure[600];\n iconColors.cover = globalColors.chromatic.azure[700];\n iconColors.fold = globalColors.chromatic.azure[800];\n break;\n case 'xls':\n case 'xlsx':\n case 'csv':\n iconColors.background = globalColors.chromatic.emerald[50];\n iconColors.border = globalColors.chromatic.emerald[600];\n iconColors.cover = globalColors.chromatic.emerald[700];\n iconColors.fold = globalColors.chromatic.emerald[800];\n break;\n case 'jpg':\n case 'jpeg':\n case 'png':\n case 'gif':\n iconColors.background = globalColors.chromatic.sapphire[50];\n iconColors.border = globalColors.chromatic.sapphire[600];\n iconColors.cover = globalColors.chromatic.sapphire[700];\n iconColors.fold = globalColors.chromatic.sapphire[800];\n break;\n default:\n iconColors.background = globalColors.chromatic.cloud[50];\n iconColors.border = globalColors.chromatic.cloud[600];\n iconColors.cover = globalColors.chromatic.cloud[700];\n iconColors.fold = globalColors.chromatic.cloud[800];\n }\n\n return (\n <BaseBox display=\"flex\" position=\"relative\" justifyContent=\"center\">\n <Svg width=\"38\" height=\"39\" viewBox=\"0 0 38 39\" fill=\"none\" {...styledProps}>\n <Path d=\"M5.5 31.5801H3L5.5 34.0801V31.5801Z\" fill={iconColors.fold} />\n <Path d=\"M32.7998 31.5801H35.2998L32.7998 34.0801V31.5801Z\" fill={iconColors.fold} />\n <Path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M6.35552 2.71162C6.91384 2.09227 7.66518 1.75 8.44238 1.75H25.9153L32.832 9.42294V33.5872C32.832 34.4743 32.514 35.3206 31.955 35.9408C31.3966 36.5601 30.6453 36.9024 29.8681 36.9024H8.44238C7.66518 36.9024 6.91384 36.5601 6.35552 35.9408C5.79644 35.3206 5.47852 34.4743 5.47852 33.5872V5.06524C5.47852 4.17809 5.79644 3.33184 6.35552 2.71162Z\"\n fill={iconColors.background}\n stroke={iconColors.border}\n />\n\n <Path d=\"M3 19.3262H35.31V31.5817H3V19.3262Z\" fill={iconColors.cover} strokeWidth=\"0.5\" />\n </Svg>\n <Text position=\"absolute\" top=\"46%\" color=\"interactive.text.staticWhite.normal\" size=\"xsmall\">\n {`.${fileType}`}\n </Text>\n </BaseBox>\n );\n};\n\nexport { FileUploadItemIcon };\n"],"names":["FileUploadItemIcon","_ref","fileName","uploadStatus","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","_jsx","Svg","_objectSpread","width","height","viewBox","fill","children","Path","fillRule","clipRule","d","getIn","colors","fileType","split","pop","iconColors","background","globalColors","chromatic","cloud","border","cover","fold","crimson","azure","emerald","sapphire","_jsxs","BaseBox","display","position","justifyContent","stroke","strokeWidth","Text","top","color","size","concat"],"mappings":"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"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
import { fileUploadMotionTokens, fileUploadItemBackgroundColors } from './fileUploadTokens.js';
|
|
4
|
+
import getIn from '../../utils/lodashButBetter/get.js';
|
|
5
|
+
import '../Box/BaseBox/index.js';
|
|
6
|
+
import '../../utils/makeMotionTime/index.web.js';
|
|
7
|
+
import '../../utils/index.js';
|
|
8
|
+
import '../../tokens/global/index.js';
|
|
9
|
+
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
|
|
10
|
+
import { castWebType } from '../../utils/platform/castUtils.js';
|
|
11
|
+
import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
|
|
12
|
+
import { makeSize } from '../../utils/makeSize/makeSize.js';
|
|
13
|
+
import { size } from '../../tokens/global/size.js';
|
|
14
|
+
|
|
15
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
16
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
17
|
+
var StyledFileUploadItemWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
|
|
18
|
+
displayName: "StyledFileUploadItemWrapper",
|
|
19
|
+
componentId: "sc-1rxjypg-0"
|
|
20
|
+
})(function (_ref) {
|
|
21
|
+
var theme = _ref.theme,
|
|
22
|
+
status = _ref.status;
|
|
23
|
+
var easing = getIn(theme.motion, fileUploadMotionTokens.easing);
|
|
24
|
+
var duration = castWebType(makeMotionTime(getIn(theme.motion, fileUploadMotionTokens.duration)));
|
|
25
|
+
return _objectSpread({
|
|
26
|
+
position: 'relative',
|
|
27
|
+
overflow: 'hidden',
|
|
28
|
+
display: 'flex',
|
|
29
|
+
justifyContent: 'space-between',
|
|
30
|
+
borderStyle: 'solid',
|
|
31
|
+
height: makeSize(size[56]),
|
|
32
|
+
width: '100%',
|
|
33
|
+
backgroundColor: getIn(theme.colors, fileUploadItemBackgroundColors[status]["default"]),
|
|
34
|
+
transitionProperty: 'background-color',
|
|
35
|
+
transitionTimingFunction: easing,
|
|
36
|
+
transitionDuration: duration,
|
|
37
|
+
borderColor: theme.colors.interactive.border.neutral.faded,
|
|
38
|
+
wordBreak: 'break-all'
|
|
39
|
+
}, status !== 'uploading' && {
|
|
40
|
+
'&:hover': {
|
|
41
|
+
backgroundColor: getIn(theme.colors, fileUploadItemBackgroundColors[status].hover)
|
|
42
|
+
}
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
export { StyledFileUploadItemWrapper };
|
|
47
|
+
//# sourceMappingURL=StyledFileUploadItemWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StyledFileUploadItemWrapper.js","sources":["../../../../../../src/components/FileUpload/StyledFileUploadItemWrapper.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledFileUploadItemWrapperProps } from './types';\nimport { fileUploadItemBackgroundColors, fileUploadMotionTokens } from './fileUploadTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { castWebType, makeSize } from '~utils';\nimport { size } from '~tokens/global';\n\nconst StyledFileUploadItemWrapper = styled(BaseBox)<StyledFileUploadItemWrapperProps>(\n ({ theme, status }) => {\n const easing = getIn(theme.motion, fileUploadMotionTokens.easing);\n const duration = castWebType(\n makeMotionTime(getIn(theme.motion, fileUploadMotionTokens.duration)),\n );\n\n return {\n position: 'relative',\n overflow: 'hidden',\n display: 'flex',\n justifyContent: 'space-between',\n borderStyle: 'solid',\n height: makeSize(size[56]),\n width: '100%',\n backgroundColor: getIn(theme.colors, fileUploadItemBackgroundColors[status].default),\n transitionProperty: 'background-color',\n transitionTimingFunction: easing,\n transitionDuration: duration,\n borderColor: theme.colors.interactive.border.neutral.faded,\n wordBreak: 'break-all',\n\n ...(status !== 'uploading' && {\n '&:hover': {\n backgroundColor: getIn(theme.colors, fileUploadItemBackgroundColors[status].hover),\n },\n }),\n };\n },\n);\n\nexport { StyledFileUploadItemWrapper };\n"],"names":["StyledFileUploadItemWrapper","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","status","easing","getIn","motion","fileUploadMotionTokens","duration","castWebType","makeMotionTime","_objectSpread","position","overflow","display","justifyContent","borderStyle","height","makeSize","size","width","backgroundColor","colors","fileUploadItemBackgroundColors","transitionProperty","transitionTimingFunction","transitionDuration","borderColor","interactive","border","neutral","faded","wordBreak","hover"],"mappings":";;;;;;;;;;;;;;;;AASA,IAAMA,2BAA2B,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,6BAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CACjD,CAAA,CAAA,UAAAC,IAAA,EAAuB;AAAA,EAAA,IAApBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,MAAM,GAAAF,IAAA,CAANE,MAAM,CAAA;EACd,IAAMC,MAAM,GAAGC,KAAK,CAACH,KAAK,CAACI,MAAM,EAAEC,sBAAsB,CAACH,MAAM,CAAC,CAAA;AACjE,EAAA,IAAMI,QAAQ,GAAGC,WAAW,CAC1BC,cAAc,CAACL,KAAK,CAACH,KAAK,CAACI,MAAM,EAAEC,sBAAsB,CAACC,QAAQ,CAAC,CACrE,CAAC,CAAA;AAED,EAAA,OAAAG,aAAA,CAAA;AACEC,IAAAA,QAAQ,EAAE,UAAU;AACpBC,IAAAA,QAAQ,EAAE,QAAQ;AAClBC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,cAAc,EAAE,eAAe;AAC/BC,IAAAA,WAAW,EAAE,OAAO;AACpBC,IAAAA,MAAM,EAAEC,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1BC,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,eAAe,EAAEhB,KAAK,CAACH,KAAK,CAACoB,MAAM,EAAEC,8BAA8B,CAACpB,MAAM,CAAC,CAAA,SAAA,CAAQ,CAAC;AACpFqB,IAAAA,kBAAkB,EAAE,kBAAkB;AACtCC,IAAAA,wBAAwB,EAAErB,MAAM;AAChCsB,IAAAA,kBAAkB,EAAElB,QAAQ;IAC5BmB,WAAW,EAAEzB,KAAK,CAACoB,MAAM,CAACM,WAAW,CAACC,MAAM,CAACC,OAAO,CAACC,KAAK;AAC1DC,IAAAA,SAAS,EAAE,WAAA;GAEP7B,EAAAA,MAAM,KAAK,WAAW,IAAI;AAC5B,IAAA,SAAS,EAAE;AACTkB,MAAAA,eAAe,EAAEhB,KAAK,CAACH,KAAK,CAACoB,MAAM,EAAEC,8BAA8B,CAACpB,MAAM,CAAC,CAAC8B,KAAK,CAAA;AACnF,KAAA;GACD,CAAA,CAAA;AAEL,CAAC;;;;"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
import { fileUploadMotionTokens, fileUploadColorTokens } from './fileUploadTokens.js';
|
|
4
|
+
import getIn from '../../utils/lodashButBetter/get.js';
|
|
5
|
+
import '../Box/BaseBox/index.js';
|
|
6
|
+
import '../../utils/makeMotionTime/index.web.js';
|
|
7
|
+
import '../../utils/index.js';
|
|
8
|
+
import '../../tokens/global/index.js';
|
|
9
|
+
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
|
|
10
|
+
import { castWebType } from '../../utils/platform/castUtils.js';
|
|
11
|
+
import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
|
|
12
|
+
import { makeSize } from '../../utils/makeSize/makeSize.js';
|
|
13
|
+
import { size } from '../../tokens/global/size.js';
|
|
14
|
+
|
|
15
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
16
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
17
|
+
var StyledFileUploadWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
|
|
18
|
+
displayName: "StyledFileUploadWrapper",
|
|
19
|
+
componentId: "sc-1wln1sx-0"
|
|
20
|
+
})(function (_ref) {
|
|
21
|
+
var theme = _ref.theme,
|
|
22
|
+
isDisabled = _ref.isDisabled,
|
|
23
|
+
isActive = _ref.isActive;
|
|
24
|
+
var easing = getIn(theme.motion, fileUploadMotionTokens.easing);
|
|
25
|
+
var duration = castWebType(makeMotionTime(getIn(theme.motion, fileUploadMotionTokens.duration)));
|
|
26
|
+
return _objectSpread(_objectSpread({
|
|
27
|
+
display: 'flex',
|
|
28
|
+
borderStyle: 'dashed',
|
|
29
|
+
height: makeSize(size[56]),
|
|
30
|
+
width: '100%',
|
|
31
|
+
transitionProperty: 'background-color',
|
|
32
|
+
transitionTimingFunction: easing,
|
|
33
|
+
transitionDuration: duration,
|
|
34
|
+
borderColor: getIn(theme.colors, fileUploadColorTokens.border[isDisabled ? 'disabled' : 'default'])
|
|
35
|
+
}, isActive && {
|
|
36
|
+
backgroundColor: getIn(theme.colors, fileUploadColorTokens.background.active)
|
|
37
|
+
}), !isDisabled && !isActive && {
|
|
38
|
+
'&:hover': {
|
|
39
|
+
backgroundColor: getIn(theme.colors, fileUploadColorTokens.background.hover)
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
export { StyledFileUploadWrapper };
|
|
45
|
+
//# sourceMappingURL=StyledFileUploadWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StyledFileUploadWrapper.js","sources":["../../../../../../src/components/FileUpload/StyledFileUploadWrapper.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledFileUploadWrapperProps } from './types';\nimport { fileUploadMotionTokens, fileUploadColorTokens } from './fileUploadTokens';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport { castWebType, makeSize } from '~utils';\nimport { size } from '~tokens/global';\n\nconst StyledFileUploadWrapper = styled(BaseBox)<StyledFileUploadWrapperProps>(\n ({ theme, isDisabled, isActive }) => {\n const easing = getIn(theme.motion, fileUploadMotionTokens.easing);\n const duration = castWebType(\n makeMotionTime(getIn(theme.motion, fileUploadMotionTokens.duration)),\n );\n\n return {\n display: 'flex',\n borderStyle: 'dashed',\n height: makeSize(size[56]),\n width: '100%',\n transitionProperty: 'background-color',\n transitionTimingFunction: easing,\n transitionDuration: duration,\n borderColor: getIn(\n theme.colors,\n fileUploadColorTokens.border[isDisabled ? 'disabled' : 'default'],\n ),\n\n ...(isActive && {\n backgroundColor: getIn(theme.colors, fileUploadColorTokens.background.active),\n }),\n\n ...(!isDisabled &&\n !isActive && {\n '&:hover': {\n backgroundColor: getIn(theme.colors, fileUploadColorTokens.background.hover),\n },\n }),\n };\n },\n);\n\nexport { StyledFileUploadWrapper };\n"],"names":["StyledFileUploadWrapper","styled","BaseBox","withConfig","displayName","componentId","_ref","theme","isDisabled","isActive","easing","getIn","motion","fileUploadMotionTokens","duration","castWebType","makeMotionTime","_objectSpread","display","borderStyle","height","makeSize","size","width","transitionProperty","transitionTimingFunction","transitionDuration","borderColor","colors","fileUploadColorTokens","border","backgroundColor","background","active","hover"],"mappings":";;;;;;;;;;;;;;;;AASA,IAAMA,uBAAuB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,yBAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAC7C,CAAA,CAAA,UAAAC,IAAA,EAAqC;AAAA,EAAA,IAAlCC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAEC,UAAU,GAAAF,IAAA,CAAVE,UAAU;IAAEC,QAAQ,GAAAH,IAAA,CAARG,QAAQ,CAAA;EAC5B,IAAMC,MAAM,GAAGC,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEC,sBAAsB,CAACH,MAAM,CAAC,CAAA;AACjE,EAAA,IAAMI,QAAQ,GAAGC,WAAW,CAC1BC,cAAc,CAACL,KAAK,CAACJ,KAAK,CAACK,MAAM,EAAEC,sBAAsB,CAACC,QAAQ,CAAC,CACrE,CAAC,CAAA;EAED,OAAAG,aAAA,CAAAA,aAAA,CAAA;AACEC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,WAAW,EAAE,QAAQ;AACrBC,IAAAA,MAAM,EAAEC,QAAQ,CAACC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1BC,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,kBAAkB,EAAE,kBAAkB;AACtCC,IAAAA,wBAAwB,EAAEf,MAAM;AAChCgB,IAAAA,kBAAkB,EAAEZ,QAAQ;AAC5Ba,IAAAA,WAAW,EAAEhB,KAAK,CAChBJ,KAAK,CAACqB,MAAM,EACZC,qBAAqB,CAACC,MAAM,CAACtB,UAAU,GAAG,UAAU,GAAG,SAAS,CAClE,CAAA;AAAC,GAAA,EAEGC,QAAQ,IAAI;IACdsB,eAAe,EAAEpB,KAAK,CAACJ,KAAK,CAACqB,MAAM,EAAEC,qBAAqB,CAACG,UAAU,CAACC,MAAM,CAAA;AAC9E,GAAC,GAEG,CAACzB,UAAU,IACb,CAACC,QAAQ,IAAI;AACX,IAAA,SAAS,EAAE;MACTsB,eAAe,EAAEpB,KAAK,CAACJ,KAAK,CAACqB,MAAM,EAAEC,qBAAqB,CAACG,UAAU,CAACE,KAAK,CAAA;AAC7E,KAAA;GACD,CAAA,CAAA;AAEP,CAAC;;;;"}
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
var getFileUploadInputHoverTokens = function getFileUploadInputHoverTokens() {
|
|
2
|
+
return {
|
|
3
|
+
"default": {
|
|
4
|
+
background: {
|
|
5
|
+
checked: 'colors.transparent',
|
|
6
|
+
unchecked: 'colors.transparent'
|
|
7
|
+
},
|
|
8
|
+
border: {
|
|
9
|
+
checked: 'colors.interactive.border.gray.default',
|
|
10
|
+
unchecked: 'colors.interactive.border.gray.default'
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
var fileUploadMotionTokens = {
|
|
16
|
+
duration: 'duration.2xquick',
|
|
17
|
+
easing: 'easing.standard.effective'
|
|
18
|
+
};
|
|
19
|
+
var fileUploadColorTokens = {
|
|
20
|
+
text: {
|
|
21
|
+
"default": 'surface.text.gray.subtle',
|
|
22
|
+
disabled: 'surface.text.gray.disabled'
|
|
23
|
+
},
|
|
24
|
+
border: {
|
|
25
|
+
"default": 'interactive.border.gray.default',
|
|
26
|
+
disabled: 'interactive.border.gray.disabled'
|
|
27
|
+
},
|
|
28
|
+
background: {
|
|
29
|
+
hover: 'interactive.background.gray.highlighted',
|
|
30
|
+
active: 'interactive.background.primary.faded'
|
|
31
|
+
},
|
|
32
|
+
icon: {
|
|
33
|
+
"default": 'interactive.icon.primary.subtle',
|
|
34
|
+
disabled: 'interactive.icon.primary.disabled'
|
|
35
|
+
},
|
|
36
|
+
link: {
|
|
37
|
+
"default": 'interactive.text.primary.subtle',
|
|
38
|
+
disabled: 'interactive.text.primary.disabled'
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
var fileUploadItemBackgroundColors = {
|
|
42
|
+
success: {
|
|
43
|
+
"default": 'interactive.background.gray.faded',
|
|
44
|
+
hover: 'interactive.background.gray.fadedHighlighted'
|
|
45
|
+
},
|
|
46
|
+
error: {
|
|
47
|
+
"default": 'feedback.background.negative.subtle',
|
|
48
|
+
hover: 'interactive.background.negative.fadedHighlighted'
|
|
49
|
+
},
|
|
50
|
+
uploading: {
|
|
51
|
+
"default": 'surface.background.gray.intense',
|
|
52
|
+
hover: 'surface.background.gray.intense'
|
|
53
|
+
}
|
|
54
|
+
};
|
|
55
|
+
var fileUploadLinkBorderTokens = {
|
|
56
|
+
color: {
|
|
57
|
+
"default": 'surface.border.primary.normal',
|
|
58
|
+
disabled: 'surface.border.primary.muted'
|
|
59
|
+
},
|
|
60
|
+
width: {
|
|
61
|
+
"default": 'thin'
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export { fileUploadColorTokens, fileUploadItemBackgroundColors, fileUploadLinkBorderTokens, fileUploadMotionTokens, getFileUploadInputHoverTokens };
|
|
66
|
+
//# sourceMappingURL=fileUploadTokens.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fileUploadTokens.js","sources":["../../../../../../src/components/FileUpload/fileUploadTokens.ts"],"sourcesContent":["import type { BladeFile, FileUploadItemBackgroundColors } from './types';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport type { DurationString, EasingString } from '~tokens/global';\n\nconst getFileUploadInputHoverTokens = (): SelectorInputHoverTokens => {\n return {\n default: {\n background: {\n checked: 'colors.transparent',\n unchecked: 'colors.transparent',\n },\n border: {\n checked: 'colors.interactive.border.gray.default',\n unchecked: 'colors.interactive.border.gray.default',\n },\n },\n };\n};\n\nconst fileUploadMotionTokens: Record<'duration' | 'easing', DurationString | EasingString> = {\n duration: 'duration.2xquick',\n easing: 'easing.standard.effective',\n};\n\nconst fileUploadColorTokens = {\n text: {\n default: 'surface.text.gray.subtle',\n disabled: 'surface.text.gray.disabled',\n },\n border: {\n default: 'interactive.border.gray.default',\n disabled: 'interactive.border.gray.disabled',\n },\n background: {\n hover: 'interactive.background.gray.highlighted',\n active: 'interactive.background.primary.faded',\n },\n icon: {\n default: 'interactive.icon.primary.subtle',\n disabled: 'interactive.icon.primary.disabled',\n },\n link: {\n default: 'interactive.text.primary.subtle',\n disabled: 'interactive.text.primary.disabled',\n },\n} as const;\n\nconst fileUploadItemBackgroundColors: Record<\n NonNullable<BladeFile['status']>,\n Record<'default' | 'hover', FileUploadItemBackgroundColors>\n> = {\n success: {\n default: 'interactive.background.gray.faded',\n hover: 'interactive.background.gray.fadedHighlighted',\n },\n error: {\n default: 'feedback.background.negative.subtle',\n hover: 'interactive.background.negative.fadedHighlighted',\n },\n uploading: {\n default: 'surface.background.gray.intense',\n hover: 'surface.background.gray.intense',\n },\n};\n\nconst fileUploadLinkBorderTokens = {\n color: {\n default: 'surface.border.primary.normal',\n disabled: 'surface.border.primary.muted',\n },\n width: {\n default: 'thin',\n },\n} as const;\n\nexport {\n getFileUploadInputHoverTokens,\n fileUploadMotionTokens,\n fileUploadItemBackgroundColors,\n fileUploadColorTokens,\n fileUploadLinkBorderTokens,\n};\n"],"names":["getFileUploadInputHoverTokens","background","checked","unchecked","border","fileUploadMotionTokens","duration","easing","fileUploadColorTokens","text","disabled","hover","active","icon","link","fileUploadItemBackgroundColors","success","error","uploading","fileUploadLinkBorderTokens","color","width"],"mappings":"AAIA,IAAMA,6BAA6B,GAAG,SAAhCA,6BAA6BA,GAAmC;EACpE,OAAO;IACL,SAAS,EAAA;AACPC,MAAAA,UAAU,EAAE;AACVC,QAAAA,OAAO,EAAE,oBAAoB;AAC7BC,QAAAA,SAAS,EAAE,oBAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,wCAAwC;AACjDC,QAAAA,SAAS,EAAE,wCAAA;AACb,OAAA;AACF,KAAA;GACD,CAAA;AACH,EAAC;AAED,IAAME,sBAAoF,GAAG;AAC3FC,EAAAA,QAAQ,EAAE,kBAAkB;AAC5BC,EAAAA,MAAM,EAAE,2BAAA;AACV,EAAC;AAED,IAAMC,qBAAqB,GAAG;AAC5BC,EAAAA,IAAI,EAAE;AACJ,IAAA,SAAA,EAAS,0BAA0B;AACnCC,IAAAA,QAAQ,EAAE,4BAAA;GACX;AACDN,EAAAA,MAAM,EAAE;AACN,IAAA,SAAA,EAAS,iCAAiC;AAC1CM,IAAAA,QAAQ,EAAE,kCAAA;GACX;AACDT,EAAAA,UAAU,EAAE;AACVU,IAAAA,KAAK,EAAE,yCAAyC;AAChDC,IAAAA,MAAM,EAAE,sCAAA;GACT;AACDC,EAAAA,IAAI,EAAE;AACJ,IAAA,SAAA,EAAS,iCAAiC;AAC1CH,IAAAA,QAAQ,EAAE,mCAAA;GACX;AACDI,EAAAA,IAAI,EAAE;AACJ,IAAA,SAAA,EAAS,iCAAiC;AAC1CJ,IAAAA,QAAQ,EAAE,mCAAA;AACZ,GAAA;AACF,EAAU;AAEV,IAAMK,8BAGL,GAAG;AACFC,EAAAA,OAAO,EAAE;AACP,IAAA,SAAA,EAAS,mCAAmC;AAC5CL,IAAAA,KAAK,EAAE,8CAAA;GACR;AACDM,EAAAA,KAAK,EAAE;AACL,IAAA,SAAA,EAAS,qCAAqC;AAC9CN,IAAAA,KAAK,EAAE,kDAAA;GACR;AACDO,EAAAA,SAAS,EAAE;AACT,IAAA,SAAA,EAAS,iCAAiC;AAC1CP,IAAAA,KAAK,EAAE,iCAAA;AACT,GAAA;AACF,EAAC;AAED,IAAMQ,0BAA0B,GAAG;AACjCC,EAAAA,KAAK,EAAE;AACL,IAAA,SAAA,EAAS,+BAA+B;AACxCV,IAAAA,QAAQ,EAAE,8BAAA;GACX;AACDW,EAAAA,KAAK,EAAE;IACL,SAAS,EAAA,MAAA;AACX,GAAA;AACF;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Check if the provided file type should be accepted by the input with accept attribute.
|
|
3
|
+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-accept
|
|
4
|
+
*
|
|
5
|
+
* Inspired by https://github.com/enyo/dropzone
|
|
6
|
+
*/
|
|
7
|
+
var isFileAccepted = function isFileAccepted(file, acceptedFiles) {
|
|
8
|
+
if (file && acceptedFiles) {
|
|
9
|
+
var acceptedFilesArray = acceptedFiles.split(',');
|
|
10
|
+
var fileName = file.name || '';
|
|
11
|
+
var mimeType = (file.type || '').toLowerCase();
|
|
12
|
+
var baseMimeType = mimeType.replace(/\/.*$/, '');
|
|
13
|
+
return acceptedFilesArray.some(function (type) {
|
|
14
|
+
var validType = type.trim().toLowerCase();
|
|
15
|
+
if (validType.startsWith('.')) {
|
|
16
|
+
return fileName.toLowerCase().endsWith(validType);
|
|
17
|
+
} else if (validType.endsWith('/*')) {
|
|
18
|
+
// This is something like a image/* mime type
|
|
19
|
+
return baseMimeType === validType.replace(/\/.*$/, '');
|
|
20
|
+
}
|
|
21
|
+
return mimeType === validType;
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
return true;
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export { isFileAccepted };
|
|
28
|
+
//# sourceMappingURL=isFileAccepted.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"isFileAccepted.js","sources":["../../../../../../src/components/FileUpload/isFileAccepted.tsx"],"sourcesContent":["import type { BladeFile } from './types';\n\n/**\n * Check if the provided file type should be accepted by the input with accept attribute.\n * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-accept\n *\n * Inspired by https://github.com/enyo/dropzone\n */\nconst isFileAccepted = (file: BladeFile, acceptedFiles: string): boolean => {\n if (file && acceptedFiles) {\n const acceptedFilesArray = acceptedFiles.split(',');\n const fileName = file.name || '';\n const mimeType = (file.type || '').toLowerCase();\n const baseMimeType = mimeType.replace(/\\/.*$/, '');\n\n return acceptedFilesArray.some((type) => {\n const validType = type.trim().toLowerCase();\n if (validType.startsWith('.')) {\n return fileName.toLowerCase().endsWith(validType);\n } else if (validType.endsWith('/*')) {\n // This is something like a image/* mime type\n return baseMimeType === validType.replace(/\\/.*$/, '');\n }\n return mimeType === validType;\n });\n }\n return true;\n};\n\nexport { isFileAccepted };\n"],"names":["isFileAccepted","file","acceptedFiles","acceptedFilesArray","split","fileName","name","mimeType","type","toLowerCase","baseMimeType","replace","some","validType","trim","startsWith","endsWith"],"mappings":"AAEA;AACA;AACA;AACA;AACA;AACA;AACMA,IAAAA,cAAc,GAAG,SAAjBA,cAAcA,CAAIC,IAAe,EAAEC,aAAqB,EAAc;EAC1E,IAAID,IAAI,IAAIC,aAAa,EAAE;AACzB,IAAA,IAAMC,kBAAkB,GAAGD,aAAa,CAACE,KAAK,CAAC,GAAG,CAAC,CAAA;AACnD,IAAA,IAAMC,QAAQ,GAAGJ,IAAI,CAACK,IAAI,IAAI,EAAE,CAAA;IAChC,IAAMC,QAAQ,GAAG,CAACN,IAAI,CAACO,IAAI,IAAI,EAAE,EAAEC,WAAW,EAAE,CAAA;IAChD,IAAMC,YAAY,GAAGH,QAAQ,CAACI,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;AAElD,IAAA,OAAOR,kBAAkB,CAACS,IAAI,CAAC,UAACJ,IAAI,EAAK;MACvC,IAAMK,SAAS,GAAGL,IAAI,CAACM,IAAI,EAAE,CAACL,WAAW,EAAE,CAAA;AAC3C,MAAA,IAAII,SAAS,CAACE,UAAU,CAAC,GAAG,CAAC,EAAE;QAC7B,OAAOV,QAAQ,CAACI,WAAW,EAAE,CAACO,QAAQ,CAACH,SAAS,CAAC,CAAA;OAClD,MAAM,IAAIA,SAAS,CAACG,QAAQ,CAAC,IAAI,CAAC,EAAE;AACnC;QACA,OAAON,YAAY,KAAKG,SAAS,CAACF,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;AACxD,OAAA;MACA,OAAOJ,QAAQ,KAAKM,SAAS,CAAA;AAC/B,KAAC,CAAC,CAAA;AACJ,GAAA;AACA,EAAA,OAAO,IAAI,CAAA;AACb;;;;"}
|
|
@@ -18,6 +18,7 @@ import './Counter/index.js';
|
|
|
18
18
|
import './Divider/index.js';
|
|
19
19
|
import './Drawer/index.js';
|
|
20
20
|
import './Dropdown/index.js';
|
|
21
|
+
import './FileUpload/index.js';
|
|
21
22
|
import './Icons/index.js';
|
|
22
23
|
import './Indicator/index.js';
|
|
23
24
|
import './Input/DropdownInputTriggers/index.js';
|
|
@@ -86,6 +87,7 @@ export { DropdownOverlay } from './Dropdown/DropdownOverlay.web.js';
|
|
|
86
87
|
export { DropdownButton } from './Dropdown/DropdownButton.js';
|
|
87
88
|
export { DropdownLink } from './Dropdown/DropdownLink.js';
|
|
88
89
|
export { DropdownFooter, DropdownHeader } from './Dropdown/DropdownHeaderFooter.js';
|
|
90
|
+
export { FileUpload } from './FileUpload/FileUpload.web.js';
|
|
89
91
|
export { default as ArrowDownIcon } from './Icons/ArrowDownIcon/ArrowDownIcon.js';
|
|
90
92
|
export { default as ArrowLeftIcon } from './Icons/ArrowLeftIcon/ArrowLeftIcon.js';
|
|
91
93
|
export { default as ArrowRightIcon } from './Icons/ArrowRightIcon/ArrowRightIcon.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
// Fallbacks here are defined in `packages/blade/fonts.css`
|
|
1
2
|
var fontFamily = {
|
|
2
|
-
text: '"Inter",
|
|
3
|
-
heading: '"TASA Orbiter",
|
|
3
|
+
text: '"Inter", "Inter Fallback Arial", Arial',
|
|
4
|
+
heading: '"TASA Orbiter", "TASA Orbiter Fallback Arial", Arial',
|
|
4
5
|
code: '"Menlo", San Francisco Mono, Courier New, Roboto Mono, monospace'
|
|
5
6
|
};
|
|
6
7
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fontFamily.web.js","sources":["../../../../../../../src/tokens/global/fontFamily/fontFamily.web.ts"],"sourcesContent":["import type { FontFamily } from './types';\n\nexport const fontFamily: FontFamily = {\n text
|
|
1
|
+
{"version":3,"file":"fontFamily.web.js","sources":["../../../../../../../src/tokens/global/fontFamily/fontFamily.web.ts"],"sourcesContent":["import type { FontFamily } from './types';\n\n// Fallbacks here are defined in `packages/blade/fonts.css`\nexport const fontFamily: FontFamily = {\n text: '\"Inter\", \"Inter Fallback Arial\", Arial',\n heading: '\"TASA Orbiter\", \"TASA Orbiter Fallback Arial\", Arial',\n code: '\"Menlo\", San Francisco Mono, Courier New, Roboto Mono, monospace',\n};\n"],"names":["fontFamily","text","heading","code"],"mappings":"AAEA;AACO,IAAMA,UAAsB,GAAG;AACpCC,EAAAA,IAAI,EAAE,wCAAwC;AAC9CC,EAAAA,OAAO,EAAE,sDAAsD;AAC/DC,EAAAA,IAAI,EAAE,kEAAA;AACR;;;;"}
|