timvir 0.2.39 → 0.2.43

package/blocks/Message/docs/index.mdx

@@ -16,13 +16,13 @@ import { Code } from "../../Code";
 ## Variants
 
 <Grid>
-  <Exhibit caption="info">
+  <Exhibit caption="info" style={{ margin: 0, gridColumn: "initial" }}>
     <Sample variant="basic" props={{ variant: "info" }} />
   </Exhibit>
-  <Exhibit caption="warning">
+  <Exhibit caption="warning" style={{ margin: 0, gridColumn: "initial" }}>
     <Sample variant="basic" props={{ variant: "warning" }} />
   </Exhibit>
-  <Exhibit caption="alert">
+  <Exhibit caption="alert" style={{ margin: 0, gridColumn: "initial" }}>
     <Sample variant="basic" props={{ variant: "alert" }} />
   </Exhibit>
 </Grid>
@@ -32,20 +32,17 @@ import { Code } from "../../Code";
 Make the title bold and place it before the message, or use a level 3 heading. You can use arbitrary markdown inside the message.
 
 <Grid>
-<Exhibit caption="Inline title">
+<Exhibit caption="Inline title" style={{ margin: 0, gridColumn: "initial" }}>
   <Sample variant="basic">
 
-
 **Short Messages** should place the title in front of the message and make it stand out.
 
   </Sample>
 </Exhibit>
 
-
-<Exhibit caption="Title as a separate block elment">
+<Exhibit caption="Title as a separate block elment" style={{ margin: 0, gridColumn: "initial" }}>
   <Sample variant="basic">
 
