@macive/ui 0.0.10 → 0.0.11

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

@@ -1,25 +1,25 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const FrameClassnames = {
-    "visible": "Frame-visible",
-    "hasNav": "Frame-hasNav",
-    "hasTopBar": "Frame-hasTopBar",
-    "Navigation-visible": "Frame-Navigation-visible",
     "Frame": "Frame-Frame",
     "Navigationsss": "Frame-Navigationsss",
     "Navigation": "Frame-Navigation",
-    "Navigation-exitActive": "Frame-Navigation-exitActive",
-    "Navigation-enter": "Frame-Navigation-enter",
-    "Navigation-enterActive": "Frame-Navigation-enterActive",
-    "Navigation-exit": "Frame-Navigation-exit",
+    "hasTopBar": "Frame-hasTopBar",
+    "Navigation-enter": "Frame-enter",
+    "Navigation-enterActive": "Frame-enterActive",
+    "Navigation-exit": "Frame-exit",
+    "Navigation-exitActive": "Frame-exitActive",
     "NavigationDismiss": "Frame-NavigationDismiss",
+    "Navigation-visible": "Frame-visible",
     "TopBar": "Frame-TopBar",
     "ContextualSaveBar": "Frame-ContextualSaveBar",
     "Main": "Frame-Main",
+    "hasNav": "Frame-hasNav",
     "Content": "Frame-Content",
     "GlobalRibbonContainer": "Frame-GlobalRibbonContainer",
     "LoadingBar": "Frame-LoadingBar",
     "Skip": "Frame-Skip",
-    "focused": "Frame-focused"
+    "focused": "Frame-focused",
+    "pressed": "Frame-pressed"
 };
 exports.default = FrameClassnames;

package/dist/src/components/Frame/Frame.js

@@ -158,7 +158,7 @@ class FrameInner extends react_1.PureComponent {
         };
         const navigationMarkup = navigation ? ((0, jsx_runtime_1.jsx)(TrapFocus_1.TrapFocus, { trapping: mobileNavShowing, children: (0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { nodeRef: this.navigationNode, appear: isNavigationCollapsed, exit: isNavigationCollapsed, in: showMobileNavigation, 
                 //@ts-expect-error
-                timeout: parseInt(tokens_1.motion['duration-300'], 10), classNames: navTransitionClasses, children: (0, jsx_runtime_1.jsxs)("div", { ...mobileNavAttributes, "aria-label": i18n.translate('Polaris.Frame.navigationLabel'), ref: this.navigationNode, className: navClassName, onKeyDown: this.handleNavKeydown, id: APP_FRAME_NAV, hidden: mobileNavHidden, children: [navigation, (0, jsx_runtime_1.jsx)("button", { type: 'button', className: Frame_classnames_1.default.NavigationDismiss, onClick: this.handleNavigationDismiss, "aria-hidden": mobileNavHidden || (!isNavigationCollapsed && !showMobileNavigation), "aria-label": i18n.translate('Polaris.Frame.Navigation.closeMobileNavigationLabel'), tabIndex: tabIndex, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaClose }) })] }, 'NavContent') }) })) : null;
+                timeout: parseInt(tokens_1.motion['duration-300'], 10), classNames: navTransitionClasses, children: (0, jsx_runtime_1.jsxs)("div", { ...mobileNavAttributes, "aria-label": i18n.translate('Macive.Frame.navigationLabel'), ref: this.navigationNode, className: navClassName, onKeyDown: this.handleNavKeydown, id: APP_FRAME_NAV, hidden: mobileNavHidden, children: [navigation, (0, jsx_runtime_1.jsx)("button", { type: 'button', className: Frame_classnames_1.default.NavigationDismiss, onClick: this.handleNavigationDismiss, "aria-hidden": mobileNavHidden || (!isNavigationCollapsed && !showMobileNavigation), "aria-label": i18n.translate('Macive.Frame.Navigation.closeMobileNavigationLabel'), tabIndex: tabIndex, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaClose }) })] }, 'NavContent') }) })) : null;
         const loadingMarkup = loadingStack > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: Frame_classnames_1.default.LoadingBar, id: APP_FRAME_LOADING_BAR, children: (0, jsx_runtime_1.jsx)(components_1.Loading, {}) })) : null;
         // const contextualSaveBarMarkup = (
         //   <CSSAnimation in={showContextualSaveBar} className={styles.ContextualSaveBar} type='fade'>
