@sitecore/sc-contenthub-blok 0.0.10 → 0.0.12

package/dist/Components/BlokBadge/BlokBadge.d.ts

@@ -1,6 +1,12 @@
-import { type FC, type PropsWithChildren } from "react";
+import { type FC, type PropsWithChildren, type ReactNode } from "react";
 import { type ColorName } from "../../Foundations";
+import { type IconName } from "../BlokIcon/BlokIcon";
 export interface BlokBadgeProps {
     colorScheme?: ColorName;
+    className?: string;
+    expandedContent?: ReactNode;
+    expandLabel?: string;
+    collapseLabel?: string;
+    iconName?: IconName;
 }
 export declare const BlokBadge: FC<PropsWithChildren<BlokBadgeProps>>;

package/dist/Components/BlokBadge/BlokBadge.js

@@ -5,25 +5,63 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const css_1 = require("@emotion/css");
 const react_1 = require("react");
 const Foundations_1 = require("../../Foundations");
+const BlokIcon_1 = require("../BlokIcon/BlokIcon");
 const classes = {
     badge: (0, css_1.css)({
         paddingInlineStart: "0.25rem",
         paddingInlineEnd: "0.25rem",
         fontWeight: Foundations_1.fontWeightBold,
-        borderRadius: Foundations_1.borderRadiusMd,
-        display: "inline-block",
+        borderRadius: Foundations_1.borderRadiusBase,
+        display: "inline-flex",
         whiteSpace: "nowrap",
         textTransform: "uppercase",
         fontSize: "0.75rem",
         verticalAlign: "middle",
+        gap: "0.5rem",
+        alignItems: "center",
+        ".m-icon": {
+            fontSize: "1.2em",
+        },
+    }),
+    badgeButton: (0, css_1.css)({
+        background: "transparent",
+        border: "none",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "1em",
+        width: "auto",
+        height: "auto",
+        margin: 0,
+        padding: 0,
+        cursor: "pointer",
+        opacity: "0.5",
+        "&:hover": {
+            opacity: 0.8,
+        },
+    }),
+    badgeIconOnly: (0, css_1.css)({
+        borderRadius: Foundations_1.borderRadiusFull,
+        padding: "0.25rem",
     }),
 };
-const BlokBadge = ({ colorScheme = "neutral", children, }) => {
-    const styles = (0, react_1.useMemo)(() => ({
-        backgroundColor: Foundations_1.colorMap[colorScheme][100],
-        color: Foundations_1.colorMap[colorScheme][800],
-    }), [colorScheme]);
-    return ((0, jsx_runtime_1.jsx)("span", { className: classes.badge, style: styles, children: children }));
+const BlokBadge = ({ colorScheme = "neutral", children, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", iconName, ...extraProps }) => {
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const toggleExpanded = (0, react_1.useCallback)(() => {
+        setIsExpanded((prev) => !prev);
+    }, []);
+    const styles = (0, react_1.useMemo)(() => {
+        if (colorScheme === "gen-ai") {
+            return {
+                backgroundImage: Foundations_1.colorMap[colorScheme]?.[100],
+            };
+        }
+        return {
+            backgroundColor: Foundations_1.colorMap[colorScheme][100],
+            color: Foundations_1.colorMap[colorScheme][800],
+        };
+    }, [colorScheme]);
+    return ((0, jsx_runtime_1.jsxs)("span", { className: (0, css_1.cx)(classes.badge, !children && iconName ? classes.badgeIconOnly : undefined), style: styles, ...extraProps, children: [iconName && (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: iconName }), expandedContent && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.badgeButton, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), children && (0, jsx_runtime_1.jsx)("span", { children: isExpanded ? expandedContent : children })] }));
 };
 exports.BlokBadge = BlokBadge;
 //# sourceMappingURL=BlokBadge.js.map

package/dist/Components/BlokBadge/BlokBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlokBadge.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AACnC,iCAAiE;AAEjE,mDAK2B;AAE3B,MAAM,OAAO,GAAG;IACd,KAAK,EAAE,IAAA,SAAG,EAAC;QACT,kBAAkB,EAAE,SAAS;QAC7B,gBAAgB,EAAE,SAAS;QAC3B,UAAU,EAAE,4BAAc;QAC1B,YAAY,EAAE,4BAAc;QAC5B,OAAO,EAAE,cAAc;QACvB,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,WAAW;QAC1B,QAAQ,EAAE,SAAS;QACnB,aAAa,EAAE,QAAQ;KACxB,CAAC;CACH,CAAC;AAMK,MAAM,SAAS,GAA0C,CAAC,EAC/D,WAAW,GAAG,SAAS,EACvB,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,IAAA,eAAO,EACpB,GAAG,EAAE,CAAC,CAAC;QACL,eAAe,EAAE,sBAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC;QAC3C,KAAK,EAAE,sBAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC;KAClC,CAAC,EACF,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,OAAO,CACL,iCAAM,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,YAC1C,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,SAAS,aAiBpB"}
+{"version":3,"file":"BlokBadge.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.tsx"],"names":[],"mappings":"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"}

package/dist/Components/BlokBadge/BlokBadge.spec.js

@@ -1,7 +1,11 @@
 "use strict";
+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");
 const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event/"));
 const Foundations_1 = require("../../Foundations");
 const BlokBadge_1 = require("./BlokBadge");
 describe("BlokBadge", () => {
@@ -11,20 +15,28 @@ describe("BlokBadge", () => {
     });
     test("applies correct styles based on colorScheme", () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "blue", children: "Styled Badge" }));
-        const badge = react_1.screen.getByText("Styled Badge");
+        const badge = react_1.screen.getByText("Styled Badge").parentElement;
         expect(badge).toHaveStyle(`background-color: ${Foundations_1.colorMap["blue"][100]}`);
         expect(badge).toHaveStyle(`color: ${Foundations_1.colorMap["blue"][800]}`);
     });
     test("defaults to neutral colorScheme if none is provided", () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { children: "Default Badge" }));
-        const badge = react_1.screen.getByText("Default Badge");
+        const badge = react_1.screen.getByText("Default Badge").parentElement;
         expect(badge).toHaveStyle(`background-color: ${Foundations_1.colorMap["neutral"][100]}`);
         expect(badge).toHaveStyle(`color: ${Foundations_1.colorMap["neutral"][800]}`);
     });
     test("renders with uppercase text", () => {
         (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "green", children: "Uppercase Badge" }));
-        const badge = react_1.screen.getByText("Uppercase Badge");
+        const badge = react_1.screen.getByText("Uppercase Badge").parentElement;
         expect(badge).toHaveStyle("text-transform: uppercase");
     });
+    test("toggles expanded content when expand button is clicked", async () => {
+        const user = user_event_1.default.setup();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { expandedContent: (0, jsx_runtime_1.jsx)("span", { children: "Expanded Content" }), children: "Collapsed Content" }));
+        await user.click(react_1.screen.getByLabelText("Expand"));
+        expect(react_1.screen.getByText("Expanded Content")).toBeInTheDocument();
+        await user.click(react_1.screen.getByLabelText("Collapse"));
+        expect(react_1.screen.getByText("Collapsed Content")).toBeInTheDocument();
+    });
 });
 //# sourceMappingURL=BlokBadge.spec.js.map

package/dist/Components/BlokBadge/BlokBadge.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlokBadge.spec.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.spec.tsx"],"names":[],"mappings":";;;AAAA,kDAAwD;AAExD,mDAA6C;AAC7C,2CAAwC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,IAAI,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACtC,IAAA,cAAM,EAAC,uBAAC,qBAAS,IAAC,WAAW,EAAC,KAAK,2BAAuB,CAAC,CAAC;QAC5D,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACvD,IAAA,cAAM,EAAC,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,6BAAyB,CAAC,CAAC;QAC/D,MAAM,KAAK,GAAG,cAAM,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;QAC/C,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,qBAAqB,sBAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACxE,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,sBAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,qDAAqD,EAAE,GAAG,EAAE;QAC/D,IAAA,cAAM,EAAC,uBAAC,qBAAS,gCAA0B,CAAC,CAAC;QAC7C,MAAM,KAAK,GAAG,cAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;QAChD,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,qBAAqB,sBAAQ,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC3E,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,sBAAQ,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACvC,IAAA,cAAM,EAAC,uBAAC,qBAAS,IAAC,WAAW,EAAC,OAAO,gCAA4B,CAAC,CAAC;QACnE,MAAM,KAAK,GAAG,cAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;QAClD,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,2BAA2B,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"BlokBadge.spec.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.spec.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAwD;AACxD,8EAAqD;AAErD,mDAA6C;AAC7C,2CAAwC;AAExC,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,IAAI,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACtC,IAAA,cAAM,EAAC,uBAAC,qBAAS,IAAC,WAAW,EAAC,KAAK,2BAAuB,CAAC,CAAC;QAC5D,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACvD,IAAA,cAAM,EAAC,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,6BAAyB,CAAC,CAAC;QAC/D,MAAM,KAAK,GAAG,cAAM,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,aAAa,CAAC;QAC7D,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,qBAAqB,sBAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACxE,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,sBAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,qDAAqD,EAAE,GAAG,EAAE;QAC/D,IAAA,cAAM,EAAC,uBAAC,qBAAS,gCAA0B,CAAC,CAAC;QAC7C,MAAM,KAAK,GAAG,cAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,aAAa,CAAC;QAC9D,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,qBAAqB,sBAAQ,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QAC3E,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,sBAAQ,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACvC,IAAA,cAAM,EAAC,uBAAC,qBAAS,IAAC,WAAW,EAAC,OAAO,gCAA4B,CAAC,CAAC;QACnE,MAAM,KAAK,GAAG,cAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,aAAa,CAAC;QAChE,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,2BAA2B,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACxE,MAAM,IAAI,GAAG,oBAAS,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAA,cAAM,EACJ,uBAAC,qBAAS,IAAC,eAAe,EAAE,gEAA6B,kCAE7C,CACb,CAAC;QACF,MAAM,IAAI,CAAC,KAAK,CAAC,cAAM,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;QAClD,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,IAAI,CAAC,KAAK,CAAC,cAAM,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;QACpD,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACpE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/Components/BlokBadge/BlokBadge.stories.js

