@common-origin/design-system 2.8.0 → 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.esm.js
CHANGED
|
@@ -1316,7 +1316,7 @@ var StyledBox = styled.div.withConfig({
|
|
|
1316
1316
|
}, function (props) {
|
|
1317
1317
|
return props.$pr && css(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), tokensData.semantic.spacing.layout[props.$pr]);
|
|
1318
1318
|
}, function (props) {
|
|
1319
|
-
return props.$pb && css(templateObject_17$
|
|
1319
|
+
return props.$pb && css(templateObject_17$2 || (templateObject_17$2 = __makeTemplateObject(["padding-bottom: ", ";"], ["padding-bottom: ", ";"])), tokensData.semantic.spacing.layout[props.$pb]);
|
|
1320
1320
|
}, function (props) {
|
|
1321
1321
|
return props.$pl && css(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["padding-left: ", ";"], ["padding-left: ", ";"])), tokensData.semantic.spacing.layout[props.$pl]);
|
|
1322
1322
|
}, function (props) {
|
|
@@ -1508,7 +1508,7 @@ var BoxTransform = function BoxTransform(props) {
|
|
|
1508
1508
|
}));
|
|
1509
1509
|
};
|
|
1510
1510
|
var Box = BoxTransform;
|
|
1511
|
-
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$
|
|
1511
|
+
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;
|
|
1512
1512
|
|
|
1513
1513
|
var add = {
|
|
1514
1514
|
path: "M13 11H19V13H13V19H11V13H5V11H11V5H13V11Z",
|
|
@@ -4473,7 +4473,7 @@ function agentInputStateTransition(currentState, event) {
|
|
|
4473
4473
|
}
|
|
4474
4474
|
return currentState;
|
|
4475
4475
|
case 'MIC_STOP':
|
|
4476
|
-
if (currentState === 'listening') {
|
|
4476
|
+
if (currentState === 'listening' || currentState === 'processingFinalTranscript') {
|
|
4477
4477
|
return textDrivenState(event.hasText);
|
|
4478
4478
|
}
|
|
4479
4479
|
return currentState;
|
|
@@ -4502,7 +4502,7 @@ var semantic$a = tokensData.semantic,
|
|
|
4502
4502
|
var DEFAULT_IDLE_HELPER = 'Ask about transactions, spending, or transfers';
|
|
4503
4503
|
var DEFAULT_LISTENING_MESSAGE = 'Listening… speak now';
|
|
4504
4504
|
var DEFAULT_PROCESSING_MESSAGE = 'Finishing voice input…';
|
|
4505
|
-
var
|
|
4505
|
+
var rotateRing = 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"])));
|
|
4506
4506
|
var Container = styled.div.withConfig({
|
|
4507
4507
|
displayName: "AgentInput__Container",
|
|
4508
4508
|
componentId: "sc-fhl996-0"
|
|
@@ -4522,7 +4522,7 @@ var Input = styled.input.withConfig({
|
|
|
4522
4522
|
var InputActions = styled.div.withConfig({
|
|
4523
4523
|
displayName: "AgentInput__InputActions",
|
|
4524
4524
|
componentId: "sc-fhl996-4"
|
|
4525
|
-
})(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.
|
|
4525
|
+
})(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);
|
|
4526
4526
|
var CircularActionIconButton = styled(IconButton).withConfig({
|
|
4527
4527
|
displayName: "AgentInput__CircularActionIconButton",
|
|
4528
4528
|
componentId: "sc-fhl996-5"
|
|
@@ -4537,47 +4537,50 @@ var MicButtonWrapper = styled.div.withConfig({
|
|
|
4537
4537
|
},
|
|
4538
4538
|
displayName: "AgentInput__MicButtonWrapper",
|
|
4539
4539
|
componentId: "sc-fhl996-7"
|
|
4540
|
-
})(
|
|
4541
|
-
|
|
4542
|
-
|
|
4543
|
-
|
|
4540
|
+
})(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);
|
|
4541
|
+
var MicListeningRing = styled.span.withConfig({
|
|
4542
|
+
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4543
|
+
return !prop.startsWith('$');
|
|
4544
|
+
},
|
|
4545
|
+
displayName: "AgentInput__MicListeningRing",
|
|
4546
|
+
componentId: "sc-fhl996-8"
|
|
4547
|
+
})(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) {
|
|
4548
|
+
var $reducedMotion = _a.$reducedMotion;
|
|
4549
|
+
return !$reducedMotion && css(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n animation: ", " 1300ms linear infinite;\n "], ["\n animation: ", " 1300ms linear infinite;\n "])), rotateRing);
|
|
4544
4550
|
});
|
|
4545
4551
|
var StatusRow = styled.div.withConfig({
|
|
4546
4552
|
displayName: "AgentInput__StatusRow",
|
|
4547
|
-
componentId: "sc-fhl996-
|
|
4548
|
-
})(
|
|
4553
|
+
componentId: "sc-fhl996-9"
|
|
4554
|
+
})(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]);
|
|
4549
4555
|
var StatusText = styled.div.withConfig({
|
|
4550
4556
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4551
4557
|
return !prop.startsWith('$');
|
|
4552
4558
|
},
|
|
4553
4559
|
displayName: "AgentInput__StatusText",
|
|
4554
|
-
componentId: "sc-fhl996-
|
|
4555
|
-
})(
|
|
4556
|
-
var $isError = _a.$isError;
|
|
4557
|
-
return $isError ? semantic$a.color.text.error : semantic$a.color.text.subdued;
|
|
4558
|
-
});
|
|
4560
|
+
componentId: "sc-fhl996-10"
|
|
4561
|
+
})(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n padding-left: ", ";\n"], ["\n padding-left: ", ";\n"])), semantic$a.spacing.layout.xl);
|
|
4559
4562
|
var StatusAnnouncement = styled.div.withConfig({
|
|
4560
4563
|
displayName: "AgentInput__StatusAnnouncement",
|
|
4561
|
-
componentId: "sc-fhl996-
|
|
4562
|
-
})(
|
|
4564
|
+
componentId: "sc-fhl996-11"
|
|
4565
|
+
})(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject([""], [""])));
|
|
4563
4566
|
var MeterContainer = styled.div.withConfig({
|
|
4564
4567
|
displayName: "AgentInput__MeterContainer",
|
|
4565
|
-
componentId: "sc-fhl996-
|
|
4566
|
-
})(
|
|
4568
|
+
componentId: "sc-fhl996-12"
|
|
4569
|
+
})(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]);
|
|
4567
4570
|
var MeterBar = styled.div.withConfig({
|
|
4568
4571
|
shouldForwardProp: function shouldForwardProp(prop) {
|
|
4569
4572
|
return !prop.startsWith('$');
|
|
4570
4573
|
},
|
|
4571
4574
|
displayName: "AgentInput__MeterBar",
|
|
4572
|
-
componentId: "sc-fhl996-
|
|
4573
|
-
})(
|
|
4575
|
+
componentId: "sc-fhl996-13"
|
|
4576
|
+
})(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) {
|
|
4574
4577
|
var $height = _a.$height;
|
|
4575
4578
|
return "".concat($height * 100, "%");
|
|
4576
4579
|
});
|
|
4577
4580
|
var VisuallyHiddenLabel = styled.label.withConfig({
|
|
4578
4581
|
displayName: "AgentInput__VisuallyHiddenLabel",
|
|
4579
|
-
componentId: "sc-fhl996-
|
|
4580
|
-
})(
|
|
4582
|
+
componentId: "sc-fhl996-14"
|
|
4583
|
+
})(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"])));
|
|
4581
4584
|
function getInitialState(hasText) {
|
|
4582
4585
|
return hasText ? 'typing' : 'idle';
|
|
4583
4586
|
}
|
|
@@ -4969,6 +4972,10 @@ var AgentInput = function AgentInput(_a) {
|
|
|
4969
4972
|
return [3 /*break*/, 4];
|
|
4970
4973
|
case 3:
|
|
4971
4974
|
updateValue(normalizedFinal);
|
|
4975
|
+
updateMachineState({
|
|
4976
|
+
type: 'MIC_STOP',
|
|
4977
|
+
hasText: true
|
|
4978
|
+
});
|
|
4972
4979
|
_a.label = 4;
|
|
4973
4980
|
case 4:
|
|
4974
4981
|
return [2 /*return*/];
|
|
@@ -5145,10 +5152,15 @@ var AgentInput = function AgentInput(_a) {
|
|
|
5145
5152
|
readOnly: isListening,
|
|
5146
5153
|
"aria-describedby": statusId
|
|
5147
5154
|
}), jsxs(InputActions, {
|
|
5148
|
-
children: [hasVoice &&
|
|
5155
|
+
children: [hasVoice && jsxs(MicButtonWrapper, {
|
|
5149
5156
|
"$isListening": isListening,
|
|
5150
5157
|
"$reducedMotion": prefersReducedMotion,
|
|
5151
|
-
children: jsx(
|
|
5158
|
+
children: [isListening && jsx(MicListeningRing, {
|
|
5159
|
+
"$reducedMotion": prefersReducedMotion,
|
|
5160
|
+
"aria-hidden": "true",
|
|
5161
|
+
"data-testid": "agent-input-listening-ring",
|
|
5162
|
+
"data-animated": prefersReducedMotion ? 'false' : 'true'
|
|
5163
|
+
}), jsx(CircularActionIconButton, {
|
|
5152
5164
|
variant: "naked",
|
|
5153
5165
|
size: "medium",
|
|
5154
5166
|
iconName: 'mic',
|
|
@@ -5157,7 +5169,7 @@ var AgentInput = function AgentInput(_a) {
|
|
|
5157
5169
|
"aria-label": isListening ? 'Stop voice input' : 'Start voice input',
|
|
5158
5170
|
disabled: disabled || effectiveSubmitting,
|
|
5159
5171
|
type: "button"
|
|
5160
|
-
})
|
|
5172
|
+
})]
|
|
5161
5173
|
}), jsx(CircularActionIconButton, {
|
|
5162
5174
|
variant: "secondary",
|
|
5163
5175
|
size: "medium",
|
|
@@ -5182,6 +5194,7 @@ var AgentInput = function AgentInput(_a) {
|
|
|
5182
5194
|
"aria-atomic": "true",
|
|
5183
5195
|
children: jsx(Typography, {
|
|
5184
5196
|
variant: "small",
|
|
5197
|
+
color: isStatusError ? 'error' : 'subdued',
|
|
5185
5198
|
children: resolvedStatus
|
|
5186
5199
|
})
|
|
5187
5200
|
})
|
|
@@ -5196,7 +5209,7 @@ var AgentInput = function AgentInput(_a) {
|
|
|
5196
5209
|
})]
|
|
5197
5210
|
});
|
|
5198
5211
|
};
|
|
5199
|
-
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;
|
|
5212
|
+
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;
|
|
5200
5213
|
|
|
5201
5214
|
var semantic$9 = tokensData.semantic,
|
|
5202
5215
|
base$7 = tokensData.base;
|