@mtes-mct/monitor-ui 1.5.1 → 1.6.0

package/assets/rsuite-override.css

@@ -9,10 +9,10 @@
   --cultured: #f7f7fa;
   --white: #ffffff;
 
-  --steel-blue: #5e87ad;
-  --steel-blue-25: #d6e1ea;
-  --blue-jeans: #42a7ff;
-  --blue-jeans-25: #cfe9ff;
+  --blue-yonder: #567a9e;
+  --blue-yonder-25: #d4dde7;
+  --blue-gray: #5697d2;
+  --blue-gray-25: #d4e5f4;
 
   --mediumSeaGreen: #29b361;
   --golden-poppy: #fac11a;
@@ -33,47 +33,45 @@
   /* btn vars */
   --rs-btn-primary-text: var(--white);
   --rs-btn-primary-bg: var(--charcoal);
-  --rs-btn-primary-hover-bg: var(--steel-blue);
-  --rs-btn-link-text: var(--charcoal);
+  --rs-btn-default-bg: transparent;
+  --rs-btn-primary-hover-bg: var(--blue-yonder);
+  --rs-btn-link-text: var(--slateGray);
+  --rs-btn-link-hover-text: var(--blue-yonder);
+  --rs-btn-link-active-text: var(--blue-gray);
   --rs-btn-ghost-text: var(--charcoal);
   --rs-btn-ghost-border: var(--charcoal);
-  --rs-btn-ghost-hover-border: var(--steel-blue);
-  --rs-btn-ghost-hover-text: var(--steel-blue);
+  --rs-btn-ghost-hover-border: var(--blue-yonder);
+  --rs-btn-ghost-hover-text: var(--blue-yonder);
+  --rs-iconbtn-addon: transparent;
 
   --rs-iconbtn-primary-addon: var(--charcoal);
-  --rs-iconbtn-primary-activated-addon: var(--steel-blue);
-
-  --rs-btn-primary-active-bg: var(--steel-blue);
-  --rs-iconbtn-primary-pressed-addon: var(--steel-blue);
+  --rs-btn-default-hover-bg: var(--blue-yonder);
+  --rs-iconbtn-activated-addon: var(--blue-yonder);
+  --rs-btn-default-hover-text: var(--white);
+  --rs-iconbtn-primary-activated-addon: var(--blue-yonder);
+  --rs-btn-primary-active-bg: var(--blue-gray);
+  --rs-iconbtn-primary-pressed-addon: var(--blue-gray);
+  --rs-btn-ghost-active-text: var(--blue-gray);
+  --rs-btn-subtle-text: var(--gunMetal);
+  --rs-btn-subtle-hover-bg: transparent;
+  --rs-btn-subtle-hover-text: var(--blue-yonder);
+  --rs-btn-subtle-active-bg: transparent;
+  --rs-btn-subtle-active-text: var(--blue-gray);
 
   /* Checkbox vars */
   --rs-checkbox-disabled-bg: var(--white);
 
   /* input vars */
   --rs-input-bg: var(--gainsboro);
+  --rs-input-focus-border: var(--blue-gray);
 
-  --rs-menuitem-active-text: var(--steel-blue);
-
+  --rs-menuitem-active-text: var(--blue-gray);
+  --rs-listbox-option-hover-bg: var(--blue-yonder-25);
+  --rs-listbox-option-selected-bg: var(--blue-gray-25);
   /* tags */
   --rs-tag-bg: var(--gainsboro);
 }
 
