@fluentui/react-divider 9.3.2 → 9.4.1

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.
package/CHANGELOG.md CHANGED
@@ -1,12 +1,31 @@
1
1
  # Change Log - @fluentui/react-divider
2
2
 
3
- This log was last generated on Thu, 26 Jun 2025 14:07:54 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 28 Jul 2025 18:44:12 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.4.1)
8
+
9
+ Mon, 28 Jul 2025 18:44:12 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.4.0..@fluentui/react-divider_v9.4.1)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
15
+ - Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
16
+
17
+ ## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.4.0)
18
+
19
+ Thu, 17 Jul 2025 13:49:38 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.3.2..@fluentui/react-divider_v9.4.0)
21
+
22
+ ### Minor changes
23
+
24
+ - feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
25
+
7
26
  ## [9.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.3.2)
8
27
 
9
- Thu, 26 Jun 2025 14:07:54 GMT
28
+ Thu, 26 Jun 2025 14:11:55 GMT
10
29
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.3.1..@fluentui/react-divider_v9.3.2)
11
30
 
12
31
  ### Patches
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Divider.ts"],"sourcesContent":["export type { DividerProps, DividerSlots, DividerState } from './components/Divider/index';\nexport {\n Divider,\n dividerClassNames,\n renderDivider_unstable,\n useDividerStyles_unstable,\n useDivider_unstable,\n} from './components/Divider/index';\n"],"names":["Divider","dividerClassNames","renderDivider_unstable","useDividerStyles_unstable","useDivider_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,6BAA6B"}
1
+ {"version":3,"sources":["../src/Divider.ts"],"sourcesContent":["export type { DividerProps, DividerSlots, DividerState } from './components/Divider/index';\nexport {\n Divider,\n dividerClassNames,\n renderDivider_unstable,\n useDividerStyles_unstable,\n useDivider_unstable,\n} from './components/Divider/index';\n"],"names":["Divider","dividerClassNames","renderDivider_unstable","useDividerStyles_unstable","useDivider_unstable"],"mappings":"AACA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,6BAA6B"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderDivider_unstable } from './renderDivider';\nimport { useDivider_unstable } from './useDivider';\nimport { useDividerStyles_unstable } from './useDividerStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { DividerProps } from './Divider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 useCustomStyleHook_unstable('useDividerStyles_unstable')(state);\n\n return renderDivider_unstable(state);\n});\n\nDivider.displayName = 'Divider';\n"],"names":["React","renderDivider_unstable","useDivider_unstable","useDividerStyles_unstable","useCustomStyleHook_unstable","Divider","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQP,oBAAoBK,OAAOC;IAEzCL,0BAA0BM;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderDivider_unstable } from './renderDivider';\nimport { useDivider_unstable } from './useDivider';\nimport { useDividerStyles_unstable } from './useDividerStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { DividerProps } from './Divider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 useCustomStyleHook_unstable('useDividerStyles_unstable')(state);\n\n return renderDivider_unstable(state);\n});\n\nDivider.displayName = 'Divider';\n"],"names":["React","renderDivider_unstable","useDivider_unstable","useDividerStyles_unstable","useCustomStyleHook_unstable","Divider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQP,oBAAoBK,OAAOC;IAEzCL,0BAA0BM;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Divider/Divider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DividerSlots = {\n /**\n * Root of the component that renders as a `<div>` tag.\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Wrapper for content when presented.\n */\n wrapper: NonNullable<Slot<'div'>>;\n};\n\nexport type DividerProps = ComponentProps<Partial<DividerSlots>> & {\n /**\n * Determines the alignment of the content within the divider.\n *\n * @default 'center'\n */\n alignContent?: 'start' | 'center' | 'end';\n\n /**\n * A divider can have one of the preset appearances.\n * When not specified, the divider has its default appearance.\n *\n * @default 'default'\n */\n appearance?: 'brand' | 'default' | 'strong' | 'subtle';\n\n /**\n * Adds padding to the beginning and end of the divider.\n *\n * @default false\n */\n inset?: boolean;\n\n /**\n * A divider can be horizontal (default) or vertical.\n *\n * @default false\n */\n vertical?: boolean;\n};\n\nexport type DividerState = ComponentState<DividerSlots> &\n Required<Pick<DividerProps, 'alignContent' | 'appearance' | 'inset' | 'vertical'>>;\n"],"names":[],"rangeMappings":"","mappings":"AA6CA,WACqF"}
1
+ {"version":3,"sources":["../src/components/Divider/Divider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DividerSlots = {\n /**\n * Root of the component that renders as a `<div>` tag.\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Wrapper for content when presented.\n */\n wrapper: NonNullable<Slot<'div'>>;\n};\n\nexport type DividerProps = ComponentProps<Partial<DividerSlots>> & {\n /**\n * Determines the alignment of the content within the divider.\n *\n * @default 'center'\n */\n alignContent?: 'start' | 'center' | 'end';\n\n /**\n * A divider can have one of the preset appearances.\n * When not specified, the divider has its default appearance.\n *\n * @default 'default'\n */\n appearance?: 'brand' | 'default' | 'strong' | 'subtle';\n\n /**\n * Adds padding to the beginning and end of the divider.\n *\n * @default false\n */\n inset?: boolean;\n\n /**\n * A divider can be horizontal (default) or vertical.\n *\n * @default false\n */\n vertical?: boolean;\n};\n\nexport type DividerState = ComponentState<DividerSlots> &\n Required<Pick<DividerProps, 'alignContent' | 'appearance' | 'inset' | 'vertical'>>;\n"],"names":[],"mappings":"AA6CA,WACqF"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Divider/index.ts"],"sourcesContent":["export { Divider } from './Divider';\nexport type { DividerProps, DividerSlots, DividerState } from './Divider.types';\nexport { renderDivider_unstable } from './renderDivider';\nexport { useDivider_unstable } from './useDivider';\nexport { dividerClassNames, useDividerStyles_unstable } from './useDividerStyles.styles';\n"],"names":["Divider","renderDivider_unstable","useDivider_unstable","dividerClassNames","useDividerStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}
1
+ {"version":3,"sources":["../src/components/Divider/index.ts"],"sourcesContent":["export { Divider } from './Divider';\nexport type { DividerProps, DividerSlots, DividerState } from './Divider.types';\nexport { renderDivider_unstable } from './renderDivider';\nexport { useDivider_unstable } from './useDivider';\nexport { dividerClassNames, useDividerStyles_unstable } from './useDividerStyles.styles';\n"],"names":["Divider","renderDivider_unstable","useDivider_unstable","dividerClassNames","useDividerStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Divider/renderDivider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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 assertSlots<DividerSlots>(state);\n return (\n <state.root>{state.root.children !== undefined && <state.wrapper>{state.root.children}</state.wrapper>}</state.root>\n );\n};\n"],"names":["assertSlots","renderDivider_unstable","state","root","children","undefined","wrapper"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrCF,YAA0BE;IAC1B,qBACE,KAACA,MAAMC,IAAI;kBAAED,MAAMC,IAAI,CAACC,QAAQ,KAAKC,2BAAa,KAACH,MAAMI,OAAO;sBAAEJ,MAAMC,IAAI,CAACC,QAAQ;;;AAEzF,EAAE"}
1
+ {"version":3,"sources":["../src/components/Divider/renderDivider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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 assertSlots<DividerSlots>(state);\n return (\n <state.root>{state.root.children !== undefined && <state.wrapper>{state.root.children}</state.wrapper>}</state.root>\n );\n};\n"],"names":["assertSlots","renderDivider_unstable","state","root","children","undefined","wrapper"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrCF,YAA0BE;IAC1B,qBACE,KAACA,MAAMC,IAAI;kBAAED,MAAMC,IAAI,CAACC,QAAQ,KAAKC,2BAAa,KAACH,MAAMI,OAAO;sBAAEJ,MAAMC,IAAI,CAACC,QAAQ;;;AAEzF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Divider/useDivider.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } 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 = 'default', 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: slot.always(\n getIntrinsicElementProps('div', {\n role: 'separator',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n 'aria-labelledby': props.children ? dividerId : undefined,\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n } as const),\n { elementType: 'div' },\n ),\n wrapper: slot.always(wrapper, {\n defaultProps: {\n id: dividerId,\n children: props.children,\n },\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useDivider_unstable","props","ref","alignContent","appearance","inset","vertical","wrapper","dividerId","components","root","always","role","children","undefined","elementType","defaultProps","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGlF;;;;CAIC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,eAAe,QAAQ,EAAEC,aAAa,SAAS,EAAEC,QAAQ,KAAK,EAAEC,WAAW,KAAK,EAAEC,OAAO,EAAE,GAAGN;IACtG,MAAMO,YAAYV,MAAM;IAExB,OAAO;QACL,gCAAgC;QAChCK;QACAC;QACAC;QACAC;QAEA,mBAAmB;QACnBG,YAAY;YACVC,MAAM;YACNH,SAAS;QACX;QAEAG,MAAMX,KAAKY,MAAM,CACfd,yBAAyB,OAAO;YAC9Be,MAAM;YACN,oBAAoBN,WAAW,aAAa;YAC5C,mBAAmBL,MAAMY,QAAQ,GAAGL,YAAYM;YAChD,GAAGb,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;QACP,IACA;YAAEa,aAAa;QAAM;QAEvBR,SAASR,KAAKY,MAAM,CAACJ,SAAS;YAC5BS,cAAc;gBACZC,IAAIT;gBACJK,UAAUZ,MAAMY,QAAQ;YAC1B;YACAE,aAAa;QACf;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/Divider/useDivider.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } 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 = 'default', 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: slot.always(\n getIntrinsicElementProps('div', {\n role: 'separator',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n 'aria-labelledby': props.children ? dividerId : undefined,\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n } as const),\n { elementType: 'div' },\n ),\n wrapper: slot.always(wrapper, {\n defaultProps: {\n id: dividerId,\n children: props.children,\n },\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useDivider_unstable","props","ref","alignContent","appearance","inset","vertical","wrapper","dividerId","components","root","always","role","children","undefined","elementType","defaultProps","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGlF;;;;CAIC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,eAAe,QAAQ,EAAEC,aAAa,SAAS,EAAEC,QAAQ,KAAK,EAAEC,WAAW,KAAK,EAAEC,OAAO,EAAE,GAAGN;IACtG,MAAMO,YAAYV,MAAM;IAExB,OAAO;QACL,gCAAgC;QAChCK;QACAC;QACAC;QACAC;QAEA,mBAAmB;QACnBG,YAAY;YACVC,MAAM;YACNH,SAAS;QACX;QAEAG,MAAMX,KAAKY,MAAM,CACfd,yBAAyB,OAAO;YAC9Be,MAAM;YACN,oBAAoBN,WAAW,aAAa;YAC5C,mBAAmBL,MAAMY,QAAQ,GAAGL,YAAYM;YAChD,GAAGb,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;QACP,IACA;YAAEa,aAAa;QAAM;QAEvBR,SAASR,KAAKY,MAAM,CAACJ,SAAS;YAC5BS,cAAc;gBACZC,IAAIT;gBACJK,UAAUZ,MAAMY,QAAQ;YAC1B;YACAE,aAAa;QACf;IACF;AACF,EAAE"}
@@ -0,0 +1,225 @@
1
+ import { mergeClasses, shorthands, makeStyles } from '@griffel/react';
2
+ import { tokens } from '@fluentui/react-theme';
3
+ export const dividerClassNames = {
4
+ root: 'fui-Divider',
5
+ wrapper: 'fui-Divider__wrapper'
6
+ };
7
+ const contentSpacing = '12px';
8
+ const insetSpacing = '12px';
9
+ const maxStartEndLength = '8px';
10
+ const minStartEndLength = '8px;';
11
+ const useBaseStyles = makeStyles({
12
+ // Base styles
13
+ base: {
14
+ alignItems: 'center',
15
+ boxSizing: 'border-box',
16
+ display: 'flex',
17
+ flexDirection: 'row',
18
+ flexGrow: 1,
19
+ position: 'relative',
20
+ fontFamily: tokens.fontFamilyBase,
21
+ fontSize: tokens.fontSizeBase200,
22
+ fontWeight: tokens.fontWeightRegular,
23
+ lineHeight: tokens.lineHeightBase200,
24
+ textAlign: 'center',
25
+ '::before': {
26
+ boxSizing: 'border-box',
27
+ display: 'flex',
28
+ flexGrow: 1
29
+ },
30
+ '::after': {
31
+ boxSizing: 'border-box',
32
+ display: 'flex',
33
+ flexGrow: 1
34
+ }
35
+ },
36
+ // Childless styles
37
+ childless: {
38
+ '::before': {
39
+ marginBottom: 0,
40
+ marginRight: 0
41
+ },
42
+ '::after': {
43
+ marginLeft: 0,
44
+ marginTop: 0
45
+ }
46
+ },
47
+ // Alignment variations
48
+ start: {
49
+ '::after': {
50
+ content: '""'
51
+ }
52
+ },
53
+ center: {
54
+ '::before': {
55
+ content: '""'
56
+ },
57
+ '::after': {
58
+ content: '""'
59
+ }
60
+ },
61
+ end: {
62
+ '::before': {
63
+ content: '""'
64
+ }
65
+ },
66
+ // Appearance variations
67
+ brand: {
68
+ color: tokens.colorBrandForeground1,
69
+ '::before': {
70
+ ...shorthands.borderColor(tokens.colorBrandStroke1)
71
+ },
72
+ '::after': {
73
+ ...shorthands.borderColor(tokens.colorBrandStroke1)
74
+ }
75
+ },
76
+ default: {
77
+ color: tokens.colorNeutralForeground2,
78
+ '::before': {
79
+ ...shorthands.borderColor(tokens.colorNeutralStroke2)
80
+ },
81
+ '::after': {
82
+ ...shorthands.borderColor(tokens.colorNeutralStroke2)
83
+ }
84
+ },
85
+ subtle: {
86
+ color: tokens.colorNeutralForeground3,
87
+ '::before': {
88
+ ...shorthands.borderColor(tokens.colorNeutralStroke3)
89
+ },
90
+ '::after': {
91
+ ...shorthands.borderColor(tokens.colorNeutralStroke3)
92
+ }
93
+ },
94
+ strong: {
95
+ color: tokens.colorNeutralForeground1,
96
+ '::before': {
97
+ ...shorthands.borderColor(tokens.colorNeutralStroke1)
98
+ },
99
+ '::after': {
100
+ ...shorthands.borderColor(tokens.colorNeutralStroke1)
101
+ }
102
+ }
103
+ });
104
+ const useHorizontalStyles = makeStyles({
105
+ // Base styles
106
+ base: {
107
+ width: '100%',
108
+ '::before': {
109
+ borderTopStyle: 'solid',
110
+ borderTopWidth: tokens.strokeWidthThin,
111
+ minWidth: minStartEndLength
112
+ },
113
+ '::after': {
114
+ borderTopStyle: 'solid',
115
+ borderTopWidth: tokens.strokeWidthThin,
116
+ minWidth: minStartEndLength
117
+ }
118
+ },
119
+ // Inset styles
120
+ inset: {
121
+ paddingLeft: insetSpacing,
122
+ paddingRight: insetSpacing
123
+ },
124
+ // Alignment variations
125
+ start: {
126
+ '::before': {
127
+ content: '""',
128
+ marginRight: contentSpacing,
129
+ maxWidth: maxStartEndLength
130
+ },
131
+ '::after': {
132
+ marginLeft: contentSpacing
133
+ }
134
+ },
135
+ center: {
136
+ '::before': {
137
+ marginRight: contentSpacing
138
+ },
139
+ '::after': {
140
+ marginLeft: contentSpacing
141
+ }
142
+ },
143
+ end: {
144
+ '::before': {
145
+ marginRight: contentSpacing
146
+ },
147
+ '::after': {
148
+ content: '""',
149
+ marginLeft: contentSpacing,
150
+ maxWidth: maxStartEndLength
151
+ }
152
+ }
153
+ });
154
+ const useVerticalStyles = makeStyles({
155
+ // Base styles
156
+ base: {
157
+ flexDirection: 'column',
158
+ minHeight: '20px',
159
+ '::before': {
160
+ borderRightStyle: 'solid',
161
+ borderRightWidth: tokens.strokeWidthThin,
162
+ minHeight: minStartEndLength
163
+ },
164
+ '::after': {
165
+ borderRightStyle: 'solid',
166
+ borderRightWidth: tokens.strokeWidthThin,
167
+ minHeight: minStartEndLength
168
+ }
169
+ },
170
+ // Inset styles
171
+ inset: {
172
+ marginTop: insetSpacing,
173
+ marginBottom: insetSpacing
174
+ },
175
+ // With children styles
176
+ withChildren: {
177
+ minHeight: '84px'
178
+ },
179
+ // Alignment variations
180
+ start: {
181
+ '::before': {
182
+ content: '""',
183
+ marginBottom: contentSpacing,
184
+ maxHeight: maxStartEndLength
185
+ },
186
+ '::after': {
187
+ marginTop: contentSpacing
188
+ }
189
+ },
190
+ center: {
191
+ '::before': {
192
+ marginBottom: contentSpacing
193
+ },
194
+ '::after': {
195
+ marginTop: contentSpacing
196
+ }
197
+ },
198
+ end: {
199
+ '::before': {
200
+ marginBottom: contentSpacing
201
+ },
202
+ '::after': {
203
+ content: '""',
204
+ marginTop: contentSpacing,
205
+ maxHeight: maxStartEndLength
206
+ }
207
+ }
208
+ });
209
+ export const useDividerStyles_unstable = (state)=>{
210
+ 'use no memo';
211
+ const baseStyles = useBaseStyles();
212
+ const horizontalStyles = useHorizontalStyles();
213
+ const verticalStyles = useVerticalStyles();
214
+ const { alignContent, appearance, inset, vertical } = state;
215
+ state.root.className = mergeClasses(dividerClassNames.root, // Base styles
216
+ baseStyles.base, baseStyles[alignContent], appearance && baseStyles[appearance], // Horizontal styles
217
+ !vertical && horizontalStyles.base, !vertical && inset && horizontalStyles.inset, !vertical && horizontalStyles[alignContent], // Vertical styles
218
+ vertical && verticalStyles.base, vertical && inset && verticalStyles.inset, vertical && verticalStyles[alignContent], vertical && state.root.children !== undefined && verticalStyles.withChildren, // Childless styles
219
+ state.root.children === undefined && baseStyles.childless, // User provided class name
220
+ state.root.className);
221
+ if (state.wrapper) {
222
+ state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);
223
+ }
224
+ return state;
225
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Divider/useDividerStyles.styles.ts"],"sourcesContent":["import { mergeClasses, shorthands, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DividerSlots, DividerState } from './Divider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const dividerClassNames: SlotClassNames<DividerSlots> = {\n root: 'fui-Divider',\n wrapper: 'fui-Divider__wrapper',\n};\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 '::before': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1,\n },\n\n '::after': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1,\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 default: {\n color: tokens.colorNeutralForeground2,\n\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n },\n subtle: {\n color: tokens.colorNeutralForeground3,\n\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3),\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3),\n },\n },\n strong: {\n color: tokens.colorNeutralForeground1,\n\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 'use no memo';\n\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 dividerClassNames.root,\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 if (state.wrapper) {\n state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);\n }\n\n return state;\n};\n"],"names":["mergeClasses","shorthands","makeStyles","tokens","dividerClassNames","root","wrapper","contentSpacing","insetSpacing","maxStartEndLength","minStartEndLength","useBaseStyles","base","alignItems","boxSizing","display","flexDirection","flexGrow","position","fontFamily","fontFamilyBase","fontSize","fontSizeBase200","fontWeight","fontWeightRegular","lineHeight","lineHeightBase200","textAlign","childless","marginBottom","marginRight","marginLeft","marginTop","start","content","center","end","brand","color","colorBrandForeground1","borderColor","colorBrandStroke1","default","colorNeutralForeground2","colorNeutralStroke2","subtle","colorNeutralForeground3","colorNeutralStroke3","strong","colorNeutralForeground1","colorNeutralStroke1","useHorizontalStyles","width","borderTopStyle","borderTopWidth","strokeWidthThin","minWidth","inset","paddingLeft","paddingRight","maxWidth","useVerticalStyles","minHeight","borderRightStyle","borderRightWidth","withChildren","maxHeight","useDividerStyles_unstable","state","baseStyles","horizontalStyles","verticalStyles","alignContent","appearance","vertical","className","children","undefined"],"mappings":"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"}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Divider,\n dividerClassNames,\n renderDivider_unstable,\n useDividerStyles_unstable,\n useDivider_unstable,\n} from './Divider';\nexport type { DividerProps, DividerSlots, DividerState } from './Divider';\n"],"names":["Divider","dividerClassNames","renderDivider_unstable","useDividerStyles_unstable","useDivider_unstable"],"rangeMappings":"","mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Divider,\n dividerClassNames,\n renderDivider_unstable,\n useDividerStyles_unstable,\n useDivider_unstable,\n} from './Divider';\nexport type { DividerProps, DividerSlots, DividerState } from './Divider';\n"],"names":["Divider","dividerClassNames","renderDivider_unstable","useDividerStyles_unstable","useDivider_unstable"],"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Divider.ts"],"sourcesContent":["export type { DividerProps, DividerSlots, DividerState } from './components/Divider/index';\nexport {\n Divider,\n dividerClassNames,\n renderDivider_unstable,\n useDividerStyles_unstable,\n useDivider_unstable,\n} from './components/Divider/index';\n"],"names":["Divider","dividerClassNames","renderDivider_unstable","useDividerStyles_unstable","useDivider_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,OAAO;eAAPA,cAAO;;IACPC,iBAAiB;eAAjBA,wBAAiB;;IACjBC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,yBAAyB;eAAzBA,gCAAyB;;IACzBC,mBAAmB;eAAnBA,0BAAmB;;;uBACd"}
1
+ {"version":3,"sources":["../src/Divider.ts"],"sourcesContent":["export type { DividerProps, DividerSlots, DividerState } from './components/Divider/index';\nexport {\n Divider,\n dividerClassNames,\n renderDivider_unstable,\n useDividerStyles_unstable,\n useDivider_unstable,\n} from './components/Divider/index';\n"],"names":["Divider","dividerClassNames","renderDivider_unstable","useDividerStyles_unstable","useDivider_unstable"],"mappings":";;;;;;;;;;;;eAEEA,cAAO;;;eACPC,wBAAiB;;;eACjBC,6BAAsB;;;eACtBC,gCAAyB;;;eACzBC,0BAAmB;;;uBACd,6BAA6B"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderDivider_unstable } from './renderDivider';\nimport { useDivider_unstable } from './useDivider';\nimport { useDividerStyles_unstable } from './useDividerStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { DividerProps } from './Divider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 useCustomStyleHook_unstable('useDividerStyles_unstable')(state);\n\n return renderDivider_unstable(state);\n});\n\nDivider.displayName = 'Divider';\n"],"names":["Divider","React","forwardRef","props","ref","state","useDivider_unstable","useDividerStyles_unstable","useCustomStyleHook_unstable","renderDivider_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;+BACgB;4BACH;wCACM;qCAGE;AAKrC,MAAMA,UAAAA,WAAAA,GAA6CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQC,IAAAA,+BAAAA,EAAoBH,OAAOC;IAEzCG,IAAAA,iDAAAA,EAA0BF;IAE1BG,IAAAA,gDAAAA,EAA4B,6BAA6BH;IAEzD,OAAOI,IAAAA,qCAAAA,EAAuBJ;AAChC;AAEAL,QAAQU,WAAW,GAAG"}
1
+ {"version":3,"sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderDivider_unstable } from './renderDivider';\nimport { useDivider_unstable } from './useDivider';\nimport { useDividerStyles_unstable } from './useDividerStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { DividerProps } from './Divider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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 useCustomStyleHook_unstable('useDividerStyles_unstable')(state);\n\n return renderDivider_unstable(state);\n});\n\nDivider.displayName = 'Divider';\n"],"names":["React","renderDivider_unstable","useDivider_unstable","useDividerStyles_unstable","useCustomStyleHook_unstable","Divider","forwardRef","props","ref","state","displayName"],"mappings":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;+BACQ,kBAAkB;4BACrB,eAAe;wCACT,4BAA4B;qCAG1B,kCAAkC;AAKvE,gBAAMA,WAAAA,GAA6CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQP,mCAAAA,EAAoBK,OAAOC;QAEzCL,iDAAAA,EAA0BM;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOR,qCAAAA,EAAuBQ;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Divider/Divider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DividerSlots = {\n /**\n * Root of the component that renders as a `<div>` tag.\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Wrapper for content when presented.\n */\n wrapper: NonNullable<Slot<'div'>>;\n};\n\nexport type DividerProps = ComponentProps<Partial<DividerSlots>> & {\n /**\n * Determines the alignment of the content within the divider.\n *\n * @default 'center'\n */\n alignContent?: 'start' | 'center' | 'end';\n\n /**\n * A divider can have one of the preset appearances.\n * When not specified, the divider has its default appearance.\n *\n * @default 'default'\n */\n appearance?: 'brand' | 'default' | 'strong' | 'subtle';\n\n /**\n * Adds padding to the beginning and end of the divider.\n *\n * @default false\n */\n inset?: boolean;\n\n /**\n * A divider can be horizontal (default) or vertical.\n *\n * @default false\n */\n vertical?: boolean;\n};\n\nexport type DividerState = ComponentState<DividerSlots> &\n Required<Pick<DividerProps, 'alignContent' | 'appearance' | 'inset' | 'vertical'>>;\n"],"names":[],"rangeMappings":"","mappings":""}
1
+ {"version":3,"sources":["../src/components/Divider/Divider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DividerSlots = {\n /**\n * Root of the component that renders as a `<div>` tag.\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Wrapper for content when presented.\n */\n wrapper: NonNullable<Slot<'div'>>;\n};\n\nexport type DividerProps = ComponentProps<Partial<DividerSlots>> & {\n /**\n * Determines the alignment of the content within the divider.\n *\n * @default 'center'\n */\n alignContent?: 'start' | 'center' | 'end';\n\n /**\n * A divider can have one of the preset appearances.\n * When not specified, the divider has its default appearance.\n *\n * @default 'default'\n */\n appearance?: 'brand' | 'default' | 'strong' | 'subtle';\n\n /**\n * Adds padding to the beginning and end of the divider.\n *\n * @default false\n */\n inset?: boolean;\n\n /**\n * A divider can be horizontal (default) or vertical.\n *\n * @default false\n */\n vertical?: boolean;\n};\n\nexport type DividerState = ComponentState<DividerSlots> &\n Required<Pick<DividerProps, 'alignContent' | 'appearance' | 'inset' | 'vertical'>>;\n"],"names":[],"mappings":""}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Divider/index.ts"],"sourcesContent":["export { Divider } from './Divider';\nexport type { DividerProps, DividerSlots, DividerState } from './Divider.types';\nexport { renderDivider_unstable } from './renderDivider';\nexport { useDivider_unstable } from './useDivider';\nexport { dividerClassNames, useDividerStyles_unstable } from './useDividerStyles.styles';\n"],"names":["Divider","dividerClassNames","renderDivider_unstable","useDividerStyles_unstable","useDivider_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,OAAO;eAAPA,gBAAO;;IAIPC,iBAAiB;eAAjBA,yCAAiB;;IAFjBC,sBAAsB;eAAtBA,qCAAsB;;IAEHC,yBAAyB;eAAzBA,iDAAyB;;IAD5CC,mBAAmB;eAAnBA,+BAAmB;;;yBAHJ;+BAEe;4BACH;wCACyB"}
1
+ {"version":3,"sources":["../src/components/Divider/index.ts"],"sourcesContent":["export { Divider } from './Divider';\nexport type { DividerProps, DividerSlots, DividerState } from './Divider.types';\nexport { renderDivider_unstable } from './renderDivider';\nexport { useDivider_unstable } from './useDivider';\nexport { dividerClassNames, useDividerStyles_unstable } from './useDividerStyles.styles';\n"],"names":["Divider","renderDivider_unstable","useDivider_unstable","dividerClassNames","useDividerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAIPG,yCAAiB;;;eAFjBF,qCAAsB;;;eAEHG,iDAAyB;;;eAD5CF,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACrB,eAAe;wCACU,4BAA4B"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Divider/renderDivider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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 assertSlots<DividerSlots>(state);\n return (\n <state.root>{state.root.children !== undefined && <state.wrapper>{state.root.children}</state.wrapper>}</state.root>\n );\n};\n"],"names":["renderDivider_unstable","state","assertSlots","_jsx","root","children","undefined","wrapper"],"rangeMappings":";;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,yBAAyB,CAACC;IACrCC,IAAAA,2BAAAA,EAA0BD;IAC1B,OAAA,WAAA,GACEE,IAAAA,eAAA,EAACF,MAAMG,IAAI,EAAA;kBAAEH,MAAMG,IAAI,CAACC,QAAQ,KAAKC,aAAAA,WAAAA,GAAaH,IAAAA,eAAA,EAACF,MAAMM,OAAO,EAAA;sBAAEN,MAAMG,IAAI,CAACC,QAAQ;;;AAEzF"}
1
+ {"version":3,"sources":["../src/components/Divider/renderDivider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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 assertSlots<DividerSlots>(state);\n return (\n <state.root>{state.root.children !== undefined && <state.wrapper>{state.root.children}</state.wrapper>}</state.root>\n );\n};\n"],"names":["assertSlots","renderDivider_unstable","state","root","children","undefined","wrapper"],"mappings":";;;;+BASaC;;;;;;4BARb,gDAAiD;gCAErB,4BAA4B;AAMjD,+BAA+B,CAACC;QACrCF,2BAAAA,EAA0BE;IAC1B,OAAA,WAAA,OACE,eAAA,EAACA,MAAMC,IAAI,EAAA;kBAAED,MAAMC,IAAI,CAACC,QAAQ,KAAKC,aAAAA,WAAAA,OAAa,eAAA,EAACH,MAAMI,OAAO,EAAA;sBAAEJ,MAAMC,IAAI,CAACC,QAAQ;;;AAEzF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Divider/useDivider.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } 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 = 'default', 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: slot.always(\n getIntrinsicElementProps('div', {\n role: 'separator',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n 'aria-labelledby': props.children ? dividerId : undefined,\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n } as const),\n { elementType: 'div' },\n ),\n wrapper: slot.always(wrapper, {\n defaultProps: {\n id: dividerId,\n children: props.children,\n },\n elementType: 'div',\n }),\n };\n};\n"],"names":["useDivider_unstable","props","ref","alignContent","appearance","inset","vertical","wrapper","dividerId","useId","components","root","slot","always","getIntrinsicElementProps","role","children","undefined","elementType","defaultProps","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;gCAC+B;AAQ/C,MAAMA,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,eAAe,QAAQ,EAAEC,aAAa,SAAS,EAAEC,QAAQ,KAAK,EAAEC,WAAW,KAAK,EAAEC,OAAO,EAAE,GAAGN;IACtG,MAAMO,YAAYC,IAAAA,qBAAAA,EAAM;IAExB,OAAO;QACL,gCAAgC;QAChCN;QACAC;QACAC;QACAC;QAEA,mBAAmB;QACnBI,YAAY;YACVC,MAAM;YACNJ,SAAS;QACX;QAEAI,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9BC,MAAM;YACN,oBAAoBT,WAAW,aAAa;YAC5C,mBAAmBL,MAAMe,QAAQ,GAAGR,YAAYS;YAChD,GAAGhB,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;QACP,IACA;YAAEgB,aAAa;QAAM;QAEvBX,SAASK,oBAAAA,CAAKC,MAAM,CAACN,SAAS;YAC5BY,cAAc;gBACZC,IAAIZ;gBACJQ,UAAUf,MAAMe,QAAQ;YAC1B;YACAE,aAAa;QACf;IACF;AACF"}
1
+ {"version":3,"sources":["../src/components/Divider/useDivider.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } 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 = 'default', 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: slot.always(\n getIntrinsicElementProps('div', {\n role: 'separator',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n 'aria-labelledby': props.children ? dividerId : undefined,\n ...props,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n } as const),\n { elementType: 'div' },\n ),\n wrapper: slot.always(wrapper, {\n defaultProps: {\n id: dividerId,\n children: props.children,\n },\n elementType: 'div',\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","useId","slot","useDivider_unstable","props","ref","alignContent","appearance","inset","vertical","wrapper","dividerId","components","root","always","role","children","undefined","elementType","defaultProps","id"],"mappings":";;;;+BASaI;;;;;;;iEATU,QAAQ;gCACuB,4BAA4B;AAQ3E,4BAA4B,CAACC,OAAqBC;IACvD,MAAM,EAAEC,eAAe,QAAQ,EAAEC,aAAa,SAAS,EAAEC,QAAQ,KAAK,EAAEC,WAAW,KAAK,EAAEC,OAAO,EAAE,GAAGN;IACtG,MAAMO,gBAAYV,qBAAAA,EAAM;IAExB,OAAO;QACL,gCAAgC;QAChCK;QACAC;QACAC;QACAC;QAEA,mBAAmB;QACnBG,YAAY;YACVC,MAAM;YACNH,SAAS;QACX;QAEAG,MAAMX,oBAAAA,CAAKY,MAAM,CACfd,4CAAAA,EAAyB,OAAO;YAC9Be,MAAM;YACN,oBAAoBN,WAAW,aAAa;YAC5C,mBAAmBL,MAAMY,QAAQ,GAAGL,YAAYM;YAChD,GAAGb,KAAK;YACR,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FC,KAAKA;QACP,IACA;YAAEa,aAAa;QAAM;QAEvBR,SAASR,oBAAAA,CAAKY,MAAM,CAACJ,SAAS;YAC5BS,cAAc;gBACZC,IAAIT;gBACJK,UAAUZ,MAAMY,QAAQ;YAC1B;YACAE,aAAa;QACf;IACF;AACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"sources":["useDividerStyles.styles.js"],"sourcesContent":["import { mergeClasses, shorthands, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const dividerClassNames = {\n root: 'fui-Divider',\n wrapper: 'fui-Divider__wrapper'\n};\nconst contentSpacing = '12px';\nconst insetSpacing = '12px';\nconst maxStartEndLength = '8px';\nconst minStartEndLength = '8px;';\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 fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n textAlign: 'center',\n '::before': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1\n },\n '::after': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1\n }\n },\n // Childless styles\n childless: {\n '::before': {\n marginBottom: 0,\n marginRight: 0\n },\n '::after': {\n marginLeft: 0,\n marginTop: 0\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 // Appearance variations\n brand: {\n color: tokens.colorBrandForeground1,\n '::before': {\n ...shorthands.borderColor(tokens.colorBrandStroke1)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorBrandStroke1)\n }\n },\n default: {\n color: tokens.colorNeutralForeground2,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n }\n },\n subtle: {\n color: tokens.colorNeutralForeground3,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3)\n }\n },\n strong: {\n color: tokens.colorNeutralForeground1,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n }\n }\n});\nconst useHorizontalStyles = makeStyles({\n // Base styles\n base: {\n width: '100%',\n '::before': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength\n },\n '::after': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength\n }\n },\n // Inset styles\n inset: {\n paddingLeft: insetSpacing,\n paddingRight: insetSpacing\n },\n // Alignment variations\n start: {\n '::before': {\n content: '\"\"',\n marginRight: contentSpacing,\n maxWidth: maxStartEndLength\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});\nconst useVerticalStyles = makeStyles({\n // Base styles\n base: {\n flexDirection: 'column',\n minHeight: '20px',\n '::before': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength\n },\n '::after': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength\n }\n },\n // Inset styles\n inset: {\n marginTop: insetSpacing,\n marginBottom: insetSpacing\n },\n // With children styles\n withChildren: {\n minHeight: '84px'\n },\n // Alignment variations\n start: {\n '::before': {\n content: '\"\"',\n marginBottom: contentSpacing,\n maxHeight: maxStartEndLength\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});\nexport const useDividerStyles_unstable = (state)=>{\n 'use no memo';\n const baseStyles = useBaseStyles();\n const horizontalStyles = useHorizontalStyles();\n const verticalStyles = useVerticalStyles();\n const { alignContent, appearance, inset, vertical } = state;\n state.root.className = mergeClasses(dividerClassNames.root, // Base styles\n baseStyles.base, baseStyles[alignContent], appearance && baseStyles[appearance], // Horizontal styles\n !vertical && horizontalStyles.base, !vertical && inset && horizontalStyles.inset, !vertical && horizontalStyles[alignContent], // Vertical styles\n vertical && verticalStyles.base, vertical && inset && verticalStyles.inset, vertical && verticalStyles[alignContent], vertical && state.root.children !== undefined && verticalStyles.withChildren, // Childless styles\n state.root.children === undefined && baseStyles.childless, // User provided class name\n state.root.className);\n if (state.wrapper) {\n state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);\n }\n return state;\n};\n"],"names":["dividerClassNames","useDividerStyles_unstable","root","wrapper","contentSpacing","insetSpacing","maxStartEndLength","minStartEndLength","useBaseStyles","__styles","base","Bt984gj","B7ck84d","mc9l5x","Beiy3e4","Bh6795r","qhf8xq","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","fsow6f","Bcvre1j","Br0sdwz","Bn78ew0","li1rpt","ap17g6","B771hl4","childless","susq4k","Bicfajf","jwcpgy","B4rk6o","start","Bsft5z2","center","Ftih45","end","brand","sj55zd","Bq4z7u6","Bk5zm6e","Bqjgrrk","Bm6vgfq","B0n5ga8","s924m2","B1q35kw","Gp14am","subtle","strong","d","useHorizontalStyles","a9b677","Bdkvgpv","B0qfbqy","pbipgd","Bm2nyyq","xrcqlc","i5u598","inset","uwmqm3","z189sj","Bxwl2t9","Iy66sp","useVerticalStyles","sshi5w","m598lv","B4f6apu","zkzzav","Barhvk9","Ihftqj","Bde111x","B6of3ja","jrapky","withChildren","Bbdr6tz","gn64ia","state","baseStyles","horizontalStyles","verticalStyles","alignContent","appearance","vertical","className","mergeClasses","children","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,iBAAiB;eAAjBA;;IA8MAC,yBAAyB;eAAzBA;;;uBAhNwC;AAE9C,MAAMD,oBAAoB;IAC7BE,MAAM;IACNC,SAAS;AACb;AACA,MAAMC,iBAAiB;AACvB,MAAMC,eAAe;AACrB,MAAMC,oBAAoB;AAC1B,MAAMC,oBAAoB;AAC1B,MAAMC,gBAAa,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;IAAAC,WAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;IAAA;IAAAC,OAAA;QAAAC,SAAA;IAAA;IAAAC,QAAA;QAAAC,QAAA;QAAAF,SAAA;IAAA;IAAAG,KAAA;QAAAD,QAAA;IAAA;IAAAE,OAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAA,WAAA;QAAAR,QAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,QAAA;QAAAT,QAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAE,QAAA;QAAAV,QAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAG,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AA6FtB,MAAMC,sBAAmB,WAAA,GAAG1C,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAA0C,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;IAAA;IAAAC,OAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAA5B,OAAA;QAAAG,QAAA;QAAAN,SAAA;YAAA;YAAA;SAAA;QAAAgC,SAAA;QAAA/B,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAI,QAAA;QAAAL,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;IAAA;IAAAM,KAAA;QAAAP,SAAA;YAAA;YAAA;SAAA;QAAAI,SAAA;QAAAH,QAAA;YAAA;YAAA;SAAA;QAAAgC,QAAA;IAAA;AAAA,GAAA;IAAAb,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAkD5B,MAAMc,oBAAiB,WAAA,GAAGvD,IAAAA,eAAA,EAAA;IAAAC,MAAA;QAAAI,SAAA;QAAAmD,QAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;QAAAC,SAAA;YAAA;YAAA;SAAA;QAAAC,QAAA;YAAA;YAAA;SAAA;QAAAC,SAAA;IAAA;IAAAZ,OAAA;QAAAa,SAAA;QAAAC,QAAA;IAAA;IAAAC,cAAA;QAAAT,QAAA;IAAA;IAAAhC,OAAA;QAAAG,QAAA;QAAAP,QAAA;QAAA8C,SAAA;QAAA3C,QAAA;IAAA;IAAAG,QAAA;QAAAN,QAAA;QAAAG,QAAA;IAAA;IAAAK,KAAA;QAAAR,QAAA;QAAAK,SAAA;QAAAF,QAAA;QAAA4C,QAAA;IAAA;AAAA,GAAA;IAAA1B,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA;AAuDnB,MAAMjD,4BAA6B4E,CAAAA;IACtC;IACA,MAAMC,aAAatE;IACnB,MAAMuE,mBAAmB5B;IACzB,MAAM6B,iBAAiBhB;IACvB,MAAM,EAAEiB,YAAY,EAAEC,UAAU,EAAEvB,KAAK,EAAEwB,QAAAA,EAAU,GAAGN;IACtDA,MAAM3E,IAAI,CAACkF,SAAS,GAAGC,IAAAA,mBAAY,EAACrF,kBAAkBE,IAAI,EAAE,cAAA;IAC5D4E,WAAWpE,IAAI,EAAEoE,UAAU,CAACG,aAAa,EAAEC,cAAcJ,UAAU,CAACI,WAAW,EAAE,oBAAA;IACjF,CAACC,YAAYJ,iBAAiBrE,IAAI,EAAE,CAACyE,YAAYxB,SAASoB,iBAAiBpB,KAAK,EAAE,CAACwB,YAAYJ,gBAAgB,CAACE,aAAa,EAAE,kBAAA;IAC/HE,YAAYH,eAAetE,IAAI,EAAEyE,YAAYxB,SAASqB,eAAerB,KAAK,EAAEwB,YAAYH,cAAc,CAACC,aAAa,EAAEE,YAAYN,MAAM3E,IAAI,CAACoF,QAAQ,KAAKC,aAAaP,eAAeN,YAAY,EAAE,mBAAA;IACpMG,MAAM3E,IAAI,CAACoF,QAAQ,KAAKC,aAAaT,WAAWlD,SAAS,EAAE,2BAAA;IAC3DiD,MAAM3E,IAAI,CAACkF,SAAS;IACpB,IAAIP,MAAM1E,OAAO,EAAE;QACf0E,MAAM1E,OAAO,CAACiF,SAAS,GAAGC,IAAAA,mBAAY,EAACrF,kBAAkBG,OAAO,EAAE0E,MAAM1E,OAAO,CAACiF,SAAS;IAC7F;IACA,OAAOP;AACX"}
1
+ {"version":3,"sources":["useDividerStyles.styles.js"],"sourcesContent":["import { mergeClasses, shorthands, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const dividerClassNames = {\n root: 'fui-Divider',\n wrapper: 'fui-Divider__wrapper'\n};\nconst contentSpacing = '12px';\nconst insetSpacing = '12px';\nconst maxStartEndLength = '8px';\nconst minStartEndLength = '8px;';\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 fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n textAlign: 'center',\n '::before': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1\n },\n '::after': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1\n }\n },\n // Childless styles\n childless: {\n '::before': {\n marginBottom: 0,\n marginRight: 0\n },\n '::after': {\n marginLeft: 0,\n marginTop: 0\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 // Appearance variations\n brand: {\n color: tokens.colorBrandForeground1,\n '::before': {\n ...shorthands.borderColor(tokens.colorBrandStroke1)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorBrandStroke1)\n }\n },\n default: {\n color: tokens.colorNeutralForeground2,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2)\n }\n },\n subtle: {\n color: tokens.colorNeutralForeground3,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3)\n }\n },\n strong: {\n color: tokens.colorNeutralForeground1,\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n },\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1)\n }\n }\n});\nconst useHorizontalStyles = makeStyles({\n // Base styles\n base: {\n width: '100%',\n '::before': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength\n },\n '::after': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength\n }\n },\n // Inset styles\n inset: {\n paddingLeft: insetSpacing,\n paddingRight: insetSpacing\n },\n // Alignment variations\n start: {\n '::before': {\n content: '\"\"',\n marginRight: contentSpacing,\n maxWidth: maxStartEndLength\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});\nconst useVerticalStyles = makeStyles({\n // Base styles\n base: {\n flexDirection: 'column',\n minHeight: '20px',\n '::before': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength\n },\n '::after': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength\n }\n },\n // Inset styles\n inset: {\n marginTop: insetSpacing,\n marginBottom: insetSpacing\n },\n // With children styles\n withChildren: {\n minHeight: '84px'\n },\n // Alignment variations\n start: {\n '::before': {\n content: '\"\"',\n marginBottom: contentSpacing,\n maxHeight: maxStartEndLength\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});\nexport const useDividerStyles_unstable = (state)=>{\n 'use no memo';\n const baseStyles = useBaseStyles();\n const horizontalStyles = useHorizontalStyles();\n const verticalStyles = useVerticalStyles();\n const { alignContent, appearance, inset, vertical } = state;\n state.root.className = mergeClasses(dividerClassNames.root, // Base styles\n baseStyles.base, baseStyles[alignContent], appearance && baseStyles[appearance], // Horizontal styles\n !vertical && horizontalStyles.base, !vertical && inset && horizontalStyles.inset, !vertical && horizontalStyles[alignContent], // Vertical styles\n vertical && verticalStyles.base, vertical && inset && verticalStyles.inset, vertical && verticalStyles[alignContent], vertical && state.root.children !== undefined && verticalStyles.withChildren, // Childless styles\n state.root.children === undefined && baseStyles.childless, // User provided class name\n state.root.className);\n if (state.wrapper) {\n state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);\n }\n return state;\n};\n"],"names":["mergeClasses","shorthands","__styles","tokens","dividerClassNames","root","wrapper","contentSpacing","insetSpacing","maxStartEndLength","minStartEndLength","useBaseStyles","base","Bt984gj","B7ck84d","mc9l5x","Beiy3e4","Bh6795r","qhf8xq","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","fsow6f","Bcvre1j","Br0sdwz","Bn78ew0","li1rpt","ap17g6","B771hl4","childless","susq4k","Bicfajf","jwcpgy","B4rk6o","start","Bsft5z2","center","Ftih45","end","brand","sj55zd","Bq4z7u6","Bk5zm6e","Bqjgrrk","Bm6vgfq","B0n5ga8","s924m2","B1q35kw","Gp14am","subtle","strong","d","useHorizontalStyles","a9b677","Bdkvgpv","B0qfbqy","pbipgd","Bm2nyyq","xrcqlc","i5u598","inset","uwmqm3","z189sj","Bxwl2t9","Iy66sp","useVerticalStyles","sshi5w","m598lv","B4f6apu","zkzzav","Barhvk9","Ihftqj","Bde111x","B6of3ja","jrapky","withChildren","Bbdr6tz","gn64ia","useDividerStyles_unstable","state","baseStyles","horizontalStyles","verticalStyles","alignContent","appearance","vertical","className","children","undefined"],"mappings":"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"}
@@ -0,0 +1,238 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ function _export(target, all) {
6
+ for(var name in all)Object.defineProperty(target, name, {
7
+ enumerable: true,
8
+ get: all[name]
9
+ });
10
+ }
11
+ _export(exports, {
12
+ dividerClassNames: function() {
13
+ return dividerClassNames;
14
+ },
15
+ useDividerStyles_unstable: function() {
16
+ return useDividerStyles_unstable;
17
+ }
18
+ });
19
+ const _react = require("@griffel/react");
20
+ const _reacttheme = require("@fluentui/react-theme");
21
+ const dividerClassNames = {
22
+ root: 'fui-Divider',
23
+ wrapper: 'fui-Divider__wrapper'
24
+ };
25
+ const contentSpacing = '12px';
26
+ const insetSpacing = '12px';
27
+ const maxStartEndLength = '8px';
28
+ const minStartEndLength = '8px;';
29
+ const useBaseStyles = (0, _react.makeStyles)({
30
+ // Base styles
31
+ base: {
32
+ alignItems: 'center',
33
+ boxSizing: 'border-box',
34
+ display: 'flex',
35
+ flexDirection: 'row',
36
+ flexGrow: 1,
37
+ position: 'relative',
38
+ fontFamily: _reacttheme.tokens.fontFamilyBase,
39
+ fontSize: _reacttheme.tokens.fontSizeBase200,
40
+ fontWeight: _reacttheme.tokens.fontWeightRegular,
41
+ lineHeight: _reacttheme.tokens.lineHeightBase200,
42
+ textAlign: 'center',
43
+ '::before': {
44
+ boxSizing: 'border-box',
45
+ display: 'flex',
46
+ flexGrow: 1
47
+ },
48
+ '::after': {
49
+ boxSizing: 'border-box',
50
+ display: 'flex',
51
+ flexGrow: 1
52
+ }
53
+ },
54
+ // Childless styles
55
+ childless: {
56
+ '::before': {
57
+ marginBottom: 0,
58
+ marginRight: 0
59
+ },
60
+ '::after': {
61
+ marginLeft: 0,
62
+ marginTop: 0
63
+ }
64
+ },
65
+ // Alignment variations
66
+ start: {
67
+ '::after': {
68
+ content: '""'
69
+ }
70
+ },
71
+ center: {
72
+ '::before': {
73
+ content: '""'
74
+ },
75
+ '::after': {
76
+ content: '""'
77
+ }
78
+ },
79
+ end: {
80
+ '::before': {
81
+ content: '""'
82
+ }
83
+ },
84
+ // Appearance variations
85
+ brand: {
86
+ color: _reacttheme.tokens.colorBrandForeground1,
87
+ '::before': {
88
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorBrandStroke1)
89
+ },
90
+ '::after': {
91
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorBrandStroke1)
92
+ }
93
+ },
94
+ default: {
95
+ color: _reacttheme.tokens.colorNeutralForeground2,
96
+ '::before': {
97
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
98
+ },
99
+ '::after': {
100
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
101
+ }
102
+ },
103
+ subtle: {
104
+ color: _reacttheme.tokens.colorNeutralForeground3,
105
+ '::before': {
106
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke3)
107
+ },
108
+ '::after': {
109
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke3)
110
+ }
111
+ },
112
+ strong: {
113
+ color: _reacttheme.tokens.colorNeutralForeground1,
114
+ '::before': {
115
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1)
116
+ },
117
+ '::after': {
118
+ ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1)
119
+ }
120
+ }
121
+ });
122
+ const useHorizontalStyles = (0, _react.makeStyles)({
123
+ // Base styles
124
+ base: {
125
+ width: '100%',
126
+ '::before': {
127
+ borderTopStyle: 'solid',
128
+ borderTopWidth: _reacttheme.tokens.strokeWidthThin,
129
+ minWidth: minStartEndLength
130
+ },
131
+ '::after': {
132
+ borderTopStyle: 'solid',
133
+ borderTopWidth: _reacttheme.tokens.strokeWidthThin,
134
+ minWidth: minStartEndLength
135
+ }
136
+ },
137
+ // Inset styles
138
+ inset: {
139
+ paddingLeft: insetSpacing,
140
+ paddingRight: insetSpacing
141
+ },
142
+ // Alignment variations
143
+ start: {
144
+ '::before': {
145
+ content: '""',
146
+ marginRight: contentSpacing,
147
+ maxWidth: maxStartEndLength
148
+ },
149
+ '::after': {
150
+ marginLeft: contentSpacing
151
+ }
152
+ },
153
+ center: {
154
+ '::before': {
155
+ marginRight: contentSpacing
156
+ },
157
+ '::after': {
158
+ marginLeft: contentSpacing
159
+ }
160
+ },
161
+ end: {
162
+ '::before': {
163
+ marginRight: contentSpacing
164
+ },
165
+ '::after': {
166
+ content: '""',
167
+ marginLeft: contentSpacing,
168
+ maxWidth: maxStartEndLength
169
+ }
170
+ }
171
+ });
172
+ const useVerticalStyles = (0, _react.makeStyles)({
173
+ // Base styles
174
+ base: {
175
+ flexDirection: 'column',
176
+ minHeight: '20px',
177
+ '::before': {
178
+ borderRightStyle: 'solid',
179
+ borderRightWidth: _reacttheme.tokens.strokeWidthThin,
180
+ minHeight: minStartEndLength
181
+ },
182
+ '::after': {
183
+ borderRightStyle: 'solid',
184
+ borderRightWidth: _reacttheme.tokens.strokeWidthThin,
185
+ minHeight: minStartEndLength
186
+ }
187
+ },
188
+ // Inset styles
189
+ inset: {
190
+ marginTop: insetSpacing,
191
+ marginBottom: insetSpacing
192
+ },
193
+ // With children styles
194
+ withChildren: {
195
+ minHeight: '84px'
196
+ },
197
+ // Alignment variations
198
+ start: {
199
+ '::before': {
200
+ content: '""',
201
+ marginBottom: contentSpacing,
202
+ maxHeight: maxStartEndLength
203
+ },
204
+ '::after': {
205
+ marginTop: contentSpacing
206
+ }
207
+ },
208
+ center: {
209
+ '::before': {
210
+ marginBottom: contentSpacing
211
+ },
212
+ '::after': {
213
+ marginTop: contentSpacing
214
+ }
215
+ },
216
+ end: {
217
+ '::before': {
218
+ marginBottom: contentSpacing
219
+ },
220
+ '::after': {
221
+ content: '""',
222
+ marginTop: contentSpacing,
223
+ maxHeight: maxStartEndLength
224
+ }
225
+ }
226
+ });
227
+ const useDividerStyles_unstable = (state)=>{
228
+ 'use no memo';
229
+ const baseStyles = useBaseStyles();
230
+ const horizontalStyles = useHorizontalStyles();
231
+ const verticalStyles = useVerticalStyles();
232
+ const { alignContent, appearance, inset, vertical } = state;
233
+ state.root.className = (0, _react.mergeClasses)(dividerClassNames.root, baseStyles.base, baseStyles[alignContent], appearance && baseStyles[appearance], !vertical && horizontalStyles.base, !vertical && inset && horizontalStyles.inset, !vertical && horizontalStyles[alignContent], vertical && verticalStyles.base, vertical && inset && verticalStyles.inset, vertical && verticalStyles[alignContent], vertical && state.root.children !== undefined && verticalStyles.withChildren, state.root.children === undefined && baseStyles.childless, state.root.className);
234
+ if (state.wrapper) {
235
+ state.wrapper.className = (0, _react.mergeClasses)(dividerClassNames.wrapper, state.wrapper.className);
236
+ }
237
+ return state;
238
+ };
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Divider/useDividerStyles.styles.ts"],"sourcesContent":["import { mergeClasses, shorthands, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DividerSlots, DividerState } from './Divider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const dividerClassNames: SlotClassNames<DividerSlots> = {\n root: 'fui-Divider',\n wrapper: 'fui-Divider__wrapper',\n};\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 '::before': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1,\n },\n\n '::after': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1,\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 default: {\n color: tokens.colorNeutralForeground2,\n\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n },\n subtle: {\n color: tokens.colorNeutralForeground3,\n\n '::before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3),\n },\n\n '::after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3),\n },\n },\n strong: {\n color: tokens.colorNeutralForeground1,\n\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 'use no memo';\n\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 dividerClassNames.root,\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 if (state.wrapper) {\n state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);\n }\n\n return state;\n};\n"],"names":["mergeClasses","shorthands","makeStyles","tokens","dividerClassNames","root","wrapper","contentSpacing","insetSpacing","maxStartEndLength","minStartEndLength","useBaseStyles","base","alignItems","boxSizing","display","flexDirection","flexGrow","position","fontFamily","fontFamilyBase","fontSize","fontSizeBase200","fontWeight","fontWeightRegular","lineHeight","lineHeightBase200","textAlign","childless","marginBottom","marginRight","marginLeft","marginTop","start","content","center","end","brand","color","colorBrandForeground1","borderColor","colorBrandStroke1","default","colorNeutralForeground2","colorNeutralStroke2","subtle","colorNeutralForeground3","colorNeutralStroke3","strong","colorNeutralForeground1","colorNeutralStroke1","useHorizontalStyles","width","borderTopStyle","borderTopWidth","strokeWidthThin","minWidth","inset","paddingLeft","paddingRight","maxWidth","useVerticalStyles","minHeight","borderRightStyle","borderRightWidth","withChildren","maxHeight","useDividerStyles_unstable","state","baseStyles","horizontalStyles","verticalStyles","alignContent","appearance","vertical","className","children","undefined"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Divider,\n dividerClassNames,\n renderDivider_unstable,\n useDividerStyles_unstable,\n useDivider_unstable,\n} from './Divider';\nexport type { DividerProps, DividerSlots, DividerState } from './Divider';\n"],"names":["Divider","dividerClassNames","renderDivider_unstable","useDividerStyles_unstable","useDivider_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,OAAO;eAAPA,gBAAO;;IACPC,iBAAiB;eAAjBA,0BAAiB;;IACjBC,sBAAsB;eAAtBA,+BAAsB;;IACtBC,yBAAyB;eAAzBA,kCAAyB;;IACzBC,mBAAmB;eAAnBA,4BAAmB;;;yBACd"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Divider,\n dividerClassNames,\n renderDivider_unstable,\n useDividerStyles_unstable,\n useDivider_unstable,\n} from './Divider';\nexport type { DividerProps, DividerSlots, DividerState } from './Divider';\n"],"names":["Divider","dividerClassNames","renderDivider_unstable","useDividerStyles_unstable","useDivider_unstable"],"mappings":";;;;;;;;;;;;eACEA,gBAAO;;;eACPC,0BAAiB;;;eACjBC,+BAAsB;;;eACtBC,kCAAyB;;;eACzBC,4BAAmB;;;yBACd,YAAY"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-divider",
3
- "version": "9.3.2",
3
+ "version": "9.4.1",
4
4
  "description": "Fluent UI component to visually separate content.",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -18,10 +18,10 @@
18
18
  "@fluentui/scripts-api-extractor": "*"
19
19
  },
20
20
  "dependencies": {
21
- "@fluentui/react-jsx-runtime": "^9.1.2",
21
+ "@fluentui/react-jsx-runtime": "^9.1.3",
22
22
  "@fluentui/react-shared-contexts": "^9.24.0",
23
23
  "@fluentui/react-theme": "^9.1.24",
24
- "@fluentui/react-utilities": "^9.22.0",
24
+ "@fluentui/react-utilities": "^9.23.0",
25
25
  "@griffel/react": "^1.5.22",
26
26
  "@swc/helpers": "^0.5.1"
27
27
  },