@spaced-out/ui-design-system 0.5.38 → 0.5.40

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.5.40](https://github.com/spaced-out/ui-design-system/compare/v0.5.39...v0.5.40) (2026-01-16)
+
+
+### Bug Fixes
+
+* remove focus within unnecessary specificity ([#455](https://github.com/spaced-out/ui-design-system/issues/455)) ([97c108f](https://github.com/spaced-out/ui-design-system/commit/97c108fedcec080b45d2ad5553f1f5842e61728f))
+
+### [0.5.39](https://github.com/spaced-out/ui-design-system/compare/v0.5.38...v0.5.39) (2026-01-16)
+
+
+### Features
+
+* past chat card component ([#438](https://github.com/spaced-out/ui-design-system/issues/438)) ([6a82638](https://github.com/spaced-out/ui-design-system/commit/6a82638a863dbc9f2950a30414bdf9f784f8a515)), closes [#419](https://github.com/spaced-out/ui-design-system/issues/419) [#440](https://github.com/spaced-out/ui-design-system/issues/440) [#441](https://github.com/spaced-out/ui-design-system/issues/441)
+* preview card component ([#436](https://github.com/spaced-out/ui-design-system/issues/436)) ([447fecd](https://github.com/spaced-out/ui-design-system/commit/447fecd433b200e04c23325f901956aaf037976d))
+
+
+### Bug Fixes
+
+* box shadow and background color for msg ([#454](https://github.com/spaced-out/ui-design-system/issues/454)) ([0acff77](https://github.com/spaced-out/ui-design-system/commit/0acff7762220f9dad7aa7bcc1e145bf12d51a212))
+
 ### [0.5.38](https://github.com/spaced-out/ui-design-system/compare/v0.5.37...v0.5.38) (2025-12-19)
 
 

package/lib/components/PastChatCard/PastChatCard.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { Flow } from 'flow-to-typescript-codemod';
+import { type AlertSemanticType } from '../../types/common';
+import type { IconSize, IconType } from '../../components/Icon';
+type ClassNames = Readonly<{
+    wrapper?: string;
+}>;
+export interface PastChatCardProps {
+    title: string;
+    subTitle: string;
+    iconName?: string;
+    iconType?: IconType;
+    iconSize?: IconSize;
+    semantic?: AlertSemanticType;
+    disabled?: boolean;
+    classNames?: ClassNames;
+    onClick?: (event: React.SyntheticEvent<HTMLDivElement>) => void;
+    testId?: string;
+}
+export declare const PastChatCard: Flow.AbstractComponent<PastChatCardProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=PastChatCard.d.ts.map

package/lib/components/PastChatCard/PastChatCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PastChatCard.d.ts","sourceRoot":"","sources":["../../../src/components/PastChatCard/PastChatCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,EAAiB,KAAK,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAKxE,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAO5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAC/C,iBAAiB,EACjB,cAAc,CAyEf,CAAC"}

package/lib/components/PastChatCard/PastChatCard.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PastChatCard = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _common = require("../../types/common");
+var _typography = require("../../types/typography");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _PastChatCardModule = _interopRequireDefault(require("./PastChatCard.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const PastChatCard = exports.PastChatCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    title,
+    subTitle,
+    iconName,
+    iconType = _Icon.ICON_TYPE.solid,
+    iconSize = _Icon.ICON_SIZE.small,
+    semantic = _common.ALERT_SEMANTIC.neutral,
+    disabled = false,
+    classNames,
+    onClick,
+    testId
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: ref,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
+    className: (0, _classify.default)(_PastChatCardModule.default.card, {
+      [_PastChatCardModule.default.disabled]: disabled
+    }, classNames?.wrapper),
+    onClick: onClick,
+    tabIndex: disabled ? -1 : 0,
+    onKeyDown: e => e.key === 'Enter' && onClick?.(e),
+    "aria-disabled": disabled,
+    children: [iconName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.SemanticIcon, {
+      name: iconName,
+      type: iconType,
+      size: iconSize,
+      semantic: disabled ? _common.ALERT_SEMANTIC.neutral : semantic,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'icon-element'
+      }),
+      classNames: {
+        wrapper: _PastChatCardModule.default.semanticIcon
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _PastChatCardModule.default.textContent,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'content'
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyMediumBold, {
+        className: _PastChatCardModule.default.title,
+        color: disabled ? _typography.TEXT_COLORS.disabled : _typography.TEXT_COLORS.primary,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'title'
+        }),
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
+        className: _PastChatCardModule.default.subTitle,
+        color: disabled ? _typography.TEXT_COLORS.disabled : _typography.TEXT_COLORS.secondary,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'subtitle'
+        }),
+        children: subTitle
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+      name: "chevron-right",
+      size: _Icon.ICON_SIZE.small,
+      color: disabled ? _typography.TEXT_COLORS.disabled : _typography.TEXT_COLORS.tertiary,
+      className: _PastChatCardModule.default.chevronIcon,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'chevron-icon'
+      })
+    })]
+  });
+});
+PastChatCard.displayName = 'PastChatCard';