-/*
-  Default font size should be 16px instead of 13px as stated in Rsuite CSS,
-  so we need to apply this fix in order to have consistent 16px-based rems
-  while overriding both Rsuite CSS and mini.css.
-*/
-html {
-  font-size: 16px;
-}
-
-/*
-  We reduce the default font-size to 13px for the app.
- */
-html * {
-  font-size: 0.8125rem;
-}
-
 label {
   color: var(--slateGray);
   font-size: 13px;
@@ -83,18 +81,12 @@ label {
 .rs-input {
   border-radius: 0;
   color: var(--gunMetal);
-  padding-left: 5px;
 }
 
 .rs-input.ghost {
   background-color: var(--white);
 }
 
-/* rs input textarea */
-textarea {
-  padding: 5px;
-}
-
 .rs-input-group,
 .rs-input-group:not(.rs-input-group-inside) .rs-auto-complete:first-child .rs-input,
 .rs-input-group:not(.rs-input-group-inside) .rs-form-control-wrapper:first-child > .rs-input,
@@ -107,6 +99,13 @@ textarea {
   border-radius: 0;
 }
 
+.rs-picker-toggle-active,
+.rs-picker.rs-picker-focused {
+  box-shadow: none;
+  border: 1px solid var(--blue-gray) !important;
+  border-radius: 0;
+}
+
 .rs-input-group-addon.primary {
   background-color: var(--rs-btn-primary-bg);
 }
@@ -128,27 +127,108 @@ textarea {
 }
 
 .rs-btn-sm {
-  padding-top: 2px;
-  padding-bottom: 2px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+  font-size: 15px;
+}
+
+.rs-btn-md {
+  height: 30px;
 }
 
+.rs-btn-icon-with-text.rs-btn-md.rs-btn-icon-placement-left,
 .rs-btn-icon-with-text.rs-btn.rs-btn-icon-placement-left {
+  padding-left: 32px;
   padding-top: 6px;
   padding-bottom: 6px;
 }
 
 .rs-btn-icon-with-text.rs-btn-sm.rs-btn-icon-placement-left {
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+.rs-btn-ghost:hover {
+  background-color: transparent;
+}
+
+.rs-btn-ghost.rs-btn-active,
+.rs-btn-ghost:active {
+  background-color: var(--blue-gray-25);
+  border-color: var(--blue-gray);
+}
+
+.rs-btn-ghost.rs-btn-icon-with-text:hover > .rs-icon {
+  background-color: transparent;
+}
+
+.rs-btn-icon-with-text:focus > .rs-icon,
+.rs-btn-icon-with-text:hover > .rs-icon {
+  background-color: transparent;
+}
+
+.rs-btn-ghost.rs-btn,
+.rs-btn-ghost.rs-btn-md,
+.rs-btn-icon-with-text.rs-btn-md.rs-btn-icon-placement-left.rs-btn-ghost,
+.rs-btn-icon-with-text.rs-btn.rs-btn-icon-placement-left.rs-btn-ghost {
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+.rs-btn-ghost.rs-btn-sm,
+.rs-btn-icon-with-text.rs-btn-sm.rs-btn-icon-placement-left.rs-btn-ghost {
   padding-top: 2px;
   padding-bottom: 2px;
-  padding-left: 26px;
 }
 
-.rs-btn-icon.rs-btn {
-  padding: 7px;
+.rs-btn-icon.rs-btn,
+.rs-btn-icon.rs-btn-md {
+  padding: 5px;
+}
+
+.rs-btn-subtle.rs-btn-icon.rs-btn-md {
+  padding: 0;
 }
 
 .rs-btn-icon.rs-btn-sm {
-  padding: 2px;
+  padding: 0px;
+}
+
+.rs-btn-icon.rs-btn-lg {
+  padding: 7px;
+  height: 40px;
+}
+
+.rs-btn-icon.rs-btn-ghost {
+  padding: 4px;
+}
+
+.rs-btn-icon.rs-btn-lg.rs-btn-ghost {
+  padding: 6px;
+}
+
+.rs-btn-icon-with-text.rs-btn-sm {
+  padding-top: 5px;
+  padding-bottom: 4px;
+  line-height: 15px;
+  font-size: 11px;
+}
+
+.rs-btn-icon.rs-btn > .rs-icon,
+.rs-btn-icon.rs-btn-md > .rs-icon {
+  width: 20px;
+  height: 20px;
+}
+
+.rs-btn-icon.rs-btn-lg > .rs-icon {
+  width: 26px;
+  height: 26px;
+}
+
+.rs-btn-icon.rs-btn-sm > .rs-icon {
+  width: 14px;
+  height: 14px;
+  font-size: 14px;
 }
 
 .rs-btn-icon-with-text.rs-btn {
@@ -158,12 +238,28 @@ textarea {
 .rs-btn-icon-with-text.rs-btn > .rs-icon {
   width: 30px;
   height: 30px;
-  padding: 8px;
+  padding: 5px;
 }
 
 .rs-btn-icon-with-text.rs-btn-sm > .rs-icon {
   width: 24px;
   height: 24px;
+  padding: 4px;
+}
+
+.rs-btn-link,
+.rs-btn-link.rs-btn-md {
+  font-size: 13px;
+  text-decoration: underline;
+}
+
+.rs-btn-link.rs-btn-disabled,
+.rs-btn-link:disabled {
+  text-decoration: underline;
+}
+
+.rs-btn-link.rs-btn-sm {
+  font-size: 11px;
 }
 
 /* checkbox */
@@ -174,7 +270,6 @@ textarea {
 .rs-checkbox-checker {
   padding-bottom: 0;
   padding-left: 36px;
-  min-height: 0px;
 }
 
 .rs-checkbox label {
@@ -229,13 +324,13 @@ textarea {
 }
 
 label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
-  border-color: var(--steel-blue);
-  background: var(--steel-blue-25) 0% 0% no-repeat padding-box;
+  border-color: var(--blue-yonder);
+  background: var(--blue-yonder-25) 0% 0% no-repeat padding-box;
 }
 
 .rs-checkbox-checked label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
-  border-color: var(--steel-blue);
-  background: var(--steel-blue) 0% 0% no-repeat padding-box;
+  border-color: var(--blue-yonder);
+  background: var(--blue-yonder) 0% 0% no-repeat padding-box;
 }
 
 .rs-checkbox-checked .rs-checkbox-wrapper .rs-checkbox-inner::after {
@@ -253,10 +348,6 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
 
 /* radio */
 
-.rs-radio-group {
-  border-radius: 2px;
-}
-
 .rs-radio-wrapper::before,
 .rs-radio-wrapper .rs-radio-inner::before,
 .rs-radio-wrapper {
@@ -316,14 +407,35 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
   line-height: 38px;
 }
 
-.rs-dropdown-item-with-icon > svg {
-  vertical-align: text-bottom;
+.rs-dropdown .rs-btn {
+  padding-left: 32px;
+}
+
+.rs-dropdown .rs-btn > .rs-dropdown-toggle-icon {
+  width: 30px;
+  height: 30px;
+  padding: 5px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  margin: 0;
+}
+
+.rs-dropdown .rs-btn.rs-btn-sm > .rs-dropdown-toggle-icon {
+  width: 24px;
+  height: 24px;
+  padding: 3px;
 }
 
 .rs-dropdown-item:not(:last-child) {
   border-bottom: 1px solid var(--lightGray);
 }
 
+svg.rs-dropdown-item-menu-icon {
+  vertical-align: middle;
+  margin-right: 10px;
+}
+
 /* Tags */
 
 .rs-tag-default {
@@ -424,7 +536,7 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
 }
 
 .rs-picker-menu {
-  border-radius: 2px;
+  border-radius: 0;
   z-index: 9999 !important;
 }
 
@@ -448,10 +560,6 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
   border: 1px solid var(--slateGray) !important;
 }
 
-.rs-picker-toggle.rs-btn-sm {
-  border-radius: 2px !important;
-}
-
 .rs-calendar,
 .rs-calendar-header,
 .rs-calendar-table-cell-content {
@@ -590,29 +698,18 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
 .rs-modal-header-close {
   background: unset;
   right: 10px !important;
-  top: 6px !important;
+  top: 9px !important;
   font-size: 15px !important;
   color: var(--gainsboro) !important;
 }
 
-/* .rs-picker-default .rs-btn,
-.rs-picker-input .rs-btn,
-.rs-picker-default .rs-picker-toggle,
-.rs-picker-input .rs-picker-toggle {
-  background: unset !important;
-} */
-
 .rs-picker-tag-wrapper {
   padding-bottom: 0;
 }
 
 .rs-picker-input {
+  border-radius: 0;
   vertical-align: top;
-  border-radius: 2px;
-}
-
-.rs-picker-toggle {
-  border-radius: 2px;
 }
 
 .rs-picker-toggle-placeholder {
@@ -635,13 +732,20 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
   color: var(--slateGray);
   font-size: 13px;
   font-weight: normal;
-  width: inherit;
+}
+
+.rs-picker-select-menu-item {
+  padding: 4px 12px;
 }
 
 .grouped .rs-picker-select-menu-item {
   padding-left: 0px;
 }
 
+.rs-picker-select-menu-items {
+  margin-bottom: 0;
+}
+
 .rs-picker-select-menu-items.rs-picker-select-menu-group.rs-picker-select-menu-group-title {
   font-size: 13px;
   color: var(--slateGray);
@@ -652,10 +756,6 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
   color: var(--slateGray);
 }
 
-.rs-picker-toggle-clean:hover {
-  padding: 4px 0px !important;
-}
-
 .rs-picker-check-menu-group[role='listitem'] {
   height: 48px !important;
 }
@@ -691,8 +791,7 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner:before {
 .rs-table-hover .rs-table-row:not(.rs-table-row-header):hover,
 .rs-table-hover .rs-table-row:hover .rs-table-cell-group,
 .rs-table-hover .rs-table-row:hover .rs-table-cell {
-  /* blueYonder 25 */
-  background: #D4DDE7 !important;
+  background: var(--blue-yonder-25) !important;
 }
 
 .rs-table-cell,

package/elements/Field.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+export declare type FieldProps = HTMLAttributes<HTMLDivElement>;
+export declare const Field: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/elements/Fieldset.d.ts

@@ -0,0 +1,3 @@
+import type { FieldsetHTMLAttributes } from 'react';
+export declare type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>;
+export declare function Fieldset(nativeProps: FieldsetProps): JSX.Element;

package/elements/Label.d.ts

@@ -0,0 +1,3 @@
+import type { LabelHTMLAttributes } from 'react';
+export declare type LabelProps = LabelHTMLAttributes<HTMLLabelElement>;
+export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {}, never>;

package/elements/Legend.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'react';
+export declare type LegendProps = HTMLAttributes<HTMLLegendElement> & {
+    isHidden?: boolean;
+};
+export declare function Legend({ isHidden, ...nativeProps }: LegendProps): JSX.Element;
+export declare const StyledLabel: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {
+    isHidden: boolean;
+}, never>;

package/fields/MultiCheckbox.d.ts

@@ -0,0 +1,11 @@
+import type { Option } from '../types';
+import type { Promisable } from 'type-fest';
+export declare type MultiCheckboxProps = {
+    defaultValue?: string[];
+    isInline?: boolean;
+    label?: string;
+    name: string;
+    onChange?: (nextValue: string[] | undefined) => Promisable<void>;
+    options: Option[];
+};
+export declare function MultiCheckbox({ defaultValue, isInline, label, name, onChange, options }: MultiCheckboxProps): JSX.Element;

package/fields/MultiRadio.d.ts

@@ -0,0 +1,11 @@
+import type { Option } from '../types';
+import type { Promisable } from 'type-fest';
+export declare type MultiRadioProps = {
+    defaultValue?: string;
+    isInline?: boolean;
+    label?: string;
+    name: string;
+    onChange?: (nextValue: string | undefined) => Promisable<void>;
+    options: Option[];
+};
+export declare function MultiRadio({ defaultValue, isInline, label, name, onChange, options }: MultiRadioProps): JSX.Element;

package/formiks/FormikMultiCheckbox.d.ts

@@ -0,0 +1,3 @@
+import type { MultiCheckboxProps } from '../fields/MultiCheckbox';
+export declare type FormikMultiCheckboxProps = Omit<MultiCheckboxProps, 'defaultValue' | 'onChange'>;
+export declare function FormikMultiCheckbox({ name, ...originalProps }: FormikMultiCheckboxProps): JSX.Element;

package/formiks/FormikMultiRadio.d.ts

@@ -0,0 +1,3 @@
+import type { MultiRadioProps } from '../fields/MultiRadio';
+export declare type FormikMultiRadioProps = Omit<MultiRadioProps, 'defaultValue' | 'onChange'>;
+export declare function FormikMultiRadio({ name, ...originalProps }: FormikMultiRadioProps): JSX.Element;

package/index.d.ts

@@ -1,9 +1,15 @@
 export * as MUI from './constants';
 export { THEME } from './theme';
+export { Field } from './elements/Field';
+export { Fieldset } from './elements/Fieldset';
+export { Label } from './elements/Label';
+export { Legend } from './elements/Legend';
 export { Checkbox } from './fields/Checkbox';
 export { DateRangePicker } from './fields/DateRangePicker';
 export { DatePicker } from './fields/DatePicker';
+export { MultiCheckbox } from './fields/MultiCheckbox';
 export { MultiSelect } from './fields/MultiSelect';
+export { MultiRadio } from './fields/MultiRadio';
 export { Select } from './fields/Select';
 export { Textarea } from './fields/Textarea';
 export { TextInput } from './fields/TextInput';
@@ -11,16 +17,24 @@ export { FormikCheckbox } from './formiks/FormikCheckbox';
 export { FormikDatePicker } from './formiks/FormikDatePicker';
 export { FormikDateRangePicker } from './formiks/FormikDateRangePicker';
 export { FormikEffect } from './formiks/FormikEffect';
+export { FormikMultiCheckbox } from './formiks/FormikMultiCheckbox';
 export { FormikMultiSelect } from './formiks/FormikMultiSelect';
+export { FormikMultiRadio } from './formiks/FormikMultiRadio';
 export { FormikSelect } from './formiks/FormikSelect';
 export { FormikTextarea } from './formiks/FormikTextarea';
 export { FormikTextInput } from './formiks/FormikTextInput';
 export { ThemeProvider } from './ThemeProvider';
 export type { PartialTheme, Theme } from './theme';
+export type { FieldProps } from './elements/Field';
+export type { FieldsetProps } from './elements/Fieldset';
+export type { LabelProps } from './elements/Label';
+export type { LegendProps } from './elements/Legend';
 export type { CheckboxProps } from './fields/Checkbox';
 export type { DateRangePickerProps } from './fields/DateRangePicker';
 export type { DatePickerProps } from './fields/DatePicker';
+export type { MultiCheckboxProps } from './fields/MultiCheckbox';
 export type { MultiSelectProps } from './fields/MultiSelect';
+export type { MultiRadioProps } from './fields/MultiRadio';
 export type { SelectProps } from './fields/Select';
 export type { TextareaProps } from './fields/Textarea';
 export type { TextInputProps } from './fields/TextInput';
@@ -28,7 +42,9 @@ export type { FormikCheckboxProps } from './formiks/FormikCheckbox';
 export type { FormikDatePickerProps } from './formiks/FormikDatePicker';
 export type { FormikDateRangePickerProps } from './formiks/FormikDateRangePicker';
 export type { FormikEffectProps } from './formiks/FormikEffect';
+export type { FormikMultiCheckboxProps } from './formiks/FormikMultiCheckbox';
 export type { FormikMultiSelectProps } from './formiks/FormikMultiSelect';
+export type { FormikMultiRadioProps } from './formiks/FormikMultiRadio';
 export type { FormikSelectProps } from './formiks/FormikSelect';
 export type { FormikTextareaProps } from './formiks/FormikTextarea';
 export type { FormikTextInputProps } from './formiks/FormikTextInput';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mtes-mct/monitor-ui",
   "description": "Common React UI components and styles for Monitorfish and Monitorenv.",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "license": "AGPL-3.0",
   "engines": {
     "node": "18",
@@ -23,8 +23,8 @@
   "lint-staged": {
     "*.{json,md,yaml,yml}": "prettier --write",
     "*.{ts,tsx}": [
-      "eslint",
-      "bash -c 'npm run test:type:partial'"
+      "yarn eslint --ext js,jsx,ts,tsx",
+      "bash -c 'npm run test:type'"
     ]
   },
   "packageManager": "yarn@3.2.4",

package/src/elements/Field.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+const Field = styled.div `
+  display: flex;
+  flex-direction: column;
+`;
+
+export { Field };
+//# sourceMappingURL=Field.js.map

package/src/elements/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sources":["../../../src/elements/Field.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nimport type { HTMLAttributes } from 'react'\n\nexport type FieldProps = HTMLAttributes<HTMLDivElement>\nexport const Field = styled.div`\n  display: flex;\n  flex-direction: column;\n`\n"],"names":[],"mappings":";;AAKa,MAAA,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA,CAAA;;;;;;;"}

package/src/elements/Fieldset.js

@@ -0,0 +1,15 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { Field } from './Field.js';
+
+function Fieldset(nativeProps) {
+    return jsx(StyledField, { as: "fieldset", ...nativeProps });
+}
+const StyledField = styled(Field) `
+  border: 0;
+  margin: 0;
+  padding: 0;
+`;
+
+export { Fieldset };
+//# sourceMappingURL=Fieldset.js.map

package/src/elements/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","sources":["../../../src/elements/Fieldset.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nimport { Field } from './Field'\n\nimport type { FieldsetHTMLAttributes } from 'react'\n\nexport type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>\nexport function Fieldset(nativeProps: FieldsetProps) {\n  return <StyledField as=\"fieldset\" {...nativeProps} />\n}\n\nconst StyledField = styled(Field)`\n  border: 0;\n  margin: 0;\n  padding: 0;\n`\n"],"names":["_jsx"],"mappings":";;;;AAOM,SAAU,QAAQ,CAAC,WAA0B,EAAA;IACjD,OAAOA,GAAA,CAAC,WAAW,EAAC,EAAA,EAAE,EAAC,UAAU,EAAA,GAAK,WAAW,EAAA,CAAI,CAAA;AACvD,CAAC;AAED,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA,CAAA;;;;CAIhC;;;;"}

package/src/elements/Label.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const Label = styled.label `
+  color: ${p => p.theme.color.slateGray};
+  font-size: 13px;
+  line-height: 1.4;
+  margin-bottom: 0.5rem;
+`;
+
+export { Label };
+//# sourceMappingURL=Label.js.map

package/src/elements/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sources":["../../../src/elements/Label.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nimport type { LabelHTMLAttributes } from 'react'\n\nexport type LabelProps = LabelHTMLAttributes<HTMLLabelElement>\nexport const Label = styled.label`\n  color: ${p => p.theme.color.slateGray};\n  font-size: 13px;\n  line-height: 1.4;\n  margin-bottom: 0.5rem;\n`\n"],"names":[],"mappings":";;AAKa,MAAA,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA,CAAA;WACtB,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAA;;;;;;;;"}

package/src/elements/Legend.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import { Label } from './Label.js';
+
+function Legend({ isHidden = false, ...nativeProps }) {
+    return jsx(StyledLabel, { as: "legend", isHidden: isHidden, ...nativeProps });
+}
+const StyledLabel = styled(Label) `
+  display: ${p => (p.isHidden ? 'none' : 'table')};
+`;
+
+export { Legend, StyledLabel };
+//# sourceMappingURL=Legend.js.map

package/src/elements/Legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Legend.js","sources":["../../../src/elements/Legend.tsx"],"sourcesContent":["import styled from 'styled-components'\n\nimport { Label } from './Label'\n\nimport type { HTMLAttributes } from 'react'\n\nexport type LegendProps = HTMLAttributes<HTMLLegendElement> & {\n  isHidden?: boolean\n}\nexport function Legend({ isHidden = false, ...nativeProps }: LegendProps) {\n  return <StyledLabel as=\"legend\" isHidden={isHidden} {...nativeProps} />\n}\n\nexport const StyledLabel = styled(Label)<{\n  isHidden: boolean\n}>`\n  display: ${p => (p.isHidden ? 'none' : 'table')};\n`\n"],"names":["_jsx"],"mappings":";;;;AASM,SAAU,MAAM,CAAC,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,WAAW,EAAe,EAAA;AACtE,IAAA,OAAOA,GAAC,CAAA,WAAW,EAAC,EAAA,EAAE,EAAC,QAAQ,EAAC,QAAQ,EAAE,QAAQ,EAAM,GAAA,WAAW,GAAI,CAAA;AACzE,CAAC;MAEY,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAEtC,CAAA;AACW,WAAA,EAAA,CAAC,KAAK,CAAC,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;;;;;"}

package/src/fields/DatePicker/index.js

@@ -1,6 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRef, useMemo, useCallback, useEffect } from 'react';
 import styled from 'styled-components';
+import { Fieldset } from '../../elements/Fieldset.js';
+import { Legend } from '../../elements/Legend.js';
 import { useForceUpdate } from '../../hooks/useForceUpdate.js';
 import { getLocalizedDayjs } from '../../utils/getLocalizedDayjs.js';
 import { getUtcizedDayjs } from '../../utils/getUtcizedDayjs.js';
@@ -100,11 +102,6 @@ function DatePicker({ defaultValue, isHistorical = false, isLabelHidden = false,
     }, [handleClickOutside]);
     return (jsxs(Fieldset, { className: "DateRangePicker", children: [jsx(Legend, { isHidden: isLabelHidden, children: label }), jsxs(Box, { children: [jsx(Field, { children: jsx(DateInput, { ref: dateInputRef, defaultValue: selectedDateTupleRef.current, isForcedFocused: isCalendarPickerOpenRef.current, onChange: handleDateInputFilled, onClick: openCalendarPicker, onNext: handleDateInputNext }) }), withTime && (jsx(Field, { isTimeField: true, children: jsx(TimeInput, { ref: timeInputRef, defaultValue: selectedTimeTupleRef.current, minutesRange: minutesRange, onBack: () => dateInputRef.current.focus(true), onChange: handleTimeInputFilled, onFocus: closeCalendarPicker, onPrevious: () => dateInputRef.current.focus(true) }) }))] }), isCalendarPickerOpenRef.current && (jsx(CalendarPicker, { defaultValue: rangeCalendarPickerDefaultValue, isHistorical: isHistorical, onChange: handleCalendarPickerChange }))] }));
 }
-const Fieldset = styled.fieldset `
-  border: 0;
-  margin: 0;
-  padding: 0;
-`;
 const Box = styled.div `
   * {
     font-weight: 500;
@@ -115,13 +112,6 @@ const Box = styled.div `
   font-size: 13px;
   position: relative;
 `;
-const Legend = styled.legend `
-  color: ${p => p.theme.color.slateGray};
-  display: ${p => (p.isHidden ? 'none' : 'table')};
-  font-weight: inherit;
-  margin-bottom: 0.5rem;
-  padding: 0;
-`;
 const Field = styled.span `
   font-size: inherit;
   margin-left: ${p => {