@fluentui/react-divider 9.0.0-alpha.9 → 9.0.0-nightly.46b9ea7036.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (83) hide show
  1. package/CHANGELOG.json +1888 -1
  2. package/CHANGELOG.md +738 -2
  3. package/Spec.md +48 -53
  4. package/dist/react-divider.d.ts +28 -43
  5. package/lib/Divider.js.map +1 -1
  6. package/lib/common/isConformant.d.ts +3 -1
  7. package/lib/common/isConformant.js +7 -5
  8. package/lib/common/isConformant.js.map +1 -1
  9. package/lib/components/Divider/Divider.d.ts +3 -4
  10. package/lib/components/Divider/Divider.js +5 -5
  11. package/lib/components/Divider/Divider.js.map +1 -1
  12. package/lib/components/Divider/Divider.types.d.ts +25 -38
  13. package/lib/components/Divider/Divider.types.js +1 -0
  14. package/lib/components/Divider/Divider.types.js.map +1 -1
  15. package/lib/components/Divider/index.js +1 -0
  16. package/lib/components/Divider/index.js.map +1 -1
  17. package/lib/components/Divider/renderDivider.js +6 -4
  18. package/lib/components/Divider/renderDivider.js.map +1 -1
  19. package/lib/components/Divider/useDivider.d.ts +2 -7
  20. package/lib/components/Divider/useDivider.js +35 -17
  21. package/lib/components/Divider/useDivider.js.map +1 -1
  22. package/lib/components/Divider/useDividerStyles.d.ts +1 -1
  23. package/lib/components/Divider/useDividerStyles.js +143 -203
  24. package/lib/components/Divider/useDividerStyles.js.map +1 -1
  25. package/lib/index.js.map +1 -1
  26. package/lib/tsdoc-metadata.json +1 -1
  27. package/lib-commonjs/Divider.js +7 -2
  28. package/lib-commonjs/Divider.js.map +1 -1
  29. package/lib-commonjs/common/isConformant.d.ts +3 -1
  30. package/lib-commonjs/common/isConformant.js +17 -7
  31. package/lib-commonjs/common/isConformant.js.map +1 -1
  32. package/lib-commonjs/components/Divider/Divider.d.ts +3 -4
  33. package/lib-commonjs/components/Divider/Divider.js +19 -10
  34. package/lib-commonjs/components/Divider/Divider.js.map +1 -1
  35. package/lib-commonjs/components/Divider/Divider.types.d.ts +25 -38
  36. package/lib-commonjs/components/Divider/Divider.types.js +4 -1
  37. package/lib-commonjs/components/Divider/Divider.types.js.map +1 -1
  38. package/lib-commonjs/components/Divider/index.js +12 -2
  39. package/lib-commonjs/components/Divider/index.js.map +1 -1
  40. package/lib-commonjs/components/Divider/renderDivider.js +21 -9
  41. package/lib-commonjs/components/Divider/renderDivider.js.map +1 -1
  42. package/lib-commonjs/components/Divider/useDivider.d.ts +2 -7
  43. package/lib-commonjs/components/Divider/useDivider.js +45 -18
  44. package/lib-commonjs/components/Divider/useDivider.js.map +1 -1
  45. package/lib-commonjs/components/Divider/useDividerStyles.d.ts +1 -1
  46. package/lib-commonjs/components/Divider/useDividerStyles.js +151 -204
  47. package/lib-commonjs/components/Divider/useDividerStyles.js.map +1 -1
  48. package/lib-commonjs/index.js +7 -2
  49. package/lib-commonjs/index.js.map +1 -1
  50. package/package.json +16 -12
  51. package/NOTICE.txt +0 -0
  52. package/config/api-extractor.json +0 -3
  53. package/config/tests.js +0 -7
  54. package/etc/react-divider.api.md +0 -45
  55. package/just.config.ts +0 -3
  56. package/lib-amd/Divider.d.ts +0 -1
  57. package/lib-amd/Divider.js +0 -6
  58. package/lib-amd/Divider.js.map +0 -1
  59. package/lib-amd/common/isConformant.d.ts +0 -2
  60. package/lib-amd/common/isConformant.js +0 -13
  61. package/lib-amd/common/isConformant.js.map +0 -1
  62. package/lib-amd/components/Divider/Divider.d.ts +0 -7
  63. package/lib-amd/components/Divider/Divider.js +0 -15
  64. package/lib-amd/components/Divider/Divider.js.map +0 -1
  65. package/lib-amd/components/Divider/Divider.types.d.ts +0 -48
  66. package/lib-amd/components/Divider/Divider.types.js +0 -5
  67. package/lib-amd/components/Divider/Divider.types.js.map +0 -1
  68. package/lib-amd/components/Divider/index.d.ts +0 -5
  69. package/lib-amd/components/Divider/index.js +0 -9
  70. package/lib-amd/components/Divider/index.js.map +0 -1
  71. package/lib-amd/components/Divider/renderDivider.d.ts +0 -5
  72. package/lib-amd/components/Divider/renderDivider.js +0 -13
  73. package/lib-amd/components/Divider/renderDivider.js.map +0 -1
  74. package/lib-amd/components/Divider/useDivider.d.ts +0 -13
  75. package/lib-amd/components/Divider/useDivider.js +0 -26
  76. package/lib-amd/components/Divider/useDivider.js.map +0 -1
  77. package/lib-amd/components/Divider/useDividerStyles.d.ts +0 -3
  78. package/lib-amd/components/Divider/useDividerStyles.js +0 -210
  79. package/lib-amd/components/Divider/useDividerStyles.js.map +0 -1
  80. package/lib-amd/index.d.ts +0 -1
  81. package/lib-amd/index.js +0 -6
  82. package/lib-amd/index.js.map +0 -1
  83. package/src/components/Divider/Divider.types.ts +0 -56
