@canonical/react-ds-core 0.10.0-experimental.3 → 0.10.0-experimental.5

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,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const rtl = () => (Story) => (_jsx("div", { dir: "rtl", children: _jsx(Story, {}) }));
+export const grid = () => (Story) => (_jsx("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+        gap: "1em",
+    }, children: _jsx(Story, {}) }));
+/**
+ * Places the story before a `<main>` element. This is useful for stories that need to be placed before the rest of the page contents in reading order (such as a skip link).
+ * @param id - The id of the main element
+ * @param children - Content to be rendered inside the main element
+ * @TODO this is the first decorator that seems like it may deserve a complex props object, and thus a separate Type.
+ *      Should the type be declared separately? Should this be a separate file? Should the decorator be simplified somehow?
+ */
+export const beforeMain = ({ id = "main", children }) => (Story) => (_jsxs(_Fragment, { children: [_jsx(Story, {}), _jsx("main", { id: id, tabIndex: -1, children: children })] }));
+//# 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;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CAAC,KAAkB,EAAE,EAAE,CAAC,CAChD,cACE,KAAK,EAAE;QACL,OAAO,EAAE,MAAM;QACf,mBAAmB,EAAE,sCAAsC;QAC3D,GAAG,EAAE,KAAK;KACX,YAED,KAAC,KAAK,KAAG,GACL,CACP,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GACrB,CAAC,EAAE,EAAE,GAAG,MAAM,EAAE,QAAQ,EAAyC,EAAE,EAAE,CACrE,CAAC,KAAkB,EAAE,EAAE,CAAC,CACtB,8BACE,KAAC,KAAK,KAAG,EACT,eAAM,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,YACvB,QAAQ,GACJ,IACN,CACJ,CAAC"}

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

@@ -4,10 +4,10 @@
   --badge-chip-margin-tweak: 0.15rem;
 
   /* Base badge styles using tokens */
-  background-color: var(--intent-color, var(--badge-color-background));
+  background-color: var(--modifier-color, var(--badge-color-background));
   border-radius: var(--badge-border-radius);
   box-sizing: content-box;
-  color: var(--intent-color-text, var(--badge-color-text));
+  color: var(--modifier-color-text, var(--badge-color-text));
   display: inline-block;
   font-size: var(--badge-font-size);
   font-weight: var(--badge-font-weight);

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

@@ -22,9 +22,9 @@
   display: inline-block;
   cursor: pointer;
 
-  color: var(--intent-color-text, var(--button-color-text));
-  background-color: var(--intent-color, var(--button-color-background));
-  border-color: var(--intent-color-border, var(--button-color-border));
+  color: var(--modifier-color-text, var(--button-color-text));
+  background-color: var(--modifier-color, var(--button-color-background));
+  border-color: var(--modifier-color-border, var(--button-color-border));
   border-style: solid;
   border-width: var(--button-border-width);
   font-size: var(--button-font-size);
@@ -41,22 +41,22 @@
   /* component states */
   &:hover {
     background-color: var(
-      --intent-color-hover,
+      --modifier-color-hover,
       var(--button-color-background-hover)
     );
     border-color: var(
-      --intent-color-border-hover,
+      --modifier-color-border-hover,
       var(--button-color-border-hover)
     );
   }
 
   &:active {
     background-color: var(
-      --intent-color-active,
+      --modifier-color-active,
       var(--button-color-background-active)
     );
     border-color: var(
-      --intent-color-border-active,
+      --modifier-color-border-active,
       var(--button-color-border-active)
     );
   }

package/dist/esm/ui/Card/Card.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image, Section, ThumbnailSection } from "./common/index.js";
+import "./styles.css";
+const componentCssClassName = "ds card";
+/**
+ * Card component
+ * @implements syntax:core:component:card:1.0.0
+ */
+const Card = ({ className, children, emphasis = "neutral", ...props }) => (_jsx("div", { className: [componentCssClassName, emphasis, className]
+        .filter(Boolean)
+        .join(" "), ...props, children: children }));
+Card.ThumbnailSection = ThumbnailSection;
+Card.Image = Image;
+Card.Section = Section;
+export default Card;
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../../src/ui/Card/Card.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAErE,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,SAAS,CAAC;AAExC;;;GAGG;AACH,MAAM,IAAI,GAAG,CAAC,EACZ,SAAS,EACT,QAAQ,EACR,QAAQ,GAAG,SAAS,EACpB,GAAG,KAAK,EACE,EAAsB,EAAE,CAAC,CACnC,cACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,QAAQ,EAAE,SAAS,CAAC;SACpD,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,KACR,KAAK,YAER,QAAQ,GACL,CACP,CAAC;AAEF,IAAI,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;AACzC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;AACnB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;AAEvB,eAAe,IAAI,CAAC"}

