@common-origin/design-system 2.8.1 → 2.8.2
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.
- package/dist/index.esm.js +41 -28
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +41 -28
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1318,7 +1318,7 @@ var StyledBox = styled.div.withConfig({
|
|
|
1318
1318
|
}, function (props) {
|
|
1319
1319
|
return props.$pr && styled.css(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokensData.semantic.spacing.layout[props.$pr]);
|
|
1320
1320
|
}, function (props) {
|
|
1321
|
-
return props.$pb && styled.css(templateObject_17$
|
|
1321
|
+
return props.$pb && styled.css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$pb]);
|
|
1322
1322
|
}, function (props) {
|
|
1323
1323
|
return props.$pl && styled.css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokensData.semantic.spacing.layout[props.$pl]);
|
|
1324
1324
|
}, function (props) {
|
|
@@ -1510,7 +1510,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1510
1510
|
}));
|
|
1511
1511
|
};
|
|
1512
1512
|
var Box = BoxTransform;
|
|
1513
|
-
var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$k, templateObject_5$f, templateObject_6$d, templateObject_7$a, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$
|
|
1513
|
+
var templateObject_1$G, templateObject_2$s, templateObject_3$p, templateObject_4$k, templateObject_5$f, templateObject_6$d, templateObject_7$a, templateObject_8$6, templateObject_9$4, templateObject_10$3, templateObject_11$3, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25$1, templateObject_26$1, templateObject_27$1, templateObject_28$1, templateObject_29$1, templateObject_30$1, templateObject_31$1, templateObject_32$1, templateObject_33$1, templateObject_34$1, templateObject_35$1, templateObject_36, templateObject_37, templateObject_38, templateObject_39, templateObject_40, templateObject_41, templateObject_42, templateObject_43, templateObject_44, templateObject_45, templateObject_46, templateObject_47, templateObject_48, templateObject_49;
|
|
1514
1514
|
|
|
1515
1515
|
var add = {
|
|
1516
1516
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -4475,7 +4475,7 @@ function agentInputStateTransition(currentState, event) {
|
|
|
4475
4475
|
}
|
|
4476
4476
|
return currentState;
|
|
4477
4477
|
case 'MIC_STOP':
|
|
4478
|
-
if (currentState === 'listening') {
|
|
4478
|
+
if (currentState === 'listening' || currentState === 'processingFinalTranscript') {
|
|
4479
4479
|
return textDrivenState(event.hasText);
|
|
4480
4480
|
}
|
|
4481
4481
|
return currentState;
|
|
@@ -4504,7 +4504,7 @@ var semantic$a = tokensData.semantic,
|
|
|
4504
4504
|
var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
|
|
4505
4505
|
var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
|
|
4506
4506
|
var DEFAULT_PROCESSING_MESSAGE = 'Finishing voice input…';
|
|
4507
|
-
var
|
|
4507
|
+
var rotateRing = styled.keyframes(templateObject_1$o || (templateObject_1$o = __makeTemplateObject(["\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n"], ["\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n"])));
|
|
4508
4508
|
var Container = styled.div.withConfig({
|
|
4509
4509
|
displayName: "AgentInput__Container",
|
|
4510
4510
|
componentId: "sc-fhl996-0"
|
|
@@ -4524,7 +4524,7 @@ var Input = styled.input.withConfig({
|
|
|
4524
4524
|
var InputActions = styled.div.withConfig({
|
|
4525
4525
|
displayName: "AgentInput__InputActions",
|
|
4526
4526
|
componentId: "sc-fhl996-4"
|
|
4527
|
-
})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n"])), semantic$a.spacing.layout.
|
|
4527
|
+
})(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n gap: ", ";\n"])), semantic$a.spacing.layout.sm);
|
|
4528
4528
|
var CircularActionIconButton = styled(IconButton).withConfig({
|
|
4529
4529
|
displayName: "AgentInput__CircularActionIconButton",
|
|
4530
4530
|
componentId: "sc-fhl996-5"
|
|
@@ -4539,47 +4539,50 @@ var MicButtonWrapper = styled.div.withConfig({
|
|
|
4539
4539
|
},
|
|
4540
4540
|
displayName: "AgentInput__MicButtonWrapper",
|
|
4541
4541
|
componentId: "sc-fhl996-7"
|
|
4542
|
-
})(
|
|
4543
|
-
|
|
4544
|
-
|
|
4545
|
-
|
|
4542
|
+
})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n position: relative;\n display: inline-flex;\n border-radius: ", ";\n\n & > button {\n position: relative;\n z-index: 1;\n }\n"], ["\n position: relative;\n display: inline-flex;\n border-radius: ", ";\n\n & > button {\n position: relative;\n z-index: 1;\n }\n"])), semantic$a.border.radius.circle);
|
|
4543
|
+
var MicListeningRing = styled.span.withConfig({
|
|
4544
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4545
|
+
return !prop.startsWith('$');
|
|
4546
|
+
},
|
|
4547
|
+
displayName: "AgentInput__MicListeningRing",
|
|
4548
|
+
componentId: "sc-fhl996-8"
|
|
4549
|
+
})(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n --ring-thickness: ", ";\n position: absolute;\n inset: calc(-", " - ", ");\n border-radius: ", ";\n pointer-events: none;\n z-index: 0;\n background: conic-gradient(\n from 0deg,\n ", " 0deg,\n ", " 110deg,\n ", " 210deg,\n ", " 300deg,\n ", " 360deg\n );\n mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n"], ["\n --ring-thickness: ", ";\n position: absolute;\n inset: calc(-", " - ", ");\n border-radius: ", ";\n pointer-events: none;\n z-index: 0;\n background: conic-gradient(\n from 0deg,\n ", " 0deg,\n ", " 110deg,\n ", " 210deg,\n ", " 300deg,\n ", " 360deg\n );\n mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n -webkit-mask: radial-gradient(\n farthest-side,\n transparent calc(100% - var(--ring-thickness)),\n #000 calc(100% - var(--ring-thickness))\n );\n\n ", "\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n"])), base$8.border.width[2], base$8.spacing[1], component$1.iconButton.focus.outlineOffset, semantic$a.border.radius.circle, semantic$a.color.background['interactive-subtle'], semantic$a.color.background.interactive, semantic$a.color.background['interactive-hover'], semantic$a.color.background.interactive, semantic$a.color.background['interactive-subtle'], function (_a) {
|
|
4550
|
+
var $reducedMotion = _a.$reducedMotion;
|
|
4551
|
+
return !$reducedMotion && styled.css(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n animation: ", " 1300ms linear infinite;\n "], ["\n animation: ", " 1300ms linear infinite;\n "])), rotateRing);
|
|
4546
4552
|
});
|
|
4547
4553
|
var StatusRow = styled.div.withConfig({
|
|
4548
4554
|
displayName: "AgentInput__StatusRow",
|
|
4549
|
-
componentId: "sc-fhl996-
|
|
4550
|
-
})(
|
|
4555
|
+
componentId: "sc-fhl996-9"
|
|
4556
|
+
})(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n min-height: ", ";\n"])), base$8.spacing[3], base$8.spacing[6]);
|
|
4551
4557
|
var StatusText = styled.div.withConfig({
|
|
4552
4558
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4553
4559
|
return !prop.startsWith('$');
|
|
4554
4560
|
},
|
|
4555
4561
|
displayName: "AgentInput__StatusText",
|
|
4556
|
-
componentId: "sc-fhl996-
|
|
4557
|
-
})(
|
|
4558
|
-
var $isError = _a.$isError;
|
|
4559
|
-
return $isError ? semantic$a.color.text.error : semantic$a.color.text.subdued;
|
|
4560
|
-
});
|
|
4562
|
+
componentId: "sc-fhl996-10"
|
|
4563
|
+
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), semantic$a.spacing.layout.xl);
|
|
4561
4564
|
var StatusAnnouncement = styled.div.withConfig({
|
|
4562
4565
|
displayName: "AgentInput__StatusAnnouncement",
|
|
4563
|
-
componentId: "sc-fhl996-
|
|
4564
|
-
})(
|
|
4566
|
+
componentId: "sc-fhl996-11"
|
|
4567
|
+
})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject([""], [""])));
|
|
4565
4568
|
var MeterContainer = styled.div.withConfig({
|
|
4566
4569
|
displayName: "AgentInput__MeterContainer",
|
|
4567
|
-
componentId: "sc-fhl996-
|
|
4568
|
-
})(
|
|
4570
|
+
componentId: "sc-fhl996-12"
|
|
4571
|
+
})(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: flex-end;\n gap: ", ";\n height: ", ";\n"], ["\n display: inline-flex;\n align-items: flex-end;\n gap: ", ";\n height: ", ";\n"])), base$8.spacing[1], base$8.spacing[4]);
|
|
4569
4572
|
var MeterBar = styled.div.withConfig({
|
|
4570
4573
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4571
4574
|
return !prop.startsWith('$');
|
|
4572
4575
|
},
|
|
4573
4576
|
displayName: "AgentInput__MeterBar",
|
|
4574
|
-
componentId: "sc-fhl996-
|
|
4575
|
-
})(
|
|
4577
|
+
componentId: "sc-fhl996-13"
|
|
4578
|
+
})(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height 120ms linear;\n"], ["\n width: ", ";\n border-radius: ", ";\n background-color: ", ";\n height: ", ";\n transition: height 120ms linear;\n"])), base$8.spacing[1], base$8.border.radius[1], semantic$a.color.background.interactive, function (_a) {
|
|
4576
4579
|
var $height = _a.$height;
|
|
4577
4580
|
return "".concat($height * 100, "%");
|
|
4578
4581
|
});
|
|
4579
4582
|
var VisuallyHiddenLabel = styled.label.withConfig({
|
|
4580
4583
|
displayName: "AgentInput__VisuallyHiddenLabel",
|
|
4581
|
-
componentId: "sc-fhl996-
|
|
4582
|
-
})(
|
|
4584
|
+
componentId: "sc-fhl996-14"
|
|
4585
|
+
})(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n"], ["\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n"])));
|
|
4583
4586
|
function getInitialState(hasText) {
|
|
4584
4587
|
return hasText ? 'typing' : 'idle';
|
|
4585
4588
|
}
|
|
@@ -4971,6 +4974,10 @@ var AgentInput = function AgentInput(_a) {
|
|
|
4971
4974
|
return [3 /*break*/, 4];
|
|
4972
4975
|
case 3:
|
|
4973
4976
|
updateValue(normalizedFinal);
|
|
4977
|
+
updateMachineState({
|
|
4978
|
+
type: 'MIC_STOP',
|
|
4979
|
+
hasText: true
|
|
4980
|
+
});
|
|
4974
4981
|
_a.label = 4;
|
|
4975
4982
|
case 4:
|
|
4976
4983
|
return [2 /*return*/];
|
|
@@ -5147,10 +5154,15 @@ var AgentInput = function AgentInput(_a) {
|
|
|
5147
5154
|
readOnly: isListening,
|
|
5148
5155
|
"aria-describedby": statusId
|
|
5149
5156
|
}), jsxRuntime.jsxs(InputActions, {
|
|
5150
|
-
children: [hasVoice && jsxRuntime.
|
|
5157
|
+
children: [hasVoice && jsxRuntime.jsxs(MicButtonWrapper, {
|
|
5151
5158
|
"$isListening": isListening,
|
|
5152
5159
|
"$reducedMotion": prefersReducedMotion,
|
|
5153
|
-
children: jsxRuntime.jsx(
|
|
5160
|
+
children: [isListening && jsxRuntime.jsx(MicListeningRing, {
|
|
5161
|
+
"$reducedMotion": prefersReducedMotion,
|
|
5162
|
+
"aria-hidden": "true",
|
|
5163
|
+
"data-testid": "agent-input-listening-ring",
|
|
5164
|
+
"data-animated": prefersReducedMotion ? 'false' : 'true'
|
|
5165
|
+
}), jsxRuntime.jsx(CircularActionIconButton, {
|
|
5154
5166
|
variant: "naked",
|
|
5155
5167
|
size: "medium",
|
|
5156
5168
|
iconName: 'mic',
|
|
@@ -5159,7 +5171,7 @@ var AgentInput = function AgentInput(_a) {
|
|
|
5159
5171
|
"aria-label": isListening ? 'Stop voice input' : 'Start voice input',
|
|
5160
5172
|
disabled: disabled || effectiveSubmitting,
|
|
5161
5173
|
type: "button"
|
|
5162
|
-
})
|
|
5174
|
+
})]
|
|
5163
5175
|
}), jsxRuntime.jsx(CircularActionIconButton, {
|
|
5164
5176
|
variant: "secondary",
|
|
5165
5177
|
size: "medium",
|
|
@@ -5184,6 +5196,7 @@ var AgentInput = function AgentInput(_a) {
|
|
|
5184
5196
|
"aria-atomic": "true",
|
|
5185
5197
|
children: jsxRuntime.jsx(Typography, {
|
|
5186
5198
|
variant: "small",
|
|
5199
|
+
color: isStatusError ? 'error' : 'subdued',
|
|
5187
5200
|
children: resolvedStatus
|
|
5188
5201
|
})
|
|
5189
5202
|
})
|
|
@@ -5198,7 +5211,7 @@ var AgentInput = function AgentInput(_a) {
|
|
|
5198
5211
|
})]
|
|
5199
5212
|
});
|
|
5200
5213
|
};
|
|
5201
|
-
var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$a, templateObject_6$8, templateObject_7$6, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1;
|
|
5214
|
+
var templateObject_1$o, templateObject_2$j, templateObject_3$h, templateObject_4$e, templateObject_5$a, templateObject_6$8, templateObject_7$6, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1;
|
|
5202
5215
|
|
|
5203
5216
|
var semantic$9 = tokensData.semantic,
|
|
5204
5217
|
base$7 = tokensData.base;
|