@@ -1 +1 @@
1
- {"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"]}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
@@ -1,8 +1,18 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ var tslib_1 = /*#__PURE__*/require("tslib");
8
+
4
9
  tslib_1.__exportStar(require("./Divider"), exports);
10
+
11
+ tslib_1.__exportStar(require("./Divider.types"), exports);
12
+
5
13
  tslib_1.__exportStar(require("./renderDivider"), exports);
14
+
6
15
  tslib_1.__exportStar(require("./useDivider"), exports);
16
+
7
17
  tslib_1.__exportStar(require("./useDividerStyles"), exports);
8
18
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Divider/index.ts"],"names":[],"mappings":";;;AAAA,oDAA0B;AAE1B,0DAAgC;AAChC,uDAA6B;AAC7B,6DAAmC","sourcesContent":["export * from './Divider';\nexport * from './Divider.types';\nexport * from './renderDivider';\nexport * from './useDivider';\nexport * from './useDividerStyles';\n"]}
1
+ {"version":3,"sources":["../../../src/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","sourceRoot":""}
@@ -1,15 +1,27 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
4
- var React = require("react");
5
- var react_utilities_1 = require("@fluentui/react-utilities");
6
- var useDivider_1 = require("./useDivider");
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.renderDivider = void 0;
7
+
8
+ var tslib_1 = /*#__PURE__*/require("tslib");
9
+
10
+ var React = /*#__PURE__*/require("react");
11
+
12
+ var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
7
13
  /**
8
14
  * Function that renders the final JSX of the component
9
15
  */
10
- exports.renderDivider = function (state) {
11
- var _a = react_utilities_1.getSlots(state, useDivider_1.dividerShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
12
- var children = state.children;
13
- return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root, { role: "separator" }), children !== undefined && React.createElement(slots.wrapper, tslib_1.__assign({}, slotProps.wrapper))));
16
+
17
+
18
+ var renderDivider = function (state) {
19
+ var _a = react_utilities_1.getSlots(state, ['root', 'wrapper']),
20
+ slots = _a.slots,
21
+ slotProps = _a.slotProps;
22
+
23
+ return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), slotProps.root.children !== undefined && React.createElement(slots.wrapper, tslib_1.__assign({}, slotProps.wrapper), slotProps.root.children));
14
24
  };
25
+
26
+ exports.renderDivider = renderDivider;
15
27
  //# sourceMappingURL=renderDivider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"renderDivider.js","sourceRoot":"../src/","sources":["components/Divider/renderDivider.tsx"],"names":[],"mappings":";;;AAAA,6BAA+B;AAC/B,6DAAqD;AAErD,2CAAqD;AAErD;;GAEG;AACU,QAAA,aAAa,GAAG,UAAC,KAAmB;IACzC,IAAA,0EAA6D,EAA3D,gBAAK,EAAE,wBAAoD,CAAC;IAC5D,IAAA,yBAAQ,CAAW;IAE3B,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;AACJ,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"]}
