timvir 0.2.17 → 0.2.18

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 (15) hide show
  1. package/blocks/Arbitrary/index.js +7 -0
  2. package/blocks/Code/styles.css +2 -2
  3. package/blocks/Exhibit/Exhibit.d.ts +2 -4
  4. package/blocks/Exhibit/docs/index.mdx +5 -13
  5. package/blocks/Exhibit/index.js +8 -7
  6. package/blocks/Exhibit/styles.css +2 -2
  7. package/blocks/Grid/docs/index.mdx +4 -4
  8. package/blocks/Grid/styles.css +1 -1
  9. package/blocks/Message/docs/index.mdx +6 -6
  10. package/blocks/styles.css +5 -5
  11. package/core/components/Page/types.d.ts +2 -0
  12. package/core/index.js +9 -4
  13. package/core/styles.css +10 -9
  14. package/package.json +1 -1
  15. package/styles.css +15 -14
package/blocks/Arbitrary/index.js CHANGED
@@ -158,6 +158,13 @@ function Arbitrary(props, ref) {
158
158
  });
159
159
  }
160
160
  }, "Refresh")), /*#__PURE__*/React.createElement(Exhibit, {
161
+ bleed: 0,
162
+ BackdropProps: {
163
+ style: {
164
+ borderRadius: 2,
165
+ border: "1px solid var(--timvir-border-color)"
166
+ }
167
+ },
161
168
  ...ExhibitProps
162
169
  }, children)));
163
170
  }
package/blocks/Code/styles.css CHANGED
@@ -6,8 +6,8 @@
6
6
  .s1hdfi6o{position:absolute;z-index:-1;top:0;right:0;transition:all 0.2s;transform:translate(48px,-48px);}.s1hdfi6o path{fill:var(--c-p-4);}
7
7
  .d17pltln{padding:16px 24px 16px 0;}
8
8
 
9
- .r9v2r0l{margin:1.5rem 0 3rem;}:root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark) !important;font-style:var(--shiki-dark-font-style) !important;font-weight:var(--shiki-dark-font-weight) !important;text-decoration:var(--shiki-dark-text-decoration) !important;}
10
- .cs7tint{overflow-x:auto;contain:content;font-size:0.8em;border-radius:5px;--timvir-b-Code-bleed:calc(var(--timvir-page-margin,24px) * 0.6666);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),8px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));border:1px solid var(--timvir-border-color);}.cs7tint pre{margin:0;padding:16px 0;background-color:var(--timvir-secondary-background-color) !important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);}
9
+ :root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark) !important;font-style:var(--shiki-dark-font-style) !important;font-weight:var(--shiki-dark-font-weight) !important;text-decoration:var(--shiki-dark-text-decoration) !important;}
10
+ .cs7tint{overflow-x:auto;contain:content;font-size:0.8em;border-radius:5px;--timvir-b-Code-bleed:calc(var(--timvir-margin,0px) * 0.6666);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),8px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));border:1px solid var(--timvir-border-color);}.cs7tint pre{margin:0;padding:16px 0;background-color:var(--timvir-secondary-background-color) !important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);}
11
11
  .fjvaz2s{display:grid;border-radius:0;box-shadow:none;margin-inline:0;grid-auto-rows:min-content;grid-template-columns:[le] 0 [lc] 1fr [rc] 0 [re];grid-column-gap:16px;}.fjvaz2s:hover{box-shadow:none;}@media (min-width:60rem){.fjvaz2s{grid-template-columns:[le] 1fr [lc] minmax(0,48rem) [rc] 1fr [re];grid-column-gap:24px;}}.fjvaz2s > *{grid-column:lc / re;}
12
12
  .lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);}
13
13
  .h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] .h1xcko1i{background-color:rgba(174,124,20,0.15);}
package/blocks/Exhibit/Exhibit.d.ts CHANGED
@@ -2,18 +2,16 @@ import * as React from "react";
2
2
  /**
3
3
  * The underlying DOM element which is rendered by this component.
4
4
  */
5
- declare const Root = "figure";
5
+ declare const Root = "div";
6
6
  interface Props extends React.ComponentProps<typeof Root> {
7
7
  caption?: React.ReactNode;
8
8
  /**
9
9
  * How much the component should extend out of its original box. When number,
10
10
  * it's the number of pixels. When a string, must evaluate to a CSS <length>
11
11
  * (can be inline or reference to a CSS variable).
12
- *
13
- * @default 0
14
12
  */
15
13
  bleed?: string | number;
16
14
  BackdropProps?: React.ComponentPropsWithoutRef<"div">;
17
15
  }
18
- declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLElement>>;
16
+ declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
19
17
  export default _default;
