@kosmeo-ui/react 0.1.1 → 1.0.0

package/dist/components/data-display/tableFilters/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/tableFilters/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/data-display/tagCard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/tagCard/index.tsx"],"names":[],"mappings":"AAKA,OAAO,cAAc,CAAC;AAEtB,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,OAAO,GAAI,OAAO,YAAY,gCAsBnC,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/tagCard/index.tsx"],"names":[],"mappings":"AAKA,OAAO,cAAc,CAAC;AAEtB,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,OAAO,GAAI,OAAO,YAAY,gCAyBnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/data-display/tagCard/index.js

@@ -6,7 +6,7 @@ import Col from "../../layout/col/index.js";
 import "./styles.css";
 const TagCard = (props) => {
     const { color = "primary" } = props;
-    return (_jsx(Card, { children: _jsxs(Col, { size: "sm", children: [_jsx("h3", { children: props.title }), props.tags.length ? (_jsx("ul", { className: "k-tag-card-list", children: props.tags.map((t) => (_jsx(Badge, { variant: color, size: "md", pill: true, children: t }, t))) })) : (props.emptyText && (_jsx("p", { className: "k-tag-card-empty-text", children: props.emptyText })))] }) }));
+    return (_jsx(Card, { children: _jsxs(Col, { size: "sm", children: [_jsx("h3", { children: props.title }), props.tags.length ? (_jsx("ul", { className: "k-tag-card-list", children: props.tags.map((t, i) => (_jsx("li", { children: _jsx(Badge, { variant: color, size: "md", pill: true, children: t }) }, `${i}-${t}`))) })) : (props.emptyText && (_jsx("p", { className: "k-tag-card-empty-text", children: props.emptyText })))] }) }));
 };
 export default TagCard;
 //# sourceMappingURL=index.js.map

package/dist/components/data-display/tagCard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/tagCard/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,+BAA+B,CAAC;AAClD,OAAO,IAAI,MAAM,4BAA4B,CAAC;AAC9C,OAAO,GAAG,MAAM,2BAA2B,CAAC;AAC5C,OAAO,cAAc,CAAC;AAStB,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IACtC,MAAM,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACpC,OAAO,CACL,KAAC,IAAI,cACH,MAAC,GAAG,IAAC,IAAI,EAAC,IAAI,aACZ,uBAAK,KAAK,CAAC,KAAK,GAAM,EACrB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CACnB,aAAI,SAAS,EAAC,iBAAiB,YAC5B,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACrB,KAAC,KAAK,IAAS,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,IAAI,kBAC1C,CAAC,IADQ,CAAC,CAEL,CACT,CAAC,GACC,CACN,CAAC,CAAC,CAAC,CACF,KAAK,CAAC,SAAS,IAAI,CACjB,YAAG,SAAS,EAAC,uBAAuB,YAAE,KAAK,CAAC,SAAS,GAAK,CAC3D,CACF,IACG,GACD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/data-display/tagCard/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,+BAA+B,CAAC;AAClD,OAAO,IAAI,MAAM,4BAA4B,CAAC;AAC9C,OAAO,GAAG,MAAM,2BAA2B,CAAC;AAC5C,OAAO,cAAc,CAAC;AAStB,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IACtC,MAAM,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACpC,OAAO,CACL,KAAC,IAAI,cACH,MAAC,GAAG,IAAC,IAAI,EAAC,IAAI,aACZ,uBAAK,KAAK,CAAC,KAAK,GAAM,EACrB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CACnB,aAAI,SAAS,EAAC,iBAAiB,YAE5B,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACxB,uBACE,KAAC,KAAK,IAAC,OAAO,EAAE,KAAK,EAAE,IAAI,EAAC,IAAI,EAAC,IAAI,kBAClC,CAAC,GACI,IAHD,GAAG,CAAC,IAAI,CAAC,EAAE,CAIf,CACN,CAAC,GACC,CACN,CAAC,CAAC,CAAC,CACF,KAAK,CAAC,SAAS,IAAI,CACjB,YAAG,SAAS,EAAC,uBAAuB,YAAE,KAAK,CAAC,SAAS,GAAK,CAC3D,CACF,IACG,GACD,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/data-display/tagCard/styles.css

@@ -8,7 +8,7 @@
 }
 
 .k-tag-card-empty-text {
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
   font-style: italic;
   margin: 0;
 }

