@quen-ui/components 1.0.1 → 1.2.0

package/dist/Banner/Banner.cjs.js

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const iconsReact = require("@tabler/icons-react");
+const Title = require("../typography/Title/Title.cjs.js");
+const Text = require("../typography/Text/Text.cjs.js");
+const Button = require("../Button/Button.cjs.js");
+const styles = require("./styles.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
+const DEFAULT_ICONS = {
+  info: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconInfoCircle, {}),
+  success: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconRosetteDiscountCheck, {}),
+  warning: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlertTriangle, {}),
+  danger: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconAlertTriangle, {}),
+  neutral: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconInfoCircle, {})
+};
+const Banner = ({
+  variant = "info",
+  title,
+  description,
+  action,
+  onClose,
+  dismissible = false,
+  icon,
+  size = "m",
+  as = "div",
+  className,
+  children,
+  storageKey,
+  ...restProps
+}) => {
+  const [isVisible, setIsVisible] = React.useState(true);
+  const [isMounted, setIsMounted] = React.useState(false);
+  React.useEffect(() => {
+    if (storageKey && typeof window !== "undefined") {
+      const dismissed = window.localStorage.getItem(`banner:${storageKey}`);
+      if (dismissed === "true") {
+        setIsVisible(false);
+      }
+    }
+    setIsMounted(true);
+  }, [storageKey]);
+  const handleClose = React.useCallback(() => {
+    setIsVisible(false);
+    onClose?.();
+    if (storageKey && typeof window !== "undefined") {
+      window.localStorage.setItem(`banner:${storageKey}`, "true");
+    }
+  }, [onClose, storageKey]);
+  if (!isMounted || !isVisible) return null;
+  const displayIcon = icon ?? DEFAULT_ICONS[variant];
+  const titleId = `banner-title-${title?.toString().slice(0, 8) || Date.now()}`;
+  const descId = `banner-desc-${Date.now()}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.BannerStyled,
+    {
+      as,
+      role: "region",
+      variant,
+      size,
+      visible: isVisible,
+      dismissible,
+      "aria-labelledby": title ? titleId : void 0,
+      "aria-describedby": description ? descId : void 0,
+      className,
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(styles.BannerContent, { children: [
+          title && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: "xs", children: [
+            displayIcon && /* @__PURE__ */ jsxRuntime.jsx(styles.BannerIcon, { "aria-hidden": "true", children: displayIcon }),
+            /* @__PURE__ */ jsxRuntime.jsx(Title, { size: "s", id: titleId, children: title })
+          ] }),
+          description && /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "center", gap: "xs", children: [
+            displayIcon && !title && /* @__PURE__ */ jsxRuntime.jsx(styles.BannerIcon, { "aria-hidden": "true", children: displayIcon }),
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { id: descId, children: description })
+          ] })
+        ] }),
+        action && /* @__PURE__ */ jsxRuntime.jsx(styles.BannerAction, { children: action }),
+        dismissible && /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            size: "s",
+            view: "icon",
+            onClick: handleClose,
+            "aria-label": "Close notification",
+            type: "button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(iconsReact.IconX, { width: 16, height: 16 })
+          }
+        )
+      ]
+    }
+  );
+};
+exports.Banner = Banner;
+exports.default = Banner;

package/dist/Banner/Banner.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IBannerProps } from './types';
+export declare const Banner: React.FC<IBannerProps>;
+export default Banner;

package/dist/Banner/Banner.es.js

@@ -0,0 +1,96 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { IconX, IconInfoCircle, IconAlertTriangle, IconRosetteDiscountCheck } from "@tabler/icons-react";
+import Title from "../typography/Title/Title.es.js";
+import Text from "../typography/Text/Text.es.js";
+import Button from "../Button/Button.es.js";
+import { BannerStyled, BannerContent, BannerIcon, BannerAction } from "./styles.es.js";
+import Flex from "../Flex/Flex.es.js";
+const DEFAULT_ICONS = {
+  info: /* @__PURE__ */ jsx(IconInfoCircle, {}),
+  success: /* @__PURE__ */ jsx(IconRosetteDiscountCheck, {}),
+  warning: /* @__PURE__ */ jsx(IconAlertTriangle, {}),
+  danger: /* @__PURE__ */ jsx(IconAlertTriangle, {}),
+  neutral: /* @__PURE__ */ jsx(IconInfoCircle, {})
+};
+const Banner = ({
+  variant = "info",
+  title,
+  description,
+  action,
+  onClose,
+  dismissible = false,
+  icon,
+  size = "m",
+  as = "div",
+  className,
+  children,
+  storageKey,
+  ...restProps
+}) => {
+  const [isVisible, setIsVisible] = useState(true);
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    if (storageKey && typeof window !== "undefined") {
+      const dismissed = window.localStorage.getItem(`banner:${storageKey}`);
+      if (dismissed === "true") {
+        setIsVisible(false);
+      }
+    }
+    setIsMounted(true);
+  }, [storageKey]);
+  const handleClose = useCallback(() => {
+    setIsVisible(false);
+    onClose?.();
+    if (storageKey && typeof window !== "undefined") {
+      window.localStorage.setItem(`banner:${storageKey}`, "true");
+    }
+  }, [onClose, storageKey]);
+  if (!isMounted || !isVisible) return null;
+  const displayIcon = icon ?? DEFAULT_ICONS[variant];
+  const titleId = `banner-title-${title?.toString().slice(0, 8) || Date.now()}`;
+  const descId = `banner-desc-${Date.now()}`;
+  return /* @__PURE__ */ jsxs(
+    BannerStyled,
+    {
+      as,
+      role: "region",
+      variant,
+      size,
+      visible: isVisible,
+      dismissible,
+      "aria-labelledby": title ? titleId : void 0,
+      "aria-describedby": description ? descId : void 0,
+      className,
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsxs(BannerContent, { children: [
+          title && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", children: [
+            displayIcon && /* @__PURE__ */ jsx(BannerIcon, { "aria-hidden": "true", children: displayIcon }),
+            /* @__PURE__ */ jsx(Title, { size: "s", id: titleId, children: title })
+          ] }),
+          description && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "xs", children: [
+            displayIcon && !title && /* @__PURE__ */ jsx(BannerIcon, { "aria-hidden": "true", children: displayIcon }),
+            /* @__PURE__ */ jsx(Text, { id: descId, children: description })
+          ] })
+        ] }),
+        action && /* @__PURE__ */ jsx(BannerAction, { children: action }),
+        dismissible && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "s",
+            view: "icon",
+            onClick: handleClose,
+            "aria-label": "Close notification",
+            type: "button",
+            children: /* @__PURE__ */ jsx(IconX, { width: 16, height: 16 })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Banner,
+  Banner as default
+};

package/dist/Banner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Banner } from './Banner';
+export type { IBannerProps, TBannerVariant } from './types';

package/dist/Banner/styles.cjs.js

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const variantStyles = {
+  info: styled.css`
+    background: ${({ theme }) => theme.components.Banner.info.background};
+    border-color: ${({ theme }) => theme.components.Banner.info.borderColor};
+    color: ${({ theme }) => theme.components.Banner.info.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.info.iconColor};
+  `,
+  success: styled.css`
+    background: ${({ theme }) => theme.components.Banner.success.background};
+    border-color: ${({ theme }) => theme.components.Banner.success.borderColor};
+    color: ${({ theme }) => theme.components.Banner.success.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.success.iconColor};
+  `,
+  warning: styled.css`
+    background: ${({ theme }) => theme.components.Banner.warning.background};
+    border-color: ${({ theme }) => theme.components.Banner.warning.borderColor};
+    color: ${({ theme }) => theme.components.Banner.warning.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.warning.iconColor};
+  `,
+  danger: styled.css`
+    background: ${({ theme }) => theme.components.Banner.danger.background};
+    border-color: ${({ theme }) => theme.components.Banner.danger.borderColor};
+    color: ${({ theme }) => theme.components.Banner.danger.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.danger.iconColor};
+  `,
+  neutral: styled.css`
+    background: ${({ theme }) => theme.components.Banner.neutral.background};
+    border-color: ${({ theme }) => theme.components.Banner.neutral.borderColor};
+    color: ${({ theme }) => theme.components.Banner.neutral.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.neutral.iconColor};
+  `
+};
+const sizeStyles = {
+  xs: styled.css`
+    padding: ${({ theme }) => theme.space.xs};
+    gap: ${({ theme }) => theme.space.xs};
+  `,
+  s: styled.css`
+    padding: ${({ theme }) => theme.space.s};
+    gap: ${({ theme }) => theme.space.s};
+  `,
+  m: styled.css`
+    padding: ${({ theme }) => theme.space.m};
+    gap: ${({ theme }) => theme.space.m};
+  `,
+  l: styled.css`
+    padding: ${({ theme }) => theme.space.l};
+    gap: ${({ theme }) => theme.space.l};
+  `
+};
+const BannerStyled = styled.div`
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  align-items: center;
+  gap: ${({ size }) => size === "s" ? "10px" : size === "m" ? "14px" : "18px"};
+  border-left: 3px solid var(--banner-icon);
+  border-radius: ${({ theme }) => theme.control.radius};
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+
+  ${({ visible }) => !visible && styled.css`
+      opacity: 0;
+      transform: translateY(-8px);
+      pointer-events: none;
+      max-height: 0;
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+    `}
+
+  ${({ variant }) => variantStyles[variant]};
+  ${({ size }) => sizeStyles[size]};
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none !important;
+  }
+`;
+const BannerIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--banner-icon);
+  flex-shrink: 0;
+  width: 1.2em;
+  height: 1.2em;
+`;
+const BannerContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+`;
+const BannerAction = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: auto;
+  padding-left: 12px;
+
+  button,
+  a {
+    white-space: nowrap;
+  }
+`;
+exports.BannerAction = BannerAction;
+exports.BannerContent = BannerContent;
+exports.BannerIcon = BannerIcon;
+exports.BannerStyled = BannerStyled;

