@designcrowd/fe-shared-lib 1.6.10-voiceText → 1.6.10-voiceText-2

package/docs/voice-to-text-discussion.md

@@ -0,0 +1,330 @@
+# Slack Thread: #growth-it-runs-on-local-team
+
+**Date:** 2026-04-09
+**Thread link:** https://designcrowd.slack.com/archives/C02955Q465R/p1775707213792599
+**Participants:** Zach, Loïc, ap, pmac, Mik
+
+---
+
+## Zach — 4:00 AM
+
+**@Loïc** for https://designcrowd.atlassian.net/browse/GT-9885 there is a chromium package that handles voice to text really well. Works on Edge, Chrome and Safari but not other browsers. I've slapped together a PoC here https://gt-9885.bc.designcrowd.ninja/ . Nothing I need you to do, just wanted you to be aware so you can coordinate/plan appropriately.
+
+![image.png](voice-to-text-discussion-attachments/image.png)
+
+---
+
+## Loïc — 4:41 AM
+
+Thanks Zach. Have you got a link to that package?
+
+Doesn’t seem to work in other languages but maybe relies on the browser set language?
+
+> Works on Edge, Chrome and Safari but not other browsers
+What other browsers would that not work on? Would imagine it would cover most if built on Chromium?
+
+---
+
+## Loïc — 4:43 AM
+
+> Doesn’t seem to work in other languages but maybe relies on the browser set language?
+GPT voice to text works fine on the same browser for me when I speak in French.
+
+---
+
+## Zach — 4:46 AM
+
+https://vueuse.org/core/useSpeechRecognition/ is the package. This is the browser support breakdown https://caniuse.com/mdn-api_speechrecognitionevent. It uses https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API under the hood. Skimming the docs I dont see anything about language support.
+
+![image.png](voice-to-text-discussion-attachments/image_1.png)
+
+---
+
+## Loïc — 4:49 AM
+
+GPT:
+> Short answer: **yes — but not by itself.**
+> How `useSpeechRecognition` handles languages
+> The VueUse composable is just a thin wrapper around the browser’s **Web Speech API**. It lets you *set* the language via the `lang` option:
+> ```useSpeechRecognition({
+>   lang: 'fr-FR' // or 'es-ES', 'de-DE', etc.
+> })```
+> So technically:
+> :white_check_mark: You **can use other languages** by changing `lang`
+> • :exclamation: But support depends entirely on the **browser + underlying speech engine** ([vueuse.org](http://vueuse.org))
+> 
+> What actually determines language support
+> The real behavior comes from the browser’s `SpeechRecognition` implementation:
+> Chrome (and Chromium browsers) → best support, many languages
+> Safari → limited support
+> • Firefox → basically **no support** for this API
+> VueUse just passes your config through — it doesn’t add language models itself. ([vueuse.org](http://vueuse.org))
+> 
+> Practical implications
+> • You can switch languages dynamically:
+> ```const lang = ref('en-US')
+> 
+> const speech = useSpeechRecognition({ lang })```
+> • But:
+> Some languages may be **less accurate**
+> Some may **not work at all** depending on browser
+> Offline support is usually **not available**
+> 
+> TL;DR
+> • :white_check_mark: Works with multiple languages via `lang`
+> • :exclamation: Limited by browser + Web Speech API support
+> • :x: Not a full multilingual engine on its own
+> 
+> If you tell me what languages you want (e.g. French + English switching), I can suggest the most reliable setup or alternatives (like Whisper, Vosk, etc.).
+
+---
+
+## Zach — 4:49 AM
+
+Oh thats super easy.
+
+---
+
+## Zach — 4:50 AM
+
+We always have the users language handy
+
+---
+
+## Loïc — 4:50 AM
+
+:+1:
+
+---
+
+## Loïc — 4:50 AM
+
+No Firefox support is probably the biggest unknown here but if we are able to hide the functionality if the browser is not supported then that should be fine.
+
+---
+
+## Loïc — 4:51 AM
+
+FYI **@ap** ^
+
+---
+
+## Zach — 4:52 AM
+
+Hiding should also be easy. It's already working in my demo.
+
+---
+
+## ap — 5:02 AM
+
+we could extend this to send to a cloud service to do the speech to text for firefox?
+
+---
+
+## Zach — 5:04 AM
+
+Thats where it starts to get tricky. We would need to use/build a cloud service if we wanted to support firefox. It's just a lot more effort.
+
+---
+
+## Zach — 5:04 AM
+
+Also this is free
+
+---
+
+## ap — 5:10 AM
+
+i was thinking as a fallback at a later stage once we understand the take up from customers
+
+---
+
+## Loïc — 12:13 AM
+
+**@pmac**
+
+---
+
+## Zach — 3:28 AM
+
+https://gt-9885.dcom.designcrowd.ninja/ **@Loïc** **@ap** Check it out.
+1. Use Chrome or Safari
+2. Make sure to set the AB test variations like in the screen shot. 
+3. First click should ask for microphone permissions
+4. It will transcribe into the input in real time
+5. Click to stop
+6. ta daaa
+**@ap** It is very easy to wire up: https://github.com/designcrowd/BrandCrowd.Net/pull/12884/changes#diff-8cf5baa45c1f1700d712ccef3bc0485214f743b907c9916c9bc6372b9475bbf8
+
+• It will hide itself if the browser does not support it
+• Language support is there but not tested yet
+• emits events for interim transcript chunks and the final transcript
+• Easy to drop in and wire up to any existing input
+• Its only styled for the new ai prompt input at the moment. We will need to add style variations in fe-shared-lib.
+Lets me know if there are any questions/changes you want. If not, I will wrap it up and get it to QA.
+
+![image.png](voice-to-text-discussion-attachments/image_2.png)
+
+---
+
+## pmac — 3:32 AM
+
+just catching up .. this is client side and only works in some browsers?
+
+---
+
+## Zach — 3:32 AM
+
+correct
+
+---
+
+## pmac — 3:39 AM
+
+.. and I assume you chose this path as it was quick to implement
+
+---
+
+## pmac — 3:39 AM
+
+I have a feeling that we're going to see much better transcription using the newer speech to text models
+
+---
+
+## pmac — 3:47 AM
+
+what does the server side solution look like, that would work for all browsers? I suppose we'd be sending wav/mp3 to a backend transcription.
+
+---
+
+## Zach — 1:10 AM
+
+If we wanted to do server side we have a few options. Best choice is to buy something off the shelf. Having made my own local tool for voice to text using whisper, there are a bunch of issues we just dont want to handle. Whisper starts to hallucinate pretty badly after about 90 seconds, so we would have to handle streaming, chunking and a bunch of other stuff.
+
+I would want to find something that we just import a package and set an API key somewhere and then its done.
+
+The approach using the built in browser tools was so easy and fast I think it makes sense to try it out first and see what kind of returns we get. Also, all phone keyboards have voice to text built in that I think most people prefer to use.
+
+Where we are at now with the browser solution is to just do a once over on styling and nail down the AB test variation details and timing. It's code complete.
+
+---
+
+## pmac — 1:13 AM
+
+for server side, I would be expecting us to use something like the AWS Transcribe product
+
+---
+
+## Zach — 1:15 AM
+
+Thats the one I was looking at before I stumbled onto the browser native option.
+
+---
+
+## Zach — 1:17 AM
+
+Looks like the price is $1.44/hr for streaming transcription.
+
+---
+
+## pmac — 1:18 AM
+
+lets leave it in the back pocket
+
+---
+
+## Loïc — 1:41 AM
+
+works well in French
+
+---
+
+## Loïc — 1:42 AM
+
+the UI doesn’t look like what we had in designs?
+
+---
+
+## Zach — 1:43 AM
+
+Yea, I can't find designs for the new AI long prompt input we've got.
+
+---
+
+## Zach — 1:44 AM
+
+If you are happy with the design we've got in the figma for the other style I can apply to both.
+
+---
+
+## Loïc — 1:44 AM
+
+these ones in the ticket https://www.figma.com/design/gz0bEUjboSGaAMMtalOqVS/Maker---Speech-to-Text-in-AI?node-id=7-636&t=cIYxelUljv4Qp17M-1 ?
+
+![Screenshot 2026-04-15 at 11.44.18 am.png](voice-to-text-discussion-attachments/Screenshot 2026-04-15 at 11.44.18 am.png)
+
+---
+
+## Zach — 1:45 AM
+
+You sure you want that same design for the dark theme AI prompt as well?
+
+---
+
+## Zach — 1:45 AM
+
+Happy to do it, I can just implement both dark and light so it looks like the figma designs just with reversed colors on the AI prompt.
+
+---
+
+## pmac — 1:48 AM
+
+**@Zach** how do I get it to show for me?
+
+---
+
+## Zach — 1:49 AM
+
+In the bottom right there is an "AB" button. Click it and set these two campaigns to variation 1.
+
+![image.png](voice-to-text-discussion-attachments/image_3.png)
+
+---
+
+## Loïc — 1:49 AM
+
+**@Mik** see Zach’s comment about dark theme AI prompt
+
+---
+
+## Mik — 2:00 AM
+
+hey **@Zach**, ideally it should look like this in dark mode - is this also what you envision?
+
+![image.png](voice-to-text-discussion-attachments/image_4.png)
+
+---
+
+## Loïc — 2:01 AM
+
+have you got a screen for when it’s recording?
+
+---
+
+## Zach — 2:06 AM
+
+**@Mik** that was what I was thinking.  We've already got the microphone icon so all good there. Is the light grey circle around the microphone icon indicating when its recording?
+
+---
+
+## Mik — 2:08 AM
+
+yes, it's recording
+
+---
+
+## Zach — 2:09 AM
+
+I will get the UI tightened up then lets everyone know when its ready for another review.
+
+---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.6.10-voiceText",
+  "version": "1.6.10-voiceText-2",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",
@@ -71,6 +71,8 @@
     "postcss-import": "16.0.0",
     "postcss-nested": "6.0.1",
     "prettier": "3.2.4",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "storybook": "9.0.4",
     "stylelint": "16.2.1",
     "stylelint-config-standard": "36.0.0",

package/public/css/tailwind-brandCrowd.css

@@ -1438,6 +1438,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
 }
+.theme-brandCrowd .tw-bg-grayscale-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(43 43 43 / var(--tw-bg-opacity));
+}
 .theme-brandCrowd .tw-bg-info-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(204 234 247 / var(--tw-bg-opacity));
@@ -1896,6 +1900,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(145 16 38 / var(--tw-text-opacity));
 }
+.theme-brandCrowd .tw-text-grayscale-400 {
+  --tw-text-opacity: 1;
+  color: rgb(230 230 230 / var(--tw-text-opacity));
+}
 .theme-brandCrowd .tw-text-grayscale-500 {
   --tw-text-opacity: 1;
   color: rgb(208 208 208 / var(--tw-text-opacity));
@@ -2049,6 +2057,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-brandCrowd .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-brandCrowd .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2124,6 +2137,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
 }
+.theme-brandCrowd .hover\:tw-bg-grayscale-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(43 43 43 / var(--tw-bg-opacity));
+}
 .theme-brandCrowd .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(204 234 247 / var(--tw-bg-opacity));
