@snack-uikit/alert 0.6.1 → 0.7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.7.0 (2023-12-14)
+
+
+### BREAKING CHANGES
+
+
+* **FF-3729:** replace enum with unions ([910db4a](https://github.com/cloud-ru-tech/snack-uikit/commit/910db4aa8231ccbc58e538e5c5c1f461b1dec275))
+
+
+
+
 ## 0.6.1 (2023-12-06)
 
 ### Only dependencies have been changed

package/README.md

@@ -16,7 +16,7 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
 // It can be used to provide information, warnings, errors, or success messages.
 
 <Alert
-  appearance={Alert.appearances.Neutral}
+  appearance='neutral'
   link='Link Text'
   href='https://cloud.ru/'
   icon={true}
@@ -29,7 +29,7 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
 // It can have an additional button with customizable text, icon, and click handler.
 
 <AlertTop
-  appearance={AlertTop.appearances.Neutral}
+  appearance='neutral'
   link='Link Text'
   href='https://cloud.ru/'
   closeable={true}
@@ -56,7 +56,7 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
 | link | `string` | - | Текст ссылки |
 | href | `string` | - | Ссылка |
 | onClose | `() => void` | - | Колбек закрытия |
-| appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | Alert.appearances.Neutral | Внешний вид |
+| appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | neutral | Внешний вид |
 | className | `string` | - | CSS-класс |
 ## AlertTop
 Компонент для отображения уведомления вверху экрана.
@@ -69,11 +69,11 @@ import { InfoFilledSVG } from '@snack-uikit/icons';
 | link | `string` | - | Текст ссылки |
 | href | `string` | - | Ссылка |
 | onClose | `() => void` | - | Колбек закрытия |
-| appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | AlertTop.appearances.Neutral | Внешний вид |
+| appearance | enum Appearance: `"neutral"`, `"primary"`, `"error"`, `"warning"`, `"success"` | neutral | Внешний вид |
 | buttonText | `string` | - | Текст кнопки |
 | buttonOnClick | `() => void` | - | Колбек клика по кнопке |
 | buttonIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка в кнопке |
 | className | `string` | - | CSS-класс |
 
 
-[//]: DOCUMENTATION_SECTION_END
+[//]: DOCUMENTATION_SECTION_END

package/dist/components/Alert/Alert.d.ts

@@ -1,5 +1,5 @@
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Appearance } from '../../constants';
+import { Appearance } from '../../types';
 export type AlertProps = WithSupportProps<{
     /** Отображать иконку */
     icon?: boolean;
@@ -22,6 +22,3 @@ export type AlertProps = WithSupportProps<{
  * Компонент для отображения уведомления.
  */
 export declare function Alert({ icon, title, href, link, description, onClose, appearance, className, ...rest }: AlertProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Alert {
-    var appearances: typeof Appearance;
-}

package/dist/components/Alert/Alert.js

@@ -15,14 +15,13 @@ import { CrossSVG } from '@snack-uikit/icons';
 import { Link } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { Appearance, APPEARANCE_TO_COLOR_MAP } from '../../constants';
+import { APPEARANCE, APPEARANCE_TO_COLOR_MAP } from '../../constants';
 import { getIcon } from '../../utils';
 import styles from './styles.module.css';
 /**
  * Компонент для отображения уведомления.
  */
 export function Alert(_a) {
-    var { icon = true, title, href, link, description, onClose, appearance = Alert.appearances.Neutral, className } = _a, rest = __rest(_a, ["icon", "title", "href", "link", "description", "onClose", "appearance", "className"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.alert, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP[appearance] }, { children: [icon && (_jsx("div", Object.assign({ className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__icon' }, { children: getIcon(appearance) }))), _jsxs("div", Object.assign({ className: styles.content }, { children: [_jsxs("div", Object.assign({ className: styles.textlayout }, { children: [title && _jsx(TruncateString, { text: title, maxLines: 1, className: styles.title, "data-test-id": 'alert__title' }), _jsx("span", Object.assign({ "data-test-id": 'alert__description', className: styles.description }, { children: description }))] })), link && (_jsx("span", { children: _jsx(Link, { href: href, text: link, onSurface: Link.onSurfaces.Decor, external: true, onColor: APPEARANCE_TO_COLOR_MAP[appearance], size: Link.sizes.M, "data-test-id": 'alert__link' }) }))] })), onClose && (_jsx("button", Object.assign({ onClick: onClose, className: styles.closeButton, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__close-button' }, { children: _jsx(CrossSVG, {}) })))] })));
+    var { icon = true, title, href, link, description, onClose, appearance = APPEARANCE.Neutral, className } = _a, rest = __rest(_a, ["icon", "title", "href", "link", "description", "onClose", "appearance", "className"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.alert, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP[appearance] }, { children: [icon && (_jsx("div", Object.assign({ className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__icon' }, { children: getIcon(appearance) }))), _jsxs("div", Object.assign({ className: styles.content }, { children: [_jsxs("div", Object.assign({ className: styles.textlayout }, { children: [title && _jsx(TruncateString, { text: title, maxLines: 1, className: styles.title, "data-test-id": 'alert__title' }), _jsx("span", Object.assign({ "data-test-id": 'alert__description', className: styles.description }, { children: description }))] })), link && (_jsx("span", { children: _jsx(Link, { href: href, text: link, onSurface: 'decor', external: true, onColor: APPEARANCE_TO_COLOR_MAP[appearance], size: 'm', "data-test-id": 'alert__link' }) }))] })), onClose && (_jsx("button", Object.assign({ onClick: onClose, className: styles.closeButton, "data-color": APPEARANCE_TO_COLOR_MAP[appearance], "data-test-id": 'alert__close-button' }, { children: _jsx(CrossSVG, {}) })))] })));
 }
-Alert.appearances = Appearance;

package/dist/components/AlertTop/AlertTop.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { WithSupportProps } from '@snack-uikit/utils';
-import { Appearance } from '../../constants';
+import { Appearance } from '../../types';
 export type AlertTopProps = WithSupportProps<{
     /** Отображать иконку */
     icon?: boolean;
@@ -29,6 +29,3 @@ export type AlertTopProps = WithSupportProps<{
  * Компонент для отображения уведомления вверху экрана.
  */
 export declare function AlertTop({ icon, title, description, link, href, onClose, appearance, buttonText, buttonOnClick, buttonIcon, className, ...rest }: AlertTopProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace AlertTop {
-    var appearances: typeof Appearance;
-}

package/dist/components/AlertTop/AlertTop.js

@@ -15,7 +15,7 @@ import { CrossSVG } from '@snack-uikit/icons';
 import { Link } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
-import { Appearance, APPEARANCE_TO_COLOR_MAP } from '../../constants';
+import { APPEARANCE, APPEARANCE_TO_COLOR_MAP } from '../../constants';
 import { AlertTopButton } from '../../helperComponents';
 import { getIcon } from '../../utils';
 import { APPEARANCE_TO_COLOR_MAP_INVERT } from './constants';
@@ -24,7 +24,6 @@ import styles from './styles.module.css';
  * Компонент для отображения уведомления вверху экрана.
  */
 export function AlertTop(_a) {
-    var { icon = true, title, description, link, href, onClose, appearance = AlertTop.appearances.Neutral, buttonText, buttonOnClick, buttonIcon, className } = _a, rest = __rest(_a, ["icon", "title", "description", "link", "href", "onClose", "appearance", "buttonText", "buttonOnClick", "buttonIcon", "className"]);
-    return (_jsxs("div", Object.assign({ className: cn(styles.alertTop, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance] }, { children: [_jsxs("div", Object.assign({ className: styles.contentWrapper }, { children: [icon && (_jsx("div", Object.assign({ className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__icon' }, { children: getIcon(appearance) }))), _jsxs("div", Object.assign({ className: styles.contentLayout }, { children: [_jsxs("div", Object.assign({ className: styles.textLayout }, { children: [title && (_jsx("div", Object.assign({ className: styles.title, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__title' }, { children: _jsx(TruncateString, { text: title, maxLines: 1 }) }))), _jsx("span", Object.assign({ className: styles.description, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__description' }, { children: description }))] })), link && (_jsx("span", { children: _jsx(Link, { onSurface: Link.onSurfaces.Accent, href: href, text: link, external: true, onColor: APPEARANCE_TO_COLOR_MAP[appearance], size: Link.sizes.M, "data-test-id": 'alert-top__link' }) }))] }))] })), _jsxs("div", Object.assign({ className: styles.actions }, { children: [buttonText && (_jsx(AlertTopButton, { buttonIcon: buttonIcon, buttonOnClick: buttonOnClick, buttonText: buttonText, appearance: appearance })), onClose && (_jsx("button", Object.assign({ onClick: onClose, className: styles.closeButton, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__close-button' }, { children: _jsx(CrossSVG, {}) })))] }))] })));
+    var { icon = true, title, description, link, href, onClose, appearance = APPEARANCE.Neutral, buttonText, buttonOnClick, buttonIcon, className } = _a, rest = __rest(_a, ["icon", "title", "description", "link", "href", "onClose", "appearance", "buttonText", "buttonOnClick", "buttonIcon", "className"]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.alertTop, className) }, extractSupportProps(rest), { "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance] }, { children: [_jsxs("div", Object.assign({ className: styles.contentWrapper }, { children: [icon && (_jsx("div", Object.assign({ className: styles.icon, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__icon' }, { children: getIcon(appearance) }))), _jsxs("div", Object.assign({ className: styles.contentLayout }, { children: [_jsxs("div", Object.assign({ className: styles.textLayout }, { children: [title && (_jsx("div", Object.assign({ className: styles.title, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__title' }, { children: _jsx(TruncateString, { text: title, maxLines: 1 }) }))), _jsx("span", Object.assign({ className: styles.description, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__description' }, { children: description }))] })), link && (_jsx("span", { children: _jsx(Link, { onSurface: 'accent', href: href, text: link, external: true, onColor: APPEARANCE_TO_COLOR_MAP[appearance], size: 'm', "data-test-id": 'alert-top__link' }) }))] }))] })), _jsxs("div", Object.assign({ className: styles.actions }, { children: [buttonText && (_jsx(AlertTopButton, { buttonIcon: buttonIcon, buttonOnClick: buttonOnClick, buttonText: buttonText, appearance: appearance })), onClose && (_jsx("button", Object.assign({ onClick: onClose, className: styles.closeButton, "data-color": APPEARANCE_TO_COLOR_MAP_INVERT[appearance], "data-test-id": 'alert-top__close-button' }, { children: _jsx(CrossSVG, {}) })))] }))] })));
 }
-AlertTop.appearances = Appearance;

package/dist/components/AlertTop/constants.d.ts

@@ -1,14 +1,7 @@
-export declare enum Color {
-    InvertNeutral = "invert-neutral",
-    Primary = "primary",
-    Red = "red",
-    Yellow = "yellow",
-    Green = "green"
-}
 export declare const APPEARANCE_TO_COLOR_MAP_INVERT: {
-    readonly neutral: Color.InvertNeutral;
-    readonly primary: Color.Primary;
-    readonly error: Color.Red;
-    readonly warning: Color.Yellow;
-    readonly success: Color.Green;
+    readonly neutral: "invert-neutral";
+    readonly primary: "primary";
+    readonly error: "red";
+    readonly warning: "yellow";
+    readonly success: "green";
 };

package/dist/components/AlertTop/constants.js

@@ -1,16 +1,15 @@
-import { Appearance } from '../../constants';
-export var Color;
-(function (Color) {
-    Color["InvertNeutral"] = "invert-neutral";
-    Color["Primary"] = "primary";
-    Color["Red"] = "red";
-    Color["Yellow"] = "yellow";
-    Color["Green"] = "green";
-})(Color || (Color = {}));
+import { APPEARANCE } from '../../constants';
+const COLOR = {
+    InvertNeutral: 'invert-neutral',
+    Primary: 'primary',
+    Red: 'red',
+    Yellow: 'yellow',
+    Green: 'green',
+};
 export const APPEARANCE_TO_COLOR_MAP_INVERT = {
-    [Appearance.Neutral]: Color.InvertNeutral,
-    [Appearance.Primary]: Color.Primary,
-    [Appearance.Error]: Color.Red,
-    [Appearance.Warning]: Color.Yellow,
-    [Appearance.Success]: Color.Green,
+    [APPEARANCE.Neutral]: COLOR.InvertNeutral,
+    [APPEARANCE.Primary]: COLOR.Primary,
+    [APPEARANCE.Error]: COLOR.Red,
+    [APPEARANCE.Warning]: COLOR.Yellow,
+    [APPEARANCE.Success]: COLOR.Green,
 };

package/dist/constants.d.ts

@@ -1,15 +1,14 @@
-import { OnColor } from '@snack-uikit/link';
-export declare enum Appearance {
-    Neutral = "neutral",
-    Primary = "primary",
-    Error = "error",
-    Warning = "warning",
-    Success = "success"
-}
+export declare const APPEARANCE: {
+    readonly Neutral: "neutral";
+    readonly Primary: "primary";
+    readonly Error: "error";
+    readonly Warning: "warning";
+    readonly Success: "success";
+};
 export declare const APPEARANCE_TO_COLOR_MAP: {
-    readonly neutral: OnColor.Neutral;
-    readonly primary: OnColor.Primary;
-    readonly error: OnColor.Red;
-    readonly warning: OnColor.Yellow;
-    readonly success: OnColor.Green;
+    readonly neutral: "neutral";
+    readonly primary: "primary";
+    readonly error: "red";
+    readonly warning: "yellow";
+    readonly success: "green";
 };

package/dist/constants.js

@@ -1,16 +1,15 @@
-import { OnColor } from '@snack-uikit/link';
-export var Appearance;
-(function (Appearance) {
-    Appearance["Neutral"] = "neutral";
-    Appearance["Primary"] = "primary";
-    Appearance["Error"] = "error";
-    Appearance["Warning"] = "warning";
-    Appearance["Success"] = "success";
-})(Appearance || (Appearance = {}));
+import { ON_COLOR } from '@snack-uikit/link';
+export const APPEARANCE = {
+    Neutral: 'neutral',
+    Primary: 'primary',
+    Error: 'error',
+    Warning: 'warning',
+    Success: 'success',
+};
 export const APPEARANCE_TO_COLOR_MAP = {
-    [Appearance.Neutral]: OnColor.Neutral,
-    [Appearance.Primary]: OnColor.Primary,
-    [Appearance.Error]: OnColor.Red,
-    [Appearance.Warning]: OnColor.Yellow,
-    [Appearance.Success]: OnColor.Green,
+    [APPEARANCE.Neutral]: ON_COLOR.Neutral,
+    [APPEARANCE.Primary]: ON_COLOR.Primary,
+    [APPEARANCE.Error]: ON_COLOR.Red,
+    [APPEARANCE.Warning]: ON_COLOR.Yellow,
+    [APPEARANCE.Success]: ON_COLOR.Green,
 };

package/dist/helperComponents/AlertTopButton/AlertTopButton.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { Appearance } from '../../constants';
+import { Appearance } from '../../types';
 export type AlertTopButtonProps = {
     appearance: Appearance;
     buttonText: string;

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+import { ValueOf } from '@snack-uikit/utils';
+import { APPEARANCE } from './constants';
+export type Appearance = ValueOf<typeof APPEARANCE>;

package/dist/types.js

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

package/dist/utils.d.ts

@@ -1,2 +1,2 @@
-import { Appearance } from './constants';
+import { Appearance } from './types';
 export declare function getIcon(appearance: Appearance): import("react/jsx-runtime").JSX.Element;

package/dist/utils.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG, InfoFilledSVG } from '@snack-uikit/icons';
-import { Appearance } from './constants';
+import { APPEARANCE } from './constants';
 export function getIcon(appearance) {
     switch (appearance) {
-        case Appearance.Success:
+        case APPEARANCE.Success:
             return _jsx(CheckFilledSVG, {});
-        case Appearance.Error:
+        case APPEARANCE.Error:
             return _jsx(CrossFilledSVG, {});
-        case Appearance.Warning:
+        case APPEARANCE.Warning:
             return _jsx(AlarmFilledSVG, {});
-        case Appearance.Primary:
-        case Appearance.Neutral:
+        case APPEARANCE.Primary:
+        case APPEARANCE.Neutral:
         default:
             return _jsx(InfoFilledSVG, {});
     }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Alert",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,10 +33,10 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/icons": "0.19.0",
-    "@snack-uikit/link": "0.8.1",
-    "@snack-uikit/truncate-string": "0.3.1",
-    "@snack-uikit/utils": "3.1.0",
+    "@snack-uikit/link": "0.9.0",
+    "@snack-uikit/truncate-string": "0.4.0",
+    "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "76a159dde7baccf49dc7b11e1fd7abc31424b42f"
+  "gitHead": "bd39c5e674f3b91b0e2487782a04b15034cf3d8b"
 }

package/src/components/Alert/Alert.tsx

@@ -5,7 +5,8 @@ import { Link } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { Appearance, APPEARANCE_TO_COLOR_MAP } from '../../constants';
+import { APPEARANCE, APPEARANCE_TO_COLOR_MAP } from '../../constants';
+import { Appearance } from '../../types';
 import { getIcon } from '../../utils';
 import styles from './styles.module.scss';
 
@@ -38,7 +39,7 @@ export function Alert({
   link,
   description,
   onClose,
-  appearance = Alert.appearances.Neutral,
+  appearance = APPEARANCE.Neutral,
   className,
   ...rest
 }: AlertProps) {
@@ -66,10 +67,10 @@ export function Alert({
             <Link
               href={href}
               text={link}
-              onSurface={Link.onSurfaces.Decor}
+              onSurface='decor'
               external
               onColor={APPEARANCE_TO_COLOR_MAP[appearance]}
-              size={Link.sizes.M}
+              size='m'
               data-test-id='alert__link'
             />
           </span>
@@ -88,5 +89,3 @@ export function Alert({
     </div>
   );
 }
-
-Alert.appearances = Appearance;

package/src/components/AlertTop/AlertTop.tsx

@@ -6,8 +6,9 @@ import { Link } from '@snack-uikit/link';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
-import { Appearance, APPEARANCE_TO_COLOR_MAP } from '../../constants';
+import { APPEARANCE, APPEARANCE_TO_COLOR_MAP } from '../../constants';
 import { AlertTopButton } from '../../helperComponents';
+import { Appearance } from '../../types';
 import { getIcon } from '../../utils';
 import { APPEARANCE_TO_COLOR_MAP_INVERT } from './constants';
 import styles from './styles.module.scss';
@@ -47,7 +48,7 @@ export function AlertTop({
   link,
   href,
   onClose,
-  appearance = AlertTop.appearances.Neutral,
+  appearance = APPEARANCE.Neutral,
   buttonText,
   buttonOnClick,
   buttonIcon,
@@ -94,12 +95,12 @@ export function AlertTop({
           {link && (
             <span>
               <Link
-                onSurface={Link.onSurfaces.Accent}
+                onSurface='accent'
                 href={href}
                 text={link}
                 external
                 onColor={APPEARANCE_TO_COLOR_MAP[appearance]}
-                size={Link.sizes.M}
+                size='m'
                 data-test-id='alert-top__link'
               />
             </span>
@@ -130,5 +131,3 @@ export function AlertTop({
     </div>
   );
 }
-
-AlertTop.appearances = Appearance;

package/src/components/AlertTop/constants.ts

@@ -1,17 +1,17 @@
-import { Appearance } from '../../constants';
+import { APPEARANCE } from '../../constants';
 
-export enum Color {
-  InvertNeutral = 'invert-neutral',
-  Primary = 'primary',
-  Red = 'red',
-  Yellow = 'yellow',
-  Green = 'green',
-}
+const COLOR = {
+  InvertNeutral: 'invert-neutral',
+  Primary: 'primary',
+  Red: 'red',
+  Yellow: 'yellow',
+  Green: 'green',
+} as const;
 
 export const APPEARANCE_TO_COLOR_MAP_INVERT = {
-  [Appearance.Neutral]: Color.InvertNeutral,
-  [Appearance.Primary]: Color.Primary,
-  [Appearance.Error]: Color.Red,
-  [Appearance.Warning]: Color.Yellow,
-  [Appearance.Success]: Color.Green,
+  [APPEARANCE.Neutral]: COLOR.InvertNeutral,
+  [APPEARANCE.Primary]: COLOR.Primary,
+  [APPEARANCE.Error]: COLOR.Red,
+  [APPEARANCE.Warning]: COLOR.Yellow,
+  [APPEARANCE.Success]: COLOR.Green,
 } as const;

package/src/constants.ts

@@ -1,17 +1,17 @@
-import { OnColor } from '@snack-uikit/link';
+import { ON_COLOR } from '@snack-uikit/link';
 
-export enum Appearance {
-  Neutral = 'neutral',
-  Primary = 'primary',
-  Error = 'error',
-  Warning = 'warning',
-  Success = 'success',
-}
+export const APPEARANCE = {
+  Neutral: 'neutral',
+  Primary: 'primary',
+  Error: 'error',
+  Warning: 'warning',
+  Success: 'success',
+} as const;
 
 export const APPEARANCE_TO_COLOR_MAP = {
-  [Appearance.Neutral]: OnColor.Neutral,
-  [Appearance.Primary]: OnColor.Primary,
-  [Appearance.Error]: OnColor.Red,
-  [Appearance.Warning]: OnColor.Yellow,
-  [Appearance.Success]: OnColor.Green,
+  [APPEARANCE.Neutral]: ON_COLOR.Neutral,
+  [APPEARANCE.Primary]: ON_COLOR.Primary,
+  [APPEARANCE.Error]: ON_COLOR.Red,
+  [APPEARANCE.Warning]: ON_COLOR.Yellow,
+  [APPEARANCE.Success]: ON_COLOR.Green,
 } as const;

package/src/helperComponents/AlertTopButton/AlertTopButton.tsx

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 
 import { APPEARANCE_TO_COLOR_MAP_INVERT } from '../../components/AlertTop/constants';
-import { Appearance } from '../../constants';
+import { Appearance } from '../../types';
 import styles from './styles.module.scss';
 
 export type AlertTopButtonProps = {

package/src/types.ts

@@ -0,0 +1,5 @@
+import { ValueOf } from '@snack-uikit/utils';
+
+import { APPEARANCE } from './constants';
+
+export type Appearance = ValueOf<typeof APPEARANCE>;

package/src/utils.tsx

@@ -1,17 +1,18 @@
 import { AlarmFilledSVG, CheckFilledSVG, CrossFilledSVG, InfoFilledSVG } from '@snack-uikit/icons';
 
-import { Appearance } from './constants';
+import { APPEARANCE } from './constants';
+import { Appearance } from './types';
 
 export function getIcon(appearance: Appearance) {
   switch (appearance) {
-    case Appearance.Success:
+    case APPEARANCE.Success:
       return <CheckFilledSVG />;
-    case Appearance.Error:
+    case APPEARANCE.Error:
       return <CrossFilledSVG />;
-    case Appearance.Warning:
+    case APPEARANCE.Warning:
       return <AlarmFilledSVG />;
-    case Appearance.Primary:
-    case Appearance.Neutral:
+    case APPEARANCE.Primary:
+    case APPEARANCE.Neutral:
     default:
       return <InfoFilledSVG />;
   }