@macive/ui 0.0.1 → 0.0.2

package/dist/src/components/Listbox/components/Option/Option.js

@@ -0,0 +1,50 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Option = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const autocomplete_1 = require("../../../../utilities/autocomplete");
+const css_1 = require("../../../../utilities/css");
+const listbox_1 = require("../../../../utilities/listbox");
+const context_1 = require("../../../../utilities/listbox/context");
+const unique_id_1 = require("../../../../utilities/unique-id");
+const UnstyledLink_1 = require("../../../UnstyledLink");
+const Section_1 = require("../Section");
+const TextOption_1 = require("../TextOption");
+const Option_classnames_1 = __importDefault(require("./Option.classnames"));
+exports.Option = (0, react_1.memo)(function Option({ value, children, selected, disabled = false, accessibilityLabel, divider, }) {
+    const { onOptionSelect } = (0, listbox_1.useListbox)();
+    const isAction = (0, react_1.useContext)(context_1.ActionContext);
+    const { role, url, external, onAction, destructive } = (0, react_1.useContext)(autocomplete_1.MappedActionContext);
+    const listItemRef = (0, react_1.useRef)(null);
+    const domId = (0, unique_id_1.useUniqueId)('ListboxOption');
+    const sectionId = (0, Section_1.useSection)();
+    const isWithinSection = Boolean(sectionId);
+    const handleOptionSelect = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onAction && onAction();
+        if (listItemRef.current && !onAction) {
+            onOptionSelect({
+                domId,
+                value,
+                element: listItemRef.current,
+                disabled,
+            });
+        }
+    }, [domId, onOptionSelect, value, disabled, onAction]);
+    // prevents lost of focus on Textfield
+    const handleMouseDown = (event) => {
+        event.preventDefault();
+    };
+    const content = typeof children === 'string' ? ((0, jsx_runtime_1.jsx)(TextOption_1.TextOption, { selected: selected, disabled: disabled, children: children })) : (children);
+    const sectionAttributes = {
+        [Section_1.listboxWithinSectionDataSelector.attribute]: isWithinSection,
+    };
+    const legacyRoleSupport = role || 'option';
+    const contentMarkup = url ? ((0, jsx_runtime_1.jsx)(UnstyledLink_1.UnstyledLink, { url: url, external: external, children: content })) : (content);
+    return ((0, jsx_runtime_1.jsx)("li", { ...sectionAttributes, "data-listbox-option": true, "data-listbox-option-action": isAction, "data-listbox-option-value": value, "data-listbox-option-destructive": destructive, "data-within-section": isWithinSection, className: (0, css_1.classNames)(Option_classnames_1.default.Option, divider && Option_classnames_1.default.divider), id: domId, ref: listItemRef, tabIndex: -1, role: legacyRoleSupport, "aria-label": accessibilityLabel, "aria-selected": selected, "aria-disabled": disabled, onClick: disabled ? undefined : handleOptionSelect, onKeyDown: disabled ? undefined : handleOptionSelect, onMouseDown: handleMouseDown, children: contentMarkup }));
+});

package/dist/src/components/Listbox/components/Option/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./Option"), exports);

package/dist/src/components/Listbox/components/Section/Section.classnames.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const SectionClassnames = {
+    "SectionGroup": "Section-SectionGroup",
+    "noDivider": "Section-noDivider"
+};
+exports.default = SectionClassnames;

package/dist/src/components/Listbox/components/Section/Section.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("../../../../utilities/css");
+const unique_id_1 = require("../../../../utilities/unique-id");
+const context_1 = require("./context");
+const Section_classnames_1 = __importDefault(require("./Section.classnames"));
+const selectors_1 = require("./selectors");
+function Section({ children, divider = true, title }) {
+    const sectionId = (0, unique_id_1.useUniqueId)('ListboxSection');
+    return ((0, jsx_runtime_1.jsx)(context_1.SectionContext.Provider, { value: sectionId, children: (0, jsx_runtime_1.jsxs)("li", { role: 'presentation', ...selectors_1.listboxSectionDataSelector.props, children: [title, (0, jsx_runtime_1.jsx)("ul", { role: 'group', "aria-labelledby": sectionId, className: (0, css_1.classNames)(Section_classnames_1.default.SectionGroup, !divider && Section_classnames_1.default.noDivider), children: children })] }) }));
+}
+exports.Section = Section;

