layerchart 2.0.0-next.37 → 2.0.0-next.39

package/dist/components/LinearGradient.svelte

@@ -81,7 +81,7 @@
   import { createLinearGradient, getComputedStyles } from '../utils/canvas.js';
   import { parsePercent } from '../utils/math.js';
   import { createId } from '../utils/createId.js';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
   import { cls } from '@layerstack/tailwind';
 
   const uid = $props.id();
@@ -113,6 +113,35 @@
 
   let canvasGradient = $state<CanvasGradient>();
 
+  function createCSSGradient(): string {
+    if (!stops?.length) return '';
+
+    let direction: string;
+    if (rotate !== undefined) {
+      // Convert SVG rotation to CSS linear-gradient angle
+      // SVG: rotate(0) on horizontal gradient = left-to-right = CSS 90deg
+      // SVG: rotate(0) on vertical gradient = top-to-bottom = CSS 180deg
+      const baseAngle = vertical ? 180 : 90;
+      const cssAngle = baseAngle + rotate;
+      direction = `${cssAngle}deg`;
+    } else {
+      // Use direction keywords when no rotation is specified
+      direction = vertical ? 'to bottom' : 'to right';
+    }
+
+    const cssStops = stops
+      .map((stop, i) => {
+        if (Array.isArray(stop)) {
+          return `${stop[1]} ${stop[0]}`;
+        } else {
+          return `${stop} ${i * (100 / (stops.length - 1))}%`;
+        }
+      })
+      .join(', ');
+
+    return `linear-gradient(${direction}, ${cssStops})`;
+  }
+
   function render(_ctx: CanvasRenderingContext2D) {
     // Use `getComputedStyles()` to convert each stop (if using CSS variables and/or classes) to color values
     const _stops = stops.map((stop, i) => {
@@ -170,7 +199,7 @@
       {y2}
       gradientTransform={rotate ? `rotate(${rotate})` : ''}
       gradientUnits={units}
-      {...extractLayerProps(restProps, 'linear-gradient')}
+      {...extractLayerProps(restProps, 'lc-linear-gradient')}
     >
       {#if stopsContent}
         {@render stopsContent?.()}
@@ -180,13 +209,13 @@
             <stop
               offset={stop[0]}
               stop-color={stop[1]}
-              class={cls(layerClass('linear-gradient-stop'), className)}
+              class={cls('lc-linear-gradient-stop', className)}
             />
           {:else}
             <stop
               offset="{i * (100 / (stops.length - 1))}%"
               stop-color={stop}
-              class={cls(layerClass('linear-gradient-stop'), className)}
+              class={cls('lc-linear-gradient-stop', className)}
             />
           {/if}
         {/each}
@@ -195,4 +224,6 @@
   </defs>
 
   {@render children?.({ id, gradient: `url(#${id})` })}
+{:else if renderCtx === 'html'}
+  {@render children?.({ id, gradient: createCSSGradient() })}
 {/if}

package/dist/components/Link.svelte

@@ -173,5 +173,5 @@ TODO:
   {type}
   {curve}
   {sweep}
-  {...extractLayerProps(restProps, 'link')}
+  {...extractLayerProps(restProps, 'lc-link')}
 />

package/dist/components/Marker.svelte

@@ -73,7 +73,6 @@
 <script lang="ts">
   import { cls } from '@layerstack/tailwind';
   import { createId } from '../utils/createId.js';
-  import { layerClass } from '../utils/attributes.js';
 
   const uid = $props.id();
 
@@ -104,39 +103,51 @@
     {refX}
     {refY}
     {viewBox}
+    data-type={type}
     {...restProps}
-    class={cls(
-      layerClass('marker'),
-      'overflow-visible',
-      // stroke
-      restProps.stroke == null &&
-        (['arrow', 'circle-stroke', 'line'].includes(type ?? '')
-          ? 'stroke-[context-stroke]'
-          : type === 'circle'
-            ? 'stroke-surface-100'
-            : 'stroke-none'),
-      // extra stroke attrs
-      '[stroke-linecap:round] [stroke-linejoin:round]',
-      //fill
-      restProps.fill == null &&
-        (['triangle', 'dot', 'circle'].includes(type ?? '')
-          ? 'fill-[context-stroke]'
-          : type === 'circle-stroke'
-            ? 'fill-surface-100'
-            : 'fill-none'),
-      className
-    )}
+    class={cls('lc-marker', className)}
   >
     {#if children}
       {@render children()}
     {:else if type === 'triangle'}
-      <path d="M 0 0 L 10 5 L 0 10 z" class={layerClass('marker-triangle')} />
+      <path d="M 0 0 L 10 5 L 0 10 z" class="lc-marker-triangle" />
     {:else if type === 'arrow'}
-      <polyline points="0 0, 10 5, 0 10" class={layerClass('marker-arrow')} />
+      <polyline points="0 0, 10 5, 0 10" class="lc-marker-arrow" />
     {:else if type === 'circle' || type === 'circle-stroke' || type === 'dot'}
-      <circle cx={5} cy={5} r={5} class={layerClass('marker-circle')} />
+      <circle cx={5} cy={5} r={5} class="lc-marker-circle" />
     {:else if type === 'line'}
-      <polyline points="5 0, 5 10" class={layerClass('marker-line')} />
+      <polyline points="5 0, 5 10" class="lc-marker-line" />
     {/if}
   </marker>
 </defs>
+
+<style>
+  @layer base {
+    :global(:where(.lc-marker)) {
+      overflow: visible;
+
+      &[data-type='arrow'],
+      &[data-type='circle-stroke'],
+      &[data-type='line'] {
+        fill: none;
+        stroke: context-stroke;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      &[data-type='circle'] {
+        stroke: var(--color-surface-100, light-dark(white, black));
+      }
+
+      &[data-type='triangle'],
+      &[data-type='dot'],
+      &[data-type='circle'] {
+        fill: context-stroke;
+      }
+
+      &[data-type='circle-stroke'] {
+        fill: var(--color-surface-100, light-dark(white, black));
+      }
+    }
+  }
+</style>

package/dist/components/MonthPath.svelte

@@ -30,10 +30,9 @@
 </script>
 
 <script lang="ts">
-  import { timeWeek, timeMonth, timeYear } from 'd3-time';
+  import { timeWeek, timeYear } from 'd3-time';
   import { cls } from '@layerstack/tailwind';
   import { endOfInterval } from '@layerstack/utils';
-  import { layerClass } from '../utils/attributes.js';
   import Spline, { type SplinePropsWithoutHTML } from './Spline.svelte';
 
   let {
@@ -75,6 +74,18 @@
   bind:pathRef
   {pathData}
   fill="none"
-  class={cls(layerClass('month-path'), 'stroke-surface-content/20', className)}
+  class={cls('lc-month-path', className)}
   {...restProps}
 />
+
+<style>
+  @layer components {
+    :global(:where(.lc-month-path)) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 20%,
+        transparent
+      );
+    }
+  }
+</style>

package/dist/components/MotionPath.svelte

@@ -100,7 +100,7 @@
     {fill}
     {rotate}
     bind:this={ref}
-    {...extractLayerProps(restProps, 'motion-path')}
+    {...extractLayerProps(restProps, 'lc-motion-path')}
   >
     <mpath href="#{pathId}" />
   </animateMotion>

package/dist/components/Pack.svelte.d.ts

@@ -25,10 +25,17 @@ export type PackProps<T> = {
         nodes: HierarchyCircularNode<T>[];
     }]>;
 };
+declare function $$render<T>(): {
+    props: PackProps<T>;
+    exports: {};
+    bindings: "nodes";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T> {
-    props(): PackProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "nodes";
     exports(): {};
 }

package/dist/components/Partition.svelte.d.ts

@@ -32,10 +32,17 @@ export type PartitionProps<T> = {
         nodes: HierarchyRectangularNode<T>[];
     }]>;
 };
+declare function $$render<T>(): {
+    props: PartitionProps<T>;
+    exports: {};
+    bindings: "nodes";
+    slots: {};
+    events: {};
+};
 declare class __sveltets_Render<T> {
-    props(): PartitionProps<T>;
-    events(): {};
-    slots(): {};
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "nodes";
     exports(): {};
 }

package/dist/components/Pattern.svelte

@@ -154,7 +154,7 @@
     const lineDefs = Array.isArray(linesProp) ? linesProp : linesProp === true ? [{}] : [linesProp];
     for (const line of lineDefs) {
       // const spacing = Math.abs(line.spacing);
-      const stroke = line.color ?? 'var(--color-surface-content)';
+      const stroke = line.color ?? 'var(--color-surface-content, currentColor)';
       const strokeWidth = line.width ?? 1;
       const opacity = line.opacity ?? 1;
 
@@ -217,7 +217,7 @@
             cx: size / 4,
             cy: size / 4,
             r: circle.radius ?? 1,
-            fill: circle.color ?? 'var(--color-surface-content)',
+            fill: circle.color ?? 'var(--color-surface-content, currentColor)',
             opacity: circle.opacity ?? 1,
           },
           {
@@ -225,7 +225,7 @@
             cx: (size * 3) / 4,
             cy: (size * 3) / 4,
             r: circle.radius ?? 1,
-            fill: circle.color ?? 'var(--color-surface-content)',
+            fill: circle.color ?? 'var(--color-surface-content, currentColor)',
             opacity: circle.opacity ?? 1,
           }
         );
@@ -235,7 +235,7 @@
           cx: size / 2,
           cy: size / 2,
           r: circle.radius ?? 1,
-          fill: circle.color ?? 'var(--color-surface-content)',
+          fill: circle.color ?? 'var(--color-surface-content, currentColor)',
           opacity: circle.opacity ?? 1,
         });
       }