package/dist/esm/ui/Card/common/Image/Image.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const componentCssClassName = "ds card-image";
+/**
+ * Image component for Card
+ * Full-width image with content bleed (no padding)
+ * @returns {React.ReactElement} - Rendered Image
+ */
+const Image = ({ className, alt, ...props }) => {
+    return (_jsx("img", { className: [componentCssClassName, className].filter(Boolean).join(" "), alt: alt, ...props }));
+};
+Image.displayName = "Card.Image";
+export default Image;
+//# sourceMappingURL=Image.js.map

package/dist/esm/ui/Card/common/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../../../src/ui/Card/common/Image/Image.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,eAAe,CAAC;AAE9C;;;;GAIG;AACH,MAAM,KAAK,GAAG,CAAC,EACb,SAAS,EACT,GAAG,EACH,GAAG,KAAK,EACG,EAAsB,EAAE;IACnC,OAAO,CACL,cACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,GAAG,EAAE,GAAG,KACJ,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,YAAY,CAAC;AAEjC,eAAe,KAAK,CAAC"}

package/dist/esm/ui/Card/common/Image/index.js

@@ -0,0 +1,2 @@
+export { default as Image } from "./Image.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Card/common/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/ui/Card/common/Image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,YAAY,CAAC"}

package/dist/esm/ui/Card/common/Image/styles.css

@@ -0,0 +1,7 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+
+.ds.card-image {
+  display: block;
+  height: auto;
+  width: 100%;
+}

package/dist/esm/ui/Card/common/Image/types.js

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

package/dist/esm/ui/Card/common/Image/types.js.map

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

package/dist/esm/ui/Card/common/Section/Section.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const componentCssClassName = "ds card-section";
+/**
+ * Section component for Card
+ * @returns {React.ReactElement} - Rendered Section
+ */
+const Section = ({ children, className, ...props }) => {
+    return (_jsx("section", { className: [componentCssClassName, className].filter(Boolean).join(" "), ...props, children: children }));
+};
+Section.displayName = "Card.Section";
+export default Section;
+//# sourceMappingURL=Section.js.map

package/dist/esm/ui/Card/common/Section/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../../../../src/ui/Card/common/Section/Section.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEhD;;;GAGG;AACH,MAAM,OAAO,GAAG,CAAC,EACf,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACK,EAAsB,EAAE;IACrC,OAAO,CACL,kBACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KACnE,KAAK,YAER,QAAQ,GACD,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,cAAc,CAAC;AAErC,eAAe,OAAO,CAAC"}

package/dist/esm/ui/Card/common/Section/index.js

@@ -0,0 +1,2 @@
+export { default as Section } from "./Section.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Card/common/Section/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/ui/Card/common/Section/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,cAAc,CAAC"}

package/dist/esm/ui/Card/common/Section/styles.css

@@ -0,0 +1,6 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+
+.ds.card-section {
+  padding-block: var(--card-section-padding-vertical);
+  padding-inline: var(--card-section-padding-horizontal);
+}

package/dist/esm/ui/Card/common/Section/types.js

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

package/dist/esm/ui/Card/common/Section/types.js.map

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

package/dist/esm/ui/Card/common/ThumbnailSection/ThumbnailSection.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Section from "../Section/Section.js";
+import "./styles.css";
+const componentCssClassName = "ds card-thumbnail-section";
+/**
+ * ThumbnailSection component for Card thumbnails
+ * Extends Section behavior with thumbnail image
+ */
+const ThumbnailSection = ({ className, imageProps, ...props }) => {
+    return (_jsx(Section, { className: [componentCssClassName, className].filter(Boolean).join(" "), ...props, children: _jsx("img", { alt: imageProps.alt, ...imageProps }) }));
+};
+ThumbnailSection.displayName = "Card.ThumbnailSection";
+export default ThumbnailSection;
+//# sourceMappingURL=ThumbnailSection.js.map

