@stoplight/elements-core 7.11.0 → 7.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/components/MosaicTableOfContents/constants.d.ts +8 -0
  2. package/components/MosaicTableOfContents/types.d.ts +1 -0
  3. package/index.esm.js +44 -21
  4. package/index.js +44 -21
  5. package/index.mjs +44 -21
  6. package/package.json +1 -1
package/components/MosaicTableOfContents/constants.d.ts CHANGED
@@ -2,11 +2,19 @@ import { IIconProps } from '@stoplight/mosaic';
2
2
  export declare const NODE_TYPE_TITLE_ICON: {
3
3
  [nodeType: string]: IIconProps['icon'];
4
4
  };
5
+ export declare const NODE_TITLE_ICON: {
6
+ [nodeTitle: string]: IIconProps['icon'];
7
+ };
5
8
  export declare const NODE_TYPE_META_ICON: {
6
9
  [nodeType: string]: IIconProps['icon'];
7
10
  };
8
11
  export declare const NODE_TYPE_ICON_COLOR: {
9
12
  model: string;
13
+ http_service: string;
14
+ http_operation: string;
15
+ };
16
+ export declare const NODE_TITLE_ICON_COLOR: {
17
+ Schemas: string;
10
18
  };
11
19
  export declare const NODE_META_COLOR: {
12
20
  get: string;
package/components/MosaicTableOfContents/types.d.ts CHANGED
@@ -4,6 +4,7 @@ export declare type TableOfContentsProps = {
4
4
  Link: CustomLinkComponent;
5
5
  maxDepthOpenByDefault?: number;
6
6
  externalScrollbar?: boolean;
7
+ isInResponsiveMode?: boolean;
7
8
  onLinkClick?(): void;
8
9
  };
9
10
  export declare type CustomLinkComponent = React.ComponentType<{
package/index.esm.js CHANGED
@@ -293,6 +293,11 @@ var faBookOpen = {
293
293
  iconName: 'book-open',
294
294
  icon: [576, 512, [128366, 128214], "f518", "M144.3 32.04C106.9 31.29 63.7 41.44 18.6 61.29c-11.42 5.026-18.6 16.67-18.6 29.15l0 357.6c0 11.55 11.99 19.55 22.45 14.65c126.3-59.14 219.8 11 223.8 14.01C249.1 478.9 252.5 480 256 480c12.4 0 16-11.38 16-15.98V80.04c0-5.203-2.531-10.08-6.781-13.08C263.3 65.58 216.7 33.35 144.3 32.04zM557.4 61.29c-45.11-19.79-88.48-29.61-125.7-29.26c-72.44 1.312-118.1 33.55-120.9 34.92C306.5 69.96 304 74.83 304 80.04v383.1C304 468.4 307.5 480 320 480c3.484 0 6.938-1.125 9.781-3.328c3.925-3.018 97.44-73.16 223.8-14c10.46 4.896 22.45-3.105 22.45-14.65l.0001-357.6C575.1 77.97 568.8 66.31 557.4 61.29z"]
295
295
  };
296
+ var faBullseye = {
297
+ prefix: 'fas',
298
+ iconName: 'bullseye',
299
+ icon: [512, 512, [], "f140", "M288 256C288 273.7 273.7 288 256 288C238.3 288 224 273.7 224 256C224 238.3 238.3 224 256 224C273.7 224 288 238.3 288 256zM112 256C112 176.5 176.5 112 256 112C335.5 112 400 176.5 400 256C400 335.5 335.5 400 256 400C176.5 400 112 335.5 112 256zM256 336C300.2 336 336 300.2 336 256C336 211.8 300.2 176 256 176C211.8 176 176 211.8 176 256C176 300.2 211.8 336 256 336zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 64C149.1 64 64 149.1 64 256C64 362 149.1 448 256 448C362 448 448 362 448 256C448 149.1 362 64 256 64z"]
300
+ };
296
301
  var faCircleQuestion = {
297
302
  prefix: 'fas',
298
303
  iconName: 'circle-question',
@@ -314,6 +319,11 @@ var faCube = {
314
319
  iconName: 'cube',
315
320
  icon: [512, 512, [], "f1b2", "M234.5 5.709C248.4 .7377 263.6 .7377 277.5 5.709L469.5 74.28C494.1 83.38 512 107.5 512 134.6V377.4C512 404.5 494.1 428.6 469.5 437.7L277.5 506.3C263.6 511.3 248.4 511.3 234.5 506.3L42.47 437.7C17 428.6 0 404.5 0 377.4V134.6C0 107.5 17 83.38 42.47 74.28L234.5 5.709zM256 65.98L82.34 128L256 190L429.7 128L256 65.98zM288 434.6L448 377.4V189.4L288 246.6V434.6z"]
316
321
  };
322
+ var faCubes = {
323
+ prefix: 'fas',
324
+ iconName: 'cubes',
325
+ icon: [576, 512, [], "f1b3", "M172.1 40.16L268.1 3.76C280.9-1.089 295.1-1.089 307.9 3.76L403.9 40.16C425.6 48.41 440 69.25 440 92.52V204.7C441.3 205.1 442.6 205.5 443.9 205.1L539.9 242.4C561.6 250.6 576 271.5 576 294.7V413.9C576 436.1 562.9 456.2 542.5 465.1L446.5 507.3C432.2 513.7 415.8 513.7 401.5 507.3L288 457.5L174.5 507.3C160.2 513.7 143.8 513.7 129.5 507.3L33.46 465.1C13.13 456.2 0 436.1 0 413.9V294.7C0 271.5 14.39 250.6 36.15 242.4L132.1 205.1C133.4 205.5 134.7 205.1 136 204.7V92.52C136 69.25 150.4 48.41 172.1 40.16V40.16zM290.8 48.64C289 47.95 286.1 47.95 285.2 48.64L206.8 78.35L287.1 109.5L369.2 78.35L290.8 48.64zM392 210.6V121L309.6 152.6V241.8L392 210.6zM154.8 250.9C153 250.2 150.1 250.2 149.2 250.9L70.81 280.6L152 311.7L233.2 280.6L154.8 250.9zM173.6 455.3L256 419.1V323.2L173.6 354.8V455.3zM342.8 280.6L424 311.7L505.2 280.6L426.8 250.9C425 250.2 422.1 250.2 421.2 250.9L342.8 280.6zM528 413.9V323.2L445.6 354.8V455.3L523.2 421.2C526.1 419.9 528 417.1 528 413.9V413.9z"]
326
+ };
317
327
  var faDatabase = {
318
328
  prefix: 'fas',
319
329
  iconName: 'database',
@@ -3029,12 +3039,22 @@ function useFirstRender() {
3029
3039
 
3030
3040
  const NODE_TYPE_TITLE_ICON = {
3031
3041
  http_service: faCloud,
3042
+ http_operation: faBullseye,
3043
+ model: faCube,
3044
+ };
3045
+ const NODE_TITLE_ICON = {
3046
+ Schemas: faCubes,
3032
3047
  };
3033
3048
  const NODE_TYPE_META_ICON = {
3034
3049
  model: faCube,
3035
3050
  };
3036
3051
  const NODE_TYPE_ICON_COLOR = {
3037
3052
  model: 'warning',
3053
+ http_service: '#D812EA',
3054
+ http_operation: '#9747FF',
3055
+ };
3056
+ const NODE_TITLE_ICON_COLOR = {
3057
+ Schemas: 'warning',
3038
3058
  };
3039
3059
  const NODE_META_COLOR = {
3040
3060
  get: 'success',
@@ -3101,7 +3121,7 @@ function isExternalLink(item) {
3101
3121
 
3102
3122
  const ActiveIdContext = React.createContext(undefined);
3103
3123
  const LinkContext = React.createContext(undefined);
3104
- const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, onLinkClick }) => {
3124
+ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, isInResponsiveMode = false, onLinkClick, }) => {
3105
3125
  const container = React.useRef(null);
3106
3126
  const child = React.useRef(null);
3107
3127
  const firstRender = useFirstRender();
@@ -3118,35 +3138,35 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
3118
3138
  }
3119
3139
  }, 0);
3120
3140
  }, [activeId]);
