@procore/core-react 11.20.0-vite.1 → 11.21.0

package/dist/Thumbnail/Thumbnail.hooks.js

@@ -0,0 +1,65 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useCheckbox } from '@react-aria/checkbox';
+import { useFocusRing } from '@react-aria/focus';
+import { useRef } from 'react';
+import { useToggleState } from 'react-stately';
+import { getIsFilePreviewableAsImage } from './Thumbnail.utils';
+var defaultSize = 'lg';
+export var useThumbnail = function (_a) {
+    var selected = _a.selected, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.clickable, clickable = _c === void 0 ? true : _c, _d = _a.focused, focused = _d === void 0 ? false : _d, _e = _a.hasCaptionPlaceholder, hasCaptionPlaceholder = _e === void 0 ? false : _e, src = _a.src, filename_ = _a.filename, _f = _a.size, size = _f === void 0 ? defaultSize : _f, _g = _a.label, label = _g === void 0 ? '' : _g, 
+    // @ts-ignore  Checkbox only
+    name = _a.name, _h = _a.caption, caption = _h === void 0 ? '' : _h, 
+    // @ts-ignore  Checkbox only
+    onChange = _a.onChange, 
+    // @ts-ignore  Checkbox only
+    value = _a.value, props = __rest(_a, ["selected", "disabled", "clickable", "focused", "hasCaptionPlaceholder", "src", "filename", "size", "label", "name", "caption", "onChange", "value"]);
+    var a11yProps = props.role === 'figure'
+        ? { as: 'figure' }
+        : { as: 'div' };
+    var inputRef = useRef(null);
+    var toggleState = useToggleState({
+        defaultSelected: selected,
+        onChange: onChange,
+    });
+    var layout = size === 'sm' ? 'row' : 'column';
+    var isFile = src instanceof File;
+    var isImageURL = typeof src === 'string';
+    var canPreviewFileAsImage = getIsFilePreviewableAsImage(src);
+    var isFileOrNonPreviewableImage = isFile && !canPreviewFileAsImage;
+    var shouldUsePlaceholder = isFileOrNonPreviewableImage || !src;
+    var filename = filename_ !== null && filename_ !== void 0 ? filename_ : (isFileOrNonPreviewableImage ? src.name : caption);
+    var ariaLabel = label && caption ? "".concat(label, " ").concat(caption) : caption || label;
+    var inputProps = useCheckbox({ isSelected: selected, 'aria-label': ariaLabel, name: name, onChange: onChange, value: value }, toggleState, inputRef).inputProps;
+    var _j = useFocusRing(), isFocusVisible = _j.isFocusVisible, focusProps = _j.focusProps;
+    return __assign(__assign(__assign({ alt: props.alt || props.alt === '' ? props.alt : caption || label }, props), a11yProps), { label: label, caption: caption, selected: toggleState.isSelected, disabled: disabled, clickable: clickable, focused: focused, isImageURL: isImageURL, hasCaptionPlaceholder: hasCaptionPlaceholder, shouldUsePlaceholder: shouldUsePlaceholder, src: src, filename: filename, size: size, layout: layout, inputRef: inputRef, inputProps: inputProps, 
+        /**
+         * Appeared 23-1-18 https://github.com/procore/core/pull/12250
+         * Possible issue with types from React Aria during dependency update
+         * > The inferred type of 'useThumbnail' cannot be named without a
+         * > reference to '@react-aria/focus/node_modules/@react-types/shared'.
+         * > This is likely not portable. A type annotation is necessary.
+         */
+        focusProps: focusProps, isFocusVisible: isFocusVisible, toggleState: toggleState });
+};
+//# sourceMappingURL=Thumbnail.hooks.js.map

package/dist/Thumbnail/Thumbnail.hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumbnail.hooks.js","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.hooks.tsx"],"names":[],"mappings":"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"}

package/dist/Thumbnail/Thumbnail.js