@@ -2240,6 +2257,18 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-brandCrowd .focus\:tw-ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.theme-brandCrowd .focus\:tw-ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(242 27 63 / var(--tw-ring-opacity));
+}
+.theme-brandCrowd .focus\:tw-ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
 .theme-brandCrowd .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(0 151 215 / var(--tw-text-opacity));

package/public/css/tailwind-brandPage.css

@@ -1362,6 +1362,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
 }
+.theme-brandPage .tw-bg-grayscale-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(43 43 43 / var(--tw-bg-opacity));
+}
 .theme-brandPage .tw-bg-transparent {
   background-color: transparent;
 }
@@ -1736,6 +1740,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
+.theme-brandPage .tw-text-grayscale-400 {
+  --tw-text-opacity: 1;
+  color: rgb(230 230 230 / var(--tw-text-opacity));
+}
 .theme-brandPage .tw-text-grayscale-500 {
   --tw-text-opacity: 1;
   color: rgb(208 208 208 / var(--tw-text-opacity));
@@ -1837,6 +1845,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-brandPage .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-brandPage .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1888,6 +1901,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(208 208 208 / var(--tw-bg-opacity));
 }
+.theme-brandPage .hover\:tw-bg-grayscale-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(43 43 43 / var(--tw-bg-opacity));
+}
 .theme-brandPage .hover\:tw-text-white:hover {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1916,6 +1933,14 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-brandPage .focus\:tw-ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.theme-brandPage .focus\:tw-ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
 @media (min-width: 640px) {
 .theme-brandPage .sm\:tw-absolute {
     position: absolute;

package/public/css/tailwind-crazyDomains.css

@@ -1438,6 +1438,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(199 204 207 / var(--tw-bg-opacity));
 }
+.theme-crazyDomains .tw-bg-grayscale-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(87 97 99 / var(--tw-bg-opacity));
+}
 .theme-crazyDomains .tw-bg-info-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(230 246 253 / var(--tw-bg-opacity));
@@ -1896,6 +1900,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(140 18 59 / var(--tw-text-opacity));
 }
