@clyrex-digital/clyrex-controls-dev 0.8.1-dev.20260722101954

package/dist/chunk-DBHUCH4B.mjs

@@ -0,0 +1,109 @@
+import {
+  buttonClasses
+} from "./chunk-56HSDML5.mjs";
+
+// src/components/controls/edit/InputControlType.tsx
+var Constants = {
+  pagesize: 10
+};
+var InputControlType = {
+  lineTextInput: "text",
+  multilineTextInput: "multilinetext",
+  emailInput: "email",
+  moneyInput: "money",
+  select: "select",
+  percentageInput: "percentage",
+  asset: "asset",
+  phoneInput: "phone",
+  numberInput: "number",
+  checkboxInput: "boolean",
+  otpInput: "otp",
+  datetimeInput: "datetime",
+  timeInput: "time",
+  colorInput: "colorInput",
+  selectWithSearchInput: "selectWithSearchInput",
+  selectWithSearchPanel: "selectWithSearchPanel",
+  booleanSelect: "booleanSelect",
+  switchInput: "switchInput",
+  videoInput: "videoInput"
+};
+var InputControlType_default = InputControlType;
+
+// src/components/dataForm/Hyperlink.tsx
+import Link from "next/link";
+import { Fragment, jsx } from "react/jsx-runtime";
+function Hyperlink(props) {
+  let linkClass = props.linkType ? buttonClasses.get(props.linkType) : buttonClasses.get("Link" /* Link */);
+  const target = props?.href?.startsWith("http") ? "_blank" : "_self";
+  const additionalProps = {};
+  if (target == "_blank") {
+    additionalProps.rel = "noopener noreferrer";
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: props.href ? /* @__PURE__ */ jsx(
+    Link,
+    {
+      href: props.href,
+      prefetch: false,
+      className: [linkClass, props.className].filter(Boolean).join(" "),
+      ...additionalProps,
+      target,
+      children: props.children
+    }
+  ) : props.isHeading ? /* @__PURE__ */ jsx("h5", { className: props.className + "inline-block", children: props.children }) : /* @__PURE__ */ jsx("span", { className: props.className, children: props.children }) });
+}
+
+// src/svg/chevron-updown.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ChevronUpDown = (props) => {
+  return /* @__PURE__ */ jsx2("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: props.className, children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" }) });
+};
+var chevron_updown_default = ChevronUpDown;
+
+// src/svg/chevron-down.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ChevronDown = (props) => {
+  return /* @__PURE__ */ jsx3("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: props.className, children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" }) });
+};
+var chevron_down_default = ChevronDown;
+
+// src/svg/chevron-up.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ChevronUp = (props) => {
+  return /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: props.className, children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 15.75l7.5-7.5 7.5 7.5" }) });
+};
+var chevron_up_default = ChevronUp;
+
+// src/svg/plus.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Plus = (props) => {
+  return /* @__PURE__ */ jsx5("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: props.className, children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m7.5-7.5h-15" }) });
+};
+var plus_default = Plus;
+
+// src/svg/Icons.tsx
+var Icons = {
+  chevronUpDown: chevron_updown_default,
+  chevronDown: chevron_down_default,
+  chevronUp: chevron_up_default,
+  plus: plus_default
+};
+var Icons_default = Icons;
+
+// src/svg/Icon.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Icon = ({ name, className, ...props }) => {
+  const IconComponent = Icons_default[name];
+  if (!IconComponent) {
+    console.error(`Icon "${name}" not found.`);
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(IconComponent, { ...props, className });
+};
+var Icon_default = Icon;
+
+export {
+  Constants,
+  InputControlType_default,
+  Hyperlink,
+  Icon_default
+};

package/dist/chunk-DKW4DXCU.mjs