@@ -0,0 +1,223 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { mergeProps } from '@react-aria/utils';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import React from 'react';
+import { useI18nContext } from '../_hooks/I18n';
+import { addSubcomponents } from '../_utils/addSubcomponents';
+import { mergeRefs } from '../_utils/mergeRefs';
+import { useThumbnail } from './Thumbnail.hooks';
+import { StyledFileIcon, StyledImageThumbnail, StyledImageThumbnailImage, StyledImageThumbnailOverlay, StyledLabel, StyledLabelText, StyledPlaceholderThumbnail, StyledThumbnailFigCaption, StyledThumbnailWrapper, StyledTickIcon, } from './Thumbnail.styles';
+import { getThumbnailVariantForFilename } from './Thumbnail.utils';
+import { ThumbnailCaption } from './ThumbnailCaption';
+import { ThumbnailPreview } from './ThumbnailPreview';
+var defaultSize = 'lg';
+function TickIcon(_a) {
+    var _b = _a.size, size = _b === void 0 ? defaultSize : _b, selected = _a.selected;
+    var i18n = useI18nContext();
+    return (React.createElement(StyledTickIcon, { "aria-hidden": selected ? false : true, "aria-label": selected ? i18n.t('core.thumbnail.checked') : undefined, 
+        // in IE11, all svg element are focusable by default
+        focusable: false, selected: selected, size: size, width: "26", height: "26", viewBox: "0 0 26 26", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "M1 13C1 6.37258 6.37258 1 13 1C19.6274 1 25 6.37258 25 13C25 19.6274 19.6274 25 13 25C6.37258 25 1 19.6274 1 13Z", fill: "white" }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.167 17.5L7 13.459L8.6155 12.0535L11.167 14.5285L17.3845 8.5L19 9.9055L11.167 17.5ZM13 1C6.3715 1 1 6.373 1 13C1 19.627 6.3715 25 13 25C19.627 25 25 19.627 25 13C25 6.373 19.627 1 13 1Z", fill: "hsl(218,75%,50%)" }),
+        React.createElement("path", { d: "M13 24C6.92487 24 2 19.0751 2 13H0C0 20.1797 5.8203 26 13 26V24ZM24 13C24 19.0751 19.0751 24 13 24V26C20.1797 26 26 20.1797 26 13H24ZM13 2C19.0751 2 24 6.92487 24 13H26C26 5.8203 20.1797 0 13 0V2ZM13 0C5.8203 0 0 5.8203 0 13H2C2 6.92487 6.92487 2 13 2V0Z", fill: "white" })));
+}
+function FigCaption(_a) {
+    var label = _a.label, disabled = _a.disabled;
+    return label ? (React.createElement(StyledThumbnailFigCaption, { "$color": disabled ? 'gray70' : 'gray15' }, label)) : null;
+}
+function Label(_a) {
+    var label = _a.label, disabled = _a.disabled;
+    return label ? (React.createElement(StyledLabel, null,
+        React.createElement(StyledLabelText, { intent: "small", weight: "bold" }, label))) : null;
+}
+var BasePlaceholder = React.forwardRef(function BasePlaceholder(props, ref) {
+    var _a, _b;
+    var thumbnail = useThumbnail(props);
+    return (React.createElement(StyledThumbnailWrapper, __assign({ ref: ref, layout: thumbnail.layout, size: thumbnail.size }, props),
+        React.createElement(StyledPlaceholderThumbnail, { focused: thumbnail.focused, disabled: thumbnail.disabled, selected: thumbnail.selected, clickable: thumbnail.clickable, size: thumbnail.size },
+            React.createElement(TickIcon, { size: thumbnail.size, selected: thumbnail.toggleState.isSelected }),
+            React.createElement(StyledFileIcon, { variant: props.variant ||
+                    getThumbnailVariantForFilename((_a = props.filename) !== null && _a !== void 0 ? _a : '') }),
+            thumbnail.size === 'lg' && (React.createElement(Label, { label: thumbnail.label, disabled: thumbnail.disabled })),
+            React.createElement(StyledImageThumbnailOverlay, null)),
+        React.createElement(ThumbnailCaption, { error: thumbnail.error, qa: (_b = thumbnail.qa) === null || _b === void 0 ? void 0 : _b.caption, multiline: thumbnail.size === 'lg', layout: thumbnail.layout, caption: thumbnail.caption, hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder, disabled: thumbnail.disabled })));
+});
+var FigurePlaceholder = React.forwardRef(function FigurePlaceholder(props, ref) {
+    var _a, _b;
+    var thumbnail = useThumbnail(props);
+    return (React.createElement(StyledThumbnailWrapper, __assign({ ref: ref, layout: thumbnail.layout, size: thumbnail.size }, props),
+        React.createElement(StyledPlaceholderThumbnail, { focused: thumbnail.focused, disabled: thumbnail.disabled, selected: thumbnail.selected, clickable: thumbnail.clickable, size: thumbnail.size, as: thumbnail.as },
+            React.createElement(TickIcon, { size: thumbnail.size, selected: thumbnail.toggleState.isSelected }),
+            React.createElement(StyledFileIcon, { variant: props.variant ||
+                    getThumbnailVariantForFilename((_a = props.filename) !== null && _a !== void 0 ? _a : '') }),
+            thumbnail.size === 'lg' && (React.createElement(FigCaption, { label: thumbnail.label, disabled: thumbnail.disabled })),
+            React.createElement(StyledImageThumbnailOverlay, null)),
+        React.createElement(ThumbnailCaption, { error: thumbnail.error, qa: (_b = thumbnail.qa) === null || _b === void 0 ? void 0 : _b.caption, multiline: thumbnail.size === 'lg', layout: thumbnail.layout, caption: thumbnail.caption, hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder, disabled: thumbnail.disabled })));
+});
+var CheckboxPlaceholder = React.forwardRef(function CheckboxPlaceholder(_a, ref) {
+    var _b, _c;
+    var children = _a.children, as = _a.as, label = _a.label, name = _a.name, onChange = _a.onChange, role = _a.role, value = _a.value, props_ = __rest(_a, ["children", "as", "label", "name", "onChange", "role", "value"]);
+    var props = __assign(__assign({}, props_), { as: as, label: label, onChange: onChange, role: role, value: value, isDisabled: props_.disabled, isSelected: props_.checked, defaultSelected: props_.defaultChecked });
+    var thumbnail = useThumbnail(props);
+    var isInputFocused = document.activeElement === thumbnail.inputRef.current;
+    var preventSpaceOnDisabledThumbnail = function (e) {
+        if (e.key === ' ' && thumbnail.disabled) {
+            e.preventDefault();
+        }
+    };
+    React.useEffect(function () {
+        if (props.focused && thumbnail.inputRef.current) {
+            thumbnail.inputRef.current.focus();
+        }
+    }, [props.focused, thumbnail.inputRef]);
+    return (React.createElement(StyledThumbnailWrapper, __assign({ ref: ref, layout: thumbnail.layout, size: thumbnail.size }, props_, { onClick: function (e) {
+            var _a;
+            if (!thumbnail.disabled) {
+                thumbnail.toggleState.toggle();
+                (_a = thumbnail.onClick) === null || _a === void 0 ? void 0 : _a.call(thumbnail, e);
+            }
+        } }),
+        React.createElement(StyledPlaceholderThumbnail, { focused: thumbnail.focused || isInputFocused, disabled: thumbnail.disabled, selected: thumbnail.selected, clickable: thumbnail.clickable, size: thumbnail.size },
+            React.createElement(TickIcon, { size: thumbnail.size, selected: thumbnail.toggleState.isSelected }),
+            React.createElement(StyledFileIcon, { variant: props.variant ||
+                    getThumbnailVariantForFilename((_b = props.filename) !== null && _b !== void 0 ? _b : '') }),
+            thumbnail.size === 'lg' && (React.createElement(Label, { label: thumbnail.label, disabled: thumbnail.disabled })),
+            React.createElement(StyledImageThumbnailOverlay, null)),
+        React.createElement(ThumbnailCaption, { error: thumbnail.error, qa: (_c = thumbnail.qa) === null || _c === void 0 ? void 0 : _c.caption, multiline: thumbnail.size === 'lg', layout: thumbnail.layout, caption: thumbnail.caption, hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder, disabled: thumbnail.disabled }),
+        React.createElement(VisuallyHidden, null,
+            React.createElement("input", __assign({ ref: mergeRefs(thumbnail.inputRef, ref), "aria-label": "".concat(thumbnail.label, " ").concat(thumbnail.caption) || 'checkbox', disabled: thumbnail.disabled }, mergeProps(thumbnail.inputProps, thumbnail.focusProps), { onKeyDown: preventSpaceOnDisabledThumbnail })))));
+});
+function PlaceholderInner(props, ref) {
+    switch (props.role) {
+        case 'checkbox': {
+            return (React.createElement(CheckboxPlaceholder, __assign({ ref: ref }, props)));
+        }
+        case 'figure': {
+            return (React.createElement(FigurePlaceholder, __assign({ ref: ref }, props)));
+        }
+        default: {
+            return (React.createElement(BasePlaceholder, __assign({ ref: ref }, props)));
+        }
+    }
+}
+var BaseThumbnail = React.forwardRef(function BaseThumbnail(props, ref) {
+    var _a, _b;
+    var thumbnail = useThumbnail(props);
+    return (React.createElement(StyledThumbnailWrapper, __assign({ ref: ref, layout: thumbnail.layout, size: thumbnail.size }, props),
+        React.createElement(StyledImageThumbnail, { focused: thumbnail.focused, disabled: thumbnail.disabled, selected: thumbnail.selected, clickable: thumbnail.clickable, size: thumbnail.size },
+            thumbnail.isImageURL && !thumbnail.shouldUsePlaceholder ? (React.createElement(StyledImageThumbnailImage, { src: thumbnail.src, alt: thumbnail.alt })) : (React.createElement(ThumbnailPreview, { file: thumbnail.src, "aria-label": thumbnail.alt })),
+            React.createElement(TickIcon, { size: thumbnail.size, selected: thumbnail.toggleState.isSelected }),
+            thumbnail.shouldUsePlaceholder && (React.createElement(StyledFileIcon, { variant: thumbnail.variant ||
+                    getThumbnailVariantForFilename((_a = thumbnail.filename) !== null && _a !== void 0 ? _a : '') })),
+            thumbnail.size === 'lg' && (React.createElement(Label, { label: thumbnail.label, disabled: thumbnail.disabled })),
+            React.createElement(StyledImageThumbnailOverlay, null)),
+        React.createElement(ThumbnailCaption, { qa: (_b = thumbnail.qa) === null || _b === void 0 ? void 0 : _b.caption, multiline: thumbnail.size === 'lg', layout: thumbnail.layout, caption: thumbnail.caption, hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder, disabled: thumbnail.disabled, error: thumbnail.error })));
+});
+var FigureThumbnail = React.forwardRef(function FigureThumbnail(props, ref) {
+    var _a, _b;
+    var thumbnail = useThumbnail(props);
+    return (React.createElement(StyledThumbnailWrapper, { layout: thumbnail.layout, size: thumbnail.size },
+        React.createElement(StyledImageThumbnail, { ref: ref, focused: thumbnail.focused, disabled: thumbnail.disabled, selected: thumbnail.selected, clickable: thumbnail.clickable, size: thumbnail.size, as: thumbnail.as },
+            thumbnail.isImageURL && !thumbnail.shouldUsePlaceholder ? (React.createElement(StyledImageThumbnailImage, { src: thumbnail.src, alt: thumbnail.alt })) : (React.createElement(ThumbnailPreview, { file: thumbnail.src, "aria-label": thumbnail.alt })),
+            React.createElement(TickIcon, { size: thumbnail.size, selected: thumbnail.toggleState.isSelected }),
+            thumbnail.shouldUsePlaceholder && (React.createElement(StyledFileIcon, { variant: thumbnail.variant ||
+                    getThumbnailVariantForFilename((_a = thumbnail.filename) !== null && _a !== void 0 ? _a : '') })),
+            thumbnail.size === 'lg' && (React.createElement(FigCaption, { label: thumbnail.label, disabled: thumbnail.disabled })),
+            React.createElement(StyledImageThumbnailOverlay, null)),
+        React.createElement(ThumbnailCaption, { qa: (_b = thumbnail.qa) === null || _b === void 0 ? void 0 : _b.caption, multiline: thumbnail.size === 'lg', layout: thumbnail.layout, caption: thumbnail.caption, hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder, disabled: thumbnail.disabled, error: thumbnail.error })));
+});
+var CheckboxThumbnail = React.forwardRef(function CheckboxThumbnail(_a, ref) {
+    var _b, _c;
+    var children = _a.children, as = _a.as, label = _a.label, name = _a.name, onChange = _a.onChange, role = _a.role, value = _a.value, props_ = __rest(_a, ["children", "as", "label", "name", "onChange", "role", "value"]);
+    var props = __assign(__assign({}, props_), { as: as, label: label, name: name, onChange: onChange, role: role, value: value, isDisabled: props_.disabled, isSelected: props_.checked, defaultSelected: props_.defaultChecked });
+    var thumbnail = useThumbnail(props);
+    var isInputFocused = document.activeElement === thumbnail.inputRef.current;
+    var preventSpaceOnDisabledThumbnail = function (e) {
+        if (e.key === ' ' && thumbnail.disabled) {
+            e.preventDefault();
+        }
+    };
+    React.useEffect(function () {
+        if (props.focused && thumbnail.inputRef.current) {
+            thumbnail.inputRef.current.focus();
+        }
+    }, [props.focused, thumbnail.inputRef]);
+    return (React.createElement(StyledThumbnailWrapper, __assign({ layout: thumbnail.layout, size: thumbnail.size }, props_, { onClick: function (e) {
+            var _a;
+            if (!thumbnail.disabled) {
+                thumbnail.toggleState.toggle();
+                (_a = thumbnail.onClick) === null || _a === void 0 ? void 0 : _a.call(thumbnail, e);
+            }
+        } }),
+        React.createElement(StyledImageThumbnail, { focused: thumbnail.focused || isInputFocused, disabled: thumbnail.disabled, selected: thumbnail.selected, clickable: thumbnail.clickable, size: thumbnail.size },
+            thumbnail.isImageURL && !thumbnail.shouldUsePlaceholder ? (React.createElement(StyledImageThumbnailImage, { src: thumbnail.src, alt: thumbnail.alt })) : (React.createElement(ThumbnailPreview, { file: thumbnail.src, "aria-label": thumbnail.alt })),
+            React.createElement(TickIcon, { size: thumbnail.size, selected: thumbnail.toggleState.isSelected }),
+            thumbnail.shouldUsePlaceholder && (React.createElement(StyledFileIcon, { variant: thumbnail.variant ||
+                    getThumbnailVariantForFilename((_b = thumbnail.filename) !== null && _b !== void 0 ? _b : '') })),
+            thumbnail.size === 'lg' && (React.createElement(Label, { label: thumbnail.label, disabled: thumbnail.disabled })),
+            React.createElement(StyledImageThumbnailOverlay, null)),
+        React.createElement(ThumbnailCaption, { qa: (_c = props.qa) === null || _c === void 0 ? void 0 : _c.caption, multiline: thumbnail.size === 'lg', layout: thumbnail.layout, caption: thumbnail.caption, hasCaptionPlaceholder: thumbnail.hasCaptionPlaceholder, disabled: thumbnail.disabled, error: props.error }),
+        React.createElement(VisuallyHidden, null,
+            React.createElement("input", __assign({ ref: mergeRefs(thumbnail.inputRef, ref), type: 'checkbox', disabled: thumbnail.disabled }, mergeProps(thumbnail.inputProps, thumbnail.focusProps), { onKeyDown: preventSpaceOnDisabledThumbnail })))));
+});
+function ThumbnailInner(props, ref) {
+    var isFile = props.src instanceof File;
+    var isImageURL = typeof props.src === 'string';
+    if (!isFile && !isImageURL) {
+        console.warn('Unknown Thumbnail source:', props.src);
+    }
+    switch (props.role) {
+        case 'checkbox': {
+            return (React.createElement(CheckboxThumbnail, __assign({ ref: ref }, props)));
+        }
+        case 'figure': {
+            return (React.createElement(FigureThumbnail, __assign({ ref: ref }, props)));
+        }
+        default: {
+            return (React.createElement(BaseThumbnail, __assign({ ref: ref }, props)));
+        }
+    }
+}
+/**
+
+ We use thumbnails to display previews for images or files as either a smaller
+ version of an uploaded image, or an icon representing the file type. If an
+ image preview can be generated from the file (in the case of images) then
+ display that image.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/core-react/latest/?path=/story/demos-thumbnail--demo-thumbnail)
+
+ @see [Design Guidelines](https://design.procore.com/thumbnail)
+
+ */
+var Thumbnail_ = React.forwardRef(ThumbnailInner);
+var Placeholder = React.forwardRef(PlaceholderInner);
+// @ts-ignore
+Placeholder.displayName = 'Thumbnail.Placeholder';
+// @ts-ignore
+Thumbnail_.displayName = 'Thumbnail';
+export var Thumbnail = addSubcomponents({ Placeholder: Placeholder }, Thumbnail_);
+//# sourceMappingURL=Thumbnail.js.map