@@ -168,13 +168,13 @@ class FrameInner extends react_1.PureComponent {
         const contextualSaveBarMarkup = ((0, jsx_runtime_1.jsx)("div", { style: {
                 display: showContextualSaveBar ? 'block' : 'none',
             }, children: (0, jsx_runtime_1.jsx)(components_1.ContextualSaveBar, { ...this.contextualSaveBar }) }));
-        const topBarMarkup = topBar ? ((0, jsx_runtime_1.jsx)("div", { className: Frame_classnames_1.default.TopBar, ...shared_1.layer.props, ...shared_1.dataPolarisTopBar.props, id: APP_FRAME_TOP_BAR, children: topBar })) : null;
+        const topBarMarkup = topBar ? ((0, jsx_runtime_1.jsx)("div", { className: Frame_classnames_1.default.TopBar, ...shared_1.layer.props, ...shared_1.dataMaciveTopBar.props, id: APP_FRAME_TOP_BAR, children: topBar })) : null;
         const globalRibbonMarkup = globalRibbon ? ((0, jsx_runtime_1.jsx)("div", { className: Frame_classnames_1.default.GlobalRibbonContainer, ref: this.setGlobalRibbonContainer, children: globalRibbon })) : null;
         const skipClassName = (0, css_1.classNames)(Frame_classnames_1.default.Skip, skipFocused && Frame_classnames_1.default.focused);
         const skipTarget = (skipToContentTarget === null || skipToContentTarget === void 0 ? void 0 : skipToContentTarget.current)
             ? skipToContentTarget.current.id
             : APP_FRAME_MAIN;
-        const skipMarkup = ((0, jsx_runtime_1.jsx)("div", { className: skipClassName, children: (0, jsx_runtime_1.jsx)("a", { href: `#${skipTarget}`, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, children: i18n.translate('Polaris.Frame.skipToContent') }) }));
+        const skipMarkup = ((0, jsx_runtime_1.jsx)("div", { className: skipClassName, children: (0, jsx_runtime_1.jsx)("a", { href: `#${skipTarget}`, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, children: i18n.translate('Macive.Frame.skipToContent') }) }));
         const navigationAttributes = navigation
             ? {
                 'data-has-navigation': true,

package/dist/src/components/Frame/components/CSSAnimation/CSSAnimation.js

@@ -7,7 +7,7 @@ exports.CSSAnimation = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const css_1 = require("../../../../utilities/css");
-const CSSAnimation_styles_1 = __importDefault(require("./CSSAnimation.styles"));
+const CSSAnimation_classnames_1 = __importDefault(require("./CSSAnimation.classnames"));
 var TransitionStatus;
 (function (TransitionStatus) {
     TransitionStatus["Entering"] = "entering";
@@ -36,9 +36,9 @@ function CSSAnimation({ in: inProp, className, type, children }) {
     }, []);
     const wrapperClassName = (0, css_1.classNames)(className, 
     //@ts-expect-error @styles-error
-    CSSAnimation_styles_1.default[(0, css_1.variationName)('start', type)], 
+    CSSAnimation_classnames_1.default[(0, css_1.variationName)('start', type)], 
     //@ts-expect-error @styles-error
-    inProp && CSSAnimation_styles_1.default[(0, css_1.variationName)('end', type)]);
+    inProp && CSSAnimation_classnames_1.default[(0, css_1.variationName)('end', type)]);
     const content = transitionStatus === TransitionStatus.Exited && !inProp ? null : children;
     return ((0, jsx_runtime_1.jsx)("div", { className: wrapperClassName, ref: node, onTransitionEnd: handleTransitionEnd, children: content }));
     function handleTransitionEnd() {

package/dist/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.classnames.js

@@ -7,6 +7,7 @@ const ContextualSaveBarClassnames = {
     "Contents": "ContextualSaveBar-Contents",
     "fullWidth": "ContextualSaveBar-fullWidth",
     "ActionContainer": "ContextualSaveBar-ActionContainer",
-    "Action": "ContextualSaveBar-Action"
+    "Action": "ContextualSaveBar-Action",
+    "ContextualSaveBarWidth": "ContextualSaveBar-ContextualSaveBarWidth"
 };
 exports.default = ContextualSaveBarClassnames;

package/dist/src/components/Frame/components/ContextualSaveBar/ContextualSaveBar.js

@@ -16,7 +16,7 @@ const Image_1 = require("../../../Image");
 const LegacyStack_1 = require("../../../LegacyStack");
 const Text_1 = require("../../../Text");
 const components_1 = require("./components");
-const ContextualSaveBar_styles_1 = __importDefault(require("./ContextualSaveBar.styles"));
+const ContextualSaveBar_classnames_1 = __importDefault(require("./ContextualSaveBar.classnames"));
 function ContextualSaveBar({ alignContentFlush, message, saveAction, discardAction, fullWidth, contextControl, secondaryMenu, }) {
     const i18n = (0, i18n_1.useI18n)();
     const { logo } = (0, frame_1.useFrame)();
@@ -29,7 +29,7 @@ function ContextualSaveBar({ alignContentFlush, message, saveAction, discardActi
     }, [closeDiscardConfirmationModal, discardAction]);
     const discardActionContent = discardAction && discardAction.content
         ? discardAction.content
-        : i18n.translate('Polaris.ContextualSaveBar.discard');
+        : i18n.translate('Macive.ContextualSaveBar.discard');
     let discardActionHandler;
     if (discardAction && discardAction.discardConfirmationModal) {
         discardActionHandler = toggleDiscardConfirmationModal;
@@ -43,13 +43,13 @@ function ContextualSaveBar({ alignContentFlush, message, saveAction, discardActi
     const discardActionMarkup = discardAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { url: discardAction.url, onClick: discardActionHandler, loading: discardAction.loading, disabled: discardAction.disabled, accessibilityLabel: discardAction.content, children: discardActionContent }));
     const saveActionContent = saveAction && saveAction.content
         ? saveAction.content
-        : i18n.translate('Polaris.ContextualSaveBar.save');
+        : i18n.translate('Macive.ContextualSaveBar.save');
     const saveActionMarkup = saveAction && ((0, jsx_runtime_1.jsx)(Button_1.Button, { primary: true, url: saveAction.url, onClick: saveAction.onAction, loading: saveAction.loading, disabled: saveAction.disabled, accessibilityLabel: saveAction.content, 
         //@ts-expect-error
         type: saveAction.type, children: saveActionContent }));
     const width = (0, get_width_1.getWidth)(logo, 104);
     const imageMarkup = logo && ((0, jsx_runtime_1.jsx)(Image_1.Image, { source: logo.contextualSaveBarSource || '', alt: '', style: { width } }));
-    const logoMarkup = alignContentFlush || contextControl ? null : ((0, jsx_runtime_1.jsx)("div", { className: `${ContextualSaveBar_styles_1.default.LogoContainer} !hidden md:!flex`, style: {
+    const logoMarkup = alignContentFlush || contextControl ? null : ((0, jsx_runtime_1.jsx)("div", { className: `${ContextualSaveBar_classnames_1.default.LogoContainer} !hidden md:!flex`, style: {
             width,
             alignItems: 'center',
             backgroundColor: 'initial',
@@ -58,15 +58,13 @@ function ContextualSaveBar({ alignContentFlush, message, saveAction, discardActi
             height: '100%',
             padding: '0 1rem ',
         }, children: imageMarkup }));
-    const contextControlMarkup = contextControl ? ((0, jsx_runtime_1.jsx)("div", { className: ContextualSaveBar_styles_1.default.ContextControl, children: contextControl })) : null;
-    const contentsClassName = (0, css_1.classNames)(ContextualSaveBar_styles_1.default.Contents, fullWidth && ContextualSaveBar_styles_1.default.fullWidth);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { jsx: 'true', children: `
-        @media (min-width: 768px) {
-          .ContextualSaveBarWidth {
-            width: calc(100vw - 18rem);
-          }
-        }
-      ` }), (0, jsx_runtime_1.jsxs)("div", { className: `${ContextualSaveBar_styles_1.default.ContextualSaveBar} ${fullWidth ? 'fixed left-0 top-0' : 'ContextualSaveBarWidth fixed bottom-0'} z-[513] w-full `, children: [contextControlMarkup, logoMarkup, (0, jsx_runtime_1.jsxs)("div", { className: contentsClassName, style: {
+    const contextControlMarkup = contextControl ? ((0, jsx_runtime_1.jsx)("div", { className: ContextualSaveBar_classnames_1.default.ContextControl, children: contextControl })) : null;
+    const contentsClassName = (0, css_1.classNames)(ContextualSaveBar_classnames_1.default.Contents, fullWidth && ContextualSaveBar_classnames_1.default.fullWidth);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { 
+                // className={`${styles.ContextualSaveBar} ${
+                //   fullWidth ? 'fixed left-0 top-0' : styles.ContextualSaveBarWidth 'ContextualSaveBarWidth fixed bottom-0'
+                // } z-[513] w-full `}
+                className: `${ContextualSaveBar_classnames_1.default.ContextualSaveBar} ${fullWidth ? '' : ContextualSaveBar_classnames_1.default.ContextualSaveBarWidth} `, children: [contextControlMarkup, logoMarkup, (0, jsx_runtime_1.jsxs)("div", { className: contentsClassName, style: {
                             alignItems: 'center',
                             display: 'flex',
                             flex: ' 1 1 auto',
@@ -77,6 +75,6 @@ function ContextualSaveBar({ alignContentFlush, message, saveAction, discardActi
                             minWidth: '0.0625rem',
                             padding: '0 var(--p-space-4)',
                             width: '100%',
-                        }, children: [message && ((0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'h2', variant: 'headingMd', color: 'text-inverse', truncate: true, children: message })), (0, jsx_runtime_1.jsx)("div", { className: ContextualSaveBar_styles_1.default.ActionContainer, children: (0, jsx_runtime_1.jsxs)(LegacyStack_1.LegacyStack, { spacing: 'tight', wrap: false, children: [secondaryMenu, discardActionMarkup, saveActionMarkup] }) })] })] }), discardConfirmationModalMarkup] }));
+                        }, children: [message && ((0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'h2', variant: 'headingMd', color: 'text-inverse', truncate: true, children: message })), (0, jsx_runtime_1.jsx)("div", { className: ContextualSaveBar_classnames_1.default.ActionContainer, children: (0, jsx_runtime_1.jsxs)(LegacyStack_1.LegacyStack, { spacing: 'tight', wrap: false, children: [secondaryMenu, discardActionMarkup, saveActionMarkup] }) })] })] }), discardConfirmationModalMarkup] }));
 }
 exports.ContextualSaveBar = ContextualSaveBar;