@@ -0,0 +1,120 @@
+// src/components/controls/view/DateViewClient.tsx
+import { useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var dateFormatter = new Intl.DateTimeFormat("en", {
+  day: "2-digit",
+  month: "short",
+  year: "numeric"
+});
+var timeFormatterNoSeconds = new Intl.DateTimeFormat("en", {
+  hour: "2-digit",
+  minute: "2-digit"
+});
+var timeFormatterWithSeconds = new Intl.DateTimeFormat("en", {
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit"
+});
+var dateTimeFormatterNoSeconds = new Intl.DateTimeFormat("en", {
+  day: "2-digit",
+  month: "short",
+  year: "numeric",
+  hour: "2-digit",
+  minute: "2-digit"
+});
+var dateTimeFormatterWithSeconds = new Intl.DateTimeFormat("en", {
+  day: "2-digit",
+  month: "short",
+  year: "numeric",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit"
+});
+var DateViewClient = (props) => {
+  const [timeZoneAbbr, setTimeZoneAbbr] = useState("");
+  useEffect(() => {
+    const parts = new Intl.DateTimeFormat("en", {
+      timeZoneName: "short"
+    }).formatToParts(/* @__PURE__ */ new Date());
+    const abbr = parts.find((part) => part.type === "timeZoneName")?.value || "";
+    setTimeZoneAbbr(abbr);
+  }, []);
+  const toUtcDate = (dateString) => {
+    const s = dateString.trim();
+    if (!s) {
+      throw new Error("Empty date string");
+    }
+    const iso = s.replace(" ", "T");
+    const hasTimeZone = /Z$/i.test(iso) || /[+-]\d{2}:\d{2}$/.test(iso);
+    const utc = hasTimeZone ? iso : `${iso}Z`;
+    const date = new Date(utc);
+    if (Number.isNaN(date.getTime())) {
+      throw new Error(`Invalid date: ${dateString}`);
+    }
+    return date;
+  };
+  const formatDate = (date) => {
+    return dateFormatter.format(date);
+  };
+  const formatTime = (date) => {
+    return date.getSeconds() === 0 ? timeFormatterNoSeconds.format(date) : timeFormatterWithSeconds.format(date);
+  };
+  const formatDateTime = (date) => {
+    return date.getSeconds() === 0 ? dateTimeFormatterNoSeconds.format(date) : dateTimeFormatterWithSeconds.format(date);
+  };
+  const getTimePeriod = (date) => {
+    const hours = date.getHours();
+    if (hours >= 5 && hours < 8) return "Early Morning";
+    if (hours >= 8 && hours < 12) return "Morning";
+    if (hours >= 12 && hours < 14) return "Noon";
+    if (hours >= 14 && hours < 17) return "Afternoon";
+    if (hours >= 17 && hours < 20) return "Evening";
+    if (hours >= 20 && hours < 22) return "Late Evening";
+    return "Night";
+  };
+  const getRelativeTime = (dateString) => {
+    const now = /* @__PURE__ */ new Date();
+    const utcDate = toUtcDate(dateString);
+    const diffMs = now.getTime() - utcDate.getTime();
+    const diffSec = Math.floor(diffMs / 1e3);
+    const diffMin = Math.floor(diffSec / 60);
+    const diffHr = Math.floor(diffMin / 60);
+    const diffDay = Math.floor(diffHr / 24);
+    if (diffSec < 60) return "Just now";
+    if (diffMin < 60) return `${diffMin} minute${diffMin > 1 ? "s" : ""} ago`;
+    if (diffHr < 24) return `${diffHr} hour${diffHr > 1 ? "s" : ""} ago`;
+    if (diffDay < 7) return `${diffDay} day${diffDay > 1 ? "s" : ""} ago`;
+    return formatDate(utcDate);
+  };
+  const parseAndFormatDate = (dateString, format) => {
+    if (format === "relative") {
+      return getRelativeTime(dateString);
+    }
+    const utcDate = toUtcDate(dateString);
+    switch (props.controlType) {
+      case "date":
+        return formatDate(utcDate);
+      case "time":
+        return `${formatTime(utcDate)} ${timeZoneAbbr} (${getTimePeriod(
+          utcDate
+        )})`;
+      default:
+        return formatDateTime(utcDate);
+    }
+  };
+  let localDateTime = "";
+  try {
+    localDateTime = parseAndFormatDate(props.value, props.format);
+  } catch (error) {
+    console.error("Error parsing date:", props.value, error);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "inline-flex flex-wrap gap-1", children: [
+    /* @__PURE__ */ jsx("span", { children: localDateTime }),
+    !props.format && props.controlType !== "date" && props.controlType !== "datetime" && timeZoneAbbr && /* @__PURE__ */ jsx("span", { children: timeZoneAbbr })
+  ] });
+};
+var DateViewClient_default = DateViewClient;
+
+export {
+  DateViewClient_default
+};

