@canonical/react-ds-app-launchpad 0.9.0-experimental.2 → 0.9.0-experimental.5

package/dist/types/ui/GitDiffViewer/common/CodeDiffViewer/types.d.ts

@@ -0,0 +1,18 @@
+import type React from "react";
+export type CodeDiffViewerAddComment = (props: {
+    lineNumber: number;
+    onClose: () => void;
+}) => React.ReactNode;
+export type CodeDiffViewerProps = {
+    /** A unique identifier for the CodeDiffViewer */
+    id?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Add comment element.
+     * If provided, the add comment button will be displayed on the line number.
+     */
+    AddComment?: CodeDiffViewerAddComment;
+    /** Inline styles */
+    style?: React.CSSProperties;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/GitDiffViewer/common/CodeDiffViewer/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/GitDiffViewer/common/CodeDiffViewer/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,wBAAwB,GAAG,CAAC,KAAK,EAAE;IAC7C,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,KAAK,KAAK,CAAC,SAAS,CAAC;AAEtB,MAAM,MAAM,mBAAmB,GAAG;IAChC,iDAAiD;IACjD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC"}

package/dist/types/ui/GitDiffViewer/common/FileHeader/FileHeader.d.ts

@@ -0,0 +1,15 @@
+import type React from "react";
+import "./styles.css";
+import type { FileHeaderProps } from "./types.js";
+/**
+ * Displays the file name and change count for a diff.
+ * With option to add custom elements to the left and right of the file header.
+ *
+ * @returns {React.ReactElement} - Rendered FileHeader
+ */
+declare const FileHeader: {
+    ({ id, children, className, style, hideCollapse, showChangeCount, leftContent, rightContent, ...props }: FileHeaderProps): React.ReactElement;
+    displayName: string;
+};
+export default FileHeader;
+//# sourceMappingURL=FileHeader.d.ts.map

package/dist/types/ui/GitDiffViewer/common/FileHeader/FileHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileHeader.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/GitDiffViewer/common/FileHeader/FileHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,cAAc,CAAC;AACtB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAIlD;;;;;GAKG;AACH,QAAA,MAAM,UAAU;6GAUb,eAAe,GAAG,KAAK,CAAC,YAAY;;CA0EtC,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/types/ui/GitDiffViewer/common/FileHeader/index.d.ts

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

package/dist/types/ui/GitDiffViewer/common/FileHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/GitDiffViewer/common/FileHeader/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,cAAc,YAAY,CAAC"}

package/dist/types/ui/GitDiffViewer/common/FileHeader/types.d.ts

@@ -0,0 +1,17 @@
+import type React from "react";
+export type FileHeaderProps = {
+    /** A unique identifier for the FileHeader */
+    id?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child elements */
+    children?: React.ReactNode;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Shown by default */
+    hideCollapse?: boolean;
+    showChangeCount?: boolean;
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/types/ui/GitDiffViewer/common/FileHeader/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/GitDiffViewer/common/FileHeader/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,eAAe,GAAG;IAC5B,6CAA6C;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,uBAAuB;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from "./CodeDiffViewer/index.js";
+export * from "./FileHeader/index.js";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/GitDiffViewer/common/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC"}

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

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

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

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

package/dist/types/ui/GitDiffViewer/hooks/useGitDiffViewer.d.ts

@@ -0,0 +1,3 @@
+declare const useGitDiffViewer: () => import("../types.js").ContextOptions;
+export default useGitDiffViewer;
+//# sourceMappingURL=useGitDiffViewer.d.ts.map

package/dist/types/ui/GitDiffViewer/hooks/useGitDiffViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGitDiffViewer.d.ts","sourceRoot":"","sources":["../../../../../src/ui/GitDiffViewer/hooks/useGitDiffViewer.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB,4CAQrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,6 @@
+export * from "./hooks/index.js";
+export type { DiffFile as GitDiffFile, Hunk as GitDiffHunk } from "./types.js";
+export * from "./utils/index.js";
+import type { GitDiffViewerComponent } from "./types.js";
+export declare const GitDiffViewer: GitDiffViewerComponent;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/GitDiffViewer/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAC;AACjC,YAAY,EAAE,QAAQ,IAAI,WAAW,EAAE,IAAI,IAAI,WAAW,EAAE,MAAM,YAAY,CAAC;AAC/E,cAAc,kBAAkB,CAAC;AAIjC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEzD,eAAO,MAAM,aAAa,EAAe,sBAAsB,CAAC"}

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

@@ -0,0 +1,77 @@
+import type { AllOrNone } from "@canonical/utils";
+import type React from "react";
+import type { CodeDiffViewerProps, FileHeaderProps } from "./common/index.js";
+/**
+ * When this is provided, the component will add support for collapsing the diff code section.
+ */
+export type CollapseOption = {
+    /**
+     * Whether the diff code section is collapsed.
+     */
+    isCollapsed: boolean;
+    /**
+     * Toggle the collapse state of the diff code section.
+     */
+    onCollapseToggle: (collapsed: boolean) => void;
+};
+export type DiffOptions = {
+    /**
+     * The diff file being displayed.
+     *
+     * In case you need to parse raw diff text,
+     * you can use the `parseDiff` function from `@canonical/react-ds-app-launchpad`
+     */
+    diff: DiffFile;
+};
+export type WrapLinesOption = {
+    /**
+     * Whether the code lines should not overflow.
+     */
+    wrapLines?: boolean;
+};
+export type LineDecorationOptions = {
+    /**
+     * Additional UI elements to be displayed bellow the code diff lines.
+     */
+    lineDecorations?: Record<number, React.ReactElement>;
+};
+type UserContextOptions = LineDecorationOptions & DiffOptions & WrapLinesOption & AllOrNone<CollapseOption>;
+type ManagedContextOptions = {
+    addCommentEnabled: boolean;
+    setAddCommentEnabled: (enabled: boolean) => void;
+    addCommentOpenLocations: Set<number>;
+    toggleAddCommentLocation: (lineNumber: number) => void;
+};
+export type ContextOptions = UserContextOptions & ManagedContextOptions;
+export type ProviderOptions = {
+    id?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    /**
+     * Consider using `GitDiffViewer.FileHeader`, and `GitDiffViewer.CodeDiff` components.
+     */
+    children?: React.ReactNode;
+} & UserContextOptions;
+export type Hunk = {
+    header: string;
+    oldStart: number;
+    oldLines: number;
+    newStart: number;
+    newLines: number;
+    lines: {
+        type: "add" | "remove" | "context";
+        content: string;
+    }[];
+};
+export type DiffFile = {
+    oldPath: string;
+    newPath: string;
+    hunks: Hunk[];
+    fileChangeState: "none" | "added" | "deleted" | "modified";
+};
+export type GitDiffViewerComponent = ((props: ProviderOptions) => React.ReactElement) & {
+    FileHeader: (props: FileHeaderProps) => React.ReactElement | null;
+    CodeDiffViewer: (props: CodeDiffViewerProps) => React.ReactElement | null;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/GitDiffViewer/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAE9E;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IAC3B;;OAEG;IACH,WAAW,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,gBAAgB,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB;;;;;OAKG;IACH,IAAI,EAAE,QAAQ,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;CACtD,CAAC;AAEF,KAAK,kBAAkB,GAAG,qBAAqB,GAC7C,WAAW,GACX,eAAe,GACf,SAAS,CAAC,cAAc,CAAC,CAAC;AAE5B,KAAK,qBAAqB,GAAG;IAC3B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,oBAAoB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,uBAAuB,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IACrC,wBAAwB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,kBAAkB,GAAG,qBAAqB,CAAC;AAExE,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,GAAG,kBAAkB,CAAC;AAEvB,MAAM,MAAM,IAAI,GAAG;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE;QACL,IAAI,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;QACnC,OAAO,EAAE,MAAM,CAAC;KACjB,EAAE,CAAC;CACL,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,eAAe,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,CAAC;CAC5D,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,CAAC,CACpC,KAAK,EAAE,eAAe,KACnB,KAAK,CAAC,YAAY,CAAC,GAAG;IACzB,UAAU,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IAClE,cAAc,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;CAC3E,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/GitDiffViewer/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/types/ui/GitDiffViewer/utils/parseGitDiff.d.ts

@@ -0,0 +1,4 @@
+import type { DiffFile } from "../types.js";
+declare function parseGitDiff(diffText: string): DiffFile[];
+export default parseGitDiff;
+//# sourceMappingURL=parseGitDiff.d.ts.map

package/dist/types/ui/GitDiffViewer/utils/parseGitDiff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseGitDiff.d.ts","sourceRoot":"","sources":["../../../../../src/ui/GitDiffViewer/utils/parseGitDiff.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAQ,MAAM,aAAa,CAAC;AAElD,iBAAS,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,QAAQ,EAAE,CAwElD;AAED,eAAe,YAAY,CAAC"}

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

@@ -1,2 +1,2 @@
-export { Button, type ButtonProps } from "./Button/index.js";
+export * from "./GitDiffViewer/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,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-ds-app-launchpad",
-  "version": "0.9.0-experimental.2",
+  "version": "0.9.0-experimental.5",
   "type": "module",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -38,8 +38,10 @@
     "test:vitest:watch": "vitest"
   },
   "dependencies": {
-    "@canonical/storybook-config": "^0.9.0-experimental.2",
+    "@canonical/storybook-config": "^0.9.0-experimental.5",
     "@canonical/styles": "^0.9.0-experimental.2",
+    "@canonical/utils": "^0.9.0-experimental.4",
+    "highlight.js": "^11.11.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
@@ -66,5 +68,5 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^2.1.8"
   },
-  "gitHead": "3b4b3637d6c340d1363bc89e973dadea8881f625"
+  "gitHead": "bc797d0c134200c372d31a8db89659caba2d6384"
 }

package/dist/esm/ui/Button/Button.js

@@ -1,10 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./styles.css";
-/** Buttons are clickable elements used to perform an action. */
-const Button = ({ id, className, appearance, label, ...props }) => {
-    return (_jsx("button", { id: id, className: ["ds", "button", appearance, className]
-            .filter(Boolean)
-            .join(" "), ...props, "aria-label": label, children: label }));
-};
-export default Button;
-//# sourceMappingURL=Button.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,MAAM,MAAM,GAAG,CAAC,EACd,EAAE,EACF,SAAS,EACT,UAAU,EACV,KAAK,EACL,GAAG,KAAK,EACF,EAAsB,EAAE;IAC9B,OAAO,CACL,iBACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,CAAC;aAC/C,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,KACR,KAAK,gBACG,KAAK,YAEhB,KAAK,GACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

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

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

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

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

@@ -1,63 +0,0 @@
-/* component styles */
-
-/* component variables
-    --button-color-background: background color of the button
-    --button-color-background-hover: background color of the button on hover
-    --button-color-background-active: background color of the button on active
-    --button-color-text: text color of the button
-    --button-color-border: border color of the button
-    --button-color-border-hover: border color of the button on hover
-    --button-color-border-active: border color of the button on active
-
-    --button-margin-left: left margin of the button
-    --button-margin-bottom: bottom margin of the button
-    --button-padding-vertical: vertical padding of the button
-    --button-padding-horizontal: horizontal padding of the button
-    --button-border-width: border width of the button
-    --button-font-size: font size of the button
-    --button-font-weight: font weight of the button
-    --button-line-height: line height of the button
-*/
-.ds.button {
-  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));
-  border-style: solid;
-  border-width: var(--button-border-width);
-  font-size: var(--button-font-size);
-  font-weight: var(--button-font-weight);
-  line-height: var(--button-line-height);
-  margin-block-end: var(--button-margin-bottom);
-  margin-inline-end: var(--button-margin-left);
-  padding-block: var(--button-padding-vertical);
-  padding-inline: var(--button-padding-horizontal);
-
-  text-align: left;
-  text-decoration: none;
-
-  /* component states */
-  &:hover {
-    background-color: var(
-      --intent-color-hover,
-      var(--button-color-background-hover)
-    );
-    border-color: var(
-      --intent-color-border-hover,
-      var(--button-color-border-hover)
-    );
-  }
-
-  &:active {
-    background-color: var(
-      --intent-color-active,
-      var(--button-color-background-active)
-    );
-    border-color: var(
-      --intent-color-border-active,
-      var(--button-color-border-active)
-    );
-  }
-}

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

