@progress/kendo-themes-html 10.2.0-dev.2 → 10.2.0

package/dist/cjs/otp/tests/otp.js

@@ -668,9 +668,63 @@ InputValidationIcon.className = className5;
 
 // src/input/input-prefix.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
+var className6 = `k-input-prefix`;
+var defaultOptions9 = {
+  direction: "horizontal"
+};
+var InputPrefix = (props) => {
+  const {
+    direction = defaultOptions9.direction,
+    ...other
+  } = props;
+  if (!props.children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        className6,
+        props.className,
+        {
+          [`k-input-prefix-${direction}`]: direction
+        }
+      ),
+      children: props.children
+    }
+  );
+};
 
 // src/input/input-suffix.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
+var className7 = `k-input-suffix`;
+var defaultOptions10 = {
+  direction: "horizontal"
+};
+var InputSuffix = (props) => {
+  const {
+    direction = defaultOptions10.direction,
+    ...other
+  } = props;
+  if (!props.children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        className7,
+        props.className,
+        {
+          [`k-input-suffix-${direction}`]: direction
+        }
+      ),
+      children: props.children
+    }
+  );
+};
 
 // src/input/input-prefix-text.tsx
 var import_jsx_runtime15 = require("react/jsx-runtime");
@@ -680,10 +734,33 @@ var import_jsx_runtime16 = require("react/jsx-runtime");
 
 // src/input/input-separator.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
+var className8 = `k-input-separator`;
+var defaultOptions11 = {
+  direction: "vertical"
+};
+var InputSeparator = (props) => {
+  const {
+    direction = defaultOptions11.direction,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "span",
+    {
+      ...other,
+      className: classNames(
+        className8,
+        props.className,
+        {
+          [`${className8}-${direction}`]: direction
+        }
+      )
+    }
+  );
+};
 