1
+ {"version":3,"sources":["../../../src/components/Divider/renderDivider.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,aAAa,GAAG,UAAC,KAAD,EAAoB;AACzC,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,EAA8B,CAAC,MAAD,EAAS,SAAT,CAA9B,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACN,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QAAf,KAA4B,SAA5B,IACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,OAAf,CAAd,EAAuC,SAAS,CAAC,IAAV,CAAe,QAAtD,CAFJ,CADF;AAOD,CATM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}
@@ -1,13 +1,8 @@
1
1
  import * as React from 'react';
2
- import { DividerProps, DividerState } from './Divider.types';
3
- /**
4
- * Consts listing which props are shorthand props.
5
- */
6
- export declare const dividerShorthandProps: readonly ["wrapper", "children"];
2
+ import type { DividerProps, DividerState } from './Divider.types';
7
3
  /**
8
4
  * Returns the props and state required to render the component
9
5
  * @param props - Divider properties
10
6
  * @param ref - reference to root HTMLElement of Divider
11
- * @param defaultProps - default values for the properties of Divider
12
7
  */
13
- export declare const useDivider: (props: DividerProps, ref: React.Ref<HTMLElement>, defaultProps?: DividerProps | undefined) => DividerState;
8
+ export declare const useDivider: (props: DividerProps, ref: React.Ref<HTMLElement>) => DividerState;
@@ -1,26 +1,53 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var React = require("react");
4
- var react_utilities_1 = require("@fluentui/react-utilities");
5
- /**
6
- * Consts listing which props are shorthand props.
7
- */
8
- exports.dividerShorthandProps = ['wrapper', 'children'];
9
- var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.dividerShorthandProps });
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useDivider = void 0;
7
+
8
+ var tslib_1 = /*#__PURE__*/require("tslib");
9
+
10
+ var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
10
11
  /**
11
12
  * Returns the props and state required to render the component
12
13
  * @param props - Divider properties
13
14
  * @param ref - reference to root HTMLElement of Divider
14
- * @param defaultProps - default values for the properties of Divider
15
15
  */
16
- exports.useDivider = function (props, ref, defaultProps) {
17
- var dividerId = react_utilities_1.useId('divider-');
18
- var state = mergeProps({
19
- ref: react_utilities_1.useMergedRefs(ref, React.useRef(null)),
20
- /* The Id created to expose accessibility for readers */
21
- 'aria-labelledby': props.children ? dividerId : undefined,
22
- wrapper: { as: 'div', children: props.children, id: dividerId },
23
- }, defaultProps && react_utilities_1.resolveShorthandProps(defaultProps, exports.dividerShorthandProps), react_utilities_1.resolveShorthandProps(props, exports.dividerShorthandProps));
24
- return state;
16
+
17
+
18
+ var useDivider = function (props, ref) {
19
+ var _a = props.alignContent,
20
+ alignContent = _a === void 0 ? 'center' : _a,
21
+ _b = props.inset,
22
+ inset = _b === void 0 ? false : _b,
23
+ _c = props.vertical,
24
+ vertical = _c === void 0 ? false : _c,
25
+ appearance = props.appearance,
26
+ wrapper = props.wrapper;
27
+ var dividerId = react_utilities_1.useId('divider-');
28
+ return {
29
+ alignContent: alignContent,
30
+ inset: inset,
31
+ vertical: vertical,
32
+ appearance: appearance,
33
+ components: {
34
+ root: 'div',
35
+ wrapper: 'div'
36
+ },
37
+ root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({}, props), {
38
+ ref: ref,
39
+ role: 'separator',
40
+ 'aria-labelledby': props.children ? dividerId : undefined
41
+ })),
42
+ wrapper: react_utilities_1.resolveShorthand(wrapper, {
43
+ required: true,
44
+ defaultProps: {
45
+ id: dividerId,
46
+ children: props.children
47
+ }
48
+ })
49
+ };
25
50
  };