3121
- return (React.createElement(Box, { ref: container, w: "full", bg: "canvas-100", overflowY: "auto" },
3141
+ return (React.createElement(Box, { ref: container, w: "full", bg: isInResponsiveMode ? 'canvas' : 'canvas-100', overflowY: "auto" },
3122
3142
  React.createElement(Box, { ref: child, my: 3 },
3123
3143
  React.createElement(LinkContext.Provider, { value: Link },
3124
3144
  React.createElement(ActiveIdContext.Provider, { value: activeId }, tree.map((item, key) => {
3125
3145
  if (isDivider(item)) {
3126
- return React.createElement(Divider, { key: key, item: item });
3146
+ return React.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
3127
3147
  }
3128
- return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick }));
3148
+ return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
3129
3149
  }))))));
3130
3150
  });
3131
- const Divider = React.memo(({ item }) => {
3132
- return (React.createElement(Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: "sm", lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
3151
+ const Divider = React.memo(({ item, isInResponsiveMode = false }) => {
3152
+ return (React.createElement(Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
3133
3153
  });
3134
- const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, onLinkClick }) => {
3154
+ const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
3135
3155
  if (isExternalLink(item)) {
3136
3156
  return (React.createElement(Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
3137
- React.createElement(Item, { depth: depth, title: item.title, meta: React.createElement(Box, { as: Icon, icon: ['fas', 'external-link'] }) })));
3157
+ React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, depth: depth, title: item.title, meta: React.createElement(Box, { as: Icon, icon: ['fas', 'external-link'] }) })));
3138
3158
  }
3139
3159
  else if (isGroup(item) || isNodeGroup(item)) {
3140
- return React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick });
3160
+ return (React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
3141
3161
  }
