@fluentui/react-divider 0.0.0-nightly-20220302-0405.1

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Divider/useDividerStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,EAAuB,UAAvB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,gBAAgB,GAAG,aAAzB;AAEP,MAAM,cAAc,GAAG,MAAvB;AACA,MAAM,YAAY,GAAG,MAArB;AACA,MAAM,iBAAiB,GAAG,KAA1B;AACA,MAAM,iBAAiB,GAAG,MAA1B;;AAEA,MAAM,aAAa,gBAAG;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;AAAA,EAAtB;;AAkGA,MAAM,mBAAmB,gBAAG;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,EAA5B;;AAwDA,MAAM,iBAAiB,gBAAG;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,EAA1B;;AA8DA,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;AAC7E,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,YAAY,CACjC,gBADiC,EAGjC;AACA,EAAA,UAAU,CAAC,IAJsB,EAKjC,UAAU,CAAC,YAAD,CALuB,EAMjC,UAAU,IAAI,UAAU,CAAC,UAAD,CANS,EAQjC;AACA,GAAC,QAAD,IAAa,gBAAgB,CAAC,IATG,EAUjC,CAAC,QAAD,IAAa,KAAb,IAAsB,gBAAgB,CAAC,KAVN,EAWjC,CAAC,QAAD,IAAa,gBAAgB,CAAC,YAAD,CAXI,EAajC;AACA,EAAA,QAAQ,IAAI,cAAc,CAAC,IAdM,EAejC,QAAQ,IAAI,KAAZ,IAAqB,cAAc,CAAC,KAfH,EAgBjC,QAAQ,IAAI,cAAc,CAAC,YAAD,CAhBO,EAiBjC,QAAQ,IAAI,KAAK,CAAC,IAAN,CAAW,QAAX,KAAwB,SAApC,IAAiD,cAAc,CAAC,YAjB/B,EAmBjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,QAAX,KAAwB,SAAxB,IAAqC,UAAU,CAAC,SApBf,EAsBjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAvBsB,CAAnC;AA0BA,SAAO,KAAP;AACD,CAlCM","sourcesContent":["import { mergeClasses, shorthands, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DividerState } from './Divider.types';\n\nexport const dividerClassName = 'fui-Divider';\n\nconst contentSpacing = '12px';\nconst insetSpacing = '12px';\nconst maxStartEndLength = '8px';\nconst minStartEndLength = '8px;';\n\nconst useBaseStyles = makeStyles({\n  // Base styles\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'row',\n    flexGrow: 1,\n    position: 'relative',\n\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    lineHeight: tokens.lineHeightBase200,\n    textAlign: 'center',\n\n    color: tokens.colorNeutralForeground2,\n\n    ':before': {\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexGrow: 1,\n      ...shorthands.borderColor(tokens.colorNeutralStroke2),\n    },\n\n    ':after': {\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexGrow: 1,\n      ...shorthands.borderColor(tokens.colorNeutralStroke2),\n    },\n  },\n\n  // Childless styles\n  childless: {\n    ':before': {\n      marginBottom: 0,\n      marginRight: 0,\n    },\n\n    ':after': {\n      marginLeft: 0,\n      marginTop: 0,\n    },\n  },\n\n  // Alignment variations\n  start: {\n    ':after': {\n      content: '\"\"',\n    },\n  },\n  center: {\n    ':before': {\n      content: '\"\"',\n    },\n    ':after': {\n      content: '\"\"',\n    },\n  },\n  end: {\n    ':before': {\n      content: '\"\"',\n    },\n  },\n\n  // Appearance variations\n  brand: {\n    color: tokens.colorBrandForeground1,\n\n    ':before': {\n      ...shorthands.borderColor(tokens.colorBrandStroke1),\n    },\n\n    ':after': {\n      ...shorthands.borderColor(tokens.colorBrandStroke1),\n    },\n  },\n  subtle: {\n    ':before': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke3),\n    },\n\n    ':after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke3),\n    },\n  },\n  strong: {\n    ':before': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n\n    ':after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n  },\n});\n\nconst useHorizontalStyles = makeStyles({\n  // Base styles\n  base: {\n    width: '100%',\n\n    ':before': {\n      borderTopStyle: 'solid',\n      borderTopWidth: tokens.strokeWidthThin,\n      minWidth: minStartEndLength,\n    },\n\n    ':after': {\n      borderTopStyle: 'solid',\n      borderTopWidth: tokens.strokeWidthThin,\n      minWidth: minStartEndLength,\n    },\n  },\n\n  // Inset styles\n  inset: {\n    paddingLeft: insetSpacing,\n    paddingRight: insetSpacing,\n  },\n\n  // Alignment variations\n  start: {\n    ':before': {\n      content: '\"\"',\n      marginRight: contentSpacing,\n      maxWidth: maxStartEndLength,\n    },\n\n    ':after': {\n      marginLeft: contentSpacing,\n    },\n  },\n  center: {\n    ':before': {\n      marginRight: contentSpacing,\n    },\n    ':after': {\n      marginLeft: contentSpacing,\n    },\n  },\n  end: {\n    ':before': {\n      marginRight: contentSpacing,\n    },\n    ':after': {\n      content: '\"\"',\n      marginLeft: contentSpacing,\n      maxWidth: maxStartEndLength,\n    },\n  },\n});\n\nconst useVerticalStyles = makeStyles({\n  // Base styles\n  base: {\n    flexDirection: 'column',\n    minHeight: '20px',\n\n    ':before': {\n      borderRightStyle: 'solid',\n      borderRightWidth: tokens.strokeWidthThin,\n      minHeight: minStartEndLength,\n    },\n\n    ':after': {\n      borderRightStyle: 'solid',\n      borderRightWidth: tokens.strokeWidthThin,\n      minHeight: minStartEndLength,\n    },\n  },\n\n  // Inset styles\n  inset: {\n    marginTop: insetSpacing,\n    marginBottom: insetSpacing,\n  },\n\n  // With children styles\n  withChildren: {\n    minHeight: '84px',\n  },\n\n  // Alignment variations\n  start: {\n    ':before': {\n      content: '\"\"',\n      marginBottom: contentSpacing,\n      maxHeight: maxStartEndLength,\n    },\n\n    ':after': {\n      marginTop: contentSpacing,\n    },\n  },\n  center: {\n    ':before': {\n      marginBottom: contentSpacing,\n    },\n    ':after': {\n      marginTop: contentSpacing,\n    },\n  },\n  end: {\n    ':before': {\n      marginBottom: contentSpacing,\n    },\n    ':after': {\n      content: '\"\"',\n      marginTop: contentSpacing,\n      maxHeight: maxStartEndLength,\n    },\n  },\n});\n\nexport const useDividerStyles_unstable = (state: DividerState): DividerState => {\n  const baseStyles = useBaseStyles();\n  const horizontalStyles = useHorizontalStyles();\n  const verticalStyles = useVerticalStyles();\n\n  const { alignContent, appearance, inset, vertical } = state;\n\n  state.root.className = mergeClasses(\n    dividerClassName,\n\n    // Base styles\n    baseStyles.base,\n    baseStyles[alignContent],\n    appearance && baseStyles[appearance],\n\n    // Horizontal styles\n    !vertical && horizontalStyles.base,\n    !vertical && inset && horizontalStyles.inset,\n    !vertical && horizontalStyles[alignContent],\n\n    // Vertical styles\n    vertical && verticalStyles.base,\n    vertical && inset && verticalStyles.inset,\n    vertical && verticalStyles[alignContent],\n    vertical && state.root.children !== undefined && verticalStyles.withChildren,\n\n    // Childless styles\n    state.root.children === undefined && baseStyles.childless,\n\n    // User provided class name\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/index.d.ts

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

package/lib/index.js

@@ -0,0 +1,2 @@
+export * from './Divider';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

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

package/lib/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.18.1"
+    }
+  ]
+}