package/dist/src/components/Listbox/components/Section/context.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SectionContext = void 0;
+const react_1 = require("react");
+exports.SectionContext = (0, react_1.createContext)(null);

package/dist/src/components/Listbox/components/Section/hooks.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSection = void 0;
+const react_1 = require("react");
+const context_1 = require("./context");
+function useSection() {
+    const context = (0, react_1.useContext)(context_1.SectionContext);
+    return context;
+}
+exports.useSection = useSection;

package/dist/src/components/Listbox/components/Section/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./Section"), exports);
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./selectors"), exports);

package/dist/src/components/Listbox/components/Section/selectors.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listboxWithinSectionDataSelector = exports.listboxSectionDataSelector = void 0;
+exports.listboxSectionDataSelector = {
+    props: { 'data-polaris-listbox-section-item': true },
+    selector: '[data-polaris-listbox-section-item]',
+};
+exports.listboxWithinSectionDataSelector = {
+    attribute: 'data-polaris-listbox-within-section-item',
+};

package/dist/src/components/Listbox/components/TextOption/TextOption.classnames.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const TextOptionClassnames = {
+    "TextOption": "TextOption-TextOption",
+    "allowMultiple": "TextOption-allowMultiple",
+    "isAction": "TextOption-isAction",
+    "selected": "TextOption-selected",
+    "selected::before": "TextOption-selected::before",
+    "disabled": "TextOption-disabled",
+    "TextOption:not(.disabled)": "TextOption-TextOption:not(.disabled)",
+    "Content": "TextOption-Content",
+    "Checkbox": "TextOption-Checkbox"
+};
+exports.default = TextOptionClassnames;

package/dist/src/components/Listbox/components/TextOption/TextOption.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextOption = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const context_1 = require("../../../../utilities/combobox/context");
+const css_1 = require("../../../../utilities/css");
+const context_2 = require("../../../../utilities/listbox/context");
+const Checkbox_1 = require("../../../Checkbox");
+const TextOption_classnames_1 = __importDefault(require("./TextOption.classnames"));
+exports.TextOption = (0, react_1.memo)(function TextOption({ children, selected, disabled, }) {
+    const { allowMultiple } = (0, react_1.useContext)(context_1.ComboboxListboxOptionContext);
+    const isAction = (0, react_1.useContext)(context_2.ActionContext);
+    const textOptionClassName = (0, css_1.classNames)(TextOption_classnames_1.default.TextOption, selected && !allowMultiple && TextOption_classnames_1.default.selected, disabled && TextOption_classnames_1.default.disabled, allowMultiple && TextOption_classnames_1.default.allowMultiple, isAction && TextOption_classnames_1.default.isAction);
+    return ((0, jsx_runtime_1.jsx)("div", { className: textOptionClassName, children: (0, jsx_runtime_1.jsx)("div", { className: TextOption_classnames_1.default.Content, children: allowMultiple && !isAction ? ((0, jsx_runtime_1.jsx)("div", { className: TextOption_classnames_1.default.Checkbox, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { disabled: disabled, checked: selected, label: children }) })) : (children) }) }));
+});

package/dist/src/components/Listbox/components/TextOption/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextOption = void 0;
+var TextOption_1 = require("./TextOption");
+Object.defineProperty(exports, "TextOption", { enumerable: true, get: function () { return TextOption_1.TextOption; } });

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