3142
3162
  else if (isNode(item)) {
3143
- return (React.createElement(Node, { depth: depth, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
3163
+ return (React.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
3144
3164
  item.version && React.createElement(Version, { value: item.version }),
3145
- React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] })))) }));
3165
+ item.type !== 'model' && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] }))))) }));
3146
3166
  }
3147
3167
  return null;
3148
3168
  });
3149
- const Group = React.memo(({ depth, item, maxDepthOpenByDefault, onLinkClick = () => { } }) => {
3169
+ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => { } }) => {
3150
3170
  const activeId = React.useContext(ActiveIdContext);
3151
3171
  const [isOpen, setIsOpen] = React.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
3152
3172
  const hasActive = !!activeId && hasActiveItem(item.items, activeId);
@@ -3174,25 +3194,28 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, onLinkClick = ()
3174
3194
  const showAsActive = hasActive && !isOpen;
3175
3195
  let elem;
3176
3196
  if (isNodeGroup(item)) {
3177
- elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick }));
3197
+ elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
3178
3198
  }
3179
3199
  else {
3180
- elem = React.createElement(Item, { title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive });
3200
+ elem = (React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive, icon: NODE_TITLE_ICON[item.title] && (React.createElement(Box, { as: Icon, color: NODE_TITLE_ICON_COLOR[item.title], icon: NODE_TITLE_ICON[item.title] })) }));
3181
3201
  }
3182
3202
  return (React.createElement(React.Fragment, null,
3183
3203
  elem,
3184
3204
  isOpen &&
3185
3205
  item.items.map((groupItem, key) => {
3186
- return React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick });
3206
+ return (React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
3187
3207
  })));
3188
3208
  });