@@ -23,7 +23,7 @@ const meta = {
 };
 exports.default = meta;
 exports.Badges = {
-    render: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "neutral", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "danger", children: "danger" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "warning", children: "warning" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "success", children: "success" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "info", children: "info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "neutral", children: "Neutral" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "orange", children: "Orange" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "yellow", children: "Yellow" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "green", children: "Green" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "teal", children: "Teal" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "blue", children: "Blue" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "cyan", children: "Cyan" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "purple", children: "Purple" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "pink", children: "Pink" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "primary", children: "Primary" })] })] })),
+    render: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "neutral", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "danger", children: "danger" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "warning", children: "warning" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "success", children: "success" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "info", children: "info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "neutral", children: "Neutral" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "red", children: "Red" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "orange", children: "Orange" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "yellow", children: "Yellow" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "green", children: "Green" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "teal", children: "Teal" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "blue", children: "Blue" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "cyan", children: "Cyan" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "purple", children: "Purple" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "pink", children: "Pink" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { colorScheme: "primary", "data-testid": "primary", children: "Primary" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { expandedContent: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "some / large / path" }), children: "Collapsed content" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { iconName: "ghost", children: "Collapsed content" }), (0, jsx_runtime_1.jsx)(BlokBadge_1.BlokBadge, { iconName: "ghost", colorScheme: "pink" })] })] })),
 };
 exports.PlayGround = {
     args: {

package/dist/Components/BlokBadge/BlokBadge.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlokBadge.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.stories.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AAInC,2CAA6D;AAE7D,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,IAAA,SAAG,EAAC;QACf,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,CAAC;QACN,YAAY,EAAE,EAAE;KACjB,CAAC;CACH,CAAC;AAEF,MAAM,IAAI,GAA4C;IACpD,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,qBAAS;IACpB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,kBAAe,IAAI,CAAC;AAGP,QAAA,MAAM,GAAU;IAC3B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,6DACE,iCAAK,SAAS,EAAE,OAAO,CAAC,WAAW,aACjC,uBAAC,qBAAS,IAAC,WAAW,EAAC,SAAS,wBAAoB,EACpD,uBAAC,qBAAS,IAAC,WAAW,EAAC,QAAQ,uBAAmB,EAClD,uBAAC,qBAAS,IAAC,WAAW,EAAC,SAAS,wBAAoB,EACpD,uBAAC,qBAAS,IAAC,WAAW,EAAE,SAAS,wBAAqB,EACtD,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,IAC1C,EACN,iCAAK,SAAS,EAAE,OAAO,CAAC,WAAW,aACjC,uBAAC,qBAAS,IAAC,WAAW,EAAC,SAAS,wBAAoB,EACpD,uBAAC,qBAAS,IAAC,WAAW,EAAC,KAAK,oBAAgB,EAC5C,uBAAC,qBAAS,IAAC,WAAW,EAAC,QAAQ,uBAAmB,EAClD,uBAAC,qBAAS,IAAC,WAAW,EAAC,QAAQ,uBAAmB,EAClD,uBAAC,qBAAS,IAAC,WAAW,EAAC,OAAO,sBAAkB,EAChD,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,EAC9C,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,EAC9C,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,EAC9C,uBAAC,qBAAS,IAAC,WAAW,EAAC,QAAQ,uBAAmB,EAClD,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,EAC9C,uBAAC,qBAAS,IAAC,WAAW,EAAC,SAAS,wBAAoB,IAChD,IACL,CACJ;CACF,CAAC;AAEW,QAAA,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC"}
+{"version":3,"file":"BlokBadge.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.stories.tsx"],"names":[],"mappings":";;;;AAAA,sCAAmC;AAInC,2CAA6D;AAE7D,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,IAAA,SAAG,EAAC;QACf,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,CAAC;QACN,YAAY,EAAE,EAAE;KACjB,CAAC;CACH,CAAC;AAEF,MAAM,IAAI,GAA4C;IACpD,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,qBAAS;IACpB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,kBAAe,IAAI,CAAC;AAGP,QAAA,MAAM,GAAU;IAC3B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,6DACE,iCAAK,SAAS,EAAE,OAAO,CAAC,WAAW,aACjC,uBAAC,qBAAS,IAAC,WAAW,EAAC,SAAS,wBAAoB,EACpD,uBAAC,qBAAS,IAAC,WAAW,EAAC,QAAQ,uBAAmB,EAClD,uBAAC,qBAAS,IAAC,WAAW,EAAC,SAAS,wBAAoB,EACpD,uBAAC,qBAAS,IAAC,WAAW,EAAE,SAAS,wBAAqB,EACtD,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,IAC1C,EACN,iCAAK,SAAS,EAAE,OAAO,CAAC,WAAW,aACjC,uBAAC,qBAAS,IAAC,WAAW,EAAC,SAAS,wBAAoB,EACpD,uBAAC,qBAAS,IAAC,WAAW,EAAC,KAAK,oBAAgB,EAC5C,uBAAC,qBAAS,IAAC,WAAW,EAAC,QAAQ,uBAAmB,EAClD,uBAAC,qBAAS,IAAC,WAAW,EAAC,QAAQ,uBAAmB,EAClD,uBAAC,qBAAS,IAAC,WAAW,EAAC,OAAO,sBAAkB,EAChD,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,EAC9C,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,EAC9C,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,EAC9C,uBAAC,qBAAS,IAAC,WAAW,EAAC,QAAQ,uBAAmB,EAClD,uBAAC,qBAAS,IAAC,WAAW,EAAC,MAAM,qBAAiB,EAC9C,uBAAC,qBAAS,IAAC,WAAW,EAAC,SAAS,iBAAa,SAAS,wBAE1C,IACR,EACN,iCAAK,SAAS,EAAE,OAAO,CAAC,WAAW,aACjC,uBAAC,qBAAS,IAAC,eAAe,EAAE,mFAAwB,kCAExC,EACZ,uBAAC,qBAAS,IAAC,QAAQ,EAAC,OAAO,kCAA8B,EACzD,uBAAC,qBAAS,IAAC,QAAQ,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,GAAa,IACvD,IACL,CACJ;CACF,CAAC;AAEW,QAAA,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC"}

package/dist/Components/BlokIcon/BlokIcon.d.ts

@@ -1,7 +1,7 @@
 import { FC, HTMLProps } from "react";
 import { ColorName, ColorShade } from "../../Foundations";
 import { iconNames } from "./iconNames";
-type IconName = (typeof iconNames)[number];
+export type IconName = (typeof iconNames)[number];
 export interface BlokIconProps extends HTMLProps<HTMLElement> {
     icon: IconName | string;
     classes?: Array<string | null>;
@@ -15,4 +15,3 @@ export interface BlokIconProps extends HTMLProps<HTMLElement> {
     ignoreIconOverride?: boolean;
 }
 export declare const BlokIcon: FC<BlokIconProps>;
-export {};

package/dist/Components/BlokIcon/BlokIcon.js

@@ -19,7 +19,7 @@ const svgStyles = (0, css_1.css)({
         height: "1em",
         position: "sticky",
         zIndex: 1,
-        verticalAlign: "inherit",
+        verticalAlign: "baseline",
         userSelect: "none",
         fill: "currentColor",
         color: "currentColor",

package/dist/Components/BlokIcon/BlokIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlokIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.tsx"],"names":[],"mappings":";;;;AAAA,sCAAuC;AACvC,iCAAkD;AAClD,6EAAwD;AAExD,mDAK2B;AAE3B,6CAAoD;AAIpD,MAAM,SAAS,GAAG,IAAA,SAAG,EAAC;IACpB,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,IAAA,SAAG,EAAC;IACpB,UAAU,EAAE,CAAC;IACb,MAAM,EAAE,KAAK;IACb,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE;QACP,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,CAAC;QACT,aAAa,EAAE,SAAS;QACxB,UAAU,EAAE,MAAM;QAClB,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,cAAc;QACrB,UAAU,EAAE,CAAC;QACb,UAAU,EAAE,CAAC;KACd;IACD,gBAAgB,EAAE;QAChB,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,aAAa;KACpB;IACD,UAAU,EAAE;QACV,OAAO,EAAE,MAAM,EAAE,2EAA2E;KAC7F;CACF,CAAC,CAAC;AAeU,QAAA,QAAQ,GAAsB,IAAA,kBAAU,EAGnD,SAAS,cAAc,CACvB,EACE,IAAI,EACJ,OAAO,EACP,KAAK,EACL,SAAS,EACT,cAAc,GAAG,GAAG,EACpB,mBAAmB,EACnB,wBAAwB,GAAG,GAAG,EAC9B,QAAQ,GAAG,SAAS,EACpB,kBAAkB,GAAG,KAAK,EAC1B,GAAG,KAAK,EACT,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,UAAU,QAAQ,EAAE,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAA,uCAAS,GAAE,CAAC;IAC/C,MAAM,OAAO,GAAG,IAAA,iCAAoB,EAAC,QAAQ,EAAE,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAE3E,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,8BACE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACZ,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,IAAI,CAAC,CAAC;YACZ,CAAC;YAED,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,EACD,SAAS,EAAE,IAAA,QAAE,EACX,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,CAAC,CAAC,CAAC,IAAA,yBAAW,EAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,EACzD,mBAAmB;YACjB,CAAC,CAAC,IAAA,mCAAqB,EAAC,mBAAmB,EAAE,wBAAwB,CAAC;YACtE,CAAC,CAAC,IAAI,EACR,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,CACV,KACG,KAAK,gBACG,KAAK,IAAI,YAAY,iBACpB,YAAY,EACzB,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAiB,EAAE,GACtD,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"BlokIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.tsx"],"names":[],"mappings":";;;;AAAA,sCAAuC;AACvC,iCAAkD;AAClD,6EAAwD;AAExD,mDAK2B;AAE3B,6CAAoD;AAIpD,MAAM,SAAS,GAAG,IAAA,SAAG,EAAC;IACpB,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,IAAA,SAAG,EAAC;IACpB,UAAU,EAAE,CAAC;IACb,MAAM,EAAE,KAAK;IACb,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE;QACP,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,CAAC;QACT,aAAa,EAAE,UAAU;QACzB,UAAU,EAAE,MAAM;QAClB,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,cAAc;QACrB,UAAU,EAAE,CAAC;QACb,UAAU,EAAE,CAAC;KACd;IACD,gBAAgB,EAAE;QAChB,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,aAAa;KACpB;IACD,UAAU,EAAE;QACV,OAAO,EAAE,MAAM,EAAE,2EAA2E;KAC7F;CACF,CAAC,CAAC;AAeU,QAAA,QAAQ,GAAsB,IAAA,kBAAU,EAGnD,SAAS,cAAc,CACvB,EACE,IAAI,EACJ,OAAO,EACP,KAAK,EACL,SAAS,EACT,cAAc,GAAG,GAAG,EACpB,mBAAmB,EACnB,wBAAwB,GAAG,GAAG,EAC9B,QAAQ,GAAG,SAAS,EACpB,kBAAkB,GAAG,KAAK,EAC1B,GAAG,KAAK,EACT,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,UAAU,QAAQ,EAAE,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAA,uCAAS,GAAE,CAAC;IAC/C,MAAM,OAAO,GAAG,IAAA,iCAAoB,EAAC,QAAQ,EAAE,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAE3E,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,8BACE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACZ,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,IAAI,CAAC,CAAC;YACZ,CAAC;YAED,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,EACD,SAAS,EAAE,IAAA,QAAE,EACX,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,CAAC,CAAC,CAAC,IAAA,yBAAW,EAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,EACzD,mBAAmB;YACjB,CAAC,CAAC,IAAA,mCAAqB,EAAC,mBAAmB,EAAE,wBAAwB,CAAC;YACtE,CAAC,CAAC,IAAI,EACR,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,CACV,KACG,KAAK,gBACG,KAAK,IAAI,YAAY,iBACpB,YAAY,EACzB,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAiB,EAAE,GACtD,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/dist/Components/BlokIcon/BlokIcon.stories.d.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { PropsWithChildren } from "react";
-import { BlokIconProps } from "../BlokIcon/BlokIcon";
+import { BlokIconProps } from "./BlokIcon";
 declare const meta: Meta<PropsWithChildren<BlokIconProps>>;
 export default meta;
 type Story = StoryObj<BlokIconProps>;

package/dist/Components/BlokIcon/BlokIcon.stories.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlayGround = exports.Icons = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const BlokIcon_1 = require("../BlokIcon/BlokIcon");
+const BlokIcon_1 = require("./BlokIcon");
 const meta = {
     title: "Components/MediaAndIcon/BlokIcon",
     component: BlokIcon_1.BlokIcon,

package/dist/Components/BlokIcon/BlokIcon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlokIcon.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.stories.tsx"],"names":[],"mappings":";;;;AAGA,mDAA+D;AAE/D,MAAM,IAAI,GAA2C;IACnD,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,mBAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,kBAAe,IAAI,CAAC;AAGP,QAAA,KAAK,GAAU;IAC1B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,iCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,aACvD,uBAAC,mBAAQ,IAAC,IAAI,EAAC,EAAE,GAAG,EACpB,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,KAAK,GAAG,EAChD,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,KAAK,EAAC,mBAAmB,EAAC,KAAK,GAAG,EAC1E,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,QAAQ,EAAC,OAAO,GAAG,IAC7C,CACP;CACF,CAAC;AAEW,QAAA,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;KACd;CACF,CAAC"}
+{"version":3,"file":"BlokIcon.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.stories.tsx"],"names":[],"mappings":";;;;AAGA,yCAAqD;AAErD,MAAM,IAAI,GAA2C;IACnD,KAAK,EAAE,kCAAkC;IACzC,SAAS,EAAE,mBAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,kBAAe,IAAI,CAAC;AAGP,QAAA,KAAK,GAAU;IAC1B,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,iCAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,aACvD,uBAAC,mBAAQ,IAAC,IAAI,EAAC,EAAE,GAAG,EACpB,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,KAAK,GAAG,EAChD,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,KAAK,EAAC,mBAAmB,EAAC,KAAK,GAAG,EAC1E,uBAAC,mBAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,QAAQ,EAAC,OAAO,GAAG,IAC7C,CACP;CACF,CAAC;AAEW,QAAA,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;KACd;CACF,CAAC"}

package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.d.ts

@@ -0,0 +1,11 @@
+import { FC, PropsWithChildren } from "react";
+import { type ColorName } from "../../Foundations";
+import { IconName } from "../BlokIcon/BlokIcon";
+export interface BlokLabeledIconProps {
+    iconName?: IconName;
+    colorTarget?: "background" | "foreground";
+    fontSize?: string;
+    colorScheme?: ColorName;
+    className?: string;
+}
+export declare const BlokLabeledIcon: FC<PropsWithChildren<BlokLabeledIconProps>>;

package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlokLabeledIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("@emotion/css");
+const react_1 = require("react");
+const Foundations_1 = require("../../Foundations");
+const BlokIcon_1 = require("../BlokIcon/BlokIcon");
+const classes = {
+    labeledIcon: (0, css_1.css)({
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        maxWidth: "100%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        fontSize: Foundations_1.fontSizeSmall,
+        fontWeight: Foundations_1.fontWeightBold,
+        borderRadius: Foundations_1.borderRadiusBase,
+        ".m-icon": {
+            fontSize: "1.5em",
+        },
+    }),
+    labeledIconBackground: (0, css_1.css)({
+        padding: "0.25rem",
+    }),
+};
+const BlokLabeledIcon = ({ iconName, children, colorTarget = "foreground", colorScheme = "neutral", fontSize = Foundations_1.fontSizeSmall, className, ...extraProps }) => {
+    const styles = (0, react_1.useMemo)(() => {
+        if (colorTarget === "background") {
+            return {
+                backgroundColor: Foundations_1.colorMap[colorScheme]?.[100],
+                color: Foundations_1.colorMap[colorScheme]?.[300],
+                fontSize,
+            };
+        }
+        return {
+            color: children
+                ? Foundations_1.colorMap[colorScheme]?.[500]
+                : Foundations_1.colorMap[colorScheme]?.[400],
+            fontSize,
+        };
+    }, [children, colorScheme, colorTarget, fontSize]);
+    return ((0, jsx_runtime_1.jsxs)("span", { style: styles, className: (0, css_1.cx)(classes.labeledIcon, colorTarget === "background"
+            ? classes.labeledIconBackground
+            : undefined, className), ...extraProps, children: [iconName && (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: iconName }), children] }));
+};
+exports.BlokLabeledIcon = BlokLabeledIcon;
+//# sourceMappingURL=BlokLabeledIcon.js.map

package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlokLabeledIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokLabeledIcon/BlokLabeledIcon.tsx"],"names":[],"mappings":";;;;AAAA,sCAAuC;AACvC,iCAAuD;AAEvD,mDAM2B;AAC3B,mDAA0D;AAE1D,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,IAAA,SAAG,EAAC;QACf,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;QACN,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB,QAAQ,EAAE,2BAAa;QACvB,UAAU,EAAE,4BAAc;QAC1B,YAAY,EAAE,8BAAgB;QAE9B,SAAS,EAAE;YACT,QAAQ,EAAE,OAAO;SAClB;KACF,CAAC;IACF,qBAAqB,EAAE,IAAA,SAAG,EAAC;QACzB,OAAO,EAAE,SAAS;KACnB,CAAC;CACH,CAAC;AAUK,MAAM,eAAe,GAAgD,CAAC,EAC3E,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,WAAW,GAAG,SAAS,EACvB,QAAQ,GAAG,2BAAa,EACxB,SAAS,EACT,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC1B,IAAI,WAAW,KAAK,YAAY,EAAE,CAAC;YACjC,OAAO;gBACL,eAAe,EAAE,sBAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;gBAC7C,KAAK,EAAE,sBAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;gBACnC,QAAQ;aACT,CAAC;QACJ,CAAC;QACD,OAAO;YACL,KAAK,EAAE,QAAQ;gBACb,CAAC,CAAC,sBAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;gBAC9B,CAAC,CAAC,sBAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;YAChC,QAAQ;SACT,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnD,OAAO,CACL,kCACE,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,IAAA,QAAE,EACX,OAAO,CAAC,WAAW,EACnB,WAAW,KAAK,YAAY;YAC1B,CAAC,CAAC,OAAO,CAAC,qBAAqB;YAC/B,CAAC,CAAC,SAAS,EACb,SAAS,CACV,KACG,UAAU,aAEb,QAAQ,IAAI,uBAAC,mBAAQ,IAAC,IAAI,EAAE,QAAQ,GAAI,EACxC,QAAQ,IACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAzCW,QAAA,eAAe,mBAyC1B"}

package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.spec.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@testing-library/react");
+const Foundations_1 = require("../../Foundations");
+const BlokLabeledIcon_1 = require("./BlokLabeledIcon");
+describe("BlokLabeledIcon", () => {
+    test("renders with default props", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { children: "Default Label" }));
+        expect(react_1.screen.getByText("Default Label")).toBeInTheDocument();
+    });
+    test("renders with icon and label", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { iconName: "check", children: "Label with Icon" }));
+        expect(react_1.screen.getByText("Label with Icon")).toBeInTheDocument();
+        expect(react_1.screen.getByTestId("m-icon-check")).toBeInTheDocument();
+    });
+    test("applies correct styles for background color target", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorTarget: "background", colorScheme: "blue", children: "Background Label" }));
+        const label = react_1.screen.getByText("Background Label");
+        expect(label).toHaveStyle(`background-color: ${Foundations_1.colorMap["blue"][100]}`);
+        expect(label).toHaveStyle(`color: ${Foundations_1.colorMap["blue"][300]}`);
+    });
+    test("applies correct styles for foreground color target", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorTarget: "foreground", colorScheme: "red", children: "Foreground Label" }));
+        const label = react_1.screen.getByText("Foreground Label");
+        expect(label).toHaveStyle(`color: ${Foundations_1.colorMap["red"][500]}`);
+    });
+    test("renders without children", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { iconName: "check" }));
+        expect(react_1.screen.queryByText("Label")).not.toBeInTheDocument();
+        expect(react_1.screen.getByTestId("m-icon-check")).toBeInTheDocument();
+    });
+    test("applies custom className", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { className: "custom-class", children: "Custom Class Label" }));
+        const label = react_1.screen.getByText("Custom Class Label");
+        expect(label).toHaveClass("custom-class");
+    });
+});
+//# sourceMappingURL=BlokLabeledIcon.spec.js.map

