@luscii-healthtech/web-ui 35.9.0 → 35.9.1

package/dist/index.development.js

@@ -6323,7 +6323,7 @@ const getLocalizedWeekdays = (args) => {
     // sunday
   ];
   const formatDayToEnglishName = (date) => new Intl.DateTimeFormat("en-US", { weekday: "long" }).format(date);
-  const formatDateToLocalizedWeekdayLetter = (date) => new Intl.DateTimeFormat(args.locale, { weekday: "narrow" }).format(date);
+  const formatDateToLocalizedWeekdayLetters = (date) => new Intl.DateTimeFormat(args.locale, { weekday: "short" }).format(date);
   const formatDateToLocalizedFullWeekdayName = (date) => new Intl.DateTimeFormat(args.locale, { weekday: "long" }).format(date);
   return dates.map((date) => ({
     /**
@@ -6338,7 +6338,7 @@ const getLocalizedWeekdays = (args) => {
     /**
      * The localized single letter indicator of the weekday. We'll use this for the visual indicator.
      */
-    localizedWeekdayLetter: formatDateToLocalizedWeekdayLetter(date)
+    localizedWeekdayLetter: formatDateToLocalizedWeekdayLetters(date)
   }));
 };
 const oldApiDayToIndexMapping = {
@@ -6390,17 +6390,22 @@ const WeekdaysPicker = (props) => {
   } = props, rest = __rest(props, ["locale", "selectedOptions", "onChange", "className", "id", "children", "defaultValue", "dir"]);
   const options = getLocalizedWeekdays({ locale });
   return React__namespace.default.createElement(ToggleGroup__namespace.Root, Object.assign({}, rest, { id, className: classNames__default.default("ui-flex ui-gap-2", className), type: "multiple", value: selectedOptions, onValueChange: onChange }), options.map(({ englishName, localizedFullWeekdayName, localizedWeekdayLetter }) => {
-    return React__namespace.default.createElement(ToggleGroup__namespace.Item, { key: englishName, value: englishName, "aria-label": localizedFullWeekdayName, className: classNames__default.default(
-      "ui-transition-[color,background_color,border-color,transform] ui-duration-150 ui-ease-out",
-      "ui-flex ui-h-11 ui-w-11 ui-select-none ui-items-center ui-justify-center ui-rounded-full",
-      /**
-       * Only keyboard users will see this. Black is properly visible
-       * on both selected/unselected states.
-       **/
-      "ui-outline-1 ui-outline-black",
-      "ui-bg-slate-200 hover:ui-bg-slate-300 active:ui-scale-95",
-      "data-[state=on]:ui-bg-primary data-[state=on]:ui-text-white data-[state=on]:hover:ui-bg-primary-dark"
-    ) }, localizedWeekdayLetter);
+    return React__namespace.default.createElement(
+      ToggleGroup__namespace.Item,
+      { key: englishName, value: englishName, "aria-label": localizedFullWeekdayName, className: classNames__default.default(
+        "ui-transition-[color,background_color,border-color,transform] ui-duration-150 ui-ease-out",
+        "ui-flex ui-select-none ui-items-center ui-justify-center ui-p-xxs",
+        "ui-border ui-border-neutral-interactive ui-radius-xxxxs",
+        "hover:ui-border-on-positive",
+        /**
+         * Only keyboard users will see this. Black is properly visible
+         * on both selected/unselected states.
+         **/
+        "ui-outline-1 ui-outline-black",
+        "data-[state=on]:ui-border-positive-border data-[state=on]:ui-bg-green-50"
+      ) },
+      React__namespace.default.createElement(Text, { variant: "base" }, localizedWeekdayLetter)
+    );
   }));
 };
 WeekdaysPicker.weekdayNameToIndex = weekdayNameToIndex;