@@ -0,0 +1,26 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+exports.Loading = exports.TextOption = exports.Option = void 0;
+var Option_1 = require("./Option");
+Object.defineProperty(exports, "Option", { enumerable: true, get: function () { return Option_1.Option; } });
+var TextOption_1 = require("./TextOption");
+Object.defineProperty(exports, "TextOption", { enumerable: true, get: function () { return TextOption_1.TextOption; } });
+var Loading_1 = require("./Loading");
+Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return Loading_1.Loading; } });
+__exportStar(require("./Section"), exports);
+__exportStar(require("./Header"), exports);
+__exportStar(require("./Action"), exports);

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./Listbox"), exports);

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loading = void 0;
+const react_1 = require("react");
+const frame_1 = require("../../utilities/frame");
+exports.Loading = (0, react_1.memo)(function Loading() {
+    const { startLoading, stopLoading } = (0, frame_1.useFrame)();
+    (0, react_1.useEffect)(() => {
+        startLoading();
+        return () => {
+            stopLoading();
+        };
+    }, [startLoading, stopLoading]);
+    return null;
+});

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./Loading"), exports);

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const MediaCardClassnames = {
+    "Description": "MediaCard-Description",
+    "MediaCard": "MediaCard-MediaCard",
+    "portrait": "MediaCard-portrait",
+    "MediaContainer": "MediaCard-MediaContainer",
+    "portrait)": "MediaCard-portrait)",
+    "sizeSmall": "MediaCard-sizeSmall",
+    "InfoContainer": "MediaCard-InfoContainer",
+    "Heading": "MediaCard-Heading",
+    "PrimaryAction": "MediaCard-PrimaryAction",
+    "SecondaryAction": "MediaCard-SecondaryAction",
+    "ActionContainer": "MediaCard-ActionContainer"
+};
+exports.default = MediaCardClassnames;

package/dist/src/components/MediaCard/MediaCard.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("../../utils/css");
+const use_toggle_1 = require("../../utils/use-toggle");
+const ActionList_1 = require("../ActionList");
+const Box_1 = require("../Box");
+const Button_1 = require("../Button");
+const ButtonGroup_1 = require("../ButtonGroup");
+const HorizontalStack_1 = require("../HorizontalStack");
+const Icons_1 = require("../Icons");
+const LegacyCard_1 = require("../LegacyCard");
+const LegacyStack_1 = require("../LegacyStack");
+const Popover_1 = require("../Popover");
+const Text_1 = require("../Text");
+const MediaCard_classnames_1 = __importDefault(require("./MediaCard.classnames"));
+function MediaCard({ title, children, primaryAction, secondaryAction, description, popoverActions = [], portrait = false, size = 'medium', onDismiss, }) {
+    const { value: popoverActive, toggle: togglePopoverActive } = (0, use_toggle_1.useToggle)(false);
+    let headerMarkup = null;
+    if (title) {
+        const headerContent = typeof title === 'string' ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { variant: 'headingMd', as: 'h2', children: title })) : (title);
+        headerMarkup = (0, jsx_runtime_1.jsx)("div", { className: MediaCard_classnames_1.default.Heading, children: headerContent });
+    }
+    const dismissButtonMarkup = onDismiss ? ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onDismiss, size: 'slim', icon: Icons_1.MaClose, plain: true, accessibilityLabel: 'dismiss' })) : null;
+    const popoverActivator = ((0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { blockAlign: 'center', children: (0, jsx_runtime_1.jsx)(Button_1.Button, { icon: Icons_1.MaMore, onClick: togglePopoverActive, size: 'slim', accessibilityLabel: 'popoverButton' }) }));
+    const popoverActionsMarkup = popoverActions.length > 0 ? ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { active: popoverActive, activator: popoverActivator, onClose: togglePopoverActive, preferredAlignment: 'left', preferredPosition: 'below', children: (0, jsx_runtime_1.jsx)(ActionList_1.ActionList, { items: popoverActions, onActionAnyItem: togglePopoverActive }) })) : null;
+    const primaryActionMarkup = primaryAction ? ((0, jsx_runtime_1.jsx)("div", { className: MediaCard_classnames_1.default.PrimaryAction, children: (0, Button_1.buttonFrom)(primaryAction) })) : null;
+    const secondaryActionMarkup = secondaryAction ? ((0, jsx_runtime_1.jsx)("div", { className: MediaCard_classnames_1.default.SecondaryAction, children: (0, Button_1.buttonFrom)(secondaryAction, { plain: true }) })) : null;
+    const actionClassName = (0, css_1.classNames)(MediaCard_classnames_1.default.ActionContainer, portrait && MediaCard_classnames_1.default.portrait);
+    const actionMarkup = primaryActionMarkup || secondaryActionMarkup ? ((0, jsx_runtime_1.jsx)("div", { className: actionClassName, children: (0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [primaryActionMarkup, secondaryActionMarkup] }) })) : null;
+    const mediaCardClassName = (0, css_1.classNames)(MediaCard_classnames_1.default.MediaCard, portrait && MediaCard_classnames_1.default.portrait);
+    const mediaContainerClassName = (0, css_1.classNames)(MediaCard_classnames_1.default.MediaContainer, portrait && MediaCard_classnames_1.default.portrait, size === 'small' && MediaCard_classnames_1.default.sizeSmall);
+    const infoContainerClassName = (0, css_1.classNames)(MediaCard_classnames_1.default.InfoContainer, portrait && MediaCard_classnames_1.default.portrait, size === 'small' && MediaCard_classnames_1.default.sizeSmall);
+    const popoverOrDismissMarkup = popoverActionsMarkup || dismissButtonMarkup ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { position: 'absolute', insetBlockStart: '4', insetInlineEnd: '4', zIndex: '10', children: (0, jsx_runtime_1.jsxs)(HorizontalStack_1.HorizontalStack, { gap: '1', children: [popoverActionsMarkup, dismissButtonMarkup] }) })) : null;
+    return ((0, jsx_runtime_1.jsx)(LegacyCard_1.LegacyCard, { children: (0, jsx_runtime_1.jsxs)("div", { className: mediaCardClassName, children: [(0, jsx_runtime_1.jsx)("div", { className: mediaContainerClassName, style: { flexBasis: portrait ? '40%' : '33%' }, children: children }), (0, jsx_runtime_1.jsx)("div", { className: infoContainerClassName, style: { flexBasis: portrait ? '60%' : '67%' }, children: (0, jsx_runtime_1.jsxs)(LegacyCard_1.LegacyCard.Section, { children: [popoverOrDismissMarkup, (0, jsx_runtime_1.jsxs)(LegacyStack_1.LegacyStack, { vertical: true, spacing: 'tight', children: [headerMarkup, (0, jsx_runtime_1.jsx)("p", { className: MediaCard_classnames_1.default.Description, children: description }), actionMarkup] })] }) })] }) }));
+}
+exports.MediaCard = MediaCard;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./MediaCard"), exports);

