@sk-web-gui/core 4.1.1 → 4.2.0

package/dist/cjs/components/accordion.js

@@ -10,121 +10,141 @@ Object.defineProperty(exports, "Accordion", {
 });
 const Accordion = ()=>({
         '.sk-disclosure': {
+            '@apply mt-6 mb-8': {},
+            '@apply text-dark-secondary': {},
+            '&[data-inverted="true"]': {
+                '@apply text-inverted-dark-secondary': {}
+            },
             '&-icon': {
                 '@apply flex self-center': {}
             },
             '&-header': {
-                '@apply mt-6 mb-8': {},
-                '@apply flex flex-col text-left': {},
+                '@apply py-8': {},
+                '@apply flex flex-row text-left': {},
                 '@apply cursor-pointer': {},
-                '*': {
-                    '@apply cursor-pointer': {}
+                '@apply items-center justify-between': {},
+                '@apply gap-16': {},
+                '&-icon': {
+                    '@apply w-32 h-32': {},
+                    '&-sm': {
+                        '@apply w-20 min-h-20': {}
+                    },
+                    '&-md': {
+                        '@apply w-24 min-h-24': {}
+                    }
+                },
+                '&-title': {
+                    '@apply text-dark-primary': {},
+                    '@apply w-full': {},
+                    '@apply flex flex-row': {},
+                    '@apply items-center': {},
+                    '@apply grow shrink': {},
+                    '&[data-inverted="true"]': {
+                        '@apply text-inverted-dark-primary': {}
+                    },
+                    '*': {
+                        '@apply m-0': {},
+                        '@apply text-inherit': {},
+                        fontSize: 'inherit',
+                        FontFamily: 'inherit',
+                        lineHeight: 'inherit'
+                    },
+                    '&-disabled': {
+                        '@apply text-dark-disabled': {},
+                        '&[data-inverted="true"]': {
+                            '@apply text-inverted-dark-disabled': {}
+                        }
+                    },
+                    '&-sm': {
+                        '@apply gap-16': {},
+                        '@apply text-h4-sm': {},
+                        '&[data-variant="alt"]': {
+                            '@apply gap-12': {}
+                        }
+                    },
+                    '&-md': {
+                        '@apply gap-16': {},
+                        '@apply text-h4-md': {},
+                        '&[data-variant="alt"]': {
+                            '@apply gap-12': {}
+                        }
+                    },
+                    '&-lg': {
+                        '@apply gap-16': {},
+                        '&[data-variant="alt"]': {
+                            '@apply gap-16': {},
+                            '@apply text-h3-md': {}
+                        }
+                    },
+                    '&-divider': {
+                        '@apply border-divider': {},
+                        '&[data-inverted="true"]': {
+                            '@apply border-inverted-divider': {}
+                        }
+                    }
                 },
                 '&:focus-visible': {
                     '@apply outline-0': {}
                 },
-                '&-icon': {
-                    '@apply ml-auto': {},
-                    '@apply text-dark-secondary': {},
-                    svg: {
-                        '@apply w-20 h-20': {}
-                    }
-                },
-                '&[data-disabled="true"]': {
+                '&[aria-disabled="true"]': {
                     '@apply text-dark-disabled': {},
-                    '.sk-disclosure-title': {
-                        '@apply text-dark-disabled': {}
-                    },
                     '@apply cursor-default': {},
                     '*': {
                         '@apply cursor-default': {}
+                    },
+                    '&[data-inverted="true"]': {
+                        '@apply text-inverted-dark-disabled': {}
                     }
-                }
-            },
-            '&-label': {
-                '@apply shrink-0': {}
-            },
-            '&-toggle': {
-                '@apply flex items-center justify-between': {},
-                '@apply gap-16': {},
-                '.sk-icon': {
-                    '@apply w-32 h-32': {}
-                }
-            },
-            '&-title': {
-                '@apply text-dark-primary': {},
-                '&-wrapper': {
-                    '@apply w-full': {},
-                    '@apply flex flex-row': {},
-                    '@apply items-center': {}
-                }
-            },
-            '&-sm': {
-                '.sk-disclosure-title': {
-                    '@apply text-h4-sm font-bold': {},
-                    '&-wrapper': {
+                },
+                '&-sm': {
+                    '@apply gap-16': {},
+                    '@apply h-32': {},
+                    '&[data-variant="alt"]': {
                         '@apply gap-12': {}
+                    },
+                    '&[data-variant="default"]': {
+                        '@apply min-h-40': {}
                     }
                 },
-                '.sk-disclosure-toggle': {
-                    '@apply gap-12': {},
-                    '.sk-icon': {
-                        '@apply w-20 min-h-20': {}
+                '&-md': {
+                    '@apply gap-16': {},
+                    '&[data-variant="alt"]': {
+                        '@apply gap-12': {}
+                    },
+                    '&[data-variant="default"]': {
+                        '@apply min-h-56': {}
                     }
                 },
-                '.sk-disclosure-support': {
-                    '@apply text-small': {}
-                },
-                '&[data-variant="default"]': {
-                    '.sk-disclosure-toggle': {
-                        '@apply py-4': {},
-                        '@apply min-h-40': {}
-                    },
+                '&-lg': {
+                    '@apply gap-16': {},
                     '.sk-disclosure-header-icon': {
-                        '@apply w-32 h-32': {}
+                        '@apply w-32 min-h-32': {}
+                    },
+                    '&[data-variant="alt"]': {
+                        '@apply gap-16': {}
                     }
-                },
-                '&[data-variant="alt"]': {}
+                }
+            },
+            '&[data-variant="alt"]': {
+                '.sk-disclosure-header': {
+                    '@apply py-0': {},
+                    '@apply h-32': {}
+                }
+            },
+            '&-label': {
+                '@apply shrink-0': {}
             },
             '&-md': {
-                '.sk-disclosure-title': {
-                    '@apply text-h4-md font-bold': {},
-                    '&-wrapper': {
-                        '@apply gap-12': {}
-                    }
-                },
-                '.sk-disclosure-toggle': {
-                    '@apply gap-12': {},
-                    '.sk-icon': {
-                        '@apply w-24 min-h-24': {}
-                    }
-                },
-                '.sk-disclosure-support': {
-                    '@apply text-body': {}
-                },
                 '&[data-variant="default"]': {
-                    '.sk-disclosure-toggle': {
+                    '.sk-disclosure-header': {
                         '@apply py-8': {},
                         '@apply min-h-56': {}
                     },
-                    '.sk-disclosure-header-icon': {
+                    '.sk-disclosure-header-button': {
                         '@apply w-40 h-40': {}
                     }
                 }
             },
-            '&-lg': {
-                '&[data-variant="alt"]': {
-                    '.sk-disclosure-support': {
-                        '@apply text-large': {}
-                    },
-                    '.sk-disclosure-title': {
-                        '@apply text-h3-md font-bold': {},
-                        '&-wrapper': {
-                            '@apply gap-16': {}
-                        }
-                    }
-                }
-            },
             '&-body': {
                 '&[data-size="sm"]': {
                     '@apply pr-12': {}
@@ -141,13 +161,13 @@ const Accordion = ()=>({
                 '@apply mr-32': {},
                 '@apply gap-8': {},
                 '@apply py-0': {},
-                transitionProperty: 'visibility, height, opacity, padding, margin',
+                transitionProperty: 'height, opacity, padding, margin',
                 transitionDuration: '180ms',
-                '&[aria-hidden="true"], &[data-hidden="true"]': {
-                    '@apply my-0 invisible max-h-0 opacity-0': {}
+                '&[aria-hidden="true"]': {
+                    '@apply my-0 overflow-hidden max-h-0 opacity-0': {}
                 },
-                '&[aria-hidden="false"], &[data-hidden="false"]': {
-                    '@apply block opacity-100 visible': {}
+                '&[aria-hidden="false"]': {
+                    '@apply block opacity-100': {}
                 },
                 '&[data-variant="alt"]': {
                     '@apply mt-24': {},
@@ -179,33 +199,15 @@ const Accordion = ()=>({
                 '.sk-disclosure': {
                     transitionProperty: 'margin',
                     transitionDuration: '180ms',
-                    '@apply border-b-1 border-divider': {}
+                    '@apply border-b-1 border-divider': {},
+                    '&[data-inverted="true"]': {
+                        '@apply border-inverted-divider': {}
+                    }
                 },
                 '&:last-child .sk-disclosure': {
                     '@apply border-b-transparent': {}
                 }
             }
-        },
-        '&[data-inverted="true"]': {
-            '&.sk-disclosure': {
-                '&-icon': {
-                    '@apply text-inverted-dark-secondary': {}
-                },
-                '&[data-disabled="true"]': {
-                    '@apply text-inverted-dark-disabled': {},
-                    '.sk-disclosure-title': {
-                        '@apply text-inverted-dark-disabled': {}
-                    }
-                },
-                '&-title': {
-                    '@apply text-inverted-dark-primary': {}
-                }
-            },
-            '&.sk-accordion': {
-                '&-item': {
-                    '@apply border-inverted-divider': {}
-                }
-            }
         }
     });
 

package/dist/cjs/components/accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/accordion.ts"],"sourcesContent":["export const Accordion = () => ({\r\n  '.sk-disclosure': {\r\n    '&-icon': {\r\n      '@apply flex self-center': {},\r\n    },\r\n    '&-header': {\r\n      '@apply mt-6 mb-8': {},\r\n      '@apply flex flex-col text-left': {},\r\n      '@apply cursor-pointer': {},\r\n      '*': {\r\n        '@apply cursor-pointer': {},\r\n      },\r\n      '&:focus-visible': {\r\n        '@apply outline-0': {},\r\n      },\r\n\r\n      '&-icon': {\r\n        '@apply ml-auto': {},\r\n        '@apply text-dark-secondary': {},\r\n        svg: {\r\n          '@apply w-20 h-20': {},\r\n        },\r\n      },\r\n      '&[data-disabled=\"true\"]': {\r\n        '@apply text-dark-disabled': {},\r\n        '.sk-disclosure-title': {\r\n          '@apply text-dark-disabled': {},\r\n        },\r\n        '@apply cursor-default': {},\r\n        '*': {\r\n          '@apply cursor-default': {},\r\n        },\r\n      },\r\n    },\r\n    '&-label': {\r\n      '@apply shrink-0': {},\r\n    },\r\n    '&-toggle': {\r\n      '@apply flex items-center justify-between': {},\r\n      '@apply gap-16': {},\r\n      '.sk-icon': {\r\n        '@apply w-32 h-32': {},\r\n      },\r\n    },\r\n    '&-title': {\r\n      '@apply text-dark-primary': {},\r\n      '&-wrapper': {\r\n        '@apply w-full': {},\r\n        '@apply flex flex-row': {},\r\n        '@apply items-center': {},\r\n      },\r\n    },\r\n\r\n    '&-sm': {\r\n      '.sk-disclosure-title': {\r\n        '@apply text-h4-sm font-bold': {},\r\n        '&-wrapper': {\r\n          '@apply gap-12': {},\r\n        },\r\n      },\r\n      '.sk-disclosure-toggle': {\r\n        '@apply gap-12': {},\r\n        '.sk-icon': {\r\n          '@apply w-20 min-h-20': {},\r\n        },\r\n      },\r\n      '.sk-disclosure-support': {\r\n        '@apply text-small': {},\r\n      },\r\n      '&[data-variant=\"default\"]': {\r\n        '.sk-disclosure-toggle': {\r\n          '@apply py-4': {},\r\n          '@apply min-h-40': {},\r\n        },\r\n        '.sk-disclosure-header-icon': {\r\n          '@apply w-32 h-32': {},\r\n        },\r\n      },\r\n      '&[data-variant=\"alt\"]': {},\r\n    },\r\n    '&-md': {\r\n      '.sk-disclosure-title': {\r\n        '@apply text-h4-md font-bold': {},\r\n        '&-wrapper': {\r\n          '@apply gap-12': {},\r\n        },\r\n      },\r\n      '.sk-disclosure-toggle': {\r\n        '@apply gap-12': {},\r\n        '.sk-icon': {\r\n          '@apply w-24 min-h-24': {},\r\n        },\r\n      },\r\n      '.sk-disclosure-support': {\r\n        '@apply text-body': {},\r\n      },\r\n      '&[data-variant=\"default\"]': {\r\n        '.sk-disclosure-toggle': {\r\n          '@apply py-8': {},\r\n          '@apply min-h-56': {},\r\n        },\r\n        '.sk-disclosure-header-icon': {\r\n          '@apply w-40 h-40': {},\r\n        },\r\n      },\r\n    },\r\n    '&-lg': {\r\n      '&[data-variant=\"alt\"]': {\r\n        '.sk-disclosure-support': {\r\n          '@apply text-large': {},\r\n        },\r\n        '.sk-disclosure-title': {\r\n          '@apply text-h3-md font-bold': {},\r\n          '&-wrapper': {\r\n            '@apply gap-16': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-body': {\r\n      '&[data-size=\"sm\"]': {\r\n        '@apply pr-12': {},\r\n      },\r\n      '&[data-size=\"md\"]': {\r\n        '@apply pr-12': {},\r\n      },\r\n      '&[data-size=\"lg\"]': {\r\n        '@apply pr-16': {},\r\n      },\r\n      '@apply text-base': {},\r\n      '@apply flex flex-col': {},\r\n      '@apply mb-32': {},\r\n      '@apply mr-32': {},\r\n      '@apply gap-8': {},\r\n      '@apply py-0': {},\r\n      transitionProperty: 'visibility, height, opacity, padding, margin',\r\n\r\n      transitionDuration: '180ms',\r\n\r\n      '&[aria-hidden=\"true\"], &[data-hidden=\"true\"]': {\r\n        '@apply my-0 invisible max-h-0 opacity-0': {},\r\n      },\r\n\r\n      '&[aria-hidden=\"false\"], &[data-hidden=\"false\"]': {\r\n        '@apply block opacity-100 visible': {},\r\n      },\r\n\r\n      '&[data-variant=\"alt\"]': {\r\n        '@apply mt-24': {},\r\n        '&[data-size=\"sm\"]': {\r\n          '@apply pr-12': {},\r\n        },\r\n        '&[data-size=\"md\"]': {\r\n          '@apply pr-12': {},\r\n        },\r\n        '&[data-size=\"lg\"]': {\r\n          '@apply pr-16': {},\r\n        },\r\n        '&[data-has-icon=\"true\"]': {\r\n          '&[data-size=\"sm\"]': {\r\n            '@apply ml-32': {},\r\n          },\r\n          '&[data-size=\"md\"]': {\r\n            '@apply ml-36': {},\r\n          },\r\n          '&[data-size=\"lg\"]': {\r\n            '@apply ml-48': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n  },\r\n  '.sk-accordion': {\r\n    '&-item': {\r\n      '.sk-disclosure': {\r\n        transitionProperty: 'margin',\r\n        transitionDuration: '180ms',\r\n        '@apply border-b-1 border-divider': {},\r\n      },\r\n\r\n      '&:last-child .sk-disclosure': {\r\n        '@apply border-b-transparent': {},\r\n      },\r\n    },\r\n  },\r\n\r\n  '&[data-inverted=\"true\"]': {\r\n    '&.sk-disclosure': {\r\n      '&-icon': {\r\n        '@apply text-inverted-dark-secondary': {},\r\n      },\r\n\r\n      '&[data-disabled=\"true\"]': {\r\n        '@apply text-inverted-dark-disabled': {},\r\n        '.sk-disclosure-title': {\r\n          '@apply text-inverted-dark-disabled': {},\r\n        },\r\n      },\r\n\r\n      '&-title': {\r\n        '@apply text-inverted-dark-primary': {},\r\n      },\r\n    },\r\n    '&.sk-accordion': {\r\n      '&-item': {\r\n        '@apply border-inverted-divider': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"names":["Accordion","svg","transitionProperty","transitionDuration"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/accordion.ts"],"sourcesContent":["export const Accordion = () => ({\r\n  '.sk-disclosure': {\r\n    '@apply mt-6 mb-8': {},\r\n    '@apply text-dark-secondary': {},\r\n    '&[data-inverted=\"true\"]': {\r\n      '@apply text-inverted-dark-secondary': {},\r\n    },\r\n    '&-icon': {\r\n      '@apply flex self-center': {},\r\n    },\r\n    '&-header': {\r\n      '@apply py-8': {},\r\n      '@apply flex flex-row text-left': {},\r\n      '@apply cursor-pointer': {},\r\n      '@apply items-center justify-between': {},\r\n      '@apply gap-16': {},\r\n      '&-icon': {\r\n        '@apply w-32 h-32': {},\r\n        '&-sm': {\r\n          '@apply w-20 min-h-20': {},\r\n        },\r\n        '&-md': {\r\n          '@apply w-24 min-h-24': {},\r\n        },\r\n      },\r\n\r\n      '&-title': {\r\n        '@apply text-dark-primary': {},\r\n        '@apply w-full': {},\r\n        '@apply flex flex-row': {},\r\n        '@apply items-center': {},\r\n        '@apply grow shrink': {},\r\n        '&[data-inverted=\"true\"]': {\r\n          '@apply text-inverted-dark-primary': {},\r\n        },\r\n        '*': {\r\n          '@apply m-0': {},\r\n          '@apply text-inherit': {},\r\n          fontSize: 'inherit',\r\n          FontFamily: 'inherit',\r\n          lineHeight: 'inherit',\r\n        },\r\n        '&-disabled': {\r\n          '@apply text-dark-disabled': {},\r\n          '&[data-inverted=\"true\"]': {\r\n            '@apply text-inverted-dark-disabled': {},\r\n          },\r\n        },\r\n        '&-sm': {\r\n          '@apply gap-16': {},\r\n          '@apply text-h4-sm': {},\r\n          '&[data-variant=\"alt\"]': {\r\n            '@apply gap-12': {},\r\n          },\r\n        },\r\n        '&-md': {\r\n          '@apply gap-16': {},\r\n          '@apply text-h4-md': {},\r\n          '&[data-variant=\"alt\"]': {\r\n            '@apply gap-12': {},\r\n          },\r\n        },\r\n        '&-lg': {\r\n          '@apply gap-16': {},\r\n          '&[data-variant=\"alt\"]': {\r\n            '@apply gap-16': {},\r\n            '@apply text-h3-md': {},\r\n          },\r\n        },\r\n        '&-divider': {\r\n          '@apply border-divider': {},\r\n          '&[data-inverted=\"true\"]': {\r\n            '@apply border-inverted-divider': {},\r\n          },\r\n        },\r\n      },\r\n\r\n      '&:focus-visible': {\r\n        '@apply outline-0': {},\r\n      },\r\n      '&[aria-disabled=\"true\"]': {\r\n        '@apply text-dark-disabled': {},\r\n        '@apply cursor-default': {},\r\n        '*': {\r\n          '@apply cursor-default': {},\r\n        },\r\n        '&[data-inverted=\"true\"]': {\r\n          '@apply text-inverted-dark-disabled': {},\r\n        },\r\n      },\r\n      '&-sm': {\r\n        '@apply gap-16': {},\r\n        '@apply h-32': {},\r\n        '&[data-variant=\"alt\"]': {\r\n          '@apply gap-12': {},\r\n        },\r\n        '&[data-variant=\"default\"]': {\r\n          '@apply min-h-40': {},\r\n        },\r\n      },\r\n      '&-md': {\r\n        '@apply gap-16': {},\r\n        '&[data-variant=\"alt\"]': {\r\n          '@apply gap-12': {},\r\n        },\r\n        '&[data-variant=\"default\"]': {\r\n          '@apply min-h-56': {},\r\n        },\r\n      },\r\n      '&-lg': {\r\n        '@apply gap-16': {},\r\n        '.sk-disclosure-header-icon': {\r\n          '@apply w-32 min-h-32': {},\r\n        },\r\n        '&[data-variant=\"alt\"]': {\r\n          '@apply gap-16': {},\r\n        },\r\n      },\r\n    },\r\n    '&[data-variant=\"alt\"]': {\r\n      '.sk-disclosure-header': {\r\n        '@apply py-0': {},\r\n        '@apply h-32': {},\r\n      },\r\n    },\r\n    '&-label': {\r\n      '@apply shrink-0': {},\r\n    },\r\n\r\n    '&-md': {\r\n      '&[data-variant=\"default\"]': {\r\n        '.sk-disclosure-header': {\r\n          '@apply py-8': {},\r\n          '@apply min-h-56': {},\r\n        },\r\n        '.sk-disclosure-header-button': {\r\n          '@apply w-40 h-40': {},\r\n        },\r\n      },\r\n    },\r\n\r\n    '&-body': {\r\n      '&[data-size=\"sm\"]': {\r\n        '@apply pr-12': {},\r\n      },\r\n      '&[data-size=\"md\"]': {\r\n        '@apply pr-12': {},\r\n      },\r\n      '&[data-size=\"lg\"]': {\r\n        '@apply pr-16': {},\r\n      },\r\n      '@apply text-base': {},\r\n      '@apply flex flex-col': {},\r\n      '@apply mb-32': {},\r\n      '@apply mr-32': {},\r\n      '@apply gap-8': {},\r\n      '@apply py-0': {},\r\n      transitionProperty: 'height, opacity, padding, margin',\r\n\r\n      transitionDuration: '180ms',\r\n\r\n      '&[aria-hidden=\"true\"]': {\r\n        '@apply my-0 overflow-hidden max-h-0 opacity-0': {},\r\n      },\r\n\r\n      '&[aria-hidden=\"false\"]': {\r\n        '@apply block opacity-100': {},\r\n      },\r\n\r\n      '&[data-variant=\"alt\"]': {\r\n        '@apply mt-24': {},\r\n        '&[data-size=\"sm\"]': {\r\n          '@apply pr-12': {},\r\n        },\r\n        '&[data-size=\"md\"]': {\r\n          '@apply pr-12': {},\r\n        },\r\n        '&[data-size=\"lg\"]': {\r\n          '@apply pr-16': {},\r\n        },\r\n        '&[data-has-icon=\"true\"]': {\r\n          '&[data-size=\"sm\"]': {\r\n            '@apply ml-32': {},\r\n          },\r\n          '&[data-size=\"md\"]': {\r\n            '@apply ml-36': {},\r\n          },\r\n          '&[data-size=\"lg\"]': {\r\n            '@apply ml-48': {},\r\n          },\r\n        },\r\n      },\r\n    },\r\n  },\r\n  '.sk-accordion': {\r\n    '&-item': {\r\n      '.sk-disclosure': {\r\n        transitionProperty: 'margin',\r\n        transitionDuration: '180ms',\r\n        '@apply border-b-1 border-divider': {},\r\n        '&[data-inverted=\"true\"]': {\r\n          '@apply border-inverted-divider': {},\r\n        },\r\n      },\r\n\r\n      '&:last-child .sk-disclosure': {\r\n        '@apply border-b-transparent': {},\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"names":["Accordion","fontSize","FontFamily","lineHeight","transitionProperty","transitionDuration"],"mappings":"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"}

package/dist/cjs/components/ai/chat-input.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ChatInput", {
+    enumerable: true,
+    get: function() {
+        return ChatInput;
+    }
+});
+const ChatInput = ()=>({
+        '.sk-chat-input': {
+            '&-textarea': {
+                '@apply flex': {},
+                '@apply grow shrink': {},
+                '@apply self-start': {},
+                '&[data-wrap="true"]': {
+                    '@apply w-full': {}
+                },
+                '&[data-wrap="false"]': {
+                    '@apply w-auto': {}
+                },
+                '&-sm': {
+                    '@apply min-h-34+1': {},
+                    '@apply max-h-[11rem]': {},
+                    '@apply mt-5': {}
+                },
+                '&-md': {
+                    '@apply min-h-42': {},
+                    '@apply max-h-[13.4rem]': {},
+                    '@apply mt-4': {}
+                },
+                '&-lg': {
+                    '@apply min-h-56': {},
+                    '@apply max-h-[14.2rem]': {},
+                    '@apply mt-6': {}
+                }
+            },
+            '&-wrapper': {
+                '@apply flex flex-row flex-wrap': {},
+                '@apply justify-end': {}
+            },
+            '&-submitbutton': {
+                '@apply shrink-0 flex justify-self-end': {},
+                '@apply relative': {},
+                '&-sm': {
+                    '@apply py-5 px-7': {}
+                },
+                '&-md': {
+                    '@apply py-7 px-9': {}
+                },
+                '&-lg': {
+                    '@apply py-11 px-13': {}
+                },
+                '&-inner-wrapper': {
+                    '@apply relative inline-flex items-center': {}
+                },
+                '&-tooltip': {
+                    '@apply absolute right-full': {}
+                }
+            },
+            '&-toolbar': {
+                '@apply flex': {},
+                '@apply relative': {},
+                '@apply gap-6': {},
+                '@apply bg-transparent': {},
+                '@apply justify-start': {},
+                '@apply w-auto': {},
+                '@apply shrink grow': {},
+                '&-sm': {
+                    '@apply py-5 px-7': {}
+                },
+                '&-md': {
+                    '@apply py-7 px-9': {}
+                },
+                '&-lg': {
+                    '@apply py-11 px-13': {}
+                },
+                '&-button': {
+                    '&-wrapper': {
+                        '@apply relative inline-flex justify-center overflow-visible': {}
+                    },
+                    '&-tooltip': {
+                        '@apply absolute shrink-0 bottom-full w-max': {}
+                    }
+                }
+            }
+        }
+    });
+
+//# sourceMappingURL=chat-input.js.map

package/dist/cjs/components/ai/chat-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ai/chat-input.ts"],"sourcesContent":["export const ChatInput = () => ({\r\n  '.sk-chat-input': {\r\n    '&-textarea': {\r\n      '@apply flex': {},\r\n      '@apply grow shrink': {},\r\n      '@apply self-start': {},\r\n      '&[data-wrap=\"true\"]': {\r\n        '@apply w-full': {},\r\n      },\r\n      '&[data-wrap=\"false\"]': {\r\n        '@apply w-auto': {},\r\n      },\r\n      '&-sm': {\r\n        '@apply min-h-34+1': {},\r\n        '@apply max-h-[11rem]': {},\r\n        '@apply mt-5': {},\r\n      },\r\n      '&-md': {\r\n        '@apply min-h-42': {},\r\n        '@apply max-h-[13.4rem]': {},\r\n        '@apply mt-4': {},\r\n      },\r\n      '&-lg': {\r\n        '@apply min-h-56': {},\r\n        '@apply max-h-[14.2rem]': {},\r\n        '@apply mt-6': {},\r\n      },\r\n    },\r\n\r\n    '&-wrapper': {\r\n      '@apply flex flex-row flex-wrap': {},\r\n      '@apply justify-end': {},\r\n    },\r\n\r\n    '&-submitbutton': {\r\n      '@apply shrink-0 flex justify-self-end': {},\r\n      '@apply relative': {},\r\n      '&-sm': {\r\n        '@apply py-5 px-7': {},\r\n      },\r\n      '&-md': {\r\n        '@apply py-7 px-9': {},\r\n      },\r\n      '&-lg': {\r\n        '@apply py-11 px-13': {},\r\n      },\r\n      '&-inner-wrapper': {\r\n        '@apply relative inline-flex items-center': {},\r\n      },\r\n      '&-tooltip': {\r\n        '@apply absolute right-full': {},\r\n      },\r\n    },\r\n\r\n    '&-toolbar': {\r\n      '@apply flex': {},\r\n      '@apply relative': {},\r\n      '@apply gap-6': {},\r\n      '@apply bg-transparent': {},\r\n      '@apply justify-start': {},\r\n      '@apply w-auto': {},\r\n      '@apply shrink grow': {},\r\n      '&-sm': {\r\n        '@apply py-5 px-7': {},\r\n      },\r\n      '&-md': {\r\n        '@apply py-7 px-9': {},\r\n      },\r\n      '&-lg': {\r\n        '@apply py-11 px-13': {},\r\n      },\r\n      '&-button': {\r\n        '&-wrapper': {\r\n          '@apply relative inline-flex justify-center overflow-visible': {},\r\n        },\r\n        '&-tooltip': {\r\n          '@apply absolute shrink-0 bottom-full w-max': {},\r\n        },\r\n      },\r\n    },\r\n  },\r\n});\r\n"],"names":["ChatInput"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,YAAY,IAAO,CAAA;QAC9B,kBAAkB;YAChB,cAAc;gBACZ,eAAe,CAAC;gBAChB,sBAAsB,CAAC;gBACvB,qBAAqB,CAAC;gBACtB,uBAAuB;oBACrB,iBAAiB,CAAC;gBACpB;gBACA,wBAAwB;oBACtB,iBAAiB,CAAC;gBACpB;gBACA,QAAQ;oBACN,qBAAqB,CAAC;oBACtB,wBAAwB,CAAC;oBACzB,eAAe,CAAC;gBAClB;gBACA,QAAQ;oBACN,mBAAmB,CAAC;oBACpB,0BAA0B,CAAC;oBAC3B,eAAe,CAAC;gBAClB;gBACA,QAAQ;oBACN,mBAAmB,CAAC;oBACpB,0BAA0B,CAAC;oBAC3B,eAAe,CAAC;gBAClB;YACF;YAEA,aAAa;gBACX,kCAAkC,CAAC;gBACnC,sBAAsB,CAAC;YACzB;YAEA,kBAAkB;gBAChB,yCAAyC,CAAC;gBAC1C,mBAAmB,CAAC;gBACpB,QAAQ;oBACN,oBAAoB,CAAC;gBACvB;gBACA,QAAQ;oBACN,oBAAoB,CAAC;gBACvB;gBACA,QAAQ;oBACN,sBAAsB,CAAC;gBACzB;gBACA,mBAAmB;oBACjB,4CAA4C,CAAC;gBAC/C;gBACA,aAAa;oBACX,8BAA8B,CAAC;gBACjC;YACF;YAEA,aAAa;gBACX,eAAe,CAAC;gBAChB,mBAAmB,CAAC;gBACpB,gBAAgB,CAAC;gBACjB,yBAAyB,CAAC;gBAC1B,wBAAwB,CAAC;gBACzB,iBAAiB,CAAC;gBAClB,sBAAsB,CAAC;gBACvB,QAAQ;oBACN,oBAAoB,CAAC;gBACvB;gBACA,QAAQ;oBACN,oBAAoB,CAAC;gBACvB;gBACA,QAAQ;oBACN,sBAAsB,CAAC;gBACzB;gBACA,YAAY;oBACV,aAAa;wBACX,+DAA+D,CAAC;oBAClE;oBACA,aAAa;wBACX,8CAA8C,CAAC;oBACjD;gBACF;YACF;QACF;IACF,CAAA"}

package/dist/cjs/components/alert.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Alert", {
+    enumerable: true,
+    get: function() {
+        return Alert;
+    }
+});
+const Alert = ()=>({
+        '.sk-alert': {
+            '@apply flex rounded-button': {},
+            '&-sm': {
+                '@apply rounded-xl gap-8 pl-10 pr-6': {},
+                '.sk-alert-icon': {
+                    '@apply pt-6': {}
+                }
+            },
+            '&-md': {
+                '@apply gap-12 pl-16 pr-12 py-12': {},
+                '.sk-alert-icon': {
+                    '@apply pt-6': {}
+                }
+            },
+            '&-lg': {
+                '@apply gap-12 pl-16 pr-12 py-12': {},
+                '.sk-alert-icon': {
+                    '@apply pt-6': {}
+                }
+            },
+            '&-content': {
+                '@apply flex flex-col w-full grow': {},
+                '&-description': {
+                    '@apply text-small': {}
+                },
+                '&-sm': {
+                    '@apply py-6': {},
+                    '.sk-alert-content-title': {
+                        '@apply text-small m-0': {}
+                    }
+                },
+                '&-md': {
+                    '@apply py-4': {},
+                    '.sk-alert-content-title': {
+                        '@apply text-base': {}
+                    }
+                },
+                '&-lg': {
+                    '@apply py-4': {},
+                    '.sk-alert-content-title': {
+                        '@apply text-large': {}
+                    }
+                }
+            },
+            '&-icon': {
+                '@apply flex-none': {}
+            },
+            '&-button': {
+                '@apply flex-none justify-self-end': {}
+            },
+            '&-info': {
+                '@apply border-1 border-vattjom-surface-primary bg-vattjom-background-100': {}
+            },
+            '&-neutral': {
+                '@apply border-1 border-divider bg-background-100': {}
+            },
+            '&-success': {
+                '@apply border-1 border-gronsta-surface-primary bg-gronsta-background-100': {}
+            },
+            '&-warning': {
+                '@apply border-1 border-warning-surface-primary bg-warning-background-100': {}
+            },
+            '&-error': {
+                '@apply border-1 border-error-surface-primary bg-error-background-100': {}
+            }
+        }
+    });
+
+//# sourceMappingURL=alert.js.map

package/dist/cjs/components/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/alert.ts"],"sourcesContent":["export const Alert = () => ({\r\n  '.sk-alert': {\r\n    '@apply flex rounded-button': {},\r\n    '&-sm': {\r\n      '@apply rounded-xl gap-8 pl-10 pr-6': {},\r\n      '.sk-alert-icon': {\r\n        '@apply pt-6': {},\r\n      },\r\n    },\r\n    '&-md': {\r\n      '@apply gap-12 pl-16 pr-12 py-12': {},\r\n      '.sk-alert-icon': {\r\n        '@apply pt-6': {},\r\n      },\r\n    },\r\n    '&-lg': {\r\n      '@apply gap-12 pl-16 pr-12 py-12': {},\r\n      '.sk-alert-icon': {\r\n        '@apply pt-6': {},\r\n      },\r\n    },\r\n    '&-content': {\r\n      '@apply flex flex-col w-full grow': {},\r\n      '&-description': {\r\n        '@apply text-small': {},\r\n      },\r\n      '&-sm': {\r\n        '@apply py-6': {},\r\n        '.sk-alert-content-title': {\r\n          '@apply text-small m-0': {},\r\n        },\r\n      },\r\n      '&-md': {\r\n        '@apply py-4': {},\r\n        '.sk-alert-content-title': {\r\n          '@apply text-base': {},\r\n        },\r\n      },\r\n      '&-lg': {\r\n        '@apply py-4': {},\r\n        '.sk-alert-content-title': {\r\n          '@apply text-large': {},\r\n        },\r\n      },\r\n    },\r\n    '&-icon': {\r\n      '@apply flex-none': {},\r\n    },\r\n    '&-button': {\r\n      '@apply flex-none justify-self-end': {},\r\n    },\r\n    '&-info': {\r\n      '@apply border-1 border-vattjom-surface-primary bg-vattjom-background-100': {},\r\n    },\r\n    '&-neutral': {\r\n      '@apply border-1 border-divider bg-background-100': {},\r\n    },\r\n    '&-success': {\r\n      '@apply border-1 border-gronsta-surface-primary bg-gronsta-background-100': {},\r\n    },\r\n    '&-warning': {\r\n      '@apply border-1 border-warning-surface-primary bg-warning-background-100': {},\r\n    },\r\n    '&-error': {\r\n      '@apply border-1 border-error-surface-primary bg-error-background-100': {},\r\n    },\r\n  },\r\n});\r\n"],"names":["Alert"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,QAAQ,IAAO,CAAA;QAC1B,aAAa;YACX,8BAA8B,CAAC;YAC/B,QAAQ;gBACN,sCAAsC,CAAC;gBACvC,kBAAkB;oBAChB,eAAe,CAAC;gBAClB;YACF;YACA,QAAQ;gBACN,mCAAmC,CAAC;gBACpC,kBAAkB;oBAChB,eAAe,CAAC;gBAClB;YACF;YACA,QAAQ;gBACN,mCAAmC,CAAC;gBACpC,kBAAkB;oBAChB,eAAe,CAAC;gBAClB;YACF;YACA,aAAa;gBACX,oCAAoC,CAAC;gBACrC,iBAAiB;oBACf,qBAAqB,CAAC;gBACxB;gBACA,QAAQ;oBACN,eAAe,CAAC;oBAChB,2BAA2B;wBACzB,yBAAyB,CAAC;oBAC5B;gBACF;gBACA,QAAQ;oBACN,eAAe,CAAC;oBAChB,2BAA2B;wBACzB,oBAAoB,CAAC;oBACvB;gBACF;gBACA,QAAQ;oBACN,eAAe,CAAC;oBAChB,2BAA2B;wBACzB,qBAAqB,CAAC;oBACxB;gBACF;YACF;YACA,UAAU;gBACR,oBAAoB,CAAC;YACvB;YACA,YAAY;gBACV,qCAAqC,CAAC;YACxC;YACA,UAAU;gBACR,4EAA4E,CAAC;YAC/E;YACA,aAAa;gBACX,oDAAoD,CAAC;YACvD;YACA,aAAa;gBACX,4EAA4E,CAAC;YAC/E;YACA,aAAa;gBACX,4EAA4E,CAAC;YAC/E;YACA,WAAW;gBACT,wEAAwE,CAAC;YAC3E;QACF;IACF,CAAA"}

package/dist/cjs/components/forms.js

@@ -30,6 +30,15 @@ const Forms = ()=>({
         '.sk-form-helper-text, .sk-form-error-message': {
             '@apply font-normal': {},
             '@apply text-small': {}
+        },
+        '.sk-form-error-message': {
+            '@apply text-error': {},
+            '@apply flex items-start gap-8': {},
+            '@apply self-stretch': {}
+        },
+        '.sk-form-error-message-icon': {
+            '@apply shrink-0': {},
+            '@apply pt-1': {}
         }
     });
 

package/dist/cjs/components/forms.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/forms.ts"],"sourcesContent":["export const Forms = () => ({\r\n  '.sk-form-control': {\r\n    '@apply flex flex-col gap-8 w-fit': {},\r\n  },\r\n\r\n  '.sk-form-label': {\r\n    '@apply font-bold': {},\r\n    '&-sm': {\r\n      '@apply text-label-small': {},\r\n    },\r\n    '&-md': {\r\n      '@apply text-label-medium': {},\r\n    },\r\n    '&-lg': {\r\n      '@apply text-label-large': {},\r\n    },\r\n  },\r\n\r\n  'legend.sk-form-label': {\r\n    display: 'contents',\r\n  },\r\n\r\n  '.sk-form-helper-text, .sk-form-error-message': {\r\n    '@apply font-normal': {},\r\n    '@apply text-small': {},\r\n  },\r\n});\r\n"],"names":["Forms","display"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,QAAQ,IAAO,CAAA;QAC1B,oBAAoB;YAClB,oCAAoC,CAAC;QACvC;QAEA,kBAAkB;YAChB,oBAAoB,CAAC;YACrB,QAAQ;gBACN,2BAA2B,CAAC;YAC9B;YACA,QAAQ;gBACN,4BAA4B,CAAC;YAC/B;YACA,QAAQ;gBACN,2BAA2B,CAAC;YAC9B;QACF;QAEA,wBAAwB;YACtBC,SAAS;QACX;QAEA,gDAAgD;YAC9C,sBAAsB,CAAC;YACvB,qBAAqB,CAAC;QACxB;IACF,CAAA"}
+{"version":3,"sources":["../../../src/components/forms.ts"],"sourcesContent":["export const Forms = () => ({\r\n  '.sk-form-control': {\r\n    '@apply flex flex-col gap-8 w-fit': {},\r\n  },\r\n\r\n  '.sk-form-label': {\r\n    '@apply font-bold': {},\r\n    '&-sm': {\r\n      '@apply text-label-small': {},\r\n    },\r\n    '&-md': {\r\n      '@apply text-label-medium': {},\r\n    },\r\n    '&-lg': {\r\n      '@apply text-label-large': {},\r\n    },\r\n  },\r\n\r\n  'legend.sk-form-label': {\r\n    display: 'contents',\r\n  },\r\n\r\n  '.sk-form-helper-text, .sk-form-error-message': {\r\n    '@apply font-normal': {},\r\n    '@apply text-small': {},\r\n  },\r\n  '.sk-form-error-message': {\r\n    '@apply text-error': {},\r\n    '@apply flex items-start gap-8': {},\r\n    '@apply self-stretch': {},\r\n  },\r\n  '.sk-form-error-message-icon': {\r\n    '@apply shrink-0': {},\r\n    '@apply pt-1': {},\r\n  },\r\n});\r\n"],"names":["Forms","display"],"mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,QAAQ,IAAO,CAAA;QAC1B,oBAAoB;YAClB,oCAAoC,CAAC;QACvC;QAEA,kBAAkB;YAChB,oBAAoB,CAAC;YACrB,QAAQ;gBACN,2BAA2B,CAAC;YAC9B;YACA,QAAQ;gBACN,4BAA4B,CAAC;YAC/B;YACA,QAAQ;gBACN,2BAA2B,CAAC;YAC9B;QACF;QAEA,wBAAwB;YACtBC,SAAS;QACX;QAEA,gDAAgD;YAC9C,sBAAsB,CAAC;YACvB,qBAAqB,CAAC;QACxB;QACA,0BAA0B;YACxB,qBAAqB,CAAC;YACtB,iCAAiC,CAAC;YAClC,uBAAuB,CAAC;QAC1B;QACA,+BAA+B;YAC7B,mBAAmB,CAAC;YACpB,eAAe,CAAC;QAClB;IACF,CAAA"}

package/dist/cjs/components/input.js

@@ -291,6 +291,45 @@ function timeAndDatePicker() {
         }
     };
 }
+function textareaGroup() {
+    return {
+        '&-textarea': {
+            ...inputGroup(),
+            '&-group-inner': {
+                '@apply h-auto': {},
+                '@apply flex-wrap': {},
+                '.sk-form-input-textarea': {
+                    '@apply w-full': {}
+                },
+                '.sk-form-textarea-counter': {
+                    '@apply w-full': {},
+                    '@apply border-t-divider border-t-1': {}
+                },
+                '&&-lg': {
+                    '@apply min-h-48 h-auto': {},
+                    '.sk-form-textarea-counter': {
+                        '@apply px-20': {},
+                        '@apply py-11': {}
+                    }
+                },
+                '&&-md': {
+                    '@apply min-h-40 h-auto': {},
+                    '.sk-form-textarea-counter': {
+                        '@apply px-16': {},
+                        '@apply py-7': {}
+                    }
+                },
+                '&&-sm': {
+                    '@apply min-h-32 h-auto': {},
+                    '.sk-form-textarea-counter': {
+                        '@apply px-12': {},
+                        '@apply py-5': {}
+                    }
+                }
+            }
+        }
+    };
+}
 const Input = ()=>({
         '.sk-form-input': {
             '@apply grow-0': {},
@@ -349,7 +388,8 @@ const Input = ()=>({
             ...inputStandards(),
             ...inputGroup(),
             ...addin(),
-            ...addon()
+            ...addon(),
+            ...textareaGroup()
         }
     });