3189
- const Item = React.memo(({ depth, isActive, id, title, meta, icon, onClick }) => {
3190
- return (React.createElement(Flex, { id: id, bg: { default: isActive ? 'primary-tint' : 'canvas-100', hover: isActive ? undefined : 'canvas-200' }, cursor: "pointer", pl: 4 + depth * 4, pr: 4, h: "md", align: "center", userSelect: "none", onClick: onClick, title: title },
3209
+ const Item = React.memo(({ depth, isActive, id, title, meta, icon, isInResponsiveMode, onClick }) => {
3210
+ return (React.createElement(Flex, { id: id, bg: {
3211
+ default: isInResponsiveMode ? 'canvas' : isActive ? 'primary-tint' : 'canvas-100',
3212
+ hover: isActive ? undefined : 'canvas-200',
3213
+ }, cursor: "pointer", pl: 4 + depth * 4, pr: 4, h: isInResponsiveMode ? 'lg' : 'md', align: "center", userSelect: "none", onClick: onClick, title: title },
3191
3214
  icon,
3192
- React.createElement(Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate" }, title),
3193
- React.createElement(Flex, { alignItems: "center", fontSize: "xs" }, meta)));
3215
+ React.createElement(Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate", fontSize: isInResponsiveMode ? 'lg' : 'base' }, title),
3216
+ React.createElement(Flex, { alignItems: "center", fontSize: isInResponsiveMode ? 'base' : 'xs' }, meta)));
3194
3217
  });
3195
- const Node = React.memo(({ item, depth, meta, showAsActive, onClick, onLinkClick = () => { } }) => {
3218
+ const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => { } }) => {
3196
3219
  const activeId = React.useContext(ActiveIdContext);
3197
3220
  const isActive = activeId === item.slug || activeId === item.id;
3198
3221
  const LinkComponent = React.useContext(LinkContext);
@@ -3209,7 +3232,7 @@ const Node = React.memo(({ item, depth, meta, showAsActive, onClick, onLinkClick
3209
3232
  }
3210
3233
  };
3211
3234
  return (React.createElement(Box, { as: LinkComponent, to: item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
3212
- React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, onClick: handleClick })));
3235
+ React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
3213
3236
  });
3214
3237
  const Version = ({ value }) => {
3215
3238
  return (React.createElement(Box, { mr: 2 },
package/index.js CHANGED
@@ -349,6 +349,11 @@ var faBookOpen = {
349
349
  iconName: 'book-open',
350
350
  icon: [576, 512, [128366, 128214], "f518", "M144.3 32.04C106.9 31.29 63.7 41.44 18.6 61.29c-11.42 5.026-18.6 16.67-18.6 29.15l0 357.6c0 11.55 11.99 19.55 22.45 14.65c126.3-59.14 219.8 11 223.8 14.01C249.1 478.9 252.5 480 256 480c12.4 0 16-11.38 16-15.98V80.04c0-5.203-2.531-10.08-6.781-13.08C263.3 65.58 216.7 33.35 144.3 32.04zM557.4 61.29c-45.11-19.79-88.48-29.61-125.7-29.26c-72.44 1.312-118.1 33.55-120.9 34.92C306.5 69.96 304 74.83 304 80.04v383.1C304 468.4 307.5 480 320 480c3.484 0 6.938-1.125 9.781-3.328c3.925-3.018 97.44-73.16 223.8-14c10.46 4.896 22.45-3.105 22.45-14.65l.0001-357.6C575.1 77.97 568.8 66.31 557.4 61.29z"]
351
351
  };
352
+ var faBullseye = {
353
+ prefix: 'fas',
354
+ iconName: 'bullseye',
355
+ icon: [512, 512, [], "f140", "M288 256C288 273.7 273.7 288 256 288C238.3 288 224 273.7 224 256C224 238.3 238.3 224 256 224C273.7 224 288 238.3 288 256zM112 256C112 176.5 176.5 112 256 112C335.5 112 400 176.5 400 256C400 335.5 335.5 400 256 400C176.5 400 112 335.5 112 256zM256 336C300.2 336 336 300.2 336 256C336 211.8 300.2 176 256 176C211.8 176 176 211.8 176 256C176 300.2 211.8 336 256 336zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 64C149.1 64 64 149.1 64 256C64 362 149.1 448 256 448C362 448 448 362 448 256C448 149.1 362 64 256 64z"]
356
+ };
352
357
  var faCircleQuestion = {
353
358
  prefix: 'fas',
354
359
  iconName: 'circle-question',
@@ -370,6 +375,11 @@ var faCube = {
370
375
  iconName: 'cube',
371
376
  icon: [512, 512, [], "f1b2", "M234.5 5.709C248.4 .7377 263.6 .7377 277.5 5.709L469.5 74.28C494.1 83.38 512 107.5 512 134.6V377.4C512 404.5 494.1 428.6 469.5 437.7L277.5 506.3C263.6 511.3 248.4 511.3 234.5 506.3L42.47 437.7C17 428.6 0 404.5 0 377.4V134.6C0 107.5 17 83.38 42.47 74.28L234.5 5.709zM256 65.98L82.34 128L256 190L429.7 128L256 65.98zM288 434.6L448 377.4V189.4L288 246.6V434.6z"]
372
377
  };
378
+ var faCubes = {
379
+ prefix: 'fas',
380
+ iconName: 'cubes',
381
+ icon: [576, 512, [], "f1b3", "M172.1 40.16L268.1 3.76C280.9-1.089 295.1-1.089 307.9 3.76L403.9 40.16C425.6 48.41 440 69.25 440 92.52V204.7C441.3 205.1 442.6 205.5 443.9 205.1L539.9 242.4C561.6 250.6 576 271.5 576 294.7V413.9C576 436.1 562.9 456.2 542.5 465.1L446.5 507.3C432.2 513.7 415.8 513.7 401.5 507.3L288 457.5L174.5 507.3C160.2 513.7 143.8 513.7 129.5 507.3L33.46 465.1C13.13 456.2 0 436.1 0 413.9V294.7C0 271.5 14.39 250.6 36.15 242.4L132.1 205.1C133.4 205.5 134.7 205.1 136 204.7V92.52C136 69.25 150.4 48.41 172.1 40.16V40.16zM290.8 48.64C289 47.95 286.1 47.95 285.2 48.64L206.8 78.35L287.1 109.5L369.2 78.35L290.8 48.64zM392 210.6V121L309.6 152.6V241.8L392 210.6zM154.8 250.9C153 250.2 150.1 250.2 149.2 250.9L70.81 280.6L152 311.7L233.2 280.6L154.8 250.9zM173.6 455.3L256 419.1V323.2L173.6 354.8V455.3zM342.8 280.6L424 311.7L505.2 280.6L426.8 250.9C425 250.2 422.1 250.2 421.2 250.9L342.8 280.6zM528 413.9V323.2L445.6 354.8V455.3L523.2 421.2C526.1 419.9 528 417.1 528 413.9V413.9z"]
382
+ };
373
383
  var faDatabase = {
374
384
  prefix: 'fas',
375
385
  iconName: 'database',
@@ -3085,12 +3095,22 @@ function useFirstRender() {
3085
3095
 
3086
3096
  const NODE_TYPE_TITLE_ICON = {
3087
3097
  http_service: faCloud,
3098
+ http_operation: faBullseye,
3099
+ model: faCube,
3100
+ };
3101
+ const NODE_TITLE_ICON = {
3102
+ Schemas: faCubes,
3088
3103
  };
3089
3104
  const NODE_TYPE_META_ICON = {
3090
3105
  model: faCube,
3091
3106
  };
3092
3107
  const NODE_TYPE_ICON_COLOR = {
3093
3108
  model: 'warning',
3109
+ http_service: '#D812EA',
3110
+ http_operation: '#9747FF',
3111
+ };
3112
+ const NODE_TITLE_ICON_COLOR = {
3113
+ Schemas: 'warning',
3094
3114
  };
3095
3115
  const NODE_META_COLOR = {
3096
3116
  get: 'success',
@@ -3157,7 +3177,7 @@ function isExternalLink(item) {
3157
3177
 
3158
3178
  const ActiveIdContext = React__namespace.createContext(undefined);
3159
3179
  const LinkContext = React__namespace.createContext(undefined);
3160
- const TableOfContents = React__namespace.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, onLinkClick }) => {
3180
+ const TableOfContents = React__namespace.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, isInResponsiveMode = false, onLinkClick, }) => {
3161
3181
  const container = React__namespace.useRef(null);
3162
3182
  const child = React__namespace.useRef(null);
3163
3183
  const firstRender = useFirstRender();
@@ -3174,35 +3194,35 @@ const TableOfContents = React__namespace.memo(({ tree, activeId, Link, maxDepthO
3174
3194
  }
3175
3195
  }, 0);
3176
3196
  }, [activeId]);
3177
- return (React__namespace.createElement(mosaic.Box, { ref: container, w: "full", bg: "canvas-100", overflowY: "auto" },
3197
+ return (React__namespace.createElement(mosaic.Box, { ref: container, w: "full", bg: isInResponsiveMode ? 'canvas' : 'canvas-100', overflowY: "auto" },
3178
3198
  React__namespace.createElement(mosaic.Box, { ref: child, my: 3 },
3179
3199
  React__namespace.createElement(LinkContext.Provider, { value: Link },
3180
3200
  React__namespace.createElement(ActiveIdContext.Provider, { value: activeId }, tree.map((item, key) => {
3181
3201
  if (isDivider(item)) {
3182
- return React__namespace.createElement(Divider, { key: key, item: item });
3202
+ return React__namespace.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
3183
3203
  }
3184
- return (React__namespace.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick }));
3204
+ return (React__namespace.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
3185
3205
  }))))));
3186
3206
  });
3187
- const Divider = React__namespace.memo(({ item }) => {
3188
- return (React__namespace.createElement(mosaic.Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: "sm", lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
3207
+ const Divider = React__namespace.memo(({ item, isInResponsiveMode = false }) => {
3208
+ return (React__namespace.createElement(mosaic.Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
3189
3209
  });
3190
- const GroupItem = React__namespace.memo(({ item, depth, maxDepthOpenByDefault, onLinkClick }) => {
3210
+ const GroupItem = React__namespace.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
3191
3211
  if (isExternalLink(item)) {
3192
3212
  return (React__namespace.createElement(mosaic.Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
3193
- React__namespace.createElement(Item, { depth: depth, title: item.title, meta: React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: ['fas', 'external-link'] }) })));
3213
+ React__namespace.createElement(Item, { isInResponsiveMode: isInResponsiveMode, depth: depth, title: item.title, meta: React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: ['fas', 'external-link'] }) })));
3194
3214
  }
3195
3215
  else if (isGroup(item) || isNodeGroup(item)) {
3196
- return React__namespace.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick });
3216
+ return (React__namespace.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
3197
3217
  }
3198
3218
  else if (isNode(item)) {
3199
- return (React__namespace.createElement(Node, { depth: depth, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React__namespace.createElement(mosaic.Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React__namespace.createElement(mosaic.Flex, { alignItems: "center" },
3219
+ return (React__namespace.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React__namespace.createElement(mosaic.Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React__namespace.createElement(mosaic.Flex, { alignItems: "center" },
3200
3220
  item.version && React__namespace.createElement(Version, { value: item.version }),
3201
- React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] })))) }));
3221
+ item.type !== 'model' && (React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] }))))) }));
3202
3222
  }