package/dist/chunk-FI2KJBK2.mjs

@@ -0,0 +1,110 @@
+"use client";
+
+import {
+  buttonClasses
+} from "./chunk-IMNQO57B.mjs";
+
+// src/components/controls/edit/InputControlType.tsx
+var Constants = {
+  pagesize: 10
+};
+var InputControlType = {
+  lineTextInput: "text",
+  multilineTextInput: "multilinetext",
+  emailInput: "email",
+  moneyInput: "money",
+  select: "select",
+  percentageInput: "percentage",
+  asset: "asset",
+  phoneInput: "phone",
+  numberInput: "number",
+  checkboxInput: "boolean",
+  otpInput: "otp",
+  datetimeInput: "datetime",
+  timeInput: "time",
+  colorInput: "colorInput",
+  selectWithSearchInput: "selectWithSearchInput",
+  selectWithSearchPanel: "selectWithSearchPanel",
+  booleanSelect: "booleanSelect",
+  switchInput: "switchInput"
+};
+var InputControlType_default = InputControlType;
+
+// src/components/dataForm/Hyperlink.tsx
+import Link from "next/link";
+import { Fragment, jsx } from "react/jsx-runtime";
+function Hyperlink(props) {
+  let linkClass = props.linkType ? buttonClasses.get(props.linkType) : buttonClasses.get("Link" /* Link */);
+  const target = props?.href?.startsWith("http") ? "_blank" : "_self";
+  const additionalProps = {};
+  if (target == "_blank") {
+    additionalProps.rel = "noopener noreferrer";
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: props.href ? /* @__PURE__ */ jsx(
+    Link,
+    {
+      href: props.href,
+      prefetch: false,
+      className: [linkClass, props.className].filter(Boolean).join(" "),
+      ...additionalProps,
+      target,
+      children: props.children
+    }
+  ) : props.isHeading ? /* @__PURE__ */ jsx("h5", { className: props.className + "inline-block", children: props.children }) : /* @__PURE__ */ jsx("span", { className: props.className, children: props.children }) });
+}
+
+// src/svg/chevron-updown.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ChevronUpDown = (props) => {
+  return /* @__PURE__ */ jsx2("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: props.className, children: /* @__PURE__ */ jsx2("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9" }) });
+};
+var chevron_updown_default = ChevronUpDown;
+
+// src/svg/chevron-down.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ChevronDown = (props) => {
+  return /* @__PURE__ */ jsx3("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: props.className, children: /* @__PURE__ */ jsx3("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19.5 8.25l-7.5 7.5-7.5-7.5" }) });
+};
+var chevron_down_default = ChevronDown;
+
+// src/svg/chevron-up.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ChevronUp = (props) => {
+  return /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: props.className, children: /* @__PURE__ */ jsx4("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4.5 15.75l7.5-7.5 7.5 7.5" }) });
+};
+var chevron_up_default = ChevronUp;
+
+// src/svg/plus.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Plus = (props) => {
+  return /* @__PURE__ */ jsx5("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: props.className, children: /* @__PURE__ */ jsx5("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 4.5v15m7.5-7.5h-15" }) });
+};
+var plus_default = Plus;
+
+// src/svg/Icons.tsx
+var Icons = {
+  chevronUpDown: chevron_updown_default,
+  chevronDown: chevron_down_default,
+  chevronUp: chevron_up_default,
+  plus: plus_default
+};
+var Icons_default = Icons;
+
+// src/svg/Icon.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Icon = ({ name, className, ...props }) => {
+  const IconComponent = Icons_default[name];
+  if (!IconComponent) {
+    console.error(`Icon "${name}" not found.`);
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(IconComponent, { ...props, className });
+};
+var Icon_default = Icon;
+
+export {
+  Constants,
+  InputControlType_default,
+  Hyperlink,
+  Icon_default
+};

