@canonical/react-ds-core 0.10.0-experimental.0 → 0.10.0-experimental.4

package/dist/esm/index.js

@@ -1,2 +1,3 @@
+export * from "./lib/index.js";
 export * from "./ui/index.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}

package/dist/esm/lib/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/dist/esm/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":""}

package/dist/esm/lib/types/index.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.js.map

package/dist/esm/lib/types/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/lib/types/index.ts"],"names":[],"mappings":""}

package/dist/esm/lib/types/polymorphic.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=polymorphic.js.map

package/dist/esm/lib/types/polymorphic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polymorphic.js","sourceRoot":"","sources":["../../../../src/lib/types/polymorphic.ts"],"names":[],"mappings":""}

package/dist/esm/storybook/decorators.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const rtl = () => (Story) => (_jsx("div", { dir: "rtl", children: _jsx(Story, {}) }));
+//# sourceMappingURL=decorators.js.map

package/dist/esm/storybook/decorators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.js","sourceRoot":"","sources":["../../../src/storybook/decorators.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,MAAM,GAAG,GAAG,GAAG,EAAE,CAAC,CAAC,KAAkB,EAAE,EAAE,CAAC,CAC/C,cAAK,GAAG,EAAC,KAAK,YACZ,KAAC,KAAK,KAAG,GACL,CACP,CAAC"}

package/dist/esm/ui/Badge/Badge.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+import useBadge from "./hooks/useBadge.js";
+const componentCssClassName = "ds badge";
+/**
+ * description of the Badge component
+ * @returns {React.ReactElement} - Rendered Badge
+ * @implements syntax:core:component:badge:1.0.0
+ */
+const Badge = ({ value, className, severity, humanizeOptions, pluralizeOptions, ...props }) => {
+    const { displayValue, title } = useBadge({
+        value,
+        humanizeOptions,
+        pluralizeOptions,
+    });
+    return (_jsx("span", { title: title, className: [componentCssClassName, severity, className]
+            .filter(Boolean)
+            .join(" "), ...props, children: displayValue }));
+};
+export default Badge;
+//# sourceMappingURL=Badge.js.map

package/dist/esm/ui/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../src/ui/Badge/Badge.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AACtB,OAAO,QAAQ,MAAM,qBAAqB,CAAC;AAE3C,MAAM,qBAAqB,GAAG,UAAU,CAAC;AAEzC;;;;GAIG;AACH,MAAM,KAAK,GAAG,CAAC,EACb,KAAK,EACL,SAAS,EACT,QAAQ,EACR,eAAe,EACf,gBAAgB,EAChB,GAAG,KAAK,EACG,EAAsB,EAAE;IACnC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,QAAQ,CAAC;QACvC,KAAK;QACL,eAAe;QACf,gBAAgB;KACjB,CAAC,CAAC;IAEH,OAAO,CACL,eACE,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,QAAQ,EAAE,SAAS,CAAC;aACpD,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,KACR,KAAK,YAER,YAAY,GACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/esm/ui/Badge/hooks/useBadge.js

@@ -0,0 +1,23 @@
+import { humanizeNumber, pluralize, } from "@canonical/utils";
+import { useMemo } from "react";
+const DEFAULT_HUMANIZE_OPTIONS = {
+    overflowIndicator: "+",
+};
+/**
+ * A hook to manage a Badge's internal state
+ */
+const useBadge = ({ value, humanizeOptions, pluralizeOptions, }) => {
+    // Badge values must be at least 0 to preserve their purpose as natural number indicators
+    const valueToUse = useMemo(() => Math.max(0, value), [value]);
+    const displayValue = useMemo(() => {
+        const options = { ...DEFAULT_HUMANIZE_OPTIONS, ...humanizeOptions };
+        return humanizeNumber(valueToUse, options).displayValue;
+    }, [valueToUse, humanizeOptions]);
+    const title = useMemo(() => `${displayValue} ${pluralize(valueToUse, pluralizeOptions)}`, [valueToUse, displayValue, pluralizeOptions]);
+    return useMemo(() => ({
+        displayValue,
+        title,
+    }), [displayValue, title]);
+};
+export default useBadge;
+//# sourceMappingURL=useBadge.js.map