3203
3223
  return null;
3204
3224
  });
3205
- const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, onLinkClick = () => { } }) => {
3225
+ const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => { } }) => {
3206
3226
  const activeId = React__namespace.useContext(ActiveIdContext);
3207
3227
  const [isOpen, setIsOpen] = React__namespace.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
3208
3228
  const hasActive = !!activeId && hasActiveItem(item.items, activeId);
@@ -3230,25 +3250,28 @@ const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, onLin
3230
3250
  const showAsActive = hasActive && !isOpen;
3231
3251
  let elem;
3232
3252
  if (isNodeGroup(item)) {
3233
- elem = (React__namespace.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick }));
3253
+ elem = (React__namespace.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
3234
3254
  }
3235
3255
  else {
3236
- elem = React__namespace.createElement(Item, { title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive });
3256
+ elem = (React__namespace.createElement(Item, { isInResponsiveMode: isInResponsiveMode, title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive, icon: NODE_TITLE_ICON[item.title] && (React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TITLE_ICON_COLOR[item.title], icon: NODE_TITLE_ICON[item.title] })) }));
3237
3257
  }
3238
3258
  return (React__namespace.createElement(React__namespace.Fragment, null,
3239
3259
  elem,
3240
3260
  isOpen &&
3241
3261
  item.items.map((groupItem, key) => {
3242
- return React__namespace.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick });
3262
+ return (React__namespace.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
3243
3263
  })));
3244
3264
  });