package/dist/chunk-IMNQO57B.mjs

@@ -0,0 +1,25 @@
+"use client";
+
+
+// src/components/StyleTypes.tsx
+var buttonClasses = /* @__PURE__ */ new Map([
+  [
+    "Primary" /* Solid */,
+    "btn-solid relative inline-flex items-center justify-center rounded px-4 py-3 lg:py-2 font-medium shadow-sm hover:shadow-lg focus:outline-none active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out"
+  ],
+  [
+    "PrimaryHollow" /* Hollow */,
+    "btn-hollow inline-flex font-medium items-center justify-center px-4 py-3 lg:py-2 rounded hover:shadow-md focus:outline-none transition duration-150 ease-in-out  active:scale-95"
+  ],
+  ["Link" /* Link */, "btn-link"]
+]);
+var progressClasses = /* @__PURE__ */ new Map([
+  ["Primary" /* Solid */, ""],
+  ["PrimaryHollow" /* Hollow */, ""],
+  ["Link" /* Link */, ""]
+]);
+
+export {
+  buttonClasses,
+  progressClasses
+};

package/dist/chunk-JKP4XOZB.mjs

@@ -0,0 +1,214 @@
+"use client";
+
+import {
+  buttonClasses,
+  progressClasses
+} from "./chunk-IMNQO57B.mjs";
+
+// src/components/ToastService.tsx
+var toastHandlersKey = "__digitalStoreToastHandlers";
+var getToastHandlers = () => {
+  const globalScope = globalThis;
+  if (!globalScope[toastHandlersKey]) {
+    globalScope[toastHandlersKey] = {};
+  }
+  return globalScope[toastHandlersKey];
+};
+var ToastService = class {
+  static initialize(showToast, closeToast) {
+    const handlers = getToastHandlers();
+    handlers.showToast = showToast;
+    handlers.closeToast = closeToast;
+  }
+  static showError(message) {
+    const handlers = getToastHandlers();
+    if (handlers.showToast) {
+      handlers.showToast(message, "error");
+    }
+  }
+  static showInfo(message) {
+    const handlers = getToastHandlers();
+    if (handlers.showToast) {
+      handlers.showToast(message, "info");
+    }
+  }
+  static showWarning(message) {
+    const handlers = getToastHandlers();
+    if (handlers.showToast) {
+      handlers.showToast(message, "warning");
+    }
+  }
+  static showSuccess(message) {
+    const handlers = getToastHandlers();
+    if (handlers.showToast) {
+      handlers.showToast(message, "success");
+    }
+  }
+  static close() {
+    const handlers = getToastHandlers();
+    if (handlers.closeToast) {
+      handlers.closeToast();
+    }
+  }
+};
+var ToastService_default = ToastService;
+
+// src/components/Button.tsx
+import React3, { useState as useState2 } from "react";
+
+// src/components/Confirm.tsx
+import { useState } from "react";
+
+// src/components/ClientButton.tsx
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var ClientButton = (props) => {
+  const execute = async (event) => {
+    if (props.onClick !== void 0) {
+      props.onClick();
+    } else {
+      ToastService_default.showError("No action defined.");
+    }
+  };
+  let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
+  return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: execute,
+      className: buttonClass + " " + props.className,
+      children: props.children
+    }
+  ) });
+};
+var ClientButton_default = ClientButton;
+
+// src/components/Confirm.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Confirm = ({ message, onConfirm, onCancel }) => {
+  const [showModal, setShowModal] = useState(true);
+  const handleConfirmAction = () => {
+    setShowModal(false);
+    if (onConfirm) {
+      onConfirm();
+    }
+  };
+  const handleCancelAction = () => {
+    setShowModal(false);
+    if (onCancel) {
+      onCancel();
+    }
+  };
+  return /* @__PURE__ */ jsx2(Fragment, { children: showModal && /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 flex items-center justify-center z-50", children: [
+    /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 bg-black opacity-70" }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-white rounded-md p-6 w-2/6 shadow border z-50", children: [
+      /* @__PURE__ */ jsx2("p", { className: "text-xl font-medium mb-4", children: "Confirmation" }),
+      /* @__PURE__ */ jsx2("p", { className: "mb-4", children: message }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-8", children: [
+        /* @__PURE__ */ jsx2(
+          ClientButton_default,
+          {
+            onClick: handleCancelAction,
+            ButtonType: "PrimaryHollow" /* Hollow */,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          ClientButton_default,
+          {
+            onClick: handleConfirmAction,
+            children: "Confirm"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+};
+var Confirm_default = Confirm;
+{
+}
+
+// src/components/Button.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Button = (props) => {
+  const [inProgress, setInProgress] = useState2(false);
+  const [isActionPerformed, setIsActionPerformed] = useState2(false);
+  const [responseMessage, setResponseMessage] = useState2(null);
+  const [showModal, setShowModal] = useState2(null);
+  const execute = async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (props.confirm) {
+      const confirmed = await showConfirmation("Are you sure you want to delete this item?");
+      setShowModal(null);
+      if (!confirmed) {
+        return;
+      }
+    }
+    if (props.oneTimeAction && isActionPerformed) {
+      return;
+    }
+    setInProgress(true);
+    let isValid = true;
+    if (props.onValidate !== void 0) {
+      isValid = await props.onValidate();
+      if (!isValid) {
+        setInProgress(false);
+        ToastService_default.showError("There are errors in the form. Please fix them before proceeding.");
+        return;
+      }
+    }
+    if (props.onClick !== void 0) {
+      let response = await props.onClick();
+      if (response.isSuccessful) {
+        setIsActionPerformed(true);
+        setResponseMessage(response.message);
+        if (props.showToast) {
+          ToastService_default.showInfo(response.message || "");
+        }
+      } else {
+        ToastService_default.showError(response.message || "");
+      }
+    } else {
+      ToastService_default.showError("No action defined.");
+    }
+    setInProgress(false);
+  };
+  const showConfirmation = (message) => {
+    return new Promise((resolve) => {
+      const onConfirm = () => resolve(true);
+      const onCancel = () => resolve(false);
+      setShowModal(/* @__PURE__ */ jsx3(Confirm_default, { message: props.confirmationMessage, onConfirm, onCancel }));
+    });
+  };
+  let buttonClass = props.ButtonType ? buttonClasses.get(props.ButtonType) : buttonClasses.get("Primary" /* Solid */);
+  let progressClass = props.ButtonType ? progressClasses.get(props.ButtonType) : progressClasses.get("Primary" /* Solid */);
+  const isDisabled = inProgress || isActionPerformed && props.oneTimeAction;
+  return /* @__PURE__ */ jsxs2(React3.Fragment, { children: [
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "submit",
+        onClick: execute,
+        disabled: props.disabled,
+        title: isDisabled ? "The button is disabled to prevent any action" : "",
+        className: buttonClass + " relative " + props.className,
+        children: [
+          isActionPerformed && props.oneTimeAction && responseMessage ? responseMessage : props.children,
+          inProgress && /* @__PURE__ */ jsx3(React3.Fragment, { children: props.hideProgressIndicator === true ? /* @__PURE__ */ jsx3("div", { className: "absolute bottom-0 left-0 h-0.5 bg-gray-400 rounded animate-progress" }) : /* @__PURE__ */ jsxs2("svg", { className: "animate-spin ml-2 mr-3 h-5 w-5 " + progressClass, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+            /* @__PURE__ */ jsx3("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+            /* @__PURE__ */ jsx3("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+          ] }) })
+        ]
+      }
+    ),
+    showModal
+  ] });
+};
+var Button_default = Button;
+
+export {
+  ToastService_default,
+  ClientButton_default,
+  Button_default
+};