@sk-web-gui/core 3.5.0 → 3.6.0

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

@@ -0,0 +1,49 @@
+import { DefaultProps, PolymorphicComponentPropsWithRef } from '@sk-web-gui/utils';
+import React from 'react';
+export interface ButtonProps extends DefaultProps, React.ComponentPropsWithRef<'button'> {
+    loading?: boolean;
+    /** Makes button disabled */
+    disabled?: boolean;
+    /** Makes button active */
+    active?: boolean;
+    /** The label to show in the button when loading is true */
+    loadingText?: string;
+    /** Set the original html type of button */
+    /** Adds icon before button label */
+    leftIcon?: React.ReactElement;
+    /** Adds icon after button label */
+    rightIcon?: React.ReactElement;
+    /** Set the button color */
+    color?: 'info' | 'success' | 'primary' | 'warning' | 'error' | 'vattjom' | 'gronsta' | 'bjornstigen' | 'juniskar';
+    /** Size of the button */
+    size?: 'sm' | 'md' | 'lg';
+    /** Controls button appearance */
+    variant?: 'link' | 'primary' | 'secondary' | 'tertiary' | 'ghost';
+    /** React node */
+    children?: React.ReactNode;
+    /** Sets the button to the rounded variant */
+    rounded?: boolean;
+    /** Sets if inverted look */
+    inverted?: boolean;
+    /** Sets if this is an icon button */
+    iconButton?: boolean;
+    /** Make sure to use aria-describedby or such for accessibility */
+    'aria-disabled'?: React.ButtonHTMLAttributes<HTMLButtonElement>['aria-disabled'];
+    /**
+     * If the background of the button should be shown
+     * @default true
+     */
+    showBackground?: boolean;
+}
+export interface ButtonContentProps {
+    loading?: ButtonProps['loading'];
+    loadingText?: ButtonProps['loadingText'];
+    leftIcon?: ButtonProps['leftIcon'];
+    rightIcon?: ButtonProps['rightIcon'];
+    children?: ButtonProps['children'];
+    size?: ButtonProps['size'];
+}
+export declare const ButtonContent: React.FC<ButtonContentProps>;
+export type IButtonProps<C extends React.ElementType> = PolymorphicComponentPropsWithRef<C, ButtonProps>;
+export declare const Button: React.ForwardRefExoticComponent<Omit<IButtonProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
+export default Button;

package/dist/types/button/src/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ButtonContent, Button as InternalButton, ButtonProps as InternalButtonProps } from './button';
+import { ButtonGroup } from './button-group';
+interface ButtonProps extends React.ForwardRefExoticComponent<InternalButtonProps> {
+    Component: typeof InternalButton;
+    Group: typeof ButtonGroup;
+    Content: typeof ButtonContent;
+}
+export declare const Button: ButtonProps;
+export type { ButtonProps };
+export default Button;

package/dist/types/button/src/styles.d.ts

@@ -0,0 +1 @@
+export declare const useButtonClass: (args?: any) => string;

package/dist/types/button/stories/announcement.d.ts