-// src/otp/otp-input.tsx
+// src/textbox/textbox.spec.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var ONETIMEPASSWORDINPUT_CLASSNAME = `k-otp-input`;
+var TEXTBOX_CLASSNAME = `k-textbox`;
 var states12 = [
   States.hover,
   States.focus,
@@ -691,6 +768,7 @@ var states12 = [
   States.invalid,
   States.required,
   States.disabled,
+  States.loading,
   States.readonly
 ];
 var options11 = {
@@ -698,16 +776,24 @@ var options11 = {
   rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
 };
-var defaultOptions9 = {
+var defaultOptions12 = {
+  showClearButton: true,
+  showValidationIcon: true,
   size: Input.defaultOptions.size,
   rounded: Input.defaultOptions.rounded,
-  fillMode: Input.defaultOptions.fillMode
+  fillMode: Input.defaultOptions.fillMode,
+  separators: true
 };
-var OneTimePasswordInput = (props) => {
+var Textbox = (props) => {
   const {
-    size = defaultOptions9.size,
-    rounded = defaultOptions9.rounded,
-    fillMode = defaultOptions9.fillMode,
+    size = defaultOptions12.size,
+    rounded = defaultOptions12.rounded,
+    fillMode = defaultOptions12.fillMode,
+    separators = defaultOptions12.separators,
+    showClearButton = defaultOptions12.showClearButton,
+    showValidationIcon = defaultOptions12.showValidationIcon,
+    prefix,
+    suffix,
     type,
     value,
     placeholder,
@@ -716,11 +802,12 @@ var OneTimePasswordInput = (props) => {
     valid,
     invalid,
     required,
+    loading,
     disabled,
     readonly,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     Input,
     {
       ...other,
@@ -732,33 +819,256 @@ var OneTimePasswordInput = (props) => {
       valid,
       invalid,
       required,
+      loading,
+      disabled,
+      readonly,
+      className: classNames(props.className, TEXTBOX_CLASSNAME),
+      children: [
+        prefix && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputPrefix, { children: prefix }),
+          separators && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputSeparator, {})
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputInnerInput, { placeholder, value, type }),
+        showValidationIcon && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          InputValidationIcon,
+          {
+            valid,
+            invalid,
+            loading,
+            disabled
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          InputLoadingIcon,
+          {
+            loading,
+            disabled
+          }
+        ),
+        showClearButton && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          InputClearValue,
+          {
+            loading,
+            disabled,
+            readonly,
+            value
+          }
+        ),
+        suffix && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+          separators && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputSeparator, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputSuffix, { children: suffix })
+        ] })
+      ]
+    }
+  );
+};
+Textbox.states = states12;
+Textbox.options = options11;
+Textbox.className = TEXTBOX_CLASSNAME;
+Textbox.defaultOptions = defaultOptions12;
+
+// src/textbox/templates/textbox-normal.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+
+// src/textbox/templates/textbox-prefix.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+
+// src/button/button.spec.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var BUTTON_CLASSNAME = `k-button`;
+var states13 = [
+  States.hover,
+  States.focus,
+  States.active,
+  States.selected,
+  States.disabled
+];
+var options12 = {
+  size: [Size.small, Size.medium, Size.large],
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link],
+  themeColor: [
+    ThemeColor.base,
+    ThemeColor.primary,
+    ThemeColor.secondary,
+    ThemeColor.tertiary,
+    ThemeColor.success,
+    ThemeColor.warning,
+    ThemeColor.error,
+    ThemeColor.info,
+    ThemeColor.light,
+    ThemeColor.dark,
+    ThemeColor.inverse
+  ]
+};
+var defaultOptions13 = {
+  size: Size.medium,
+  rounded: Roundness.medium,
+  fillMode: FillMode.solid,
+  themeColor: ThemeColor.base,
+  showArrow: false,
+  arrowIconName: "caret-alt-down"
+};
+var Button = (props) => {
+  const {
+    size = defaultOptions13.size,
+    rounded = defaultOptions13.rounded,
+    fillMode = defaultOptions13.fillMode,
+    themeColor = defaultOptions13.themeColor,
+    showArrow = defaultOptions13.showArrow,
+    arrowIconName = defaultOptions13.arrowIconName,
+    hover,
+    focus,
+    active,
+    selected,
+    disabled,
+    icon,
+    text,
+    iconClassName,
+    ...other
+  } = props;
+  const hasIcon = icon !== void 0;
+  const hasChildren = props.children !== void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    "button",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        BUTTON_CLASSNAME,
+        optionClassNames(BUTTON_CLASSNAME, {
+          size,
+          rounded,
+          fillMode,
+          themeColor
+        }),
+        stateClassNames(BUTTON_CLASSNAME, {
+          hover,
+          focus,
+          active,
+          disabled,
+          selected
+        }),
+        {
+          ["k-icon-button"]: !text && !hasChildren && hasIcon
+        }
+      ),
+      children: [
+        icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          Icon,
+          {
+            className: classNames(iconClassName, "k-button-icon"),
+            icon
+          }
+        ),
+        text ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+          text && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "k-button-text", children: text }),
+          props.children
+        ] }) : props.children && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "k-button-text", children: props.children }),
+        showArrow && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "k-menu-button-arrow k-button-arrow", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon, { icon: arrowIconName }) })
+      ]
+    }
+  );
+};
+Button.states = states13;
+Button.options = options12;
+Button.className = BUTTON_CLASSNAME;
+Button.defaultOptions = defaultOptions13;
+
+// src/button/templates/icon-button.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+
+// src/button/templates/icon-text-button.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+
+// src/button/templates/text-button.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+
+// src/textbox/templates/textbox-suffix.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+
+// src/otp/otp-input.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var ONETIMEPASSWORDINPUT_CLASSNAME = `k-otp-input`;
+var states14 = [
+  States.hover,
+  States.focus,
+  States.valid,
+  States.invalid,
+  States.required,
+  States.disabled,
+  States.readonly
+];
+var options13 = {
+  size: [Size.small, Size.medium, Size.large],
+  rounded: [Roundness.small, Roundness.medium, Roundness.large, Roundness.full],
+  fillMode: [FillMode.solid, FillMode.flat, FillMode.outline]
+};
+var defaultOptions14 = {
+  size: Textbox.defaultOptions.size,
+  rounded: Textbox.defaultOptions.rounded,
+  fillMode: Textbox.defaultOptions.fillMode
+};
+var OneTimePasswordInput = (props) => {
+  const {
+    size = defaultOptions14.size,
+    rounded = defaultOptions14.rounded,
+    fillMode = defaultOptions14.fillMode,
+    type,
+    value,
+    placeholder,
+    hover,
+    focus,
+    valid,
+    invalid,
+    required,
+    disabled,
+    readonly,
+    ...other
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    Textbox,
+    {
+      ...other,
+      size,
+      rounded,
+      fillMode,
+      type,
+      value,
+      placeholder,
+      hover,
+      focus,
+      valid,
+      invalid,
+      required,
       disabled,
       readonly,
+      showClearButton: false,
+      showValidationIcon: false,
       className: classNames(
         props.className,
         ONETIMEPASSWORDINPUT_CLASSNAME
-      ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(InputInnerInput, { placeholder, value, type })
+      )
     }
   );
 };
-OneTimePasswordInput.states = states12;
-OneTimePasswordInput.options = options11;
+OneTimePasswordInput.states = states14;
+OneTimePasswordInput.options = options13;
 OneTimePasswordInput.className = ONETIMEPASSWORDINPUT_CLASSNAME;
-OneTimePasswordInput.defaultOptions = defaultOptions9;
+OneTimePasswordInput.defaultOptions = defaultOptions14;
 
 // src/otp/otp-separator.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var ONETIMEPASSWORDSEPARATOR_CLASSNAME = `k-otp-separator`;
