epam · siarheiyelin · Dec 7, 2022
diff --git a/app/src/common/docs/ComponentEditor.tsx b/app/src/common/docs/ComponentEditor.tsx
@@ -104,7 +104,8 @@ export class ComponentEditor extends React.Component<ComponentEditorProps<any>,
         super(props);
 
         if (this.props.propsDocPath !== undefined) {
-            requireContext(`${ this.props.propsDocPath }`).then(((module: any) => {
+            requireContext(`${ this.props.propsDocPath }`).then(((m: any) => {
+                const module = m.default;
                 module.props.forEach((prop: any) => {
                     if (typeof prop.examples === 'function') {
                         this.propExamples[prop.name] = prop.examples(this.propSamplesCreationContext);

diff --git a/epam-promo/components/buttons/docs/button.doc.tsx b/epam-promo/components/buttons/docs/button.doc.tsx
@@ -20,4 +20,4 @@ const ButtonDoc = new DocBuilder<ButtonProps & ButtonMods>({ name: 'Button', com
     .prop('fill', { examples: allFillStyles, defaultValue: 'solid' })
     .withContexts(DefaultContext, FormContext);
 
-export = ButtonDoc;
+export default ButtonDoc;
diff --git a/epam-promo/components/buttons/docs/iconButton.doc.tsx b/epam-promo/components/buttons/docs/iconButton.doc.tsx
@@ -10,4 +10,4 @@ const IconButtonDoc = new DocBuilder<IconButtonProps>({ name: 'IconButton', comp
     .prop('color', { renderEditor: (editable, examples) => <ColorPicker colors={ examples.map(i => ({ value: i, hex: colors[i] })) } { ...editable } />, examples: allIconColors })
     .withContexts(DefaultContext, FormContext);
 
-export = IconButtonDoc;
+export default IconButtonDoc;
diff --git a/epam-promo/components/buttons/docs/linkButton.doc.ts b/epam-promo/components/buttons/docs/linkButton.doc.ts
@@ -13,4 +13,4 @@ const LinkButtonDoc = new DocBuilder<ButtonProps & LinkButtonMods>({ name: 'Link
     ], type: 'string' })
     .withContexts(DefaultContext, FormContext);
 
-export = LinkButtonDoc;
+export default LinkButtonDoc;
diff --git a/epam-promo/components/buttons/docs/tabButton.doc.ts b/epam-promo/components/buttons/docs/tabButton.doc.ts
@@ -16,4 +16,4 @@ const TabButtonDoc = new DocBuilder<TabButtonMods & ButtonProps>({ name: 'TabBut
     .prop('count', { examples: [0, 1, 5, 88, 123] })
     .withContexts(TabButtonContext);
 
-export = TabButtonDoc;
+export default TabButtonDoc;
diff --git a/epam-promo/components/buttons/docs/verticalTabButton.doc.ts b/epam-promo/components/buttons/docs/verticalTabButton.doc.ts
@@ -16,4 +16,4 @@ const TabButtonDoc = new DocBuilder<TabButtonMods & ButtonProps>({ name: 'Vertic
     .prop('count', { examples: [0, 1, 5, 88, 123] })
     .withContexts(VerticalTabButtonContext);
 
-export = TabButtonDoc;
+export default TabButtonDoc;
diff --git a/epam-promo/components/datePickers/docs/datePicker.doc.tsx b/epam-promo/components/datePickers/docs/datePicker.doc.tsx
@@ -52,4 +52,4 @@ const DatePickerDoc = new DocBuilder<DatePickerProps>({ name: 'DatePicker', comp
     })
     .withContexts(DefaultContext, FormContext, TableContext, ResizableContext);
 
-export = DatePickerDoc;
+export default DatePickerDoc;
diff --git a/epam-promo/components/datePickers/docs/rangeDatePicker.doc.tsx b/epam-promo/components/datePickers/docs/rangeDatePicker.doc.tsx
@@ -103,4 +103,4 @@ const RangeDatePickerDoc = new DocBuilder<RangeDatePickerProps>({ name: 'RangeDa
     .prop('isHoliday', { examples: [{ name: 'without Holidays', value: () => false }] })
     .withContexts(DefaultContext, FormContext, ResizableContext);
 
-export = RangeDatePickerDoc;
+export default RangeDatePickerDoc;
diff --git a/epam-promo/components/inputs/docs/checkbox.doc.ts b/epam-promo/components/inputs/docs/checkbox.doc.ts
@@ -10,4 +10,4 @@ const CheckboxDoc = new DocBuilder<CheckboxProps & CheckboxMods>({ name: 'Checkb
     .prop('indeterminate', { examples: [true, false], defaultValue: false })
     .withContexts(DefaultContext, FormContext, TableContext);
 
-export = CheckboxDoc;
+export default CheckboxDoc;
diff --git a/epam-promo/components/inputs/docs/multiSwitch.doc.tsx b/epam-promo/components/inputs/docs/multiSwitch.doc.tsx
@@ -29,4 +29,4 @@ const multiSwitchDoc = new DocBuilder<MultiSwitchProps<any>>({ name: 'MultiSwitc
     .prop('color', { renderEditor: (editable, examples) => <ColorPicker colors={ examples.map(i => ({ value: i, hex: colors[i] })) } { ...editable } />, examples: ['blue', 'gray50'] })
     .withContexts(DefaultContext, FormContext);
 
-export = multiSwitchDoc;
+export default multiSwitchDoc;
diff --git a/epam-promo/components/inputs/docs/numericInput.doc.ts b/epam-promo/components/inputs/docs/numericInput.doc.ts
@@ -15,4 +15,4 @@ const NumericInputDoc = new DocBuilder<NumericInputProps & NumericInputMods>({ n
     .prop('disableLocaleFormatting', { defaultValue: false, examples: [true, false] })
     .withContexts(DefaultContext, FormContext, TableContext);
 
-export = NumericInputDoc;
+export default NumericInputDoc;
diff --git a/epam-promo/components/inputs/docs/radioInput.doc.ts b/epam-promo/components/inputs/docs/radioInput.doc.ts
@@ -11,4 +11,4 @@ const RadioInputDoc = new DocBuilder<RadioInputProps & RadioInputMods>({ name: '
     .prop('size', { examples: ['12', '18'] })
     .withContexts(DefaultContext, FormContext);
 
-export = RadioInputDoc;
+export default RadioInputDoc;
diff --git a/epam-promo/components/inputs/docs/rating.doc.ts b/epam-promo/components/inputs/docs/rating.doc.ts
@@ -13,4 +13,4 @@ const RatingDoc = new DocBuilder<RatingProps & RatingMods>({ name: 'Rating', com
     .prop('hint', { examples: [{ name: 'hint', value: val => `now is ${val} stars` }] })
     .withContexts(DefaultContext, FormContext);
 
-export = RatingDoc;
+export default RatingDoc;
diff --git a/epam-promo/components/inputs/docs/searchInput.doc.ts b/epam-promo/components/inputs/docs/searchInput.doc.ts
@@ -18,4 +18,4 @@ const SearchInputDoc = new DocBuilder<TextInputProps & TextInputMods & IEditable
     .prop('onCancel', { examples: ctx => [ctx.getCallback('onCancel')] })
     .prop('mode', { examples: ['cell'] })
     .withContexts(DefaultContext, FormContext, ResizableContext, TableContext);
-export = SearchInputDoc;
+export default SearchInputDoc;
diff --git a/epam-promo/components/inputs/docs/switch.doc.ts b/epam-promo/components/inputs/docs/switch.doc.ts
@@ -10,4 +10,4 @@ const SwitchDoc = new DocBuilder<SwitchProps & SwitchMods>({ name: 'Switch', com
     .prop('value', { examples: [true, false], defaultValue: false })
     .withContexts(DefaultContext, FormContext);
 
-export = SwitchDoc;
+export default SwitchDoc;
diff --git a/epam-promo/components/inputs/docs/textArea.doc.ts b/epam-promo/components/inputs/docs/textArea.doc.ts
@@ -16,4 +16,4 @@ const TextareaDoc = new DocBuilder<TextAreaProps & TextAreaMods>({ name: 'TextAr
     .prop('autoSize', { examples: [true, false], defaultValue: false })
     .withContexts(DefaultContext, FormContext, TableContext, ResizableContext);
 
-export = TextareaDoc;
+export default TextareaDoc;
diff --git a/epam-promo/components/inputs/docs/textInput.doc.ts b/epam-promo/components/inputs/docs/textInput.doc.ts
@@ -20,4 +20,4 @@ const TextInputDoc = new DocBuilder<TextInputProps & TextInputMods>({ name: 'Tex
     .prop('type', { examples: ['text', 'password'], type: 'string', defaultValue: 'text' })
     .withContexts(DefaultContext, ResizableContext, FormContext, TableContext);
 
-export = TextInputDoc;
+export default TextInputDoc;
diff --git a/epam-promo/components/inputs/docs/timePicker.doc.ts b/epam-promo/components/inputs/docs/timePicker.doc.ts
@@ -10,4 +10,4 @@ const TimePickerDoc = new DocBuilder<TimePickerProps>({ name: 'TimePicker', comp
     .prop('format', { examples: [12, 24], defaultValue: 12 })
     .withContexts(DefaultContext, ResizableContext, FormContext, TableContext);
 
-export = TimePickerDoc;
+export default TimePickerDoc;
diff --git a/epam-promo/components/layout/FlexItems/docs/flexRow.doc.tsx b/epam-promo/components/layout/FlexItems/docs/flexRow.doc.tsx
@@ -76,4 +76,4 @@ const flexRowDoc = new DocBuilder<FlexRowProps & RowMods>({ name: 'FlexRow', com
     .prop('alignItems', { examples: ['top', 'center'] })
     .withContexts(DefaultContext);
 
-export = flexRowDoc;
+export default flexRowDoc;
diff --git a/epam-promo/components/layout/FlexItems/docs/panel.doc.tsx b/epam-promo/components/layout/FlexItems/docs/panel.doc.tsx
@@ -96,4 +96,4 @@ const panelDoc = new DocBuilder<VPanelProps & PanelMods>({ name: 'Panel', compon
     .prop('background', { examples: [{ value: 'white', isDefault: true }, 'gray90'] })
     .withContexts(DefaultContext);
 
-export = panelDoc;
+export default panelDoc;
diff --git a/epam-promo/components/layout/docs/accordion.doc.tsx b/epam-promo/components/layout/docs/accordion.doc.tsx
@@ -65,4 +65,4 @@ const accordionDoc = new DocBuilder<AccordionProps & AccordionMods>({ name: 'Acc
     .prop('mode', { examples: [{ value: 'block', isDefault: true }, 'inline'] })
     .withContexts(ResizableContext);
 
-export = accordionDoc;
+export default accordionDoc;
diff --git a/epam-promo/components/layout/docs/blocker.doc.ts b/epam-promo/components/layout/docs/blocker.doc.ts
@@ -9,4 +9,4 @@ const blockerDoc = new DocBuilder<BlockerProps>({ name: 'Blocker', component: Bl
     .prop('hideSpinner', { examples:[true] })
     .withContexts(RelativePanelContext);
 
-export = blockerDoc;
+export default blockerDoc;
diff --git a/epam-promo/components/layout/docs/checkboxGroup.doc.ts b/epam-promo/components/layout/docs/checkboxGroup.doc.ts
@@ -19,4 +19,4 @@ const checkboxGroupDoc = new DocBuilder<CheckboxGroupProps<any>>({ name: 'Checkb
     .prop('direction', { examples:['vertical', 'horizontal'], defaultValue: 'vertical' })
     .withContexts(DefaultContext, FormContext,  ResizableContext);
 
-export = checkboxGroupDoc;
+export default checkboxGroupDoc;
diff --git a/epam-promo/components/layout/docs/controlGroup.doc.tsx b/epam-promo/components/layout/docs/controlGroup.doc.tsx
@@ -31,4 +31,4 @@ const controlGroupDoc = new DocBuilder<ControlGroupProps>({ name: 'ControlGroup'
     ] })
     .withContexts(DefaultContext, FormContext, ResizableContext);
 
-export = controlGroupDoc;
+export default controlGroupDoc;
diff --git a/epam-promo/components/layout/docs/iconContainer.doc.tsx b/epam-promo/components/layout/docs/iconContainer.doc.tsx
@@ -22,4 +22,4 @@ const iconContainerDoc = new DocBuilder<ControlIconProps & IconContainerMods>({
     .prop('rotate', { examples: ['0', '90cw', '180', '90ccw'], defaultValue: null })
     .withContexts(DefaultContext, FormContext);
 
-export = iconContainerDoc;
+export default iconContainerDoc;
diff --git a/epam-promo/components/layout/docs/labeledInput.doc.tsx b/epam-promo/components/layout/docs/labeledInput.doc.tsx
@@ -20,4 +20,4 @@ const labeledInputDoc = new DocBuilder<LabeledInputProps & LabeledInputMods>({ n
     .prop('validationMessage', { examples: [{ value: 'This field is mandatory', isDefault: true}]})
     .withContexts(DefaultContext, ResizableContext, FormContext);
 
-export = labeledInputDoc;
+export default labeledInputDoc;
diff --git a/epam-promo/components/layout/docs/radioGroup.doc.ts b/epam-promo/components/layout/docs/radioGroup.doc.ts
@@ -21,4 +21,4 @@ const radioGroupDoc = new DocBuilder<RadioGroupProps<any>>({ name: 'RadioGroup',
     .prop('direction', { examples:['vertical', 'horizontal'], defaultValue: 'vertical' })
     .withContexts(DefaultContext, FormContext);
 
-export = radioGroupDoc;
+export default radioGroupDoc;
diff --git a/epam-promo/components/navigation/docs/anchor.doc.tsx b/epam-promo/components/navigation/docs/anchor.doc.tsx
@@ -34,4 +34,4 @@ const AnchorDoc = new DocBuilder<AnchorProps>({ name: 'Anchor', component: Ancho
     })
     .withContexts(DefaultContext);
 
-export = AnchorDoc;
+export default AnchorDoc;
diff --git a/epam-promo/components/navigation/docs/mainMenu.doc.tsx b/epam-promo/components/navigation/docs/mainMenu.doc.tsx
@@ -100,4 +100,4 @@ const mainMenuDoc = new DocBuilder<MainMenuMods & MainMenuProps>({ name: 'MainMe
     })
     .withContexts(ResizableContext);
 
-export = mainMenuDoc;
+export default mainMenuDoc;
diff --git a/epam-promo/components/overlays/docs/alert.doc.tsx b/epam-promo/components/overlays/docs/alert.doc.tsx
@@ -55,4 +55,4 @@ const SnackbarCardDoc = new DocBuilder<AlertProps>({ name: 'Alert', component: A
     })
     .withContexts(ResizableContext);
 
-export = SnackbarCardDoc;
+export default SnackbarCardDoc;
diff --git a/epam-promo/components/overlays/docs/dropdown.doc.tsx b/epam-promo/components/overlays/docs/dropdown.doc.tsx
@@ -43,4 +43,4 @@ const dropdownMenuDoc = new DocBuilder<DropdownProps>({ name: 'Dropdown', compon
     })
     .withContexts(DefaultContext);
 
-export = dropdownMenuDoc;
+export default dropdownMenuDoc;
diff --git a/epam-promo/components/overlays/docs/dropdownContainer.doc.tsx b/epam-promo/components/overlays/docs/dropdownContainer.doc.tsx
@@ -21,4 +21,4 @@ const dropdownContainerDoc = new DocBuilder({
         isRequired: true,
     }).withContexts(DefaultContext);
 
-export = dropdownContainerDoc;
+export default dropdownContainerDoc;
diff --git a/epam-promo/components/overlays/docs/modalFooter.doc.tsx b/epam-promo/components/overlays/docs/modalFooter.doc.tsx
@@ -30,4 +30,4 @@ const ModalFooterDoc = new DocBuilder<ModalFooterProps>({ name: 'ModalFooter', c
     })
     .withContexts(DefaultContext);
 
-export = ModalFooterDoc;
+export default ModalFooterDoc;
diff --git a/epam-promo/components/overlays/docs/modalHeader.doc.tsx b/epam-promo/components/overlays/docs/modalHeader.doc.tsx
@@ -33,4 +33,4 @@ const ModalHeaderDoc = new DocBuilder<ModalHeaderProps>({ name: 'ModalHeader', c
     })
     .withContexts(DefaultContext);
 
-export = ModalHeaderDoc;
+export default ModalHeaderDoc;
diff --git a/epam-promo/components/overlays/docs/notificationCard.doc.tsx b/epam-promo/components/overlays/docs/notificationCard.doc.tsx
@@ -57,4 +57,4 @@ const SnackbarCardDoc = new DocBuilder<NotificationCardProps>({ name: 'Notificat
     })
     .withContexts(DefaultContext);
 
-export = SnackbarCardDoc;
+export default SnackbarCardDoc;
diff --git a/epam-promo/components/overlays/docs/tooltip.doc.tsx b/epam-promo/components/overlays/docs/tooltip.doc.tsx
@@ -26,4 +26,4 @@ const tooltipDoc = new DocBuilder<TooltipProps & TooltipMods>({ name: 'Tooltip',
     .prop('color', { examples: ['white', { name: 'gray90', value: 'gray90', isDefault: true }, 'red'] })
     .withContexts(DefaultContext);
 
-export = tooltipDoc;
+export default tooltipDoc;
diff --git a/epam-promo/components/pickers/docs/pickerInput.doc.tsx b/epam-promo/components/pickers/docs/pickerInput.doc.tsx
@@ -55,4 +55,4 @@ const PickerInputDoc = new DocBuilder<PickerInputBaseProps<any, any> & PickerInp
         ] })
     .withContexts(DefaultContext, ResizableContext, FormContext, TableContext);
 
-export = PickerInputDoc;
+export default PickerInputDoc;
diff --git a/epam-promo/components/pickers/docs/pickerModal.doc.tsx b/epam-promo/components/pickers/docs/pickerModal.doc.tsx
@@ -65,4 +65,4 @@ const PickerInputDoc = new DocBuilder<PickerModalProps<any, any>>({ name: 'Picke
     ] })
     .withContexts(ModalContext);
 
-export = PickerInputDoc;
+export default PickerInputDoc;
diff --git a/epam-promo/components/pickers/docs/pickerToggler.doc.tsx b/epam-promo/components/pickers/docs/pickerToggler.doc.tsx
@@ -19,4 +19,4 @@ const PickerTogglerDoc = new DocBuilder<PickerTogglerProps<any, any> & PickerTog
     .prop('placeholder', { examples: ['Select Country', 'Select Person'], type: 'string', defaultValue: 'Please select' })
     .withContexts(DefaultContext, ResizableContext, FormContext);
 
-export = PickerTogglerDoc;
+export default PickerTogglerDoc;
diff --git a/epam-promo/components/tables/docs/dataTableCell.doc.tsx b/epam-promo/components/tables/docs/dataTableCell.doc.tsx
@@ -41,4 +41,4 @@ const DataTableCellDoc = new DocBuilder<DataTableCellProps & DataTableCellMods>(
     })
     .withContexts(ResizableContext, DefaultContext, FormContext, TableContext);
 
-export = DataTableCellDoc;
+export default DataTableCellDoc;
diff --git a/epam-promo/components/tables/docs/dataTableHeaderCell.doc.tsx b/epam-promo/components/tables/docs/dataTableHeaderCell.doc.tsx
@@ -50,4 +50,4 @@ const DataTableHeaderCellDoc = new DocBuilder<DataTableHeaderCellProps & DataTab
     })
     .withContexts(ResizableContext, DefaultContext, FormContext);
 
-export = DataTableHeaderCellDoc;
+export default DataTableHeaderCellDoc;
diff --git a/epam-promo/components/tables/docs/dataTableHeaderRow.doc.tsx b/epam-promo/components/tables/docs/dataTableHeaderRow.doc.tsx
@@ -35,4 +35,4 @@ const DataTableHeaderRowDoc = new DocBuilder<DataTableHeaderRowProps & DataTable
     })
     .withContexts(TableContext, ResizableContext, DefaultContext, FormContext);
 
-export = DataTableHeaderRowDoc;
+export default DataTableHeaderRowDoc;
diff --git a/epam-promo/components/tables/docs/dataTableRow.doc.tsx b/epam-promo/components/tables/docs/dataTableRow.doc.tsx
@@ -67,4 +67,4 @@ const DataTableRowDoc = new DocBuilder<DataTableRowProps & DataTableRowMods>({ n
     })
     .withContexts(TableContext, ResizableContext, DefaultContext);
 
-export = DataTableRowDoc;
+export default DataTableRowDoc;
diff --git a/epam-promo/components/typography/docs/richTextView.doc.tsx b/epam-promo/components/typography/docs/richTextView.doc.tsx
@@ -133,4 +133,4 @@ export const MyComponent = <div className={ css.myHeader }>` }</pre>
     })
     .withContexts(DefaultContext);
 
-export = textDoc;
+export default textDoc;
diff --git a/epam-promo/components/typography/docs/text.doc.tsx b/epam-promo/components/typography/docs/text.doc.tsx
@@ -21,4 +21,4 @@ const textDoc = new DocBuilder<TextProps & TextMods>({ name: 'Text', component:
     })
     .withContexts(DefaultContext, ResizableContext, FormContext);
 
-export = textDoc;
+export default textDoc;
diff --git a/epam-promo/components/typography/docs/textPlaceholder.doc.tsx b/epam-promo/components/typography/docs/textPlaceholder.doc.tsx
@@ -14,4 +14,4 @@ const textPlaceholderDoc = new DocBuilder<TextPlaceholderProps>({ name: 'TextPla
     .prop('isNotAnimated', { examples: [true, false] })
     .withContexts(DefaultContext, FormContext);
 
-export = textPlaceholderDoc;
+export default textPlaceholderDoc;
diff --git a/epam-promo/components/widgets/docs/avatar.doc.tsx b/epam-promo/components/widgets/docs/avatar.doc.tsx
@@ -23,4 +23,4 @@ const AvatarDoc = new DocBuilder<AvatarProps>({ name: 'Avatar', component: Avata
     })
     .withContexts(DefaultContext);
 
-export = AvatarDoc;
+export default AvatarDoc;
diff --git a/epam-promo/components/widgets/docs/avatarStack.doc.tsx b/epam-promo/components/widgets/docs/avatarStack.doc.tsx
@@ -65,4 +65,4 @@ const AvatarStackDoc = new DocBuilder<AvatarStackProps>({ name: 'AvatarStack', c
     })
     .withContexts(DefaultContext);
 
-export = AvatarStackDoc;
+export default AvatarStackDoc;
diff --git a/epam-promo/components/widgets/docs/badge.doc.tsx b/epam-promo/components/widgets/docs/badge.doc.tsx
@@ -21,4 +21,4 @@ const badgeDoc = new DocBuilder<ButtonProps & BadgeMods>({ name: 'Badge', compon
     .prop('size', { examples: ['18', '24', '30', '36', '42', '48'], defaultValue: '36' })
     .withContexts(DefaultContext, FormContext, ResizableContext);
 
-export = badgeDoc;
+export default badgeDoc;
diff --git a/epam-promo/components/widgets/docs/paginator.doc.tsx b/epam-promo/components/widgets/docs/paginator.doc.tsx
@@ -10,4 +10,4 @@ const paginatorDoc = new DocBuilder<PaginatorProps>({name: 'Paginator', componen
     .prop('totalPages', { examples: [5 , 8, { value: 10, isDefault: true }, 100, 1000], isRequired: true })
     .withContexts(DefaultContext);
 
-export = paginatorDoc;
+export default paginatorDoc;
diff --git a/epam-promo/components/widgets/docs/spinner.doc.tsx b/epam-promo/components/widgets/docs/spinner.doc.tsx
@@ -9,4 +9,4 @@ const spinnerDoc = new DocBuilder<SpinnerProps & SpinnerMods>({ name: 'Spinner',
     .prop('color', { renderEditor:  (editable, examples) => <ColorPicker colors={ examples.map(i => ({ value: i, hex: colors[i] })) } { ...editable } />, examples: allSpinnerColors })
     .withContexts(DefaultContext, FormContext, ResizableContext);
 
-export = spinnerDoc;
+export default spinnerDoc;
diff --git a/epam-promo/components/widgets/docs/tag.doc.tsx b/epam-promo/components/widgets/docs/tag.doc.tsx
@@ -15,4 +15,4 @@ const tagDoc = new DocBuilder<ButtonProps & TagMods>({ name: 'Tag', component: T
     .prop('size', { examples : ['18', '24', '30', '36', '42', '48'], defaultValue: '36' })
     .withContexts(DefaultContext, FormContext, ResizableContext);
 
-export = tagDoc;
+export default tagDoc;
diff --git a/loveship/components/buttons/docs/button.doc.tsx b/loveship/components/buttons/docs/button.doc.tsx
@@ -24,4 +24,4 @@ const ButtonDoc = new DocBuilder<ButtonProps & ButtonMods>({ name: 'Button', com
     .prop('fill', { examples: allFillStyles, defaultValue: 'solid' })
     .withContexts(DefaultContext, ResizableContext, FormContext);
 
-export = ButtonDoc;
+export default ButtonDoc;
diff --git a/loveship/components/buttons/docs/iconButton.doc.ts b/loveship/components/buttons/docs/iconButton.doc.ts
@@ -6,4 +6,4 @@ const IconButtonDoc = new DocBuilder<IconButtonProps>({ name: 'IconButton', comp
     .implements([onClickDoc, isDisabledDoc, isInvalidDoc, iCanRedirectDoc, colorDoc, iconDoc])
     .withContexts(DefaultContext, FormContext);
 
-export = IconButtonDoc;
+export default IconButtonDoc;
diff --git a/loveship/components/buttons/docs/linkButton.doc.tsx b/loveship/components/buttons/docs/linkButton.doc.tsx
@@ -13,4 +13,4 @@ const LinkButtonDoc = new DocBuilder<ButtonProps & LinkButtonMods>({ name: 'Link
     ], type: 'string' })
     .withContexts(DefaultContext, FormContext);
 
-export = LinkButtonDoc;
+export default LinkButtonDoc;
diff --git a/loveship/components/buttons/docs/tabButton.doc.ts b/loveship/components/buttons/docs/tabButton.doc.ts
@@ -17,4 +17,4 @@ const TabButtonDoc = new DocBuilder<TabButtonMods & ButtonProps>({ name: 'TabBut
     .prop('theme', { examples: (['light', 'dark']), defaultValue: 'light' })
     .withContexts(TabButtonContext);
 
-export = TabButtonDoc;
+export default TabButtonDoc;
diff --git a/loveship/components/buttons/docs/verticalTabButton.doc.ts b/loveship/components/buttons/docs/verticalTabButton.doc.ts
@@ -17,4 +17,4 @@ const TabButtonDoc = new DocBuilder<TabButtonMods & ButtonProps>({ name: 'TabBut
     .prop('theme', { examples: (['light', 'dark']), defaultValue: 'light' })
     .withContexts(VerticalTabButtonContext);
 
-export = TabButtonDoc;
+export default TabButtonDoc;
diff --git a/loveship/components/datePickers/docs/calendar.doc.ts b/loveship/components/datePickers/docs/calendar.doc.ts
@@ -18,4 +18,4 @@ const DatepickerDoc = new DocBuilder<CalendarProps<Dayjs>>({ name: 'Calendar', c
     .prop('hideAnotherMonths', {examples: [true, false]})
     .withContexts(DefaultContext, FormContext, ResizableContext);
 
-export = DatepickerDoc;
+export default DatepickerDoc;