package/dist/Banner/styles.d.ts

@@ -0,0 +1,12 @@
+import { TBannerVariant } from './types';
+import { TQuenSize } from '../types/size';
+interface IBannerStyledProps {
+    variant: TBannerVariant;
+    size: TQuenSize;
+    visible: boolean;
+}
+export declare const BannerStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IBannerStyledProps>> & string;
+export declare const BannerIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BannerContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BannerAction: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export {};

package/dist/Banner/styles.es.js

@@ -0,0 +1,113 @@
+import styled, { css } from "styled-components";
+const variantStyles = {
+  info: css`
+    background: ${({ theme }) => theme.components.Banner.info.background};
+    border-color: ${({ theme }) => theme.components.Banner.info.borderColor};
+    color: ${({ theme }) => theme.components.Banner.info.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.info.iconColor};
+  `,
+  success: css`
+    background: ${({ theme }) => theme.components.Banner.success.background};
+    border-color: ${({ theme }) => theme.components.Banner.success.borderColor};
+    color: ${({ theme }) => theme.components.Banner.success.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.success.iconColor};
+  `,
+  warning: css`
+    background: ${({ theme }) => theme.components.Banner.warning.background};
+    border-color: ${({ theme }) => theme.components.Banner.warning.borderColor};
+    color: ${({ theme }) => theme.components.Banner.warning.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.warning.iconColor};
+  `,
+  danger: css`
+    background: ${({ theme }) => theme.components.Banner.danger.background};
+    border-color: ${({ theme }) => theme.components.Banner.danger.borderColor};
+    color: ${({ theme }) => theme.components.Banner.danger.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.danger.iconColor};
+  `,
+  neutral: css`
+    background: ${({ theme }) => theme.components.Banner.neutral.background};
+    border-color: ${({ theme }) => theme.components.Banner.neutral.borderColor};
+    color: ${({ theme }) => theme.components.Banner.neutral.color};
+    --banner-icon-color: ${({ theme }) => theme.components.Banner.neutral.iconColor};
+  `
+};
+const sizeStyles = {
+  xs: css`
+    padding: ${({ theme }) => theme.space.xs};
+    gap: ${({ theme }) => theme.space.xs};
+  `,
+  s: css`
+    padding: ${({ theme }) => theme.space.s};
+    gap: ${({ theme }) => theme.space.s};
+  `,
+  m: css`
+    padding: ${({ theme }) => theme.space.m};
+    gap: ${({ theme }) => theme.space.m};
+  `,
+  l: css`
+    padding: ${({ theme }) => theme.space.l};
+    gap: ${({ theme }) => theme.space.l};
+  `
+};
+const BannerStyled = styled.div`
+  display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  align-items: center;
+  gap: ${({ size }) => size === "s" ? "10px" : size === "m" ? "14px" : "18px"};
+  border-left: 3px solid var(--banner-icon);
+  border-radius: ${({ theme }) => theme.control.radius};
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+
+  ${({ visible }) => !visible && css`
+      opacity: 0;
+      transform: translateY(-8px);
+      pointer-events: none;
+      max-height: 0;
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+    `}
+
+  ${({ variant }) => variantStyles[variant]};
+  ${({ size }) => sizeStyles[size]};
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none !important;
+  }
+`;
+const BannerIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--banner-icon);
+  flex-shrink: 0;
+  width: 1.2em;
+  height: 1.2em;
+`;
+const BannerContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+`;
+const BannerAction = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: auto;
+  padding-left: 12px;
+
+  button,
+  a {
+    white-space: nowrap;
+  }
+`;
+export {
+  BannerAction,
+  BannerContent,
+  BannerIcon,
+  BannerStyled
+};

package/dist/Banner/types.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode, ElementType, HTMLAttributes } from 'react';
+import { TQuenSize } from '../types/size';
+export type TBannerVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+export interface IBannerProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    /**
+     * Unique key for storing the closure state in localStorage.
+     * If transferred, the banner will not appear again after closing.
+     */
+    storageKey?: string;
+    /**
+     * Visual style of the banner
+     * @default 'info'
+     */
+    variant?: TBannerVariant;
+    /** Banner title */
+    title?: ReactNode;
+    /** Description/banner content */
+    description?: ReactNode;
+    /** Action element (button, link) */
+    action?: ReactNode;
+    /** Callback when closing a banner */
+    onClose?: () => void;
+    /**
+     * Whether to show the close button
+     * @default false
+     */
+    dismissible?: boolean;
+    /** Custom icon (overrides the icon by variant) */
+    icon?: ReactNode;
+    /**
+     * Banner size
+     * @default 'm'
+     */
+    size?: TQuenSize;
+    /**
+     * Custom rendering element
+     * @default 'div'
+     */
+    as?: ElementType;
+}

package/dist/Button/styles.cjs.js

@@ -6,21 +6,17 @@ const getBackground = (theme, view = "primary", isDisabled) => {
   switch (view) {
     case "secondary":
       return styled.css`