@@ -1,79 +0,0 @@
-/* @canonical/generator-canonical-ds 0.4.0-experimental.0 */
-
-.ds.chip {
-  border-color: var(--intent-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));
-
-  display: inline-flex;
-  align-items: baseline;
-
-  user-select: none;
-  white-space: nowrap;
-
-  font-size: var(--chip-font-size);
-  font-weight: var(--chip-font-weight);
-  line-height: var(--chip-line-height);
-
-  margin-block-end: var(--chip-margin-bottom);
-  margin-inline-end: var(--chip-margin-left);
-  padding-block: var(--chip-padding-vertical);
-  padding-inline: var(--chip-padding-horizontal);
-
-  & > .lead {
-    font-variant-caps: all-small-caps;
-    font-variant-numeric: oldstyle-nums;
-  }
-
-  & > .lead + .value::before {
-    content: ": ";
-  }
-
-  & > .lead,
-  & > .value {
-    display: inline;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  & > .dismiss {
-    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' fill-rule='nonzero' d='M13.041 1.898l1.06 1.06L9.062 8l5.04 5.042-1.06 1.06L8 9.062 2.96 14.1l-1.06-1.06L6.938 8 1.9 2.96l1.06-1.06 5.04 5.04z'/%3E%3C/svg%3E");
-    background-color: var(--chip-color-background);
-    align-self: center;
-    background-size: 0.75rem;
-    background-repeat: no-repeat;
-    background-position: center;
-    display: inline-block;
-    cursor: pointer;
-    margin-left: var(--spacing-horizontal-xsmall);
-    flex: 0 0 auto;
-    border-radius: 50%;
-    border-color: transparent;
-    height: var(--font-size-default);
-    width: var(--font-size-default);
-  }
-
-  &:is(button) {
-    cursor: pointer;
-  }
-
-  &:hover:not(:has(.dismiss)),
-  & > .dismiss:hover {
-    background-color: var(
-      --intent-color-tinted-hover,
-      var(--chip-color-background-hover)
-    );
-  }
-
-  &:active:not(:has(.dismiss)),
-  & > .dismiss:active {
-    background-color: var(
-      --intent-color-tinted-active,
-      var(--chip-color-background-active)
-    );
-  }
-}

