@appquality/unguess-design-system 2.12.64 → 2.12.66

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+# v2.12.66 (Mon Jan 30 2023)
+
+#### 🐛 Bug Fix
+
+- Fix dropdowns [#197](https://github.com/AppQuality/unguess-design-system/pull/197) ([@d-beezee](https://github.com/d-beezee) [@marcbon](https://github.com/marcbon))
+- Fix dropdowns 2 [#196](https://github.com/AppQuality/unguess-design-system/pull/196) ([@d-beezee](https://github.com/d-beezee))
+
+#### Authors: 2
+
+- [@d-beezee](https://github.com/d-beezee)
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v2.12.65 (Mon Jan 30 2023)
+
+#### 🐛 Bug Fix
+
+- Player fixes [#194](https://github.com/AppQuality/unguess-design-system/pull/194) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.12.64 (Mon Jan 30 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -25,12 +25,12 @@ var sunburst = require('@nivo/sunburst');
 var waffle = require('@nivo/waffle');
 var reactModals = require('@zendeskgarden/react-modals');
 var reactDropdowns = require('@zendeskgarden/react-dropdowns');
+var reactForms = require('@zendeskgarden/react-forms');
 var react = require('@tiptap/react');
 var Typography = require('@tiptap/extension-typography');
 var StarterKit = require('@tiptap/starter-kit');
 var Placeholder = require('@tiptap/extension-placeholder');
 var CharacterCount = require('@tiptap/extension-character-count');
-var reactForms = require('@zendeskgarden/react-forms');
 var reactGrid = require('@zendeskgarden/react-grid');
 var reactChrome = require('@zendeskgarden/react-chrome');
 var formik = require('formik');
@@ -991,14 +991,14 @@ const StyledTagNew$1 = styled__default["default"](Tag) `
     ${({ theme }) => theme.space.base * 2}px;
   color: ${({ theme }) => theme.palette.white};
 `;
-const StyledLabel$2 = styled__default["default"](SM) `
+const StyledLabel$3 = styled__default["default"](SM) `
   color: ${({ theme }) => theme.palette.grey["500"]};
 `;
 const CampaignCard = (_a) => {
     var { isNew, date, projectTitle, campaignTitle, status, type, labelNew } = _a, props = __rest(_a, ["isNew", "date", "projectTitle", "campaignTitle", "status", "type", "labelNew"]);
     const StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
     const PillIcon = getTypeDataIcon(type);
-    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, Object.assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$2, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, Object.assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$3, Object.assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, Object.assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
+    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, Object.assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$3, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, Object.assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$3, Object.assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, Object.assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
 };
 
 const StyledTagNew = styled__default["default"](Tag) `
@@ -1831,20 +1831,73 @@ const ItemContent = (props) => {
     return (jsxRuntime.jsxs(Container$1, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, Object.assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$1, { children: description })] })] }));
 };
 
+const StyledMenu = styled__default["default"](reactDropdowns.Menu) `
+  width: auto !important;
+`;
 /**
-   * A Menu is a wrapper for items elements
-   **/
-const Menu = (props) => jsxRuntime.jsx(reactDropdowns.Menu, Object.assign({}, props));
+ * A Menu is a wrapper for items elements
+ **/
+const Menu = (props) => jsxRuntime.jsx(StyledMenu, Object.assign({}, props));
 // Extras
-const PreviousItem = (props) => jsxRuntime.jsx(reactDropdowns.PreviousItem, Object.assign({}, props));
-const Separator = (props) => jsxRuntime.jsx(reactDropdowns.Separator, Object.assign({}, props));
+const PreviousItem = (props) => (jsxRuntime.jsx(reactDropdowns.PreviousItem, Object.assign({}, props)));
+const Separator = (props) => (jsxRuntime.jsx(reactDropdowns.Separator, Object.assign({}, props)));
 const NextItem = (props) => jsxRuntime.jsx(reactDropdowns.NextItem, Object.assign({}, props));
