@canonical/react-ds-app-launchpad 0.7.1-experimental.0 → 0.9.0-experimental.10

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

@@ -0,0 +1,44 @@
+import type React from "react";
+export type EditMode = "write" | "preview";
+export type MarkdownEditorProps = {
+    ref?: React.Ref<HTMLTextAreaElement>;
+    /** A unique identifier for the MarkdownEditor */
+    id?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child elements */
+    children?: React.ReactNode;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Placeholder for the textarea */
+    placeholder?: string;
+    /** Default value for the textarea (Markdown content) */
+    defaultValue?: string;
+    /** Hide the toolbar */
+    hideToolbar?: boolean;
+    /** Hide the preview pane */
+    hidePreview?: boolean;
+    /** Hide the border around the editor */
+    borderless?: boolean;
+    /** Controlled edit mode, leave undefined for internal control */
+    editMode?: EditMode;
+    /** Callback for edit mode change, needed if editMode is controlled */
+    onEditModeChange?: (newEditMode: EditMode) => void;
+    /** Textarea styles */
+    textareaStyle?: React.CSSProperties;
+    /** Preview pane styles */
+    previewStyle?: React.CSSProperties;
+    emptyInputMessage?: string;
+    toolbarBarLabelMessage?: string;
+    ToolbarTextFormattingGroupLabelMessage?: string;
+    ToolbarToolsGroupLabelMessage?: string;
+    ToolbarTitleButtonLabelMessage?: string;
+    ToolbarBoldButtonLabelMessage?: string;
+    ToolbarItalicButtonLabelMessage?: string;
+    ToolbarQuoteButtonLabelMessage?: string;
+    ToolbarCodeButtonLabelMessage?: string;
+    ToolbarLinkButtonLabelMessage?: string;
+    ToolbarUnorderedListButtonLabelMessage?: string;
+    ToolbarOrderedListButtonLabelMessage?: string;
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/MarkdownEditor/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAE3C,MAAM,MAAM,mBAAmB,GAAG;IAChC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IACrC,iDAAiD;IACjD,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,mCAAmC;IACnC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uBAAuB;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,sEAAsE;IACtE,gBAAgB,CAAC,EAAE,CAAC,WAAW,EAAE,QAAQ,KAAK,IAAI,CAAC;IACnD,sBAAsB;IACtB,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,0BAA0B;IAC1B,YAAY,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAEnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,sCAAsC,CAAC,EAAE,MAAM,CAAC;IAChD,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,+BAA+B,CAAC,EAAE,MAAM,CAAC;IACzC,8BAA8B,CAAC,EAAE,MAAM,CAAC;IACxC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,6BAA6B,CAAC,EAAE,MAAM,CAAC;IACvC,sCAAsC,CAAC,EAAE,MAAM,CAAC;IAChD,oCAAoC,CAAC,EAAE,MAAM,CAAC;CAC/C,GAAG,KAAK,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,CAAC"}

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

@@ -0,0 +1,11 @@
+import type React from "react";
+import type { RelativeTimeProps } from "./types.js";
+/**
+ * The RelativeTime component displays timestamps in a human-readable relative format (like "2 hours ago" or "in 3 days").
+ *
+ * It features automatic live updates with interval optimization based on time distance, configurable "now" threshold,
+ * and renders as proper semantic HTML using the <time> element. The component leverages the Temporal API for calculations and Intl.RelativeTimeFormat for localization.
+ */
+declare const RelativeTime: ({ id, className, style, time, relativeTimeFormat, nowThreshold, disableLiveUpdate, nowKeyword, invalidDateKeyword, }: RelativeTimeProps) => React.ReactElement;
+export default RelativeTime;
+//# sourceMappingURL=RelativeTime.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.d.ts","sourceRoot":"","sources":["../../../../src/ui/RelativeTime/RelativeTime.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AASpD;;;;;GAKG;AACH,QAAA,MAAM,YAAY,yHAUf,iBAAiB,KAAG,KAAK,CAAC,YA0E5B,CAAC;AAEF,eAAe,YAAY,CAAC"}

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

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

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

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

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

@@ -0,0 +1,36 @@
+import type { Temporal } from "@js-temporal/polyfill";
+import type React from "react";
+export interface RelativeTimeProps {
+    /** A unique identifier for the RelativeTime */
+    id?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /**
+     * The time to be displayed as a relative time (ISO string or Date object).
+     */
+    time: string | Date | Temporal.Instant;
+    /**
+     * Disable live duration updates (default: false).
+     */
+    disableLiveUpdate?: boolean;
+    /**
+     * custom relative time format (default: local language and narrow style).
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
+     */
+    relativeTimeFormat?: Intl.RelativeTimeFormat;
+    /**
+     * The threshold in seconds for when to display the relative time as "just now" (default is 10).
+     */
+    nowThreshold?: number;
+    /**
+     * The keyword to use for "now" (default: "now")
+     */
+    nowKeyword?: string;
+    /**
+     * The keyword to use when the given time is not a valid. (default: "invalid date")
+     */
+    invalidDateKeyword?: string;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/RelativeTime/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;OAEG;IACH,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC;IAEvC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,IAAI,CAAC,kBAAkB,CAAC;IAE7C;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B"}

package/dist/types/ui/RelativeTime/utils/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const MINUTE_IN_SECONDS = 60;
+export declare const HOUR_IN_SECONDS: number;
+export declare const DAY_IN_SECONDS: number;
+export declare const MONTH_IN_SECONDS: number;
+export declare const YEAR_IN_SECONDS: number;
+//# sourceMappingURL=constants.d.ts.map

package/dist/types/ui/RelativeTime/utils/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,iBAAiB,KAAK,CAAC;AACpC,eAAO,MAAM,eAAe,QAAyB,CAAC;AACtD,eAAO,MAAM,cAAc,QAAuB,CAAC;AACnD,eAAO,MAAM,gBAAgB,QAAsB,CAAC;AACpD,eAAO,MAAM,eAAe,QAAuB,CAAC"}

package/dist/types/ui/RelativeTime/utils/formatHumanTime.d.ts

@@ -0,0 +1,21 @@
+import { Temporal } from "@js-temporal/polyfill";
+type FormatterOptions = {
+    /** The threshold in seconds for considering the time as "now". */
+    nowThreshold: number;
+    /** The keyword to use for "now". */
+    nowKeyword: string;
+    /**
+     * The Intl.RelativeTimeFormat instance to use for formatting.
+     * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat
+     */
+    relativeTimeFormat: Intl.RelativeTimeFormat;
+};
+/**
+ * Formats a given instant as a human-readable time relative to the current time.
+ * @param instant The instant to format.
+ * @param options The options to use for formatting.
+ * @returns A human-readable relative time string
+ */
+declare function formatHumanTime(instant: Temporal.Instant, options: FormatterOptions): string;
+export default formatHumanTime;
+//# sourceMappingURL=formatHumanTime.d.ts.map

package/dist/types/ui/RelativeTime/utils/formatHumanTime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatHumanTime.d.ts","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/formatHumanTime.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,KAAK,gBAAgB,GAAG;IACtB,kEAAkE;IAClE,YAAY,EAAE,MAAM,CAAC;IAErB,oCAAoC;IACpC,UAAU,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,kBAAkB,EAAE,IAAI,CAAC,kBAAkB,CAAC;CAC7C,CAAC;AAEF;;;;;GAKG;AACH,iBAAS,eAAe,CACtB,OAAO,EAAE,QAAQ,CAAC,OAAO,EACzB,OAAO,EAAE,gBAAgB,GACxB,MAAM,CAwCR;AAED,eAAe,eAAe,CAAC"}

package/dist/types/ui/RelativeTime/utils/getOptimalUpdateInterval.d.ts

@@ -0,0 +1,8 @@
+import { Temporal } from "@js-temporal/polyfill";
+/**
+ * Calcualte the optimal update interval for a given instant based on the time distance from now.
+ * @returns The optimal update interval in milliseconds.
+ */
+declare function getOptimalUpdateInterval(instant: Temporal.Instant): number;
+export default getOptimalUpdateInterval;
+//# sourceMappingURL=getOptimalUpdateInterval.d.ts.map

package/dist/types/ui/RelativeTime/utils/getOptimalUpdateInterval.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getOptimalUpdateInterval.d.ts","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/getOptimalUpdateInterval.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD;;;GAGG;AACH,iBAAS,wBAAwB,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,GAAG,MAAM,CAkBnE;AAED,eAAe,wBAAwB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/types/ui/RelativeTime/utils/parseInstant.d.ts

@@ -0,0 +1,9 @@
+import { Temporal } from "@js-temporal/polyfill";
+/**
+ * Parser for Temporal.Instant.
+ * @param time - instance, date or string to parse
+ * @throws Error if time is invalid
+ */
+declare function parseInstant(time: Temporal.Instant | Date | string): Temporal.Instant;
+export default parseInstant;
+//# sourceMappingURL=parseInstant.d.ts.map

package/dist/types/ui/RelativeTime/utils/parseInstant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseInstant.d.ts","sourceRoot":"","sources":["../../../../../src/ui/RelativeTime/utils/parseInstant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;;GAIG;AACH,iBAAS,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC,OAAO,GAAG,IAAI,GAAG,MAAM,oBAc3D;AAED,eAAe,YAAY,CAAC"}

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

@@ -1,2 +1,6 @@
-export { Button, type ButtonProps } from "./Button/index.js";
+export * from "./EditableBlock/index.js";
+export * from "./FileTree/index.js";
+export * from "./GitDiffViewer/index.js";
+export * from "./MarkdownEditor/index.js";
+export * from "./RelativeTime/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;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-ds-app-launchpad",
-  "version": "0.7.1-experimental.0",
+  "version": "0.9.0-experimental.10",
   "type": "module",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
@@ -24,12 +24,12 @@
     "build": "bun run build:package",
     "build:storybook": "storybook build",
     "build:package": "bun run build:package:tsc && bun run build:package:copycss",
-    "build:package:copycss": "copyfiles -u 1 src/ui/**/*.css dist/esm",
+    "build:package:copycss": "copyfiles -u 1 'src/ui/{,**/}*.css' dist/esm",
     "build:package:tsc": "tsc -p tsconfig.build.json",
     "check": "bun run check:biome && bun run check:ts",
     "check:fix": "bun run check:biome:fix && bun run check:ts",
-    "check:biome": "biome check src *.json",
-    "check:biome:fix": "biome check --write src *.json",
+    "check:biome": "biome check",
+    "check:biome:fix": "biome check --write",
     "check:ts": "tsc --noEmit",
     "storybook": "storybook dev -p 6006 --no-open --host 0.0.0.0",
     "test": "bun run test:vitest",
@@ -38,24 +38,25 @@
     "test:vitest:watch": "vitest"
   },
   "dependencies": {
-    "@canonical/storybook-addon-baseline-grid": "^0.6.0-experimental.0",
-    "@canonical/styles": "^0.6.0-experimental.0",
+    "@canonical/storybook-config": "^0.9.0-experimental.5",
+    "@canonical/styles": "^0.9.0-experimental.9",
+    "@canonical/utils": "^0.9.0-experimental.9",
+    "@js-temporal/polyfill": "^0.4.4",
+    "highlight.js": "^11.11.1",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-markdown": "^10.0.0",
+    "react-tooltip": "^5.28.0",
+    "rehype-sanitize": "^6.0.0",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
-    "@canonical/biome-config": "^0.4.0-experimental.0",
-    "@canonical/typescript-config-react": "^0.4.0-experimental.0",
+    "@canonical/biome-config": "^0.9.0-experimental.2",
+    "@canonical/typescript-config-react": "^0.9.0-experimental.2",
     "@chromatic-com/storybook": "^3.2.2",
-    "@storybook/addon-essentials": "^8.4.7",
-    "@storybook/addon-interactions": "^8.4.7",
-    "@storybook/addon-links": "^8.4.7",
-    "@storybook/addon-onboarding": "^8.4.7",
-    "@storybook/addon-themes": "^8.4.7",
     "@storybook/blocks": "^8.4.7",
     "@storybook/react": "^8.4.7",
-    "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
@@ -64,13 +65,13 @@
     "@types/react-dom": "^19.0.2",
     "@vitejs/plugin-react": "^4.3.4",
     "copyfiles": "^2.4.1",
-    "globals": "^15.13.0",
-    "jsdom": "^25.0.1",
+    "globals": "^16.0.0",
+    "jsdom": "^26.0.0",
     "storybook": "^8.4.7",
     "typescript": "^5.7.2",
     "vite": "^6.0.3",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^2.1.8"
+    "vitest": "^3.0.9"
   },
-  "gitHead": "636cd2e447a1f2bb67e636169d6cbb5171e6fca6"
+  "gitHead": "9f5cceda31194238d239de8113a3f035b06c9316"
 }

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"}