package/dist/esm/ui/Badge/hooks/useBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBadge.js","sourceRoot":"","sources":["../../../../../src/ui/Badge/hooks/useBadge.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACd,SAAS,GACV,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,MAAM,wBAAwB,GAA0B;IACtD,iBAAiB,EAAE,GAAG;CACvB,CAAC;AAEF;;GAEG;AACH,MAAM,QAAQ,GAAG,CAAC,EAChB,KAAK,EACL,eAAe,EACf,gBAAgB,GACF,EAAkB,EAAE;IAClC,yFAAyF;IACzF,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAW,OAAO,CAAC,GAAG,EAAE;QACxC,MAAM,OAAO,GAAG,EAAE,GAAG,wBAAwB,EAAE,GAAG,eAAe,EAAE,CAAC;QAEpE,OAAO,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,YAAY,CAAC;IAC1D,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,CAAC,CAAC,CAAC;IAElC,MAAM,KAAK,GAAW,OAAO,CAC3B,GAAG,EAAE,CAAC,GAAG,YAAY,IAAI,SAAS,CAAC,UAAU,EAAE,gBAAgB,CAAC,EAAE,EAClE,CAAC,UAAU,EAAE,YAAY,EAAE,gBAAgB,CAAC,CAC7C,CAAC;IAEF,OAAO,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;QACL,YAAY;QACZ,KAAK;KACN,CAAC,EACF,CAAC,YAAY,EAAE,KAAK,CAAC,CACtB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/esm/ui/Badge/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+export { default as Badge } from "./Badge.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Badge/index.ts"],"names":[],"mappings":"AAAA,mDAAmD;AAEnD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,cAAc,YAAY,CAAC"}

package/dist/esm/ui/Badge/styles.css

@@ -0,0 +1,21 @@
+/* Badge.css */
+.ds.badge {
+  /** Pull the badge closer to the edge of a chip */
+  --badge-chip-margin-tweak: 0.15rem;
+
+  /* Base badge styles using tokens */
+  background-color: var(--intent-color, var(--badge-color-background));
+  border-radius: var(--badge-border-radius);
+  box-sizing: content-box;
+  color: var(--intent-color-text, var(--badge-color-text));
+  display: inline-block;
+  font-size: var(--badge-font-size);
+  font-weight: var(--badge-font-weight);
+  line-height: var(--badge-line-height);
+  margin-bottom: var(--badge-margin-bottom);
+  max-width: var(--badge-max-width);
+  min-width: var(--badge-min-width);
+  overflow: hidden;
+  padding: var(--badge-padding-vertical) var(--badge-padding-horizontal);
+  text-align: center;
+}

package/dist/esm/ui/Badge/types.js

@@ -0,0 +1,3 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/Badge/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Badge/types.ts"],"names":[],"mappings":"AAAA,mDAAmD"}

package/dist/esm/ui/Chip/styles.css

@@ -76,4 +76,11 @@
       var(--chip-color-background-active)
     );
   }
+
+  /* Context-specific styling for badges within chips */
+  & .ds.badge {
+    align-self: center;
+    margin-left: var(--spacing-horizontal-small);
+    margin-right: var(--badge-chip-margin-tweak);
+  }
 }

package/dist/esm/ui/Icon/Icon.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const componentCssClassName = "ds icon";
+/**
+ * Icon component that renders SVG icons from @canonical/ds-assets
+ * @param iconName - Name of the icon to render
+ * @param rootPath - Root path to the icons (default: /icons)
+ * @returns {React.ReactElement} - Rendered Icon SVG
+ * @implements syntax:core:component:icon:1.0.0
+ */
+const Icon = ({ xmlns = "http://www.w3.org/2000/svg", viewBox = "0 0 16 16", icon, className, rootPath = "/icons", role = "img", ...props }) => {
+    return (_jsx("svg", { xmlns: xmlns, viewBox: viewBox, className: [componentCssClassName, className].filter(Boolean).join(" "), role: role, ...props, children: _jsx("use", { href: `${rootPath}/${icon}.svg#${icon}` }) }));
+};
+export default Icon;
+//# sourceMappingURL=Icon.js.map

package/dist/esm/ui/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/ui/Icon/Icon.tsx"],"names":[],"mappings":";AAKA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,SAAS,CAAC;AAExC;;;;;;GAMG;AACH,MAAM,IAAI,GAAG,CAAC,EACZ,KAAK,GAAG,4BAA4B,EACpC,OAAO,GAAG,WAAW,EACrB,IAAI,EACJ,SAAS,EACT,QAAQ,GAAG,QAAQ,EACnB,IAAI,GAAG,KAAK,EACZ,GAAG,KAAK,EACE,EAAgB,EAAE;IAC5B,OAAO,CACL,cACE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,IAAI,EAAE,IAAI,KACN,KAAK,YAET,cAAK,IAAI,EAAE,GAAG,QAAQ,IAAI,IAAI,QAAQ,IAAI,EAAE,GAAI,GAC5C,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/esm/ui/Icon/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+export { default as Icon } from "./Icon.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Icon/index.ts"],"names":[],"mappings":"AAAA,mDAAmD;AAEnD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,cAAc,YAAY,CAAC"}