3245
- const Item = React__namespace.memo(({ depth, isActive, id, title, meta, icon, onClick }) => {
3246
- return (React__namespace.createElement(mosaic.Flex, { id: id, bg: { default: isActive ? 'primary-tint' : 'canvas-100', hover: isActive ? undefined : 'canvas-200' }, cursor: "pointer", pl: 4 + depth * 4, pr: 4, h: "md", align: "center", userSelect: "none", onClick: onClick, title: title },
3265
+ const Item = React__namespace.memo(({ depth, isActive, id, title, meta, icon, isInResponsiveMode, onClick }) => {
3266
+ return (React__namespace.createElement(mosaic.Flex, { id: id, bg: {
3267
+ default: isInResponsiveMode ? 'canvas' : isActive ? 'primary-tint' : 'canvas-100',
3268
+ hover: isActive ? undefined : 'canvas-200',
3269
+ }, cursor: "pointer", pl: 4 + depth * 4, pr: 4, h: isInResponsiveMode ? 'lg' : 'md', align: "center", userSelect: "none", onClick: onClick, title: title },
3247
3270
  icon,
3248
- React__namespace.createElement(mosaic.Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate" }, title),
3249
- React__namespace.createElement(mosaic.Flex, { alignItems: "center", fontSize: "xs" }, meta)));
3271
+ React__namespace.createElement(mosaic.Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate", fontSize: isInResponsiveMode ? 'lg' : 'base' }, title),
3272
+ React__namespace.createElement(mosaic.Flex, { alignItems: "center", fontSize: isInResponsiveMode ? 'base' : 'xs' }, meta)));
3250
3273
  });
3251
- const Node = React__namespace.memo(({ item, depth, meta, showAsActive, onClick, onLinkClick = () => { } }) => {
3274
+ const Node = React__namespace.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => { } }) => {
3252
3275
  const activeId = React__namespace.useContext(ActiveIdContext);
3253
3276
  const isActive = activeId === item.slug || activeId === item.id;
3254
3277
  const LinkComponent = React__namespace.useContext(LinkContext);
@@ -3265,7 +3288,7 @@ const Node = React__namespace.memo(({ item, depth, meta, showAsActive, onClick,
3265
3288
  }
3266
3289
  };
3267
3290
  return (React__namespace.createElement(mosaic.Box, { as: LinkComponent, to: item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
3268
- React__namespace.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, onClick: handleClick })));
3291
+ React__namespace.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
3269
3292
  });
3270
3293
  const Version = ({ value }) => {
3271
3294
  return (React__namespace.createElement(mosaic.Box, { mr: 2 },
package/index.mjs CHANGED
@@ -293,6 +293,11 @@ var faBookOpen = {
293
293
  iconName: 'book-open',
294
294
  icon: [576, 512, [128366, 128214], "f518", "M144.3 32.04C106.9 31.29 63.7 41.44 18.6 61.29c-11.42 5.026-18.6 16.67-18.6 29.15l0 357.6c0 11.55 11.99 19.55 22.45 14.65c126.3-59.14 219.8 11 223.8 14.01C249.1 478.9 252.5 480 256 480c12.4 0 16-11.38 16-15.98V80.04c0-5.203-2.531-10.08-6.781-13.08C263.3 65.58 216.7 33.35 144.3 32.04zM557.4 61.29c-45.11-19.79-88.48-29.61-125.7-29.26c-72.44 1.312-118.1 33.55-120.9 34.92C306.5 69.96 304 74.83 304 80.04v383.1C304 468.4 307.5 480 320 480c3.484 0 6.938-1.125 9.781-3.328c3.925-3.018 97.44-73.16 223.8-14c10.46 4.896 22.45-3.105 22.45-14.65l.0001-357.6C575.1 77.97 568.8 66.31 557.4 61.29z"]
295
295
  };
296
+ var faBullseye = {
297
+ prefix: 'fas',
298
+ iconName: 'bullseye',
299
+ icon: [512, 512, [], "f140", "M288 256C288 273.7 273.7 288 256 288C238.3 288 224 273.7 224 256C224 238.3 238.3 224 256 224C273.7 224 288 238.3 288 256zM112 256C112 176.5 176.5 112 256 112C335.5 112 400 176.5 400 256C400 335.5 335.5 400 256 400C176.5 400 112 335.5 112 256zM256 336C300.2 336 336 300.2 336 256C336 211.8 300.2 176 256 176C211.8 176 176 211.8 176 256C176 300.2 211.8 336 256 336zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 64C149.1 64 64 149.1 64 256C64 362 149.1 448 256 448C362 448 448 362 448 256C448 149.1 362 64 256 64z"]
300
+ };
296
301
  var faCircleQuestion = {
297
302
  prefix: 'fas',
298
303
  iconName: 'circle-question',
@@ -314,6 +319,11 @@ var faCube = {
314
319
  iconName: 'cube',
315
320
  icon: [512, 512, [], "f1b2", "M234.5 5.709C248.4 .7377 263.6 .7377 277.5 5.709L469.5 74.28C494.1 83.38 512 107.5 512 134.6V377.4C512 404.5 494.1 428.6 469.5 437.7L277.5 506.3C263.6 511.3 248.4 511.3 234.5 506.3L42.47 437.7C17 428.6 0 404.5 0 377.4V134.6C0 107.5 17 83.38 42.47 74.28L234.5 5.709zM256 65.98L82.34 128L256 190L429.7 128L256 65.98zM288 434.6L448 377.4V189.4L288 246.6V434.6z"]
316
321
  };
322
+ var faCubes = {
323
+ prefix: 'fas',
324
+ iconName: 'cubes',
325
+ icon: [576, 512, [], "f1b3", "M172.1 40.16L268.1 3.76C280.9-1.089 295.1-1.089 307.9 3.76L403.9 40.16C425.6 48.41 440 69.25 440 92.52V204.7C441.3 205.1 442.6 205.5 443.9 205.1L539.9 242.4C561.6 250.6 576 271.5 576 294.7V413.9C576 436.1 562.9 456.2 542.5 465.1L446.5 507.3C432.2 513.7 415.8 513.7 401.5 507.3L288 457.5L174.5 507.3C160.2 513.7 143.8 513.7 129.5 507.3L33.46 465.1C13.13 456.2 0 436.1 0 413.9V294.7C0 271.5 14.39 250.6 36.15 242.4L132.1 205.1C133.4 205.5 134.7 205.1 136 204.7V92.52C136 69.25 150.4 48.41 172.1 40.16V40.16zM290.8 48.64C289 47.95 286.1 47.95 285.2 48.64L206.8 78.35L287.1 109.5L369.2 78.35L290.8 48.64zM392 210.6V121L309.6 152.6V241.8L392 210.6zM154.8 250.9C153 250.2 150.1 250.2 149.2 250.9L70.81 280.6L152 311.7L233.2 280.6L154.8 250.9zM173.6 455.3L256 419.1V323.2L173.6 354.8V455.3zM342.8 280.6L424 311.7L505.2 280.6L426.8 250.9C425 250.2 422.1 250.2 421.2 250.9L342.8 280.6zM528 413.9V323.2L445.6 354.8V455.3L523.2 421.2C526.1 419.9 528 417.1 528 413.9V413.9z"]
326
+ };
317
327
  var faDatabase = {
318
328
  prefix: 'fas',
319
329
  iconName: 'database',
@@ -3029,12 +3039,22 @@ function useFirstRender() {
3029
3039
 
3030
3040
  const NODE_TYPE_TITLE_ICON = {
3031
3041
  http_service: faCloud,
3042
+ http_operation: faBullseye,
3043
+ model: faCube,
3044
+ };
3045
+ const NODE_TITLE_ICON = {
3046
+ Schemas: faCubes,
3032
3047
  };
3033
3048
  const NODE_TYPE_META_ICON = {
3034
3049
  model: faCube,
3035
3050
  };
3036
3051
  const NODE_TYPE_ICON_COLOR = {
3037
3052
  model: 'warning',
3053
+ http_service: '#D812EA',
3054
+ http_operation: '#9747FF',
3055
+ };
3056
+ const NODE_TITLE_ICON_COLOR = {
3057
+ Schemas: 'warning',
3038
3058
  };
3039
3059
  const NODE_META_COLOR = {
3040
3060
  get: 'success',
@@ -3101,7 +3121,7 @@ function isExternalLink(item) {
3101
3121
 
3102
3122
  const ActiveIdContext = React.createContext(undefined);
3103
3123
  const LinkContext = React.createContext(undefined);
3104
- const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, onLinkClick }) => {
3124
+ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefault, externalScrollbar = false, isInResponsiveMode = false, onLinkClick, }) => {
3105
3125
  const container = React.useRef(null);
3106
3126
  const child = React.useRef(null);
3107
3127
  const firstRender = useFirstRender();
@@ -3118,35 +3138,35 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
3118
3138
  }
3119
3139
  }, 0);
3120
3140
  }, [activeId]);
3121
- return (React.createElement(Box, { ref: container, w: "full", bg: "canvas-100", overflowY: "auto" },
3141
+ return (React.createElement(Box, { ref: container, w: "full", bg: isInResponsiveMode ? 'canvas' : 'canvas-100', overflowY: "auto" },
3122
3142
  React.createElement(Box, { ref: child, my: 3 },
3123
3143
  React.createElement(LinkContext.Provider, { value: Link },
3124
3144
  React.createElement(ActiveIdContext.Provider, { value: activeId }, tree.map((item, key) => {
3125
3145
  if (isDivider(item)) {
3126
- return React.createElement(Divider, { key: key, item: item });
3146
+ return React.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
3127
3147
  }
3128
- return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick }));
3148
+ return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
3129
3149
  }))))));
3130
3150
  });
3131
- const Divider = React.memo(({ item }) => {
3132
- return (React.createElement(Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: "sm", lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
3151
+ const Divider = React.memo(({ item, isInResponsiveMode = false }) => {
3152
+ return (React.createElement(Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
3133
3153
  });
3134
- const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, onLinkClick }) => {
3154
+ const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
3135
3155
  if (isExternalLink(item)) {
3136
3156
  return (React.createElement(Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
3137
- React.createElement(Item, { depth: depth, title: item.title, meta: React.createElement(Box, { as: Icon, icon: ['fas', 'external-link'] }) })));
3157
+ React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, depth: depth, title: item.title, meta: React.createElement(Box, { as: Icon, icon: ['fas', 'external-link'] }) })));
3138
3158
  }
3139
3159
  else if (isGroup(item) || isNodeGroup(item)) {
3140
- return React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick });
3160
+ return (React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
3141
3161
  }
3142
3162
  else if (isNode(item)) {
3143
- return (React.createElement(Node, { depth: depth, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
3163
+ return (React.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
3144
3164
  item.version && React.createElement(Version, { value: item.version }),
3145
- React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] })))) }));
3165
+ item.type !== 'model' && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] }))))) }));
3146
3166
  }