package/dist/components/feedback/alert/styles.css

@@ -43,46 +43,46 @@
 }
 
 .k-alert-primary {
-  background-color: var(--primary-color-background);
-  color: var(--text-color-light);
+  background-color: var(--k-primary-color-background);
+  color: var(--k-text-color-light);
 }
 
 .k-alert-secondary {
-  background-color: var(--secondary-color-background);
-  color: var(--text-color-light);
+  background-color: var(--k-secondary-color-background);
+  color: var(--k-text-color-light);
 }
 
 .k-alert-light {
-  background-color: var(--light-color-background);
-  color: var(--text-color);
+  background-color: var(--k-light-color-background);
+  color: var(--k-text-color);
 }
 
 .k-alert-danger {
-  background-color: var(--danger-color-background);
-  color: var(--text-color-light);
+  background-color: var(--k-danger-color-background);
+  color: var(--k-text-color-light);
 }
 
 .k-alert-warning {
-  background-color: var(--warning-color-background);
-  color: var(--text-color);
+  background-color: var(--k-warning-color-background);
+  color: var(--k-text-color);
 }
 
 .k-alert-success {
-  background-color: var(--success-color-background);
-  color: var(--text-color-light);
+  background-color: var(--k-success-color-background);
+  color: var(--k-text-color-light);
 }
 
 .k-alert-sm {
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   padding: 0.5rem 0.75rem;
 }
 
 .k-alert-md {
-  font-size: var(--text-size-md);
+  font-size: var(--k-text-size-md);
   padding: 0.75rem 1rem;
 }
 
 .k-alert-lg {
-  font-size: var(--text-size-lg);
+  font-size: var(--k-text-size-lg);
   padding: 1rem 1.25rem;
 }

package/dist/components/feedback/badge/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/badge/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGjE,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,gBAAgB;IACjE,8CAA8C;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4GAA4G;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,GAAI,4FAWZ,UAAU,gCA+DZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/badge/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGjE,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,gBAAgB;IACjE,8CAA8C;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4GAA4G;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,GAAI,4FAWZ,UAAU,gCAmFZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/feedback/badge/index.js

