@macive/ui 0.0.1 → 0.0.2

package/dist/src/components/Badge/components/Pip/Pip.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.Pip = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("../../../../utilities/css");
+const i18n_1 = require("../../../../utilities/i18n");
+const Text_1 = require("../../../Text");
+const utils_1 = require("../../utils");
+const Pip_styles_1 = __importDefault(require("./Pip.styles"));
+function Pip({ status, progress = 'complete', accessibilityLabelOverride }) {
+    const i18n = (0, i18n_1.useI18n)();
+    const className = (0, css_1.classNames)(Pip_styles_1.default.Pip, 
+    // status && styles[variationName('status', status)],
+    // progress && styles[variationName('progress', progress)],
+    //@ts-ignore
+    status && Pip_styles_1.default[status], 
+    //@ts-ignore
+    progress && Pip_styles_1.default[progress]);
+    const accessibilityLabel = accessibilityLabelOverride
+        ? accessibilityLabelOverride
+        : (0, utils_1.getDefaultAccessibilityLabel)(i18n, progress, status);
+    return ((0, jsx_runtime_1.jsx)("span", { className: className, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'span', visuallyHidden: true, children: accessibilityLabel }) }));
+}
+exports.Pip = Pip;

package/dist/src/components/Badge/components/Pip/Pip.styles.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    Pip: 'inline-block h-10 w-0 border-2 rounded-full flex-shrink  color-red-500',
+    statusInfo: 'text-yellow-500',
+    statusSuccess: 'text-success',
+    statusNew: 'text-blue-500',
+    statusAttention: 'text-yellow-700',
+    statusWarning: 'text-yellow-300',
+    statusCritical: 'text-red-800 bg-green-600',
+    progressIncomplete: 'ng-transparent',
+    progressPartiallyComplete: 'bg-gradient-t-r',
+    progressComplete: '',
+};
+exports.default = styles;

package/dist/src/components/Badge/components/Pip/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("./Pip"), exports);

package/dist/src/components/Badge/components/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("./Pip"), exports);

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

@@ -0,0 +1,18 @@
+"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("./Badge"), exports);
+__exportStar(require("./types"), exports);

package/dist/src/components/Badge/types.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressValue = exports.StatusValue = void 0;
+var StatusValue;
+(function (StatusValue) {
+    StatusValue["Info"] = "info";
+    StatusValue["Success"] = "success";
+    StatusValue["Warning"] = "warning";
+    StatusValue["Critical"] = "critical";
+    StatusValue["Attention"] = "attention";
+    StatusValue["New"] = "new";
+})(StatusValue = exports.StatusValue || (exports.StatusValue = {}));
+var ProgressValue;
+(function (ProgressValue) {
+    ProgressValue["Incomplete"] = "incomplete";
+    ProgressValue["PartiallyComplete"] = "partiallyComplete";
+    ProgressValue["Complete"] = "complete";
+})(ProgressValue = exports.ProgressValue || (exports.ProgressValue = {}));

