feat(bullets-wrapper): export internal arrow component

This allows to import the styled bullets wrapper-component and overwrite styled-component styles.

src/bullets.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Meta, Story as IStory } from "@storybook/react/types-6-0";
 import Bullet, { BulletComponentType } from "../src/components/bullet";
+import Bullets from "../src/components/bullets";
 import styled from "styled-components";
 
 import Slider, { SliderProps } from ".";
@@ -75,12 +76,22 @@ CustomBullets.args = {
 	BulletComponent,
 };
 
-export const ModufiedCustomBullets = Story.bind({});
+export const ModufiedCustomBullet = Story.bind({});
 const ModifiedBulletComponent = styled(Bullet)`
 	background-color: green;
 `;
+ModufiedCustomBullet.storyName = "modified 'bullet' component";
+ModufiedCustomBullet.args = {
+	hasBullets: true,
+	BulletComponent: ModifiedBulletComponent,
+};
+
+export const ModufiedCustomBullets = Story.bind({});
+const ModifiedBulletsComponent = styled(Bullets)`
+	background-color: green;
+`;
 ModufiedCustomBullets.storyName = "modified 'bullets' component";
 ModufiedCustomBullets.args = {
 	hasBullets: true,
-	BulletComponent: ModifiedBulletComponent,
+	BulletsComponent: ModifiedBulletsComponent,
 };

src/components/bullets/bullets.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import styled from "styled-components";
+
+export interface BulletsProps {
+	children: React.ReactElement;
+}
+
+export type BulletsComponentType = (props: BulletsProps) => React.ReactElement;
+
+const Bullets = styled.div`
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	z-index: 1;
+`;
+
+export default Bullets;

src/components/bullets/index.tsx

@@ -0,0 +1,3 @@
+import Bullets, { BulletsComponentType, BulletsProps } from "./bullets";
+export default Bullets;
+export { BulletsComponentType, BulletsProps };

src/index.tsx

@@ -3,14 +3,9 @@ import styled from "styled-components";
 import { useSprings, animated } from "react-spring";
 import { useGesture } from "react-use-gesture";
 
-import Arrow, {
-	ArrowComponentType,
-	ArrowStyle,
-} from "./components/arrow/arrow";
-import Bullet, {
-	BulletComponentType,
-	BulletStyle,
-} from "./components/bullet/bullet";
+import Arrow, { ArrowComponentType, ArrowStyle } from "./components/arrow";
+import Bullet, { BulletComponentType, BulletStyle } from "./components/bullet";
+import Bullets, { BulletsComponentType } from "./components/bullets";
 
 const StyledSliderArrows = styled.div`
 	top: 50%;
@@ -29,13 +24,6 @@ const StyledBulletList = styled.ul`
 	margin: 15px 0;
 `;
 
-const StyledBullets = styled.div`
-	position: absolute;
-	bottom: 0;
-	width: 100%;
-	z-index: 1;
-`;
-
 const StyledWrapper = styled.div`
 	width: 100%;
 	height: 100%;
@@ -61,6 +49,7 @@ export interface SliderProps {
 	arrowStyle?: ArrowStyle;
 	auto?: number;
 	BulletComponent?: BulletComponentType;
+	BulletsComponent?: BulletsComponentType;
 	bulletStyle?: BulletStyle;
 	children?: React.ReactNode[];
 	hasArrows?: boolean;
@@ -80,6 +69,7 @@ const Slider: React.FunctionComponent<SliderProps> = ({
 	arrowStyle = {},
 	auto = 0,
 	BulletComponent = Bullet,
+	BulletsComponent = Bullets,
 	bulletStyle = {},
 	children = [],
 	hasArrows = false,
@@ -268,9 +258,9 @@ const Slider: React.FunctionComponent<SliderProps> = ({
 					</StyledSliderArrows>
 				)}
 				{hasBullets && (
-					<StyledBullets>
+					<BulletsComponent>
 						<StyledBulletList>{bullets()}</StyledBulletList>
-					</StyledBullets>
+					</BulletsComponent>
 				)}
 				{springProps.map(({ offset }, index) => (
 					<animated.div