-const ItemMeta = (props) => jsxRuntime.jsx(reactDropdowns.ItemMeta, Object.assign({}, props));
-const MediaBody = (props) => jsxRuntime.jsx(reactDropdowns.MediaBody, Object.assign({}, props));
-const MediaFigure = (props) => jsxRuntime.jsx(reactDropdowns.MediaFigure, Object.assign({}, props));
-const MediaItem = (props) => jsxRuntime.jsx(reactDropdowns.MediaItem, Object.assign({}, props));
+const ItemMeta = (props) => (jsxRuntime.jsx(reactDropdowns.ItemMeta, Object.assign({}, props)));
+const MediaBody = (props) => (jsxRuntime.jsx(reactDropdowns.MediaBody, Object.assign({}, props)));
+const MediaFigure = (props) => (jsxRuntime.jsx(reactDropdowns.MediaFigure, Object.assign({}, props)));
+const MediaItem = (props) => (jsxRuntime.jsx(reactDropdowns.MediaItem, Object.assign({}, props)));
+
+const StyledAutocomplete$1 = styled__default["default"](reactDropdowns.Autocomplete) `
+  width: 100%;
+`;
+/**
+ * Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
+ * <hr>
+ * Used for this:
+    - To filter down a large list of options
+    - To quickly find a known option
+ * Not for this:
+    - To make more than one selection, use Multiselect instead
+ */
+const Autocomplete = (props) => (jsxRuntime.jsx(StyledAutocomplete$1, Object.assign({}, props)));
+
+const StyledLabel$2 = styled__default["default"](reactForms.Label) ``;
+/**
+ * A Label is used to specify a title for an input.
+ * <hr>
+ **/
+const Label = (props) => jsxRuntime.jsx(StyledLabel$2, Object.assign({}, props));
+
+const UgSelect = styled__default["default"](reactDropdowns.Select) `
+  ${(props) => props.isPrimary &&
+    `
+      background-color: ${props.theme.palette.blue[600]};
+      color: white;
+      & svg[data-garden-id="forms.media_figure"] {
+         color: white;
+      }
+   `}
+`;
+/**
+ * Select allows a user to pick one option from a list. This helps simplify the UI when space is limited
+ * <hr>
+ * Used for this:
+    - To make a selection from a list of options
+ * Not for this:
+    - To filter a large list of options, use Autocomplete instead
+    - To make multiple selections from a list, use Multiselect instead
+    - To select from a list on mobile, use a native Select instead
+ */
+const Select = (props) => jsxRuntime.jsx(UgSelect, Object.assign({}, props));
+const StyledDropdown = styled__default["default"].div `
+  ${StyledLabel$2} {
+    display: block;
+  }
+`;
+const Dropdown = (props) => (jsxRuntime.jsx(StyledDropdown, { children: jsxRuntime.jsx(reactDropdowns.Dropdown, Object.assign({}, props)) }));
+const Message = (props) => jsxRuntime.jsx(reactDropdowns.Message, Object.assign({}, props));
 