package/dist/src/components/Badge/utils.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultAccessibilityLabel = void 0;
+const types_1 = require("./types");
+function getDefaultAccessibilityLabel(i18n, progress, status) {
+    let progressLabel = '';
+    let statusLabel = '';
+    if (!progress && !status) {
+        return '';
+    }
+    switch (progress) {
+        case types_1.ProgressValue.Incomplete:
+            progressLabel = i18n.translate('Polaris.Badge.PROGRESS_LABELS.incomplete');
+            break;
+        case types_1.ProgressValue.PartiallyComplete:
+            progressLabel = i18n.translate('Polaris.Badge.PROGRESS_LABELS.partiallyComplete');
+            break;
+        case types_1.ProgressValue.Complete:
+            progressLabel = i18n.translate('Polaris.Badge.PROGRESS_LABELS.complete');
+            break;
+    }
+    switch (status) {
+        case types_1.StatusValue.Info:
+            statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.info');
+            break;
+        case types_1.StatusValue.Success:
+            statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.success');
+            break;
+        case types_1.StatusValue.Warning:
+            statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.warning');
+            break;
+        case types_1.StatusValue.Critical:
+            statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.critical');
+            break;
+        case types_1.StatusValue.Attention:
+            statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.attention');
+            break;
+        case types_1.StatusValue.New:
+            statusLabel = i18n.translate('Polaris.Badge.STATUS_LABELS.new');
+            break;
+    }
+    if (!status && progress) {
+        return progressLabel;
+    }
+    else if (status && !progress) {
+        return statusLabel;
+    }
+    else {
+        return i18n.translate('Polaris.Badge.progressAndStatus', {
+            progressLabel,
+            statusLabel,
+        });
+    }
+}
+exports.getDefaultAccessibilityLabel = getDefaultAccessibilityLabel;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const BannerClassnames = {
+    "keyFocused": "Banner-keyFocused",
+    "statusSuccess": "Banner-statusSuccess",
+    "statusInfo": "Banner-statusInfo",
+    "statusWarning": "Banner-statusWarning",
+    "statusCritical": "Banner-statusCritical",
+    "Banner": "Banner-Banner",
+    "PrimaryAction.Button": "Banner-PrimaryAction.Button",
+    "PrimaryAction": "Banner-PrimaryAction",
+    "ContentWrapper": "Banner-ContentWrapper",
+    "withinContentContainer": "Banner-withinContentContainer",
+    "Dismiss": "Banner-Dismiss",
+    "withinPage": "Banner-withinPage",
+    "Ribbon": "Banner-Ribbon",
+    "hasDismiss": "Banner-hasDismiss",
+    "SecondaryAction": "Banner-SecondaryAction",
+    "Text": "Banner-Text",
+    "Button": "Banner-Button",
+    "loading": "Banner-loading",
+    "Spinner": "Banner-Spinner"
+};
+exports.default = BannerClassnames;

package/dist/src/components/Banner/Banner.js