package/lib/components/PastChatCard/PastChatCard.module.css

@@ -0,0 +1,83 @@
+@value (
+  spaceSmall,
+  spaceXSmall,
+  spaceXXSmall
+) from '../../styles/variables/_space.css';
+
+@value (
+  colorBorderPrimary,
+  colorBorderTertiary,
+  colorBackgroundTertiary,
+  colorBackgroundPrimary,
+  colorFocusPrimary,
+  colorTextClickable
+) from '../../styles/variables/_color.css';
+
+@value (
+  borderWidthPrimary,
+  borderWidthTertiary,
+  borderWidthNone,
+  borderRadiusSmall
+) from '../../styles/variables/_border.css';
+
+@value (
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+.card {
+  display: flex;
+  align-items: center;
+  gap: spaceXSmall;
+  padding: spaceSmall;
+  background-color: colorBackgroundTertiary;
+  composes: borderPrimary from '../../styles/border.module.css';
+  border-radius: borderRadiusSmall;
+  cursor: pointer;
+  width: sizeFluid;
+  min-width: fit-content;
+
+  &:focus {
+    border-color: colorTextClickable;
+    box-shadow: borderWidthNone borderWidthNone borderWidthNone
+      borderWidthTertiary colorFocusPrimary;
+    outline: none;
+  }
+
+  &:hover {
+    background-color: colorBackgroundPrimary;
+
+    &:not(:focus) {
+      border-color: colorBorderTertiary;
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+
+.textContent {
+  display: flex;
+  flex-direction: column;
+  gap: spaceXXSmall;
+  flex: 1;
+}
+
+.title,
+.subTitle {
+  width: sizeFluid;
+}
+
+.chevronIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.semanticIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: borderRadiusSmall;
+}

package/lib/components/PastChatCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../../components/PastChatCard/PastChatCard';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/PastChatCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PastChatCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,0CAA0C,CAAC"}

package/lib/components/PastChatCard/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _PastChatCard = require("./PastChatCard");
+Object.keys(_PastChatCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PastChatCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PastChatCard[key];
+    }
+  });
+});

package/lib/components/PreviewCard/PreviewCard.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import type { Flow } from 'flow-to-typescript-codemod';
+import type { ColorTypes } from '../../types/typography';
+import type { IconSize, IconType } from '../../components/Icon';
+type ClassNames = Readonly<{
+    wrapper?: string;
+    card?: string;
+    titleText?: string;
+    previewText?: string;
+    cardIconSection?: string;
+    helperText?: string;
+}>;
+export interface PreviewCardProps {
+    title: string;
+    previewText: string;
+    cardImgIconName?: string;
+    isSelected: boolean;
+    disabled?: boolean;
+    onClick?: (e: React.SyntheticEvent<HTMLElement>) => unknown;
+    helperTextIconName?: string;
+    helperTextIconColor?: ColorTypes;
+    helperTextIconType?: IconType;
+    helperTextIconSize?: IconSize;
+    helperText?: string;
+    classNames?: ClassNames;
+    testId?: string;
+}
+export declare const PreviewCard: Flow.AbstractComponent<PreviewCardProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=PreviewCard.d.ts.map

package/lib/components/PreviewCard/PreviewCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewCard.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewCard/PreviewCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAKrD,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAQ5D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC;IAC5D,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACjC,kBAAkB,CAAC,EAAE,QAAQ,CAAC;IAC9B,kBAAkB,CAAC,EAAE,QAAQ,CAAC;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAC9C,gBAAgB,EAChB,cAAc,CAiJf,CAAC"}

