@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Branding/Branding.js

@@ -0,0 +1,81 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import styled, { useTheme } from "styled-components";
+import { Flex } from "../Flex";
+import BrandingText from "./BrandingText";
+import LettermarkLogo from "./LettermarkLogo";
+import WordmarkLogo from "./WordmarkLogo";
+function getLogoColor(color = "blue", theme) {
+    const config = {
+        white: {
+            letter: "#F0B41C",
+            logo: "#FFFFFF",
+            text: theme.colors.white,
+            line: theme.colors.lightGrey,
+        },
+        blue: {
+            letter: "#F0B41C",
+            logo: "#1C68A5",
+            text: "#0E77D2",
+            line: theme.colors.lightBlue,
+        },
+    };
+    return config[color];
+}
+const alignments = {
+    left: "flex-start",
+    center: "center",
+    right: "flex-end",
+};
+const getAlignment = (alignment) => alignments[alignment] || alignments.left;
+const BrandingWrap = styled.div(({ alignment, size }) => ({
+    width: "100%",
+    display: "inline-flex",
+    userSelect: "none",
+    flexDirection: "column",
+    alignItems: getAlignment(alignment),
+    padding: size === "medium" ? "2px 0" : undefined,
+}));
+const Line = styled.div(({ logoColor, theme }) => ({
+    position: "relative",
+    width: "100%",
+    "&:before": {
+        content: "''",
+        position: "absolute",
+        top: "50%",
+        left: 0,
+        borderTop: `1px solid ${getLogoColor(logoColor, theme).line}`,
+        background: getLogoColor(logoColor, theme).line,
+        width: "100%",
+        transform: "translateY(-50%)",
+    },
+}));
+const BrandingBoxPaddings = {
+    small: 0,
+    medium: "2px",
+    large: "6px",
+};
+const Branding = (_a) => {
+    var { logoType = "wordmark", subtext, size = "medium", alignment = "left", withLine, logoColor = "blue", className } = _a, props = __rest(_a, ["logoType", "subtext", "size", "alignment", "withLine", "logoColor", "className"]);
+    const theme = useTheme();
+    return (React.createElement(BrandingWrap, Object.assign({ size: size, alignment: alignment, className: className }, props),
+        logoType === "lettermark" ? (React.createElement(LettermarkLogo, { size: size, letterFill: getLogoColor(logoColor, theme).letter })) : (React.createElement(WordmarkLogo, { size: size, letterFill: getLogoColor(logoColor, theme).letter, logoFill: getLogoColor(logoColor, theme).logo })),
+        subtext && (React.createElement(Flex, { justifyContent: getAlignment(alignment), width: "100%", py: BrandingBoxPaddings[size] },
+            alignment !== "left" && withLine && React.createElement(Line, { logoColor: logoColor }),
+            React.createElement(BrandingText, { logoColor: logoColor, style: {
+                    marginLeft: alignment !== "left" && "4px",
+                    marginRight: alignment !== "right" && "4px",
+                }, size: size }, subtext),
+            alignment !== "right" && withLine && React.createElement(Line, { logoColor: logoColor })))));
+};
+export default Branding;

package/dist/src/Branding/Branding.story.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _Branding: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Branding: () => React.JSX.Element;

package/dist/src/Branding/Branding.story.js