package/dist/esm/ui/Chip/Chip.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./Chip.css";
-const componentCssClassName = "ds chip";
-/**
- * description of the Chip component
- * @returns {React.ReactElement} - Rendered Chip
- */
-const Chip = ({ appearance = "neutral", lead, value, onClick, onDismiss, id, className, style, ...props }) => {
-    const Container = onClick ? "button" : "span";
-    return (_jsxs(Container, { id: id, style: style, className: [componentCssClassName, appearance, className]
-            .filter(Boolean)
-            .join(" "), onClick: onClick, ...props, children: [lead && _jsx("span", { className: "lead", children: lead }), value && _jsx("span", { className: "value", children: value }), onDismiss && (_jsx("button", { type: "button", className: "dismiss", "aria-label": "Dismiss", onClick: () => onDismiss() }))] }));
-};
-export default Chip;
-//# sourceMappingURL=Chip.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../../../src/ui/Chip/Chip.tsx"],"names":[],"mappings":";AAEA,OAAO,YAAY,CAAC;AAGpB,MAAM,qBAAqB,GAAG,SAAS,CAAC;AAExC;;;GAGG;AACH,MAAM,IAAI,GAAG,CAAC,EACZ,UAAU,GAAG,SAAS,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,EACP,SAAS,EACT,EAAE,EACF,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACM,EAAsB,EAAE;IACtC,MAAM,SAAS,GAAG,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;IAC9C,OAAO,CACL,MAAC,SAAS,IACR,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,CAAC,qBAAqB,EAAE,UAAU,EAAE,SAAS,CAAC;aACtD,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC,EACZ,OAAO,EAAE,OAAO,KACZ,KAAK,aAER,IAAI,IAAI,eAAM,SAAS,EAAC,MAAM,YAAE,IAAI,GAAQ,EAC5C,KAAK,IAAI,eAAM,SAAS,EAAC,OAAO,YAAE,KAAK,GAAQ,EAC/C,SAAS,IAAI,CACZ,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,SAAS,gBACR,SAAS,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAC1B,CACH,IACS,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

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

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

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

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