package/dist/esm/ui/Card/common/ThumbnailSection/ThumbnailSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThumbnailSection.js","sourceRoot":"","sources":["../../../../../../src/ui/Card/common/ThumbnailSection/ThumbnailSection.tsx"],"names":[],"mappings":";AAGA,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAE5C,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,2BAA2B,CAAC;AAE1D;;;GAGG;AACH,MAAM,gBAAgB,GAAG,CAAC,EACxB,SAAS,EACT,UAAU,EACV,GAAG,KAAK,EACc,EAAsB,EAAE;IAC9C,OAAO,CACL,KAAC,OAAO,IACN,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,KACnE,KAAK,YAGT,cAAK,GAAG,EAAE,UAAU,CAAC,GAAG,KAAM,UAAU,GAAI,GACpC,CACX,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,uBAAuB,CAAC;AAEvD,eAAe,gBAAgB,CAAC"}

package/dist/esm/ui/Card/common/ThumbnailSection/index.js

@@ -0,0 +1,2 @@
+export { default as ThumbnailSection } from "./ThumbnailSection.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/ui/Card/common/ThumbnailSection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/ui/Card/common/ThumbnailSection/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/esm/ui/Card/common/ThumbnailSection/styles.css

@@ -0,0 +1,11 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+
+.ds.card-thumbnail-section {
+  & > img {
+    max-height: var(--card-thumbnail-max-height);
+
+    /* TODO in Vanilla these are globally applied to all imgs, maybe we want to do that here as well */
+    max-width: 100%;
+    height: auto;
+  }
+}

package/dist/esm/ui/Card/common/ThumbnailSection/types.js

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

package/dist/esm/ui/Card/common/ThumbnailSection/types.js.map

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

package/dist/esm/ui/Card/common/index.js

@@ -0,0 +1,4 @@
+export * from "./Image/index.js";
+export * from "./Section/index.js";
+export * from "./ThumbnailSection/index.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/Card/common/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,6BAA6B,CAAC"}

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

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

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

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

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

@@ -0,0 +1,23 @@
+/* @canonical/generator-ds 0.10.0-experimental.2 */
+
+.ds.card {
+  /* prevent overflow of child margins */
+  overflow: auto;
+
+  box-shadow: var(--modifier-box-shadow, var(--card-box-shadow));
+  color: var(--modifier-color-text, var(--card-color-text));
+  background-color: var(--modifier-color, var(--card-color-background));
+  border-width: var(--card-border-width);
+  border-style: var(--card-border-style);
+  border-color: var(--card-section-separator-color);
+
+  & .card-section,
+  & .card-image {
+    /* Last section doesn't need a border (the Card itself has a border) */
+    &:not(:last-child) {
+      border-bottom: var(--card-section-separator-border-width)
+        var(--card-section-separator-border-style)
+        var(--card-section-separator-color);
+    }
+  }
+}

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

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

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

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

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

