@snack-uikit/drawer 0.5.1 → 0.6.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.6.1 (2023-12-14)
+
+### Only dependencies have been changed
+* [@snack-uikit/icons@0.19.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/icons/CHANGELOG.md)
+* [@snack-uikit/tooltip@0.10.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/tooltip/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.4.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
+# 0.6.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.5.1 (2023-12-06)
 
 ### Only dependencies have been changed

package/dist/components/Drawer/Drawer.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { ButtonFilledProps, ButtonOutlineProps, ButtonSimpleProps } from '@snack-uikit/button';
-import { Mode, Position, Size } from '../../constants';
 import { DrawerBodyProps, DrawerHeaderProps } from '../../helperComponents';
+import { Size } from '../../types';
 import { DrawerCustomProps } from '../DrawerCustom';
 export type DrawerProps = Omit<DrawerCustomProps, 'size' | 'children' | 'nestedDrawer' | 'push'> & Pick<DrawerHeaderProps, 'titleTooltip' | 'image'> & Pick<DrawerBodyProps, 'content'> & {
     /** Заголовок */
@@ -21,8 +21,3 @@ export type DrawerProps = Omit<DrawerCustomProps, 'size' | 'children' | 'nestedD
 };
 /** Готовый компонент Drawer */
 export declare function Drawer({ title, titleTooltip, subtitle, image, content, approveButton, cancelButton, additionalButton, nestedDrawer, ...rest }: DrawerProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Drawer {
-    var modes: typeof Mode;
-    var sizes: typeof Size;
-    var positions: typeof Position;
-}

package/dist/components/Drawer/Drawer.js

@@ -12,14 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ButtonFilled, ButtonOutline, ButtonSimple, } from '@snack-uikit/button';
 import { TruncateString } from '@snack-uikit/truncate-string';
-import { Mode, NESTED_DRAWER_PUSH_DISTANCE, Position, Size, TEST_IDS } from '../../constants';
+import { NESTED_DRAWER_PUSH_DISTANCE, TEST_IDS } from '../../constants';
 import { DrawerCustom } from '../DrawerCustom';
 /** Готовый компонент Drawer */
 export function Drawer(_a) {
     var { title, titleTooltip, subtitle, image, content, approveButton, cancelButton, additionalButton, nestedDrawer } = _a, rest = __rest(_a, ["title", "titleTooltip", "subtitle", "image", "content", "approveButton", "cancelButton", "additionalButton", "nestedDrawer"]);
     const needFooter = Boolean(approveButton) || Boolean(cancelButton) || Boolean(additionalButton);
-    return (_jsxs(DrawerCustom, Object.assign({}, rest, { push: Boolean(nestedDrawer) && { distance: NESTED_DRAWER_PUSH_DISTANCE } }, { children: [_jsx(DrawerCustom.Header, { title: _jsx(TruncateString, { text: title }), titleTooltip: titleTooltip, subtitle: subtitle, image: image, "data-test-id": TEST_IDS.header }), _jsx(DrawerCustom.Body, { content: content, "data-test-id": TEST_IDS.content }), needFooter && (_jsx(DrawerCustom.Footer, { "data-test-id": TEST_IDS.footer, actions: _jsxs(_Fragment, { children: [approveButton && (_jsx(ButtonFilled, Object.assign({}, approveButton, { size: ButtonFilled.sizes.M, "data-test-id": TEST_IDS.approveButton }))), cancelButton && (_jsx(ButtonOutline, Object.assign({}, cancelButton, { size: ButtonOutline.sizes.M, "data-test-id": TEST_IDS.cancelButton }))), additionalButton && (_jsx(ButtonSimple, Object.assign({}, additionalButton, { size: ButtonSimple.sizes.M, "data-test-id": TEST_IDS.additionalButton })))] }) })), nestedDrawer] })));
+    return (_jsxs(DrawerCustom, Object.assign({}, rest, { push: Boolean(nestedDrawer) && { distance: NESTED_DRAWER_PUSH_DISTANCE }, children: [_jsx(DrawerCustom.Header, { title: _jsx(TruncateString, { text: title }), titleTooltip: titleTooltip, subtitle: subtitle, image: image, "data-test-id": TEST_IDS.header }), _jsx(DrawerCustom.Body, { content: content, "data-test-id": TEST_IDS.content }), needFooter && (_jsx(DrawerCustom.Footer, { "data-test-id": TEST_IDS.footer, actions: _jsxs(_Fragment, { children: [approveButton && _jsx(ButtonFilled, Object.assign({}, approveButton, { size: 'm', "data-test-id": TEST_IDS.approveButton })), cancelButton && _jsx(ButtonOutline, Object.assign({}, cancelButton, { size: 'm', "data-test-id": TEST_IDS.cancelButton })), additionalButton && (_jsx(ButtonSimple, Object.assign({}, additionalButton, { size: 'm', "data-test-id": TEST_IDS.additionalButton })))] }) })), nestedDrawer] })));
 }
-Drawer.modes = Mode;
-Drawer.sizes = Size;
-Drawer.positions = Position;

package/dist/components/DrawerCustom/DrawerCustom.d.ts

@@ -2,8 +2,8 @@ import 'rc-drawer/assets/index.css';
 import { DrawerProps as RcDrawerProps } from 'rc-drawer';
 import { PropsWithChildren, ReactElement } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Mode, Position, Size } from '../../constants';
 import { DrawerBody, DrawerBodyProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps } from '../../helperComponents';
