@selfcommunity/react-ui 0.11.0-mui7.14 → 0.11.0-mui7.16

package/lib/cjs/components/CheckoutReturnDialog/CheckoutReturnDialog.js

@@ -29,9 +29,9 @@ const Root = (0, material_1.styled)(material_1.Dialog, {
 const Transition = react_1.default.forwardRef(function Transition(props, ref) {
     return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
-const NoTransition = react_1.default.forwardRef(function NoTransition(props) {
-    return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [" ", props.children, " "] });
-});
+const NoTransition = function NoTransition(props) {
+    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: props.children });
+};
 function CheckoutReturnDialog(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({

package/lib/cjs/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTile.js

@@ -9,7 +9,6 @@ const components_core_1 = require("@livekit/components-core");
 const components_react_1 = require("@livekit/components-react");
 const ParticipantTileAvatar_1 = tslib_1.__importDefault(require("./ParticipantTileAvatar"));
 const ParticipantTileActions_1 = tslib_1.__importDefault(require("./ParticipantTileActions"));
-const react_core_1 = require("@selfcommunity/react-core");
 /**
  * The `ParticipantContextIfNeeded` component only creates a `ParticipantContext`
  * if there is no `ParticipantContext` already.
@@ -35,7 +34,6 @@ exports.ParticipantTile =
 /* @__PURE__ */ React.forwardRef(function ParticipantTile(_a, ref) {
     var _b, _c;
     var { trackRef, children, onParticipantClick, disableSpeakingIndicator, disableTileFocusToggle = false, disableTileActions = false } = _a, htmlProps = tslib_1.__rest(_a, ["trackRef", "children", "onParticipantClick", "disableSpeakingIndicator", "disableTileFocusToggle", "disableTileActions"]);
-    const scUserContext = (0, react_core_1.useSCUser)();
     const trackReference = (0, components_react_1.useEnsureTrackRef)(trackRef);
     const { elementProps } = (0, components_react_1.useParticipantTile)({
         htmlProps,

package/lib/cjs/components/PaymentDetailDialog/PaymentDetailDialog.js

@@ -20,9 +20,9 @@ const Root = (0, material_1.styled)(BaseDialog_1.default, {
 const Transition = react_1.default.forwardRef(function Transition(props, ref) {
     return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
-const NoTransition = react_1.default.forwardRef(function NoTransition(props) {
-    return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [" ", props.children, " "] });
-});
+const NoTransition = function NoTransition(props) {
+    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: props.children });
+};
 function PaymentDetailDialog(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({

package/lib/cjs/components/PaywallsDialog/PaywallsDialog.js

@@ -21,9 +21,9 @@ const Root = (0, material_1.styled)(BaseDialog_1.default, {
 const Transition = react_1.default.forwardRef(function Transition(props, ref) {
     return (0, jsx_runtime_1.jsx)(material_1.Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
-const NoTransition = react_1.default.forwardRef(function NoTransition(props) {
-    return (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [" ", props.children, " "] });
-});
+const NoTransition = function NoTransition(props) {
+    return (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: props.children });
+};
 function PaywallsDialog(inProps) {
     var _a;
     // PROPS

package/lib/cjs/components/UserPaymentMethods/Skeleton.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ForwardRefRenderFunction } from 'react';
 export interface UserPaymentMethodsSkeletonProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -11,5 +11,26 @@ export interface UserPaymentMethodsSkeletonProps {
     showBillingAddress?: boolean;
 }
 export type UserPaymentMethodsSkeletonRef = {};
-declare const _default: React.ForwardRefExoticComponent<UserPaymentMethodsSkeletonProps & React.RefAttributes<UserPaymentMethodsSkeletonRef>>;
-export default _default;
+/**
+ * > API documentation for the Community-JS User Payment Methods Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserPaymentMethodsSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserPaymentMethodsSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserPaymentMethodsSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ * @param inProps
+ */
+declare const UserPaymentMethodsSkeleton: ForwardRefRenderFunction<UserPaymentMethodsSkeletonRef, UserPaymentMethodsSkeletonProps>;
+export default UserPaymentMethodsSkeleton;

package/lib/cjs/components/UserPaymentMethods/Skeleton.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
 const system_1 = require("@mui/system");
@@ -35,9 +34,8 @@ const Root = (0, material_1.styled)(material_1.Box, {
  |root|.SCUserPaymentMethodsSkeleton-skeleton-root|Styles applied to the root element.|
  *
  * @param inProps
- * @param ref
  */
-const UserPaymentMethodsSkeleton = (inProps, ref) => {
+const UserPaymentMethodsSkeleton = (inProps) => {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -46,4 +44,4 @@ const UserPaymentMethodsSkeleton = (inProps, ref) => {
     const { className = null, showBillingAddress = false } = props, rest = tslib_1.__rest(props, ["className", "showBillingAddress"]);
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 200 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 50 }) })), showBillingAddress && ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "text", height: 40, width: 150 }) }))), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rectangular", width: 25, height: 25 }) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ component: "th", scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { variant: "rounded", width: 105, height: 35 }) }))] }) })));
 };
-exports.default = (0, react_1.forwardRef)(UserPaymentMethodsSkeleton);
+exports.default = UserPaymentMethodsSkeleton;

package/lib/cjs/components/UserPaymentMethods/UserPaymentMethods.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ForwardRefRenderFunction } from 'react';
 export interface UserPaymentMethodsProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -15,5 +15,27 @@ export interface UserPaymentMethodsProps {
     [p: string]: any;
 }
 export type UserPaymentMethodsRef = {};
-declare const _default: React.ForwardRefExoticComponent<Omit<UserPaymentMethodsProps, "ref"> & React.RefAttributes<UserPaymentMethodsRef>>;
-export default _default;
+/**
+ * > API documentation for the Community-JS User Payment Methods. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserPaymentMethods} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserPaymentMethods` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserPaymentMethods-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+declare const UserPaymentMethods: ForwardRefRenderFunction<UserPaymentMethodsRef, UserPaymentMethodsProps>;
+export default UserPaymentMethods;

package/lib/cjs/components/UserPaymentMethods/UserPaymentMethods.js

@@ -47,7 +47,7 @@ const Root = (0, material_1.styled)(material_1.Box, {
 
  * @param inProps
  */
-const UserPaymentMethods = (inProps, ref) => {
+const UserPaymentMethods = (inProps) => {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -335,4 +335,4 @@ const UserPaymentMethods = (inProps, ref) => {
                                         return ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: method.type.toUpperCase() })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: method.type === 'card' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_svg_credit_card_payment_icons_1.PaymentIcon, { type: ((_a = method.card) === null || _a === void 0 ? void 0 : _a.brand) || 'Generic', format: "flatRounded", width: 50 }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.paymentNumber }, { children: ["**** **** **** ", (_b = method.card) === null || _b === void 0 ? void 0 : _b.last4] }))] })) })), (0, jsx_runtime_1.jsxs)(material_1.TableCell, Object.assign({ scope: "row" }, { children: [(_c = method.card) === null || _c === void 0 ? void 0 : _c.exp_month, "/", (_d = method.card) === null || _d === void 0 ? void 0 : _d.exp_year] })), showBillingAddress && ((0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: method.billing_details.name })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: [(_f = (_e = method.billing_details) === null || _e === void 0 ? void 0 : _e.address) === null || _f === void 0 ? void 0 : _f.line1, (0, jsx_runtime_1.jsx)("br", {}), (_h = (_g = method.billing_details) === null || _g === void 0 ? void 0 : _g.address) === null || _h === void 0 ? void 0 : _h.line2] })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body1' }, { children: [(_k = (_j = method.billing_details) === null || _j === void 0 ? void 0 : _j.address) === null || _k === void 0 ? void 0 : _k.postal_code, " - ", (_m = (_l = method.billing_details) === null || _l === void 0 ? void 0 : _l.address) === null || _m === void 0 ? void 0 : _m.city, " -", ' ', (_p = (_o = method.billing_details) === null || _o === void 0 ? void 0 : _o.address) === null || _p === void 0 ? void 0 : _p.country] }))] }), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "edit", color: "primary", onClick: () => handleOpenEditAddressDialog(method) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "edit" }) }))] })) }))), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: defaultPaymentMethodLoading === method.id ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [method.id === defaultPaymentMethodId, (0, jsx_runtime_1.jsx)(material_1.Checkbox, { checked: method.id === defaultPaymentMethodId, onClick: () => handleSetDefaultPaymentMethodId(method.id) })] })) })), (0, jsx_runtime_1.jsx)(material_1.TableCell, Object.assign({ scope: "row" }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: 'contained', onClick: () => handleDelete(method.id) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.btnRemove", defaultMessage: "ui.userPaymentMethods.btnRemove" }) })) }))] }, index));
                                     }), hasMore && (0, jsx_runtime_1.jsx)(Skeleton_1.default, {})] })] })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", mb: 2 }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.noPaymentMethods", defaultMessage: "ui.userPaymentMethods.noPaymentMethods" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: 'contained', onClick: handleOpenAddPaymentMethodDialog }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.btnAdd", defaultMessage: "ui.userPaymentMethods.btnAdd" }) }))] })), openDeleteDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDeleteDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteTitle", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteTitle" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteDescription", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteDescription" }), onConfirm: handleConfirmDelete, onClose: handleConfirmClose, isUpdating: isDeletingPaymentMethod })), editPaymentMethodDialogOpen && editPaymentMethod !== null && ((0, jsx_runtime_1.jsx)(UserChangeAddressDialog_1.default, { open: true, defaultAddress: editPaymentMethod, handleAddress: handleAddress })), addPaymentMethodDialogOpen && (0, jsx_runtime_1.jsx)(UserAddPaymentMethodDialog_1.default, { open: true, handlePaymentMethod: handlePaymentMethodSuccess })] })) })));
 };
