@citygross/components_v2 0.0.53 → 0.0.55

package/dist/components/AlertBox/AlertBox.d.ts

@@ -1,17 +1,17 @@
 import React from 'react';
-import { TPaletteKeys, THardSpacingKeys, TSpacingKeys } from '@citygross/design-tokens_v2';
+import { THardSpacingKeys, TPaletteKeys, TSpacingKeys } from '@citygross/design-tokens_v2';
 
 declare type TAlertBox = {
+    arrowPlacement?: 'left' | 'right';
+    arrowSpacing?: THardSpacingKeys;
     background?: TPaletteKeys;
     borderColor?: TPaletteKeys;
-    icon?: JSX.Element;
     children: React.ReactNode;
+    icon?: JSX.Element;
     iconMinWidth?: THardSpacingKeys;
-    withArrow?: boolean;
-    arrowPlacement?: 'left' | 'right';
-    arrowSpacing?: THardSpacingKeys;
     padding?: TSpacingKeys;
+    withArrow?: boolean;
 };
-declare function AlertBox({ background, borderColor, icon, iconMinWidth, withArrow, arrowSpacing, arrowPlacement, padding, children }: TAlertBox): JSX.Element;
+declare function AlertBox({ arrowPlacement, arrowSpacing, background, borderColor, children, icon, iconMinWidth, padding, withArrow }: TAlertBox): JSX.Element;
 
 export { AlertBox, TAlertBox };

package/dist/components/AlertBox/AlertBox.js

@@ -3,15 +3,15 @@ import { BoxArrow } from '../BoxArrow/BoxArrow.js';
 import { alertBox, iconContainer } from './AlertBox.css.vanilla.js';
 
 function AlertBox({
+  arrowPlacement,
+  arrowSpacing,
   background = "blueLight",
   borderColor = "alertBlue",
+  children,
   icon,
   iconMinWidth = 24,
-  withArrow,
-  arrowSpacing,
-  arrowPlacement,
   padding = "sm",
-  children
+  withArrow
 }) {
   return /* @__PURE__ */ React.createElement("div", null, withArrow ? /* @__PURE__ */ React.createElement(
     BoxArrow,
@@ -30,7 +30,7 @@ function AlertBox({
         padding
       })
     },
-    icon ? /* @__PURE__ */ React.createElement("div", { className: iconContainer({ minWidth: `${iconMinWidth}` }) }, icon) : null,
+    icon ? /* @__PURE__ */ React.createElement("div", { className: iconContainer({ minWidth: iconMinWidth }) }, icon) : null,
     children
   ));
 }

package/dist/components/Button/Button.d.ts

@@ -1,21 +1,21 @@
 import React from 'react';
 
 declare type TCgButton = {
-    size?: 'small' | 'medium' | 'icon' | 'large';
-    variant?: 'primary' | 'secondary' | 'ghost' | 'tertiary' | 'prio' | 'dark';
-    icon?: React.ReactNode;
-    flexReverse?: boolean;
-    loading?: boolean;
+    ariaLabel?: string;
+    buttonRef?: React.Ref<HTMLButtonElement>;
     children?: React.ReactNode;
+    className?: string;
     disabled?: boolean;
-    onClick?: () => void;
+    flexReverse?: boolean;
     fullWidth?: boolean;
-    buttonRef?: React.Ref<HTMLButtonElement>;
+    icon?: React.ReactNode;
+    loading?: boolean;
+    onClick?: () => void;
     round?: boolean;
-    className?: string;
     shouldPreventDefault?: boolean;
-    ariaLabel?: string;
+    size?: 'small' | 'medium' | 'icon' | 'large';
+    variant?: 'primary' | 'secondary' | 'ghost' | 'tertiary' | 'prio' | 'dark';
 };
-declare const Button: ({ size, variant, icon, flexReverse, disabled, onClick, children, loading, fullWidth, buttonRef, round, className, shouldPreventDefault, ariaLabel }: TCgButton) => JSX.Element;
+declare const Button: ({ ariaLabel, buttonRef, children, className, disabled, flexReverse, fullWidth, icon, loading, onClick, round, shouldPreventDefault, size, variant }: TCgButton) => JSX.Element;
 
 export { Button, TCgButton };

package/dist/components/Button/Button.js

