@sk-web-gui/core 3.5.0 → 3.7.0

package/dist/types/components/ai/ai-corner-module.d.ts

@@ -0,0 +1,275 @@
+export declare const AICornerModule: (colors: string[]) => {
+    '.sk-ai-corner-module': {
+        '@apply fixed': {};
+        '@apply max-w-full': {};
+        '@apply max-h-full': {};
+        '@apply z-50': {};
+        '@apply flex flex-col gap-0 items-center justify-start': {};
+        '@apply shadow-200': {};
+        '@apply transition-all': {};
+        '@apply duration-300': {};
+        '@apply bottom-0 right-0': {};
+        '@apply bg-background-content': {};
+        '&-content': {
+            '@apply flex w-full gap-0 h-full justify-between': {};
+            '@apply relative': {};
+            '&-row': {
+                '@apply flex flex-col': {};
+            };
+            '&-main': {
+                '@apply grow shrink max-h-full max-w-full items-center': {};
+            };
+        };
+        '&-sidebar': {
+            '@apply flex flex-col': {};
+            '@apply lg:w-[22em]': {};
+            '@apply h-full': {};
+            '@apply overflow-hidden': {};
+            '@apply border-r-1 border-r-divider': {};
+            '@apply pt-20 px-0 gap-16': {};
+            '&-sessions': {
+                '@apply flex flex-col': {};
+                '@apply grow w-full': {};
+                '@apply overflow-y-auto': {};
+                '@apply px-24 pb-20 gap-16': {};
+            };
+        };
+        '&-feed': {
+            '@apply flex flex-col grow': {};
+            '@apply px-16 pt-16 pb-24 gap-16': {};
+            '@apply w-full': {};
+            '@apply max-h-full overflow-y-auto': {};
+            '@apply max-w-full overflow-x-hidden': {};
+            '&-readmore': {
+                '@apply text-center': {};
+                '@apply max-w-[29em]': {};
+                '@apply px-24 pb-16 pt-0': {};
+            };
+            '&-questions': {
+                '@apply flex flex-col gap-8 w-full': {};
+                '&-title': {
+                    '@apply text-label-medium text-dark-primary': {};
+                };
+                '&-wrapper': {
+                    '@apply flex flex-col gap-16 w-full': {};
+                };
+            };
+        };
+        '.sk-ai-inputsection': {
+            '@apply shrink-0': {};
+        };
+        '&[data-fullscreen="false"]': {
+            '@apply rounded-tl-groups': {};
+            '@apply max-w-[26em]': {};
+            '@apply w-[26em]': {};
+            '@apply max-h-[calc(100%-1em)]': {};
+            '&[data-mobile="true"]': {
+                '@apply rounded-tl-none': {};
+                '@apply max-w-full': {};
+                '@apply w-full': {};
+                '@apply max-h-full': {};
+            };
+            '&[data-docked="false"]': {
+                '@apply h-[44em]': {};
+                '&[data-mobile="true"]': {
+                    '@apply h-full': {};
+                };
+            };
+        };
+        '&[data-mobile="true"]': {
+            '.sk-ai-corner-module-feed': {
+                '&-readmore': {
+                    '@apply max-w-full': {};
+                };
+            };
+        };
+        '.sk-ai-feed': {
+            '@apply w-full': {};
+        };
+        '&[data-fullscreen="true"]': {
+            '@apply w-full': {};
+            '.sk-ai-corner-module-feed': {
+                '@apply gap-40 grow w-full items-center': {};
+                '.sk-ai-feed': {
+                    '@apply text-base max-w-[50em]': {};
+                };
+                '&-questions': {
+                    '@apply flex-row gap-16': {};
+                    '&-wrapper': {
+                        '@apply text-base max-w-[50em]': {};
+                    };
+                };
+            };
+            '.sk-ai-inputsection': {
+                '@apply text-base max-w-[50em]': {};
+                '@apply pt-20 pb-32': {};
+            };
+        };
+        '&[data-docked="true"]': {
+            '@apply h-64 md:w-[19em]': {};
+            '&[data-mobile="true"]': {
+                '@apply w-full': {};
+            };
+        };
+        '&-header': {
+            '&[data-fullscreen="true"]': {
+                '@apply rounded-tl-none': {};
+                '@apply bg-background-content': {};
+                '@apply text-dark-primary': {};
+                '@apply px-20 pt-20 pb-12': {};
+            };
+            '@apply h-64': {};
+            '@apply flex items-center justify-between': {};
+            '@apply w-full': {};
+            '@apply shrink-0': {};
+            '@apply px-14 py-16': {};
+            '@apply transition-all': {};
+            '@apply bg-inverted-background-content': {};
+            '@apply text-inverted-dark-primary': {};
+            '@apply rounded-tl-groups': {};
+            '&[data-mobile="true"]': {
+                '@apply rounded-tl-none': {};
+            };
+            '&[data-docked="true"]': {
+                '@apply px-12 pt-10 pb-12': {};
+                '@apply cursor-pointer': {};
+            };
+            '&-title': {
+                '@apply flex justify-start items-center': {};
+                '@apply gap-12 pr-16': {};
+            };
+            '&-heading': {
+                '@apply flex flex-col gap-0': {};
+                '&-name': {
+                    '@apply text-label-medium': {};
+                };
+                '&-subtitle': {
+                    '@apply text-small text-inverted-dark-secondary': {};
+                };
+            };
+            '&-menu': {
+                '@apply flex justify-center items-center': {};
+                '@apply gap-12': {};
+                '&-item': {
+                    '@apply relative flex justify-center': {};
+                    '.sk-tooltip': {
+                        '@apply absolute w-max': {};
+                        '&[data-position="below"]': {
+                            '@apply top-full': {};
+                            '@apply mt-12': {};
+                        };
+                        '&[data-position="above"]': {
+                            '@apply bottom-full': {};
+                            '@apply mb-12': {};
+                        };
+                        '&[data-rightoutside="true"]': {
+                            '@apply ml-[-100%]': {};
+                            '@apply w-auto': {};
+                        };
+                    };
+                };
+            };
+            '&[data-variant="alt"]': {
+                '@apply pt-0 px-24': {};
+                '@apply bg-transparent': {};
+                '.sk-avatar': {
+                    '@apply w-40 h-40 lg:w-56 lg:h-56': {};
+                };
+                '.sk-ai-corner-module-header-heading-name': {
+                    '@apply text-label-large text-dark-primary': {};
+                };
+                '.sk-ai-corner-module-header-heading-subtitle': {
+                    '@apply text-small text-dark-secondary': {};
+                };
+            };
+        };
+        '&-sessions': {
+            '@apply px-20': {};
+            '&-group': {
+                '@apply py-8 px-12': {};
+            };
+            '&-history': {
+                '@apply flex flex-col p-8 gap-16': {};
+                '&-list': {
+                    '@apply flex flex-col p-0 gap-8': {};
+                    '[role="menuitem"]': {
+                        '@apply max-w-full': {};
+                        '@apply max-h-none h-auto text-wrap text-left': {};
+                    };
+                };
+            };
+        };
+        '.sk-avatar': {
+            '@apply transition-all duration-500': {};
+        };
+        '&-mobile-menu': {
+            '@apply rounded-0 py-16 absolute top-0 bottom-0 overflow-x-hidden': {};
+            '@apply px-0': {};
+            '@apply rounded-l-button': {};
+            '@apply bg-background-100': {};
+            '@apply shadow-100': {};
+            '@apply transition-all': {};
+            '&-top-bar': {
+                '@apply flex justify-between items-start': {};
+                '@apply pl-0 pr-16': {};
+                '.sk-ai-corner-module-header': {
+                    '@apply shrink': {};
+                };
+            };
+            '&-content': {
+                '@apply flex flex-col pt-8': {};
+                '[role="menuitem"]': {
+                    '@apply w-full': {};
+                };
+            };
+            '&[data-show="true"]': {
+                '@apply left-16 right-0': {};
+            };
+            '&[data-show="false"]': {
+                '@apply w-0 h-0 left-full': {};
+                '.sk-ai-corner-module-mobile-menu': {
+                    '&-top-bar': {
+                        '@apply hidden': {};
+                    };
+                    '&-content': {
+                        '@apply hidden': {};
+                    };
+                };
+            };
+        };
+        '&-assistant-library': {
+            '@apply flex justify-between items-center': {};
+            '@apply pl-20 pr-14 py-0': {};
+            '@apply h-80': {};
+            '@apply bg-background-content': {};
+            '&-menu': {
+                '@apply flex gap-12': {};
+                '@apply p-0 m-0': {};
+                '&-item': {
+                    '@apply h-52 w-52': {};
+                    '@apply rounded-groups': {};
+                    '@apply relative': {};
+                    '@apply flex justify-center': {};
+                    '&-button, & > *:first-child': {
+                        '@apply h-52 w-52': {};
+                        '@apply gap-0': {};
+                        '@apply rounded-groups': {};
+                        '@apply p-6': {};
+                        '.sk-ai-assistant-avatar': {
+                            '@apply w-40 h-40': {};
+                        };
+                        '&[aria-current]:not([aria-current="false"])': {
+                            '@apply bg-primary-surface': {};
+                            '.sk-ai-assistant-avatar': {
+                                '@apply ring-1 ring-background-content': {};
+                            };
+                        };
+                    };
+                    '.sk-tooltip': {
+                        '@apply absolute top-full mt-4': {};
+                    };
+                };
+            };
+        };
+    };
+};

