@neo4j-ndl/react 0.16.4 → 1.0.0-alpha-093fe38

package/lib/cjs/text-input/TextInput.js

@@ -80,17 +80,18 @@ const utils_1 = require("../_common/utils");
 const TextInput = react_1.default.forwardRef(function TextInput(props, ref) {
     const { label, fluid, errorText, helpText, leftIcon, rightIcon, type = 'text', containerSize = 'small', 'aria-label': ariaLabel } = props, customProps = __rest(props, ["label", "fluid", "errorText", "helpText", "leftIcon", "rightIcon", "type", "containerSize", 'aria-label']);
     const containerWrappingClass = (0, classnames_1.default)(`ndl-form-item ndl-type-text`, customProps.className, {
-        disabled: customProps.disabled,
-        [containerSize]: containerSize,
-        'has-error': errorText,
-        'has-left-icon': leftIcon,
-        'has-right-icon': rightIcon || errorText,
-        'has-icon': leftIcon || rightIcon || errorText,
+        'ndl-disabled': customProps.disabled,
+        'ndl-small': containerSize === 'small',
+        'ndl-large': containerSize === 'large',
+        'ndl-has-error': errorText,
+        'ndl-has-left-icon': leftIcon,
+        'ndl-has-right-icon': rightIcon || errorText,
+        'ndl-has-icon': leftIcon || rightIcon || errorText,
     });
     const hasEmptyLabelValue = !label || label === '';
-    const labelWrappingClass = (0, classnames_1.default)(`form-item-label`, {
-        fluid,
-        'form-item-no-label': hasEmptyLabelValue,
+    const labelWrappingClass = (0, classnames_1.default)('ndl-form-item-label', {
+        'ndl-fluid': fluid,
+        'ndl-form-item-no-label': hasEmptyLabelValue,
     });
     (0, react_1.useMemo)(() => {
         if (!label && !ariaLabel) {
@@ -98,7 +99,7 @@ const TextInput = react_1.default.forwardRef(function TextInput(props, ref) {
         }
     }, [label, ariaLabel]);
     const customPropsClassNameStripped = Object.assign(Object.assign({}, customProps), { className: undefined });
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: containerWrappingClass }, { children: [(0, jsx_runtime_1.jsxs)("label", Object.assign({ className: labelWrappingClass }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "input-wrapper" }, { children: [leftIcon && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "icon left-icon" }, { children: leftIcon })), (0, jsx_runtime_1.jsx)("input", Object.assign({}, customPropsClassNameStripped, { type: type, ref: ref, "aria-label": ariaLabel })), rightIcon && !errorText && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "icon right-icon" }, { children: rightIcon })))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "form-label-text" }, { children: label }))] })), helpText && !errorText && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "form-msg" }, { children: helpText })), errorText && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "form-msg" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "icon error-icon" }, { children: (0, jsx_runtime_1.jsx)(icons_1.HeroIcon, { iconName: "ExclamationCircleIcon", type: "solid" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "error-text" }, { children: errorText }))] })))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: containerWrappingClass }, { children: [(0, jsx_runtime_1.jsxs)("label", Object.assign({ className: labelWrappingClass }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "ndl-input-wrapper" }, { children: [leftIcon && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ndl-icon ndl-left-icon" }, { children: leftIcon })), (0, jsx_runtime_1.jsx)("input", Object.assign({}, customPropsClassNameStripped, { type: type, ref: ref, "aria-label": ariaLabel })), rightIcon && !errorText && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ndl-right-icon" }, { children: rightIcon })))] })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "ndl-form-label-text" }, { children: label }))] })), helpText && !errorText && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ndl-form-msg" }, { children: helpText })), errorText && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "ndl-form-msg" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ndl-error-icon" }, { children: (0, jsx_runtime_1.jsx)(icons_1.ExclamationCircleIconSolid, {}) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "ndl-error-text" }, { children: errorText }))] })))] })));
 });
 exports.default = TextInput;
 //# sourceMappingURL=TextInput.js.map