@@ -3,43 +3,38 @@ import { button, buttonContent, buttonLoader } from './Button.css.vanilla.js';
 import { Spinner } from '../Spinner/Spinner.js';
 
 const Button = ({
-  size,
-  variant,
-  icon,
-  flexReverse,
-  disabled,
-  onClick,
+  ariaLabel,
+  buttonRef,
   children,
-  loading,
+  className,
+  disabled,
+  flexReverse,
   fullWidth,
-  buttonRef,
+  icon,
+  loading,
+  onClick,
   round,
-  className,
   shouldPreventDefault = true,
-  ariaLabel
+  size,
+  variant
 }) => {
   return /* @__PURE__ */ React.createElement(
     "button",
     {
-      ref: buttonRef,
       "aria-label": ariaLabel,
       className: `${button({
         buttonPadding: size,
         buttonRadius: round ? "round" : "default",
+        buttonShadow: variant === "ghost" || variant === "secondary" ? "none" : size === "small" ? "small" : "default",
         buttonVariant: variant,
-        fullWidth,
-        buttonShadow: variant === "ghost" || variant === "secondary" ? "none" : size === "small" ? "small" : "default"
+        fullWidth
       })} ${className}`,
       disabled: disabled || loading,
-      onKeyDown: (event) => {
-        if (event.key === "Enter") {
-          onClick && onClick();
-        }
-      },
       onClick: (e) => {
         shouldPreventDefault && e.preventDefault();
         onClick && onClick();
-      }
+      },
+      ref: buttonRef
     },
     /* @__PURE__ */ React.createElement(
       "div",

package/dist/components/Modal/Modal.d.ts

@@ -2,16 +2,16 @@ import React from 'react';
 import { TPaletteKeys } from '@citygross/design-tokens_v2';
 
 declare type TModal = {
-    onBackdropClick?: () => void;
+    background?: TPaletteKeys;
     children?: React.ReactNode;
-    title?: string;
-    subTitle?: string;
-    hideCancel?: boolean;
-    querySelector?: string;
+    className?: string;
     footer?: JSX.Element;
-    background?: TPaletteKeys;
+    hideCancel?: boolean;
     isConfirm?: boolean;
-    className?: string;
+    onBackdropClick?: () => void;
+    querySelector?: string;
+    subTitle?: string;
+    title?: string;
 };
 declare const Modal: React.ForwardRefExoticComponent<TModal & React.RefAttributes<HTMLDivElement>>;
 

package/dist/components/Modal/Modal.js

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, Fragment } from 'react';
 import { createPortal } from 'react-dom';
 import { Icons } from '@citygross/icons_v2';
 import { Spacer } from '../Spacer/Spacer.js';
@@ -8,16 +8,16 @@ import { BodyText } from '../../typography/BodyText/BodyText.js';
 
 const Modal = forwardRef(
   ({
-    onBackdropClick,
+    background = "white",
     children,
-    title,
-    subTitle,
+    className,
+    footer,
     hideCancel = true,
     isConfirm,
-    background = "white",
+    onBackdropClick,
     querySelector = "#root",
-    footer,
-    className
+    subTitle,
+    title
   }, ref) => {
     const domSafe = typeof document !== "undefined";
     return domSafe ? createPortal(
@@ -31,11 +31,13 @@ const Modal = forwardRef(
         /* @__PURE__ */ React.createElement(
           "div",
           {
+            "aria-modal": "true",
             className: `${modalContainer({
               backgroundColor: background,
               maxWidth: isConfirm ? "confirm" : "regular"
             })} ${className}`,
-            onClick: (e) => e.stopPropagation()
+            onClick: (e) => e.stopPropagation(),
+            role: "dialog"
           },
           title && /* @__PURE__ */ React.createElement("div", { className: modalHeaderContainer }, /* @__PURE__ */ React.createElement("div", { className: modalHeader }, /* @__PURE__ */ React.createElement(H2, null, title), !hideCancel && /* @__PURE__ */ React.createElement(
             "div",
@@ -46,7 +48,7 @@ const Modal = forwardRef(
             /* @__PURE__ */ React.createElement(Icons.Cross, null)
           )), /* @__PURE__ */ React.createElement(BodyText, null, subTitle)),
           children && /* @__PURE__ */ React.createElement("div", { className: childrenWrapper }, children),
-          footer && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Spacer, null), /* @__PURE__ */ React.createElement("div", { className: footerWrapper }, footer))
+          footer && /* @__PURE__ */ React.createElement(Fragment, null, /* @__PURE__ */ React.createElement(Spacer, null), /* @__PURE__ */ React.createElement("div", { className: footerWrapper }, footer))
         )
       ),
       document.querySelector(querySelector) || document.body

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citygross/components_v2",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "license": "ISC",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -79,5 +79,5 @@
     "react-slick": "^0.30.1",
     "slick-carousel": "^1.8.1"
   },
-  "gitHead": "c3ba222ac06cddf16f1ecd0f381f22bc13ff0c21"
+  "gitHead": "58ef69ddd64ea278231d5795b6a16f5169e9553f"
 }