@broxus/react-uikit 0.22.0 → 0.23.1

package/dist/esm/components/Navbar/Right.d.ts

@@ -5,7 +5,7 @@ export interface NavbarRightOwnProps extends React.HTMLAttributes<HTMLElement> {
 }
 export type NavbarRightProps<E extends React.ElementType = React.ElementType> = NavbarRightOwnProps & PolymorphicProps<E> & PolymorphicProps<E, NavbarRightOwnProps>;
 declare const defaultElement = "div";
-export declare function Right<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<NavbarRightProps<E>>): React.JSX.Element;
+export declare function Right<E extends React.ElementType = typeof defaultElement>({ className, component, ...props }: React.PropsWithChildren<NavbarRightProps<E>>): React.ReactElement;
 export declare namespace Right {
     var displayName: string;
 }

package/dist/esm/components/Navbar/Toggle.d.ts

@@ -6,7 +6,7 @@ export type NavbarToggleOwnProps = {
 };
 export type NavbarToggleProps<E extends React.ElementType = React.ElementType> = NavbarToggleOwnProps & PolymorphicProps<E> & PolymorphicProps<E, NavbarToggleOwnProps>;
 declare const defaultElement = "div";
-export declare function Toggle<E extends React.ElementType = typeof defaultElement>({ className, component, icon, ...props }: React.PropsWithChildren<NavbarToggleProps<E>>): React.JSX.Element;
+export declare function Toggle<E extends React.ElementType = typeof defaultElement>({ className, component, icon, ...props }: React.PropsWithChildren<NavbarToggleProps<E>>): React.ReactElement;
 export declare namespace Toggle {
     var displayName: string;
 }

package/dist/esm/components/Overlay/index.d.ts

@@ -8,5 +8,5 @@ export interface OverlayOwnProps {
 }
 export type OverlayProps<E extends React.ElementType = React.ElementType> = OverlayOwnProps & PolymorphicProps<E> & PolymorphicProps<E, OverlayOwnProps>;
 declare const defaultElement = "div";
-export declare function Overlay<E extends React.ElementType = typeof defaultElement>({ className, component, icon, position, type, ...props }: React.PropsWithChildren<OverlayProps<E>>): React.JSX.Element;
+export declare function Overlay<E extends React.ElementType = typeof defaultElement>({ className, component, icon, position, type, ...props }: React.PropsWithChildren<OverlayProps<E>>): React.ReactElement;
 export {};

package/dist/esm/components/Progress/index.d.ts

@@ -2,4 +2,4 @@ import * as React from 'react';
 export interface ProgressProps extends React.ProgressHTMLAttributes<HTMLProgressElement> {
     prefixCls?: string;
 }
-export declare function Progress({ className, ...props }: ProgressProps): React.JSX.Element;
+export declare function Progress({ className, ...props }: ProgressProps): React.ReactElement;

package/dist/esm/components/Section/index.d.ts

@@ -7,5 +7,5 @@ export interface SectionOwnProps {
 }
 export type SectionProps<E extends React.ElementType = React.ElementType> = SectionOwnProps & PolymorphicProps<E> & PolymorphicProps<E, SectionOwnProps>;
 declare const defaultElement = "section";
-export declare function Section<E extends React.ElementType = typeof defaultElement>({ className, component, kind, preserveColor, size, ...props }: React.PropsWithChildren<SectionProps<E>>): React.JSX.Element;
+export declare function Section<E extends React.ElementType = typeof defaultElement>({ className, component, kind, preserveColor, size, ...props }: React.PropsWithChildren<SectionProps<E>>): React.ReactElement;
 export {};

package/dist/esm/components/Segmented/index.d.ts

@@ -16,4 +16,4 @@ export interface SegmentedProps<ValueType = RcSegmentedValue> extends Omit<RcSeg
     size?: SizeType;
     vertical?: boolean;
 }
-export declare function Segmented<ValueType = RcSegmentedValue>({ className, options, size, vertical, ...props }: SegmentedProps<ValueType>): React.JSX.Element;
+export declare function Segmented<ValueType = RcSegmentedValue>({ className, options, size, vertical, ...props }: SegmentedProps<ValueType>): React.ReactElement;

