@solibo/solibo-ui 0.5.11 → 0.5.13

package/dist/index.d.ts

@@ -58,14 +58,6 @@ declare type BannerProps = {
     visible?: boolean;
 };
 
-declare type BaseCardProps = {
-    actions?: React.ReactNode;
-    badge?: BadgeProps;
-    checkbox?: CheckboxProps;
-    icon?: IconName;
-    onClick?: React.MouseEventHandler<HTMLElement>;
-};
-
 export declare const Branding: ({ name, size, variant }: BrandingProps) => JSX.Element;
 
 declare type BrandingProps = {
@@ -80,12 +72,6 @@ declare const brandingSVG: {
 
 export declare function Button({ children, className, disabled, icon, onClick, ref, variant, ...props }: ButtonProps): JSX.Element;
 
-export declare const ButtonGroup: ({ children, className, ...props }: ButtonGroupProps) => JSX.Element | null;
-
-declare type ButtonGroupProps = React.HTMLAttributes<HTMLDivElement> & {
-    children?: React.ReactNode;
-};
-
 declare type ButtonProps = React.ComponentPropsWithRef<'button'> & {
     children: React.ReactNode;
     className?: string;
@@ -97,7 +83,18 @@ declare type ButtonProps = React.ComponentPropsWithRef<'button'> & {
 
 export declare const Card: ({ actions, badge, checkbox, children, header, icon, image, imagePosition, onClick, variant, }: CardProps) => JSX.Element;
 
-declare type CardProps = DefaultCardProps | MinimalCardProps;
+declare type CardProps = {
+    actions?: React.ReactNode;
+    badge?: BadgeProps;
+    checkbox?: CheckboxProps;
+    children?: React.ReactNode;
+    header?: React.ReactNode;
+    icon?: IconName;
+    image?: React.ReactNode;
+    imagePosition?: 'top' | 'left';
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    variant?: 'default' | 'minimal';
+};
 
 export declare const Checkbox: ({ checked, disabled, isLoading, label, onChange, ...props }: CheckboxProps) => JSX.Element;
 
@@ -109,6 +106,14 @@ declare type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
+export declare const Chip: ({ accessibleLabel, label, onClick, ...props }: ChipProps) => JSX.Element;
+
+declare type ChipProps = Omit<ComponentPropsWithoutRef<'span'>, 'onClick' | 'tabIndex'> & {
+    accessibleLabel?: string;
+    label: string;
+    onClick: (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+};
+
 export declare const Collapsible: ({ children, disabled, label }: CollapsibleProps) => JSX.Element;
 
 declare type CollapsibleProps = {
@@ -117,10 +122,11 @@ declare type CollapsibleProps = {
     label?: default_2.ReactNode;
 };
 
-export declare const Controls: ({ children, onSaveShortcut, ...props }: ControlsProps) => JSX.Element;
+export declare const Controls: ({ children, className, variant, ...props }: ControlsProps) => JSX.Element | null;
 
-declare type ControlsProps = React.ComponentPropsWithoutRef<'menu'> & {
-    onSaveShortcut?: () => void;
+declare type ControlsProps = React.HTMLAttributes<HTMLDivElement> & {
+    children?: React.ReactNode;
+    variant?: keyof typeof variants_5;
 };
 
 export declare const Croppable: ({ children, fill, height, image, label, onCroppableChange, onFileChange, onImageChange, onTransformChange, transform, standalone, }: CroppableProps) => JSX.Element;
@@ -147,14 +153,6 @@ declare type CroppableTransform = {
     zoom: number;
 };
 
-declare type DefaultCardProps = BaseCardProps & {
-    children?: React.ReactNode;
-    header?: React.ReactNode;
-    image?: React.ReactNode;
-    imagePosition?: 'top' | 'left' | 'right';
-    variant?: 'default';
-};
-
 export declare const Dialog: ({ children, setOpen, ...props }: DialogProps) => JSX.Element;
 
 declare type DialogProps = default_2.DialogHTMLAttributes<HTMLDialogElement> & {
@@ -257,7 +255,7 @@ export declare const Header: ({ children, variant }: HeaderProps) => JSX.Element
 
 declare type HeaderProps = {
     children: React.ReactNode;
-    variant?: keyof typeof variants_5;
+    variant?: keyof typeof variants_6;
 };
 
 export declare const Icon: ({ fill, gap, name, size, variant, }: IconProps) => JSX.Element;
@@ -265,7 +263,19 @@ export declare const Icon: ({ fill, gap, name, size, variant, }: IconProps) => J
 declare type IconName = keyof typeof iconPaths;
 
 declare const iconPaths: {
+    arrowDown: {
+        filled: string;
+        outline: string;
+    };
+    arrowUp: {
+        filled: string;
+        outline: string;
+    };
     bold: string;
+    bookmark: {
+        filled: string;
+        outline: string;
+    };
     buildings: string;
     card: string;
     check: string;
@@ -284,7 +294,10 @@ declare const iconPaths: {
     goTo: string;
     home: string;
     image: string;
-    info: string;
+    info: {
+        filled: string;
+        outline: string;
+    };
     italic: string;
     link: string;
     list: string;
@@ -295,6 +308,10 @@ declare const iconPaths: {
     menu: string;
     mobile: string;
     pencil: string;
+    pencilSquare: {
+        filled: string;
+        outline: string;
+    };
     people: string;
     phone: string;
     plane: {
@@ -303,14 +320,14 @@ declare const iconPaths: {
     };
     plus: string;
     search: string;
-    sort: {
-        filled: string;
-        outline: string;
-    };
     success: string;
     trash: string;
     updown: string;
     upload: string;
+    unbookmark: {
+        filled: string;
+        outline: string;
+    };
     user: string;
     x: string;
 };
@@ -320,7 +337,7 @@ declare type IconProps = {
     gap?: 'left' | 'none' | 'right';
     name: IconName;
     size?: keyof typeof sizes;
-    variant?: keyof typeof variants_6;
+    variant?: keyof typeof variants_7;
 };
 
 declare function Image_2({ fadeDurationMs, showOnError, onLoad, onError, style, ...props }: ImageProps): JSX.Element;
@@ -373,7 +390,7 @@ declare type LoadingProps = {
 
 export declare const Menu: ({ items, menuAccessibleLabel, onItemSelect, position, triggerAccessibleLabel, }: MenuProps) => JSX.Element;
 
-declare type MenuItem = {
+export declare type MenuItem = {
     accessibleLabel?: string;
     disabled?: boolean;
     icon?: IconName;
@@ -391,12 +408,13 @@ declare type MenuProps = {
     triggerAccessibleLabel?: string;
 };
 
-export declare const Message: ({ content, id, preview, type }: MessageOptions) => JSX.Element;
+export declare const Message: ({ content, iconName, id, preview, type, }: MessageOptions) => JSX.Element;
 
 declare type MessageItem = MessageOptions;
 
 export declare type MessageOptions = {
     content: React.ReactNode;
+    iconName?: IconName;
     id: string;
     preview?: boolean;
     type?: 'default' | 'minimal' | 'system' | 'user';
@@ -414,14 +432,6 @@ declare type MessagesProps = {
     sending: boolean;
 };
 
-declare type MinimalCardProps = BaseCardProps & {
-    children?: never;
-    header: React.ReactNode;
-    image?: never;
-    imagePosition?: never;
-    variant: 'minimal';
-};
-
 declare type NativeSelectElement = default_2.ReactElement<NativeSelectProps, 'select'>;
 
 declare type NativeSelectProps = Omit<default_2.ComponentPropsWithoutRef<'select'>, 'children' | 'multiple'> & {
@@ -436,7 +446,7 @@ declare type NavProps = React.HTMLAttributes<HTMLElement> & {
     children?: React.ReactNode;
     className?: string;
     horizontal?: boolean;
-    variant?: keyof typeof variants_7;
+    variant?: keyof typeof variants_8;
 };
 
 declare const Object_2: ({ accessibleLabel, url, ...props }: ObjectProps) => JSX.Element;
@@ -497,6 +507,14 @@ declare const sizes: {
  */
 export declare function Sortable({ children, className, columns, isRearranging, onChangeOrder, ...props }: SortableProps): JSX.Element;
 
+declare type SortableItemContextValue = {
+    canMoveDown: boolean;
+    canMoveUp: boolean;
+    index: number;
+    moveDown: () => void;
+    moveUp: () => void;
+};
+
 declare type SortableProps = default_2.ComponentPropsWithoutRef<'ol'> & {
     columns?: number;
     isRearranging?: boolean;
@@ -566,6 +584,8 @@ declare type ToolbarProps = {
     variant?: 'default' | 'editor';
 };
 
+export declare function useOptionalSortableItem(): SortableItemContextValue | null;
+
 declare const variants: {
     default: string;
     info: string;
@@ -591,17 +611,22 @@ declare const variants_4: {
 
 declare const variants_5: {
     default: string;
-    jumbo: string;
+    fixed: string;
 };
 
 declare const variants_6: {
+    default: string;
+    jumbo: string;
+};
+
+declare const variants_7: {
     danger: string;
     default: string;
     primary: string;
     white: string;
 };
 
-declare const variants_7: {
+declare const variants_8: {
     default: string;
     pills: string;
     tabs: string;

package/dist/index.js

@@ -5,93 +5,94 @@ import { Croppable as a } from "./components/_croppable/index.js";
 import { Dropdown as i } from "./components/_dropdown/index.js";
 import { Dropzone as s } from "./components/_dropzone/index.js";
 import { Editor as d } from "./components/_editor/index.js";
-import { Menu as u } from "./components/_menu/index.js";
-import { Messages as T } from "./components/_messages/index.js";
-import { Portal as C } from "./components/_portal/index.js";
-import { Sortable as F } from "./components/_sortable/index.js";
-import { Toasts as k } from "./components/_toasts/index.js";
-import { Widget as D } from "./components/_widget/index.js";
-import { Accordion as I } from "./components/accordion/index.js";
-import { AppLink as S } from "./components/app-link/index.js";
+import { Menu as c } from "./components/_menu/index.js";
+import { Messages as C } from "./components/_messages/index.js";
+import { Portal as A } from "./components/_portal/index.js";
+import { Sortable as F, useOptionalSortableItem as I } from "./components/_sortable/index.js";
+import { Toasts as S } from "./components/_toasts/index.js";
+import { Widget as k } from "./components/_widget/index.js";
+import { Accordion as D } from "./components/accordion/index.js";
+import { AppLink as G } from "./components/app-link/index.js";
 import { Aside as P } from "./components/aside/index.js";
 import { Badge as w } from "./components/badge/index.js";
 import { Banner as E } from "./components/banner/index.js";
 import { Branding as N } from "./components/branding/index.js";
-import { Button as W } from "./components/button/index.js";
-import { ButtonGroup as y } from "./components/button-group/index.js";
-import { Checkbox as K } from "./components/checkbox/index.js";
-import { Controls as R } from "./components/controls/index.js";
-import { Dialog as V } from "./components/dialog/index.js";
-import { Figure as Y } from "./components/figure/index.js";
-import { File as _ } from "./components/file/index.js";
-import { Footer as oo } from "./components/footer/index.js";
-import { Form as eo } from "./components/form/index.js";
-import { Graph as po } from "./components/graph/index.js";
-import { Group as xo } from "./components/group/index.js";
-import { Header as ao } from "./components/header/index.js";
-import { Icon as io } from "./components/icon/index.js";
-import { Image as so } from "./components/image/index.js";
-import { Input as bo } from "./components/input/index.js";
-import { Link as co } from "./components/link/index.js";
-import { List as Bo } from "./components/list/index.js";
-import { Loading as Ao } from "./components/loading/index.js";
+import { Button as q } from "./components/button/index.js";
+import { Checkbox as J } from "./components/checkbox/index.js";
+import { Chip as Q } from "./components/chip/index.js";
+import { Controls as U } from "./components/controls/index.js";
+import { Dialog as X } from "./components/dialog/index.js";
+import { Figure as Z } from "./components/figure/index.js";
+import { File as $ } from "./components/file/index.js";
+import { Footer as ro } from "./components/footer/index.js";
+import { Form as to } from "./components/form/index.js";
+import { Graph as mo } from "./components/graph/index.js";
+import { Group as fo } from "./components/group/index.js";
+import { Header as no } from "./components/header/index.js";
+import { Icon as lo } from "./components/icon/index.js";
+import { Image as go } from "./components/image/index.js";
+import { Input as co } from "./components/input/index.js";
+import { Link as Co } from "./components/link/index.js";
+import { List as Ao } from "./components/list/index.js";
+import { Loading as Fo } from "./components/loading/index.js";
 import { Message as Lo } from "./components/message/index.js";
-import { Nav as vo } from "./components/nav/index.js";
-import { Object as Go } from "./components/object/index.js";
+import { Nav as ho } from "./components/nav/index.js";
+import { Object as vo } from "./components/object/index.js";
 import { Popover as Mo } from "./components/popover/index.js";
-import { S as ho } from "./index-BDTbPD0V.js";
+import { S as Oo } from "./index-BMYV_5ZN.js";
 import { Table as jo } from "./components/table/index.js";
 import { Textarea as zo } from "./components/textarea/index.js";
 import { Toast as Ho } from "./components/toast/index.js";
-import { Toggle as Oo } from "./components/toggle/index.js";
-import { Toolbar as qo } from "./components/toolbar/index.js";
+import { Toggle as Wo } from "./components/toggle/index.js";
+import { Toolbar as yo } from "./components/toolbar/index.js";
 import './assets/index.css';export {
-  I as Accordion,
-  S as AppLink,
+  D as Accordion,
+  G as AppLink,
   P as Aside,
   e as Avatar,
   w as Badge,
   E as Banner,
   N as Branding,
-  W as Button,
-  y as ButtonGroup,
+  q as Button,
   p as Card,
-  K as Checkbox,
+  J as Checkbox,
+  Q as Chip,
   x as Collapsible,
-  R as Controls,
+  U as Controls,
   a as Croppable,
-  V as Dialog,
+  X as Dialog,
   i as Dropdown,
   s as Dropzone,
   d as Editor,
-  Y as Figure,
-  _ as File,
-  oo as Footer,
-  eo as Form,
-  po as Graph,
-  xo as Group,
-  ao as Header,
-  io as Icon,
-  so as Image,
-  bo as Input,
-  co as Link,
-  Bo as List,
-  Ao as Loading,
-  u as Menu,
+  Z as Figure,
+  $ as File,
+  ro as Footer,
+  to as Form,
+  mo as Graph,
+  fo as Group,
+  no as Header,
+  lo as Icon,
+  go as Image,
+  co as Input,
+  Co as Link,
+  Ao as List,
+  Fo as Loading,
+  c as Menu,
   Lo as Message,
-  T as Messages,
-  vo as Nav,
-  Go as Object,
+  C as Messages,
+  ho as Nav,
+  vo as Object,
   Mo as Popover,
-  C as Portal,
-  ho as Select,
+  A as Portal,
+  Oo as Select,
   F as Sortable,
   jo as Table,
   zo as Textarea,
   Ho as Toast,
-  k as Toasts,
-  Oo as Toggle,
-  qo as Toolbar,
-  D as Widget
+  S as Toasts,
+  Wo as Toggle,
+  yo as Toolbar,
+  k as Widget,
+  I as useOptionalSortableItem
 };
 //# sourceMappingURL=index.js.map

package/dist/tokens.css

@@ -1,6 +1,16 @@
 /* generated by `pnpm tokens:build` 🥷 */
 
 :root {
+  --colors-blue-100: #c9dcff;
+  --colors-blue-200: var(--colors-new-brand-blue);
+  --colors-blue-300: #6695ff;
+  --colors-blue-400: #296afa;
+  --colors-blue-50: var(--colors-new-brand-light-blue);
+  --colors-blue-500: #0b4ad5;
+  --colors-blue-600: #0c3797;
+  --colors-blue-700: #0c2764;
+  --colors-blue-800: #0b1938;
+  --colors-blue-900: #090e1b;
   --colors-box-shadow: #0000001f;
   --colors-green-100: #b0c8c2;
   --colors-green-200: #8aaea5;
@@ -23,6 +33,14 @@
   --colors-neutral-700: #2a2a2a;
   --colors-neutral-800: #1c1c1c;
   --colors-neutral-900: #0b0b0b;
+  --colors-new-brand-blue: #abc5ff;
+  --colors-new-brand-dark-green: #202b1b;
+  --colors-new-brand-light-blue: #e8f1ff;
+  --colors-new-brand-light-yellow: #f8fac0;
+  --colors-new-brand-nature-white: #f7f7e1;
+  --colors-new-brand-shadow-green: #263821;
+  --colors-new-brand-shadow-yellow: #7d8233;
+  --colors-new-brand-yellow: #cde517;
   --colors-orange-100: #fdd7b0;
   --colors-orange-200: #fbc48a;
   --colors-orange-300: #faa954;
@@ -57,6 +75,7 @@
   --colors-semantic-bg-overlay: var(--colors-neutral-100);
   --colors-semantic-bg-page: var(--colors-neutral-50);
   --colors-semantic-bg-surface: var(--colors-neutral-0);
+  --colors-semantic-border-active: var(--colors-neutral-800);
   --colors-semantic-border-default: var(--colors-neutral-200);
   --colors-semantic-border-disabled: var(--colors-neutral-100);
   --colors-semantic-border-focus: var(--colors-purple-500);
@@ -64,6 +83,7 @@
   --colors-semantic-border-strong: var(--colors-neutral-300);
   --colors-semantic-border-subtle: var(--colors-neutral-100);
   --colors-semantic-content-disabled: var(--colors-neutral-300);
+  --colors-semantic-content-highlight: var(--colors-purple-100);
   --colors-semantic-content-link: var(--colors-purple-600);
   --colors-semantic-content-link-hover: var(--colors-purple-700);
   --colors-semantic-content-link-visited: var(--colors-purple-400);
@@ -79,6 +99,8 @@
   --colors-semantic-interactive-hover-subtle: var(--colors-neutral-100);
   --colors-semantic-interactive-neutral: var(--colors-neutral-300);
   --colors-semantic-interactive-pressed: var(--colors-purple-100);
+  --colors-semantic-interactive-secondary-bg: var(--colors-neutral-100);
+  --colors-semantic-interactive-secondary-hover: var(--colors-neutral-200);
   --colors-semantic-interactive-selected: var(--colors-purple-50);
   --colors-semantic-primary-on-primary: var(--colors-neutral-0);
   --colors-semantic-primary-on-primary-subtle: var(--colors-purple-700);
@@ -88,17 +110,31 @@
   --colors-semantic-primary-primary-subtle: var(--colors-purple-50);
   --colors-semantic-primary-primary-subtle-border: var(--colors-purple-200);
   --colors-semantic-status-error-bg: var(--colors-red-50);
-  --colors-semantic-status-error-border: var(--colors-red-500);
-  --colors-semantic-status-error-content: var(--colors-red-700);
+  --colors-semantic-status-error-border: var(--colors-red-300);
+  --colors-semantic-status-error-content: var(--colors-red-800);
   --colors-semantic-status-error-content-inverse: var(--colors-neutral-0);
-  --colors-semantic-status-success-bg: var(--colors-green-50);
-  --colors-semantic-status-success-border: var(--colors-green-200);
+  --colors-semantic-status-info-bg: var(--colors-blue-50);
+  --colors-semantic-status-info-border: var(--colors-blue-300);
+  --colors-semantic-status-info-content: var(--colors-blue-800);
+  --colors-semantic-status-info-content-inverse: var(--colors-neutral-0);
+  --colors-semantic-status-success-bg: var(--colors-green-100);
+  --colors-semantic-status-success-border: var(--colors-green-300);
   --colors-semantic-status-success-content: var(--colors-green-800);
   --colors-semantic-status-success-content-inverse: var(--colors-neutral-0);
   --colors-semantic-status-warning-bg: var(--colors-orange-50);
-  --colors-semantic-status-warning-border: var(--colors-orange-200);
+  --colors-semantic-status-warning-border: var(--colors-orange-300);
   --colors-semantic-status-warning-content: var(--colors-orange-800);
   --colors-semantic-status-warning-content-inverse: var(--colors-neutral-0);
+  --colors-solibo-green-100: #d9e0d7;
+  --colors-solibo-green-200: #b8c7b3;
+  --colors-solibo-green-300: #90aa88;
+  --colors-solibo-green-400: #698c5f;
+  --colors-solibo-green-50: #eff1ee;
+  --colors-solibo-green-500: #4a6344;
+  --colors-solibo-green-600: var(--colors-new-brand-shadow-green);
+  --colors-solibo-green-700: var(--colors-new-brand-dark-green);
+  --colors-solibo-green-800: #151b13;
+  --colors-solibo-green-900: #0c0f0b;
   --colors-translucent: #fff9;
   --font-base: 'Figtree';
   --font-font-weight-bold: 700;
@@ -176,8 +212,8 @@
   --typography-font-sizes-body-md: var(--scale-16);
   --typography-font-sizes-body-sm: var(--scale-14);
   --typography-font-sizes-caption: var(--scale-12);
-  --typography-font-sizes-display-lg: var(--scale-56);
-  --typography-font-sizes-display-sm: var(--scale-48);
+  --typography-font-sizes-display-lg: var(--scale-48);
+  --typography-font-sizes-display-sm: var(--scale-40);
   --typography-font-sizes-h1: var(--scale-28);
   --typography-font-sizes-h2: var(--scale-24);
   --typography-font-sizes-h3: var(--scale-20);
@@ -202,12 +238,14 @@
   --colors-semantic-bg-overlay: var(--colors-neutral-600);
   --colors-semantic-bg-page: var(--colors-neutral-900);
   --colors-semantic-bg-surface: var(--colors-neutral-700);
+  --colors-semantic-border-active: var(--colors-neutral-50);
   --colors-semantic-border-default: var(--colors-neutral-500);
   --colors-semantic-border-disabled: var(--colors-neutral-700);
   --colors-semantic-border-focus: var(--colors-purple-400);
   --colors-semantic-border-on-color: var(--colors-neutral-400);
   --colors-semantic-border-subtle: var(--colors-neutral-600);
   --colors-semantic-content-disabled: var(--colors-neutral-500);
+  --colors-semantic-content-highlight: var(--colors-purple-700);
   --colors-semantic-content-link: var(--colors-purple-200);
   --colors-semantic-content-link-hover: var(--colors-purple-300);
   --colors-semantic-content-primary: var(--colors-neutral-50);
@@ -218,6 +256,8 @@
   --colors-semantic-interactive-hover-subtle: var(--colors-neutral-600);
   --colors-semantic-interactive-neutral: var(--colors-neutral-400);
   --colors-semantic-interactive-pressed: var(--colors-purple-700);
+  --colors-semantic-interactive-secondary-bg: var(--colors-neutral-600);
+  --colors-semantic-interactive-secondary-hover: var(--colors-neutral-500);
   --colors-semantic-interactive-selected: var(--colors-purple-900);
   --colors-semantic-primary-on-primary-subtle: var(--colors-purple-200);
   --colors-semantic-primary-primary: var(--colors-purple-300);
@@ -225,9 +265,9 @@
   --colors-semantic-primary-primary-hover: var(--colors-purple-200);
   --colors-semantic-primary-primary-subtle: var(--colors-purple-800);
   --colors-semantic-primary-primary-subtle-border: var(--colors-purple-600);
-  --colors-semantic-status-error-bg: var(--colors-red-100);
-  --colors-semantic-status-error-border: var(--colors-red-300);
-  --colors-semantic-status-error-content: var(--colors-red-800);
+  --colors-semantic-status-error-bg: var(--colors-red-200);
+  --colors-semantic-status-info-bg: ;
+  --colors-semantic-status-info-border: var(--colors-blue-400);
   --colors-semantic-status-success-bg: var(--colors-green-200);
   --colors-semantic-status-success-border: var(--colors-green-400);
   --colors-semantic-status-warning-bg: var(--colors-orange-200);
@@ -238,13 +278,10 @@
 @media (width <= 960px) {
   :root {
     --typography-font-sizes-body-lg: var(--scale-16);
-    --typography-font-sizes-display-lg: var(--scale-48);
-    --typography-font-sizes-display-sm: var(--scale-40);
+    --typography-font-sizes-display-lg: var(--scale-40);
+    --typography-font-sizes-display-sm: var(--scale-32);
     --typography-font-sizes-h1: var(--scale-24);
     --typography-font-sizes-h2: var(--scale-20);
     --typography-font-sizes-h3: var(--scale-18);
-    --typography-font-sizes-h4: var(--scale-18);
-    --typography-font-sizes-label-lg: var(--scale-14);
-    --typography-font-sizes-label-sm: var(--scale-12);
   }
 }