@@ -0,0 +1,81 @@
+import React from "react";
+import { Box, Flex, Branding } from "../index";
+export default {
+    title: "Components/Branding",
+};
+export const _Branding = () => (React.createElement(React.Fragment, null,
+    React.createElement(Flex, null,
+        React.createElement(Box, { width: 1 / 2, p: "x2" },
+            React.createElement(Branding, { size: "small" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { logoType: "lettermark", size: "small" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, null),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { logoType: "lettermark" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { subtext: "Logo Subtext" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { withLine: true, subtext: "Logo Subtext" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { size: "large" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { size: "large", logoType: "lettermark" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { size: "large", subtext: "Logo Subtext" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { withLine: true, size: "large", subtext: "Logo Subtext" })),
+        React.createElement(Box, { bg: "black", width: 1 / 2, p: "x2" },
+            React.createElement(Branding, { logoColor: "white", size: "small" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { logoColor: "white", logoType: "lettermark", size: "small" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { logoColor: "white" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { logoColor: "white", logoType: "lettermark" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { logoColor: "white", subtext: "Logo Subtext" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { logoColor: "white", withLine: true, subtext: "Logo Subtext" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { logoColor: "white", size: "large" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { logoColor: "white", size: "large", logoType: "lettermark" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { logoColor: "white", size: "large", subtext: "Logo Subtext" }),
+            React.createElement("br", null),
+            React.createElement("br", null),
+            React.createElement(Branding, { withLine: true, logoColor: "white", size: "large", subtext: "Logo Subtext" }))),
+    React.createElement(Flex, { my: "x2", justifyContent: "space-between" },
+        React.createElement(Branding, { subtext: "Left Align", alignment: "left" }),
+        React.createElement(Branding, { subtext: "Center Align", alignment: "center" }),
+        React.createElement(Branding, { subtext: "Right Align", alignment: "right" })),
+    React.createElement(Flex, { my: "x2", justifyContent: "space-between" },
+        React.createElement(Branding, { withLine: true, subtext: "Left Align", alignment: "left" }),
+        React.createElement(Branding, { withLine: true, subtext: "Center Align", alignment: "center" }),
+        React.createElement(Branding, { withLine: true, subtext: "Right Align", alignment: "right" })),
+    React.createElement(Flex, { my: "x2", justifyContent: "space-between" },
+        React.createElement(Branding, { size: "large", subtext: "Left Align", alignment: "left" }),
+        React.createElement(Branding, { size: "large", subtext: "Center Align", alignment: "center" }),
+        React.createElement(Branding, { size: "large", subtext: "Right Align", alignment: "right" })),
+    React.createElement(Flex, { my: "x2", justifyContent: "space-between" },
+        React.createElement(Branding, { size: "large", withLine: true, subtext: "Left Align", alignment: "left" }),
+        React.createElement(Branding, { size: "large", withLine: true, subtext: "Center Align", alignment: "center" }),
+        React.createElement(Branding, { size: "large", withLine: true, subtext: "Right Align", alignment: "right" }))));

package/dist/src/Branding/BrandingText.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
-type BrandingTextProps = {
-    logoColor?: "blue" | "white";
-    size?: "small" | "medium" | "large";
-};
-declare const BrandingText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, BrandingTextProps>> & string;
-export default BrandingText;
+/// <reference types="react" />
+type BrandingTextProps = {
+    logoColor?: "blue" | "white";
+    size?: "small" | "medium" | "large";
+};
+declare const BrandingText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, BrandingTextProps>> & string;
+export default BrandingText;

package/dist/src/Branding/BrandingText.js

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+const logoColors = {
+    white: "#FFFFFF",
+    blue: "#0E77D2",
+};
+const getLogoColor = (logoColor) => logoColors[logoColor] || logoColors.blue;
+const BrandingText = styled.span(({ logoColor = "blue", size, theme }) => ({
+    color: getLogoColor(logoColor),
+    textDecoration: "none",
+    fontWeight: theme.fontWeights.medium,
+    letterSpacing: "0.0333em",
+    textTransform: "uppercase",
+    fontSize: size === "small" ? "10px" : "11px",
+    lineHeight: "12px",
+    whiteSpace: "nowrap",
+    active: {
+        color: getLogoColor(logoColor),
+    },
+    visited: {
+        color: getLogoColor(logoColor),
+    },
+}));
+export default BrandingText;

package/dist/src/Branding/LettermarkLogo.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-type LettermarkLogoProps = {
-    letterFill?: string;
-    size?: string;
-};
-export default function LettermarkLogo({ size, letterFill, ...props }: LettermarkLogoProps): React.JSX.Element;
-export {};
+import React from "react";
+type LettermarkLogoProps = {
+    letterFill?: string;
+    size?: string;
+};
+export default function LettermarkLogo({ size, letterFill, ...props }: LettermarkLogoProps): React.JSX.Element;
+export {};

package/dist/src/Branding/LettermarkLogo.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+const sizes = {
+    small: {
+        height: "24px",
+        width: "28px",
+    },
+    medium: {
+        height: "32px",
+        width: "37px",
+    },
+    large: {
+        height: "48px",
+        width: "56px",
+    },
+};
+const getSize = (size) => sizes[size] || sizes.medium;
+export default function LettermarkLogo(_a) {
+    var { size, letterFill } = _a, props = __rest(_a, ["size", "letterFill"]);
+    return (React.createElement("svg", Object.assign({}, getSize(size), props, { viewBox: "0 0 37 32", style: { display: "block", margin: size === "large" ? null : "2px 0" } }),
+        React.createElement("path", { fill: letterFill, d: "M30.6967273,1.13648485 L36.3810909,3.40945455 L36.3810909,23.8758788 C36.3810909,28.2705455 30.9507879,29.0424242 27.2853333,29.5602424 C29.3818182,29.0424242 30.7083636,28.4606061 30.6967273,23.8758788 L30.6967273,5.68436364 L25.0123636,3.40945455 L30.6967273,1.13648485 Z M6.82084848,28.4237576 L6.82084848,15.9204848 C6.82084848,14.6618182 7.76533333,13.238303 8.91151515,12.7476364 L14.7801212,10.2264242 L14.7801212,18.1779394 L20.4644848,21.6048485 C21.6106667,22.1866667 23.8758788,22.2002424 23.8758788,20.4664242 L23.8758788,17.0550303 L21.5990303,15.9166061 L21.5990303,1.56319402e-13 L4.26666667,6.38642424 C1.91030303,7.25333333 3.55271368e-15,9.98593939 3.55271368e-15,12.5071515 L3.55271368e-15,31.2669091 L6.82084848,28.4237576 Z" })));
+}

package/dist/src/Branding/WordmarkLogo.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-type WordmarkLogoProps = {
-    logoFill?: string;
-    letterFill?: string;
-    size?: string;
-    children?: React.ReactNode;
-};
-export default function WordmarkLogo({ size, logoFill, letterFill, ...props }: WordmarkLogoProps): React.JSX.Element;
-export {};
+import React from "react";
+type WordmarkLogoProps = {
+    logoFill?: string;
+    letterFill?: string;
+    size?: string;
+    children?: React.ReactNode;
+};
+export default function WordmarkLogo({ size, logoFill, letterFill, ...props }: WordmarkLogoProps): React.JSX.Element;
+export {};

package/dist/src/Branding/WordmarkLogo.js

@@ -0,0 +1,39 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+const sizes = {
+    small: {
+        height: "24px",
+        width: "100px",
+    },
+    medium: {
+        height: "32px",
+        width: "133px",
+    },
+    large: {
+        height: "48px",
+        width: "200px",
+    },
+};
+const getSize = (size) => sizes[size] || sizes.medium;
+export default function WordmarkLogo(_a) {
+    var { size, logoFill, letterFill } = _a, props = __rest(_a, ["size", "logoFill", "letterFill"]);
+    return (React.createElement("svg", Object.assign({}, getSize(size), props, { viewBox: "0 0 133 32", style: { display: "block", margin: size === "medium" ? "2px 0" : null } }),
+        React.createElement("path", { fill: letterFill, d: "M30.6967273,1.13648485 L36.3810909,3.40945455 L36.3810909,23.8758788 C36.3810909,28.2705455 30.9507879,29.0424242 27.2853333,29.5602424 C29.3818182,29.0424242 30.7083636,28.4606061 30.6967273,23.8758788 L30.6967273,5.68436364 L25.0123636,3.40945455 L30.6967273,1.13648485 Z M6.82084848,28.4237576 L6.82084848,15.9204848 C6.82084848,14.6618182 7.76533333,13.238303 8.91151515,12.7476364 L14.7801212,10.2264242 L14.7801212,18.1779394 L20.4644848,21.6048485 C21.6106667,22.1866667 23.8758788,22.2002424 23.8758788,20.4664242 L23.8758788,17.0550303 L21.5990303,15.9166061 L21.5990303,1.56319402e-13 L4.26666667,6.38642424 C1.91030303,7.25333333 3.55271368e-15,9.98593939 3.55271368e-15,12.5071515 L3.55271368e-15,31.2669091 L6.82084848,28.4237576 Z" }),
+        React.createElement("g", { transform: "translate(43.000000, 0.000000)", fill: logoFill },
+            React.createElement("path", { d: "M5.14521212,24.2224981 L1.33226763e-14,24.2224981 L1.33226763e-14,9.41134654 L4.75151515,9.41134654 L4.75151515,11.8937708 C5.43733518,11.0060378 6.29475204,10.2653615 7.27272727,9.71583139 C8.16188898,9.23817548 9.15699751,8.9920662 10.166303,9.00019502 C11.7333333,9.00019502 12.9221818,9.44948795 13.7328485,10.3480738 C14.5435152,11.2466597 14.9488485,12.5615688 14.9488485,14.2928011 L14.9488485,24.2224981 L9.83078788,24.2224981 L9.83078788,15.7376496 C9.83078788,14.961892 9.67175758,14.3755486 9.35369697,13.9786193 C9.03563636,13.58169 8.56436364,13.3877506 7.93987879,13.3968011 C7.04258586,13.3968011 6.35216162,13.6980536 5.86860606,14.3005587 C5.38505051,14.9030637 5.14391919,15.7803162 5.14521212,16.9323162 L5.14521212,24.2224981 Z" }),
+            React.createElement("path", { d: "M27.8366061,9 L32.9507879,9 L32.9507879,22.6203636 L28.1992727,24.5190303 L28.1992727,21.6254545 C27.5124636,22.5143219 26.6553593,23.2573653 25.6780606,23.8111515 C24.7938668,24.2845189 23.8048332,24.5279425 22.8019394,24.5190303 C21.2323232,24.5190303 20.0402424,24.0665051 19.225697,23.1614545 C18.4111515,22.256404 18.0025859,20.9408485 18,19.2147879 L18,9 L23.1452121,9 L23.1452121,17.7796364 C23.1452121,18.5553939 23.3042424,19.1443232 23.622303,19.5464242 C23.9403636,19.9485253 24.4116364,20.1482828 25.0361212,20.145697 C25.9411717,20.145697 26.631596,19.8418586 27.1073939,19.2341818 C27.5831919,18.6265051 27.8243232,17.7524848 27.8307879,16.6121212 L27.8366061,9 Z" }),
+            React.createElement("polygon", { id: "Path", points: "38.7151515 24.5546667 36 24.5546667 36 1.088 38.7151515 1.15463195e-13" }),
+            React.createElement("path", { d: "M41,17.0717576 C41,14.7263838 41.7453737,12.7947475 43.2361212,11.2768485 C44.7268687,9.75894949 46.6171313,9 48.9069091,9 C51.1966869,9 53.0869495,9.75894949 54.577697,11.2768485 C56.0684444,12.7947475 56.8138182,14.7263838 56.8138182,17.0717576 C56.8138182,19.4274747 56.0684444,21.3668687 54.577697,22.8899394 C53.0869495,24.4130101 51.1966869,25.1719596 48.9069091,25.1667879 C46.6261818,25.1667879 44.7385051,24.4078384 43.2438788,22.8899394 C41.7492525,21.3720404 41.0012929,19.4326465 41,17.0717576 Z M43.6957576,17.0717576 C43.6957576,18.9141818 44.172202,20.3965253 45.1250909,21.5187879 C46.0779798,22.6410505 47.327596,23.2028283 48.8739394,23.2041212 C50.4254545,23.2041212 51.6802424,22.6423434 52.638303,21.5187879 C53.5963636,20.3952323 54.0786263,18.9128889 54.0850909,17.0717576 C54.0850909,15.2422626 53.6028283,13.7657374 52.638303,12.6421818 C51.6737778,11.5186263 50.4189899,10.9574949 48.8739394,10.9587879 C47.3224242,10.9587879 46.0728081,11.5205657 45.1250909,12.6441212 C44.1773737,13.7676768 43.7009293,15.2435556 43.6957576,17.0717576 Z" }),
+            React.createElement("path", { d: "M70.0824261,23.582303 C69.3285884,24.0285568 68.5220417,24.3790594 67.6814564,24.625697 C66.9065592,24.8487063 66.1042899,24.9622904 65.2979413,24.9631515 C63.1180625,24.9631515 61.3564463,24.2397576 60.0130928,22.7929697 C58.6697392,21.3461818 57.9987089,19.4449293 58.0000019,17.0892121 C58.0000019,14.6882424 58.7175776,12.739798 60.1527291,11.2438788 C61.5878807,9.7479596 63.4626281,9 65.7769716,9 C66.5067857,9.0106757 67.2345208,9.08072506 67.9529716,9.20945455 C68.7804463,9.34650505 69.737214,9.55725253 70.8232746,9.84169697 L72.745214,9.06593939 L72.745214,22.4283636 C72.745214,24.213899 72.6605271,25.520404 72.4911534,26.3478788 C72.3424597,27.1215145 72.0497022,27.860316 71.6281231,28.5258182 C70.9908577,29.4891385 70.0844202,30.2438287 69.0215776,30.696 C67.7834618,31.2231176 66.4474127,31.48094 65.1020625,31.4523636 C64.1335045,31.4523045 63.1689244,31.3284732 62.2317594,31.0838788 C61.252533,30.8239772 60.3068642,30.4510466 59.41382,29.9726061 L58.9696988,26.7512727 L60.9575776,28.0506667 C61.5573127,28.4240193 62.2116549,28.7014604 62.8969716,28.8729697 C63.6457641,29.0836796 64.4192481,29.1938978 65.1970928,29.2007273 C66.7486079,29.2007273 67.9516786,28.8128485 68.8063049,28.0370909 C69.6609312,27.2613333 70.0863049,26.1571717 70.0824261,24.7246061 L70.0824261,23.582303 Z M70.0824261,21.5595152 L70.0824261,12.0739394 C69.4432737,11.7542576 68.7741844,11.4983147 68.0848503,11.3098182 C67.4816476,11.1457578 66.859767,11.0603633 66.2346685,11.0557576 C64.581012,11.0557576 63.2499413,11.6117172 62.2414564,12.7236364 C61.2329716,13.8355556 60.7280827,15.3146667 60.7267897,17.1609697 C60.7267897,18.9348687 61.179315,20.3428687 62.0843655,21.3849697 C62.989416,22.4270707 64.2086483,22.9474747 65.7420625,22.9461818 C66.3845516,22.9385817 67.0221469,22.8332967 67.6329716,22.6339394 C68.4792669,22.3480186 69.2988853,21.9885027 70.0824261,21.5595152 L70.0824261,21.5595152 Z" }),
+            React.createElement("path", { d: "M75,9 L77.8276364,9 L82.2649697,20.6363636 L87.1483636,9 L89.4504242,9 L82.3813333,25.3238788 L82.2649697,25.5546667 C81.1478788,28.0965657 80.2874343,29.9066667 79.6836364,30.9849697 L76.7415758,30.9849697 C77.3683498,30.3346009 77.9302011,29.6246546 78.4191515,28.8652121 C79.0313917,27.8817808 79.5750659,26.8572886 80.046303,25.7990303 L81.0004848,23.7452121 L75,9 Z" }))));
+}

package/dist/src/Branding/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Branding } from "./Branding";
-export { default as BrandingText } from "./BrandingText";
+export { default as Branding } from "./Branding";
+export { default as BrandingText } from "./BrandingText";

package/dist/src/Branding/index.js

@@ -0,0 +1,2 @@
+export { default as Branding } from "./Branding";
+export { default as BrandingText } from "./BrandingText";

package/dist/src/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-import { FlexProps } from "../Flex/Flex";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-type BreadcrumbsProps = FlexProps & {
-    variant?: ComponentVariant;
-};
-declare const Breadcrumbs: ({ variant, as, children, ...props }: BreadcrumbsProps) => React.JSX.Element;
-export default Breadcrumbs;
+import React from "react";
+import { FlexProps } from "../Flex/Flex";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+type BreadcrumbsProps = FlexProps & {
+    variant?: ComponentVariant;
+};
+declare const Breadcrumbs: ({ variant, as, children, ...props }: BreadcrumbsProps) => React.JSX.Element;
+export default Breadcrumbs;

package/dist/src/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { isValidElement } from "react";
+import { Flex } from "../Flex";
+import { Icon } from "../Icon";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext";
+import BreadcrumbsList from "./BreadcrumbsList";
+import { BreadcrumbsListItem, BreadcrumbsListSeparator } from "./BreadcrumbsListItem";
+const insertSeparators = (items) => {
+    return items.reduce((acc, current, index) => {
+        return acc.concat(current, React.createElement(BreadcrumbsListSeparator, { "aria-hidden": true, key: `separator-${index}`, className: "separator" },
+            React.createElement(Icon, { icon: "rightArrow" })));
+    }, []);
+};
+const Breadcrumbs = (_a) => {
+    var { variant, as = "nav", children } = _a, props = __rest(_a, ["variant", "as", "children"]);
+    const componentVariant = useComponentVariant(variant);
+    const allItems = React.Children.map(children, (child, index) => {
+        if (!isValidElement(child))
+            return null;
+        return (React.createElement(BreadcrumbsListItem, { variant: componentVariant, key: `child-${index}` }, child));
+    }).filter(Boolean);
+    return (React.createElement(Flex, Object.assign({ as: as }, props),
+        React.createElement(BreadcrumbsList, null, insertSeparators(allItems))));
+};
+export default Breadcrumbs;

package/dist/src/Breadcrumbs/Breadcrumbs.story.d.ts

@@ -1,18 +1,18 @@
-import React from "react";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const _Breadcrumbs: () => React.JSX.Element;
-export declare const WithoutLink: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithReactRouter: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const _Breadcrumbs: () => React.JSX.Element;
+export declare const WithoutLink: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};
+export declare const WithReactRouter: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

package/dist/src/Breadcrumbs/Breadcrumbs.story.js

@@ -0,0 +1,29 @@
+import React from "react";
+import { BrowserRouter, Link as ReactRouterLink } from "react-router-dom";
+import { Link } from "../Link";
+import { Text } from "../Type";
+import { Breadcrumbs } from "./index";
+export default {
+    title: "Components/Breadcrumbs",
+};
+export const _Breadcrumbs = () => (React.createElement(React.Fragment, null,
+    React.createElement(Breadcrumbs, null,
+        React.createElement(Link, { href: "/" }, "Home")),
+    React.createElement(Breadcrumbs, null,
+        React.createElement(Link, { href: "/" }, "Home"),
+        React.createElement(Link, { href: "/" }, "Tenants"))));
+export const WithoutLink = () => (React.createElement(Breadcrumbs, null,
+    React.createElement(Link, { href: "/" }, "Home"),
+    React.createElement(Link, { href: "/" }, "Tenants"),
+    React.createElement(Text, null, "Current Tenant")));
+WithoutLink.story = {
+    name: "without link",
+};
+export const WithReactRouter = () => (React.createElement(BrowserRouter, null,
+    React.createElement(Breadcrumbs, null,
+        React.createElement(Link, { as: ReactRouterLink, to: "/" }, "Home"),
+        React.createElement(Link, { as: ReactRouterLink, to: "/" }, "Tenants"),
+        React.createElement(Text, null, "Current Tenant"))));
+WithReactRouter.story = {
+    name: "with react router",
+};

package/dist/src/Breadcrumbs/BreadcrumbsList.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const BreadcrumbsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>> & string;
-export default BreadcrumbsList;
+/// <reference types="react" />
+declare const BreadcrumbsList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, never>> & string;
+export default BreadcrumbsList;

package/dist/src/Breadcrumbs/BreadcrumbsList.js

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+const BreadcrumbsList = styled.ol(() => ({
+    margin: 0,
+    padding: 0,
+    display: "flex",
+}));
+export default BreadcrumbsList;

package/dist/src/Breadcrumbs/BreadcrumbsListItem.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-export declare const BreadcrumbsListSeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
-export declare const BreadcrumbsListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
-    variant: ComponentVariant;
-}>> & string;
+/// <reference types="react" />
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+export declare const BreadcrumbsListSeparator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
+export declare const BreadcrumbsListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {
+    variant: ComponentVariant;
+}>> & string;

package/dist/src/Breadcrumbs/BreadcrumbsListItem.js

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { space, color, flexbox, layout } from "styled-system";
+export const BreadcrumbsListSeparator = styled.li(({ theme }) => ({
+    margin: 0,
+    listStyle: "none",
+    display: "inline-flex",
+    alignSelf: "center",
+    color: theme.colors.midGrey,
+    "a, p": {
+        fontSize: theme.fontSizes.base,
+    },
+    "a:visited": {
+        color: theme.colors.darkBlue,
+    },
+}), space, layout, color, flexbox);
+export const BreadcrumbsListItem = styled.li(({ theme }) => ({
+    margin: 0,
+    listStyle: "none",
+    display: "inline-flex",
+    alignSelf: "center",
+    color: theme.colors.midGrey,
+    a: {
+        color: theme.colors.darkBlue,
+        textDecorationLine: "none",
+    },
+    "a:visited": {
+        color: theme.colors.darkBlue,
+    },
+    "a, p": {
+        padding: theme.space.none,
+        fontSize: theme.fontSizes.small,
+        lineHeight: theme.lineHeights.smallTextBase,
+    },
+}), space, layout, color, flexbox);

package/dist/src/Breadcrumbs/index.d.ts

@@ -1 +1 @@
-export { default as Breadcrumbs } from "./Breadcrumbs";
+export { default as Breadcrumbs } from "./Breadcrumbs";

package/dist/src/Breadcrumbs/index.js

@@ -0,0 +1 @@
+export { default as Breadcrumbs } from "./Breadcrumbs";

package/dist/src/Button/Button.d.ts

@@ -1,19 +1,19 @@
-import React from "react";
-import type { IconName } from "@nulogy/icons";
-import { SpaceProps } from "styled-system";
-import { DefaultNDSThemeType } from "../theme";
-import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
-export type ButtonProps = SpaceProps & React.ComponentPropsWithRef<"button"> & {
-    className?: string;
-    icon?: IconName | "loading";
-    iconSide?: "left" | "right";
-    size?: "small" | "medium";
-    variant?: ComponentVariant;
-    fullWidth?: boolean;
-    asLink?: boolean;
-    children?: React.ReactNode;
-    theme?: DefaultNDSThemeType;
-    href?: string;
-};
-declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export default Button;
+import React from "react";
+import type { IconName } from "@nulogy/icons";
+import { SpaceProps } from "styled-system";
+import { DefaultNDSThemeType } from "../theme";
+import { ComponentVariant } from "../NDSProvider/ComponentVariantContext";
+export type ButtonProps = SpaceProps & React.ComponentPropsWithRef<"button"> & {
+    className?: string;
+    icon?: IconName | "loading";
+    iconSide?: "left" | "right";
+    size?: "small" | "medium";
+    variant?: ComponentVariant;
+    fullWidth?: boolean;
+    asLink?: boolean;
+    children?: React.ReactNode;
+    theme?: DefaultNDSThemeType;
+    href?: string;
+};
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default Button;