package/lib/cjs/text-input/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/text-input/TextInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,+CAAqD;AACrD,4DAAoC;AAEpC,oCAAoC;AACpC,4CAAwD;AAyBxD;;;;;;GAMG;AAEH,qCAAqC;AAErC;;;;;;GAMG;AAEH,MAAM,SAAS,GAAG,eAAK,CAAC,UAAU,CAAC,SAAS,SAAS,CACnD,KAA0B,EAC1B,GAAmC;IAEnC,MAAM,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,MAAM,EACb,aAAa,GAAG,OAAO,EACvB,YAAY,EAAE,SAAS,KAErB,KAAK,EADJ,WAAW,UACZ,KAAK,EAXH,2GAWL,CAAQ,CAAC;IAEV,MAAM,sBAAsB,GAAG,IAAA,oBAAU,EACvC,6BAA6B,EAC7B,WAAW,CAAC,SAAS,EACrB;QACE,QAAQ,EAAE,WAAW,CAAC,QAAQ;QAC9B,CAAC,aAAa,CAAC,EAAE,aAAa;QAC9B,WAAW,EAAE,SAAS;QACtB,eAAe,EAAE,QAAQ;QACzB,gBAAgB,EAAE,SAAS,IAAI,SAAS;QACxC,UAAU,EAAE,QAAQ,IAAI,SAAS,IAAI,SAAS;KAC/C,CACF,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC;IAElD,MAAM,kBAAkB,GAAG,IAAA,oBAAU,EAAC,iBAAiB,EAAE;QACvD,KAAK;QACL,oBAAoB,EAAE,kBAAkB;KACzC,CAAC,CAAC;IAEH,IAAA,eAAO,EAAC,GAAG,EAAE;QACX,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,EAAE;YACxB,IAAA,4BAAoB,EAClB,uLAAuL,CACxL,CAAC;SACH;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,MAAM,4BAA4B,mCAAQ,WAAW,KAAE,SAAS,EAAE,SAAS,GAAE,CAAC;IAE9E,OAAO,CACL,+CAAK,SAAS,EAAE,sBAAsB,iBAGpC,iDAAO,SAAS,EAAE,kBAAkB,iBAClC,+CAAK,SAAS,EAAC,eAAe,iBAC3B,QAAQ,IAAI,8CAAK,SAAS,EAAC,gBAAgB,gBAAE,QAAQ,IAAO,EAC7D,kDACM,4BAA4B,IAChC,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,gBACI,SAAS,IACrB,EACD,SAAS,IAAI,CAAC,SAAS,IAAI,CAC1B,8CAAK,SAAS,EAAC,iBAAiB,gBAAE,SAAS,IAAO,CACnD,KACG,EAEN,+CAAM,SAAS,EAAC,iBAAiB,gBAAE,KAAK,IAAQ,KAC1C,EACP,QAAQ,IAAI,CAAC,SAAS,IAAI,8CAAK,SAAS,EAAC,UAAU,gBAAE,QAAQ,IAAO,EACpE,SAAS,IAAI,CACZ,+CAAK,SAAS,EAAC,UAAU,iBACvB,8CAAK,SAAS,EAAC,iBAAiB,gBAC9B,uBAAC,gBAAQ,IAAC,QAAQ,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,GAAG,IACtD,EACN,8CAAK,SAAS,EAAC,YAAY,gBAAE,SAAS,IAAO,KACzC,CACP,KACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,SAAS,CAAC"}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/text-input/TextInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,+CAAqD;AACrD,4DAAoC;AAEpC,oCAAsD;AACtD,4CAAwD;AAyBxD;;;;;;GAMG;AAEH,qCAAqC;AAErC;;;;;;GAMG;AAEH,MAAM,SAAS,GAAG,eAAK,CAAC,UAAU,CAAC,SAAS,SAAS,CACnD,KAA0B,EAC1B,GAAmC;IAEnC,MAAM,EACJ,KAAK,EACL,KAAK,EACL,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,MAAM,EACb,aAAa,GAAG,OAAO,EACvB,YAAY,EAAE,SAAS,KAErB,KAAK,EADJ,WAAW,UACZ,KAAK,EAXH,2GAWL,CAAQ,CAAC;IAEV,MAAM,sBAAsB,GAAG,IAAA,oBAAU,EACvC,6BAA6B,EAC7B,WAAW,CAAC,SAAS,EACrB;QACE,cAAc,EAAE,WAAW,CAAC,QAAQ;QACpC,WAAW,EAAE,aAAa,KAAK,OAAO;QACtC,WAAW,EAAE,aAAa,KAAK,OAAO;QACtC,eAAe,EAAE,SAAS;QAC1B,mBAAmB,EAAE,QAAQ;QAC7B,oBAAoB,EAAE,SAAS,IAAI,SAAS;QAC5C,cAAc,EAAE,QAAQ,IAAI,SAAS,IAAI,SAAS;KACnD,CACF,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,KAAK,IAAI,KAAK,KAAK,EAAE,CAAC;IAElD,MAAM,kBAAkB,GAAG,IAAA,oBAAU,EAAC,qBAAqB,EAAE;QAC3D,WAAW,EAAE,KAAK;QAClB,wBAAwB,EAAE,kBAAkB;KAC7C,CAAC,CAAC;IAEH,IAAA,eAAO,EAAC,GAAG,EAAE;QACX,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,EAAE;YACxB,IAAA,4BAAoB,EAClB,uLAAuL,CACxL,CAAC;SACH;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvB,MAAM,4BAA4B,mCAAQ,WAAW,KAAE,SAAS,EAAE,SAAS,GAAE,CAAC;IAE9E,OAAO,CACL,+CAAK,SAAS,EAAE,sBAAsB,iBAGpC,iDAAO,SAAS,EAAE,kBAAkB,iBAClC,+CAAK,SAAS,EAAC,mBAAmB,iBAC/B,QAAQ,IAAI,8CAAK,SAAS,EAAC,wBAAwB,gBAAE,QAAQ,IAAO,EACrE,kDACM,4BAA4B,IAChC,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,gBACI,SAAS,IACrB,EACD,SAAS,IAAI,CAAC,SAAS,IAAI,CAC1B,8CAAK,SAAS,EAAC,gBAAgB,gBAAE,SAAS,IAAO,CAClD,KACG,EAEN,+CAAM,SAAS,EAAC,qBAAqB,gBAAE,KAAK,IAAQ,KAC9C,EACP,QAAQ,IAAI,CAAC,SAAS,IAAI,8CAAK,SAAS,EAAC,cAAc,gBAAE,QAAQ,IAAO,EACxE,SAAS,IAAI,CACZ,+CAAK,SAAS,EAAC,cAAc,iBAC3B,8CAAK,SAAS,EAAC,gBAAgB,gBAC7B,uBAAC,kCAA0B,KAAG,IAC1B,EACN,8CAAK,SAAS,EAAC,gBAAgB,gBAAE,SAAS,IAAO,KAC7C,CACP,KACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,SAAS,CAAC"}

package/lib/cjs/tooltip/SmartTooltip.js

@@ -0,0 +1,114 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+const react_1 = __importStar(require("react"));
+const react_dom_interactions_1 = require("@floating-ui/react-dom-interactions");
+const Tooltip_1 = __importDefault(require("./Tooltip"));
+const base_1 = require("@neo4j-ndl/base");
+const PLACEMENTS = ['top', 'bottom', 'left', 'right'];
+const calculateArrow = (placement) => {
+    switch (placement) {
+        case 'bottom':
+            return 'top';
+        case 'left':
+            return 'right';
+        case 'right':
+            return 'left';
+        case 'top':
+        default:
+            return 'bottom';
+    }
+};
+const SmartTooltip = react_1.default.forwardRef(function SmartTooltip(_a, ref) {
+    var { open: openProp, allowedPlacements = PLACEMENTS } = _a, props = __rest(_a, ["open", "allowedPlacements"]);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const { context, x, y, reference, floating, strategy, placement } = (0, react_dom_interactions_1.useFloating)({
+        open,
+        onOpenChange: setOpen,
+        whileElementsMounted: react_dom_interactions_1.autoUpdate,
+        middleware: [
+            (0, react_dom_interactions_1.offset)(10),
+            (0, react_dom_interactions_1.autoPlacement)({
+                allowedPlacements,
+            }),
+        ],
+    });
+    const hover = (0, react_dom_interactions_1.useHover)(context, {
+        move: false,
+        delay: {
+            // Strip the 'ms' from the duration token, need to provide pure ms durations
+            close: parseInt(base_1.tokens.transitions.values.duration.default.replace('ms', '')),
+        },
+    });
+    const { getFloatingProps } = (0, react_dom_interactions_1.useInteractions)([hover]);
+    (0, react_1.useEffect)(() => {
+        /**
+         * Assign passed ref to the reference callback
+         * of the useFloating hook
+         */
+        const { current = null } = ref || {};
+        if (current) {
+            reference(current);
+        }
+    }, [ref]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: open || openProp ? ((0, jsx_runtime_1.jsx)(Tooltip_1.default, Object.assign({}, props, getFloatingProps(), { ref: floating, arrowPosition: calculateArrow(placement), style: Object.assign({ position: strategy, top: y !== null && y !== void 0 ? y : 0, left: x !== null && x !== void 0 ? x : 0, width: 'max-content' }, props.style) }))) : null }));
+});
+exports.default = SmartTooltip;
+//# sourceMappingURL=SmartTooltip.js.map