package/blocks/Exhibit/docs/index.mdx CHANGED
@@ -15,7 +15,7 @@ Think of it as a `<figure>` + `<figcaption>` for React components.
15
15
 
16
16
  Add a title to the exhibit if it helps the reader to understand the exhibit better. The title is placed snuggly to the exhibit.
17
17
 
18
- <Exhibit bleed={8} title="This Is Not A Button" caption="It's an input element, of type text">
18
+ <Exhibit title="This Is Not A Button" caption="It's an input element, of type text">
19
19
  <input type="text" placeholder="Type something…" style={{ boxSizing: "border-box", width: "100%", padding: 8 }} />
20
20
  </Exhibit>
21
21
 
@@ -23,33 +23,25 @@ Add a title to the exhibit if it helps the reader to understand the exhibit bett
23
23
 
24
24
  Use the `bleed` prop to control how much the checkered background extends beyond the box of the element itself.
25
25
 
26
- #### bleed 0
27
-
28
- <Exhibit bleed={0}>
26
+ <Exhibit bleed={0} caption="Bleed 0">
29
27
  <div
30
28
  style={{ height: 40, padding: "0 16px", background: "teal", color: "white", display: "flex", alignItems: "center" }}
31
29
  />
32
30
  </Exhibit>
33
31
 
34
- #### bleed 4
35
-
36
- <Exhibit bleed={4}>
32
+ <Exhibit bleed={4} caption="Bleed 4">
37
33
  <div
38
34
  style={{ height: 40, padding: "0 16px", background: "teal", color: "white", display: "flex", alignItems: "center" }}
39
35
  />
40
36
  </Exhibit>
41
37
 
42
- #### bleed 12
43
-
44
- <Exhibit bleed={12}>
38
+ <Exhibit bleed={12} caption="Bleed 12">
45
39
  <div
46
40
  style={{ height: 40, padding: "0 16px", background: "teal", color: "white", display: "flex", alignItems: "center" }}
47
41
  />
48
42
  </Exhibit>
49
43
 
50
- #### bleed 24
51
-
52
- <Exhibit bleed={24}>
44
+ <Exhibit bleed={24} caption="Bleed 24">
53
45
  <div
54
46
  style={{ height: 40, padding: "0 16px", background: "teal", color: "white", display: "flex", alignItems: "center" }}
55
47
  />
package/blocks/Exhibit/index.js CHANGED
@@ -34,7 +34,7 @@ var cx_default = cx;
34
34
  /**
35
35
  * The underlying DOM element which is rendered by this component.
36
36
  */
37
- const Root = "figure";
37
+ const Root = "div";
38
38
  function Exhibit(props, ref) {
39
39
  const block = useBlock(props);
40
40
  const components = {
@@ -44,7 +44,7 @@ function Exhibit(props, ref) {
44
44
  const {
45
45
  title,
46
46
  caption,
47
- bleed = 0,
47
+ bleed,
48
48
  BackdropProps,
49
49
  children,
50
50
  className,
@@ -56,16 +56,17 @@ function Exhibit(props, ref) {
56
56
  className: cx_default(className, classes.root),
57
57
  style: {
58
58
  ...style,
59
- [cssVariables.bleed]: typeof bleed === "number" ? `${bleed}px` : bleed
59
+ [cssVariables.bleed]: typeof bleed === "number" ? `${bleed}px` : undefined
60
60
  },
61
61
  ...rest
62
62
  }, /*#__PURE__*/React.createElement("div", {
63
63
  className: classes.container,
64
+ ...BackdropProps,
64
65
  style: {
65
- border: bleed !== 0 ? `1px solid var(${cssVariables.borderColor})` : "none"
66
- },
67
- ...BackdropProps
68
- }, children), caption && /*#__PURE__*/React.createElement("figcaption", {
66
+ border: bleed === 0 ? "none" : `1px solid var(${cssVariables.borderColor})`,
67
+ ...BackdropProps?.style
68
+ }
69
+ }, children), caption && /*#__PURE__*/React.createElement("div", {
69
70
  className: classes.caption
70
71
  }, caption)));
71
72
  }