package/dist/esm/components/Slider/index.d.ts

@@ -1,4 +1,3 @@
-import { type SliderProps } from '@rc-component/slider';
-import { type SliderRef } from '@rc-component/slider/lib/Slider';
+import { type SliderProps, type SliderRef } from '@rc-component/slider';
 import * as React from 'react';
 export declare const Slider: React.ForwardRefExoticComponent<SliderProps<number | number[]> & React.RefAttributes<SliderRef>>;

package/dist/esm/components/Spinner/index.d.ts

@@ -3,4 +3,4 @@ export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
     prefixCls?: string;
     ratio?: number;
 }
-export declare function Spinner({ className, ratio, ...props }: SpinnerProps): React.JSX.Element;
+export declare function Spinner({ className, ratio, ...props }: SpinnerProps): React.ReactElement;

package/dist/esm/components/Subnav/Item.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 type Props = React.LiHTMLAttributes<HTMLLIElement>;
-export declare function Item(props: Props): React.JSX.Element;
+export declare function Item(props: Props): React.ReactElement;
 export declare namespace Item {
     var displayName: string;
 }

package/dist/esm/components/Subnav/Subnav.d.ts

@@ -3,4 +3,4 @@ export interface SubnavProps extends React.HTMLAttributes<HTMLUListElement> {
     prefixCls?: string;
     type?: 'divider' | 'pill';
 }
-export declare function Subnav({ className, type, ...props }: SubnavProps): React.JSX.Element;
+export declare function Subnav({ className, type, ...props }: SubnavProps): React.ReactElement;

package/dist/esm/components/Tabs/index.d.ts

@@ -1,10 +1,10 @@
 import { type TabsProps as RcTabsProps } from '@rc-component/tabs';
 import * as React from 'react';
+import { type Direction } from '../../types';
 export type TabsPosition = 'left' | 'right' | 'top' | 'bottom';
