@alveole/components 2.0.0-alpha.27 → 2.0.0-alpha.29

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.
Files changed (84) hide show
  1. package/dist/core/Box/Box.js +1 -1
  2. package/dist/core/Section/Section.stories.d.ts.map +1 -1
  3. package/dist/core/Section/Section.stories.js +13 -3
  4. package/dist/core/Section/Section.stories.sources.d.ts.map +1 -1
  5. package/dist/core/Section/Section.stories.sources.js +2 -2
  6. package/dist/generated/version.d.ts +1 -1
  7. package/dist/generated/version.js +1 -1
  8. package/dist/stories/index.d.ts +3 -0
  9. package/dist/stories/index.d.ts.map +1 -1
  10. package/dist/stories/index.js +3 -0
  11. package/dist/ui/DateRangeInput/Calendrier.d.ts +19 -0
  12. package/dist/ui/DateRangeInput/Calendrier.d.ts.map +1 -0
  13. package/dist/ui/DateRangeInput/Calendrier.js +44 -0
  14. package/dist/ui/DateRangeInput/Calendrier.styles.d.ts +54 -0
  15. package/dist/ui/DateRangeInput/Calendrier.styles.d.ts.map +1 -0
  16. package/dist/ui/DateRangeInput/Calendrier.styles.js +46 -0
  17. package/dist/ui/DateRangeInput/DateRangeInput.d.ts +26 -0
  18. package/dist/ui/DateRangeInput/DateRangeInput.d.ts.map +1 -0
  19. package/dist/ui/DateRangeInput/DateRangeInput.js +36 -0
  20. package/dist/ui/DateRangeInput/DateRangeInput.stories.d.ts +34 -0
  21. package/dist/ui/DateRangeInput/DateRangeInput.stories.d.ts.map +1 -0
  22. package/dist/ui/DateRangeInput/DateRangeInput.stories.js +24 -0
  23. package/dist/ui/DateRangeInput/DateRangeInput.stories.sources.d.ts +8 -0
  24. package/dist/ui/DateRangeInput/DateRangeInput.stories.sources.d.ts.map +1 -0
  25. package/dist/ui/DateRangeInput/DateRangeInput.stories.sources.js +8 -0
  26. package/dist/ui/DateRangeInput/DateRangeInput.styles.d.ts +22 -0
  27. package/dist/ui/DateRangeInput/DateRangeInput.styles.d.ts.map +1 -0
  28. package/dist/ui/DateRangeInput/DateRangeInput.styles.js +18 -0
  29. package/dist/ui/DateRangeInput/index.d.ts +4 -0
  30. package/dist/ui/DateRangeInput/index.d.ts.map +1 -0
  31. package/dist/ui/DateRangeInput/index.js +2 -0
  32. package/dist/ui/DateRangeInput/plage.d.ts +39 -0
  33. package/dist/ui/DateRangeInput/plage.d.ts.map +1 -0
  34. package/dist/ui/DateRangeInput/plage.js +55 -0
  35. package/dist/ui/FilterTimeRange/FilterTimeRange.d.ts +6 -0
  36. package/dist/ui/FilterTimeRange/FilterTimeRange.d.ts.map +1 -0
  37. package/dist/ui/FilterTimeRange/FilterTimeRange.js +9 -0
  38. package/dist/ui/FilterTimeRange/FilterTimeRange.shared.d.ts +24 -0
  39. package/dist/ui/FilterTimeRange/FilterTimeRange.shared.d.ts.map +1 -0
  40. package/dist/ui/FilterTimeRange/FilterTimeRange.shared.js +63 -0
  41. package/dist/ui/FilterTimeRange/FilterTimeRange.stories.d.ts +34 -0
  42. package/dist/ui/FilterTimeRange/FilterTimeRange.stories.d.ts.map +1 -0
  43. package/dist/ui/FilterTimeRange/FilterTimeRange.stories.js +22 -0
  44. package/dist/ui/FilterTimeRange/FilterTimeRange.stories.sources.d.ts +8 -0
  45. package/dist/ui/FilterTimeRange/FilterTimeRange.stories.sources.d.ts.map +1 -0
  46. package/dist/ui/FilterTimeRange/FilterTimeRange.stories.sources.js +8 -0
  47. package/dist/ui/FilterTimeRange/FilterTimeRange.styles.d.ts +22 -0
  48. package/dist/ui/FilterTimeRange/FilterTimeRange.styles.d.ts.map +1 -0
  49. package/dist/ui/FilterTimeRange/FilterTimeRange.styles.js +18 -0
  50. package/dist/ui/FilterTimeRange/FilterTimeRange.web.d.ts +9 -0
  51. package/dist/ui/FilterTimeRange/FilterTimeRange.web.d.ts.map +1 -0
  52. package/dist/ui/FilterTimeRange/FilterTimeRange.web.js +18 -0
  53. package/dist/ui/FilterTimeRange/index.d.ts +2 -0
  54. package/dist/ui/FilterTimeRange/index.d.ts.map +1 -0
  55. package/dist/ui/FilterTimeRange/index.js +1 -0
  56. package/dist/ui/FormControl/textInputStyles.d.ts +0 -4
  57. package/dist/ui/FormControl/textInputStyles.d.ts.map +1 -1
  58. package/dist/ui/FormControl/textInputStyles.js +0 -1
  59. package/dist/ui/LucideIcon/catalogueLucide.d.ts +75 -0
  60. package/dist/ui/LucideIcon/catalogueLucide.d.ts.map +1 -1
  61. package/dist/ui/LucideIcon/vendor/lab.js +1 -1
  62. package/dist/ui/LucideIcon/vendor/lucide.d.ts +1750 -1633
  63. package/dist/ui/LucideIcon/vendor/lucide.js +3 -3
  64. package/dist/ui/Select/Select.web.d.ts.map +1 -1
  65. package/dist/ui/Select/Select.web.js +3 -1
  66. package/dist/ui/TimeRangeInput/TimeRangeInput.d.ts +16 -0
  67. package/dist/ui/TimeRangeInput/TimeRangeInput.d.ts.map +1 -0
  68. package/dist/ui/TimeRangeInput/TimeRangeInput.js +57 -0
  69. package/dist/ui/TimeRangeInput/TimeRangeInput.stories.d.ts +45 -0
  70. package/dist/ui/TimeRangeInput/TimeRangeInput.stories.d.ts.map +1 -0
  71. package/dist/ui/TimeRangeInput/TimeRangeInput.stories.js +29 -0
  72. package/dist/ui/TimeRangeInput/TimeRangeInput.stories.sources.d.ts +8 -0
  73. package/dist/ui/TimeRangeInput/TimeRangeInput.stories.sources.d.ts.map +1 -0
  74. package/dist/ui/TimeRangeInput/TimeRangeInput.stories.sources.js +8 -0
  75. package/dist/ui/TimeRangeInput/TimeRangeInput.styles.d.ts +33 -0
  76. package/dist/ui/TimeRangeInput/TimeRangeInput.styles.d.ts.map +1 -0
  77. package/dist/ui/TimeRangeInput/TimeRangeInput.styles.js +29 -0
  78. package/dist/ui/TimeRangeInput/index.d.ts +2 -0
  79. package/dist/ui/TimeRangeInput/index.d.ts.map +1 -0
  80. package/dist/ui/TimeRangeInput/index.js +1 -0
  81. package/dist/ui/index.d.ts +3 -0
  82. package/dist/ui/index.d.ts.map +1 -1
  83. package/dist/ui/index.js +3 -0
  84. package/package.json +9 -9