-const StyledAutocomplete = styled__default["default"](reactDropdowns.Autocomplete) `
+const StyledAutocomplete = styled__default["default"](Autocomplete) `
   ${(props) => props.hasSelectedItems &&
     `
     border-color: ${props.theme.colors.primaryHue};
@@ -1870,7 +1923,7 @@ const CounterMultiselect = ({ options, label, i18n, onChange, isCompact, }) => {
         setSelectedItems(options.filter((o) => o.selected));
     }, [options]);
     const hasSelectedItems = selectedItems.length > 0;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(reactDropdowns.Dropdown, Object.assign({ inputValue: inputValue, selectedItems: selectedItems, onSelect: (items) => {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Dropdown, Object.assign({ inputValue: inputValue, selectedItems: selectedItems, onSelect: (items) => {
                 if (items) {
                     setSelectedItems(items);
                     if (onChange)
@@ -1878,48 +1931,13 @@ const CounterMultiselect = ({ options, label, i18n, onChange, isCompact, }) => {
                 }
             }, downshiftProps: {
                 itemToString: (item) => item && item.id,
-            }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(reactDropdowns.Field, { children: [label && jsxRuntime.jsx(reactDropdowns.Label, { children: label }), jsxRuntime.jsx(StyledAutocomplete, Object.assign({ isCompact: isCompact, hasSelectedItems: hasSelectedItems }, { children: hasSelectedItems
+            }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(Field$1, { children: [label && jsxRuntime.jsx(Label, { children: label }), jsxRuntime.jsx(StyledAutocomplete, Object.assign({ isCompact: isCompact, hasSelectedItems: hasSelectedItems }, { children: hasSelectedItems
                                 ? (i18n === null || i18n === void 0 ? void 0 : i18n.counterText)
                                     ? i18n.counterText(selectedItems.length)
                                     : `Items (${selectedItems.length})`
-                                : (_a = i18n === null || i18n === void 0 ? void 0 : i18n.noItems) !== null && _a !== void 0 ? _a : "No items" }))] }), jsxRuntime.jsx(reactDropdowns.Menu, Object.assign({ isCompact: isCompact }, { children: matchingOptions.length === 0 ? (jsxRuntime.jsx(reactDropdowns.Item, Object.assign({ disabled: true }, { children: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.noMatches) !== null && _b !== void 0 ? _b : "No matches found" }))) : (matchingOptions.map((option) => (jsxRuntime.jsx(reactDropdowns.Item, Object.assign({ value: option }, { children: jsxRuntime.jsx("span", { children: option.label }) }), option.id)))) }))] })) }));
+                                : (_a = i18n === null || i18n === void 0 ? void 0 : i18n.noItems) !== null && _a !== void 0 ? _a : "No items" }))] }), jsxRuntime.jsx(Menu, Object.assign({ isCompact: isCompact }, { children: matchingOptions.length === 0 ? (jsxRuntime.jsx(Item$1, Object.assign({ disabled: true }, { children: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.noMatches) !== null && _b !== void 0 ? _b : "No matches found" }))) : (matchingOptions.map((option) => (jsxRuntime.jsx(Item$1, Object.assign({ value: option }, { children: jsxRuntime.jsx("span", { children: option.label }) }), option.id)))) }))] })) }));
 };
 
-const UgSelect = styled__default["default"](reactDropdowns.Select) `
-  ${(props) => props.isPrimary &&
-    `
-      background-color: ${props.theme.palette.blue[600]};
-      color: white;
-      & svg[data-garden-id="forms.media_figure"] {
-         color: white;
-      }
-   `}
-`;
-/**
- * Select allows a user to pick one option from a list. This helps simplify the UI when space is limited
- * <hr>
- * Used for this:
-    - To make a selection from a list of options
- * Not for this:
-    - To filter a large list of options, use Autocomplete instead
-    - To make multiple selections from a list, use Multiselect instead
-    - To select from a list on mobile, use a native Select instead
- */
-const Select = (props) => jsxRuntime.jsx(UgSelect, Object.assign({}, props));
-const Dropdown = (props) => (jsxRuntime.jsx(reactDropdowns.Dropdown, Object.assign({}, props)));
-const Message = (props) => jsxRuntime.jsx(reactDropdowns.Message, Object.assign({}, props));
-
-/**
- * Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
- * <hr>
- * Used for this:
-    - To filter down a large list of options
-    - To quickly find a known option
- * Not for this:
-    - To make more than one selection, use Multiselect instead
- */
-const Autocomplete = (props) => jsxRuntime.jsx(reactDropdowns.Autocomplete, Object.assign({}, props));
-
 const MenuHeaderItem = (props) => (jsxRuntime.jsx(reactDropdowns.HeaderItem, Object.assign({}, props)));
 
 const editorStyle = styled.css `
@@ -2498,13 +2516,6 @@ const UgCheckbox = styled__default["default"](reactForms.Checkbox) ``;
    **/
 const Checkbox = (props) => jsxRuntime.jsx(UgCheckbox, Object.assign({}, props));
 
-const UgLabel$1 = styled__default["default"](reactForms.Label) ``;
-/**
-   * A Label is used to specify a title for an input.
-   * <hr>
-   **/
-const Label = (props) => jsxRuntime.jsx(UgLabel$1, Object.assign({}, props));
-
 const StyledLabel$1 = styled__default["default"](Label) `
   margin: ${({ theme }) => theme.space.base}px auto;
 `;
@@ -3622,7 +3633,7 @@ const Item = ({ option, checked, }) => {
     return (jsxRuntime.jsx(CustomItem, Object.assign({ value: option, checked: checked }, { children: jsxRuntime.jsx("span", { children: option.label }) }), `${option.label}-${option.id}`));
 };
 
-const DisabledItem = ({ label }) => (jsxRuntime.jsx(reactDropdowns.Item, Object.assign({ disabled: true }, { children: label })));
+const DisabledItem = ({ label }) => (jsxRuntime.jsx(Item$1, Object.assign({ disabled: true }, { children: label })));
 const MultiSelect = ({ options, onChange, creatable, i18n, maxItems, size, menuHeight, }) => {
     var _a, _b, _c;
     const [inputValue, setInputValue] = React.useState("");
@@ -3635,9 +3646,9 @@ const MultiSelect = ({ options, onChange, creatable, i18n, maxItems, size, menuH
             .indexOf(inputValue.trim().toLowerCase()) !== -1);
         setMatchingOptions(matchedOptions);
     }, [inputValue, options]);
-    return (jsxRuntime.jsxs(reactDropdowns.Dropdown, Object.assign({ inputValue: inputValue, selectedItems: options.filter((option) => option.selected), onSelect: (items) => onChange &&
-            onChange(options.map((o) => (Object.assign(Object.assign({}, o), { selected: items.some((i) => i.id === o.id) })))), downshiftProps: { itemToString }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(reactDropdowns.Field, { children: [jsxRuntime.jsx(reactDropdowns.Label, Object.assign({ hidden: true }, { children: (_a = i18n === null || i18n === void 0 ? void 0 : i18n.label) !== null && _a !== void 0 ? _a : "Multiselect" })), jsxRuntime.jsx(reactDropdowns.Multiselect, { placeholder: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.placeholder) !== null && _b !== void 0 ? _b : "Select Items", isCompact: size !== "medium", maxItems: maxItems, renderItem: ({ value }) => (jsxRuntime.jsxs(reactTags.Tag, Object.assign({ isPill: true }, { children: [jsxRuntime.jsx("span", { children: value.label }), jsxRuntime.jsx(reactTags.Tag.Close, { onClick: () => onChange &&
-                                        onChange(options.map((o) => (Object.assign(Object.assign({}, o), { selected: o.selected && o.id !== value.id })))) })] }))) })] }), jsxRuntime.jsxs(reactDropdowns.Menu, { children: [jsxRuntime.jsxs("div", Object.assign({ style: { maxHeight: menuHeight !== null && menuHeight !== void 0 ? menuHeight : "200px" } }, { children: [matchingOptions.map((option) => {
+    return (jsxRuntime.jsxs(Dropdown, Object.assign({ inputValue: inputValue, selectedItems: options.filter((option) => option.selected), onSelect: (items) => onChange &&
+            onChange(options.map((o) => (Object.assign(Object.assign({}, o), { selected: items.some((i) => i.id === o.id) })))), downshiftProps: { itemToString }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(Field$1, { children: [jsxRuntime.jsx(Label, Object.assign({ hidden: true }, { children: (_a = i18n === null || i18n === void 0 ? void 0 : i18n.label) !== null && _a !== void 0 ? _a : "Multiselect" })), jsxRuntime.jsx(reactDropdowns.Multiselect, { placeholder: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.placeholder) !== null && _b !== void 0 ? _b : "Select Items", isCompact: size !== "medium", maxItems: maxItems, renderItem: ({ value }) => (jsxRuntime.jsxs(reactTags.Tag, Object.assign({ isPill: true }, { children: [jsxRuntime.jsx("span", { children: value.label }), jsxRuntime.jsx(reactTags.Tag.Close, { onClick: () => onChange &&
+                                        onChange(options.map((o) => (Object.assign(Object.assign({}, o), { selected: o.selected && o.id !== value.id })))) })] }))) })] }), jsxRuntime.jsxs(Menu, { children: [jsxRuntime.jsxs("div", Object.assign({ style: { maxHeight: menuHeight !== null && menuHeight !== void 0 ? menuHeight : "200px" } }, { children: [matchingOptions.map((option) => {
                                 const items = options
                                     .filter((o) => o.selected)
                                     .map((item) => itemToString(item));
@@ -4079,9 +4090,7 @@ const StyledDiv$2 = styled__default["default"].div `
     color: ${({ theme }) => theme.palette.grey[300]};
   }
 `;
-const TimeLabel = ({ current, duration, }) => {
-    return (jsxRuntime.jsx(StyledDiv$2, { children: jsxRuntime.jsxs(SM, Object.assign({ tag: "span" }, { children: [current, "/", duration] })) }));
-};
+const TimeLabel = ({ current, duration, }) => (jsxRuntime.jsx(StyledDiv$2, { children: jsxRuntime.jsxs(SM, Object.assign({ tag: "span" }, { children: [current, "/", duration] })) }));
 
 var _path$8, _path2$1;
 function _extends$9() { _extends$9 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$9.apply(this, arguments); }
@@ -4124,24 +4133,25 @@ var SvgVolumeUnmutedFill = function SvgVolumeUnmutedFill(props) {
 
 const AudioButton = (props) => {
     const [isMuted, setIsMuted] = React.useState(false);
+    const { videoRef } = props;
     const hasAudio = (video) => {
         if (!video) {
             return false;
         }
-        const _hasAudio = video.mozHasAudio ||
+        const videohasAudio = video.mozHasAudio ||
             Boolean(video.webkitAudioDecodedByteCount) ||
             Boolean(video.audioTracks && video.audioTracks.length);
-        return _hasAudio;
+        return videohasAudio;
     };
     React.useEffect(() => {
-        if (props.videoRef) {
-            setIsMuted(!hasAudio(props.videoRef) || props.videoRef.muted);
+        if (videoRef) {
+            setIsMuted(!hasAudio(videoRef) || videoRef.muted);
         }
-    }, [props.videoRef]);
-    return (jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, disabled: !props.videoRef || !hasAudio(props.videoRef), onClick: (e) => {
-            if (props.videoRef) {
-                props.videoRef.muted = !props.videoRef.muted;
-                setIsMuted(props.videoRef.muted);
+    }, [videoRef]);
+    return (jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, disabled: !videoRef || !hasAudio(videoRef), onClick: (e) => {
+            if (videoRef) {
+                videoRef.muted = !videoRef.muted;
+                setIsMuted(videoRef.muted);
             }
             e.stopPropagation();
         } }, { children: isMuted ? jsxRuntime.jsx(SvgVolumeMutedFill, {}) : jsxRuntime.jsx(SvgVolumeUnmutedFill, {}) })));
@@ -4166,34 +4176,35 @@ const FullScreenButton = (props) => {
     const { videoRef } = props;
     const { requestFullscreen, webkitRequestFullscreen, mozRequestFullScreen, webkitEnterFullscreen, msRequestFullscreen, } = videoRef || {};
     const handleFullScreen = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (props.videoRef) {
-            if (props.videoRef.requestFullscreen) {
-                yield props.videoRef.requestFullscreen();
+        if (videoRef) {
+            if (videoRef.requestFullscreen) {
+                yield videoRef.requestFullscreen();
             }
-            else if (props.videoRef.webkitRequestFullscreen) {
-                yield props.videoRef.webkitRequestFullscreen();
+            else if (videoRef.webkitRequestFullscreen) {
+                yield videoRef.webkitRequestFullscreen();
             }
-            else if (props.videoRef.mozRequestFullScreen) {
-                yield props.videoRef.mozRequestFullScreen();
+            else if (videoRef.mozRequestFullScreen) {
+                yield videoRef.mozRequestFullScreen();
             }
-            else if (props.videoRef.webkitEnterFullscreen) {
+            else if (videoRef.webkitEnterFullscreen) {
                 // iOS
-                yield props.videoRef.webkitEnterFullscreen();
+                yield videoRef.webkitEnterFullscreen();
             }
-            else if (props.videoRef.msRequestFullscreen) {
-                yield props.videoRef.msRequestFullscreen();
+            else if (videoRef.msRequestFullscreen) {
+                yield videoRef.msRequestFullscreen();
             }
         }
-    }), [props.videoRef]);
+    }), [videoRef]);
     const canGoFullScreen = React.useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (props.videoRef) {
+        if (videoRef) {
             return (requestFullscreen ||
                 webkitRequestFullscreen ||
                 mozRequestFullScreen ||
                 webkitEnterFullscreen ||
                 msRequestFullscreen);
         }
-    }), [props.videoRef]);
+        return false;
+    }), [videoRef]);
     return (jsxRuntime.jsx(IconButton, Object.assign({ isBright: true, onClick: (e) => {
             handleFullScreen();
             e.stopPropagation();
@@ -4240,17 +4251,19 @@ const Controls = (props) => {
     const [tooltipLabel, setTooltipLabel] = React.useState("00:00");
     const progressRef = React.useRef(null);
     const getVideoPositionFromEvent = (clientX) => {
-        if (progressRef && progressRef.current && duration) {
+        const totalTime = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) || duration || 0;
+        if (progressRef && progressRef.current && totalTime) {
             const bounds = progressRef.current.getBoundingClientRect();
             const x = clientX - bounds.left;
-            const videoPositionSecs = (x / progressRef.current.clientWidth) * duration;
+            const videoPositionSecs = (x / progressRef.current.clientWidth) * totalTime;
             return videoPositionSecs;
         }
         return 0;
     };
     const handleProgressUpdate = React.useCallback(() => {
+        const totalTime = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.duration) || duration || 0;
         const currentTime = (videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) || 0;
-        setProgress((currentTime / duration) * 100);
+        setProgress((currentTime / totalTime) * 100);
     }, [duration, videoRef]);
     const handleSkipAhead = React.useCallback((pageX) => {
         if (videoRef) {
@@ -4267,9 +4280,9 @@ const Controls = (props) => {
             const maxMargin = progressRef.current.clientWidth - tooltipWidth;
             const bounds = progressRef.current.getBoundingClientRect();
             const marginX = e.clientX - bounds.left;
-            const tooltipMargin = marginX >= maxMargin ? maxMargin : marginX;
+            const newTooltipMargin = marginX >= maxMargin ? maxMargin : marginX;
             const videoTargetDuration = getVideoPositionFromEvent(e.clientX);
-            setTooltipMargin(tooltipMargin);
+            setTooltipMargin(newTooltipMargin);
             setTooltipLabel(formatDuration(videoTargetDuration));
         }
     };
@@ -4283,7 +4296,7 @@ const Controls = (props) => {
             }
         };
     }, [videoRef]);
-    return (jsxRuntime.jsxs(ControlsWrapper, Object.assign({ isPlaying: isPlaying }, { children: [jsxRuntime.jsxs(ProgressContainer, Object.assign({ onMouseEnter: onMouseEvent, onMouseMove: onMouseEvent, onMouseLeave: onMouseEvent }, { children: [jsxRuntime.jsx(StyledTooltip, Object.assign({ style: { marginLeft: tooltipMargin + "px" } }, { children: tooltipLabel })), jsxRuntime.jsx(TimeLabel, { current: formatDuration((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) || 0), duration: formatDuration(duration) }), jsxRuntime.jsx(StyledProgress, { ref: progressRef, value: progress, onClick: (e) => handleSkipAhead(e.clientX) })] })), jsxRuntime.jsxs(ControlsBar, { children: [jsxRuntime.jsx(StyledDiv, { children: jsxRuntime.jsx(AudioButton, { videoRef: videoRef }) }), jsxRuntime.jsx(ControlsGroupCenter, { videoRef: videoRef, onPlayChange: onPlayChange, isPlaying: isPlaying }), jsxRuntime.jsx(StyledDiv, { children: jsxRuntime.jsx(FullScreenButton, { videoRef: videoRef }) })] })] })));
+    return (jsxRuntime.jsxs(ControlsWrapper, Object.assign({ isPlaying: isPlaying }, { children: [jsxRuntime.jsxs(ProgressContainer, Object.assign({ onMouseEnter: onMouseEvent, onMouseMove: onMouseEvent, onMouseLeave: onMouseEvent }, { children: [jsxRuntime.jsx(StyledTooltip, Object.assign({ style: { marginLeft: `${tooltipMargin}px` } }, { children: tooltipLabel })), jsxRuntime.jsx(TimeLabel, { current: formatDuration((videoRef === null || videoRef === void 0 ? void 0 : videoRef.currentTime) || 0), duration: formatDuration(duration) }), jsxRuntime.jsx(StyledProgress, { ref: progressRef, value: progress, onClick: (e) => handleSkipAhead(e.clientX) })] })), jsxRuntime.jsxs(ControlsBar, { children: [jsxRuntime.jsx(StyledDiv, { children: jsxRuntime.jsx(AudioButton, { videoRef: videoRef }) }), jsxRuntime.jsx(ControlsGroupCenter, { videoRef: videoRef, onPlayChange: onPlayChange, isPlaying: isPlaying }), jsxRuntime.jsx(StyledDiv, { children: jsxRuntime.jsx(FullScreenButton, { videoRef: videoRef }) })] })] })));
 };
 
 const FloatingContainer = styled__default["default"].div `
@@ -4313,8 +4326,8 @@ const ButtonsContainer = styled__default["default"].div `
   height: 100%;
 `;
 const FloatingControls = (props) => {
-    const { isPlaying } = props;
-    return (jsxRuntime.jsx(FloatingContainer, Object.assign({ isPlaying: isPlaying }, { children: jsxRuntime.jsx(ButtonsContainer, { children: !isPlaying && (jsxRuntime.jsx(BigButton, Object.assign({ isBright: true }, { children: jsxRuntime.jsx(PlayIcon, {}) }))) }) })));
+    const { isPlaying, onClick } = props;
+    return (jsxRuntime.jsx(FloatingContainer, Object.assign({ isPlaying: isPlaying, onClick: onClick }, { children: jsxRuntime.jsx(ButtonsContainer, { children: !isPlaying && (jsxRuntime.jsx(BigButton, Object.assign({ isBright: true }, { children: jsxRuntime.jsx(PlayIcon, {}) }))) }) })));
 };
 
 const Container = styled__default["default"].div `
@@ -4425,10 +4438,7 @@ const Player = React.forwardRef((props, forwardRef) => {
             }
         };
     }, [videoRef.current]);
-    return (jsxRuntime.jsxs(Container, Object.assign({ isLoaded: isLoaded, isPlaying: isPlaying, onClick: (e) => {
-            e.stopPropagation();
-            handlePlayPause();
-        } }, { children: [!isLoaded ? (jsxRuntime.jsx(VideoSpinner, {})) : (jsxRuntime.jsx(FloatingControls, { isPlaying: isPlaying })), jsxRuntime.jsx(Video, Object.assign({ ref: videoRef, onLoadedMetadata: handleLoad, onLoad: handleDuration, preload: "auto", playsInline: true }, { children: props.children })), jsxRuntime.jsx(Controls, { videoRef: videoRef.current, duration: duration, isPlaying: isPlaying, onPlayChange: (isPlaying) => setIsPlaying(isPlaying) })] })));
+    return (jsxRuntime.jsxs(Container, Object.assign({ isLoaded: isLoaded, isPlaying: isPlaying }, { children: [!isLoaded ? (jsxRuntime.jsx(VideoSpinner, {})) : (jsxRuntime.jsx(FloatingControls, { isPlaying: isPlaying, onClick: handlePlayPause })), jsxRuntime.jsx(Video, Object.assign({ ref: videoRef, onLoadedMetadata: handleLoad, onLoad: handleDuration, preload: "auto", playsInline: true, onClick: handlePlayPause }, { children: props.children })), jsxRuntime.jsx(Controls, { videoRef: videoRef.current, duration: duration, isPlaying: isPlaying, onPlayChange: (playing) => setIsPlaying(playing) })] })));
 });
 
 var _path$5;
@@ -5494,6 +5504,7 @@ exports.SpecialCard = SpecialCard;
 exports.Spinner = Spinner;
 exports.SplitButton = SplitButton;
 exports.Stepper = Stepper;
+exports.StyledLabel = StyledLabel$2;
 exports.SunburstChart = SunburstChart;
 exports.Table = Table;
 exports.TableBody = Body;

package/build/stories/dropdowns/menu/index.d.ts

@@ -1,8 +1,8 @@
 import { MenuArgs, NextItemArgs, PreviousItemArgs } from "./_types";
 import { HTMLAttributes, LiHTMLAttributes } from "react";
 /**
-   * A Menu is a wrapper for items elements
-   **/
+ * A Menu is a wrapper for items elements
+ **/
 declare const Menu: (props: MenuArgs) => JSX.Element;
 declare const PreviousItem: (props: PreviousItemArgs) => JSX.Element;
 declare const Separator: (props: LiHTMLAttributes<HTMLLIElement>) => JSX.Element;
@@ -11,4 +11,4 @@ declare const ItemMeta: (props: HTMLAttributes<HTMLSpanElement>) => JSX.Element;
 declare const MediaBody: (props: HTMLAttributes<HTMLDivElement>) => JSX.Element;
 declare const MediaFigure: (props: HTMLAttributes<Element>) => JSX.Element;
 declare const MediaItem: (props: LiHTMLAttributes<HTMLLIElement>) => JSX.Element;
-export { Menu, PreviousItem, Separator, NextItem, ItemMeta, MediaBody, MediaFigure, MediaItem };
+export { Menu, PreviousItem, Separator, NextItem, ItemMeta, MediaBody, MediaFigure, MediaItem, };

package/build/stories/label/index.d.ts

@@ -1,7 +1,9 @@
+/// <reference types="react" />
 import { LabelArgs } from "./_types";
+export declare const StyledLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-forms").ILabelProps & import("react").RefAttributes<HTMLLabelElement>>, any, {}, never>;
 /**
-   * A Label is used to specify a title for an input.
-   * <hr>
-   **/
+ * A Label is used to specify a title for an input.
+ * <hr>
+ **/
 declare const Label: (props: LabelArgs) => JSX.Element;
 export { Label };

package/build/stories/player/parts/controlsCenterGroup.d.ts

@@ -1,5 +1,5 @@
 export declare const ControlsGroupCenter: ({ videoRef, isPlaying, onPlayChange, }: {
     videoRef: HTMLVideoElement | null;
     isPlaying?: boolean | undefined;
-    onPlayChange?: ((isPlaying: boolean) => void) | undefined;
+    onPlayChange?: ((playing: boolean) => void) | undefined;
 }) => JSX.Element;

package/build/stories/player/parts/floatingControls.d.ts

@@ -2,4 +2,5 @@ import { WrapperProps } from "../_types";
 export declare const FloatingContainer: import("styled-components").StyledComponent<"div", any, WrapperProps, never>;
 export declare const FloatingControls: (props: {
     isPlaying?: boolean;
+    onClick?: () => void;
 }) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.12.64",
+  "version": "2.12.66",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",