mainstack-design-system 1.12.0 → 1.12.2

package/dist/mainstack-design-system608.js

@@ -1,120 +1,120 @@
 'use client';
-import { jsxs as U, jsx as it } from "react/jsx-runtime";
-import P, { useRef as ut, useState as b, useCallback as Y, useEffect as w, forwardRef as lt } from "react";
-import { InputRoot as st } from "./mainstack-design-system438.js";
-import { InputField as ft } from "./mainstack-design-system439.js";
+import { jsxs as Y, jsx as it } from "react/jsx-runtime";
+import w, { useRef as lt, useState as v, useCallback as B, useEffect as O, forwardRef as st } from "react";
+import { InputRoot as ft } from "./mainstack-design-system438.js";
+import { InputField as ct } from "./mainstack-design-system439.js";
 import "./mainstack-design-system437.js";
-import { n as S, v as ct, o as F, A as z, p as L, r as yt, q as pt, P as p, I as dt, t as mt, u as G, w as Ct, c as gt, j as ht } from "./utils-BuJ7DVbu.js";
-import { usePhoneNumberContext as Nt } from "./mainstack-design-system582.js";
+import { n as S, v as yt, o as F, A as J, p as L, r as pt, q as mt, P as m, I as dt, t as Ct, u as K, w as ht, x as gt, c as Nt, j as bt } from "./utils-DQg2eeoE.js";
+import { usePhoneNumberContext as vt } from "./mainstack-design-system582.js";
 function A(t, n) {
-  return Ot(t) || At(t, n) || bt(t, n) || vt();
+  return Tt(t) || It(t, n) || Ot(t, n) || At();
 }
-function vt() {
+function At() {
   throw new TypeError(`Invalid attempt to destructure non-iterable instance.
 In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`);
 }
-function bt(t, n) {
+function Ot(t, n) {
   if (t) {
-    if (typeof t == "string") return B(t, n);
+    if (typeof t == "string") return H(t, n);
     var e = Object.prototype.toString.call(t).slice(8, -1);
     if (e === "Object" && t.constructor && (e = t.constructor.name), e === "Map" || e === "Set") return Array.from(t);
-    if (e === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)) return B(t, n);
+    if (e === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)) return H(t, n);
   }
 }