package/lib/components/PreviewCard/PreviewCard.js

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PreviewCard = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _typography = require("../../types/typography");
+var _classify = require("../../utils/classify");
+var _qa = require("../../utils/qa");
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _TruncatedTextWithTooltip = require("../TruncatedTextWithTooltip");
+var _PreviewCardModule = _interopRequireDefault(require("./PreviewCard.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const PreviewCard = exports.PreviewCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    title,
+    previewText,
+    cardImgIconName = 'sparkles',
+    isSelected,
+    disabled = false,
+    onClick,
+    helperTextIconName = '',
+    helperTextIconColor = _typography.TEXT_COLORS.primary,
+    helperTextIconType = _Icon.ICON_TYPE.regular,
+    helperTextIconSize = _Icon.ICON_SIZE.small,
+    helperText,
+    classNames,
+    testId
+  } = _ref;
+  const handleClick = e => {
+    onClick?.(e);
+  };
+  const handleKeyDown = e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onClick?.(e);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: ref,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
+    className: (0, _classify.classify)(_PreviewCardModule.default.wrapper, classNames?.wrapper),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classify.classify)(_PreviewCardModule.default.card, {
+        [_PreviewCardModule.default.selected]: isSelected,
+        [_PreviewCardModule.default.disabled]: disabled
+      }, classNames?.card),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      tabIndex: disabled ? -1 : 0,
+      role: "button",
+      "aria-pressed": isSelected,
+      "aria-disabled": disabled,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'card'
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _PreviewCardModule.default.cardContent,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: _PreviewCardModule.default.mainContent,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
+            color: disabled ? _typography.TEXT_COLORS.disabled : _typography.TEXT_COLORS.primary,
+            className: (0, _classify.classify)(_PreviewCardModule.default.titleText, classNames?.titleText),
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'title-link'
+            }),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TruncatedTextWithTooltip.TruncatedTextWithTooltip, {
+              line: 1,
+              tooltip: {
+                delayMotionDuration: 'normal'
+              },
+              classNames: {
+                wrapper: _PreviewCardModule.default.titleTruncateWrapper
+              },
+              testId: (0, _qa.generateTestId)({
+                base: testId,
+                slot: 'title-tooltip'
+              }),
+              children: title
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: _PreviewCardModule.default.previewTextContainer,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.ButtonTextExtraSmall, {
+              color: disabled ? _typography.TEXT_COLORS.disabled : _typography.TEXT_COLORS.tertiary,
+              testId: (0, _qa.generateTestId)({
+                base: testId,
+                slot: 'preview-link-text'
+              }),
+              className: (0, _classify.classify)(_PreviewCardModule.default.previewText, classNames?.previewText),
+              children: previewText
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+              name: "chevron-right",
+              size: _Icon.ICON_SIZE.small,
+              color: disabled ? _typography.TEXT_COLORS.disabled : _typography.TEXT_COLORS.tertiary,
+              testId: (0, _qa.generateTestId)({
+                base: testId,
+                slot: 'preview-chevron'
+              })
+            })]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classify.classify)(_PreviewCardModule.default.cardIconSection, classNames?.cardIconSection),
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'card-icon'
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+            name: cardImgIconName,
+            type: _Icon.ICON_TYPE.solid,
+            size: _Icon.ICON_SIZE.small,
+            color: disabled ? _typography.TEXT_COLORS.disabled : isSelected ? _typography.TEXT_COLORS.clickable : _typography.TEXT_COLORS.inverseSecondary,
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'card-icon-image'
+            })
+          })
+        })]
+      })
+    }), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classify.classify)(_PreviewCardModule.default.helperText, classNames?.helperText),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'helper-text'
+      }),
+      children: [helperTextIconName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+        name: helperTextIconName,
+        type: helperTextIconType,
+        size: helperTextIconSize,
+        color: helperTextIconColor,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'helper-text-icon'
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.ButtonTextExtraSmall, {
+        color: _typography.TEXT_COLORS.tertiary,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'helper-text-label'
+        }),
+        children: helperText
+      })]
+    })]
+  });
+});
+PreviewCard.displayName = 'PreviewCard';

package/lib/components/PreviewCard/PreviewCard.module.css