package/dist/Thumbnail/Thumbnail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumbnail.js","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.tsx"],"names":[],"mappings":"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"}

package/dist/Thumbnail/Thumbnail.styles.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import { TypographyProps } from '../Typography';
+import { LayoutVariant, QaTags, SizeVariant } from './Thumbnail.types';
+import { DocumentIcon } from './ThumbnailDocumentIcon';
+interface CaptionProps {
+    layout: LayoutVariant;
+    error: boolean;
+    disabled: boolean;
+}
+interface StyledThumbnailProps {
+    focused: boolean;
+    disabled: boolean;
+    selected: boolean;
+    clickable: boolean;
+    size: SizeVariant;
+}
+interface StyledTickIconProps {
+    selected: boolean;
+    size: SizeVariant;
+}
+export declare const StyledMultilineCaption: import("styled-components").StyledComponent<"div", any, CaptionProps, never>;
+export declare const StyledCaptionText: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledPlaceholderCaption: import("styled-components").StyledComponent<"div", any, CaptionProps, never>;
+export declare const StyledSingleLineCaption: import("styled-components").StyledComponent<"div", any, CaptionProps, never>;
+export declare const StyledSinglelineCaptionBody: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledSinglelineCaptionEnding: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledLabelText: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../_utils/types").SpanAttributes & TypographyProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const StyledThumbnailFigCaption: import("styled-components").StyledComponent<"figcaption", any, {
+    $color?: TypographyProps['color'];
+}, never>;
+export declare const StyledLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTickIcon: import("styled-components").StyledComponent<"svg", any, StyledTickIconProps, never>;
+export declare const StyledFileIcon: import("styled-components").StyledComponent<typeof DocumentIcon, any, {}, never>;
+export declare const StyledImageThumbnailPreview: import("styled-components").StyledComponent<"div", any, {
+    $bgImage: string;
+}, never>;
+export declare const StyledImageThumbnailOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledImageThumbnailImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const StyledImageThumbnail: import("styled-components").StyledComponent<"div", any, StyledThumbnailProps, never>;
+export declare const StyledThumbnailWrapper: import("styled-components").StyledComponent<"div", any, {
+    layout: LayoutVariant;
+    size: SizeVariant;
+    qa?: QaTags | undefined;
+}, never>;
+export declare const StyledPlaceholderThumbnail: import("styled-components").StyledComponent<"div", any, StyledThumbnailProps, never>;
+export {};

