@wistia/ui 0.13.11 → 0.13.12-beta.4daf4b25.f2049e2

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.11
+ * @license @wistia/ui v0.13.12-beta.4daf4b25.f2049e2
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1676,6 +1676,7 @@ var minutesInHour = 60;
 var halfAnHourInMinutes = 30;
 var hoursInDay = 24;
 var milisecondsInSecond = 1e3;
+var daysInWeek = 7;
 var millisecondsInDay = hoursInDay * minutesInHour * secondsInMinute * milisecondsInSecond;
 
 // src/helpers/dateTime/buildTimeDuration.ts
@@ -1819,7 +1820,7 @@ var dateTimeRounded = (dateTime2, toISOString = true) => {
 
 // src/helpers/dateTime/dateTimeString.ts
 var import_type_guards3 = require("@wistia/type-guards");
-var dateTimeString = (date, { timeZone = defaultTimeZone } = {}) => {
+var dateTimeString = (date, { timeZone = defaultTimeZone, omitYear = false } = {}) => {
   if ((0, import_type_guards3.isNil)(date)) {
     return "";
   }
@@ -1828,11 +1829,15 @@ var dateTimeString = (date, { timeZone = defaultTimeZone } = {}) => {
     return "";
   }
   try {
-    return new Intl.DateTimeFormat(defaultLocales, {
-      dateStyle: "medium",
-      timeStyle: "short",
+    const baseOptions = {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
       timeZone
-    }).format(formattedDate);
+    };
+    const options = omitYear ? baseOptions : { ...baseOptions, year: "numeric" };
+    return formattedDate.toLocaleDateString(defaultLocales, options);
   } catch (error) {
     console.error(error);
     return "";
@@ -1983,13 +1988,12 @@ var differenceInCalendarDays = (dateLeft, dateRight) => {
 };
 
 // src/helpers/dateTime/timeAgoString.ts
-var timeAgoString = (date, { nowAnchor = /* @__PURE__ */ new Date() } = {}) => {
-  if (isInvalidDate(date)) {
-    return "";
-  }
+var timeAgoString = (date, { nowAnchor = /* @__PURE__ */ new Date(), includeTime = true } = {}) => {
+  if (isInvalidDate(date)) return "";
   const minutesAgo = (nowAnchor.valueOf() - date.valueOf()) / (secondsInMinute * milisecondsInSecond);
   const minutesAgoRounded = Math.round(minutesAgo);
   const differenceInDays = differenceInCalendarDays(nowAnchor, date);
+  const isSameYear = date.getFullYear() === nowAnchor.getFullYear();
   if (minutesAgo < 0) {
     return dateTimeString(date);
   }
@@ -2003,20 +2007,15 @@ var timeAgoString = (date, { nowAnchor = /* @__PURE__ */ new Date() } = {}) => {
     return `${minutesAgoRounded} minutes ago`;
   }
   if (differenceInDays === 0) {
-    return `Today, ${Intl.DateTimeFormat(defaultLocales, { timeStyle: "short" }).format(date)}`;
+    return includeTime ? `Today, ${Intl.DateTimeFormat(defaultLocales, { hour: "numeric", minute: "2-digit" }).format(date)}` : "Today";
   }
   if (differenceInDays === 1) {
-    return `Yesterday, ${Intl.DateTimeFormat(defaultLocales, { timeStyle: "short" }).format(date)}`;
+    return includeTime ? `Yesterday, ${Intl.DateTimeFormat(defaultLocales, { hour: "numeric", minute: "2-digit" }).format(date)}` : "Yesterday";
   }
-  if (date.getFullYear() === nowAnchor.getFullYear()) {
-    return Intl.DateTimeFormat(defaultLocales, {
-      day: "numeric",
-      month: "short",
-      hour: "numeric",
-      minute: "2-digit"
-    }).format(date);
+  if (differenceInDays < daysInWeek && !includeTime) {
+    return `on ${dayOfWeekString(date)}`;
   }
-  return dateTimeString(date);
+  return includeTime ? dateTimeString(date, { omitYear: isSameYear }) : dateOnlyString(date, { omitYear: isSameYear });
 };
 
 // src/helpers/dateTime/timeOnlyString.ts
@@ -7184,10 +7183,26 @@ var iconSizeMap = {
   xl: "32",
   xxl: "48"
 };
+var iconInlineStyle = import_styled_components19.css`
+  [data-wui-icon-inline] {
+    --wui-icon-inline-size: 0.8em;
+    --wui-icon-inline-offset: 0.05em;
+    --wui-icon-vertical-align: none;
+
+    top: var(--wui-icon-inline-offset);
+    position: relative;
+  }
+`;
 var StyledIcon = import_styled_components19.default.svg`
   ${({ $colorScheme }) => getColorScheme($colorScheme ?? "inherit")}
+  --wui-icon-size: var(--wui-icon-inline-size, ${({ $height }) => $height}px);
+  --wui-icon-vertical-align: middle;
+
+  height: var(--wui-icon-size);
+  width: var(--wui-icon-size);
 `;
 var Icon = ({
+  useInlineStyles = true,
   invertColor,
   colorScheme = "inherit",
   size = "lg",
@@ -7209,7 +7224,7 @@ var Icon = ({
   }
   const IconElement = iconMap[type];
   const defaultStyle = {
-    verticalAlign: "middle",
+    verticalAlign: "var(--wui-icon-vertical-align)",
     ...style
   };
   const iconColor = invertColor ? "var(--wui-color-icon-on-fill)" : "var(--wui-color-icon)";
@@ -7217,13 +7232,14 @@ var Icon = ({
     StyledIcon,
     {
       $colorScheme: colorScheme,
+      $height: iconSizeMap[responsiveSize],
+      $width: iconSizeMap[responsiveSize],
       "aria-hidden": "true",
       as: IconElement,
-      height: `${iconSizeMap[responsiveSize]}px`,
+      "data-wui-icon-inline": useInlineStyles ? true : void 0,
       role: "presentation",
       style: defaultStyle,
       viewBox: "0 0 24 24",
-      width: `${iconSizeMap[responsiveSize]}px`,
       xmlns: "http://www.w3.org/2000/svg",
       ...props,
       color: iconColor
@@ -8247,6 +8263,8 @@ var StyledHeading = import_styled_components28.default.div`
     text-align: ${$align};
   `}
   margin: 0;
+
+  ${iconInlineStyle}
 `;
 var variantElementMap = {
   hero: DEFAULT_ELEMENT2,
@@ -8428,6 +8446,7 @@ var StyledText = import_styled_components29.default.div`
   return "var(--wui-color-text)";
 }};
 
+  ${iconInlineStyle}
   color: var(--text-color);
   font-family: var(--font-family);
   font-size: var(--font-size);
@@ -8654,21 +8673,6 @@ var StyledBanner = import_styled_components32.default.div`
 
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
 `;
-var IconWrapper = (0, import_styled_components32.default)(Box)`
-  --wui-banner-icon-size: var(--font-size, 24px);
-
-  ${({ $iconPosition }) => $iconPosition === "inline" && import_styled_components32.css`
-      display: inline-block;
-      vertical-align: text-bottom;
-      margin-right: calc(var(--wui-banner-icon-size) / 3);
-    `}
-
-  svg {
-    color: var(--wui-color-icon);
-    width: var(--wui-banner-icon-size);
-    height: var(--wui-banner-icon-size);
-  }
-`;
 var Banner = ({
   bodyText,
   colorScheme = "inherit",
@@ -8731,9 +8735,8 @@ var Banner = ({
             style: { padding: "var(--wui-banner-padding)" },
             children: [
               iconPosition === "above" && /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(
-                IconWrapper,
+                Box,
                 {
-                  $iconPosition: "above",
                   alignSelf: "stretch",
                   direction: "column",
                   justifyContent: "center",
@@ -8749,7 +8752,10 @@ var Banner = ({
                   justifyContent: "center",
                   children: [
                     (0, import_type_guards24.isNotNil)(headingText) ? /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(Heading, { variant: headingVariant, children: [
-                      iconPosition === "inline" && /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(IconWrapper, { $iconPosition: "inline", children: icon }),
+                      iconPosition === "inline" && /* @__PURE__ */ (0, import_jsx_runtime208.jsxs)(import_jsx_runtime208.Fragment, { children: [
+                        icon,
+                        " "
+                      ] }),
                       headingText
                     ] }) : null,
                     /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(Text, { variant: textVariant, children: bodyText })
@@ -10066,7 +10072,7 @@ var ColorPickerProvider = ({
     }),
     [colorForComparison, minimumContrastRatio, opacityForContrastCalculation]
   );
-  const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor((0, import_fn4.formatHex)(nonDerivedValueAsHsv)) : nonDerivedValueAsHsv;
+  const valueAsHsv = shouldEnforceMinContrast ? getAccessibleDerivativeColor(nonDerivedValueAsHsv) : nonDerivedValueAsHsv;
   const currentContrastRatio = calculateContrast({
     backgroundColor: valueAsHex,
     foregroundColor: colorForComparison,