package/blocks/Exhibit/styles.css CHANGED
@@ -1,4 +1,4 @@
1
- .r1nql2f9{margin:0 0 1.5rem;--timvir-b-Exhibit-bleed:0px;--timvir-b-Exhibit-borderColor:var(--timvir-border-color);--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII=);}:root[data-timvir-theme="dark"] .r1nql2f9{--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
2
- .c4ji594{display:flow-root;background:var(--timvir-b-Exhibit-background);margin:0 calc(-1 * var(--timvir-b-Exhibit-bleed));padding:var(--timvir-b-Exhibit-bleed);}
1
+ .r1nql2f9{--timvir-b-Exhibit-bleed:calc(var(--timvir-margin,0px) * 0.6666);--timvir-b-Exhibit-borderColor:var(--timvir-border-color);--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAHElEQVR4AWP4/u07Mvr75y8yGlBpND6a6oGUBgAxMSSkDKa/pQAAAABJRU5ErkJggg==);}:root[data-timvir-theme="dark"] .r1nql2f9{--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
2
+ .c4ji594{display:flow-root;background:var(--timvir-b-Exhibit-background);margin:0 calc(-1 * var(--timvir-b-Exhibit-bleed));padding:var(--timvir-b-Exhibit-bleed);border-radius:5px;}
3
3
  .cf43jjx{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:2px;}
4
4
 
package/blocks/Grid/docs/index.mdx CHANGED
@@ -67,16 +67,16 @@ Combine `<Grid>` with the `<Image>` component.
67
67
  Combine `<Grid>` with the `<Exhibit>` component.
68
68
 
69
69
  <Grid>
70
- <Exhibit bleed={8}>
70
+ <Exhibit>
71
71
  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
72
72
  </Exhibit>
73
- <Exhibit bleed={8}>
73
+ <Exhibit>
74
74
  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
75
75
  </Exhibit>
76
- <Exhibit bleed={8}>
76
+ <Exhibit>
77
77
  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
78
78
  </Exhibit>
79
- <Exhibit bleed={8}>
79
+ <Exhibit>
80
80
  <div style={{ height: 100, background: "rgba(0,0,0,.2)", display: "flex", alignItems: "center", justifyContent: "center" }}>ITEM</div>
81
81
  </Exhibit>
82
82
  </Grid>
package/blocks/Grid/styles.css CHANGED
@@ -1,2 +1,2 @@
1
- .r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}
1
+ .r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--timvir-page-margin,24px);--timvir-margin:calc(var(--timvir-page-margin,24px) * 0.5);}
2
2
 
package/blocks/Message/docs/index.mdx CHANGED
@@ -5,7 +5,7 @@ import { Code } from "../../Code";
5
5
 
6
6
  # Message
7
7
 
8
- <Exhibit bleed="var(--timvir-page-margin)">
8
+ <Exhibit>
9
9
  <Sample variant="basic" />
10
10
  </Exhibit>
11
11
 
@@ -16,13 +16,13 @@ import { Code } from "../../Code";
16
16
  ## Variants
17
17
 
18
18
  <Grid>
19
- <Exhibit bleed={8} caption="info">
19
+ <Exhibit caption="info">
20
20
  <Sample variant="basic" props={{ variant: "info" }} />
21
21
  </Exhibit>
22
- <Exhibit bleed={8} caption="warning">
22
+ <Exhibit caption="warning">
23
23
  <Sample variant="basic" props={{ variant: "warning" }} />
24
24
  </Exhibit>
25
- <Exhibit bleed={8} caption="alert">
25
+ <Exhibit caption="alert">
26
26
  <Sample variant="basic" props={{ variant: "alert" }} />
27
27
  </Exhibit>
28
28
  </Grid>
@@ -32,7 +32,7 @@ import { Code } from "../../Code";
32
32
  Make the title bold and place it before the message, or use a level 3 heading. You can use arbitrary markdown inside the message.
33
33
 
34
34
  <Grid>
35
- <Exhibit bleed={8} caption="Inline title">
35
+ <Exhibit caption="Inline title">
36
36
  <Sample variant="basic">
37
37
 
38
38
 
@@ -42,7 +42,7 @@ Make the title bold and place it before the message, or use a level 3 heading. Y
42
42
  </Exhibit>
43
43
 
44
44
 
45
- <Exhibit bleed={8} caption="Title as a separate block elment">
45
+ <Exhibit caption="Title as a separate block elment">
46
46
  <Sample variant="basic">
47
47
 
48
48
 
package/blocks/styles.css CHANGED
@@ -13,8 +13,8 @@
13
13
  .s1hdfi6o{position:absolute;z-index:-1;top:0;right:0;transition:all 0.2s;transform:translate(48px,-48px);}.s1hdfi6o path{fill:var(--c-p-4);}
14
14
  .d17pltln{padding:16px 24px 16px 0;}
15
15
 
