@macive/ui 0.0.10 → 0.0.12

package/dist/src/components/TextField/TextField.js

@@ -18,7 +18,7 @@ const Icon_1 = require("../Icon");
 const Labelled_1 = require("../Labelled");
 const Text_1 = require("../Text");
 const components_1 = require("./components");
-const TextField_styles_1 = __importDefault(require("./TextField.styles"));
+const TextField_classnames_1 = __importDefault(require("./TextField.classnames"));
 function TextField({ prefix, suffix, verticalContent, placeholder, value = '', helpText, label, labelAction, labelHidden, disabled, clearButton, readOnly, autoFocus, focused, multiline, error, connectedRight, connectedLeft, type = 'text', name, id: idProp, role, step, largeStep, autoComplete, max, maxLength, maxHeight, min, minLength, pattern, inputMode, spellCheck, ariaOwns, ariaControls, ariaExpanded, ariaActiveDescendant, ariaAutocomplete, showCharacterCount, align, requiredIndicator, monospaced, selectTextOnFocus, suggestion, onClearButtonClick, onChange, onSpinnerChange, onFocus, onBlur, borderless, }) {
     const i18n = (0, i18n_1.useI18n)();
     const [height, setHeight] = (0, react_1.useState)(null);
@@ -54,28 +54,28 @@ function TextField({ prefix, suffix, verticalContent, placeholder, value = '', h
     const normalizedStep = step != null ? step : 1;
     const normalizedMax = max != null ? max : Infinity;
     const normalizedMin = min != null ? min : -Infinity;
-    const className = (0, css_1.classNames)(TextField_styles_1.default.TextField, Boolean(normalizedValue) && TextField_styles_1.default.hasValue, disabled && TextField_styles_1.default.disabled, readOnly && TextField_styles_1.default.readOnly, error && TextField_styles_1.default.error, multiline && TextField_styles_1.default.multiline, focus && TextField_styles_1.default.focus, borderless && TextField_styles_1.default.borderless);
+    const className = (0, css_1.classNames)(TextField_classnames_1.default.TextField, Boolean(normalizedValue) && TextField_classnames_1.default.hasValue, disabled && TextField_classnames_1.default.disabled, readOnly && TextField_classnames_1.default.readOnly, error && TextField_classnames_1.default.error, multiline && TextField_classnames_1.default.multiline, focus && TextField_classnames_1.default.focus, borderless && TextField_classnames_1.default.borderless);
     const inputType = type === 'currency' ? 'text' : type;
     const isNumericType = type === 'number' || type === 'integer';
-    const prefixMarkup = prefix ? ((0, jsx_runtime_1.jsx)("div", { className: TextField_styles_1.default.Prefix, id: `${id}-Prefix`, ref: prefixRef, children: prefix })) : null;
-    const suffixMarkup = suffix ? ((0, jsx_runtime_1.jsx)("div", { className: TextField_styles_1.default.Suffix, id: `${id}-Suffix`, ref: suffixRef, children: suffix })) : null;
+    const prefixMarkup = prefix ? ((0, jsx_runtime_1.jsx)("div", { className: TextField_classnames_1.default.Prefix, id: `${id}-Prefix`, ref: prefixRef, children: prefix })) : null;
+    const suffixMarkup = suffix ? ((0, jsx_runtime_1.jsx)("div", { className: TextField_classnames_1.default.Suffix, id: `${id}-Suffix`, ref: suffixRef, children: suffix })) : null;
     let characterCountMarkup = null;
     if (showCharacterCount) {
         const characterCount = normalizedValue.length;
         const characterCountLabel = maxLength
-            ? i18n.translate('Polaris.TextField.characterCountWithMaxLength', {
+            ? i18n.translate('Macive.TextField.characterCountWithMaxLength', {
                 count: characterCount,
                 limit: maxLength,
             })
-            : i18n.translate('Polaris.TextField.characterCount', {
+            : i18n.translate('Macive.TextField.characterCount', {
                 count: characterCount,
             });
-        const characterCountClassName = (0, css_1.classNames)(TextField_styles_1.default.CharacterCount, multiline && TextField_styles_1.default.AlignFieldBottom);
+        const characterCountClassName = (0, css_1.classNames)(TextField_classnames_1.default.CharacterCount, multiline && TextField_classnames_1.default.AlignFieldBottom);
         const characterCountText = !maxLength ? characterCount : `${characterCount}/${maxLength}`;
         characterCountMarkup = ((0, jsx_runtime_1.jsx)("div", { id: `${id}-CharacterCounter`, className: characterCountClassName, "aria-label": characterCountLabel, "aria-live": focus ? 'polite' : 'off', "aria-atomic": 'true', onClick: handleClickChild, children: characterCountText }));
     }
     const clearButtonVisible = normalizedValue !== '';
-    const clearButtonMarkup = clearButton && clearButtonVisible ? ((0, jsx_runtime_1.jsxs)("button", { type: 'button', className: TextField_styles_1.default.ClearButton, onClick: handleClearButtonPress, disabled: disabled, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', visuallyHidden: true, children: i18n.translate('Polaris.Common.clear') }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCloseCircle, color: 'base' })] })) : null;
+    const clearButtonMarkup = clearButton && clearButtonVisible ? ((0, jsx_runtime_1.jsxs)("button", { type: 'button', className: TextField_classnames_1.default.ClearButton, onClick: handleClearButtonPress, disabled: disabled, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', visuallyHidden: true, children: i18n.translate('Macive.Common.clear') }), (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCloseCircle, color: 'base' })] })) : null;
     const handleNumberChange = (0, react_1.useCallback)((steps, stepAmount = normalizedStep) => {
         if (onChange == null && onSpinnerChange == null) {
             return;
@@ -142,9 +142,9 @@ function TextField({ prefix, suffix, verticalContent, placeholder, value = '', h
         labelledBy.push(`${id}-VerticalContent`);
     }
     labelledBy.unshift((0, Labelled_1.labelID)(id));
-    const inputClassName = (0, css_1.classNames)(TextField_styles_1.default.Input, 
+    const inputClassName = (0, css_1.classNames)(TextField_classnames_1.default.Input, 
     //@ts-expect-error string
-    align && TextField_styles_1.default[(0, css_1.variationName)('Input-align', align)], suffix && TextField_styles_1.default['Input-suffixed'], clearButton && TextField_styles_1.default['Input-hasClearButton'], monospaced && TextField_styles_1.default.monospaced, suggestion && TextField_styles_1.default.suggestion);
+    align && TextField_classnames_1.default[(0, css_1.variationName)('Input-align', align)], suffix && TextField_classnames_1.default['Input-suffixed'], clearButton && TextField_classnames_1.default['Input-hasClearButton'], monospaced && TextField_classnames_1.default.monospaced, suggestion && TextField_classnames_1.default.suggestion);
     const handleOnFocus = (event) => {
         setFocus(true);
         if (selectTextOnFocus && !suggestion) {
@@ -202,41 +202,10 @@ function TextField({ prefix, suffix, verticalContent, placeholder, value = '', h
         onChange: !suggestion ? handleChange : undefined,
         onInput: suggestion ? handleChange : undefined,
     });
-    const inputWithVerticalContentMarkup = verticalContent ? ((0, jsx_runtime_1.jsxs)("div", { className: TextField_styles_1.default.VerticalContent, id: `${id}-VerticalContent`, ref: verticalContentRef, onClick: handleClickChild, children: [verticalContent, input] })) : null;
+    const inputWithVerticalContentMarkup = verticalContent ? ((0, jsx_runtime_1.jsxs)("div", { className: TextField_classnames_1.default.VerticalContent, id: `${id}-VerticalContent`, ref: verticalContentRef, onClick: handleClickChild, children: [verticalContent, input] })) : null;
     const inputMarkup = verticalContent ? inputWithVerticalContentMarkup : input;
-    const backdropMarkup = ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(TextField_styles_1.default.Backdrop, connectedLeft && TextField_styles_1.default['Backdrop-connectedLeft'], connectedRight && TextField_styles_1.default['Backdrop-connectedRight']) }));
-    return ((0, jsx_runtime_1.jsx)(Labelled_1.Labelled, { label: label, id: id, error: error, action: labelAction, labelHidden: labelHidden, helpText: helpText, requiredIndicator: requiredIndicator, children: (0, jsx_runtime_1.jsx)(Connected_1.Connected, { left: connectedLeft, right: connectedRight, children: (0, jsx_runtime_1.jsxs)("div", { className: className, onClick: handleClick, children: [prefixMarkup, inputMarkup, suffixMarkup, characterCountMarkup, clearButtonMarkup, spinnerMarkup, backdropMarkup, resizer, (0, jsx_runtime_1.jsx)("style", { jsx: 'true', children: `
-          .input-prefix {
-            margin-left: 0.75rem;
-            margin-right: 0.5rem;
-          }
-          .input-prefix,
-          .input-suffix {
-            color: black;
-            flex: 0 0 auto;
-            position: relative;
-            -webkit-user-select: none;
-            user-select: none;
-            z-index: 10;
-          }
-
-          .input-field {
-            -webkit-appearance: none;
-            appearance: none;
-            background: none;
-            display: block;
-            flex: 1 1;
-            letter-spacing: normal;
-            margin: 0;
-            min-height: 2.25rem;
-            min-width: 0;
-            padding: calc((2.25rem - 1.5rem - 0.125rem/2) 0.75rem;
-            position: relative; 
-            text-transform: none;
-            width: 100%;
-            z-index: var(--pc-text-field-contents);
-        }
-        ` })] }) }) }));
+    const backdropMarkup = ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(TextField_classnames_1.default.Backdrop, connectedLeft && TextField_classnames_1.default['Backdrop-connectedLeft'], connectedRight && TextField_classnames_1.default['Backdrop-connectedRight']) }));
+    return ((0, jsx_runtime_1.jsx)(Labelled_1.Labelled, { label: label, id: id, error: error, action: labelAction, labelHidden: labelHidden, helpText: helpText, requiredIndicator: requiredIndicator, children: (0, jsx_runtime_1.jsx)(Connected_1.Connected, { left: connectedLeft, right: connectedRight, children: (0, jsx_runtime_1.jsxs)("div", { className: className, onClick: handleClick, children: [prefixMarkup, inputMarkup, suffixMarkup, characterCountMarkup, clearButtonMarkup, spinnerMarkup, backdropMarkup, resizer] }) }) }));
     function handleChange(event) {
         onChange && onChange(event.currentTarget.value, id);
     }

package/dist/src/components/TextField/components/Resizer/Resizer.js

@@ -9,7 +9,7 @@ const react_1 = require("react");
 // eslint-disable-next-line import/no-deprecated
 const use_isomorphic_layout_effect_1 = require("../../../../utilities/use-isomorphic-layout-effect");
 const EventListener_1 = require("../../../EventListener");
-const TextField_styles_1 = __importDefault(require("../../TextField.styles"));
+const TextField_classnames_1 = __importDefault(require("../../TextField.classnames"));
 function Resizer({ contents, currentHeight: currentHeightProp = null, minimumLines, onHeightChange, }) {
     const contentNode = (0, react_1.useRef)(null);
     const minimumLinesNode = (0, react_1.useRef)(null);
@@ -25,7 +25,7 @@ function Resizer({ contents, currentHeight: currentHeightProp = null, minimumLin
             }
         };
     }, []);
-    const minimumLinesMarkup = minimumLines ? ((0, jsx_runtime_1.jsx)("div", { ref: minimumLinesNode, className: TextField_styles_1.default.DummyInput, dangerouslySetInnerHTML: {
+    const minimumLinesMarkup = minimumLines ? ((0, jsx_runtime_1.jsx)("div", { ref: minimumLinesNode, className: TextField_classnames_1.default.DummyInput, dangerouslySetInnerHTML: {
             __html: getContentsForMinimumLines(minimumLines),
         } })) : null;
     const handleHeightCheck = (0, react_1.useCallback)(() => {
@@ -45,7 +45,7 @@ function Resizer({ contents, currentHeight: currentHeightProp = null, minimumLin
     (0, use_isomorphic_layout_effect_1.useIsomorphicLayoutEffect)(() => {
         handleHeightCheck();
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { "aria-hidden": true, className: TextField_styles_1.default.Resizer, children: [(0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'resize', handler: handleHeightCheck }), (0, jsx_runtime_1.jsx)("div", { ref: contentNode, className: TextField_styles_1.default.DummyInput, dangerouslySetInnerHTML: { __html: getFinalContents(contents) } }), minimumLinesMarkup] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { "aria-hidden": true, className: TextField_classnames_1.default.Resizer, children: [(0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: 'resize', handler: handleHeightCheck }), (0, jsx_runtime_1.jsx)("div", { ref: contentNode, className: TextField_classnames_1.default.DummyInput, dangerouslySetInnerHTML: { __html: getFinalContents(contents) } }), minimumLinesMarkup] }));
 }
 exports.Resizer = Resizer;
 const ENTITIES_TO_REPLACE = {

package/dist/src/components/TextField/components/Spinner/Spinner.js

@@ -8,7 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const Icons_1 = require("../../../Icons");
 const Icon_1 = require("../../../Icon");
-const TextField_styles_1 = __importDefault(require("../../TextField.styles"));
+const TextField_classnames_1 = __importDefault(require("../../TextField.classnames"));
 exports.Spinner = react_1.default.forwardRef(function Spinner({ onChange, onClick, onMouseDown, onMouseUp, onBlur }, ref) {
     function handleStep(step) {
         return () => onChange(step);
@@ -20,5 +20,5 @@ exports.Spinner = react_1.default.forwardRef(function Spinner({ onChange, onClic
             onMouseDown(onChange);
         };
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: TextField_styles_1.default.Spinner, onClick: onClick, "aria-hidden": true, ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { role: 'button', className: TextField_styles_1.default.Segment, tabIndex: -1, onClick: handleStep(1), onMouseDown: handleMouseDown(handleStep(1)), onMouseUp: onMouseUp, onBlur: onBlur, children: (0, jsx_runtime_1.jsx)("div", { className: TextField_styles_1.default.SpinnerIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaMinus }) }) }), (0, jsx_runtime_1.jsx)("div", { role: 'button', className: TextField_styles_1.default.Segment, tabIndex: -1, onClick: handleStep(-1), onMouseDown: handleMouseDown(handleStep(-1)), onMouseUp: onMouseUp, onBlur: onBlur, children: (0, jsx_runtime_1.jsx)("div", { className: TextField_styles_1.default.SpinnerIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaRight }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: TextField_classnames_1.default.Spinner, onClick: onClick, "aria-hidden": true, ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { role: 'button', className: TextField_classnames_1.default.Segment, tabIndex: -1, onClick: handleStep(1), onMouseDown: handleMouseDown(handleStep(1)), onMouseUp: onMouseUp, onBlur: onBlur, children: (0, jsx_runtime_1.jsx)("div", { className: TextField_classnames_1.default.SpinnerIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaMinus }) }) }), (0, jsx_runtime_1.jsx)("div", { role: 'button', className: TextField_classnames_1.default.Segment, tabIndex: -1, onClick: handleStep(-1), onMouseDown: handleMouseDown(handleStep(-1)), onMouseUp: onMouseUp, onBlur: onBlur, children: (0, jsx_runtime_1.jsx)("div", { className: TextField_classnames_1.default.SpinnerIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaRight }) }) })] }));
 });

package/dist/src/components/Thumbnail/Thumbnail.js

@@ -8,25 +8,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const css_1 = require("../../utilities/css");
 const Icon_1 = require("../Icon");
 const Image_1 = require("../Image");
-const Thumbnail_styles_1 = __importDefault(require("./Thumbnail.styles"));
+const Thumbnail_classnames_1 = __importDefault(require("./Thumbnail.classnames"));
 function Thumbnail({ source, alt, size = 'medium', transparent }) {
-    const className = (0, css_1.classNames)(Thumbnail_styles_1.default.Thumbnail, size && Thumbnail_styles_1.default[size], transparent && Thumbnail_styles_1.default.transparent);
+    const className = (0, css_1.classNames)(Thumbnail_classnames_1.default.Thumbnail, 
+    //@ts-expect-error no sizeTOD TODO::fix
+    size && Thumbnail_classnames_1.default[size], transparent && Thumbnail_classnames_1.default.transparent);
     const content = typeof source === 'string' ? ((0, jsx_runtime_1.jsx)(Image_1.Image, { alt: alt, source: source })) : ((0, jsx_runtime_1.jsx)(Icon_1.Icon, { accessibilityLabel: alt, source: source }));
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: `${className} thumbnail-container`, children: content }), (0, jsx_runtime_1.jsx)("style", { children: `
-      .thumbnail-container > * {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        margin: auto;
-        max-width: 100%;
-        max-height: 100%;
-        color: #87909b;
-        svg {
-          fill: currentColor;
-        }
-      }
-      ` })] }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("span", { className: `${className} thumbnail-container`, children: content }) }));
 }
 exports.Thumbnail = Thumbnail;

package/dist/src/components/Tooltip/Tooltip.classnames.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const TooltipClassnames = {
+    "TooltipContainer": "Tooltip-TooltipContainer",
+    "HasUnderline": "Tooltip-HasUnderline"
+};
+exports.default = TooltipClassnames;

package/dist/src/components/Tooltip/Tooltip.js

@@ -13,7 +13,7 @@ const unique_id_1 = require("../../utilities/unique-id");
 const use_toggle_1 = require("../../utilities/use-toggle");
 const Portal_1 = require("../Portal");
 const components_1 = require("./components");
-const Tooltip_styles_1 = __importDefault(require("./Tooltip.styles"));
+const Tooltip_classnames_1 = __importDefault(require("./Tooltip.classnames"));
 const HOVER_OUT_TIMEOUT = 150;
 function Tooltip({ children, content, dismissOnMouseOut, active: originalActive, hoverDelay, preferredPosition = 'above', activatorWrapper = 'span', accessibilityLabel, width = 'default', padding = 'default', borderRadius = '1', zIndexOverride, hasUnderline, persistOnClick, onOpen, onClose, }) {
     const WrapperComponent = activatorWrapper;
@@ -41,7 +41,7 @@ function Tooltip({ children, content, dismissOnMouseOut, active: originalActive,
             return;
         accessibilityNode.tabIndex = 0;
         accessibilityNode.setAttribute('aria-describedby', id);
-        accessibilityNode.setAttribute('data-polaris-tooltip-activator', 'true');
+        accessibilityNode.setAttribute('data-macive-tooltip-activator', 'true');
     }, [id, children]);
     (0, react_1.useEffect)(() => {
         return () => {
@@ -73,7 +73,7 @@ function Tooltip({ children, content, dismissOnMouseOut, active: originalActive,
         persistOnClick && togglePersisting();
     }, [handleBlur, handleClose, persistOnClick, togglePersisting]);
     const portal = activatorNode ? ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { idPrefix: 'tooltip', children: (0, jsx_runtime_1.jsx)(components_1.TooltipOverlay, { id: id, preferredPosition: preferredPosition, activator: activatorNode, active: active, accessibilityLabel: accessibilityLabel, onClose: noop, preventInteraction: dismissOnMouseOut, width: width, padding: padding, borderRadius: borderRadius, zIndexOverride: zIndexOverride, instant: !shouldAnimate, children: content }) })) : null;
-    const wrapperClassNames = (0, css_1.classNames)(activatorWrapper === 'div' && Tooltip_styles_1.default.TooltipContainer, hasUnderline && Tooltip_styles_1.default.HasUnderline);
+    const wrapperClassNames = (0, css_1.classNames)(activatorWrapper === 'div' && Tooltip_classnames_1.default.TooltipContainer, hasUnderline && Tooltip_classnames_1.default.HasUnderline);
     return ((0, jsx_runtime_1.jsxs)(WrapperComponent, { onFocus: () => {
             handleOpen();
             handleFocus();

package/dist/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.classnames.js

@@ -4,8 +4,8 @@ const TooltipOverlayClassnames = {
     "TooltipOverlay": "TooltipOverlay-TooltipOverlay",
     "positionedAbove": "TooltipOverlay-positionedAbove",
     "measuring": "TooltipOverlay-measuring",
-    "measured:not(.instant)": "TooltipOverlay-measured:not(.instant)",
-    "measured.positionedAbove:not(.instant)": "TooltipOverlay-measured.positionedAbove:not(.instant)",
+    "measured": "TooltipOverlay-measured",
+    "instant": "TooltipOverlay-instant",
     "Content": "TooltipOverlay-Content",
     "default": "TooltipOverlay-default",
     "wide": "TooltipOverlay-wide"

package/dist/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.js

@@ -9,15 +9,15 @@ const css_1 = require("../../../../utilities/css");
 const i18n_1 = require("../../../../utilities/i18n");
 const PositionedOverlay_1 = require("../../../PositionedOverlay");
 const shared_1 = require("../../../shared");
-const TooltipOverlay_styles_1 = __importDefault(require("./TooltipOverlay.styles"));
+const TooltipOverlay_classnames_1 = __importDefault(require("./TooltipOverlay.classnames"));
 function TooltipOverlay({ active, activator, preferredPosition = 'above', preventInteraction, id, children, accessibilityLabel, width, padding, borderRadius, zIndexOverride, instant, }) {
     const i18n = (0, i18n_1.useI18n)();
     const markup = active ? ((0, jsx_runtime_1.jsx)(PositionedOverlay_1.PositionedOverlay, { active: active, activator: activator, preferredPosition: preferredPosition, preventInteraction: preventInteraction, render: renderTooltip, zIndexOverride: zIndexOverride })) : null;
     return markup;
     function renderTooltip(overlayDetails) {
         const { measuring, desiredHeight, positioning, chevronOffset } = overlayDetails;
-        const containerClassName = (0, css_1.classNames)(TooltipOverlay_styles_1.default.TooltipOverlay, measuring && TooltipOverlay_styles_1.default.measuring, !measuring && TooltipOverlay_styles_1.default.measured, instant && TooltipOverlay_styles_1.default.instant, positioning === 'above' && TooltipOverlay_styles_1.default.positionedAbove);
-        const contentClassName = (0, css_1.classNames)(TooltipOverlay_styles_1.default.Content, width && TooltipOverlay_styles_1.default[width]);
+        const containerClassName = (0, css_1.classNames)(TooltipOverlay_classnames_1.default.TooltipOverlay, measuring && TooltipOverlay_classnames_1.default.measuring, !measuring && TooltipOverlay_classnames_1.default.measured, instant && TooltipOverlay_classnames_1.default.instant, positioning === 'above' && TooltipOverlay_classnames_1.default.positionedAbove);
+        const contentClassName = (0, css_1.classNames)(TooltipOverlay_classnames_1.default.Content, width && TooltipOverlay_classnames_1.default[width]);
         const contentStyles = measuring ? undefined : { minHeight: desiredHeight };
         const style = {
             '--pc-tooltip-chevron-x-pos': `${chevronOffset}px`,
@@ -40,32 +40,10 @@ function TooltipOverlay({ active, activator, preferredPosition = 'above', preven
                     ...contentStyles,
                     ...style,
                 }, "aria-label": accessibilityLabel
-                    ? i18n.translate('Polaris.TooltipOverlay.accessibilityLabel', {
+                    ? i18n.translate('Macive.TooltipOverlay.accessibilityLabel', {
                         label: accessibilityLabel,
                     })
-                    : undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: 'tooltip-arrow ' }), (0, jsx_runtime_1.jsx)("style", { children: `
-              .tooltip-arrow {
-                position: absolute;
-                bottom: ${positioning === 'above' ? '-14px' : ''};
-                top: ${positioning === 'above' ? '' : '-14px'};
-                left: 50%;
-                transform: translateX(-50%);
-                width: 14px;
-                height: 14px;
-              }
-              
-              .tooltip-arrow::before {
-                content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                border-width: 6px;
-                border-style: solid;
-                border-color: transparent;
-                border-top-color:white;
-                transform:  ${positioning === 'above' ? '' : 'rotate(180deg)'};
-              }
-              ` }), children] }) }));
+                    : undefined, children: [(0, jsx_runtime_1.jsx)("div", { className: 'tooltip-arrow ' }), children] }) }));
     }
 }
 exports.TooltipOverlay = TooltipOverlay;

package/dist/src/components/TopBar/TopBar.classnames.js

@@ -2,17 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const TopBarClassnames = {
     "SecondaryMenu": "TopBar-SecondaryMenu",
-    "focused": "TopBar-focused",
-    "Logo": "TopBar-Logo",
     "TopBar": "TopBar-TopBar",
     "LogoDisplayControl": "TopBar-LogoDisplayControl",
     "LogoDisplayContainer": "TopBar-LogoDisplayContainer",
     "LogoContainer": "TopBar-LogoContainer",
     "hasLogoSuffix": "TopBar-hasLogoSuffix",
+    "Logo": "TopBar-Logo",
     "LogoLink": "TopBar-LogoLink",
     "ContextControl": "TopBar-ContextControl",
     "NavigationIcon": "TopBar-NavigationIcon",
-    "focused:active": "TopBar-focused:active",
+    "focused": "TopBar-focused",
     "IconWrapper": "TopBar-IconWrapper",
     "Contents": "TopBar-Contents",
     "SearchField": "TopBar-SearchField"

package/dist/src/components/TopBar/TopBar.js

@@ -25,7 +25,7 @@ const TopBar = function TopBar({ showNavigationToggle, userMenu, searchResults,
     const { logo } = (0, frame_1.useFrame)();
     const { value: focused, setTrue: forceTrueFocused, setFalse: forceFalseFocused, } = (0, use_toggle_1.useToggle)(false);
     const iconClassName = (0, css_1.classNames)(TopBar_classnames_1.default.NavigationIcon, focused && TopBar_classnames_1.default.focused);
-    const navigationButtonMarkup = showNavigationToggle ? ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: iconClassName, onClick: onNavigationToggle, onFocus: forceTrueFocused, onBlur: forceFalseFocused, "aria-label": i18n.translate('Polaris.TopBar.toggleMenuLabel'), children: (0, jsx_runtime_1.jsx)("div", { className: TopBar_classnames_1.default.IconWrapper, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaHamburger }) }) })) : null;
+    const navigationButtonMarkup = showNavigationToggle ? ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: iconClassName, onClick: onNavigationToggle, onFocus: forceTrueFocused, onBlur: forceFalseFocused, "aria-label": i18n.translate('Macive.TopBar.toggleMenuLabel'), children: (0, jsx_runtime_1.jsx)("div", { className: TopBar_classnames_1.default.IconWrapper, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaHamburger }) }) })) : null;
     const width = (0, get_width_1.getWidth)(logo, 104);
     let contextMarkup;
     if (contextControl) {

package/dist/src/components/TopBar/components/SearchField/SearchField.classnames.js

@@ -2,12 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const SearchFieldClassnames = {
     "SearchField": "SearchField-SearchField",
-    "Input:focus": "SearchField-Input:focus",
-    "Input:focus-visible": "SearchField-Input:focus-visible",
-    "Backdrop": "SearchField-Backdrop",
-    "BackdropShowFocusBorder": "SearchField-BackdropShowFocusBorder",
     "focused": "SearchField-focused",
     "Input": "SearchField-Input",
+    "Backdrop": "SearchField-Backdrop",
+    "BackdropShowFocusBorder": "SearchField-BackdropShowFocusBorder",
     "Icon": "SearchField-Icon",
     "Clear": "SearchField-Clear"
 };

package/dist/src/components/TopBar/components/SearchField/SearchField.js

@@ -43,7 +43,7 @@ function SearchField({ value, focused, active, placeholder, onChange, onFocus, o
             input.current.blur();
         }
     }, [focused]);