-function B(t, n) {
+function H(t, n) {
   (n == null || n > t.length) && (n = t.length);
   for (var e = 0, a = new Array(n); e < n; e++) a[e] = t[e];
   return a;
 }
-function At(t, n) {
+function It(t, n) {
   var e = t == null ? null : typeof Symbol < "u" && t[Symbol.iterator] || t["@@iterator"];
   if (e != null) {
-    var a, r, o, s, f = [], c = !0, i = !1;
+    var a, r, o, s, f = [], c = !0, u = !1;
     try {
       if (o = (e = e.call(t)).next, n !== 0) for (; !(c = (a = o.call(e)).done) && (f.push(a.value), f.length !== n); c = !0) ;
     } catch (l) {
-      i = !0, r = l;
+      u = !0, r = l;
     } finally {
       try {
         if (!c && e.return != null && (s = e.return(), Object(s) !== s)) return;
       } finally {
-        if (i) throw r;
+        if (u) throw r;
       }
     }
     return f;
   }
 }
-function Ot(t) {
+function Tt(t) {
   if (Array.isArray(t)) return t;
 }
-function It(t) {
-  var n = this, e = t.value, a = t.onChange, r = t.country, o = t.defaultCountry, s = t.international, f = t.withCountryCallingCode, c = t.useNationalFormatForDefaultCountryValue, i = t.metadata;
+function Pt(t) {
+  var n = this, e = t.value, a = t.onChange, r = t.country, o = t.defaultCountry, s = t.international, f = t.withCountryCallingCode, c = t.useNationalFormatForDefaultCountryValue, u = t.metadata;
   typeof f == "boolean" && !(r && s) && console.error("[react-phone-number-input] `withCountryCallingCode` property can only be used together with `country` and `international` properties"), r && o && console.error("[react-phone-number-input] When `country` property is passed, `defaultCountry` property has no effect and therefore shouldn't be passed"), typeof s == "boolean" && !r && console.error("[react-phone-number-input] `international` property can only be used together with `country` property");
-  var l = wt({
+  var l = Ft({
     international: s,
     country: r,
     defaultCountry: o,
     withCountryCallingCode: f
-  }), m = ut(), h = function(y, d, v) {
-    console.error("[react-phone-number-input] Expected phone number ".concat(y, " to correspond to country ").concat(d, " but ").concat(v ? "in reality it corresponds to country " + v : "it doesn't", ".")), m.current = !0;
-  }, C = function(y) {
-    return e && ct(e), Tt(e, r, o, l, c, i, function() {
-      y && y.onCountryMismatch && y.onCountryMismatch();
-      for (var d = arguments.length, v = new Array(d), T = 0; T < d; T++)
-        v[T] = arguments[T];
-      h.apply(n, v);
+  }), y = lt(), C = function(p, d, b) {
+    console.error("[react-phone-number-input] Expected phone number ".concat(p, " to correspond to country ").concat(d, " but ").concat(b ? "in reality it corresponds to country " + b : "it doesn't", ".")), y.current = !0;
+  }, h = function(p) {
+    return e && yt(e), wt(e, r, o, l, c, u, function() {
+      p && p.onCountryMismatch && p.onCountryMismatch();
+      for (var d = arguments.length, b = new Array(d), P = 0; P < d; P++)
+        b[P] = arguments[P];
+      C.apply(n, b);
     });
-  }, j = b(r), O = A(j, 2), E = O[0], Q = O[1], X = b(o), $ = A(X, 2), Z = $[0], tt = $[1], et = b(C()), V = A(et, 2), nt = V[0], g = V[1], rt = b(e), D = A(rt, 2), I = D[0], N = D[1], at = b(), M = A(at, 2);
-  M[0];
-  var W = M[1], k = Y(function() {
-    return W({});
-  }, [W]);
-  function q(u) {
-    if (u) {
-      l === "NATIONAL_PART_OF_INTERNATIONAL" && (u = "+".concat(F(r, i)).concat(u));
-      var y = new z(r || o, i);
-      return y.input(u), y.getNumberValue();
+  }, j = v(r), I = A(j, 2), E = I[0], X = I[1], Z = v(o), V = A(Z, 2), tt = V[0], et = V[1], nt = v(h()), D = A(nt, 2), rt = D[0], g = D[1], at = v(e), M = A(at, 2), T = M[0], N = M[1], ot = v(), W = A(ot, 2);
+  W[0];
+  var k = W[1], q = B(function() {
+    return k({});
+  }, [k]);
+  function U(i) {
+    if (i) {
+      l === "NATIONAL_PART_OF_INTERNATIONAL" && (i = "+".concat(F(r, u)).concat(i));
+      var p = new J(r || o, u);
+      return p.input(i), p.getNumberValue();
     }
   }
-  w(function() {
-    e !== I && (N(e), g(C()));
-  }, [e]), w(function() {
+  O(function() {
+    e !== T && (N(e), g(h()));
+  }, [e]), O(function() {
     if (r !== E) {
-      Q(r);
-      var u, y = C({
+      X(r);
+      var i, p = h({
         onCountryMismatch: function() {
-          u = !0;
+          i = !0;
         }
       });
-      g(y), u && N(q(y));
+      g(p), i && N(U(p));
     }
-  }, [r]), w(function() {
-    o !== Z && (tt(o), g(C()));
-  }, [o]), w(function() {
-    I !== e && a(I);
-  }, [I]);
-  var ot = Y(function(u) {
-    var y;
+  }, [r]), O(function() {
+    o !== tt && (et(o), g(h()));
+  }, [o]), O(function() {
+    T !== e && a(T);
+  }, [T]);
+  var ut = B(function(i) {
+    var p;
     if (r)
       if (l === "INTERNATIONAL") {
-        var d = S(r, i);
-        if (u.indexOf(d) !== 0) {
-          if (u && u[0] !== "+")
-            u = d + u;
-          else if (!m.current) return g(d), N(void 0), k();
+        var d = S(r, u);
+        if (i.indexOf(d) !== 0) {
+          if (i && i[0] !== "+")
+            i = d + i;
+          else if (!y.current) return g(d), N(void 0), q();
         }
       } else
-        u && u[0] === "+" && (u = u.slice(1));
-    else o || u && u[0] !== "+" && (u = "+" + u);
-    u && (y = q(u)), g(u), N(y);
-  }, [r, l, o, i, g, N, k, m]);
+        i && i[0] === "+" && (i = i.slice(1));
+    else o || i && i[0] !== "+" && (i = "+" + i);
+    i && (p = U(i)), g(i), N(p);
+  }, [r, l, o, u, g, N, q, y]);
   return {
-    phoneDigits: nt,
-    setPhoneDigits: ot,
+    phoneDigits: rt,
+    setPhoneDigits: ut,
     inputFormat: l
   };
 }
-function Tt(t, n, e, a, r, o, s) {
+function wt(t, n, e, a, r, o, s) {
   if (n && a === "INTERNATIONAL") {
     var f = S(n, o);
     return t ? (t.indexOf(f) !== 0 && s(t, n), t) : f;
@@ -123,16 +123,16 @@ function Tt(t, n, e, a, r, o, s) {
     return "";
   if (!n && !e)
     return t;
-  var c = new z(void 0, o);
+  var c = new J(void 0, o);
   c.input(t);
-  var i = c.getNumber();
-  if (i)
+  var u = c.getNumber();
+  if (u)
     if (n)
-      switch (i.country && i.country !== n ? s(t, n, i.country) : i.countryCallingCode !== F(n, o) && s(t, n), a) {
+      switch (u.country && u.country !== n ? s(t, n, u.country) : u.countryCallingCode !== F(n, o) && s(t, n), a) {
         case "NATIONAL":
-          return L(i.formatNational());
+          return L(u.formatNational());
         case "NATIONAL_PART_OF_INTERNATIONAL":
-          return L(yt(i.formatInternational(), S(n, o)));
+          return L(pt(u.formatInternational(), S(n, o)));
         case "INTERNATIONAL":
           throw new Error('`inputFormat: "INTERNATIONAL"` case should\'ve already been handled earlier in the code');
         case "INTERNATIONAL_OR_NATIONAL":
@@ -141,15 +141,15 @@ function Tt(t, n, e, a, r, o, s) {
           throw new Error("Unknown `inputFormat`: ".concat(a));
       }
     else
-      return i.countryCallingCode && i.countryCallingCode === F(e, o) && r ? L(i.formatNational()) : t;
+      return u.countryCallingCode && u.countryCallingCode === F(e, o) && r ? L(u.formatNational()) : t;
   else
     return "";
 }
-function wt(t) {
+function Ft(t) {
   var n = t.international, e = t.country, a = t.defaultCountry, r = t.withCountryCallingCode;
   return e ? n ? r ? "INTERNATIONAL" : "NATIONAL_PART_OF_INTERNATIONAL" : "NATIONAL" : a ? "INTERNATIONAL_OR_NATIONAL" : "INTERNATIONAL";
 }
-var Pt = ["Component", "country", "defaultCountry", "useNationalFormatForDefaultCountryValue", "value", "onChange", "metadata", "international", "withCountryCallingCode"];
+var Rt = ["Component", "country", "defaultCountry", "useNationalFormatForDefaultCountryValue", "value", "onChange", "metadata", "international", "withCountryCallingCode"];
 function _() {
   return _ = Object.assign ? Object.assign.bind() : function(t) {
     for (var n = 1; n < arguments.length; n++) {
@@ -160,9 +160,9 @@ function _() {
     return t;
   }, _.apply(this, arguments);
 }
-function Ft(t, n) {
+function jt(t, n) {
   if (t == null) return {};
-  var e = Rt(t, n), a, r;
+  var e = Et(t, n), a, r;
   if (Object.getOwnPropertySymbols) {
     var o = Object.getOwnPropertySymbols(t);
     for (r = 0; r < o.length; r++)
@@ -170,7 +170,7 @@ function Ft(t, n) {
   }
   return e;
 }
-function Rt(t, n) {
+function Et(t, n) {
   if (t == null) return {};
   var e = {}, a = Object.keys(t), r, o;
   for (o = 0; o < a.length; o++)
@@ -178,40 +178,40 @@ function Rt(t, n) {
   return e;
 }
 function R(t, n) {
-  var e = t.Component, a = t.country, r = t.defaultCountry, o = t.useNationalFormatForDefaultCountryValue, s = o === void 0 ? !0 : o, f = t.value, c = t.onChange, i = t.metadata, l = t.international, m = t.withCountryCallingCode, h = Ft(t, Pt), C = It({
+  var e = t.Component, a = t.country, r = t.defaultCountry, o = t.useNationalFormatForDefaultCountryValue, s = o === void 0 ? !0 : o, f = t.value, c = t.onChange, u = t.metadata, l = t.international, y = t.withCountryCallingCode, C = jt(t, Rt), h = Pt({
     value: f,
     onChange: c,
     country: a,
     defaultCountry: r,
     international: l,
-    withCountryCallingCode: m,
+    withCountryCallingCode: y,
     useNationalFormatForDefaultCountryValue: s,
-    metadata: i
-  }), j = C.phoneDigits, O = C.setPhoneDigits, E = C.inputFormat;
-  return /* @__PURE__ */ P.createElement(e, _({}, h, {
+    metadata: u
+  }), j = h.phoneDigits, I = h.setPhoneDigits, E = h.inputFormat;
+  return /* @__PURE__ */ w.createElement(e, _({}, C, {
     ref: n,
-    metadata: i,
+    metadata: u,
     inputFormat: E,
     international: l,
-    withCountryCallingCode: m,
+    withCountryCallingCode: y,
     country: a || r,
     value: j,
-    onChange: O
+    onChange: I
   }));
 }
-R = /* @__PURE__ */ P.forwardRef(R);
+R = /* @__PURE__ */ w.forwardRef(R);
 R.propTypes = {
   /**
    * The phone number (in E.164 format).
    * Examples: `"+12"`, `"+12133734253"`.
    * An "empty" `value` could be represented by any "falsy" value like `undefined`, `null` or an empty string `""`.
    */
-  value: p.string,
+  value: m.string,
   /**
    * A function of `value: string?`.
    * Updates the `value` property (to `undefined` in case it's empty).
    */
-  onChange: p.func.isRequired,
+  onChange: m.func.isRequired,
   /**
    * A two-letter country code for formatting `value`
    * as a national phone number (example: `(213) 373-4253`),
@@ -222,7 +222,7 @@ R.propTypes = {
    * is formatted as an international phone number.
    * (example: `+1 213 373 4253`)
    */
-  country: p.string,
+  country: m.string,
   /**
    * A two-letter country code for formatting `value`
    * when a user inputs a national phone number (example: `(213) 373-4253`).
@@ -230,7 +230,7 @@ R.propTypes = {
    * Example: "US".
    * `country` and `defaultCountry` properties are mutually exclusive.
    */
-  defaultCountry: p.string,
+  defaultCountry: m.string,
   /**
    * If `country` property is passed along with `international={true}` property
    * then the phone number will be input in "international" format for that `country`
@@ -241,33 +241,33 @@ R.propTypes = {
    * the phone number will be input in the "international" format for `US` (`213 373 4253`)
    * (without "country calling code" `+1`).
    */
-  international: p.bool,
+  international: m.bool,
   /**
    * If `country` and `international` properties are set,
    * then by default it won't include "country calling code" in the input field.
    * To change that, pass `withCountryCallingCode` property,
    * and it will include "country calling code" in the input field.
    */
-  withCountryCallingCode: p.bool,
+  withCountryCallingCode: m.bool,
   /**
    * A component that renders the `<input/>` itself and also
    * parses and formats its `value` as the user inputs it.
    * See `InputBasic.js` and `InputSmart.js` for an example.
    */
-  Component: p.elementType.isRequired,
+  Component: m.elementType.isRequired,
   /**
    * When `defaultCountry` is defined and the initial `value` corresponds to `defaultCountry`,
    * then the `value` will be formatted as a national phone number by default.
    * To format the initial `value` of `defaultCountry` as an international number instead
    * set `useNationalFormatForDefaultCountryValue` property to `true`.
    */
-  useNationalFormatForDefaultCountryValue: p.bool,
+  useNationalFormatForDefaultCountryValue: m.bool,
   /**
    * `libphonenumber-js` metadata.
    */
-  metadata: pt
+  metadata: mt
 };
-var jt = ["type", "autoComplete", "smartCaret", "metadata"];
+var Lt = ["type", "autoComplete", "smartCaret", "metadata"];
 function x() {
   return x = Object.assign ? Object.assign.bind() : function(t) {
     for (var n = 1; n < arguments.length; n++) {
@@ -278,9 +278,9 @@ function x() {
     return t;
   }, x.apply(this, arguments);
 }
-function Et(t, n) {
+function St(t, n) {
   if (t == null) return {};
-  var e = Lt(t, n), a, r;
+  var e = _t(t, n), a, r;
   if (Object.getOwnPropertySymbols) {
     var o = Object.getOwnPropertySymbols(t);
     for (r = 0; r < o.length; r++)
@@ -288,33 +288,33 @@ function Et(t, n) {
   }
   return e;
 }
-function Lt(t, n) {
+function _t(t, n) {
   if (t == null) return {};
   var e = {}, a = Object.keys(t), r, o;
   for (o = 0; o < a.length; o++)
     r = a[o], !(n.indexOf(r) >= 0) && (e[r] = t[r]);
   return e;
 }
-function J(t) {
+function Q(t) {
   function n(e, a) {
-    var r = e.type, o = r === void 0 ? "tel" : r, s = e.autoComplete, f = s === void 0 ? "tel" : s, c = e.smartCaret, i = c === void 0 ? !0 : c, l = e.metadata, m = l === void 0 ? t : l, h = Et(e, jt);
-    return /* @__PURE__ */ P.createElement(R, x({}, h, {
+    var r = e.type, o = r === void 0 ? "tel" : r, s = e.autoComplete, f = s === void 0 ? "tel" : s, c = e.smartCaret, u = c === void 0 ? !0 : c, l = e.metadata, y = l === void 0 ? t : l, C = St(e, Lt);
+    return /* @__PURE__ */ w.createElement(R, x({}, C, {
       type: o,
       autoComplete: f,
-      metadata: m,
+      metadata: y,
       ref: a,
-      Component: i ? dt : mt
+      Component: u ? dt : Ct
     }));
   }
-  return n = /* @__PURE__ */ P.forwardRef(n), n.propTypes = {
+  return n = /* @__PURE__ */ w.forwardRef(n), n.propTypes = {
     /**
      * HTML `<input/>` `type` attribute.
      */
-    type: p.string,
+    type: m.string,
     /**
      * HTML `<input/>` `autocomplete` attribute.
      */
-    autoComplete: p.string,
+    autoComplete: m.string,
     /**
      * By default, the caret position is being "intelligently" managed
      * while a user inputs a phone number.
@@ -323,60 +323,77 @@ function J(t) {
      * This is just an "escape hatch" for any possible caret position issues.
      */
     // Is `true` by default.
-    smartCaret: p.bool,
+    smartCaret: m.bool,
     /**
      * `libphonenumber-js` metadata.
      */
-    metadata: p.object
+    metadata: m.object
   }, n;
 }
-J();
-function K(t, n) {
+Q();
+function $(t, n) {
   var e = Array.prototype.slice.call(n);
-  return e.push(G), t.apply(this, e);
+  return e.push(K), t.apply(this, e);
 }
-J(G);
-function H() {
-  return K(F, arguments);
+Q(K);
+function z() {
+  return $(gt, arguments);
 }
-function St() {
-  return K(Ct, arguments);
+function G() {
+  return $(F, arguments);
 }
-const _t = lt(
+function xt() {
+  return $(ht, arguments);
+}
+const $t = st(
   ({
     placeholder: t = "000 - 000 - 000",
     disabled: n,
     ...e
   }, a) => {
-    const { activeCountry: r, isDisabled: o, value: s, onValueChange: f } = Nt(), c = (i) => {
-      if (!i) return "";
-      let l = "";
-      return r && St(r) && (l = H(r)), i.replace(`+${l}`, "");
+    const {
+      activeCountry: r,
+      isDisabled: o,
+      value: s,
+      onValueChange: f,
+      setActiveCountry: c
+    } = vt(), u = (l) => {
+      if (!l) return "";
+      const y = z(l);
+      if (y)
+        return y.nationalNumber;
+      let C = "";
+      return r && xt(r) && (C = G(r)), l.replace(`+${C}`, "");
     };
-    return /* @__PURE__ */ U(
-      st,
+    return O(() => {
+      if (s && !r) {
+        const l = z(s);
+        l && c(l.country);
+      }
+    }, [r, c, s]), /* @__PURE__ */ Y(
+      ft,
       {
         "data-slot": "phone-number-digit-field",
         className: "mds:has-disabled:opacity-50",
         children: [
-          /* @__PURE__ */ U("p", { className: gt("mds:body-extrasmall-book"), children: [
+          /* @__PURE__ */ Y("p", { className: Nt("mds:body-extrasmall-book"), children: [
             "(+",
-            H(r || "US"),
+            G(r || "US"),
             ")"
           ] }),
           /* @__PURE__ */ it(
-            ft,
+            ct,
             {
               ...e,
               disabled: n || o,
               placeholder: t,
-              value: c(s),
-              onChange: (i) => {
-                const l = ht({
-                  value: i.target.value,
+              value: u(s),
+              onChange: (l) => {
+                const y = bt({
+                  value: l.target.value,
                   activeCountry: r
                 });
-                f && (i.target.value = l.digit, f(l));
+                f && (l.target.value = y.digit, f(y));
               },
               ref: a
             }
@@ -386,7 +403,7 @@ const _t = lt(
     );
   }
 );
-_t.displayName = "PhoneNumberDigitField";
+$t.displayName = "PhoneNumberDigitField";
 export {
-  _t as PhoneNumberDigitField
+  $t as PhoneNumberDigitField
 };

package/dist/mainstack-design-system609.cjs

@@ -1,2 +1,2 @@
 'use client';
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),M=require("react"),a=require("./utils-sX9NhwD-.cjs"),j=require("./mainstack-design-system597.cjs"),f=require("./index-BgzojN8c.cjs"),v=require("./mainstack-design-system598.cjs");function p(n,i){return a.toDate(n,i?.in).getHours()}function k(n,i){return a.toDate(n,i?.in).getMinutes()}function g(n,i,m){const s=a.toDate(n,m?.in);return s.setHours(i),s}function A(n,i,m){const s=a.toDate(n,m?.in);return s.setMinutes(i),s}const P=M.forwardRef(({className:n,...i},m)=>{const{value:s,onValueChange:x,isDisabled:w}=j.useTimePickerContext(),b=M.useRef({Hours:{},Minutes:{},"AM/PM":{}}),l=M.useMemo(()=>{const e={Hours:"",Minutes:"","AM/PM":""};if(!s)return e;let d=p(s)%12;return d=d===0?12:d,e.Hours=d.toString().padStart(2,"0"),e.Minutes=k(s).toString().padStart(2,"0"),e["AM/PM"]=p(s)>=12?"PM":"AM",e},[s]);return M.useEffect(()=>{const e=b.current.Hours[l.Hours],d=b.current.Minutes[l.Minutes],t=b.current["AM/PM"][l["AM/PM"]];(e||d||t)&&(e?.scrollIntoView({block:"center",behavior:"smooth"}),d?.scrollIntoView({block:"center",behavior:"smooth"}),t?.scrollIntoView({block:"center",behavior:"smooth"}))},[l]),o.jsx("div",{"data-slot":"date-picker-calendar",className:a.cn("mds:@container mds:grid mds:grid-cols-3 mds:justify-items-center mds:gap-16 mds:p-16 mds:pb-0 ",n),ref:m,...i,children:Object.entries(v.timeOptionBreakdown).map(([e,d])=>o.jsxs("div",{className:"mds:flex mds:flex-col mds:gap-16",children:[o.jsx("h6",{className:a.cn("mds:body-extrasmall-regular","mds:text-secondary"),children:e}),o.jsxs(f.ScrollArea,{style:{"--scrollbar-size":"8px"},className:"mds:h-210 mds:overflow-hidden mds:rounded-4",children:[o.jsx(f.ScrollAreaViewport,{className:"mds:h-full mds:w-full mds:pr-10 mds:rounded-4",children:o.jsx("div",{className:"mds:flex mds:flex-col mds:gap-16",children:d.map(t=>o.jsx("button",{"data-selected":l[e]===t,className:a.cn("mds:body-extrasmall-book","mds:size-36 mds:basis-36 mds:shrink-0 mds:grow-0 mds:text-primary mds:rounded-full mds:cursor-pointer mds:hover:bg-interactive-secondary mds:data-[selected=true]:bg-interactive-primary mds:data-[selected=true]:text-neutral-50 mds:disabled:cursor-not-allowed mds:disabled:opacity-50"),disabled:w,onClick:()=>{let r=s||new Date;const u=e;let h=0;if(u==="AM/PM"){h=t==="PM"?12:0;let c=+l.Hours;c===12&&(c=0),r=g(r,c+h),x(r)}if(u==="Hours"){h=l["AM/PM"]==="PM"?12:0;let c=+t;c===12&&(c=0),r=g(r,c+h),x(r)}u==="Minutes"&&(r=A(r,+t),x(r))},ref:r=>{const u=e;r&&(b.current[u][t]=r)},children:t},t))})}),o.jsx(f.ScrollAreaScrollbar,{orientation:"vertical",className:"mds:flex mds:select-none mds:touch-none mds:p-2 mds:w-(--scrollbar-size) mds:flex-col mds:transition-all mds:duration-200 mds:ease-out mds:bg-surface-neutral-l1",children:o.jsx(f.ScrollAreaThumb,{className:a.cn(" mds:rounded-(--scrollbar-size) mds:bg-border-interactive-neutral-inverse-hover mds:relative","mds:before:content-[''] mds:before:absolute mds:before:top-1/2 mds:before:left-1/2  mds:before:-translate-1/2 mds:before:size-full mds:before:min-w-44 mds:before:min-h-44")})}),o.jsx(f.ScrollAreaCorner,{className:"mds:bg-border-interactive-neutral-inverse-hover"})]})]},e))})});P.displayName="TimePickerCalendar";exports.TimePickerCalendar=P;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),M=require("react"),a=require("./utils-B5hIDwfq.cjs"),j=require("./mainstack-design-system597.cjs"),f=require("./index-BgzojN8c.cjs"),v=require("./mainstack-design-system598.cjs");function p(n,i){return a.toDate(n,i?.in).getHours()}function k(n,i){return a.toDate(n,i?.in).getMinutes()}function g(n,i,m){const s=a.toDate(n,m?.in);return s.setHours(i),s}function A(n,i,m){const s=a.toDate(n,m?.in);return s.setMinutes(i),s}const P=M.forwardRef(({className:n,...i},m)=>{const{value:s,onValueChange:x,isDisabled:w}=j.useTimePickerContext(),b=M.useRef({Hours:{},Minutes:{},"AM/PM":{}}),l=M.useMemo(()=>{const e={Hours:"",Minutes:"","AM/PM":""};if(!s)return e;let d=p(s)%12;return d=d===0?12:d,e.Hours=d.toString().padStart(2,"0"),e.Minutes=k(s).toString().padStart(2,"0"),e["AM/PM"]=p(s)>=12?"PM":"AM",e},[s]);return M.useEffect(()=>{const e=b.current.Hours[l.Hours],d=b.current.Minutes[l.Minutes],t=b.current["AM/PM"][l["AM/PM"]];(e||d||t)&&(e?.scrollIntoView({block:"center",behavior:"smooth"}),d?.scrollIntoView({block:"center",behavior:"smooth"}),t?.scrollIntoView({block:"center",behavior:"smooth"}))},[l]),o.jsx("div",{"data-slot":"date-picker-calendar",className:a.cn("mds:@container mds:grid mds:grid-cols-3 mds:justify-items-center mds:gap-16 mds:p-16 mds:pb-0 ",n),ref:m,...i,children:Object.entries(v.timeOptionBreakdown).map(([e,d])=>o.jsxs("div",{className:"mds:flex mds:flex-col mds:gap-16",children:[o.jsx("h6",{className:a.cn("mds:body-extrasmall-regular","mds:text-secondary"),children:e}),o.jsxs(f.ScrollArea,{style:{"--scrollbar-size":"8px"},className:"mds:h-210 mds:overflow-hidden mds:rounded-4",children:[o.jsx(f.ScrollAreaViewport,{className:"mds:h-full mds:w-full mds:pr-10 mds:rounded-4",children:o.jsx("div",{className:"mds:flex mds:flex-col mds:gap-16",children:d.map(t=>o.jsx("button",{"data-selected":l[e]===t,className:a.cn("mds:body-extrasmall-book","mds:size-36 mds:basis-36 mds:shrink-0 mds:grow-0 mds:text-primary mds:rounded-full mds:cursor-pointer mds:hover:bg-interactive-secondary mds:data-[selected=true]:bg-interactive-primary mds:data-[selected=true]:text-neutral-50 mds:disabled:cursor-not-allowed mds:disabled:opacity-50"),disabled:w,onClick:()=>{let r=s||new Date;const u=e;let h=0;if(u==="AM/PM"){h=t==="PM"?12:0;let c=+l.Hours;c===12&&(c=0),r=g(r,c+h),x(r)}if(u==="Hours"){h=l["AM/PM"]==="PM"?12:0;let c=+t;c===12&&(c=0),r=g(r,c+h),x(r)}u==="Minutes"&&(r=A(r,+t),x(r))},ref:r=>{const u=e;r&&(b.current[u][t]=r)},children:t},t))})}),o.jsx(f.ScrollAreaScrollbar,{orientation:"vertical",className:"mds:flex mds:select-none mds:touch-none mds:p-2 mds:w-(--scrollbar-size) mds:flex-col mds:transition-all mds:duration-200 mds:ease-out mds:bg-surface-neutral-l1",children:o.jsx(f.ScrollAreaThumb,{className:a.cn(" mds:rounded-(--scrollbar-size) mds:bg-border-interactive-neutral-inverse-hover mds:relative","mds:before:content-[''] mds:before:absolute mds:before:top-1/2 mds:before:left-1/2  mds:before:-translate-1/2 mds:before:size-full mds:before:min-w-44 mds:before:min-h-44")})}),o.jsx(f.ScrollAreaCorner,{className:"mds:bg-border-interactive-neutral-inverse-hover"})]})]},e))})});P.displayName="TimePickerCalendar";exports.TimePickerCalendar=P;

package/dist/mainstack-design-system609.js

@@ -1,9 +1,9 @@
 'use client';
 import { jsx as a, jsxs as M } from "react/jsx-runtime";
 import { forwardRef as P, useRef as v, useMemo as A, useEffect as H } from "react";
-import { x as h, c as b } from "./utils-BuJ7DVbu.js";
+import { y as h, c as b } from "./utils-DQg2eeoE.js";
 import { useTimePickerContext as N } from "./mainstack-design-system597.js";
-import { S, a as k, b as V, c as y, d as C } from "./index-CLUgda6x.js";
+import { S, a as k, b as y, c as V, d as C } from "./index-CLUgda6x.js";
 import { timeOptionBreakdown as j } from "./mainstack-design-system598.js";
 function g(o, n) {
   return h(o, n?.in).getHours();
@@ -11,7 +11,7 @@ function g(o, n) {
 function z(o, n) {
   return h(o, n?.in).getMinutes();
 }
-function x(o, n, m) {
+function w(o, n, m) {
   const s = h(o, m?.in);
   return s.setHours(n), s;
 }
@@ -24,7 +24,7 @@ const D = P(
     const {
       value: s,
       onValueChange: p,
-      isDisabled: w
+      isDisabled: x
     } = N(), u = v({
       Hours: {},
       Minutes: {},
@@ -79,7 +79,7 @@ const D = P(
                       "mds:body-extrasmall-book",
                       "mds:size-36 mds:basis-36 mds:shrink-0 mds:grow-0 mds:text-primary mds:rounded-full mds:cursor-pointer mds:hover:bg-interactive-secondary mds:data-[selected=true]:bg-interactive-primary mds:data-[selected=true]:text-neutral-50 mds:disabled:cursor-not-allowed mds:disabled:opacity-50"
                     ),
-                    disabled: w,
+                    disabled: x,
                     onClick: () => {
                       let r = s || /* @__PURE__ */ new Date();
                       const c = e;
@@ -87,12 +87,12 @@ const D = P(
                       if (c === "AM/PM") {
                         f = t === "PM" ? 12 : 0;
                         let l = +i.Hours;
-                        l === 12 && (l = 0), r = x(r, l + f), p(r);
+                        l === 12 && (l = 0), r = w(r, l + f), p(r);
                       }
                       if (c === "Hours") {
                         f = i["AM/PM"] === "PM" ? 12 : 0;
                         let l = +t;
-                        l === 12 && (l = 0), r = x(r, l + f), p(r);
+                        l === 12 && (l = 0), r = w(r, l + f), p(r);
                       }
                       c === "Minutes" && (r = O(r, +t), p(r));
                     },
@@ -105,12 +105,12 @@ const D = P(
                   t
                 )) }) }),
                 /* @__PURE__ */ a(
-                  V,
+                  y,
                   {
                     orientation: "vertical",
                     className: "mds:flex mds:select-none mds:touch-none mds:p-2 mds:w-(--scrollbar-size) mds:flex-col mds:transition-all mds:duration-200 mds:ease-out mds:bg-surface-neutral-l1",
                     children: /* @__PURE__ */ a(
-                      y,
+                      V,
                       {
                         className: b(
                           " mds:rounded-(--scrollbar-size) mds:bg-border-interactive-neutral-inverse-hover mds:relative",