16
- .r9v2r0l{margin:1.5rem 0 3rem;}:root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark) !important;font-style:var(--shiki-dark-font-style) !important;font-weight:var(--shiki-dark-font-weight) !important;text-decoration:var(--shiki-dark-text-decoration) !important;}
17
- .cs7tint{overflow-x:auto;contain:content;font-size:0.8em;border-radius:5px;--timvir-b-Code-bleed:calc(var(--timvir-page-margin,24px) * 0.6666);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),8px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));border:1px solid var(--timvir-border-color);}.cs7tint pre{margin:0;padding:16px 0;background-color:var(--timvir-secondary-background-color) !important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);}
16
+ :root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark) !important;font-style:var(--shiki-dark-font-style) !important;font-weight:var(--shiki-dark-font-weight) !important;text-decoration:var(--shiki-dark-text-decoration) !important;}
17
+ .cs7tint{overflow-x:auto;contain:content;font-size:0.8em;border-radius:5px;--timvir-b-Code-bleed:calc(var(--timvir-margin,0px) * 0.6666);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),8px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));border:1px solid var(--timvir-border-color);}.cs7tint pre{margin:0;padding:16px 0;background-color:var(--timvir-secondary-background-color) !important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);}
18
18
  .fjvaz2s{display:grid;border-radius:0;box-shadow:none;margin-inline:0;grid-auto-rows:min-content;grid-template-columns:[le] 0 [lc] 1fr [rc] 0 [re];grid-column-gap:16px;}.fjvaz2s:hover{box-shadow:none;}@media (min-width:60rem){.fjvaz2s{grid-template-columns:[le] 1fr [lc] minmax(0,48rem) [rc] 1fr [re];grid-column-gap:24px;}}.fjvaz2s > *{grid-column:lc / re;}
19
19
  .lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);}
20
20
  .h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] .h1xcko1i{background-color:rgba(174,124,20,0.15);}
@@ -35,8 +35,8 @@
35
35
  .a1y0tcvx:hover::before,.a1y0tcvx::before{box-shadow:0 0 0 2px var(--c-p-5);opacity:1;}
36
36
 
37
37
 
38
- .r1nql2f9{margin:0 0 1.5rem;--timvir-b-Exhibit-bleed:0px;--timvir-b-Exhibit-borderColor:var(--timvir-border-color);--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII=);}:root[data-timvir-theme="dark"] .r1nql2f9{--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
39
- .c4ji594{display:flow-root;background:var(--timvir-b-Exhibit-background);margin:0 calc(-1 * var(--timvir-b-Exhibit-bleed));padding:var(--timvir-b-Exhibit-bleed);}
38
+ .r1nql2f9{--timvir-b-Exhibit-bleed:calc(var(--timvir-margin,0px) * 0.6666);--timvir-b-Exhibit-borderColor:var(--timvir-border-color);--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAHElEQVR4AWP4/u07Mvr75y8yGlBpND6a6oGUBgAxMSSkDKa/pQAAAABJRU5ErkJggg==);}:root[data-timvir-theme="dark"] .r1nql2f9{--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
39
+ .c4ji594{display:flow-root;background:var(--timvir-b-Exhibit-background);margin:0 calc(-1 * var(--timvir-b-Exhibit-bleed));padding:var(--timvir-b-Exhibit-bleed);border-radius:5px;}
40
40
  .cf43jjx{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:2px;}
41
41
 
42
42
  .mby32tn{display:flex;align-items:baseline;font-size:0.9rem;font-weight:bold;transition:all 0.2s;}
@@ -49,7 +49,7 @@
49
49
  .dw285p4{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
50
50
  .dx3nfmc{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
51
51
 
52
- .r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}
52
+ .r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--timvir-page-margin,24px);--timvir-margin:calc(var(--timvir-page-margin,24px) * 0.5);}
53
53
 
54
54
  .b1a0xzv7{background:white;place-self:stretch;border-radius:2px;transition:all 0.2s;box-shadow:0 0 0 0 rgba(0,0,0,0.1);}
55
55
  .g10obtzp{opacity:0;transition:all 0.2s;pointer-events:none;}
