qaema-ui 0.0.49 → 0.0.51

package/dist/components/CallOutBox.d.ts

@@ -6,6 +6,7 @@ export interface CalloutConfig {
         label: string;
         onClick: () => void;
     };
+    Icon?: React.ReactNode;
 }
 export type CalloutVariant = 'information' | 'error' | 'success' | 'warning';
 declare function CallOutBox({ callout }: {

package/dist/components/CallOutBox.js

@@ -1,7 +1,7 @@
 import { j as n } from "../_virtual/jsx-runtime.js";
 import i from "styled-components";
 import s from "./Typography.js";
-const t = i(s)`
+const e = i(s)`
   font-family: ${({ theme: r }) => r.fonts.arabic};
   font-weight: ${({ theme: r }) => r.typography.weights.semiBold};
   font-size: 15px;
@@ -10,7 +10,7 @@ const t = i(s)`
   vertical-align: middle;
   color: ${({ theme: r }) => r.colors.grey.n650};
   display: inline-block;
-`, e = i.div`
+`, t = i.div`
   margin-top: ${({ theme: r }) => r.spacing.m};
   padding: ${({ theme: r }) => r.spacing.sm};
   border-radius: ${({ theme: r }) => r.borderRadius.md};
@@ -72,16 +72,24 @@ const t = i(s)`
   &:hover {
     opacity: 0.9;
   }
+`, p = i.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: ${({ theme: r }) => r.spacing.s};
 `;
-function y({ callout: r }) {
-  return /* @__PURE__ */ n.jsxs(e, { $variant: r.variant ?? "warning", children: [
-    /* @__PURE__ */ n.jsxs("div", { children: [
-      /* @__PURE__ */ n.jsx(t, { variant: "span", weight: "semiBold", children: r.title }),
-      r.description && /* @__PURE__ */ n.jsx(a, { variant: "caption", children: r.description })
+function $({ callout: r }) {
+  return /* @__PURE__ */ n.jsxs(t, { $variant: r.variant ?? "warning", children: [
+    /* @__PURE__ */ n.jsxs(p, { children: [
+      (r == null ? void 0 : r.Icon) && /* @__PURE__ */ n.jsx("div", { children: r == null ? void 0 : r.Icon }),
+      /* @__PURE__ */ n.jsxs("div", { children: [
+        /* @__PURE__ */ n.jsx(e, { variant: "span", weight: "semiBold", children: r.title }),
+        r.description && /* @__PURE__ */ n.jsx(a, { variant: "caption", children: r.description })
+      ] })
     ] }),
     r.action && /* @__PURE__ */ n.jsx(c, { $variant: r.variant ?? "warning", onClick: r.action.onClick, children: r.action.label })
   ] });
 }
 export {
-  y as default
+  $ as default
 };

package/dist/components/InputLabel.js

@@ -10,12 +10,12 @@ const a = s.div`
   label {
     font-size: ${({ theme: e }) => e.typography.sizes.s4};
     font-weight: ${({ theme: e }) => e.typography.weights.regular};
-    line-height: ${({ theme: e }) => e.typography.lineHeights.s};
+    /* line-height: ${({ theme: e }) => e.typography.lineHeights.s}; */
   }
   span {
     font-size: ${({ theme: e }) => e.typography.sizes.s2};
     font-weight: ${({ theme: e }) => e.typography.weights.regular};
-    line-height: ${({ theme: e }) => e.typography.lineHeights.xs};
+    /* line-height: ${({ theme: e }) => e.typography.lineHeights.xs}; */
     color: ${({ theme: e }) => e.colors.grey.n350};
   }
 `, y = ({ label: e, optional: i }) => {

package/dist/styles/StatusFeedback.styles.js

@@ -16,7 +16,10 @@ const r = o.div`
   `}
 `, s = o.div`
   flex: 1;
-`, d = o.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.xs};
+`, a = o.div`
   ${({ $status: e }) => t`
     display: flex;
     align-items: center;
@@ -40,7 +43,7 @@ const r = o.div`
       }
     `};
   `}
-`, a = o.div`
+`, d = o.div`
   width: 100%;
   left: 0;
   right: 0;
@@ -55,7 +58,7 @@ export {
   r as EmptyContent,
   c as FeedbackHeader,
   l as FullPageContainer,
-  d as ImageContainer,
-  a as StickyContent,
+  a as ImageContainer,
+  d as StickyContent,
   s as TextContainer
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "qaema-ui",
   "private": false,
-  "version": "0.0.49",
+  "version": "0.0.51",
   "type": "module",
   "publishConfig": {
     "access": "public"