-    const clearMarkup = value !== '' && ((0, jsx_runtime_1.jsx)("button", { type: 'button', "aria-label": i18n.translate('Polaris.TopBar.SearchField.clearButtonLabel'), className: SearchField_classnames_1.default.Clear, onClick: handleClear, onBlur: () => {
+    const clearMarkup = value !== '' && ((0, jsx_runtime_1.jsx)("button", { type: 'button', "aria-label": i18n.translate('Macive.TopBar.SearchField.clearButtonLabel'), className: SearchField_classnames_1.default.Clear, onClick: handleClear, onBlur: () => {
             setForceActive(false);
             handleClear();
         }, onFocus: () => {
@@ -51,7 +51,7 @@ function SearchField({ value, focused, active, placeholder, onChange, onFocus, o
             setForceActive(true);
         }, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCloseCircle }) }));
     const className = (0, css_1.classNames)(SearchField_classnames_1.default.SearchField, (focused || active || forceActive) && SearchField_classnames_1.default.focused);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: className, onFocus: handleFocus, onBlur: handleBlur, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', visuallyHidden: true, children: (0, jsx_runtime_1.jsx)("label", { htmlFor: searchId, children: i18n.translate('Polaris.TopBar.SearchField.search') }) }), (0, jsx_runtime_1.jsx)("input", { id: searchId, className: SearchField_classnames_1.default.Input, placeholder: placeholder, type: 'search', autoCapitalize: 'off', autoComplete: 'off', autoCorrect: 'off', ref: input, value: value, onChange: handleChange, onKeyDown: preventDefault }), (0, jsx_runtime_1.jsx)("span", { className: SearchField_classnames_1.default.Icon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaSearch }) }), clearMarkup, (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(SearchField_classnames_1.default.Backdrop, showFocusBorder && SearchField_classnames_1.default.BackdropShowFocusBorder) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: className, onFocus: handleFocus, onBlur: handleBlur, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', visuallyHidden: true, children: (0, jsx_runtime_1.jsx)("label", { htmlFor: searchId, children: i18n.translate('Macive.TopBar.SearchField.search') }) }), (0, jsx_runtime_1.jsx)("input", { id: searchId, className: SearchField_classnames_1.default.Input, placeholder: placeholder, type: 'search', autoCapitalize: 'off', autoComplete: 'off', autoCorrect: 'off', ref: input, value: value, onChange: handleChange, onKeyDown: preventDefault }), (0, jsx_runtime_1.jsx)("span", { className: SearchField_classnames_1.default.Icon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaSearch }) }), clearMarkup, (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.classNames)(SearchField_classnames_1.default.Backdrop, showFocusBorder && SearchField_classnames_1.default.BackdropShowFocusBorder) })] }));
 }
 exports.SearchField = SearchField;
 function preventDefault(event) {

package/dist/src/components/Truncate/Truncate.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Truncate = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Truncate_styles_1 = __importDefault(require("./Truncate.styles"));
+const Truncate_classnames_1 = __importDefault(require("./Truncate.classnames"));
 function Truncate({ children }) {
-    return (0, jsx_runtime_1.jsx)("span", { className: Truncate_styles_1.default.Truncate, children: children });
+    return (0, jsx_runtime_1.jsx)("span", { className: Truncate_classnames_1.default.Truncate, children: children });
 }
 exports.Truncate = Truncate;

package/dist/src/components/Upload/components/Modal/UploadModalContainer.classnames.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const UploadModalContainerClassnames = {
+    "animate-loading": "UploadModalContainer-loading",
+    "animate-bounce": "UploadModalContainer-bounce"
+};
+exports.default = UploadModalContainerClassnames;

package/dist/src/components/Upload/components/Modal/UploadModalContainer.js

@@ -98,63 +98,35 @@ const UploadModalContainer = ({ open, close, audience = 'MERCHANT', title, arran
                 // display: 'flex',
                 height: isMobile ? '80vh' : '70vh',
                 // position: 'relative',
-            }, children: (0, jsx_runtime_1.jsxs)(Modal_1.Modal.Section, { children: [(0, jsx_runtime_1.jsxs)("div", { className: 'hidable-parent hidable-parent-display  relative w-full  overflow-x-hidden  ', children: [(0, jsx_runtime_1.jsx)("div", { className: '  flex w-full flex-col', children: (0, jsx_runtime_1.jsx)("div", { className: 'z-[999] flex w-full items-center  justify-between space-x-4', children: (0, jsx_runtime_1.jsx)(UploadFilterSection_1.default, { refetch: refetch, openSelectedPanel: showSelectedPanel
-                                            ? () => setShowSelectedPanel(false)
-                                            : () => setShowSelectedPanel(true) }) }) }), (0, jsx_runtime_1.jsx)("div", { id: 'scrollHere', ref: chatWindowRef }), loading && (networkStatus === NetworkStatus.refetch || NetworkStatus.loading) && ((0, jsx_runtime_1.jsxs)("div", { className: 'relative my-1 h-10 bg-blue-400', children: [(0, jsx_runtime_1.jsx)("div", { className: 'absolute top-2 left-1/2  font-semibold', children: "Getting your files ready" }), (0, jsx_runtime_1.jsx)("div", { className: 'animate-loading absolute h-full w-full bg-gradient-to-r from-transparent via-white to-transparent' }), (0, jsx_runtime_1.jsx)("div", { className: 'absolute top-0 left-0 h-full w-4 animate-bounce bg-white opacity-75' }), (0, jsx_runtime_1.jsx)("div", { className: 'absolute top-0 right-0 h-full w-4 animate-bounce bg-white opacity-75' })] })), loading && (networkStatus === NetworkStatus.refetch || NetworkStatus.loading) && ((0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {})), !showSelectedPanel ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(arrangeType == 'list'
-                                    ? 'flex flex-col'
-                                    : 'mt-4  grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-5'), children: [(0, jsx_runtime_1.jsx)(FileUploadInput_1.default, { refetch: () => refetch({
-                                            sortBy: 'NEWEST',
-                                        }), updateUploadsList: updateUploadsList, acceptFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, headerOptions: {
-                                            uploadType: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.uploadType,
-                                            modelUploadKey: undefined,
-                                        } }), ((_e = (_d = data === null || data === void 0 ? void 0 : data.uploads) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.length) ? ((_g = (_f = data === null || data === void 0 ? void 0 : data.uploads) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.map((file, idx) => {
-                                        return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (file === null || file === void 0 ? void 0 : file.src) && ((0, jsx_runtime_1.jsx)(UploadModalFileItem_1.default, { allowedFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, arrangeType: arrangeType, maxAttachments: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments, selectedAttachments: selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey], file: file, onClick: () => {
+            }, children: (0, jsx_runtime_1.jsx)(Modal_1.Modal.Section, { children: (0, jsx_runtime_1.jsxs)("div", { className: 'hidable-parent hidable-parent-display  relative w-full  overflow-x-hidden  ', children: [(0, jsx_runtime_1.jsx)("div", { className: '  flex w-full flex-col', children: (0, jsx_runtime_1.jsx)("div", { className: 'z-[999] flex w-full items-center  justify-between space-x-4', children: (0, jsx_runtime_1.jsx)(UploadFilterSection_1.default, { refetch: refetch, openSelectedPanel: showSelectedPanel
+                                        ? () => setShowSelectedPanel(false)
+                                        : () => setShowSelectedPanel(true) }) }) }), (0, jsx_runtime_1.jsx)("div", { id: 'scrollHere', ref: chatWindowRef }), loading && (networkStatus === NetworkStatus.refetch || NetworkStatus.loading) && ((0, jsx_runtime_1.jsxs)("div", { className: 'relative my-1 h-10 bg-blue-400', children: [(0, jsx_runtime_1.jsx)("div", { className: 'absolute top-2 left-1/2  font-semibold', children: "Getting your files ready" }), (0, jsx_runtime_1.jsx)("div", { className: 'animate-loading absolute h-full w-full bg-gradient-to-r from-transparent via-white to-transparent' }), (0, jsx_runtime_1.jsx)("div", { className: 'absolute top-0 left-0 h-full w-4 animate-bounce bg-white opacity-75' }), (0, jsx_runtime_1.jsx)("div", { className: 'absolute top-0 right-0 h-full w-4 animate-bounce bg-white opacity-75' })] })), loading && (networkStatus === NetworkStatus.refetch || NetworkStatus.loading) && ((0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {})), !showSelectedPanel ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)(arrangeType == 'list'
+                                ? 'flex flex-col'
+                                : 'mt-4  grid grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-5'), children: [(0, jsx_runtime_1.jsx)(FileUploadInput_1.default, { refetch: () => refetch({
+                                        sortBy: 'NEWEST',
+                                    }), updateUploadsList: updateUploadsList, acceptFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, headerOptions: {
+                                        uploadType: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.uploadType,
+                                        modelUploadKey: undefined,
+                                    } }), ((_e = (_d = data === null || data === void 0 ? void 0 : data.uploads) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.length) ? ((_g = (_f = data === null || data === void 0 ? void 0 : data.uploads) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.map((file, idx) => {
+                                    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (file === null || file === void 0 ? void 0 : file.src) && ((0, jsx_runtime_1.jsx)(UploadModalFileItem_1.default, { allowedFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, arrangeType: arrangeType, maxAttachments: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments, selectedAttachments: selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey], file: file, onClick: () => {
+                                                updateSelectedAttachments([file], uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey, uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments);
+                                            } })) }, idx));
+                                })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(loading ? 'hidden' : 'flex', 'dtext-2xl items-center justify-center py-6  font-semibold'), children: errorMessage ? errorMessage : ' No files found' }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [((_h = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _h === void 0 ? void 0 : _h.length) ? ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(arrangeType == 'list'
+                                        ? 'flex flex-col'
+                                        : 'mt-4 grid grid-cols-4 gap-2 md:grid-cols-4'), children: selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey].map((file, idx) => {
+                                        return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (file === null || file === void 0 ? void 0 : file.src) && ((0, jsx_runtime_1.jsx)(UploadModalFileItem_1.default, { allowedFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, arrangeType: 'grid', maxAttachments: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments, selectedAttachments: selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey], file: file, onClick: () => {
                                                     updateSelectedAttachments([file], uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey, uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments);
                                                 } })) }, idx));
-                                    })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(loading ? 'hidden' : 'flex', 'dtext-2xl items-center justify-center py-6  font-semibold'), children: errorMessage ? errorMessage : ' No files found' }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [((_h = selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey]) === null || _h === void 0 ? void 0 : _h.length) ? ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)(arrangeType == 'list'
-                                            ? 'flex flex-col'
-                                            : 'mt-4 grid grid-cols-4 gap-2 md:grid-cols-4'), children: selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey].map((file, idx) => {
-                                            return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: (file === null || file === void 0 ? void 0 : file.src) && ((0, jsx_runtime_1.jsx)(UploadModalFileItem_1.default, { allowedFileTypes: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.allowedFileTypes, arrangeType: 'grid', maxAttachments: uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments, selectedAttachments: selectedAttachments[uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey], file: file, onClick: () => {
-                                                        updateSelectedAttachments([file], uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.attachmentKey, uploaderProps === null || uploaderProps === void 0 ? void 0 : uploaderProps.maxAttachments);
-                                                    } })) }, idx));
-                                        }) })) : ((0, jsx_runtime_1.jsx)(Box_1.Box, { padding: '8', children: (0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', children: (0, jsx_runtime_1.jsx)(LegacyCard_1.LegacyCard.Section, { children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', gap: {
-                                                        xs: '8',
-                                                    }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "You haven't selected any files. " }), (0, jsx_runtime_1.jsx)(Button_1.Button, { primary: true, onClick: () => setShowSelectedPanel(false), children: "Select" })] }) }) }) })), ' '] })), loading && networkStatus === NetworkStatus.fetchMore && ((0, jsx_runtime_1.jsx)(Box_1.Box, { padding: '8', children: (0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {}) }) })), !showSelectedPanel &&
-                                ((_j = data === null || data === void 0 ? void 0 : data.uploads) === null || _j === void 0 ? void 0 : _j.paginatorInfo) &&
-                                (!loading || networkStatus === NetworkStatus.fetchMore) ? ((0, jsx_runtime_1.jsx)(V1_1.PaginationV1, { onChange: (page) => {
-                                    refetch({
-                                        page: page,
-                                    });
-                                    scrollToView();
-                                }, activePage: (_k = data === null || data === void 0 ? void 0 : data.uploads) === null || _k === void 0 ? void 0 : _k.paginatorInfo.currentPage, itemsCountPerPage: (_l = data === null || data === void 0 ? void 0 : data.uploads) === null || _l === void 0 ? void 0 : _l.paginatorInfo.perPage, totalItemsCount: (_m = data === null || data === void 0 ? void 0 : data.uploads) === null || _m === void 0 ? void 0 : _m.paginatorInfo.total, hideNavigation: true, pageRangeDisplayed: 4, hideTotalPages: false })) : ((0, jsx_runtime_1.jsx)("div", {}))] }), (0, jsx_runtime_1.jsx)("style", { jsx: 'true', children: `
-              @keyframes loading {
-                0% {
-                  transform: translateX(100%);
-                }
-                100% {
-                  transform: translateX(-100%);
-                }
-              }
-
-              @keyframes bounce {
-                0%,
-                100% {
-                  transform: scaleY(0.4);
-                }
-                50% {
-                  transform: scaleY(1);
-                }
-              }
-
-              .animate-loading {
-                animation: loading 2s linear infinite;
-                background-size: 200% 100%;
-              }
-
-              .animate-bounce {
-                animation: bounce 0.6s infinite alternate;
-              }
-            ` })] }) }) }));
+                                    }) })) : ((0, jsx_runtime_1.jsx)(Box_1.Box, { padding: '8', children: (0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', children: (0, jsx_runtime_1.jsx)(LegacyCard_1.LegacyCard.Section, { children: (0, jsx_runtime_1.jsxs)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', gap: {
+                                                    xs: '8',
+                                                }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "You haven't selected any files. " }), (0, jsx_runtime_1.jsx)(Button_1.Button, { primary: true, onClick: () => setShowSelectedPanel(false), children: "Select" })] }) }) }) })), ' '] })), loading && networkStatus === NetworkStatus.fetchMore && ((0, jsx_runtime_1.jsx)(Box_1.Box, { padding: '8', children: (0, jsx_runtime_1.jsx)(VerticalStack_1.VerticalStack, { align: 'center', inlineAlign: 'center', children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {}) }) })), !showSelectedPanel &&
+                            ((_j = data === null || data === void 0 ? void 0 : data.uploads) === null || _j === void 0 ? void 0 : _j.paginatorInfo) &&
+                            (!loading || networkStatus === NetworkStatus.fetchMore) ? ((0, jsx_runtime_1.jsx)(V1_1.PaginationV1, { onChange: (page) => {
+                                refetch({
+                                    page: page,
+                                });
+                                scrollToView();
+                            }, activePage: (_k = data === null || data === void 0 ? void 0 : data.uploads) === null || _k === void 0 ? void 0 : _k.paginatorInfo.currentPage, itemsCountPerPage: (_l = data === null || data === void 0 ? void 0 : data.uploads) === null || _l === void 0 ? void 0 : _l.paginatorInfo.perPage, totalItemsCount: (_m = data === null || data === void 0 ? void 0 : data.uploads) === null || _m === void 0 ? void 0 : _m.paginatorInfo.total, hideNavigation: true, pageRangeDisplayed: 4, hideTotalPages: false })) : ((0, jsx_runtime_1.jsx)("div", {}))] }) }) }) }));
 };
 exports.UploadModalContainer = UploadModalContainer;
 var NetworkStatus;