package/core/components/Page/types.d.ts CHANGED
@@ -1,4 +1,6 @@
1
+ import * as React from "react";
1
2
  export interface Node {
3
+ readonly icon?: React.ReactElement;
2
4
  readonly label: string;
3
5
  readonly path?: string;
4
6
  readonly children?: readonly Node[];
package/core/index.js CHANGED
@@ -656,7 +656,9 @@ function SidebarItem(props) {
656
656
  style: {
657
657
  marginLeft: depth * 16
658
658
  }
659
- }, /*#__PURE__*/React.createElement("span", {
659
+ }, props.icon ? /*#__PURE__*/React.cloneElement(props.icon, {
660
+ className: classes$2.icn
661
+ }) : null, /*#__PURE__*/React.createElement("span", {
660
662
  className: classes$2.label
661
663
  }, label), icon) : /*#__PURE__*/React.createElement("a", {
662
664
  style: {
@@ -664,14 +666,17 @@ function SidebarItem(props) {
664
666
  },
665
667
  href: "#",
666
668
  onClick: () => setActive(x => !x)
667
- }, /*#__PURE__*/React.createElement("span", {
669
+ }, props.icon ? /*#__PURE__*/React.cloneElement(props.icon, {
670
+ className: classes$2.icn
671
+ }) : null, /*#__PURE__*/React.createElement("span", {
668
672
  className: classes$2.label
669
673
  }, label), icon));
670
674
  }
671
675
  const classes$2 = {
672
676
  root: "r28qe6v",
673
- label: "l1ia823q",
674
- icon: "i13ixk6c"
677
+ icn: "i1ia823q",
678
+ label: "l13ixk6c",
679
+ icon: "i7wcd3g"
675
680
  };
676
681
 
677
682
  function Section(props) {
package/core/styles.css CHANGED
@@ -1,5 +1,5 @@
1
1
 
2
- .g1et32pl{display:grid;--timvir-page-margin:16px;grid-auto-rows:min-content;grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width:48rem){.g1et32pl{--timvir-page-margin:24px;grid-template-columns:[le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] var( --timvir-page-margin ) [re];}}@media (min-width:72rem){.g1et32pl{grid-template-columns:[le] 1fr var(--timvir-page-margin) [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] var( --timvir-page-margin ) 1fr [re];}}.g1et32pl > *:not(.nc2e9vn){grid-column:lc / rc;min-width:0;}
2
+ .g1et32pl{display:grid;--timvir-page-margin:16px;--timvir-margin:var(--timvir-page-margin);grid-auto-rows:min-content;grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width:48rem){.g1et32pl{--timvir-page-margin:24px;grid-template-columns:[le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] var( --timvir-page-margin ) [re];}}@media (min-width:72rem){.g1et32pl{grid-template-columns:[le] 1fr var(--timvir-page-margin) [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] var( --timvir-page-margin ) 1fr [re];}}.g1et32pl > *:not(.nc2e9vn){grid-column:lc / rc;min-width:0;}.g1et32pl > *{margin:0 0 2rem;}.g1et32pl > p + ul{margin-top:-1.25rem;}
3
3
  .en6sn9p{grid-column:lex / rex;}
4
4
  .f3c539b{grid-column:le / re;}
5
5
 
@@ -33,9 +33,9 @@
33
33
  .a12hs2f7{color:inherit;text-decoration:none;}.a12hs2f7:hover svg{opacity:1;transform:none;visibility:visible;--visibility-delay:0s;}
34
34
  .c31avqb{margin-left:6px;color:var(--timvir-secondary-text-color);height:0.9rem;width:0.9rem;vertical-align:middle;transition:opacity 0.2s,transform 0.2s,visibility 0s var(--visibility-delay,0.2s);opacity:0;visibility:hidden;transform:translateX(-50%);}
35
35
  .h6ceq1b{margin-top:3rem;margin-bottom:1rem;font-size:2rem;line-height:1.125;font-weight:590;text-indent:-0.05em;}
36
- .hj6166y{position:relative;margin-top:4.5rem;margin-bottom:0.5rem;font-size:1.5rem;line-height:1.1666;font-weight:590;}
37
- .h1f8mqks{position:relative;margin-top:3rem;margin-bottom:0.5rem;font-size:1.0625rem;line-height:1.4705882353;font-weight:590;}
38
- .h1hmga4{position:relative;margin-top:2rem;margin-bottom:0.5rem;font-size:0.9375rem;line-height:1.4375;font-weight:590;}
36
+ .hj6166y{position:relative;margin:2.5rem 0 1rem;font-size:1.5rem;line-height:1.1666;font-weight:590;}
37
+ .h1f8mqks{position:relative;margin:1rem 0 1rem;font-size:1.0625rem;line-height:1.4705882353;font-weight:590;}
38
+ .h1hmga4{position:relative;margin:1rem 0 1rem;font-size:0.9375rem;line-height:1.4375;font-weight:590;}
39
39
  .blrd6ep{margin-left:0;font-size:1.1rem;}.blrd6ep > *:first-child{margin-top:0;}.blrd6ep > *:last-child{margin-bottom:0;}
40
40
  .h172su6f{display:block;border:none;height:1px;width:100%;background:currentColor;opacity:0.25;}
41
41
  .t1a7p0gg{border-spacing:0;border-collapse:collapse;width:100%;overflow:auto;}
@@ -46,13 +46,14 @@
46
46
  .tvhsmuz{text-align:var(--tvhsmuz-0);padding:6px 13px;border:1px solid var(--c-p-2);}
47
47
  .c197eb99{border-radius:5px;padding:4px 6px 3px;font-size:0.8em;background:var(--timvir-secondary-background-color);border:1px solid var(--timvir-border-color);}
48
48
  .a1d7vdmn{color:currentColor;text-decoration:none;background-image:linear-gradient(transparent,transparent 5px,#383838 5px,#383838);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x;}.a1d7vdmn:hover{background-image:linear-gradient(transparent,transparent 3px,#2bbc8a 3px,#2bbc8a);}.a1d7vdmn:hover .c197eb99{box-shadow:inset 0 0 0 1px rgba(16,22,26,0.5),inset 0 1px 4px rgba(16,22,26,0.2);}.a1d7vdmn:active .c197eb99{box-shadow:inset 0 0 0 1px rgba(16,22,26,0.7),inset 0 1px 4px rgba(16,22,26,0.4);background:var(--c-p-2);}
49
- .pgfnift{margin:0 0 1rem;}
50
- .u3pt2dg{margin:0 0 1rem;}
51
- .ojr9iky{margin:0 0 1rem;}
49
+
50
+
51
+
52
52
 
53
53
  .r28qe6v{display:flex;align-items:center;margin:1px 0;}.r28qe6v > a{min-width:0;transition:background 0.16s;border-radius:4px;display:flex;align-items:center;color:var(--timvir-text-color);font-size:0.8125rem;line-height:2.2;font-weight:500;background:none;text-decoration:none;width:100%;padding:0 8px;opacity:0.7;}.r28qe6v:hover a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}.r28qe6v[data-active="true"] a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}
54
- .l1ia823q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto;}
55
- .i13ixk6c{margin-left:4px;transition:transform 0.12s cubic-bezier(0.455,0.03,0.515,0.955);transform-origin:center center;}
54
+ .i1ia823q{display:block;width:1.3em;height:1.3em;margin-right:8px;min-width:fit-content;}
55
+ .l13ixk6c{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto;}
56
+ .i7wcd3g{margin-left:4px;transition:transform 0.12s cubic-bezier(0.455,0.03,0.515,0.955);transform-origin:center center;}
56
57
 
57
58
 
58
59
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "type": "module",
3
3
  "name": "timvir",
4
- "version": "0.2.17",
4
+ "version": "0.2.18",
5
5
  "license": "MIT",
6
6
  "sideEffects": false,
7
7
  "exports": {
package/styles.css CHANGED
@@ -13,8 +13,8 @@
13
13
  .s1hdfi6o{position:absolute;z-index:-1;top:0;right:0;transition:all 0.2s;transform:translate(48px,-48px);}.s1hdfi6o path{fill:var(--c-p-4);}
14
14
  .d17pltln{padding:16px 24px 16px 0;}
15
15
 
16
- .r9v2r0l{margin:1.5rem 0 3rem;}:root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark) !important;font-style:var(--shiki-dark-font-style) !important;font-weight:var(--shiki-dark-font-weight) !important;text-decoration:var(--shiki-dark-text-decoration) !important;}
17
- .cs7tint{overflow-x:auto;contain:content;font-size:0.8em;border-radius:5px;--timvir-b-Code-bleed:calc(var(--timvir-page-margin,24px) * 0.6666);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),8px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));border:1px solid var(--timvir-border-color);}.cs7tint pre{margin:0;padding:16px 0;background-color:var(--timvir-secondary-background-color) !important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);}
16
+ :root[data-timvir-theme="dark"] .r9v2r0l .shiki,:root[data-timvir-theme="dark"] .r9v2r0l .shiki span{color:var(--shiki-dark) !important;font-style:var(--shiki-dark-font-style) !important;font-weight:var(--shiki-dark-font-weight) !important;text-decoration:var(--shiki-dark-text-decoration) !important;}
17
+ .cs7tint{overflow-x:auto;contain:content;font-size:0.8em;border-radius:5px;--timvir-b-Code-bleed:calc(var(--timvir-margin,0px) * 0.6666);--timvir-b-Code-inlinePadding:max(var(--timvir-b-Code-bleed),8px);padding:0;margin:0 calc(-1 * var(--timvir-b-Code-bleed));border:1px solid var(--timvir-border-color);}.cs7tint pre{margin:0;padding:16px 0;background-color:var(--timvir-secondary-background-color) !important;}.cs7tint pre code{display:block;}.cs7tint pre code .line{display:inline-block;position:relative;width:100%;}.cs7tint pre .line{padding-inline:var(--timvir-b-Code-inlinePadding);}
18
18
  .fjvaz2s{display:grid;border-radius:0;box-shadow:none;margin-inline:0;grid-auto-rows:min-content;grid-template-columns:[le] 0 [lc] 1fr [rc] 0 [re];grid-column-gap:16px;}.fjvaz2s:hover{box-shadow:none;}@media (min-width:60rem){.fjvaz2s{grid-template-columns:[le] 1fr [lc] minmax(0,48rem) [rc] 1fr [re];grid-column-gap:24px;}}.fjvaz2s > *{grid-column:lc / re;}
