highsoft-ui 1.0.2 → 1.0.4

package/README.md

@@ -1,32 +1,108 @@
 # Highsoft UI
 
-## PHP
+## Development
+
+```sh
+npm i
+npm run dev
+```
+
+This will run the test application located in `src` that uses the component library located in `lib`.
+
+## Usage
+
+1. Install the package:
+
+```sh
+npm i highsoft-ui
+```
+
+2. Load the the css somehow:
+
+```scss
+@import 'highsoft-ui/css';
+```
+
+3. Use the components:
+
+```js
+import { Button } from 'highsoft-ui';
+// ...
+<Button variant="brand" size={300}>Hello</Button>
+```
+
+### PHP
+
+How to use components that need hydration (running client-side react) in PHP.
+This mostly applies to the wordpress block gang.
 
 1. Build script
+
+`ui.ts`:
 ```js
-import { Header, Footer } from 'highsoft-ui';
+import { Header } from 'highsoft-ui';
 import { render } from 'highsoft-ui/php';
 
 render('react.php', {
   header: <Header />,
-  footer: <Footer />
+  some_other_component: <Header
+    subItems={[
+      {
+        title: "Core",
+        url: "https://www.highcharts.com/products/highcharts/",
+        icon: <CoreIcon />,
+      },
+      {
+        title: "Stock",
+        url: "https://www.highcharts.com/products/stock/",
+        icon: <StockIcon />,
+      },
+    ]}
+  />
 });
 ```
 
+Run it with `tsx`:
+```sh
+npx tsx ui.ts
+```
+
 2. PHP template
+
 ```php
-hsui_header();
+include_once 'react.php';
 // ...
-hsui_footer();
+hsui_header();
+?>
+
+<div>
+  <h2>Wordpress <3</h2>
+  <?php hsui_some_other_component(); ?>
+</div>
 ```
 
-3. Client bundle (for things that need hydration)
+3. Client JS bundle
+
 ```js
 import { Header } from 'highsoft-ui';
 import { hydrate } from 'highsoft-ui/php';
 
 hydrate({
-    header: <Header />
+  header: <Header />,
+  some_other_component: <Header
+    subItems={[
+      {
+        title: "Core",
+        url: "https://www.highcharts.com/products/highcharts/",
+        icon: <CoreIcon />,
+      },
+      {
+        title: "Stock",
+        url: "https://www.highcharts.com/products/stock/",
+        icon: <StockIcon />,
+      },
+    ]}
+  />
 });
 ```
 