+import { Mode, Position, Size } from '../../types';
 export type DrawerCustomProps = WithSupportProps<PropsWithChildren<{
     /** Управление состоянием показан/не показан. */
     open: boolean;
@@ -29,9 +29,6 @@ export type DrawerCustomProps = WithSupportProps<PropsWithChildren<{
 declare function DrawerCustomComponent({ open, mode, position, onClose, rootClassName, className, size, push, container, children, nestedDrawer, ...rest }: DrawerCustomProps): import("react/jsx-runtime").JSX.Element;
 /** Компонент-конструктор */
 export declare const DrawerCustom: typeof DrawerCustomComponent & {
-    modes: typeof Mode;
-    positions: typeof Position;
-    sizes: typeof Size;
     Header: typeof DrawerHeader;
     Body: typeof DrawerBody;
     Footer: typeof DrawerFooter;

package/dist/components/DrawerCustom/DrawerCustom.js

@@ -14,21 +14,18 @@ import 'rc-drawer/assets/index.css';
 import cn from 'classnames';
 import RcDrawer from 'rc-drawer';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { Mode, Position, Size, SIZE_AS_VALUES } from '../../constants';
+import { MODE, POSITION, SIZE, SIZE_AS_VALUES } from '../../constants';
 import { ButtonClose, DrawerBody, DrawerFooter, DrawerHeader, } from '../../helperComponents';
 import { motionProps } from './constants';
 import styles from './styles.module.css';
 function DrawerCustomComponent(_a) {
-    var { open, mode = Mode.Regular, position = Position.Right, onClose, rootClassName, className, size = Size.S, push, container, children, nestedDrawer } = _a, rest = __rest(_a, ["open", "mode", "position", "onClose", "rootClassName", "className", "size", "push", "container", "children", "nestedDrawer"]);
-    const isRegular = mode === Mode.Regular;
+    var { open, mode = MODE.Regular, position = POSITION.Right, onClose, rootClassName, className, size = SIZE.S, push, container, children, nestedDrawer } = _a, rest = __rest(_a, ["open", "mode", "position", "onClose", "rootClassName", "className", "size", "push", "container", "children", "nestedDrawer"]);
+    const isRegular = mode === MODE.Regular;
     const isPredefinedSize = typeof size === 'string' && SIZE_AS_VALUES.includes(size);
-    return (_jsxs(RcDrawer, Object.assign({ mask: isRegular, maskClosable: isRegular, maskClassName: styles.mask, keyboard: isRegular, width: isPredefinedSize ? 'null' : size, open: open, placement: position, destroyOnClose: true, push: push, onClose: onClose, getContainer: container, className: cn(styles.drawer, className), rootClassName: cn(styles.drawerRoot, rootClassName) }, extractSupportProps(rest), { "data-content-wrapper": true, "data-size": isPredefinedSize ? size : undefined, "data-mode": mode }, motionProps, { children: [_jsx("div", Object.assign({ className: styles.headerElements }, { children: _jsx(ButtonClose, { onClick: onClose }) })), children, nestedDrawer] })));
+    return (_jsxs(RcDrawer, Object.assign({ mask: isRegular, maskClosable: isRegular, maskClassName: styles.mask, keyboard: isRegular, width: isPredefinedSize ? 'null' : size, open: open, placement: position, destroyOnClose: true, push: push, onClose: onClose, getContainer: container, className: cn(styles.drawer, className), rootClassName: cn(styles.drawerRoot, rootClassName) }, extractSupportProps(rest), { "data-content-wrapper": true, "data-size": isPredefinedSize ? size : undefined, "data-mode": mode }, motionProps, { children: [_jsx("div", { className: styles.headerElements, children: _jsx(ButtonClose, { onClick: onClose }) }), children, nestedDrawer] })));
 }
 /** Компонент-конструктор */
 export const DrawerCustom = DrawerCustomComponent;
-DrawerCustom.modes = Mode;
-DrawerCustom.positions = Position;
-DrawerCustom.sizes = Size;
 DrawerCustom.Header = DrawerHeader;
 DrawerCustom.Body = DrawerBody;
 DrawerCustom.Footer = DrawerFooter;

package/dist/constants.d.ts

@@ -1,17 +1,17 @@
-export declare enum Size {
-    S = "s",
-    M = "m",
-    L = "l"
-}
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
 export declare const SIZE_AS_VALUES: string[];
-export declare enum Mode {
-    Regular = "regular",
-    Soft = "soft"
-}
-export declare enum Position {
-    Right = "right",
-    Left = "left"
-}
+export declare const MODE: {
+    readonly Regular: "regular";
+    readonly Soft: "soft";
+};
+export declare const POSITION: {
+    readonly Right: "right";
+    readonly Left: "left";
+};
 export declare const NESTED_DRAWER_PUSH_DISTANCE = 24;
 export declare const TEST_IDS: {
     closeButton: string;

package/dist/constants.js

@@ -1,20 +1,17 @@
-export var Size;
-(function (Size) {
-    Size["S"] = "s";
-    Size["M"] = "m";
-    Size["L"] = "l";
-})(Size || (Size = {}));
-export const SIZE_AS_VALUES = Object.values(Size);
-export var Mode;
-(function (Mode) {
-    Mode["Regular"] = "regular";
-    Mode["Soft"] = "soft";
-})(Mode || (Mode = {}));
-export var Position;
-(function (Position) {
-    Position["Right"] = "right";
-    Position["Left"] = "left";
-})(Position || (Position = {}));
+export const SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+export const SIZE_AS_VALUES = Object.values(SIZE);
+export const MODE = {
+    Regular: 'regular',
+    Soft: 'soft',
+};
+export const POSITION = {
+    Right: 'right',
+    Left: 'left',
+};
 export const NESTED_DRAWER_PUSH_DISTANCE = 24;
 export const TEST_IDS = {
     closeButton: 'drawer__close-button',

package/dist/helperComponents/Body/Body.js

@@ -17,5 +17,5 @@ import styles from './styles.module.css';
 /** Вспомогательный компонент для добавления "тела" в DrawerCustom */
 export function DrawerBody(_a) {
     var { content, className } = _a, rest = __rest(_a, ["content", "className"]);
-    return (_jsx(Scroll, Object.assign({ size: Scroll.sizes.M, className: cn(styles.drawerBody, className) }, extractSupportProps(rest), { children: content })));
+    return (_jsx(Scroll, Object.assign({ size: 'm', className: cn(styles.drawerBody, className) }, extractSupportProps(rest), { children: content })));
 }

package/dist/helperComponents/ButtonClose/ButtonClose.js

@@ -3,5 +3,5 @@ import { CrossSVG } from '@snack-uikit/icons';
 import { TEST_IDS } from '../../constants';
 import styles from './styles.module.css';
 export function ButtonClose({ onClick }) {
-    return (_jsx("button", Object.assign({ className: styles.buttonClose, onClick: onClick, "aria-label": 'close drawer', "data-test-id": TEST_IDS.closeButton }, { children: _jsx(CrossSVG, {}) })));
+    return (_jsx("button", { className: styles.buttonClose, onClick: onClick, "aria-label": 'close drawer', "data-test-id": TEST_IDS.closeButton, children: _jsx(CrossSVG, {}) }));
 }

package/dist/helperComponents/Footer/Footer.js

@@ -17,5 +17,5 @@ import styles from './styles.module.css';
 /** Вспомогательный компонент для добавления "футера" в DrawerCustom */
 export function DrawerFooter(_a) {
     var { actions, className } = _a, rest = __rest(_a, ["actions", "className"]);
-    return (_jsx("div", Object.assign({ className: cn(styles.footer, className) }, extractSupportProps(rest), { children: _jsx("div", Object.assign({ className: styles.footerActions, "data-test-id": TEST_IDS.footerActions }, { children: actions })) })));
+    return (_jsx("div", Object.assign({ className: cn(styles.footer, className) }, extractSupportProps(rest), { children: _jsx("div", { className: styles.footerActions, "data-test-id": TEST_IDS.footerActions, children: actions }) })));
 }

package/dist/helperComponents/Header/Header.js

@@ -19,5 +19,5 @@ import styles from './styles.module.css';
 /** Вспомогательный компонент для добавления "шапки" в DrawerCustom */
 export function DrawerHeader(_a) {
     var { title, titleTooltip, subtitle, image, className } = _a, rest = __rest(_a, ["title", "titleTooltip", "subtitle", "image", "className"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.drawerHeader, className) }, extractSupportProps(rest), { children: [image && _jsx("img", { src: image.src, alt: image.alt, className: styles.image, "data-test-id": TEST_IDS.image }), _jsxs("div", Object.assign({ className: styles.headlineLayout }, { children: [_jsxs("div", Object.assign({ className: styles.headline }, { children: [_jsx(Typography, Object.assign({ family: Typography.families.Sans, role: Typography.roles.Headline, size: Typography.sizes.S, className: styles.title, "data-test-id": TEST_IDS.title }, { children: title })), titleTooltip && (_jsx(QuestionTooltip, { tip: titleTooltip, size: QuestionTooltip.sizes.S, "data-test-id": TEST_IDS.tooltip }))] })), subtitle && (_jsx(Typography, Object.assign({ family: Typography.families.Sans, role: Typography.roles.Body, size: Typography.sizes.M, className: styles.subtitle, "data-test-id": TEST_IDS.subtitle }, { children: subtitle })))] }))] })));
+    return (_jsxs("div", Object.assign({ className: cn(styles.drawerHeader, className) }, extractSupportProps(rest), { children: [image && _jsx("img", { src: image.src, alt: image.alt, className: styles.image, "data-test-id": TEST_IDS.image }), _jsxs("div", { className: styles.headlineLayout, children: [_jsxs("div", { className: styles.headline, children: [_jsx(Typography.SansHeadlineS, { className: styles.title, "data-test-id": TEST_IDS.title, children: title }), titleTooltip && _jsx(QuestionTooltip, { tip: titleTooltip, size: 's', "data-test-id": TEST_IDS.tooltip })] }), subtitle && (_jsx(Typography.SansBodyM, { className: styles.subtitle, "data-test-id": TEST_IDS.subtitle, children: subtitle }))] })] })));
 }

package/dist/types.d.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { MODE, POSITION, SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;
+export type Mode = ValueOf<typeof MODE>;
+export type Position = ValueOf<typeof POSITION>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Drawer",
-  "version": "0.5.1",
+  "version": "0.6.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,15 +32,15 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.14.1",
-    "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/scroll": "0.4.1",
-    "@snack-uikit/tooltip": "0.9.1",
-    "@snack-uikit/truncate-string": "0.3.1",
-    "@snack-uikit/typography": "0.5.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/button": "0.15.0",
+    "@snack-uikit/icons": "0.19.1",
+    "@snack-uikit/scroll": "0.5.0",
+    "@snack-uikit/tooltip": "0.10.1",
+    "@snack-uikit/truncate-string": "0.4.1",
+    "@snack-uikit/typography": "0.6.0",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2",
     "rc-drawer": "6.4.1"
   },
-  "gitHead": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
+  "gitHead": "62f43bf0cbfd611d0b746117400f67096b1790f6"
 }

package/src/components/Drawer/Drawer.tsx

@@ -10,8 +10,9 @@ import {
 } from '@snack-uikit/button';
 import { TruncateString } from '@snack-uikit/truncate-string';
 
-import { Mode, NESTED_DRAWER_PUSH_DISTANCE, Position, Size, TEST_IDS } from '../../constants';
+import { NESTED_DRAWER_PUSH_DISTANCE, TEST_IDS } from '../../constants';
 import { DrawerBodyProps, DrawerHeaderProps } from '../../helperComponents';
+import { Size } from '../../types';
 import { DrawerCustom, DrawerCustomProps } from '../DrawerCustom';
 
 export type DrawerProps = Omit<DrawerCustomProps, 'size' | 'children' | 'nestedDrawer' | 'push'> &
@@ -65,20 +66,12 @@ export function Drawer({
           data-test-id={TEST_IDS.footer}
           actions={
             <>
-              {approveButton && (
-                <ButtonFilled {...approveButton} size={ButtonFilled.sizes.M} data-test-id={TEST_IDS.approveButton} />
-              )}
+              {approveButton && <ButtonFilled {...approveButton} size='m' data-test-id={TEST_IDS.approveButton} />}
 
-              {cancelButton && (
-                <ButtonOutline {...cancelButton} size={ButtonOutline.sizes.M} data-test-id={TEST_IDS.cancelButton} />
-              )}
+              {cancelButton && <ButtonOutline {...cancelButton} size='m' data-test-id={TEST_IDS.cancelButton} />}
 
               {additionalButton && (
-                <ButtonSimple
-                  {...additionalButton}
-                  size={ButtonSimple.sizes.M}
-                  data-test-id={TEST_IDS.additionalButton}
-                />
+                <ButtonSimple {...additionalButton} size='m' data-test-id={TEST_IDS.additionalButton} />
               )}
             </>
           }
@@ -89,7 +82,3 @@ export function Drawer({
     </DrawerCustom>
   );
 }
-
-Drawer.modes = Mode;
-Drawer.sizes = Size;
-Drawer.positions = Position;

package/src/components/DrawerCustom/DrawerCustom.tsx

@@ -6,7 +6,7 @@ import { PropsWithChildren, ReactElement } from 'react';
 
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { Mode, Position, Size, SIZE_AS_VALUES } from '../../constants';
+import { MODE, POSITION, SIZE, SIZE_AS_VALUES } from '../../constants';
 import {
   ButtonClose,
   DrawerBody,
@@ -16,6 +16,7 @@ import {
   DrawerHeader,
   DrawerHeaderProps,
 } from '../../helperComponents';
+import { Mode, Position, Size } from '../../types';
 import { motionProps } from './constants';
 import styles from './styles.module.scss';
 
@@ -46,19 +47,19 @@ export type DrawerCustomProps = WithSupportProps<
 
 function DrawerCustomComponent({
   open,
-  mode = Mode.Regular,
-  position = Position.Right,
+  mode = MODE.Regular,
+  position = POSITION.Right,
   onClose,
   rootClassName,
   className,
-  size = Size.S,
+  size = SIZE.S,
   push,
   container,
   children,
   nestedDrawer,
   ...rest
 }: DrawerCustomProps) {
-  const isRegular = mode === Mode.Regular;
+  const isRegular = mode === MODE.Regular;
   const isPredefinedSize = typeof size === 'string' && SIZE_AS_VALUES.includes(size);
 
   return (
@@ -95,17 +96,11 @@ function DrawerCustomComponent({
 
 /** Компонент-конструктор */
 export const DrawerCustom = DrawerCustomComponent as typeof DrawerCustomComponent & {
-  modes: typeof Mode;
-  positions: typeof Position;
-  sizes: typeof Size;
   Header: typeof DrawerHeader;
   Body: typeof DrawerBody;
   Footer: typeof DrawerFooter;
 };
 
-DrawerCustom.modes = Mode;
-DrawerCustom.positions = Position;
-DrawerCustom.sizes = Size;
 DrawerCustom.Header = DrawerHeader;
 DrawerCustom.Body = DrawerBody;
 DrawerCustom.Footer = DrawerFooter;

package/src/constants.ts

@@ -1,20 +1,20 @@
-export enum Size {
-  S = 's',
-  M = 'm',
-  L = 'l',
-}
+export const SIZE = {
+  S: 's',
+  M: 'm',
+  L: 'l',
+} as const;
 
-export const SIZE_AS_VALUES: string[] = Object.values(Size);
+export const SIZE_AS_VALUES: string[] = Object.values(SIZE);
 
-export enum Mode {
-  Regular = 'regular',
-  Soft = 'soft',
-}
+export const MODE = {
+  Regular: 'regular',
+  Soft: 'soft',
+} as const;
 
-export enum Position {
-  Right = 'right',
-  Left = 'left',
-}
+export const POSITION = {
+  Right: 'right',
+  Left: 'left',
+} as const;
 
 export const NESTED_DRAWER_PUSH_DISTANCE = 24;
 

package/src/helperComponents/Body/Body.tsx

@@ -16,7 +16,7 @@ export type DrawerBodyProps = WithSupportProps<{
 /** Вспомогательный компонент для добавления "тела" в DrawerCustom */
 export function DrawerBody({ content, className, ...rest }: DrawerBodyProps) {
   return (
-    <Scroll size={Scroll.sizes.M} className={cn(styles.drawerBody, className)} {...extractSupportProps(rest)}>
+    <Scroll size='m' className={cn(styles.drawerBody, className)} {...extractSupportProps(rest)}>
       {content}
     </Scroll>
   );

package/src/helperComponents/Header/Header.tsx

@@ -32,31 +32,17 @@ export function DrawerHeader({ title, titleTooltip, subtitle, image, className,
 
       <div className={styles.headlineLayout}>
         <div className={styles.headline}>
-          <Typography
-            family={Typography.families.Sans}
-            role={Typography.roles.Headline}
-            size={Typography.sizes.S}
-            className={styles.title}
-            data-test-id={TEST_IDS.title}
-          >
+          <Typography.SansHeadlineS className={styles.title} data-test-id={TEST_IDS.title}>
             {title}
-          </Typography>
+          </Typography.SansHeadlineS>
 
-          {titleTooltip && (
-            <QuestionTooltip tip={titleTooltip} size={QuestionTooltip.sizes.S} data-test-id={TEST_IDS.tooltip} />
-          )}
+          {titleTooltip && <QuestionTooltip tip={titleTooltip} size='s' data-test-id={TEST_IDS.tooltip} />}
         </div>
 
         {subtitle && (
-          <Typography
-            family={Typography.families.Sans}
-            role={Typography.roles.Body}
-            size={Typography.sizes.M}
-            className={styles.subtitle}
-            data-test-id={TEST_IDS.subtitle}
-          >
+          <Typography.SansBodyM className={styles.subtitle} data-test-id={TEST_IDS.subtitle}>
             {subtitle}
-          </Typography>
+          </Typography.SansBodyM>
         )}
       </div>
     </div>

package/src/types.ts

@@ -0,0 +1,9 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { MODE, POSITION, SIZE } from './constants';
+
+export type Size = ValueOf<typeof SIZE>;
+
+export type Mode = ValueOf<typeof MODE>;
+
+export type Position = ValueOf<typeof POSITION>;