playbook_ui 12.37.0 → 12.38.0.pre.alpha.PLAY932removemomentqp1088

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 92ab5b99e6bc4d33881e4087db34763fd0d818607d0412cbe5305e9a376c6c31
-  data.tar.gz: 0ed7902b4ebff49a4dbc5dd60e7e6411311ab7fdee3bf0812501a6d2fe63a0f5
+  metadata.gz: e1acc22a656ca63996a3b72d620ec59eb2fd323be9c3d6672449495c8c6781e3
+  data.tar.gz: 9029b42a09b0db1639360ae2addb2f6f35fd9ec488af53d829dd241e88cce167
 SHA512:
-  metadata.gz: 40657ad869c7a5ca5aa6494a5d4ef300f1e00aa30fe8f4fac97402b4fe169f46dbccdf166fa926a91543c6751b410471dcb1ad0add23601b99e71758204f3cd2
-  data.tar.gz: 3b44c5fd8f3a0fad567fd4ff9064273ea86e86b5dec6ec283cc419fff7fad6a354571b4d7e77fafb59391fd913c0431f6764a00b895896aec9d1cc11ab1c8880
+  metadata.gz: faf876a9e1a26091d6cc292382e99220ca51b8937616cf96d793dbf886572daff5dc7a65bb4ce9c8d2e4c53dc2674acc61dc6e03a2e41db70e1ee2868f9f2a39
+  data.tar.gz: a5c43e9e88c057548d4bc656352ae3a4fa92f6d8119ff6c339933d25e0baea9aa39e45888826a720489b1b3a38efb82823e01d94130301b09c27d7eb10c90013

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import classnames from "classnames";
 
-import DateTime from "../pb_kit/dateTime";
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -20,7 +20,7 @@ type PbDateProps = {
   showIcon?: boolean;
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
-  value: string | Date;
+  value: Date;
 };
 
 const PbDate = (props: PbDateProps) => {
@@ -37,12 +37,11 @@ const PbDate = (props: PbDateProps) => {
     value,
   } = props;
 
-  const dateTimestamp = new DateTime({ value: value });
-  const weekday = dateTimestamp.toWeekday();
-  const month = dateTimestamp.toMonth();
-  const day = dateTimestamp.toDay();
-  const year = dateTimestamp.toYear();
-  const currentYear = new Date().getFullYear().toString();
+  const weekday = DateTime.toWeekday(value);
+  const month = DateTime.toMonth(value);
+  const day = DateTime.toDay(value);
+  const year = DateTime.toYear(value);
+  const currentYear = new Date().getFullYear();
 
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);

data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx

@@ -7,7 +7,7 @@ const DateAlignment = (props) => {
       <FormattedDate
           dayOfWeek
           icon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -17,7 +17,7 @@ const DateAlignment = (props) => {
           alignment="center"
           dayOfWeek
           icon
-          value="2020-12-25"
+          value={new Date('25 Dec 2020')}
           {...props}
       />
 

data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Date as FormattedDate } from '../../'
+import { Date as FormattedDate, Caption, Title } from '../../'
 
 const DateDefault = (props) => {
   return (
@@ -12,9 +12,20 @@ const DateDefault = (props) => {
 
       <br />
 
+      <div style={{display: "flex", columnGap: 4}}>
+        <FormattedDate
+            size="sm"
+            value={"2012-08-03"}
+            {...props}
+        />
+        <Caption>{"(Hyphenated Date)"}</Caption>
+      </div>
+
+      <br />
+
       <FormattedDate
           size="sm"
-          value="2012-08-03"
+          value={new Date('03 Aug 2012')}
           {...props}
       />
 
@@ -23,7 +34,7 @@ const DateDefault = (props) => {
       <FormattedDate
           showDayOfWeek
           size="sm"
-          value="2017-12-03"
+          value={new Date('03 Dec 2017')}
           {...props}
       />
 
@@ -37,8 +48,21 @@ const DateDefault = (props) => {
 
       <br />
 
+      <div style={{display: "flex", columnGap: 4}}>
+        <FormattedDate
+            value={"2012-08-03"}
+            {...props}
+        />
+        <Title
+            size={4}
+            text={"(Hyphenated Date)"}
+        />
+      </div>
+
+      <br />
+
       <FormattedDate
-          value="2012-08-03"
+          value={new Date('03 Aug 2012')}
           {...props}
       />
 
@@ -46,7 +70,7 @@ const DateDefault = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value="2017-12-03"
+          value={new Date('03 Dec 2017')}
           {...props}
       />
     </>

data/app/pb_kits/playbook/pb_date/docs/_date_unstyled.jsx

@@ -21,7 +21,7 @@ const DateUnstyled = (props) => {
       <Title size={1}>
         <FormattedDate
             unstyled
-            value="1995-12-25"
+            value={new Date('25 Dec 1995')}
             {...props}
         />
       </Title>
@@ -36,7 +36,7 @@ const DateUnstyled = (props) => {
             showDayOfWeek
             showIcon
             unstyled
-            value="1995-12-25"
+            value={new Date('25 Dec 1995')}
             {...props}
         />
       </Caption>

data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx

@@ -7,7 +7,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showIcon
           size="sm"
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -15,7 +15,7 @@ const DateVariants = (props) => {
       <br />
 
       <FormattedDate
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -24,7 +24,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showIcon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -33,7 +33,7 @@ const DateVariants = (props) => {
 
       <FormattedDate
           showDayOfWeek
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
 
@@ -43,7 +43,7 @@ const DateVariants = (props) => {
       <FormattedDate
           showDayOfWeek
           showIcon
-          value="1995-12-25"
+          value={new Date('25 Dec 1995')}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -1,16 +1,26 @@
 /* eslint-disable no-console */
 import React from 'react'
-import moment from 'moment'
 import { fireEvent, render, screen, waitFor, within } from '../utilities/test-utils'
 
 import DatePicker from './_date_picker'
+import DateTime from "../pb_kit/dateTime.ts"
 import { getTimezoneText } from './plugins/timeSelect'
 
-
-
 jest.setSystemTime(new Date('01/01/2020'));
 const DEFAULT_DATE = new Date()
 
+const formatDate = (date) => {
+  const month = (date.getMonth() + 1).toString().padStart(2, "0")
+  const day = (date.getDate()).toString().padStart(2, "0")
+  const year = date.getFullYear()
+
+  return `${month}/${day}/${year}`
+}
+
+Date.prototype.formatDate = function () {
+  return formatDate(this)
+}
+
 describe('DatePicker Kit', () => {
   beforeEach(() => {
     jest.spyOn(console, 'error').mockImplementation(() => { });
@@ -158,6 +168,7 @@ describe('DatePicker Kit', () => {
       expect(input).toHaveValue('01/01/2020 at 12:00 PM')
     })
   })
+
   test('shows DatePicker QuickPick dropdown and adds correct date to input', async () => {
     const testId = 'datepicker-quick-pick'
     render(
@@ -197,10 +208,10 @@ describe('DatePicker Kit', () => {
     )
 
     await waitFor(() => {
-      expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " to " + moment().endOf('year').format('MM/DD/YYYY'))
+      expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + DateTime.getYearEndDate(new Date()).formatDate())
     })
-
   })
+
   test('shows DatePicker QuickPick ranges ending today', async () => {
     const testId = 'datepicker-quick-pick-ends-today'
     render(
@@ -225,7 +236,7 @@ describe('DatePicker Kit', () => {
         cancelable: true,
       }),
     )
-    
+
     const thisYear = within(kit).getByText('This year')
 
     fireEvent(
@@ -237,8 +248,7 @@ describe('DatePicker Kit', () => {
     )
 
     await waitFor(() => {
-      expect(input).toHaveValue(moment().startOf('year').format('MM/DD/YYYY') + " to " + moment().format('MM/DD/YYYY'))
+      expect(input).toHaveValue(DateTime.getYearStartDate(new Date()).formatDate() + " to " + new Date().formatDate())
     })
-
   })
 })

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -1,4 +1,4 @@
-import moment from 'moment'
+import DateTime from '../../pb_kit/dateTime';
 
 type FpTypes = {
   setDate: (arg0: any, arg1: boolean) => void,
@@ -23,37 +23,44 @@ let activeLabel = ""
 
 const quickPickPlugin = (thisRangesEndToday: boolean) => {
   return function (fp: FpTypes & any): any {
-    const thisWeekEndDate = thisRangesEndToday ? new Date() : moment().endOf('isoWeek').toDate()
-    const thisMonthEndDate = thisRangesEndToday ? new Date() : moment().endOf('month').toDate()
-    const thisQuarterEndDate = thisRangesEndToday ? new Date() : moment().endOf('quarter').toDate()
-    const thisYearEndDate = thisRangesEndToday ? new Date() : moment().endOf('year').toDate()
+    const today = new Date()
+    const yesterday = DateTime.getYesterdayDate(new Date())
+
+    const thisWeekStartDate = DateTime.getFirstDayOfWeek(new Date())
+    const thisWeekEndDate = thisRangesEndToday ? new Date() : DateTime.getLastDayOfWeek(new Date())
+    const lastWeekStartDate = DateTime.getPreviousWeekStartDate(new Date())
+    const lastWeekEndDate = DateTime.getPreviousWeekEndDate(new Date())
+
+    const thisMonthStartDate = DateTime.getMonthStartDate(new Date())
+    const thisMonthEndDate = thisRangesEndToday ? new Date() : DateTime.getMonthEndDate(new Date())
+    const lastMonthStartDate = DateTime.getPreviousMonthStartDate(new Date())
+    const lastMonthEndDate = DateTime.getPreviousMonthEndDate(new Date())
+
+    const thisQuarterStartDate = DateTime.getQuarterStartDate(new Date())
+    const thisQuarterEndDate = thisRangesEndToday ? new Date() : DateTime.getQuarterEndDate(new Date())
+    const lastQuarterStartDate = DateTime.getPreviousQuarterStartDate(new Date())
+    const lastQuarterEndDate = DateTime.getPreviousQuarterEndDate(new Date())
+
+    const thisYearStartDate = DateTime.getYearStartDate(new Date())
+    const thisYearEndDate = thisRangesEndToday ? new Date() : DateTime.getYearEndDate(new Date())
+    const lastYearStartDate = DateTime.getPreviousYearStartDate(new Date())
+    const lastYearEndDate = DateTime.getPreviousYearEndDate(new Date())
 
     // variable that holds the ranges available
     const ranges = {
-      'Today': [new Date(), new Date()],
-      'Yesterday': [moment().subtract(1, 'days').toDate(), moment().subtract(1, 'days').toDate()],
-      'This week': [moment().startOf('isoWeek').toDate(), thisWeekEndDate],
-      'This month': [moment().startOf('month').toDate(), thisMonthEndDate],
-      'This quarter': [moment().startOf('quarter').toDate(), thisQuarterEndDate],
-      'This year': [moment().startOf('year').toDate(), thisYearEndDate],
-      'Last week': [
-        moment().subtract(1, 'week').startOf('isoWeek').toDate(),
-        moment().subtract(1, 'week').endOf('isoWeek').toDate()
-      ],
-      'Last month': [
-        moment().subtract(1, 'month').startOf('month').toDate(),
-        moment().subtract(1, 'month').endOf('month').toDate()
-      ],
-      'Last quarter': [
-        moment().subtract(1, 'quarter').startOf('quarter').toDate(),
-        moment().subtract(1, 'quarter').endOf('quarter').toDate()
-      ],
-      'Last year': [
-        moment().subtract(1, 'year').startOf('year').toDate(),
-        moment().subtract(1, 'year').endOf('year').toDate()
-      ]
+      'Today': [today, today],
+      'Yesterday': [yesterday, yesterday],
+      'This week': [thisWeekStartDate, thisWeekEndDate],
+      'This month': [thisMonthStartDate, thisMonthEndDate],
+      'This quarter': [thisQuarterStartDate, thisQuarterEndDate],
+      'This year': [thisYearStartDate, thisYearEndDate],
+      'Last week': [lastWeekStartDate, lastWeekEndDate],
+      'Last month': [lastMonthStartDate, lastMonthEndDate],
+      'Last quarter': [lastQuarterStartDate, lastQuarterEndDate],
+      'Last year': [lastYearStartDate, lastYearEndDate]
     }
-    //creating the ul element for the nav dropdown and giving it classnames
+
+    // creating the ul element for the nav dropdown and giving it classnames
     const rangesNav = document.createElement('ul');
 
     // creating the pluginData object that will hold the properties of this plugin
@@ -64,11 +71,11 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
     };
 
     /**
-   *    @param {string} label
-   *    @returns HTML Element
-   */
+      * @param {string} label
+      * @returns HTML Element
+      */
 
-    //function for creating the range buttons in the nav
+    // function for creating the range buttons in the nav
     const addRangeButton = (label: string) => {
 
       // creating new elements to mimick selectable card component
@@ -88,7 +95,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
       // append the li item to the ul rangeNav prop
       pluginData.rangesNav.appendChild(item);
 
-      // return the ranges buton prop
+      // return the ranges button prop
       return pluginData.rangesButtons[label];
     };
 
@@ -98,7 +105,7 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
       if (current) {
         current.classList.remove('active');
       }
-     
+
       if (selectedDates.length > 0 && activeLabel) {
         pluginData.rangesButtons[activeLabel].classList.add('active');
       }
@@ -109,16 +116,15 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
         selectedDates[1].toDateString() === pluginData.ranges[activeLabel][1].toDateString()
     }
 
-
     return {
-      // onReady is a hook from flatpickr that runs when calender is in a ready state
+      // onReady is a hook from flatpickr that runs when calendar is in a ready state
       onReady(selectedDates: Array<Date>) {
         // loop through the ranges and create an anchor tag for each range and add an event listener to set the date when user clicks on a date range
         for (const [label, range] of Object.entries(pluginData.ranges)) {
           addRangeButton(label).addEventListener('click', function () {
 
-            const start = moment(range[0]).toDate();
-            const end = moment(range[1]).toDate();
+            const start = new Date(range[0]);
+            const end = new Date(range[1]);
 
             if (!start) {
               fp.clear();
@@ -170,4 +176,4 @@ const quickPickPlugin = (thisRangesEndToday: boolean) => {
   };
 }
 
-export default quickPickPlugin;
+export default quickPickPlugin;

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -3,7 +3,7 @@ import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
 import { buildCss, buildDataProps } from "../utilities/props";
-import DateTime from "../pb_kit/dateTime";
+import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
 import Caption from "../pb_caption/_caption";
@@ -21,18 +21,16 @@ type DateRangeInlineProps = {
   endDate?: Date;
 };
 
-const dateTimestamp = (dateValue: Date | string, includeYear: boolean) => {
-  const date = new DateTime({ value: dateValue });
+const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
   if (includeYear) {
-    return `${date.toMonth()} ${date.toDay()}, ${date.toYear()}`;
+    return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}, ${DateTime.toYear(dateValue)}`;
   } else {
-    return `${date.toMonth()} ${date.toDay()}`;
+    return `${DateTime.toMonth(dateValue)} ${DateTime.toDay(dateValue)}`;
   }
 };
 
-const dateTimeIso = (dateValue: Date | string) => {
-  const date = new DateTime({ value: dateValue });
-  return date.toIso();
+const dateTimeIso = (dateValue: Date) => {
+  return DateTime.toIso(dateValue);
 };
 
 const DateRangeInline = (props: DateRangeInlineProps) => {
@@ -52,14 +50,17 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
       <>
         {icon && (
           <>
-            <Body color="light" key={Math.random()} tag="span">
-              <Icon
-                className="pb_date_range_inline_icon"
-                dark={dark}
-                fixedWidth
-                icon="calendar-alt"
-                size={size}
+            <Body color="light"
+                key={Math.random()}
                 tag="span"
+            >
+              <Icon
+                  className="pb_date_range_inline_icon"
+                  dark={dark}
+                  fixedWidth
+                  icon="calendar-alt"
+                  size={size}
+                  tag="span"
               />
             </Body>
           </>
@@ -78,7 +79,7 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
 
   const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
   const dataProps = buildDataProps(data)
-  const renderTime = (date: Date | string) => {
+  const renderTime = (date: Date) => {
     return (
       <time dateTime={dateTimeIso(date)}>
         {dateInCurrentYear() ? (
@@ -92,24 +93,30 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
 
   return (
     <div
-    {...dataProps}
-      className={classnames(dateRangeClasses, globalProps(props), className)}
+        {...dataProps}
+        className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">
         {size == "xs" && (
           <>
             {iconContent()}
-            <Caption dark={dark} tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               {renderTime(startDate)}
             </Caption>
-            <Caption dark={dark} tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               <Icon
-                className="pb_date_range_inline_arrow"
-                fixedWidth
-                icon="long-arrow-right"
+                  className="pb_date_range_inline_arrow"
+                  fixedWidth
+                  icon="long-arrow-right"
               />
             </Caption>
-            <Caption dark={dark} tag="span">
+            <Caption dark={dark}
+                tag="span"
+            >
               {renderTime(endDate)}
             </Caption>
           </>
@@ -118,18 +125,25 @@ const DateRangeInline = (props: DateRangeInlineProps) => {
         {size == "sm" && (
           <>
             {iconContent()}
-            <Body dark={dark} tag="span">
+            <Body dark={dark}
+                tag="span"
+            >
               {renderTime(startDate)}
             </Body>
-            <Body color="light" dark={dark} tag="span">
-              <Icon
-                className="pb_date_range_inline_arrow"
+            <Body color="light"
                 dark={dark}
-                fixedWidth
-                icon="long-arrow-right"
+                tag="span"
+            >
+              <Icon
+                  className="pb_date_range_inline_arrow"
+                  dark={dark}
+                  fixedWidth
+                  icon="long-arrow-right"
               />
             </Body>
-            <Body dark={dark} tag="span">
+            <Body dark={dark}
+                tag="span"
+            >
               {renderTime(endDate)}
             </Body>
           </>

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx

@@ -14,9 +14,9 @@ type DateRangeStackedProps = {
   className?: string | string[],
   data?: string,
   dark?: boolean,
-  endDate: string,
+  endDate: Date,
   id?: string,
-  startDate: string,
+  startDate: Date,
 }
 
 const DateRangeStacked = (props: DateRangeStackedProps) => {
@@ -29,7 +29,9 @@ const DateRangeStacked = (props: DateRangeStackedProps) => {
   const dataProps = buildDataProps(data)
 
   return (
-    <div {...dataProps} className={css}>
+    <div {...dataProps}
+        className={css}
+    >
       <Flex vertical="center">
         <FlexItem>
           <DateYearStacked

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
 import classnames from "classnames";
-import DateTime from "../pb_kit/dateTime";
 import { buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import DateTime from '../pb_kit/dateTime';
 
 import Caption from "../pb_caption/_caption";
 import Title from "../pb_title/_title";
@@ -14,7 +14,7 @@ type DateStackedProps = {
   className?: string | string[];
   dark?: boolean;
   data?: string;
-  date: string | Date;
+  date: Date;
   size?: "sm" | "md";
   id?: string;
   reverse?: boolean;
@@ -45,39 +45,42 @@ const DateStacked = (props: DateStackedProps) => {
     className
   );
 
-  const currentYear = new Date().getFullYear().toString();
-  const dateTimestamp = new DateTime({ value: date });
-  const inputYear = dateTimestamp.toYear().toString();
+  const currentYear = new Date().getFullYear()
+  const inputYear = DateTime.toYear(date);
   const dataProps = buildDataProps(data)
 
   return (
     <>
       {bold == false ? (
-        <div {...dataProps} className={classes}>
+        <div {...dataProps}
+            className={classes}
+        >
           <div className="pb_date_stacked_day_month">
-            <Caption text={dateTimestamp.toMonth().toUpperCase()} />
+            <Caption text={DateTime.toMonth(date).toUpperCase()} />
             <Title
-              dark={dark}
-              size={sizes[size]}
-              text={dateTimestamp.toDay()}
+                dark={dark}
+                size={sizes[size]}
+                text={DateTime.toDay(date).toString()}
             />
           </div>
           {currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
         </div>
       ) : (
-          <div {...dataProps} className={classes}>
+          <div {...dataProps}
+              className={classes}
+          >
             <div className="pb_date_stacked_day_month">
-              <Title 
-                bold 
-                dark={dark} 
-                size="4" 
-                text={dateTimestamp.toMonth()} 
+              <Title
+                  bold
+                  dark={dark}
+                  size="4"
+                  text={DateTime.toMonth(date)}
               />
-              <Title 
-                bold 
-                dark={dark} 
-                size="4" 
-                text={dateTimestamp.toDay()} 
+              <Title
+                  bold
+                  dark={dark}
+                  size="4"
+                  text={DateTime.toDay(date).toString()}
               />
               {currentYear != inputYear && <Title size="4">{inputYear}</Title>}
             </div>

data/app/pb_kits/playbook/pb_date_time/_date_time.tsx

@@ -13,7 +13,7 @@ type DateTimeProps = {
   aria?: { [key: string]: string; },
   className?: string,
   data?: { [key: string]: string; },
-  datetime: string,
+  datetime: Date,
   id?: string,
   size?: "sm" | "md",
   showDayOfWeek: boolean,

data/app/pb_kits/playbook/pb_date_time/dateTime.test.js

@@ -89,7 +89,7 @@ describe('DateTime Kit', () => {
     const kit = screen.getByTestId(testId)
     const text = kit.querySelector('.pb_time_kit_md.ml_sm')
 
-    expect(text.textContent).toEqual('2:00p JST')
+    expect(text.textContent).toEqual('2:00p GMT+9')
   })
   test('renders DatePicker size', () => {
     render(