package/dist/src/components/MediaQueryProvider/MediaQueryProvider.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaQueryProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const debounce_1 = require("../../utilities/debounce");
+const media_query_1 = require("../../utilities/media-query");
+const breakpoints_1 = require("../../utilities/breakpoints");
+// eslint-disable-next-line import/no-deprecated
+const EventListener_1 = require("../EventListener");
+const MediaQueryProvider = function MediaQueryProvider({ children, }) {
+    const [isNavigationCollapsed, setIsNavigationCollapsed] = (0, react_1.useState)((0, breakpoints_1.navigationBarCollapsed)().matches);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const handleResize = (0, react_1.useCallback)((0, debounce_1.debounce)(() => {
+        if (isNavigationCollapsed !== (0, breakpoints_1.navigationBarCollapsed)().matches) {
+            setIsNavigationCollapsed(!isNavigationCollapsed);
+        }
+    }, 40, { trailing: true, leading: true, maxWait: 40 }), [isNavigationCollapsed]);
+    (0, react_1.useEffect)(() => {
+        setIsNavigationCollapsed((0, breakpoints_1.navigationBarCollapsed)().matches);
+    }, []);
+    const context = (0, react_1.useMemo)(() => ({ isNavigationCollapsed }), [isNavigationCollapsed]);
+    return ((0, jsx_runtime_1.jsxs)(media_query_1.MediaQueryContext.Provider, { value: context, children: [(0, jsx_runtime_1.jsx)(EventListener_1.EventListener, { event: "resize", handler: handleResize }), children] }));
+};
+exports.MediaQueryProvider = MediaQueryProvider;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./MediaQueryProvider"), exports);

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const MessageIndicatorClassnames = {
+    "MessageIndicatorWrapper": "MessageIndicator-MessageIndicatorWrapper",
+    "MessageIndicator": "MessageIndicator-MessageIndicator"
+};
+exports.default = MessageIndicatorClassnames;