package/lib/cjs/tooltip/SmartTooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartTooltip.js","sourceRoot":"","sources":["../../../src/tooltip/SmartTooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,+CAKe;AACf,gFAO6C;AAE7C,wDAAkD;AAClD,0CAAyC;AASzC,MAAM,UAAU,GAAW,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;AAE9D,MAAM,cAAc,GAAG,CACrB,SAAe,EACkC,EAAE;IACnD,QAAQ,SAAS,EAAE;QACjB,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC;QACf,KAAK,MAAM;YACT,OAAO,OAAO,CAAC;QACjB,KAAK,OAAO;YACV,OAAO,MAAM,CAAC;QAChB,KAAK,KAAK,CAAC;QACX;YACE,OAAO,QAAQ,CAAC;KACnB;AACH,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,eAAK,CAAC,UAAU,CAAC,SAAS,YAAY,CACzD,EAIoB,EACpB,GAAgC;QALhC,EACE,IAAI,EAAE,QAAQ,EACd,iBAAiB,GAAG,UAAU,OAEZ,EADf,KAAK,cAHV,6BAIC,CADS;IAIV,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAExC,MAAM,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,GAC/D,IAAA,oCAAW,EAAC;QACV,IAAI;QACJ,YAAY,EAAE,OAAO;QACrB,oBAAoB,EAAE,mCAAU;QAChC,UAAU,EAAE;YACV,IAAA,+BAAM,EAAC,EAAE,CAAC;YACV,IAAA,sCAAa,EAAC;gBACZ,iBAAiB;aAClB,CAAC;SACH;KACF,CAAC,CAAC;IAEL,MAAM,KAAK,GAAG,IAAA,iCAAQ,EAAC,OAAO,EAAE;QAC9B,IAAI,EAAE,KAAK;QACX,KAAK,EAAE;YACL,4EAA4E;YAC5E,KAAK,EAAE,QAAQ,CACb,aAAM,CAAC,WAAW,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC,CAC7D;SACF;KACF,CAAC,CAAC;IAEH,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,wCAAe,EAAC,CAAC,KAAK,CAAC,CAAC,CAAC;IAEtD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb;;;WAGG;QACH,MAAM,EAAE,OAAO,GAAG,IAAI,EAAE,GAAI,GAA6B,IAAI,EAAE,CAAC;QAChE,IAAI,OAAO,EAAE;YACX,SAAS,CAAC,OAAO,CAAC,CAAC;SACpB;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,CACL,2DACG,IAAI,IAAI,QAAQ,CAAC,CAAC,CAAC,CAClB,uBAAC,iBAAO,oBACF,KAAK,EACL,gBAAgB,EAAE,IACtB,GAAG,EAAE,QAAQ,EACb,aAAa,EAAE,cAAc,CAAC,SAAiB,CAAC,EAChD,KAAK,kBACH,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC,EACX,IAAI,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC,EACZ,KAAK,EAAE,aAAa,IACjB,KAAK,CAAC,KAAK,KAEhB,CACH,CAAC,CAAC,CAAC,IAAI,GACP,CACJ,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,YAAY,CAAC"}

package/lib/cjs/tooltip/Tooltip.js

@@ -39,8 +39,16 @@ const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Tooltip = react_1.default.forwardRef(function Tooltip(_a, ref) {
     var { arrowPosition, children, className } = _a, props = __rest(_a, ["arrowPosition", "children", "className"]);
-    const classes = (0, classnames_1.default)('ndl-tooltip-wrapper', className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, props, { role: "tooltip", className: classes, ref: ref }, { children: [children, (0, jsx_runtime_1.jsx)("div", { className: `tooltip-triangle ${arrowPosition}` })] })));
+    const classesWrapper = (0, classnames_1.default)('ndl-tooltip-wrapper', className);
+    const classesTriangle = (0, classnames_1.default)('ndl-tooltip-triangle', {
+        'ndl-top': arrowPosition === 'top',
+        'ndl-bottom': arrowPosition === 'bottom',
+        'ndl-left': arrowPosition === 'left',
+        'ndl-right': arrowPosition === 'right',
+        'ndl-top-left': arrowPosition === 'top-left',
+        'ndl-top-right': arrowPosition === 'top-right',
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, props, { role: "tooltip", className: classesWrapper, ref: ref }, { children: [children, (0, jsx_runtime_1.jsx)("div", { className: classesTriangle })] })));
 });
 exports.default = Tooltip;
 //# sourceMappingURL=Tooltip.js.map

package/lib/cjs/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,kDAA0B;AAC1B,4DAAoC;AAgBpC,MAAM,OAAO,GAAG,eAAK,CAAC,UAAU,CAAC,SAAS,OAAO,CAC/C,EAA8D,EAC9D,GAAuC;QADvC,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,OAA0B,EAArB,KAAK,cAA9C,0CAAgD,CAAF;IAG9C,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC;IAE7D,OAAO,CACL,iDAAS,KAAK,IAAE,IAAI,EAAC,SAAS,EAAC,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,iBACxD,QAAQ,EACT,gCAAK,SAAS,EAAE,oBAAoB,aAAa,EAAE,GAAI,KACnD,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,OAAO,CAAC"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,kDAA0B;AAC1B,4DAAoC;AAgBpC,MAAM,OAAO,GAAG,eAAK,CAAC,UAAU,CAAC,SAAS,OAAO,CAC/C,EAA8D,EAC9D,GAAuC;QADvC,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,OAA0B,EAArB,KAAK,cAA9C,0CAAgD,CAAF;IAG9C,MAAM,cAAc,GAAG,IAAA,oBAAU,EAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC;IAEpE,MAAM,eAAe,GAAG,IAAA,oBAAU,EAAC,sBAAsB,EAAE;QACzD,SAAS,EAAE,aAAa,KAAK,KAAK;QAClC,YAAY,EAAE,aAAa,KAAK,QAAQ;QACxC,UAAU,EAAE,aAAa,KAAK,MAAM;QACpC,WAAW,EAAE,aAAa,KAAK,OAAO;QACtC,cAAc,EAAE,aAAa,KAAK,UAAU;QAC5C,eAAe,EAAE,aAAa,KAAK,WAAW;KAC/C,CAAC,CAAC;IAEH,OAAO,CACL,iDAAS,KAAK,IAAE,IAAI,EAAC,SAAS,EAAC,SAAS,EAAE,cAAc,EAAE,GAAG,EAAE,GAAG,iBAC/D,QAAQ,EACT,gCAAK,SAAS,EAAE,eAAe,GAAI,KAC/B,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAe,OAAO,CAAC"}

package/lib/cjs/tooltip/index.js

@@ -23,7 +23,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tooltip = void 0;
+exports.SmartTooltip = exports.Tooltip = void 0;
 var Tooltip_1 = require("./Tooltip");
 Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return __importDefault(Tooltip_1).default; } });
+var SmartTooltip_1 = require("./SmartTooltip");
+Object.defineProperty(exports, "SmartTooltip", { enumerable: true, get: function () { return __importDefault(SmartTooltip_1).default; } });
 //# sourceMappingURL=index.js.map

package/lib/cjs/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tooltip/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,qCAA+C;AAAtC,mHAAA,OAAO,OAAW"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tooltip/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,qCAA+C;AAAtC,mHAAA,OAAO,OAAW;AAC3B,+CAAyD;AAAhD,6HAAA,OAAO,OAAgB"}

package/lib/cjs/typography/Typography.js

