@fluentui/react-divider 9.0.0-alpha.9 → 9.0.0-beta.4

package/lib-amd/components/Divider/Divider.types.d.ts

@@ -1,48 +0,0 @@
-import * as React from 'react';
-import { ComponentProps, ShorthandProps } from '@fluentui/react-utilities';
-/**
- * {@docCategory Divider}
- */
-export interface DividerProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
-    /**
-     * Determines the alignment of the content within the divider.
-     * @defaultvalue 'center'
-     */
-    alignContent?: 'start' | 'end' | 'center';
-    /**
-     * Predefined visual styles
-     * @defaultvalue 'default'
-     */
-    appearance?: 'default' | 'subtle' | 'brand' | 'strong';
-    /**
-     * A divider can be classified as important to emphasize its content
-     */
-    important?: boolean;
-    /**
-     * Adds a 12px padding to the begining and end of the divider
-     */
-    inset?: boolean;
-    /**
-     * A divider can be horizontal (default) or vertical*/
-    vertical?: boolean;
-    /**
-     * Accessibility wrapper for content when presented.
-     * A shorthand prop can be a literal, object, or
-     * JSX. The `children` prop of the object can be a render function,
-     * taking in the original slot component and props.
-     */
-    wrapper?: ShorthandProps<React.HTMLAttributes<HTMLDivElement>>;
-}
-/**
- * {@docCategory Divider}
- */
-export interface DividerState extends DividerProps {
-    /**
-     * Ref to the root slot
-     */
-    ref: React.RefObject<HTMLElement>;
-    /**
-     * The Id created to expose accessability for readers
-     */
-    labelledById?: string;
-}

package/lib-amd/components/Divider/Divider.types.js

@@ -1,5 +0,0 @@
-define(["require", "exports"], function (require, exports) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-});
-//# sourceMappingURL=Divider.types.js.map

package/lib-amd/components/Divider/Divider.types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Divider.types.js","sourceRoot":"../src/","sources":["components/Divider/Divider.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ShorthandProps } from '@fluentui/react-utilities';\n\n/**\n * {@docCategory Divider}\n */\nexport interface DividerProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {\n  /**\n   * Determines the alignment of the content within the divider.\n   * @defaultvalue 'center'\n   */\n  alignContent?: 'start' | 'end' | 'center';\n\n  /**\n   * Predefined visual styles\n   * @defaultvalue 'default'\n   */\n  appearance?: 'default' | 'subtle' | 'brand' | 'strong';\n\n  /**\n   * A divider can be classified as important to emphasize its content\n   */\n  important?: boolean;\n\n  /**\n   * Adds a 12px padding to the begining and end of the divider\n   */\n  inset?: boolean;\n\n  /**\n   * A divider can be horizontal (default) or vertical*/\n  vertical?: boolean;\n\n  /**\n   * Accessibility wrapper for content when presented.\n   * A shorthand prop can be a literal, object, or\n   * JSX. The `children` prop of the object can be a render function,\n   * taking in the original slot component and props.\n   */\n  wrapper?: ShorthandProps<React.HTMLAttributes<HTMLDivElement>>;\n}\n\n/**\n * {@docCategory Divider}\n */\nexport interface DividerState extends DividerProps {\n  /**\n   * Ref to the root slot\n   */\n  ref: React.RefObject<HTMLElement>;\n\n  /**\n   * The Id created to expose accessability for readers\n   */\n  labelledById?: string;\n}\n"]}

package/lib-amd/components/Divider/index.d.ts

@@ -1,5 +0,0 @@
-export * from './Divider';
-export * from './Divider.types';
-export * from './renderDivider';
-export * from './useDivider';
-export * from './useDividerStyles';

package/lib-amd/components/Divider/index.js