-var states13 = [];
-var options12 = {};
-var defaultOptions10 = {};
+var states15 = [];
+var options14 = {};
+var defaultOptions15 = {};
 var OneTimePasswordSeparator = (props) => {
   const {
     children,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     "div",
     {
       ...other,
@@ -770,33 +1080,33 @@ var OneTimePasswordSeparator = (props) => {
     }
   );
 };
-OneTimePasswordSeparator.states = states13;
-OneTimePasswordSeparator.options = options12;
+OneTimePasswordSeparator.states = states15;
+OneTimePasswordSeparator.options = options14;
 OneTimePasswordSeparator.className = ONETIMEPASSWORDSEPARATOR_CLASSNAME;
-OneTimePasswordSeparator.defaultOptions = defaultOptions10;
+OneTimePasswordSeparator.defaultOptions = defaultOptions15;
 
 // src/otp/templates/otp-normal.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 
 // src/input-group/input-group.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var INPUTGROUP_CLASSNAME = `k-input-group`;
-var states14 = [
+var states16 = [
   States.disabled
 ];
-var options13 = {
+var options15 = {
   fillMode: [FillMode.solid, FillMode.flat, FillMode.outline, FillMode.clear, FillMode.link]
 };
-var defaultOptions11 = {
+var defaultOptions16 = {
   fillMode: FillMode.solid
 };
 var InputGroup = (props) => {
   const {
-    fillMode = defaultOptions11.fillMode,
+    fillMode = defaultOptions16.fillMode,
     disabled,
     ...other
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       ...other,
@@ -814,147 +1124,147 @@ var InputGroup = (props) => {
     }
   );
 };
-InputGroup.states = states14;
-InputGroup.options = options13;
+InputGroup.states = states16;
+InputGroup.options = options15;
 InputGroup.className = INPUTGROUP_CLASSNAME;
-InputGroup.defaultOptions = defaultOptions11;
+InputGroup.defaultOptions = defaultOptions16;
 
 // src/otp/templates/otp-no-space.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 
 // src/otp/templates/otp-groups.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 
 // src/otp/templates/otp-groups-no-space.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 
 // src/otp/tests/otp.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var styles = `
     #test-area {
         max-width: 880px;
         grid-template-columns: 120px repeat(2, 1fr);
     }
 `;
-var otp_default = () => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("style", { children: styles }),
-  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "OTP" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Space" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "No Space" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Normal" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(OneTimePassword, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "A" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "C" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "K" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "6" })
+var otp_default = () => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("style", { children: styles }),
+  /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { id: "test-area", className: "k-d-grid", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: "OTP" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: "Space" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: "No Space" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: "Normal" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(OneTimePassword, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "A" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "C" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "K" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "6" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePassword, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(InputGroup, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "1" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "A" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "3" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "C" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "K" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "6" })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePassword, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(InputGroup, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "A" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "C" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "K" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "6" })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Password" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(OneTimePassword, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "1", type: "password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "2", type: "password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "3", type: "password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "4", type: "password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "5", type: "password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "6", type: "password" })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: "Password" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(OneTimePassword, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "1", type: "password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "2", type: "password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "3", type: "password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "4", type: "password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "5", type: "password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "6", type: "password" })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePassword, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(InputGroup, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "1", type: "password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "2", type: "password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "3", type: "password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "4", type: "password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "5", type: "password" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, { value: "6", type: "password" })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePassword, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(InputGroup, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "1", type: "password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "2", type: "password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "3", type: "password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "4", type: "password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "5", type: "password" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, { value: "6", type: "password" })
     ] }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Groups" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(OneTimePassword, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordSeparator, { children: "-" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordSeparator, { children: "-" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {})
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: "Groups" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(OneTimePassword, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordSeparator, { children: "-" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordSeparator, { children: "-" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {})
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(OneTimePassword, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(InputGroup, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {})
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(OneTimePassword, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(InputGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordSeparator, { children: "-" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(InputGroup, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {})
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordSeparator, { children: "-" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(InputGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordSeparator, { children: "-" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(InputGroup, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {})
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordSeparator, { children: "-" }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(InputGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {})
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Groups, No Separator" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(OneTimePassword, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordSeparator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordSeparator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {})
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: "Groups, No Separator" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(OneTimePassword, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordSeparator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordSeparator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {})
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(OneTimePassword, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(InputGroup, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {})
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(OneTimePassword, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(InputGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordSeparator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(InputGroup, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {})
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordSeparator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(InputGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordSeparator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(InputGroup, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {})
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordSeparator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(InputGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {})
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: "Groups, Template Separator" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(OneTimePassword, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "star" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "star" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {})
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: "Groups, Template Separator" }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(OneTimePassword, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { icon: "star" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { icon: "star" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {})
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(OneTimePassword, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(InputGroup, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {})
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(OneTimePassword, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(InputGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "star" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(InputGroup, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {})
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { icon: "star" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(InputGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {})
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { icon: "star" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(InputGroup, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OneTimePasswordInput, {})
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordSeparator, { children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { icon: "star" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(InputGroup, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(OneTimePasswordInput, {})
       ] })
     ] }) })
   ] })