19
19
  .lchll0h{padding-inline:var(--timvir-b-Code-inlinePadding);}
20
20
  .h1xcko1i{background-color:#ffe10044;}:root[data-timvir-theme="dark"] .h1xcko1i{background-color:rgba(174,124,20,0.15);}
@@ -35,8 +35,8 @@
35
35
  .a1y0tcvx:hover::before,.a1y0tcvx::before{box-shadow:0 0 0 2px var(--c-p-5);opacity:1;}
36
36
 
37
37
 
38
- .r1nql2f9{margin:0 0 1.5rem;--timvir-b-Exhibit-bleed:0px;--timvir-b-Exhibit-borderColor:var(--timvir-border-color);--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAF0lEQVQI12P4BAI/QICBFCaYBPNJYQIAkUZftTbC4sIAAAAASUVORK5CYII=);}:root[data-timvir-theme="dark"] .r1nql2f9{--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
39
- .c4ji594{display:flow-root;background:var(--timvir-b-Exhibit-background);margin:0 calc(-1 * var(--timvir-b-Exhibit-bleed));padding:var(--timvir-b-Exhibit-bleed);}
38
+ .r1nql2f9{--timvir-b-Exhibit-bleed:calc(var(--timvir-margin,0px) * 0.6666);--timvir-b-Exhibit-borderColor:var(--timvir-border-color);--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAHElEQVR4AWP4/u07Mvr75y8yGlBpND6a6oGUBgAxMSSkDKa/pQAAAABJRU5ErkJggg==);}:root[data-timvir-theme="dark"] .r1nql2f9{--timvir-b-Exhibit-background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAAAAACoWZBhAAAAFklEQVQI12NQBQF2EGAghQkmwXxSmADZJQiZ2ZZ46gAAAABJRU5ErkJggg==);}
39
+ .c4ji594{display:flow-root;background:var(--timvir-b-Exhibit-background);margin:0 calc(-1 * var(--timvir-b-Exhibit-bleed));padding:var(--timvir-b-Exhibit-bleed);border-radius:5px;}
40
40
  .cf43jjx{font-size:0.8125rem;line-height:1.1875;color:var(--timvir-secondary-text-color);margin-top:2px;}