@@ -1,13 +1,13 @@
 /* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
 
 .ds.chip {
-  border-color: var(--intent-color-border, var(--chip-color-border));
+  border-color: var(--modifier-color-border, var(--chip-color-border));
   border-style: solid;
   border-radius: var(--chip-border-radius);
   border-width: var(--chip-border-width);
 
-  color: var(--intent-color-text-tinted, var(--chip-color-text));
-  background-color: var(--intent-color-tinted, var(--chip-color-background));
+  color: var(--modifier-color-text-tinted, var(--chip-color-text));
+  background-color: var(--modifier-color-tinted, var(--chip-color-background));
 
   display: inline-flex;
   align-items: baseline;
@@ -64,7 +64,7 @@
   &:hover:not(:has(.dismiss)),
   & > .dismiss:hover {
     background-color: var(
-      --intent-color-tinted-hover,
+      --modifier-color-tinted-hover,
       var(--chip-color-background-hover)
     );
   }
@@ -72,7 +72,7 @@
   &:active:not(:has(.dismiss)),
   & > .dismiss:active {
     background-color: var(
-      --intent-color-tinted-active,
+      --modifier-color-tinted-active,
       var(--chip-color-background-active)
     );
   }

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/styles.css

@@ -2,15 +2,15 @@
 
 .ds.rule {
   background-color: var(
-    --intent-separator-bar-color,
+    --modifier-separator-bar-color,
     var(--rule-color-background)
   );
   border-width: var(--rule-border-width);
-  height: var(--intent-separator-bar-height, var(--rule-height));
+  height: var(--modifier-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))
+    var(--modifier-separator-bar-height, var(--rule-height))
   );
 }

package/dist/esm/ui/SkipLink/SkipLink.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const componentCssClassName = "ds skip-link";
+/**
+ * The `SkipLink` component provides a way for users to quickly navigate to the main content of a page.
+ * It is typically used by keyboard and screen reader users to bypass repetitive navigation links
+ * and other elements that appear at the top of the page, pursuant to [WCAG 2.1 Success Criterion 2.4.1](https://www.w3.org/WAI/WCAG21/Understanding/bypass-blocks.html).
+ *
+ * `SkipLink` should be placed near the top of your document body, before the `<main>` element.
+ * The `<main>` element should have a `tabindex` of `-1` to prevent it from receiving focus from the keyboard without using the skip link.
+ *
+ * @implements syntax:core:component:skiplink:1.0.0
+ */
+const SkipLink = ({ className, children, mainId = "main", ...props }) => {
+    const href = `#${mainId}`;
+    const skipLinkContents = children || "Skip to main content";
+    return (_jsx("a", { className: [componentCssClassName, className].filter(Boolean).join(" "), href: href, tabIndex: 0, ...props, children: skipLinkContents }));
+};
+export default SkipLink;
+//# sourceMappingURL=SkipLink.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLink.js","sourceRoot":"","sources":["../../../../src/ui/SkipLink/SkipLink.tsx"],"names":[],"mappings":";AAIA,OAAO,cAAc,CAAC;AAEtB,MAAM,qBAAqB,GAAG,cAAc,CAAC;AAE7C;;;;;;;;;GASG;AACH,MAAM,QAAQ,GAAG,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,MAAM,GAAG,MAAM,EACf,GAAG,KAAK,EACM,EAAsB,EAAE;IACtC,MAAM,IAAI,GAAG,IAAI,MAAM,EAAE,CAAC;IAC1B,MAAM,gBAAgB,GAAG,QAAQ,IAAI,sBAAsB,CAAC;IAE5D,OAAO,CACL,YACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,EACvE,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,CAAC,KACP,KAAK,YAER,gBAAgB,GACf,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

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

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

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

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

@@ -0,0 +1,21 @@
+/* @canonical/generator-ds 0.10.0-experimental.4 */
+
+.ds.skip-link {
+  background: var(--skip-link-background);
+  color: var(--skip-link-color);
+  display: block;
+  inset-inline-start: var(--skip-link-inset-inline-start);
+  position: absolute;
+  top: var(--skip-link-top);
+
+  &:focus,
+  &:focus-visible {
+    inset-inline-start: var(--skip-link-focus-inset-inline-start);
+    outline-offset: var(--skip-link-outline-offset);
+    padding-block: var(--skip-link-focus-padding-block);
+    padding-inline: var(--skip-link-focus-padding-inline);
+    position: fixed;
+    top: var(--skip-link-focus-top);
+    z-index: var(--skip-link-focus-z-index);
+  }
+}

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

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

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

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

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

@@ -32,15 +32,15 @@
     transparent;
 
   color: var(
-    --intent-color-text,
+    --modifier-color-text,
     var(--tooltip-color-text, var(--color-text-default))
   );
   background-color: var(
-    --intent-color,
+    --modifier-color,
     var(--tooltip-color-background, var(--color-background-default))
   );
   border-color: var(
-    --intent-color-border,
+    --modifier-color-border,
     var(--tooltip-color-border, transparent)
   );
   border-style: solid;

package/dist/esm/ui/index.js

@@ -1,6 +1,10 @@
 export * from "./Badge/index.js";
 export * from "./Button/index.js";
+export * from "./Card/index.js";
 export * from "./Chip/index.js";
+export * from "./Icon/index.js";
+export * from "./Link/index.js";
 export * from "./Rule/index.js";
+export * from "./SkipLink/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,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,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,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,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