+.theme-crazyDomains .tw-text-grayscale-400 {
+  --tw-text-opacity: 1;
+  color: rgb(235 238 243 / var(--tw-text-opacity));
+}
 .theme-crazyDomains .tw-text-grayscale-500 {
   --tw-text-opacity: 1;
   color: rgb(199 204 207 / var(--tw-text-opacity));
@@ -2049,6 +2057,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-crazyDomains .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-crazyDomains .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2124,6 +2137,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(199 204 207 / var(--tw-bg-opacity));
 }
+.theme-crazyDomains .hover\:tw-bg-grayscale-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(87 97 99 / var(--tw-bg-opacity));
+}
 .theme-crazyDomains .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(230 246 253 / var(--tw-bg-opacity));
@@ -2240,6 +2257,18 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-crazyDomains .focus\:tw-ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.theme-crazyDomains .focus\:tw-ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(111 172 47 / var(--tw-ring-opacity));
+}
+.theme-crazyDomains .focus\:tw-ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
 .theme-crazyDomains .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(0 161 239 / var(--tw-text-opacity));

package/public/css/tailwind-designCom.css

@@ -1438,6 +1438,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(209 209 209 / var(--tw-bg-opacity));
 }
+.theme-designCom .tw-bg-grayscale-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
 .theme-designCom .tw-bg-info-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(236 238 254 / var(--tw-bg-opacity));