package/lib-commonjs/Divider.d.ts

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

package/lib-commonjs/Divider.js

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

package/lib-commonjs/Divider.js.map

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

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

@@ -0,0 +1,6 @@
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DividerProps } from './Divider.types';
+/**
+ * A divider visually segments content into groups.
+ */
+export declare const Divider: ForwardRefComponent<DividerProps>;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const renderDivider_1 = /*#__PURE__*/require("./renderDivider");
+
+const useDivider_1 = /*#__PURE__*/require("./useDivider");
+
+const useDividerStyles_1 = /*#__PURE__*/require("./useDividerStyles");
+/**
+ * A divider visually segments content into groups.
+ */
+
+
+exports.Divider = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useDivider_1.useDivider_unstable(props, ref);
+  useDividerStyles_1.useDividerStyles_unstable(state);
+  return renderDivider_1.renderDivider_unstable(state);
+});
+exports.Divider.displayName = 'Divider';
+//# sourceMappingURL=Divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Divider/Divider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxF,QAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;AAEA,EAAA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;AAEA,SAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CANyD,CAA7C;AAQb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { renderDivider_unstable } from './renderDivider';\nimport { useDivider_unstable } from './useDivider';\nimport { useDividerStyles_unstable } from './useDividerStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { DividerProps } from './Divider.types';\n\n/**\n * A divider visually segments content into groups.\n */\nexport const Divider: ForwardRefComponent<DividerProps> = React.forwardRef((props, ref) => {\n  const state = useDivider_unstable(props, ref);\n\n  useDividerStyles_unstable(state);\n\n  return renderDivider_unstable(state);\n});\n\nDivider.displayName = 'Divider';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,36 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+export declare type DividerSlots = {
+    /**
+     * Root of the component that renders as a `<div>` tag.
+     */
+    root: Slot<'div'>;
+    /**
+     * Accessibility wrapper for content when presented.
+     */
+    wrapper: Slot<'div'>;
+};
+declare type DividerCommons = {
+    /**
+     * Determines the alignment of the content within the divider.
+     * @defaultvalue 'center'
+     */
+    alignContent: 'start' | 'center' | 'end';
+    /**
+     * A divider can have one of the preset appearances.
+     * When not specified, the divider has its default appearance.
+     */
+    appearance?: 'brand' | 'strong' | 'subtle';
+    /**
+     * Adds padding to the beginning and end of the divider.
+     * @default false
+     */
+    inset: boolean;
+    /**
+     * A divider can be horizontal (default) or vertical.
+     * @default false
+     */
+    vertical: boolean;
+};
+export declare type DividerProps = ComponentProps<Partial<DividerSlots>> & Partial<DividerCommons>;
+export declare type DividerState = ComponentState<DividerSlots> & DividerCommons;
+export {};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Divider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Divider';\nexport * from './Divider.types';\nexport * from './renderDivider';\nexport * from './useDivider';\nexport * from './useDividerStyles';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,5 @@
+import { DividerState } from './Divider.types';
+/**
+ * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.
+ */
+export declare const renderDivider_unstable: (state: DividerState) => JSX.Element;

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderDivider_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.
+ */
+
+
+const renderDivider_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, { ...slotProps.root
+  }, slotProps.root.children !== undefined && React.createElement(slots.wrapper, { ...slotProps.wrapper
+  }, slotProps.root.children));
+};
+
+exports.renderDivider_unstable = renderDivider_unstable;
+//# sourceMappingURL=renderDivider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Divider/renderDivider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;AACA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QAAf,KAA4B,SAA5B,IACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,EAAuC,SAAS,CAAC,IAAV,CAAe,QAAtD,CAFJ,CADF;AAOD,CATM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { DividerSlots, DividerState } from './Divider.types';\n\n/**\n * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.\n */\nexport const renderDivider_unstable = (state: DividerState) => {\n  const { slots, slotProps } = getSlots<DividerSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children !== undefined && (\n        <slots.wrapper {...slotProps.wrapper}>{slotProps.root.children}</slots.wrapper>\n      )}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { DividerProps, DividerState } from './Divider.types';
+/**
+ * Returns the props and state required to render the component
+ * @param props - User-provided props to the Divider component.
+ * @param ref - User-provided ref to be passed to the Divider component.
+ */
+export declare const useDivider_unstable: (props: DividerProps, ref: React.Ref<HTMLElement>) => DividerState;

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

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDivider_unstable = void 0;
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Returns the props and state required to render the component
+ * @param props - User-provided props to the Divider component.
+ * @param ref - User-provided ref to be passed to the Divider component.
+ */
+
+
+const useDivider_unstable = (props, ref) => {
+  const {
+    alignContent = 'center',
+    appearance,
+    inset = false,
+    vertical = false,
+    wrapper
+  } = props;
+  const dividerId = react_utilities_1.useId('divider-');
+  return {
+    // Props passed at the top-level
+    alignContent,
+    appearance,
+    inset,
+    vertical,
+    // Slots definition
+    components: {
+      root: 'div',
+      wrapper: 'div'
+    },
+    root: react_utilities_1.getNativeElementProps('div', { ...props,
+      ref,
+      role: 'separator',
+      'aria-orientation': vertical ? 'vertical' : 'horizontal',
+      'aria-labelledby': props.children ? dividerId : undefined
+    }),
+    wrapper: react_utilities_1.resolveShorthand(wrapper, {
+      required: true,
+      defaultProps: {
+        id: dividerId,
+        children: props.children
+      }
+    })
+  };
+};
+
+exports.useDivider_unstable = useDivider_unstable;
+//# sourceMappingURL=useDivider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Divider/useDivider.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;AACpG,QAAM;AAAE,IAAA,YAAY,GAAG,QAAjB;AAA2B,IAAA,UAA3B;AAAuC,IAAA,KAAK,GAAG,KAA/C;AAAsD,IAAA,QAAQ,GAAG,KAAjE;AAAwE,IAAA;AAAxE,MAAoF,KAA1F;AACA,QAAM,SAAS,GAAG,iBAAA,CAAA,KAAA,CAAM,UAAN,CAAlB;AAEA,SAAO;AACL;AACA,IAAA,YAFK;AAGL,IAAA,UAHK;AAIL,IAAA,KAJK;AAKL,IAAA,QALK;AAOL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,OAAO,EAAE;AAFC,KARP;AAaL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,EACjC,GAAG,KAD8B;AAEjC,MAAA,GAFiC;AAGjC,MAAA,IAAI,EAAE,WAH2B;AAIjC,0BAAoB,QAAQ,GAAG,UAAH,GAAgB,YAJX;AAKjC,yBAAmB,KAAK,CAAC,QAAN,GAAiB,SAAjB,GAA6B;AALf,KAA7B,CAbD;AAoBL,IAAA,OAAO,EAAE,iBAAA,CAAA,gBAAA,CAAiB,OAAjB,EAA0B;AACjC,MAAA,QAAQ,EAAE,IADuB;AAEjC,MAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,SADQ;AAEZ,QAAA,QAAQ,EAAE,KAAK,CAAC;AAFJ;AAFmB,KAA1B;AApBJ,GAAP;AA4BD,CAhCM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { DividerProps, DividerState } from './Divider.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - User-provided props to the Divider component.\n * @param ref - User-provided ref to be passed to the Divider component.\n */\nexport const useDivider_unstable = (props: DividerProps, ref: React.Ref<HTMLElement>): DividerState => {\n  const { alignContent = 'center', appearance, inset = false, vertical = false, wrapper } = props;\n  const dividerId = useId('divider-');\n\n  return {\n    // Props passed at the top-level\n    alignContent,\n    appearance,\n    inset,\n    vertical,\n\n    // Slots definition\n    components: {\n      root: 'div',\n      wrapper: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ...props,\n      ref,\n      role: 'separator',\n      'aria-orientation': vertical ? 'vertical' : 'horizontal',\n      'aria-labelledby': props.children ? dividerId : undefined,\n    }),\n    wrapper: resolveShorthand(wrapper, {\n      required: true,\n      defaultProps: {\n        id: dividerId,\n        children: props.children,\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,3 @@
+import { DividerState } from './Divider.types';
+export declare const dividerClassName = "fui-Divider";
+export declare const useDividerStyles_unstable: (state: DividerState) => DividerState;

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