package/dist/types/components/ai/ai-feed.d.ts

@@ -1,5 +1,6 @@
 export declare const AIFeed: () => {
     '.sk-ai-feed': {
+        '@apply text-left': {};
         '@apply h-auto max-h-full flex flex-col gap-32': {};
         '&-entry': {
             '@apply flex items-start gap-12': {};

package/dist/types/components/ai/ai-service-module.d.ts

@@ -0,0 +1,110 @@
+export declare const AIServiceModule: (colors: string[]) => {
+    '.sk-ai-service-module': {
+        '@apply flex gap-0': {};
+        '@apply rounded-groups': {};
+        '@apply bg-background-content': {};
+        '@apply shadow-100': {};
+        '&[data-inverted="true"]': {
+            '@apply text-inverted-dark-primary': {};
+            '@apply bg-inverted-background-content': {};
+        };
+        '&-row': {
+            '@apply flex flex-col': {};
+            '@apply grow shrink': {};
+            '@apply p-16 md:p-32': {};
+            '@apply bg-transparent': {};
+            '@apply first:rounded-l-groups': {};
+            '@apply last:rounded-r-groups': {};
+        };
+        '&-content': {
+            '@apply flex flex-col gap-6 md:gap-24': {};
+            '@apply p-4 md:p-8': {};
+            '@apply w-full': {};
+        };
+        '&-header, &-header > *': {
+            '@apply font-header text-display-3-sm md:text-display-3-md xl:text-display-3-lg': {};
+        };
+        '&-form': {
+            '@apply w-full': {};
+            '@apply flex flex-col': {};
+            '@apply gap-8': {};
+            '@apply relative': {};
+            '&-control': {
+                '@apply w-full': {};
+            };
+            '&-label': {
+                '@apply text-label-large': {};
+            };
+            '&-error': {
+                '@apply text-small': {};
+            };
+            '&-input': {
+                '@apply w-full': {};
+                '&-group': {
+                    '@apply w-full': {};
+                    '.sk-form-input-addin-right': {
+                        '@apply pr-8': {};
+                    };
+                };
+                '&-wrapper': {
+                    '@apply relative': {};
+                    '@apply w-full h-48': {};
+                };
+            };
+            '&-readmore': {
+                '@apply text-small': {};
+                '@apply text-light-secondary': {};
+                '&[data-inverted="true"]': {
+                    '@apply text-inverted-light-secondary': {};
+                };
+            };
+        };
+        '&-assistant': {
+            '&-expanded': {
+                '@apply h-[35em] max-h-[35em]': {};
+                '@apply rounded-button': {};
+                '@apply overflow-hidden': {};
+                '@apply flex flex-col gap-0': {};
+                '@apply shadow-200': {};
+                '@apply bg-background-content': {};
+                '@apply absolute top-0 left-0 right-0': {};
+                '&-feed': {
+                    '@apply shrink grow': {};
+                    '@apply pl-16 pt-16 pr-48 pb-24': {};
+                    '@apply max-h-full overflow-y-auto': {};
+                    '@apply text-dark-primary': {};
+                    'sk-ai-markdown': {
+                        '@apply text-dark-secondary': {};
+                    };
+                };
+                '&[data-inverted="true"]': {
+                    '@apply bg-inverted-background-content': {};
+                    '.sk-ai-service-module-feed': {
+                        '@apply text-inverted-dark-primary': {};
+                        'sk-ai-markdown': {
+                            '@apply text-inverted-dark-secondary': {};
+                        };
+                    };
+                };
+                '&-close-button': {
+                    '@apply absolute right-12 top-12': {};
+                };
+            };
+        };
+        '&-questions': {
+            '@apply w-[22.5em] max-w-[22.5em] min-w-[22.5em]': {};
+            '@apply flex flex-col gap-12': {};
+            '@apply pb-8': {};
+            '@apply text-dark-primary': {};
+            '&-title, &-title > *': {
+                '@apply text-label-large': {};
+            };
+            '&-list': {
+                '@apply flex flex-col gap-8': {};
+            };
+            '&[data-inverted="true"]': {
+                '@apply text-inverted-dark-primary': {};
+            };
+        };
+    };
+};

package/dist/types/components/ai/assistant-switch.d.ts

@@ -0,0 +1,45 @@
+export declare const AssistantSwitch: () => {
+    '.sk-ai-assistant-switch': {
+        '@apply flex gap-12': {};
+        '@apply rounded-button': {};
+        '@apply focus-visible:ring ring-ring': {};
+        '@apply justify-start items-center': {};
+        '@apply pr-8': {};
+        '&-icon': {
+            '@apply leading-0': {};
+            '& > *, .sk-avatar, .sk-icon, svg': {
+                '@apply h-32 w-32': {};
+            };
+            '&-switch': {
+                '.sk-avatar-img': {
+                    '@apply min-w-18 max-w-18 w-18 min-h-18 max-h-18 h-18': {};
+                };
+            };
+        };
+        '&-text': {
+            '@apply text-label-medium': {};
+            '@apply text-dark-primary': {};
+        };
+        '&-hover-icon': {
+            '@apply text-dark-secondary': {};
+            '@apply opacity-0': {};
+            '@apply leading-0': {};
+            '.sk-icon, svg': {
+                '@apply h-16 w-16': {};
+            };
+        };
+        '&:hover > &-hover-icon, &:focus-visible > &-hover-icon': {
+            '@apply opacity-100': {};
+        };
+        '&[data-inverted="true"]': {
+            '.sk-ai-assistant-switch': {
+                '&-text': {
+                    '@apply text-inverted-dark-primary': {};
+                };
+                '&-hover-icon': {
+                    '@apply text-inverted-dark-secondary': {};
+                };
+            };
+        };
+    };
+};

package/dist/types/components/ai/input-section.d.ts

@@ -1,7 +1,7 @@
 export declare const InputSection: () => {
     '.sk-ai-inputsection': {
         '@apply w-full': {};
-        '&-input': {
+        '&-input, &-group': {
             '@apply w-full': {};
         };
         '&-wrapper': {
@@ -12,5 +12,10 @@ export declare const InputSection: () => {
                 '@apply shadow-100': {};
             };
         };
+        '&-group': {
+            '.sk-form-input-addin-right': {
+                '@apply pr-4': {};
+            };
+        };
     };
 };

package/dist/types/components/ai/typing-sequence.d.ts

@@ -2,11 +2,11 @@ export declare const TypingSequence: (colors: string[]) => {
     '.sk-ai-typing-sequence': {
         '@apply bg-transparent': {};
         '@apply inline-flex': {};
-        '@apply h-[0.5rem] w-fit gap-6': {};
+        '@apply h-5 w-fit gap-6': {};
         '&-dot': {
             '@apply rounded-full': {};
             '@apply block': {};
-            '@apply w-[0.5rem] h-[0.5rem]': {};
+            '@apply w-5 h-5': {};
             '@apply bg-dark-secondary': {};
             '&[data-inverted="true"]': {
                 "@apply bg-inverted-dark-secondary": {};

package/dist/types/components/alert-banner.d.ts

@@ -0,0 +1,24 @@
+declare function _exports(): {
+    '.alert-banner': {
+        '@apply p-md': {};
+        '&-content': {
+            '@apply w-full m-auto flex': {};
+            '&-wrapper': {
+                '@apply flex-grow flex': {};
+            };
+        };
+        '&-icon': {
+            '@apply mr-[10px]': {};
+        };
+        '&-children': {
+            '@apply w-full underline inline-block max-w-[800px] text-body text-base': {};
+        };
+        '&-close': {
+            '@apply p-4 -m-4 flex flex-col': {};
+        };
+    };
+    '.tab': {
+        '@apply mr-[10px] bg-white pt-4 pb-3 px-4 rounded-b-button shadow-[rgba(0,_0,_0,_0.24)_0px_1.5px_4px]': {};
+    };
+};
+export = _exports;

package/dist/types/components/avatar.d.ts

@@ -1,5 +1,11 @@
 export declare const Avatar: (colors: string[]) => {
     '.sk-avatar': {
+        '&[data-color="primary"]': {
+            '@apply bg-primary-surface  text-light-primary': {};
+            '&[data-accent="true"]': {
+                '@apply bg-inverted-primary-surface  text-inverted-light-primary': {};
+            };
+        };
         '&-img': {
             '@apply min-w-full min-h-full object-cover': {};
         };

package/dist/types/components/button.d.ts

@@ -3,7 +3,7 @@ export declare const Button: (colors: string[]) => {
         '&[data-background="false"]:not(:hover)': {
             '@apply bg-transparent': {};
         };
-        '.btn-has-icon': {
+        '.sk-btn-has-icon': {
             '&-left': {
                 '@apply h-full flex items-center justify-center -ml-2': {};
                 '.sk-icon': {
@@ -19,10 +19,10 @@ export declare const Button: (colors: string[]) => {
                 };
             };
         };
-        '&-lg .btn-has-icon-left': {
+        '&-lg .sk-btn-has-icon-left': {
             '@apply -ml-4': {};
         };
-        '&-lg .btn-has-icon-right': {
+        '&-lg .sk-btn-has-icon-right': {
             '@apply -mr-4': {};
         };
         '&[data-icon=true]': {
@@ -52,7 +52,7 @@ export declare const Button: (colors: string[]) => {
                     '@apply h-24 w-24': {};
                 };
             };
-            '.btn-has-icon': {
+            '.sk-btn-has-icon': {
                 '&-left': {
                     '@apply m-0': {};
                 };
@@ -188,5 +188,16 @@ export declare const Button: (colors: string[]) => {
             '@apply shadow-none disabled:shadow-none disabled:cursor-default cursor-default': {};
             '@apply disabled:text-dark-disabled text-dark-disabled disabled:bg-primary-surface-disabled bg-primary-surface-disabled disabled:border-transparent border-transparent !important': {};
         };
+        '&-loading': {
+            '&-spinner': {
+                '@apply absolute mr-0': {};
+                '&[data-hastext="true"]': {
+                    '@apply relative mr-2': {};
+                };
+            };
+            '&-text': {
+                '@apply opacity-0': {};
+            };
+        };
     };
 };

package/dist/types/components/combobox.d.ts

@@ -54,18 +54,36 @@ export declare const ComboBox: () => {
                 '@apply border-transparent': {};
             };
         };
-        '&-list': {
+        '&-list, &-list.sk-popup-menu': {
             '@apply w-full': {};
             '@apply max-h-[15em] overflow-y-auto': {};
-            '&-option': {
+            '.sk-form-combobox-list-option': {
                 '&.sk-popup-menu-item': {
                     '@apply cursor-default': {};
                     '@apply leading-none': {};
                     '@apply h-auto': {};
                 };
+                '&-group': {
+                    '&-label': {
+                        '&.sk-popup-menu-item': {
+                            '@apply cursor-default': {};
+                            '@apply leading-none': {};
+                            '@apply h-auto': {};
+                            '@apply text-label-medium': {};
+                            '@apply pl-6': {};
+                            '@apply bg-transparent hover:bg-transparent': {};
+                        };
+                    };
+                };
                 '&-checkbox': {
                     '@apply w-0 h-0 m-0 p-0 opacity-0': {};
                 };
+                '&-tick': {
+                    '@apply opacity-0': {};
+                    '&[data-checked="true"]': {
+                        '@apply opacity-100': {};
+                    };
+                };
             };
         };
     };

package/dist/types/components/comments.d.ts

@@ -0,0 +1,30 @@
+declare function _exports(): {
+    '.comment-header': {
+        '@apply w-full flex items-center gap-8 p-16 border-b-4 border-gray-200': {};
+    };
+    '.comment-item': {
+        '@apply w-full': {};
+        '&-container': {
+            '@apply flex justify-between relative': {};
+            '&-textpic': {
+                '@apply flex gap-2': {};
+            };
+        };
+        '&-text': {
+            '@apply text-base font-bold mx-0 mb-0 mt-4': {};
+        };
+        '&-commentorpublished': {
+            '@apply float-right text-neutral-600 m-0': {};
+        };
+    };
+    '.comment-input': {
+        '@apply w-full flex gap-4 px-10 pt-8 pb-10': {};
+        '&-inactive': {
+            '@apply text-neutral-300 !text-3xl': {};
+        };
+        '&-active': {
+            '@apply text-primary !text-3xl': {};
+        };
+    };
+};
+export = _exports;

package/dist/types/components/context-menu.d.ts

@@ -0,0 +1,39 @@
+declare function _exports(): {
+    '.context-menu-wrapper': {
+        '@apply relative inline': {};
+        '> a, > button': {
+            '@apply inline-flex': {};
+        };
+        '.context-menu-items': {
+            '@apply absolute rounded bg-white border border-body z-10 drop-shadow-md mt-sm flex flex-col justify-start items-start': {};
+            '.context-menu-item': {
+                '@apply text-base text-body hover:text-white focus-within:text-white min-h-[3.5rem] w-full flex justify-start items-center': {};
+                'a, button': {
+                    '@apply text-base font-normal min-h-[3.5rem] py-[0.6rem] items-center w-full rounded-none border-transparent px-md flex justify-start': {};
+                    '&.active': {
+                        '@apply bg-primary text-white': {};
+                    };
+                    '.MuiSvgIcon-root': {
+                        '@apply text-base': {};
+                    };
+                };
+                '&:first-child a,&:first-child button': {
+                    '@apply pt-[0.675rem] pb-[0.525rem]': {};
+                };
+                '&:last-child a,&:last-child button': {
+                    '@apply pt-[0.525rem] pb-[0.675rem]': {};
+                };
+                '&:only-child a,&:only-child button': {
+                    '@apply py-[0.6rem]': {};
+                };
+            };
+            hr: {
+                '@apply mx-sm w-[calc(100%_-_16px)]': {};
+            };
+            '&.right': {
+                '@apply right-0': {};
+            };
+        };
+    };
+};
+export = _exports;