@@ -1,6 +0,0 @@
-import type Props from "./types.js";
-import "./styles.css";
-/** Buttons are clickable elements used to perform an action. */
-declare const Button: ({ id, className, appearance, label, ...props }: Props) => React.ReactElement;
-export default Button;
-//# sourceMappingURL=Button.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,YAAY,CAAC;AACpC,OAAO,cAAc,CAAC;AAEtB,gEAAgE;AAChE,QAAA,MAAM,MAAM,mDAMT,KAAK,KAAG,KAAK,CAAC,YAahB,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -1,3 +0,0 @@
-export { default as Button } from "./Button.js";
-export type { default as ButtonProps, BaseProps as ButtonBaseProps, } from "./types.js";
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,aAAa,CAAC;AAChD,YAAY,EACV,OAAO,IAAI,WAAW,EACtB,SAAS,IAAI,eAAe,GAC7B,MAAM,YAAY,CAAC"}

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

@@ -1,15 +0,0 @@
-import type React from "react";
-export interface BaseProps {
-    id?: string;
-    /** Additional CSS classes */
-    className?: string;
-    /** The visual style of the button */
-    appearance?: "neutral" | "base" | "positive" | "negative" | "link";
-    /** Button contents */
-    label: string;
-    /** Optional click handler */
-    onClick?: () => void;
-}
-type Props = BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
-export default Props;
-//# sourceMappingURL=types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,MAAM,WAAW,SAAS;IAExB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qCAAqC;IACrC,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,CAAC;IACnE,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,KAAK,KAAK,GAAG,SAAS,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEvE,eAAe,KAAK,CAAC"}

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