@@ -16,18 +16,24 @@ const Badge = ({ children, size = "md", variant = "primary", pill = true, subtle
         ? {
             backgroundColor: color,
             color: getContrastTextColor(color) === "light"
-                ? "var(--text-color-light)"
-                : "var(--text-color)",
+                ? "var(--k-text-color-light)"
+                : "var(--k-text-color)",
         }
         : undefined;
-    const content = (_jsxs(_Fragment, { children: [startIcon && _jsx("span", { className: "k-badge-start-icon", children: startIcon }), _jsx("span", { className: "k-badge-content", children: children }), onRemove && (_jsx("button", { type: "button", "aria-label": "Remove", className: "k-badge-remove", onClick: (e) => {
-                    e.stopPropagation();
-                    onRemove();
-                }, children: _jsx(FontAwesomeIcon, { icon: faXmark }) }))] }));
+    const label = (_jsxs(_Fragment, { children: [startIcon && _jsx("span", { className: "k-badge-start-icon", children: startIcon }), _jsx("span", { className: "k-badge-content", children: children })] }));
+    const removeButton = onRemove && (_jsx("button", { type: "button", "aria-label": "Remove", className: "k-badge-remove", onClick: (e) => {
+            e.stopPropagation();
+            onRemove();
+        }, children: _jsx(FontAwesomeIcon, { icon: faXmark }) }));
+    // Clickable and removable: two sibling buttons in a span, since a button
+    // can't contain another.
+    if (onClick && onRemove) {
+        return (_jsxs("span", { className: classes, style: inlineStyle, children: [_jsx("button", { type: "button", "aria-label": ariaLabel, className: "k-badge-action", onClick: onClick, children: label }), removeButton] }));
+    }
     if (onClick) {
-        return (_jsx("button", { type: "button", "aria-label": ariaLabel, className: classes, style: inlineStyle, onClick: onClick, children: content }));
+        return (_jsx("button", { type: "button", "aria-label": ariaLabel, className: classes, style: inlineStyle, onClick: onClick, children: label }));
     }
-    return (_jsx("span", { className: classes, style: inlineStyle, children: content }));
+    return (_jsxs("span", { className: classes, style: inlineStyle, children: [label, removeButton] }));
 };
 export default Badge;
 //# sourceMappingURL=index.js.map

package/dist/components/feedback/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/feedback/badge/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,cAAc,CAAC;AAqBtB,MAAM,KAAK,GAAG,CAAC,EACb,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,KAAK,EACd,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,GACE,EAAE,EAAE;IACf,IAAI,OAAO,KAAK,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;QACnC,MAAM,IAAI,KAAK,CACb,+DAA+D,CAChE,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnD,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1D,MAAM,OAAO,GACX,mBAAmB,OAAO,YAAY,IAAI,IAAI,SAAS,IAAI,WAAW,IAAI,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC;IAEpG,MAAM,WAAW,GACf,OAAO,KAAK,QAAQ,IAAI,KAAK;QAC3B,CAAC,CAAC;YACE,eAAe,EAAE,KAAK;YACtB,KAAK,EACH,oBAAoB,CAAC,KAAK,CAAC,KAAK,OAAO;gBACrC,CAAC,CAAC,yBAAyB;gBAC3B,CAAC,CAAC,mBAAmB;SAC1B;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,OAAO,GAAG,CACd,8BACG,SAAS,IAAI,eAAM,SAAS,EAAC,oBAAoB,YAAE,SAAS,GAAQ,EACrE,eAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,QAAQ,IAAI,CACX,iBACE,IAAI,EAAC,QAAQ,gBACF,QAAQ,EACnB,SAAS,EAAC,gBAAgB,EAC1B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,QAAQ,EAAE,CAAC;gBACb,CAAC,YAED,KAAC,eAAe,IAAC,IAAI,EAAE,OAAO,GAAI,GAC3B,CACV,IACA,CACJ,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,gBACD,SAAS,EACrB,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,OAAO,YAEf,OAAO,GACD,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,eAAM,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,YACzC,OAAO,GACH,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/feedback/badge/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,cAAc,CAAC;AAqBtB,MAAM,KAAK,GAAG,CAAC,EACb,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,KAAK,EACd,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,GACE,EAAE,EAAE;IACf,IAAI,OAAO,KAAK,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;QACnC,MAAM,IAAI,KAAK,CACb,+DAA+D,CAChE,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnD,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1D,MAAM,OAAO,GACX,mBAAmB,OAAO,YAAY,IAAI,IAAI,SAAS,IAAI,WAAW,IAAI,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC;IAEpG,MAAM,WAAW,GACf,OAAO,KAAK,QAAQ,IAAI,KAAK;QAC3B,CAAC,CAAC;YACE,eAAe,EAAE,KAAK;YACtB,KAAK,EACH,oBAAoB,CAAC,KAAK,CAAC,KAAK,OAAO;gBACrC,CAAC,CAAC,2BAA2B;gBAC7B,CAAC,CAAC,qBAAqB;SAC5B;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,KAAK,GAAG,CACZ,8BACG,SAAS,IAAI,eAAM,SAAS,EAAC,oBAAoB,YAAE,SAAS,GAAQ,EACrE,eAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,IAClD,CACJ,CAAC;IAEF,MAAM,YAAY,GAAG,QAAQ,IAAI,CAC/B,iBACE,IAAI,EAAC,QAAQ,gBACF,QAAQ,EACnB,SAAS,EAAC,gBAAgB,EAC1B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,QAAQ,EAAE,CAAC;QACb,CAAC,YAED,KAAC,eAAe,IAAC,IAAI,EAAE,OAAO,GAAI,GAC3B,CACV,CAAC;IAEF,yEAAyE;IACzE,yBAAyB;IACzB,IAAI,OAAO,IAAI,QAAQ,EAAE,CAAC;QACxB,OAAO,CACL,gBAAM,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,aAC1C,iBACE,IAAI,EAAC,QAAQ,gBACD,SAAS,EACrB,SAAS,EAAC,gBAAgB,EAC1B,OAAO,EAAE,OAAO,YAEf,KAAK,GACC,EACR,YAAY,IACR,CACR,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,gBACD,SAAS,EACrB,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,OAAO,YAEf,KAAK,GACC,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,gBAAM,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,aACzC,KAAK,EACL,YAAY,IACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/feedback/badge/styles.css

@@ -21,6 +21,18 @@ button.k-badge {
   opacity: 0.85;
 }
 
+.k-badge-action {
+  display: inline-flex;
+  align-items: center;
+  gap: inherit;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
 .k-badge-start-icon {
   display: inline-flex;
   align-items: center;
@@ -67,33 +79,33 @@ button.k-badge {
 
 /* Variants */
 .k-badge-primary {
-  background-color: var(--primary-color);
-  color: var(--text-color-light);
+  background-color: var(--k-primary-color);
+  color: var(--k-text-color-light);
 }
 
 .k-badge-secondary {
-  background-color: var(--secondary-color);
-  color: var(--text-color-light);
+  background-color: var(--k-secondary-color);
+  color: var(--k-text-color-light);
 }
 
 .k-badge-light {
-  background-color: var(--light-color-background);
-  color: var(--text-color);
+  background-color: var(--k-light-color-background);
+  color: var(--k-text-color);
 }
 
 .k-badge-danger {
-  background-color: var(--danger-color);
-  color: var(--text-color-light);
+  background-color: var(--k-danger-color);
+  color: var(--k-text-color-light);
 }
 
 .k-badge-warning {
-  background-color: var(--warning-color);
-  color: var(--text-color);
+  background-color: var(--k-warning-color);
+  color: var(--k-warning-color-contrast);
 }
 
 .k-badge-success {
-  background-color: var(--success-color);
-  color: var(--text-color-light);
+  background-color: var(--k-success-color);
+  color: var(--k-text-color-light);
 }
 
 /* Pill shape */
@@ -107,56 +119,44 @@ button.k-badge {
 }
 
 /* Subtle variants - transparent background with colored text */
+/* Subtle text blends the variant color 60/40 with --k-text-color: the full
+   variant color on its own 15% tint falls under 4.5:1 for most variants. */
 .k-badge-subtle.k-badge-primary {
-  background-color: color-mix(
-    in srgb,
-    var(--primary-color) 15%,
-    var(--background-color)
-  );
-  color: var(--primary-color);
+  background-color: color-mix(in srgb, var(--k-primary-color) 15%, transparent);
+  color: color-mix(in srgb, var(--k-primary-color) 60%, var(--k-text-color));
 }
 
 .k-badge-subtle.k-badge-secondary {
   background-color: color-mix(
     in srgb,
-    var(--secondary-color) 15%,
-    var(--background-color)
+    var(--k-secondary-color) 15%,
+    transparent
   );
-  color: var(--secondary-color);
+  color: color-mix(in srgb, var(--k-secondary-color) 60%, var(--k-text-color));
 }
 
 .k-badge-subtle.k-badge-light {
-  background-color: color-mix(
-    in srgb,
-    var(--light-color) 30%,
-    var(--background-color)
-  );
-  color: var(--text-color);
+  background-color: color-mix(in srgb, var(--k-light-color) 30%, transparent);
+  color: var(--k-text-color);
 }
 
 .k-badge-subtle.k-badge-danger {
-  background-color: color-mix(
-    in srgb,
-    var(--danger-color) 15%,
-    var(--background-color)
-  );
-  color: var(--danger-color);
+  background-color: color-mix(in srgb, var(--k-danger-color) 15%, transparent);
+  color: color-mix(in srgb, var(--k-danger-color) 60%, var(--k-text-color));
 }
 
 .k-badge-subtle.k-badge-warning {
-  background-color: color-mix(
-    in srgb,
-    var(--warning-color) 20%,
-    var(--background-color)
-  );
-  color: var(--warning-color);
+  background-color: color-mix(in srgb, var(--k-warning-color) 20%, transparent);
+  color: var(--k-warning-color-text);
 }
 
 .k-badge-subtle.k-badge-success {
-  background-color: color-mix(
-    in srgb,
-    var(--success-color) 15%,
-    var(--background-color)
-  );
-  color: var(--success-color);
+  background-color: color-mix(in srgb, var(--k-success-color) 15%, transparent);
+  color: color-mix(in srgb, var(--k-success-color) 60%, var(--k-text-color));
+}
+
+/* The tint is translucent so it reads on any surface (striped rows, cards);
+   the inset outline keeps the edge visible where the tint alone is too faint. */
+.k-badge-subtle {
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
 }

package/dist/components/feedback/emptyState/styles.css

@@ -1,7 +1,6 @@
 .k-empty-state-inline {
   font-size: 0.875rem;
-  color: var(--text-color);
-  opacity: 0.65;
+  color: var(--k-text-color-secondary);
   font-style: italic;
   padding: 0.5rem 0;
 }
@@ -14,8 +13,7 @@
   gap: 0.75rem;
   padding: 2rem 1rem;
   text-align: center;
-  color: var(--text-color);
-  opacity: 0.75;
+  color: var(--k-text-color-secondary);
 }
 
 .k-empty-state-icon {

package/dist/components/feedback/loadingOverlay/styles.css

@@ -4,7 +4,7 @@
   width: 100%;
   height: 100%;
   z-index: 300;
-  background-color: var(--background-color);
+  background-color: var(--k-background-color);
 }
 
 .k-loading-container-fixed {

package/dist/components/feedback/progressBar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/progressBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,6DAA6D;IAC7D,QAAQ,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,gCAmB3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/progressBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,6DAA6D;IAC7D,QAAQ,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,gCAyB3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/feedback/progressBar/index.js

@@ -1,11 +1,16 @@
 "use client";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./styles.css";
 const ProgressBar = (props) => {
     const { showPercentage = true, variant = "primary" } = props;
     const clampedProgress = Math.max(0, Math.min(100, props.progress));
     const fillBorderRadius = clampedProgress === 100 ? "0.25rem" : "0.25rem 0 0 0.25rem";
-    return (_jsx("div", { className: `k-progress-bar-container`, children: _jsx("div", { className: `k-progress-bar-fill k-progress-bar-fill-${variant}`, style: { width: `${clampedProgress}%`, borderRadius: fillBorderRadius }, children: showPercentage && clampedProgress > 0 && (_jsxs("span", { className: "k-progress-bar-text", children: [clampedProgress, "%"] })) }) }));
+    // The percentage sits beside the bar, not on the fill: no single text color
+    // reaches 4.5:1 on every variant's fill in both themes.
+    return (_jsxs("div", { className: "k-progress-bar", children: [_jsx("div", { className: "k-progress-bar-container", children: _jsx("div", { className: `k-progress-bar-fill k-progress-bar-fill-${variant}`, style: {
+                        width: `${clampedProgress}%`,
+                        borderRadius: fillBorderRadius,
+                    } }) }), showPercentage && (_jsxs("span", { className: "k-progress-bar-text", children: [clampedProgress, "%"] }))] }));
 };
 export default ProgressBar;
 //# sourceMappingURL=index.js.map

package/dist/components/feedback/progressBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/feedback/progressBar/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAStB,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IAC9C,MAAM,EAAE,cAAc,GAAG,IAAI,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC7D,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEnE,MAAM,gBAAgB,GACpB,eAAe,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC;IAE9D,OAAO,CACL,cAAK,SAAS,EAAE,0BAA0B,YACxC,cACE,SAAS,EAAE,2CAA2C,OAAO,EAAE,EAC/D,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,eAAe,GAAG,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAEtE,cAAc,IAAI,eAAe,GAAG,CAAC,IAAI,CACxC,gBAAM,SAAS,EAAC,qBAAqB,aAAE,eAAe,SAAS,CAChE,GACG,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/feedback/progressBar/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAStB,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IAC9C,MAAM,EAAE,cAAc,GAAG,IAAI,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC7D,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEnE,MAAM,gBAAgB,GACpB,eAAe,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC;IAE9D,4EAA4E;IAC5E,wDAAwD;IACxD,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,aAC7B,cAAK,SAAS,EAAC,0BAA0B,YACvC,cACE,SAAS,EAAE,2CAA2C,OAAO,EAAE,EAC/D,KAAK,EAAE;wBACL,KAAK,EAAE,GAAG,eAAe,GAAG;wBAC5B,YAAY,EAAE,gBAAgB;qBAC/B,GACD,GACE,EACL,cAAc,IAAI,CACjB,gBAAM,SAAS,EAAC,qBAAqB,aAAE,eAAe,SAAS,CAChE,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/feedback/progressBar/styles.css

@@ -1,42 +1,51 @@
-.k-progress-bar-container {
+.k-progress-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
   width: 100%;
+}
+
+.k-progress-bar-container {
+  flex: 1;
+  min-width: 0;
   height: 1.5625rem;
-  background-color: var(--background-color-dark);
+  background-color: var(--k-background-color-dark);
   border-radius: 0.25rem;
   overflow: hidden;
-  box-shadow: inset 0 0.0625rem 0.1875rem var(--shadow-color);
+  box-shadow: inset 0 0.0625rem 0.1875rem var(--k-shadow-color);
 }
 
 .k-progress-bar-fill {
   height: 100%;
-  background-color: var(--success-color);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-color-light);
-  font-weight: 600;
+  background-color: var(--k-success-color);
   transition: width 0.5s ease-in-out;
 }
 
 .k-progress-bar-text {
-  font-size: var(--text-size-sm);
+  flex-shrink: 0;
+  min-width: 2.75rem;
+  text-align: right;
+  font-size: var(--k-text-size-sm);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--k-text-color);
 }
 
 .k-progress-bar-fill-primary {
-  background-color: var(--primary-color);
+  background-color: var(--k-primary-color);
 }
 .k-progress-bar-fill-secondary {
-  background-color: var(--secondary-color);
+  background-color: var(--k-secondary-color);
 }
 .k-progress-bar-fill-light {
-  background-color: var(--light-color);
+  background-color: var(--k-light-color);
 }
 .k-progress-bar-fill-warning {
-  background-color: var(--warning-color);
+  background-color: var(--k-warning-color);
 }
 .k-progress-bar-fill-danger {
-  background-color: var(--danger-color);
+  background-color: var(--k-danger-color);
 }
 .k-progress-bar-fill-success {
-  background-color: var(--success-color);
+  background-color: var(--k-success-color);
 }

package/dist/components/feedback/spinner/styles.css

@@ -1,10 +1,13 @@
+/* An empty box, so as a flex item it would shrink to fit a short or narrow
+   container (an oval while a page is still laying out). */
 .k-spinner {
   border-radius: 50%;
   display: inline-block;
-  animation: spin 0.8s linear infinite;
+  flex-shrink: 0;
+  animation: k-spin 0.8s linear infinite;
 }
 
-@keyframes spin {
+@keyframes k-spin {
   0% {
     transform: rotate(0deg);
   }
@@ -16,49 +19,36 @@
 .k-spinner-lg {
   height: 3.75rem;
   width: 3.75rem;
-  border: 0.375rem solid var(--shadow-color);
+  border: 0.375rem solid var(--k-shadow-color);
 }
 
 .k-spinner-md {
   height: 2.5rem;
   width: 2.5rem;
-  border: 0.25rem solid var(--shadow-color);
+  border: 0.25rem solid var(--k-shadow-color);
 }
 
 .k-spinner-sm {
   height: 1.25rem;
   width: 1.25rem;
-  border: 0.125rem solid var(--shadow-color);
+  border: 0.125rem solid var(--k-shadow-color);
 }
 
 .k-spinner-primary {
-  border-left-color: var(--primary-color);
+  border-left-color: var(--k-primary-color);
 }
 .k-spinner-secondary {
-  border-left-color: var(--secondary-color);
+  border-left-color: var(--k-secondary-color);
 }
 .k-spinner-light {
-  border-left-color: var(--light-color);
+  border-left-color: var(--k-light-color);
 }
 .k-spinner-success {
-  border-left-color: var(--success-color);
+  border-left-color: var(--k-success-color);
 }
 .k-spinner-danger {
-  border-left-color: var(--danger-color);
+  border-left-color: var(--k-danger-color);
 }
 .k-spinner-warning {
-  border-left-color: var(--warning-color);
-}
-
-/* Visually hidden class for accessibility text */
-.k-sr-only {
-  position: absolute;
-  width: 0.0625rem;
-  height: 0.0625rem;
-  padding: 0;
-  margin: -0.0625rem;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+  border-left-color: var(--k-warning-color);
 }

package/dist/components/feedback/tooltip/styles.css

@@ -33,11 +33,13 @@
 
 .k-tooltip-content {
   position: relative;
-  background-color: var(--text-color);
-  color: var(--text-color-light);
+  background-color: var(--k-text-color);
+  /* An inverted surface, so the text takes the page background, not a fixed
+     light color that disappears on the dark theme's light tooltip. */
+  color: var(--k-background-color);
   padding: 0.5rem 0.75rem;
   border-radius: 0.25rem;
-  font-size: var(--text-size-sm);
+  font-size: var(--k-text-size-sm);
   white-space: normal;
   max-width: 12.5rem;
   text-align: center;
@@ -59,26 +61,26 @@
   bottom: -0.625rem; /* Double the border-width to ensure visibility */
   left: 50%;
   transform: translateX(-50%);
-  border-color: var(--text-color) transparent transparent transparent;
+  border-color: var(--k-text-color) transparent transparent transparent;
 }
 
 .k-tooltip-bottom .k-tooltip-content::after {
   top: -0.625rem; /* Double the border-width to ensure visibility */
   left: 50%;
   transform: translateX(-50%);
-  border-color: transparent transparent var(--text-color) transparent;
+  border-color: transparent transparent var(--k-text-color) transparent;
 }
 
 .k-tooltip-left .k-tooltip-content::after {
   right: -0.625rem; /* Double the border-width to ensure visibility */
   top: 50%;
   transform: translateY(-50%);
-  border-color: transparent transparent transparent var(--text-color);
+  border-color: transparent transparent transparent var(--k-text-color);
 }
 
 .k-tooltip-right .k-tooltip-content::after {
   left: -0.625rem; /* Double the border-width to ensure visibility */
   top: 50%;
   transform: translateY(-50%);
-  border-color: transparent var(--text-color) transparent transparent;
+  border-color: transparent var(--k-text-color) transparent transparent;
 }

package/dist/components/forms/detailField/styles.css

@@ -10,7 +10,7 @@
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }
 
 .k-detail-field-value {

package/dist/components/forms/fieldShell/index.d.ts

@@ -7,6 +7,8 @@ interface FieldShellProps {
     required?: boolean;
     /** `htmlFor` target id, used when label is a string. */
     htmlFor?: string;
+    /** Id for the label element, for a control named with `aria-labelledby` (a `<label>` can't target a non-form element). */
+    labelId?: string;
     /** Optional right-aligned annotation in the label row (e.g. char count). */
     labelAside?: ReactNode;
     /** Optional error message rendered below the input. */
@@ -19,6 +21,6 @@ interface FieldShellProps {
     className?: string;
 }
 /** Shared shell for form fields — label + asterisk + optional char count + error/helper. */
-declare const FieldShell: ({ label, required, htmlFor, labelAside, error, helperText, children, className, }: FieldShellProps) => import("react").JSX.Element;
+declare const FieldShell: ({ label, required, htmlFor, labelId, labelAside, error, helperText, children, className, }: FieldShellProps) => import("react").JSX.Element;
 export default FieldShell;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/forms/fieldShell/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/fieldShell/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,UAAU,eAAe;IACvB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kFAAkF;IAClF,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,qGAAqG;IACrG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,4FAA4F;AAC5F,QAAA,MAAM,UAAU,GAAI,mFASjB,eAAe,gCA4BjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/fieldShell/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,UAAU,eAAe;IACvB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0HAA0H;IAC1H,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kFAAkF;IAClF,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,qGAAqG;IACrG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,4FAA4F;AAC5F,QAAA,MAAM,UAAU,GAAI,4FAUjB,eAAe,gCA4BjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/forms/fieldShell/index.js

@@ -3,6 +3,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import MandatoryAsterisk from "../requiredAsterisk/index.js";
 import "./styles.css";
 /** Shared shell for form fields — label + asterisk + optional char count + error/helper. */
-const FieldShell = ({ label, required, htmlFor, labelAside, error, helperText, children, className = "", }) => (_jsxs("div", { className: `k-field-shell ${className}`.trim(), children: [(label || labelAside) && (_jsxs("div", { className: "k-field-shell-label-row", children: [label && (_jsx("label", { htmlFor: htmlFor, className: "k-field-shell-label", children: typeof label === "string" ? (_jsxs(_Fragment, { children: [label, required && _jsx(MandatoryAsterisk, {})] })) : (label) })), labelAside && (_jsx("span", { className: "k-field-shell-aside", children: labelAside }))] })), children, error ? (_jsx("div", { className: "k-field-shell-error", children: error })) : helperText ? (_jsx("div", { className: "k-field-shell-helper", children: helperText })) : null] }));
+const FieldShell = ({ label, required, htmlFor, labelId, labelAside, error, helperText, children, className = "", }) => (_jsxs("div", { className: `k-field-shell ${className}`.trim(), children: [(label || labelAside) && (_jsxs("div", { className: "k-field-shell-label-row", children: [label && (_jsx("label", { id: labelId, htmlFor: htmlFor, className: "k-field-shell-label", children: typeof label === "string" ? (_jsxs(_Fragment, { children: [label, required && _jsx(MandatoryAsterisk, {})] })) : (label) })), labelAside && (_jsx("span", { className: "k-field-shell-aside", children: labelAside }))] })), children, error ? (_jsx("div", { className: "k-field-shell-error", children: error })) : helperText ? (_jsx("div", { className: "k-field-shell-helper", children: helperText })) : null] }));
 export default FieldShell;
 //# sourceMappingURL=index.js.map

package/dist/components/forms/fieldShell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/forms/fieldShell/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,iBAAiB,MAAM,8BAA8B,CAAC;AAE7D,OAAO,cAAc,CAAC;AAqBtB,4FAA4F;AAC5F,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,GAAG,EAAE,GACE,EAAE,EAAE,CAAC,CACrB,eAAK,SAAS,EAAE,iBAAiB,SAAS,EAAE,CAAC,IAAI,EAAE,aAChD,CAAC,KAAK,IAAI,UAAU,CAAC,IAAI,CACxB,eAAK,SAAS,EAAC,yBAAyB,aACrC,KAAK,IAAI,CACR,gBAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,qBAAqB,YACrD,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,8BACG,KAAK,EACL,QAAQ,IAAI,KAAC,iBAAiB,KAAG,IACjC,CACJ,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACK,CACT,EACA,UAAU,IAAI,CACb,eAAM,SAAS,EAAC,qBAAqB,YAAE,UAAU,GAAQ,CAC1D,IACG,CACP,EACA,QAAQ,EACR,KAAK,CAAC,CAAC,CAAC,CACP,cAAK,SAAS,EAAC,qBAAqB,YAAE,KAAK,GAAO,CACnD,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACf,cAAK,SAAS,EAAC,sBAAsB,YAAE,UAAU,GAAO,CACzD,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/forms/fieldShell/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,iBAAiB,MAAM,8BAA8B,CAAC;AAE7D,OAAO,cAAc,CAAC;AAuBtB,4FAA4F;AAC5F,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,UAAU,EACV,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,GAAG,EAAE,GACE,EAAE,EAAE,CAAC,CACrB,eAAK,SAAS,EAAE,iBAAiB,SAAS,EAAE,CAAC,IAAI,EAAE,aAChD,CAAC,KAAK,IAAI,UAAU,CAAC,IAAI,CACxB,eAAK,SAAS,EAAC,yBAAyB,aACrC,KAAK,IAAI,CACR,gBAAO,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,qBAAqB,YAClE,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,8BACG,KAAK,EACL,QAAQ,IAAI,KAAC,iBAAiB,KAAG,IACjC,CACJ,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACK,CACT,EACA,UAAU,IAAI,CACb,eAAM,SAAS,EAAC,qBAAqB,YAAE,UAAU,GAAQ,CAC1D,IACG,CACP,EACA,QAAQ,EACR,KAAK,CAAC,CAAC,CAAC,CACP,cAAK,SAAS,EAAC,qBAAqB,YAAE,KAAK,GAAO,CACnD,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACf,cAAK,SAAS,EAAC,sBAAsB,YAAE,UAAU,GAAO,CACzD,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/forms/fieldShell/styles.css

@@ -15,24 +15,24 @@
   display: block;
   font-size: 0.875rem;
   font-weight: 500;
-  color: var(--text-color);
+  color: var(--k-text-color);
 }
 
 .k-field-shell-aside {
   font-weight: 500;
-  font-size: var(--text-size-sm);
-  color: var(--text-color-secondary);
+  font-size: var(--k-text-size-sm);
+  color: var(--k-text-color-secondary);
   margin-left: 0.5rem;
 }
 
 .k-field-shell-error {
   margin-top: 0.25rem;
   font-size: 0.8125rem;
-  color: var(--danger-color);
+  color: var(--k-danger-color-text);
 }
 
 .k-field-shell-helper {
   margin-top: 0.25rem;
   font-size: 0.8125rem;
-  color: var(--text-color-secondary);
+  color: var(--k-text-color-secondary);
 }