package/dist/src/components/MessageIndicator/MessageIndicator.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageIndicator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MessageIndicator_classnames_1 = __importDefault(require("./MessageIndicator.classnames"));
+function MessageIndicator({ children, active }) {
+    const indicatorMarkup = active && (0, jsx_runtime_1.jsx)("div", { className: MessageIndicator_classnames_1.default.MessageIndicator });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: MessageIndicator_classnames_1.default.MessageIndicatorWrapper, children: [indicatorMarkup, children] }));
+}
+exports.MessageIndicator = MessageIndicator;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./MessageIndicator"), exports);

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const ModalClassnames = {
+    "Body": "Modal-Body",
+    "IFrame": "Modal-IFrame"
+};
+exports.default = ModalClassnames;

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

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_transition_group_1 = require("react-transition-group");
+const components_1 = require("../../utilities/components");
+const focus_1 = require("../../utilities/focus");
+const i18n_1 = require("../../utilities/i18n");
+const hooks_1 = require("../../utilities/unique-id/hooks");
+const within_content_context_1 = require("../../utilities/within-content-context");
+const Backdrop_1 = require("../Backdrop");
+const Box_1 = require("../Box");
+const HorizontalStack_1 = require("../HorizontalStack");
+const Portal_1 = require("../Portal");
+const Scrollable_1 = require("../Scrollable");
+const Spinner_1 = require("../Spinner");
+const components_2 = require("./components");
+const Modal_classnames_1 = __importDefault(require("./Modal.classnames"));
+const IFRAME_LOADING_HEIGHT = 200;
+const DEFAULT_IFRAME_CONTENT_HEIGHT = 400;
+const Modal = function Modal({ children, title, titleHidden = false, src, iFrameName, open, instant, sectioned, loading, large, small, limitHeight, footer, primaryAction, secondaryActions, onScrolledToBottom, activator, onClose, onIFrameLoad, onTransitionEnd, noScroll, fullScreen, }) {
+    const [iframeHeight, setIframeHeight] = (0, react_1.useState)(IFRAME_LOADING_HEIGHT);
+    const [closing, setClosing] = (0, react_1.useState)(false);
+    const headerId = (0, hooks_1.useUniqueId)('modal-header');
+    const activatorRef = (0, react_1.useRef)(null);
+    const i18n = (0, i18n_1.useI18n)();
+    const iframeTitle = i18n.translate('Polaris.Modal.iFrameTitle');
+    let dialog;
+    let backdrop;
+    const handleEntered = (0, react_1.useCallback)(() => {
+        if (onTransitionEnd) {
+            onTransitionEnd();
+        }
+    }, [onTransitionEnd]);
+    const handleExited = (0, react_1.useCallback)(() => {
+        setIframeHeight(IFRAME_LOADING_HEIGHT);
+        const activatorElement = activator && isRef(activator) ? activator && activator.current : activatorRef.current;
+        if (activatorElement) {
+            requestAnimationFrame(() => (0, focus_1.focusFirstFocusableNode)(activatorElement));
+        }
+    }, [activator]);
+    const handleIFrameLoad = (0, react_1.useCallback)((evt) => {
+        const iframe = evt.target;
+        if (iframe && iframe.contentWindow) {
+            try {
+                setIframeHeight(iframe.contentWindow.document.body.scrollHeight);
+            }
+            catch (_error) {
+                setIframeHeight(DEFAULT_IFRAME_CONTENT_HEIGHT);
+            }
+        }
+        if (onIFrameLoad != null) {
+            onIFrameLoad(evt);
+        }
+    }, [onIFrameLoad]);
+    if (open) {
+        const footerMarkup = !footer && !primaryAction && !secondaryActions ? null : ((0, jsx_runtime_1.jsx)(components_2.Footer, { primaryAction: primaryAction, secondaryActions: secondaryActions, children: footer }));
+        const content = sectioned ? (0, components_1.wrapWithComponent)(children, components_2.Section, { titleHidden }) : children;
+        const body = loading ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { padding: '4', children: (0, jsx_runtime_1.jsx)(HorizontalStack_1.HorizontalStack, { gap: '4', align: 'center', blockAlign: 'center', children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, {}) }) })) : (content);
+        const scrollContainerMarkup = noScroll ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { width: '100%', overflowX: 'hidden', children: body })) : ((0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { shadow: true, className: Modal_classnames_1.default.Body, onScrolledToBottom: onScrolledToBottom, children: body }));
+        const bodyMarkup = src ? ((0, jsx_runtime_1.jsx)("iframe", { name: iFrameName, title: iframeTitle, src: src, className: Modal_classnames_1.default.IFrame, onLoad: handleIFrameLoad, style: { height: `${iframeHeight}px` } })) : (scrollContainerMarkup);
+        dialog = ((0, jsx_runtime_1.jsxs)(components_2.Dialog, { instant: instant, labelledBy: headerId, onClose: onClose, onEntered: handleEntered, onExited: handleExited, large: large, small: small, limitHeight: limitHeight, fullScreen: fullScreen, setClosing: setClosing, children: [(0, jsx_runtime_1.jsx)(components_2.Header, { titleHidden: titleHidden, id: headerId, closing: closing, onClose: onClose, children: title }), bodyMarkup, footerMarkup] }));
+        backdrop = (0, jsx_runtime_1.jsx)(Backdrop_1.Backdrop, { setClosing: setClosing, onClick: onClose });
+    }
+    const animated = !instant;
+    const activatorMarkup = activator && !isRef(activator) ? (0, jsx_runtime_1.jsx)(Box_1.Box, { ref: activatorRef, children: activator }) : null;
+    return ((0, jsx_runtime_1.jsxs)(within_content_context_1.WithinContentContext.Provider, { value: true, children: [activatorMarkup, (0, jsx_runtime_1.jsxs)(Portal_1.Portal, { idPrefix: 'modal', children: [(0, jsx_runtime_1.jsx)(react_transition_group_1.TransitionGroup, { appear: animated, enter: animated, exit: animated, children: dialog }), backdrop] })] }));
+};
+exports.Modal = Modal;
+function isRef(ref) {
+    return Object.prototype.hasOwnProperty.call(ref, 'current');
+}
+exports.Modal.Section = components_2.Section;