@@ -35,5 +35,5 @@ export const Box = React.forwardRef(function Box(props, ref) {
35
35
  gap: resolveSpacing(gap),
36
36
  };
37
37
  const correctionFlex = correctionFlexDuWeb(style, viewProps.flex);
38
- return (_jsx(StyledView, { ref: ref, render: elementDuTag(tag), style: { ...aplatirStyle(style), ...correctionFlex }, ...radius, ...viewProps, ...definis(margins), ...definis(paddings), ...definis(spacings) }));
38
+ return (_jsx(StyledView, { ref: ref, render: elementDuTag(tag), style: { ...aplatirStyle(style), ...correctionFlex }, ...definis(radius), ...viewProps, ...definis(margins), ...definis(paddings), ...definis(spacings) }));
39
39
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Section.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Section/Section.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBAQkB;AAMlB,eAAO,MAAM,OAAO,mCAMnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAMxB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAUvB,CAAC;AAEF,eAAO,MAAM,aAAa,mCAMzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAUvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}
1
+ {"version":3,"file":"Section.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Section/Section.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,wBAiBkB;AAMlB,eAAO,MAAM,OAAO,mCAMnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAMxB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAYvB,CAAC;AAEF,eAAO,MAAM,aAAa,mCAMzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAUvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,2BAA2B,CAAC"}
@@ -8,7 +8,17 @@ export default {
8
8
  title: 'Section',
9
9
  tags: ['core'],
10
10
  experimental: true,
11
- description: 'Section de page. Permet de contenir une section dans un élément adapté aux différentes platformes. Composant de type Box.',
11
+ description: [
12
+ 'Section de page : centre son contenu dans un conteneur de largeur maximale et applique la marge extérieure du thème (`externalPadding`). Composant de type Box.',
13
+ '',
14
+ 'Padding horizontal (gauche/droite), toujours appliqué, selon la largeur d’écran :',
15
+ '- mobile (< 768px) : `2W` = 16px ;',
16
+ '- tablette (768–991px) et desktop (≥ 992px) : `3W` = 24px.',
17
+ '',
18
+ '`withPaddingY` ajoute la même valeur en haut et en bas (désactivé par défaut).',
19
+ '',
20
+ 'Largeur maximale du contenu (`size`) : `sm` = 600px, `md` = 1200px (par défaut), `full` = sans limite.',
21
+ ].join('\n'),
12
22
  component: Section,
13
23
  styleFn: useStyles,
14
24
  };
@@ -19,9 +29,9 @@ export const Default = () => (_jsx(Section, { children: _jsx(Box, { children: _j
19
29
  export const WithPaddingY = () => (_jsx(Section, { backgroundColor: paddingColor, withPaddingY: true, children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsx(Typography, { children: "Section avec background et padding Y" }) }) }));
20
30
  export const WidthMdSize = () => {
21
31
  const styles = useStyles();
22
- return (_jsx(Section, { backgroundColor: paddingColor, size: "md", children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsxs(Typography, { children: ["Section avec background et size md (", styles.sectionContainerMD.maxWidth, "px)"] }) }) }));
32
+ return (_jsx(Section, { backgroundColor: paddingColor, size: "md", children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsxs(Typography, { children: ["Section avec background et size md (", styles.sectionContainerMD.maxWidth, "px, taille par d\u00E9faut)"] }) }) }));
23
33
  };
