@kwiz/fluentui 1.0.73 → 1.0.75

package/dist/helpers/use-editable-control.d.ts

@@ -4,7 +4,7 @@ export declare function useEditableControl(): {
     setHasChanges: (newValue: import("react").SetStateAction<boolean>) => Promise<boolean>;
     onSaveChanges: (worker: () => Promise<{
         success: boolean;
-        message: string;
+        message?: string;
     }>) => Promise<void>;
     editablePageElement: import("react/jsx-runtime").JSX.Element;
 };

package/dist/helpers/use-editable-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-editable-control.js","sourceRoot":"","sources":["../../src/helpers/use-editable-control.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACnG,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE3D,gJAAgJ;AAChJ,MAAM,UAAU,kBAAkB;IAC9B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,UAAU,EAAE,aAAa,EAAE,aAAa,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,CAAC;IAEjG,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;IACnC,MAAM,EAAE,aAAa,EAAE,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAExD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAO,MAA6D,EAAE,EAAE;QACtG,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,MAAM,OAAO,GAAG,MAAM,MAAM,EAAE,CAAC;QAC/B,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAC3B,aAAa,CAAC,KAAC,KAAK,cAChB,KAAC,UAAU,cAAE,OAAO,CAAC,OAAO,IAAI,8BAA8B,GAAc,GACxE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QACrD,CAAC;aACI,CAAC;YACF,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,aAAa,CAAC,KAAC,KAAK,cAChB,KAAC,UAAU,cAAE,OAAO,CAAC,OAAO,IAAI,gBAAgB,GAAc,GAC1D,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACpD,CAAC;IACL,CAAC,CAAA,EAAE,oBAAoB,CAAC,CAAC;IAEzB,OAAO;QACH,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,8BACzE,YAAY,IAAI,KAAC,UAAU,KAAG,EAC/B,KAAC,OAAO,IAAC,SAAS,EAAE,SAAS,GAAI,IAClC;KACN,CAAC;AACN,CAAC"}
+{"version":3,"file":"use-editable-control.js","sourceRoot":"","sources":["../../src/helpers/use-editable-control.tsx"],"names":[],"mappings":";;;;;;;;;;AAAA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACnG,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE3D,gJAAgJ;AAChJ,MAAM,UAAU,kBAAkB;IAC9B,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,UAAU,EAAE,aAAa,EAAE,aAAa,CAAC,GAAG,UAAU,CAAC,KAAK,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,CAAC,CAAC;IAEjG,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;IACnC,MAAM,EAAE,aAAa,EAAE,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;IAExD,MAAM,aAAa,GAAG,WAAW,CAAC,CAAO,MAA8D,EAAE,EAAE;QACvG,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,MAAM,OAAO,GAAG,MAAM,MAAM,EAAE,CAAC;QAC/B,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,IAAI,OAAO,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;YAC3B,aAAa,CAAC,KAAC,KAAK,cAChB,KAAC,UAAU,cAAE,OAAO,CAAC,OAAO,IAAI,8BAA8B,GAAc,GACxE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QACrD,CAAC;aACI,CAAC;YACF,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,aAAa,CAAC,KAAC,KAAK,cAChB,KAAC,UAAU,cAAE,OAAO,CAAC,OAAO,IAAI,gBAAgB,GAAc,GAC1D,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACpD,CAAC;IACL,CAAC,CAAA,EAAE,oBAAoB,CAAC,CAAC;IAEzB,OAAO;QACH,UAAU,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,mBAAmB,EAAE,8BACzE,YAAY,IAAI,KAAC,UAAU,KAAG,EAC/B,KAAC,OAAO,IAAC,SAAS,EAAE,SAAS,GAAI,IAClC;KACN,CAAC;AACN,CAAC"}

package/package.json