51
+
52
+ exports.useDivider = useDivider;
26
53
  //# sourceMappingURL=useDivider.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"useDivider.js","sourceRoot":"../src/","sources":["components/Divider/useDivider.ts"],"names":[],"mappings":";;AAAA,6BAA+B;AAC/B,6DAAwG;AAGxG;;GAEG;AACU,QAAA,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,CAAU,CAAC;AAEtE,IAAM,UAAU,GAAG,gCAAc,CAAe,EAAE,SAAS,EAAE,6BAAqB,EAAE,CAAC,CAAC;AAEtF;;;;;GAKG;AACU,QAAA,UAAU,GAAG,UACxB,KAAmB,EACnB,GAA2B,EAC3B,YAA2B;IAE3B,IAAM,SAAS,GAAG,uBAAK,CAAC,UAAU,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,EAAE,+BAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC3C,wDAAwD;QACxD,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QACzD,OAAO,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE;KAChE,EACD,YAAY,IAAI,uCAAqB,CAAC,YAAY,EAAE,6BAAqB,CAAC,EAC1E,uCAAqB,CAAC,KAAK,EAAE,6BAAqB,CAAC,CACpD,CAAC;IAEF,OAAO,KAAK,CAAC;AACf,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"]}
1
+ {"version":3,"sources":["../../../src/components/Divider/useDivider.ts"],"names":[],"mappings":";;;;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;AAIG;;;AACI,IAAM,UAAU,GAAG,UAAC,KAAD,EAAsB,GAAtB,EAAiD;AACjE,MAAA,EAAA,GAAkF,KAAK,CAAhE,YAAvB;AAAA,MAAA,YAAY,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAAvB;AAAA,MAAyB,EAAA,GAAyD,KAAK,CAAjD,KAAtC;AAAA,MAAyB,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAtC;AAAA,MAAwC,EAAA,GAA0C,KAAK,CAA/B,QAAxD;AAAA,MAAwC,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAxD;AAAA,MAA0D,UAAU,GAAc,KAAK,CAAnB,UAApE;AAAA,MAAsE,OAAO,GAAK,KAAK,CAAV,OAA7E;AACR,MAAM,SAAS,GAAG,iBAAA,CAAA,KAAA,CAAM,UAAN,CAAlB;AAEA,SAAO;AACL,IAAA,YAAY,EAAA,YADP;AAEL,IAAA,KAAK,EAAA,KAFA;AAGL,IAAA,QAAQ,EAAA,QAHH;AAIL,IAAA,UAAU,EAAA,UAJL;AAKL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,OAAO,EAAE;AAFC,KALP;AASL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA2B,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,EAC5B,KAD4B,CAAA,EACvB;AACR,MAAA,GAAG,EAAA,GADK;AAER,MAAA,IAAI,EAAE,WAFE;AAGR,yBAAmB,KAAK,CAAC,QAAN,GAAiB,SAAjB,GAA6B;AAHxC,KADuB,CAA3B,CATD;AAeL,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;AAfJ,GAAP;AAuBD,CA3BM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourceRoot":""}
@@ -1,3 +1,3 @@
1
1
  import { DividerState } from './Divider.types';
2
2
  /** Applies style classnames to slots */