41
41
 
42
42
  .mby32tn{display:flex;align-items:baseline;font-size:0.9rem;font-weight:bold;transition:all 0.2s;}
@@ -49,7 +49,7 @@
49
49
  .dw285p4{overflow:hidden;transition:height 0.2s,opacity 0.2s 0.1s;}
50
50
  .dx3nfmc{outline:none;user-select:text;white-space:pre-wrap;overflow-wrap:break-word;}
51
51
 
52
- .r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;}
52
+ .r1c1ozpm{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--timvir-page-margin,24px);--timvir-margin:calc(var(--timvir-page-margin,24px) * 0.5);}
53
53
 
54
54
  .b1a0xzv7{background:white;place-self:stretch;border-radius:2px;transition:all 0.2s;box-shadow:0 0 0 0 rgba(0,0,0,0.1);}
55
55
  .g10obtzp{opacity:0;transition:all 0.2s;pointer-events:none;}
@@ -100,7 +100,7 @@
100
100
 
101
101
 
102
102
 
103
- .g1et32pl{display:grid;--timvir-page-margin:16px;grid-auto-rows:min-content;grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width:48rem){.g1et32pl{--timvir-page-margin:24px;grid-template-columns:[le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] var( --timvir-page-margin ) [re];}}@media (min-width:72rem){.g1et32pl{grid-template-columns:[le] 1fr var(--timvir-page-margin) [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] var( --timvir-page-margin ) 1fr [re];}}.g1et32pl > *:not(.nc2e9vn){grid-column:lc / rc;min-width:0;}
103
+ .g1et32pl{display:grid;--timvir-page-margin:16px;--timvir-margin:var(--timvir-page-margin);grid-auto-rows:min-content;grid-template-columns:[le] var(--timvir-page-margin) [lex lc] 1fr [rc rex] var(--timvir-page-margin) [re];}@media (min-width:48rem){.g1et32pl{--timvir-page-margin:24px;grid-template-columns:[le] var(--timvir-page-margin) [lex] 1fr [lc] minmax(0,48rem) [rc] 1fr [rex] var( --timvir-page-margin ) [re];}}@media (min-width:72rem){.g1et32pl{grid-template-columns:[le] 1fr var(--timvir-page-margin) [lex] minmax(0,12rem) [lc] 48rem [rc] minmax(0,12rem) [rex] var( --timvir-page-margin ) 1fr [re];}}.g1et32pl > *:not(.nc2e9vn){grid-column:lc / rc;min-width:0;}.g1et32pl > *{margin:0 0 2rem;}.g1et32pl > p + ul{margin-top:-1.25rem;}
104
104
  .en6sn9p{grid-column:lex / rex;}
