Component imports not working

[Jonathan Smithies]

Describe the bug
I'm using this package within a Laravel Nova Custom Tool and I'm not able to import any of the individual components in the way described.

import { MazPhoneNumberInput } from 'maz-ui';

Nova.booting((Vue, router, store) => {
  ...
  Vue.component('mobile-number', MazPhoneNumberInput);
});

This fails because MazPhoneNumberInput is not found or resolvable. Instead the entire maz-ui package is imported, making the JS file 10mb big.

The component shows just fine on the page.. but it takes about 20 seconds for the page to load. (makes sense why you say on demand option is better.. if it worked...)

To Reproduce
Steps to reproduce the behavior:

1. Fresh Laravel install with Laravel Nova
2. Create Custom Tool for Nova
3. Install maz-ui
4. Import the component in nova-components/custom-tool-name/resources/js/tool.js
5. See error

Expected behavior
Just the component I want to import should be imported

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: macOS
• Browser Chrome
• Version 89.0.4389.90

[Mazel]

@elev8studio

Do you use the babel configuration ? Documentation - Babel config

Otherwise, you have to import the component and his CSS like that :

import MazPhoneNumberInput from "maz-ui/lib/maz-phone-number-input";
import "maz-ui/lib/css/base.css";
import "maz-ui/lib/css/maz-phone-number-input.css";

--> codesandbox example

If you are using multiple components, import the base.css file only once