qaema-ui 0.0.1

package/dist/components/ThemeProvider.d.ts

@@ -0,0 +1,12 @@
+import { default as React, ReactNode } from 'react';
+import { Direction, Theme } from '../theme/theme';
+export type ThemeProviderProps = {
+    theme?: Theme;
+    children: ReactNode;
+    dir?: Direction;
+    variant?: 'light' | 'dark';
+};
+export declare const FontLoader: () => import("react/jsx-runtime").JSX.Element;
+declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export default ThemeProvider;
+//# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/components/ThemeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/lib/components/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAOvD,OAAO,EAAgB,KAAK,SAAS,EAAE,KAAK,KAAK,EAAE,MAAM,cAAc,CAAC;AAExE,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B,CAAC;AAEF,eAAO,MAAM,UAAU,+CAStB,CAAC;AAcF,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAkB/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/ThemeProvider.js

@@ -0,0 +1,43 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import { useMemo as m } from "react";
+import { HelmetProvider as l, Helmet as n } from "../node_modules/react-helmet-async/lib/index.esm.js";
+import { I18nextProvider as a } from "react-i18next";
+import { ThemeProvider as d, createGlobalStyle as f } from "styled-components";
+import { coreI18n as p } from "../i18n/i18n.js";
+import { darkColors as c, lightColors as h } from "../theme/colors.js";
+import { defaultTheme as x } from "../theme/theme.js";
+const g = () => /* @__PURE__ */ r.jsx(l, { children: /* @__PURE__ */ r.jsx(n, { children: /* @__PURE__ */ r.jsx(
+  "link",
+  {
+    href: "https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&family=Noto+Sans+Arabic:wght@400;500;700&display=swap",
+    rel: "stylesheet"
+  }
+) }) }), b = f`
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+  body, button {
+    font-family: ${({ theme: o, $dir: t }) => t === "rtl" ? o.fonts.arabic : o.fonts.english} !important;
+    direction: ${({ $dir: o }) => o} !important;
+  }
+`, k = ({ theme: o = x, children: t, dir: e = "ltr", variant: s = "light" }) => {
+  const i = m(
+    () => ({
+      ...o,
+      dir: e,
+      colors: s === "dark" ? c : h
+    }),
+    [o, e, s]
+  );
+  return /* @__PURE__ */ r.jsx(a, { i18n: p, children: /* @__PURE__ */ r.jsxs(d, { theme: i, children: [
+    /* @__PURE__ */ r.jsx(g, {}),
+    /* @__PURE__ */ r.jsx(b, { $dir: e }),
+    t
+  ] }) });
+};
+export {
+  g as FontLoader,
+  k as default
+};

package/dist/components/ToastNotification.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { ToastVariant } from '../hooks/useToastVariant';
+type ToastPosition = 'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end';
+interface ToastNotificationProps {
+    show: boolean;
+    onClose?: () => void;
+    message: string | React.ReactNode;
+    variant?: ToastVariant;
+    delay?: number;
+    autohide?: boolean;
+    position?: ToastPosition;
+}
+declare const ToastNotification: React.FC<ToastNotificationProps>;
+export default ToastNotification;
+//# sourceMappingURL=ToastNotification.d.ts.map

package/dist/components/ToastNotification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastNotification.d.ts","sourceRoot":"","sources":["../../src/lib/components/ToastNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAwB,EAAE,KAAK,YAAY,EAA4B,MAAM,wBAAwB,CAAC;AAGtG,KAAK,aAAa,GACd,WAAW,GACX,YAAY,GACZ,SAAS,GACT,cAAc,GACd,eAAe,GACf,YAAY,GACZ,cAAc,GACd,eAAe,GACf,YAAY,CAAC;AAEjB,UAAU,sBAAsB;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAClC,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,aAAa,CAAC;CAC1B;AAyED,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAkCvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/ToastNotification.js

