@hyvor/design 0.0.66 → 0.0.67

package/dist/components/IconMessage/IconMessage.svelte

@@ -18,21 +18,13 @@ if (error) {
 iconColor = iconColor || "var(--gray-dark)";
 </script>
 
-<div 
-    class="icon-message"
-    style:padding={padding + 'px'} 
->
-
-    <div 
-        class="icon" 
-        style:color={iconColor}
-        {...$$restProps}
-        >
-            {#if $$slots.icon}
-                <slot name="icon" />
-            {:else if icon}
-                <svelte:component this={icon} size={iconSize + 'px' } />
-            {/if}
+<div class="icon-message" style:padding={padding + "px"}>
+    <div class="icon" style:color={iconColor} {...$$restProps}>
+        {#if $$slots.icon}
+            <slot name="icon" />
+        {:else if icon}
+            <svelte:component this={icon} size={iconSize + "px"} />
+        {/if}
     </div>
 
     <div class="message">
@@ -42,11 +34,9 @@ iconColor = iconColor || "var(--gray-dark)";
             {message}
         {/if}
     </div>
-
 </div>
 
 <style>
-
     .icon-message {
         width: 100%;
         height: 100%;
@@ -64,8 +54,4 @@ iconColor = iconColor || "var(--gray-dark)";
         color: var(--text-light);
         margin-top: 15px;
     }
-
-    .icon {
-    }
-
-</style> 
+</style>

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

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { ComponentType } from 'svelte';
+import type { ComponentType } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;

package/dist/components/Slider/Slider.svelte

@@ -3,7 +3,6 @@ export let min;
 export let max;
 export let value;
 export let step = 1;
-export let disabled = false;
 export let dots = false;
 const dispatch = createEventDispatcher();
 function toStep(value2) {

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

@@ -5,7 +5,6 @@ declare const __propDef: {
         max: number;
         value: number;
         step?: number | undefined;
-        disabled?: boolean | undefined;
         dots?: boolean | undefined;
     };
     events: {

package/dist/components/Textarea/Textarea.svelte

@@ -6,32 +6,27 @@ export let state = "default";
 export let textarea = {};
 </script>
 
-
-<span class="input-wrap state-{state}" 
+<span
+    class="input-wrap state-{state}"
     class:block
     on:click={() => textarea.focus()}
     on:keydown={(e) => {
-        if (e.key === 'Enter') {
+        if (e.key === "Enter") {
             textarea.focus();
         }
     }}
     role="textbox"
-    tabindex="0"   
+    tabindex="0"
 >
-
     {#if $$slots.start}
-        <span class="slot start" 
-            
-        >
+        <span class="slot start">
             <slot name="start" />
         </span>
     {/if}
 
-    <textarea 
-        bind:value={value}
+    <textarea
+        bind:value
         bind:this={textarea}
-        
-
         on:keyup
         on:keydown
         on:keypress
@@ -43,12 +38,9 @@ export let textarea = {};
         on:mouseleave
         on:change
         on:input
-
         {rows}
         {cols}
-
         {...$$restProps}
-    
     ></textarea>
 
     {#if $$slots.end}
@@ -137,4 +129,4 @@ export let textarea = {};
 }
 .input-wrap textarea:focus {
   outline: none;
-}</style>
+}</style>

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

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        value?: string | undefined;
+        value?: any;
         block?: boolean | undefined;
         rows?: number | undefined;
         cols?: number | undefined;

package/dist/marketing/Document/Document.svelte

@@ -0,0 +1,59 @@
+<script>import FeatureSectionTitle from "./DocumentTitle.svelte";
+export let title;
+export let subtitle;
+</script>
+
+<section>
+    <div class="hds-container container">
+        <FeatureSectionTitle {title} />
+        <div class="date">{subtitle}</div>
+        <content><slot /></content>
+    </div>
+</section>
+
+<style>* {
+  line-height: 30px;
+}
+
+.container {
+  margin: 0 auto 20px auto;
+  padding: 30px 15px 20px 15px;
+}
+.container :global(.wrap) {
+  margin-top: 0 !important;
+}
+.container .date {
+  text-align: center;
+  margin: 15px 0 60px 0;
+  color: var(--text-light);
+}
+.container content :global(h2) {
+  font-size: 32px !important;
+  font-weight: 600;
+  margin-top: 40px;
+  position: relative;
+}
+.container content :global(h3) {
+  font-size: 24px;
+  font-weight: 600;
+  margin-top: 40px;
+}
+.container content :global(p) {
+  margin-top: 20px;
+}
+.container content :global(ul) {
+  margin-top: 20px;
+}
+.container content :global(ol) {
+  margin-top: 20px;
+}
+.container content :global(hr) {
+  margin: 40px 0;
+  border: none;
+  height: 1px;
+  background-color: var(--border);
+}
+.container content :global(a) {
+  color: var(--link);
+  text-decoration: underline;
+}</style>

package/dist/marketing/Document/Document.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        subtitle: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DocumentProps = typeof __propDef.props;
+export type DocumentEvents = typeof __propDef.events;
+export type DocumentSlots = typeof __propDef.slots;
+export default class Document extends SvelteComponent<DocumentProps, DocumentEvents, DocumentSlots> {
+}
+export {};

package/dist/marketing/Document/DocumentTitle.svelte

@@ -0,0 +1,63 @@
+<script>export let title;
+export let subtitle = void 0;
+export let icon = null;
+export let h2Style = void 0;
+export let wrapStyle = void 0;
+</script>
+
+<div class="wrap document-title" style={wrapStyle}>
+    <h2 style={h2Style}>
+        {title}
+        {#if icon}
+            <div class="img-wrap">
+                <img src={icon} alt={title} />
+            </div>
+        {/if}
+    </h2>
+
+    {#if subtitle}
+        <h3>{@html subtitle}</h3>
+    {/if}
+</div>
+
+<style>
+    .wrap {
+        margin-top: 100px;
+    }
+    h2 {
+        font-size: 38px;
+        font-weight: 700;
+        margin-bottom: 10px;
+        margin-top: 20px;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    h3 {
+        font-size: 20px;
+        width: 650px;
+        max-width: 100%;
+        margin: 0 auto;
+        font-weight: normal;
+        line-height: 1.4;
+        text-align: center;
+    }
+    .img-wrap {
+        text-align: center;
+        margin-left: 20px;
+        display: inline-flex;
+        align-items: center;
+    }
+    img {
+        width: 85px;
+        height: 85px;
+    }
+
+    @media (max-width: 992px) {
+        h2 {
+            flex-direction: column-reverse;
+            gap: 15px;
+        }
+    }
+</style>

package/dist/marketing/Document/DocumentTitle.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        title: string;
+        subtitle?: string | undefined;
+        icon?: string | null | undefined;
+        h2Style?: string | undefined;
+        wrapStyle?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DocumentTitleProps = typeof __propDef.props;
+export type DocumentTitleEvents = typeof __propDef.events;
+export type DocumentTitleSlots = typeof __propDef.slots;
+export default class DocumentTitle extends SvelteComponent<DocumentTitleProps, DocumentTitleEvents, DocumentTitleSlots> {
+}
+export {};

package/dist/marketing/index.d.ts

@@ -8,3 +8,4 @@ export { default as DocsContent } from './Docs/Content/Content.svelte';
 export { default as DocsImage } from './Docs/Content/DocsImage.svelte';
 export { default as Footer } from './Footer/Footer.svelte';
 export { default as FooterLinkList } from './Footer/FooterLinkList.svelte';
+export { default as Document } from './Document/Document.svelte';

package/dist/marketing/index.js

@@ -8,3 +8,4 @@ export { default as DocsContent } from './Docs/Content/Content.svelte';
 export { default as DocsImage } from './Docs/Content/DocsImage.svelte';
 export { default as Footer } from './Footer/Footer.svelte';
 export { default as FooterLinkList } from './Footer/FooterLinkList.svelte';
+export { default as Document } from './Document/Document.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@hyvor/design",
-    "version": "0.0.66",
+    "version": "0.0.67",
     "license": "MIT",
     "private": false,
     "scripts": {