@@ -1,10 +0,0 @@
-import type React from "react";
-import "./Chip.css";
-import type { ChipPropsType } from "./types.js";
-/**
- * description of the Chip component
- * @returns {React.ReactElement} - Rendered Chip
- */
-declare const Chip: ({ appearance, lead, value, onClick, onDismiss, id, className, style, ...props }: ChipPropsType) => React.ReactElement;
-export default Chip;
-//# sourceMappingURL=Chip.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../../src/ui/Chip/Chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,YAAY,CAAC;AACpB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAIhD;;;GAGG;AACH,QAAA,MAAM,IAAI,oFAUP,aAAa,KAAG,KAAK,CAAC,YAwBxB,CAAC;AAEF,eAAe,IAAI,CAAC"}

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

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

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

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

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

@@ -1,27 +0,0 @@
-import type React from "react";
-/**
- * Props for the `Chip` component.
- */
-export interface ChipProps {
-    /**
-     * The chip’s appearance.
-     * @default "neutral"
-     */
-    appearance?: "neutral" | "positive" | "negative" | "caution" | "information";
-    /** Text shown before the value. */
-    lead?: string;
-    /** The chip’s value text. */
-    value?: string;
-    /** Called when the chip is clicked. */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Called when the chip is dismissed. */
-    onDismiss?: () => void;
-    /** Unique identifier for the chip. */
-    id?: string;
-    /** Additional CSS class names. */
-    className?: string;
-    /** Inline styles for the chip. */
-    style?: React.CSSProperties;
-}
-export type ChipPropsType = ChipProps & Omit<React.HTMLAttributes<HTMLButtonElement>, "children">;
-//# sourceMappingURL=types.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/Chip/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;IAE7E,mCAAmC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,uCAAuC;IACvC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAE/D,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IAEvB,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ,kCAAkC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,kCAAkC;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,GACnC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC,CAAC"}