package/dist/src/components/Modal/Modal.styles.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    Body: 'w-full',
+    IFrame: 'block max-w-screen w-[620px] border-0',
+};
+exports.default = styles;

package/dist/src/components/Modal/components/CloseButton/CloseButton.classnames.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const CloseButtonClassnames = {
+    "CloseButton": "CloseButton-CloseButton",
+    "pressed": "CloseButton-pressed",
+    "titleHidden": "CloseButton-titleHidden"
+};
+exports.default = CloseButtonClassnames;

package/dist/src/components/Modal/components/CloseButton/CloseButton.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CloseButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Icons_1 = require("../../../Icons");
+const css_1 = require("../../../../utilities/css");
+const i18n_1 = require("../../../../utilities/i18n");
+const Icon_1 = require("../../../Icon");
+const CloseButton_styles_1 = __importDefault(require("./CloseButton.styles"));
+function CloseButton({ pressed, titleHidden = false, onClick }) {
+    const i18n = (0, i18n_1.useI18n)();
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, className: (0, css_1.classNames)(CloseButton_styles_1.default.CloseButton, titleHidden && CloseButton_styles_1.default.titleHidden, pressed && CloseButton_styles_1.default.pressed), "aria-label": i18n.translate('Polaris.Common.close'), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: Icons_1.MaClose, color: 'base' }) }));
+}
+exports.CloseButton = CloseButton;

package/dist/src/components/Modal/components/CloseButton/CloseButton.styles.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    CloseButton: 'mx-4 rounded-full p-1 hover:bg-gray-200',
+    pressed: 'bg-gray-300',
+    titleHidden: 'm-2',
+};
+exports.default = styles;

package/dist/src/components/Modal/components/CloseButton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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("./CloseButton"), exports);

package/dist/src/components/Modal/components/Dialog/Dialog.classnames.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const DialogClassnames = {
+    "entering": "Dialog-entering",
+    "exiting": "Dialog-exiting",
+    "Dialog": "Dialog-Dialog",
+    "Container": "Dialog-Container",
+    "Dialog:focus": "Dialog-Dialog:focus",
+    "Modal": "Dialog-Modal",
+    "limitHeight": "Dialog-limitHeight",
+    "sizeSmall": "Dialog-sizeSmall",
+    "sizeLarge": "Dialog-sizeLarge",
+    "fullScreen": "Dialog-fullScreen",
+    "animateFadeUp": "Dialog-animateFadeUp",
+    "exited": "Dialog-exited",
+    "entered": "Dialog-entered"
+};
+exports.default = DialogClassnames;