package/dist/src/components/Frame/components/ContextualSaveBar/components/DiscardConfirmationModal/DiscardConfirmationModal.js

@@ -6,15 +6,15 @@ const i18n_1 = require("../../../../../../utilities/i18n");
 const Modal_1 = require("../../../../../Modal");
 function DiscardConfirmationModal({ open, onDiscard, onCancel, }) {
     const i18n = (0, i18n_1.useI18n)();
-    return ((0, jsx_runtime_1.jsx)(Modal_1.Modal, { title: i18n.translate('Polaris.DiscardConfirmationModal.title'), open: open, onClose: onCancel, primaryAction: {
-            content: i18n.translate('Polaris.DiscardConfirmationModal.primaryAction'),
+    return ((0, jsx_runtime_1.jsx)(Modal_1.Modal, { title: i18n.translate('Macive.DiscardConfirmationModal.title'), open: open, onClose: onCancel, primaryAction: {
+            content: i18n.translate('Macive.DiscardConfirmationModal.primaryAction'),
             destructive: true,
             onAction: onDiscard,
         }, secondaryActions: [
             {
-                content: i18n.translate('Polaris.DiscardConfirmationModal.secondaryAction'),
+                content: i18n.translate('Macive.DiscardConfirmationModal.secondaryAction'),
                 onAction: onCancel,
             },
-        ], sectioned: true, children: i18n.translate('Polaris.DiscardConfirmationModal.message') }));
+        ], sectioned: true, children: i18n.translate('Macive.DiscardConfirmationModal.message') }));
 }
 exports.DiscardConfirmationModal = DiscardConfirmationModal;

