rk-designsystem 1.3.1 → 1.3.2

package/dist/components/Carousel/index.js

@@ -25,7 +25,7 @@ const ae = ({
     const r = "rk-carousel-inline-styles";
     if (typeof document > "u" || document.getElementById(r)) return;
     const o = ie(a), i = document.createElement("style");
-    i.id = r, i.textContent = o, document.head.appendChild(i);
+    i.id = r, i.textContent = o, document.head.prepend(i);
   }, []);
   const R = {
     loop: !0,
@@ -42,13 +42,13 @@ const ae = ({
       })
     );
   }, [D]);
-  const C = h((r) => {
+  const N = h((r) => {
     I((o) => {
       if (o[r]) return o;
       const i = [...o];
       return i[r] = !0, i;
     });
-  }, []), N = Q(() => b * 1e3, [b]), c = h(() => {
+  }, []), C = Q(() => b * 1e3, [b]), c = h(() => {
     t && O(t.selectedScrollSnap());
   }, [t]), H = h((r) => t && t.scrollTo(r), [t]), K = h(() => t && t.scrollPrev(), [t]), U = h(() => t && t.scrollNext(), [t]);
   p(() => {
@@ -64,11 +64,11 @@ const ae = ({
     if (!j || !t || !e || e.length <= 1) return;
     const r = window.setInterval(() => {
       t.canScrollNext() && t.scrollNext();
-    }, N);
+    }, C);
     return () => {
       window.clearInterval(r);
     };
-  }, [j, N, t, e]);
+  }, [j, C, t, e]);
   const E = Math.max(1, $), G = `${100 / E}%`, m = y / 2;
   return /* @__PURE__ */ u(
     "div",
@@ -117,9 +117,9 @@ const ae = ({
                       alt: r.alt,
                       loading: o < E ? "eager" : "lazy",
                       crossOrigin: "anonymous",
-                      onLoad: () => C(o),
+                      onLoad: () => N(o),
                       onError: (i) => {
-                        i.target.style.display = "none", C(o);
+                        i.target.style.display = "none", N(o);
                       }
                     }
                   )

package/dist/components/DateInput/index.js

@@ -1,24 +1,24 @@
 "use client";
 import { jsxs as S, jsx as g } from "react/jsx-runtime";
 import pe, { forwardRef as be, useEffect as O, useRef as P, useCallback as k, useState as me, useId as ve } from "react";
-import { parse as ge, isValid as he } from "date-fns";
+import { parse as ge, isValid as xe } from "date-fns";
 import a from "./styles.module.css.js";
-import { useLanguageOptional as xe } from "../../context/LanguageContext.js";
-const h = (e) => {
-  const n = e.slice(0, 2), x = e.slice(2, 4), o = e.slice(4, 8);
-  return e.length > 4 ? `${n}.${x}.${o}` : e.length > 2 ? `${n}.${x}` : e.length > 0 ? n : "";
+import { useLanguageOptional as he } from "../../context/LanguageContext.js";
+const x = (e) => {
+  const n = e.slice(0, 2), h = e.slice(2, 4), o = e.slice(4, 8);
+  return e.length > 4 ? `${n}.${h}.${o}` : e.length > 2 ? `${n}.${h}` : e.length > 0 ? n : "";
 }, N = (e) => (e || "").replace(/\D/g, "").slice(0, 8), q = (e) => {
   if (e.length < 8) return null;
-  const n = ge(h(e), "dd.MM.yyyy", /* @__PURE__ */ new Date());
-  return he(n);
+  const n = ge(x(e), "dd.MM.yyyy", /* @__PURE__ */ new Date());
+  return xe(n);
 }, ye = be(
   (e, n) => {
-    const { t: x } = xe();
+    const { t: h } = he();
     O(() => {
-      const t = "rk-dateinput-inline-styles";
-      if (typeof document > "u" || document.getElementById(t)) return;
-      const r = Ie(a), m = document.createElement("style");
-      m.id = t, m.textContent = r, document.head.appendChild(m);
+      const r = "rk-dateinput-inline-styles";
+      if (typeof document > "u" || document.getElementById(r)) return;
+      const t = Ie(a), m = document.createElement("style");
+      m.id = r, m.textContent = t, document.head.prepend(m);
     }, []);
     const {
       label: o,
@@ -46,44 +46,44 @@ const h = (e) => {
       description: C,
       error: u,
       "data-color": ee,
-      "data-size": te,
-      ...re
+      "data-size": re,
+      ...te
     } = e, B = y !== void 0, f = P(null);
     pe.useImperativeHandle(
       n,
       () => f.current
     );
     const R = P(null), i = k(
-      (t, r) => {
-        t !== R.current && (R.current = t, $ == null || $(t, r));
+      (r, t) => {
+        r !== R.current && (R.current = r, $ == null || $(r, t));
       },
       [$]
     ), D = k(
-      (t) => h(N(t)),
+      (r) => x(N(r)),
       []
     ), [p, E] = me(
       () => D(y ?? J)
     );
     O(() => {
       if (B) {
-        const t = D(y);
-        t !== p && (E(t), f.current && f.current.value !== t && (f.current.value = t));
+        const r = D(y);
+        r !== p && (E(r), f.current && f.current.value !== r && (f.current.value = r));
       }
     }, [y, B, p, D]);
     const oe = k(
-      (t) => {
-        const r = t.target, m = p, d = N(r.value), s = h(d);
+      (r) => {
+        const t = r.target, m = p, s = N(t.value), d = x(s);
         let l = 0;
-        const v = d.length;
-        v <= 2 ? l = v : v <= 4 ? l = v + 1 : l = v + 2, l = Math.min(l, s.length), E(s), r.value = s, r.setSelectionRange(l, l), (s !== m || B) && (I == null || I(t, s));
-        const fe = q(d);
-        (d.length === 0 || d.length === 8) && i(d.length === 0 ? null : fe, s);
+        const v = s.length;
+        v <= 2 ? l = v : v <= 4 ? l = v + 1 : l = v + 2, l = Math.min(l, d.length), E(d), t.value = d, t.setSelectionRange(l, l), (d !== m || B) && (I == null || I(r, d));
+        const fe = q(s);
+        (s.length === 0 || s.length === 8) && i(s.length === 0 ? null : fe, d);
       },
       [p, B, I, i]
     ), ae = k(
-      (t) => {
-        const r = N(t.target.value);
-        r.length === 0 ? i(null, "") : r.length < 8 ? i(!1, h(r)) : i(q(r), h(r)), z == null || z(t);
+      (r) => {
+        const t = N(r.target.value);
+        t.length === 0 ? i(null, "") : t.length < 8 ? i(!1, x(t)) : i(q(t), x(t)), z == null || z(r);
       },
       [z, i]
     ), ne = [a.fieldset, A].filter(Boolean).join(" "), le = [
@@ -92,12 +92,12 @@ const h = (e) => {
       u ? a.inputWrapperError : ""
     ].filter(Boolean).join(" "), ie = [
       G
-    ].filter(Boolean).join(" "), de = [
+    ].filter(Boolean).join(" "), se = [
       a.suffixButton,
       c ? a.suffixButtonInteractive : ""
     ].filter(Boolean).join(" ");
     !o && !j && !W && console.warn("Advarsel: DateInput-komponenten bør ha label, aria-label, eller aria-labelledby for tilgjengelighet.");
-    const se = ve(), b = T ?? `dateinput${se}`, F = o && typeof o == "string" ? `${b}-label` : void 0, L = C ? `${b}-desc` : void 0, M = u ? `${b}-err` : void 0, ce = [L, M].filter(Boolean).join(" ") || void 0, ue = W ?? F;
+    const de = ve(), b = T ?? `dateinput${de}`, F = o && typeof o == "string" ? `${b}-label` : void 0, L = C ? `${b}-desc` : void 0, M = u ? `${b}-err` : void 0, ce = [L, M].filter(Boolean).join(" ") || void 0, ue = W ?? F;
     return (
       // --- Bruk data-color og data-size på den ytre wrapperen ---
       /* @__PURE__ */ S(
@@ -105,7 +105,7 @@ const h = (e) => {
         {
           className: ne,
           "data-color": ee,
-          "data-size": te,
+          "data-size": re,
           children: [
             o && typeof o == "string" ? /* @__PURE__ */ g("label", { id: F, htmlFor: b, children: o }) : o,
             C && /* @__PURE__ */ g("p", { id: L, className: a.description, children: C }),
@@ -135,19 +135,19 @@ const h = (e) => {
                   "aria-describedby": ce,
                   "aria-invalid": !!u,
                   className: ie,
-                  ...re
+                  ...te
                 }
               ),
               V && /* @__PURE__ */ g(
                 "button",
                 {
                   type: "button",
-                  className: de,
+                  className: se,
                   onClick: w ? void 0 : c,
                   tabIndex: c && !w ? 0 : -1,
                   "aria-hidden": !c,
                   disabled: w,
-                  "aria-label": c ? x("dateInput.openDatePicker") : void 0,
+                  "aria-label": c ? h("dateInput.openDatePicker") : void 0,
                   children: V
                 }
               )

package/dist/components/DatePicker/index.js

@@ -1,141 +1,141 @@
 "use client";
 import { jsxs as y, jsx as i } from "react/jsx-runtime";
-import { useEffect as N, useState as B, useRef as R, useMemo as D, useCallback as g, useId as ee } from "react";
+import { useEffect as N, useState as B, useRef as R, useMemo as D, useCallback as b, useId as te } from "react";
 import { Button as A } from "@digdir/designsystemet-react";
-import { startOfMonth as u, isValid as w, isSameMonth as C, format as f, startOfWeek as I, addDays as h, subMonths as S, addMonths as W, endOfWeek as te, isSameDay as F, isToday as re, eachDayOfInterval as oe, getDaysInMonth as ae, setDate as ne } from "date-fns";
-import { nb as c } from "date-fns/locale";
-import { ChevronLeftIcon as ie } from "../../assets/images/ChevronLeftIcon.js";
-import { ChevronRightIcon as se } from "../../assets/images/ChevronRightIcon.js";
+import { startOfMonth as f, isValid as w, isSameMonth as C, format as u, startOfWeek as I, addDays as g, subMonths as S, addMonths as W, endOfWeek as L, isSameDay as F, isToday as re, endOfMonth as oe, eachDayOfInterval as ae, getDaysInMonth as ne, setDate as ie } from "date-fns";
+import { nb as d } from "date-fns/locale";
+import { ChevronLeftIcon as se } from "../../assets/images/ChevronLeftIcon.js";
+import { ChevronRightIcon as de } from "../../assets/images/ChevronRightIcon.js";
 import n from "./styles.module.css.js";
-import { useLanguageOptional as de } from "../../context/LanguageContext.js";
-const le = (r) => {
-  const o = u(r), s = I(o, { locale: c }), z = h(s, 41);
-  return oe({ start: s, end: z });
-}, H = (r) => r && r.charAt(0).toUpperCase() + r.slice(1), v = (r, o) => {
-  const s = Math.min(r.getDate(), ae(o));
-  return ne(u(o), s);
-}, ce = ({
-  initialDate: r = /* @__PURE__ */ new Date(),
+import { useLanguageOptional as le } from "../../context/LanguageContext.js";
+const ce = (t) => {
+  const o = f(t), l = I(o, { locale: d }), z = L(oe(t), { locale: d });
+  return ae({ start: l, end: z });
+}, H = (t) => t && t.charAt(0).toUpperCase() + t.slice(1), v = (t, o) => {
+  const l = Math.min(t.getDate(), ne(o));
+  return ie(f(o), l);
+}, ue = ({
+  initialDate: t = /* @__PURE__ */ new Date(),
   selectedDate: o = null,
-  onDateSelect: s,
+  onDateSelect: l,
   "data-color": z,
-  "data-size": L
+  "data-size": Y
 }) => {
-  const { t: E } = de();
+  const { t: E } = le();
   N(() => {
-    const t = "rk-datepicker-inline-styles";
-    if (typeof document > "u" || document.getElementById(t)) return;
+    const r = "rk-datepicker-inline-styles";
+    if (typeof document > "u" || document.getElementById(r)) return;
     const e = fe(n), a = document.createElement("style");
-    a.id = t, a.textContent = e, document.head.appendChild(a);
+    a.id = r, a.textContent = e, document.head.prepend(a);
   }, []);
-  const [l, x] = B(
-    u(o && w(o) ? o : r)
-  ), [p, m] = B(
-    () => o && w(o) ? o : r
+  const [c, x] = B(
+    f(o && w(o) ? o : t)
+  ), [h, p] = B(
+    () => o && w(o) ? o : t
   ), P = R(null), $ = R(!1);
   N(() => {
     if (o && w(o)) {
-      m(o);
-      const t = u(o);
+      p(o);
+      const r = f(o);
       x(
-        (e) => C(t, e) ? e : t
+        (e) => C(r, e) ? e : r
       );
     }
   }, [o]), N(() => {
     var e;
     if (!$.current) return;
     $.current = !1;
-    const t = (e = P.current) == null ? void 0 : e.querySelector(
-      `[data-date="${f(p, "yyyy-MM-dd")}"]`
+    const r = (e = P.current) == null ? void 0 : e.querySelector(
+      `[data-date="${u(h, "yyyy-MM-dd")}"]`
     );
-    t == null || t.focus();
-  }, [p, l]);
+    r == null || r.focus();
+  }, [h, c]);
   const M = D(
-    () => le(l),
-    [l]
-  ), Y = D(() => {
-    const t = [];
+    () => ce(c),
+    [c]
+  ), U = D(() => {
+    const r = [];
     for (let e = 0; e < M.length; e += 7)
-      t.push(M.slice(e, e + 7));
-    return t;
-  }, [M]), U = D(() => {
-    const t = I(/* @__PURE__ */ new Date(), { locale: c });
+      r.push(M.slice(e, e + 7));
+    return r;
+  }, [M]), K = D(() => {
+    const r = I(/* @__PURE__ */ new Date(), { locale: d });
     return Array.from({ length: 7 }).map((e, a) => {
-      const b = f(h(t, a), "EEEEEE", { locale: c });
-      return H(b);
+      const m = u(g(r, a), "EEEEEE", { locale: d });
+      return H(m);
     });
-  }, []), K = g(() => {
-    x((t) => {
-      const e = u(S(t, 1));
-      return m((a) => v(a, e)), e;
+  }, []), T = b(() => {
+    x((r) => {
+      const e = f(S(r, 1));
+      return p((a) => v(a, e)), e;
     });
-  }, []), T = g(() => {
-    x((t) => {
-      const e = u(W(t, 1));
-      return m((a) => v(a, e)), e;
+  }, []), q = b(() => {
+    x((r) => {
+      const e = f(W(r, 1));
+      return p((a) => v(a, e)), e;
     });
-  }, []), k = g(
-    (t) => {
-      m(t), s == null || s(t);
+  }, []), k = b(
+    (r) => {
+      p(r), l == null || l(r);
     },
-    [s]
-  ), d = g((t) => {
-    $.current = !0, m(t), x(
-      (e) => C(t, e) ? e : u(t)
+    [l]
+  ), s = b((r) => {
+    $.current = !0, p(r), x(
+      (e) => C(r, e) ? e : f(r)
     );
-  }, []), q = g(
-    (t, e) => {
-      switch (t.key) {
+  }, []), V = b(
+    (r, e) => {
+      switch (r.key) {
         case "Enter":
         case " ":
-          t.preventDefault(), k(e);
+          r.preventDefault(), k(e);
           return;
         case "ArrowLeft":
-          t.preventDefault(), d(h(e, -1));
+          r.preventDefault(), s(g(e, -1));
           return;
         case "ArrowRight":
-          t.preventDefault(), d(h(e, 1));
+          r.preventDefault(), s(g(e, 1));
           return;
         case "ArrowUp":
-          t.preventDefault(), d(h(e, -7));
+          r.preventDefault(), s(g(e, -7));
           return;
         case "ArrowDown":
-          t.preventDefault(), d(h(e, 7));
+          r.preventDefault(), s(g(e, 7));
           return;
         case "Home":
-          t.preventDefault(), d(I(e, { locale: c }));
+          r.preventDefault(), s(I(e, { locale: d }));
           return;
         case "End":
-          t.preventDefault(), d(te(e, { locale: c }));
+          r.preventDefault(), s(L(e, { locale: d }));
           return;
         case "PageUp":
-          t.preventDefault(), d(v(e, S(e, 1)));
+          r.preventDefault(), s(v(e, S(e, 1)));
           return;
         case "PageDown":
-          t.preventDefault(), d(v(e, W(e, 1)));
+          r.preventDefault(), s(v(e, W(e, 1)));
           return;
       }
     },
-    [k, d]
-  ), V = f(l, "MMMM", { locale: c }), _ = f(l, "yyyy", { locale: c }), G = `${H(V)} ${_}`, O = ee(), J = C(p, l) ? p : v(p, l);
+    [k, s]
+  ), _ = u(c, "MMMM", { locale: d }), G = u(c, "yyyy", { locale: d }), J = `${H(_)} ${G}`, O = te(), Q = C(h, c) ? h : v(h, c);
   return /* @__PURE__ */ y(
     "div",
     {
       className: n.calendarContainer,
       "data-color": z,
-      "data-size": L,
+      "data-size": Y,
       children: [
         /* @__PURE__ */ y("div", { className: n.calendarHeader, children: [
-          /* @__PURE__ */ i("span", { className: n.monthYear, id: O, "aria-live": "polite", children: G }),
+          /* @__PURE__ */ i("span", { className: n.monthYear, id: O, "aria-live": "polite", children: J }),
           /* @__PURE__ */ y("div", { className: n.navigationButtons, children: [
             /* @__PURE__ */ i(
               A,
               {
                 variant: "tertiary",
                 icon: !0,
-                onClick: K,
+                onClick: T,
                 "aria-label": E("datePicker.previousMonth"),
-                children: /* @__PURE__ */ i(ie, {})
+                children: /* @__PURE__ */ i(se, {})
               }
             ),
             /* @__PURE__ */ i(
@@ -143,49 +143,49 @@ const le = (r) => {
               {
                 variant: "tertiary",
                 icon: !0,
-                onClick: T,
+                onClick: q,
                 "aria-label": E("datePicker.nextMonth"),
-                children: /* @__PURE__ */ i(se, {})
+                children: /* @__PURE__ */ i(de, {})
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ y("div", { role: "grid", "aria-labelledby": O, className: n.gridWrapper, ref: P, children: [
-          /* @__PURE__ */ i("div", { role: "row", className: n.gridRow, children: U.map((t) => /* @__PURE__ */ i("div", { role: "columnheader", className: n.dayNameCell, children: t }, t)) }),
-          Y.map((t) => /* @__PURE__ */ i("div", { role: "row", className: n.gridRow, children: t.map((e) => {
-            const a = C(e, l), b = o && w(o) && F(e, o), j = re(e), Q = a && F(e, J), X = [
+          /* @__PURE__ */ i("div", { role: "row", className: n.gridRow, children: K.map((r) => /* @__PURE__ */ i("div", { role: "columnheader", className: n.dayNameCell, children: r }, r)) }),
+          U.map((r) => /* @__PURE__ */ i("div", { role: "row", className: n.gridRow, children: r.map((e) => {
+            const a = C(e, c), m = o && w(o) && F(e, o), j = re(e), X = a && F(e, Q), Z = [
               n.dateCell,
               a ? "" : n.otherMonth,
-              b ? n.selectedDate : "",
-              j && !b ? n.todayDate : ""
+              m ? n.selectedDate : "",
+              j && !m ? n.todayDate : ""
             ].filter(Boolean).join(" ");
             return /* @__PURE__ */ i(
               "div",
               {
                 role: "gridcell",
-                className: X,
-                "data-date": f(e, "yyyy-MM-dd"),
+                className: Z,
+                "data-date": u(e, "yyyy-MM-dd"),
                 onClick: a ? () => k(e) : void 0,
-                onKeyDown: a ? (Z) => q(Z, e) : void 0,
-                tabIndex: a ? Q ? 0 : -1 : void 0,
-                "aria-selected": a ? !!b : void 0,
+                onKeyDown: a ? (ee) => V(ee, e) : void 0,
+                tabIndex: a ? X ? 0 : -1 : void 0,
+                "aria-selected": a ? !!m : void 0,
                 "aria-disabled": !a || void 0,
                 "aria-current": j ? "date" : void 0,
-                "aria-label": f(e, "PPP", { locale: c }),
-                children: /* @__PURE__ */ i("span", { className: n.dateNumberContainer, children: f(e, "d") })
+                "aria-label": u(e, "PPP", { locale: d }),
+                children: /* @__PURE__ */ i("span", { className: n.dateNumberContainer, children: u(e, "d") })
               },
               e.toISOString()
             );
-          }) }, t[0].toISOString()))
+          }) }, r[0].toISOString()))
         ] })
       ]
     }
   );
 };
-ce.displayName = "DatePicker";
-function fe(r) {
+ue.displayName = "DatePicker";
+function fe(t) {
   return `
-.${r.calendarContainer} {
+.${t.calendarContainer} {
   display: inline-flex;
   padding: var(--ds-size-8, 32px);
   flex-direction: column;
@@ -199,13 +199,13 @@ function fe(r) {
   max-width: 100%;
   box-sizing: border-box;
 }
-.${r.calendarHeader} {
+.${t.calendarHeader} {
   display: flex;
   justify-content: space-between;
   align-items: center;
   align-self: stretch;
 }
-.${r.monthYear} {
+.${t.monthYear} {
   color: var(--ds-color-text-default, #2b2b2b);
   font-family: var(--ds-font-family, sans-serif);
   font-size: var(--ds-heading-sm-font-size, 1.5rem);
@@ -213,24 +213,24 @@ function fe(r) {
   line-height: var(--ds-heading-sm-line-height, 1.3);
   margin: 0;
 }
-.${r.navigationButtons} {
+.${t.navigationButtons} {
   display: flex;
   gap: var(--ds-size-1, 4px);
 }
-.${r.navigationButtons} > button:disabled svg {
+.${t.navigationButtons} > button:disabled svg {
   opacity: var(--ds-opacity-disabled, 0.3);
 }
-.${r.gridWrapper} {
+.${t.gridWrapper} {
   width: 100%;
   overflow: hidden;
 }
-.${r.gridRow} {
+.${t.gridRow} {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   width: 100%;
   text-align: center;
 }
-.${r.dayNameCell} {
+.${t.dayNameCell} {
   display: flex;
   padding: var(--ds-size-2, 8px);
   flex-direction: column;
@@ -245,7 +245,7 @@ function fe(r) {
   box-sizing: border-box;
   min-width: 0;
 }
-.${r.dateCell} {
+.${t.dateCell} {
   display: flex;
   padding: var(--ds-size-5, 22px);
   flex-direction: column;
@@ -265,13 +265,13 @@ function fe(r) {
   user-select: none;
   min-width: 0;
 }
-.${r.dateCell}:focus-visible {
+.${t.dateCell}:focus-visible {
   outline: var(--ds-border-width-focus, 3px) solid var(--ds-color-focus-outer, #2b2b2b);
   outline-offset: calc(-1 * var(--ds-border-width-focus, 3px));
   position: relative;
   z-index: 2;
 }
-.${r.dateNumberContainer} {
+.${t.dateNumberContainer} {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -283,69 +283,72 @@ function fe(r) {
   box-sizing: border-box;
   background-color: transparent;
 }
-.${r.dateCell}:hover:not(.${r.otherMonth}):not(.${r.disabled}) {
+.${t.dateCell}:hover:not(.${t.otherMonth}):not(.${t.disabled}) {
   background-color: var(--ds-color-surface-hover, #eee);
   position: relative;
   z-index: 1;
 }
-.${r.otherMonth} {
-  color: var(--ds-color-text-subtle, #aaa);
+.${t.otherMonth} {
+  /* Neutral-scoped tokens on purpose: under the red color scope the
+     scope-relative tints turn pink, which emphasized the outside days
+     instead of muting them. */
+  color: var(--ds-color-neutral-text-subtle, #aaa);
   cursor: default;
   pointer-events: none;
-  background-color: var(--ds-color-surface-tinted, #e8e8e8);
-  border: var(--ds-border-width-default, 1px) solid var(--ds-color-border-subtle, #bcbcbc);
+  background-color: var(--ds-color-neutral-surface-tinted, #e8e8e8);
+  border: var(--ds-border-width-default, 1px) solid var(--ds-color-neutral-border-subtle, #bcbcbc);
   margin: -0.5px;
 }
-.${r.selectedDate} {
+.${t.selectedDate} {
   background-color: var(--ds-color-base-default, #C30000);
   border-color: var(--ds-color-base-default, #C30000);
   color: var(--ds-color-base-contrast-default, #fff);
   position: relative;
   z-index: 1;
 }
-.${r.selectedDate} .${r.dateNumberContainer} {
+.${t.selectedDate} .${t.dateNumberContainer} {
   color: var(--ds-color-base-contrast-default, #fff);
   font-weight: var(--ds-font-weight-semibold, 600);
   background-color: transparent;
 }
-.${r.todayDate} .${r.dateNumberContainer} {
+.${t.todayDate} .${t.dateNumberContainer} {
   font-weight: var(--ds-font-weight-semibold, 600);
 }
 @media (max-width: 480px) {
-  .${r.calendarContainer} {
+  .${t.calendarContainer} {
     padding: var(--ds-size-4, 16px);
     gap: var(--ds-size-2, 8px);
     width: 100%;
   }
-  .${r.monthYear} {
+  .${t.monthYear} {
     font-size: var(--ds-heading-xs-font-size, 1.125rem);
   }
-  .${r.dayNameCell} {
+  .${t.dayNameCell} {
     padding: var(--ds-size-1, 4px);
     font-size: var(--ds-font-size-1, 12px);
   }
-  .${r.dateCell} {
+  .${t.dateCell} {
     padding: var(--ds-size-2, 8px);
     font-size: var(--ds-font-size-1, 12px);
   }
-  .${r.dateNumberContainer} {
+  .${t.dateNumberContainer} {
     width: 20px;
     height: 20px;
   }
 }
 @media (max-width: 360px) {
-  .${r.calendarContainer} {
+  .${t.calendarContainer} {
     padding: var(--ds-size-2, 8px);
   }
-  .${r.dayNameCell} {
+  .${t.dayNameCell} {
     padding: 2px;
     font-size: 10px;
   }
-  .${r.dateCell} {
+  .${t.dateCell} {
     padding: var(--ds-size-1, 4px);
     font-size: 11px;
   }
-  .${r.dateNumberContainer} {
+  .${t.dateNumberContainer} {
     width: 16px;
     height: 16px;
   }
@@ -353,5 +356,5 @@ function fe(r) {
 `;
 }
 export {
-  ce as DatePicker
+  ue as DatePicker
 };