@kwiz/fluentui 1.0.26 → 1.0.28

package/dist/controls/accordion.js

@@ -1,8 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Label, makeStyles } from "@fluentui/react-components";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { makeStyles, tokens } 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 { Section } from "./section";
 import { Vertical } from "./vertical";
 const useStyles = makeStyles({
     opened: {
@@ -10,18 +14,21 @@ const useStyles = makeStyles({
         transition: "transform 200ms ease-out"
     },
     header: {
-        cursor: "pointer"
+        paddingLeft: 0
     },
     root: {
         maxHeight: "100%"
     },
     body: {
-        overflow: "auto"
+        overflow: "auto",
+    },
+    indent: {
+        width: tokens.spacingHorizontalL
     }
 });
 export const AccordionEX = (props) => {
     const classes = useStyles();
     const [opened, setOpened] = React.useState(props.opened || props.groups[0].key);
-    return (_jsx(Vertical, { main: true, css: [classes.root], children: props.groups.map(group => _jsxs(React.Fragment, { children: [_jsxs(Horizontal, { css: [classes.header], onClick: () => setOpened(group.key), children: [_jsx(ChevronRightRegular, { className: opened === group.key && classes.opened }), _jsx(Label, { children: group.title })] }), group.key === opened && _jsx(Vertical, { main: true, css: [classes.body], children: group.content })] }, group.key)) }));
+    return (_jsx(Vertical, { main: true, css: [classes.root, KnownClassNames.accordion], children: props.groups.map(group => _jsxs(React.Fragment, { children: [_jsx(ButtonEX, { className: `${classes.header} ${KnownClassNames.accordionHeader} ${opened === group.key ? ` ${KnownClassNames.isOpen}` : ''}`, icon: _jsx(ChevronRightRegular, { className: opened === group.key ? classes.opened : '' }), title: group.title, showTitleWithIcon: true, dontCenterText: true, onClick: () => setOpened(group.key) }), _jsx(DividerEX, {}), group.key === opened && _jsxs(_Fragment, { children: [_jsxs(Horizontal, { main: true, css: [classes.body, KnownClassNames.accordionBodyWrapper], children: [_jsx(Section, { css: [classes.indent, KnownClassNames.accordionBodyIndent] }), _jsx(Vertical, { main: true, css: [KnownClassNames.accordionBody], children: group.content })] }), _jsx(DividerEX, {})] })] }, group.key)) }));
 };
 //# sourceMappingURL=accordion.js.map

package/dist/controls/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/controls/accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,SAAS,EAAE,eAAe;QAC1B,UAAU,EAAE,0BAA0B;KACzC;IACD,MAAM,EAAE;QACJ,MAAM,EAAE,SAAS;KACpB;IACD,IAAI,EAAE;QACF,SAAS,EAAE,MAAM;KACpB;IACD,IAAI,EAAE;QACF,QAAQ,EAAE,MAAM;KACnB;CACJ,CAAC,CAAC;AAYH,MAAM,CAAC,MAAM,WAAW,GAAoC,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAChF,OAAO,CAAC,KAAC,QAAQ,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,YACrC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,MAAC,KAAK,CAAC,QAAQ,eACtC,MAAC,UAAU,IAAC,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,aAClE,KAAC,mBAAmB,IAAC,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,IAAI,OAAO,CAAC,MAAM,GAAI,EAC1E,KAAC,KAAK,cAAE,KAAK,CAAC,KAAK,GAAS,IACnB,EACZ,KAAK,CAAC,GAAG,KAAK,MAAM,IAAI,KAAC,QAAQ,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,YACtD,KAAK,CAAC,OAAO,GACP,KAPiC,KAAK,CAAC,GAAG,CAQxC,CAAC,GACX,CACV,CAAC;AACN,CAAC,CAAA"}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/controls/accordion.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,MAAM,EAAE;QACJ,SAAS,EAAE,eAAe;QAC1B,UAAU,EAAE,0BAA0B;KACzC;IACD,MAAM,EAAE;QACJ,WAAW,EAAE,CAAC;KACjB;IACD,IAAI,EAAE;QACF,SAAS,EAAE,MAAM;KACpB;IACD,IAAI,EAAE;QACF,QAAQ,EAAE,MAAM;KACnB;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,MAAM,CAAC,kBAAkB;KACnC;CACJ,CAAC,CAAC;AAYH,MAAM,CAAC,MAAM,WAAW,GAAoC,CAAC,KAAK,EAAE,EAAE;IAClE,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAC5B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC;IAChF,OAAO,CAAC,KAAC,QAAQ,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,eAAe,CAAC,SAAS,CAAC,YAChE,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,MAAC,KAAK,CAAC,QAAQ,eACtC,KAAC,QAAQ,IAAC,SAAS,EAAE,GAAG,OAAO,CAAC,MAAM,IAAI,eAAe,CAAC,eAAe,IAAI,MAAM,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,eAAe,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EACnI,IAAI,EAAE,KAAC,mBAAmB,IAAC,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,GAAI,EACpF,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,iBAAiB,QAAC,cAAc,QACpD,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,GACrC,EACF,KAAC,SAAS,KAAG,EACZ,KAAK,CAAC,GAAG,KAAK,MAAM,IAAI,8BACrB,MAAC,UAAU,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,eAAe,CAAC,oBAAoB,CAAC,aACtE,KAAC,OAAO,IAAC,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,eAAe,CAAC,mBAAmB,CAAC,GAAY,EAC/E,KAAC,QAAQ,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,eAAe,CAAC,aAAa,CAAC,YAC9C,KAAK,CAAC,OAAO,GACP,IACF,EACb,KAAC,SAAS,KAAG,IACd,KAfyC,KAAK,CAAC,GAAG,CAgBxC,CAAC,GACX,CACV,CAAC;AACN,CAAC,CAAA"}

package/dist/controls/divider.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+interface IProps {
+}
+export declare const DividerEX: React.FunctionComponent<React.PropsWithChildren<IProps>>;
+export {};

package/dist/controls/divider.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Divider, makeStyles } from '@fluentui/react-components';
+const useStyles = makeStyles({
+    separator: {
+        flexGrow: 0
+    }
+});
+export const DividerEX = (props) => {
+    const cssNames = useStyles();
+    return (_jsx(Divider, Object.assign({}, props, { className: cssNames.separator })));
+};
+//# sourceMappingURL=divider.js.map