@@ -69,7 +145,6 @@ hydrate({
 - Turns off all rules that are unnecessary or might conflict with Prettier.
 - this config only turns rules off
 
-
 ### Husky
 
 - Automatically lint your commit messages, code, and run tests upon committing or pushing.

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

@@ -8,4 +8,4 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     as?: ElementType;
     [prop: string]: any;
 }
-export declare function Button({ children, variant, size, as: Component, className, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/components/Button/index.js

@@ -1,45 +1,46 @@
 import { jsx as e } from "react/jsx-runtime";
-import { c } from "../../clsx-OuTLNxxd.js";
-const i = "_button_xzze6_17", r = "_content_xzze6_28", x = "_neutral_xzze6_35", u = "_white_xzze6_52", l = "_transparent_xzze6_71", p = "_plain_xzze6_88", b = "_brand_xzze6_110", d = "_success_xzze6_127", m = "_attention_xzze6_142", h = "_danger_xzze6_157", t = {
-  button: i,
-  content: r,
-  neutral: x,
-  white: u,
-  transparent: l,
-  plain: p,
-  brand: b,
-  success: d,
-  attention: m,
-  danger: h,
-  "size-50": "_size-50_xzze6_174",
-  "size-100": "_size-100_xzze6_190",
-  "size-200": "_size-200_xzze6_206",
-  "size-300": "_size-300_xzze6_222",
-  "size-400": "_size-400_xzze6_238",
-  "size-500": "_size-500_xzze6_254"
-};
-function w({
-  children: n,
-  variant: _ = "neutral",
-  size: s = 200,
-  as: z = "button",
-  className: o,
-  ...a
-}) {
-  return /* @__PURE__ */ e(
-    z,
+import { forwardRef as c } from "react";
+import { c as i } from "../../clsx-OuTLNxxd.js";
+const d = "_button_ej6jd_17", u = "_content_ej6jd_33", z = "_neutral_ej6jd_40", l = "_white_ej6jd_57", p = "_transparent_ej6jd_76", b = "_plain_ej6jd_98", m = "_brand_ej6jd_123", f = "_success_ej6jd_140", h = "_attention_ej6jd_155", w = "_danger_ej6jd_170", t = {
+  button: d,
+  content: u,
+  neutral: z,
+  white: l,
+  transparent: p,
+  plain: b,
+  brand: m,
+  success: f,
+  attention: h,
+  danger: w,
+  "size-50": "_size-50_ej6jd_266",
+  "size-100": "_size-100_ej6jd_282",
+  "size-200": "_size-200_ej6jd_299",
+  "size-300": "_size-300_ej6jd_316",
+  "size-400": "_size-400_ej6jd_333",
+  "size-500": "_size-500_ej6jd_350"
+}, y = c(
+  ({
+    children: n,
+    variant: s = "neutral",
+    size: _ = 200,
+    as: j = "button",
+    className: o,
+    ...a
+  }, r) => /* @__PURE__ */ e(
+    j,
     {
-      className: c(
+      className: i(
         o,
         t.button,
-        t[_],
-        t[`size-${s}`]
+        t[s],
+        t[`size-${_}`]
       ),
+      ref: r,
       ...a,
       children: /* @__PURE__ */ e("span", { className: t.content, children: n })
     }
-  );
-}
+  )
+);
 export {
-  w as Button
+  y as Button
 };

package/dist/components/Container/index.js

@@ -1,6 +1,6 @@
 import { jsx as c } from "react/jsx-runtime";
 import { c as s } from "../../clsx-OuTLNxxd.js";
-const a = "_container_1534h_1", e = {
+const a = "_container_mh6y2_1", e = {
   container: a
 };
 function f({

package/dist/components/GPTInput/index.d.ts

@@ -1,4 +1,11 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+interface GPTButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary";
+    children: ReactNode;
+}
+export default function GPTButton({ variant, className, children, ...props }: GPTButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare function GPTInput({ autoFocus, onSubmit, }: {
     autoFocus?: boolean;
     onSubmit: (prompt: string) => void;
 }): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/GPTInput/index.js

@@ -1,57 +1,88 @@
-import { jsxs as x, jsx as n } from "react/jsx-runtime";
-import { useRef as y, useState as d, useLayoutEffect as _ } from "react";
-import { c as v } from "../../clsx-OuTLNxxd.js";
-import g from "../icons/Bubble.js";
+import { jsx as n, jsxs as l } from "react/jsx-runtime";
+import { useRef as x, useState as h, useLayoutEffect as g } from "react";
+import { c as _ } from "../../clsx-OuTLNxxd.js";
+import v from "../icons/Bubble.js";
 import b from "../icons/Plane.js";
-const k = "_inputWrap_12kfl_17", S = "_active_12kfl_53", K = "_textarea_12kfl_61", a = {
-  inputWrap: k,
-  active: S,
-  textarea: K
+const C = "_inputContainer_1v7xg_17", S = "_bottomFade_1v7xg_20", K = "_inputWrap_1v7xg_23", P = "_textarea_1v7xg_26", N = "_button_1v7xg_92", W = "_primary_1v7xg_127", k = "_secondary_1v7xg_136", D = "_disclaimer_1v7xg_142", r = {
+  inputContainer: C,
+  bottomFade: S,
+  inputWrap: K,
+  textarea: P,
+  button: N,
+  primary: W,
+  secondary: k,
+  disclaimer: D
 };
-function w({
-  autoFocus: r,
-  onSubmit: u
+function F({
+  variant: a = "primary",
+  className: s,
+  children: e,
+  ...o
 }) {
-  const e = y(null), [o, s] = d(""), c = o.trim(), p = !!c;
-  _(() => {
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      className: _(r.button, r[a], s),
+      ...o,
+      children: /* @__PURE__ */ n("span", { children: e })
+    }
+  );
+}
+function I({
+  autoFocus: a,
+  onSubmit: s
+}) {
+  const e = x(null), [o, i] = h(""), c = o.trim(), u = !!c;
+  g(() => {
     var t;
-    r && ((t = e.current) == null || t.focus());
-  }, [r]);
-  const i = () => {
+    a && ((t = e.current) == null || t.focus());
+  }, [a]);
+  const p = () => {
     const t = e.current;
     t && (t.style.height = "64px", t.style.height = `${t.scrollHeight + 4}px`);
+  }, d = (t) => {
+    i(t.target.value), p();
   }, m = (t) => {
-    s(t.target.value), i();
-  }, l = (t) => {
-    t.preventDefault(), u(c), s(""), requestAnimationFrame(i);
+    t.preventDefault(), s(c), i(""), requestAnimationFrame(p);
   }, f = (t) => {
-    t.key === "Enter" && !t.shiftKey && !t.ctrlKey && !t.metaKey && l(t);
-  }, h = () => {
+    t.key === "Enter" && !t.shiftKey && !t.ctrlKey && !t.metaKey && m(t);
+  }, y = () => {
     var t;
     (t = e.current) == null || t.focus();
   };
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ l(
     "form",
     {
-      className: v(a.inputWrap, { [a.active]: p }),
+      className: _(r.inputWrap, { [r.active]: u }),
       onKeyDown: f,
-      onSubmit: l,
+      onSubmit: m,
       children: [
-        /* @__PURE__ */ n(g, {}),
+        /* @__PURE__ */ n(v, {}),
         /* @__PURE__ */ n(
           "textarea",
           {
-            className: a.textarea,
+            className: r.textarea,
             ref: e,
             value: o,
-            onChange: m
+            onChange: d
           }
         ),
-        /* @__PURE__ */ n("button", { "aria-label": "Send message", onClick: h, children: /* @__PURE__ */ n(b, {}) })
+        /* @__PURE__ */ l(
+          F,
+          {
+            variant: u ? "primary" : "secondary",
+            onClick: y,
+            children: [
+              /* @__PURE__ */ n(b, {}),
+              /* @__PURE__ */ n("span", { className: "sr-only", children: "Send message" })
+            ]
+          }
+        )
       ]
     }
   );
 }
 export {
-  w as GPTInput
+  I as GPTInput,
+  F as default
 };

package/dist/components/Header/index.d.ts

@@ -1,4 +1,26 @@
-import { ReactNode } from 'react';
-export declare function Header({ children }: {
+import { ElementType, ReactNode } from 'react';
+import { NotificationVariant } from '../Notification';
+export interface SubHeaderItem {
+    title: string;
+    url: string;
+    icon?: ReactNode;
+    tag?: ReactNode;
+    tagVariant?: "success" | "brand";
+    link?: ElementType;
+}
+export declare function SubHeader({ items }: {
+    items: Array<SubHeaderItem>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ subItems, children, notifications: initialNotifications, // TODO: Fetch these from the internets
+link: Link, }: {
+    subItems?: Array<SubHeaderItem>;
     children?: ReactNode;
+    notifications?: Array<{
+        id?: string;
+        title?: string;
+        description?: string;
+        variant?: NotificationVariant;
+        closable?: boolean;
+    }>;
+    link?: ElementType;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/Header/index.js

@@ -1,11 +1,16 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import "react";
-import { _ as i, N as d } from "../../index-B_g_yGPq.js";
-import { Button as o } from "../Button/index.js";
-import { Container as p } from "../Container/index.js";
-import { Logo as g } from "../Logo/index.js";
-var w = function(r) {
-  return /* @__PURE__ */ t("svg", i({
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { useState as b, useEffect as x } from "react";
+import { J as S } from "../../index-CMegByeX.js";
+import { _ as u } from "../../extends-hS2Bh-Yp.js";
+import { c as w } from "../../clsx-OuTLNxxd.js";
+import { Button as d } from "../Button/index.js";
+import { Container as _ } from "../Container/index.js";
+import { ThemedLogo as C } from "../Logo/index.js";
+import { Notification as M } from "../Notification/index.js";
+import { PrefPanel as N } from "../PrefPanel/index.js";
+import { useMediaQuery as T } from "../../utils.js";
+var L = function(r) {
+  return /* @__PURE__ */ t("svg", u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -17,11 +22,11 @@ var w = function(r) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       strokeWidth: 2,
-      d: "m21 21-4.35-4.35M19 11c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8 8-8 8 3.5817 8 8"
+      d: "M3 12h12M3 6h18M3 18h18"
     })
   }));
-}, u = function(r) {
-  return /* @__PURE__ */ t("svg", i({
+}, j = function(r) {
+  return /* @__PURE__ */ t("svg", u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -33,11 +38,11 @@ var w = function(r) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       strokeWidth: 2,
-      d: "M3 8h12m0 0c0 1.6569 1.3431 3 3 3s3-1.3431 3-3-1.3431-3-3-3-3 1.3431-3 3m-6 8h12M9 16c0 1.6569-1.3431 3-3 3s-3-1.3431-3-3 1.3431-3 3-3 3 1.3431 3 3"
+      d: "m21 21-4.35-4.35M19 11c0 4.4183-3.5817 8-8 8s-8-3.5817-8-8 3.5817-8 8-8 8 3.5817 8 8"
     })
   }));
-}, m = function(r) {
-  return /* @__PURE__ */ t("svg", i({
+}, B = function(r) {
+  return /* @__PURE__ */ t("svg", u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -52,8 +57,8 @@ var w = function(r) {
       d: "M4.5 22v-5m0-10V2M2 4.5h5m-5 15h5M13 3l-1.7342 4.5089c-.282.7332-.423 1.0998-.6423 1.4082a3 3 0 0 1-.7064.7064c-.3084.2193-.675.3603-1.4082.6423L4 12l4.5089 1.7342c.7332.282 1.0998.423 1.4082.6423.2733.1943.5121.4331.7064.7064.2193.3084.3603.675.6423 1.4082L13 21l1.7342-4.5089c.282-.7332.423-1.0998.6423-1.4082a3 3 0 0 1 .7064-.7064c.3084-.2193.675-.3603 1.4082-.6423L22 12l-4.5089-1.7342c-.7332-.282-1.0998-.423-1.4082-.6423a3 3 0 0 1-.7064-.7064c-.2193-.3084-.3603-.675-.6423-1.4082z"
     })
   }));
-}, v = function(r) {
-  return /* @__PURE__ */ t("svg", i({
+}, J = function(r) {
+  return /* @__PURE__ */ t("svg", u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -68,8 +73,8 @@ var w = function(r) {
       d: "m7 15 3-3-3-3m6 6h4m-9.2 6h8.4c1.6802 0 2.5202 0 3.162-.327a3 3 0 0 0 1.311-1.311C21 18.7202 21 17.8802 21 16.2V7.8c0-1.6802 0-2.5202-.327-3.162a3 3 0 0 0-1.311-1.311C18.7202 3 17.8802 3 16.2 3H7.8c-1.6802 0-2.5202 0-3.162.327a3 3 0 0 0-1.311 1.311C3 5.2798 3 6.1198 3 7.8v8.4c0 1.6802 0 2.5202.327 3.162a3 3 0 0 0 1.311 1.311C5.2798 21 6.1198 21 7.8 21"
     })
   }));
-}, f = function(r) {
-  return /* @__PURE__ */ t("svg", i({
+}, P = function(r) {
+  return /* @__PURE__ */ t("svg", u({
     xmlns: "http://www.w3.org/2000/svg",
     width: 24,
     height: 24,
@@ -85,12 +90,23 @@ var w = function(r) {
     })
   }));
 };
-const k = "_header_40fgp_17", x = "_container_40fgp_29", L = "_logo_40fgp_41", _ = "_gpt_40fgp_49", s = {
-  header: k,
-  container: x,
-  logo: L,
-  gpt: _
-}, C = [
+const W = "_header_ggk0t_17", y = "_outer_ggk0t_28", H = "_main_ggk0t_37", O = "_container_ggk0t_41", q = "_links_ggk0t_47", z = "_buttons_ggk0t_48", G = "_menu_ggk0t_53", U = "_logo_ggk0t_57", V = "_sub_ggk0t_69", $ = "_subContainer_ggk0t_73", D = "_selected_ggk0t_95", E = "_subTag_ggk0t_107", Q = "_gpt_ggk0t_140", e = {
+  header: W,
+  outer: y,
+  main: H,
+  container: O,
+  links: q,
+  buttons: z,
+  menu: G,
+  logo: U,
+  sub: V,
+  subContainer: $,
+  selected: D,
+  subTag: E,
+  "subTag-success": "_subTag-success_ggk0t_112",
+  "subTag-brand": "_subTag-brand_ggk0t_116",
+  gpt: Q
+}, R = [
   {
     title: "Products",
     url: "https://highcharts.com/products/"
@@ -116,43 +132,126 @@ const k = "_header_40fgp_17", x = "_container_40fgp_29", L = "_logo_40fgp_41", _
     url: "https://www.highcharts.com/blog/"
   }
 ];
-function H({ children: e }) {
-  const r = [
-    {
-      title: "Hello",
-      description: "Goodbye"
+function A({ items: n }) {
+  return /* @__PURE__ */ t("div", { className: w(e.sub, e.outer), children: /* @__PURE__ */ t(_, { className: e.subContainer, as: "ul", children: n.map(
+    ({ title: r, url: h, icon: c, tag: m, tagVariant: l = "success", link: g = "a" }, p) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ a(g, { href: h, children: [
+      c,
+      /* @__PURE__ */ a("span", { children: [
+        r,
+        m && /* @__PURE__ */ t(
+          "span",
+          {
+            className: w(
+              e.subTag,
+              e[`subTag-${l}`]
+            ),
+            children: m
+          }
+        )
+      ] })
+    ] }) }, p)
+  ) }) });
+}
+function ot({
+  subItems: n,
+  children: r,
+  notifications: h = [],
+  // TODO: Fetch these from the internets
+  link: c = "a"
+}) {
+  const m = T("(min-width: 850px) and (max-width: 999 px)"), [l, g] = b([]);
+  x(() => {
+    if (h.length) {
+      const o = localStorage.getItem("notifications");
+      if (o) {
+        const i = JSON.parse(o);
+        g(
+          h.filter(
+            (s) => !s.id || !i.closed.includes(s.id)
+          )
+        );
+      } else
+        g(h);
     }
-  ];
-  return /* @__PURE__ */ n("header", { className: s.header, children: [
-    r.map(({ title: h, description: a, variant: c }, l) => /* @__PURE__ */ t(d, { description: a, variant: c, children: h }, l)),
-    /* @__PURE__ */ n(p, { as: "nav", className: s.container, children: [
-      /* @__PURE__ */ t(g, { light: !0, className: s.logo }),
-      /* @__PURE__ */ t("div", { children: C.map(({ title: h, url: a }, c) => /* @__PURE__ */ t(o, { variant: "plain", size: 300, as: "a", href: a, children: h }, c)) }),
-      /* @__PURE__ */ n("div", { children: [
-        /* @__PURE__ */ n(
-          o,
+  }, [h]);
+  const p = (o) => {
+    g(l.filter((s) => !s.id || s.id !== o));
+    const i = localStorage.getItem("notifications");
+    if (i) {
+      const s = JSON.parse(i);
+      s.closed.includes(o) || (s.closed.push(o), localStorage.setItem("notifications", JSON.stringify(s)));
+    } else
+      localStorage.setItem(
+        "notifications",
+        JSON.stringify({
+          closed: [o]
+        })
+      );
+  };
+  return /* @__PURE__ */ t(S, { children: /* @__PURE__ */ a("header", { className: e.header, children: [
+    l == null ? void 0 : l.map(
+      ({ id: o, title: i, description: s, variant: f, closable: k }, v) => /* @__PURE__ */ t(
+        M,
+        {
+          description: s,
+          variant: f,
+          closable: k,
+          onClose: () => p(o),
+          children: i
+        },
+        v
+      )
+    ),
+    /* @__PURE__ */ t("div", { className: w(e.main, e.outer), children: /* @__PURE__ */ a(_, { as: "nav", className: e.container, children: [
+      /* @__PURE__ */ t(c, { className: e.logo, href: "https://www.highcharts.com/", children: /* @__PURE__ */ t(C, { showText: !m }) }),
+      /* @__PURE__ */ t("div", { className: e.links, children: R.map(({ title: o, url: i }, s) => /* @__PURE__ */ t(d, { variant: "plain", size: 300, as: c, href: i, children: o }, s)) }),
+      /* @__PURE__ */ a("div", { className: e.buttons, children: [
+        /* @__PURE__ */ a(
+          d,
           {
             variant: "transparent",
-            as: "a",
+            as: c,
             href: "https://www.highcharts.com/chat/gpt/",
             children: [
-              /* @__PURE__ */ t("span", { className: s.gpt, children: "Highcharts GPT" }),
-              /* @__PURE__ */ t(m, {})
+              /* @__PURE__ */ t("span", { className: e.gpt, children: "Highcharts GPT" }),
+              /* @__PURE__ */ t(B, {})
             ]
           }
         ),
-        /* @__PURE__ */ t(o, { variant: "transparent", children: /* @__PURE__ */ t(w, {}) }),
-        /* @__PURE__ */ t(o, { variant: "transparent", children: /* @__PURE__ */ t(u, {}) }),
-        /* @__PURE__ */ t(o, { variant: "brand", children: /* @__PURE__ */ t(f, {}) }),
-        /* @__PURE__ */ n(o, { variant: "success", children: [
-          /* @__PURE__ */ t(v, {}),
-          "Get started"
-        ] })
+        /* @__PURE__ */ t(d, { variant: "transparent", children: /* @__PURE__ */ t(j, {}) }),
+        /* @__PURE__ */ t(N, {}),
+        /* @__PURE__ */ a(d, { variant: "transparent", className: e.menu, children: [
+          "Menu",
+          /* @__PURE__ */ t(L, {})
+        ] }),
+        /* @__PURE__ */ t(
+          d,
+          {
+            variant: "brand",
+            as: c,
+            href: "https://shop.highcharts.com/account",
+            children: /* @__PURE__ */ t(P, {})
+          }
+        ),
+        /* @__PURE__ */ a(
+          d,
+          {
+            variant: "success",
+            as: c,
+            href: "https://www.highcharts.com/download/",
+            children: [
+              /* @__PURE__ */ t(J, {}),
+              "Get started"
+            ]
+          }
+        )
       ] })
-    ] }),
-    e
-  ] });
+    ] }) }),
+    !!(n != null && n.length) && /* @__PURE__ */ t(A, { items: n }),
+    r
+  ] }) });
 }
 export {
-  H as Header
+  ot as Header,
+  A as SubHeader
 };

package/dist/components/Logo/index.d.ts

@@ -6,3 +6,4 @@ export interface LogoProps extends SVGProps<SVGSVGElement> {
     withLink?: boolean;
 }
 export declare function Logo({ title, light, showText, withLink, ...props }: LogoProps): import("react/jsx-runtime").JSX.Element;
+export declare function ThemedLogo(props: LogoProps): import("react/jsx-runtime").JSX.Element;