3147
3167
  return null;
3148
3168
  });
3149
- const Group = React.memo(({ depth, item, maxDepthOpenByDefault, onLinkClick = () => { } }) => {
3169
+ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => { } }) => {
3150
3170
  const activeId = React.useContext(ActiveIdContext);
3151
3171
  const [isOpen, setIsOpen] = React.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
3152
3172
  const hasActive = !!activeId && hasActiveItem(item.items, activeId);
@@ -3174,25 +3194,28 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, onLinkClick = ()
3174
3194
  const showAsActive = hasActive && !isOpen;
3175
3195
  let elem;
3176
3196
  if (isNodeGroup(item)) {
3177
- elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick }));
3197
+ elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
3178
3198
  }
3179
3199
  else {
3180
- elem = React.createElement(Item, { title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive });
3200
+ elem = (React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive, icon: NODE_TITLE_ICON[item.title] && (React.createElement(Box, { as: Icon, color: NODE_TITLE_ICON_COLOR[item.title], icon: NODE_TITLE_ICON[item.title] })) }));
3181
3201
  }
3182
3202
  return (React.createElement(React.Fragment, null,
3183
3203
  elem,
3184
3204
  isOpen &&
3185
3205
  item.items.map((groupItem, key) => {
3186
- return React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick });
3206
+ return (React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
3187
3207
  })));