package/dist/esm/ui/Icon/styles.css

@@ -0,0 +1,12 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+
+.ds.icon {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+
+  height: var(--icon-size);
+  width: var(--icon-size);
+}

package/dist/esm/ui/Icon/types.js

@@ -0,0 +1,3 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/Icon/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Icon/types.ts"],"names":[],"mappings":"AAAA,mDAAmD"}

package/dist/esm/ui/Link/Link.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const componentCssClassName = "ds link";
+/**
+ * Link component that can be rendered as different elements while maintaining consistent styling
+ * @implements syntax:core:component:link:1.0.0
+ */
+const Link = ({ as, className, children, appearance, ...props }) => {
+    const Component = as || "a";
+    return (_jsx(Component, { className: [componentCssClassName, className, appearance]
+            .filter(Boolean)
+            .join(" "), ...props, children: children }));
+};
+export default Link;
+//# sourceMappingURL=Link.js.map

package/dist/esm/ui/Link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../../../src/ui/Link/Link.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,SAAS,CAAC;AAExC;;;GAGG;AACH,MAAM,IAAI,GAAG,CAAqC,EAChD,EAAE,EACF,SAAS,EACT,QAAQ,EACR,UAAU,EACV,GAAG,KAAK,EACY,EAAgB,EAAE;IACtC,MAAM,SAAS,GAAG,EAAE,IAAI,GAAG,CAAC;IAE5B,OAAO,CACL,KAAC,SAAS,IACR,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,UAAU,CAAC;aACtD,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,KACR,KAAK,YAER,QAAQ,GACC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/esm/ui/Link/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+export { default as Link } from "./Link.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Link/index.ts"],"names":[],"mappings":"AAAA,mDAAmD;AAEnD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,cAAc,YAAY,CAAC"}

package/dist/esm/ui/Link/styles.css

@@ -0,0 +1,25 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+
+.ds.link {
+  &.soft {
+    /*
+            Soft links are explicitly meant to use normal text color
+            TODO because <a> tag have their color set in the styles package, we need to set a specific color here.
+                Otherwise, we could use `currentColor` or only apply link color to non-soft links, which would allow the link to inherit color from parent.
+                We should confirm this approach is what we want.
+        */
+    color: var(--tmp-color-text-default);
+
+    &:hover {
+      color: var(--tmp-color-text-link-default);
+    }
+
+    &:visited {
+      color: var(--tmp-color-text-default);
+    }
+
+    &[aria-current="page"] {
+      font-weight: var(--link-soft-selected-font-weight);
+    }
+  }
+}

package/dist/esm/ui/Link/types.js

@@ -0,0 +1,3 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/Link/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Link/types.ts"],"names":[],"mappings":"AAAA,mDAAmD"}

package/dist/esm/ui/Rule/Rule.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const componentCssClassName = "ds rule";
+/**
+ * A component that separates content into logical groups.
+ * @TODO implement fixed-width behavior after implementation of the Grid
+ * @returns {React.ReactElement} - Rendered Rule
+ * @implements syntax:core:component:rule:1.0.0
+ */
+const Rule = ({ className, emphasis, ...props }) => {
+    return (_jsx("hr", { className: [componentCssClassName, emphasis, className]
+            .filter(Boolean)
+            .join(" "), ...props }));
+};
+export default Rule;
+//# sourceMappingURL=Rule.js.map

package/dist/esm/ui/Rule/Rule.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rule.js","sourceRoot":"","sources":["../../../../src/ui/Rule/Rule.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,SAAS,CAAC;AAExC;;;;;GAKG;AACH,MAAM,IAAI,GAAG,CAAC,EACZ,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACE,EAAsB,EAAE;IAClC,OAAO,CACL,aACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,QAAQ,EAAE,SAAS,CAAC;aACpD,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,KACR,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/esm/ui/Rule/index.js

@@ -0,0 +1,4 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+export { default as Rule } from "./Rule.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Rule/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/Rule/index.ts"],"names":[],"mappings":"AAAA,mDAAmD;AAEnD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,cAAc,YAAY,CAAC"}

package/dist/esm/ui/Rule/styles.css

@@ -0,0 +1,16 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+
+.ds.rule {
+  background-color: var(
+    --intent-separator-bar-color,
+    var(--rule-color-background)
+  );
+  border-width: var(--rule-border-width);
+  height: var(--intent-separator-bar-height, var(--rule-height));
+  margin-block-start: var(--rule-margin-top);
+  /* global modifiers can change the height of the rule. Subtract the actual height of the rule from the target height to keep baseline alignment    */
+  margin-block-end: calc(
+    var(--rule-height-with-margin) -
+    var(--intent-separator-bar-height, var(--rule-height))
+  );
+}