-exports.default = (0, react_1.forwardRef)(UserPaymentMethods);
+exports.default = UserPaymentMethods;

package/lib/cjs/shared/CustomSnackMessage/index.js

@@ -16,8 +16,8 @@ const classes = {
 const Root = (0, material_1.styled)(notistack_1.SnackbarContent, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * Custom Snackbar for notistack messages
  * Use this component:

package/lib/cjs/shared/Media/File/asUploadButton.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from "react";
+import type { ComponentType } from 'react';
 type FileInputProps = {
     capture?: string;
     accept: string;

package/lib/cjs/shared/Media/File/asUploadButton.js

@@ -23,7 +23,7 @@ const asUploadButton = (Component, InputProps) => {
             showFileUpload(uploadOptionsRef.current);
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
         }, [getInternalFileInput, showFileUpload, uploadOptionsRef, onClick]);
-        return (0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, onClick: onButtonClick, id: id, className: className, children: children || text || "Upload" }, extraProps));
+        return (0, jsx_runtime_1.jsx)(Component, Object.assign({ ref: ref, onClick: onButtonClick, id: id, className: className, children: children || text || 'Upload' }, extraProps));
     };
     (0, shared_ui_1.markAsUploadOptionsComponent)(AsUploadButton);
     return (0, react_1.forwardRef)(AsUploadButton);