package/dist/controls/divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"divider.js","sourceRoot":"","sources":["../../src/controls/divider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAGjE,MAAM,SAAS,GAAG,UAAU,CAAC;IACzB,SAAS,EAAE;QACP,QAAQ,EAAE,CAAC;KACd;CACJ,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,SAAS,GAA6D,CAAC,KAAK,EAAE,EAAE;IACzF,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,OAAO,CACH,KAAC,OAAO,oBAAK,KAAK,IAAE,SAAS,EAAE,QAAQ,CAAC,SAAS,IAAI,CACxD,CAAC;AACN,CAAC,CAAA"}

package/dist/controls/error-boundary.d.ts

@@ -18,6 +18,6 @@ export declare class ErrorBoundary extends React.Component<React.PropsWithChildr
         marker: string | number;
     };
     componentDidCatch(error: any, errorInfo: any): void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element;
+    render(): string | number | boolean | Iterable<React.ReactNode> | JSX.Element;
 }
 export {};

package/dist/styles/styles.d.ts

@@ -14,6 +14,12 @@ export declare const KnownClassNames: {
     vertical: string;
     horizontal: string;
     list: string;
+    accordion: string;
+    accordionHeader: string;
+    accordionBody: string;
+    accordionBodyWrapper: string;
+    accordionBodyIndent: string;
+    isOpen: string;
 };
 export declare const useCommonStyles: () => Record<"printShow" | "printHide", string>;
 export declare const widthMedium = 360;

package/dist/styles/styles.js