@@ -0,0 +1,84 @@
+import { j as s } from "../_virtual/jsx-runtime.js";
+import { useState as y, useEffect as h } from "react";
+import p, { useTheme as b, css as T, keyframes as a } from "styled-components";
+import z from "../hooks/useToastVariant.js";
+import Y from "../hooks/useZIndex.js";
+import c from "../node_modules/react-bootstrap/esm/Toast.js";
+const j = (t) => {
+  const [o, r] = t.split("-");
+  return T`
+    position: fixed;
+    ${o === "top" && "top: 20px;"}
+    ${o === "middle" && "top: 50%; transform: translateY(-50%);"}
+    ${o === "bottom" && "bottom: 20px;"}
+    ${r === "start" && "left: 20px;"}
+    ${r === "center" && "left: 50%; transform: translateX(-50%);"}
+    ${r === "end" && "right: 20px;"}
+    z-index: 9999;
+  `;
+}, w = (t) => {
+  const [o] = t.split("-");
+  return o === "top" ? a`
+      from { transform: translateY(-100%); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    ` : o === "bottom" ? a`
+      from { transform: translateY(100%); opacity: 0; }
+      to { transform: translateY(0); opacity: 1; }
+    ` : a`
+      from { transform: scale(0.8) translateY(-50%); opacity: 0; }
+      to { transform: scale(1) translateY(-50%); opacity: 1; }
+    `;
+}, v = p(c)`
+  width: 45.25rem;
+  border-radius: 8px;
+  padding: ${({ theme: t }) => t.spacing.s} ${({ theme: t }) => t.spacing.sm};
+  margin: ${({ theme: t }) => t.spacing.xs} 0;
+  animation: ${(t) => w(t.$position)} 0.3s ease-out forwards;
+
+  background-color: ${({ $variantData: t }) => t.backgroundColor} !important;
+
+  .toast-header {
+    padding: 0;
+    border-bottom: none;
+  }
+
+  .toast-body {
+    padding: 0;
+    color: white;
+    display: flex;
+    font-size: ${({ theme: t }) => t.typography.sizes.s2};
+    font-weight: 400;
+    align-items: center;
+    column-gap: ${({ theme: t }) => t.spacing.xs};
+    justify-content: flex-start;
+    font-family: font-sans;
+    line-height: ${({ theme: t }) => t.typography.lineHeights.xs};
+  }
+`, I = p.div`
+  ${(t) => j(t.$position)};
+  direction: ${(t) => t.$dir};
+  z-index: ${({ $zIndex: t }) => t};
+`, N = ({
+  show: t,
+  onClose: o,
+  message: r,
+  variant: l = "information",
+  delay: m = 3e3,
+  autohide: d = !0,
+  position: n = "top-start"
+}) => {
+  const [f, e] = y(t), $ = b(), i = z(l), x = Y("toast"), g = $.dir === "rtl" ? "rtl" : "ltr";
+  h(() => {
+    e(t);
+  }, [t]);
+  const u = () => {
+    e(!1), o == null || o();
+  };
+  return /* @__PURE__ */ s.jsx(I, { $position: n, $dir: g, $zIndex: x, children: /* @__PURE__ */ s.jsx(v, { show: f, onClose: u, delay: m, autohide: d, $variantData: i, $position: n, children: /* @__PURE__ */ s.jsxs(c.Body, { children: [
+    i.icon,
+    r
+  ] }) }) });
+};
+export {
+  N as default
+};