@@ -1896,6 +1900,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(136 44 32 / var(--tw-text-opacity));
 }
+.theme-designCom .tw-text-grayscale-400 {
+  --tw-text-opacity: 1;
+  color: rgb(227 227 227 / var(--tw-text-opacity));
+}
 .theme-designCom .tw-text-grayscale-500 {
   --tw-text-opacity: 1;
   color: rgb(209 209 209 / var(--tw-text-opacity));
@@ -2049,6 +2057,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-designCom .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-designCom .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2124,6 +2137,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(209 209 209 / var(--tw-bg-opacity));
 }
+.theme-designCom .hover\:tw-bg-grayscale-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
+}
 .theme-designCom .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 238 254 / var(--tw-bg-opacity));
@@ -2240,6 +2257,18 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-designCom .focus\:tw-ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.theme-designCom .focus\:tw-ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(63 89 246 / var(--tw-ring-opacity));
+}
+.theme-designCom .focus\:tw-ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
 .theme-designCom .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(63 89 246 / var(--tw-text-opacity));

package/public/css/tailwind-designCrowd.css

@@ -1438,6 +1438,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(204 204 204 / var(--tw-bg-opacity));
 }
+.theme-designCrowd .tw-bg-grayscale-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(82 93 96 / var(--tw-bg-opacity));
+}
 .theme-designCrowd .tw-bg-info-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(207 234 251 / var(--tw-bg-opacity));
@@ -1896,6 +1900,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(146 38 36 / var(--tw-text-opacity));
 }
+.theme-designCrowd .tw-text-grayscale-400 {
+  --tw-text-opacity: 1;
+  color: rgb(230 230 230 / var(--tw-text-opacity));
+}
 .theme-designCrowd .tw-text-grayscale-500 {
   --tw-text-opacity: 1;
   color: rgb(204 204 204 / var(--tw-text-opacity));
@@ -2049,6 +2057,11 @@ video {
   --tw-drop-shadow: drop-shadow(0 1px 1px rgb(0 0 0 / 0.05));
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.theme-designCrowd .tw-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
 .theme-designCrowd .tw-transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2124,6 +2137,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(204 204 204 / var(--tw-bg-opacity));
 }
+.theme-designCrowd .hover\:tw-bg-grayscale-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(82 93 96 / var(--tw-bg-opacity));
+}
 .theme-designCrowd .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(207 234 251 / var(--tw-bg-opacity));
@@ -2240,6 +2257,18 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+.theme-designCrowd .focus\:tw-ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+.theme-designCrowd .focus\:tw-ring-primary-500:focus {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(17 151 235 / var(--tw-ring-opacity));
+}
+.theme-designCrowd .focus\:tw-ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
 .theme-designCrowd .tw-group:hover .group-hover\:tw-text-info-500 {
   --tw-text-opacity: 1;
   color: rgb(17 151 235 / var(--tw-text-opacity));

package/src/atoms/components/Modal/Modal.vue

@@ -1,7 +1,10 @@
 <template>
   <div
     v-show="visible"
+    role="dialog"
+    aria-modal="true"
     :aria-hidden="visible ? 'false' : 'true'"
+    :aria-label="ariaLabel"
     class="tw-bg-black tw-flex tw-items-center tw-justify-center tw-fixed tw-w-full tw-h-full tw-top-0 tw-left-0 tw-z-50"
     :class="{
       'tw-px-4': fullScreenBreakpoint === undefined && !isImageMode,
@@ -47,6 +50,7 @@
           v-if="!mandatory"
           class="tw-absolute tw-right-0 tw-top-0 tw-border-none tw-text-secondary-500 tw-appearance-none tw-bg-transparent tw-p-0 tw-w-8 tw-h-8 tw-ml-auto tw-cursor-pointer"
           data-test-modal-close-btn
+          aria-label="Close"
           @click="close($event)"
         >
           <span class="tw-sr-only">Close modal</span>
@@ -161,6 +165,11 @@ export default {
       required: false,
       default: false,
     },
+    ariaLabel: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   computed: {
     isImageMode() {