package/dist/esm/ui/Rule/types.js

@@ -0,0 +1,3 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+export {};
+//# sourceMappingURL=types.js.map

package/dist/esm/ui/Rule/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/Rule/types.ts"],"names":[],"mappings":"AAAA,mDAAmD"}

package/dist/esm/ui/Tooltip/common/TooltipArea/TooltipArea.js

@@ -19,7 +19,7 @@ const TooltipArea = ({ children, style, className, Message, distance = "6px", ta
             .join(" "), onPointerEnter: handleTriggerEnter, onFocus: handleTriggerFocus, ref: popupRef, style: {
             ...messageElementStyle,
             ...popupPositionStyle,
-            // @ts-ignore allow binding arrow size to distance, as it is needed both in JS and CSS calculations
+            // @ts-expect-error allow binding arrow size to distance, as it is needed both in JS and CSS calculations
             "--tooltip-spacing-arrow-size": distance,
             ...(autoFit &&
                 bestPosition?.autoFitOffset && {

package/dist/esm/ui/Tooltip/common/TooltipArea/TooltipArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipArea.js","sourceRoot":"","sources":["../../../../../../src/ui/Tooltip/common/TooltipArea/TooltipArea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAGzC,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEhD;;;GAGG;AACH,MAAM,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,eAAe,EACf,sBAAsB,EACtB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,aAAa,EACb,OAAO,EACP,GAAG,KAAK,EACS,EAAgB,EAAE;IACnC,MAAM,EACJ,SAAS,EACT,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,YAAY,GACb,GAAG,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;IAE9C,MAAM,qBAAqB,GAAG,CAC5B,KAAC,OAAO,IACN,EAAE,EAAE,OAAO,EACX,SAAS,EAAE;YACT,YAAY,EAAE,YAAY;YAC1B,uBAAuB;YACvB,OAAO,IAAI,SAAS;SACrB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,EACZ,cAAc,EAAE,kBAAkB,EAClC,OAAO,EAAE,kBAAkB,EAC3B,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE;YACL,GAAG,mBAAmB;YACtB,GAAG,kBAAkB;YACrB,mGAAmG;YACnG,8BAA8B,EAAE,QAAQ;YACxC,GAAG,CAAC,OAAO;gBACT,YAAY,EAAE,aAAa,IAAI;gBAC7B,4BAA4B,EAAE,GAAG,YAAY,EAAE,aAAa,CAAC,GAAG,IAAI,CAAC,IAAI;gBACzE,6BAA6B,EAAE,GAAG,YAAY,EAAE,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI;aAC5E,CAAC;SACL,EACD,MAAM,EAAE,MAAM,YAEb,OAAO,GACA,CACX,CAAC;IAEF,OAAO;IACL,0GAA0G;IAC1G,gBACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,kBAAkB,EAC3B,MAAM,EAAE,iBAAiB,EACzB,cAAc,EAAE,kBAAkB,EAClC,cAAc,EAAE,kBAAkB,aAElC,eACE,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,kBAAkB,EACzB,SAAS,EAAE,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,GAAG,EAAE,SAAS,sBACI,OAAO,YAExB,QAAQ,GACJ,EAIN,OAAO,MAAM,KAAK,WAAW;gBAC5B,CAAC,CAAC,sEAAsE;oBACtE,8FAA8F;oBAC9F,oCAAoC;oBACpC,YAAY,CAAC,qBAAqB,EAAE,aAAa,IAAI,QAAQ,CAAC,IAAI,CAAC;gBACrE,CAAC,CAAC,qBAAqB,IACpB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"TooltipArea.js","sourceRoot":"","sources":["../../../../../../src/ui/Tooltip/common/TooltipArea/TooltipArea.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAGzC,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAEzC,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEhD;;;GAGG;AACH,MAAM,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,eAAe,EACf,sBAAsB,EACtB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,aAAa,EACb,OAAO,EACP,GAAG,KAAK,EACS,EAAgB,EAAE;IACnC,MAAM,EACJ,SAAS,EACT,QAAQ,EACR,kBAAkB,EAClB,OAAO,EACP,MAAM,EACN,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,YAAY,GACb,GAAG,QAAQ,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;IAE9C,MAAM,qBAAqB,GAAG,CAC5B,KAAC,OAAO,IACN,EAAE,EAAE,OAAO,EACX,SAAS,EAAE;YACT,YAAY,EAAE,YAAY;YAC1B,uBAAuB;YACvB,OAAO,IAAI,SAAS;SACrB;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,EACZ,cAAc,EAAE,kBAAkB,EAClC,OAAO,EAAE,kBAAkB,EAC3B,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE;YACL,GAAG,mBAAmB;YACtB,GAAG,kBAAkB;YACrB,yGAAyG;YACzG,8BAA8B,EAAE,QAAQ;YACxC,GAAG,CAAC,OAAO;gBACT,YAAY,EAAE,aAAa,IAAI;gBAC7B,4BAA4B,EAAE,GAAG,YAAY,EAAE,aAAa,CAAC,GAAG,IAAI,CAAC,IAAI;gBACzE,6BAA6B,EAAE,GAAG,YAAY,EAAE,aAAa,CAAC,IAAI,IAAI,CAAC,IAAI;aAC5E,CAAC;SACL,EACD,MAAM,EAAE,MAAM,YAEb,OAAO,GACA,CACX,CAAC;IAEF,OAAO;IACL,0GAA0G;IAC1G,gBACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,kBAAkB,EAC3B,MAAM,EAAE,iBAAiB,EACzB,cAAc,EAAE,kBAAkB,EAClC,cAAc,EAAE,kBAAkB,aAElC,eACE,EAAE,EAAE,eAAe,EACnB,KAAK,EAAE,kBAAkB,EACzB,SAAS,EAAE,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,GAAG,EAAE,SAAS,sBACI,OAAO,YAExB,QAAQ,GACJ,EAIN,OAAO,MAAM,KAAK,WAAW;gBAC5B,CAAC,CAAC,sEAAsE;oBACtE,8FAA8F;oBAC9F,oCAAoC;oBACpC,YAAY,CAAC,qBAAqB,EAAE,aAAa,IAAI,QAAQ,CAAC,IAAI,CAAC;gBACrE,CAAC,CAAC,qBAAqB,IACpB,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/esm/ui/Tooltip/common/TooltipArea/styles.css

@@ -6,7 +6,7 @@
     display: inline-block;
 
     & > * {
-      /* The tooltip targets must have no margin in order for tooltip placements to work correctly */
+      /* biome-ignore lint/complexity/noImportantStyles: The tooltip targets must have no margin in order for tooltip placements to work correctly */
       margin: 0 !important;
     }
   }

package/dist/esm/ui/index.js

@@ -1,4 +1,8 @@
+export * from "./Badge/index.js";
 export * from "./Button/index.js";
 export * from "./Chip/index.js";
+export * from "./Icon/index.js";
+export * from "./Link/index.js";
+export * from "./Rule/index.js";
 export * from "./Tooltip/index.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
+export * from "./lib/index.js";
 export * from "./ui/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}

package/dist/types/lib/index.d.ts

@@ -0,0 +1,2 @@
+export type * from "./types/index.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,kBAAkB,CAAC"}

package/dist/types/lib/types/index.d.ts

@@ -0,0 +1,2 @@
+export type * from "./polymorphic.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/types/index.ts"],"names":[],"mappings":"AAAA,mBAAmB,kBAAkB,CAAC"}

package/dist/types/lib/types/polymorphic.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentProps, ElementType } from "react";
+/**
+ * Utility type for creating polymorphic components in React.
+ * This type combines the props of the specified element type with the component's own props,
+ * allowing the component to be rendered as different HTML elements or custom components.
+ * @template TOwnProps - The props specific to the underlying component.
+ * @template TElement - The element type to render as.
+ * @example
+ * ```ts
+ * import type { PolymorphicComponentProps } from '@canonical/ds-types';
+ *
+ * interface LinkOwnProps {
+ *  children?: ReactNode;
+ *  appearance?: "soft";
+ * }
+ * // A link that is, by default, an "a" element, but can be changed via the `as` prop
+ * export type LinkProps<TElement extends ElementType = "a"> =
+ *   PolymorphicComponentProps<LinkOwnProps, TElement>;
+ * ```
+ */
+export type PolymorphicComponentProps<TOwnProps extends Object, TElement extends ElementType> = TOwnProps & {
+    as?: TElement;
+} & Omit<ComponentProps<TElement>, keyof TOwnProps>;
+//# sourceMappingURL=polymorphic.d.ts.map

package/dist/types/lib/types/polymorphic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"polymorphic.d.ts","sourceRoot":"","sources":["../../../../src/lib/types/polymorphic.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,MAAM,yBAAyB,CACnC,SAAS,SAAS,MAAM,EACxB,QAAQ,SAAS,WAAW,IAC1B,SAAS,GAAG;IAAE,EAAE,CAAC,EAAE,QAAQ,CAAA;CAAE,GAAG,IAAI,CACpC,cAAc,CAAC,QAAQ,CAAC,EACxB,MAAM,SAAS,CAChB,CAAC"}

package/dist/types/storybook/decorators.d.ts

@@ -0,0 +1,3 @@
+import type { ElementType } from "react";
+export declare const rtl: () => (Story: ElementType) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=decorators.d.ts.map

package/dist/types/storybook/decorators.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"decorators.d.ts","sourceRoot":"","sources":["../../../src/storybook/decorators.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzC,eAAO,MAAM,GAAG,SAAU,OAAO,WAAW,4CAI3C,CAAC"}

package/dist/types/ui/Badge/Badge.d.ts

@@ -0,0 +1,11 @@
+import type React from "react";
+import type { BadgeProps } from "./types.js";
+import "./styles.css";
+/**
+ * description of the Badge component
+ * @returns {React.ReactElement} - Rendered Badge
+ * @implements syntax:core:component:badge:1.0.0
+ */
+declare const Badge: ({ value, className, severity, humanizeOptions, pluralizeOptions, ...props }: BadgeProps) => React.ReactElement;
+export default Badge;
+//# sourceMappingURL=Badge.d.ts.map

package/dist/types/ui/Badge/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/ui/Badge/Badge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,cAAc,CAAC;AAKtB;;;;GAIG;AACH,QAAA,MAAM,KAAK,GAAI,6EAOZ,UAAU,KAAG,KAAK,CAAC,YAkBrB,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/types/ui/Badge/hooks/useBadge.d.ts

@@ -0,0 +1,7 @@
+import type { UseBadgeProps, UseBadgeResult } from "../types.js";
+/**
+ * A hook to manage a Badge's internal state
+ */
+declare const useBadge: ({ value, humanizeOptions, pluralizeOptions, }: UseBadgeProps) => UseBadgeResult;
+export default useBadge;
+//# sourceMappingURL=useBadge.d.ts.map

package/dist/types/ui/Badge/hooks/useBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBadge.d.ts","sourceRoot":"","sources":["../../../../../src/ui/Badge/hooks/useBadge.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAMjE;;GAEG;AACH,QAAA,MAAM,QAAQ,GAAI,+CAIf,aAAa,KAAG,cAsBlB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/types/ui/Badge/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Badge } from "./Badge.js";
+export * from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/Badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Badge/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC;AAC9C,cAAc,YAAY,CAAC"}

