@ctlyst.id/internal-ui 3.3.15 → 3.4.0

package/dist/index.js

@@ -1287,26 +1287,32 @@ var getCommonPinningStyles = (column) => {
     ...isLastLeftPinnedColumn ? {
       padding: "16px 8px 16px 8px",
       "&:after": {
+        transition: "all 0.3s",
         content: "''",
         position: "absolute",
         width: "30px",
         right: "0px",
         bottom: "-1px",
         top: 0,
-        transform: "translateX(100%)",
+        transform: "translateX(100%)"
+      },
+      "[pin-left=true] &:after": {
         boxShadow: "inset 14px 0px 20px -10px #00000010"
       }
     } : {},
     ...isFirstRightPinnedColumn ? {
       padding: "16px 8px 16px 8px",
       "&:after": {
+        transition: "all 0.3s",
         content: "''",
         position: "absolute",
         width: "30px",
         left: "0%",
         top: 0,
         bottom: "-1px",
-        transform: "translateX(-100%)",
+        transform: "translateX(-100%)"
+      },
+      "[pin-right=true] &:after": {
         boxShadow: "inset -14px 0px 20px -10px #00000010"
       }
     } : {}
@@ -1406,22 +1412,39 @@ var useDataTable = ({
   };
 };
 var DataTable = React5.forwardRef((props, ref) => {
-  var _a, _b;
+  var _a, _b, _c;
   const { isLoading, styles, headerSticky, onRowClick, container, columnPinning } = props;
   const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
+  const refTable = React5.useRef(null);
   React5.useImperativeHandle(ref, () => ({
     toggleAllRowsSelected
   }));
+  let lastPinnedColumn = 0;
+  (_a = refTable.current) == null ? void 0 : _a.addEventListener("scroll", (s) => {
+    var _a2, _b2, _c2, _d;
+    const element = s.currentTarget;
+    if (element.scrollLeft > 0) {
+      (_a2 = refTable.current) == null ? void 0 : _a2.setAttribute("pin-left", "true");
+    } else {
+      (_b2 = refTable.current) == null ? void 0 : _b2.removeAttribute("pin-left");
+    }
+    if (element.scrollLeft < element.scrollWidth - (lastPinnedColumn + element.offsetWidth)) {
+      (_c2 = refTable.current) == null ? void 0 : _c2.setAttribute("pin-right", "true");
+    } else {
+      (_d = refTable.current) == null ? void 0 : _d.removeAttribute("pin-right");
+    }
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_react28.Box,
     {
       overflowX: "auto",
       overflowY: "hidden",
       position: "relative",
-      pl: ((_a = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _a.length) ? 0 : 4,
-      pr: ((_b = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _b.length) ? 0 : 4,
+      pl: ((_b = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _b.length) ? 0 : 4,
+      pr: ((_c = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _c.length) ? 0 : 4,
       maxW: "100%",
       w: "full",
+      ref: refTable,
       ...container,
       children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react28.Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -1451,7 +1474,10 @@ var DataTable = React5.forwardRef((props, ref) => {
             maxH: "50px",
             ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}),
             children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tr, { bg: (0, import_react28.useColorModeValue)("initial", "ebony-clay.700"), ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => {
-              var _a2;
+              var _a2, _b2;
+              if (!!((_a2 = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _a2.length) && header.column.getIsFirstColumn("right")) {
+                lastPinnedColumn = header.column.getAfter("right");
+              }
               return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 import_react28.Th,
                 {
@@ -1478,10 +1504,10 @@ var DataTable = React5.forwardRef((props, ref) => {
                             cursor: header.column.getCanSort() ? "pointer" : "default",
                             "data-test-id": `CT_Container_SortingIcon_${header.id}`,
                             onClick: header.column.getToggleSortingHandler(),
-                            children: (_a2 = header.column.getCanSort() && {
+                            children: (_b2 = header.column.getCanSort() && {
                               asc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronUpIcon, { h: 4, w: 4, color: "neutral.500" }),
                               desc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronDownIcon, { h: 4, w: 4, color: "neutral.500" })
-                            }[header.column.getIsSorted()]) != null ? _a2 : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Box, { display: "flex", justifyContent: "center", alignItems: "center", boxSize: 4, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.UpDownIcon, { color: "neutral.500" }) })
+                            }[header.column.getIsSorted()]) != null ? _b2 : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Box, { display: "flex", justifyContent: "center", alignItems: "center", boxSize: 4, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.UpDownIcon, { color: "neutral.500" }) })
                           }
                         )
                       ]
@@ -1578,6 +1604,539 @@ var import_shared_utils8 = require("@chakra-ui/shared-utils");
 var import_internal_icon6 = require("@ctlyst.id/internal-icon");
 var import_react_datepicker = __toESM(require("react-datepicker"));
 
+// ../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/_lib/buildFormatLongFn.mjs
+function buildFormatLongFn(args) {
+  return (options = {}) => {
+    const width = options.width ? String(options.width) : args.defaultWidth;
+    const format = args.formats[width] || args.formats[args.defaultWidth];
+    return format;
+  };
+}
+
+// ../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/_lib/buildLocalizeFn.mjs
+function buildLocalizeFn(args) {
+  return (value, options) => {
+    const context = (options == null ? void 0 : options.context) ? String(options.context) : "standalone";
+    let valuesArray;
+    if (context === "formatting" && args.formattingValues) {
+      const defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
+      const width = (options == null ? void 0 : options.width) ? String(options.width) : defaultWidth;
+      valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
+    } else {
+      const defaultWidth = args.defaultWidth;
+      const width = (options == null ? void 0 : options.width) ? String(options.width) : args.defaultWidth;
+      valuesArray = args.values[width] || args.values[defaultWidth];
+    }
+    const index = args.argumentCallback ? args.argumentCallback(value) : value;
+    return valuesArray[index];
+  };
+}
+
+// ../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/_lib/buildMatchFn.mjs
+function buildMatchFn(args) {
+  return (string, options = {}) => {
+    const width = options.width;
+    const matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth];
+    const matchResult = string.match(matchPattern);
+    if (!matchResult) {
+      return null;
+    }
+    const matchedString = matchResult[0];
+    const parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth];
+    const key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, (pattern) => pattern.test(matchedString)) : (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type
+      findKey(parsePatterns, (pattern) => pattern.test(matchedString))
+    );
+    let value;
+    value = args.valueCallback ? args.valueCallback(key) : key;
+    value = options.valueCallback ? (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- I challange you to fix the type
+      options.valueCallback(value)
+    ) : value;
+    const rest = string.slice(matchedString.length);
+    return { value, rest };
+  };
+}
+function findKey(object, predicate) {
+  for (const key in object) {
+    if (Object.prototype.hasOwnProperty.call(object, key) && predicate(object[key])) {
+      return key;
+    }
+  }
+  return void 0;
+}
+function findIndex(array, predicate) {
+  for (let key = 0; key < array.length; key++) {
+    if (predicate(array[key])) {
+      return key;
+    }
+  }
+  return void 0;
+}
+
+// ../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/_lib/buildMatchPatternFn.mjs
+function buildMatchPatternFn(args) {
+  return (string, options = {}) => {
+    const matchResult = string.match(args.matchPattern);
+    if (!matchResult) return null;
+    const matchedString = matchResult[0];
+    const parseResult = string.match(args.parsePattern);
+    if (!parseResult) return null;
+    let value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0];
+    value = options.valueCallback ? options.valueCallback(value) : value;
+    const rest = string.slice(matchedString.length);
+    return { value, rest };
+  };
+}
+
+// ../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/id/_lib/formatDistance.mjs
+var formatDistanceLocale = {
+  lessThanXSeconds: {
+    one: "kurang dari 1 detik",
+    other: "kurang dari {{count}} detik"
+  },
+  xSeconds: {
+    one: "1 detik",
+    other: "{{count}} detik"
+  },
+  halfAMinute: "setengah menit",
+  lessThanXMinutes: {
+    one: "kurang dari 1 menit",
+    other: "kurang dari {{count}} menit"
+  },
+  xMinutes: {
+    one: "1 menit",
+    other: "{{count}} menit"
+  },
+  aboutXHours: {
+    one: "sekitar 1 jam",
+    other: "sekitar {{count}} jam"
+  },
+  xHours: {
+    one: "1 jam",
+    other: "{{count}} jam"
+  },
+  xDays: {
+    one: "1 hari",
+    other: "{{count}} hari"
+  },
+  aboutXWeeks: {
+    one: "sekitar 1 minggu",
+    other: "sekitar {{count}} minggu"
+  },
+  xWeeks: {
+    one: "1 minggu",
+    other: "{{count}} minggu"
+  },
+  aboutXMonths: {
+    one: "sekitar 1 bulan",
+    other: "sekitar {{count}} bulan"
+  },
+  xMonths: {
+    one: "1 bulan",
+    other: "{{count}} bulan"
+  },
+  aboutXYears: {
+    one: "sekitar 1 tahun",
+    other: "sekitar {{count}} tahun"
+  },
+  xYears: {
+    one: "1 tahun",
+    other: "{{count}} tahun"
+  },
+  overXYears: {
+    one: "lebih dari 1 tahun",
+    other: "lebih dari {{count}} tahun"
+  },
+  almostXYears: {
+    one: "hampir 1 tahun",
+    other: "hampir {{count}} tahun"
+  }
+};
+var formatDistance = (token, count, options) => {
+  let result;
+  const tokenValue = formatDistanceLocale[token];
+  if (typeof tokenValue === "string") {
+    result = tokenValue;
+  } else if (count === 1) {
+    result = tokenValue.one;
+  } else {
+    result = tokenValue.other.replace("{{count}}", count.toString());
+  }
+  if (options == null ? void 0 : options.addSuffix) {
+    if (options.comparison && options.comparison > 0) {
+      return "dalam waktu " + result;
+    } else {
+      return result + " yang lalu";
+    }
+  }
+  return result;
+};
+
+// ../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/id/_lib/formatLong.mjs
+var dateFormats = {
+  full: "EEEE, d MMMM yyyy",
+  long: "d MMMM yyyy",
+  medium: "d MMM yyyy",
+  short: "d/M/yyyy"
+};
+var timeFormats = {
+  full: "HH.mm.ss",
+  long: "HH.mm.ss",
+  medium: "HH.mm",
+  short: "HH.mm"
+};
+var dateTimeFormats = {
+  full: "{{date}} 'pukul' {{time}}",
+  long: "{{date}} 'pukul' {{time}}",
+  medium: "{{date}}, {{time}}",
+  short: "{{date}}, {{time}}"
+};
+var formatLong = {
+  date: buildFormatLongFn({
+    formats: dateFormats,
+    defaultWidth: "full"
+  }),
+  time: buildFormatLongFn({
+    formats: timeFormats,
+    defaultWidth: "full"
+  }),
+  dateTime: buildFormatLongFn({
+    formats: dateTimeFormats,
+    defaultWidth: "full"
+  })
+};
+
+// ../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/id/_lib/formatRelative.mjs
+var formatRelativeLocale = {
+  lastWeek: "eeee 'lalu pukul' p",
+  yesterday: "'Kemarin pukul' p",
+  today: "'Hari ini pukul' p",
+  tomorrow: "'Besok pukul' p",
+  nextWeek: "eeee 'pukul' p",
+  other: "P"
+};
+var formatRelative = (token, _date, _baseDate, _options) => formatRelativeLocale[token];
+
+// ../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/id/_lib/localize.mjs
+var eraValues = {
+  narrow: ["SM", "M"],
+  abbreviated: ["SM", "M"],
+  wide: ["Sebelum Masehi", "Masehi"]
+};
+var quarterValues = {
+  narrow: ["1", "2", "3", "4"],
+  abbreviated: ["K1", "K2", "K3", "K4"],
+  wide: ["Kuartal ke-1", "Kuartal ke-2", "Kuartal ke-3", "Kuartal ke-4"]
+};
+var monthValues = {
+  narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
+  abbreviated: [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "Mei",
+    "Jun",
+    "Jul",
+    "Agt",
+    "Sep",
+    "Okt",
+    "Nov",
+    "Des"
+  ],
+  wide: [
+    "Januari",
+    "Februari",
+    "Maret",
+    "April",
+    "Mei",
+    "Juni",
+    "Juli",
+    "Agustus",
+    "September",
+    "Oktober",
+    "November",
+    "Desember"
+  ]
+};
+var dayValues = {
+  narrow: ["M", "S", "S", "R", "K", "J", "S"],
+  short: ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"],
+  abbreviated: ["Min", "Sen", "Sel", "Rab", "Kam", "Jum", "Sab"],
+  wide: ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"]
+};
+var dayPeriodValues = {
+  narrow: {
+    am: "AM",
+    pm: "PM",
+    midnight: "tengah malam",
+    noon: "tengah hari",
+    morning: "pagi",
+    afternoon: "siang",
+    evening: "sore",
+    night: "malam"
+  },
+  abbreviated: {
+    am: "AM",
+    pm: "PM",
+    midnight: "tengah malam",
+    noon: "tengah hari",
+    morning: "pagi",
+    afternoon: "siang",
+    evening: "sore",
+    night: "malam"
+  },
+  wide: {
+    am: "AM",
+    pm: "PM",
+    midnight: "tengah malam",
+    noon: "tengah hari",
+    morning: "pagi",
+    afternoon: "siang",
+    evening: "sore",
+    night: "malam"
+  }
+};
+var formattingDayPeriodValues = {
+  narrow: {
+    am: "AM",
+    pm: "PM",
+    midnight: "tengah malam",
+    noon: "tengah hari",
+    morning: "pagi",
+    afternoon: "siang",
+    evening: "sore",
+    night: "malam"
+  },
+  abbreviated: {
+    am: "AM",
+    pm: "PM",
+    midnight: "tengah malam",
+    noon: "tengah hari",
+    morning: "pagi",
+    afternoon: "siang",
+    evening: "sore",
+    night: "malam"
+  },
+  wide: {
+    am: "AM",
+    pm: "PM",
+    midnight: "tengah malam",
+    noon: "tengah hari",
+    morning: "pagi",
+    afternoon: "siang",
+    evening: "sore",
+    night: "malam"
+  }
+};
+var ordinalNumber = (dirtyNumber, _options) => {
+  const number = Number(dirtyNumber);
+  return "ke-" + number;
+};
+var localize = {
+  ordinalNumber,
+  era: buildLocalizeFn({
+    values: eraValues,
+    defaultWidth: "wide"
+  }),
+  quarter: buildLocalizeFn({
+    values: quarterValues,
+    defaultWidth: "wide",
+    argumentCallback: (quarter) => quarter - 1
+  }),
+  month: buildLocalizeFn({
+    values: monthValues,
+    defaultWidth: "wide"
+  }),
+  day: buildLocalizeFn({
+    values: dayValues,
+    defaultWidth: "wide"
+  }),
+  dayPeriod: buildLocalizeFn({
+    values: dayPeriodValues,
+    defaultWidth: "wide",
+    formattingValues: formattingDayPeriodValues,
+    defaultFormattingWidth: "wide"
+  })
+};
+
+// ../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/id/_lib/match.mjs
+var matchOrdinalNumberPattern = /^ke-(\d+)?/i;
+var parseOrdinalNumberPattern = /\d+/i;
+var matchEraPatterns = {
+  narrow: /^(sm|m)/i,
+  abbreviated: /^(s\.?\s?m\.?|s\.?\s?e\.?\s?u\.?|m\.?|e\.?\s?u\.?)/i,
+  wide: /^(sebelum masehi|sebelum era umum|masehi|era umum)/i
+};
+var parseEraPatterns = {
+  any: [/^s/i, /^(m|e)/i]
+};
+var matchQuarterPatterns = {
+  narrow: /^[1234]/i,
+  abbreviated: /^K-?\s[1234]/i,
+  wide: /^Kuartal ke-?\s?[1234]/i
+};
+var parseQuarterPatterns = {
+  any: [/1/i, /2/i, /3/i, /4/i]
+};
+var matchMonthPatterns = {
+  narrow: /^[jfmasond]/i,
+  abbreviated: /^(jan|feb|mar|apr|mei|jun|jul|agt|sep|okt|nov|des)/i,
+  wide: /^(januari|februari|maret|april|mei|juni|juli|agustus|september|oktober|november|desember)/i
+};
+var parseMonthPatterns = {
+  narrow: [
+    /^j/i,
+    /^f/i,
+    /^m/i,
+    /^a/i,
+    /^m/i,
+    /^j/i,
+    /^j/i,
+    /^a/i,
+    /^s/i,
+    /^o/i,
+    /^n/i,
+    /^d/i
+  ],
+  any: [
+    /^ja/i,
+    /^f/i,
+    /^ma/i,
+    /^ap/i,
+    /^me/i,
+    /^jun/i,
+    /^jul/i,
+    /^ag/i,
+    /^s/i,
+    /^o/i,
+    /^n/i,
+    /^d/i
+  ]
+};
+var matchDayPatterns = {
+  narrow: /^[srkjm]/i,
+  short: /^(min|sen|sel|rab|kam|jum|sab)/i,
+  abbreviated: /^(min|sen|sel|rab|kam|jum|sab)/i,
+  wide: /^(minggu|senin|selasa|rabu|kamis|jumat|sabtu)/i
+};
+var parseDayPatterns = {
+  narrow: [/^m/i, /^s/i, /^s/i, /^r/i, /^k/i, /^j/i, /^s/i],
+  any: [/^m/i, /^sen/i, /^sel/i, /^r/i, /^k/i, /^j/i, /^sa/i]
+};
+var matchDayPeriodPatterns = {
+  narrow: /^(a|p|tengah m|tengah h|(di(\swaktu)?) (pagi|siang|sore|malam))/i,
+  any: /^([ap]\.?\s?m\.?|tengah malam|tengah hari|(di(\swaktu)?) (pagi|siang|sore|malam))/i
+};
+var parseDayPeriodPatterns = {
+  any: {
+    am: /^a/i,
+    pm: /^pm/i,
+    midnight: /^tengah m/i,
+    noon: /^tengah h/i,
+    morning: /pagi/i,
+    afternoon: /siang/i,
+    evening: /sore/i,
+    night: /malam/i
+  }
+};
+var match = {
+  ordinalNumber: buildMatchPatternFn({
+    matchPattern: matchOrdinalNumberPattern,
+    parsePattern: parseOrdinalNumberPattern,
+    valueCallback: (value) => parseInt(value, 10)
+  }),
+  era: buildMatchFn({
+    matchPatterns: matchEraPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseEraPatterns,
+    defaultParseWidth: "any"
+  }),
+  quarter: buildMatchFn({
+    matchPatterns: matchQuarterPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseQuarterPatterns,
+    defaultParseWidth: "any",
+    valueCallback: (index) => index + 1
+  }),
+  month: buildMatchFn({
+    matchPatterns: matchMonthPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseMonthPatterns,
+    defaultParseWidth: "any"
+  }),
+  day: buildMatchFn({
+    matchPatterns: matchDayPatterns,
+    defaultMatchWidth: "wide",
+    parsePatterns: parseDayPatterns,
+    defaultParseWidth: "any"
+  }),
+  dayPeriod: buildMatchFn({
+    matchPatterns: matchDayPeriodPatterns,
+    defaultMatchWidth: "any",
+    parsePatterns: parseDayPeriodPatterns,
+    defaultParseWidth: "any"
+  })
+};
+
+// ../../node_modules/.pnpm/date-fns@3.6.0/node_modules/date-fns/locale/id.mjs
+var id = {
+  code: "id",
+  formatDistance,
+  formatLong,
+  formatRelative,
+  localize,
+  match,
+  options: {
+    weekStartsOn: 1,
+    firstWeekContainsDate: 1
+  }
+};
+
+// src/utils/locale/_lib/buildLocalizeFn/index.ts
+function buildLocalizeFn2(args) {
+  return (value, options) => {
+    const context = (options == null ? void 0 : options.context) ? String(options.context) : "standalone";
+    let valuesArray;
+    if (context === "formatting" && args.formattingValues) {
+      const defaultWidth = args.defaultFormattingWidth || args.defaultWidth;
+      const width = (options == null ? void 0 : options.width) ? String(options.width) : defaultWidth;
+      valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth];
+    } else {
+      const { defaultWidth } = args;
+      const width = (options == null ? void 0 : options.width) ? String(options.width) : args.defaultWidth;
+      valuesArray = args.values[width] || args.values[defaultWidth];
+    }
+    const index = args.argumentCallback ? args.argumentCallback(value) : value;
+    return valuesArray[index];
+  };
+}
+
+// src/utils/locale/id/index.ts
+var monthValues2 = {
+  narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"],
+  abbreviated: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"],
+  wide: [
+    "Januari",
+    "Februari",
+    "Maret",
+    "April",
+    "Mei",
+    "Juni",
+    "Juli",
+    "Agustus",
+    "September",
+    "Oktober",
+    "November",
+    "Desember"
+  ]
+};
+id.localize.month = buildLocalizeFn2({
+  values: monthValues2,
+  defaultWidth: "wide"
+});
+
 // src/components/datepicker/components/styles.tsx
 var import_system6 = require("@chakra-ui/system");
 var import_react30 = require("@emotion/react");
@@ -2476,7 +3035,7 @@ var time_input_default = TimeInput;
 // src/components/datepicker/components/datepicker.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var Datepicker = ({
-  id,
+  id: id2,
   label,
   error,
   isError,
@@ -2488,11 +3047,12 @@ var Datepicker = ({
   onClear,
   showMonth,
   shortMonth,
+  timezoneLabel,
   ...props
 }) => {
   var _a, _b;
   const selected = value ? new Date(value) : void 0;
-  const dateFormat = ((_a = props.dateFormat) != null ? _a : withTime) ? "dd MMMM yyyy, HH:mm" : "dd MMMM yyyy";
+  const dateFormat = ((_a = props.dateFormat) != null ? _a : withTime) ? `dd MMM yyyy, HH:mm '${timezoneLabel}'` : "dd MMM yyyy";
   const getTimeProps = () => {
     if (!withTime) return {};
     return {
@@ -2507,7 +3067,7 @@ var Datepicker = ({
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       import_react_datepicker.default,
       {
-        id,
+        id: id2,
         name,
         selected,
         customInput: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -2545,6 +3105,7 @@ var Datepicker = ({
         shouldCloseOnSelect: !(props.selectsRange || withTime),
         useShortMonthInDropdown: showMonth ? shortMonth : false,
         dateFormat,
+        locale: id,
         ...getTimeProps(),
         ...props
       }
@@ -5162,7 +5723,7 @@ var useToast = () => {
         style: { backgroundColor: style == null ? void 0 : style.backgroundColor, color: style == null ? void 0 : style.color }
       });
     },
-    dismiss: (id) => import_react_toastify.toast.dismiss(id)
+    dismiss: (id2) => import_react_toastify.toast.dismiss(id2)
   };
 };