-        background: ${theme.components.Button.secondaryBackground};
-        color: ${theme.components.Button.color};
+        background: transparent;
+        border: 1px solid ${theme.components.Button.secondaryBackground};
 
         &:hover {
-          background: ${polished.darken(
-        0.1,
-        theme.components.Button.secondaryBackground
-      )};
+          color: ${theme.colors[theme.primaryColor][7]};
+          border: 1px solid ${theme.colors[theme.primaryColor][7]};
         }
 
         &:active {
-          background: ${polished.darken(
-        0.2,
-        theme.components.Button.secondaryBackground
-      )};
+          color: ${theme.colors[theme.primaryColor][9]};
+          border: 1px solid ${theme.colors[theme.primaryColor][9]};
         }
       `;
     case "danger":

package/dist/Button/styles.es.js

@@ -4,21 +4,17 @@ const getBackground = (theme, view = "primary", isDisabled) => {
   switch (view) {
     case "secondary":
       return css`
-        background: ${theme.components.Button.secondaryBackground};
-        color: ${theme.components.Button.color};
+        background: transparent;
+        border: 1px solid ${theme.components.Button.secondaryBackground};
 
         &:hover {
-          background: ${darken(
-        0.1,
-        theme.components.Button.secondaryBackground
-      )};
+          color: ${theme.colors[theme.primaryColor][7]};
+          border: 1px solid ${theme.colors[theme.primaryColor][7]};
         }
 
         &:active {
-          background: ${darken(
-        0.2,
-        theme.components.Button.secondaryBackground
-      )};
+          color: ${theme.colors[theme.primaryColor][9]};
+          border: 1px solid ${theme.colors[theme.primaryColor][9]};
         }
       `;
     case "danger":

package/dist/Calendar/Calendar.cjs.js

@@ -48,9 +48,11 @@ const Calendar = ({
     }
   }, [level]);
   React.useEffect(() => {
-    setInternalSingleDate(null);
-    setInternalEndDate(null);
-    setInternalStartDate(null);
+    if (typeof range !== "undefined") {
+      setInternalSingleDate(null);
+      setInternalEndDate(null);
+      setInternalStartDate(null);
+    }
   }, [range]);
   const [currentMonth, setCurrentMonth] = React.useState(/* @__PURE__ */ new Date());
   const levelTitle = React.useMemo(() => {

package/dist/Calendar/Calendar.es.js

@@ -47,9 +47,11 @@ const Calendar$1 = ({
     }
   }, [level]);
   useEffect(() => {
-    setInternalSingleDate(null);
-    setInternalEndDate(null);
-    setInternalStartDate(null);
+    if (typeof range !== "undefined") {
+      setInternalSingleDate(null);
+      setInternalEndDate(null);
+      setInternalStartDate(null);
+    }
   }, [range]);
   const [currentMonth, setCurrentMonth] = useState(/* @__PURE__ */ new Date());
   const levelTitle = useMemo(() => {

package/dist/Calendar/styles.cjs.js

@@ -59,7 +59,6 @@ const DayStyled = styled(Button).attrs({ view: "icon" }).withConfig({
 
   ${({ theme, isSelected, isCurrentMonth }) => {
   const { secondaryColor } = theme.components.Calendar;
-  console.log(secondaryColor);
   return styled.css`
       color: ${isSelected ? "#fff" : isCurrentMonth ? theme.textColor : secondaryColor};
     `;

package/dist/Calendar/styles.es.js

@@ -57,7 +57,6 @@ const DayStyled = styled(Button).attrs({ view: "icon" }).withConfig({
 
   ${({ theme, isSelected, isCurrentMonth }) => {
   const { secondaryColor } = theme.components.Calendar;
-  console.log(secondaryColor);
   return css`
       color: ${isSelected ? "#fff" : isCurrentMonth ? theme.textColor : secondaryColor};
     `;

package/dist/Card/Card.cjs.js

@@ -4,6 +4,7 @@ const Title = require("../typography/Title/Title.cjs.js");
 const styles = require("./styles.cjs.js");
 const Button = require("../Button/Button.cjs.js");
 const Divider = require("../Divider/Divider.cjs.js");
+const Flex = require("../Flex/Flex.cjs.js");
 const Card = ({
   title,
   children,
@@ -18,14 +19,17 @@ const Card = ({
   leftContent,
   style,
   onClickExtra,
+  shadow,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(styles.CardStyled, { className, ...props, style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles.CardStyled, { className, ...props, style, shadow, children: [
     cover,
     title && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(styles.CardHeaderStyled, { size, className: classNameHeader, children: [
-        leftContent,
-        /* @__PURE__ */ jsxRuntime.jsx(Title, { size, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsxs(styles.CardHeaderStyled, { size, className: classNameHeader, "data-testid": "card-header", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: "m", align: "center", children: [
+          leftContent,
+          /* @__PURE__ */ jsxRuntime.jsx(Title, { size, children: title })
+        ] }),
         extra && /* @__PURE__ */ jsxRuntime.jsx(Button, { view: "link", size: "s", onClick: onClickExtra, children: extra })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(Divider, { direction: "horizontal" })

package/dist/Card/Card.d.ts

@@ -1,3 +1,3 @@
 import { ICardProps } from './types';
-declare const Card: ({ title, children, size, extra, className, classNameHeader, classNameContent, classNameAction, actionContent, cover, leftContent, style, onClickExtra, ...props }: ICardProps) => import("react/jsx-runtime").JSX.Element;
+declare const Card: ({ title, children, size, extra, className, classNameHeader, classNameContent, classNameAction, actionContent, cover, leftContent, style, onClickExtra, shadow, ...props }: ICardProps) => import("react/jsx-runtime").JSX.Element;
 export default Card;

package/dist/Card/Card.es.js

@@ -3,6 +3,7 @@ import Title from "../typography/Title/Title.es.js";
 import { CardStyled, CardHeaderStyled, CardContentStyled, CardActionsStyled } from "./styles.es.js";
 import Button from "../Button/Button.es.js";
 import Divider from "../Divider/Divider.es.js";
+import Flex from "../Flex/Flex.es.js";
 const Card = ({
   title,
   children,
@@ -17,14 +18,17 @@ const Card = ({
   leftContent,
   style,
   onClickExtra,
+  shadow,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(CardStyled, { className, ...props, style, children: [
+  return /* @__PURE__ */ jsxs(CardStyled, { className, ...props, style, shadow, children: [
     cover,
     title && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(CardHeaderStyled, { size, className: classNameHeader, children: [
-        leftContent,
-        /* @__PURE__ */ jsx(Title, { size, children: title }),
+      /* @__PURE__ */ jsxs(CardHeaderStyled, { size, className: classNameHeader, "data-testid": "card-header", children: [
+        /* @__PURE__ */ jsxs(Flex, { gap: "m", align: "center", children: [
+          leftContent,
+          /* @__PURE__ */ jsx(Title, { size, children: title })
+        ] }),
         extra && /* @__PURE__ */ jsx(Button, { view: "link", size: "s", onClick: onClickExtra, children: extra })
       ] }),
       /* @__PURE__ */ jsx(Divider, { direction: "horizontal" })