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

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

@@ -1,209 +1,182 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_make_styles_1 = require("@fluentui/react-make-styles");
-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',
-    },
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-/** 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;
+exports.useDividerStyles = exports.dividerClassName = void 0;
+
+const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+
+exports.dividerClassName = 'fui-Divider';
+const contentSpacing = '12px';
+const insetSpacing = '12px';
+const startEndMaxHeight = '8px';
+
+const useBaseStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "base": {
+    "Bt984gj": "f122n59",
+    "B7ck84d": "f1ewtqcl",
+    "mc9l5x": "f22iagw",
+    "Beiy3e4": "f1063pyq",
+    "Bh6795r": "fqerorx",
+    "qhf8xq": "f10pi13n",
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "fwrc4pm",
+    "sj55zd": "fkfq4zb",
+    "Bmqnesq": "f170vdtw",
+    "pmf9yy": "fkmkm9e",
+    "B438e65": "fbxxcv3",
+    "ijj6k": "f1vdjgj",
+    "I89eb": ["fz0g6r7", "f1h60vep"],
+    "Bp1vogq": "fn9f2qq",
+    "Bohd3ja": ["f1h60vep", "fz0g6r7"],
+    "oqd9ik": "ffdc0f3",
+    "Fdvyjd": "fsnc50s",
+    "keybh5": "fjrry2l",
+    "F7kzw7": "fii7hsz",
+    "B13j16c": ["fp9yzmz", "f1n0fcl2"],
+    "Bk8j60v": "f13jg1wd",
+    "Bpbi4o9": ["f1n0fcl2", "fp9yzmz"]
+  },
+  "childless": {
+    "z1nrnc": "fc3uzr1",
+    "vrnxjr": ["fhlqc5k", "flnsm0g"],
+    "Bsz71t5": ["f1957mjw", "fxrad5j"],
+    "Brd3o3m": "f1hmx8el"
+  },
+  "start": {
+    "Bs6t6z0": "fqc6z8f"
+  },
+  "center": {
+    "rurcny": "fuzzvh5",
+    "Bs6t6z0": "fqc6z8f"
+  },
+  "end": {
+    "rurcny": "fuzzvh5"
+  },
+  "brand": {
+    "sj55zd": "f16muhyy",
+    "ijj6k": "fob59v2",
+    "I89eb": ["f2pevzt", "fuyeql9"],
+    "Bp1vogq": "f14lh9hz",
+    "Bohd3ja": ["fuyeql9", "f2pevzt"],
+    "F7kzw7": "fd73d1p",
+    "B13j16c": ["f11ucet6", "f1yegzx5"],
+    "Bk8j60v": "f1tupb0d",
+    "Bpbi4o9": ["f1yegzx5", "f11ucet6"]
+  },
+  "subtle": {
+    "ijj6k": "f8mhi1x",
+    "I89eb": ["f18m2ouc", "fddukvx"],
+    "Bp1vogq": "f9zmk3m",
+    "Bohd3ja": ["fddukvx", "f18m2ouc"],
+    "F7kzw7": "fxli1ey",
+    "B13j16c": ["f1qvt1bb", "f5ob950"],
+    "Bk8j60v": "f1nn0kgk",
+    "Bpbi4o9": ["f5ob950", "f1qvt1bb"]
+  },
+  "strong": {
+    "ijj6k": "fkxqtrn",
+    "I89eb": ["f1yx8xct", "f2jll41"],
+    "Bp1vogq": "f1k9rjtw",
+    "Bohd3ja": ["f2jll41", "f1yx8xct"],
+    "F7kzw7": "f1i58boq",
+    "B13j16c": ["f4wmtn9", "f10n3jjp"],
+    "Bk8j60v": "ft17it6",
+    "Bpbi4o9": ["f10n3jjp", "f4wmtn9"]
+  }
+}, {
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f10pi13n{position:relative;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f170vdtw:before{box-sizing:border-box;}", ".fkmkm9e:before{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fbxxcv3:before{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1vdjgj:before{border-top-color:var(--colorNeutralStroke2);}", ".fz0g6r7:before{border-right-color:var(--colorNeutralStroke2);}", ".f1h60vep:before{border-left-color:var(--colorNeutralStroke2);}", ".fn9f2qq:before{border-bottom-color:var(--colorNeutralStroke2);}", ".ffdc0f3:after{box-sizing:border-box;}", ".fsnc50s:after{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fjrry2l:after{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fii7hsz:after{border-top-color:var(--colorNeutralStroke2);}", ".fp9yzmz:after{border-right-color:var(--colorNeutralStroke2);}", ".f1n0fcl2:after{border-left-color:var(--colorNeutralStroke2);}", ".f13jg1wd:after{border-bottom-color:var(--colorNeutralStroke2);}", ".fc3uzr1:before{margin-bottom:0;}", ".fhlqc5k:before{margin-right:0;}", ".flnsm0g:before{margin-left:0;}", ".f1957mjw:after{margin-left:0;}", ".fxrad5j:after{margin-right:0;}", ".f1hmx8el:after{margin-top:0;}", ".fqc6z8f:after{content:\"\";}", ".fuzzvh5:before{content:\"\";}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".fob59v2:before{border-top-color:var(--colorBrandStroke1);}", ".f2pevzt:before{border-right-color:var(--colorBrandStroke1);}", ".fuyeql9:before{border-left-color:var(--colorBrandStroke1);}", ".f14lh9hz:before{border-bottom-color:var(--colorBrandStroke1);}", ".fd73d1p:after{border-top-color:var(--colorBrandStroke1);}", ".f11ucet6:after{border-right-color:var(--colorBrandStroke1);}", ".f1yegzx5:after{border-left-color:var(--colorBrandStroke1);}", ".f1tupb0d:after{border-bottom-color:var(--colorBrandStroke1);}", ".f8mhi1x:before{border-top-color:var(--colorNeutralStroke3);}", ".f18m2ouc:before{border-right-color:var(--colorNeutralStroke3);}", ".fddukvx:before{border-left-color:var(--colorNeutralStroke3);}", ".f9zmk3m:before{border-bottom-color:var(--colorNeutralStroke3);}", ".fxli1ey:after{border-top-color:var(--colorNeutralStroke3);}", ".f1qvt1bb:after{border-right-color:var(--colorNeutralStroke3);}", ".f5ob950:after{border-left-color:var(--colorNeutralStroke3);}", ".f1nn0kgk:after{border-bottom-color:var(--colorNeutralStroke3);}", ".fkxqtrn:before{border-top-color:var(--colorNeutralStroke1);}", ".f1yx8xct:before{border-right-color:var(--colorNeutralStroke1);}", ".f2jll41:before{border-left-color:var(--colorNeutralStroke1);}", ".f1k9rjtw:before{border-bottom-color:var(--colorNeutralStroke1);}", ".f1i58boq:after{border-top-color:var(--colorNeutralStroke1);}", ".f4wmtn9:after{border-right-color:var(--colorNeutralStroke1);}", ".f10n3jjp:after{border-left-color:var(--colorNeutralStroke1);}", ".ft17it6:after{border-bottom-color:var(--colorNeutralStroke1);}"]
+});
+
+const useHorizontalStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "base": {
+    "a9b677": "fly5x3f",
+    "Bdixowu": "f1bwkb58",
+    "dj0dih": "fn88edj",
+    "rskduk": "f1iq3fds",
+    "Bouo9z4": "f1oiuz89"
+  },
+  "inset": {
+    "uwmqm3": ["fjlbh76", "f11qrl6u"],
+    "z189sj": ["f11qrl6u", "fjlbh76"]
+  },
+  "start": {
+    "rurcny": "fuzzvh5",
+    "vrnxjr": ["fncq426", "f12b5w6c"],
+    "B24asle": "f19fn84r",
+    "Bsz71t5": ["f1io6r2y", "fn6j208"]
+  },
+  "center": {
+    "vrnxjr": ["fncq426", "f12b5w6c"],
+    "Bsz71t5": ["f1io6r2y", "fn6j208"]
+  },
+  "end": {
+    "vrnxjr": ["fncq426", "f12b5w6c"],
+    "Bs6t6z0": "fqc6z8f",
+    "Bsz71t5": ["f1io6r2y", "fn6j208"],
+    "B79fe3b": "f3tzpys"
+  }
+}, {
+  "d": [".fly5x3f{width:100%;}", ".f1bwkb58:before{border-top-style:solid;}", ".fn88edj:before{border-top-width:var(--strokeWidthThin);}", ".f1iq3fds:after{border-top-style:solid;}", ".f1oiuz89:after{border-top-width:var(--strokeWidthThin);}", ".fjlbh76{padding-left:12px;}", ".f11qrl6u{padding-right:12px;}", ".fuzzvh5:before{content:\"\";}", ".fncq426:before{margin-right:12px;}", ".f12b5w6c:before{margin-left:12px;}", ".f19fn84r:before{max-width:8px;}", ".f1io6r2y:after{margin-left:12px;}", ".fn6j208:after{margin-right:12px;}", ".fqc6z8f:after{content:\"\";}", ".f3tzpys:after{max-width:8px;}"]
+});
+
+const useVerticalStyles = /*#__PURE__*/react_make_styles_1.__styles({
+  "base": {
+    "Beiy3e4": "f1vx9l62",
+    "sshi5w": "f16gbxbe",
+    "cqycoz": ["fiio4mc", "fc8z0qo"],
+    "D4ky5z": ["f54lnp5", "f5hao24"],
+    "Dctjco": ["f1r2jemi", "f11olovk"],
+    "Bjz4wo8": ["f1o2ol1z", "f20720x"]
+  },
+  "inset": {
+    "B6of3ja": "f1xdg43u",
+    "jrapky": "f1jlhsmd"
+  },
+  "withChildren": {
+    "sshi5w": "f1tjaq3g"
+  },
+  "start": {
+    "rurcny": "fuzzvh5",
+    "z1nrnc": "f1xy8239",
+    "B5kj21": "f1hheky8",
+    "Brd3o3m": "f1mz1b17"
+  },
+  "center": {
+    "z1nrnc": "f1xy8239",
+    "Brd3o3m": "f1mz1b17"
+  },
+  "end": {
+    "z1nrnc": "f1xy8239",
+    "Bs6t6z0": "fqc6z8f",
+    "Brd3o3m": "f1mz1b17",
+    "iiodbw": "fp342oa"
+  }
+}, {
+  "d": [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f16gbxbe{min-height:20px;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f54lnp5:before{border-right-width:var(--strokeWidthThin);}", ".f5hao24:before{border-left-width:var(--strokeWidthThin);}", ".f1r2jemi:after{border-right-style:solid;}", ".f11olovk:after{border-left-style:solid;}", ".f1o2ol1z:after{border-right-width:var(--strokeWidthThin);}", ".f20720x:after{border-left-width:var(--strokeWidthThin);}", ".f1xdg43u{margin-top:12px;}", ".f1jlhsmd{margin-bottom:12px;}", ".f1tjaq3g{min-height:84px;}", ".fuzzvh5:before{content:\"\";}", ".f1xy8239:before{margin-bottom:12px;}", ".f1hheky8:before{max-height:8px;}", ".f1mz1b17:after{margin-top:12px;}", ".fqc6z8f:after{content:\"\";}", ".fp342oa:after{max-height:8px;}"]
+});
+
+const useDividerStyles = state => {
+  const baseStyles = useBaseStyles();
+  const horizontalStyles = useHorizontalStyles();
+  const verticalStyles = useVerticalStyles();
+  const {
+    alignContent,
+    appearance,
+    inset,
+    vertical
+  } = state;
+  state.root.className = react_make_styles_1.mergeClasses(exports.dividerClassName, // Base styles
+  baseStyles.base, baseStyles[alignContent], appearance && baseStyles[appearance], // Horizontal styles
+  !vertical && horizontalStyles.base, !vertical && inset && horizontalStyles.inset, !vertical && horizontalStyles[alignContent], // Vertical styles
+  vertical && verticalStyles.base, vertical && inset && verticalStyles.inset, vertical && verticalStyles[alignContent], vertical && state.root.children !== undefined && verticalStyles.withChildren, // Childless styles
+  state.root.children === undefined && baseStyles.childless, // User provided class name
+  state.root.className);
+  return state;
 };
+
+exports.useDividerStyles = useDividerStyles;
 //# sourceMappingURL=useDividerStyles.js.map

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["../../../src/components/Divider/useDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGa,OAAA,CAAA,gBAAA,GAAmB,aAAnB;AAEb,MAAM,cAAc,GAAG,MAAvB;AACA,MAAM,YAAY,GAAG,MAArB;AACA,MAAM,iBAAiB,GAAG,KAA1B;;AAEA,MAAM,aAAa,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAmGA,MAAM,mBAAmB,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA5B;;AAsDA,MAAM,iBAAiB,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA1B;;AA4DO,MAAM,gBAAgB,GAAI,KAAD,IAAsC;AACpE,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,gBAAgB,GAAG,mBAAmB,EAA5C;AACA,QAAM,cAAc,GAAG,iBAAiB,EAAxC;AAEA,QAAM;AAAE,IAAA,YAAF;AAAgB,IAAA,UAAhB;AAA4B,IAAA,KAA5B;AAAmC,IAAA;AAAnC,MAAgD,KAAtD;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,OAAA,CAAA,gBADqB,EAGrB;AACA,EAAA,UAAU,CAAC,IAJU,EAKrB,UAAU,CAAC,YAAD,CALW,EAMrB,UAAU,IAAI,UAAU,CAAC,UAAD,CANH,EAQrB;AACA,GAAC,QAAD,IAAa,gBAAgB,CAAC,IATT,EAUrB,CAAC,QAAD,IAAa,KAAb,IAAsB,gBAAgB,CAAC,KAVlB,EAWrB,CAAC,QAAD,IAAa,gBAAgB,CAAC,YAAD,CAXR,EAarB;AACA,EAAA,QAAQ,IAAI,cAAc,CAAC,IAdN,EAerB,QAAQ,IAAI,KAAZ,IAAqB,cAAc,CAAC,KAff,EAgBrB,QAAQ,IAAI,cAAc,CAAC,YAAD,CAhBL,EAiBrB,QAAQ,IAAI,KAAK,CAAC,IAAN,CAAW,QAAX,KAAwB,SAApC,IAAiD,cAAc,CAAC,YAjB3C,EAmBrB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,QAAX,KAAwB,SAAxB,IAAqC,UAAU,CAAC,SApB3B,EAsBrB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAvBU,CAAvB;AA0BA,SAAO,KAAP;AACD,CAlCM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}

package/lib-commonjs/index.js

@@ -1,5 +1,10 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./Divider"), exports);
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;AAAA,oDAA0B","sourcesContent":["export * from './Divider';\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-divider",
-  "version": "9.0.0-alpha.9",
+  "version": "9.0.0-beta.4",
   "description": "Fluent UI component to visually separate content.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,18 +13,23 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
     "lint": "just-scripts lint",
-    "start": "just-scripts dev:storybook",
-    "start-test": "just-scripts jest-watch",
-    "test": "just-scripts test",
-    "update-snapshots": "just-scripts jest -u"
+    "start": "yarn storybook",
+    "test": "jest",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/react-divider/src && yarn docs",
+    "storybook": "start-storybook"
   },
   "devDependencies": {
-    "@fluentui/eslint-plugin": "^1.1.0",
-    "@fluentui/react-conformance": "^0.2.5",
+    "@fluentui/babel-make-styles": "9.0.0-beta.4",
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/jest-serializer-make-styles": "9.0.0-beta.4",
+    "@fluentui/react-conformance": "*",
+    "@fluentui/react-conformance-make-styles": "9.0.0-beta.4",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -34,14 +39,13 @@
     "enzyme": "~3.10.0",
     "enzyme-adapter-react-16": "^1.15.0",
     "react": "16.8.6",
-    "react-app-polyfill": "~1.0.1",
     "react-dom": "16.8.6",
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "^9.0.0-alpha.19",
-    "@fluentui/react-utilities": "^9.0.0-alpha.15",
-    "tslib": "^1.10.0"
+    "@fluentui/react-make-styles": "9.0.0-beta.4",
+    "@fluentui/react-utilities": "9.0.0-beta.4",
+    "tslib": "^2.1.0"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <18.0.0",
@@ -50,7 +54,6 @@
     "react-dom": ">=16.8.0 <18.0.0"
   },
   "beachball": {
-    "tag": "alpha",
     "disallowedChangeTypes": [
       "major",
       "minor",

package/config/api-extractor.json

@@ -1,3 +0,0 @@
-{
-  "extends": "@fluentui/scripts/api-extractor/api-extractor.common.json"
-}

package/config/tests.js

@@ -1,7 +0,0 @@
-/** Jest test setup file. */
-
-const { configure } = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
-
-// Configure enzyme.
-configure({ adapter: new Adapter() });

package/etc/react-divider.api.md

@@ -1,45 +0,0 @@
-## API Report File for "@fluentui/react-divider"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-import { ComponentProps } from '@fluentui/react-utilities';
-import * as React from 'react';
-import { ShorthandProps } from '@fluentui/react-utilities';
-
-// @public
-export const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLElement>>;
-
-// @public (undocumented)
-export interface DividerProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
-    alignContent?: 'start' | 'end' | 'center';
-    appearance?: 'default' | 'subtle' | 'brand' | 'strong';
-    important?: boolean;
-    inset?: boolean;
-    vertical?: boolean;
-    wrapper?: ShorthandProps<React.HTMLAttributes<HTMLDivElement>>;
-}
-
-// @public
-export const dividerShorthandProps: readonly ["wrapper", "children"];
-
-// @public (undocumented)
-export interface DividerState extends DividerProps {
-    labelledById?: string;
-    ref: React.RefObject<HTMLElement>;
-}
-
-// @public
-export const renderDivider: (state: DividerState) => JSX.Element;
-
-// @public
-export const useDivider: (props: DividerProps, ref: React.Ref<HTMLElement>, defaultProps?: DividerProps | undefined) => DividerState;
-
-// @public
-export const useDividerStyles: (s: DividerState) => DividerState;
-
-
-// (No @packageDocumentation comment for this package)
-
-```

package/just.config.ts

@@ -1,3 +0,0 @@
-import { preset } from '@fluentui/scripts';
-
-preset();

package/lib-amd/Divider.d.ts

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

package/lib-amd/Divider.js

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

package/lib-amd/Divider.js.map

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

package/lib-amd/common/isConformant.d.ts

@@ -1,2 +0,0 @@
-import { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>): void;

package/lib-amd/common/isConformant.js

@@ -1,13 +0,0 @@
-define(["require", "exports", "@fluentui/react-conformance"], function (require, exports, react_conformance_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    function isConformant(testInfo) {
-        var defaultOptions = {
-            asPropHandlesRef: true,
-            componentPath: module.parent.filename.replace('.test', ''),
-        };
-        react_conformance_1.isConformant(defaultOptions, testInfo);
-    }
-    exports.isConformant = isConformant;
-});
-//# sourceMappingURL=isConformant.js.map

package/lib-amd/common/isConformant.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;IAEA,SAAgB,YAAY,CAAC,QAAoD;QAC/E,IAAM,cAAc,GAAG;YACrB,gBAAgB,EAAE,IAAI;YACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;SAC7D,CAAC;QAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;IAC7C,CAAC;IAPD,oCAOC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>) {\n  const defaultOptions = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}

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

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { DividerProps } from './Divider.types';
-/**
- * Define a styled Divider, using the `useDivider` and `useDividerStyles` hooks.
- * {@docCategory Divider}
- */
-export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLElement>>;

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

@@ -1,15 +0,0 @@
-define(["require", "exports", "react", "./renderDivider", "./useDivider", "./useDividerStyles"], function (require, exports, React, renderDivider_1, useDivider_1, useDividerStyles_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    /**
-     * Define a styled Divider, using the `useDivider` and `useDividerStyles` hooks.
-     * {@docCategory Divider}
-     */
-    exports.Divider = React.forwardRef(function (props, ref) {
-        var state = useDivider_1.useDivider(props, ref);
-        useDividerStyles_1.useDividerStyles(state);
-        return renderDivider_1.renderDivider(state);
-    });
-    exports.Divider.displayName = 'Divider';
-});
-//# sourceMappingURL=Divider.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Divider.js","sourceRoot":"../src/","sources":["components/Divider/Divider.tsx"],"names":[],"mappings":";;;IAMA;;;OAGG;IACU,QAAA,OAAO,GAAG,KAAK,CAAC,UAAU,CAA4B,UAAC,KAAK,EAAE,GAAG;QAC5E,IAAM,KAAK,GAAG,uBAAU,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAErC,mCAAgB,CAAC,KAAK,CAAC,CAAC;QACxB,OAAO,6BAAa,CAAC,KAAK,CAAC,CAAC;IAC9B,CAAC,CAAC,CAAC;IAEH,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import * as React from 'react';\nimport { DividerProps } from './Divider.types';\nimport { renderDivider } from './renderDivider';\nimport { useDivider } from './useDivider';\nimport { useDividerStyles } from './useDividerStyles';\n\n/**\n * Define a styled Divider, using the `useDivider` and `useDividerStyles` hooks.\n * {@docCategory Divider}\n */\nexport const Divider = React.forwardRef<HTMLElement, DividerProps>((props, ref) => {\n  const state = useDivider(props, ref);\n\n  useDividerStyles(state);\n  return renderDivider(state);\n});\n\nDivider.displayName = 'Divider';\n"]}