@@ -0,0 +1,216 @@
+@value (
+  spaceSmall,
+  spaceXSmall,
+  spaceXXSmall,
+  spaceXLarge,
+  spaceNone
+) from '../../styles/variables/_space.css';
+
+@value (
+  colorBorderPrimary,
+  colorBackgroundTertiary,
+  colorNeutralLightest,
+  colorFillSecondary,
+  colorInformationLightest,
+  colorFillPrimary,
+  colorInformation,
+  colorTextClickable,
+  colorFocusPrimary,
+  colorDataViz1,
+  colorDataViz2,
+  colorTextDisabled
+) from '../../styles/variables/_color.css';
+
+@value (
+  borderRadiusSmall,
+  borderRadiusMedium,
+  borderWidthPrimary,
+  borderWidthTertiary,
+  borderWidthNone
+) from '../../styles/variables/_border.css';
+
+@value (
+  shadowBoxShadow1X,
+  shadowBoxShadow1Y,
+  shadowBoxShadow1Blur,
+  shadowBoxShadow2X,
+  shadowBoxShadow2Y,
+  shadowBoxShadow2Blur,
+  shadowBoxShadow1Spread,
+  shadowBoxShadow1Color,
+  shadowBoxShadow4Spread
+) from '../../styles/variables/_shadow.css';
+
+@value (
+  sizeFluid,
+  size66,
+  size50,
+  size4,
+  size120,
+  size10
+) from '../../styles/variables/_size.css';
+
+@value (
+  motionDurationNormal,
+  motionDurationSlow,
+  motionEaseInEaseOut
+) from '../../styles/variables/_motion.css';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: spaceXSmall;
+  width: sizeFluid;
+}
+
+.previewTextContainer {
+  display: flex;
+  align-items: center;
+  gap: spaceXXSmall;
+}
+
+.card {
+  background-color: colorBackgroundTertiary;
+  border: borderWidthPrimary solid colorBorderPrimary;
+  border-radius: borderRadiusMedium;
+  cursor: pointer;
+  outline: none;
+  transition: all motionDurationNormal motionEaseInEaseOut;
+  width: sizeFluid;
+  min-height: fit-content;
+  overflow: hidden;
+
+  &:focus {
+    border-color: colorTextClickable;
+    box-shadow: borderWidthNone borderWidthNone borderWidthNone
+      borderWidthTertiary colorFocusPrimary;
+  }
+
+  &:hover:not(:focus) {
+    box-shadow: shadowBoxShadow1X shadowBoxShadow1Y shadowBoxShadow1Blur
+      shadowBoxShadow1Spread shadowBoxShadow1Color;
+    background-color: colorNeutralLightest;
+    border-color: transparent;
+    background-image: linear-gradient(
+        colorNeutralLightest,
+        colorNeutralLightest
+      ),
+      linear-gradient(to right, colorDataViz2, colorDataViz1);
+    background-clip: content-box, border-box;
+    background-origin: border-box;
+  }
+
+  &:focus:hover {
+    box-shadow: borderWidthNone borderWidthNone borderWidthNone
+      borderWidthTertiary colorFocusPrimary;
+    background-color: colorNeutralLightest;
+  }
+
+  &.selected {
+    border: borderWidthPrimary solid transparent;
+    border-radius: borderRadiusMedium;
+    background-image: linear-gradient(
+        colorFillSecondary,
+        colorInformationLightest
+      ),
+      linear-gradient(to right, colorFillPrimary, colorInformation);
+    background-clip: content-box, border-box;
+    background-origin: border-box;
+    box-shadow: none;
+
+    &:focus {
+      box-shadow: borderWidthNone borderWidthNone borderWidthNone
+        borderWidthTertiary colorFocusPrimary;
+      border-color: colorTextClickable;
+    }
+
+    &:focus:hover {
+      background-image: linear-gradient(
+        colorNeutralLightest,
+        colorNeutralLightest
+      );
+    }
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+    pointer-events: none;
+    background-color: colorBackgroundTertiary;
+    border: borderWidthPrimary solid colorBorderPrimary;
+  }
+}
+
+.cardContent {
+  display: flex;
+  align-items: flex-start;
+  padding: spaceSmall;
+  gap: spaceSmall;
+  position: relative;
+  min-height: size66;
+}
+
+.mainContent {
+  display: flex;
+  flex-direction: column;
+  gap: spaceXSmall;
+  flex: 1;
+  min-width: spaceNone;
+  padding-right: calc(spaceXLarge + spaceXSmall + spaceSmall);
+}
+
+.titleText {
+  width: sizeFluid;
+}
+
+.previewText {
+  width: fit-content;
+}
+
+.cardIconSection {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  height: calc(size120 + size10);
+  width: calc(size50 + size4);
+  flex-shrink: 0;
+  border-radius: borderRadiusSmall;
+  background-color: colorNeutralLightest;
+  border: borderWidthPrimary solid colorBorderPrimary;
+  transition: all motionDurationSlow motionEaseInEaseOut;
+  transform: rotate(-3deg);
+  padding-top: spaceSmall;
+  position: absolute;
+  right: spaceXSmall;
+  box-shadow: shadowBoxShadow2X shadowBoxShadow2Y shadowBoxShadow2Blur
+    shadowBoxShadow4Spread shadowBoxShadow1Color;
+}
+
+.card:hover .cardIconSection {
+  transform: rotate(5deg);
+}
+
+.card.selected .cardIconSection,
+.card:hover .cardIconSection {
+  border: borderWidthPrimary solid colorBorderPrimary;
+  background-image: linear-gradient(
+    colorBackgroundTertiary,
+    colorBackgroundTertiary
+  );
+  background-clip: border-box;
+  background-origin: border-box;
+}
+
+.card.selected .cardIconSection > div,
+.card:hover .cardIconSection > div {
+  color: colorTextClickable;
+}
+
+.card.disabled .cardIconSection > div {
+  color: colorTextDisabled;
+}
+
+.helperText {
+  display: flex;
+  align-items: center;
+  gap: spaceXXSmall;
+}