@@ -0,0 +1,190 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDividerStyles_unstable = exports.dividerClassName = void 0;
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+exports.dividerClassName = 'fui-Divider';
+const contentSpacing = '12px';
+const insetSpacing = '12px';
+const maxStartEndLength = '8px';
+const minStartEndLength = '8px;';
+
+const useBaseStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "Bt984gj": "f122n59",
+    "B7ck84d": "f1ewtqcl",
+    "mc9l5x": "f22iagw",
+    "Beiy3e4": "f1063pyq",
+    "Bh6795r": "fqerorx",
+    "qhf8xq": "f10pi13n",
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "fwrc4pm",
+    "fsow6f": "f17mccla",
+    "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);}", ".f17mccla{text-align:center;}", ".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_1.__styles({
+  "base": {
+    "a9b677": "fly5x3f",
+    "Bdixowu": "f1bwkb58",
+    "dj0dih": "fn88edj",
+    "Bxms0xd": "f1lo4gz5",
+    "rskduk": "f1iq3fds",
+    "Bouo9z4": "f1oiuz89",
+    "Bcqngy1": "f108ofon"
+  },
+  "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);}", ".f1lo4gz5:before{min-width:8px;}", ".f1iq3fds:after{border-top-style:solid;}", ".f1oiuz89:after{border-top-width:var(--strokeWidthThin);}", ".f108ofon:after{min-width:8px;}", ".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_1.__styles({
+  "base": {
+    "Beiy3e4": "f1vx9l62",
+    "sshi5w": "f16gbxbe",
+    "cqycoz": ["fiio4mc", "fc8z0qo"],
+    "D4ky5z": ["f54lnp5", "f5hao24"],
+    "Bxq2otu": "f11zhyjz",
+    "Dctjco": ["f1r2jemi", "f11olovk"],
+    "Bjz4wo8": ["f1o2ol1z", "f20720x"],
+    "B5p8dqe": "f14bbtgr"
+  },
+  "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);}", ".f11zhyjz:before{min-height:8px;}", ".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);}", ".f14bbtgr:after{min-height:8px;}", ".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_unstable = state => {
+  const baseStyles = useBaseStyles();
+  const horizontalStyles = useHorizontalStyles();
+  const verticalStyles = useVerticalStyles();
+  const {
+    alignContent,
+    appearance,
+    inset,
+    vertical
+  } = state;
+  state.root.className = react_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_unstable = useDividerStyles_unstable;
+//# sourceMappingURL=useDividerStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Divider/useDividerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, shorthands, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DividerState } from './Divider.types';\n\nexport const dividerClassName = 'fui-Divider';\n\nconst contentSpacing = '12px';\nconst insetSpacing = '12px';\nconst maxStartEndLength = '8px';\nconst minStartEndLength = '8px;';\n\nconst useBaseStyles = makeStyles({\n  // Base styles\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'row',\n    flexGrow: 1,\n    position: 'relative',\n\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    lineHeight: tokens.lineHeightBase200,\n    textAlign: 'center',\n\n    color: tokens.colorNeutralForeground2,\n\n    ':before': {\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexGrow: 1,\n      ...shorthands.borderColor(tokens.colorNeutralStroke2),\n    },\n\n    ':after': {\n      boxSizing: 'border-box',\n      display: 'flex',\n      flexGrow: 1,\n      ...shorthands.borderColor(tokens.colorNeutralStroke2),\n    },\n  },\n\n  // Childless styles\n  childless: {\n    ':before': {\n      marginBottom: 0,\n      marginRight: 0,\n    },\n\n    ':after': {\n      marginLeft: 0,\n      marginTop: 0,\n    },\n  },\n\n  // Alignment variations\n  start: {\n    ':after': {\n      content: '\"\"',\n    },\n  },\n  center: {\n    ':before': {\n      content: '\"\"',\n    },\n    ':after': {\n      content: '\"\"',\n    },\n  },\n  end: {\n    ':before': {\n      content: '\"\"',\n    },\n  },\n\n  // Appearance variations\n  brand: {\n    color: tokens.colorBrandForeground1,\n\n    ':before': {\n      ...shorthands.borderColor(tokens.colorBrandStroke1),\n    },\n\n    ':after': {\n      ...shorthands.borderColor(tokens.colorBrandStroke1),\n    },\n  },\n  subtle: {\n    ':before': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke3),\n    },\n\n    ':after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke3),\n    },\n  },\n  strong: {\n    ':before': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n\n    ':after': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    },\n  },\n});\n\nconst useHorizontalStyles = makeStyles({\n  // Base styles\n  base: {\n    width: '100%',\n\n    ':before': {\n      borderTopStyle: 'solid',\n      borderTopWidth: tokens.strokeWidthThin,\n      minWidth: minStartEndLength,\n    },\n\n    ':after': {\n      borderTopStyle: 'solid',\n      borderTopWidth: tokens.strokeWidthThin,\n      minWidth: minStartEndLength,\n    },\n  },\n\n  // Inset styles\n  inset: {\n    paddingLeft: insetSpacing,\n    paddingRight: insetSpacing,\n  },\n\n  // Alignment variations\n  start: {\n    ':before': {\n      content: '\"\"',\n      marginRight: contentSpacing,\n      maxWidth: maxStartEndLength,\n    },\n\n    ':after': {\n      marginLeft: contentSpacing,\n    },\n  },\n  center: {\n    ':before': {\n      marginRight: contentSpacing,\n    },\n    ':after': {\n      marginLeft: contentSpacing,\n    },\n  },\n  end: {\n    ':before': {\n      marginRight: contentSpacing,\n    },\n    ':after': {\n      content: '\"\"',\n      marginLeft: contentSpacing,\n      maxWidth: maxStartEndLength,\n    },\n  },\n});\n\nconst useVerticalStyles = makeStyles({\n  // Base styles\n  base: {\n    flexDirection: 'column',\n    minHeight: '20px',\n\n    ':before': {\n      borderRightStyle: 'solid',\n      borderRightWidth: tokens.strokeWidthThin,\n      minHeight: minStartEndLength,\n    },\n\n    ':after': {\n      borderRightStyle: 'solid',\n      borderRightWidth: tokens.strokeWidthThin,\n      minHeight: minStartEndLength,\n    },\n  },\n\n  // Inset styles\n  inset: {\n    marginTop: insetSpacing,\n    marginBottom: insetSpacing,\n  },\n\n  // With children styles\n  withChildren: {\n    minHeight: '84px',\n  },\n\n  // Alignment variations\n  start: {\n    ':before': {\n      content: '\"\"',\n      marginBottom: contentSpacing,\n      maxHeight: maxStartEndLength,\n    },\n\n    ':after': {\n      marginTop: contentSpacing,\n    },\n  },\n  center: {\n    ':before': {\n      marginBottom: contentSpacing,\n    },\n    ':after': {\n      marginTop: contentSpacing,\n    },\n  },\n  end: {\n    ':before': {\n      marginBottom: contentSpacing,\n    },\n    ':after': {\n      content: '\"\"',\n      marginTop: contentSpacing,\n      maxHeight: maxStartEndLength,\n    },\n  },\n});\n\nexport const useDividerStyles_unstable = (state: DividerState): DividerState => {\n  const baseStyles = useBaseStyles();\n  const horizontalStyles = useHorizontalStyles();\n  const verticalStyles = useVerticalStyles();\n\n  const { alignContent, appearance, inset, vertical } = state;\n\n  state.root.className = mergeClasses(\n    dividerClassName,\n\n    // Base styles\n    baseStyles.base,\n    baseStyles[alignContent],\n    appearance && baseStyles[appearance],\n\n    // Horizontal styles\n    !vertical && horizontalStyles.base,\n    !vertical && inset && horizontalStyles.inset,\n    !vertical && horizontalStyles[alignContent],\n\n    // Vertical styles\n    vertical && verticalStyles.base,\n    vertical && inset && verticalStyles.inset,\n    vertical && verticalStyles[alignContent],\n    vertical && state.root.children !== undefined && verticalStyles.withChildren,\n\n    // Childless styles\n    state.root.children === undefined && baseStyles.childless,\n\n    // User provided class name\n    state.root.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.d.ts

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