@@ -0,0 +1,121 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Banner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Icons_1 = require("../Icons");
+const banner_context_1 = require("../../utilities/banner-context");
+const css_1 = require("../../utilities/css");
+const i18n_1 = require("../../utilities/i18n");
+const within_content_context_1 = require("../../utilities/within-content-context");
+const Box_1 = require("../Box");
+const Button_1 = require("../Button");
+const ButtonGroup_1 = require("../ButtonGroup");
+const Icon_1 = require("../Icon");
+const Spinner_1 = require("../Spinner");
+const Text_1 = require("../Text");
+const UnstyledButton_1 = require("../UnstyledButton");
+const UnstyledLink_1 = require("../UnstyledLink");
+const Banner_classnames_1 = __importDefault(require("./Banner.classnames"));
+exports.Banner = (0, react_1.forwardRef)(function Banner({ icon, action, secondaryAction, title, children, status, onDismiss, stopAnnouncements, hideIcon, }, bannerRef) {
+    const withinContentContainer = (0, react_1.useContext)(within_content_context_1.WithinContentContext);
+    const i18n = (0, i18n_1.useI18n)();
+    const { wrapperRef, handleKeyUp, handleBlur, handleMouseUp, shouldShowFocus } = useBannerFocus(bannerRef);
+    const { defaultIcon, iconColor, ariaRoleType } = useBannerAttributes(status);
+    const iconName = icon || defaultIcon;
+    const className = (0, css_1.classNames)(Banner_classnames_1.default.Banner, 
+    // status && styles[variationName('status', status)],
+    //@ts-expect-error unknown
+    status && Banner_classnames_1.default[status], onDismiss && Banner_classnames_1.default.hasDismiss, shouldShowFocus && Banner_classnames_1.default.keyFocused, withinContentContainer ? Banner_classnames_1.default.withinContentContainer : Banner_classnames_1.default.withinPage);
+    let headingMarkup = null;
+    if (title) {
+        headingMarkup = ((0, jsx_runtime_1.jsx)(Text_1.Text, { as: 'h2', variant: 'headingMd', breakWord: true, children: title }));
+    }
+    const spinnerMarkup = (action === null || action === void 0 ? void 0 : action.loading) ? ((0, jsx_runtime_1.jsxs)("button", { disabled: true, "aria-busy": true, className: (0, css_1.classNames)(Banner_classnames_1.default.Button, Banner_classnames_1.default.loading), children: [(0, jsx_runtime_1.jsx)("span", { className: Banner_classnames_1.default.Spinner, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { size: 'small', accessibilityLabel: i18n.translate('Polaris.Button.spinnerAccessibilityLabel') }) }), action.content] })) : null;
+    const primaryActionMarkup = action ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { paddingInlineEnd: '2', children: action.loading
+            ? spinnerMarkup
+            : (0, UnstyledButton_1.unstyledButtonFrom)(action, {
+                className: `${Banner_classnames_1.default.Button} ${Banner_classnames_1.default.PrimaryAction}`,
+            }) })) : null;
+    const secondaryActionMarkup = secondaryAction ? ((0, jsx_runtime_1.jsx)(SecondaryActionFrom, { action: secondaryAction })) : null;
+    const actionMarkup = action || secondaryAction ? ((0, jsx_runtime_1.jsx)(Box_1.Box, { paddingBlockStart: withinContentContainer ? '3' : '4', paddingBlockEnd: withinContentContainer ? '1' : undefined, children: (0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [primaryActionMarkup, secondaryActionMarkup] }) })) : null;
+    let contentMarkup = null;
+    if (children || actionMarkup) {
+        contentMarkup = ((0, jsx_runtime_1.jsxs)(Box_1.Box, { paddingBlockStart: '05', paddingBlockEnd: '05', children: [children, actionMarkup] }));
+    }
+    const dismissButton = onDismiss && ((0, jsx_runtime_1.jsx)("div", { className: Banner_classnames_1.default.Dismiss, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { plain: true, icon: Icons_1.MaClose, onClick: onDismiss, accessibilityLabel: 'Dismiss notification' }) }));
+    return ((0, jsx_runtime_1.jsx)(banner_context_1.BannerContext.Provider, { value: true, children: (0, jsx_runtime_1.jsxs)("div", { className: className, 
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            tabIndex: 0, ref: wrapperRef, role: ariaRoleType, "aria-live": stopAnnouncements ? 'off' : 'polite', onMouseUp: handleMouseUp, onKeyUp: handleKeyUp, onBlur: handleBlur, children: [dismissButton, hideIcon ? null : ((0, jsx_runtime_1.jsx)(Box_1.Box, { paddingInlineEnd: '4', children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { source: iconName, color: iconColor }) })), (0, jsx_runtime_1.jsxs)("div", { className: Banner_classnames_1.default.ContentWrapper, children: [headingMarkup, contentMarkup] })] }) }));
+});
+function SecondaryActionFrom({ action }) {
+    if (action.url) {
+        return ((0, jsx_runtime_1.jsx)(UnstyledLink_1.UnstyledLink, { className: Banner_classnames_1.default.SecondaryAction, url: action.url, external: action.external, target: action.target, children: (0, jsx_runtime_1.jsx)("span", { className: Banner_classnames_1.default.Text, children: action.content }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(UnstyledButton_1.UnstyledButton, { className: Banner_classnames_1.default.SecondaryAction, onClick: action.onAction, children: (0, jsx_runtime_1.jsx)("span", { className: Banner_classnames_1.default.Text, children: action.content }) }));
+}
+function useBannerAttributes(status) {
+    switch (status) {
+        case 'success':
+            return {
+                defaultIcon: Icons_1.MaCheckCircle,
+                iconColor: 'success',
+                ariaRoleType: 'status',
+            };
+        case 'info':
+            return {
+                defaultIcon: Icons_1.MaTip,
+                iconColor: 'highlight',
+                ariaRoleType: 'status',
+            };
+        case 'warning':
+            return {
+                defaultIcon: Icons_1.MaCaution,
+                iconColor: 'warning',
+                ariaRoleType: 'alert',
+            };
+        case 'critical':
+            return {
+                defaultIcon: Icons_1.MaCaution,
+                iconColor: 'critical',
+                ariaRoleType: 'alert',
+            };
+        default:
+            return {
+                defaultIcon: Icons_1.MaTip,
+                iconColor: 'base',
+                ariaRoleType: 'status',
+            };
+    }
+}
+function useBannerFocus(bannerRef) {
+    const wrapperRef = (0, react_1.useRef)(null);
+    const [shouldShowFocus, setShouldShowFocus] = (0, react_1.useState)(false);
+    (0, react_1.useImperativeHandle)(bannerRef, () => ({
+        focus: () => {
+            var _a;
+            (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            setShouldShowFocus(true);
+        },
+    }), []);
+    const handleKeyUp = (event) => {
+        if (event.target === wrapperRef.current) {
+            setShouldShowFocus(true);
+        }
+    };
+    const handleBlur = () => setShouldShowFocus(false);
+    const handleMouseUp = (event) => {
+        event.currentTarget.blur();
+        setShouldShowFocus(false);
+    };
+    return {
+        wrapperRef,
+        handleKeyUp,
+        handleBlur,
+        handleMouseUp,
+        shouldShowFocus,
+    };
+}

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles = {
+    keyFocused: 'bg-[#28a745]',
+    success: 'bg-[#28a745]',
+    info: 'bg-[#17a2b8]',
+    warning: 'bg-[#ffc107]',
+    critical: 'bg-red-200',
+    Banner: 'relative  flex bg-gray-300 ',
+    PrimaryAction: '',
+    Button: '',
+    ContentWrapper: 'mt-[calc(-1 * 8px)] flex-[1 1 auto]',
+    Dismiss: 'top-4 right-4 absolute',
+    withinContentContainer: 'p-2 ',
+    withinPage: 'rounded-lg  p-6 border dark:border-gray-600 ',
+    Ribbon: '',
+    hasDismiss: 'pr-[calc(14px + 8px)]',
+    SecondaryAction: 'inline-flex text-left m-auto',
+    Text: 'focus:ring',
+    loading: 'relative color-transparent select-none',
+    Spinner: 'absolute top-1/2 left-1/2 ',
+};
+exports.default = styles;

package/dist/src/components/Banner/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("./Banner"), exports);

package/dist/src/components/Bleed/Bleed.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Bleed = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Bleed = ({ marginInline, marginBlock, marginBlockStart, marginBlockEnd, marginInlineStart, marginInlineEnd, children, }) => {
+    const getNegativeMargins = (direction) => {
+        const xAxis = ['marginInlineStart', 'marginInlineEnd'];
+        const yAxis = ['marginBlockStart', 'marginBlockEnd'];
+        const directionValues = {
+            marginBlockStart,
+            marginBlockEnd,
+            marginInlineStart,
+            marginInlineEnd,
+            marginInline,
+            marginBlock,
+        };
+        if (directionValues[direction]) {
+            return directionValues[direction];
+        }
+        else if (xAxis.includes(direction) && marginInline) {
+            return directionValues.marginInline;
+        }
+        else if (yAxis.includes(direction) && marginBlock) {
+            return directionValues.marginBlock;
+        }
+    };
+    const negativeMarginBlockStart = getNegativeMargins('marginBlockStart');
+    const negativeMarginBlockEnd = getNegativeMargins('marginBlockEnd');
+    const negativeMarginInlineStart = getNegativeMargins('marginInlineStart');
+    const negativeMarginInlineEnd = getNegativeMargins('marginInlineEnd');
+    //   const style = {
+    //     ...getResponsiveProps('bleed', 'margin-block-start', 'space', negativeMarginBlockStart),
+    //     ...getResponsiveProps('bleed', 'margin-block-end', 'space', negativeMarginBlockEnd),
+    //     ...getResponsiveProps('bleed', 'margin-inline-start', 'space', negativeMarginInlineStart),
+    //     ...getResponsiveProps('bleed', 'margin-inline-end', 'space', negativeMarginInlineEnd),
+    //   } as React.CSSProperties
+    return ((0, jsx_runtime_1.jsx)("div", { className: `
+    ${negativeMarginBlockStart ? `mb-${negativeMarginBlockStart}` : ''}
+    ${negativeMarginBlockEnd ? `mt-${negativeMarginBlockEnd}` : ''}
+    ${negativeMarginInlineStart ? `ml-${negativeMarginInlineStart}` : ''}
+    ${negativeMarginInlineEnd ? `mr-${negativeMarginInlineEnd}` : ''}
+  `, style: { marginInline, marginBlock }, children: children }));
+};
+exports.Bleed = Bleed;

package/dist/src/components/Bleed/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("./Bleed"), exports);

package/dist/src/components/Box/Box copy.js

@@ -0,0 +1,87 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Box = void 0;
+const react_1 = __importStar(require("react"));
+const generateResponsiveSpacing_1 = require("../../utilities/generateResponsiveSpacing");
+exports.Box = (0, react_1.forwardRef)(({ as = 'div', background, borderColor, borderStyle, borderWidth, borderBlockStartWidth, borderBlockEndWidth, borderInlineStartWidth, borderInlineEndWidth, borderRadius, borderRadiusEndStart, borderRadiusEndEnd, borderRadiusStartStart, borderRadiusStartEnd, children, color, id, minHeight, minWidth, maxWidth, overflowX, overflowY, outlineColor, outlineStyle, outlineWidth, padding, paddingBlockStart, paddingBlockEnd, paddingInlineStart, paddingInlineEnd, role, shadow, tabIndex, width, height, printHidden, visuallyHidden, position, insetBlockStart, insetBlockEnd, insetInlineStart, insetInlineEnd, zIndex, opacity, ...restProps }, ref) => {
+    const classNames = [
+        background && `${background}`,
+        borderColor && `border-${borderColor}`,
+        borderStyle && `border-${borderStyle}`,
+        borderWidth && `border-${borderWidth}`,
+        borderBlockStartWidth && `border-t-${borderBlockStartWidth}`,
+        borderBlockEndWidth && borderBlockEndWidth == '1' ? 'border-b mb-1' : ``,
+        borderInlineStartWidth && `border-l-${borderInlineStartWidth}`,
+        borderInlineEndWidth && `border-r-${borderInlineEndWidth}`,
+        borderRadius && `rounded-${borderRadius}`,
+        borderRadiusEndStart && `rounded-tl-${borderRadiusEndStart}`,
+        borderRadiusEndEnd && `rounded-tr-${borderRadiusEndEnd}`,
+        borderRadiusStartStart && `rounded-bl-${borderRadiusStartStart}`,
+        borderRadiusStartEnd && `rounded-br-${borderRadiusStartEnd}`,
+        color && `text-${color}`,
+        id && `#${id}`,
+        minHeight && `min-h-${minHeight}`,
+        minWidth && `min-w-${minWidth}`,
+        maxWidth && `max-w-${maxWidth}`,
+        overflowX && `overflow-x-${overflowX}`,
+        overflowY && `overflow-y-${overflowY}`,
+        padding && (0, generateResponsiveSpacing_1.generateResponsiveSpacing)(padding, 'p'),
+        paddingBlockStart && (0, generateResponsiveSpacing_1.generateResponsiveSpacing)(paddingBlockStart, 'pt'),
+        paddingBlockEnd && (0, generateResponsiveSpacing_1.generateResponsiveSpacing)(paddingBlockEnd, 'pb'),
+        paddingInlineStart && (0, generateResponsiveSpacing_1.generateResponsiveSpacing)(paddingInlineStart, 'pl'),
+        paddingInlineEnd && (0, generateResponsiveSpacing_1.generateResponsiveSpacing)(paddingInlineEnd, 'pr'),
+        role && `role-${role}`,
+        shadow && `shadow-${shadow}`,
+        tabIndex && `tab-${tabIndex}`,
+        width && `w-${width}`,
+        height && `h-${height}`,
+        position && `${position}`,
+        insetBlockStart && `top-${insetBlockStart}`,
+        insetBlockEnd && `bottom-${insetBlockEnd}`,
+        insetInlineStart && `left-${insetInlineStart}`,
+        insetInlineEnd && `!right-${insetInlineEnd}`,
+        opacity && `opacity-${opacity}`,
+        outlineColor && `outline-${outlineColor}`,
+        outlineStyle && `outline-${outlineStyle}`,
+        outlineWidth && `outline-${outlineWidth}`,
+        printHidden && 'print:hidden',
+        visuallyHidden && 'visually:hidden hidden',
+        zIndex && `z-[${zIndex}]`,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return react_1.default.createElement(as, {
+        'aria-label': 'box',
+        className: classNames,
+        id,
+        ref,
+        // style: sanitizeCustomProperties(style),
+        role,
+        tabIndex,
+        ...restProps,
+    }, children);
+});
+exports.Box.displayName = 'Box';

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const BoxClassnames = {
+    "listReset": "Box-listReset",
+    "Box": "Box-Box",
+    "visuallyHidden": "Box-visuallyHidden",
+    "printHidden": "Box-printHidden",
+    "applyHoverEffect": "Box-applyHoverEffect"
+};
+exports.default = BoxClassnames;

package/dist/src/components/Box/Box.js

@@ -0,0 +1,124 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Box = void 0;
+const react_1 = __importStar(require("react"));
+const css_1 = require("../../utilities/css");
+const Box_classnames_1 = __importDefault(require("./Box.classnames"));
+exports.Box = (0, react_1.forwardRef)(({ as = 'div', background, borderColor, borderStyle, borderWidth, borderBlockStartWidth, borderBlockEndWidth, borderInlineStartWidth, borderInlineEndWidth, borderRadius, borderRadiusEndStart, borderRadiusEndEnd, borderRadiusStartStart, borderRadiusStartEnd, children, color, id, minHeight, minWidth, maxWidth, overflowX, overflowY, outlineColor, outlineStyle, outlineWidth, padding, paddingBlockStart, paddingBlockEnd, paddingInlineStart, paddingInlineEnd, role, shadow, tabIndex, width, printHidden, visuallyHidden, position, insetBlockStart, insetBlockEnd, insetInlineStart, insetInlineEnd, zIndex, opacity, hoverInteraction, ...restProps }, ref) => {
+    // eslint-disable-next-line no-nested-ternary
+    const borderStyleValue = borderStyle
+        ? borderStyle
+        : borderColor ||
+            borderWidth ||
+            borderBlockStartWidth ||
+            borderBlockEndWidth ||
+            borderInlineStartWidth ||
+            borderInlineEndWidth
+            ? 'solid'
+            : undefined;
+    // eslint-disable-next-line no-nested-ternary
+    const outlineStyleValue = outlineStyle
+        ? outlineStyle
+        : outlineColor || outlineWidth
+            ? 'solid'
+            : undefined;
+    const style = {
+        '--pc-box-color': color ? `var(--p-color-${color})` : undefined,
+        '--pc-box-background': background ? `var(--p-color-${background})` : undefined,
+        // eslint-disable-next-line no-nested-ternary
+        '--pc-box-border-color': borderColor
+            ? borderColor === 'transparent'
+                ? 'transparent'
+                : `var(--p-color-${borderColor})`
+            : undefined,
+        '--pc-box-border-style': borderStyleValue,
+        '--pc-box-border-radius': borderRadius ? `var(--p-border-radius-${borderRadius})` : undefined,
+        '--pc-box-border-radius-end-start': borderRadiusEndStart
+            ? `var(--p-border-radius-${borderRadiusEndStart})`
+            : undefined,
+        '--pc-box-border-radius-end-end': borderRadiusEndEnd
+            ? `var(--p-border-radius-${borderRadiusEndEnd})`
+            : undefined,
+        '--pc-box-border-radius-start-start': borderRadiusStartStart
+            ? `var(--p-border-radius-${borderRadiusStartStart})`
+            : undefined,
+        '--pc-box-border-radius-start-end': borderRadiusStartEnd
+            ? `var(--p-border-radius-${borderRadiusStartEnd})`
+            : undefined,
+        '--pc-box-border-width': borderWidth ? `var(--p-border-width-${borderWidth})` : undefined,
+        '--pc-box-border-block-start-width': borderBlockStartWidth
+            ? `var(--p-border-width-${borderBlockStartWidth})`
+            : undefined,
+        '--pc-box-border-block-end-width': borderBlockEndWidth
+            ? `var(--p-border-width-${borderBlockEndWidth})`
+            : undefined,
+        '--pc-box-border-inline-start-width': borderInlineStartWidth
+            ? `var(--p-border-width-${borderInlineStartWidth})`
+            : undefined,
+        '--pc-box-border-inline-end-width': borderInlineEndWidth
+            ? `var(--p-border-width-${borderInlineEndWidth})`
+            : undefined,
+        '--pc-box-min-height': minHeight,
+        '--pc-box-min-width': minWidth,
+        '--pc-box-max-width': maxWidth,
+        '--pc-box-outline-color': outlineColor ? `var(--p-color-${outlineColor})` : undefined,
+        '--pc-box-outline-style': outlineStyleValue,
+        '--pc-box-outline-width': outlineWidth ? `var(--p-border-width-${outlineWidth})` : undefined,
+        '--pc-box-overflow-x': overflowX,
+        '--pc-box-overflow-y': overflowY,
+        ...(0, css_1.getResponsiveProps)('box', 'padding-block-end', 'space', paddingBlockEnd || padding),
+        ...(0, css_1.getResponsiveProps)('box', 'padding-block-start', 'space', paddingBlockStart || padding),
+        ...(0, css_1.getResponsiveProps)('box', 'padding-inline-start', 'space', paddingInlineStart || padding),
+        ...(0, css_1.getResponsiveProps)('box', 'padding-inline-end', 'space', paddingInlineEnd || padding),
+        '--pc-box-shadow': shadow ? `var(--p-shadow-${shadow})` : undefined,
+        '--pc-box-width': width,
+        position,
+        '--pc-box-inset-block-start': insetBlockStart
+            ? `var(--p-space-${insetBlockStart})`
+            : undefined,
+        '--pc-box-inset-block-end': insetBlockEnd ? `var(--p-space-${insetBlockEnd})` : undefined,
+        '--pc-box-inset-inline-start': insetInlineStart
+            ? `var(--p-space-${insetInlineStart})`
+            : undefined,
+        '--pc-box-inset-inline-end': insetInlineEnd ? `var(--p-space-${insetInlineEnd})` : undefined,
+        zIndex,
+        opacity,
+    };
+    const className = (0, css_1.classNames)(Box_classnames_1.default.Box, visuallyHidden && Box_classnames_1.default.visuallyHidden, printHidden && Box_classnames_1.default.printHidden, hoverInteraction && Box_classnames_1.default.applyHoverEffect, as === 'ul' && Box_classnames_1.default.listReset);
+    return react_1.default.createElement(as, {
+        className,
+        id,
+        ref,
+        style: (0, css_1.sanitizeCustomProperties)(style),
+        role,
+        tabIndex,
+        ...restProps,
+    }, children);
+});
+exports.Box.displayName = 'Box';