Unable to import specific components in my project

[darshan-g]

Here's my styleguide.config.js

// styleguide.config.js
const path = require('path');

module.exports = {
title: 'UI React Components',
sections: [
{
name: 'Getting Started',
content: 'GettingStarted.md',
},
{
name: 'Atoms',
sections: [
{
name: 'Components',
components: () => [
'src/lib/Atoms/Anchor/index.js',
],
},
],
},
],
components: 'src/lib/[A-Z]/**/.js',
styleguideComponents: {
Wrapper: path.join(__dirname, 'styleguide/Wrapper'),
TableOfContentsRenderer: path.join(
__dirname,
'styleguide/TableOfContentsRenderer',
),
},
serverPort: 6161,
showSidebar: true,
skipComponentsWithoutExample: true,
template: {
favicon: './src/assets/favicon.io',
},
theme: {
fontFamily: {
base: 'Circular',
},
color: {
link: '#0F15D4',
linkHover: '#343DF5',
sidebarBackground: '#E6E6E6',
codeBackground: '#F5F5F5',
codeBase: '#4B4B4B',
},
},
styles: {
StyleGuide: {
content: {
minWidth: 'unset',
maxWidth: 'unset',
width: 'auto',
},
},
},
};

My Anchor component:
import PropTypes from 'prop-types';
import React from 'react';
import styled, { css } from 'styled-components';

import { smallerThan } from '../../../style/variables';

const getMargin = p => (p.mL ? '0 0 0 4px' : p.mR ? '0 4px 0 0' : p.margin);

const AnchorStyle = styled.a text-decoration: none; margin: ${p => getMargin(p)}; font-size: ${p => p.fontSize || p.theme.anchor.fontSize}; font-family: ${p => p.fontFamily || p.theme.anchor.fontFamily}; font-weight: ${p => p.fontWeight}; cursor: pointer; color: ${p => p.color || p.theme.anchor.color}; ${p => css
${p.padding && padding: ${p.padding}};
}; &:hover { color: ${p => p.colorHover || p.theme.anchor.hover}; text-decoration: ${p => p.decorationHover || 'underline'}; } &:active { color: ${p => p.colorActive || p.theme.anchor.active}; } /* need verification from design */ &:visited { color: ${p => p.colorActive || p.theme.anchor.visited}; } @media (${smallerThan.tablet}) { font-size: ${p => p.fontSizeMobile || p.theme.anchor.fontSizeMobile}; } ;

const Anchor = props => <AnchorStyle href={props.href ? props.href : '#'} {...props}>{props.text};

Anchor.propTypes = {
children: PropTypes.node,
/** Theme default: font color /
color: PropTypes.string,
/* Theme default: font color hover /
colorHover: PropTypes.string,
/* Theme default: font color active /
colorActive: PropTypes.string,
/* Theme default: font color visited - undefined /
colorVisited: PropTypes.string,
/* Theme default: underline text on hover /
decorationHover: PropTypes.string,
/* Theme default: body font /
fontFamily: PropTypes.string,
/* Theme default: body font size - 16px /
fontSize: PropTypes.string,
/* Theme default: body font mobile size - 12px /
fontSizeMobile: PropTypes.string,
fontWeight: PropTypes.string,
/* Default: 0 unless mL or mR is passed /
margin: PropTypes.string,
/* Adds margin-left for inline links. If true: '0 0 0 4px' /
mL: PropTypes.bool,
/* Adds margin-right for inline links. If true: '0 4px 0 0' */
mR: PropTypes.bool,
padding: PropTypes.string,
text: PropTypes.string,
href: PropTypes.string,
onClick: PropTypes.func,
onKeyDown: PropTypes.func,
};

export { Anchor, AnchorStyle };

I am currently importing the component like import { Anchor } from '@frontend/ui-components'; This results into the import of my entire library and it makes my bundle (main.js) to be more than 1MB.

I want to do like import { Anchor } from '@frontend/ui-components/Anchor' so that I only import Anchor component and my bundle is not too big; But when I do like this I get errors.

Am I missing something?

[darshan-g]

can somebody respond pls?