@@ -1,9 +0,0 @@
-define(["require", "exports", "tslib", "./Divider", "./renderDivider", "./useDivider", "./useDividerStyles"], function (require, exports, tslib_1, Divider_1, renderDivider_1, useDivider_1, useDividerStyles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(Divider_1, exports);
-    tslib_1.__exportStar(renderDivider_1, exports);
-    tslib_1.__exportStar(useDivider_1, exports);
-    tslib_1.__exportStar(useDividerStyles_1, exports);
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/components/Divider/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Divider/index.ts"],"names":[],"mappings":";;;IAAA,yCAA0B;IAE1B,+CAAgC;IAChC,4CAA6B;IAC7B,kDAAmC","sourcesContent":["export * from './Divider';\nexport * from './Divider.types';\nexport * from './renderDivider';\nexport * from './useDivider';\nexport * from './useDividerStyles';\n"]}

package/lib-amd/components/Divider/renderDivider.d.ts

@@ -1,5 +0,0 @@
-import { DividerState } from './Divider.types';
-/**
- * Function that renders the final JSX of the component
- */
-export declare const renderDivider: (state: DividerState) => JSX.Element;

package/lib-amd/components/Divider/renderDivider.js

@@ -1,13 +0,0 @@
-define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./useDivider"], function (require, exports, tslib_1, React, react_utilities_1, useDivider_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Function that renders the final JSX of the component
-     */
-    exports.renderDivider = function (state) {
-        var _a = react_utilities_1.getSlots(state, useDivider_1.dividerShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
-        var children = state.children;
-        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root, { role: "separator" }), children !== undefined && React.createElement(slots.wrapper, tslib_1.__assign({}, slotProps.wrapper))));
-    };
-});
-//# sourceMappingURL=renderDivider.js.map

package/lib-amd/components/Divider/renderDivider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"renderDivider.js","sourceRoot":"../src/","sources":["components/Divider/renderDivider.tsx"],"names":[],"mappings":";;;IAKA;;OAEG;IACU,QAAA,aAAa,GAAG,UAAC,KAAmB;QACzC,IAAA,0EAA6D,EAA3D,gBAAK,EAAE,wBAAoD,CAAC;QAC5D,IAAA,yBAAQ,CAAW;QAE3B,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,IAAE,IAAI,EAAC,WAAW,KAC7C,QAAQ,KAAK,SAAS,IAAI,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI,CACxD,CACd,CAAC;IACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { DividerState } from './Divider.types';\nimport { dividerShorthandProps } from './useDivider';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderDivider = (state: DividerState) => {\n  const { slots, slotProps } = getSlots(state, dividerShorthandProps);\n  const { children } = state;\n\n  return (\n    <slots.root {...slotProps.root} role=\"separator\">\n      {children !== undefined && <slots.wrapper {...slotProps.wrapper} />}\n    </slots.root>\n  );\n};\n"]}

package/lib-amd/components/Divider/useDivider.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { DividerProps, DividerState } from './Divider.types';
-/**
- * Consts listing which props are shorthand props.
- */
-export declare const dividerShorthandProps: readonly ["wrapper", "children"];
-/**
- * Returns the props and state required to render the component
- * @param props - Divider properties
- * @param ref - reference to root HTMLElement of Divider
- * @param defaultProps - default values for the properties of Divider
- */
-export declare const useDivider: (props: DividerProps, ref: React.Ref<HTMLElement>, defaultProps?: DividerProps | undefined) => DividerState;

package/lib-amd/components/Divider/useDivider.js

@@ -1,26 +0,0 @@
-define(["require", "exports", "react", "@fluentui/react-utilities"], function (require, exports, React, react_utilities_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Consts listing which props are shorthand props.
-     */
-    exports.dividerShorthandProps = ['wrapper', 'children'];
-    var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.dividerShorthandProps });
-    /**
-     * Returns the props and state required to render the component
-     * @param props - Divider properties
-     * @param ref - reference to root HTMLElement of Divider
-     * @param defaultProps - default values for the properties of Divider
-     */
-    exports.useDivider = function (props, ref, defaultProps) {
-        var dividerId = react_utilities_1.useId('divider-');
-        var state = mergeProps({
-            ref: react_utilities_1.useMergedRefs(ref, React.useRef(null)),
-            /* The Id created to expose accessibility for readers */
-            'aria-labelledby': props.children ? dividerId : undefined,
-            wrapper: { as: 'div', children: props.children, id: dividerId },
-        }, defaultProps && react_utilities_1.resolveShorthandProps(defaultProps, exports.dividerShorthandProps), react_utilities_1.resolveShorthandProps(props, exports.dividerShorthandProps));
-        return state;
-    };
-});
-//# sourceMappingURL=useDivider.js.map