package/dist/types/ui/Badge/types.d.ts

@@ -0,0 +1,42 @@
+import type { ModifierFamily } from "@canonical/ds-types";
+import type { HumanizeNumberOptions, PluralizeOptions } from "@canonical/utils";
+import type { HTMLAttributes } from "react";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Numeric value to be displayed.
+     */
+    value: number;
+    /**
+     * Visual appearance of the badge, typically reflecting status.
+     * Options include:
+     * - "positive": Indicates a positive status
+     * - "negative": Indicates a negative status
+     * - "caution": Indicates a cautionary status
+     * - "information": Indicates an informative status
+     * // TODO neutral intent is currently defined in a very button-centric way. It should unset other appearances, but it currently applies default button styling.
+     *      Possibly we will need to revisit this by binding component variables without component name prefix, so that neutral can reset components to their neutral state.
+     *
+     * When no appearance is specified, uses the default badge styling.
+     */
+    severity?: ModifierFamily<"severity">;
+    /**
+     * Options for humanizing the numeric value displayed in the badge.
+     */
+    humanizeOptions?: HumanizeNumberOptions;
+    /**
+     * Options for the pluralization of the item being counted.
+     */
+    pluralizeOptions?: PluralizeOptions;
+}
+export type UseBadgeProps = Pick<BadgeProps, "value" | "humanizeOptions" | "pluralizeOptions">;
+/**
+ * Result of the useBadge hook.
+ * Contains the formatted display value and ARIA label for accessibility.
+ */
+export interface UseBadgeResult {
+    /** Formatted value to be displayed in the badge */
+    displayValue: string | number;
+    /** Title attribute, for displaying additional context about the badge on hover */
+    title: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/Badge/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Badge/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,KAAK,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAChF,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,eAAe,CAAC;IACjE;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAEtC;;OAEG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC;IAExC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,UAAU,EACV,OAAO,GAAG,iBAAiB,GAAG,kBAAkB,CACjD,CAAC;AAEF;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,mDAAmD;IACnD,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAC;CACf"}

package/dist/types/ui/Button/types.d.ts

@@ -1,3 +1,4 @@
+import type { ModifierFamily } from "@canonical/ds-types";
 import type { ButtonHTMLAttributes, ReactNode } from "react";
 export interface BaseProps {
     id?: string;
@@ -10,8 +11,11 @@ export interface BaseProps {
      * `aria-label` prop to ensure that the button label is applied properly. Otherwise, the label will be set to [object Object].
      * */
     children: ReactNode;
-    /** The visual style of the button */
-    appearance?: "neutral" | "base" | "positive" | "negative" | "link";
+    /**
+     * The visual style of the button
+     * TODO link button will be a separate component in the future
+     * */
+    appearance?: ModifierFamily<"severity"> | "base" | "link";
 }
 type Props = BaseProps & ButtonHTMLAttributes<HTMLButtonElement>;
 export default Props;

package/dist/types/ui/Button/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,WAAW,SAAS;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;SAKK;IACL,QAAQ,EAAE,SAAS,CAAC;IACpB,qCAAqC;IACrC,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;CACpE;AAED,KAAK,KAAK,GAAG,SAAS,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEjE,eAAe,KAAK,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,WAAW,SAAS;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;SAKK;IACL,QAAQ,EAAE,SAAS,CAAC;IACpB;;;SAGK;IACL,UAAU,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC;CAC3D;AAED,KAAK,KAAK,GAAG,SAAS,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEjE,eAAe,KAAK,CAAC"}

package/dist/types/ui/Icon/Icon.d.ts

@@ -0,0 +1,13 @@
+import type { ReactElement } from "react";
+import type { IconProps } from "./types.js";
+import "./styles.css";
+/**
+ * Icon component that renders SVG icons from @canonical/ds-assets
+ * @param iconName - Name of the icon to render
+ * @param rootPath - Root path to the icons (default: /icons)
+ * @returns {React.ReactElement} - Rendered Icon SVG
+ * @implements syntax:core:component:icon:1.0.0
+ */
+declare const Icon: ({ xmlns, viewBox, icon, className, rootPath, role, ...props }: IconProps) => ReactElement;
+export default Icon;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/types/ui/Icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../src/ui/Icon/Icon.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,cAAc,CAAC;AAItB;;;;;;GAMG;AACH,QAAA,MAAM,IAAI,GAAI,+DAQX,SAAS,KAAG,YAYd,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/ui/Icon/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Icon } from "./Icon.js";
+export * from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/Icon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Icon/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,cAAc,YAAY,CAAC"}

package/dist/types/ui/Icon/types.d.ts

@@ -0,0 +1,13 @@
+import type { IconName } from "@canonical/ds-assets";
+import type { SVGAttributes } from "react";
+/**
+    We have used the `HTMLDivElement` as a default props base.
+    If your component is based on a different HTML element, please update it accordingly.
+    See https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API for a full list of HTML elements interfaces.
+*/
+export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
+    icon: IconName;
+    /** Root path to the icons (default: /icons). Must be exposed to the user. */
+    rootPath?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/Icon/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Icon/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C;;;;EAIE;AACF,MAAM,WAAW,SAAU,SAAQ,aAAa,CAAC,gBAAgB,CAAC;IAEhE,IAAI,EAAE,QAAQ,CAAC;IACf,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB"}

package/dist/types/ui/Link/Link.d.ts

@@ -0,0 +1,10 @@
+import type { ElementType, ReactElement } from "react";
+import type { LinkProps } from "./types.js";
+import "./styles.css";
+/**
+ * Link component that can be rendered as different elements while maintaining consistent styling
+ * @implements syntax:core:component:link:1.0.0
+ */
+declare const Link: <TElement extends ElementType = "a">({ as, className, children, appearance, ...props }: LinkProps<TElement>) => ReactElement;
+export default Link;
+//# sourceMappingURL=Link.d.ts.map

package/dist/types/ui/Link/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/ui/Link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,cAAc,CAAC;AAItB;;;GAGG;AACH,QAAA,MAAM,IAAI,GAAI,QAAQ,SAAS,WAAW,GAAG,GAAG,EAAE,mDAM/C,SAAS,CAAC,QAAQ,CAAC,KAAG,YAaxB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/ui/Link/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Link } from "./Link.js";
+export * from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/Link/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Link/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,cAAc,YAAY,CAAC"}