@@ -265,7 +265,7 @@
       {width}
       {height}
       patternUnits="userSpaceOnUse"
-      {...extractLayerProps(restProps, 'pattern')}
+      {...extractLayerProps(restProps, 'lc-pattern')}
     >
       {#if patternContent}
         {@render patternContent?.()}

package/dist/components/Pie.svelte

@@ -81,7 +81,6 @@
   import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
   import { getChartContext } from './Chart.svelte';
   import type { Snippet } from 'svelte';
-  import { layerClass } from '../utils/attributes.js';
 
   /*
     TODO:
@@ -140,7 +139,7 @@
 {:else}
   {#each arcs as arc}
     <Arc
-      class={layerClass('pie-arc')}
+      class="lc-pie-arc"
       startAngle={arc.startAngle}
       endAngle={arc.endAngle}
       padAngle={arc.padAngle}

package/dist/components/Points.svelte

@@ -45,11 +45,9 @@
 </script>
 
 <script lang="ts">
-  import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
 
   import Circle, { type CircleProps } from './Circle.svelte';
-  import Link from './Link.svelte';
   import { isScaleBand, type AnyScale } from '../utils/scales.svelte.js';
   import { accessor, type Accessor } from '../utils/common.js';
   import { getChartContext } from './Chart.svelte';
@@ -143,7 +141,7 @@
       {stroke}
       {strokeWidth}
       {opacity}
-      {...extractLayerProps(restProps, 'point')}
+      {...extractLayerProps(restProps, 'lc-point')}
     />
   {/each}
 {/if}

package/dist/components/Polygon.svelte

@@ -144,7 +144,6 @@
   import { registerCanvasComponent } from './layout/Canvas.svelte';
   import { renderPathData, type ComputedStylesOptions } from '../utils/canvas.js';
   import { createKey } from '../utils/key.svelte.js';
-  import { layerClass } from '../utils/attributes.js';
   import { polygon } from '../utils/shape.js';
   import { roundedPolygonPath } from '../utils/path.js';
 
@@ -234,7 +233,7 @@
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
             styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
-            classes: cls(layerClass('polygon'), fill == null && 'fill-surface-content', className),
+            classes: cls('lc-polygon', className),
           }
     );
   }
@@ -278,8 +277,33 @@
     {stroke}
     stroke-width={strokeWidth}
     {opacity}
-    class={cls(layerClass('polygon'), fill == null && 'fill-surface-content', className)}
+    class={cls('lc-polygon', className)}
     {...restProps}
     bind:this={ref}
   />
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-polygon)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-polygon, svg.lc-polygon):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-polygon, svg.lc-polygon):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-polygon):not([background-color])) {
+      background-color: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-polygon):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/RadialGradient.svelte

@@ -89,7 +89,7 @@
   import { parsePercent } from '../utils/math.js';
   import { getChartContext } from './Chart.svelte';
   import { createId } from '../utils/createId.js';
-  import { extractLayerProps, layerClass } from '../utils/attributes.js';
+  import { extractLayerProps } from '../utils/attributes.js';
   import { cls } from '@layerstack/tailwind';
 
   const uid = $props.id();
@@ -167,12 +167,12 @@
       {spreadMethod}
       gradientTransform={transform}
       gradientUnits={units}
-      {...extractLayerProps({ ...restProps, class: className }, 'radial-gradient')}
+      {...extractLayerProps({ ...restProps, class: className }, 'lc-radial-gradient')}
     >
       {#if stopsContent}
         {@render stopsContent()}
       {:else if stops}
-        {@const stopClass = cls(layerClass('radial-gradient-stop'), className)}
+        {@const stopClass = cls('lc-radial-gradient-stop', className)}
         {#each stops as stop, i}
           {#if Array.isArray(stop)}
             <stop offset={stop[0]} stop-color={stop[1]} class={stopClass} />

package/dist/components/Rect.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type { CommonStyleProps, Without } from '../utils/types.js';
+  import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import { createMotion, parseMotionProp, type MotionProp } from '../utils/motion.svelte.js';
   import { renderRect, type ComputedStylesOptions } from '../utils/canvas.js';
@@ -39,7 +39,8 @@
   } & CommonStyleProps;
 
   export type RectProps = RectPropsWithoutHTML &
-    Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML>;
+    Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML> &
+    CommonEvents;
 </script>
 
 <script lang="ts">
@@ -49,7 +50,6 @@
   import { getRenderContext } from './Chart.svelte';
   import { registerCanvasComponent } from './layout/Canvas.svelte';
   import { createKey } from '../utils/key.svelte.js';
-  import { layerClass } from '../utils/attributes.js';
 
   let {
     height,
@@ -107,7 +107,7 @@
         ? merge({ styles: { strokeWidth } }, styleOverrides)
         : {
             styles: { fill, fillOpacity, stroke, strokeWidth, opacity },
-            classes: className,
+            classes: cls('lc-rect', className),
           }
     );
   }
@@ -155,7 +155,7 @@
     {stroke}
     stroke-width={strokeWidth}
     {opacity}
-    class={cls(layerClass('rect'), fill == null && 'fill-surface-content', className)}
+    class={cls('lc-rect', className)}
     {...restProps}
     {onclick}
     {ondblclick}
@@ -166,4 +166,54 @@
     {onpointerout}
     bind:this={ref}
   />
+{:else if renderCtx === 'html'}
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    style:position="absolute"
+    style:left="{motionX.current}px"
+    style:top="{motionY.current}px"
+    style:width="{motionWidth.current}px"
+    style:height="{motionHeight.current}px"
+    style:background={fill}
+    style:background-opacity={opacity}
+    style:border-width="{strokeWidth}px"
+    style:border-style="solid"
+    style:border-color={stroke}
+    style:border-radius="{restProps.rx}px"
+    class={cls('lc-rect', className)}
+    {...restProps as any}
+    {onclick}
+    {ondblclick}
+    {onpointerenter}
+    {onpointermove}
+    {onpointerleave}
+    {onpointerover}
+    {onpointerout}
+  ></div>
 {/if}
+
+<style>
+  @layer base {
+    :global(:where(.lc-rect)) {
+      --fill-color: var(--color-surface-content, currentColor);
+      --stroke-color: initial;
+    }
+
+    /* Svg | Canvas layers */
+    :global(:where(.lc-layout-svg .lc-rect, svg.lc-rect):not([fill])) {
+      fill: var(--fill-color);
+    }
+    :global(:where(.lc-layout-svg .lc-rect, svg.lc-rect):not([stroke])) {
+      stroke: var(--stroke-color);
+    }
+
+    /* Html layers */
+    :global(:where(.lc-layout-html .lc-rect):not([background])) {
+      background: var(--fill-color);
+    }
+    :global(:where(.lc-layout-html .lc-rect):not([border-color])) {
+      border-color: var(--stroke-color);
+    }
+  }
+</style>