package/lib-amd/components/Divider/useDivider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDivider.js","sourceRoot":"../src/","sources":["components/Divider/useDivider.ts"],"names":[],"mappings":";;;IAIA;;OAEG;IACU,QAAA,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,CAAU,CAAC;IAEtE,IAAM,UAAU,GAAG,gCAAc,CAAe,EAAE,SAAS,EAAE,6BAAqB,EAAE,CAAC,CAAC;IAEtF;;;;;OAKG;IACU,QAAA,UAAU,GAAG,UACxB,KAAmB,EACnB,GAA2B,EAC3B,YAA2B;QAE3B,IAAM,SAAS,GAAG,uBAAK,CAAC,UAAU,CAAC,CAAC;QACpC,IAAM,KAAK,GAAG,UAAU,CACtB;YACE,GAAG,EAAE,+BAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YAC3C,wDAAwD;YACxD,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YACzD,OAAO,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE;SAChE,EACD,YAAY,IAAI,uCAAqB,CAAC,YAAY,EAAE,6BAAqB,CAAC,EAC1E,uCAAqB,CAAC,KAAK,EAAE,6BAAqB,CAAC,CACpD,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { DividerProps, DividerState } from './Divider.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const dividerShorthandProps = ['wrapper', 'children'] as const;\n\nconst mergeProps = makeMergeProps<DividerState>({ deepMerge: dividerShorthandProps });\n\n/**\n * Returns the props and state required to render the component\n * @param props - Divider properties\n * @param ref - reference to root HTMLElement of Divider\n * @param defaultProps - default values for the properties of Divider\n */\nexport const useDivider = (\n  props: DividerProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: DividerProps,\n): DividerState => {\n  const dividerId = useId('divider-');\n  const state = mergeProps(\n    {\n      ref: useMergedRefs(ref, React.useRef(null)),\n      /* The Id created to expose accessibility for readers */\n      'aria-labelledby': props.children ? dividerId : undefined,\n      wrapper: { as: 'div', children: props.children, id: dividerId },\n    },\n    defaultProps && resolveShorthandProps(defaultProps, dividerShorthandProps),\n    resolveShorthandProps(props, dividerShorthandProps),\n  );\n\n  return state;\n};\n"]}

package/lib-amd/components/Divider/useDividerStyles.d.ts

@@ -1,3 +0,0 @@
-import { DividerState } from './Divider.types';
-/** Applies style classnames to slots */
-export declare const useDividerStyles: (s: DividerState) => DividerState;

package/lib-amd/components/Divider/useDividerStyles.js

