@moises.ai/design-system 4.16.0 → 4.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.js +3 -3
  2. package/package.json +1 -1
  3. package/src/components/InstrumentSelect/InstrumentSelect.jsx +3 -3
  4. package/src/components/InstrumentSelect/InstrumentSelect.module.css +4 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moises.ai/design-system",
3
- "version": "4.16.0",
3
+ "version": "4.16.1",
4
4
  "description": "Design System package based on @radix-ui/themes with custom defaults",
5
5
  "private": false,
6
6
  "type": "module",
package/src/components/InstrumentSelect/InstrumentSelect.jsx CHANGED
@@ -58,8 +58,8 @@ function isItemSelected(value, itemValue) {
58
58
  * - Pass `value` to mark items as selected (string for single, string[] for multi).
59
59
  * - `onSelect(item)` fires for every click; the parent decides what to do.
60
60
  *
61
- * Layout: 2-column responsive grid by default with 4px gap. Cards have `min-width: 150px`
62
- * and the columns adapt to the parent's width.
61
+ * Layout: 2-column responsive grid by default with 4px gap. Cards have no minimum width
62
+ * and shrink to fit narrow containers (the parent owns the available width).
63
63
  *
64
64
  * @example
65
65
  * // Single select
@@ -115,7 +115,7 @@ export const InstrumentSelect = forwardRef(function InstrumentSelect(
115
115
  }, [columns])
116
116
 
117
117
  const gridStyle = useMemo(
118
- () => ({ gridTemplateColumns: `repeat(${cols}, minmax(150px, 1fr))` }),
118
+ () => ({ gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` }),
119
119
  [cols],
120
120
  )
121
121
 
package/src/components/InstrumentSelect/InstrumentSelect.module.css CHANGED
@@ -14,6 +14,7 @@
14
14
  }
15
15
 
16
16
  .title {
17
+ font-family: var(--default-font-family, 'Articulat', helvetica, arial, sans-serif);
17
18
  color: var(--neutral-alpha-12);
18
19
  }
19
20
 
@@ -34,7 +35,7 @@
34
35
 
35
36
  .grid {
36
37
  display: grid;
37
- grid-template-columns: repeat(2, minmax(150px, 1fr));
38
+ grid-template-columns: repeat(2, minmax(0, 1fr));
38
39
  gap: 4px;
39
40
  width: 100%;
40
41
  }
@@ -46,13 +47,13 @@
46
47
  display: flex;
47
48
  align-items: center;
48
49
  gap: var(--space-3, 12px);
49
- min-width: 150px;
50
+ min-width: 0;
50
51
  padding: 10px 8px 10px 12px;
51
52
  border: 1px solid var(--neutral-alpha-4, rgba(211, 237, 248, 0.11));
52
53
  border-radius: var(--radius-3, 6px);
53
54
  background: transparent;
54
55
  color: var(--neutral-alpha-12);
55
- font-family: inherit;
56
+ font-family: var(--default-font-family, 'Articulat', helvetica, arial, sans-serif);
56
57
  font-size: 14px;
57
58
  line-height: 20px;
58
59
  text-align: left;