105
105
  .f3c539b{grid-column:le / re;}
106
106
 
@@ -134,9 +134,9 @@
134
134
  .a12hs2f7{color:inherit;text-decoration:none;}.a12hs2f7:hover svg{opacity:1;transform:none;visibility:visible;--visibility-delay:0s;}
135
135
  .c31avqb{margin-left:6px;color:var(--timvir-secondary-text-color);height:0.9rem;width:0.9rem;vertical-align:middle;transition:opacity 0.2s,transform 0.2s,visibility 0s var(--visibility-delay,0.2s);opacity:0;visibility:hidden;transform:translateX(-50%);}
136
136
  .h6ceq1b{margin-top:3rem;margin-bottom:1rem;font-size:2rem;line-height:1.125;font-weight:590;text-indent:-0.05em;}
137
- .hj6166y{position:relative;margin-top:4.5rem;margin-bottom:0.5rem;font-size:1.5rem;line-height:1.1666;font-weight:590;}
138
- .h1f8mqks{position:relative;margin-top:3rem;margin-bottom:0.5rem;font-size:1.0625rem;line-height:1.4705882353;font-weight:590;}
139
- .h1hmga4{position:relative;margin-top:2rem;margin-bottom:0.5rem;font-size:0.9375rem;line-height:1.4375;font-weight:590;}
137
+ .hj6166y{position:relative;margin:2.5rem 0 1rem;font-size:1.5rem;line-height:1.1666;font-weight:590;}
138
+ .h1f8mqks{position:relative;margin:1rem 0 1rem;font-size:1.0625rem;line-height:1.4705882353;font-weight:590;}
139
+ .h1hmga4{position:relative;margin:1rem 0 1rem;font-size:0.9375rem;line-height:1.4375;font-weight:590;}
140
140
  .blrd6ep{margin-left:0;font-size:1.1rem;}.blrd6ep > *:first-child{margin-top:0;}.blrd6ep > *:last-child{margin-bottom:0;}
141
141
  .h172su6f{display:block;border:none;height:1px;width:100%;background:currentColor;opacity:0.25;}
142
142
  .t1a7p0gg{border-spacing:0;border-collapse:collapse;width:100%;overflow:auto;}
@@ -147,13 +147,14 @@
147
147
  .tvhsmuz{text-align:var(--tvhsmuz-0);padding:6px 13px;border:1px solid var(--c-p-2);}
148
148
  .c197eb99{border-radius:5px;padding:4px 6px 3px;font-size:0.8em;background:var(--timvir-secondary-background-color);border:1px solid var(--timvir-border-color);}
149
149
  .a1d7vdmn{color:currentColor;text-decoration:none;background-image:linear-gradient(transparent,transparent 5px,#383838 5px,#383838);background-position:bottom;background-size:100% 6px;background-repeat:repeat-x;}.a1d7vdmn:hover{background-image:linear-gradient(transparent,transparent 3px,#2bbc8a 3px,#2bbc8a);}.a1d7vdmn:hover .c197eb99{box-shadow:inset 0 0 0 1px rgba(16,22,26,0.5),inset 0 1px 4px rgba(16,22,26,0.2);}.a1d7vdmn:active .c197eb99{box-shadow:inset 0 0 0 1px rgba(16,22,26,0.7),inset 0 1px 4px rgba(16,22,26,0.4);background:var(--c-p-2);}
150
- .pgfnift{margin:0 0 1rem;}
151
- .u3pt2dg{margin:0 0 1rem;}
152
- .ojr9iky{margin:0 0 1rem;}
150
+
151
+
152
+
153
153
 
154
154
  .r28qe6v{display:flex;align-items:center;margin:1px 0;}.r28qe6v > a{min-width:0;transition:background 0.16s;border-radius:4px;display:flex;align-items:center;color:var(--timvir-text-color);font-size:0.8125rem;line-height:2.2;font-weight:500;background:none;text-decoration:none;width:100%;padding:0 8px;opacity:0.7;}.r28qe6v:hover a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}.r28qe6v[data-active="true"] a{background-color:var(--timvir-sidebar-highlight-color);opacity:1;}
155
- .l1ia823q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto;}
156
- .i13ixk6c{margin-left:4px;transition:transform 0.12s cubic-bezier(0.455,0.03,0.515,0.955);transform-origin:center center;}
155
+ .i1ia823q{display:block;width:1.3em;height:1.3em;margin-right:8px;min-width:fit-content;}
156
+ .l13ixk6c{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-right:auto;}
157
+ .i7wcd3g{margin-left:4px;transition:transform 0.12s cubic-bezier(0.455,0.03,0.515,0.955);transform-origin:center center;}
157
158
 
158
159
 
159
160