@chayns-components/devalue-slider 5.0.0-beta.739 → 5.0.0-beta.742

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,6 +7,7 @@ exports.default = void 0;
7
7
  var _dateFns = require("date-fns");
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _chaynsApi = require("chayns-api");
10
+ var _locale = require("date-fns/locale");
10
11
  var _Timer = require("./Timer.styles");
11
12
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
12
13
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -15,6 +16,7 @@ const Timer = ({
15
16
  color,
16
17
  textColor = 'white'
17
18
  }) => {
19
+ const refDate = (0, _react.useRef)(new Date());
18
20
  const [distance, setDistance] = (0, _react.useState)((0, _dateFns.intervalToDuration)({
19
21
  start: devalueTime,
20
22
  end: new Date()
@@ -23,9 +25,10 @@ const Timer = ({
23
25
  const secondsShowValue = (0, _react.useMemo)(() => (distance.seconds || 0).toString(), [distance.seconds]);
24
26
  (0, _react.useEffect)(() => {
25
27
  const interval = setInterval(() => {
28
+ refDate.current = new Date();
26
29
  setDistance((0, _dateFns.intervalToDuration)({
27
30
  start: devalueTime,
28
- end: new Date()
31
+ end: refDate.current
29
32
  }));
30
33
  }, 500);
31
34
  return () => clearInterval(interval);
@@ -38,11 +41,20 @@ const Timer = ({
38
41
  }, []);
39
42
  const label = (0, _react.useMemo)(() => {
40
43
  let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';
41
- if (distance.minutes) {
44
+ if ((0, _dateFns.differenceInHours)(refDate.current, devalueTime) > 0) {
45
+ const distanceLabel = (0, _dateFns.formatDistanceToNow)(devalueTime, {
46
+ addSuffix: true,
47
+ locale: _locale.de
48
+ }).charAt(0).toUpperCase() + (0, _dateFns.formatDistanceToNow)(devalueTime, {
49
+ addSuffix: true,
50
+ locale: _locale.de
51
+ }).slice(1);
52
+ text = `${distanceLabel} (##TIME## Uhr)`;
53
+ } else if ((0, _dateFns.differenceInMinutes)(refDate.current, devalueTime) > 0) {
42
54
  text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';
43
55
  }
44
56
  return text.replace('##MINUTES##', minutesShowValue).replace('##SECONDS##', secondsShowValue).replace('##TIME##', (0, _dateFns.format)(devalueTime, 'HH:mm'));
45
- }, [distance.minutes, minutesShowValue, secondsShowValue, devalueTime]);
57
+ }, [distance, minutesShowValue, secondsShowValue, devalueTime]);
46
58
  return /*#__PURE__*/_react.default.createElement(_Timer.Container, {
47
59
  $baseFontSize: 17,
48
60
  $borderSize: 2,
@@ -1 +1 @@
1
- {"version":3,"file":"Timer.js","names":["_dateFns","require","_react","_interopRequireWildcard","_chaynsApi","_Timer","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Timer","devalueTime","color","textColor","distance","setDistance","useState","intervalToDuration","start","end","Date","minutesShowValue","useMemo","minutes","toString","secondsShowValue","seconds","useEffect","interval","setInterval","clearInterval","handlePointerDownCapture","useCallback","vibrate","pattern","iOSFeedbackVibration","label","text","replace","format","createElement","Container","$baseFontSize","$borderSize","$height","$color","$textColor","$backgroundColor","onPointerDownCapture","_default","exports"],"sources":["../../../../src/components/timer/Timer.tsx"],"sourcesContent":["import { format, intervalToDuration } from 'date-fns';\nimport React, { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { vibrate } from 'chayns-api';\n\nimport { Container } from './Timer.styles';\n\nexport type TimerProps = {\n color: string;\n devalueTime: Date;\n textColor?: string;\n};\n\nconst Timer: FunctionComponent<TimerProps> = ({ devalueTime, color, textColor = 'white' }) => {\n const [distance, setDistance] = useState(\n intervalToDuration({\n start: devalueTime,\n end: new Date(),\n }),\n );\n const minutesShowValue = useMemo(() => (distance.minutes || 0).toString(), [distance.minutes]);\n const secondsShowValue = useMemo(() => (distance.seconds || 0).toString(), [distance.seconds]);\n\n useEffect(() => {\n const interval = setInterval(() => {\n setDistance(\n intervalToDuration({\n start: devalueTime,\n end: new Date(),\n }),\n );\n }, 500);\n return () => clearInterval(interval);\n }, [devalueTime]);\n\n const handlePointerDownCapture = useCallback(() => {\n void vibrate({ pattern: [50], iOSFeedbackVibration: 7 });\n }, []);\n\n const label = useMemo(() => {\n let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';\n if (distance.minutes) {\n text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';\n }\n\n return text\n .replace('##MINUTES##', minutesShowValue)\n .replace('##SECONDS##', secondsShowValue)\n .replace('##TIME##', format(devalueTime, 'HH:mm'));\n }, [distance.minutes, minutesShowValue, secondsShowValue, devalueTime]);\n\n return (\n <Container\n $baseFontSize={17}\n $borderSize={2}\n $height={50}\n $color={color}\n $textColor={textColor}\n $backgroundColor={color}\n onPointerDownCapture={handlePointerDownCapture}\n >\n {label}\n </Container>\n );\n};\n\nexport default Timer;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"Timer.js","names":["_dateFns","require","_react","_interopRequireWildcard","_chaynsApi","_locale","_Timer","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Timer","devalueTime","color","textColor","refDate","useRef","Date","distance","setDistance","useState","intervalToDuration","start","end","minutesShowValue","useMemo","minutes","toString","secondsShowValue","seconds","useEffect","interval","setInterval","current","clearInterval","handlePointerDownCapture","useCallback","vibrate","pattern","iOSFeedbackVibration","label","text","differenceInHours","distanceLabel","formatDistanceToNow","addSuffix","locale","de","charAt","toUpperCase","slice","differenceInMinutes","replace","format","createElement","Container","$baseFontSize","$borderSize","$height","$color","$textColor","$backgroundColor","onPointerDownCapture","_default","exports"],"sources":["../../../../src/components/timer/Timer.tsx"],"sourcesContent":["import {\n differenceInHours,\n differenceInMinutes,\n format,\n formatDistanceToNow,\n intervalToDuration,\n} from 'date-fns';\nimport React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { vibrate } from 'chayns-api';\n\nimport { de } from 'date-fns/locale';\nimport { Container } from './Timer.styles';\n\nexport type TimerProps = {\n color: string;\n devalueTime: Date;\n textColor?: string;\n};\n\nconst Timer: FunctionComponent<TimerProps> = ({ devalueTime, color, textColor = 'white' }) => {\n const refDate = useRef(new Date());\n const [distance, setDistance] = useState(\n intervalToDuration({\n start: devalueTime,\n end: new Date(),\n }),\n );\n const minutesShowValue = useMemo(() => (distance.minutes || 0).toString(), [distance.minutes]);\n const secondsShowValue = useMemo(() => (distance.seconds || 0).toString(), [distance.seconds]);\n\n useEffect(() => {\n const interval = setInterval(() => {\n refDate.current = new Date();\n setDistance(\n intervalToDuration({\n start: devalueTime,\n end: refDate.current,\n }),\n );\n }, 500);\n return () => clearInterval(interval);\n }, [devalueTime]);\n\n const handlePointerDownCapture = useCallback(() => {\n void vibrate({ pattern: [50], iOSFeedbackVibration: 7 });\n }, []);\n\n const label = useMemo(() => {\n let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';\n if (differenceInHours(refDate.current, devalueTime) > 0) {\n const distanceLabel =\n formatDistanceToNow(devalueTime, {\n addSuffix: true,\n locale: de,\n })\n .charAt(0)\n .toUpperCase() +\n formatDistanceToNow(devalueTime, { addSuffix: true, locale: de }).slice(1);\n text = `${distanceLabel} (##TIME## Uhr)`;\n } else if (differenceInMinutes(refDate.current, devalueTime) > 0) {\n text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';\n }\n\n return text\n .replace('##MINUTES##', minutesShowValue)\n .replace('##SECONDS##', secondsShowValue)\n .replace('##TIME##', format(devalueTime, 'HH:mm'));\n }, [distance, minutesShowValue, secondsShowValue, devalueTime]);\n\n return (\n <Container\n $baseFontSize={17}\n $borderSize={2}\n $height={50}\n $color={color}\n $textColor={textColor}\n $backgroundColor={color}\n onPointerDownCapture={handlePointerDownCapture}\n >\n {label}\n </Container>\n );\n};\n\nexport default Timer;\n"],"mappings":"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","ignoreList":[]}
@@ -1,6 +1,7 @@
1
- import { format, intervalToDuration } from 'date-fns';
2
- import React, { useCallback, useEffect, useMemo, useState } from 'react';
1
+ import { differenceInHours, differenceInMinutes, format, formatDistanceToNow, intervalToDuration } from 'date-fns';
2
+ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
3
3
  import { vibrate } from 'chayns-api';
4
+ import { de } from 'date-fns/locale';
4
5
  import { Container } from './Timer.styles';
5
6
  const Timer = _ref => {
6
7
  let {
@@ -8,6 +9,7 @@ const Timer = _ref => {
8
9
  color,
9
10
  textColor = 'white'
10
11
  } = _ref;
12
+ const refDate = useRef(new Date());
11
13
  const [distance, setDistance] = useState(intervalToDuration({
12
14
  start: devalueTime,
13
15
  end: new Date()
@@ -16,9 +18,10 @@ const Timer = _ref => {
16
18
  const secondsShowValue = useMemo(() => (distance.seconds || 0).toString(), [distance.seconds]);
17
19
  useEffect(() => {
18
20
  const interval = setInterval(() => {
21
+ refDate.current = new Date();
19
22
  setDistance(intervalToDuration({
20
23
  start: devalueTime,
21
- end: new Date()
24
+ end: refDate.current
22
25
  }));
23
26
  }, 500);
24
27
  return () => clearInterval(interval);
@@ -31,11 +34,20 @@ const Timer = _ref => {
31
34
  }, []);
32
35
  const label = useMemo(() => {
33
36
  let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';
34
- if (distance.minutes) {
37
+ if (differenceInHours(refDate.current, devalueTime) > 0) {
38
+ const distanceLabel = formatDistanceToNow(devalueTime, {
39
+ addSuffix: true,
40
+ locale: de
41
+ }).charAt(0).toUpperCase() + formatDistanceToNow(devalueTime, {
42
+ addSuffix: true,
43
+ locale: de
44
+ }).slice(1);
45
+ text = `${distanceLabel} (##TIME## Uhr)`;
46
+ } else if (differenceInMinutes(refDate.current, devalueTime) > 0) {
35
47
  text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';
36
48
  }
37
49
  return text.replace('##MINUTES##', minutesShowValue).replace('##SECONDS##', secondsShowValue).replace('##TIME##', format(devalueTime, 'HH:mm'));
38
- }, [distance.minutes, minutesShowValue, secondsShowValue, devalueTime]);
50
+ }, [distance, minutesShowValue, secondsShowValue, devalueTime]);
39
51
  return /*#__PURE__*/React.createElement(Container, {
40
52
  $baseFontSize: 17,
41
53
  $borderSize: 2,
@@ -1 +1 @@
1
- {"version":3,"file":"Timer.js","names":["format","intervalToDuration","React","useCallback","useEffect","useMemo","useState","vibrate","Container","Timer","_ref","devalueTime","color","textColor","distance","setDistance","start","end","Date","minutesShowValue","minutes","toString","secondsShowValue","seconds","interval","setInterval","clearInterval","handlePointerDownCapture","pattern","iOSFeedbackVibration","label","text","replace","createElement","$baseFontSize","$borderSize","$height","$color","$textColor","$backgroundColor","onPointerDownCapture"],"sources":["../../../../src/components/timer/Timer.tsx"],"sourcesContent":["import { format, intervalToDuration } from 'date-fns';\nimport React, { FunctionComponent, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport { vibrate } from 'chayns-api';\n\nimport { Container } from './Timer.styles';\n\nexport type TimerProps = {\n color: string;\n devalueTime: Date;\n textColor?: string;\n};\n\nconst Timer: FunctionComponent<TimerProps> = ({ devalueTime, color, textColor = 'white' }) => {\n const [distance, setDistance] = useState(\n intervalToDuration({\n start: devalueTime,\n end: new Date(),\n }),\n );\n const minutesShowValue = useMemo(() => (distance.minutes || 0).toString(), [distance.minutes]);\n const secondsShowValue = useMemo(() => (distance.seconds || 0).toString(), [distance.seconds]);\n\n useEffect(() => {\n const interval = setInterval(() => {\n setDistance(\n intervalToDuration({\n start: devalueTime,\n end: new Date(),\n }),\n );\n }, 500);\n return () => clearInterval(interval);\n }, [devalueTime]);\n\n const handlePointerDownCapture = useCallback(() => {\n void vibrate({ pattern: [50], iOSFeedbackVibration: 7 });\n }, []);\n\n const label = useMemo(() => {\n let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';\n if (distance.minutes) {\n text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';\n }\n\n return text\n .replace('##MINUTES##', minutesShowValue)\n .replace('##SECONDS##', secondsShowValue)\n .replace('##TIME##', format(devalueTime, 'HH:mm'));\n }, [distance.minutes, minutesShowValue, secondsShowValue, devalueTime]);\n\n return (\n <Container\n $baseFontSize={17}\n $borderSize={2}\n $height={50}\n $color={color}\n $textColor={textColor}\n $backgroundColor={color}\n onPointerDownCapture={handlePointerDownCapture}\n >\n {label}\n </Container>\n );\n};\n\nexport default Timer;\n"],"mappings":"AAAA,SAASA,MAAM,EAAEC,kBAAkB,QAAQ,UAAU;AACrD,OAAOC,KAAK,IAAuBC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAE3F,SAASC,OAAO,QAAQ,YAAY;AAEpC,SAASC,SAAS,QAAQ,gBAAgB;AAQ1C,MAAMC,KAAoC,GAAGC,IAAA,IAAiD;EAAA,IAAhD;IAAEC,WAAW;IAAEC,KAAK;IAAEC,SAAS,GAAG;EAAQ,CAAC,GAAAH,IAAA;EACrF,MAAM,CAACI,QAAQ,EAAEC,WAAW,CAAC,GAAGT,QAAQ,CACpCL,kBAAkB,CAAC;IACfe,KAAK,EAAEL,WAAW;IAClBM,GAAG,EAAE,IAAIC,IAAI,CAAC;EAClB,CAAC,CACL,CAAC;EACD,MAAMC,gBAAgB,GAAGd,OAAO,CAAC,MAAM,CAACS,QAAQ,CAACM,OAAO,IAAI,CAAC,EAAEC,QAAQ,CAAC,CAAC,EAAE,CAACP,QAAQ,CAACM,OAAO,CAAC,CAAC;EAC9F,MAAME,gBAAgB,GAAGjB,OAAO,CAAC,MAAM,CAACS,QAAQ,CAACS,OAAO,IAAI,CAAC,EAAEF,QAAQ,CAAC,CAAC,EAAE,CAACP,QAAQ,CAACS,OAAO,CAAC,CAAC;EAE9FnB,SAAS,CAAC,MAAM;IACZ,MAAMoB,QAAQ,GAAGC,WAAW,CAAC,MAAM;MAC/BV,WAAW,CACPd,kBAAkB,CAAC;QACfe,KAAK,EAAEL,WAAW;QAClBM,GAAG,EAAE,IAAIC,IAAI,CAAC;MAClB,CAAC,CACL,CAAC;IACL,CAAC,EAAE,GAAG,CAAC;IACP,OAAO,MAAMQ,aAAa,CAACF,QAAQ,CAAC;EACxC,CAAC,EAAE,CAACb,WAAW,CAAC,CAAC;EAEjB,MAAMgB,wBAAwB,GAAGxB,WAAW,CAAC,MAAM;IAC/C,KAAKI,OAAO,CAAC;MAAEqB,OAAO,EAAE,CAAC,EAAE,CAAC;MAAEC,oBAAoB,EAAE;IAAE,CAAC,CAAC;EAC5D,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,KAAK,GAAGzB,OAAO,CAAC,MAAM;IACxB,IAAI0B,IAAI,GAAG,qCAAqC;IAChD,IAAIjB,QAAQ,CAACM,OAAO,EAAE;MAClBW,IAAI,GAAG,sDAAsD;IACjE;IAEA,OAAOA,IAAI,CACNC,OAAO,CAAC,aAAa,EAAEb,gBAAgB,CAAC,CACxCa,OAAO,CAAC,aAAa,EAAEV,gBAAgB,CAAC,CACxCU,OAAO,CAAC,UAAU,EAAEhC,MAAM,CAACW,WAAW,EAAE,OAAO,CAAC,CAAC;EAC1D,CAAC,EAAE,CAACG,QAAQ,CAACM,OAAO,EAAED,gBAAgB,EAAEG,gBAAgB,EAAEX,WAAW,CAAC,CAAC;EAEvE,oBACIT,KAAA,CAAA+B,aAAA,CAACzB,SAAS;IACN0B,aAAa,EAAE,EAAG;IAClBC,WAAW,EAAE,CAAE;IACfC,OAAO,EAAE,EAAG;IACZC,MAAM,EAAEzB,KAAM;IACd0B,UAAU,EAAEzB,SAAU;IACtB0B,gBAAgB,EAAE3B,KAAM;IACxB4B,oBAAoB,EAAEb;EAAyB,GAE9CG,KACM,CAAC;AAEpB,CAAC;AAED,eAAerB,KAAK","ignoreList":[]}
1
+ {"version":3,"file":"Timer.js","names":["differenceInHours","differenceInMinutes","format","formatDistanceToNow","intervalToDuration","React","useCallback","useEffect","useMemo","useRef","useState","vibrate","de","Container","Timer","_ref","devalueTime","color","textColor","refDate","Date","distance","setDistance","start","end","minutesShowValue","minutes","toString","secondsShowValue","seconds","interval","setInterval","current","clearInterval","handlePointerDownCapture","pattern","iOSFeedbackVibration","label","text","distanceLabel","addSuffix","locale","charAt","toUpperCase","slice","replace","createElement","$baseFontSize","$borderSize","$height","$color","$textColor","$backgroundColor","onPointerDownCapture"],"sources":["../../../../src/components/timer/Timer.tsx"],"sourcesContent":["import {\n differenceInHours,\n differenceInMinutes,\n format,\n formatDistanceToNow,\n intervalToDuration,\n} from 'date-fns';\nimport React, { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { vibrate } from 'chayns-api';\n\nimport { de } from 'date-fns/locale';\nimport { Container } from './Timer.styles';\n\nexport type TimerProps = {\n color: string;\n devalueTime: Date;\n textColor?: string;\n};\n\nconst Timer: FunctionComponent<TimerProps> = ({ devalueTime, color, textColor = 'white' }) => {\n const refDate = useRef(new Date());\n const [distance, setDistance] = useState(\n intervalToDuration({\n start: devalueTime,\n end: new Date(),\n }),\n );\n const minutesShowValue = useMemo(() => (distance.minutes || 0).toString(), [distance.minutes]);\n const secondsShowValue = useMemo(() => (distance.seconds || 0).toString(), [distance.seconds]);\n\n useEffect(() => {\n const interval = setInterval(() => {\n refDate.current = new Date();\n setDistance(\n intervalToDuration({\n start: devalueTime,\n end: refDate.current,\n }),\n );\n }, 500);\n return () => clearInterval(interval);\n }, [devalueTime]);\n\n const handlePointerDownCapture = useCallback(() => {\n void vibrate({ pattern: [50], iOSFeedbackVibration: 7 });\n }, []);\n\n const label = useMemo(() => {\n let text = 'Vor ##SECONDS## Sek. (##TIME## Uhr)';\n if (differenceInHours(refDate.current, devalueTime) > 0) {\n const distanceLabel =\n formatDistanceToNow(devalueTime, {\n addSuffix: true,\n locale: de,\n })\n .charAt(0)\n .toUpperCase() +\n formatDistanceToNow(devalueTime, { addSuffix: true, locale: de }).slice(1);\n text = `${distanceLabel} (##TIME## Uhr)`;\n } else if (differenceInMinutes(refDate.current, devalueTime) > 0) {\n text = 'Vor ##MINUTES## Min. ##SECONDS## Sek. (##TIME## Uhr)';\n }\n\n return text\n .replace('##MINUTES##', minutesShowValue)\n .replace('##SECONDS##', secondsShowValue)\n .replace('##TIME##', format(devalueTime, 'HH:mm'));\n }, [distance, minutesShowValue, secondsShowValue, devalueTime]);\n\n return (\n <Container\n $baseFontSize={17}\n $borderSize={2}\n $height={50}\n $color={color}\n $textColor={textColor}\n $backgroundColor={color}\n onPointerDownCapture={handlePointerDownCapture}\n >\n {label}\n </Container>\n );\n};\n\nexport default Timer;\n"],"mappings":"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","ignoreList":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chayns-components/devalue-slider",
3
- "version": "5.0.0-beta.739",
3
+ "version": "5.0.0-beta.742",
4
4
  "description": "A slider to devalue something.",
5
5
  "siteEffects": false,
6
6
  "browserslist": [
@@ -49,9 +49,9 @@
49
49
  "url": "https://github.com/TobitSoftware/chayns-components/issues"
50
50
  },
51
51
  "dependencies": {
52
- "@chayns-components/core": "^5.0.0-beta.739",
52
+ "@chayns-components/core": "^5.0.0-beta.742",
53
53
  "@react-hook/size": "^2.1.2",
54
- "date-fns": "^2.30.0"
54
+ "date-fns": "^3.6.0"
55
55
  },
56
56
  "devDependencies": {
57
57
  "@babel/cli": "^7.24.8",
@@ -80,5 +80,5 @@
80
80
  "publishConfig": {
81
81
  "access": "public"
82
82
  },
83
- "gitHead": "02e1f9f0389c6eb39d1e17c9622e58ca1a1a3364"
83
+ "gitHead": "b9a8b5051917b28a3559106db7ddd13e378aa784"
84
84
  }