package/dist/components/Rect.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { CommonStyleProps, Without } from '../utils/types.js';
+import type { CommonEvents, CommonStyleProps, Without } from '../utils/types.js';
 import type { SVGAttributes } from 'svelte/elements';
 import { type MotionProp } from '../utils/motion.svelte.js';
 export type RectPropsWithoutHTML = {
@@ -30,7 +30,7 @@ export type RectPropsWithoutHTML = {
     ref?: SVGRectElement;
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
 } & CommonStyleProps;
-export type RectProps = RectPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML>;
+export type RectProps = RectPropsWithoutHTML & Without<SVGAttributes<SVGRectElement>, RectPropsWithoutHTML> & CommonEvents;
 declare const Rect: import("svelte").Component<RectProps, {}, "ref">;
 type Rect = ReturnType<typeof Rect>;
 export default Rect;

package/dist/components/RectClipPath.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import Rect, { type RectPropsWithoutHTML } from './Rect.svelte';
-  import type { Without } from '../utils/types.js';
+  import type { CommonEvents, Without } from '../utils/types.js';
   import type { SVGAttributes } from 'svelte/elements';
   import type { Snippet } from 'svelte';
 
@@ -58,7 +58,8 @@
     Without<RectPropsWithoutHTML, BaseRectClipPathPropsWithoutHTML>;
 
   export type RectClipPathProps = RectClipPathPropsWithoutHTML &
-    Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML>;
+    Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML> &
+    CommonEvents;
 </script>
 
 <script lang="ts">
@@ -81,7 +82,7 @@
 
 <ClipPath {id} {disabled}>
   {#snippet clip()}
-    <Rect {x} {y} {...extractLayerProps(restProps, 'clip-path-rect')} />
+    <Rect {x} {y} {...extractLayerProps(restProps, 'lc-clip-path-rect')} />
   {/snippet}
   {#snippet children({ url })}
     {@render childrenProp?.({ id, url })}

package/dist/components/RectClipPath.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type RectPropsWithoutHTML } from './Rect.svelte';
-import type { Without } from '../utils/types.js';
+import type { CommonEvents, Without } from '../utils/types.js';
 import type { SVGAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
 export type BaseRectClipPathPropsWithoutHTML = {
@@ -48,7 +48,7 @@ export type BaseRectClipPathPropsWithoutHTML = {
     motion?: MotionProp<'x' | 'y' | 'width' | 'height'>;
 };
 export type RectClipPathPropsWithoutHTML = BaseRectClipPathPropsWithoutHTML & Without<RectPropsWithoutHTML, BaseRectClipPathPropsWithoutHTML>;
-export type RectClipPathProps = RectClipPathPropsWithoutHTML & Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML>;
+export type RectClipPathProps = RectClipPathPropsWithoutHTML & Without<SVGAttributes<SVGElement>, RectClipPathPropsWithoutHTML> & CommonEvents;
 import type { MotionProp } from '../utils/motion.svelte.js';
 declare const RectClipPath: import("svelte").Component<RectClipPathProps, {}, "">;
 type RectClipPath = ReturnType<typeof RectClipPath>;

package/dist/components/Rule.svelte

@@ -61,7 +61,6 @@
   import Line, { type LinePropsWithoutHTML } from './Line.svelte';
   import { getChartContext } from './Chart.svelte';
   import { accessor, chartDataArray, type Accessor } from '../utils/common.js';
-  import { layerClass } from '../utils/attributes.js';
   import { isScaleBand, isScaleNumeric } from '../utils/scales.svelte.js';
 
   let {
@@ -188,9 +187,9 @@
   // $inspect({ lines });
 </script>
 
-<Group class={layerClass('rule-g')}>
+<Group class="lc-rule-g">
   {#each lines as line}
-    {@const stroke = line.stroke}
+    {@const stroke = line.stroke ?? strokeProp}
 
     {#if ctx.radial}
       {#if line.axis === 'x'}
@@ -203,23 +202,10 @@
           {x2}
           {y2}
           {stroke}
-          class={cls(
-            layerClass('rule-x-radial-line'),
-            !stroke && 'stroke-surface-content/10',
-            className
-          )}
+          class={cls('lc-rule-x-radial-line', className)}
         />
       {:else if line.axis === 'y'}
-        <Circle
-          r={line.y1}
-          {stroke}
-          class={cls(
-            layerClass('rule-y-radial-circle'),
-            !stroke && 'stroke-surface-content/50',
-            'fill-none',
-            className
-          )}
-        />
+        <Circle r={line.y1} {stroke} class={cls('lc-rule-y-radial-circle', className)} />
       {/if}
     {:else}
       <Line
@@ -229,12 +215,33 @@
         x2={line.x2}
         y2={line.y2}
         {stroke}
-        class={cls(
-          layerClass(line.axis === 'x' ? 'rule-x-line' : 'rule-y-line'),
-          !stroke && 'stroke-surface-content/50',
-          className
-        )}
+        class={cls(line.axis === 'x' ? 'lc-rule-x-line' : 'lc-rule-y-line', className)}
       />
     {/if}
   {/each}
 </Group>
+
+<style>
+  @layer components {
+    /* TODO: better way to handle this without affecting other components? */
+    /* Could add a layer between "components" and "base" but would require more setup (and not alignw with TW layers) */
+    :global(
+      :where(
+        .lc-rule-x-line,
+        .lc-rule-y-line,
+        .lc-rule-x-radial-line,
+        .lc-rule-y-radial-circle
+      ):not([class*='lc-axis'], [class*='lc-grid'])
+    ) {
+      --stroke-color: color-mix(
+        in oklab,
+        var(--color-surface-content, currentColor) 50%,
+        transparent
+      );
+    }
+
+    :global(:where(.lc-rule-y-radial-circle)) {
+      --fill-color: none;
+    }
+  }
+</style>