package/lib/components/PreviewCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../../components/PreviewCard/PreviewCard';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/PreviewCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,wCAAwC,CAAC"}

package/lib/components/PreviewCard/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _PreviewCard = require("./PreviewCard");
+Object.keys(_PreviewCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PreviewCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PreviewCard[key];
+    }
+  });
+});

package/lib/components/TokenListInput/TokenListInput.module.css

@@ -43,44 +43,42 @@
   flex: 0 0 auto;
   overflow: auto;
   cursor: pointer;
+  border: borderWidthPrimary solid colorBorderPrimary;
 }
 
 .box:not(.withError):not(.inputDisabled):not(.inputLocked):not(.inputHidden) {
-  border: borderWidthPrimary solid colorBorderPrimary;
+  border-color: colorBorderPrimary;
 }
 
 .box:not(.withError):not(.inputDisabled):not(.inputLocked):not(
     .inputHidden
   ):hover {
-  border: borderWidthPrimary solid colorBorderTertiary;
+  border-color: colorBorderTertiary;
 }
 
-.box:not(.withError):not(.inputDisabled):not(.inputLocked):not(
-    .inputHidden
-  ):focus-within {
-  border: borderWidthPrimary solid colorFillPrimary;
+.box:focus-within {
+  border-color: colorFillPrimary;
   box-shadow: borderWidthNone borderWidthNone borderWidthNone
     borderWidthTertiary colorFocusPrimary;
 }
 
 .box.withError {
-  border: borderWidthPrimary solid colorBorderDanger;
+  border-color: colorBorderDanger;
 }
 
 .box.withError:focus-within {
-  border: borderWidthPrimary solid colorBorderDanger;
+  border-color: colorBorderDanger;
   box-shadow: borderWidthNone borderWidthNone borderWidthNone
     borderWidthTertiary colorFocusDanger;
 }
 
 .box.inputLocked {
-  border: borderWidthPrimary solid colorBorderPrimary;
+  border-color: colorBorderPrimary;
   border-style: dashed;
 }
 
 .box.inputDisabled {
-  border: borderWidthPrimary solid colorBorderPrimary;
-  background-color: colorFillDisabled;
+  border-color: colorBorderPrimary;
 }
 
 .tokenListContainer {

package/lib/components/index.d.ts

@@ -45,6 +45,8 @@ export * from '../components/OptionButton';
 export * from '../components/PageTitle';
 export * from '../components/Pagination';
 export * from '../components/Panel';
+export * from '../components/PreviewCard';
+export * from '../components/PastChatCard';
 export * from '../components/ProgressDonut';
 export * from '../components/PromptChip';
 export * from '../components/PromptInput';

package/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mCAAmC,CAAC;AAClD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mDAAmD,CAAC;AAClE,cAAc,iCAAiC,CAAC;AAChD,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,yBAAyB,CAAC;AACxC,cAAc,mCAAmC,CAAC;AAClD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,uBAAuB,CAAC;AACtC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oCAAoC,CAAC;AACnD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mDAAmD,CAAC;AAClE,cAAc,iCAAiC,CAAC;AAChD,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yCAAyC,CAAC;AACxD,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC"}

package/lib/components/index.js

@@ -520,6 +520,28 @@ Object.keys(_Panel).forEach(function (key) {
     }
   });
 });
+var _PreviewCard = require("./PreviewCard");
+Object.keys(_PreviewCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PreviewCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PreviewCard[key];
+    }
+  });
+});
+var _PastChatCard = require("./PastChatCard");
+Object.keys(_PastChatCard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PastChatCard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PastChatCard[key];
+    }
+  });
+});
 var _ProgressDonut = require("./ProgressDonut");
 Object.keys(_ProgressDonut).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/genesis-mcp",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "MCP server for Genesis UI Design System - provides AI assistants with access to components, hooks, and design tokens",
   "type": "module",
   "main": "index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.5.38",
+  "version": "0.5.40",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"