24
- export const WidthFullSize = () => (_jsx(Section, { backgroundColor: paddingColor, size: "full", children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsx(Typography, { children: "Section avec background et size full (taille par d\u00E9faut)" }) }) }));
34
+ export const WidthFullSize = () => (_jsx(Section, { backgroundColor: paddingColor, size: "full", children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsx(Typography, { children: "Section avec background et size full (sans largeur maximale)" }) }) }));
25
35
  export const WidthSmSize = () => {
26
36
  const styles = useStyles();
27
37
  return (_jsx(Section, { backgroundColor: paddingColor, size: "sm", children: _jsx(Box, { backgroundColor: innerBoxColor, p: "1W", children: _jsxs(Typography, { children: ["Section avec background et size sm (", styles.sectionContainerSM.maxWidth, "px)"] }) }) }));
@@ -1 +1 @@
1
- {"version":3,"file":"Section.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Section/Section.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuI,CAAC;AAE5J,eAAO,MAAM,YAAY,cAA8P,CAAC;AAExR,eAAO,MAAM,WAAW,cAAgW,CAAC;AAEzX,eAAO,MAAM,aAAa,cAAoR,CAAC;AAE/S,eAAO,MAAM,WAAW,cAAgW,CAAC;AAEzX,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
1
+ {"version":3,"file":"Section.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/core/Section/Section.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAuI,CAAC;AAE5J,eAAO,MAAM,YAAY,cAA8P,CAAC;AAExR,eAAO,MAAM,WAAW,cAAyY,CAAC;AAEla,eAAO,MAAM,aAAa,cAAwR,CAAC;AAEnT,eAAO,MAAM,WAAW,cAAgW,CAAC;AAEzX,eAAO,MAAM,YAAY;;;;;;CAMf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
@@ -2,8 +2,8 @@
2
2
  // Source: src/core/Section/Section.stories.tsx
3
3
  export const Default = () => "export const Default = () => (\n <Section>\n <Box>\n <Typography>Section</Typography>\n </Box>\n </Section>\n);";
4
4
  export const WithPaddingY = () => "export const WithPaddingY = () => (\n <Section backgroundColor={paddingColor} withPaddingY>\n <Box backgroundColor={innerBoxColor} p=\"1W\">\n <Typography>Section avec background et padding Y</Typography>\n </Box>\n </Section>\n);";
5
- export const WidthMdSize = () => "export const WidthMdSize = () => {\n const styles = useStyles();\n\n return (\n <Section backgroundColor={paddingColor} size=\"md\">\n <Box backgroundColor={innerBoxColor} p=\"1W\">\n <Typography>Section avec background et size md ({styles.sectionContainerMD.maxWidth}px)</Typography>\n </Box>\n </Section>\n );\n};";
6
- export const WidthFullSize = () => "export const WidthFullSize = () => (\n <Section backgroundColor={paddingColor} size=\"full\">\n <Box backgroundColor={innerBoxColor} p=\"1W\">\n <Typography>Section avec background et size full (taille par défaut)</Typography>\n </Box>\n </Section>\n);";
5
+ export const WidthMdSize = () => "export const WidthMdSize = () => {\n const styles = useStyles();\n\n return (\n <Section backgroundColor={paddingColor} size=\"md\">\n <Box backgroundColor={innerBoxColor} p=\"1W\">\n <Typography>\n Section avec background et size md ({styles.sectionContainerMD.maxWidth}px, taille par défaut)\n </Typography>\n </Box>\n </Section>\n );\n};";
6
+ export const WidthFullSize = () => "export const WidthFullSize = () => (\n <Section backgroundColor={paddingColor} size=\"full\">\n <Box backgroundColor={innerBoxColor} p=\"1W\">\n <Typography>Section avec background et size full (sans largeur maximale)</Typography>\n </Box>\n </Section>\n);";
7
7
  export const WidthSmSize = () => "export const WidthSmSize = () => {\n const styles = useStyles();\n\n return (\n <Section backgroundColor={paddingColor} size=\"sm\">\n <Box backgroundColor={innerBoxColor} p=\"1W\">\n <Typography>Section avec background et size sm ({styles.sectionContainerSM.maxWidth}px)</Typography>\n </Box>\n </Section>\n );\n};";
8
8
  export const storySources = {
9
9
  Default,
@@ -1,2 +1,2 @@
1
- export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.27";
1
+ export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.29";
2
2
  //# sourceMappingURL=version.d.ts.map
@@ -1 +1 @@
1
- export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.27";
1
+ export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.29";
@@ -32,12 +32,14 @@ export * as CheckboxStory from '../ui/Checkbox/Checkbox.stories';
32
32
  export * as CounterStory from '../ui/Counter/Counter.stories';
33
33
  export * as DataTableStory from '../ui/DataTable/DataTable.stories';
34
34
  export * as DateInputStory from '../ui/DateInput/DateInput.stories';
35
+ export * as DateRangeInputStory from '../ui/DateRangeInput/DateRangeInput.stories';
35
36
  export * as DividerStory from '../ui/Divider/Divider.stories';
36
37
  export * as DocumentViewerStory from '../ui/DocumentViewer/DocumentViewer.stories';
37
38
  export * as DurationInputStory from '../ui/DurationInput/DurationInput.stories';
38
39
  export * as EmptyStateStory from '../ui/EmptyState/EmptyState.stories';
39
40
  export * as FileDropZoneStory from '../ui/FileDropZone/FileDropZone.stories';
40
41
  export * as FilterDateStory from '../ui/FilterDate/FilterDate.stories';
42
+ export * as FilterTimeRangeStory from '../ui/FilterTimeRange/FilterTimeRange.stories';
41
43
  export * as FileInputStory from '../ui/FormControl/FileInput.stories';
42
44
  export * as FormControlStory from '../ui/FormControl/FormControl.stories';
43
45
  export * as NumberInputStory from '../ui/FormControl/NumberInput.stories';
@@ -66,6 +68,7 @@ export * as TagStory from '../ui/Tag/Tag.stories';
66
68
  export * as TextareaInputStory from '../ui/TextareaInput/TextareaInput.stories';
67
69
  export * as TextInputArrayStory from '../ui/TextInputArray/TextInputArray.stories';
68
70
  export * as TimeInputStory from '../ui/TimeInput/TimeInput.stories';
71
+ export * as TimeRangeInputStory from '../ui/TimeRangeInput/TimeRangeInput.stories';
69
72
  export * as ToastStory from '../ui/Toast/Toast.stories';
70
73
  export * as ToolbarBottomNavStory from '../ui/ToolbarBottomNav/ToolbarBottomNav.stories';
71
74
  export * as ToolbarTopStory from '../ui/ToolbarTop/ToolbarTop.stories';
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/stories/index.ts"],"names":[],"mappings":"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"}
@@ -34,12 +34,14 @@ export * as CheckboxStory from '../ui/Checkbox/Checkbox.stories';
34
34
  export * as CounterStory from '../ui/Counter/Counter.stories';
35
35
  export * as DataTableStory from '../ui/DataTable/DataTable.stories';
36
36
  export * as DateInputStory from '../ui/DateInput/DateInput.stories';
37
+ export * as DateRangeInputStory from '../ui/DateRangeInput/DateRangeInput.stories';
37
38
  export * as DividerStory from '../ui/Divider/Divider.stories';
38
39
  export * as DocumentViewerStory from '../ui/DocumentViewer/DocumentViewer.stories';
39
40
  export * as DurationInputStory from '../ui/DurationInput/DurationInput.stories';
40
41
  export * as EmptyStateStory from '../ui/EmptyState/EmptyState.stories';
41
42
  export * as FileDropZoneStory from '../ui/FileDropZone/FileDropZone.stories';
42
43
  export * as FilterDateStory from '../ui/FilterDate/FilterDate.stories';
44
+ export * as FilterTimeRangeStory from '../ui/FilterTimeRange/FilterTimeRange.stories';
43
45
  export * as FileInputStory from '../ui/FormControl/FileInput.stories';
44
46
  export * as FormControlStory from '../ui/FormControl/FormControl.stories';
45
47
  export * as NumberInputStory from '../ui/FormControl/NumberInput.stories';
@@ -68,6 +70,7 @@ export * as TagStory from '../ui/Tag/Tag.stories';
68
70
  export * as TextareaInputStory from '../ui/TextareaInput/TextareaInput.stories';
69
71
  export * as TextInputArrayStory from '../ui/TextInputArray/TextInputArray.stories';
70
72
  export * as TimeInputStory from '../ui/TimeInput/TimeInput.stories';
73
+ export * as TimeRangeInputStory from '../ui/TimeRangeInput/TimeRangeInput.stories';
71
74
  export * as ToastStory from '../ui/Toast/Toast.stories';
72
75
  export * as ToolbarBottomNavStory from '../ui/ToolbarBottomNav/ToolbarBottomNav.stories';
73
76
  export * as ToolbarTopStory from '../ui/ToolbarTop/ToolbarTop.stories';
@@ -0,0 +1,19 @@
1
+ import type { Locale } from 'date-fns/locale';
2
+ import React from 'react';
3
+ import { PlageEnCours } from './plage';
4
+ type MotsDuCalendrier = {
5
+ locale: Locale;
6
+ precedent: string;
7
+ suivant: string;
8
+ mois: string;
9
+ annee: string;
10
+ };
11
+ type CalendrierProps = {
12
+ plage: PlageEnCours;
13
+ onChange: (plage: PlageEnCours) => void;
14
+ mots: MotsDuCalendrier;
15
+ };
16
+ /** Un mois navigable, semaine du lundi, où l'on pose les deux bornes d'une plage. */
17
+ export declare const Calendrier: ({ plage, onChange, mots }: CalendrierProps) => React.JSX.Element;
18
+ export {};
19
+ //# sourceMappingURL=Calendrier.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Calendrier.d.ts","sourceRoot":"","sources":["../../../src/ui/DateRangeInput/Calendrier.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAA2E,YAAY,EAAE,MAAM,SAAS,CAAC;AAEhH,KAAK,gBAAgB,GAAG;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5G,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,IAAI,EAAE,gBAAgB,CAAC;CACxB,CAAC;AAgIF,qFAAqF;AACrF,eAAO,MAAM,UAAU,GAAI,2BAA2B,eAAe,sBA4BpE,CAAC"}
@@ -0,0 +1,44 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import React from 'react';
3
+ import { Pressable } from 'react-native';
4
+ import { Box } from '../../core/Box';
5
+ import { Typography } from '../../core/Typography';
6
+ import { ActionMenu } from '../ActionMenu';
7
+ import { ButtonIcon } from '../Button';
8
+ import { useStyles } from './Calendrier.styles';
9
+ import { choisirJour, formeDuJour, joursDuMois, optionsDesAnnees, optionsDesMois } from './plage';
10
+ const CaseJour = ({ jour, colonne, plage, onChange, }) => {
11
+ const styles = useStyles();
12
+ const forme = formeDuJour(jour, colonne, plage);
13
+ return (_jsx(Pressable, { accessibilityRole: "button", accessibilityState: { selected: forme.dansPlage }, onPress: () => onChange(choisirJour(plage, jour)), children: _jsx(Box, { tag: "date-range-input-case-jour", style: [
14
+ styles.jour,
15
+ forme.dansPlage && styles.jourDansPlage,
16
+ forme.debut && styles.jourDebut,
17
+ forme.fin && styles.jourFin,
18
+ ], children: _jsx(Typography, { tag: "date-range-input-jour", style: [styles.texteJour, forme.dansPlage && styles.texteJourDansPlage], children: jour.getDate() }) }) }));
19
+ };
20
+ // Le mois ou l'année s'affiche en texte ; un clic ouvre la liste des valeurs dans un popover.
21
+ const ChoixDansMenu = ({ nom, options, valeur, onChoix, }) => {
22
+ const styles = useStyles();
23
+ const [open, setOpen] = React.useState(false);
24
+ const libelle = options.find(option => option.value === valeur)?.label;
25
+ return (_jsx(ActionMenu, { placement: "bottom", open: open, setOpen: setOpen, renderTrigger: () => (_jsx(Pressable, { accessibilityRole: "button", accessibilityLabel: `${nom} : ${libelle}`, onPress: () => setOpen(!open), children: _jsx(Typography, { tag: "date-range-input-titre-mois", style: styles.titreMois, children: libelle }) })), children: options.map(option => (_jsx(ActionMenu.Item, { title: option.label, selected: option.value === valeur, onPress: () => {
26
+ onChoix(option.value);
27
+ setOpen(false);
28
+ } }, option.value))) }));
29
+ };
30
+ // Flèches pour le mois voisin, et deux listes pour sauter directement à un mois ou une année.
31
+ const EnteteCalendrier = ({ mois, onMois, mots, }) => {
32
+ const styles = useStyles();
33
+ const aller = (annee, numero) => onMois(new Date(annee, numero, 1));
34
+ return (_jsxs(Box, { tag: "date-range-input-entete", style: styles.entete, children: [_jsx(ButtonIcon, { icon: "ChevronLeft", variant: "tertiary", size: "sm", accessibilityLabel: mots.precedent, onPress: () => aller(mois.getFullYear(), mois.getMonth() - 1) }), _jsxs(Box, { tag: "date-range-input-choix-mois", style: styles.choixMois, children: [_jsx(ChoixDansMenu, { nom: mots.mois, options: optionsDesMois(mots.locale), valeur: String(mois.getMonth()), onChoix: numero => aller(mois.getFullYear(), Number(numero)) }), _jsx(ChoixDansMenu, { nom: mots.annee, options: optionsDesAnnees(mois.getFullYear()), valeur: String(mois.getFullYear()), onChoix: annee => aller(Number(annee), mois.getMonth()) })] }), _jsx(ButtonIcon, { icon: "ChevronRight", variant: "tertiary", size: "sm", accessibilityLabel: mots.suivant, onPress: () => aller(mois.getFullYear(), mois.getMonth() + 1) })] }));
35
+ };
36
+ /** Un mois navigable, semaine du lundi, où l'on pose les deux bornes d'une plage. */
37
+ export const Calendrier = ({ plage, onChange, mots }) => {
38
+ const styles = useStyles();
39
+ const [mois, setMois] = React.useState(() => {
40
+ const reference = plage.debut ?? new Date();
41
+ return new Date(reference.getFullYear(), reference.getMonth(), 1);
42
+ });
43
+ return (_jsxs(React.Fragment, { children: [_jsx(EnteteCalendrier, { mois: mois, onMois: setMois, mots: mots }), _jsx(Box, { tag: "date-range-input-grille", style: styles.grille, children: joursDuMois(mois.getFullYear(), mois.getMonth()).map((numero, index) => numero === null ? (_jsx(Box, { tag: "date-range-input-case-vide", style: styles.jour }, `vide-${index}`)) : (_jsx(CaseJour, { jour: new Date(mois.getFullYear(), mois.getMonth(), numero), colonne: index % 7, plage: plage, onChange: onChange }, numero))) })] }));
44
+ };
@@ -0,0 +1,54 @@
1
+ export declare const useStyles: () => {
2
+ entete: {
3
+ flexDirection: "row";
4
+ alignItems: "center";
5
+ justifyContent: "space-between";
6
+ };
7
+ choixMois: {
8
+ flexDirection: "row";
9
+ gap: string | number;
10
+ };
11
+ titreMois: {
12
+ color: import("@alveole/theme").ThemeColor;
13
+ fontSize: 16;
14
+ lineHeight: 24;
15
+ letterSpacing: 0;
16
+ fontFamily: string;
17
+ fontWeight?: import("react-native").TextStyle["fontWeight"];
18
+ };
19
+ grille: {
20
+ flexDirection: "row";
21
+ flexWrap: "wrap";
22
+ rowGap: string | number;
23
+ width: number;
24
+ };
25
+ jour: {
26
+ width: import("@alveole/theme").Spacing;
27
+ height: import("@alveole/theme").Spacing;
28
+ alignItems: "center";
29
+ justifyContent: "center";
30
+ };
31
+ jourDansPlage: {
32
+ backgroundColor: import("@alveole/theme").ThemeColor;
33
+ };
34
+ jourDebut: {
35
+ borderTopLeftRadius: import("@alveole/theme").Radius;
36
+ borderBottomLeftRadius: import("@alveole/theme").Radius;
37
+ };
38
+ jourFin: {
39
+ borderTopRightRadius: import("@alveole/theme").Radius;
40
+ borderBottomRightRadius: import("@alveole/theme").Radius;
41
+ };
42
+ texteJour: {
43
+ color: import("@alveole/theme").ThemeColor;
44
+ fontSize: 16;
45
+ lineHeight: 24;
46
+ letterSpacing: 0;
47
+ fontFamily: string;
48
+ fontWeight?: import("react-native").TextStyle["fontWeight"];
49
+ };
50
+ texteJourDansPlage: {
51
+ color: import("@alveole/theme").ThemeColor;
52
+ };
53
+ };
54
+ //# sourceMappingURL=Calendrier.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Calendrier.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DateRangeInput/Calendrier.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4CnB,CAAC"}
@@ -0,0 +1,46 @@
1
+ import { makeStyles } from '@alveole/theme';
2
+ export const useStyles = makeStyles(({ spacing, spacingValue, color, text, radius }) => ({
3
+ entete: {
4
+ flexDirection: 'row',
5
+ alignItems: 'center',
6
+ justifyContent: 'space-between',
7
+ },
8
+ choixMois: {
9
+ flexDirection: 'row',
10
+ gap: spacing('1W'),
11
+ },
12
+ titreMois: {
13
+ ...text['Corps de texte'].MD.Medium,
14
+ color: color.light.text['title-grey'],
15
+ },
16
+ grille: {
17
+ flexDirection: 'row',
18
+ flexWrap: 'wrap',
19
+ rowGap: spacing('1V'),
20
+ width: spacingValue('5W') * 7,
21
+ },
22
+ jour: {
23
+ width: spacingValue('5W'),
24
+ height: spacingValue('5W'),
25
+ alignItems: 'center',
26
+ justifyContent: 'center',
27
+ },
28
+ jourDansPlage: {
29
+ backgroundColor: color.light.background['action-high-primary'],
30
+ },
31
+ jourDebut: {
32
+ borderTopLeftRadius: radius('full'),
33
+ borderBottomLeftRadius: radius('full'),
34
+ },
35
+ jourFin: {
36
+ borderTopRightRadius: radius('full'),
37
+ borderBottomRightRadius: radius('full'),
38
+ },
39
+ texteJour: {
40
+ ...text['Corps de texte'].MD.Regular,
41
+ color: color.light.text['default-grey'],
42
+ },
43
+ texteJourDansPlage: {
44
+ color: color.light.text['inverted-primary'],
45
+ },
46
+ }));
@@ -0,0 +1,26 @@
1
+ import React from 'react';
2
+ /** Deux jours, bornes comprises, sans heure. */
3
+ export type PlageDeDates = {
4
+ debut: Date;
5
+ fin: Date;
6
+ };
7
+ export type DateRangeInputProps = {
8
+ title?: string;
9
+ value?: PlageDeDates;
10
+ local?: 'fr' | 'en';
11
+ onApply: (plage: PlageDeDates) => void;
12
+ /** Affiche le bouton « Retour » quand il est fourni. */
13
+ onCancel?: () => void;
14
+ };
15
+ export declare const libellesDuCalendrier: (local: "fr" | "en") => {
16
+ retour: string;
17
+ appliquer: string;
18
+ precedent: string;
19
+ suivant: string;
20
+ mois: string;
21
+ annee: string;
22
+ locale: import("date-fns").Locale;
23
+ };
24
+ /** Choix d'une plage de dates au calendrier, sans heure. TimeRangeInput y ajoute les heures et l'UTC. */
25
+ export declare const DateRangeInput: (props: DateRangeInputProps) => React.JSX.Element;
26
+ //# sourceMappingURL=DateRangeInput.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../../src/ui/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,gDAAgD;AAChD,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAA;CAAE,CAAC;AAEtD,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,OAAO,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,OAAO,IAAI,GAAG,IAAI;;;;;;;;CAmBhD,CAAC;AAER,yGAAyG;AACzG,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBA4BxD,CAAC"}
@@ -0,0 +1,36 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { enUS } from 'date-fns/locale/en-US';
3
+ import { fr } from 'date-fns/locale/fr';
4
+ import React from 'react';
5
+ import { Box } from '../../core/Box';
6
+ import { Typography } from '../../core/Typography';
7
+ import { Button } from '../Button';
8
+ import { Calendrier } from './Calendrier';
9
+ import { useStyles } from './DateRangeInput.styles';
10
+ export const libellesDuCalendrier = (local) => local === 'fr'
11
+ ? {
12
+ retour: 'Retour',
13
+ appliquer: 'Appliquer',
14
+ precedent: 'Mois précédent',
15
+ suivant: 'Mois suivant',
16
+ mois: 'Mois',
17
+ annee: 'Année',
18
+ locale: fr,
19
+ }
20
+ : {
21
+ retour: 'Back',
22
+ appliquer: 'Apply',
23
+ precedent: 'Previous month',
24
+ suivant: 'Next month',
25
+ mois: 'Month',
26
+ annee: 'Year',
27
+ locale: enUS,
28
+ };
29
+ /** Choix d'une plage de dates au calendrier, sans heure. TimeRangeInput y ajoute les heures et l'UTC. */
30
+ export const DateRangeInput = (props) => {
31
+ const { title, value, local = 'fr', onApply, onCancel } = props;
32
+ const styles = useStyles();
33
+ const mots = libellesDuCalendrier(local);
34
+ const [plage, setPlage] = React.useState({ debut: value?.debut, fin: value?.fin });
35
+ return (_jsxs(Box, { tag: "date-range-input-container", style: styles.container, children: [title && (_jsx(Typography, { tag: "date-range-input-titre", style: styles.titre, children: title })), _jsx(Calendrier, { plage: plage, onChange: setPlage, mots: mots }), _jsxs(Box, { tag: "date-range-input-actions", style: styles.actions, children: [onCancel && _jsx(Button, { title: mots.retour, variant: "tertiary", size: "sm", leading: "ArrowLeft", onPress: onCancel }), _jsx(Button, { title: mots.appliquer, variant: "primary", size: "sm", disabled: !plage.debut, onPress: () => plage.debut && onApply({ debut: plage.debut, fin: plage.fin ?? plage.debut }) })] })] }));
36
+ };
@@ -0,0 +1,34 @@
1
+ import React from 'react';
2
+ declare const _default: {
3
+ title: string;
4
+ tags: "ui"[];
5
+ experimental: true;
6
+ description: string;
7
+ component: (props: import("./DateRangeInput").DateRangeInputProps) => React.JSX.Element;
8
+ styleFn: () => {
9
+ container: {
10
+ display: "flex";
11
+ flexDirection: "column";
12
+ gap: string | number;
13
+ padding: string | number;
14
+ };
15
+ titre: {
16
+ color: import("@alveole/theme").ThemeColor;
17
+ fontSize: 14;
18
+ lineHeight: 20;
19
+ letterSpacing: 0;
20
+ fontFamily: string;
21
+ fontWeight?: import("react-native").TextStyle["fontWeight"];
22
+ };
23
+ actions: {
24
+ flexDirection: "row";
25
+ justifyContent: "flex-end";
26
+ gap: string | number;
27
+ };
28
+ };
29
+ };
30
+ export default _default;
31
+ export declare const Default: () => React.JSX.Element;
32
+ export declare const EnAnglaisSansValeur: () => React.JSX.Element;
33
+ export * as Sources from './DateRangeInput.stories.sources';
34
+ //# sourceMappingURL=DateRangeInput.stories.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DateRangeInput.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/DateRangeInput/DateRangeInput.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAO1B,wBAQkB;AAElB,eAAO,MAAM,OAAO,yBASnB,CAAC;AAEF,eAAO,MAAM,mBAAmB,yBAI/B,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,kCAAkC,CAAC"}
@@ -0,0 +1,24 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { format } from 'date-fns/format';
3
+ import React from 'react';
4
+ import { Box } from '../../core/Box';
5
+ import { Typography } from '../../core/Typography';
6
+ import { DateRangeInput } from './DateRangeInput';
7
+ import { useStyles } from './DateRangeInput.styles';
8
+ export default {
9
+ title: 'DateRangeInput',
10
+ tags: ['ui'],
11
+ experimental: true,
12
+ description: "Choix d'une plage de dates au calendrier, sans heure. Le mois et l'année se changent par les flèches ou en cliquant dessus. TimeRangeInput y ajoute les heures et l'UTC.",
13
+ component: DateRangeInput,
14
+ styleFn: useStyles,
15
+ };
16
+ export const Default = () => {
17
+ const [value, setValue] = React.useState({ debut: new Date(2026, 9, 14), fin: new Date(2026, 9, 22) });
18
+ return (_jsxs(Box, { gap: "1W", children: [_jsx(DateRangeInput, { value: value, onApply: setValue, onCancel: () => undefined }), _jsx(Typography, { children: `${format(value.debut, 'dd/MM/yyyy')} – ${format(value.fin, 'dd/MM/yyyy')}` })] }));
19
+ };
20
+ export const EnAnglaisSansValeur = () => {
21
+ const [value, setValue] = React.useState();
22
+ return _jsx(DateRangeInput, { title: "Date range", local: "en", value: value, onApply: setValue });
23
+ };
24
+ export * as Sources from './DateRangeInput.stories.sources';
@@ -0,0 +1,8 @@
1
+ export declare const Default: () => string;
2
+ export declare const EnAnglaisSansValeur: () => string;
3
+ export declare const storySources: {
4
+ readonly Default: () => string;
5
+ readonly EnAnglaisSansValeur: () => string;
6
+ };
7
+ export type StorySourceName = keyof typeof storySources;
8
+ //# sourceMappingURL=DateRangeInput.stories.sources.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DateRangeInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/DateRangeInput/DateRangeInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAga,CAAC;AAErb,eAAO,MAAM,mBAAmB,cAAyN,CAAC;AAE1P,eAAO,MAAM,YAAY;;;CAGf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
@@ -0,0 +1,8 @@
1
+ // This file is generated. Do not edit manually.
2
+ // Source: src/ui/DateRangeInput/DateRangeInput.stories.tsx
3
+ export const Default = () => "export const Default = () => {\n const [value, setValue] = React.useState<PlageDeDates>({ debut: new Date(2026, 9, 14), fin: new Date(2026, 9, 22) });\n\n return (\n <Box gap=\"1W\">\n <DateRangeInput value={value} onApply={setValue} onCancel={() => undefined} />\n <Typography>{`${format(value.debut, 'dd/MM/yyyy')} – ${format(value.fin, 'dd/MM/yyyy')}`}</Typography>\n </Box>\n );\n};";
4
+ export const EnAnglaisSansValeur = () => "export const EnAnglaisSansValeur = () => {\n const [value, setValue] = React.useState<PlageDeDates>();\n\n return <DateRangeInput title=\"Date range\" local=\"en\" value={value} onApply={setValue} />;\n};";
5
+ export const storySources = {
6
+ Default,
7
+ EnAnglaisSansValeur,
8
+ };
@@ -0,0 +1,22 @@
1
+ export declare const useStyles: () => {
2
+ container: {
3
+ display: "flex";
4
+ flexDirection: "column";
5
+ gap: string | number;
6
+ padding: string | number;
7
+ };
8
+ titre: {
9
+ color: import("@alveole/theme").ThemeColor;
10
+ fontSize: 14;
11
+ lineHeight: 20;
12
+ letterSpacing: 0;
13
+ fontFamily: string;
14
+ fontWeight?: import("react-native").TextStyle["fontWeight"];
15
+ };
16
+ actions: {
17
+ flexDirection: "row";
18
+ justifyContent: "flex-end";
19
+ gap: string | number;
20
+ };
21
+ };
22
+ //# sourceMappingURL=DateRangeInput.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DateRangeInput.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/DateRangeInput/DateRangeInput.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;CAgBnB,CAAC"}
@@ -0,0 +1,18 @@
1
+ import { makeStyles } from '@alveole/theme';
2
+ export const useStyles = makeStyles(({ spacing, color, text }) => ({
3
+ container: {
4
+ display: 'flex',
5
+ flexDirection: 'column',
6
+ gap: spacing('2W'),
7
+ padding: spacing('2W'),
8
+ },
9
+ titre: {
10
+ ...text['Corps de texte'].SM.Medium,
11
+ color: color.light.text['title-grey'],
12
+ },
13
+ actions: {
14
+ flexDirection: 'row',
15
+ justifyContent: 'flex-end',
16
+ gap: spacing('1W'),
17
+ },
18
+ }));
@@ -0,0 +1,4 @@
1
+ export * from './DateRangeInput';
2
+ export { dureeRelative, libelleDePlage } from './plage';
3
+ export type { DureeRelative, PlageDeTemps } from './plage';
4
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/DateRangeInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}
@@ -0,0 +1,2 @@
1
+ export * from './DateRangeInput';
2
+ export { dureeRelative, libelleDePlage } from './plage';
@@ -0,0 +1,39 @@
1
+ import type { Locale } from 'date-fns/locale';
2
+ /** Une durée qui remonte depuis maintenant : un nombre suivi de h (heures), d (jours) ou w (semaines). */
3
+ export type DureeRelative = `${number}${'h' | 'd' | 'w'}`;
4
+ export type PlageDeTemps = {
5
+ type: 'relative';
6
+ duree: DureeRelative;
7
+ } | {
8
+ type: 'absolue';
9
+ debut: Date;
10
+ fin: Date;
11
+ utc: boolean;
12
+ };
13
+ export type PlageEnCours = {
14
+ debut?: Date;
15
+ fin?: Date;
16
+ };
17
+ /** Les douze mois dans la langue du calendrier, la valeur étant le numéro de mois JavaScript (0 à 11). */
18
+ export declare const optionsDesMois: (locale: Locale) => {
19
+ value: string;
20
+ label: string;
21
+ }[];
22
+ export declare const optionsDesAnnees: (annee: number) => {
23
+ value: string;
24
+ label: string;
25
+ }[];
26
+ /** Les jours du mois, précédés d'une case vide par jour de semaine avant le 1er (semaine du lundi). */
27
+ export declare const joursDuMois: (annee: number, mois: number) => (number | null)[];
28
+ export declare const choisirJour: (plage: PlageEnCours, jour: Date) => PlageEnCours;
29
+ /** Place d'une case du calendrier dans la plage : la pastille s'arrondit aux bornes et aux bords de semaine. */
30
+ export declare const formeDuJour: (jour: Date, colonne: number, plage: PlageEnCours) => {
31
+ dansPlage: boolean;
32
+ debut: boolean;
33
+ fin: boolean;
34
+ };
35
+ /** Le jour choisi au calendrier, à l'heure saisie `HH:MM`, lue en UTC ou en heure locale. */
36
+ export declare const composerDate: (jour: Date, heure: string, utc: boolean) => Date;
37
+ export declare const dureeRelative: (saisie: string) => DureeRelative | undefined;
38
+ export declare const libelleDePlage: (plage: PlageDeTemps, local?: "fr" | "en") => string;
39
+ //# sourceMappingURL=plage.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"plage.d.ts","sourceRoot":"","sources":["../../../src/ui/DateRangeInput/plage.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAI9C,0GAA0G;AAC1G,MAAM,MAAM,aAAa,GAAG,GAAG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,CAAC;AAE1D,MAAM,MAAM,YAAY,GACtB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,aAAa,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,IAAI,CAAC;IAAC,GAAG,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzG,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,CAAC,EAAE,IAAI,CAAC;IAAC,GAAG,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAExD,0GAA0G;AAC1G,eAAO,MAAM,cAAc,GAAI,QAAQ,MAAM;;;GAIzC,CAAC;AAGL,eAAO,MAAM,gBAAgB,GAAI,OAAO,MAAM;;;GAC4D,CAAC;AAE3G,uGAAuG;AACvG,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,EAAE,MAAM,MAAM,KAAG,CAAC,MAAM,GAAG,IAAI,CAAC,EAKxE,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,YAAY,EAAE,MAAM,IAAI,KAAG,YAG7D,CAAC;AAIF,gHAAgH;AAChH,eAAO,MAAM,WAAW,GAAI,MAAM,IAAI,EAAE,SAAS,MAAM,EAAE,OAAO,YAAY;;;;CAQ3E,CAAC;AAEF,6FAA6F;AAC7F,eAAO,MAAM,YAAY,GAAI,MAAM,IAAI,EAAE,OAAO,MAAM,EAAE,KAAK,OAAO,KAAG,IAKtE,CAAC;AAIF,eAAO,MAAM,aAAa,GAAI,QAAQ,MAAM,KAAG,aAAa,GAAG,SAG9D,CAAC;AAcF,eAAO,MAAM,cAAc,GAAI,OAAO,YAAY,EAAE,QAAO,IAAI,GAAG,IAAW,KAAG,MAGe,CAAC"}