@@ -1,210 +0,0 @@
-define(["require", "exports", "@fluentui/react-make-styles"], function (require, exports, react_make_styles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    var useStylesOverride = react_make_styles_1.makeStyles({
-        root: function (tokens) { return ({
-            /* CSS Vars */
-            '--divider-borderMargin': '12px',
-            '--divider-flexDirection': 'row',
-            '--divider-fontColor': tokens.alias.color.neutral.neutralForeground2,
-            '--divider-fontFamily': 'Segoe UI',
-            '--divider-fontSize': '12px',
-            '--divider-fontWeight': '400',
-            '--divider-lineHeight': '17px',
-            '--divider-borderSize': '1px',
-            '--divider-borderStyle': 'solid',
-            '--divider-color': tokens.alias.color.neutral.neutralStroke2,
-            alignItems: 'center',
-            color: 'var(--divider-fontColor)',
-            display: 'flex',
-            flexGrow: 1,
-            flexDirection: 'var(--divider-flexDirection)',
-            fontFamily: 'var(--divider-fontFamily)',
-            fontSize: 'var(--divider-fontSize)',
-            fontWeight: 'var(--divider-fontWeight)',
-            position: 'relative',
-            boxSizing: 'border-box',
-            lineHeight: 'var(--divider-lineHeight)',
-            ':before': {
-                display: 'flex',
-                flexGrow: 1,
-                boxSizing: 'border-box',
-            },
-            ':after': {
-                display: 'flex',
-                flexGrow: 1,
-                boxSizing: 'border-box',
-            },
-        }); },
-        childless: {
-            '--divider-borderMargin': 0,
-        },
-        subtle: function (tokens) { return ({
-            '--divider-color': tokens.alias.color.neutral.neutralStroke3,
-        }); },
-        brand: function (tokens) { return ({
-            '--divider-fontColor': tokens.alias.color.brand.brandBackgroundStatic,
-            '--divider-color': tokens.alias.color.brand.brandBackgroundStatic,
-        }); },
-        strong: function (tokens) { return ({
-            '--divider-color': tokens.alias.color.neutral.neutralStroke1,
-        }); },
-        horizontal: {
-            width: '100%',
-            ':before': {
-                borderTopColor: 'var(--divider-color)',
-                borderTopWidth: 'var(--divider-borderSize)',
-                borderTopStyle: 'var(--divider-borderStyle)',
-            },
-            ':after': {
-                borderTopColor: 'var(--divider-color)',
-                borderTopWidth: 'var(--divider-borderSize)',
-                borderTopStyle: 'var(--divider-borderStyle)',
-            },
-            '&>:only-child': {
-                display: 'flex',
-                textAlign: 'center',
-            },
-        },
-        vertical: {
-            //alignSelf: 'stretch',
-            minHeight: '20px',
-            flexDirection: 'column',
-            ':before': {
-                borderRightColor: 'var(--divider-color)',
-                borderRightWidth: 'var(--divider-borderSize)',
-                borderRightStyle: 'var(--divider-borderStyle)',
-            },
-            ':after': {
-                borderRightColor: 'var(--divider-color)',
-                borderRightWidth: 'var(--divider-borderSize)',
-                borderRightStyle: 'var(--divider-borderStyle)',
-            },
-            '&>:only-child': {
-                display: 'flex',
-                textAlign: 'center',
-            },
-        },
-        verticalWithChildren: {
-            minHeight: '84px',
-        },
-        start: {
-            ':after': {
-                content: '""',
-            },
-        },
-        end: {
-            ':before': {
-                content: '""',
-            },
-        },
-        center: {
-            ':before': {
-                content: '""',
-            },
-            ':after': {
-                content: '""',
-            },
-        },
-        centerWithoutContent: {
-            ':before': {
-                content: '""',
-            },
-        },
-        verticalStart: {
-            ':before': {
-                content: '""',
-                maxHeight: '8px',
-                marginBottom: 'var(--divider-borderMargin)',
-            },
-            ':after': {
-                marginTop: 'var(--divider-borderMargin)',
-            },
-        },
-        verticalEnd: {
-            ':before': {
-                marginBottom: 'var(--divider-borderMargin)',
-            },
-            ':after': {
-                content: '""',
-                maxHeight: '8px',
-                marginTop: 'var(--divider-borderMargin)',
-            },
-        },
-        verticalCenter: {
-            ':before': {
-                marginBottom: 'var(--divider-borderMargin)',
-            },
-            ':after': {
-                marginTop: 'var(--divider-borderMargin)',
-            },
-        },
-        horizontalStart: {
-            ':before': {
-                marginRight: 'var(--divider-borderMargin)',
-                maxWidth: '8px',
-                content: '""',
-            },
-            ':after': {
-                marginLeft: 'var(--divider-borderMargin)',
-            },
-        },
-        horizontalEnd: {
-            ':before': {
-                marginRight: 'var(--divider-borderMargin)',
-            },
-            ':after': {
-                maxWidth: '8px',
-                content: '""',
-                marginLeft: 'var(--divider-borderMargin)',
-            },
-        },
-        horizontalCenter: {
-            ':before': {
-                marginRight: 'var(--divider-borderMargin)',
-            },
-            ':after': {
-                marginLeft: 'var(--divider-borderMargin)',
-            },
-        },
-        important: {
-            '--divider-fontWeight': "700",
-        },
-        verticalColored: {
-            ':before': {
-                borderRightColor: 'var(--divider-color)',
-            },
-            ':after': {
-                borderRightColor: 'var(--divider-color)',
-            },
-        },
-        horizontalColored: {
-            ':before': {
-                borderTopColor: 'var(--divider-color)',
-            },
-            ':after': {
-                borderTopColor: 'var(--divider-color)',
-            },
-        },
-        verticalChildless: {
-            ':before': {
-                marginBottom: 0,
-            },
-        },
-        inset: {
-            paddingLeft: '12px',
-            paddingRight: '12px',
-        },
-        verticalInset: {
-            marginTop: '12px',
-            marginBottom: '12px',
-        },
-    });
-    /** Applies style classnames to slots */
-    exports.useDividerStyles = function (s) {
-        var styles = useStylesOverride();
-        s.className = react_make_styles_1.ax(styles.root, !s.children && styles.childless, s.appearance === 'subtle' && styles.subtle, s.appearance === 'brand' && styles.brand, s.appearance === 'strong' && styles.strong, s.vertical ? styles.vertical : styles.horizontal, s.vertical && s.children !== undefined && styles.verticalWithChildren, s.alignContent === 'start' && styles.start, s.alignContent === 'end' && styles.end, (s.alignContent === 'center' || !s.alignContent) && s.children !== undefined && s.vertical && styles.center, (s.alignContent === 'center' || !s.alignContent) && s.children !== undefined && !s.vertical && styles.center, (s.alignContent === 'center' || !s.alignContent) && s.children === undefined && styles.centerWithoutContent, s.alignContent === 'start' && (s.vertical ? styles.verticalStart : styles.horizontalStart), s.alignContent === 'end' && (s.vertical ? styles.verticalEnd : styles.horizontalEnd), (s.alignContent === 'center' || !s.alignContent) && (s.vertical ? styles.verticalCenter : styles.horizontalCenter), s.important && styles.important, s.color && (s.vertical ? styles.verticalColored : styles.horizontalColored), s.children === undefined && s.vertical && styles.verticalChildless, s.inset && (s.vertical ? styles.verticalInset : styles.inset), s.className);
-        return s;
-    };
-});
-//# sourceMappingURL=useDividerStyles.js.map