package/dist/components/Toggle.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { HintVariant } from '../hooks/useHintVariant';
+export interface ToggleProps {
+    name?: string;
+    title?: string;
+    value?: boolean;
+    description?: string;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    optional?: boolean;
+    hintMessage?: string;
+    hintType?: HintVariant;
+    showHintIcon?: boolean;
+    icon?: React.ReactNode;
+}
+declare const Toggle: ({ name, title, value, description, onChange, disabled, optional, hintMessage, hintType, showHintIcon, icon, }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
+export default Toggle;
+//# sourceMappingURL=Toggle.d.ts.map

package/dist/components/Toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../src/lib/components/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AA8EzD,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,QAAA,MAAM,MAAM,GAAI,+GAYb,WAAW,4CA2Cb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/Toggle.js

@@ -0,0 +1,105 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import { useState as j, useEffect as $ } from "react";
+import o, { useTheme as w } from "styled-components";
+import T from "./Hint.js";
+import n from "./Typography.js";
+const v = o.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: ${({ theme: e }) => e.spacing.xs};
+  padding-right: ${({ theme: e }) => e.spacing.xs};
+  padding-left: ${({ theme: e }) => e.spacing.xs};
+
+  border-radius: ${({ theme: e }) => e.borderRadius.md};
+  width: 100%;
+`, C = o.div`
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.xs};
+`, R = o.div`
+  display: flex;
+  align-items: flex-start;
+  gap: ${({ theme: e }) => e.spacing.xs};
+`, I = o.div`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: e }) => e.spacing.xs};
+  width: 100%;
+`, E = o.input.attrs({ type: "checkbox" })`
+  appearance: none;
+  width: 2.5rem;
+  height: 1.5rem;
+  border-radius: ${({ theme: e }) => e.borderRadius.lg};
+  background-color: ${({ theme: e }) => e.colors.grey.n250};
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:checked {
+    background-color: ${({ theme: e }) => e.colors.primary.purple.n450};
+  }
+  &:hover {
+    background-color: ${({ theme: e }) => e.colors.primary.purple.n200};
+  }
+  &:checked::after {
+    transform: translateX(1rem);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: ${({ theme: e }) => e.borderRadius.circle};
+    background-color: ${({ theme: e }) => e.colors.grey.n50};
+    top: 0.125rem;
+    left: 0.125rem;
+    transition: transform 0.2s ease;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`, H = o.div`
+  flex-direction: column;
+`, z = ({
+  name: e = "",
+  title: x = "",
+  value: t = !1,
+  description: f = "",
+  onChange: c,
+  disabled: a = !1,
+  optional: u = !1,
+  hintMessage: l,
+  hintType: y = "info",
+  showHintIcon: b = !0,
+  icon: d
+}) => {
+  const s = w(), [p, g] = j(t), k = (i) => {
+    var h;
+    if (!a) {
+      const m = (h = i == null ? void 0 : i.target) == null ? void 0 : h.checked;
+      g(m), c && c(m);
+    }
+  };
+  return $(() => {
+    g(t);
+  }, [t]), /* @__PURE__ */ r.jsxs(v, { children: [
+    d && /* @__PURE__ */ r.jsx(H, { children: d }),
+    /* @__PURE__ */ r.jsxs(C, { children: [
+      /* @__PURE__ */ r.jsxs(I, { children: [
+        /* @__PURE__ */ r.jsx(n, { variant: "smText", weight: "bold", color: s.colors.grey.n650, children: x }),
+        u && /* @__PURE__ */ r.jsx(n, { variant: "mdText", color: s.colors.grey.n400, children: "(optional)" })
+      ] }),
+      /* @__PURE__ */ r.jsx(n, { variant: "mdText", color: s.colors.grey.n400, children: f }),
+      l && /* @__PURE__ */ r.jsx(T, { variant: y, showLeadIcon: b, title: l, showLink: !1 })
+    ] }),
+    /* @__PURE__ */ r.jsx(R, { children: /* @__PURE__ */ r.jsx(E, { name: e, checked: p, onChange: k, disabled: a, "aria-checked": p, role: "switch" }) })
+  ] });
+};
+export {
+  z as default
+};

package/dist/components/ToggleForm.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { HintVariant } from '../hooks/useHintVariant';
+export interface ToggleFormProps {
+    name?: string;
+    title?: string;
+    value?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    optional?: boolean;
+    hintMessage?: string;
+    hintType?: HintVariant;
+    showHintIcon?: boolean;
+    icon?: React.ReactNode;
+}
+declare const ToggleForm: ({ name, title, value, onChange, disabled, optional, hintMessage, hintType, showHintIcon, icon, }: ToggleFormProps) => import("react/jsx-runtime").JSX.Element;
+export default ToggleForm;
+//# sourceMappingURL=ToggleForm.d.ts.map

package/dist/components/ToggleForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleForm.d.ts","sourceRoot":"","sources":["../../src/lib/components/ToggleForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAoGzD,MAAM,WAAW,eAAe;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,QAAA,MAAM,UAAU,GAAI,kGAWjB,eAAe,4CAqCjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/ToggleForm.js

@@ -0,0 +1,121 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import { useState as y } from "react";
+import o, { useTheme as w } from "styled-components";
+import { device as i } from "../constants/breakPoints.constant.js";
+import j from "./Hint.js";
+import g from "./Typography.js";
+const v = o.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme: e }) => e.spacing.m};
+  padding-right: ${({ theme: e }) => e.spacing.xs};
+  padding-left: ${({ theme: e }) => e.spacing.xs};
+  border-radius: ${({ theme: e }) => e.borderRadius.md};
+  width: 100%;
+
+  @media ${i.mobile} {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: ${({ theme: e }) => e.spacing.s};
+  }
+`, T = o.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.xs};
+  height: 1.5rem;
+
+  @media ${i.mobile} {
+    flex-direction: row;
+    height: auto;
+  }
+`, R = o.div`
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: ${({ theme: e }) => e.spacing.xs};
+
+  @media ${i.mobile} {
+    flex-direction: row;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+  }
+`, C = o.input.attrs({ type: "checkbox" })`
+  appearance: none;
+  width: 2.5rem;
+  height: 1.5rem;
+  border-radius: ${({ theme: e }) => e.borderRadius.lg};
+  background-color: ${({ theme: e }) => e.colors.grey.n250};
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:checked {
+    background-color: ${({ theme: e }) => e.colors.primary.purple.n450};
+  }
+  &:hover {
+    background-color: ${({ theme: e }) => e.colors.primary.purple.n200};
+  }
+  &:checked::after {
+    transform: translateX(1rem);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: ${({ theme: e }) => e.borderRadius.circle};
+    background-color: ${({ theme: e }) => e.colors.grey.n50};
+    top: 0.125rem;
+    left: 0.125rem;
+    transition: transform 0.2s ease;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`, I = o.div`
+  display: flex;
+  align-items: center;
+  height: 3.5rem;
+
+  @media ${i.mobile} {
+    height: auto;
+  }
+`, H = o.div`
+  flex-direction: column;
+`, q = ({
+  name: e = "",
+  title: h = "",
+  value: x = !1,
+  onChange: t,
+  disabled: s = !1,
+  optional: f = !1,
+  hintMessage: c,
+  hintType: u = "info",
+  showHintIcon: b = !0,
+  icon: a
+}) => {
+  const l = w(), [d, $] = y(x), k = (n) => {
+    var m;
+    if (!s) {
+      const p = (m = n == null ? void 0 : n.target) == null ? void 0 : m.checked;
+      $(p), t == null || t(p);
+    }
+  };
+  return /* @__PURE__ */ r.jsxs(v, { children: [
+    a && /* @__PURE__ */ r.jsx(H, { children: a }),
+    /* @__PURE__ */ r.jsx(T, { children: c && /* @__PURE__ */ r.jsx(j, { variant: u, showLeadIcon: b, title: c, showLink: !1 }) }),
+    /* @__PURE__ */ r.jsxs(R, { children: [
+      /* @__PURE__ */ r.jsx(g, { variant: "mdText", color: l.colors.grey.n650, children: h }),
+      f && /* @__PURE__ */ r.jsx(g, { variant: "mdText", color: l.colors.grey.n400, children: "(optional)" }),
+      /* @__PURE__ */ r.jsx(I, { children: /* @__PURE__ */ r.jsx(C, { name: e, checked: d, onChange: k, disabled: s, "aria-checked": d, role: "switch" }) })
+    ] })
+  ] });
+};
+export {
+  q as default
+};

package/dist/components/ToggleHeader.d.ts

@@ -0,0 +1,10 @@
+export interface ToggleHeaderProps {
+    name?: string;
+    title?: string;
+    value?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+}
+declare const ToggleHeader: ({ name, title, value, onChange, disabled }: ToggleHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default ToggleHeader;
+//# sourceMappingURL=ToggleHeader.d.ts.map

package/dist/components/ToggleHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleHeader.d.ts","sourceRoot":"","sources":["../../src/lib/components/ToggleHeader.tsx"],"names":[],"mappings":"AAsFA,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,YAAY,GAAI,4CAAsE,iBAAiB,4CAwB5G,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/ToggleHeader.js

@@ -0,0 +1,92 @@
+import { j as r } from "../_virtual/jsx-runtime.js";
+import { useState as f } from "react";
+import o, { useTheme as u } from "styled-components";
+import { device as n } from "../constants/breakPoints.constant.js";
+import x from "./Typography.js";
+const b = o.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${({ theme: e }) => e.spacing.m};
+  padding-right: ${({ theme: e }) => e.spacing.xs};
+  padding-left: ${({ theme: e }) => e.spacing.xs};
+  border-radius: ${({ theme: e }) => e.borderRadius.md};
+  width: 100%;
+  justify-content: flex-end;
+  @media ${n.mobile} {
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: flex-end;
+    gap: ${({ theme: e }) => e.spacing.s};
+  }
+`, y = o.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: ${({ theme: e }) => e.spacing.xs};
+
+  @media ${n.mobile} {
+    flex-direction: row;
+    width: 100%;
+    align-items: center;
+    justify-content: flex-end;
+  }
+`, k = o.input.attrs({ type: "checkbox" })`
+  appearance: none;
+  width: 2.5rem;
+  height: 1.5rem;
+  border-radius: ${({ theme: e }) => e.borderRadius.lg};
+  background-color: ${({ theme: e }) => e.colors.grey.n250};
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:checked {
+    background-color: ${({ theme: e }) => e.colors.primary.purple.n450};
+  }
+  &:hover {
+    background-color: ${({ theme: e }) => e.colors.primary.purple.n200};
+  }
+  &:checked::after {
+    transform: translateX(1rem);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 1.25rem;
+    height: 1.25rem;
+    border-radius: ${({ theme: e }) => e.borderRadius.circle};
+    background-color: ${({ theme: e }) => e.colors.grey.n50};
+    top: 0.125rem;
+    left: 0.125rem;
+    transition: transform 0.2s ease;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`, $ = o.div`
+  display: flex;
+  align-items: center;
+  height: 3.5rem;
+
+  @media ${n.mobile} {
+    height: auto;
+  }
+`, C = ({ name: e = "", title: l = "", value: p = !1, onChange: t, disabled: s = !1 }) => {
+  const m = u(), [c, g] = f(p), h = (i) => {
+    var a;
+    if (!s) {
+      const d = (a = i == null ? void 0 : i.target) == null ? void 0 : a.checked;
+      g(d), t == null || t(d);
+    }
+  };
+  return /* @__PURE__ */ r.jsx(b, { children: /* @__PURE__ */ r.jsxs(y, { children: [
+    /* @__PURE__ */ r.jsx($, { children: /* @__PURE__ */ r.jsx(k, { name: e, checked: c, onChange: h, disabled: s, "aria-checked": c, role: "switch" }) }),
+    /* @__PURE__ */ r.jsx(x, { variant: "h6-lg", color: m.colors.grey.n650, children: l })
+  ] }) });
+};
+export {
+  C as default
+};

package/dist/components/Typography.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+import { TypographyVariant, TypographyVariantOptions } from '../hooks/useTypographyVariant';
+import { FontSize, FontWeight, LetterSpacing, LineHeight } from '../theme/theme';
+export type StyledTypographyProps = {
+    $variantData: TypographyVariantOptions;
+    $weight?: FontWeight;
+    $color?: string;
+    $fontSize?: FontSize;
+    $lineHeight?: LineHeight;
+    $letterSpacing?: LetterSpacing;
+    $textWrap?: string;
+};
+export type TypographyProps = {
+    variant?: TypographyVariant;
+    weight?: FontWeight;
+    color?: string;
+    fontSize?: FontSize;
+    lineHeight?: LineHeight;
+    letterSpacing?: LetterSpacing;
+    textWrap?: string;
+    children: React.ReactNode;
+    component?: keyof JSX.IntrinsicElements;
+    style?: React.CSSProperties;
+};
+declare const Typography: React.FC<TypographyProps>;
+export default Typography;
+//# sourceMappingURL=Typography.d.ts.map

package/dist/components/Typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../src/lib/components/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAA6B,EAAE,KAAK,iBAAiB,EAAE,KAAK,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AAC1H,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,aAAa,EAAE,UAAU,EAAS,MAAM,cAAc,CAAC;AAI3F,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,EAAE,wBAAwB,CAAC;IACvC,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,WAAW,CAAC,EAAE,UAAU,CAAC;IACzB,cAAc,CAAC,EAAE,aAAa,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;IACxC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AA0CF,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2CzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/Typography.js

@@ -0,0 +1,57 @@
+import { j as $ } from "../_virtual/jsx-runtime.js";
+import "react";
+import f, { css as c } from "styled-components";
+import d from "../hooks/useTypographyVariant.js";
+const T = "h5", u = (t, e, o, s, r, p) => {
+  const i = e.dir === "rtl" ? t.ar : t.en, g = s ? e.typography.sizes[s] : i.fontSize, a = r ? e.typography.lineHeights[r] : i.lineHeight, l = p ? e.typography.letterSpacings[p] : i.letterSpacing, y = o ? e.typography.weights[o] : e.typography.weights[i.fontWeight];
+  return c`
+    font-size: ${g};
+    line-height: ${a};
+    letter-spacing: ${l};
+    font-weight: ${y};
+  `;
+}, x = f.div`
+  ${({ $variantData: t, $weight: e, $fontSize: o, $lineHeight: s, $letterSpacing: r, theme: p }) => u(t, p, e, o, s, r)}
+
+  ${({ $color: t, theme: e }) => c`
+    color: ${t ?? e.colors.grey.n625};
+  `}
+
+  ${({ $textWrap: t }) => t && c`
+      white-space: ${t};
+    `}
+`, z = ({
+  variant: t = T,
+  weight: e,
+  color: o,
+  fontSize: s,
+  lineHeight: r,
+  letterSpacing: p,
+  textWrap: h,
+  component: i,
+  children: g,
+  style: a,
+  ...l
+}) => {
+  const y = d(t);
+  let n = i;
+  return n || (t.startsWith("h") ? n = t : t === "lgText" || t === "mdText" || t === "smText" || t === "regular-lg" || t === "caption" ? n = "p" : n = "span"), /* @__PURE__ */ $.jsx(
+    x,
+    {
+      as: n,
+      $weight: e,
+      $variantData: y,
+      $color: o,
+      $fontSize: s,
+      $lineHeight: r,
+      $letterSpacing: p,
+      $textWrap: h,
+      style: a,
+      ...l,
+      children: g
+    }
+  );
+};
+export {
+  z as default
+};

package/dist/components/ViewItem.d.ts

@@ -0,0 +1,8 @@
+export type ViewItemProps = {
+    title: string;
+    value?: string;
+    variant?: 'header' | 'item';
+};
+declare const ViewItem: React.FC<ViewItemProps>;
+export default ViewItem;
+//# sourceMappingURL=ViewItem.d.ts.map

package/dist/components/ViewItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ViewItem.d.ts","sourceRoot":"","sources":["../../src/lib/components/ViewItem.tsx"],"names":[],"mappings":"AAcA,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAcrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/ViewItem.js

@@ -0,0 +1,20 @@
+import { j as t } from "../_virtual/jsx-runtime.js";
+import m, { useTheme as l } from "styled-components";
+import { useQaemaCoreTranslation as a } from "../i18n/i18n.js";
+import s from "./Typography.js";
+const c = m.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: ${({ theme: e }) => e.spacing.xxs};
+`, f = ({ title: e, value: i, variant: o = "item" }) => {
+  const r = l(), { t: n } = a();
+  return /* @__PURE__ */ t.jsxs(c, { children: [
+    /* @__PURE__ */ t.jsx(s, { variant: o === "item" ? "smText" : "h6-lg", weight: "semiBold", color: r.colors.grey.n650, children: e }),
+    /* @__PURE__ */ t.jsx(s, { variant: o === "item" ? "xsText" : "caption", weight: "regular", color: r.colors.grey.n350, children: i ?? n("NOT_AVAILABLE") })
+  ] });
+};
+export {
+  f as default
+};