@servicetitan/anvil2-ext-atlas 2.0.2 → 2.1.0

package/dist/artifact-card-Df6YXh4B.js

@@ -0,0 +1,1538 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useState, useEffect, useMemo, forwardRef, useRef } from 'react';
+import { c as classNames } from './index-DDXI3m_u.js';
+import { Text, Flex, Icon } from '@servicetitan/anvil2';
+
+import './artifact-card.css';function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+var classnames = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+var hasRequiredClassnames;
+
+function requireClassnames () {
+	if (hasRequiredClassnames) return classnames.exports;
+	hasRequiredClassnames = 1;
+	(function (module) {
+		/* global define */
+
+		(function () {
+
+			var hasOwn = {}.hasOwnProperty;
+
+			function classNames () {
+				var classes = '';
+
+				for (var i = 0; i < arguments.length; i++) {
+					var arg = arguments[i];
+					if (arg) {
+						classes = appendClass(classes, parseValue(arg));
+					}
+				}
+
+				return classes;
+			}
+
+			function parseValue (arg) {
+				if (typeof arg === 'string' || typeof arg === 'number') {
+					return arg;
+				}
+
+				if (typeof arg !== 'object') {
+					return '';
+				}
+
+				if (Array.isArray(arg)) {
+					return classNames.apply(null, arg);
+				}
+
+				if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+					return arg.toString();
+				}
+
+				var classes = '';
+
+				for (var key in arg) {
+					if (hasOwn.call(arg, key) && arg[key]) {
+						classes = appendClass(classes, key);
+					}
+				}
+
+				return classes;
+			}
+
+			function appendClass (value, newClass) {
+				if (!newClass) {
+					return value;
+				}
+			
+				if (value) {
+					return value + ' ' + newClass;
+				}
+			
+				return value + newClass;
+			}
+
+			if (module.exports) {
+				classNames.default = classNames;
+				module.exports = classNames;
+			} else {
+				window.classNames = classNames;
+			}
+		}()); 
+	} (classnames));
+	return classnames.exports;
+}
+
+var classnamesExports = requireClassnames();
+const cx = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+
+/**
+ * @typedef {Object} TokenValue
+ * @property {string} value
+ */
+
+/**
+ * @typedef {Object} TokenWithAppearance
+ * @property {string} value
+ * @property {Object} extensions
+ * @property {Object} extensions.appearance
+ * @property {Object} extensions.appearance.dark
+ * @property {string} extensions.appearance.dark.value
+ */
+
+/**
+ * @type {TokenValue}
+ */
+const BreakpointSm = { value: "640px" };
+/**
+ * @type {TokenValue}
+ */
+const BreakpointMd = { value: "768px" };
+/**
+ * @type {TokenValue}
+ */
+const BreakpointLg = { value: "1024px" };
+/**
+ * @type {TokenValue}
+ */
+const BreakpointXl = { value: "1280px" };
+/**
+ * @type {TokenValue}
+ */
+const BreakpointXxl = { value: "1536px" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral0 = { value: "#ffffff" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral10 = { value: "#fcfcfc" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral20 = { value: "#f9f9f9" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral30 = { value: "#f6f6f6" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral40 = { value: "#f1f1f1" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral50 = { value: "#eeeeee" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral60 = { value: "#ededed" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral70 = { value: "#e8e8e8" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral80 = { value: "#e6e6e6" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral90 = { value: "#e5e5e5" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral100 = { value: "#dfdfdf" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral200 = { value: "#c4c4c4" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral300 = { value: "#a8a8a8" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral400 = { value: "#8b8b8b" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral500 = { value: "#707070" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral600 = { value: "#545454" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral700 = { value: "#404040" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral800 = { value: "#292929" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral900 = { value: "#1a1a1a" };
+/**
+ * @type {TokenValue}
+ */
+const ColorNeutral950 = { value: "#040404" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlue10 = { value: "#fafcff" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlue50 = { value: "#e6f1ff" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlue100 = { value: "#cce3ff" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlue200 = { value: "#9ecaff" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlue300 = { value: "#70b1ff" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlue400 = { value: "#3d95ff" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlue500 = { value: "#1a82ff" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlue600 = { value: "#0265dc" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlue700 = { value: "#1d4ca3" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlue800 = { value: "#003472" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlue900 = { value: "#002047" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlue950 = { value: "#000b19" };
+/**
+ * @type {TokenValue}
+ */
+const ColorRed10 = { value: "#fffbfa" };
+/**
+ * @type {TokenValue}
+ */
+const ColorRed50 = { value: "#ffe9e5" };
+/**
+ * @type {TokenValue}
+ */
+const ColorRed100 = { value: "#ffd4cc" };
+/**
+ * @type {TokenValue}
+ */
+const ColorRed200 = { value: "#ffac9e" };
+/**
+ * @type {TokenValue}
+ */
+const ColorRed300 = { value: "#ff8670" };
+/**
+ * @type {TokenValue}
+ */
+const ColorRed400 = { value: "#ff5b3d" };
+/**
+ * @type {TokenValue}
+ */
+const ColorRed500 = { value: "#ff3914" };
+/**
+ * @type {TokenValue}
+ */
+const ColorRed600 = { value: "#d62100" };
+/**
+ * @type {TokenValue}
+ */
+const ColorRed700 = { value: "#a31900" };
+/**
+ * @type {TokenValue}
+ */
+const ColorRed800 = { value: "#731100" };
+/**
+ * @type {TokenValue}
+ */
+const ColorRed900 = { value: "#470b00" };
+/**
+ * @type {TokenValue}
+ */
+const ColorRed950 = { value: "#0a0200" };
+/**
+ * @type {TokenValue}
+ */
+const ColorGreen10 = { value: "#f5fefb" };
+/**
+ * @type {TokenValue}
+ */
+const ColorGreen50 = { value: "#d3fded" };
+/**
+ * @type {TokenValue}
+ */
+const ColorGreen100 = { value: "#b8f5dd" };
+/**
+ * @type {TokenValue}
+ */
+const ColorGreen200 = { value: "#70ebbc" };
+/**
+ * @type {TokenValue}
+ */
+const ColorGreen300 = { value: "#3be3a2" };
+/**
+ * @type {TokenValue}
+ */
+const ColorGreen400 = { value: "#0bd085" };
+/**
+ * @type {TokenValue}
+ */
+const ColorGreen500 = { value: "#0aa86c" };
+/**
+ * @type {TokenValue}
+ */
+const ColorGreen600 = { value: "#077e50" };
+/**
+ * @type {TokenValue}
+ */
+const ColorGreen700 = { value: "#05613e" };
+/**
+ * @type {TokenValue}
+ */
+const ColorGreen800 = { value: "#04482e" };
+/**
+ * @type {TokenValue}
+ */
+const ColorGreen900 = { value: "#022c1c" };
+/**
+ * @type {TokenValue}
+ */
+const ColorGreen950 = { value: "#010f0a" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlueGrey10 = { value: "#f7f9fa" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlueGrey50 = { value: "#e9eef2" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlueGrey100 = { value: "#dce4ea" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlueGrey200 = { value: "#b9c9d5" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlueGrey300 = { value: "#99b1c2" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlueGrey400 = { value: "#7899b0" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlueGrey500 = { value: "#55768e" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlueGrey600 = { value: "#445e71" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlueGrey700 = { value: "#344856" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlueGrey800 = { value: "#24333d" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlueGrey900 = { value: "#192329" };
+/**
+ * @type {TokenValue}
+ */
+const ColorBlueGrey950 = { value: "#090d10" };
+/**
+ * @type {TokenValue}
+ */
+const ColorOrange10 = { value: "#fff8f1" };
+/**
+ * @type {TokenValue}
+ */
+const ColorOrange50 = { value: "#ffecd6" };
+/**
+ * @type {TokenValue}
+ */
+const ColorOrange100 = { value: "#ffddb7" };
+/**
+ * @type {TokenValue}
+ */
+const ColorOrange200 = { value: "#ffc07a" };
+/**
+ * @type {TokenValue}
+ */
+const ColorOrange300 = { value: "#ffa037" };
+/**
+ * @type {TokenValue}
+ */
+const ColorOrange400 = { value: "#e37700" };
+/**
+ * @type {TokenValue}
+ */
+const ColorOrange500 = { value: "#c16500" };
+/**
+ * @type {TokenValue}
+ */
+const ColorOrange600 = { value: "#964f00" };
+/**
+ * @type {TokenValue}
+ */
+const ColorOrange700 = { value: "#693700" };
+/**
+ * @type {TokenValue}
+ */
+const ColorOrange800 = { value: "#4d2800" };
+/**
+ * @type {TokenValue}
+ */
+const ColorOrange900 = { value: "#2e1900" };
+/**
+ * @type {TokenValue}
+ */
+const ColorOrange950 = { value: "#140b00" };
+/**
+ * @type {TokenValue}
+ */
+const ColorCyan10 = { value: "#f2fcfe" };
+/**
+ * @type {TokenValue}
+ */
+const ColorCyan50 = { value: "#daf7fc" };
+/**
+ * @type {TokenValue}
+ */
+const ColorCyan100 = { value: "#c2f2fb" };
+/**
+ * @type {TokenValue}
+ */
+const ColorCyan200 = { value: "#7fe5f6" };
+/**
+ * @type {TokenValue}
+ */
+const ColorCyan300 = { value: "#45d8f2" };
+/**
+ * @type {TokenValue}
+ */
+const ColorCyan400 = { value: "#10c2e2" };
+/**
+ * @type {TokenValue}
+ */
+const ColorCyan500 = { value: "#0da2bd" };
+/**
+ * @type {TokenValue}
+ */
+const ColorCyan600 = { value: "#0a7a8e" };
+/**
+ * @type {TokenValue}
+ */
+const ColorCyan700 = { value: "#075563" };
+/**
+ * @type {TokenValue}
+ */
+const ColorCyan800 = { value: "#05424d" };
+/**
+ * @type {TokenValue}
+ */
+const ColorCyan900 = { value: "#032025" };
+/**
+ * @type {TokenValue}
+ */
+const ColorCyan950 = { value: "#011013" };
+/**
+ * @type {TokenValue}
+ */
+const ColorPurple10 = { value: "#fcfbfe" };
+/**
+ * @type {TokenValue}
+ */
+const ColorPurple50 = { value: "#eeecf9" };
+/**
+ * @type {TokenValue}
+ */
+const ColorPurple100 = { value: "#e7e4f6" };
+/**
+ * @type {TokenValue}
+ */
+const ColorPurple200 = { value: "#c9c2eb" };
+/**
+ * @type {TokenValue}
+ */
+const ColorPurple300 = { value: "#b1a7e2" };
+/**
+ * @type {TokenValue}
+ */
+const ColorPurple400 = { value: "#9688d7" };
+/**
+ * @type {TokenValue}
+ */
+const ColorPurple500 = { value: "#7766cc" };
+/**
+ * @type {TokenValue}
+ */
+const ColorPurple600 = { value: "#5c47c2" };
+/**
+ * @type {TokenValue}
+ */
+const ColorPurple700 = { value: "#3f2f8e" };
+/**
+ * @type {TokenValue}
+ */
+const ColorPurple800 = { value: "#2e2267" };
+/**
+ * @type {TokenValue}
+ */
+const ColorPurple900 = { value: "#191338" };
+/**
+ * @type {TokenValue}
+ */
+const ColorPurple950 = { value: "#100c25" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMagenta10 = { value: "#fefbfd" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMagenta50 = { value: "#fae6f3" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMagenta100 = { value: "#f8ddef" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMagenta200 = { value: "#efb3db" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMagenta300 = { value: "#e892cc" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMagenta400 = { value: "#eb61be" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMagenta500 = { value: "#d741a6" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMagenta600 = { value: "#be288d" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMagenta700 = { value: "#831b60" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMagenta800 = { value: "#591342" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMagenta900 = { value: "#26081c" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMagenta950 = { value: "#15040f" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMauves10 = { value: "#fffbfa" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMauves50 = { value: "#fff7f5" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMauves100 = { value: "#fff4f0" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMauves200 = { value: "#ffe4db" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMauves300 = { value: "#ffd1c2" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMauves400 = { value: "#ffaf94" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMauves500 = { value: "#ffa78a" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMauves600 = { value: "#d88569" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMauves700 = { value: "#d27151" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMauves800 = { value: "#823a21" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMauves900 = { value: "#411d11" };
+/**
+ * @type {TokenValue}
+ */
+const ColorMauves950 = { value: "#200e08" };
+/**
+ * @type {TokenValue}
+ */
+const ColorLime10 = { value: "#fdfdfc" };
+/**
+ * @type {TokenValue}
+ */
+const ColorLime50 = { value: "#eaf0db" };
+/**
+ * @type {TokenValue}
+ */
+const ColorLime100 = { value: "#e3eccf" };
+/**
+ * @type {TokenValue}
+ */
+const ColorLime200 = { value: "#c3d595" };
+/**
+ * @type {TokenValue}
+ */
+const ColorLime300 = { value: "#a8c26a" };
+/**
+ * @type {TokenValue}
+ */
+const ColorLime400 = { value: "#8aad39" };
+/**
+ * @type {TokenValue}
+ */
+const ColorLime500 = { value: "#6b9013" };
+/**
+ * @type {TokenValue}
+ */
+const ColorLime600 = { value: "#56750b" };
+/**
+ * @type {TokenValue}
+ */
+const ColorLime700 = { value: "#3a5007" };
+/**
+ * @type {TokenValue}
+ */
+const ColorLime800 = { value: "#2a3a03" };
+/**
+ * @type {TokenValue}
+ */
+const ColorLime900 = { value: "#111801" };
+/**
+ * @type {TokenValue}
+ */
+const ColorLime950 = { value: "#0a0f01" };
+/**
+ * @type {TokenValue}
+ */
+const ColorYellow10 = { value: "#fffef8" };
+/**
+ * @type {TokenValue}
+ */
+const ColorYellow50 = { value: "#fffcf0" };
+/**
+ * @type {TokenValue}
+ */
+const ColorYellow100 = { value: "#fff9e2" };
+/**
+ * @type {TokenValue}
+ */
+const ColorYellow200 = { value: "#fff0b1" };
+/**
+ * @type {TokenValue}
+ */
+const ColorYellow300 = { value: "#ffe278" };
+/**
+ * @type {TokenValue}
+ */
+const ColorYellow400 = { value: "#ffc902" };
+/**
+ * @type {TokenValue}
+ */
+const ColorYellow500 = { value: "#ffbe00" };
+/**
+ * @type {TokenValue}
+ */
+const ColorYellow600 = { value: "#de9500" };
+/**
+ * @type {TokenValue}
+ */
+const ColorYellow700 = { value: "#c98600" };
+/**
+ * @type {TokenValue}
+ */
+const ColorYellow800 = { value: "#704b00" };
+/**
+ * @type {TokenValue}
+ */
+const ColorYellow900 = { value: "#382500" };
+/**
+ * @type {TokenValue}
+ */
+const ColorYellow950 = { value: "#191100" };
+/**
+ * @type {TokenValue}
+ */
+const DurationDefault = { value: "200ms" };
+/**
+ * @type {TokenValue}
+ */
+const DurationInstant = { value: "0ms" };
+/**
+ * @type {TokenValue}
+ */
+const DurationFast = { value: "100ms" };
+/**
+ * @type {TokenValue}
+ */
+const DurationSlow = { value: "300ms" };
+/**
+ * @type {TokenValue}
+ */
+const FontFamilyBase = { value: "'Nunito Sans', sans-serif" };
+/**
+ * @type {TokenValue}
+ */
+const FontFamilyDisplay = { value: "'Sofia Pro', SofiaPro, sans-serif" };
+/**
+ * @type {TokenValue}
+ */
+const FontLineHeightBase = { value: "1.5" };
+/**
+ * @type {TokenValue}
+ */
+const FontLineHeightDisplay = { value: "1.25" };
+/**
+ * @type {TokenValue}
+ */
+const FontWeightNormal = { value: "400" };
+/**
+ * @type {TokenValue}
+ */
+const FontWeightSemibold = { value: "600" };
+/**
+ * @type {TokenValue}
+ */
+const FontWeightBold = { value: "700" };
+/**
+ * @type {TokenValue}
+ */
+const FontSize100 = { value: "0.625rem" };
+/**
+ * @type {TokenValue}
+ */
+const FontSize200 = { value: "0.75rem" };
+/**
+ * @type {TokenValue}
+ */
+const FontSize300 = { value: "0.875rem" };
+/**
+ * @type {TokenValue}
+ */
+const FontSize400 = { value: "1rem" };
+/**
+ * @type {TokenValue}
+ */
+const FontSize500 = { value: "1.25rem" };
+/**
+ * @type {TokenValue}
+ */
+const FontSize600 = { value: "1.5rem" };
+/**
+ * @type {TokenValue}
+ */
+const FontSize700 = { value: "1.75rem" };
+/**
+ * @type {TokenValue}
+ */
+const FontSize800 = { value: "2rem" };
+/**
+ * @type {TokenValue}
+ */
+const FontSize900 = { value: "2.25rem" };
+/**
+ * @type {TokenValue}
+ */
+const Radius0 = { value: "0rem" };
+/**
+ * @type {TokenValue}
+ */
+const Radius1 = { value: "0.1875rem" };
+/**
+ * @type {TokenValue}
+ */
+const Radius2 = { value: "0.375rem" };
+/**
+ * @type {TokenValue}
+ */
+const Radius3 = { value: "0.5625rem" };
+/**
+ * @type {TokenValue}
+ */
+const Radius4 = { value: "0.75rem" };
+/**
+ * @type {TokenValue}
+ */
+const Radius5 = { value: "0.9375rem" };
+/**
+ * @type {TokenValue}
+ */
+const Radius6 = { value: "1.125rem" };
+/**
+ * @type {TokenValue}
+ */
+const Radius7 = { value: "1.3125rem" };
+/**
+ * @type {TokenValue}
+ */
+const Radius8 = { value: "1.5rem" };
+/**
+ * @type {TokenValue}
+ */
+const Size0 = { value: "0rem" };
+/**
+ * @type {TokenValue}
+ */
+const Size1 = { value: "0.25rem" };
+/**
+ * @type {TokenValue}
+ */
+const Size2 = { value: "0.5rem" };
+/**
+ * @type {TokenValue}
+ */
+const Size3 = { value: "0.75rem" };
+/**
+ * @type {TokenValue}
+ */
+const Size4 = { value: "1rem" };
+/**
+ * @type {TokenValue}
+ */
+const Size5 = { value: "1.25rem" };
+/**
+ * @type {TokenValue}
+ */
+const Size6 = { value: "1.5rem" };
+/**
+ * @type {TokenValue}
+ */
+const Size7 = { value: "1.75rem" };
+/**
+ * @type {TokenValue}
+ */
+const Size8 = { value: "2rem" };
+/**
+ * @type {TokenValue}
+ */
+const Size9 = { value: "2.25rem" };
+/**
+ * @type {TokenValue}
+ */
+const Size10 = { value: "2.5rem" };
+/**
+ * @type {TokenValue}
+ */
+const Size11 = { value: "2.75rem" };
+/**
+ * @type {TokenValue}
+ */
+const Size12 = { value: "3rem" };
+/**
+ * @type {TokenValue}
+ */
+const Size13 = { value: "3.25rem" };
+/**
+ * @type {TokenValue}
+ */
+const Size14 = { value: "3.5rem" };
+/**
+ * @type {TokenValue}
+ */
+const SizeQuarter = { value: "0.0625rem" };
+/**
+ * @type {TokenValue}
+ */
+const SizeHalf = { value: "0.125rem" };
+/**
+ * @type {TokenValue}
+ */
+const TransitionEase = { value: "cubic-bezier(.4, 0, .2, 1)" };
+/**
+ * @type {TokenValue}
+ */
+const TransitionEaseIn = { value: "cubic-bezier(.4, 0, 1, 1)" };
+/**
+ * @type {TokenValue}
+ */
+const TransitionEaseOut = { value: "cubic-bezier(0, 0, .4, 1)" };
+/**
+ * @type {TokenValue}
+ */
+const TransitionEaseInOut = { value: "cubic-bezier(.4, 0, .6, 1)" };
+
+const primitive = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+	__proto__: null,
+	BreakpointLg,
+	BreakpointMd,
+	BreakpointSm,
+	BreakpointXl,
+	BreakpointXxl,
+	ColorBlue10,
+	ColorBlue100,
+	ColorBlue200,
+	ColorBlue300,
+	ColorBlue400,
+	ColorBlue50,
+	ColorBlue500,
+	ColorBlue600,
+	ColorBlue700,
+	ColorBlue800,
+	ColorBlue900,
+	ColorBlue950,
+	ColorBlueGrey10,
+	ColorBlueGrey100,
+	ColorBlueGrey200,
+	ColorBlueGrey300,
+	ColorBlueGrey400,
+	ColorBlueGrey50,
+	ColorBlueGrey500,
+	ColorBlueGrey600,
+	ColorBlueGrey700,
+	ColorBlueGrey800,
+	ColorBlueGrey900,
+	ColorBlueGrey950,
+	ColorCyan10,
+	ColorCyan100,
+	ColorCyan200,
+	ColorCyan300,
+	ColorCyan400,
+	ColorCyan50,
+	ColorCyan500,
+	ColorCyan600,
+	ColorCyan700,
+	ColorCyan800,
+	ColorCyan900,
+	ColorCyan950,
+	ColorGreen10,
+	ColorGreen100,
+	ColorGreen200,
+	ColorGreen300,
+	ColorGreen400,
+	ColorGreen50,
+	ColorGreen500,
+	ColorGreen600,
+	ColorGreen700,
+	ColorGreen800,
+	ColorGreen900,
+	ColorGreen950,
+	ColorLime10,
+	ColorLime100,
+	ColorLime200,
+	ColorLime300,
+	ColorLime400,
+	ColorLime50,
+	ColorLime500,
+	ColorLime600,
+	ColorLime700,
+	ColorLime800,
+	ColorLime900,
+	ColorLime950,
+	ColorMagenta10,
+	ColorMagenta100,
+	ColorMagenta200,
+	ColorMagenta300,
+	ColorMagenta400,
+	ColorMagenta50,
+	ColorMagenta500,
+	ColorMagenta600,
+	ColorMagenta700,
+	ColorMagenta800,
+	ColorMagenta900,
+	ColorMagenta950,
+	ColorMauves10,
+	ColorMauves100,
+	ColorMauves200,
+	ColorMauves300,
+	ColorMauves400,
+	ColorMauves50,
+	ColorMauves500,
+	ColorMauves600,
+	ColorMauves700,
+	ColorMauves800,
+	ColorMauves900,
+	ColorMauves950,
+	ColorNeutral0,
+	ColorNeutral10,
+	ColorNeutral100,
+	ColorNeutral20,
+	ColorNeutral200,
+	ColorNeutral30,
+	ColorNeutral300,
+	ColorNeutral40,
+	ColorNeutral400,
+	ColorNeutral50,
+	ColorNeutral500,
+	ColorNeutral60,
+	ColorNeutral600,
+	ColorNeutral70,
+	ColorNeutral700,
+	ColorNeutral80,
+	ColorNeutral800,
+	ColorNeutral90,
+	ColorNeutral900,
+	ColorNeutral950,
+	ColorOrange10,
+	ColorOrange100,
+	ColorOrange200,
+	ColorOrange300,
+	ColorOrange400,
+	ColorOrange50,
+	ColorOrange500,
+	ColorOrange600,
+	ColorOrange700,
+	ColorOrange800,
+	ColorOrange900,
+	ColorOrange950,
+	ColorPurple10,
+	ColorPurple100,
+	ColorPurple200,
+	ColorPurple300,
+	ColorPurple400,
+	ColorPurple50,
+	ColorPurple500,
+	ColorPurple600,
+	ColorPurple700,
+	ColorPurple800,
+	ColorPurple900,
+	ColorPurple950,
+	ColorRed10,
+	ColorRed100,
+	ColorRed200,
+	ColorRed300,
+	ColorRed400,
+	ColorRed50,
+	ColorRed500,
+	ColorRed600,
+	ColorRed700,
+	ColorRed800,
+	ColorRed900,
+	ColorRed950,
+	ColorYellow10,
+	ColorYellow100,
+	ColorYellow200,
+	ColorYellow300,
+	ColorYellow400,
+	ColorYellow50,
+	ColorYellow500,
+	ColorYellow600,
+	ColorYellow700,
+	ColorYellow800,
+	ColorYellow900,
+	ColorYellow950,
+	DurationDefault,
+	DurationFast,
+	DurationInstant,
+	DurationSlow,
+	FontFamilyBase,
+	FontFamilyDisplay,
+	FontLineHeightBase,
+	FontLineHeightDisplay,
+	FontSize100,
+	FontSize200,
+	FontSize300,
+	FontSize400,
+	FontSize500,
+	FontSize600,
+	FontSize700,
+	FontSize800,
+	FontSize900,
+	FontWeightBold,
+	FontWeightNormal,
+	FontWeightSemibold,
+	Radius0,
+	Radius1,
+	Radius2,
+	Radius3,
+	Radius4,
+	Radius5,
+	Radius6,
+	Radius7,
+	Radius8,
+	Size0,
+	Size1,
+	Size10,
+	Size11,
+	Size12,
+	Size13,
+	Size14,
+	Size2,
+	Size3,
+	Size4,
+	Size5,
+	Size6,
+	Size7,
+	Size8,
+	Size9,
+	SizeHalf,
+	SizeQuarter,
+	TransitionEase,
+	TransitionEaseIn,
+	TransitionEaseInOut,
+	TransitionEaseOut
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const breakpoints = {
+  sm: parseInt(BreakpointSm.value),
+  md: parseInt(BreakpointMd.value),
+  lg: parseInt(BreakpointLg.value),
+  xl: parseInt(BreakpointXl.value),
+  xxl: parseInt(BreakpointXxl.value)
+};
+const areBreakpointsDefined = Object.values(breakpoints).every(
+  (breakpoint2) => breakpoint2
+);
+function getBreakpointFlags(name) {
+  const breakpointOrder = ["xs", "sm", "md", "lg", "xl", "xxl"];
+  const currentIndex = breakpointOrder.indexOf(name);
+  return {
+    xs: currentIndex >= 0,
+    sm: currentIndex >= 1,
+    md: currentIndex >= 2,
+    lg: currentIndex >= 3,
+    xl: currentIndex >= 4,
+    xxl: currentIndex >= 5
+  };
+}
+function breakpoint(name, min, max) {
+  if (globalThis.innerWidth == null || globalThis.innerHeight == null) {
+    return void 0;
+  }
+  const viewportWidth = globalThis.innerWidth;
+  const viewportHeight = globalThis.innerHeight;
+  if ((min == null || viewportWidth >= min) && (max == null || viewportWidth < max)) {
+    return {
+      name,
+      min,
+      max,
+      orientation: viewportHeight > viewportWidth ? "portrait" : "landscape",
+      innerWidth: viewportWidth,
+      innerHeight: viewportHeight,
+      ...getBreakpointFlags(name)
+    };
+  }
+  return void 0;
+}
+const onResize = () => {
+  if (!areBreakpointsDefined) {
+    return;
+  }
+  const { sm, md, lg, xl, xxl } = breakpoints;
+  return breakpoint("xs", void 0, sm) ?? breakpoint("sm", sm, md) ?? breakpoint("md", md, lg) ?? breakpoint("lg", lg, xl) ?? breakpoint("xl", xl, xxl) ?? breakpoint("xxl", xxl, void 0);
+};
+const useBreakpoint = (props) => {
+  const [size, setSize] = useState(onResize);
+  useEffect(() => {
+    if (!areBreakpointsDefined || props?.disable) return;
+    const updateSize = () => {
+      setSize(onResize());
+    };
+    globalThis.addEventListener("resize", updateSize);
+    return () => {
+      globalThis.removeEventListener("resize", updateSize);
+    };
+  }, [props?.disable]);
+  return size;
+};
+
+const sizeToToken = (value) => {
+  if (typeof value === "undefined") return void 0;
+  let gap = value;
+  const stringifiedValue = String(value);
+  if (stringifiedValue === "half") {
+    gap = `${stringifiedValue[0].toUpperCase()}${stringifiedValue.slice(1)}`;
+  }
+  return primitive?.[`Size${gap}`]?.value;
+};
+
+const LAYOUT_PROP_ARR = [
+  "gridTemplateColumns",
+  "gridTemplateRows",
+  "gridTemplateAreas",
+  "gridAutoColumns",
+  "gridAutoRows",
+  "gridArea",
+  "gridColumn",
+  "gridRow",
+  "gridColumnStart",
+  "gridColumnEnd",
+  "gridRowStart",
+  "gridRowEnd",
+  "flex",
+  "flexDirection",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "flexWrap",
+  "order",
+  "justifySelf",
+  "justifyItems",
+  "justifyContent",
+  "alignSelf",
+  "alignItems",
+  "alignContent",
+  "placeItems",
+  "placeContent",
+  "placeSelf",
+  "wrap",
+  "gap",
+  "rowGap",
+  "columnGap"
+];
+const RESPONSIVE_SIZES_ARR = ["xs", "sm", "md", "lg", "xl", "xxl"];
+function useLayoutPropsUtil(props) {
+  const baseSizeProps = Object.fromEntries(
+    Object.entries(props).filter(
+      ([key, _val]) => LAYOUT_PROP_ARR.includes(key)
+    )
+  );
+  const responsiveSizeProps = Object.fromEntries(
+    Object.entries(props).filter(
+      ([key, _val]) => RESPONSIVE_SIZES_ARR.includes(key)
+    )
+  );
+  const sizeProps = useMemo(
+    () => ({
+      ...responsiveSizeProps,
+      base: baseSizeProps
+    }),
+    [baseSizeProps, responsiveSizeProps]
+  );
+  const componentProps = Object.fromEntries(
+    Object.entries(props).filter(
+      ([key, _val]) => !RESPONSIVE_SIZES_ARR.includes(key) && !LAYOUT_PROP_ARR.includes(key)
+    )
+  );
+  const breakpoint = useBreakpoint();
+  const getValue = (style) => {
+    const value = (breakpoint?.xxl ? sizeProps.xxl?.[style] : void 0) ?? (breakpoint?.xl ? sizeProps.xl?.[style] : void 0) ?? (breakpoint?.lg ? sizeProps.lg?.[style] : void 0) ?? (breakpoint?.md ? sizeProps.md?.[style] : void 0) ?? (breakpoint?.sm ? sizeProps.sm?.[style] : void 0) ?? (breakpoint?.xs ? sizeProps.xs?.[style] : void 0) ?? sizeProps.base?.[style];
+    if (style.toLowerCase().endsWith("gap")) {
+      return sizeToToken(value);
+    }
+    return value;
+  };
+  const layoutStyleObject = LAYOUT_PROP_ARR.reduce((o, key) => {
+    const value = getValue(key);
+    if (typeof value === "undefined") return o;
+    return { ...o, [key]: value };
+  }, {});
+  return {
+    layoutStyles: layoutStyleObject,
+    componentProps
+  };
+}
+
+const KEYBOARD_FOCUSABLE_SELECTOR = 'a[href], button, input, textarea, select, details, [contenteditable]:not([contenteditable="false"]), [tabindex]:not([tabindex="-1"])';
+
+const card$1 = "_card_of64j_1";
+const styles$2 = {
+	card: card$1,
+	"card-section": "_card-section_of64j_27",
+	"bg-stronger": "_bg-stronger_of64j_31",
+	"bg-strong": "_bg-strong_of64j_31",
+	"padding-0": "_padding-0_of64j_39",
+	"padding-xsmall": "_padding-xsmall_of64j_45",
+	"padding-small": "_padding-small_of64j_51",
+	"padding-medium": "_padding-medium_of64j_57",
+	"padding-large": "_padding-large_of64j_63"
+};
+
+const Card = forwardRef((props, ref) => {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    children,
+    className,
+    padding = "medium",
+    background,
+    style,
+    ...rest
+  } = componentProps;
+  const cardClassNames = cx(
+    [styles$2["card"]],
+    [styles$2[`padding-${padding}`]],
+    className,
+    {
+      [styles$2[`bg-${background}`]]: !!background
+    }
+  );
+  const styleCombined = {
+    ...style,
+    ...layoutStyles
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cardClassNames,
+      "data-anv": "card",
+      style: styleCombined,
+      ref,
+      ...rest,
+      children
+    }
+  );
+});
+Card.displayName = "Card";
+
+const styles$1 = {
+	"card-wrapper": "_card-wrapper_ogzk8_4",
+	"card-action": "_card-action_ogzk8_14",
+	"bg-stronger": "_bg-stronger_ogzk8_37",
+	"bg-strong": "_bg-strong_ogzk8_37",
+	"card-content": "_card-content_ogzk8_48"
+};
+
+const InteractiveCard = forwardRef(
+  (props, ref) => {
+    const {
+      wrapperProps,
+      actionProps,
+      contentProps = {},
+      children,
+      "data-interactive": dataInteractive
+    } = props;
+    const {
+      "aria-label": ariaLabel,
+      className: wrapperClassName,
+      style: wrapperStyle,
+      ...restWrapperProps
+    } = wrapperProps;
+    const { "aria-label": actionAriaLabel, ...restActionProps } = actionProps;
+    const {
+      padding = "medium",
+      background,
+      className: contentClassName,
+      ...restContentProps
+    } = contentProps;
+    const actionClassNames = cx(styles$1["card-action"], {
+      [styles$1[`bg-${background}`]]: !!background
+    });
+    const contentClassNames = cx(styles$1["card-content"], contentClassName);
+    const wrapperClassNames = cx(styles$1["card-wrapper"], wrapperClassName);
+    const isLink = "href" in restActionProps;
+    const actionRef = useRef(null);
+    const handleWrapperClick = (e) => {
+      const target = e.target;
+      if (target.closest(`label, ${KEYBOARD_FOCUSABLE_SELECTOR}`)) return;
+      const action = actionRef.current;
+      if (!action) return;
+      if (isLink && (e.metaKey || e.ctrlKey || e.shiftKey)) {
+        const href = action.getAttribute("href");
+        if (href) {
+          window.open(href, "_blank", "noopener,noreferrer");
+          return;
+        }
+      }
+      action.click();
+    };
+    const handleWrapperAuxClick = (e) => {
+      if (e.button !== 1 || !isLink) return;
+      const target = e.target;
+      if (target.closest(`label, ${KEYBOARD_FOCUSABLE_SELECTOR}`)) return;
+      const href = actionRef.current?.getAttribute("href");
+      if (href) window.open(href, "_blank", "noopener,noreferrer");
+    };
+    return (
+      // Mouse-only dead-space forwarder. Keyboard users tab to the inner <button>/<a> and activate it natively (Enter/Space)
+      // The wrapper itself is never focused. Adding a keyboard listener here would double-fire the action.
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ...restWrapperProps,
+          role: "group",
+          "aria-label": ariaLabel,
+          className: wrapperClassNames,
+          style: wrapperStyle,
+          ref,
+          onClick: handleWrapperClick,
+          onAuxClick: handleWrapperAuxClick,
+          children: [
+            isLink ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                ...restActionProps,
+                "aria-label": actionAriaLabel,
+                className: actionClassNames,
+                "data-interactive": dataInteractive,
+                ref: actionRef
+              }
+            ) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                ...restActionProps,
+                "aria-label": actionAriaLabel,
+                className: actionClassNames,
+                "data-interactive": dataInteractive,
+                type: "button",
+                ref: actionRef
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Card,
+              {
+                padding,
+                className: contentClassNames,
+                ...restContentProps,
+                children
+              }
+            )
+          ]
+        }
+      )
+    );
+  }
+);
+InteractiveCard.displayName = "InteractiveCard";
+
+const SvgChevronRight = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z" }));
+
+const card = "_card_p94da_1";
+const content = "_content_p94da_9";
+const primary = "_primary_p94da_16";
+const action = "_action_p94da_24";
+const icon = "_icon_p94da_28";
+const title = "_title_p94da_31";
+const styles = {
+	card: card,
+	"card-active": "_card-active_p94da_5",
+	content: content,
+	primary: primary,
+	action: action,
+	icon: icon,
+	title: title
+};
+
+const ArtifactCard = forwardRef(
+  function ArtifactCardInner(props, ref) {
+    const {
+      title,
+      description,
+      active = false,
+      artifactId,
+      onClick,
+      className,
+      ...rest
+    } = props;
+    const wrapperClassName = classNames(
+      styles.card,
+      { [styles["card-active"]]: active },
+      className
+    );
+    return /* @__PURE__ */ jsx(
+      InteractiveCard,
+      {
+        ref,
+        wrapperProps: {
+          ...rest,
+          "aria-label": title,
+          className: wrapperClassName,
+          ...artifactId !== void 0 && { "data-artifact-id": artifactId }
+        },
+        actionProps: {
+          "aria-label": `View ${title}`,
+          onClick
+        },
+        contentProps: { padding: "medium" },
+        children: /* @__PURE__ */ jsxs("div", { className: styles.content, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.primary, children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                variant: "headline",
+                el: "h3",
+                size: "small",
+                className: styles.title,
+                children: title
+              }
+            ),
+            /* @__PURE__ */ jsx(Text, { size: "small", children: description })
+          ] }),
+          /* @__PURE__ */ jsxs(Flex, { alignItems: "center", className: styles.action, children: [
+            /* @__PURE__ */ jsx(Text, { size: "small", subdued: true, children: "View" }),
+            /* @__PURE__ */ jsx(Icon, { svg: SvgChevronRight, size: "large", className: styles.icon })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+
+export { ArtifactCard as A };
+//# sourceMappingURL=artifact-card-Df6YXh4B.js.map