package/lib-commonjs/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+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

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

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@fluentui/react-divider",
+  "version": "0.0.0-nightly-20220302-0405.1",
+  "description": "Fluent UI component to visually separate content.",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui"
+  },
+  "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": "yarn storybook",
+    "test": "jest --passWithNoTests",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-divider/src && yarn docs",
+    "storybook": "node ../../scripts/storybook/runner",
+    "type-check": "tsc -b tsconfig.json"
+  },
+  "devDependencies": {
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/react-conformance": "*",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220302-0405.1",
+    "@fluentui/scripts": "^1.0.0",
+    "@types/enzyme": "3.10.3",
+    "@types/enzyme-adapter-react-16": "1.0.3",
+    "@types/react": "16.9.42",
+    "@types/react-dom": "16.9.10",
+    "@types/react-test-renderer": "^16.0.0",
+    "enzyme": "~3.10.0",
+    "enzyme-adapter-react-16": "^1.15.0",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
+    "react-test-renderer": "^16.3.0"
+  },
+  "dependencies": {
+    "@griffel/react": "1.0.0",
+    "@fluentui/react-theme": "0.0.0-nightly-20220302-0405.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20220302-0405.1",
+    "tslib": "^2.1.0"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.8.0 <18.0.0",
+    "@types/react-dom": ">=16.8.0 <18.0.0",
+    "react": ">=16.8.0 <18.0.0",
+    "react-dom": ">=16.8.0 <18.0.0"
+  },
+  "beachball": {
+    "disallowedChangeTypes": [
+      "major",
+      "minor",
+      "patch"
+    ]
+  }
+}