package/dist/Thumbnail/Thumbnail.styles.js

@@ -0,0 +1,155 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from 'styled-components';
+import { Typography } from '../Typography';
+import { getTypographyIntent, typographyWeights, } from '../Typography/Typography.styles';
+import { borderRadius } from '../_styles/borderRadius';
+import { colors } from '../_styles/colors';
+import { getEllipsis, getFocus } from '../_styles/mixins';
+import { spacing } from '../_styles/spacing';
+import { DocumentIcon } from './ThumbnailDocumentIcon';
+var thumbnailSizeSm = 40;
+var thumbnailSizeLg = 104;
+var labelHeight = 24;
+var labelFontSize = 12;
+var tickSize = 24;
+var rowLayoutCaptionWidth = 288;
+var multilineCaptionMaxHeight = spacing.lg * 2;
+var captionBase = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  ", "\n  ", "\n\n  ", "\n  ", "\n"], ["\n  color: ", ";\n  font-size: 12px;\n  line-height: 16px;\n  letter-spacing: 0.4px;\n  font-weight: 500;\n  ", "\n  ", "\n\n  ", "\n  ", "\n"])), colors.gray15, function (_a) {
+    var layout = _a.layout;
+    return layout === 'row'
+        ? "\n        align-items: center;\n        margin-left: ".concat(spacing.sm, "px;\n        width: ").concat(rowLayoutCaptionWidth, "px;\n      ")
+        : '';
+}, function (_a) {
+    var layout = _a.layout;
+    return layout === 'column'
+        ? "\n        margin-top: ".concat(spacing.xs / 2, "px;\n        width: ").concat(thumbnailSizeLg, "px;\n      ")
+        : '';
+}, function (_a) {
+    var error = _a.error;
+    return (error ? "color: ".concat(colors.red50, ";") : '');
+}, function (_a) {
+    var disabled = _a.disabled;
+    return (disabled ? "color: ".concat(colors.gray70, ";") : '');
+});
+export var StyledMultilineCaption = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  word-wrap: break-word;\n  // for IE11, use word-wrap property\n  overflow-wrap: break-word;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n\n  // limit height for browsers that do not support line-clamp CSS prop\n  max-height: ", "px;\n"], ["\n  ", "\n  display: flex;\n  word-wrap: break-word;\n  // for IE11, use word-wrap property\n  overflow-wrap: break-word;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n\n  // limit height for browsers that do not support line-clamp CSS prop\n  max-height: ", "px;\n"])), captionBase, multilineCaptionMaxHeight);
+export var StyledCaptionText = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  // fix word wrap issue in IE\n  width: 100%;\n"], ["\n  // fix word wrap issue in IE\n  width: 100%;\n"])));
+export var StyledPlaceholderCaption = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), captionBase);
+export var StyledSingleLineCaption = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  ", "\n"], ["\n  display: flex;\n  ", "\n"])), captionBase);
+export var StyledSinglelineCaptionBody = styled.span(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), getEllipsis);
+export var StyledSinglelineCaptionEnding = styled.span(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  max-width: 50%;\n  white-space: nowrap;\n  flex-shrink: 0;\n"], ["\n  max-width: 50%;\n  white-space: nowrap;\n  flex-shrink: 0;\n"])));
+export var StyledLabelText = styled(Typography)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), getEllipsis());
+export var StyledThumbnailFigCaption = styled.figcaption(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  ", "\n  ", "\n  color: ", ";\n  font-weight: ", ";\n  text-align: center;\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  opacity: 0.85;\n  height: ", "px;\n  padding: ", "px ", "px;\n  background-color: ", ";\n"], ["\n  ", "\n  ", "\n  color: ", ";\n  font-weight: ", ";\n  text-align: center;\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  opacity: 0.85;\n  height: ", "px;\n  padding: ", "px ", "px;\n  background-color: ", ";\n"])), getTypographyIntent('small'), getEllipsis(), function (_a) {
+    var _b = _a.$color, $color = _b === void 0 ? 'gray15' : _b;
+    return colors[$color];
+}, typographyWeights.bold, labelHeight, spacing.sm / 2, spacing.sm, colors.white);
+export var StyledLabel = styled.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  opacity: 0.85;\n  height: ", "px;\n  padding: ", "px ", "px;\n  font-size: ", "px;\n  background-color: ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n  position: absolute;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  opacity: 0.85;\n  height: ", "px;\n  padding: ", "px ", "px;\n  font-size: ", "px;\n  background-color: ", ";\n"])), labelHeight, spacing.sm / 2, spacing.sm, labelFontSize, colors.white);
+var thumbnailBase = css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  margin: 0;\n\n  ", "\n\n  ", "\n\n  &:focus {\n    ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n  border: 1px solid ", ";\n  border-radius: ", "px;\n  margin: 0;\n\n  ", "\n\n  ", "\n\n  &:focus {\n    ", ";\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), colors.gray85, borderRadius.md, function (_a) {
+    var clickable = _a.clickable;
+    return (clickable ? 'cursor: pointer;' : '');
+}, function (_a) {
+    var selected = _a.selected;
+    return selected
+        ? "\n        ".concat(StyledTickIcon, " {\n          opacity: 1;\n          transform: scale(1);\n        }\n      ")
+        : '';
+}, getFocus(), function (_a) {
+    var focused = _a.focused;
+    return focused && getFocus();
+}, function (_a) {
+    var disabled = _a.disabled, clickable = _a.clickable;
+    return disabled && clickable ? 'cursor: not-allowed;' : '';
+}, function (_a) {
+    var size = _a.size;
+    var sizeInPx = "".concat(size === 'lg' ? thumbnailSizeLg : thumbnailSizeSm, "px");
+    return "\n      width: ".concat(sizeInPx, ";\n      height: ").concat(sizeInPx, ";\n    ");
+});
+export var StyledTickIcon = styled.svg(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  right: ", "px;\n  width: ", "px;\n  height: ", "px;\n  opacity: 0;\n  transform: scale(0.75);\n  transition: transform 250ms ease-out, opacity 100ms ease-out;\n\n  ", "\n\n  ", "\n"], ["\n  position: absolute;\n  top: ", "px;\n  right: ", "px;\n  width: ", "px;\n  height: ", "px;\n  opacity: 0;\n  transform: scale(0.75);\n  transition: transform 250ms ease-out, opacity 100ms ease-out;\n\n  ", "\n\n  ", "\n"])), spacing.sm, spacing.sm, tickSize, tickSize, function (_a) {
+    var selected = _a.selected;
+    return selected
+        ? "\n        opacity: 1;\n        transform: scale(1);\n      "
+        : '';
+}, function (_a) {
+    var size = _a.size;
+    return size === 'sm'
+        ? "\n        top: 50%;\n        left: 50%;\n        margin-top: ".concat(-tickSize / 2, "px;\n        margin-left: ").concat(-tickSize / 2, "px;\n      ")
+        : '';
+});
+export var StyledFileIcon = styled(DocumentIcon)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  width: 36.5%;\n  height: auto;\n"], ["\n  width: 36.5%;\n  height: auto;\n"])));
+export var StyledImageThumbnailPreview = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  ", "\n"], ["\n  width: 100%;\n  height: 100%;\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center;\n  ", "\n"])), function (_a) {
+    var $bgImage = _a.$bgImage;
+    return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n    background-image: url(", ");\n  "], ["\n    background-image: url(", ");\n  "])), $bgImage);
+});
+export var StyledImageThumbnailOverlay = styled.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  display: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n"], ["\n  display: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n"])));
+var blackOverlay = "\n  background-color: ".concat(colors.black, ";\n  opacity: 0.2;\n");
+var whiteOverlay = "\n  background-color: ".concat(colors.white, ";\n  opacity: 0.5;\n");
+export var StyledImageThumbnailImage = styled.img(templateObject_17 || (templateObject_17 = __makeTemplateObject([""], [""])));
+export var StyledImageThumbnail = styled.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", "\n  flex-direction: column;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n  flex-direction: column;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), thumbnailBase, function (_a) {
+    var disabled = _a.disabled;
+    return disabled
+        ? "\n        &,\n        &:hover {\n          ".concat(StyledImageThumbnailOverlay, " {\n            display: block;\n            ").concat(whiteOverlay, "\n          }\n        }\n        ").concat(StyledImageThumbnailPreview, ",\n        ").concat(StyledTickIcon, ",\n        ").concat(StyledImageThumbnailImage, " {\n          filter: saturate(0);\n        }\n        ").concat(StyledFileIcon, " {\n          filter: saturate(0);\n          z-index: -1;\n        }\n      ")
+        : '';
+}, function (_a) {
+    var selected = _a.selected, focused = _a.focused, disabled = _a.disabled;
+    return focused && disabled
+        ? selected
+            ? "\n          ".concat(StyledTickIcon, " {\n            z-index: 0;\n          }\n        ")
+            : "\n          ".concat(StyledTickIcon, " {\n            z-index: 1;\n          }\n        ")
+        : '';
+}, function (_a) {
+    var selected = _a.selected, focused = _a.focused;
+    return selected && focused
+        ? "\n        ".concat(StyledTickIcon, " {\n          z-index: 1;\n        }\n      ")
+        : '';
+}, function (_a) {
+    var selected = _a.selected, focused = _a.focused, disabled = _a.disabled;
+    return selected && focused && disabled
+        ? "\n        ".concat(StyledTickIcon, " {\n          z-index: 0;\n        }\n      ")
+        : '';
+}, function (_a) {
+    var focused = _a.focused, disabled = _a.disabled;
+    return focused && !disabled
+        ? "\n        ".concat(StyledImageThumbnailOverlay, " {\n          display: block;\n        }\n      ")
+        : '';
+}, function (_a) {
+    var clickable = _a.clickable, disabled = _a.disabled;
+    return clickable && !disabled
+        ? "\n        &:hover {\n          ".concat(StyledImageThumbnailOverlay, " {\n            display: block;\n            ").concat(blackOverlay, "\n          }\n        }\n      ")
+        : '';
+});
+export var StyledThumbnailWrapper = styled.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  display: flex;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  ", "\n  ", "\n"])), function (_a) {
+    var size = _a.size;
+    return size === 'lg'
+        ? "\n        width: ".concat(thumbnailSizeLg, "px;\n      ")
+        : '';
+}, function (_a) {
+    var layout = _a.layout;
+    var isRowLayout = layout === 'row';
+    return isRowLayout
+        ? "\n        flex-direction: row;\n        aligh-items: center;\n      "
+        : "\n        flex-direction: column;\n        aligh-items: flex-start;\n      ";
+});
+export var StyledPlaceholderThumbnail = styled.div(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n\n  ", "\n"])), thumbnailBase, function (_a) {
+    var clickable = _a.clickable;
+    return clickable
+        ? "\n        &:hover {\n          background-color: ".concat(colors.gray96, ";\n        }\n\n      ")
+        : '';
+}, function (_a) {
+    var selected = _a.selected, size = _a.size;
+    return selected && size === 'sm'
+        ? "\n        ".concat(StyledFileIcon, " {\n          display: none;\n        }\n      ")
+        : '';
+}, function (_a) {
+    var disabled = _a.disabled;
+    return disabled
+        ? "\n        ".concat(StyledFileIcon, ",\n        ").concat(StyledTickIcon, " {\n          filter: saturate(0);\n          opacity: 0.5;\n        }\n\n        &:hover {\n          background-color: inherit;\n        }\n      ")
+        : '';
+}, function (_a) {
+    var disabled = _a.disabled, selected = _a.selected;
+    return disabled && !selected
+        ? "\n        ".concat(StyledTickIcon, " {\n          opacity: 0;\n          transform: scale(0.75);\n        }\n      ")
+        : '';
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
+//# sourceMappingURL=Thumbnail.styles.js.map

package/dist/Thumbnail/Thumbnail.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thumbnail.styles.js","sourceRoot":"","sources":["../../src/Thumbnail/Thumbnail.styles.ts"],"names":[],"mappings":"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"}