timvir 0.2.38 → 0.2.42

package/blocks/Icon/styles.css

@@ -1,7 +1,119 @@
-.b1a0xzv7{background:white;place-self:stretch;border-radius:2px;-webkit-transition:all 0.2s;transition:all 0.2s;box-shadow:0 0 0 0 rgba(0, 0, 0, 0.1);}
-.g10obtzp{opacity:0;-webkit-transition:all 0.2s;transition:all 0.2s;pointer-events:none;}
-.r1bcczis{display:-ms-grid;display:grid;place-items:center;cursor:pointer;}.r1bcczis>*{-ms-grid-column:1;grid-column:1;-ms-grid-row:1;grid-row:1;}.r1bcczis:hover .b1a0xzv7{box-shadow:inset 0 0 0 1px rgba(16, 22, 26, 0.2),0 2px 4px rgba(16, 22, 26, 0.1),0 8px 24px rgba(16, 22, 26, 0.2);}.r1bcczis:active .b1a0xzv7{margin:1px;box-shadow:inset 0 0 0 1px rgba(16, 22, 26, 0.2),0 1px 1px rgba(16, 22, 26, 0.2);}.r1bcczis:hover .g10obtzp{opacity:1;}
+@layer priority1 {
+  .timvir-s-dtfvks {
+    --timvir-b-Icon-hover: 0;
+  }
 
-.n1xsexuc{margin-top:6px;white-space:nowrap;font-size:0.75rem;opacity:0;-webkit-transition:all 0.16s;transition:all 0.16s;z-index:-1;color:var(--timvir-secondary-text-color);text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;position:absolute;left:50%;bottom:-20px;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);}
-.r1k0w618{position:relative;z-index:1;}.r1k0w618 svg{display:block;}.r1k0w618:hover .n1xsexuc{opacity:1;bottom:-26px;color:var(--timvir-text-color);}.r1k0w618:active .n1xsexuc{bottom:-24px;}
+  .timvir-s-d2wi23:hover {
+    --timvir-b-Icon-hover: 1;
+  }
+}
 
+@layer priority2 {
+  .timvir-s-1cum3z5 {
+    border-radius: 2px;
+  }
+
+  .timvir-s-gkxs2y {
+    grid-column: 1;
+  }
+
+  .timvir-s-1ms6mhf {
+    grid-row: 1;
+  }
+
+  .timvir-s-1ku5rj1 {
+    place-items: center;
+  }
+
+  .timvir-s-1lhehjl {
+    place-self: stretch stretch;
+  }
+
+  .timvir-s-zhuw26 {
+    transition: all .16s;
+  }
+}
+
+@layer priority3 {
+  .timvir-s-12peec7 {
+    background-color: #fff;
+  }
+
+  .timvir-s-1ww5jgt {
+    box-shadow: 0 0 #0000001a;
+  }
+
+  .timvir-s-1cdhzux {
+    color: var(--timvir-text-color);
+  }
+
+  .timvir-s-1ypdohk {
+    cursor: pointer;
+  }
+
+  .timvir-s-1lliihq {
+    display: block;
+  }
+
+  .timvir-s-rvj5dj {
+    display: grid;
+  }
+
+  .timvir-s-boafo0 {
+    font-size: .75rem;
+  }
+
+  .timvir-s-1j5ulbg {
+    opacity: var(--timvir-b-Icon-hover);
+  }
+
+  .timvir-s-47corl {
+    pointer-events: none;
+  }
+
+  .timvir-s-10l6tqk {
+    position: absolute;
+  }
+
+  .timvir-s-1n2onr6 {
+    position: relative;
+  }
+
+  .timvir-s-2b8uid {
+    text-align: center;
+  }
+
+  .timvir-s-1nc5ocm {
+    transform: translate(-50%);
+  }
+
+  .timvir-s-87ps6o {
+    user-select: none;
+  }
+
+  .timvir-s-uxw1ft {
+    white-space: nowrap;
+  }
+
+  .timvir-s-8knxv4 {
+    z-index: -1;
+  }
+
+  .timvir-s-1vjfegm {
+    z-index: 1;
+  }
+}
+
+@layer priority4 {
+  .timvir-s-1kuhel0 {
+    bottom: -20px;
+  }
+
+  .timvir-s-1nrll8i {
+    left: 50%;
+  }
+
+  .timvir-s-dj266r {
+    margin-top: 0;
+  }
+}

package/blocks/Icon/types.d.ts

@@ -1,5 +1,5 @@
-export type Size = "responsive" | number;
-export interface Instance {
+type Size = "responsive" | number;
+interface Instance {
     size: Size;
     Component: React.ElementType;
 }
@@ -7,3 +7,4 @@ export interface Descriptor {
     name: string;
     instances: Instance[];
 }
+export {};

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

@@ -1,72 +1,255 @@
 import * as React from 'react';
 import * as Icons from 'react-feather';
+import { layoutStyles } from 'timvir/core';
+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;
+}
 
-/**
- * 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;
-  return /*#__PURE__*/React.createElement(Root, {
+  } = props$1;
+  return /*#__PURE__*/jsxs(Root, {
     ref: ref,
-    className: cx_default(className, "r1ssql2z", variant !== undefined && variantStyles[variant]),
-    ...rest
-  }, variant && /*#__PURE__*/React.createElement("div", {
-    className: icon
-  }, {
-    info: /*#__PURE__*/React.createElement(Icons.ChevronsRight, {
-      size: "1.5em"
-    }),
-    warning: /*#__PURE__*/React.createElement(Icons.AlertCircle, {
-      size: "1.5em"
-    }),
-    alert: /*#__PURE__*/React.createElement(Icons.XOctagon, {
-      size: "1.5em"
-    })
-  }[variant]), /*#__PURE__*/React.createElement("div", {
-    className: "dhvu07f"
-  }, children));
+    ...props(layoutStyles.block, styles.root, variant && styles[variant]),
+    ...rest,
+    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/samples/basic.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { Message } from "..";
 type Props = Partial<React.ComponentPropsWithoutRef<typeof Message>>;
-export default function Sample(props: Props): React.JSX.Element;
+export default function Sample(props: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/blocks/Message/styles.css

@@ -1,7 +1,95 @@
-.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-jvto2c {
+    margin: -2px 12px 0 -4px;
+  }
 
+  .timvir-s-qb5aye {
+    padding: 16px 24px;
+  }
+}
+
+@layer priority2 {
+  .timvir-s-18zih8k {
+    border-radius: 3px;
+  }
+
+  .timvir-s-3psx0u {
+    flex: none;
+  }
+}
+
+@layer priority3 {
+  .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-kpwil5 {
+    font-size: .875rem;
+  }
+
+  .timvir-s-1evy7pa {
+    line-height: 1.5;
+  }
+
+  .timvir-s-1n2onr6 {
+    position: relative;
+  }
+}
+
+@layer priority4 {
+  .timvir-s-ozkzq6 {
+    height: 1.5em;
+  }
+
+  .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>