package/dist/types/ui/Link/types.d.ts

@@ -0,0 +1,13 @@
+import type { ElementType, ReactNode } from "react";
+import type { PolymorphicComponentProps } from "../../lib/index.js";
+interface LinkOwnProps {
+    /** Additional CSS classes */
+    className?: string;
+    /** Link contents */
+    children?: ReactNode;
+    /** Link appearance modifier */
+    appearance?: "soft";
+}
+export type LinkProps<TElement extends ElementType = "a"> = PolymorphicComponentProps<LinkOwnProps, TElement>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/Link/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Link/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEpE,UAAU,YAAY;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,MAAM,SAAS,CAAC,QAAQ,SAAS,WAAW,GAAG,GAAG,IACtD,yBAAyB,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC"}

package/dist/types/ui/Rule/Rule.d.ts

@@ -0,0 +1,12 @@
+import type React from "react";
+import type { RuleProps } from "./types.js";
+import "./styles.css";
+/**
+ * A component that separates content into logical groups.
+ * @TODO implement fixed-width behavior after implementation of the Grid
+ * @returns {React.ReactElement} - Rendered Rule
+ * @implements syntax:core:component:rule:1.0.0
+ */
+declare const Rule: ({ className, emphasis, ...props }: RuleProps) => React.ReactElement;
+export default Rule;
+//# sourceMappingURL=Rule.d.ts.map