@@ -53,7 +53,13 @@ export const KnownClassNames = {
     section: 'kfui-section',
     vertical: 'kfui-vertical',
     horizontal: 'kfui-horizontal',
-    list: 'kfui-list'
+    list: 'kfui-list',
+    accordion: 'kfui-accordion',
+    accordionHeader: 'kfui-accordion-header',
+    accordionBody: 'kfui-accordion-body',
+    accordionBodyWrapper: 'kfui-accordion-body-wrapper',
+    accordionBodyIndent: 'kfui-accordion-indent',
+    isOpen: 'is-opened',
 };
 export const useCommonStyles = makeStyles({
     printShow: {

package/dist/styles/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE9E,MAAM,KAAQ,MAAM,CAsDnB;AAtDD,WAAc,MAAM;IACH,WAAI,GAAiB;QAC9B,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,CAAC;KACd,CAAC;IACW,gBAAS,GAAiB;QACnC,MAAM,EAAE,SAAS;QACjB,CAAC,SAAS,CAAC,EAAE;YACT,MAAM,EAAE,SAAS;SACpB;KACJ,CAAA;IACD,MAAM,GAAG,GAAiB;QACtB,OAAO,EAAE,MAAM,CAAC,kBAAkB;QAClC,YAAY,EAAE,MAAM,CAAC,kBAAkB;QACvC,SAAS,EAAE,MAAM,CAAC,OAAO;QACzB,MAAM,EAAE,MAAM,CAAC,oBAAoB;KACtC,CAAA;IACY,YAAK,mCACX,GAAG;QACN,wBAAwB;QACxB,QAAQ,EAAE,UAAU;QACpB,wBAAwB;QACxB,QAAQ,EAAE,KAAK;QACf,8BAA8B;QAC9B,SAAS,EAAE,QAAQ,EAEnB,CAAC,OAAO,CAAC,EAAE;YACP,QAAQ,EAAE,MAAM;SACnB,GACJ,CAAA;IAEY,WAAI,GAAiB;QAC9B,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,MAAM,CAAC,gBAAgB;QAC/B,SAAS,EAAE,MAAM,CAAC,gBAAgB;KACrC,CAAA;IAEY,WAAI,GAAiB;QAC9B,QAAQ,EAAE,MAAM;KACnB,CAAA;IACY,YAAK,GAAiB;QAC/B,MAAM,EAAE,CAAC;QACT,SAAS,EAAE,CAAC;KACf,CAAA;IACY,eAAQ,GAAiB;QAClC,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KAC3B,CAAA;IAED,qCAAqC;IACrC,IAAI;AACR,CAAC,EAtDa,MAAM,KAAN,MAAM,QAsDnB;AAED,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,cAAc;IACvB,QAAQ,EAAE,eAAe;IACzB,UAAU,EAAE,iBAAiB;IAC7B,IAAI,EAAE,WAAW;CACpB,CAAA;AACD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAAC;IACtC,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,CAAC,gBAAgB,eAAe,CAAC,KAAK,GAAG,CAAC,EAAE;YACxC,OAAO,EAAE,OAAO;SACnB;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,OAAO;SACnB;KACJ;IACD,SAAS,EAAE;QACP,CAAC,gBAAgB,eAAe,CAAC,KAAK,GAAG,CAAC,EAAE;YACxC,OAAO,EAAE,iBAAiB;SAC7B;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,iBAAiB;SAC7B;KACJ;CACJ,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC;AAC/B,+BAA+B"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/styles/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,UAAU,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAE9E,MAAM,KAAQ,MAAM,CAsDnB;AAtDD,WAAc,MAAM;IACH,WAAI,GAAiB;QAC9B,UAAU,EAAE,CAAC;QACb,QAAQ,EAAE,CAAC;KACd,CAAC;IACW,gBAAS,GAAiB;QACnC,MAAM,EAAE,SAAS;QACjB,CAAC,SAAS,CAAC,EAAE;YACT,MAAM,EAAE,SAAS;SACpB;KACJ,CAAA;IACD,MAAM,GAAG,GAAiB;QACtB,OAAO,EAAE,MAAM,CAAC,kBAAkB;QAClC,YAAY,EAAE,MAAM,CAAC,kBAAkB;QACvC,SAAS,EAAE,MAAM,CAAC,OAAO;QACzB,MAAM,EAAE,MAAM,CAAC,oBAAoB;KACtC,CAAA;IACY,YAAK,mCACX,GAAG;QACN,wBAAwB;QACxB,QAAQ,EAAE,UAAU;QACpB,wBAAwB;QACxB,QAAQ,EAAE,KAAK;QACf,8BAA8B;QAC9B,SAAS,EAAE,QAAQ,EAEnB,CAAC,OAAO,CAAC,EAAE;YACP,QAAQ,EAAE,MAAM;SACnB,GACJ,CAAA;IAEY,WAAI,GAAiB;QAC9B,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,MAAM,CAAC,gBAAgB;QAC/B,SAAS,EAAE,MAAM,CAAC,gBAAgB;KACrC,CAAA;IAEY,WAAI,GAAiB;QAC9B,QAAQ,EAAE,MAAM;KACnB,CAAA;IACY,YAAK,GAAiB;QAC/B,MAAM,EAAE,CAAC;QACT,SAAS,EAAE,CAAC;KACf,CAAA;IACY,eAAQ,GAAiB;QAClC,UAAU,EAAE,QAAQ;QACpB,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;KAC3B,CAAA;IAED,qCAAqC;IACrC,IAAI;AACR,CAAC,EAtDa,MAAM,KAAN,MAAM,QAsDnB;AAED,MAAM,CAAC,MAAM,eAAe,GAAG;IAC3B,KAAK,EAAE,YAAY;IACnB,OAAO,EAAE,cAAc;IACvB,QAAQ,EAAE,eAAe;IACzB,UAAU,EAAE,iBAAiB;IAC7B,IAAI,EAAE,WAAW;IACjB,SAAS,EAAE,gBAAgB;IAC3B,eAAe,EAAE,uBAAuB;IACxC,aAAa,EAAE,qBAAqB;IACpC,oBAAoB,EAAE,6BAA6B;IACnD,mBAAmB,EAAE,uBAAuB;IAC5C,MAAM,EAAE,WAAW;CACtB,CAAA;AACD,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAAC;IACtC,SAAS,EAAE;QACP,OAAO,EAAE,MAAM;QACf,CAAC,gBAAgB,eAAe,CAAC,KAAK,GAAG,CAAC,EAAE;YACxC,OAAO,EAAE,OAAO;SACnB;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,OAAO;SACnB;KACJ;IACD,SAAS,EAAE;QACP,CAAC,gBAAgB,eAAe,CAAC,KAAK,GAAG,CAAC,EAAE;YACxC,OAAO,EAAE,iBAAiB;SAC7B;QACD,cAAc,EAAE;YACZ,OAAO,EAAE,iBAAiB;SAC7B;KACJ;CACJ,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAC;AAC/B,+BAA+B"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kwiz/fluentui",
-    "version": "1.0.26",
+    "version": "1.0.28",
     "description": "KWIZ common controls for FluentUI",
     "module": "dist/index.js",
     "types": "dist/index.d.ts",

package/src/controls/accordion.tsx

@@ -1,7 +1,11 @@
-import { Label, makeStyles } from "@fluentui/react-components";
+import { makeStyles, tokens } 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 { Section } from "./section";
 import { Vertical } from "./vertical";
 
 const useStyles = makeStyles({
@@ -10,13 +14,16 @@ const useStyles = makeStyles({
         transition: "transform 200ms ease-out"
     },
     header: {
-        cursor: "pointer"
+        paddingLeft: 0
     },
     root: {
         maxHeight: "100%"
     },
     body: {
-        overflow: "auto"
+        overflow: "auto",
+    },
+    indent: {
+        width: tokens.spacingHorizontalL
     }
 });
 
@@ -33,15 +40,23 @@ interface iProps {
 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]}>
+    return (<Vertical main css={[classes.root, KnownClassNames.accordion]}>
         {props.groups.map(group => <React.Fragment key={group.key}>
-            <Horizontal css={[classes.header]} onClick={() => setOpened(group.key)}>
-                <ChevronRightRegular className={opened === group.key && classes.opened} />
-                <Label>{group.title}</Label>
-            </Horizontal>
-            {group.key === opened && <Vertical main css={[classes.body]}>
-                {group.content}
-            </Vertical>}
+            <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]}>
+                    <Section css={[classes.indent, KnownClassNames.accordionBodyIndent]}></Section>
+                    <Vertical main css={[KnownClassNames.accordionBody]}>
+                        {group.content}
+                    </Vertical>
+                </Horizontal>
+                <DividerEX />
+            </>}
         </React.Fragment>)}
     </Vertical>
     );

package/src/controls/divider.tsx

@@ -0,0 +1,16 @@
+import { Divider, makeStyles } from '@fluentui/react-components';
+import React from 'react';
+
+const useStyles = makeStyles({
+    separator: {
+        flexGrow: 0
+    }
+});
+interface IProps {
+}
+export const DividerEX: React.FunctionComponent<React.PropsWithChildren<IProps>> = (props) => {
+    const cssNames = useStyles();
+    return (
+        <Divider {...props} className={cssNames.separator} />
+    );
+}

package/src/styles/styles.ts

@@ -61,7 +61,13 @@ export const KnownClassNames = {
     section: 'kfui-section',
     vertical: 'kfui-vertical',
     horizontal: 'kfui-horizontal',
-    list: 'kfui-list'
+    list: 'kfui-list',
+    accordion: 'kfui-accordion',
+    accordionHeader: 'kfui-accordion-header',
+    accordionBody: 'kfui-accordion-body',
+    accordionBodyWrapper: 'kfui-accordion-body-wrapper',
+    accordionBodyIndent: 'kfui-accordion-indent',
+    isOpen: 'is-opened',
 }
 export const useCommonStyles = makeStyles({
     printShow: {