@@ -0,0 +1,5 @@
+export declare const Announcement: ({ color, size, ...rest }: {
+    [x: string]: any;
+    color?: string | undefined;
+    size?: number | undefined;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/button/stories/button-group.stories.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ButtonProps } from '../src';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../src/button-group").ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export declare const Template: {
+    ({ ...args }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

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

@@ -0,0 +1,7 @@
+import { ButtonProps } from '../src';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../src/button").ButtonProps>;
+export default _default;
+export declare const Template: {
+    ({ children, ...args }: React.ComponentPropsWithRef<ButtonProps>): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

package/dist/types/card/src/card.d.ts

@@ -0,0 +1,60 @@
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+export interface CardProps extends DefaultProps, Omit<React.ComponentPropsWithRef<'div'>, 'color'> {
+    /** React node */
+    children?: React.ReactNode;
+    /** Set background color to card
+     * @default mono
+     */
+    color?: 'mono' | 'tertiary' | 'vattjom' | 'gronsta' | 'bjornstigen' | 'juniskar';
+    /** Make the card inverted
+     * @default false
+     */
+    invert?: boolean;
+    /** Change layout of card
+     * @default vertical
+     */
+    layout?: 'vertical' | 'horizontal';
+    /** If the card should be clickable, will apply hover style
+     * @default false;
+     */
+    useHoverEffect?: boolean;
+    /** Make the card linkable
+     */
+    href?: string;
+}
+export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface CardImageProps extends DefaultProps, React.ComponentPropsWithRef<'img'> {
+    /** React node */
+    children?: React.ReactNode;
+    /** The image `src` attribute */
+    src?: string;
+    /** The alt text for the image */
+    alt?: string;
+    /** Make the card inverted */
+    inverted?: string;
+}
+export declare const CardImage: React.ForwardRefExoticComponent<Omit<CardImageProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export interface CardBodyProps extends DefaultProps, Omit<React.ComponentPropsWithRef<'div'>, 'color'>, Pick<CardProps, 'color'> {
+    /** React node */
+    children?: React.ReactNode;
+    /** Make the card inverted */
+    inverted?: string;
+}
+export declare const CardBody: React.ForwardRefExoticComponent<Omit<CardBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface CardMetaProps extends DefaultProps, React.ComponentPropsWithRef<'div'> {
+    /** Insert date object and it will apply date and time to the card */
+    datetime?: Date;
+}
+export declare const CardMeta: React.ForwardRefExoticComponent<Omit<CardMetaProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface CardHeaderProps extends DefaultProps, React.ComponentPropsWithRef<'div'> {
+    /** React node */
+    children?: React.ReactNode;
+}
+export declare const CardHeader: React.ForwardRefExoticComponent<Omit<CardHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface CardTextProps extends DefaultProps, React.ComponentPropsWithRef<'div'> {
+    /** React node */
+    children?: React.ReactNode;
+}
+export declare const CardText: React.ForwardRefExoticComponent<Omit<CardTextProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default Card;

package/dist/types/card/src/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Card as InternalCard, CardProps as InternalCardProps, CardImage, CardBody, CardHeader, CardText, CardMeta } from './card';
+import { MetaCard as InternalMetaCard, MetaCardProps as InternalMetaCardProps, MetaCardBody, MetaCardHeader, MetaCardText } from './meta-card';
+interface CardProps extends React.ForwardRefExoticComponent<InternalCardProps> {
+    Component: typeof InternalCard;
+    Image: typeof CardImage;
+    Body: typeof CardBody;
+    Header: typeof CardHeader;
+    Text: typeof CardText;
+    Meta: typeof CardMeta;
+}
+interface MetaCardProps extends React.ForwardRefExoticComponent<InternalMetaCardProps> {
+    Component: typeof InternalMetaCard;
+    Body: typeof MetaCardBody;
+    Header: typeof MetaCardHeader;
+    Text: typeof MetaCardText;
+}
+export declare const Card: CardProps;
+export declare const MetaCard: MetaCardProps;
+export type { CardProps, MetaCardProps };
+export default Card;

package/dist/types/card/src/meta-card.d.ts

@@ -0,0 +1,42 @@
+import { DefaultProps } from '@sk-web-gui/utils';
+import React from 'react';
+interface IMetaCardProps extends DefaultProps {
+    /** React node */
+    children?: React.ReactNode;
+    /** Set background color to card
+     * @default vattjom
+     */
+    color?: 'mono' | 'vattjom';
+    /** If the card should be clickable, will apply hover style
+     * @default false;
+     */
+    useHoverEffect?: boolean;
+    /** Make the card linkable
+     */
+    href?: string;
+}
+export interface MetaCardProps extends Omit<React.ComponentPropsWithRef<'div'>, 'color'>, IMetaCardProps {
+}
+export declare const MetaCard: React.ForwardRefExoticComponent<Omit<MetaCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface IMetaCardBodyProps extends DefaultProps {
+    /** React node */
+    children?: React.ReactNode;
+}
+export interface MetaCardBodyProps extends React.ComponentPropsWithRef<'div'>, IMetaCardBodyProps {
+}
+export declare const MetaCardBody: React.ForwardRefExoticComponent<Omit<MetaCardBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface IMetaCardHeaderProps extends DefaultProps {
+    /** React node */
+    children?: React.ReactNode;
+}
+export interface MetaCardHeaderProps extends React.ComponentPropsWithRef<'div'>, IMetaCardHeaderProps {
+}
+export declare const MetaCardHeader: React.ForwardRefExoticComponent<Omit<MetaCardHeaderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface IMetaCardTextProps extends DefaultProps {
+    /** React node */
+    children?: React.ReactNode;
+}
+export interface MetaCardTextProps extends React.ComponentPropsWithRef<'div'>, IMetaCardTextProps {
+}
+export declare const MetaCardText: React.ForwardRefExoticComponent<Omit<MetaCardTextProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default MetaCard;

package/dist/types/card/stories/card.stories.d.ts

@@ -0,0 +1,4 @@
+import { CardProps } from '../src';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../src/card").CardProps>;
+export default _default;
+export declare const Template: (args: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/card/stories/meta-card.stories.d.ts

@@ -0,0 +1,4 @@
+import { MetaCardProps } from '../src';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../src/meta-card").MetaCardProps>;
+export default _default;
+export declare const Template: (args: MetaCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/chip/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src';
+export type * from './src';

package/dist/types/chip/src/chip.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ChipProps extends React.ComponentPropsWithRef<'button'> {
+    strong?: boolean;
+    inverted?: boolean;
+    rounded?: boolean;
+}
+export declare const Chip: React.ForwardRefExoticComponent<Omit<ChipProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/chip/src/index.d.ts

@@ -0,0 +1,4 @@
+import { Chip, ChipProps } from './chip';
+export { Chip };
+export type { ChipProps };
+export default Chip;

package/dist/types/chip/stories/chip.stories.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChipProps } from '../src';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, Omit<ChipProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default _default;
+export declare const Template: {
+    (args: ChipProps): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};
+export declare const AddAndRemove: {
+    (): import("react/jsx-runtime").JSX.Element;
+    storyName: string;
+};

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

@@ -0,0 +1,241 @@
+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-[44em]': {};
+            '&[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': {};
+                    };
+                };
+            };
+        };
+    };
+};

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/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/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;