3
- export declare const useDividerStyles: (s: DividerState) => DividerState;
3
+ export declare const useDividerStyles: (state: DividerState) => DividerState;
@@ -1,209 +1,156 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var react_make_styles_1 = require("@fluentui/react-make-styles");
4
- var useStylesOverride = react_make_styles_1.makeStyles({
5
- root: function (tokens) { return ({
6
- /* CSS Vars */
7
- '--divider-borderMargin': '12px',
8
- '--divider-flexDirection': 'row',
9
- '--divider-fontColor': tokens.alias.color.neutral.neutralForeground2,
10
- '--divider-fontFamily': 'Segoe UI',
11
- '--divider-fontSize': '12px',
12
- '--divider-fontWeight': '400',
13
- '--divider-lineHeight': '17px',
14
- '--divider-borderSize': '1px',
15
- '--divider-borderStyle': 'solid',
16
- '--divider-color': tokens.alias.color.neutral.neutralStroke2,
17
- alignItems: 'center',
18
- color: 'var(--divider-fontColor)',
19
- display: 'flex',
20
- flexGrow: 1,
21
- flexDirection: 'var(--divider-flexDirection)',
22
- fontFamily: 'var(--divider-fontFamily)',
23
- fontSize: 'var(--divider-fontSize)',
24
- fontWeight: 'var(--divider-fontWeight)',
25
- position: 'relative',
26
- boxSizing: 'border-box',
27
- lineHeight: 'var(--divider-lineHeight)',
28
- ':before': {
29
- display: 'flex',
30
- flexGrow: 1,
31
- boxSizing: 'border-box',
32
- },
33
- ':after': {
34
- display: 'flex',
35
- flexGrow: 1,
36
- boxSizing: 'border-box',
37
- },
38
- }); },
39
- childless: {
40
- '--divider-borderMargin': 0,
41
- },
42
- subtle: function (tokens) { return ({
43
- '--divider-color': tokens.alias.color.neutral.neutralStroke3,
44
- }); },
45
- brand: function (tokens) { return ({
46
- '--divider-fontColor': tokens.alias.color.brand.brandBackgroundStatic,
47
- '--divider-color': tokens.alias.color.brand.brandBackgroundStatic,
48
- }); },
49
- strong: function (tokens) { return ({
50
- '--divider-color': tokens.alias.color.neutral.neutralStroke1,
51
- }); },
52
- horizontal: {
53
- width: '100%',
54
- ':before': {
55
- borderTopColor: 'var(--divider-color)',
56
- borderTopWidth: 'var(--divider-borderSize)',
57
- borderTopStyle: 'var(--divider-borderStyle)',
58
- },
59
- ':after': {
60
- borderTopColor: 'var(--divider-color)',
61
- borderTopWidth: 'var(--divider-borderSize)',
62
- borderTopStyle: 'var(--divider-borderStyle)',
63
- },
64
- '&>:only-child': {
65
- display: 'flex',
66
- textAlign: 'center',
67
- },
68
- },
69
- vertical: {
70
- //alignSelf: 'stretch',
71
- minHeight: '20px',
72
- flexDirection: 'column',
73
- ':before': {
74
- borderRightColor: 'var(--divider-color)',
75
- borderRightWidth: 'var(--divider-borderSize)',
76
- borderRightStyle: 'var(--divider-borderStyle)',
77
- },
78
- ':after': {
79
- borderRightColor: 'var(--divider-color)',
80
- borderRightWidth: 'var(--divider-borderSize)',
81
- borderRightStyle: 'var(--divider-borderStyle)',
82
- },
83
- '&>:only-child': {
84
- display: 'flex',
85
- textAlign: 'center',
86
- },
87
- },
88
- verticalWithChildren: {
89
- minHeight: '84px',
90
- },
91
- start: {
92
- ':after': {
93
- content: '""',
94
- },
95
- },
96
- end: {
97
- ':before': {
98
- content: '""',
99
- },
100
- },
101
- center: {
102
- ':before': {
103
- content: '""',
104
- },
105
- ':after': {
106
- content: '""',
107
- },
108
- },
109
- centerWithoutContent: {
110
- ':before': {
111
- content: '""',
112
- },
113
- },
114
- verticalStart: {
115
- ':before': {
116
- content: '""',
117
- maxHeight: '8px',
118
- marginBottom: 'var(--divider-borderMargin)',
119
- },
120
- ':after': {
121
- marginTop: 'var(--divider-borderMargin)',
122
- },
123
- },
124
- verticalEnd: {
125
- ':before': {
126
- marginBottom: 'var(--divider-borderMargin)',
127
- },
128
- ':after': {
129
- content: '""',
130
- maxHeight: '8px',
131
- marginTop: 'var(--divider-borderMargin)',
132
- },
133
- },
134
- verticalCenter: {
135
- ':before': {
136
- marginBottom: 'var(--divider-borderMargin)',
137
- },
138
- ':after': {
139
- marginTop: 'var(--divider-borderMargin)',
140
- },
141
- },
142
- horizontalStart: {
143
- ':before': {
144
- marginRight: 'var(--divider-borderMargin)',
145
- maxWidth: '8px',
146
- content: '""',
147
- },
148
- ':after': {
149
- marginLeft: 'var(--divider-borderMargin)',
150
- },
151
- },
152
- horizontalEnd: {
153
- ':before': {
154
- marginRight: 'var(--divider-borderMargin)',
155
- },
156
- ':after': {
157
- maxWidth: '8px',
158
- content: '""',
159
- marginLeft: 'var(--divider-borderMargin)',
160
- },
161
- },
162
- horizontalCenter: {
163
- ':before': {
164
- marginRight: 'var(--divider-borderMargin)',
165
- },
166
- ':after': {
167
- marginLeft: 'var(--divider-borderMargin)',
168
- },
169
- },
170
- important: {
171
- '--divider-fontWeight': "700",
172
- },
173
- verticalColored: {
174
- ':before': {
175
- borderRightColor: 'var(--divider-color)',
176
- },
177
- ':after': {
178
- borderRightColor: 'var(--divider-color)',
179
- },
180
- },
181
- horizontalColored: {
182
- ':before': {
183
- borderTopColor: 'var(--divider-color)',
184
- },
185
- ':after': {
186
- borderTopColor: 'var(--divider-color)',
187
- },
188
- },
189
- verticalChildless: {
190
- ':before': {
191
- marginBottom: 0,
192
- },
193
- },
194
- inset: {
195
- paddingLeft: '12px',
196
- paddingRight: '12px',
197
- },
198
- verticalInset: {
199
- marginTop: '12px',
200
- marginBottom: '12px',
201
- },
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.useDividerStyles = void 0;
7
+
8
+ var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
9
+
10
+ var useStylesOverride = /*#__PURE__*/react_make_styles_1.__styles({
11
+ "root": {
12
+ "zmeg91": "f1cf0ue8",
13
+ "Bp2y6oz": "f1os2kdj",
14
+ "B6q7sii": "f11v3ve5",
15
+ "B9ykze": "fcz5mhl",
16
+ "Guog5e": "f19m260",
17
+ "Blrmaa7": "f4gl4la",
18
+ "Dx42av": "f14ajt6e",
19
+ "Cmox77": "f1veoioe",
20
+ "B4ndli0": "f1wdf0k2",
21
+ "B0te19x": "fwj8351",
22
+ "Bt984gj": "f122n59",
23
+ "sj55zd": "f1jpr9al",
24
+ "mc9l5x": "f22iagw",
25
+ "Bh6795r": "fqerorx",
26
+ "Beiy3e4": "f1ybs2uy",
27
+ "Bahqtrf": "ffmiph4",
28
+ "Be2twd7": "f1ru6jyu",
29
+ "Bhrd7zp": "f12818pv",
30
+ "qhf8xq": "f10pi13n",
31
+ "B7ck84d": "f1ewtqcl",
32
+ "Bg96gwp": "f1nsrjb9",
33
+ "pmf9yy": "fkmkm9e",
34
+ "B438e65": "fbxxcv3",
35
+ "Bmqnesq": "f170vdtw",
36
+ "Fdvyjd": "fsnc50s",
37
+ "keybh5": "fjrry2l",
38
+ "oqd9ik": "ffdc0f3"
39
+ },
40
+ "childless": {
41
+ "zmeg91": "f9bo81j"
42
+ },
43
+ "subtle": {
44
+ "B0te19x": "f97j284"
45
+ },
46
+ "brand": {
47
+ "B6q7sii": "f1gn02u7",
48
+ "B0te19x": "f112szk3"
49
+ },
50
+ "strong": {
51
+ "B0te19x": "f1lh371g"
52
+ },
53
+ "horizontal": {
54
+ "a9b677": "fly5x3f",
55
+ "ijj6k": "f1hn12av",
56
+ "dj0dih": "f145s62n",
57
+ "Bdixowu": "f1oxfz5b",
58
+ "F7kzw7": "f1njospc",
59
+ "Bouo9z4": "ffddkxw",
60
+ "rskduk": "fs0a90v",
61
+ "B5zdtcu": "foku0rs",
62
+ "B8o95kv": "f1va7jzg"
63
+ },
64
+ "vertical": {
65
+ "sshi5w": "f16gbxbe",
66
+ "Beiy3e4": "f1vx9l62",
67
+ "I89eb": ["ft59do8", "f159gpz7"],
68
+ "D4ky5z": ["f15esl77", "f1l3drc5"],
69
+ "cqycoz": ["f18gt5ge", "f16t5q7i"],
70
+ "B13j16c": ["f1obfcjy", "f11jmm1c"],
71
+ "Bjz4wo8": ["f911xs5", "f1jm9s6y"],
72
+ "Dctjco": ["f8l7es7", "f1fvl5qx"],
73
+ "B5zdtcu": "foku0rs",
74
+ "B8o95kv": "f1va7jzg"
75
+ },
76
+ "verticalWithChildren": {
77
+ "sshi5w": "f1tjaq3g"
78
+ },
79
+ "start": {
80
+ "Bs6t6z0": "fqc6z8f"
81
+ },
82
+ "end": {
83
+ "rurcny": "fuzzvh5"
84
+ },
85
+ "center": {
86
+ "rurcny": "fuzzvh5",
87
+ "Bs6t6z0": "fqc6z8f"
88
+ },
89
+ "centerWithoutContent": {
90
+ "rurcny": "fuzzvh5"
91
+ },
92
+ "verticalStart": {
93
+ "rurcny": "fuzzvh5",
94
+ "B5kj21": "f1hheky8",
95
+ "z1nrnc": "f8i3v0i",
96
+ "Brd3o3m": "f11501bl"
97
+ },
98
+ "verticalEnd": {
99
+ "z1nrnc": "f8i3v0i",
100
+ "Bs6t6z0": "fqc6z8f",
101
+ "iiodbw": "fp342oa",
102
+ "Brd3o3m": "f11501bl"
103
+ },
104
+ "verticalCenter": {
105
+ "z1nrnc": "f8i3v0i",
106
+ "Brd3o3m": "f11501bl"
107
+ },
108
+ "horizontalStart": {
109
+ "vrnxjr": ["f5e79lz", "f1ofvrni"],
110
+ "B24asle": "f19fn84r",
111
+ "rurcny": "fuzzvh5",
112
+ "Bsz71t5": ["f11gbbo2", "f15d117x"]
113
+ },
114
+ "horizontalEnd": {
115
+ "vrnxjr": ["f5e79lz", "f1ofvrni"],
116
+ "B79fe3b": "f3tzpys",
117
+ "Bs6t6z0": "fqc6z8f",
118
+ "Bsz71t5": ["f11gbbo2", "f15d117x"]
119
+ },
120
+ "horizontalCenter": {
121
+ "vrnxjr": ["f5e79lz", "f1ofvrni"],
122
+ "Bsz71t5": ["f11gbbo2", "f15d117x"]
123
+ },
124
+ "verticalColored": {
125
+ "I89eb": ["ft59do8", "f159gpz7"],
126
+ "B13j16c": ["f1obfcjy", "f11jmm1c"]
127
+ },
128
+ "horizontalColored": {
129
+ "ijj6k": "f1hn12av",
130
+ "F7kzw7": "f1njospc"
131
+ },
132
+ "verticalChildless": {
133
+ "z1nrnc": "fc3uzr1"
134
+ },
135
+ "inset": {
136
+ "uwmqm3": ["fjlbh76", "f11qrl6u"],
137
+ "z189sj": ["f11qrl6u", "fjlbh76"]
138
+ },
139
+ "verticalInset": {
140
+ "B6of3ja": "f1xdg43u",
141
+ "jrapky": "f1jlhsmd"
142
+ }
143
+ }, {
144
+ "d": [".f1cf0ue8{--divider-borderMargin:12px;}", ".f1os2kdj{--divider-flexDirection:row;}", ".f11v3ve5{--divider-fontColor:var(--colorNeutralForeground2);}", ".fcz5mhl{--divider-fontFamily:Segoe UI;}", ".f19m260{--divider-fontSize:12px;}", ".f4gl4la{--divider-fontWeight:400;}", ".f14ajt6e{--divider-lineHeight:17px;}", ".f1veoioe{--divider-borderSize:1px;}", ".f1wdf0k2{--divider-borderStyle:solid;}", ".fwj8351{--divider-color:var(--colorNeutralStroke2);}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1jpr9al{color:var(--divider-fontColor);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1ybs2uy{-webkit-flex-direction:var(--divider-flexDirection);-ms-flex-direction:var(--divider-flexDirection);flex-direction:var(--divider-flexDirection);}", ".ffmiph4{font-family:var(--divider-fontFamily);}", ".f1ru6jyu{font-size:var(--divider-fontSize);}", ".f12818pv{font-weight:var(--divider-fontWeight);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".f1nsrjb9{line-height:var(--divider-lineHeight);}", ".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;}", ".f170vdtw:before{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;}", ".ffdc0f3:after{box-sizing:border-box;}", ".f9bo81j{--divider-borderMargin:0;}", ".f97j284{--divider-color:var(--colorNeutralStroke3);}", ".f1gn02u7{--divider-fontColor:var(--colorBrandBackgroundStatic);}", ".f112szk3{--divider-color:var(--colorBrandBackgroundStatic);}", ".f1lh371g{--divider-color:var(--colorNeutralStroke1);}", ".fly5x3f{width:100%;}", ".f1hn12av:before{border-top-color:var(--divider-color);}", ".f145s62n:before{border-top-width:var(--divider-borderSize);}", ".f1oxfz5b:before{border-top-style:var(--divider-borderStyle);}", ".f1njospc:after{border-top-color:var(--divider-color);}", ".ffddkxw:after{border-top-width:var(--divider-borderSize);}", ".fs0a90v:after{border-top-style:var(--divider-borderStyle);}", ".foku0rs>:only-child{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1va7jzg>:only-child{text-align:center;}", ".f16gbxbe{min-height:20px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".ft59do8:before{border-right-color:var(--divider-color);}", ".f159gpz7:before{border-left-color:var(--divider-color);}", ".f15esl77:before{border-right-width:var(--divider-borderSize);}", ".f1l3drc5:before{border-left-width:var(--divider-borderSize);}", ".f18gt5ge:before{border-right-style:var(--divider-borderStyle);}", ".f16t5q7i:before{border-left-style:var(--divider-borderStyle);}", ".f1obfcjy:after{border-right-color:var(--divider-color);}", ".f11jmm1c:after{border-left-color:var(--divider-color);}", ".f911xs5:after{border-right-width:var(--divider-borderSize);}", ".f1jm9s6y:after{border-left-width:var(--divider-borderSize);}", ".f8l7es7:after{border-right-style:var(--divider-borderStyle);}", ".f1fvl5qx:after{border-left-style:var(--divider-borderStyle);}", ".f1tjaq3g{min-height:84px;}", ".fqc6z8f:after{content:\"\";}", ".fuzzvh5:before{content:\"\";}", ".f1hheky8:before{max-height:8px;}", ".f8i3v0i:before{margin-bottom:var(--divider-borderMargin);}", ".f11501bl:after{margin-top:var(--divider-borderMargin);}", ".fp342oa:after{max-height:8px;}", ".f5e79lz:before{margin-right:var(--divider-borderMargin);}", ".f1ofvrni:before{margin-left:var(--divider-borderMargin);}", ".f19fn84r:before{max-width:8px;}", ".f11gbbo2:after{margin-left:var(--divider-borderMargin);}", ".f15d117x:after{margin-right:var(--divider-borderMargin);}", ".f3tzpys:after{max-width:8px;}", ".fc3uzr1:before{margin-bottom:0;}", ".fjlbh76{padding-left:12px;}", ".f11qrl6u{padding-right:12px;}", ".f1xdg43u{margin-top:12px;}", ".f1jlhsmd{margin-bottom:12px;}"]
202
145
  });
203
146
  /** Applies style classnames to slots */
204
- exports.useDividerStyles = function (s) {
205
- var styles = useStylesOverride();
206
- 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);
207
- return s;
147
+
148
+
149
+ var useDividerStyles = function (state) {
150
+ var styles = useStylesOverride();
151
+ state.root.className = react_make_styles_1.mergeClasses(styles.root, !state.root.children && styles.childless, state.appearance === 'subtle' && styles.subtle, state.appearance === 'brand' && styles.brand, state.appearance === 'strong' && styles.strong, state.vertical ? styles.vertical : styles.horizontal, state.vertical && state.root.children !== undefined && styles.verticalWithChildren, state.alignContent === 'start' && styles.start, state.alignContent === 'end' && styles.end, (state.alignContent === 'center' || !state.alignContent) && state.root.children !== undefined && state.vertical && styles.center, (state.alignContent === 'center' || !state.alignContent) && state.root.children !== undefined && !state.vertical && styles.center, (state.alignContent === 'center' || !state.alignContent) && state.root.children === undefined && styles.centerWithoutContent, state.alignContent === 'start' && (state.vertical ? styles.verticalStart : styles.horizontalStart), state.alignContent === 'end' && (state.vertical ? styles.verticalEnd : styles.horizontalEnd), (state.alignContent === 'center' || !state.alignContent) && (state.vertical ? styles.verticalCenter : styles.horizontalCenter), state.root.color && (state.vertical ? styles.verticalColored : styles.horizontalColored), state.root.children === undefined && state.vertical && styles.verticalChildless, state.inset && (state.vertical ? styles.verticalInset : styles.inset), state.root.className);
152
+ return state;
208
153
  };
154
+
155
+ exports.useDividerStyles = useDividerStyles;
209
156
  //# sourceMappingURL=useDividerStyles.js.map
@@ -1 +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"]}
1
+ {"version":3,"sources":["../../../src/components/Divider/useDividerStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
@@ -1,5 +1,10 @@
1
1
  "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- var tslib_1 = require("tslib");
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+
7
+ var tslib_1 = /*#__PURE__*/require("tslib");
8
+
4
9
  tslib_1.__exportStar(require("./Divider"), exports);
5
10
  //# sourceMappingURL=index.js.map