package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlokLabeledIcon.spec.js","sourceRoot":"","sources":["../../../src/Components/BlokLabeledIcon/BlokLabeledIcon.spec.tsx"],"names":[],"mappings":";;;AAAA,kDAAwD;AAExD,mDAA6C;AAC7C,uDAAoD;AAEpD,QAAQ,CAAC,iBAAiB,EAAE,GAAG,EAAE;IAC/B,IAAI,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACtC,IAAA,cAAM,EAAC,uBAAC,iCAAe,gCAAgC,CAAC,CAAC;QACzD,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACvC,IAAA,cAAM,EAAC,uBAAC,iCAAe,IAAC,QAAQ,EAAC,OAAO,gCAAkC,CAAC,CAAC;QAC5E,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAChE,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,oDAAoD,EAAE,GAAG,EAAE;QAC9D,IAAA,cAAM,EACJ,uBAAC,iCAAe,IAAC,WAAW,EAAC,YAAY,EAAC,WAAW,EAAC,MAAM,iCAE1C,CACnB,CAAC;QACF,MAAM,KAAK,GAAG,cAAM,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;QACnD,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,qBAAqB,sBAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACxE,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,sBAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,oDAAoD,EAAE,GAAG,EAAE;QAC9D,IAAA,cAAM,EACJ,uBAAC,iCAAe,IAAC,WAAW,EAAC,YAAY,EAAC,WAAW,EAAC,KAAK,iCAEzC,CACnB,CAAC;QACF,MAAM,KAAK,GAAG,cAAM,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;QACnD,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,UAAU,sBAAQ,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,0BAA0B,EAAE,GAAG,EAAE;QACpC,IAAA,cAAM,EAAC,uBAAC,iCAAe,IAAC,QAAQ,EAAC,OAAO,GAAG,CAAC,CAAC;QAC7C,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;QAC5D,MAAM,CAAC,cAAM,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,0BAA0B,EAAE,GAAG,EAAE;QACpC,IAAA,cAAM,EACJ,uBAAC,iCAAe,IAAC,SAAS,EAAC,cAAc,mCAEvB,CACnB,CAAC;QACF,MAAM,KAAK,GAAG,cAAM,CAAC,SAAS,CAAC,oBAAoB,CAAC,CAAC;QACrD,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { PropsWithChildren } from "react";
+import { type BlokLabeledIconProps } from "./BlokLabeledIcon";
+declare const meta: Meta<PropsWithChildren<BlokLabeledIconProps>>;
+export default meta;
+type Story = StoryObj<PropsWithChildren<BlokLabeledIconProps>>;
+export declare const LabeledIcons: Story;
+export declare const PlayGround: Story;