-export interface Tab {
+export interface Tab extends React.PropsWithChildren {
     active?: boolean;
     animated?: boolean;
-    children?: React.ReactNode;
     className?: string;
     closable?: boolean;
     closeIcon?: React.ReactNode;
@@ -17,12 +17,14 @@ export interface Tab {
     label: React.ReactNode;
     prefixCls?: string;
     style?: React.CSSProperties;
+    tab?: React.ReactNode;
     tabKey?: string;
 }
 export type TabType = 'line' | 'card' | 'editable-card';
-export interface TabsProps extends Exclude<RcTabsProps, 'editable' | 'items' | 'tabPosition'> {
+export interface TabsProps extends Exclude<RcTabsProps, 'direction' | 'editable' | 'items' | 'tabPosition'> {
     addIcon?: React.ReactNode;
     centered?: boolean;
+    direction?: Direction;
     hideAdd?: boolean;
     items?: Tab[];
     size?: 'medium' | 'large';
@@ -30,4 +32,4 @@ export interface TabsProps extends Exclude<RcTabsProps, 'editable' | 'items' | '
     type?: TabType;
     onEdit?: (event: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
 }
-export declare function Tabs({ addIcon, animated, centered, className, direction, hideAdd, items, more, size, type, onEdit, ...props }: TabsProps): React.JSX.Element;
+export declare function Tabs({ addIcon, animated, centered, className, direction, hideAdd, items, more, size, type, onEdit, ...props }: TabsProps): React.ReactElement;

package/dist/esm/components/Tabs/index.js

@@ -11,21 +11,22 @@ export function Tabs({ addIcon, animated, centered, className, direction, hideAd
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'tabs'), [config, prefixCls]);
     const editable = React.useMemo(() => (type === 'editable-card'
         ? {
-            addIcon: addIcon || React.createElement(Icon, { icon: "add" }),
-            removeIcon: React.createElement(Icon, { icon: "close" }),
+            addIcon: addIcon || config.tabs?.addIcon || React.createElement(Icon, { icon: "add" }),
+            removeIcon: config.tabs?.removeIcon || React.createElement(Icon, { icon: "close" }),
             showAdd: hideAdd !== true,
             onEdit: (editType, { event, key }) => {
                 onEdit?.(editType === 'add' ? event : key, editType);
             },
         }
-        : undefined), [addIcon, hideAdd, onEdit, type]);
-    return (React.createElement(RcTabs, { animated: useAnimateConfig(rootCls, animated), direction: direction, items: items, ...restProps, className: classNames({
+        : undefined), [addIcon, config.tabs?.addIcon, config.tabs?.removeIcon, hideAdd, onEdit, type]);
+    return (React.createElement(RcTabs, { animated: useAnimateConfig(rootCls, animated), classNames: {
+            popup: 'test',
+        }, direction: direction, items: items, ...restProps, className: classNames({
             [`${rootCls}-${size}`]: size,
-            [`${rootCls}-card`]: ['card', 'editable-card'].includes(type),
+            [`${rootCls}-card`]: type && ['card', 'editable-card'].includes(type),
             [`${rootCls}-centered`]: centered,
-            [`${rootCls}-editable-card`]: type === 'editable-card',
         }, className), editable: editable, more: {
-            icon: React.createElement(Icon, { icon: "more_horizontal" }),
+            icon: config.tabs?.moreIcon || React.createElement(Icon, { icon: "more_horizontal" }),
             transitionName: getMotionName(prefixCls || config.prefixCls, 'slide-bottom-small'),
             ...more,
         }, prefixCls: rootCls }));

package/dist/esm/components/Text/index.d.ts

@@ -21,5 +21,5 @@ export interface TextOwnProps {
 }
 export type TextProps<E extends React.ElementType = React.ElementType> = TextOwnProps & PolymorphicProps<E> & PolymorphicProps<E, TextOwnProps>;
 declare const defaultElement = "span";
-export declare function Text<E extends React.ElementType = typeof defaultElement>({ align, className, color, column, component, decoration, dropcap, italic, kind, loading, size, transform, verticalAlign, weight, wrap, ...props }: React.PropsWithChildren<TextProps<E>>): React.JSX.Element;
+export declare function Text<E extends React.ElementType = typeof defaultElement>({ align, className, color, column, component, decoration, dropcap, italic, kind, loading, size, transform, verticalAlign, weight, wrap, ...props }: React.PropsWithChildren<TextProps<E>>): React.ReactElement;
 export {};

package/dist/esm/components/Tile/index.d.ts

@@ -8,5 +8,5 @@ export interface TileOwnProps {
 }
 export type TileProps<E extends React.ElementType = React.ElementType> = TileOwnProps & PolymorphicProps<E> & PolymorphicProps<E, TileOwnProps>;
 declare const defaultElement = "div";
-export declare function Tile<E extends React.ElementType = typeof defaultElement>({ className, component, kind, preserveColor, size, ...props }: React.PropsWithChildren<TileProps<E>>): React.JSX.Element;
+export declare function Tile<E extends React.ElementType = typeof defaultElement>({ className, component, kind, preserveColor, size, ...props }: React.PropsWithChildren<TileProps<E>>): React.ReactElement;
 export {};

package/dist/esm/components/Width/Width.d.ts

@@ -7,5 +7,5 @@ export interface WidthOwnProps extends Omit<WidthBreakpointsConfig, 'default'> {
 }
 export type WidthProps<E extends React.ElementType = React.ElementType> = WidthOwnProps & PolymorphicProps<E> & PolymorphicProps<E, WidthOwnProps>;
 declare const defaultElement = "div";
-export declare function Width<E extends React.ElementType = typeof defaultElement>({ className, component, l, m, s, size, xl, ...props }: React.PropsWithChildren<WidthProps<E>>): React.JSX.Element;
+export declare function Width<E extends React.ElementType = typeof defaultElement>({ className, component, l, m, s, size, xl, ...props }: React.PropsWithChildren<WidthProps<E>>): React.ReactElement;
 export {};

package/dist/esm/constants.d.ts

@@ -0,0 +1,12 @@
+export declare enum KeyCode {
+    ArrowDown = "ArrowDown",
+    ArrowLeft = "ArrowLeft",
+    ArrowRight = "ArrowRight",
+    ArrowUp = "ArrowUp",
+    End = "End",
+    Enter = "Enter",
+    Escape = "Escape",
+    Home = "Home",
+    Space = "Space",
+    Tab = "Tab"
+}

package/dist/esm/constants.js

@@ -0,0 +1,13 @@
+export var KeyCode;
+(function (KeyCode) {
+    KeyCode["ArrowDown"] = "ArrowDown";
+    KeyCode["ArrowLeft"] = "ArrowLeft";
+    KeyCode["ArrowRight"] = "ArrowRight";
+    KeyCode["ArrowUp"] = "ArrowUp";
+    KeyCode["End"] = "End";
+    KeyCode["Enter"] = "Enter";
+    KeyCode["Escape"] = "Escape";
+    KeyCode["Home"] = "Home";
+    KeyCode["Space"] = "Space";
+    KeyCode["Tab"] = "Tab";
+})(KeyCode || (KeyCode = {}));

package/dist/esm/utils/motion.d.ts

@@ -1,4 +1,4 @@
-import { type CSSMotionProps } from 'rc-motion';
+import { type CSSMotionProps } from '@rc-component/motion';
 export declare function getMotionName(prefixCls: string, motion: string, transitionName?: string): string;
 export declare function getCollapseMotion(prefixCls: string): CSSMotionProps;
 export declare function mergeDropMaskMotion(prefixCls: string, motion?: CSSMotionProps): CSSMotionProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@broxus/react-uikit",
-    "version": "0.22.0",
+    "version": "0.23.1",
     "description": "React-based UIkit library",
     "license": "MIT",
     "keywords": [
@@ -25,6 +25,7 @@
             "require": "./dist/cjs/index.js",
             "import": "./dist/esm/index.js"
         },
+        "./assets/*": "./dist/assets/*",
         "./styles/*": "./styles/*",
         "./package.json": "./package.json"
     },
@@ -44,12 +45,15 @@
         "npm": ">=8"
     },
     "scripts": {
-        "build": "npx yarn build:js",
+        "build": "npx yarn build:js & npx yarn build:css",
         "build:js": "npx yarn build:cjs & npx yarn build:esm",
         "build:cjs": "tsc -p tsconfig.cjs.json && tsc-alias -p tsconfig.cjs.json",
         "build:esm": "tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json",
-        "watch:js": "npx chokidar \"src/**/*.{ts,tsx}\" -c \"npx yarn build:esm -- --incremental\"",
+        "build:css": "npx yarn build:css:base & npx yarn build:css:uikit",
+        "build:css:base": "npx sass styles:dist/assets --no-source-map",
+        "build:css:uikit": "npx sass styles/_import.scss dist/assets/uikit.min.css --no-source-map --style compressed",
         "dev": "npx yarn watch:js",
+        "watch:js": "npx chokidar \"src/**/*.{ts,tsx}\" -c \"npx yarn build:esm -- --incremental\"",
         "lint": "npx eslint src --ext .ts,.tsx",
         "lint:fix": "npx eslint src --ext .ts,.tsx --fix",
         "cleanup": "npx rimraf dist",
@@ -57,30 +61,29 @@
     },
     "dependencies": {
         "@broxus/js-utils": "^1.5.1",
-        "@rc-component/collapse": "~1.1.1",
-        "@rc-component/dialog": "~1.5.0",
+        "@rc-component/collapse": "~1.1.2",
+        "@rc-component/dialog": "~1.5.1",
         "@rc-component/drawer": "~1.1.0",
-        "@rc-component/dropdown": "~1.0.0",
+        "@rc-component/dropdown": "~1.0.2",
         "@rc-component/input": "~1.1.2",
-        "@rc-component/input-number": "~1.6.0",
-        "@rc-component/motion": "~1.1.4",
+        "@rc-component/input-number": "~1.6.2",
+        "@rc-component/motion": "~1.1.6",
         "@rc-component/picker": "~1.6.0",
-        "@rc-component/resize-observer": "~1.0.0",
-        "@rc-component/segmented": "~1.2.2",
-        "@rc-component/select": "~1.2.1",
-        "@rc-component/slider": "~1.0.0",
-        "@rc-component/switch": "~1.0.2",
-        "@rc-component/tabs": "~1.6.0",
+        "@rc-component/resize-observer": "~1.0.1",
+        "@rc-component/segmented": "~1.2.3",
+        "@rc-component/select": "~1.3.4",
+        "@rc-component/slider": "~1.0.1",
+        "@rc-component/switch": "~1.0.3",
+        "@rc-component/tabs": "~1.7.0",
         "@rc-component/textarea": "~1.1.2",
-        "@rc-component/trigger": "~3.6.15",
+        "@rc-component/trigger": "~3.7.1",
         "@rc-component/util": "~1.4.0",
         "classnames": "^2.5.1",
-        "rc-dialog": "npm:@rc-component/dialog@~1.5.0",
-        "rc-motion": "npm:@rc-component/motion@~1.1.4",
+        "rc-dialog": "npm:@rc-component/dialog@~1.5.1",
+        "rc-motion": "npm:@rc-component/motion@~1.1.6",
         "rc-overflow": "~1.5.0",
-        "rc-resize-observer": "npm:@rc-component/resize-observer@~1.0.0",
+        "rc-resize-observer": "npm:@rc-component/resize-observer@~1.0.1",
         "rc-util": "npm:@rc-component/util@~1.4.0",
-        "shallowequal": "^1.1.0",
         "uikit": "^3.24.2"
     },
     "peerDependencies": {
@@ -88,5 +91,5 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
     },
-    "gitHead": "b7737eba86330231643d40ea21bbc7fbb54a4469"
+    "gitHead": "885a361c058c1941331834993af7529ce4bcaafb"
 }

package/styles/accordion.scss

@@ -28,6 +28,9 @@
  ========================================================================== */
 
 .uk-accordion {
+    display: flex;
+    flex-direction: column;
+    gap: var(--accordion-gutter);
     list-style: none;
     padding: 0;
     @if meta.mixin-exists('hook-accordion') {
@@ -39,8 +42,7 @@
 /* Item
  ========================================================================== */
 
-.uk-accordion > :nth-child(n+2) {
-    margin-top: var(--accordion-item-margin-top);
+.uk-accordion-item {
     @if meta.mixin-exists('hook-accordion-item') {
         @include hook-accordion-item;
     }
@@ -55,36 +57,61 @@
     color: var(--accordion-header-color);
     cursor: pointer;
     display: flex;
-    font-size: var(--accordion-header-font-size);
-    line-height: var(--accordion-header-line-height);
     @if meta.mixin-exists('hook-accordion-header') {
         @include hook-accordion-header;
     }
+}
+
+/*
+ * Header collapsible area
+ */
+.uk-accordion-collapsible-header {
+    cursor: default;
+    @if meta.mixin-exists('hook-accordion-collapsible-header') {
+        @include hook-accordion-collapsible-header;
+    }
+}
+
+.uk-accordion-collapsible-header .uk-accordion-title {
+    cursor: pointer;
+}
 
+.uk-accordion-collapsible-header .uk-accordion-expand-icon {
+    pointer-events: none;
 }
 
-.uk-accordion-header-collapsible-only {
+/*
+ * Icon collapsible area
+ */
+.uk-accordion-collapsible-icon {
     cursor: default;
-    @if meta.mixin-exists('hook-accordion-header-collapsible-only') {
-        @include hook-accordion-header-collapsible-only;
+    @if meta.mixin-exists('hook-accordion-collapsible-icon') {
+        @include hook-accordion-collapsible-icon;
     }
+}
+
+.uk-accordion-collapsible-icon .uk-accordion-expand-icon {
+    cursor: pointer;
+}
 
-    .uk-accordion-header-text {
-        cursor: pointer;
+/* Title */
+.uk-accordion-title {
+    color: var(--accordion-title-color);
+    font-size: var(--accordion-title-font-size);
+    line-height: var(--accordion-title-line-height);
+    @if meta.mixin-exists('hook-accordion-title') {
+        @include hook-accordion-title;
     }
 }
 
 /* Hover + Focus */
-.uk-accordion-header:hover,
-.uk-accordion-header:focus {
+:not(.uk-accordion-collapsible-disabled, .uk-accordion-collapsible-icon):hover > .uk-accordion-title,
+:not(.uk-accordion-collapsible-disabled, .uk-accordion-collapsible-icon) > .uk-accordion-title:hover {
+    color: var(--accordion-title-hover-color);
     outline: none;
     text-decoration: none;
-    @if meta.mixin-exists('hook-accordion-header-hover') {
-        @include hook-accordion-header-hover;
-    }
-
-    &:not(.uk-accordion-item-disabled) {
-        color: var(--accordion-header-hover-color);
+    @if meta.mixin-exists('hook-accordion-title-hover') {
+        @include hook-accordion-title-hover;
     }
 }
 
@@ -94,20 +121,17 @@
     margin-right: var(--accordion-icon-margin-right);
 }
 
+
 /* Disabled item
  ========================================================================== */
 
-.uk-accordion-item-disabled {
+.uk-accordion-collapsible-disabled {
     color: var(--accordion-item-disabled-color);
     cursor: not-allowed;
     opacity: 0.7;
     @if meta.mixin-exists('hook-accordion-item-disable') {
         @include hook-accordion-item-disable;
     }
-
-    .uk-accordion-header {
-        cursor: not-allowed;
-    }
 }
 
 
@@ -115,6 +139,7 @@
  ========================================================================== */
 
 .uk-accordion-panel {
+    box-sizing: border-box;
     display: flow-root;
     overflow: hidden;
     @if meta.mixin-exists('hook-accordion-panel') {
@@ -129,7 +154,8 @@
 .uk-accordion-panel > :last-child { margin-bottom: 0; }
 
 .uk-accordion-body {
-    margin-top: var(--accordion-panel-margin-top);
+    box-sizing: border-box;
+    margin-top: var(--accordion-gutter);
     @if meta.mixin-exists('hook-accordion-body') {
         @include hook-accordion-body;
     }
@@ -179,20 +205,20 @@
 // ========================================================================
 
 :root {
-    --accordion-item-margin-top: var(--global-margin);
+    --accordion-gutter: var(--global-margin);
     --accordion-item-disabled-color: var(--global-muted-color);
-    --accordion-header-font-size: var(--global-medium-font-size);
-    --accordion-header-line-height: #{$accordion-title-line-height};
     --accordion-header-color: var(--global-emphasis-color);
-    --accordion-header-hover-color: var(--global-color);
+    --accordion-title-font-size: var(--global-medium-font-size);
+    --accordion-title-line-height: #{$accordion-title-line-height};
+    --accordion-title-color: var(--global-emphasis-color);
+    --accordion-title-hover-color: var(--global-color);
     --accordion-extra-margin-horizontal: var(--global-small-margin);
-    --accordion-panel-margin-top: var(--global-margin);
     --accordion-icon-margin-right: var(--global-small-margin);
     --accordion-icon-color: var(--global-color);
     --accordion-icon-size: #{$accordion-icon-size};
 
     // Inverse
-    --inverse-accordion-header-color: var(--inverse-global-emphasis-color);
-    --inverse-accordion-header-hover-color: var(--inverse-global-color);
+    --inverse-accordion-title-color: var(--inverse-global-emphasis-color);
+    --inverse-accordion-title-hover-color: var(--inverse-global-color);
     --inverse-accordion-item-disabled-color: var(--inverse-global-emphasis-color);
 }

package/styles/alert.scss

@@ -150,11 +150,12 @@
 .uk-alert-motion-leave {
     opacity: 1;
     overflow: hidden;
-    transition: max-height var(--transition-duration) var(--ease-in-out-circ),
-    opacity var(--transition-duration) var(--ease-in-out-circ),
-    padding-top var(--transition-duration) var(--ease-in-out-circ),
-    padding-bottom var(--transition-duration) var(--ease-in-out-circ),
-    margin-bottom var(--transition-duration) var(--ease-in-out-circ);
+    transition:
+        max-height var(--transition-duration) var(--ease-in-out-circ),
+        opacity var(--transition-duration) var(--ease-in-out-circ),
+        padding-top var(--transition-duration) var(--ease-in-out-circ),
+        padding-bottom var(--transition-duration) var(--ease-in-out-circ),
+        margin-bottom var(--transition-duration) var(--ease-in-out-circ);
 }
 
 .uk-alert-motion-leave-active {