@@ -0,0 +1,58 @@
+"use strict";
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Typography = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../_common/utils");
+const types_1 = require("./types");
+const Typography = (props) => {
+    const { className = '', variant, as } = props, rest = __rest(props, ["className", "variant", "as"]);
+    const classes = (0, classnames_1.default)(`n-${variant}`, className);
+    const Component = (as || types_1.TypographyDefaultMapping[variant]);
+    return (0, jsx_runtime_1.jsx)(Component, Object.assign({}, rest, { className: classes }));
+};
+exports.Typography = Typography;
+/**
+ *  Experimental Type testing
+ */
+const Link = ({ linkClick }) => ((0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: linkClick }, { children: "Test" })));
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const _MultipleCasesComponent = () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(exports.Typography, { variant: "h2", as: "a", href: "www.neo4j.com" }), (0, jsx_runtime_1.jsx)(exports.Typography, { variant: "h2", as: "span", href: "www.neo4j.com" }), (0, jsx_runtime_1.jsx)(exports.Typography, { variant: "body-medium", as: Link }), (0, jsx_runtime_1.jsx)(exports.Typography, { variant: "body-medium", as: Link, linkClick: () => {
+                (0, utils_1.needleWarningMessage)('clicked link');
+            } })] }));
+//# sourceMappingURL=Typography.js.map

package/lib/cjs/typography/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../src/typography/Typography.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4DAAoC;AACpC,4CAAwD;AACxD,mCAMiB;AAEV,MAAM,UAAU,GAAG,CAIxB,KAGoC,EACpC,EAAE;IACF,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,OAAO,EAAE,EAAE,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAhD,8BAAwC,CAAQ,CAAC;IAEvD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,KAAK,OAAO,EAAE,EAAE,SAAS,CAAC,CAAC;IACtD,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,gCAAwB,CAAC,OAAO,CAAC,CAAmB,CAAC;IAE9E,OAAO,uBAAC,SAAS,oBAAK,IAAI,IAAE,SAAS,EAAE,OAAO,IAAI,CAAC;AACrD,CAAC,CAAC;AAfW,QAAA,UAAU,cAerB;AAEF;;GAEG;AACH,MAAM,IAAI,GAAG,CAAC,EAAE,SAAS,EAA6B,EAAE,EAAE,CAAC,CACzD,iDAAQ,OAAO,EAAE,SAAS,0BAAe,CAC1C,CAAC;AAEF,6DAA6D;AAC7D,aAAa;AACb,MAAM,uBAAuB,GAAG,GAAG,EAAE,CAAC,CACpC,4CAEE,uBAAC,kBAAU,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,IAAI,EAAC,eAAe,GAAG,EAGvD,uBAAC,kBAAU,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,EAAC,IAAI,EAAC,eAAe,GAAG,EAG1D,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,EAAC,EAAE,EAAE,IAAI,GAAI,EAG9C,uBAAC,kBAAU,IACT,OAAO,EAAC,aAAa,EACrB,EAAE,EAAE,IAAI,EACR,SAAS,EAAE,GAAG,EAAE;gBACd,IAAA,4BAAoB,EAAC,cAAc,CAAC,CAAC;YACvC,CAAC,GACD,IACE,CACP,CAAC"}

package/lib/cjs/typography/index.js

@@ -0,0 +1,38 @@
+"use strict";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Typography"), exports);
+//# sourceMappingURL=index.js.map

package/lib/cjs/typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/typography/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;;;;;;;;;;;AAEH,+CAA6B"}

package/lib/cjs/typography/types.js

@@ -0,0 +1,52 @@
+"use strict";
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TypographyDefaultMapping = void 0;
+exports.TypographyDefaultMapping = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    'subheading-large': 'span',
+    'subheading-medium': 'span',
+    'subheading-small': 'span',
+    'body-large': 'span',
+    'body-medium': 'span',
+    'body-small': 'span',
+    code: 'code',
+    label: 'span',
+};
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+const _CodeElement = {
+    // @ts-expect-error href is not a valid prop for a code element
+    href: 'https://www.neo4j.com',
+};
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// @ts-expect-no-error href is a valid prop for an anchor element
+const _AnchorElement = {
+    href: 'https://www.neo4j.com',
+};
+//# sourceMappingURL=types.js.map

package/lib/cjs/typography/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/typography/types.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;AAMU,QAAA,wBAAwB,GAEjC;IACF,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,kBAAkB,EAAE,MAAM;IAC1B,mBAAmB,EAAE,MAAM;IAC3B,kBAAkB,EAAE,MAAM;IAC1B,YAAY,EAAE,MAAM;IACpB,aAAa,EAAE,MAAM;IACrB,YAAY,EAAE,MAAM;IACpB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,MAAM;CACL,CAAC;AAgCX,6DAA6D;AAC7D,aAAa;AACb,MAAM,YAAY,GAAoB;IACpC,+DAA+D;IAC/D,IAAI,EAAE,uBAAuB;CAC9B,CAAC;AAIF,6DAA6D;AAC7D,aAAa;AACb,iEAAiE;AACjE,MAAM,cAAc,GAAsB;IACxC,IAAI,EAAE,uBAAuB;CAC9B,CAAC"}

package/lib/cjs/view-selector/ViewSelector.js

@@ -72,7 +72,10 @@ const useSelectorContext = () => {
 };
 exports.ViewSelector = (0, helpers_1.forwardRef)(function ViewSelector(_a, ref) {
     var { size = 'large', icons = false, children, selected, onChange, as = 'div', className } = _a, rest = __rest(_a, ["size", "icons", "children", "selected", "onChange", "as", "className"]);
-    const classes = (0, classnames_1.default)(`ndl-view-selector`, size, className);
+    const classes = (0, classnames_1.default)('ndl-view-selector', className, {
+        'ndl-small': size === 'small',
+        'ndl-large': size === 'large',
+    });
     const Component = as;
     return ((0, jsx_runtime_1.jsx)(Component, Object.assign({}, rest, { className: classes, role: "group", ref: ref }, { children: (0, jsx_runtime_1.jsx)(ViewSelectorContext.Provider, Object.assign({ value: { onChange, selected, icons } }, { children: children })) })));
 });