3188
3208
  });
3189
- const Item = React.memo(({ depth, isActive, id, title, meta, icon, onClick }) => {
3190
- return (React.createElement(Flex, { id: id, bg: { default: isActive ? 'primary-tint' : 'canvas-100', hover: isActive ? undefined : 'canvas-200' }, cursor: "pointer", pl: 4 + depth * 4, pr: 4, h: "md", align: "center", userSelect: "none", onClick: onClick, title: title },
3209
+ const Item = React.memo(({ depth, isActive, id, title, meta, icon, isInResponsiveMode, onClick }) => {
3210
+ return (React.createElement(Flex, { id: id, bg: {
3211
+ default: isInResponsiveMode ? 'canvas' : isActive ? 'primary-tint' : 'canvas-100',
3212
+ hover: isActive ? undefined : 'canvas-200',
3213
+ }, cursor: "pointer", pl: 4 + depth * 4, pr: 4, h: isInResponsiveMode ? 'lg' : 'md', align: "center", userSelect: "none", onClick: onClick, title: title },
3191
3214
  icon,
3192
- React.createElement(Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate" }, title),
3193
- React.createElement(Flex, { alignItems: "center", fontSize: "xs" }, meta)));
3215
+ React.createElement(Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate", fontSize: isInResponsiveMode ? 'lg' : 'base' }, title),
3216
+ React.createElement(Flex, { alignItems: "center", fontSize: isInResponsiveMode ? 'base' : 'xs' }, meta)));
3194
3217
  });
3195
- const Node = React.memo(({ item, depth, meta, showAsActive, onClick, onLinkClick = () => { } }) => {
3218
+ const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => { } }) => {
3196
3219
  const activeId = React.useContext(ActiveIdContext);
3197
3220
  const isActive = activeId === item.slug || activeId === item.id;
3198
3221
  const LinkComponent = React.useContext(LinkContext);
@@ -3209,7 +3232,7 @@ const Node = React.memo(({ item, depth, meta, showAsActive, onClick, onLinkClick
3209
3232
  }
3210
3233
  };
3211
3234
  return (React.createElement(Box, { as: LinkComponent, to: item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
3212
- React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, onClick: handleClick })));
3235
+ React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
3213
3236
  });
3214
3237
  const Version = ({ value }) => {
3215
3238
  return (React.createElement(Box, { mr: 2 },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stoplight/elements-core",
3
- "version": "7.11.0",
3
+ "version": "7.12.0",
4
4
  "main": "./index.js",
5
5
  "sideEffects": [
6
6
  "web-components.min.js",