package/dist/src/components/Frame/components/Loading/Loading.js

@@ -8,7 +8,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const i18n_1 = require("../../../../utilities/i18n");
 const use_is_mounted_ref_1 = require("../../../../utilities/use-is-mounted-ref");
-const Loading_styles_1 = __importDefault(require("./Loading.styles"));
+const Loading_classnames_1 = __importDefault(require("./Loading.classnames"));
 const STUCK_THRESHOLD = 99;
 function Loading() {
     const i18n = (0, i18n_1.useI18n)();
@@ -30,6 +30,6 @@ function Loading() {
     const customStyles = {
         transform: `scaleX(${Math.floor(progress) / 100})`,
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: Loading_styles_1.default.Loading, "aria-valuenow": progress, "aria-valuemin": 0, "aria-valuemax": 100, role: 'progressbar', "aria-label": i18n.translate('Polaris.Loading.label'), children: (0, jsx_runtime_1.jsx)("div", { className: Loading_styles_1.default.Level, style: customStyles, onTransitionEnd: () => setAnimating(false) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: Loading_classnames_1.default.Loading, "aria-valuenow": progress, "aria-valuemin": 0, "aria-valuemax": 100, role: 'progressbar', "aria-label": i18n.translate('Macive.Loading.label'), children: (0, jsx_runtime_1.jsx)("div", { className: Loading_classnames_1.default.Level, style: customStyles, onTransitionEnd: () => setAnimating(false) }) }));
 }
 exports.Loading = Loading;

package/dist/src/components/Frame/components/Toast/Toast.js

@@ -14,7 +14,7 @@ const HorizontalStack_1 = require("../../../HorizontalStack");
 const Icon_1 = require("../../../Icon");
 const KeypressListener_1 = require("../../../KeypressListener");
 const Text_1 = require("../../../Text");
-const Toast_styles_1 = __importDefault(require("./Toast.styles"));
+const Toast_classnames_1 = __importDefault(require("./Toast.classnames"));
 exports.DEFAULT_TOAST_DURATION = 5000;
 exports.DEFAULT_TOAST_DURATION_WITH_ACTION = 10000;
 function Toast({ content, onDismiss, duration, error, action }) {
@@ -32,10 +32,10 @@ function Toast({ content, onDismiss, duration, error, action }) {
             clearTimeout(timer);
         };
     }, [action, duration, onDismiss]);