package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.stories.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayGround = exports.LabeledIcons = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const css_1 = require("@emotion/css");
+const BlokLabeledIcon_1 = require("./BlokLabeledIcon");
+const classes = {
+    flexWrapper: (0, css_1.css)({
+        display: "flex",
+        gap: 8,
+        marginBottom: 24,
+    }),
+};
+const meta = {
+    title: "Components/DataDisplay/BlokLabeledIcon",
+    component: BlokLabeledIcon_1.BlokLabeledIcon,
+    parameters: {
+        layout: "centered",
+    },
+    tags: ["autodocs"],
+    argTypes: {},
+    args: {},
+};
+exports.default = meta;
+exports.LabeledIcons = {
+    render: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "danger", children: "Danger" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "warning", children: "Warning" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "success", children: "Success" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "info", children: "Info" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", iconName: "feather", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "red", iconName: "feather", children: "Red" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "orange", iconName: "feather", children: "Orange" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "yellow", iconName: "feather", children: "Yellow" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "green", iconName: "feather", children: "Green" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "teal", iconName: "feather", children: "Teal" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "blue", iconName: "feather", children: "Blue" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "cyan", iconName: "feather", children: "Cyan" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "purple", iconName: "feather", children: "Purple" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "pink", iconName: "feather", children: "Pink" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "primary", iconName: "feather", children: "Primary" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "red", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "orange", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "yellow", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "green", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "teal", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "blue", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "cyan", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "purple", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "pink", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "primary", iconName: "feather" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "red", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "orange", iconName: "feather" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "yellow", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "green", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "teal", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "blue", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "cyan", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "purple", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "pink", iconName: "feather", colorTarget: "background" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "primary", iconName: "feather", colorTarget: "background" })] }), (0, jsx_runtime_1.jsxs)("div", { className: classes.flexWrapper, children: [(0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "neutral", iconName: "feather", colorTarget: "background", children: "Default" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "red", iconName: "feather", colorTarget: "background", children: "Red" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "orange", iconName: "feather", colorTarget: "background", children: "Orange" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "yellow", iconName: "feather", colorTarget: "background", children: "Yellow" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "green", iconName: "feather", colorTarget: "background", children: "Green" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "teal", iconName: "feather", colorTarget: "background", children: "Teal" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "blue", iconName: "feather", colorTarget: "background", children: "Blue" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "cyan", iconName: "feather", colorTarget: "background", children: "Cyan" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "purple", iconName: "feather", colorTarget: "background", children: "Purple" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "pink", iconName: "feather", colorTarget: "background", children: "Pink" }), (0, jsx_runtime_1.jsx)(BlokLabeledIcon_1.BlokLabeledIcon, { colorScheme: "primary", iconName: "feather", colorTarget: "background", children: "Primary" })] })] })),
+};
+exports.PlayGround = {
+    args: {
+        children: "Some label",
+        iconName: "feather",
+    },
+};
+//# sourceMappingURL=BlokLabeledIcon.stories.js.map

package/dist/Components/BlokLabeledIcon/BlokLabeledIcon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlokLabeledIcon.stories.js","sourceRoot":"","sources":["../../../src/Components/BlokLabeledIcon/BlokLabeledIcon.stories.tsx"],"names":[],"mappings":"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"}

package/dist/Components/BlokLink/BlokLink.js

@@ -18,11 +18,11 @@ exports.classes = {
         textDecoration: "none",
     }),
 };