-
 ### Longer Messages
 
 Longer messages should make the title a separate block element. This body uses [links](#) and _italic_ text.

package/blocks/Message/index.js

@@ -2,75 +2,261 @@ import * as React from 'react';
 import * as Icons from 'react-feather';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/css.ts
-
-// src/cx.ts
-var cx = function cx2() {
-  const presentClassNames = Array.prototype.slice.call(arguments).filter(Boolean);
-  const atomicClasses = {};
-  const nonAtomicClasses = [];
-  presentClassNames.forEach((arg) => {
-    const individualClassNames = arg ? arg.split(" ") : [];
-    individualClassNames.forEach((className) => {
-      if (className.startsWith("atm_")) {
-        const [, keyHash] = className.split("_");
-        atomicClasses[keyHash] = className;
-      } else {
-        nonAtomicClasses.push(className);
-      }
+var styleq = {};
+var hasRequiredStyleq;
+function requireStyleq() {
+    if (hasRequiredStyleq) return styleq;
+    hasRequiredStyleq = 1;
+    Object.defineProperty(styleq, "__esModule", {
+        value: true
     });
-  });
-  const result = [];
-  for (const keyHash in atomicClasses) {
-    if (Object.prototype.hasOwnProperty.call(atomicClasses, keyHash)) {
-      result.push(atomicClasses[keyHash]);
+    styleq.styleq = void 0;
+    var cache = new WeakMap();
+    var compiledKey = '$$css';
+    function createStyleq(options) {
+        var disableCache;
+        var disableMix;
+        var transform;
+        if (options != null) {
+            disableCache = options.disableCache === true;
+            disableMix = options.disableMix === true;
+            transform = options.transform;
+        }
+        return function styleq() {
+            var definedProperties = [];
+            var className = '';
+            var inlineStyle = null;
+            var debugString = '';
+            var nextCache = disableCache ? null : cache;
+            var styles = new Array(arguments.length);
+            for(var i = 0; i < arguments.length; i++){
+                styles[i] = arguments[i];
+            }
+            while(styles.length > 0){
+                var possibleStyle = styles.pop();
+                if (possibleStyle == null || possibleStyle === false) {
+                    continue;
+                }
+                if (Array.isArray(possibleStyle)) {
+                    for(var _i = 0; _i < possibleStyle.length; _i++){
+                        styles.push(possibleStyle[_i]);
+                    }
+                    continue;
+                }
+                var style = transform != null ? transform(possibleStyle) : possibleStyle;
+                if (style.$$css != null) {
+                    var classNameChunk = '';
+                    if (nextCache != null && nextCache.has(style)) {
+                        var cacheEntry = nextCache.get(style);
+                        if (cacheEntry != null) {
+                            classNameChunk = cacheEntry[0];
+                            debugString = cacheEntry[2];
+                            definedProperties.push.apply(definedProperties, cacheEntry[1]);
+                            nextCache = cacheEntry[3];
+                        }
+                    } else {
+                        var definedPropertiesChunk = [];
+                        for(var prop in style){
+                            var value = style[prop];
+                            if (prop === compiledKey) {
+                                var compiledKeyValue = style[prop];
+                                if (compiledKeyValue !== true) {
+                                    debugString = debugString ? compiledKeyValue + '; ' + debugString : compiledKeyValue;
+                                }
+                                continue;
+                            }
+                            if (typeof value === 'string' || value === null) {
+                                if (!definedProperties.includes(prop)) {
+                                    definedProperties.push(prop);
+                                    if (nextCache != null) {
+                                        definedPropertiesChunk.push(prop);
+                                    }
+                                    if (typeof value === 'string') {
+                                        classNameChunk += classNameChunk ? ' ' + value : value;
+                                    }
+                                }
+                            } else {
+                                console.error("styleq: ".concat(prop, " typeof ").concat(String(value), " is not \"string\" or \"null\"."));
+                            }
+                        }
+                        if (nextCache != null) {
+                            var weakMap = new WeakMap();
+                            nextCache.set(style, [
+                                classNameChunk,
+                                definedPropertiesChunk,
+                                debugString,
+                                weakMap
+                            ]);
+                            nextCache = weakMap;
+                        }
+                    }
+                    if (classNameChunk) {
+                        className = className ? classNameChunk + ' ' + className : classNameChunk;
+                    }
+                } else {
+                    if (disableMix) {
+                        if (inlineStyle == null) {
+                            inlineStyle = {};
+                        }
+                        inlineStyle = Object.assign({}, style, inlineStyle);
+                    } else {
+                        var subStyle = null;
+                        for(var _prop in style){
+                            var _value = style[_prop];
+                            if (_value !== undefined) {
+                                if (!definedProperties.includes(_prop)) {
+                                    if (_value != null) {
+                                        if (inlineStyle == null) {
+                                            inlineStyle = {};
+                                        }
+                                        if (subStyle == null) {
+                                            subStyle = {};
+                                        }
+                                        subStyle[_prop] = _value;
+                                    }
+                                    definedProperties.push(_prop);
+                                    nextCache = null;
+                                }
+                            }
+                        }
+                        if (subStyle != null) {
+                            inlineStyle = Object.assign(subStyle, inlineStyle);
+                        }
+                    }
+                }
+            }
+            var styleProps = [
+                className,
+                inlineStyle,
+                debugString
+            ];
+            return styleProps;
+        };
     }
-  }
-  result.push(...nonAtomicClasses);
-  return result.join(" ");
-};
-var cx_default = cx;
+    var styleq$1 = styleq.styleq = createStyleq();
+    styleq$1.factory = createStyleq;
+    return styleq;
+}
+var styleqExports = requireStyleq();
+function props(...styles) {
+    const [className, style, dataStyleSrc] = styleqExports.styleq(styles);
+    const result = {};
+    if (className != null && className !== '') {
+        result.className = className;
+    }
+    if (style != null && Object.keys(style).length > 0) {
+        result.style = style;
+    }
+    if (dataStyleSrc != null && dataStyleSrc !== '') {
+        result['data-style-src'] = dataStyleSrc;
+    }
+    return result;
+}
+
+const layoutStyles = {
+  block: {
+    kBCFzs: "timvir-s-htle6",
+    k7Eaqz: "timvir-s-euugli",
+    kogj98: "timvir-s-1t4wa6b",
+    $$css: true
+  }};
 
-/**
- * The underlying DOM element which is rendered by this component.
- */
 const Root = "div";
-function Message(props, ref) {
+function Message(props$1, ref) {
   const {
     variant,
-    className,
     children,
     ...rest
-  } = props;
+  } = props$1;
   return /*#__PURE__*/jsxs(Root, {
     ref: ref,
-    className: cx_default(className, "r1ssql2z", variant !== undefined && variantStyles[variant]),
+    ...props(layoutStyles.block, styles.root, variant && styles[variant]),
     ...rest,
-    children: [variant && /*#__PURE__*/jsx("div", {
-      className: icon,
-      children: {
-        info: /*#__PURE__*/jsx(Icons.ChevronsRight, {
-          size: "1.5em"
-        }),
-        warning: /*#__PURE__*/jsx(Icons.AlertCircle, {
-          size: "1.5em"
-        }),
-        alert: /*#__PURE__*/jsx(Icons.XOctagon, {
-          size: "1.5em"
-        })
-      }[variant]
-    }), /*#__PURE__*/jsx("div", {
-      className: "dhvu07f",
-      children: children
+    children: [variant && {
+      info: /*#__PURE__*/jsx(Icons.ChevronsRight, {
+        className: "timvir-s-3psx0u timvir-s-1lliihq timvir-s-1n2onr6 timvir-s-xk6nc9 timvir-s-jvto2c timvir-s-dpf0h8 timvir-s-ozkzq6 timvir-s-1h1xus1"
+      }),
+      warning: /*#__PURE__*/jsx(Icons.AlertCircle, {
+        className: "timvir-s-3psx0u timvir-s-1lliihq timvir-s-1n2onr6 timvir-s-xk6nc9 timvir-s-jvto2c timvir-s-dpf0h8 timvir-s-ozkzq6 timvir-s-4u77bm"
+      }),
+      alert: /*#__PURE__*/jsx(Icons.XOctagon, {
+        className: "timvir-s-3psx0u timvir-s-1lliihq timvir-s-1n2onr6 timvir-s-xk6nc9 timvir-s-jvto2c timvir-s-dpf0h8 timvir-s-ozkzq6 timvir-s-1mz1spe"
+      })
+    }[variant], /*#__PURE__*/jsx("div", {
+      children: React.Children.toArray(children).map((child, index, array) => {
+        if (/*#__PURE__*/React.isValidElement(child)) {
+          const style = {
+            marginTop: index === 0 ? "0" : undefined,
+            marginBottom: index === array.length - 1 ? "0" : undefined
+          };
+          if (Object.keys(style).length > 0) {
+            const props = child.props;
+            return /*#__PURE__*/React.cloneElement(child, {
+              style: {
+                ...props?.style,
+                ...style
+              }
+            });
+          }
+          return child;
+        }
+        return child;
+      })
     })]
   });
 }
 var Message$1 = /*#__PURE__*/React.forwardRef(Message);
-const icon = "i1dz18jz";
-const variantStyles = {
-  info: "i41wipx",
-  warning: "wi7iy6",
-  alert: "a1d5oxsn"
+const styles = {
+  root: {
+    kVAEAm: "timvir-s-1n2onr6",
+    kWkggS: "timvir-s-m75j3u",
+    kMwMTN: "timvir-s-1mqxbix",
+    kaIpWk: "timvir-s-18zih8k",
+    kmVPX3: "timvir-s-qb5aye",
+    kGVxlE: "timvir-s-1w911z",
+    k1xSpc: "timvir-s-78zum5",
+    kGNEyG: "timvir-s-1cy8zhl",
+    kGuDYH: "timvir-s-kpwil5",
+    kLWn49: "timvir-s-1evy7pa",
+    $$css: true
+  },
+  icon: {
+    kUk6DE: "timvir-s-3psx0u",
+    k1xSpc: "timvir-s-1lliihq",
+    kVAEAm: "timvir-s-1n2onr6",
+    k87sOh: "timvir-s-xk6nc9",
+    kogj98: "timvir-s-jvto2c",
+    kzqmXN: "timvir-s-dpf0h8",
+    kZKoxP: "timvir-s-ozkzq6",
+    $$css: true
+  },
+  info: {
+    kWkggS: "timvir-s-1a1mm2c",
+    kMwMTN: "timvir-s-1mqxbix",
+    $$css: true
+  },
+  warning: {
+    kWkggS: "timvir-s-1nd4xj2",
+    kMwMTN: "timvir-s-1mqxbix",
+    $$css: true
+  },
+  alert: {
+    kWkggS: "timvir-s-18vcsbs",
+    kMwMTN: "timvir-s-1mqxbix",
+    $$css: true
+  },
+  iconInfo: {
+    kMwMTN: "timvir-s-1h1xus1",
+    $$css: true
+  },
+  iconWarning: {
+    kMwMTN: "timvir-s-4u77bm",
+    $$css: true
+  },
+  iconAlert: {
+    kMwMTN: "timvir-s-1mz1spe",
+    $$css: true
+  }
 };
 
 export { Message$1 as Message };

package/blocks/Message/styles.css

@@ -1,7 +1,155 @@
-.r1ssql2z{position:relative;background:var(--c-p-0);color:black;border-radius:3px;padding:16px 24px 16px 24px;box-shadow:inset 0 0 0 1px rgba(16, 22, 26, 0.2);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;font-size:0.875rem;line-height:1.5;}
-.dhvu07f>*:first-child{margin-top:0;}.dhvu07f>*:last-child{margin-bottom:0;}.dhvu07f>h3:before{display:none;}
-.i1dz18jz{position:relative;top:3px;margin:-2px 12px 0 -4px;}.i1dz18jz>svg{display:block;}
-.i41wipx{background:#f0f2fc;color:black;}.i41wipx .i1dz18jz{color:#2a47d5;}
-.wi7iy6{background:#fcf9f0;color:black;}.wi7iy6 .i1dz18jz{color:#a68521;}
-.a1d5oxsn{background:#fcf0f0;color:black;}.a1d5oxsn .i1dz18jz{color:#da4444;}
+@layer priority1 {
+  .timvir-s-1f9b50e {
+    --timvir-margin: var(--timvir-page-margin);
+  }
 
+  .timvir-s-1hz7z82 {
+    --timvir-page-margin: 16px;
+  }
+
+  @media (width >= 48rem) {
+    .timvir-s-1i3za4p.timvir-s-1i3za4p {
+      --timvir-page-margin: 24px;
+    }
+  }
+}
+
+@layer priority2 {
+  .timvir-s-jvto2c {
+    margin: -2px 12px 0 -4px;
+  }
+
+  .timvir-s-1t4wa6b {
+    margin: 0 0 2rem;
+  }
+
+  .timvir-s-qb5aye {
+    padding: 16px 24px;
+  }
+}
+
+@layer priority3 {
+  .timvir-s-18zih8k {
+    border-radius: 3px;
+  }
+
+  .timvir-s-3psx0u {
+    flex: none;
+  }
+
+  .timvir-s-htle6 {
+    grid-column: lc / rc;
+  }
+
+  .timvir-s-1ywaqmw {
+    grid-column: le / re;
+  }
+
+  .timvir-s-bldiei {
+    grid-column: lex / rex;
+  }
+}
+
+@layer priority4 {
+  .timvir-s-1cy8zhl {
+    align-items: flex-start;
+  }
+
+  .timvir-s-1a1mm2c {
+    background-color: #f0f2fc;
+  }
+
+  .timvir-s-18vcsbs {
+    background-color: #fcf0f0;
+  }
+
+  .timvir-s-1nd4xj2 {
+    background-color: #fcf9f0;
+  }
+
+  .timvir-s-m75j3u {
+    background-color: var(--c-p-0);
+  }
+
+  .timvir-s-1w911z {
+    box-shadow: inset 0 0 0 1px #10161a33;
+  }
+
+  .timvir-s-1h1xus1 {
+    color: #2a47d5;
+  }
+
+  .timvir-s-4u77bm {
+    color: #a68521;
+  }
+
+  .timvir-s-1mz1spe {
+    color: #da4444;
+  }
+
+  .timvir-s-1mqxbix {
+    color: #000;
+  }
+
+  .timvir-s-1lliihq {
+    display: block;
+  }
+
+  .timvir-s-78zum5 {
+    display: flex;
+  }
+
+  .timvir-s-rvj5dj {
+    display: grid;
+  }
+
+  .timvir-s-kpwil5 {
+    font-size: .875rem;
+  }
+
+  .timvir-s-3xbxsf {
+    grid-auto-rows: min-content;
+  }
+
+  .timvir-s-12c0rpe {
+    grid-template-columns: [le] var(--timvir-page-margin) [lex lc] 1fr[rc rex] var(--timvir-page-margin) [re];
+  }
+
+  .timvir-s-1evy7pa {
+    line-height: 1.5;
+  }
+
+  .timvir-s-1n2onr6 {
+    position: relative;
+  }
+
+  @media (width >= 72rem) {
+    .timvir-s-1mxrek7.timvir-s-1mxrek7 {
+      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];
+    }
+  }
+
+  @media (width >= 48rem) {
+    .timvir-s-9q0i6z.timvir-s-9q0i6z {
+      grid-template-columns: [le] var(--timvir-page-margin) [lex] 1fr[lc] minmax(0, 48rem) [rc] 1fr[rex] var(--timvir-page-margin) [re];
+    }
+  }
+}
+
+@layer priority5 {
+  .timvir-s-ozkzq6 {
+    height: 1.5em;
+  }
+
+  .timvir-s-euugli {
+    min-width: 0;
+  }
+
+  .timvir-s-xk6nc9 {
+    top: 3px;
+  }
+
+  .timvir-s-dpf0h8 {
+    width: 1.5em;
+  }
+}

package/blocks/Swatch/docs/index.mdx

@@ -5,35 +5,35 @@ import { Grid } from "../../Grid";
 # Swatch
 
 <Exhibit caption="Plain color" style={{ marginBottom: 24 }}>
-  <Swatch value="#FF00FF" />
+  <Swatch value="#FF00FF" style={{ margin: 0 }} />
 </Exhibit>
 
 <Exhibit caption="Give the color a meaningful name" style={{ marginBottom: 24 }}>
-  <Swatch value="#FF00FF" name="Primary" />
+  <Swatch value="#FF00FF" name="Primary" style={{ margin: 0 }} />
 </Exhibit>
 
 <Exhibit caption="Add a note about its ancenstry (how or where from it was derived)" style={{ marginBottom: 24 }}>
-  <Swatch value="#FF00FF" name="Primary" ancestry="Red 700" />
+  <Swatch value="#FF00FF" name="Primary" ancestry="Red 700" style={{ margin: 0 }} />
 </Exhibit>
 
 ## In a Grid
 
 <Grid style={{ gridGap: 6 }}>
-  <Swatch value="#0E5A8A" contrastValue="#FFFFFF" name="@blue1" />
-  <Swatch value="#106BA3" contrastValue="#FFFFFF" name="@blue2" />
-  <Swatch value="#137CBD" contrastValue="#FFFFFF" name="@blue3" />
-  <Swatch value="#2B95D6" contrastValue="#000000" name="@blue4" />
-  <Swatch value="#48AFF0" contrastValue="#000000" name="@blue5" />
+  <Swatch value="#0E5A8A" contrastValue="#FFFFFF" name="@blue1" style={{ margin: 0, gridColumn: "initial" }} />
+  <Swatch value="#106BA3" contrastValue="#FFFFFF" name="@blue2" style={{ margin: 0, gridColumn: "initial" }} />
+  <Swatch value="#137CBD" contrastValue="#FFFFFF" name="@blue3" style={{ margin: 0, gridColumn: "initial" }} />
+  <Swatch value="#2B95D6" contrastValue="#000000" name="@blue4" style={{ margin: 0, gridColumn: "initial" }} />
+  <Swatch value="#48AFF0" contrastValue="#000000" name="@blue5" style={{ margin: 0, gridColumn: "initial" }} />
 </Grid>
 
 ## Another example
 
-<div style={{display: "grid", gridGap: 6 }}>
-  <Swatch value="#F58221" name="Access" ancestry="Orange 300" />
-  <Swatch value="#D9418D" name="Use" ancestry="Red 500" />
-  <Swatch value="#B87AF2" name="Innovation" ancestry="Violett 500" />
-  <Swatch value="#4188D9" name="Jobs" ancestry="Blue 500" />
-  <Swatch value="#4AE6CC" name="Society" ancestry="…" />
-  <Swatch value="#1FD35B" name="Trust" ancestry="Green 400" />
-  <Swatch value="#C4D534" name="Market Openness" ancestry="…" />
+<div style={{ gridColumn: "lc / rc", display: "grid", gridGap: 6 }}>
+  <Swatch value="#F58221" name="Access" ancestry="Orange 300" style={{ margin: 0, gridColumn: "initial" }} />
+  <Swatch value="#D9418D" name="Use" ancestry="Red 500" style={{ margin: 0, gridColumn: "initial" }} />
+  <Swatch value="#B87AF2" name="Innovation" ancestry="Violett 500" style={{ margin: 0, gridColumn: "initial" }} />
+  <Swatch value="#4188D9" name="Jobs" ancestry="Blue 500" style={{ margin: 0, gridColumn: "initial" }} />
+  <Swatch value="#4AE6CC" name="Society" ancestry="…" style={{ margin: 0, gridColumn: "initial" }} />
+  <Swatch value="#1FD35B" name="Trust" ancestry="Green 400" style={{ margin: 0, gridColumn: "initial" }} />
+  <Swatch value="#C4D534" name="Market Openness" ancestry="…" style={{ margin: 0, gridColumn: "initial" }} />
 </div>