@@ -1,84 +1,85 @@
-{
-    "name": "@kwiz/fluentui",
-    "version": "1.0.73",
-    "description": "KWIZ common controls for FluentUI",
-    "module": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "import": "./dist/index.js",
-            "default": "./dist/index.js"
-        },
-        "./package.json": "./package.json"
-    },
-    "scripts": {
-        "watch": "tsc -watch",
-        "build": "npm run test && tsc",
-        "build-explain": "tsc --explainFiles",
-        "check-dependencies": "madge --circular ./src",
-        "create-link": "npm link",
-        "test": "depcruise src && node --import tsx --test src",
-        "link-local-kwiz": "npm link @kwiz/common",
-        "__update-kwiz-packages": "npm install @kwiz/common@latest",
-        "npm-v-patch": "npm version patch && git push origin main:main && git push --tags",
-        "npm-v-major": "npm version major && git push origin main:main && git push --tags",
-        "npm-publish": "npm publish --access public",
-        "reset-repo": "git fetch origin && git reset --hard origin/main"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/KWizCom/fluentui.git"
-    },
-    "keywords": [
-        "KWIZ",
-        "FluentUI"
-    ],
-    "author": "Shai Petel",
-    "contributors": [
-        "Shai Petel"
-    ],
-    "license": "MIT",
-    "bugs": {
-        "url": "https://github.com/KWizCom/fluentui/issues",
-        "email": "support@kwizcom.com"
-    },
-    "homepage": "https://github.com/KWizCom/fluentui#readme",
-    "private": false,
-    "engines": {
-        "node": ">=16"
-    },
-    "packageManager": "npm@9.5.1",
-    "devDependencies": {
-        "@types/qrcode": "^1.5.5",
-        "dependency-cruiser": "^16.8.0",
-        "fs-extra": "^11.2.0",
-        "madge": "^6.1.0",
-        "tsx": "^4.7.1",
-        "typescript": "^5.3.3"
-    },
-    "dependencies": {
-        "@fluentui/react-datepicker-compat": "^0.4.53",
-        "@fluentui/react-timepicker-compat": "^0.2.42",
-        "@kwiz/common": "^1.0.120",
-        "@mismerge/core": "^1.2.1",
-        "@mismerge/react": "^1.0.1",
-        "esbuild": "^0.19.12",
-        "get-tsconfig": "^4.7.2",
-        "jodit": "^4.2.47",
-        "jodit-react": "^4.1.2",
-        "qrcode": "^1.5.4",
-        "react-dnd": "^16.0.1",
-        "react-dnd-html5-backend": "^16.0.1",
-        "react-pick-color": "^2.0.0",
-        "resolve-pkg-maps": "^1.0.0"
-    },
-    "peerDependencies": {
-        "@fluentui/react-components": ">=9.54.17 <10.0.0",
-        "@fluentui/react-icons": "^2.0.269",
-        "@types/react": ">=16.14.0 <19.0.0",
-        "@types/react-dom": ">=16.9.0 <19.0.0",
-        "react": ">=16.14.0 <19.0.0",
-        "react-dom": ">=16.14.0 <19.0.0"
-    }
-}
+{
+    "name": "@kwiz/fluentui",
+    "version": "1.0.75",
+    "description": "KWIZ common controls for FluentUI",
+    "module": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js",
+            "default": "./dist/index.js"
+        },
+        "./package.json": "./package.json"
+    },
+    "scripts": {
+        "watch": "tsc -watch",
+        "build": "npm run test && tsc",
+        "build-explain": "tsc --explainFiles",
+        "check-dependencies": "madge --circular ./src",
+        "create-link": "npm link",
+        "test": "depcruise src && node --import tsx --test src",
+        "link-local-kwiz": "npm link @kwiz/common",
+        "__update-kwiz-packages": "npm install @kwiz/common@latest",
+        "npm-v-patch": "npm version patch && git push origin main:main && git push --tags",
+        "npm-v-major": "npm version major && git push origin main:main && git push --tags",
+        "npm-publish": "npm publish --access public",
+        "reset-repo": "git fetch origin && git reset --hard origin/main",
+        "clear-npm-cache": "npm cache clean --force"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/KWizCom/fluentui.git"
+    },
+    "keywords": [
+        "KWIZ",
+        "FluentUI"
+    ],
+    "author": "Shai Petel",
+    "contributors": [
+        "Shai Petel"
+    ],
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/KWizCom/fluentui/issues",
+        "email": "support@kwizcom.com"
+    },
+    "homepage": "https://github.com/KWizCom/fluentui#readme",
+    "private": false,
+    "engines": {
+        "node": ">=16"
+    },
+    "packageManager": "npm@9.5.1",
+    "devDependencies": {
+        "@types/qrcode": "^1.5.5",
+        "dependency-cruiser": "^16.8.0",
+        "fs-extra": "^11.2.0",
+        "madge": "^6.1.0",
+        "tsx": "^4.7.1",
+        "typescript": "^5.3.3"
+    },
+    "dependencies": {
+        "@fluentui/react-datepicker-compat": "^0.4.53",
+        "@fluentui/react-timepicker-compat": "^0.2.42",
+        "@kwiz/common": "^1.0.120",
+        "@mismerge/core": "^1.2.1",
+        "@mismerge/react": "^1.0.1",
+        "esbuild": "^0.19.12",
+        "get-tsconfig": "^4.7.2",
+        "jodit": "^4.2.47",
+        "jodit-react": "^4.1.2",
+        "qrcode": "^1.5.4",
+        "react-dnd": "^16.0.1",
+        "react-dnd-html5-backend": "^16.0.1",
+        "react-pick-color": "^2.0.0",
+        "resolve-pkg-maps": "^1.0.0"
+    },
+    "peerDependencies": {
+        "@fluentui/react-components": ">=9.54.17 <10.0.0",
+        "@fluentui/react-icons": "^2.0.269",
+        "@types/react": ">=16.14.0 <19.0.0",
+        "@types/react-dom": ">=16.9.0 <19.0.0",
+        "react": ">=16.14.0 <19.0.0",
+        "react-dom": ">=16.14.0 <19.0.0"
+    }
+}