-const BlokLink = ({ href, children, colorScheme = "primary", underline = "hover", className, ...props }) => {
+const BlokLink = ({ href, children, colorScheme = "primary", underline = "hover", className, ...extraProps }) => {
     const linkStyle = {
         color: Foundations_1.colorMap[colorScheme][500],
     };
-    return ((0, jsx_runtime_1.jsx)("a", { href: href, style: linkStyle, ...props, className: (0, css_1.cx)(underline === "hover" ? exports.classes.underlineOnHover : "", underline === "always" ? exports.classes.underlineAlways : "", underline === "never" ? exports.classes.underlineNever : "", className), children: children }));
+    return ((0, jsx_runtime_1.jsx)("a", { href: href, style: linkStyle, ...extraProps, className: (0, css_1.cx)(underline === "hover" ? exports.classes.underlineOnHover : "", underline === "always" ? exports.classes.underlineAlways : "", underline === "never" ? exports.classes.underlineNever : "", className), children: children }));
 };
 exports.BlokLink = BlokLink;
 //# sourceMappingURL=BlokLink.js.map

package/dist/Components/BlokLink/BlokLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlokLink.js","sourceRoot":"","sources":["../../../src/Components/BlokLink/BlokLink.tsx"],"names":[],"mappings":";;;;AAAA,sCAAuC;AAQvC,mDAA6D;AAEhD,QAAA,OAAO,GAAG;IACrB,gBAAgB,EAAE,IAAA,SAAG,EAAC;QACpB,cAAc,EAAE,MAAM;QACtB,SAAS,EAAE;YACT,cAAc,EAAE,WAAW;SAC5B;KACF,CAAC;IACF,eAAe,EAAE,IAAA,SAAG,EAAC;QACnB,cAAc,EAAE,WAAW;KAC5B,CAAC;IACF,cAAc,EAAE,IAAA,SAAG,EAAC;QAClB,cAAc,EAAE,MAAM;KACvB,CAAC;CACH,CAAC;AAQK,MAAM,QAAQ,GAAyC,CAAC,EAC7D,IAAI,EACJ,QAAQ,EACR,WAAW,GAAG,SAAS,EACvB,SAAS,GAAG,OAAO,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAgB,EAAE;IACjB,MAAM,SAAS,GAAG;QAChB,KAAK,EAAE,sBAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC;KAClC,CAAC;IAEF,OAAO,CACL,8BACE,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,SAAS,KACZ,KAAK,EACT,SAAS,EAAE,IAAA,QAAE,EACX,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,eAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,EACrD,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,eAAO,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,EACrD,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,eAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EACnD,SAAS,CACV,YAEA,QAAQ,GACP,CACL,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,QAAQ,YA2BnB"}
+{"version":3,"file":"BlokLink.js","sourceRoot":"","sources":["../../../src/Components/BlokLink/BlokLink.tsx"],"names":[],"mappings":";;;;AAAA,sCAAuC;AAQvC,mDAA6D;AAEhD,QAAA,OAAO,GAAG;IACrB,gBAAgB,EAAE,IAAA,SAAG,EAAC;QACpB,cAAc,EAAE,MAAM;QACtB,SAAS,EAAE;YACT,cAAc,EAAE,WAAW;SAC5B;KACF,CAAC;IACF,eAAe,EAAE,IAAA,SAAG,EAAC;QACnB,cAAc,EAAE,WAAW;KAC5B,CAAC;IACF,cAAc,EAAE,IAAA,SAAG,EAAC;QAClB,cAAc,EAAE,MAAM;KACvB,CAAC;CACH,CAAC;AAQK,MAAM,QAAQ,GAAyC,CAAC,EAC7D,IAAI,EACJ,QAAQ,EACR,WAAW,GAAG,SAAS,EACvB,SAAS,GAAG,OAAO,EACnB,SAAS,EACT,GAAG,UAAU,EACd,EAAgB,EAAE;IACjB,MAAM,SAAS,GAAG;QAChB,KAAK,EAAE,sBAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC;KAClC,CAAC;IAEF,OAAO,CACL,8BACE,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,SAAS,KACZ,UAAU,EACd,SAAS,EAAE,IAAA,QAAE,EACX,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,eAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,EACrD,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,eAAO,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,EACrD,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,eAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EACnD,SAAS,CACV,YAEA,QAAQ,GACP,CACL,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,QAAQ,YA2BnB"}

package/dist/Components/BlokTag/BlokTag.js

@@ -12,7 +12,7 @@ const classes = {
         display: "inline-flex",
         alignItems: "center",
         maxWidth: "100%",
-        borderRadius: Foundations_1.borderRadiusMd,
+        borderRadius: Foundations_1.borderRadiusBase,
         lineHeight: 1.2,
         outline: "transparent solid 2px",
         outlineOffset: "2px",
@@ -66,16 +66,23 @@ const classes = {
         },
     }),
 };
-const BlokTag = ({ size = "md", startIcon, endIcon, onDelete, colorScheme = "neutral", children, deleteLabel = "Delete", className, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", }) => {
+const BlokTag = ({ size = "md", startIcon, endIcon, onDelete, colorScheme = "neutral", children, deleteLabel = "Delete", className, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", ...extraProps }) => {
     const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
     const toggleExpanded = (0, react_1.useCallback)(() => {
         setIsExpanded((prev) => !prev);
     }, []);
-    const styles = (0, react_1.useMemo)(() => ({
-        backgroundColor: Foundations_1.colorMap[colorScheme][100],
-        color: Foundations_1.colorMap[colorScheme][800],
-    }), [colorScheme]);
-    return ((0, jsx_runtime_1.jsxs)("span", { className: (0, css_1.cx)(classes.tag, classes[`tagSize${(0, utils_1.capitalizeString)(size)}`], className), style: styles, children: [startIcon, expandedContent && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.tagButton, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), (0, jsx_runtime_1.jsx)("span", { children: isExpanded ? expandedContent : children }), endIcon, onDelete && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onDelete, "aria-label": deleteLabel, className: classes.tagButton, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "close" }) }))] }));
+    const styles = (0, react_1.useMemo)(() => {
+        if (colorScheme === "gen-ai") {
+            return {
+                backgroundImage: Foundations_1.colorMap[colorScheme]?.[100],
+            };
+        }
+        return {
+            backgroundColor: Foundations_1.colorMap[colorScheme][100],
+            color: Foundations_1.colorMap[colorScheme][800],
+        };
+    }, [colorScheme]);
+    return ((0, jsx_runtime_1.jsxs)("span", { className: (0, css_1.cx)(classes.tag, classes[`tagSize${(0, utils_1.capitalizeString)(size)}`], className), style: styles, ...extraProps, children: [startIcon, expandedContent && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.tagButton, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), (0, jsx_runtime_1.jsx)("span", { children: isExpanded ? expandedContent : children }), endIcon, onDelete && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onDelete, "aria-label": deleteLabel, className: classes.tagButton, children: (0, jsx_runtime_1.jsx)(BlokIcon_1.BlokIcon, { icon: "close" }) }))] }));
 };
 exports.BlokTag = BlokTag;
 //# sourceMappingURL=BlokTag.js.map

package/dist/Components/BlokTag/BlokTag.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlokTag.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BlokTag.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.tsx"],"names":[],"mappings":"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"}

package/dist/Components/BlokTag/BlokTag.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Components/BlokTag/BlokTag.spec.js

@@ -0,0 +1,43 @@
+"use strict";
+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");
+const react_1 = require("@testing-library/react");
+const user_event_1 = __importDefault(require("@testing-library/user-event"));
+const Foundations_1 = require("Foundations");
+const BlokTag_1 = require("./BlokTag");
+describe("BlokTag", () => {
+    test("renders with default props", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { children: "Default Tag" }));
+        expect(react_1.screen.getByText("Default Tag")).toBeInTheDocument();
+    });
+    test("renders with startIcon and endIcon", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { startIcon: (0, jsx_runtime_1.jsx)("span", { children: "Start" }), endIcon: (0, jsx_runtime_1.jsx)("span", { children: "End" }), children: "Tag with Icons" }));
+        expect(react_1.screen.getByText("Start")).toBeInTheDocument();
+        expect(react_1.screen.getByText("End")).toBeInTheDocument();
+    });
+    test("calls onDelete when delete button is clicked", async () => {
+        const user = user_event_1.default.setup();
+        const onDelete = jest.fn();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { onDelete: onDelete, children: "Deletable Tag" }));
+        await user.click(react_1.screen.getByLabelText("Delete"));
+        expect(onDelete).toHaveBeenCalledTimes(1);
+    });
+    test("toggles expanded content when expand button is clicked", async () => {
+        const user = user_event_1.default.setup();
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { expandedContent: (0, jsx_runtime_1.jsx)("span", { children: "Expanded Content" }), children: "Collapsed Content" }));
+        await user.click(react_1.screen.getByLabelText("Expand"));
+        expect(react_1.screen.getByText("Expanded Content")).toBeInTheDocument();
+        await user.click(react_1.screen.getByLabelText("Collapse"));
+        expect(react_1.screen.getByText("Collapsed Content")).toBeInTheDocument();
+    });
+    test("applies correct styles based on colorScheme", () => {
+        (0, react_1.render)((0, jsx_runtime_1.jsx)(BlokTag_1.BlokTag, { colorScheme: "blue", children: "Styled Tag" }));
+        const tag = react_1.screen.getByText("Styled Tag").parentElement;
+        expect(tag).toHaveStyle(`background-color: ${Foundations_1.colorMap["blue"][100]}`);
+        expect(tag).toHaveStyle(`color: ${Foundations_1.colorMap["blue"][800]}`);
+    });
+});
+//# sourceMappingURL=BlokTag.spec.js.map

