@dxos/react-ui-tabs 0.6.13 → 0.6.14-main.7bd9c89
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.
|
@@ -86,7 +86,7 @@ var TabsBackButton = ({ onClick, classNames, ...props }) => {
|
|
|
86
86
|
var TabsTabGroupHeading = ({ children, classNames, ...props }) => {
|
|
87
87
|
return /* @__PURE__ */ React.createElement("h2", {
|
|
88
88
|
...props,
|
|
89
|
-
className: mx("mlb-1 pli-2 text-sm
|
|
89
|
+
className: mx("mlb-1 pli-2 text-sm text-unAccent", classNames)
|
|
90
90
|
}, children);
|
|
91
91
|
};
|
|
92
92
|
var TabsTab = ({ value, classNames, children, onClick, ...props }) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/Tabs.tsx"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect, useRef } from 'react';\n\nimport { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';\nimport { focusRing, ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\ntype TabsContextValue = {\n activePart: TabsActivePart;\n setActivePart: (nextActivePart: TabsActivePart) => void;\n} & Pick<TabsPrimitive.TabsProps, 'orientation'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n activePart: 'list',\n setActivePart: () => {},\n orientation: 'vertical',\n});\n\ntype TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &\n Partial<{\n activePart: TabsActivePart;\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n }>;\n\nconst TabsRoot = ({\n children,\n classNames,\n activePart: propsActivePart,\n onActivePartChange,\n defaultActivePart,\n value: propsValue,\n onValueChange,\n defaultValue,\n orientation = 'vertical',\n activationMode = 'manual',\n ...props\n}: TabsRootProps) => {\n const [activePart = 'list', setActivePart] = useControllableState({\n prop: propsActivePart,\n onChange: onActivePartChange,\n defaultProp: defaultActivePart,\n });\n\n const [value, setValue] = useControllableState({\n prop: propsValue,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n const handleValueChange = useCallback((nextValue: string) => {\n setActivePart('panel');\n setValue(nextValue);\n }, []);\n\n const { findFirstFocusable } = useFocusFinders();\n\n const tabsRoot = useRef<HTMLDivElement | null>(null);\n\n useLayoutEffect(() => {\n tabsRoot.current && findFirstFocusable(tabsRoot.current)?.focus();\n }, [activePart]);\n\n return (\n <TabsContextProvider orientation={orientation} activePart={activePart} setActivePart={setActivePart}>\n <TabsPrimitive.Root\n activationMode={activationMode}\n data-active={activePart}\n orientation={orientation}\n {...props}\n value={value}\n onValueChange={handleValueChange}\n className={mx(\n 'overflow-hidden',\n orientation === 'vertical' &&\n '[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible',\n classNames,\n )}\n ref={tabsRoot}\n >\n {children}\n </TabsPrimitive.Root>\n </TabsContextProvider>\n );\n};\n\ntype TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;\n\nconst TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) => {\n const { orientation, activePart } = useTabsContext('TabsViewport');\n return (\n <div\n role='none'\n {...props}\n data-active={activePart}\n className={mx(\n orientation === 'vertical' &&\n 'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%] @md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',\n classNames,\n )}\n >\n {children}\n </div>\n );\n};\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nconst TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {\n return (\n <TabsPrimitive.List\n {...props}\n className={mx('place-self-start max-bs-full is-full overflow-y-auto p-1', classNames)}\n >\n {children}\n </TabsPrimitive.List>\n );\n};\n\nconst TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {\n const { setActivePart } = useTabsContext('TabsBackButton');\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('list');\n return onClick?.(event);\n },\n [onClick, setActivePart],\n );\n return <Button {...props} classNames={['is-full text-start @md:hidden mbe-2', classNames]} onClick={handleClick} />;\n};\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nconst TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => {\n return (\n <h2 {...props} className={mx('mlb-1 pli-2 text-sm
|
|
5
|
-
"mappings": ";AAIA,SAASA,uBAAuB;AAChC,SAASC,qBAAqB;AAC9B,YAAYC,mBAAmB;AAC/B,SAASC,4BAA4B;AACrC,OAAOC,SAAyDC,aAAaC,iBAAiBC,cAAc;AAE5G,SAASC,cAAsD;AAC/D,SAASC,WAAWC,YAAYC,0BAA0BC,UAAU;AAIpE,IAAMC,YAAY;AAOlB,IAAM,CAACC,qBAAqBC,cAAAA,IAAkBC,cAAgCH,WAAW;EACvFI,YAAY;EACZC,eAAe,MAAA;EAAO;EACtBC,aAAa;AACf,CAAA;AASA,IAAMC,WAAW,CAAC,EAChBC,UACAC,YACAL,YAAYM,iBACZC,oBACAC,mBACAC,OAAOC,YACPC,eACAC,cACAV,cAAc,YACdW,iBAAiB,UACjB,GAAGC,MAAAA,MACW;AACd,QAAM,CAACd,aAAa,QAAQC,aAAAA,IAAiBc,qBAAqB;IAChEC,MAAMV;IACNW,UAAUV;IACVW,aAAaV;EACf,CAAA;AAEA,QAAM,CAACC,OAAOU,QAAAA,IAAYJ,qBAAqB;IAC7CC,MAAMN;IACNO,UAAUN;IACVO,aAAaN;EACf,CAAA;AAEA,QAAMQ,oBAAoBC,YAAY,CAACC,cAAAA;AACrCrB,kBAAc,OAAA;AACdkB,aAASG,SAAAA;EACX,GAAG,CAAA,CAAE;AAEL,QAAM,EAAEC,mBAAkB,IAAKC,gBAAAA;AAE/B,QAAMC,WAAWC,OAA8B,IAAA;AAE/CC,kBAAgB,MAAA;AACdF,aAASG,WAAWL,mBAAmBE,SAASG,OAAO,GAAGC,MAAAA;EAC5D,GAAG;IAAC7B;GAAW;AAEf,SACE,sBAAA,cAACH,qBAAAA;IAAoBK;IAA0BF;IAAwBC;KACrE,sBAAA,cAAe6B,oBAAI;IACjBjB;IACAkB,eAAa/B;IACbE;IACC,GAAGY;IACJL;IACAE,eAAeS;IACfY,WAAWC,GACT,mBACA/B,gBAAgB,cACd,qGACFG,UAAAA;IAEF6B,KAAKT;KAEJrB,QAAAA,CAAAA;AAIT;AAIA,IAAM+B,eAAe,CAAC,EAAE9B,YAAYD,UAAU,GAAGU,MAAAA,MAA0B;AACzE,QAAM,EAAEZ,aAAaF,WAAU,IAAKF,eAAe,cAAA;AACnD,SACE,sBAAA,cAACsC,OAAAA;IACCC,MAAK;IACJ,GAAGvB;IACJiB,eAAa/B;IACbgC,WAAWC,GACT/B,gBAAgB,cACd,8JACFG,UAAAA;KAGDD,QAAAA;AAGP;AAIA,IAAMkC,cAAc,CAAC,EAAElC,UAAUC,YAAY,GAAGS,MAAAA,MAAyB;AACvE,SACE,sBAAA,cAAeyB,oBAAI;IAChB,GAAGzB;IACJkB,WAAWC,GAAG,4DAA4D5B,UAAAA;KAEzED,QAAAA;AAGP;AAEA,IAAMoC,iBAAiB,CAAC,EAAEC,SAASpC,YAAY,GAAGS,MAAAA,MAAoB;AACpE,QAAM,EAAEb,cAAa,IAAKH,eAAe,gBAAA;AACzC,QAAM4C,cAAcrB,YAClB,CAACsB,UAAAA;AACC1C,kBAAc,MAAA;AACd,WAAOwC,UAAUE,KAAAA;EACnB,GACA;IAACF;IAASxC;GAAc;AAE1B,SAAO,sBAAA,cAAC2C,QAAAA;IAAQ,GAAG9B;IAAOT,YAAY;MAAC;MAAuCA;;IAAaoC,SAASC;;AACtG;AAIA,IAAMG,sBAAsB,CAAC,EAAEzC,UAAUC,YAAY,GAAGS,MAAAA,MAAkD;AACxG,SACE,sBAAA,cAACgC,MAAAA;IAAI,GAAGhC;IAAOkB,WAAWC,GAAG,
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { createContext } from '@radix-ui/react-context';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport React, { type ComponentPropsWithoutRef, type MouseEvent, useCallback, useLayoutEffect, useRef } from 'react';\n\nimport { Button, type ButtonProps, type ThemedClassName } from '@dxos/react-ui';\nimport { focusRing, ghostHover, ghostSelectedContainerMd, mx } from '@dxos/react-ui-theme';\n\ntype TabsActivePart = 'list' | 'panel';\n\nconst TABS_NAME = 'Tabs';\n\ntype TabsContextValue = {\n activePart: TabsActivePart;\n setActivePart: (nextActivePart: TabsActivePart) => void;\n} & Pick<TabsPrimitive.TabsProps, 'orientation'>;\n\nconst [TabsContextProvider, useTabsContext] = createContext<TabsContextValue>(TABS_NAME, {\n activePart: 'list',\n setActivePart: () => {},\n orientation: 'vertical',\n});\n\ntype TabsRootProps = ThemedClassName<TabsPrimitive.TabsProps> &\n Partial<{\n activePart: TabsActivePart;\n onActivePartChange: (nextActivePart: TabsActivePart) => void;\n defaultActivePart: TabsActivePart;\n }>;\n\nconst TabsRoot = ({\n children,\n classNames,\n activePart: propsActivePart,\n onActivePartChange,\n defaultActivePart,\n value: propsValue,\n onValueChange,\n defaultValue,\n orientation = 'vertical',\n activationMode = 'manual',\n ...props\n}: TabsRootProps) => {\n const [activePart = 'list', setActivePart] = useControllableState({\n prop: propsActivePart,\n onChange: onActivePartChange,\n defaultProp: defaultActivePart,\n });\n\n const [value, setValue] = useControllableState({\n prop: propsValue,\n onChange: onValueChange,\n defaultProp: defaultValue,\n });\n\n const handleValueChange = useCallback((nextValue: string) => {\n setActivePart('panel');\n setValue(nextValue);\n }, []);\n\n const { findFirstFocusable } = useFocusFinders();\n\n const tabsRoot = useRef<HTMLDivElement | null>(null);\n\n useLayoutEffect(() => {\n tabsRoot.current && findFirstFocusable(tabsRoot.current)?.focus();\n }, [activePart]);\n\n return (\n <TabsContextProvider orientation={orientation} activePart={activePart} setActivePart={setActivePart}>\n <TabsPrimitive.Root\n activationMode={activationMode}\n data-active={activePart}\n orientation={orientation}\n {...props}\n value={value}\n onValueChange={handleValueChange}\n className={mx(\n 'overflow-hidden',\n orientation === 'vertical' &&\n '[&[data-active=list]_[role=tabpanel]]:invisible @md:[&[data-active=list]_[role=tabpanel]]:visible',\n classNames,\n )}\n ref={tabsRoot}\n >\n {children}\n </TabsPrimitive.Root>\n </TabsContextProvider>\n );\n};\n\ntype TabsViewportProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;\n\nconst TabsViewport = ({ classNames, children, ...props }: TabsViewportProps) => {\n const { orientation, activePart } = useTabsContext('TabsViewport');\n return (\n <div\n role='none'\n {...props}\n data-active={activePart}\n className={mx(\n orientation === 'vertical' &&\n 'grid is-[200%] grid-cols-2 data-[active=panel]:mis-[-100%] @md:is-auto @md:data-[active=panel]:mis-0 @md:grid-cols-[minmax(min-content,1fr)_3fr] @md:gap-1',\n classNames,\n )}\n >\n {children}\n </div>\n );\n};\n\ntype TabsTablistProps = ThemedClassName<TabsPrimitive.TabsListProps>;\n\nconst TabsTablist = ({ children, classNames, ...props }: TabsTablistProps) => {\n return (\n <TabsPrimitive.List\n {...props}\n className={mx('place-self-start max-bs-full is-full overflow-y-auto p-1', classNames)}\n >\n {children}\n </TabsPrimitive.List>\n );\n};\n\nconst TabsBackButton = ({ onClick, classNames, ...props }: ButtonProps) => {\n const { setActivePart } = useTabsContext('TabsBackButton');\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('list');\n return onClick?.(event);\n },\n [onClick, setActivePart],\n );\n return <Button {...props} classNames={['is-full text-start @md:hidden mbe-2', classNames]} onClick={handleClick} />;\n};\n\ntype TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;\n\nconst TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => {\n return (\n <h2 {...props} className={mx('mlb-1 pli-2 text-sm text-unAccent', classNames)}>\n {children}\n </h2>\n );\n};\n\ntype TabsTabProps = ButtonProps & Pick<TabsPrimitive.TabsTriggerProps, 'value'>;\n\nconst TabsTab = ({ value, classNames, children, onClick, ...props }: TabsTabProps) => {\n const { setActivePart } = useTabsContext('TabsTab');\n // NOTE: this handler is only called if the tab is *already active*.\n const handleClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n setActivePart('panel');\n onClick?.(event);\n },\n [setActivePart, onClick],\n );\n return (\n <TabsPrimitive.Trigger value={value} asChild>\n <Button\n density='fine'\n variant='ghost'\n {...props}\n onClick={handleClick}\n classNames={[\n 'block is-full justify-start text-start pli-2 rounded-sm',\n ghostSelectedContainerMd,\n ghostHover,\n classNames,\n ]}\n >\n {children}\n </Button>\n </TabsPrimitive.Trigger>\n );\n};\n\ntype TabsTabpanelProps = ThemedClassName<TabsPrimitive.TabsContentProps>;\n\nconst TabsTabpanel = ({ classNames, children, ...props }: TabsTabpanelProps) => {\n return (\n <TabsPrimitive.Content {...props} className={mx('rounded-sm', focusRing, classNames)}>\n {children}\n </TabsPrimitive.Content>\n );\n};\n\nexport const Tabs = {\n Root: TabsRoot,\n Tablist: TabsTablist,\n Tab: TabsTab,\n TabGroupHeading: TabsTabGroupHeading,\n Tabpanel: TabsTabpanel,\n BackButton: TabsBackButton,\n Viewport: TabsViewport,\n};\n\nexport type {\n TabsActivePart,\n TabsRootProps,\n TabsTablistProps,\n TabsTabProps,\n TabsTabGroupHeadingProps,\n TabsTabpanelProps,\n TabsViewportProps,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["useFocusFinders", "createContext", "TabsPrimitive", "useControllableState", "React", "useCallback", "useLayoutEffect", "useRef", "Button", "focusRing", "ghostHover", "ghostSelectedContainerMd", "mx", "TABS_NAME", "TabsContextProvider", "useTabsContext", "createContext", "activePart", "setActivePart", "orientation", "TabsRoot", "children", "classNames", "propsActivePart", "onActivePartChange", "defaultActivePart", "value", "propsValue", "onValueChange", "defaultValue", "activationMode", "props", "useControllableState", "prop", "onChange", "defaultProp", "setValue", "handleValueChange", "useCallback", "nextValue", "findFirstFocusable", "useFocusFinders", "tabsRoot", "useRef", "useLayoutEffect", "current", "focus", "Root", "data-active", "className", "mx", "ref", "TabsViewport", "div", "role", "TabsTablist", "List", "TabsBackButton", "onClick", "handleClick", "event", "Button", "TabsTabGroupHeading", "h2", "TabsTab", "Trigger", "asChild", "density", "variant", "ghostSelectedContainerMd", "ghostHover", "TabsTabpanel", "Content", "focusRing", "Tabs", "Tablist", "Tab", "TabGroupHeading", "Tabpanel", "BackButton", "Viewport"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytes":18746,"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-tabs/src/index.ts":{"bytes":489,"imports":[{"path":"packages/ui/react-ui-tabs/src/Tabs.tsx","kind":"import-statement","original":"./Tabs"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-tabs/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":10191},"packages/ui/react-ui-tabs/dist/lib/browser/index.mjs":{"imports":[{"path":"@fluentui/react-tabster","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"@radix-ui/react-tabs","kind":"import-statement","external":true},{"path":"@radix-ui/react-use-controllable-state","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Tabs"],"entryPoint":"packages/ui/react-ui-tabs/src/index.ts","inputs":{"packages/ui/react-ui-tabs/src/Tabs.tsx":{"bytesInOutput":4535},"packages/ui/react-ui-tabs/src/index.ts":{"bytesInOutput":0}},"bytes":4631}}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-tabs",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.14-main.7bd9c89",
|
|
4
4
|
"description": "Components for facilitating a Tabs pattern.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -28,22 +28,24 @@
|
|
|
28
28
|
"@radix-ui/react-slot": "^1.0.1",
|
|
29
29
|
"@radix-ui/react-tabs": "^1.0.4",
|
|
30
30
|
"@radix-ui/react-use-controllable-state": "^1.0.0",
|
|
31
|
-
"@dxos/
|
|
32
|
-
"@dxos/react-ui-theme": "0.6.13",
|
|
33
|
-
"@dxos/util": "0.6.13"
|
|
31
|
+
"@dxos/util": "0.6.14-main.7bd9c89"
|
|
34
32
|
},
|
|
35
33
|
"devDependencies": {
|
|
36
34
|
"@types/react": "~18.2.0",
|
|
37
35
|
"@types/react-dom": "~18.2.0",
|
|
38
36
|
"react": "~18.2.0",
|
|
39
37
|
"react-dom": "~18.2.0",
|
|
40
|
-
"vite": "
|
|
41
|
-
"@dxos/random": "0.6.
|
|
42
|
-
"@dxos/
|
|
38
|
+
"vite": "5.4.7",
|
|
39
|
+
"@dxos/random": "0.6.14-main.7bd9c89",
|
|
40
|
+
"@dxos/react-ui": "0.6.14-main.7bd9c89",
|
|
41
|
+
"@dxos/react-ui-theme": "0.6.14-main.7bd9c89",
|
|
42
|
+
"@dxos/storybook-utils": "0.6.14-main.7bd9c89"
|
|
43
43
|
},
|
|
44
44
|
"peerDependencies": {
|
|
45
|
-
"react": "
|
|
46
|
-
"react-dom": "
|
|
45
|
+
"react": "~18.2.0",
|
|
46
|
+
"react-dom": "~18.2.0",
|
|
47
|
+
"@dxos/react-ui": "0.6.14-main.7bd9c89",
|
|
48
|
+
"@dxos/react-ui-theme": "0.6.14-main.7bd9c89"
|
|
47
49
|
},
|
|
48
50
|
"publishConfig": {
|
|
49
51
|
"access": "public"
|
package/src/Tabs.stories.tsx
CHANGED
|
@@ -21,7 +21,7 @@ const content = [...Array(24)].reduce((acc: { [key: string]: { title: string; pa
|
|
|
21
21
|
}, {});
|
|
22
22
|
|
|
23
23
|
export default {
|
|
24
|
-
title: 'react-ui-tabs/Tabs',
|
|
24
|
+
title: 'ui/react-ui-tabs/Tabs',
|
|
25
25
|
component: NaturalTabs.Root,
|
|
26
26
|
decorators: [withTheme],
|
|
27
27
|
// parameters: { translations },
|
package/src/Tabs.tsx
CHANGED
|
@@ -143,7 +143,7 @@ type TabsTabGroupHeadingProps = ThemedClassName<ComponentPropsWithoutRef<'h2'>>;
|
|
|
143
143
|
|
|
144
144
|
const TabsTabGroupHeading = ({ children, classNames, ...props }: ThemedClassName<TabsTabGroupHeadingProps>) => {
|
|
145
145
|
return (
|
|
146
|
-
<h2 {...props} className={mx('mlb-1 pli-2 text-sm
|
|
146
|
+
<h2 {...props} className={mx('mlb-1 pli-2 text-sm text-unAccent', classNames)}>
|
|
147
147
|
{children}
|
|
148
148
|
</h2>
|
|
149
149
|
);
|