package/lib-amd/components/Divider/useDividerStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDividerStyles.js","sourceRoot":"../src/","sources":["components/Divider/useDividerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { ax, makeStyles } from '@fluentui/react-make-styles';\nimport { DividerState } from './Divider.types';\n\nconst useStylesOverride = makeStyles({\n  root: tokens => ({\n    /* CSS Vars */\n    '--divider-borderMargin': '12px',\n    '--divider-flexDirection': 'row',\n    '--divider-fontColor': tokens.alias.color.neutral.neutralForeground2,\n    '--divider-fontFamily': 'Segoe UI',\n    '--divider-fontSize': '12px',\n    '--divider-fontWeight': '400',\n    '--divider-lineHeight': '17px',\n    '--divider-borderSize': '1px',\n    '--divider-borderStyle': 'solid',\n    '--divider-color': tokens.alias.color.neutral.neutralStroke2,\n\n    alignItems: 'center',\n    color: 'var(--divider-fontColor)',\n    display: 'flex',\n    flexGrow: 1,\n    flexDirection: 'var(--divider-flexDirection)',\n    fontFamily: 'var(--divider-fontFamily)',\n    fontSize: 'var(--divider-fontSize)',\n    fontWeight: 'var(--divider-fontWeight)',\n    position: 'relative',\n    boxSizing: 'border-box',\n    lineHeight: 'var(--divider-lineHeight)',\n    ':before': {\n      display: 'flex',\n      flexGrow: 1,\n      boxSizing: 'border-box',\n    },\n\n    ':after': {\n      display: 'flex',\n      flexGrow: 1,\n      boxSizing: 'border-box',\n    },\n  }),\n  childless: {\n    '--divider-borderMargin': 0,\n  },\n  subtle: tokens => ({\n    '--divider-color': tokens.alias.color.neutral.neutralStroke3,\n  }),\n  brand: tokens => ({\n    '--divider-fontColor': tokens.alias.color.brand.brandBackgroundStatic,\n    '--divider-color': tokens.alias.color.brand.brandBackgroundStatic,\n  }),\n  strong: tokens => ({\n    '--divider-color': tokens.alias.color.neutral.neutralStroke1,\n  }),\n  horizontal: {\n    width: '100%',\n    ':before': {\n      borderTopColor: 'var(--divider-color)',\n      borderTopWidth: 'var(--divider-borderSize)',\n      borderTopStyle: 'var(--divider-borderStyle)',\n    },\n    ':after': {\n      borderTopColor: 'var(--divider-color)',\n      borderTopWidth: 'var(--divider-borderSize)',\n      borderTopStyle: 'var(--divider-borderStyle)',\n    },\n    '&>:only-child': {\n      display: 'flex',\n      textAlign: 'center',\n    },\n  },\n  vertical: {\n    //alignSelf: 'stretch',\n    minHeight: '20px',\n    flexDirection: 'column',\n    ':before': {\n      borderRightColor: 'var(--divider-color)',\n      borderRightWidth: 'var(--divider-borderSize)',\n      borderRightStyle: 'var(--divider-borderStyle)',\n    },\n    ':after': {\n      borderRightColor: 'var(--divider-color)',\n      borderRightWidth: 'var(--divider-borderSize)',\n      borderRightStyle: 'var(--divider-borderStyle)',\n    },\n    '&>:only-child': {\n      display: 'flex',\n      textAlign: 'center',\n    },\n  },\n  verticalWithChildren: {\n    minHeight: '84px',\n  },\n  start: {\n    ':after': {\n      content: '\"\"',\n    },\n  },\n  end: {\n    ':before': {\n      content: '\"\"',\n    },\n  },\n  center: {\n    ':before': {\n      content: '\"\"',\n    },\n    ':after': {\n      content: '\"\"',\n    },\n  },\n  centerWithoutContent: {\n    ':before': {\n      content: '\"\"',\n    },\n  },\n  verticalStart: {\n    ':before': {\n      content: '\"\"',\n      maxHeight: '8px',\n      marginBottom: 'var(--divider-borderMargin)',\n    },\n\n    ':after': {\n      marginTop: 'var(--divider-borderMargin)',\n    },\n  },\n  verticalEnd: {\n    ':before': {\n      marginBottom: 'var(--divider-borderMargin)',\n    },\n    ':after': {\n      content: '\"\"',\n      maxHeight: '8px',\n      marginTop: 'var(--divider-borderMargin)',\n    },\n  },\n  verticalCenter: {\n    ':before': {\n      marginBottom: 'var(--divider-borderMargin)',\n    },\n    ':after': {\n      marginTop: 'var(--divider-borderMargin)',\n    },\n  },\n  horizontalStart: {\n    ':before': {\n      marginRight: 'var(--divider-borderMargin)',\n      maxWidth: '8px',\n      content: '\"\"',\n    },\n    ':after': {\n      marginLeft: 'var(--divider-borderMargin)',\n    },\n  },\n  horizontalEnd: {\n    ':before': {\n      marginRight: 'var(--divider-borderMargin)',\n    },\n    ':after': {\n      maxWidth: '8px',\n      content: '\"\"',\n      marginLeft: 'var(--divider-borderMargin)',\n    },\n  },\n  horizontalCenter: {\n    ':before': {\n      marginRight: 'var(--divider-borderMargin)',\n    },\n    ':after': {\n      marginLeft: 'var(--divider-borderMargin)',\n    },\n  },\n  important: {\n    '--divider-fontWeight': `700`,\n  },\n  verticalColored: {\n    ':before': {\n      borderRightColor: 'var(--divider-color)',\n    },\n    ':after': {\n      borderRightColor: 'var(--divider-color)',\n    },\n  },\n  horizontalColored: {\n    ':before': {\n      borderTopColor: 'var(--divider-color)',\n    },\n    ':after': {\n      borderTopColor: 'var(--divider-color)',\n    },\n  },\n  verticalChildless: {\n    ':before': {\n      marginBottom: 0,\n    },\n  },\n  inset: {\n    paddingLeft: '12px',\n    paddingRight: '12px',\n  },\n  verticalInset: {\n    marginTop: '12px',\n    marginBottom: '12px',\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useDividerStyles = (s: DividerState) => {\n  const styles = useStylesOverride();\n  s.className = ax(\n    styles.root,\n    !s.children && styles.childless,\n    s.appearance === 'subtle' && styles.subtle,\n    s.appearance === 'brand' && styles.brand,\n    s.appearance === 'strong' && styles.strong,\n    s.vertical ? styles.vertical : styles.horizontal,\n    s.vertical && s.children !== undefined && styles.verticalWithChildren,\n    s.alignContent === 'start' && styles.start,\n    s.alignContent === 'end' && styles.end,\n    (s.alignContent === 'center' || !s.alignContent) && s.children !== undefined && s.vertical && styles.center,\n    (s.alignContent === 'center' || !s.alignContent) && s.children !== undefined && !s.vertical && styles.center,\n    (s.alignContent === 'center' || !s.alignContent) && s.children === undefined && styles.centerWithoutContent,\n    s.alignContent === 'start' && (s.vertical ? styles.verticalStart : styles.horizontalStart),\n    s.alignContent === 'end' && (s.vertical ? styles.verticalEnd : styles.horizontalEnd),\n    (s.alignContent === 'center' || !s.alignContent) && (s.vertical ? styles.verticalCenter : styles.horizontalCenter),\n    s.important && styles.important,\n    s.color && (s.vertical ? styles.verticalColored : styles.horizontalColored),\n    s.children === undefined && s.vertical && styles.verticalChildless,\n    s.inset && (s.vertical ? styles.verticalInset : styles.inset),\n    s.className,\n  );\n\n  return s;\n};\n"]}

package/lib-amd/index.d.ts

@@ -1 +0,0 @@
-export * from './Divider';

package/lib-amd/index.js

@@ -1,6 +0,0 @@
-define(["require", "exports", "tslib", "./Divider"], function (require, exports, tslib_1, Divider_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    tslib_1.__exportStar(Divider_1, exports);
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;IAAA,yCAA0B","sourcesContent":["export * from './Divider';\n"]}

package/src/components/Divider/Divider.types.ts

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { ComponentProps, ShorthandProps } from '@fluentui/react-utilities';
-
-/**
- * {@docCategory Divider}
- */
-export interface DividerProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
-  /**
-   * Determines the alignment of the content within the divider.
-   * @defaultvalue 'center'
-   */
-  alignContent?: 'start' | 'end' | 'center';
-
-  /**
-   * Predefined visual styles
-   * @defaultvalue 'default'
-   */
-  appearance?: 'default' | 'subtle' | 'brand' | 'strong';
-
-  /**
-   * A divider can be classified as important to emphasize its content
-   */
-  important?: boolean;
-
-  /**
-   * Adds a 12px padding to the begining and end of the divider
-   */
-  inset?: boolean;
-
-  /**
-   * A divider can be horizontal (default) or vertical*/
-  vertical?: boolean;
-
-  /**
-   * Accessibility wrapper for content when presented.
-   * A shorthand prop can be a literal, object, or
-   * JSX. The `children` prop of the object can be a render function,
-   * taking in the original slot component and props.
-   */
-  wrapper?: ShorthandProps<React.HTMLAttributes<HTMLDivElement>>;
-}
-
-/**
- * {@docCategory Divider}
- */
-export interface DividerState extends DividerProps {
-  /**
-   * Ref to the root slot
-   */
-  ref: React.RefObject<HTMLElement>;
-
-  /**
-   * The Id created to expose accessability for readers
-   */
-  labelledById?: string;
-}