@hyvor/design 0.0.47 → 0.0.49

package/dist/components/ActionList/ActionListItem.svelte

@@ -120,15 +120,13 @@ function handleClick() {
         color: var(--text-light);
     }
 
+     /*styles for disabled state*/
     div.action-list-item.disabled {
-        opacity: 0.5;
+        color: var(--text-light);
         cursor: not-allowed;
-        pointer-events: none;
     }
-
     div.action-list-item.disabled:hover {
         background-color: transparent;
-        pointer-events: none;
     }
 
 </style>

package/dist/components/Button/Button.svelte

@@ -364,15 +364,31 @@ export let button = {};
   background-color: transparent;
   color: var(--text);
   transition: 0.2s background-color;
+  /*styles for disabled state*/
 }
 .button.invisible:hover {
   background-color: var(--accent-light);
   box-shadow: none !important;
 }
+.button.invisible[disabled] {
+  background-color: transparent;
+  color: var(--text);
+  box-shadow: none !important;
+  cursor: not-allowed;
+  opacity: 0.2;
+}
+.button.invisible[disabled]:hover {
+  background-color: transparent;
+  box-shadow: none !important;
+  color: var(--text);
+}
 
 /*Styles for button disabled state*/
 .button[disabled] {
   cursor: not-allowed;
   opacity: 0.2;
   box-shadow: none !important;
+}
+.button[disabled]:hover {
+  box-shadow: none !important;
 }</style>

package/dist/components/Callout/Callout.svelte

@@ -39,7 +39,7 @@
     .callout {
         padding: 15px 25px;
         border-radius: var(--box-radius);    
-        line-height: var(--line-height-content);
+        /* line-height: var(--line-height-content); */
     }
 
     .callout.soft {

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

@@ -3,7 +3,7 @@ import './hljs.scss';
 declare const __propDef: {
     props: {
         code: string;
-        language?: ("css" | "ts" | "html" | "js" | "svelte" | "jsx") | undefined;
+        language?: ("css" | "ts" | "yaml" | "json" | "html" | "js" | "svelte" | "jsx") | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/CodeBlock/getCode.js

@@ -3,10 +3,14 @@ import javascript from 'highlight.js/lib/languages/javascript';
 import xml from 'highlight.js/lib/languages/xml';
 import css from 'highlight.js/lib/languages/css';
 import ts from 'highlight.js/lib/languages/typescript';
+import yaml from 'highlight.js/lib/languages/yaml';
+import json from 'highlight.js/lib/languages/json';
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('xml', xml);
 hljs.registerLanguage('css', css);
 hljs.registerLanguage('ts', ts);
+hljs.registerLanguage('yaml', yaml);
+hljs.registerLanguage('json', json);
 export default function getCode(code, language) {
     let ret = code;
     // remove the first empty line

package/dist/marketing/Docs/Content/DocsImage.svelte

@@ -3,6 +3,7 @@ import { clickOutside } from "../../../components/index.js";
 export let src;
 export let alt;
 export let width = void 0;
+export let modalImageProps = {};
 let open = false;
 </script>
 
@@ -23,9 +24,8 @@ let open = false;
     >
         <img 
             {src} 
-            {alt} 
-            {...$$restProps} 
-            {width} 
+            {alt}
+            {...modalImageProps}
             use:clickOutside={{
                 callback: () => open = false
             }}

package/dist/marketing/Docs/Content/DocsImage.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         src: string;
         alt: string;
         width?: undefined | number;
+        modalImageProps?: any;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package.json

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