package/dist/Components/BlokTag/BlokTag.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlokTag.spec.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.spec.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAwD;AACxD,6EAAoD;AACpD,6CAAuC;AAEvC,uCAAoC;AAEpC,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;IACvB,IAAI,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACtC,IAAA,cAAM,EAAC,uBAAC,iBAAO,8BAAsB,CAAC,CAAC;QACvC,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC9D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,oCAAoC,EAAE,GAAG,EAAE;QAC9C,IAAA,cAAM,EACJ,uBAAC,iBAAO,IAAC,SAAS,EAAE,qDAAkB,EAAE,OAAO,EAAE,mDAAgB,+BAEvD,CACX,CAAC;QACF,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACtD,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACtD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,8CAA8C,EAAE,KAAK,IAAI,EAAE;QAC9D,MAAM,IAAI,GAAG,oBAAS,CAAC,KAAK,EAAE,CAAC;QAC/B,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;QAC3B,IAAA,cAAM,EAAC,uBAAC,iBAAO,IAAC,QAAQ,EAAE,QAAQ,8BAAyB,CAAC,CAAC;QAC7D,MAAM,IAAI,CAAC,KAAK,CAAC,cAAM,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;QAClD,MAAM,CAAC,QAAQ,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;IAC5C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACxE,MAAM,IAAI,GAAG,oBAAS,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAA,cAAM,EACJ,uBAAC,iBAAO,IAAC,eAAe,EAAE,gEAA6B,kCAE7C,CACX,CAAC;QACF,MAAM,IAAI,CAAC,KAAK,CAAC,cAAM,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC;QAClD,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QACjE,MAAM,IAAI,CAAC,KAAK,CAAC,cAAM,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;QACpD,MAAM,CAAC,cAAM,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACvD,IAAA,cAAM,EAAC,uBAAC,iBAAO,IAAC,WAAW,EAAC,MAAM,2BAAqB,CAAC,CAAC;QACzD,MAAM,GAAG,GAAG,cAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,aAAa,CAAC;QACzD,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,qBAAqB,sBAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACtE,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,UAAU,sBAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC7D,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/Components/index.d.ts

@@ -1,4 +1,7 @@
+export * from "./BlokBadge/BlokBadge";
 export * from "./BlokButton/BlokButton";
 export * from "./BlokIcon/BlokIcon";
 export * from "./BlokIcon/BlokIconContext";
 export * from "./BlokIconButton/BlokIconButton";
+export * from "./BlokLink/BlokLink";
+export * from "./BlokTag/BlokTag";

package/dist/Components/index.js

@@ -14,8 +14,11 @@ 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("./BlokBadge/BlokBadge"), exports);
 __exportStar(require("./BlokButton/BlokButton"), exports);
 __exportStar(require("./BlokIcon/BlokIcon"), exports);
 __exportStar(require("./BlokIcon/BlokIconContext"), exports);
 __exportStar(require("./BlokIconButton/BlokIconButton"), exports);
+__exportStar(require("./BlokLink/BlokLink"), exports);
+__exportStar(require("./BlokTag/BlokTag"), exports);
 //# sourceMappingURL=index.js.map

package/dist/Components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0DAAwC;AACxC,sDAAoC;AACpC,6DAA2C;AAC3C,kEAAgD"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Components/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,wDAAsC;AACtC,0DAAwC;AACxC,sDAAoC;AACpC,6DAA2C;AAC3C,kEAAgD;AAChD,sDAAoC;AACpC,oDAAkC"}

package/esm/Components/BlokBadge/BlokBadge.js

@@ -1,25 +1,63 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { css } from "@emotion/css";
-import { useMemo } from "react";
-import { borderRadiusMd, colorMap, fontWeightBold, } from "../../Foundations";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cx } from "@emotion/css";
+import { useCallback, useMemo, useState, } from "react";
+import { borderRadiusBase, borderRadiusFull, colorMap, fontWeightBold, } from "../../Foundations";
+import { BlokIcon } from "../BlokIcon/BlokIcon";
 const classes = {
     badge: css({
         paddingInlineStart: "0.25rem",
         paddingInlineEnd: "0.25rem",
         fontWeight: fontWeightBold,
-        borderRadius: borderRadiusMd,
-        display: "inline-block",
+        borderRadius: borderRadiusBase,
+        display: "inline-flex",
         whiteSpace: "nowrap",
         textTransform: "uppercase",
         fontSize: "0.75rem",
         verticalAlign: "middle",
+        gap: "0.5rem",
+        alignItems: "center",
+        ".m-icon": {
+            fontSize: "1.2em",
+        },
+    }),
+    badgeButton: css({
+        background: "transparent",
+        border: "none",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: "1em",
+        width: "auto",
+        height: "auto",
+        margin: 0,
+        padding: 0,
+        cursor: "pointer",
+        opacity: "0.5",
+        "&:hover": {
+            opacity: 0.8,
+        },
+    }),
+    badgeIconOnly: css({
+        borderRadius: borderRadiusFull,
+        padding: "0.25rem",
     }),
 };
