profile-pane 3.1.2-8a70896f → 3.1.2-9ced93b9

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 (9) hide show
  1. package/lib/ContactsCard.d.ts.map +1 -1
  2. package/lib/ContactsCard.js +2 -1
  3. package/lib/profile-pane.js +17 -12
  4. package/lib/profile-pane.js.map +1 -1
  5. package/lib/profile-pane.min.js +1 -1
  6. package/lib/profile-pane.min.js.map +1 -1
  7. package/lib/styles/ContactsCard.css +9 -9
  8. package/lib/styles/utilities.css +4 -0
  9. package/package.json +1 -2
package/lib/ContactsCard.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ContactsCard.d.ts","sourceRoot":"","sources":["../src/ContactsCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAsB,gBAAgB,EAAE,WAAW,EAAa,MAAM,iBAAiB,CAAA;AAC9F,OAAO,oBAAoB,MAAM,qCAAqC,CAAA;AAQtE,eAAO,MAAM,kCAAkC,GAAI,SAAS,kBAAkB,EAC5E,gBAAgB,oBAAoB,EACpC,aAAa,WAAW,EACxB,kBAAkB,gBAAgB,KACjC,iBAuCF,CAAA;AAw0BD,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,kBAAkB,GAC1B,cAAc,CAIhB"}
1
+ {"version":3,"file":"ContactsCard.d.ts","sourceRoot":"","sources":["../src/ContactsCard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAElD,OAAO,EAAsB,gBAAgB,EAAE,WAAW,EAAa,MAAM,iBAAiB,CAAA;AAC9F,OAAO,oBAAoB,MAAM,qCAAqC,CAAA;AAQtE,eAAO,MAAM,kCAAkC,GAAI,SAAS,kBAAkB,EAC5E,gBAAgB,oBAAoB,EACpC,aAAa,WAAW,EACxB,kBAAkB,gBAAgB,KACjC,iBAuCF,CAAA;AAy0BD,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,kBAAkB,GAC1B,cAAc,CAIhB"}
package/lib/ContactsCard.js CHANGED
@@ -487,6 +487,7 @@ const createNewAddressBookForm = (context, addressBooksData, contactsModule, con
487
487
  return newAddressBookForm;
488
488
  };
489
489
  const createCloseButton = (context, element, specialClass) => {
490
+ const buttonID = `${element.id}-close-button`;
490
491
  const setButtonOnClickHandler = event => {
491
492
  event.preventDefault();
492
493
  if (element) {
@@ -499,7 +500,7 @@ const createCloseButton = (context, element, specialClass) => {
499
500
  }
500
501
  };
501
502
  const closeButton = context.dom.createElement('button');
502
- closeButton.setAttribute('id', 'close-addressbook');
503
+ closeButton.setAttribute('id', buttonID);
503
504
  closeButton.setAttribute('role', 'button');
504
505
  closeButton.setAttribute('type', 'button');
505
506
  const ariaLabel = specialClass === 'contactsCloseButton' ? 'Close contacts dialog' : 'Close dialog';
package/lib/profile-pane.js CHANGED
@@ -4897,11 +4897,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
4897
4897
  justify-content: center;
4898
4898
  align-items: center;
4899
4899
  line-height: 1;
4900
-
4901
- /* width: 100% !important;
4902
- max-width: 100% !important;
4903
- margin-left: 0;
4904
- align-self: stretch !important; */
4905
4900
  }
4906
4901
 
4907
4902
  .contactsNewGroupForm {
@@ -4969,7 +4964,6 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
4969
4964
  right: 0.2rem;
4970
4965
  background: transparent;
4971
4966
  color: #787878;
4972
- font-size: var(--font-size-xs);
4973
4967
  border: none;
4974
4968
  font-size: var(--font-size-sm);
4975
4969
  cursor: pointer;
@@ -4989,8 +4983,14 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
4989
4983
  width: auto !important;
4990
4984
  height: auto !important;
4991
4985
  cursor: pointer;
4992
- font-size: var(--font-size-xs);
4993
4986
  line-height: 1;
4987
+ left: auto;
4988
+ margin: 0;
4989
+ align-self: auto !important;
4990
+ background: transparent;
4991
+ color: #787878;
4992
+ border: none;
4993
+ z-index: 100 !important;
4994
4994
  }
4995
4995
 
4996
4996
  .contactsCloseButton:hover {
@@ -5072,8 +5072,8 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
5072
5072
  white-space: nowrap;
5073
5073
  }
5074
5074
 
5075
- [role="alert"] {
5076
- border: none !important; /* Hides the element from all users and AT */
5075
+ .contactsAddressBookSelector [role="alert"] {
5076
+ border: none !important; /* Remove borders from alerts within the contacts dialog */
5077
5077
  }
5078
5078
 
5079
5079
  .contactsPopupOverlay {
@@ -5187,7 +5187,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `#add-to-contacts-button-container {
5187
5187
  line-height: 1;
5188
5188
  }
5189
5189
 
5190
- `, "",{"version":3,"sources":["webpack://./src/styles/ContactsCard.css"],"names":[],"mappings":"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","sourcesContent":["#add-to-contacts-button-container {\n position: relative;\n overflow: visible;\n}\n\n.contactsAddressBookSelector {\n width: fit-content;\n max-width: min(94vw, 48rem);\n min-width: 0;\n max-height: 80vh;\n overflow-y: auto;\n overflow-x: hidden;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n background: #F0F0F0;\n color: var(--color-primary);\n padding-top: 4em;\n align-items: stretch;\n box-sizing: border-box;\n gap: 7px;\n display: flex;\n flex-direction: column;\n font-weight: 600;\n position: absolute;\n top: 54%;\n bottom: auto;\n left: 50%;\n transform: translate(-50%, -50%);\n margin-top: 0;\n margin: 0;\n z-index: 200;\n opacity: 1;\n}\n\n@media (max-width: 900px) {\n .contactsAddressBookSelector {\n top: 54%;\n bottom: auto;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .contactsAddressBookDetails {\n flex-direction: column !important; /* Stacks items vertically on small screens */\n align-items: center !important;\n width: 100% !important;\n max-height: 60vh;\n overflow-y: auto;\n overflow-x: hidden; \n }\n\n .contactsAddressBookCreationDiv .contactsNewContactCreationButton {\n width: fit-content !important;\n min-width: 10em;\n margin-left: auto !important;\n margin-right: auto !important;\n align-self: center !important;\n display: inline-flex !important;\n justify-content: center !important;\n align-items: center !important;\n text-align: center;\n }\n}\n\n@media (max-width: 333px) {\n .contactsAddressBookSelector {\n width: 96vw;\n max-width: 96vw;\n min-width: 0;\n top: 50%;\n bottom: auto;\n left: 50%;\n transform: translate(-50%, -50%);\n padding-top: 3rem;\n position: fixed;\n overflow-x: hidden;\n }\n\n .contactsAddressBookDetails {\n width: 100% !important;\n min-width: 0;\n padding: 0.5rem;\n }\n .contactsAddressBookList,\n .contactsGroupList {\n min-width: 0;\n max-width: 100% !important;\n width: 100%;\n }\n}\n\n.contactsAddressBookCreationDiv {\n width: 100%;\n border-radius: var(--border-radius-base);\n background: #F0F0F0;\n box-sizing: border-box;\n padding: 5px;\n gap: 5px;\n display: flex;\n flex-direction: column;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n}\n\n.contactsHelpersButtonDiv {\n display: flex;\n flex-direction: row;\n gap: var(--spacing-md);\n justify-content: center;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n padding: var(--spacing-md);\n border-radius: var(--border-radius-base);\n}\n\n.contactsAddressBookCreationButton {\n flex-shrink: 0;\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary) !important;\n border-radius: 8px;\n text-align: left;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsAddressBookUriEntryButton {\n flex-shrink: 0;\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary) !important;\n border-radius: 8px;\n text-align: left;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsActionButton {\n background: var(--color-primary);\n color: white;\n border-radius: var(--border-radius-base);\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.contactsActionButton:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.contactsActionButton:active {\n box-shadow: 0 1px 2px white;\n}\n\n.contactsActionButton:focus,\n.contactsActionButton:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px white, 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1; \n}\n\n.contactsAddressBookDetails {\n width: 100%;\n min-width: 0;\n min-height: 0;\n border-radius: var(--border-radius-base);\n justify-content: flex-start;\n box-sizing: border-box;\n gap: 15px;\n display: flex;\n flex-direction: row;\n padding: var(--spacing-md);\n overflow-x: auto;\n overflow-y: auto;\n}\n\n.contactsAddressBookUriEntry {\n width: calc(100% - 1rem) !important;\n max-width: calc(100% - 1rem) !important;\n min-width: 0;\n box-sizing: border-box;\n padding-top: 3em !important;\n gap: 5px;\n display: flex;\n align-self: stretch;\n flex-direction: column;\n\n}\n\n.contactsAddressBookUriEntryForm {\n width: 100%;\n max-width: 100%;\n min-width: 0;\n background: #F0F0F0;\n box-sizing: border-box;\n gap: 5px;\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n align-items: stretch;\n}\n\n.contactsAddressBookUriInput {\n width: clamp(14rem, 60vw, 22rem);\n max-width: 100%;\n min-width: 0;\n flex: 0 0 auto;\n align-self: flex-start;\n padding: 5px;\n gap: 15px;\n border-radius: var(--border-radius-base);\n border: 1px solid #ccc;\n}\n\n.contactsAddressBookUriEntryAddButton {\n width: 10%;\n min-width: 0;\n max-width: 4em;\n align-self: flex-end !important;\n margin-left: auto;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n\n /* width: 100% !important;\n max-width: 100% !important;\n margin-left: 0;\n align-self: stretch !important; */\n}\n\n.contactsNewGroupForm {\n box-sizing: border-box;\n padding-top: 2.5rem !important;\n gap: 5px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsCreateNewAddressBook {\n border-radius: var(--border-radius);\n color: white;\n padding: var(--spacing-md);\n justify-content: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n}\n\n.contactsAddressBookList {\n width: 100%;\n max-width: fit-content !important;\n box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);\n min-width: 200px;\n box-sizing: border-box;\n gap: 4px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsGroupList {\n width: auto;\n max-width: fit-content !important;\n min-width: 200px;\n box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);\n box-sizing: border-box;\n gap: 4px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsErrorDisplay {\n width: 90%;\n align-self: flex-end;\n padding: 5px;\n position: absolute;\n background: pink;\n display: none;\n color: #787878;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; \n z-index: 3;\n}\n\n.contactsShowErrors {\n display: flex !important;\n flex-direction: row;\n justify-content: center;\n}\n.contactsCloseErrorDisplayButton {\n position: absolute;\n top: 0.2rem;\n right: 0.2rem;\n background: transparent;\n color: #787878;\n font-size: var(--font-size-xs);\n border: none;\n font-size: var(--font-size-sm);\n cursor: pointer;\n z-index: 4;\n}\n\n.contactsCloseButton {\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius-base);\n color: #787878 !important;\n padding: 1em;\n font-size: var(--font-size-sm);\n position: absolute;\n top: 0; \n right: 0;\n display: inline-block;\n width: auto !important;\n height: auto !important;\n cursor: pointer;\n font-size: var(--font-size-xs);\n line-height: 1;\n}\n\n.contactsCloseButton:hover {\n box-shadow: 0 2px 4px var(--color-primary) !important;\n}\n\n.contactsCloseButton:focus,\n.contactsCloseButton:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px white, 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1;\n}\n\n.contactsNewAddressForm {\n padding-top: 3em !important;\n gap: 5px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsButton {\n flex-shrink: 0;\n background: #F0F0F0;\n color: #787878;\n border-radius: 8px;\n text-align: left;\n padding: var(--spacing-md);\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsButton:hover {\n color: var(--color-primary);\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n} \n\n.contactsSelectedButton {\n background: color-mix(in srgb, var(--color-primary), white 60%) !important; \n color: var(--color-primary);\n}\n\n.contactsContactExistsAlert {\n background: #F0F0F0 !important;\n color: #787878;\n padding: 10px;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n z-index: 10;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 300px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 15px; \n text-wrap: pretty;\n}\n\n.contactsContactExistsActions {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: auto;\n}\n\n.contactsContactExistsActions .contactsConfirmButton,\n.contactsContactExistsActions .contactsCancelButton {\n display: inline-flex !important;\n width: auto !important;\n min-width: fit-content;\n flex: 0 0 auto;\n margin: 0;\n white-space: nowrap;\n}\n\n[role=\"alert\"] {\n border: none !important; /* Hides the element from all users and AT */\n}\n\n.contactsPopupOverlay {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.2);\n z-index: 8;\n}\n\n.contactsAddressBookSelector.contactsOverlayActive > *:not(.contactsPopupOverlay):not(.contactsPopupDialog):not(.contactsContactExistsAlert) {\n pointer-events: none;\n user-select: none;\n}\n\n.contactsAddressBookSelector.contactsOverlayActive .contactsPopupDialog,\n.contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert,\n.contactsAddressBookSelector.contactsOverlayActive .contactsPopupDialog *,\n.contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert * {\n pointer-events: auto;\n}\n\n.contactsPopupDialog {\n background: #F5F5F5 !important;\n color: var(--color-primary);\n padding: 2em;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n z-index: 50;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: auto;\n max-width: min(92vw, 34rem);\n max-height: calc(100vh - 6rem);\n overflow: auto;\n box-sizing: border-box;\n}\n\n@media (max-width: 600px) {\n .contactsAddressBookUriEntry {\n padding-top: 3rem !important;\n }\n\n .contactsPopupDialog {\n max-width: 92vw;\n max-height: 78vh;\n padding: 1.25rem;\n }\n}\n\n.contactsConfirmButton {\n background: var(--color-primary);\n color: white;\n border-radius: var(--border-radius-base);\n padding: var(--spacing-md);\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.contactsConfirmButton:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.contactsCancelButton {\n background: transparent;\n color: #787878;\n border-radius: var(--border-radius-base);\n padding: var(--spacing-md);\n border: 1px solid #ccc;\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n.contactsCancelButton:hover {\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary);\n} \n\n.contactsNewContactCreationButton {\n width: 10em !important;\n align-self: flex-end;\n line-height: 1;\n}\n\n.contactsCreateGroupCreationButton {\n flex-shrink: 0;\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary) !important;\n border-radius: 8px;\n text-align: left;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsCloseButton {\n position: absolute !important;\n top: 0 !important;\n right: 0 !important;\n left: auto;\n margin: 0;\n align-self: auto !important;\n background: transparent;\n color: #787878;\n font-size: var(--font-size-xs);\n border: none;\n font-size: var(--font-size-sm);\n cursor: pointer;\n z-index: 100 !important;\n padding: 0.35rem 0.5rem;\n line-height: 1;\n}\n\n"],"sourceRoot":""}]);
5190
+ `, "",{"version":3,"sources":["webpack://./src/styles/ContactsCard.css"],"names":[],"mappings":"AAAA;EACE,kBAAkB;EAClB,iBAAiB;AACnB;;AAEA;EACE,kBAAkB;EAClB,2BAA2B;EAC3B,YAAY;EACZ,gBAAgB;EAChB,gBAAgB;EAChB,kBAAkB;EAClB,wCAAwC;EACxC,4CAA4C;EAC5C,mBAAmB;EACnB,2BAA2B;EAC3B,gBAAgB;EAChB,oBAAoB;EACpB,sBAAsB;EACtB,QAAQ;EACR,aAAa;EACb,sBAAsB;EACtB,gBAAgB;EAChB,kBAAkB;EAClB,QAAQ;EACR,YAAY;EACZ,SAAS;EACT,gCAAgC;EAChC,aAAa;EACb,SAAS;EACT,YAAY;EACZ,UAAU;AACZ;;AAEA;EACE;IACE,QAAQ;IACR,YAAY;IACZ,SAAS;IACT,gCAAgC;EAClC;;EAEA;IACE,iCAAiC,EAAE,6CAA6C;IAChF,8BAA8B;IAC9B,sBAAsB;IACtB,gBAAgB;IAChB,gBAAgB;IAChB,kBAAkB;EACpB;;EAEA;IACE,6BAA6B;IAC7B,eAAe;IACf,4BAA4B;IAC5B,6BAA6B;IAC7B,6BAA6B;IAC7B,+BAA+B;IAC/B,kCAAkC;IAClC,8BAA8B;IAC9B,kBAAkB;EACpB;AACF;;AAEA;EACE;IACE,WAAW;IACX,eAAe;IACf,YAAY;IACZ,QAAQ;IACR,YAAY;IACZ,SAAS;IACT,gCAAgC;IAChC,iBAAiB;IACjB,eAAe;IACf,kBAAkB;EACpB;;EAEA;IACE,sBAAsB;IACtB,YAAY;IACZ,eAAe;EACjB;EACA;;IAEE,YAAY;IACZ,0BAA0B;IAC1B,WAAW;EACb;AACF;;AAEA;EACE,WAAW;EACX,wCAAwC;EACxC,mBAAmB;EACnB,sBAAsB;EACtB,YAAY;EACZ,QAAQ;EACR,aAAa;EACb,sBAAsB;EACtB,2CAA2C;AAC7C;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,sBAAsB;EACtB,uBAAuB;EACvB,2CAA2C;EAC3C,0BAA0B;EAC1B,wCAAwC;AAC1C;;AAEA;EACE,cAAc;EACd,0EAA0E;EAC1E,sCAAsC;EACtC,kBAAkB;EAClB,gBAAgB;EAChB,eAAe;EACf,mBAAmB;AACrB;;AAEA;EACE,cAAc;EACd,0EAA0E;EAC1E,sCAAsC;EACtC,kBAAkB;EAClB,gBAAgB;EAChB,eAAe;EACf,mBAAmB;AACrB;;AAEA;EACE,gCAAgC;EAChC,YAAY;EACZ,wCAAwC;EACxC,gCAAgC;EAChC,eAAe;AACjB;;AAEA;EACE,2BAA2B;EAC3B,wCAAwC;AAC1C;;AAEA;EACE,2BAA2B;AAC7B;;AAEA;;EAEE,kDAAkD;EAClD,8BAA8B;EAC9B,0EAA0E;EAC1E,UAAU;AACZ;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,aAAa;EACb,wCAAwC;EACxC,2BAA2B;EAC3B,sBAAsB;EACtB,SAAS;EACT,aAAa;EACb,mBAAmB;EACnB,0BAA0B;EAC1B,gBAAgB;EAChB,gBAAgB;AAClB;;AAEA;EACE,mCAAmC;EACnC,uCAAuC;EACvC,YAAY;EACZ,sBAAsB;EACtB,2BAA2B;EAC3B,QAAQ;EACR,aAAa;EACb,mBAAmB;EACnB,sBAAsB;;AAExB;;AAEA;EACE,WAAW;EACX,eAAe;EACf,YAAY;EACZ,mBAAmB;EACnB,sBAAsB;EACtB,QAAQ;EACR,aAAa;EACb,eAAe;EACf,sBAAsB;EACtB,oBAAoB;AACtB;;AAEA;EACE,gCAAgC;EAChC,eAAe;EACf,YAAY;EACZ,cAAc;EACd,sBAAsB;EACtB,YAAY;EACZ,SAAS;EACT,wCAAwC;EACxC,sBAAsB;AACxB;;AAEA;EACE,UAAU;EACV,YAAY;EACZ,cAAc;EACd,+BAA+B;EAC/B,iBAAiB;EACjB,oBAAoB;EACpB,uBAAuB;EACvB,mBAAmB;EACnB,cAAc;AAChB;;AAEA;EACE,sBAAsB;EACtB,8BAA8B;EAC9B,QAAQ;EACR,aAAa;EACb,sBAAsB;AACxB;;AAEA;EACE,mCAAmC;EACnC,YAAY;EACZ,0BAA0B;EAC1B,uBAAuB;EACvB,sBAAsB;EACtB,aAAa;EACb,sBAAsB;EACtB,2CAA2C;AAC7C;;AAEA;EACE,WAAW;EACX,iCAAiC;EACjC,wCAAwC;EACxC,gBAAgB;EAChB,sBAAsB;EACtB,QAAQ;EACR,aAAa;EACb,sBAAsB;AACxB;;AAEA;EACE,WAAW;EACX,iCAAiC;EACjC,gBAAgB;EAChB,wCAAwC;EACxC,sBAAsB;EACtB,QAAQ;EACR,aAAa;EACb,sBAAsB;AACxB;;AAEA;EACE,UAAU;EACV,oBAAoB;EACpB,YAAY;EACZ,kBAAkB;EAClB,gBAAgB;EAChB,aAAa;EACb,cAAc;EACd,wCAAwC;EACxC,2CAA2C;EAC3C,UAAU;AACZ;;AAEA;EACE,wBAAwB;EACxB,mBAAmB;EACnB,uBAAuB;AACzB;AACA;EACE,kBAAkB;EAClB,WAAW;EACX,aAAa;EACb,uBAAuB;EACvB,cAAc;EACd,YAAY;EACZ,8BAA8B;EAC9B,eAAe;EACf,UAAU;AACZ;;AAEA;EACE,6BAA6B;EAC7B,wCAAwC;EACxC,yBAAyB;EACzB,YAAY;EACZ,8BAA8B;EAC9B,kBAAkB;EAClB,MAAM;EACN,QAAQ;EACR,qBAAqB;EACrB,sBAAsB;EACtB,uBAAuB;EACvB,eAAe;EACf,cAAc;EACd,UAAU;EACV,SAAS;EACT,2BAA2B;EAC3B,uBAAuB;EACvB,cAAc;EACd,YAAY;EACZ,uBAAuB;AACzB;;AAEA;EACE,qDAAqD;AACvD;;AAEA;;EAEE,kDAAkD;EAClD,8BAA8B;EAC9B,0EAA0E;EAC1E,UAAU;AACZ;;AAEA;EACE,2BAA2B;EAC3B,QAAQ;EACR,aAAa;EACb,sBAAsB;AACxB;;AAEA;EACE,cAAc;EACd,mBAAmB;EACnB,cAAc;EACd,kBAAkB;EAClB,gBAAgB;EAChB,0BAA0B;EAC1B,eAAe;EACf,mBAAmB;AACrB;;AAEA;EACE,2BAA2B;EAC3B,0EAA0E;AAC5E;;AAEA;CACC,0EAA0E;CAC1E,2BAA2B;AAC5B;;AAEA;EACE,8BAA8B;EAC9B,cAAc;EACd,aAAa;EACb,wCAAwC;EACxC,4CAA4C;EAC5C,WAAW;EACX,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,gCAAgC;EAChC,YAAY;EACZ,aAAa;EACb,sBAAsB;EACtB,mBAAmB;EACnB,SAAS;EACT,iBAAiB;AACnB;;AAEA;EACE,aAAa;EACb,mBAAmB;EACnB,iBAAiB;EACjB,uBAAuB;EACvB,mBAAmB;EACnB,SAAS;EACT,WAAW;AACb;;AAEA;;EAEE,+BAA+B;EAC/B,sBAAsB;EACtB,sBAAsB;EACtB,cAAc;EACd,SAAS;EACT,mBAAmB;AACrB;;AAEA;EACE,uBAAuB,EAAE,0DAA0D;AACrF;;AAEA;EACE,kBAAkB;EAClB,QAAQ;EACR,8BAA8B;EAC9B,UAAU;AACZ;;AAEA;EACE,oBAAoB;EACpB,iBAAiB;AACnB;;AAEA;;;;EAIE,oBAAoB;AACtB;;AAEA;EACE,8BAA8B;EAC9B,2BAA2B;EAC3B,YAAY;EACZ,wCAAwC;EACxC,4CAA4C;EAC5C,WAAW;EACX,kBAAkB;EAClB,QAAQ;EACR,SAAS;EACT,gCAAgC;EAChC,WAAW;EACX,2BAA2B;EAC3B,8BAA8B;EAC9B,cAAc;EACd,sBAAsB;AACxB;;AAEA;EACE;IACE,4BAA4B;EAC9B;;EAEA;IACE,eAAe;IACf,gBAAgB;IAChB,gBAAgB;EAClB;AACF;;AAEA;EACE,gCAAgC;EAChC,YAAY;EACZ,wCAAwC;EACxC,0BAA0B;EAC1B,gCAAgC;EAChC,eAAe;AACjB;;AAEA;EACE,2BAA2B;EAC3B,wCAAwC;AAC1C;;AAEA;EACE,uBAAuB;EACvB,cAAc;EACd,wCAAwC;EACxC,0BAA0B;EAC1B,sBAAsB;EACtB,gCAAgC;EAChC,eAAe;AACjB;AACA;EACE,0EAA0E;EAC1E,2BAA2B;AAC7B;;AAEA;EACE,sBAAsB;EACtB,oBAAoB;EACpB,cAAc;AAChB;;AAEA;EACE,cAAc;EACd,0EAA0E;EAC1E,sCAAsC;EACtC,kBAAkB;EAClB,gBAAgB;EAChB,eAAe;EACf,mBAAmB;AACrB;;AAEA;EACE,6BAA6B;EAC7B,iBAAiB;EACjB,mBAAmB;EACnB,UAAU;EACV,SAAS;EACT,2BAA2B;EAC3B,uBAAuB;EACvB,cAAc;EACd,8BAA8B;EAC9B,YAAY;EACZ,8BAA8B;EAC9B,eAAe;EACf,uBAAuB;EACvB,uBAAuB;EACvB,cAAc;AAChB","sourcesContent":["#add-to-contacts-button-container {\n position: relative;\n overflow: visible;\n}\n\n.contactsAddressBookSelector {\n width: fit-content;\n max-width: min(94vw, 48rem);\n min-width: 0;\n max-height: 80vh;\n overflow-y: auto;\n overflow-x: hidden;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n background: #F0F0F0;\n color: var(--color-primary);\n padding-top: 4em;\n align-items: stretch;\n box-sizing: border-box;\n gap: 7px;\n display: flex;\n flex-direction: column;\n font-weight: 600;\n position: absolute;\n top: 54%;\n bottom: auto;\n left: 50%;\n transform: translate(-50%, -50%);\n margin-top: 0;\n margin: 0;\n z-index: 200;\n opacity: 1;\n}\n\n@media (max-width: 900px) {\n .contactsAddressBookSelector {\n top: 54%;\n bottom: auto;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .contactsAddressBookDetails {\n flex-direction: column !important; /* Stacks items vertically on small screens */\n align-items: center !important;\n width: 100% !important;\n max-height: 60vh;\n overflow-y: auto;\n overflow-x: hidden; \n }\n\n .contactsAddressBookCreationDiv .contactsNewContactCreationButton {\n width: fit-content !important;\n min-width: 10em;\n margin-left: auto !important;\n margin-right: auto !important;\n align-self: center !important;\n display: inline-flex !important;\n justify-content: center !important;\n align-items: center !important;\n text-align: center;\n }\n}\n\n@media (max-width: 333px) {\n .contactsAddressBookSelector {\n width: 96vw;\n max-width: 96vw;\n min-width: 0;\n top: 50%;\n bottom: auto;\n left: 50%;\n transform: translate(-50%, -50%);\n padding-top: 3rem;\n position: fixed;\n overflow-x: hidden;\n }\n\n .contactsAddressBookDetails {\n width: 100% !important;\n min-width: 0;\n padding: 0.5rem;\n }\n .contactsAddressBookList,\n .contactsGroupList {\n min-width: 0;\n max-width: 100% !important;\n width: 100%;\n }\n}\n\n.contactsAddressBookCreationDiv {\n width: 100%;\n border-radius: var(--border-radius-base);\n background: #F0F0F0;\n box-sizing: border-box;\n padding: 5px;\n gap: 5px;\n display: flex;\n flex-direction: column;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n}\n\n.contactsHelpersButtonDiv {\n display: flex;\n flex-direction: row;\n gap: var(--spacing-md);\n justify-content: center;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n padding: var(--spacing-md);\n border-radius: var(--border-radius-base);\n}\n\n.contactsAddressBookCreationButton {\n flex-shrink: 0;\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary) !important;\n border-radius: 8px;\n text-align: left;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsAddressBookUriEntryButton {\n flex-shrink: 0;\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary) !important;\n border-radius: 8px;\n text-align: left;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsActionButton {\n background: var(--color-primary);\n color: white;\n border-radius: var(--border-radius-base);\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.contactsActionButton:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.contactsActionButton:active {\n box-shadow: 0 1px 2px white;\n}\n\n.contactsActionButton:focus,\n.contactsActionButton:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px white, 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1; \n}\n\n.contactsAddressBookDetails {\n width: 100%;\n min-width: 0;\n min-height: 0;\n border-radius: var(--border-radius-base);\n justify-content: flex-start;\n box-sizing: border-box;\n gap: 15px;\n display: flex;\n flex-direction: row;\n padding: var(--spacing-md);\n overflow-x: auto;\n overflow-y: auto;\n}\n\n.contactsAddressBookUriEntry {\n width: calc(100% - 1rem) !important;\n max-width: calc(100% - 1rem) !important;\n min-width: 0;\n box-sizing: border-box;\n padding-top: 3em !important;\n gap: 5px;\n display: flex;\n align-self: stretch;\n flex-direction: column;\n\n}\n\n.contactsAddressBookUriEntryForm {\n width: 100%;\n max-width: 100%;\n min-width: 0;\n background: #F0F0F0;\n box-sizing: border-box;\n gap: 5px;\n display: flex;\n flex-wrap: wrap;\n flex-direction: column;\n align-items: stretch;\n}\n\n.contactsAddressBookUriInput {\n width: clamp(14rem, 60vw, 22rem);\n max-width: 100%;\n min-width: 0;\n flex: 0 0 auto;\n align-self: flex-start;\n padding: 5px;\n gap: 15px;\n border-radius: var(--border-radius-base);\n border: 1px solid #ccc;\n}\n\n.contactsAddressBookUriEntryAddButton {\n width: 10%;\n min-width: 0;\n max-width: 4em;\n align-self: flex-end !important;\n margin-left: auto;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n line-height: 1;\n}\n\n.contactsNewGroupForm {\n box-sizing: border-box;\n padding-top: 2.5rem !important;\n gap: 5px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsCreateNewAddressBook {\n border-radius: var(--border-radius);\n color: white;\n padding: var(--spacing-md);\n justify-content: center;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n}\n\n.contactsAddressBookList {\n width: 100%;\n max-width: fit-content !important;\n box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);\n min-width: 200px;\n box-sizing: border-box;\n gap: 4px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsGroupList {\n width: auto;\n max-width: fit-content !important;\n min-width: 200px;\n box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);\n box-sizing: border-box;\n gap: 4px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsErrorDisplay {\n width: 90%;\n align-self: flex-end;\n padding: 5px;\n position: absolute;\n background: pink;\n display: none;\n color: #787878;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; \n z-index: 3;\n}\n\n.contactsShowErrors {\n display: flex !important;\n flex-direction: row;\n justify-content: center;\n}\n.contactsCloseErrorDisplayButton {\n position: absolute;\n top: 0.2rem;\n right: 0.2rem;\n background: transparent;\n color: #787878;\n border: none;\n font-size: var(--font-size-sm);\n cursor: pointer;\n z-index: 4;\n}\n\n.contactsCloseButton {\n box-shadow: var(--box-shadow);\n border-radius: var(--border-radius-base);\n color: #787878 !important;\n padding: 1em;\n font-size: var(--font-size-sm);\n position: absolute;\n top: 0; \n right: 0;\n display: inline-block;\n width: auto !important;\n height: auto !important;\n cursor: pointer;\n line-height: 1;\n left: auto;\n margin: 0;\n align-self: auto !important;\n background: transparent;\n color: #787878;\n border: none;\n z-index: 100 !important;\n}\n\n.contactsCloseButton:hover {\n box-shadow: 0 2px 4px var(--color-primary) !important;\n}\n\n.contactsCloseButton:focus,\n.contactsCloseButton:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px white, 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1;\n}\n\n.contactsNewAddressForm {\n padding-top: 3em !important;\n gap: 5px;\n display: flex;\n flex-direction: column;\n}\n\n.contactsButton {\n flex-shrink: 0;\n background: #F0F0F0;\n color: #787878;\n border-radius: 8px;\n text-align: left;\n padding: var(--spacing-md);\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsButton:hover {\n color: var(--color-primary);\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n} \n\n.contactsSelectedButton {\n background: color-mix(in srgb, var(--color-primary), white 60%) !important; \n color: var(--color-primary);\n}\n\n.contactsContactExistsAlert {\n background: #F0F0F0 !important;\n color: #787878;\n padding: 10px;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n z-index: 10;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 300px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 15px; \n text-wrap: pretty;\n}\n\n.contactsContactExistsActions {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: auto;\n}\n\n.contactsContactExistsActions .contactsConfirmButton,\n.contactsContactExistsActions .contactsCancelButton {\n display: inline-flex !important;\n width: auto !important;\n min-width: fit-content;\n flex: 0 0 auto;\n margin: 0;\n white-space: nowrap;\n}\n\n.contactsAddressBookSelector [role=\"alert\"] {\n border: none !important; /* Remove borders from alerts within the contacts dialog */\n}\n\n.contactsPopupOverlay {\n position: absolute;\n inset: 0;\n background: rgba(0, 0, 0, 0.2);\n z-index: 8;\n}\n\n.contactsAddressBookSelector.contactsOverlayActive > *:not(.contactsPopupOverlay):not(.contactsPopupDialog):not(.contactsContactExistsAlert) {\n pointer-events: none;\n user-select: none;\n}\n\n.contactsAddressBookSelector.contactsOverlayActive .contactsPopupDialog,\n.contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert,\n.contactsAddressBookSelector.contactsOverlayActive .contactsPopupDialog *,\n.contactsAddressBookSelector.contactsOverlayActive .contactsContactExistsAlert * {\n pointer-events: auto;\n}\n\n.contactsPopupDialog {\n background: #F5F5F5 !important;\n color: var(--color-primary);\n padding: 2em;\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;\n z-index: 50;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: auto;\n max-width: min(92vw, 34rem);\n max-height: calc(100vh - 6rem);\n overflow: auto;\n box-sizing: border-box;\n}\n\n@media (max-width: 600px) {\n .contactsAddressBookUriEntry {\n padding-top: 3rem !important;\n }\n\n .contactsPopupDialog {\n max-width: 92vw;\n max-height: 78vh;\n padding: 1.25rem;\n }\n}\n\n.contactsConfirmButton {\n background: var(--color-primary);\n color: white;\n border-radius: var(--border-radius-base);\n padding: var(--spacing-md);\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n\n.contactsConfirmButton:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.contactsCancelButton {\n background: transparent;\n color: #787878;\n border-radius: var(--border-radius-base);\n padding: var(--spacing-md);\n border: 1px solid #ccc;\n transition: all 0.3s ease-in-out;\n cursor: pointer;\n}\n.contactsCancelButton:hover {\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary);\n} \n\n.contactsNewContactCreationButton {\n width: 10em !important;\n align-self: flex-end;\n line-height: 1;\n}\n\n.contactsCreateGroupCreationButton {\n flex-shrink: 0;\n background: color-mix(in srgb, var(--color-primary), white 85%) !important; \n color: var(--color-primary) !important;\n border-radius: 8px;\n text-align: left;\n cursor: pointer;\n white-space: nowrap;\n}\n\n.contactsCloseButton {\n position: absolute !important;\n top: 0 !important;\n right: 0 !important;\n left: auto;\n margin: 0;\n align-self: auto !important;\n background: transparent;\n color: #787878;\n font-size: var(--font-size-xs);\n border: none;\n font-size: var(--font-size-sm);\n cursor: pointer;\n z-index: 100 !important;\n padding: 0.35rem 0.5rem;\n line-height: 1;\n}\n\n"],"sourceRoot":""}]);
5191
5191
  // Exports
5192
5192
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
5193
5193
 
@@ -5792,6 +5792,10 @@ var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBP
5792
5792
  // Module
5793
5793
  ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layout, spacing, and responsiveness */
5794
5794
 
5795
+ :root {
5796
+ --font-size-md: 1em;
5797
+ }
5798
+
5795
5799
  .actionButton {
5796
5800
  width: 100%;
5797
5801
  min-width: 180px;
@@ -6149,7 +6153,7 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* Utility-first CSS classes for layou
6149
6153
  input[type="radio"] {
6150
6154
  accent-color: var(--color-secondary); /* Change to your desired color */
6151
6155
  }
6152
- `, "",{"version":3,"sources":["webpack://./src/styles/utilities.css"],"names":[],"mappings":"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","sourcesContent":["/* Utility-first CSS classes for layout, spacing, and responsiveness */\n\n.actionButton {\n width: 100%;\n min-width: 180px;\n max-width: 320px;\n box-sizing: border-box;\n display: inline-block;\n}\n\n.selectedButton {\n background-color: var(--color-primary) !important;\n color: white !important;\n border: 1px solid white !important;\n}\n/* ===========================================\n PROFILE GRID LAYOUT\n =========================================== */\n\n.profile-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));\n gap: var(--spacing-lg);\n background: var(--color-background);\n}\n\n.profile-header,\n.profile-footer {\n grid-column: 1 / -1;\n}\n\n.center {\n justify-content: center;\n align-items: center;\n}\n\n.flex {\n display: flex;\n}\n.grid {\n display: grid;\n}\n\n/* Spacing utilities using CSS variables */\n.gap-xs { gap: var(--spacing-xs); }\n.gap-sm { gap: var(--spacing-sm); }\n.gap-md { gap: var(--spacing-md); }\n.gap-lg { gap: var(--spacing-lg); }\n.gap-xl { gap: var(--spacing-xl); }\n\n.mt-xs { margin-top: var(--spacing-xs); }\n.mt-sm { margin-top: var(--spacing-sm); }\n.mt-md { margin-top: var(--spacing-md); }\n.mt-lg { margin-top: var(--spacing-lg); }\n\n.mb-xs { margin-bottom: var(--spacing-xs); }\n.mb-sm { margin-bottom: var(--spacing-sm); }\n.mb-md { margin-bottom: var(--spacing-md); }\n.mb-lg { margin-bottom: var(--spacing-lg); }\n\n.p-xs { padding: var(--spacing-xs); }\n.p-sm { padding: var(--spacing-sm); }\n.p-md { padding: var(--spacing-md); }\n.p-lg { padding: var(--spacing-lg); }\n\n.rounded { border-radius: var(--border-radius-full); }\n.rounded-sm { border-radius: var(--border-radius-base); }\n\n.shadow { box-shadow: var(--box-shadow); }\n.shadow-sm { box-shadow: var(--box-shadow-sm); }\n\n.bg-primary {\n background: var(--color-primary);\n color: #fff;\n}\n.bg-card {\n background: var(--color-card-bg);\n}\n\n/* Accessibility utilities */\n.sr-only {\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\n.min-touch-target {\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n}\n\n/* Enhanced accessibility utilities */\n.visually-hidden {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.visually-hidden.focusable:focus,\n.visually-hidden.focusable:active {\n position: static !important;\n width: auto !important;\n height: auto !important;\n padding: inherit !important;\n margin: inherit !important;\n overflow: visible !important;\n clip: auto !important;\n white-space: inherit !important;\n}\n\n/* Skip links utility */\n.skip-links {\n position: absolute;\n top: -100px;\n left: 0;\n z-index: 1000;\n}\n\n.skip-links a {\n position: absolute;\n left: 6px;\n top: 6px;\n padding: var(--spacing-sm);\n background: var(--color-primary);\n color: white;\n text-decoration: none;\n border-radius: var(--border-radius-base);\n}\n\n.skip-links a:focus {\n top: 6px;\n}\n\n.reduced-motion {\n animation: none !important;\n transition: none !important;\n}\n\n/* Focus management */\n.focus-ring {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.no-focus-ring {\n outline: none;\n}\n\n.no-focus-ring:focus-visible {\n outline: none;\n box-shadow: none;\n}\n\n/* ARIA live regions */\n.live-region {\n position: absolute;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n/* Note: Use aria-live=\"polite\" or aria-live=\"assertive\" HTML attributes with .live-region */\n\n/* Text scaling utilities */\n.text-scale-friendly {\n line-height: 1.5;\n max-width: 70ch; /* Optimal reading length */\n}\n\n/* Text accessibility utilities */\n.text-readable {\n line-height: var(--line-height-base);\n max-width: 65ch;\n}\n\n.text-lg {\n font-size: var(--font-size-lg);\n line-height: var(--line-height-base);\n}\n\n.text-small {\n font-size: max(var(--font-size-sm), var(--min-font-size));\n line-height: var(--min-line-height);\n}\n\n.text-contrast-high {\n color: var(--color-text);\n font-weight: 600;\n}\n\n:focus-visible {\n outline: var(--focus-ring-width) solid var(--color-primary);\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n:focus:not(:focus-visible) {\n outline: none;\n box-shadow: none;\n}\n\n/* Better focus for text elements */\n.focusable-text:focus {\n background-color: rgba(124, 77, 255, 0.1);\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n}\n\n/* High contrast text */\n.high-contrast {\n color: var(--color-text);\n background: var(--color-background);\n border: 1px solid var(--color-border-pale);\n}\n\n/* ===========================================\n CONSOLIDATED COMPONENT PATTERNS\n =========================================== */\n\n/* Primary Button - used by ChatWithMe, ProfileCard */\n.btn-primary {\n min-height: var(--min-touch-target);\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid var(--color-primary);\n border-radius: var(--border-radius-base);\n background: var(--color-primary);\n color: white;\n font-weight: 600;\n cursor: pointer;\n transition: all var(--animation-duration) ease;\n}\n\n.btn-primary:hover {\n background: color-mix(in srgb, var(--color-primary) 90%, black);\n box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:active {\n box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n/* Action Button Focus - used by ChatWithMe, ProfileCard */\n.action-button-focus:focus,\n.action-button-focus:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1;\n}\n\n/* List Reset - used by FriendList, SocialCard, nav */\n.list-reset {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Zebra Striping - used by FriendList, StuffCard tables */\n.zebra-stripe tr:nth-child(even),\n.zebra-stripe > *:nth-child(even) {\n background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Section Title - primary colored heading */\n.section-title {\n font-size: 1.25em;\n font-weight: 600;\n color: var(--color-primary);\n margin: 0;\n}\n\n/* Text Overflow - used by ProfileCard, SocialCard */\n.text-truncate {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.text-wrap-anywhere {\n overflow-wrap: anywhere;\n word-break: break-word;\n}\n\n/* Loading Text - primary colored centered loading indicator */\n.loading-text {\n color: var(--color-primary);\n text-align: center;\n margin: var(--spacing-md) 0;\n}\n\n/* Centered Section - flex column with center alignment */\n.section-centered {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Card Section Background */\n.section-bg {\n background: var(--color-section-bg);\n border-radius: var(--border-radius-full);\n box-shadow: var(--box-shadow);\n padding: var(--spacing-md);\n}\n\n\n/* Transparent button override (for solid-ui integration) */\n.btn-transparent {\n background-color: transparent;\n}\n\n.btn-transparent:hover {\n background-color: transparent;\n}\n\n/* input */\n.input {\n padding: 5px;\n min-height: var(--min-touch-target);\n height: 35px;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n border: none;\n border-radius: var(--border-radius-base);\n background: white;\n font-weight: 600;\n font-size: var(--font-size-sm);\n transition: box-shadow 0.3s ease;\n}\n\n.input:focus,\n.input:focus-visible {\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px !important;\n z-index: 1;\n}\n\ninput[type=\"radio\"] {\n accent-color: var(--color-secondary); /* Change to your desired color */\n}\n"],"sourceRoot":""}]);
6156
+ `, "",{"version":3,"sources":["webpack://./src/styles/utilities.css"],"names":[],"mappings":"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","sourcesContent":["/* Utility-first CSS classes for layout, spacing, and responsiveness */\n\n:root {\n --font-size-md: 1em;\n}\n\n.actionButton {\n width: 100%;\n min-width: 180px;\n max-width: 320px;\n box-sizing: border-box;\n display: inline-block;\n}\n\n.selectedButton {\n background-color: var(--color-primary) !important;\n color: white !important;\n border: 1px solid white !important;\n}\n/* ===========================================\n PROFILE GRID LAYOUT\n =========================================== */\n\n.profile-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(30em, 1fr));\n gap: var(--spacing-lg);\n background: var(--color-background);\n}\n\n.profile-header,\n.profile-footer {\n grid-column: 1 / -1;\n}\n\n.center {\n justify-content: center;\n align-items: center;\n}\n\n.flex {\n display: flex;\n}\n.grid {\n display: grid;\n}\n\n/* Spacing utilities using CSS variables */\n.gap-xs { gap: var(--spacing-xs); }\n.gap-sm { gap: var(--spacing-sm); }\n.gap-md { gap: var(--spacing-md); }\n.gap-lg { gap: var(--spacing-lg); }\n.gap-xl { gap: var(--spacing-xl); }\n\n.mt-xs { margin-top: var(--spacing-xs); }\n.mt-sm { margin-top: var(--spacing-sm); }\n.mt-md { margin-top: var(--spacing-md); }\n.mt-lg { margin-top: var(--spacing-lg); }\n\n.mb-xs { margin-bottom: var(--spacing-xs); }\n.mb-sm { margin-bottom: var(--spacing-sm); }\n.mb-md { margin-bottom: var(--spacing-md); }\n.mb-lg { margin-bottom: var(--spacing-lg); }\n\n.p-xs { padding: var(--spacing-xs); }\n.p-sm { padding: var(--spacing-sm); }\n.p-md { padding: var(--spacing-md); }\n.p-lg { padding: var(--spacing-lg); }\n\n.rounded { border-radius: var(--border-radius-full); }\n.rounded-sm { border-radius: var(--border-radius-base); }\n\n.shadow { box-shadow: var(--box-shadow); }\n.shadow-sm { box-shadow: var(--box-shadow-sm); }\n\n.bg-primary {\n background: var(--color-primary);\n color: #fff;\n}\n.bg-card {\n background: var(--color-card-bg);\n}\n\n/* Accessibility utilities */\n.sr-only {\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\n.min-touch-target {\n min-height: var(--min-touch-target);\n min-width: var(--min-touch-target);\n}\n\n/* Enhanced accessibility utilities */\n.visually-hidden {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n padding: 0 !important;\n margin: -1px !important;\n overflow: hidden !important;\n clip: rect(0, 0, 0, 0) !important;\n white-space: nowrap !important;\n border: 0 !important;\n}\n\n.visually-hidden.focusable:focus,\n.visually-hidden.focusable:active {\n position: static !important;\n width: auto !important;\n height: auto !important;\n padding: inherit !important;\n margin: inherit !important;\n overflow: visible !important;\n clip: auto !important;\n white-space: inherit !important;\n}\n\n/* Skip links utility */\n.skip-links {\n position: absolute;\n top: -100px;\n left: 0;\n z-index: 1000;\n}\n\n.skip-links a {\n position: absolute;\n left: 6px;\n top: 6px;\n padding: var(--spacing-sm);\n background: var(--color-primary);\n color: white;\n text-decoration: none;\n border-radius: var(--border-radius-base);\n}\n\n.skip-links a:focus {\n top: 6px;\n}\n\n.reduced-motion {\n animation: none !important;\n transition: none !important;\n}\n\n/* Focus management */\n.focus-ring {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n.no-focus-ring {\n outline: none;\n}\n\n.no-focus-ring:focus-visible {\n outline: none;\n box-shadow: none;\n}\n\n/* ARIA live regions */\n.live-region {\n position: absolute;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n}\n\n/* Note: Use aria-live=\"polite\" or aria-live=\"assertive\" HTML attributes with .live-region */\n\n/* Text scaling utilities */\n.text-scale-friendly {\n line-height: 1.5;\n max-width: 70ch; /* Optimal reading length */\n}\n\n/* Text accessibility utilities */\n.text-readable {\n line-height: var(--line-height-base);\n max-width: 65ch;\n}\n\n.text-lg {\n font-size: var(--font-size-lg);\n line-height: var(--line-height-base);\n}\n\n.text-small {\n font-size: max(var(--font-size-sm), var(--min-font-size));\n line-height: var(--min-line-height);\n}\n\n.text-contrast-high {\n color: var(--color-text);\n font-weight: 600;\n}\n\n:focus-visible {\n outline: var(--focus-ring-width) solid var(--color-primary);\n outline-offset: 2px;\n box-shadow: 0 0 0 1px var(--color-background);\n}\n\n:focus:not(:focus-visible) {\n outline: none;\n box-shadow: none;\n}\n\n/* Better focus for text elements */\n.focusable-text:focus {\n background-color: rgba(124, 77, 255, 0.1);\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n border-radius: 2px;\n}\n\n/* High contrast text */\n.high-contrast {\n color: var(--color-text);\n background: var(--color-background);\n border: 1px solid var(--color-border-pale);\n}\n\n/* ===========================================\n CONSOLIDATED COMPONENT PATTERNS\n =========================================== */\n\n/* Primary Button - used by ChatWithMe, ProfileCard */\n.btn-primary {\n min-height: var(--min-touch-target);\n padding: var(--spacing-sm) var(--spacing-md);\n border: 1px solid var(--color-primary);\n border-radius: var(--border-radius-base);\n background: var(--color-primary);\n color: white;\n font-weight: 600;\n cursor: pointer;\n transition: all var(--animation-duration) ease;\n}\n\n.btn-primary:hover {\n background: color-mix(in srgb, var(--color-primary) 90%, black);\n box-shadow: 0 2px 4px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:active {\n box-shadow: 0 1px 2px rgba(124, 77, 255, 0.2);\n}\n\n.btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n/* Action Button Focus - used by ChatWithMe, ProfileCard */\n.action-button-focus:focus,\n.action-button-focus:focus-visible {\n outline: 3px solid var(--color-primary) !important;\n outline-offset: 2px !important;\n box-shadow: 0 0 0 2px var(--color-background), 0 0 0 5px rgba(124, 77, 255, 0.25) !important;\n z-index: 1;\n}\n\n/* List Reset - used by FriendList, SocialCard, nav */\n.list-reset {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n/* Zebra Striping - used by FriendList, StuffCard tables */\n.zebra-stripe tr:nth-child(even),\n.zebra-stripe > *:nth-child(even) {\n background-color: rgba(0, 0, 0, 0.02);\n}\n\n/* Section Title - primary colored heading */\n.section-title {\n font-size: 1.25em;\n font-weight: 600;\n color: var(--color-primary);\n margin: 0;\n}\n\n/* Text Overflow - used by ProfileCard, SocialCard */\n.text-truncate {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n\n.text-wrap-anywhere {\n overflow-wrap: anywhere;\n word-break: break-word;\n}\n\n/* Loading Text - primary colored centered loading indicator */\n.loading-text {\n color: var(--color-primary);\n text-align: center;\n margin: var(--spacing-md) 0;\n}\n\n/* Centered Section - flex column with center alignment */\n.section-centered {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n/* Card Section Background */\n.section-bg {\n background: var(--color-section-bg);\n border-radius: var(--border-radius-full);\n box-shadow: var(--box-shadow);\n padding: var(--spacing-md);\n}\n\n\n/* Transparent button override (for solid-ui integration) */\n.btn-transparent {\n background-color: transparent;\n}\n\n.btn-transparent:hover {\n background-color: transparent;\n}\n\n/* input */\n.input {\n padding: 5px;\n min-height: var(--min-touch-target);\n height: 35px;\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;\n border: none;\n border-radius: var(--border-radius-base);\n background: white;\n font-weight: 600;\n font-size: var(--font-size-sm);\n transition: box-shadow 0.3s ease;\n}\n\n.input:focus,\n.input:focus-visible {\n border-radius: var(--border-radius-base);\n box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px !important;\n z-index: 1;\n}\n\ninput[type=\"radio\"] {\n accent-color: var(--color-secondary); /* Change to your desired color */\n}\n"],"sourceRoot":""}]);
6153
6157
  // Exports
6154
6158
  /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
6155
6159
 
@@ -11619,6 +11623,7 @@ const createNewAddressBookForm = (context, addressBooksData, contactsModule, con
11619
11623
  return newAddressBookForm;
11620
11624
  };
11621
11625
  const createCloseButton = (context, element, specialClass) => {
11626
+ const buttonID = `${element.id}-close-button`;
11622
11627
  const setButtonOnClickHandler = (event) => {
11623
11628
  event.preventDefault();
11624
11629
  if (element) {
@@ -11632,7 +11637,7 @@ const createCloseButton = (context, element, specialClass) => {
11632
11637
  }
11633
11638
  };
11634
11639
  const closeButton = context.dom.createElement('button');
11635
- closeButton.setAttribute('id', 'close-addressbook');
11640
+ closeButton.setAttribute('id', buttonID);
11636
11641
  closeButton.setAttribute('role', 'button');
11637
11642
  closeButton.setAttribute('type', 'button');
11638
11643
  const ariaLabel = specialClass === 'contactsCloseButton'