-    const dismissMarkup = ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: Toast_styles_1.default.CloseButton, onClick: onDismiss, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCloseCircle }) }));
-    const actionMarkup = action ? ((0, jsx_runtime_1.jsx)("div", { className: Toast_styles_1.default.Action, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, monochrome: true, size: 'slim', onClick: action.onAction, children: action.content }) })) : null;
-    const leadingIconMarkup = error ? ((0, jsx_runtime_1.jsx)("div", { className: Toast_styles_1.default.LeadingIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaError, color: 'base' }) })) : null;
-    const className = (0, css_1.classNames)(Toast_styles_1.default.Toast, error && Toast_styles_1.default.error);
+    const dismissMarkup = ((0, jsx_runtime_1.jsx)("button", { type: 'button', className: Toast_classnames_1.default.CloseButton, onClick: onDismiss, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaCloseCircle }) }));
+    const actionMarkup = action ? ((0, jsx_runtime_1.jsx)("div", { className: Toast_classnames_1.default.Action, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, monochrome: true, size: 'slim', onClick: action.onAction, children: action.content }) })) : null;
+    const leadingIconMarkup = error ? ((0, jsx_runtime_1.jsx)("div", { className: Toast_classnames_1.default.LeadingIcon, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaError, color: 'base' }) })) : null;
+    const className = (0, css_1.classNames)(Toast_classnames_1.default.Toast, error && Toast_classnames_1.default.error);
     return ((0, jsx_runtime_1.jsxs)("div", { className: className, children: [(0, jsx_runtime_1.jsx)(KeypressListener_1.KeypressListener, { keyCode: typos_1.Key.Escape, handler: onDismiss }), leadingIconMarkup, (0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { gap: '4', blockAlign: 'center', children: (0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', fontWeight: 'medium', children: content }) }), actionMarkup, dismissMarkup] }));
 }
 exports.Toast = Toast;

package/dist/src/components/Frame/components/ToastManager/ToastManager.classnames.js

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const ToastManagerClassnames = {
-    "ToastWrapper-enter": "ToastManager-ToastWrapper-enter",
     "ToastManager": "ToastManager-ToastManager",
     "ToastWrapper": "ToastManager-ToastWrapper",
-    "ToastWrapper-exit": "ToastManager-ToastWrapper-exit",
-    "ToastWrapper-enter-done": "ToastManager-ToastWrapper-enter-done"
+    "ToastWrapper-enter": "ToastManager-enter",
+    "ToastWrapper-exit": "ToastManager-exit",
+    "ToastWrapper-enter-done": "ToastManager-enter-done"
 };
 exports.default = ToastManagerClassnames;

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const GridClassnames = {
+    "Grid": "Grid-Grid"
+};
+exports.default = GridClassnames;

package/dist/src/components/Grid/Grid.js

@@ -1,45 +1,37 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Grid = void 0;
+exports.formatAreas = exports.Grid = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("../../utils");
-const Cell_1 = require("./Cell");
-function Grid({ as: Component = 'div', className, flow = 'row', gap = 'default', items = 4, layout = 'default', color, width, divide, ...props }) {
-    const layouts = {
-        default: `grid-cols-1 ${items === 2 && 'md:grid-cols-2'}  ${items === 3 && 'sm:grid-cols-3'} ${items > 3 && 'md:grid-cols-3'} ${items >= 4 && 'lg:grid-cols-4'}`,
-        products: `grid-cols-2  ${items >= 3 && 'grid-cols-3'} gap-4 ${items >= 3 && 'md:grid-cols-3'} ${items >= 4 && 'lg:grid-cols-4'} ${items >= 5 && 'lg:grid-cols-5 md:!gap-x-4 '}`,
-        auto: 'auto-cols-auto',
-        blog: `grid-cols-2 pt-24`,
+const components_1 = require("./components");
+const Grid_classnames_1 = __importDefault(require("./Grid.classnames"));
+const Grid = function Grid({ gap, areas, children, columns }) {
+    const style = {
+        '--pc-grid-gap-xs': gap === null || gap === void 0 ? void 0 : gap.xs,
+        '--pc-grid-gap-sm': gap === null || gap === void 0 ? void 0 : gap.sm,
+        '--pc-grid-gap-md': gap === null || gap === void 0 ? void 0 : gap.md,
+        '--pc-grid-gap-lg': gap === null || gap === void 0 ? void 0 : gap.lg,
+        '--pc-grid-gap-xl': gap === null || gap === void 0 ? void 0 : gap.xl,
+        '--pc-grid-columns-xs': columns === null || columns === void 0 ? void 0 : columns.xs,
+        '--pc-grid-columns-sm': columns === null || columns === void 0 ? void 0 : columns.sm,
+        '--pc-grid-columns-md': columns === null || columns === void 0 ? void 0 : columns.md,
+        '--pc-grid-columns-lg': columns === null || columns === void 0 ? void 0 : columns.lg,
+        '--pc-grid-columns-xl': columns === null || columns === void 0 ? void 0 : columns.xl,
+        '--pc-grid-areas-xs': formatAreas(areas === null || areas === void 0 ? void 0 : areas.xs),
+        '--pc-grid-areas-sm': formatAreas(areas === null || areas === void 0 ? void 0 : areas.sm),
+        '--pc-grid-areas-md': formatAreas(areas === null || areas === void 0 ? void 0 : areas.md),
+        '--pc-grid-areas-lg': formatAreas(areas === null || areas === void 0 ? void 0 : areas.lg),
+        '--pc-grid-areas-xl': formatAreas(areas === null || areas === void 0 ? void 0 : areas.xl),
     };
-    const gaps = {
-        default: 'grid gap-2 gap-y-4 md:gap-3 lg:gap-3 lg:gap-x-3',
-        blog: 'grid gap-6',
-        thin: 'gap-4 ',
-        none: 'gap-0',
-    };
-    const flows = {
-        row: 'grid-flow-row',
-        col: 'grid-flow-col',
-    };
-    const colorClasses = {
-        text: 'bg-gray-800 dark:bg-white',
-        success: 'bg-green-600',
-        critical: 'bg-red-600',
-        warning: 'bg-yellow-600',
-        subdued: 'bg-gray-100',
-        'text-inverse': 'text-white',
-        //@ts-expect-error undefined
-    }[color];
-    function getGapClasses(gap) {
-        if (typeof gap === 'string') {
-            //@ts-expect-error gap issues
-            return gaps[gap];
-        }
-        return getGapClasses;
-    }
-    const classByGap = getGapClasses(gap);
-    const styles = (0, utils_1.cn)(flows[flow], classByGap, layouts[layout], colorClasses, color && 'p-4 rounded-md', `w-${width}`, className, 'dark:divide-gray-600', divide ? (flow == 'row' ? 'md:divide-x ' : 'md:divide-y') : '');
-    return (0, jsx_runtime_1.jsx)(Component, { ...props, className: styles });
-}
+    return ((0, jsx_runtime_1.jsx)("div", { className: Grid_classnames_1.default.Grid, style: style, children: children }));
+};
 exports.Grid = Grid;
-Grid.Cell = Cell_1.Cell;
+function formatAreas(areas) {
+    if (!areas)
+        return;
+    return `'${areas === null || areas === void 0 ? void 0 : areas.join(`' '`)}'`;
+}
+exports.formatAreas = formatAreas;
+exports.Grid.Cell = components_1.Cell;

package/dist/src/components/Grid/components/Cell/Cell.classnames.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const CellClassnames = {
+    "Cell": "Cell-Cell",
+    "Cell-1-column-xs": "Cell-1-column-xs",
+    "Cell-2-column-xs": "Cell-2-column-xs",
+    "Cell-3-column-xs": "Cell-3-column-xs",
+    "Cell-4-column-xs": "Cell-4-column-xs",
+    "Cell-5-column-xs": "Cell-5-column-xs",
+    "Cell-6-column-xs": "Cell-6-column-xs",
+    "Cell-1-column-sm": "Cell-1-column-sm",
+    "Cell-2-column-sm": "Cell-2-column-sm",
+    "Cell-3-column-sm": "Cell-3-column-sm",
+    "Cell-4-column-sm": "Cell-4-column-sm",
+    "Cell-5-column-sm": "Cell-5-column-sm",
+    "Cell-6-column-sm": "Cell-6-column-sm",
+    "Cell-1-column-md": "Cell-1-column-md",
+    "Cell-2-column-md": "Cell-2-column-md",
+    "Cell-3-column-md": "Cell-3-column-md",
+    "Cell-4-column-md": "Cell-4-column-md",
+    "Cell-5-column-md": "Cell-5-column-md",
+    "Cell-6-column-md": "Cell-6-column-md",
+    "Cell-1-column-lg": "Cell-1-column-lg",
+    "Cell-2-column-lg": "Cell-2-column-lg",
+    "Cell-3-column-lg": "Cell-3-column-lg",
+    "Cell-4-column-lg": "Cell-4-column-lg",
+    "Cell-5-column-lg": "Cell-5-column-lg",
+    "Cell-6-column-lg": "Cell-6-column-lg",
+    "Cell-7-column-lg": "Cell-7-column-lg",
+    "Cell-8-column-lg": "Cell-8-column-lg",
+    "Cell-9-column-lg": "Cell-9-column-lg",
+    "Cell-10-column-lg": "Cell-10-column-lg",
+    "Cell-11-column-lg": "Cell-11-column-lg",
+    "Cell-12-column-lg": "Cell-12-column-lg",
+    "Cell-1-column-xl": "Cell-1-column-xl",
+    "Cell-2-column-xl": "Cell-2-column-xl",
+    "Cell-3-column-xl": "Cell-3-column-xl",
+    "Cell-4-column-xl": "Cell-4-column-xl",
+    "Cell-5-column-xl": "Cell-5-column-xl",
+    "Cell-6-column-xl": "Cell-6-column-xl",
+    "Cell-7-column-xl": "Cell-7-column-xl",
+    "Cell-8-column-xl": "Cell-8-column-xl",
+    "Cell-9-column-xl": "Cell-9-column-xl",
+    "Cell-10-column-xl": "Cell-10-column-xl",
+    "Cell-11-column-xl": "Cell-11-column-xl",
+    "Cell-12-column-xl": "Cell-12-column-xl"
+};
+exports.default = CellClassnames;

package/dist/src/components/Grid/components/Cell/Cell.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cell = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("../../../../utilities/css");
+const Cell_classnames_1 = __importDefault(require("./Cell.classnames"));
+function Cell({ area: gridArea, column, columnSpan, row, children }) {
+    const className = (0, css_1.classNames)(Cell_classnames_1.default.Cell, (columnSpan === null || columnSpan === void 0 ? void 0 : columnSpan.xs) && Cell_classnames_1.default[`Cell-${columnSpan.xs}-column-xs`], (columnSpan === null || columnSpan === void 0 ? void 0 : columnSpan.sm) && Cell_classnames_1.default[`Cell-${columnSpan.sm}-column-sm`], (columnSpan === null || columnSpan === void 0 ? void 0 : columnSpan.md) && Cell_classnames_1.default[`Cell-${columnSpan.md}-column-md`], (columnSpan === null || columnSpan === void 0 ? void 0 : columnSpan.lg) && Cell_classnames_1.default[`Cell-${columnSpan.lg}-column-lg`], (columnSpan === null || columnSpan === void 0 ? void 0 : columnSpan.xl) && Cell_classnames_1.default[`Cell-${columnSpan.xl}-column-xl`]);
+    const style = {
+        gridArea,
+        '--pc-column-xs': column === null || column === void 0 ? void 0 : column.xs,
+        '--pc-column-sm': column === null || column === void 0 ? void 0 : column.sm,
+        '--pc-column-md': column === null || column === void 0 ? void 0 : column.md,
+        '--pc-column-lg': column === null || column === void 0 ? void 0 : column.lg,
+        '--pc-column-xl': column === null || column === void 0 ? void 0 : column.xl,
+        '--pc-row-xs': row === null || row === void 0 ? void 0 : row.xs,
+        '--pc-row-sm': row === null || row === void 0 ? void 0 : row.sm,
+        '--pc-row-md': row === null || row === void 0 ? void 0 : row.md,
+        '--pc-row-lg': row === null || row === void 0 ? void 0 : row.lg,
+        '--pc-row-xl': row === null || row === void 0 ? void 0 : row.xl,
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, style: style, children: children }));
+}
+exports.Cell = Cell;

package/dist/src/components/{Text/index copy.js → Grid/components/Cell/index.js}

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Text"), exports);
+__exportStar(require("./Cell"), exports);

package/dist/src/components/{RadioButton copy/index.js → Grid/components/index.js}

@@ -14,4 +14,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./RadioButton"), exports);
+__exportStar(require("./Cell"), exports);

package/dist/src/components/Grid/index.js

@@ -14,5 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Cell"), exports);
+__exportStar(require("./components"), exports);
 __exportStar(require("./Grid"), exports);

package/dist/src/components/HorizontalGrid/HorizontalGrid.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.HorizontalGrid = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const css_1 = require("../../utilities/css");
-const HorizontalGrid_styles_1 = __importDefault(require("./HorizontalGrid.styles"));
+const HorizontalGrid_classnames_1 = __importDefault(require("./HorizontalGrid.classnames"));
 function HorizontalGrid({ children, columns, gap, alignItems }) {
     const style = {
         ...(0, css_1.getResponsiveValue)('horizontal-grid', 'grid-template-columns', formatHorizontalGrid(columns)),
         ...(0, css_1.getResponsiveProps)('horizontal-grid', 'gap', 'space', gap),
         '--pc-horizontal-grid-align-items': alignItems,
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: HorizontalGrid_styles_1.default.HorizontalGrid, style: 
+    return ((0, jsx_runtime_1.jsx)("div", { className: HorizontalGrid_classnames_1.default.HorizontalGrid, style: 
         // sanitizeCustomProperties(style),
         {
             gridTemplateColumns: '1fr auto',

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

@@ -5,10 +5,14 @@ const IconClassnames = {
     "applyColor": "Icon-applyColor",
     "hasBackdrop": "Icon-hasBackdrop",
     "colorBase": "Icon-colorBase",
+    "colorSubdued": "Icon-colorSubdued",
     "colorCritical": "Icon-colorCritical",
+    "colorInteractive": "Icon-colorInteractive",
     "colorWarning": "Icon-colorWarning",
     "colorHighlight": "Icon-colorHighlight",
     "colorSuccess": "Icon-colorSuccess",
+    "colorPrimary": "Icon-colorPrimary",
+    "colorMagic": "Icon-colorMagic",
     "Svg": "Icon-Svg",
     "Img": "Icon-Img",
     "Placeholder": "Icon-Placeholder"

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

@@ -2,17 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const IndexFiltersClassnames = {
     "IndexFiltersWrapper": "IndexFilters-IndexFiltersWrapper",
-    "IndexFilters.IndexFiltersSticky": "IndexFilters-IndexFilters.IndexFiltersSticky",
-    "IndexFilters.IndexFiltersStickyFlush": "IndexFilters-IndexFilters.IndexFiltersStickyFlush",
+    "IndexFilters": "IndexFilters-IndexFilters",
+    "IndexFiltersSticky": "IndexFilters-IndexFiltersSticky",
+    "IndexFiltersStickyFlush": "IndexFilters-IndexFiltersStickyFlush",
     "TabsWrapper": "IndexFilters-TabsWrapper",
     "SmallScreenTabsWrapper": "IndexFilters-SmallScreenTabsWrapper",
     "TabsWrapperLoading": "IndexFilters-TabsWrapperLoading",
     "TabsLoading": "IndexFilters-TabsLoading",
     "ActionWrap": "IndexFilters-ActionWrap",
     "Spinner": "IndexFilters-Spinner",
-    "TabsInner": "IndexFilters-TabsInner",
-    "IndexFiltersStickyFlush": "IndexFilters-IndexFiltersStickyFlush",
-    "IndexFilters": "IndexFilters-IndexFilters",
-    "IndexFiltersSticky": "IndexFilters-IndexFiltersSticky"
+    "TabsInner": "IndexFilters-TabsInner"
 };
 exports.default = IndexFiltersClassnames;

package/dist/src/components/IndexFilters/IndexFilters.js

@@ -122,9 +122,9 @@ function IndexFilters({ tabs, selected, onSelect, onSort, onSortKeyChange, onSor
     function handleClickFilterButton() {
         beginEdit();
     }
-    const searchFilterTooltip = filteringAccessibilityTooltip || i18n.translate('Polaris.IndexFilters.searchFilterTooltip');
+    const searchFilterTooltip = filteringAccessibilityTooltip || i18n.translate('Macive.IndexFilters.searchFilterTooltip');
     const searchFilterAriaLabel = filteringAccessibilityLabel ||
-        i18n.translate('Polaris.IndexFilters.searchFilterAccessibilityLabel');
+        i18n.translate('Macive.IndexFilters.searchFilterAccessibilityLabel');
     const isLoading = loading || isActionLoading;
     function onPressEscape() {
         cancelAction === null || cancelAction === void 0 ? void 0 : cancelAction.onAction();

package/dist/src/components/IndexFilters/components/FilterButton/FilterButton.classnames.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const FilterButtonClassnames = {
     "FilterButton": "FilterButton-FilterButton",
-    "FilterButton.Disabled": "FilterButton-FilterButton.Disabled"
+    "pressed": "FilterButton-pressed",
+    "Disabled": "FilterButton-Disabled"
 };
 exports.default = FilterButtonClassnames;

package/dist/src/components/IndexFilters/components/FilterButton/FilterButton.js

@@ -7,9 +7,9 @@ exports.FilterButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const css_1 = require("../../../../utilities/css");
 const UnstyledButton_1 = require("../../../UnstyledButton");
-const FilterButton_styles_1 = __importDefault(require("./FilterButton.styles"));
+const FilterButton_classnames_1 = __importDefault(require("./FilterButton.classnames"));
 function FilterButton({ onClick, 'aria-label': ariaLabel, children, disabled, }) {
-    const classes = (0, css_1.classNames)(FilterButton_styles_1.default.FilterButton, disabled && FilterButton_styles_1.default.Disabled);
+    const classes = (0, css_1.classNames)(FilterButton_classnames_1.default.FilterButton, disabled && FilterButton_classnames_1.default.Disabled);
     return ((0, jsx_runtime_1.jsx)(UnstyledButton_1.UnstyledButton, { className: classes, onClick: onClick, "aria-label": ariaLabel, disabled: disabled, children: children }));
 }
 exports.FilterButton = FilterButton;

package/dist/src/components/IndexFilters/components/SortButton/SortButton.js

@@ -70,7 +70,7 @@ function SortButton({ choices, selected, onChange, disabled, onChangeKey, onChan
         const [currentKey] = choice.value.split(' ');
         return currentKey === selectedValueKey;
     });
-    const sortButton = ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: i18n.translate('Polaris.IndexFilters.SortButton.tooltip'), preferredPosition: 'above', hoverDelay: 400, children: (0, jsx_runtime_1.jsx)(FilterButton_1.FilterButton, { onClick: handleClick, "aria-label": i18n.translate('Polaris.IndexFilters.SortButton.ariaLabel'), disabled: disabled, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaSort, color: 'base' }) }) }));
-    return ((0, jsx_runtime_1.jsxs)(Popover_1.Popover, { active: active && !disabled, activator: sortButton, autofocusTarget: 'first-node', onClose: handleClose, fluidContent: true, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { minWidth: '148px', padding: '4', borderBlockEndWidth: '1', borderColor: 'border-subdued', children: (0, jsx_runtime_1.jsx)(ChoiceList_1.ChoiceList, { title: i18n.translate('Polaris.IndexFilters.SortButton.title'), choices: choiceListChoices, selected: selected, onChange: handleChangeChoiceList }) }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { padding: '4', children: [(0, jsx_runtime_1.jsx)(components_1.DirectionButton, { direction: 'asc', active: selectedDirection === SortButtonDirection.Asc, onClick: handleChangeDirection, value: (_a = selectedChoices === null || selectedChoices === void 0 ? void 0 : selectedChoices[0]) === null || _a === void 0 ? void 0 : _a.value, children: (_b = selectedChoices === null || selectedChoices === void 0 ? void 0 : selectedChoices[0]) === null || _b === void 0 ? void 0 : _b.directionLabel }), (0, jsx_runtime_1.jsx)(components_1.DirectionButton, { direction: 'desc', active: selectedDirection === SortButtonDirection.Desc, onClick: handleChangeDirection, value: (_c = selectedChoices === null || selectedChoices === void 0 ? void 0 : selectedChoices[1]) === null || _c === void 0 ? void 0 : _c.value, children: (_d = selectedChoices === null || selectedChoices === void 0 ? void 0 : selectedChoices[1]) === null || _d === void 0 ? void 0 : _d.directionLabel })] })] }));
+    const sortButton = ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { content: i18n.translate('Macive.IndexFilters.SortButton.tooltip'), preferredPosition: 'above', hoverDelay: 400, children: (0, jsx_runtime_1.jsx)(FilterButton_1.FilterButton, { onClick: handleClick, "aria-label": i18n.translate('Macive.IndexFilters.SortButton.ariaLabel'), disabled: disabled, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaSort, color: 'base' }) }) }));
+    return ((0, jsx_runtime_1.jsxs)(Popover_1.Popover, { active: active && !disabled, activator: sortButton, autofocusTarget: 'first-node', onClose: handleClose, fluidContent: true, children: [(0, jsx_runtime_1.jsx)(Box_1.Box, { minWidth: '148px', padding: '4', borderBlockEndWidth: '1', borderColor: 'border-subdued', children: (0, jsx_runtime_1.jsx)(ChoiceList_1.ChoiceList, { title: i18n.translate('Macive.IndexFilters.SortButton.title'), choices: choiceListChoices, selected: selected, onChange: handleChangeChoiceList }) }), (0, jsx_runtime_1.jsxs)(Box_1.Box, { padding: '4', children: [(0, jsx_runtime_1.jsx)(components_1.DirectionButton, { direction: 'asc', active: selectedDirection === SortButtonDirection.Asc, onClick: handleChangeDirection, value: (_a = selectedChoices === null || selectedChoices === void 0 ? void 0 : selectedChoices[0]) === null || _a === void 0 ? void 0 : _a.value, children: (_b = selectedChoices === null || selectedChoices === void 0 ? void 0 : selectedChoices[0]) === null || _b === void 0 ? void 0 : _b.directionLabel }), (0, jsx_runtime_1.jsx)(components_1.DirectionButton, { direction: 'desc', active: selectedDirection === SortButtonDirection.Desc, onClick: handleChangeDirection, value: (_c = selectedChoices === null || selectedChoices === void 0 ? void 0 : selectedChoices[1]) === null || _c === void 0 ? void 0 : _c.value, children: (_d = selectedChoices === null || selectedChoices === void 0 ? void 0 : selectedChoices[1]) === null || _d === void 0 ? void 0 : _d.directionLabel })] })] }));
 }
 exports.SortButton = SortButton;

package/dist/src/components/IndexFilters/components/SortButton/components/DirectionButton/DirectionButton.classnames.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const DirectionButtonClassnames = {
     "DirectionButton": "DirectionButton-DirectionButton",
-    "DirectionButton-active": "DirectionButton-DirectionButton-active",
+    "DirectionButton-active": "DirectionButton-active",
     "Label": "DirectionButton-Label"
 };
 exports.default = DirectionButtonClassnames;