package/dist/types/ui/Rule/Rule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Rule.d.ts","sourceRoot":"","sources":["../../../../src/ui/Rule/Rule.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,cAAc,CAAC;AAItB;;;;;GAKG;AACH,QAAA,MAAM,IAAI,GAAI,mCAIX,SAAS,KAAG,KAAK,CAAC,YASpB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/types/ui/Rule/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Rule } from "./Rule.js";
+export * from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/ui/Rule/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Rule/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,WAAW,CAAC;AAC5C,cAAc,YAAY,CAAC"}

package/dist/types/ui/Rule/types.d.ts

@@ -0,0 +1,11 @@
+import type { ModifierFamily } from "@canonical/ds-types";
+import type { HTMLAttributes } from "react";
+/**
+    We have used the `HTMLDivElement` as a default props base.
+    If your component is based on a different HTML element, please update it accordingly.
+    See https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API for a full list of HTML elements interfaces.
+*/
+export interface RuleProps extends HTMLAttributes<HTMLHRElement> {
+    emphasis?: ModifierFamily<"emphasis">;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/Rule/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Rule/types.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C;;;;EAIE;AACF,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,aAAa,CAAC;IAC9D,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;CACvC"}

package/dist/types/ui/index.d.ts

@@ -1,4 +1,8 @@
+export * from "./Badge/index.js";
 export * from "./Button/index.js";
 export * from "./Chip/index.js";
+export * from "./Icon/index.js";
+export * from "./Link/index.js";
+export * from "./Rule/index.js";
 export * from "./Tooltip/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-ds-core",
-  "version": "0.10.0-experimental.0",
+  "version": "0.10.0-experimental.4",
   "type": "module",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -34,36 +34,37 @@
     "check:ts": "tsc --noEmit",
     "storybook": "storybook dev -p 6006 --no-open --host 0.0.0.0",
     "test": "bun run test:vitest",
-    "test:watch": "bun run test:vitest:watch",
     "test:vitest": "vitest run",
     "test:vitest:watch": "vitest"
   },
   "dependencies": {
-    "@canonical/storybook-config": "^0.10.0-experimental.0",
-    "@canonical/styles": "^0.10.0-experimental.0",
-    "@canonical/utils": "^0.10.0-experimental.0",
+    "@canonical/ds-assets": "^0.10.0-experimental.4",
+    "@canonical/storybook-config": "^0.10.0-experimental.4",
+    "@canonical/styles": "^0.10.0-experimental.4",
+    "@canonical/utils": "^0.10.0-experimental.4",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.0.0",
-    "@canonical/biome-config": "^0.10.0-experimental.0",
-    "@canonical/typescript-config-react": "^0.10.0-experimental.0",
+    "@biomejs/biome": "2.2.4",
+    "@canonical/biome-config": "^0.10.0-experimental.4",
+    "@canonical/ds-types": "^0.10.0-experimental.4",
+    "@canonical/typescript-config-react": "^0.10.0-experimental.4",
     "@chromatic-com/storybook": "^4.0.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/node": "^24.0.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "@vitejs/plugin-react": "^4.5.2",
+    "@vitejs/plugin-react": "^5.0.0",
     "copyfiles": "^2.4.1",
     "globals": "^16.2.0",
-    "jsdom": "^26.1.0",
+    "jsdom": "^27.0.0",
     "storybook": "^9.0.8",
     "typescript": "^5.8.3",
     "vite": "^7.0.0",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.3"
   },
-  "gitHead": "d38f742073a1a0e582ce138bf0eb6dd63889721b"
+  "gitHead": "2c35cfbe5527808f3d612a1c683da1b113861e3d"
 }