package/src/_modules/config.ts

@@ -1,9 +1,9 @@
-import { config } from "@kwiz/common";
-import { BuildNumber, ReleaseStatus } from "./constants";
-
-export const { logger: GetLogger } = config({
-    BuildNumber: BuildNumber,
-    IsLocalDev: false,
-    ReleaseStatus: ReleaseStatus,
-    ProjectName: "[fluentui]"
-});
+import { config } from "@kwiz/common";
+import { BuildNumber, ReleaseStatus } from "./constants";
+
+export const { logger: GetLogger } = config({
+    BuildNumber: BuildNumber,
+    IsLocalDev: false,
+    ReleaseStatus: ReleaseStatus,
+    ProjectName: "[fluentui]"
+});

package/src/_modules/constants.ts

@@ -1,3 +1,3 @@
-
-export var BuildNumber = 'unset';
-export const ReleaseStatus = "npm";
+
+export var BuildNumber = 'unset';
+export const ReleaseStatus = "npm";

package/src/controls/ColorPickerDialog.tsx

@@ -1,84 +1,84 @@
-import { Field } from "@fluentui/react-components";
-import { ColorRegular } from "@fluentui/react-icons";
-import { isFunction, isNullOrEmptyString, isNumber } from "@kwiz/common";
-import * as React from "react";
-import ColorPicker, { Color } from 'react-pick-color';
-import { useEffectOnlyOnMount, useStateEX } from "../helpers";
-import { ButtonEX } from "./button";
-import { InputEx } from "./input";
-import { Prompter } from "./prompt";
-export interface iProps {
-    label?: string;
-    value: string;
-    onChange: (newValue: string) => void;
-    required?: boolean;
-    showValidationErrors?: boolean;
-    underlined?: boolean;
-    width?: number;
-    buttonOnly?: boolean;
-    placeholder?: string;
-    disabled?: boolean;
-
-    /** specify a specific mount node for this dialog */
-    mountNode?: HTMLElement | null | {
-        element?: HTMLElement | null;
-        className?: string;
-    }
-}
-
-export const ColorPickerEx: React.FunctionComponent<iProps> = (props) => {
-    const [isOpen, setIsOpen] = useStateEX<boolean>(false);
-    const [selectedColor, setSelectedColor] = useStateEX<string>(props.value);
-
-    const getColorCells = React.useCallback(() => {
-        let cells: Color[] = [
-            "white", "black"
-        ];
-        return cells;
-    }, useEffectOnlyOnMount);
-    return <>
-        {props.buttonOnly
-            ? <ButtonEX disabled={props.disabled}
-                title="Open color picker"
-                icon={<ColorRegular
-                    color={selectedColor} />
-                }
-                onClick={(e) => setIsOpen(true)} />
-            : <Field label={props.label}
-                required={props.required === true}
-                validationMessage={props.showValidationErrors && props.required === true && isNullOrEmptyString(selectedColor) ? "You can't leave this blank." : undefined}
-            >
-                <InputEx disabled={props.disabled}
-                    placeholder={props.placeholder || "Enter value here"}
-                    style={isNumber(props.width) ? { width: props.width } : undefined}
-                    value={selectedColor}
-                    onChange={(e, data) => {
-                        setSelectedColor(data.value);
-                        if (isFunction(props.onChange)) {
-                            props.onChange(data.value);
-                        }
-                    }}
-                    contentAfter={<ButtonEX disabled={props.disabled}
-                        title="Open color picker"
-                        icon={<ColorRegular
-                            color={selectedColor} />
-                        }
-                        onClick={(e) => setIsOpen(true)} />
-                    }
-                />
-            </Field>}
-        {isOpen && <Prompter maxWidth={332} mountNode={props.mountNode}
-            hideOk hideCancel onCancel={() => {
-                if (isFunction(props.onChange)) {
-                    props.onChange(selectedColor);
-                }
-                setIsOpen(false);
-            }} showCancelInTitle
-            title={props.label || "Choose a color"}
-        >
-            <ColorPicker color={selectedColor} onChange={color => setSelectedColor(color.hex)}
-                presets={getColorCells()}
-            />
-        </Prompter>}
-    </>;
+import { Field } from "@fluentui/react-components";
+import { ColorRegular } from "@fluentui/react-icons";
+import { isFunction, isNullOrEmptyString, isNumber } from "@kwiz/common";
+import * as React from "react";
+import ColorPicker, { Color } from 'react-pick-color';
+import { useEffectOnlyOnMount, useStateEX } from "../helpers";
+import { ButtonEX } from "./button";
+import { InputEx } from "./input";
+import { Prompter } from "./prompt";
+export interface iProps {
+    label?: string;
+    value: string;
+    onChange: (newValue: string) => void;
+    required?: boolean;
+    showValidationErrors?: boolean;
+    underlined?: boolean;
+    width?: number;
+    buttonOnly?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+
+    /** specify a specific mount node for this dialog */
+    mountNode?: HTMLElement | null | {
+        element?: HTMLElement | null;
+        className?: string;
+    }
+}
+
+export const ColorPickerEx: React.FunctionComponent<iProps> = (props) => {
+    const [isOpen, setIsOpen] = useStateEX<boolean>(false);
+    const [selectedColor, setSelectedColor] = useStateEX<string>(props.value);
+
+    const getColorCells = React.useCallback(() => {
+        let cells: Color[] = [
+            "white", "black"
+        ];
+        return cells;
+    }, useEffectOnlyOnMount);
+    return <>
+        {props.buttonOnly
+            ? <ButtonEX disabled={props.disabled}
+                title="Open color picker"
+                icon={<ColorRegular
+                    color={selectedColor} />
+                }
+                onClick={(e) => setIsOpen(true)} />
+            : <Field label={props.label}
+                required={props.required === true}
+                validationMessage={props.showValidationErrors && props.required === true && isNullOrEmptyString(selectedColor) ? "You can't leave this blank." : undefined}
+            >
+                <InputEx disabled={props.disabled}
+                    placeholder={props.placeholder || "Enter value here"}
+                    style={isNumber(props.width) ? { width: props.width } : undefined}
+                    value={selectedColor}
+                    onChange={(e, data) => {
+                        setSelectedColor(data.value);
+                        if (isFunction(props.onChange)) {
+                            props.onChange(data.value);
+                        }
+                    }}
+                    contentAfter={<ButtonEX disabled={props.disabled}
+                        title="Open color picker"
+                        icon={<ColorRegular
+                            color={selectedColor} />
+                        }
+                        onClick={(e) => setIsOpen(true)} />
+                    }
+                />
+            </Field>}
+        {isOpen && <Prompter maxWidth={332} mountNode={props.mountNode}
+            hideOk hideCancel onCancel={() => {
+                if (isFunction(props.onChange)) {
+                    props.onChange(selectedColor);
+                }
+                setIsOpen(false);
+            }} showCancelInTitle
+            title={props.label || "Choose a color"}
+        >
+            <ColorPicker color={selectedColor} onChange={color => setSelectedColor(color.hex)}
+                presets={getColorCells()}
+            />
+        </Prompter>}
+    </>;
 };

package/src/controls/accordion.tsx

@@ -1,62 +1,62 @@
-import { makeStyles } from "@fluentui/react-components";
-import { ChevronRightRegular } from "@fluentui/react-icons";
-import * as React from 'react';
-import { KnownClassNames } from "../styles/styles";
-import { ButtonEX } from "./button";
-import { DividerEX } from "./divider";
-import { Horizontal } from "./horizontal";
-import { Vertical } from "./vertical";
-
-const useStyles = makeStyles({
-    opened: {
-        transform: "rotate(90deg)",
-        transition: "transform 200ms ease-out"
-    },
-    header: {
-        paddingLeft: 0
-    },
-    root: {
-        maxHeight: "100%"
-    },
-    rootFill: {
-        minHeight: "100%"
-    },
-    body: {
-        overflow: "auto",
-    }
-});
-
-interface iProps {
-    /** optional: send the key for the group you want to open by default */
-    opened?: string;
-    fillHeight?: boolean;
-    groups: {
-        key: string;
-        title: string;
-        icon?: JSX.Element;
-        content: JSX.Element;
-    }[];
-}
-export const AccordionEX: React.FunctionComponent<iProps> = (props) => {
-    const classes = useStyles();
-    const [opened, setOpened] = React.useState(props.opened || props.groups[0].key);
-    return (<Vertical main css={[classes.root, props.fillHeight && classes.rootFill, KnownClassNames.accordion]}>
-        {props.groups.map(group => <React.Fragment key={group.key}>
-            <ButtonEX className={`${classes.header} ${KnownClassNames.accordionHeader} ${opened === group.key ? ` ${KnownClassNames.isOpen}` : ''}`}
-                icon={<ChevronRightRegular className={opened === group.key ? classes.opened : ''} />}
-                title={group.title} showTitleWithIcon dontCenterText
-                onClick={() => setOpened(group.key)}
-            />
-            <DividerEX />
-            {group.key === opened && <>
-                <Horizontal main css={[classes.body, KnownClassNames.accordionBodyWrapper]}>
-                    <Vertical main css={[KnownClassNames.accordionBody]}>
-                        {group.content}
-                    </Vertical>
-                </Horizontal>
-                <DividerEX />
-            </>}
-        </React.Fragment>)}
-    </Vertical>
-    );
-}
+import { makeStyles } from "@fluentui/react-components";
+import { ChevronRightRegular } from "@fluentui/react-icons";
+import * as React from 'react';
+import { KnownClassNames } from "../styles/styles";
+import { ButtonEX } from "./button";
+import { DividerEX } from "./divider";
+import { Horizontal } from "./horizontal";
+import { Vertical } from "./vertical";
+
+const useStyles = makeStyles({
+    opened: {
+        transform: "rotate(90deg)",
+        transition: "transform 200ms ease-out"
+    },
+    header: {
+        paddingLeft: 0
+    },
+    root: {
+        maxHeight: "100%"
+    },
+    rootFill: {
+        minHeight: "100%"
+    },
+    body: {
+        overflow: "auto",
+    }
+});
+
+interface iProps {
+    /** optional: send the key for the group you want to open by default */
+    opened?: string;
+    fillHeight?: boolean;
+    groups: {
+        key: string;
+        title: string;
+        icon?: JSX.Element;
+        content: JSX.Element;
+    }[];
+}
+export const AccordionEX: React.FunctionComponent<iProps> = (props) => {
+    const classes = useStyles();
+    const [opened, setOpened] = React.useState(props.opened || props.groups[0].key);
+    return (<Vertical main css={[classes.root, props.fillHeight && classes.rootFill, KnownClassNames.accordion]}>
+        {props.groups.map(group => <React.Fragment key={group.key}>
+            <ButtonEX className={`${classes.header} ${KnownClassNames.accordionHeader} ${opened === group.key ? ` ${KnownClassNames.isOpen}` : ''}`}
+                icon={<ChevronRightRegular className={opened === group.key ? classes.opened : ''} />}
+                title={group.title} showTitleWithIcon dontCenterText
+                onClick={() => setOpened(group.key)}
+            />
+            <DividerEX />
+            {group.key === opened && <>
+                <Horizontal main css={[classes.body, KnownClassNames.accordionBodyWrapper]}>
+                    <Vertical main css={[KnownClassNames.accordionBody]}>
+                        {group.content}
+                    </Vertical>
+                </Horizontal>
+                <DividerEX />
+            </>}
+        </React.Fragment>)}
+    </Vertical>
+    );
+}