-export const BlokBadge = ({ colorScheme = "neutral", children, }) => {
-    const styles = useMemo(() => ({
-        backgroundColor: colorMap[colorScheme][100],
-        color: colorMap[colorScheme][800],
-    }), [colorScheme]);
-    return (_jsx("span", { className: classes.badge, style: styles, children: children }));
+export const BlokBadge = ({ colorScheme = "neutral", children, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", iconName, ...extraProps }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const toggleExpanded = useCallback(() => {
+        setIsExpanded((prev) => !prev);
+    }, []);
+    const styles = useMemo(() => {
+        if (colorScheme === "gen-ai") {
+            return {
+                backgroundImage: colorMap[colorScheme]?.[100],
+            };
+        }
+        return {
+            backgroundColor: colorMap[colorScheme][100],
+            color: colorMap[colorScheme][800],
+        };
+    }, [colorScheme]);
+    return (_jsxs("span", { className: cx(classes.badge, !children && iconName ? classes.badgeIconOnly : undefined), style: styles, ...extraProps, children: [iconName && _jsx(BlokIcon, { icon: iconName }), expandedContent && (_jsx("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.badgeButton, children: _jsx(BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), children && _jsx("span", { children: isExpanded ? expandedContent : children })] }));
 };
 //# sourceMappingURL=BlokBadge.js.map

package/esm/Components/BlokBadge/BlokBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlokBadge.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AACnC,OAAO,EAAmC,OAAO,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EACL,cAAc,EACd,QAAQ,EAER,cAAc,GACf,MAAM,mBAAmB,CAAC;AAE3B,MAAM,OAAO,GAAG;IACd,KAAK,EAAE,GAAG,CAAC;QACT,kBAAkB,EAAE,SAAS;QAC7B,gBAAgB,EAAE,SAAS;QAC3B,UAAU,EAAE,cAAc;QAC1B,YAAY,EAAE,cAAc;QAC5B,OAAO,EAAE,cAAc;QACvB,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,WAAW;QAC1B,QAAQ,EAAE,SAAS;QACnB,aAAa,EAAE,QAAQ;KACxB,CAAC;CACH,CAAC;AAMF,MAAM,CAAC,MAAM,SAAS,GAA0C,CAAC,EAC/D,WAAW,GAAG,SAAS,EACvB,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE,CAAC,CAAC;QACL,eAAe,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC;QAC3C,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC;KAClC,CAAC,EACF,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,OAAO,CACL,eAAM,SAAS,EAAE,OAAO,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,YAC1C,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"BlokBadge.js","sourceRoot":"","sources":["../../../src/Components/BlokBadge/BlokBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAIL,WAAW,EACX,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,gBAAgB,EAChB,gBAAgB,EAChB,QAAQ,EAER,cAAc,GACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAiB,MAAM,sBAAsB,CAAC;AAE/D,MAAM,OAAO,GAAG;IACd,KAAK,EAAE,GAAG,CAAC;QACT,kBAAkB,EAAE,SAAS;QAC7B,gBAAgB,EAAE,SAAS;QAC3B,UAAU,EAAE,cAAc;QAC1B,YAAY,EAAE,gBAAgB;QAC9B,OAAO,EAAE,aAAa;QACtB,UAAU,EAAE,QAAQ;QACpB,aAAa,EAAE,WAAW;QAC1B,QAAQ,EAAE,SAAS;QACnB,aAAa,EAAE,QAAQ;QACvB,GAAG,EAAE,QAAQ;QACb,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE;YACT,QAAQ,EAAE,OAAO;SAClB;KACF,CAAC;IACF,WAAW,EAAE,GAAG,CAAC;QACf,UAAU,EAAE,aAAa;QACzB,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;QACxB,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,CAAC;QACV,MAAM,EAAE,SAAS;QACjB,OAAO,EAAE,KAAK;QAEd,SAAS,EAAE;YACT,OAAO,EAAE,GAAG;SACb;KACF,CAAC;IACF,aAAa,EAAE,GAAG,CAAC;QACjB,YAAY,EAAE,gBAAgB;QAC9B,OAAO,EAAE,SAAS;KACnB,CAAC;CACH,CAAC;AAWF,MAAM,CAAC,MAAM,SAAS,GAA0C,CAAC,EAC/D,WAAW,GAAG,SAAS,EACvB,QAAQ,EACR,eAAe,EACf,WAAW,GAAG,QAAQ,EACtB,aAAa,GAAG,UAAU,EAC1B,QAAQ,EACR,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,cAAc,GAAG,WAAW,CAAC,GAAG,EAAE;QACtC,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,WAAW,KAAK,QAAQ,EAAE,CAAC;YAC7B,OAAO;gBACL,eAAe,EAAE,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;aAC9C,CAAC;QACJ,CAAC;QAED,OAAO;YACL,eAAe,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC;YAC3C,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC;SAClC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,OAAO,CACL,gBACE,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,KAAK,EACb,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAC1D,EACD,KAAK,EAAE,MAAM,KACT,UAAU,aAEb,QAAQ,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAE,QAAQ,GAAI,EACxC,eAAe,IAAI,CAClB,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,cAAc,gBACX,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,EACpD,SAAS,EAAE,OAAO,CAAC,WAAW,YAE9B,KAAC,QAAQ,IACP,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,sBAAsB,GAClE,GACK,CACV,EACA,QAAQ,IAAI,yBAAO,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,GAAQ,IAC9D,CACR,CAAC;AACJ,CAAC,CAAC"}

package/esm/Components/BlokIcon/BlokIcon.js

@@ -16,7 +16,7 @@ const svgStyles = css({
         height: "1em",
         position: "sticky",
         zIndex: 1,
-        verticalAlign: "inherit",
+        verticalAlign: "baseline",
         userSelect: "none",
         fill: "currentColor",
         color: "currentColor",

package/esm/Components/BlokIcon/BlokIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlokIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAM,UAAU,EAAa,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,OAAO,EACL,qBAAqB,EACrB,WAAW,GAGZ,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,SAAS,GAAG,GAAG,CAAC;IACpB,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,GAAG,CAAC;IACpB,UAAU,EAAE,CAAC;IACb,MAAM,EAAE,KAAK;IACb,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE;QACP,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,CAAC;QACT,aAAa,EAAE,SAAS;QACxB,UAAU,EAAE,MAAM;QAClB,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,cAAc;QACrB,UAAU,EAAE,CAAC;QACb,UAAU,EAAE,CAAC;KACd;IACD,gBAAgB,EAAE;QAChB,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,aAAa;KACpB;IACD,UAAU,EAAE;QACV,OAAO,EAAE,MAAM,EAAE,2EAA2E;KAC7F;CACF,CAAC,CAAC;AAeH,MAAM,CAAC,MAAM,QAAQ,GAAsB,UAAU,CAGnD,SAAS,cAAc,CACvB,EACE,IAAI,EACJ,OAAO,EACP,KAAK,EACL,SAAS,EACT,cAAc,GAAG,GAAG,EACpB,mBAAmB,EACnB,wBAAwB,GAAG,GAAG,EAC9B,QAAQ,GAAG,SAAS,EACpB,kBAAkB,GAAG,KAAK,EAC1B,GAAG,KAAK,EACT,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,UAAU,QAAQ,EAAE,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,CAAC;IAC/C,MAAM,OAAO,GAAG,oBAAoB,CAAC,QAAQ,EAAE,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAE3E,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,YACE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACZ,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,IAAI,CAAC,CAAC;YACZ,CAAC;YAED,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,EACD,SAAS,EAAE,EAAE,CACX,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,EACzD,mBAAmB;YACjB,CAAC,CAAC,qBAAqB,CAAC,mBAAmB,EAAE,wBAAwB,CAAC;YACtE,CAAC,CAAC,IAAI,EACR,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,CACV,KACG,KAAK,gBACG,KAAK,IAAI,YAAY,iBACpB,YAAY,EACzB,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAiB,EAAE,GACtD,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"file":"BlokIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokIcon/BlokIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAM,UAAU,EAAa,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAExD,OAAO,EACL,qBAAqB,EACrB,WAAW,GAGZ,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAIpD,MAAM,SAAS,GAAG,GAAG,CAAC;IACpB,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAC;AAEH,MAAM,SAAS,GAAG,GAAG,CAAC;IACpB,UAAU,EAAE,CAAC;IACb,MAAM,EAAE,KAAK;IACb,OAAO,EAAE,cAAc;IACvB,OAAO,EAAE;QACP,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,QAAQ;QAClB,MAAM,EAAE,CAAC;QACT,aAAa,EAAE,UAAU;QACzB,UAAU,EAAE,MAAM;QAClB,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,cAAc;QACrB,UAAU,EAAE,CAAC;QACb,UAAU,EAAE,CAAC;KACd;IACD,gBAAgB,EAAE;QAChB,MAAM,EAAE,cAAc;QACtB,IAAI,EAAE,aAAa;KACpB;IACD,UAAU,EAAE;QACV,OAAO,EAAE,MAAM,EAAE,2EAA2E;KAC7F;CACF,CAAC,CAAC;AAeH,MAAM,CAAC,MAAM,QAAQ,GAAsB,UAAU,CAGnD,SAAS,cAAc,CACvB,EACE,IAAI,EACJ,OAAO,EACP,KAAK,EACL,SAAS,EACT,cAAc,GAAG,GAAG,EACpB,mBAAmB,EACnB,wBAAwB,GAAG,GAAG,EAC9B,QAAQ,GAAG,SAAS,EACpB,kBAAkB,GAAG,KAAK,EAC1B,GAAG,KAAK,EACT,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,UAAU,QAAQ,EAAE,CAAC;IAC1C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,SAAS,EAAE,CAAC;IAC/C,MAAM,OAAO,GAAG,oBAAoB,CAAC,QAAQ,EAAE,kBAAkB,EAAE,MAAM,CAAC,CAAC;IAE3E,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,YACE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACZ,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE,CAAC;gBAC9B,GAAG,CAAC,IAAI,CAAC,CAAC;YACZ,CAAC;YAED,SAAS,CAAC,IAAI,CAAC,CAAC;QAClB,CAAC,EACD,SAAS,EAAE,EAAE,CACX,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC,IAAI,EACzD,mBAAmB;YACjB,CAAC,CAAC,qBAAqB,CAAC,mBAAmB,EAAE,wBAAwB,CAAC;YACtE,CAAC,CAAC,IAAI,EACR,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,CACV,KACG,KAAK,gBACG,KAAK,IAAI,YAAY,iBACpB,YAAY,EACzB,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAiB,EAAE,GACtD,CACH,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/esm/Components/BlokLabeledIcon/BlokLabeledIcon.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cx } from "@emotion/css";
+import { useMemo } from "react";
+import { borderRadiusBase, colorMap, fontSizeSmall, fontWeightBold, } from "../../Foundations";
+import { BlokIcon } from "../BlokIcon/BlokIcon";
+const classes = {
+    labeledIcon: css({
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        maxWidth: "100%",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        fontSize: fontSizeSmall,
+        fontWeight: fontWeightBold,
+        borderRadius: borderRadiusBase,
+        ".m-icon": {
+            fontSize: "1.5em",
+        },
+    }),
+    labeledIconBackground: css({
+        padding: "0.25rem",
+    }),
+};
+export const BlokLabeledIcon = ({ iconName, children, colorTarget = "foreground", colorScheme = "neutral", fontSize = fontSizeSmall, className, ...extraProps }) => {
+    const styles = useMemo(() => {
+        if (colorTarget === "background") {
+            return {
+                backgroundColor: colorMap[colorScheme]?.[100],
+                color: colorMap[colorScheme]?.[300],
+                fontSize,
+            };
+        }
+        return {
+            color: children
+                ? colorMap[colorScheme]?.[500]
+                : colorMap[colorScheme]?.[400],
+            fontSize,
+        };
+    }, [children, colorScheme, colorTarget, fontSize]);
+    return (_jsxs("span", { style: styles, className: cx(classes.labeledIcon, colorTarget === "background"
+            ? classes.labeledIconBackground
+            : undefined, className), ...extraProps, children: [iconName && _jsx(BlokIcon, { icon: iconName }), children] }));
+};
+//# sourceMappingURL=BlokLabeledIcon.js.map

package/esm/Components/BlokLabeledIcon/BlokLabeledIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlokLabeledIcon.js","sourceRoot":"","sources":["../../../src/Components/BlokLabeledIcon/BlokLabeledIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAyB,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EACL,gBAAgB,EAChB,QAAQ,EAER,aAAa,EACb,cAAc,GACf,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAY,MAAM,sBAAsB,CAAC;AAE1D,MAAM,OAAO,GAAG;IACd,WAAW,EAAE,GAAG,CAAC;QACf,OAAO,EAAE,MAAM;QACf,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;QACN,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,QAAQ;QAClB,YAAY,EAAE,UAAU;QACxB,QAAQ,EAAE,aAAa;QACvB,UAAU,EAAE,cAAc;QAC1B,YAAY,EAAE,gBAAgB;QAE9B,SAAS,EAAE;YACT,QAAQ,EAAE,OAAO;SAClB;KACF,CAAC;IACF,qBAAqB,EAAE,GAAG,CAAC;QACzB,OAAO,EAAE,SAAS;KACnB,CAAC;CACH,CAAC;AAUF,MAAM,CAAC,MAAM,eAAe,GAAgD,CAAC,EAC3E,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,WAAW,GAAG,SAAS,EACvB,QAAQ,GAAG,aAAa,EACxB,SAAS,EACT,GAAG,UAAU,EACd,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,IAAI,WAAW,KAAK,YAAY,EAAE,CAAC;YACjC,OAAO;gBACL,eAAe,EAAE,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;gBAC7C,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;gBACnC,QAAQ;aACT,CAAC;QACJ,CAAC;QACD,OAAO;YACL,KAAK,EAAE,QAAQ;gBACb,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;gBAC9B,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC;YAChC,QAAQ;SACT,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEnD,OAAO,CACL,gBACE,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,WAAW,EACnB,WAAW,KAAK,YAAY;YAC1B,CAAC,CAAC,OAAO,CAAC,qBAAqB;YAC/B,CAAC,CAAC,SAAS,EACb,SAAS,CACV,KACG,UAAU,aAEb,QAAQ,IAAI,KAAC,QAAQ,IAAC,IAAI,EAAE,QAAQ,GAAI,EACxC,QAAQ,IACJ,CACR,CAAC;AACJ,CAAC,CAAC"}

package/esm/Components/BlokLink/BlokLink.js

@@ -15,10 +15,10 @@ export const classes = {
         textDecoration: "none",
     }),
 };
-export const BlokLink = ({ href, children, colorScheme = "primary", underline = "hover", className, ...props }) => {
+export const BlokLink = ({ href, children, colorScheme = "primary", underline = "hover", className, ...extraProps }) => {
     const linkStyle = {
         color: colorMap[colorScheme][500],
     };
-    return (_jsx("a", { href: href, style: linkStyle, ...props, className: cx(underline === "hover" ? classes.underlineOnHover : "", underline === "always" ? classes.underlineAlways : "", underline === "never" ? classes.underlineNever : "", className), children: children }));
+    return (_jsx("a", { href: href, style: linkStyle, ...extraProps, className: cx(underline === "hover" ? classes.underlineOnHover : "", underline === "always" ? classes.underlineAlways : "", underline === "never" ? classes.underlineNever : "", className), children: children }));
 };
 //# sourceMappingURL=BlokLink.js.map

package/esm/Components/BlokLink/BlokLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlokLink.js","sourceRoot":"","sources":["../../../src/Components/BlokLink/BlokLink.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAQvC,OAAO,EAAE,QAAQ,EAAkB,MAAM,mBAAmB,CAAC;AAE7D,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,gBAAgB,EAAE,GAAG,CAAC;QACpB,cAAc,EAAE,MAAM;QACtB,SAAS,EAAE;YACT,cAAc,EAAE,WAAW;SAC5B;KACF,CAAC;IACF,eAAe,EAAE,GAAG,CAAC;QACnB,cAAc,EAAE,WAAW;KAC5B,CAAC;IACF,cAAc,EAAE,GAAG,CAAC;QAClB,cAAc,EAAE,MAAM;KACvB,CAAC;CACH,CAAC;AAQF,MAAM,CAAC,MAAM,QAAQ,GAAyC,CAAC,EAC7D,IAAI,EACJ,QAAQ,EACR,WAAW,GAAG,SAAS,EACvB,SAAS,GAAG,OAAO,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAgB,EAAE;IACjB,MAAM,SAAS,GAAG;QAChB,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC;KAClC,CAAC;IAEF,OAAO,CACL,YACE,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,SAAS,KACZ,KAAK,EACT,SAAS,EAAE,EAAE,CACX,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,EACrD,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,EACrD,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EACnD,SAAS,CACV,YAEA,QAAQ,GACP,CACL,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"BlokLink.js","sourceRoot":"","sources":["../../../src/Components/BlokLink/BlokLink.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAQvC,OAAO,EAAE,QAAQ,EAAkB,MAAM,mBAAmB,CAAC;AAE7D,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,gBAAgB,EAAE,GAAG,CAAC;QACpB,cAAc,EAAE,MAAM;QACtB,SAAS,EAAE;YACT,cAAc,EAAE,WAAW;SAC5B;KACF,CAAC;IACF,eAAe,EAAE,GAAG,CAAC;QACnB,cAAc,EAAE,WAAW;KAC5B,CAAC;IACF,cAAc,EAAE,GAAG,CAAC;QAClB,cAAc,EAAE,MAAM;KACvB,CAAC;CACH,CAAC;AAQF,MAAM,CAAC,MAAM,QAAQ,GAAyC,CAAC,EAC7D,IAAI,EACJ,QAAQ,EACR,WAAW,GAAG,SAAS,EACvB,SAAS,GAAG,OAAO,EACnB,SAAS,EACT,GAAG,UAAU,EACd,EAAgB,EAAE;IACjB,MAAM,SAAS,GAAG;QAChB,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC;KAClC,CAAC;IAEF,OAAO,CACL,YACE,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,SAAS,KACZ,UAAU,EACd,SAAS,EAAE,EAAE,CACX,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,EACrD,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,EACrD,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EACnD,SAAS,CACV,YAEA,QAAQ,GACP,CACL,CAAC;AACJ,CAAC,CAAC"}

package/esm/Components/BlokTag/BlokTag.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { css, cx } from "@emotion/css";
 import { useCallback, useMemo, useState, } from "react";
-import { borderRadiusMd, colorMap, fontSizes, } from "../../Foundations";
+import { borderRadiusBase, colorMap, fontSizes, } from "../../Foundations";
 import { capitalizeString } from "../../Foundations/utils";
 import { BlokIcon } from "../BlokIcon/BlokIcon";
 const classes = {
@@ -9,7 +9,7 @@ const classes = {
         display: "inline-flex",
         alignItems: "center",
         maxWidth: "100%",
-        borderRadius: borderRadiusMd,
+        borderRadius: borderRadiusBase,
         lineHeight: 1.2,
         outline: "transparent solid 2px",
         outlineOffset: "2px",
@@ -63,15 +63,22 @@ const classes = {
         },
     }),
 };
-export const BlokTag = ({ size = "md", startIcon, endIcon, onDelete, colorScheme = "neutral", children, deleteLabel = "Delete", className, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", }) => {
+export const BlokTag = ({ size = "md", startIcon, endIcon, onDelete, colorScheme = "neutral", children, deleteLabel = "Delete", className, expandedContent, expandLabel = "Expand", collapseLabel = "Collapse", ...extraProps }) => {
     const [isExpanded, setIsExpanded] = useState(false);
     const toggleExpanded = useCallback(() => {
         setIsExpanded((prev) => !prev);
     }, []);
-    const styles = useMemo(() => ({
-        backgroundColor: colorMap[colorScheme][100],
-        color: colorMap[colorScheme][800],
-    }), [colorScheme]);
-    return (_jsxs("span", { className: cx(classes.tag, classes[`tagSize${capitalizeString(size)}`], className), style: styles, children: [startIcon, expandedContent && (_jsx("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.tagButton, children: _jsx(BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), _jsx("span", { children: isExpanded ? expandedContent : children }), endIcon, onDelete && (_jsx("button", { type: "button", onClick: onDelete, "aria-label": deleteLabel, className: classes.tagButton, children: _jsx(BlokIcon, { icon: "close" }) }))] }));
+    const styles = useMemo(() => {
+        if (colorScheme === "gen-ai") {
+            return {
+                backgroundImage: colorMap[colorScheme]?.[100],
+            };
+        }
+        return {
+            backgroundColor: colorMap[colorScheme][100],
+            color: colorMap[colorScheme][800],
+        };
+    }, [colorScheme]);
+    return (_jsxs("span", { className: cx(classes.tag, classes[`tagSize${capitalizeString(size)}`], className), style: styles, ...extraProps, children: [startIcon, expandedContent && (_jsx("button", { type: "button", onClick: toggleExpanded, "aria-label": isExpanded ? collapseLabel : expandLabel, className: classes.tagButton, children: _jsx(BlokIcon, { icon: isExpanded ? "unfold-less-vertical" : "unfold-more-vertical" }) })), _jsx("span", { children: isExpanded ? expandedContent : children }), endIcon, onDelete && (_jsx("button", { type: "button", onClick: onDelete, "aria-label": deleteLabel, className: classes.tagButton, children: _jsx(BlokIcon, { icon: "close" }) }))] }));
 };
 //# sourceMappingURL=BlokTag.js.map

package/esm/Components/BlokTag/BlokTag.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlokTag.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BlokTag.js","sourceRoot":"","sources":["../../../src/Components/BlokTag/BlokTag.tsx"],"names":[],"mappings":"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"}

package/esm/Components/index.js

@@ -1,5 +1,8 @@
+export * from "./BlokBadge/BlokBadge";
 export * from "./BlokButton/BlokButton";
 export * from "./BlokIcon/BlokIcon";
 export * from "./BlokIcon/BlokIconContext";
 export * from "./BlokIconButton/BlokIconButton";
+export * from "./BlokLink/BlokLink";
+export * from "./BlokTag/BlokTag";
 //# sourceMappingURL=index.js.map

package/esm/Components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iCAAiC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Components/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iCAAiC,CAAC;AAChD,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sitecore/sc-contenthub-blok",
   "private": false,
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
   "sideEffects": false,
   "main": "dist/index.js",