package/lib/esm/components/CheckoutReturnDialog/CheckoutReturnDialog.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Button, CircularProgress, Dialog, DialogContent, DialogTitle, Slide, Stack, styled, Typography } from '@mui/material';
 import { useThemeProps } from '@mui/system';
@@ -27,9 +27,9 @@ const Root = styled(Dialog, {
 const Transition = React.forwardRef(function Transition(props, ref) {
     return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
-const NoTransition = React.forwardRef(function NoTransition(props) {
-    return _jsxs(React.Fragment, { children: [" ", props.children, " "] });
-});
+const NoTransition = function NoTransition(props) {
+    return _jsx(React.Fragment, { children: props.children });
+};
 export default function CheckoutReturnDialog(inProps) {
     // PROPS
     const props = useThemeProps({

package/lib/esm/components/LiveStreamRoom/LiveStreamVideoConference/ParticipantTile.js

@@ -6,7 +6,6 @@ import { isTrackReference, isTrackReferencePinned } from '@livekit/components-co
 import { AudioTrack, ConnectionQualityIndicator, FocusToggle, LockLockedIcon, ParticipantContext, ParticipantName, ScreenShareIcon, TrackMutedIndicator, TrackRefContext, useEnsureTrackRef, useFeatureContext, useIsEncrypted, useMaybeLayoutContext, useMaybeParticipantContext, useMaybeTrackRefContext, useParticipantTile, VideoTrack } from '@livekit/components-react';
 import ParticipantTileAvatar from './ParticipantTileAvatar';
 import ParticipantTileActions from './ParticipantTileActions';
-import { useSCUser } from '@selfcommunity/react-core';
 /**
  * The `ParticipantContextIfNeeded` component only creates a `ParticipantContext`
  * if there is no `ParticipantContext` already.
@@ -30,7 +29,6 @@ export const ParticipantTile =
 /* @__PURE__ */ React.forwardRef(function ParticipantTile(_a, ref) {
     var _b, _c;
     var { trackRef, children, onParticipantClick, disableSpeakingIndicator, disableTileFocusToggle = false, disableTileActions = false } = _a, htmlProps = __rest(_a, ["trackRef", "children", "onParticipantClick", "disableSpeakingIndicator", "disableTileFocusToggle", "disableTileActions"]);
-    const scUserContext = useSCUser();
     const trackReference = useEnsureTrackRef(trackRef);
     const { elementProps } = useParticipantTile({
         htmlProps,

package/lib/esm/components/PaymentDetailDialog/PaymentDetailDialog.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Slide, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
@@ -18,9 +18,9 @@ const Root = styled(BaseDialog, {
 const Transition = React.forwardRef(function Transition(props, ref) {
     return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
-const NoTransition = React.forwardRef(function NoTransition(props) {
-    return _jsxs(React.Fragment, { children: [" ", props.children, " "] });
-});
+const NoTransition = function NoTransition(props) {
+    return _jsx(React.Fragment, { children: props.children });
+};
 export default function PaymentDetailDialog(inProps) {
     // PROPS
     const props = useThemeProps({

package/lib/esm/components/PaywallsDialog/PaywallsDialog.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Slide, styled } from '@mui/material';
 import { useThemeProps } from '@mui/system';
@@ -19,9 +19,9 @@ const Root = styled(BaseDialog, {
 const Transition = React.forwardRef(function Transition(props, ref) {
     return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
-const NoTransition = React.forwardRef(function NoTransition(props) {
-    return _jsxs(React.Fragment, { children: [" ", props.children, " "] });
-});
+const NoTransition = function NoTransition(props) {
+    return _jsx(React.Fragment, { children: props.children });
+};
 export default function PaywallsDialog(inProps) {
     var _a;
     // PROPS

package/lib/esm/components/UserPaymentMethods/Skeleton.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ForwardRefRenderFunction } from 'react';
 export interface UserPaymentMethodsSkeletonProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -11,5 +11,26 @@ export interface UserPaymentMethodsSkeletonProps {
     showBillingAddress?: boolean;
 }
 export type UserPaymentMethodsSkeletonRef = {};
-declare const _default: React.ForwardRefExoticComponent<UserPaymentMethodsSkeletonProps & React.RefAttributes<UserPaymentMethodsSkeletonRef>>;
-export default _default;
+/**
+ * > API documentation for the Community-JS User Payment Methods Skeleton component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserPaymentMethodsSkeleton} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserPaymentMethodsSkeleton-skeleton-root` can be used when providing style overrides in the theme.
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserPaymentMethodsSkeleton-skeleton-root|Styles applied to the root element.|
+ *
+ * @param inProps
+ */
+declare const UserPaymentMethodsSkeleton: ForwardRefRenderFunction<UserPaymentMethodsSkeletonRef, UserPaymentMethodsSkeletonProps>;
+export default UserPaymentMethodsSkeleton;

package/lib/esm/components/UserPaymentMethods/Skeleton.js

@@ -1,6 +1,5 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
 import { Box, TableCell, TableRow, Skeleton, styled } from '@mui/material';
 import { PREFIX } from './constants';
 import { useThemeProps } from '@mui/system';
@@ -33,9 +32,8 @@ const Root = styled(Box, {
  |root|.SCUserPaymentMethodsSkeleton-skeleton-root|Styles applied to the root element.|
  *
  * @param inProps
- * @param ref
  */
-const UserPaymentMethodsSkeleton = (inProps, ref) => {
+const UserPaymentMethodsSkeleton = (inProps) => {
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -44,4 +42,4 @@ const UserPaymentMethodsSkeleton = (inProps, ref) => {
     const { className = null, showBillingAddress = false } = props, rest = __rest(props, ["className", "showBillingAddress"]);
     return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 200 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 50 }) })), showBillingAddress && (_jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "text", height: 40, width: 150 }) }))), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "rectangular", width: 25, height: 25 }) })), _jsx(TableCell, Object.assign({ component: "th", scope: "row" }, { children: _jsx(Skeleton, { variant: "rounded", width: 105, height: 35 }) }))] }) })));
 };
-export default forwardRef(UserPaymentMethodsSkeleton);
+export default UserPaymentMethodsSkeleton;

package/lib/esm/components/UserPaymentMethods/UserPaymentMethods.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ForwardRefRenderFunction } from 'react';
 export interface UserPaymentMethodsProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -15,5 +15,27 @@ export interface UserPaymentMethodsProps {
     [p: string]: any;
 }
 export type UserPaymentMethodsRef = {};
-declare const _default: React.ForwardRefExoticComponent<Omit<UserPaymentMethodsProps, "ref"> & React.RefAttributes<UserPaymentMethodsRef>>;
-export default _default;
+/**
+ * > API documentation for the Community-JS User Payment Methods. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {UserPaymentMethods} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCUserPaymentMethods` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCUserPaymentMethods-root|Styles applied to the root element.|
+
+ * @param inProps
+ */
+declare const UserPaymentMethods: ForwardRefRenderFunction<UserPaymentMethodsRef, UserPaymentMethodsProps>;
+export default UserPaymentMethods;

package/lib/esm/components/UserPaymentMethods/UserPaymentMethods.js

@@ -1,6 +1,6 @@
 import { __awaiter, __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Box, Button, Checkbox, CircularProgress, Icon, IconButton, Paper, Stack, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography, styled } from '@mui/material';
 import { PaymentIcon } from 'react-svg-credit-card-payment-icons';
 import { useSCPaymentsEnabled, useSCUser } from '@selfcommunity/react-core';
@@ -45,7 +45,7 @@ const Root = styled(Box, {
 
  * @param inProps
  */
-const UserPaymentMethods = (inProps, ref) => {
+const UserPaymentMethods = (inProps) => {
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -333,4 +333,4 @@ const UserPaymentMethods = (inProps, ref) => {
                                         return (_jsxs(TableRow, { children: [_jsx(TableCell, Object.assign({ scope: "row" }, { children: method.type.toUpperCase() })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: method.type === 'card' && (_jsxs(_Fragment, { children: [_jsx(PaymentIcon, { type: ((_a = method.card) === null || _a === void 0 ? void 0 : _a.brand) || 'Generic', format: "flatRounded", width: 50 }), _jsxs(Typography, Object.assign({ className: classes.paymentNumber }, { children: ["**** **** **** ", (_b = method.card) === null || _b === void 0 ? void 0 : _b.last4] }))] })) })), _jsxs(TableCell, Object.assign({ scope: "row" }, { children: [(_c = method.card) === null || _c === void 0 ? void 0 : _c.exp_month, "/", (_d = method.card) === null || _d === void 0 ? void 0 : _d.exp_year] })), showBillingAddress && (_jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsxs(Stack, Object.assign({ direction: "row", justifyContent: "left", alignItems: "center", spacing: 2 }, { children: [_jsxs(Box, { children: [_jsx(Typography, Object.assign({ variant: 'body1' }, { children: method.billing_details.name })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [(_f = (_e = method.billing_details) === null || _e === void 0 ? void 0 : _e.address) === null || _f === void 0 ? void 0 : _f.line1, _jsx("br", {}), (_h = (_g = method.billing_details) === null || _g === void 0 ? void 0 : _g.address) === null || _h === void 0 ? void 0 : _h.line2] })), _jsxs(Typography, Object.assign({ variant: 'body1' }, { children: [(_k = (_j = method.billing_details) === null || _j === void 0 ? void 0 : _j.address) === null || _k === void 0 ? void 0 : _k.postal_code, " - ", (_m = (_l = method.billing_details) === null || _l === void 0 ? void 0 : _l.address) === null || _m === void 0 ? void 0 : _m.city, " -", ' ', (_p = (_o = method.billing_details) === null || _o === void 0 ? void 0 : _o.address) === null || _p === void 0 ? void 0 : _p.country] }))] }), _jsx(IconButton, Object.assign({ "aria-label": "edit", color: "primary", onClick: () => handleOpenEditAddressDialog(method) }, { children: _jsx(Icon, { children: "edit" }) }))] })) }))), _jsx(TableCell, Object.assign({ scope: "row" }, { children: defaultPaymentMethodLoading === method.id ? (_jsx(CircularProgress, { size: 20 })) : (_jsxs(_Fragment, { children: [method.id === defaultPaymentMethodId, _jsx(Checkbox, { checked: method.id === defaultPaymentMethodId, onClick: () => handleSetDefaultPaymentMethodId(method.id) })] })) })), _jsx(TableCell, Object.assign({ scope: "row" }, { children: _jsx(Button, Object.assign({ variant: 'contained', onClick: () => handleDelete(method.id) }, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.btnRemove", defaultMessage: "ui.userPaymentMethods.btnRemove" }) })) }))] }, index));
                                     }), hasMore && _jsx(UserPaymentMethodsSkeleton, {})] })] })) }))) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "body2", mb: 2 }, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.noPaymentMethods", defaultMessage: "ui.userPaymentMethods.noPaymentMethods" }) })), _jsx(Button, Object.assign({ size: "small", variant: 'contained', onClick: handleOpenAddPaymentMethodDialog }, { children: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.btnAdd", defaultMessage: "ui.userPaymentMethods.btnAdd" }) }))] })), openDeleteDialog && (_jsx(ConfirmDialog, { open: openDeleteDialog, title: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteTitle", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteTitle" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.userPaymentMethods.dialog.confirmDeleteDescription", defaultMessage: "ui.userPaymentMethods.dialog.confirmDeleteDescription" }), onConfirm: handleConfirmDelete, onClose: handleConfirmClose, isUpdating: isDeletingPaymentMethod })), editPaymentMethodDialogOpen && editPaymentMethod !== null && (_jsx(UserChangeAddressDialog, { open: true, defaultAddress: editPaymentMethod, handleAddress: handleAddress })), addPaymentMethodDialogOpen && _jsx(UserAddPaymentMethodDialog, { open: true, handlePaymentMethod: handlePaymentMethodSuccess })] })) })));
 };
-export default forwardRef(UserPaymentMethods);
+export default UserPaymentMethods;

package/lib/esm/shared/CustomSnackMessage/index.js

@@ -13,8 +13,8 @@ const classes = {
 const Root = styled(SnackbarContent, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * Custom Snackbar for notistack messages
  * Use this component:

package/lib/esm/shared/Media/File/asUploadButton.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType } from "react";
+import type { ComponentType } from 'react';
 type FileInputProps = {
     capture?: string;
     accept: string;

package/lib/esm/shared/Media/File/asUploadButton.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useRef } from "react";
-import { markAsUploadOptionsComponent, useUploadyContext } from "@rpldy/shared-ui";
+import { forwardRef, useCallback, useRef } from 'react';
+import { markAsUploadOptionsComponent, useUploadyContext } from '@rpldy/shared-ui';
 const asUploadButton = (Component, InputProps) => {
     const AsUploadButton = (props, ref) => {
         const { showFileUpload, getInternalFileInput } = useUploadyContext();
@@ -21,7 +21,7 @@ const asUploadButton = (Component, InputProps) => {
             showFileUpload(uploadOptionsRef.current);
             onClick === null || onClick === void 0 ? void 0 : onClick(e);
         }, [getInternalFileInput, showFileUpload, uploadOptionsRef, onClick]);
-        return _jsx(Component, Object.assign({ ref: ref, onClick: onButtonClick, id: id, className: className, children: children || text || "Upload" }, extraProps));
+        return _jsx(Component, Object.assign({ ref: ref, onClick: onButtonClick, id: id, className: className, children: children || text || 'Upload' }, extraProps));
     };
     markAsUploadOptionsComponent(AsUploadButton);
     return forwardRef(AsUploadButton);