package/dist/src/components/VideoThumbnail/VideoThumbnail.classnames.js

@@ -8,6 +8,7 @@ const VideoThumbnailClassnames = {
     "PlayIcon": "VideoThumbnail-PlayIcon",
     "Progress": "VideoThumbnail-Progress",
     "Indicator": "VideoThumbnail-Indicator",
+    "ProgressBar": "VideoThumbnail-ProgressBar",
     "Label": "VideoThumbnail-Label"
 };
 exports.default = VideoThumbnailClassnames;

package/dist/src/components/VideoThumbnail/VideoThumbnail.js

@@ -12,7 +12,7 @@ const media_query_1 = require("../../utilities/media-query");
 const Icon_1 = require("../Icon");
 const LegacyStack_1 = require("../LegacyStack");
 const Text_1 = require("../Text");
-const VideoThumbnail_styles_1 = __importDefault(require("./VideoThumbnail.styles"));
+const VideoThumbnail_classnames_1 = __importDefault(require("./VideoThumbnail.classnames"));
 function VideoThumbnail({ thumbnailUrl, videoLength = 0, videoProgress = 0, showVideoProgress = false, accessibilityLabel, onClick, onBeforeStartPlaying, }) {
     const i18n = (0, i18n_1.useI18n)();
     const { isNavigationCollapsed } = (0, media_query_1.useMediaQuery)();
@@ -22,7 +22,7 @@ function VideoThumbnail({ thumbnailUrl, videoLength = 0, videoProgress = 0, show
     }
     else if (videoLength) {
         const { hours, minutes, seconds } = (0, duration_1.secondsToTimeComponents)(videoLength);
-        buttonLabel = i18n.translate('Polaris.VideoThumbnail.playButtonA11yLabel.defaultWithDuration', {
+        buttonLabel = i18n.translate('Macive.VideoThumbnail.playButtonA11yLabel.defaultWithDuration', {
             duration: i18n.translate((0, duration_1.secondsToDurationTranslationKey)(videoLength), {
                 hourCount: hours,
                 minuteCount: minutes,
@@ -31,16 +31,16 @@ function VideoThumbnail({ thumbnailUrl, videoLength = 0, videoProgress = 0, show
         });
     }
     else {
-        buttonLabel = i18n.translate('Polaris.VideoThumbnail.playButtonA11yLabel.default');
+        buttonLabel = i18n.translate('Macive.VideoThumbnail.playButtonA11yLabel.default');
     }
-    const timeStampMarkup = videoLength ? ((0, jsx_runtime_1.jsx)("div", { className: VideoThumbnail_styles_1.default.Timestamp, children: (0, jsx_runtime_1.jsxs)(LegacyStack_1.LegacyStack, { alignment: 'center', spacing: 'extraTight', children: [(0, jsx_runtime_1.jsx)("span", { className: VideoThumbnail_styles_1.default.PlayIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaPlay }) }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: isNavigationCollapsed ? 'bodyLg' : 'bodyMd', as: 'p', fontWeight: 'semibold', children: (0, duration_1.secondsToTimestamp)(videoLength) })] }) })) : null;
+    const timeStampMarkup = videoLength ? ((0, jsx_runtime_1.jsx)("div", { className: VideoThumbnail_classnames_1.default.Timestamp, children: (0, jsx_runtime_1.jsxs)(LegacyStack_1.LegacyStack, { alignment: 'center', spacing: 'extraTight', children: [(0, jsx_runtime_1.jsx)("span", { className: VideoThumbnail_classnames_1.default.PlayIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaPlay }) }), (0, jsx_runtime_1.jsx)(Text_1.Text, { variant: isNavigationCollapsed ? 'bodyLg' : 'bodyMd', as: 'p', fontWeight: 'semibold', children: (0, duration_1.secondsToTimestamp)(videoLength) })] }) })) : null;
     let progressMarkup = null;
     if (showVideoProgress) {
         const progressValue = calculateProgress(videoLength, videoProgress);
         const progressValuePercents = Math.round(progressValue * 100);
-        progressMarkup = ((0, jsx_runtime_1.jsxs)("div", { className: VideoThumbnail_styles_1.default.Progress, children: [(0, jsx_runtime_1.jsx)("progress", { className: VideoThumbnail_styles_1.default.ProgressBar, value: progressValuePercents, max: '100' }), (0, jsx_runtime_1.jsx)("div", { className: VideoThumbnail_styles_1.default.Indicator, style: { transform: `scaleX(${progressValue})` }, children: (0, jsx_runtime_1.jsxs)("span", { className: VideoThumbnail_styles_1.default.Label, children: [progressValuePercents, "%"] }) })] }));
+        progressMarkup = ((0, jsx_runtime_1.jsxs)("div", { className: VideoThumbnail_classnames_1.default.Progress, children: [(0, jsx_runtime_1.jsx)("progress", { className: VideoThumbnail_classnames_1.default.ProgressBar, value: progressValuePercents, max: '100' }), (0, jsx_runtime_1.jsx)("div", { className: VideoThumbnail_classnames_1.default.Indicator, style: { transform: `scaleX(${progressValue})` }, children: (0, jsx_runtime_1.jsxs)("span", { className: VideoThumbnail_classnames_1.default.Label, children: [progressValuePercents, "%"] }) })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: VideoThumbnail_styles_1.default.ThumbnailContainer, children: [(0, jsx_runtime_1.jsx)("div", { className: VideoThumbnail_styles_1.default.Thumbnail, style: { backgroundImage: `url(${thumbnailUrl})` } }), (0, jsx_runtime_1.jsx)("button", { type: 'button', className: VideoThumbnail_styles_1.default.PlayButton, "aria-label": buttonLabel, onClick: onClick, onMouseEnter: onBeforeStartPlaying, onFocus: onBeforeStartPlaying, onTouchStart: onBeforeStartPlaying, children: timeStampMarkup }), progressMarkup] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: VideoThumbnail_classnames_1.default.ThumbnailContainer, children: [(0, jsx_runtime_1.jsx)("div", { className: VideoThumbnail_classnames_1.default.Thumbnail, style: { backgroundImage: `url(${thumbnailUrl})` } }), (0, jsx_runtime_1.jsx)("button", { type: 'button', className: VideoThumbnail_classnames_1.default.PlayButton, "aria-label": buttonLabel, onClick: onClick, onMouseEnter: onBeforeStartPlaying, onFocus: onBeforeStartPlaying, onTouchStart: onBeforeStartPlaying, children: timeStampMarkup }), progressMarkup] }));
 }
 exports.VideoThumbnail = VideoThumbnail;
 function calculateProgress(videoLength, videoProgress) {

package/dist/src/components/shared.js

@@ -1,29 +1,29 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DATA_ATTRIBUTE = exports.portal = exports.headerCell = exports.dataPolarisTopBar = exports.unstyled = exports.layer = exports.overlay = exports.scrollable = void 0;
+exports.DATA_ATTRIBUTE = exports.portal = exports.headerCell = exports.dataMaciveTopBar = exports.unstyled = exports.layer = exports.overlay = exports.scrollable = void 0;
 exports.scrollable = {
-    props: { 'data-polaris-scrollable': true },
-    selector: '[data-polaris-scrollable]',
+    props: { 'data-macive-scrollable': true },
+    selector: '[data-macive-scrollable]',
 };
 exports.overlay = {
-    props: { 'data-polaris-overlay': true },
-    selector: '[data-polaris-overlay]',
+    props: { 'data-macive-overlay': true },
+    selector: '[data-macive-overlay]',
 };
 exports.layer = {
-    props: { 'data-polaris-layer': true },
-    selector: '[data-polaris-layer]',
+    props: { 'data-macive-layer': true },
+    selector: '[data-macive-layer]',
 };
 exports.unstyled = {
-    props: { 'data-polaris-unstyled': true },
-    selector: '[data-polaris-unstyled]',
+    props: { 'data-macive-unstyled': true },
+    selector: '[data-macive-unstyled]',
 };
-exports.dataPolarisTopBar = {
-    props: { 'data-polaris-top-bar': true },
-    selector: '[data-polaris-top-bar]',
+exports.dataMaciveTopBar = {
+    props: { 'data-macive-top-bar': true },
+    selector: '[data-macive-top-bar]',
 };
 exports.headerCell = {
-    props: { 'data-polaris-header-cell': true },
-    selector: '[data-polaris-header-cell]',
+    props: { 'data-macive-header-cell': true },
+    selector: '[data-macive-header-cell]',
 };
 exports.portal = {
     props: ['data-portal-id'],