@@ -80,8 +83,10 @@ exports.ViewSelectorItem = react_1.default.forwardRef(function ViewSelectorItem(
     var { children, value, as = 'button', className } = _a, rest = __rest(_a, ["children", "value", "as", "className"]);
     const { onChange, selected, icons } = useSelectorContext();
     const isSelected = value && value === selected;
-    const base = (0, classnames_1.default)(`selector-${icons ? 'icon' : 'item'}`, className, {
-        current: value && value === selected,
+    const base = (0, classnames_1.default)(className, {
+        'ndl-selector-item': !icons,
+        'ndl-selector-icon': icons,
+        'ndl-current': value && value === selected,
     });
     const Component = as;
     return ((0, jsx_runtime_1.jsx)(Component, Object.assign({}, rest, { onClick: () => !isSelected && onChange(value), className: base, ref: ref }, { children: children })));

package/lib/cjs/view-selector/ViewSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"ViewSelector.js","sourceRoot":"","sources":["../../../src/view-selector/ViewSelector.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,+CAA0C;AAC1C,4DAAoC;AACpC,wCAAqD;AAuCrD,MAAM,mBAAmB,GACvB,eAAK,CAAC,aAAa,CAAkC,IAAI,CAAC,CAAC;AAE7D,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,mBAAmB,CAAC,CAAC;IAEhD,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,MAAM,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAC;KACvD;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEW,QAAA,YAAY,GAAG,IAAA,oBAAU,EAAC,SAAS,YAAY,CAG1D,EASuB,EACvB,GAAgC;QAVhC,EACE,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,EAAE,GAAG,KAAK,EACV,SAAS,OAEY,EADlB,IAAI,cART,wEASC,CADQ;IAIT,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,mBAAmB,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;IAEjE,MAAM,SAAS,GAAG,EAAE,CAAC;IAErB,OAAO,CACL,uBAAC,SAAS,oBAAK,IAAI,IAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,gBAC5D,uBAAC,mBAAmB,CAAC,QAAQ,kBAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAC/D,QAAQ,IACoB,IACrB,CACb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEU,QAAA,gBAAgB,GAAG,eAAK,CAAC,UAAU,CAAC,SAAS,gBAAgB,CACxE,EAQC,EACD,GAAG;QATH,EACE,QAAQ,EACR,KAAK,EACL,EAAE,GAAG,QAAQ,EACb,SAAS,OAIV,EAHI,IAAI,cALT,wCAMC,CADQ;IAMT,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAE3D,MAAM,UAAU,GAAG,KAAK,IAAI,KAAK,KAAK,QAAQ,CAAC;IAE/C,MAAM,IAAI,GAAG,IAAA,oBAAU,EAAC,YAAY,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE;QACxE,OAAO,EAAE,KAAK,IAAI,KAAK,KAAK,QAAQ;KACrC,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,EAAE,CAAC;IAErB,OAAO,CACL,uBAAC,SAAS,oBACJ,IAAI,IACR,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,QAAQ,CAAC,KAAK,CAAC,EAC7C,SAAS,EAAE,IAAI,EACf,GAAG,EAAE,GAAG,gBAEP,QAAQ,IACC,CACb,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"ViewSelector.js","sourceRoot":"","sources":["../../../src/view-selector/ViewSelector.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,+CAA0C;AAC1C,4DAAoC;AACpC,wCAAqD;AAuCrD,MAAM,mBAAmB,GACvB,eAAK,CAAC,aAAa,CAAkC,IAAI,CAAC,CAAC;AAE7D,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,mBAAmB,CAAC,CAAC;IAEhD,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,MAAM,IAAI,KAAK,CAAC,oCAAoC,CAAC,CAAC;KACvD;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEW,QAAA,YAAY,GAAG,IAAA,oBAAU,EAAC,SAAS,YAAY,CAG1D,EASuB,EACvB,GAAgC;QAVhC,EACE,IAAI,GAAG,OAAO,EACd,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,EAAE,GAAG,KAAK,EACV,SAAS,OAEY,EADlB,IAAI,cART,wEASC,CADQ;IAIT,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,mBAAmB,EAAE,SAAS,EAAE;QACzD,WAAW,EAAE,IAAI,KAAK,OAAO;QAC7B,WAAW,EAAE,IAAI,KAAK,OAAO;KAC9B,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,EAAE,CAAC;IAErB,OAAO,CACL,uBAAC,SAAS,oBAAK,IAAI,IAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,EAAC,GAAG,EAAE,GAAG,gBAC5D,uBAAC,mBAAmB,CAAC,QAAQ,kBAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,gBAC/D,QAAQ,IACoB,IACrB,CACb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEU,QAAA,gBAAgB,GAAG,eAAK,CAAC,UAAU,CAAC,SAAS,gBAAgB,CACxE,EAQC,EACD,GAAG;QATH,EACE,QAAQ,EACR,KAAK,EACL,EAAE,GAAG,QAAQ,EACb,SAAS,OAIV,EAHI,IAAI,cALT,wCAMC,CADQ;IAMT,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAE3D,MAAM,UAAU,GAAG,KAAK,IAAI,KAAK,KAAK,QAAQ,CAAC;IAE/C,MAAM,IAAI,GAAG,IAAA,oBAAU,EAAC,SAAS,EAAE;QACjC,mBAAmB,EAAE,CAAC,KAAK;QAC3B,mBAAmB,EAAE,KAAK;QAC1B,aAAa,EAAE,KAAK,IAAI,KAAK,KAAK,QAAQ;KAC3C,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,EAAE,CAAC;IAErB,OAAO,CACL,uBAAC,SAAS,oBACJ,IAAI,IACR,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,UAAU,IAAI,QAAQ,CAAC,KAAK,CAAC,EAC7C,SAAS,EAAE,IAAI,EACf,GAAG,EAAE,GAAG,gBAEP,QAAQ,IACC,CACb,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/lib/cjs/wizard/Wizard.js

@@ -44,11 +44,29 @@ const getStatus = (activeStep, stepIndex) => stepIndex + 1 === activeStep
         ? 'incomplete'
         : 'complete';
 const Circle = ({ status, number, text, type, }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "ndl-wizard-circle" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "n-relative" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `text ${type}` }, { children: text })) })), (0, jsx_runtime_1.jsxs)("svg", Object.assign({ className: `n-h-10 n-w-10 ${status}` }, { children: [status === 'active' && ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("circle", { className: "n-fill-light-primary-text", cx: "20", cy: "20", r: "20" }), (0, jsx_runtime_1.jsx)("circle", { className: "n-fill-neutral-10", cx: "20", cy: "20", r: "18" })] })), (0, jsx_runtime_1.jsx)("circle", { className: `${status === 'complete' || status === 'active'
+    const statusClassName = (0, classnames_1.default)({
+        'ndl-active': status === 'active',
+        'ndl-complete': status === 'complete',
+        'ndl-incomplete': status === 'incomplete',
+    });
+    const typeClassName = (0, classnames_1.default)({
+        'ndl-horizontal': type === 'horizontal',
+        'ndl-vertical': type === 'vertical',
+    });
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "ndl-wizard-circle" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "n-relative" }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `ndl-text ${typeClassName}` }, { children: text })) })), (0, jsx_runtime_1.jsxs)("svg", Object.assign({ className: `n-h-10 n-w-10 ${statusClassName}` }, { children: [status === 'active' && ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("circle", { className: "n-fill-light-primary-text", cx: "20", cy: "20", r: "20" }), (0, jsx_runtime_1.jsx)("circle", { className: "n-fill-neutral-10", cx: "20", cy: "20", r: "18" })] })), (0, jsx_runtime_1.jsx)("circle", { className: `${status === 'complete' || status === 'active'
                             ? 'n-fill-light-primary-text'
                             : 'n-fill-light-neutral-text-weakest'}`, cx: "20", cy: "20", r: "16" }), (0, jsx_runtime_1.jsx)("text", Object.assign({ x: "50%", y: "50%", className: "n-fill-neutral-10", textAnchor: "middle", dy: "0.3em" }, { children: number }))] }))] })));
 };
-const Line = ({ status, type, }) => (0, jsx_runtime_1.jsx)("div", { "aria-hidden": true, className: `ndl-wizard-line ${status} ${type}` });
+const Line = ({ status, type, }) => {
+    const classes = (0, classnames_1.default)('ndl-wizard-line', {
+        'ndl-active': status === 'active',
+        'ndl-complete': status === 'complete',
+        'ndl-incomplete': status === 'incomplete',
+        'ndl-horizontal': type === 'horizontal',
+        'ndl-vertical': type === 'vertical',
+    });
+    return (0, jsx_runtime_1.jsx)("div", { "aria-hidden": true, className: classes });
+};
 const Horizontal = (_a) => {
     var { activeStep, steps } = _a, props = __rest(_a, ["activeStep", "steps"]);
     const components = [];

package/lib/cjs/wizard/Wizard.js.map

@@ -1 +1 @@
-{"version":3,"file":"Wizard.js","sourceRoot":"","sources":["../../../src/wizard/Wizard.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Wizard.js","sourceRoot":"","sources":["../../../src/wizard/Wizard.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4DAAoC;AAEpC,4CAA4C;AAE5C,MAAM,SAAS,GAAG,CAAC,UAAkB,EAAE,SAAiB,EAAE,EAAE,CAC1D,SAAS,GAAG,CAAC,KAAK,UAAU;IAC1B,CAAC,CAAC,QAAQ;IACV,CAAC,CAAC,UAAU,GAAG,SAAS,GAAG,CAAC;QAC5B,CAAC,CAAC,YAAY;QACd,CAAC,CAAC,UAAU,CAAC;AAEjB,MAAM,MAAM,GAAG,CAAC,EACd,MAAM,EACN,MAAM,EACN,IAAI,EACJ,IAAI,GAML,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,IAAA,oBAAU,EAAC;QACjC,YAAY,EAAE,MAAM,KAAK,QAAQ;QACjC,cAAc,EAAE,MAAM,KAAK,UAAU;QACrC,gBAAgB,EAAE,MAAM,KAAK,YAAY;KAC1C,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,IAAA,oBAAU,EAAC;QAC/B,gBAAgB,EAAE,IAAI,KAAK,YAAY;QACvC,cAAc,EAAE,IAAI,KAAK,UAAU;KACpC,CAAC,CAAC;IAEH,OAAO,CACL,+CAAK,SAAS,EAAC,mBAAmB,iBAChC,8CAAK,SAAS,EAAC,YAAY,gBACzB,8CAAK,SAAS,EAAE,YAAY,aAAa,EAAE,gBAAG,IAAI,IAAO,IACrD,EAEN,+CAAK,SAAS,EAAE,iBAAiB,eAAe,EAAE,iBAC/C,MAAM,KAAK,QAAQ,IAAI,CACtB,0CACE,mCACE,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,GACN,EACF,mCAAQ,SAAS,EAAC,mBAAmB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,IAC7D,CACL,EACD,mCACE,SAAS,EAAE,GACT,MAAM,KAAK,UAAU,IAAI,MAAM,KAAK,QAAQ;4BAC1C,CAAC,CAAC,2BAA2B;4BAC7B,CAAC,CAAC,mCACN,EAAE,EACF,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,GACN,EACF,+CACE,CAAC,EAAC,KAAK,EACP,CAAC,EAAC,KAAK,EACP,SAAS,EAAC,mBAAmB,EAC7B,UAAU,EAAC,QAAQ,EACnB,EAAE,EAAC,OAAO,gBAET,MAAM,IACF,KACH,KACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,IAAI,GAAG,CAAC,EACZ,MAAM,EACN,IAAI,GAIL,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,iBAAiB,EAAE;QAC5C,YAAY,EAAE,MAAM,KAAK,QAAQ;QACjC,cAAc,EAAE,MAAM,KAAK,UAAU;QACrC,gBAAgB,EAAE,MAAM,KAAK,YAAY;QACzC,gBAAgB,EAAE,IAAI,KAAK,YAAY;QACvC,cAAc,EAAE,IAAI,KAAK,UAAU;KACpC,CAAC,CAAC;IAEH,OAAO,qDAAiB,SAAS,EAAE,OAAO,GAAI,CAAC;AACjD,CAAC,CAAC;AAEK,MAAM,UAAU,GAAG,CAAC,EAIC,EAAE,EAAE;QAJL,EACzB,UAAU,EACV,KAAK,OAEqB,EADvB,KAAK,cAHiB,uBAI1B,CADS;IAER,MAAM,UAAU,GAAkB,EAAE,CAAC;IACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACtB,UAAU,CAAC,IAAI,CACb,uBAAC,MAAM,IAEL,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE,CAAC,GAAG,CAAC,EACb,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,IAJ3B,UAAU,CAAC,SAAS,IAAA,gBAAQ,EAAC,CAAC,CAAC,EAAE,CAKtC,CACH,CAAC;QAEF,IAAI,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;YACxB,UAAU,CAAC,IAAI,CACb,uBAAC,IAAI,IAEH,IAAI,EAAC,YAAY,EACjB,MAAM,EAAE,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,IAF3B,QAAQ,CAAC,SAAS,IAAA,gBAAQ,EAAC,CAAC,CAAC,EAAE,CAGpC,CACH,CAAC;SACH;KACF;IACD,OAAO,CACL,gDACM,KAAK,IACT,SAAS,EAAE,IAAA,oBAAU,EAAC,uBAAuB,EAAE,KAAK,CAAC,SAAS,CAAC,EAC/D,IAAI,EAAC,YAAY,gBAEhB,UAAU,IACP,CACP,CAAC;AACJ,CAAC,CAAC;AArCW,QAAA,UAAU,cAqCrB;AAEK,MAAM,QAAQ,GAAG,CAAC,EAIG,EAAE,EAAE;QAJP,EACvB,UAAU,EACV,KAAK,OAEqB,EADvB,KAAK,cAHe,uBAIxB,CADS;IAER,MAAM,UAAU,GAAkB,EAAE,CAAC;IACrC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACrC,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;QACtB,UAAU,CAAC,IAAI,CACb,uBAAC,MAAM,IAEL,IAAI,EAAC,UAAU,EACf,MAAM,EAAE,CAAC,GAAG,CAAC,EACb,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,IAJ3B,UAAU,CAAC,SAAS,IAAA,gBAAQ,EAAC,CAAC,CAAC,EAAE,CAKtC,CACH,CAAC;QACF,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC;YAClB,UAAU,CAAC,IAAI,CACb,uBAAC,IAAI,IAEH,IAAI,EAAC,UAAU,EACf,MAAM,EAAE,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,IAF3B,QAAQ,CAAC,SAAS,IAAA,gBAAQ,EAAC,CAAC,CAAC,EAAE,CAGpC,CACH,CAAC;KACL;IACD,OAAO,CACL,gDACM,KAAK,IACT,SAAS,EAAE,IAAA,oBAAU,EAAC,sBAAsB,EAAE,KAAK,CAAC,SAAS,CAAC,EAC9D,IAAI,EAAC,YAAY,gBAEhB,UAAU,IACP,CACP,CAAC;AACJ,CAAC,CAAC;AAnCW,QAAA,QAAQ,YAmCnB;AAEK,MAAM,MAAM,GAAG,CAAC,EAIK,EAAE,EAAE;QAJT,EACrB,UAAU,EACV,KAAK,OAEqB,EADvB,KAAK,cAHa,uBAItB,CADS;IACuB,OAAA,CAC/B,gDACM,KAAK,IACT,SAAS,EAAE,IAAA,oBAAU,EAAC,mBAAmB,EAAE,KAAK,CAAC,SAAS,CAAC,EAC3D,IAAI,EAAC,YAAY,gBAEjB,+CAAK,SAAS,EAAC,uBAAuB,iBACpC,gCAAK,SAAS,EAAC,0DAA0D,GAAG,EAC3E,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACnB,8CACE,SAAS,EAAC,mDAAmD,gBAG7D,+CACE,SAAS,EAAE,6BAA6B,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,EAAE,iBAEjE,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,KAAK,QAAQ,IAAI,CACxC,wCACE,mCACE,SAAS,EAAC,2BAA2B,EACrC,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,GACL,GACA,CACL,EACD,mCACE,SAAS,EAAE,GACT,SAAS,CAAC,UAAU,EAAE,CAAC,CAAC,KAAK,QAAQ;oCACnC,CAAC,CAAC,2BAA2B;oCAC7B,CAAC,CAAC,oCACN,EAAE,EACF,EAAE,EAAC,GAAG,EACN,EAAE,EAAC,GAAG,EACN,CAAC,EAAC,GAAG,GACL,KACE,KAzBD,CAAC,CA0BF,CACP,CAAC,EACF,gCAAK,SAAS,EAAC,0DAA0D,GAAG,KACxE,IACF,CACP,CAAA;CAAA,CAAC;AA9CW,QAAA,MAAM,UA8CjB;AAQK,MAAM,MAAM,GAAG,CAAC,EAKT,EAAE,EAAE;QALK,EACrB,IAAI,GAAG,YAAY,EACnB,UAAU,GAAG,CAAC,EACd,KAAK,GAAG,EAAE,OAEE,EADT,KAAK,cAJa,+BAKtB,CADS;IAER,MAAM,QAAQ,mBACZ,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,IACT,KAAK,CACT,CAAC;IAEF,QAAQ,IAAI,EAAE;QACZ,KAAK,UAAU;YACb,OAAO,uBAAC,gBAAQ,oBAAK,QAAQ,EAAI,CAAC;QACpC,KAAK,QAAQ;YACX,OAAO,uBAAC,cAAM,oBAAK,QAAQ,EAAI,CAAC;QAClC;YACE,OAAO,uBAAC,kBAAU,oBAAK,QAAQ,EAAI,CAAC;KACvC;AACH,CAAC,CAAC;AApBW,QAAA,MAAM,UAoBjB"}

package/lib/esm/_common/input/RadioAndCheckboxWrapper.js

@@ -41,21 +41,28 @@ import { needleWarningMessage } from '../utils';
  *
  *
  */
+export const customLabelAndNoAriaLabelWarningMessage = 'aria label not detected when using a custom label, be sure to include an aria label for screen readers link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI';
 const RadioAndCheckboxWrapper = (props, ref) => {
     const { label, fluid, labelBefore, type = 'text', 'aria-label': ariaLabel } = props, otherInputProps = __rest(props, ["label", "fluid", "labelBefore", "type", 'aria-label']);
+    const isLabel = label !== undefined && typeof label === 'string';
+    const isCustomLabel = label && typeof label !== 'string';
+    const hasCustomLabelAndNoAriaLabel = isCustomLabel && !ariaLabel;
     useMemo(() => {
         if (!label && !ariaLabel) {
             needleWarningMessage(`${type} without a label does not have an aria label, be sure to include an aria label for screen readers link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI`);
         }
-    }, [ariaLabel, label, type]);
+        if (hasCustomLabelAndNoAriaLabel) {
+            needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);
+        }
+    }, [ariaLabel, label, type, hasCustomLabelAndNoAriaLabel]);
     const containerWrappingClass = classnames(`ndl-form-item ndl-type-${type}`, {
-        disabled: otherInputProps.disabled,
+        'ndl-disabled': otherInputProps.disabled,
     });
-    const labelWrappingClass = classnames(`form-item-label`, {
-        fluid,
-        'label-before': labelBefore,
+    const labelWrappingClass = classnames(`ndl-form-item-label`, {
+        'ndl-fluid': fluid,
+        'ndl-label-before': labelBefore,
     });
-    return (_jsx("div", Object.assign({ className: containerWrappingClass }, { children: _jsxs("label", Object.assign({ className: labelWrappingClass }, { children: [_jsx("input", Object.assign({ "aria-label": ariaLabel }, otherInputProps, { ref: ref, type: type })), label && (_jsx("span", Object.assign({ title: label, className: "form-label-text" }, { children: label })))] })) })));
+    return (_jsx("div", Object.assign({ className: containerWrappingClass }, { children: _jsxs("label", Object.assign({ className: labelWrappingClass }, { children: [_jsx("input", Object.assign({ "aria-label": ariaLabel }, otherInputProps, { ref: ref, type: type })), isLabel ? (_jsx("span", Object.assign({ title: label, className: "ndl-form-label-text" }, { children: label }))) : (label)] })) })));
 };
 export default forwardRef(RadioAndCheckboxWrapper);
 //# sourceMappingURL=RadioAndCheckboxWrapper.js.map

package/lib/esm/_common/input/RadioAndCheckboxWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioAndCheckboxWrapper.js","sourceRoot":"","sources":["../../../../src/_common/input/RadioAndCheckboxWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAgB,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAkBhD,qCAAqC;AAErC;;;;;;GAMG;AAEH,MAAM,uBAAuB,GAAG,CAC9B,KAA4B,EAC5B,GAAmC,EACnC,EAAE;IACF,MAAM,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,GAAG,MAAM,EACb,YAAY,EAAE,SAAS,KAErB,KAAK,EADJ,eAAe,UAChB,KAAK,EAPH,uDAOL,CAAQ,CAAC;IAEV,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,EAAE;YACxB,oBAAoB,CAClB,GAAG,IAAI,4KAA4K,CACpL,CAAC;SACH;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC;IAE7B,MAAM,sBAAsB,GAAG,UAAU,CAAC,0BAA0B,IAAI,EAAE,EAAE;QAC1E,QAAQ,EAAE,eAAe,CAAC,QAAQ;KACnC,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,UAAU,CAAC,iBAAiB,EAAE;QACvD,KAAK;QACL,cAAc,EAAE,WAAW;KAC5B,CAAC,CAAC;IAEH,OAAO,CACL,4BAAK,SAAS,EAAE,sBAAsB,gBAGpC,+BAAO,SAAS,EAAE,kBAAkB,iBAClC,4CACc,SAAS,IACjB,eAAe,IACnB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,IACV,EAED,KAAK,IAAI,CACR,6BAAM,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,iBAAiB,gBAC5C,KAAK,IACD,CACR,KACK,IACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC,uBAAuB,CAAC,CAAC"}
+{"version":3,"file":"RadioAndCheckboxWrapper.js","sourceRoot":"","sources":["../../../../src/_common/input/RadioAndCheckboxWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAgB,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC1D,OAAO,UAAU,MAAM,YAAY,CAAC;AAEpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAoBhD,qCAAqC;AAErC;;;;;;GAMG;AAEH,MAAM,CAAC,MAAM,uCAAuC,GAClD,iLAAiL,CAAC;AAEpL,MAAM,uBAAuB,GAAG,CAC9B,KAA4B,EAC5B,GAAmC,EACnC,EAAE;IACF,MAAM,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,GAAG,MAAM,EACb,YAAY,EAAE,SAAS,KAErB,KAAK,EADJ,eAAe,UAChB,KAAK,EAPH,uDAOL,CAAQ,CAAC;IAEV,MAAM,OAAO,GAAG,KAAK,KAAK,SAAS,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC;IACjE,MAAM,aAAa,GAAG,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC;IACzD,MAAM,4BAA4B,GAAG,aAAa,IAAI,CAAC,SAAS,CAAC;IAEjE,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,EAAE;YACxB,oBAAoB,CAClB,GAAG,IAAI,4KAA4K,CACpL,CAAC;SACH;QAED,IAAI,4BAA4B,EAAE;YAChC,oBAAoB,CAAC,uCAAuC,CAAC,CAAC;SAC/D;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,4BAA4B,CAAC,CAAC,CAAC;IAE3D,MAAM,sBAAsB,GAAG,UAAU,CAAC,0BAA0B,IAAI,EAAE,EAAE;QAC1E,cAAc,EAAE,eAAe,CAAC,QAAQ;KACzC,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAG,UAAU,CAAC,qBAAqB,EAAE;QAC3D,WAAW,EAAE,KAAK;QAClB,kBAAkB,EAAE,WAAW;KAChC,CAAC,CAAC;IAEH,OAAO,CACL,4BAAK,SAAS,EAAE,sBAAsB,gBAGpC,+BAAO,SAAS,EAAE,kBAAkB,iBAClC,4CACc,SAAS,IACjB,eAAe,IACnB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,IACV,EAED,OAAO,CAAC,CAAC,CAAC,CACT,6BAAM,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,qBAAqB,gBAChD,KAAK,IACD,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,KACK,IACJ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC,uBAAuB,CAAC,CAAC"}

package/lib/esm/alert/Alert.js

@@ -32,7 +32,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import classnames from 'classnames';
 import React, { useEffect } from 'react';
-import { HeroIcon } from '../icons';
+import { CheckCircleIconSolid, ExclamationCircleIconSolid, ExclamationTriangleIconSolid, InformationCircleIconSolid, XMarkIconOutline, } from '../icons';
 import { needleWarningMessage } from '../_common/utils';
 /**
  *
@@ -45,24 +45,24 @@ const getStatusIcon = (iconType) => {
     let iconComponent;
     switch (iconType) {
         case 'success':
-            iconComponent = _jsx(HeroIcon, { iconName: "CheckCircleIcon", type: "solid" });
+            iconComponent = _jsx(CheckCircleIconSolid, {});
             break;
         case 'warning':
-            iconComponent = _jsx(HeroIcon, { iconName: "ExclamationIcon", type: "solid" });
+            iconComponent = _jsx(ExclamationTriangleIconSolid, {});
             break;
         case 'danger':
-            iconComponent = (_jsx(HeroIcon, { iconName: "ExclamationCircleIcon", type: "solid" }));
+            iconComponent = _jsx(ExclamationCircleIconSolid, {});
             break;
         default:
-            iconComponent = (_jsx(HeroIcon, { iconName: "InformationCircleIcon", type: "solid" }));
+            iconComponent = _jsx(InformationCircleIconSolid, {});
     }
-    return _jsx("div", Object.assign({ className: "alert-icon alert-status-icon" }, { children: iconComponent }));
+    return (_jsx("div", Object.assign({ className: "ndl-alert-icon ndl-alert-status-icon" }, { children: iconComponent })));
 };
 export const AlertAction = (_a) => {
     var { label } = _a, props = __rest(_a, ["label"]);
     return _jsx("a", Object.assign({}, props, { children: label }));
 };
-const Alert = React.forwardRef(function Alert(_a, ref) {
+export const Alert = React.forwardRef(function Alert(_a, ref) {
     var { type = 'info', icon = false, title, name, actions = [], floating = false, description = null, onClose, className = '', children = null, closeable = false } = _a, rest = __rest(_a, ["type", "icon", "title", "name", "actions", "floating", "description", "onClose", "className", "children", "closeable"]);
     useEffect(() => {
         if (typeof title !== 'string' && !name && closeable) {
@@ -72,13 +72,13 @@ const Alert = React.forwardRef(function Alert(_a, ref) {
     if (typeof title === 'string' && !name) {
         name = title;
     }
-    const classes = classnames(`ndl-alert`, {
-        ['with-description']: description,
-        ['info']: type === 'info',
-        ['success']: type === 'success',
-        ['warning']: type === 'warning',
-        ['danger']: type === 'danger',
-        ['floating']: floating,
+    const classes = classnames('ndl-alert', {
+        'ndl-with-description': description,
+        'ndl-info': type === 'info',
+        'ndl-success': type === 'success',
+        'ndl-warning': type === 'warning',
+        'ndl-danger': type === 'danger',
+        'ndl-floating': floating,
         [className]: className && className !== '',
     });
     const handleClose = (e) => {
@@ -86,7 +86,7 @@ const Alert = React.forwardRef(function Alert(_a, ref) {
             onClose(e);
         }
     };
-    return (_jsxs("div", Object.assign({ className: classes, role: closeable ? 'alertdialog' : 'alert' }, rest, { title: name, ref: ref }, { children: [icon && getStatusIcon(type), _jsxs("div", Object.assign({ className: "alert-content" }, { children: [title && _jsx("h6", Object.assign({ className: "alert-title" }, { children: title })), (description || children) && (_jsx("div", Object.assign({ className: "alert-description" }, { children: children || description }))), actions && actions.length > 0 && (_jsx("div", Object.assign({ className: "alert-actions" }, { children: actions.map((action, index) => (_jsx(AlertAction, Object.assign({}, action), index))) })))] })), closeable && (_jsx("div", Object.assign({ tabIndex: 0, role: "button", className: "alert-icon close-icon", onKeyDown: handleClose, onClick: handleClose, "aria-label": "close-alert" }, { children: _jsx(HeroIcon, { iconName: "XIcon" }) })))] })));
+    return (_jsxs("div", Object.assign({ className: classes, role: closeable ? 'alertdialog' : 'alert' }, rest, { title: name, ref: ref }, { children: [icon && getStatusIcon(type), _jsxs("div", Object.assign({ className: "ndl-alert-content" }, { children: [title && _jsx("h6", Object.assign({ className: "ndl-alert-title" }, { children: title })), (description || children) && (_jsx("div", Object.assign({ className: "ndl-alert-description" }, { children: children || description }))), actions && actions.length > 0 && (_jsx("div", Object.assign({ className: "ndl-alert-actions" }, { children: actions.map((action, index) => (_jsx(AlertAction, Object.assign({}, action), index))) })))] })), closeable && (_jsx("div", Object.assign({ tabIndex: 0, role: "button", className: "ndl-alert-icon ndl-close-icon", onKeyDown: handleClose, onClick: handleClose, "aria-label": "close-alert" }, { children: _jsx(XMarkIconOutline, {}) })))] })));
 });
 export default Alert;
 //# sourceMappingURL=Alert.js.map