@orangesk/orange-design-system 2.0.0-beta.29 → 2.0.0-beta.30

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 (45) hide show
  1. package/build/components/CarouselPromotions/style.css +1 -1
  2. package/build/components/CarouselPromotions/style.css.map +1 -1
  3. package/build/components/Expander/style.css +1 -1
  4. package/build/components/Expander/style.css.map +1 -1
  5. package/build/components/Grid/style.css +1 -1
  6. package/build/components/Grid/style.css.map +1 -1
  7. package/build/components/Progress/style.css +1 -1
  8. package/build/components/Progress/style.css.map +1 -1
  9. package/build/components/Tag/style.css +1 -1
  10. package/build/components/Tag/style.css.map +1 -1
  11. package/build/components/Tile/style.css +1 -1
  12. package/build/components/Tile/style.css.map +1 -1
  13. package/build/components/index.js +1 -1
  14. package/build/components/index.js.map +1 -1
  15. package/build/components/tsconfig.tsbuildinfo +1 -1
  16. package/build/components/types/index.d.ts +2 -2
  17. package/build/components/types/src/components/Carousel/Carousel.static.d.ts +2 -2
  18. package/build/components/types/src/components/Grid/Grid.d.ts +2 -2
  19. package/build/lib/base.css +1 -1
  20. package/build/lib/base.css.map +1 -1
  21. package/build/lib/components.css +1 -1
  22. package/build/lib/components.css.map +1 -1
  23. package/build/lib/scripts.js +1 -1
  24. package/build/lib/scripts.js.map +1 -1
  25. package/build/lib/style.css +1 -1
  26. package/build/lib/style.css.map +1 -1
  27. package/build/lib/tsconfig.tsbuildinfo +1 -1
  28. package/build/lib/utilities.css +1 -1
  29. package/build/lib/utilities.css.map +1 -1
  30. package/build/search-index.json +5 -1
  31. package/package.json +6 -6
  32. package/src/components/Carousel/Carousel.static.ts +15 -8
  33. package/src/components/Expander/Expander.static.ts +0 -41
  34. package/src/components/Expander/Expander.tsx +4 -9
  35. package/src/components/Expander/styles/style.scss +1 -0
  36. package/src/components/Grid/Grid.tsx +9 -3
  37. package/src/components/Grid/styles/config.scss +3 -2
  38. package/src/components/Grid/styles/mixins.scss +20 -34
  39. package/src/components/Grid/styles/style.scss +15 -5
  40. package/src/components/Grid/tests/Grid.unit.test.js +3 -3
  41. package/src/components/Tag/styles/style.scss +5 -0
  42. package/src/components/Tile/styles/mixins.scss +1 -0
  43. package/src/styles/base/globals.scss +4 -0
  44. package/src/styles/typography/config.scss +21 -1
  45. package/src/styles/typography/style.scss +13 -0
package/build/lib/utilities.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["utilities.scss"],"names":[],"mappings":"AAAA,iBACE,oBACE,0DACF,CACA,sBACE,4DACF,CACA,qBACE,2DACF,CACA,mBACE,yDACF,CACA,yBACE,+DACF,CACA,yBACE,+DACF,CACA,iBACE,uDACF,CACA,mBACE,yDACF,CACA,kBACE,wDACF,CACA,gBACE,sDACF,CACA,kBACE,wDACF,CACA,kBACE,wDACF,CACA,gBACE,sDACF,CACA,cACE,oDACF,CACA,gBACE,sDACF,CACA,eACE,qDACF,CACA,aACE,mDACF,CACA,eACE,qDACF,CACA,eACE,qDACF,CACA,eACE,qDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,kBACE,wDACF,CACA,eACE,qDACF,CACA,cACE,oDACF,CACA,eACE,qDACF,CACA,eACE,iDACF,CACA,eACE,iDACF,CACA,iBACE,mDACF,CACA,eACE,iDACF,CACA,oBACE,sDACF,CACA,iBACE,mDACF,CACA,gBACE,kDACF,CACA,iBACE,mDACF,CACA,cACE,yCACF,CACA,gBACE,2CACF,CACA,eACE,0CACF,CACA,cACE,yCACF,CACA,aACE,wCACF,CACA,cACE,yCACF,CACA,cACE,yCACF,CACA,YACE,uCACF,CACA,aACE,wCACF,CACA,eACE,0CACF,CACA,kBACE,6CACF,CACA,eACE,0CACF,CACA,cACE,yCACF,CACA,eACE,0CACF,CACA,aACE,oBACF,CACA,cACE,wCACF,CACA,YACE,oBACF,CACA,aACE,oBACF,CACA,YACE,6CACF,CACA,cACE,0CACF,CACA,UACE,+BAAoC,CACpC,+BACF,CACA,2CACE,6CACF,CACA,UACE,kCAAoC,CACpC,+BACF,CACA,2CACE,oBACF,CACA,2CACE,uBACF,CACA,WACE,yDAA2D,CAC3D,oBACF,CACA,gBACE,wDAA0D,CAC1D,yCACF,CACA,SACE,sDACF,CACA,iBACE,4DACF,CACA,SACE,oDAEF,CACA,mBAFE,oBAKF,CAHA,UACE,oDAEF,CACA,SACE,oDAEF,CACA,oBAFE,oBAKF,CAHA,WACE,oDAEF,CACA,WACE,oDAAsD,CACtD,oBACF,CACA,mBACE,kCAAoC,CACpC,oBACF,CACA,QACE,kCAAoC,CACpC,oBACF,CACA,WACE,yDAEF,CACA,4BAFE,yCAKF,CAHA,iBACE,+DAEF,CACA,iBACE,+DAAiE,CACjE,yCACF,CACA,4GAIE,iDAAkD,CAClD,+BACF,CACA,uBACE,+BACF,CAIA,0BACE,yBACF,CAMA,aAEE,yBACF,CACA,QACE,yBACF,CACA,MACE,yBACF,CACA,WAEE,2BACF,CACA,WACE,mCAAqC,CACrC,oCACF,CAIA,+BACE,8BACF,CACA,uBACE,mCACF,CACA,WACE,uBAAyB,CACzB,yBACF,CACA,aAEE,iBAAmB,CAEnB,eAAgB,CAChB,gBAAoB,CAFpB,mBAGF,CA1CF,CAIA,iBAuCE,oCACE,aAEE,cAAe,CAEf,eAAgB,CAChB,yBAA2B,CAF3B,kBAGF,CACF,CACA,oCACE,aAEE,cAAe,CAEf,eAAgB,CAChB,yBAA2B,CAF3B,kBAGF,CACF,CACA,OACE,kBAAmB,CAEnB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACA,oCACE,OACE,iBAAkB,CAElB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACF,CACA,oCACE,OACE,iBAAkB,CAElB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACF,CACA,aACE,4BACF,CACA,WACE,4BACF,CACA,eACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CACA,YACE,yBACF,CACA,cACE,2BACF,CACA,aACE,0BACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,qCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,qCACE,iBACE,0BACF,CACA,gBACE,yBACF,CACA,kBACE,2BACF,CACF,CACA,uBACE,8BACF,CACA,cACE,+BACF,CACA,WACE,4BACF,CACA,cACE,+BACF,CACA,gBACE,iCACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,qCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,qCACE,mBACE,+BACF,CACA,gBACE,4BACF,CACA,mBACE,+BACF,CACA,qBACE,iCACF,CACF,CACA,mBACE,yBACF,CACA,iBACE,wBAA0B,CAC1B,0BACF,CACA,gBACE,cACF,CACA,eACE,cACF,CACA,aACE,cACF,CAGA,uBACE,kBACF,CACA,QACE,6CACF,CACA,mBACE,mDACF,CACA,cACE,uCACF,CACA,mEACE,wCACF,CACA,gBACE,uCACF,CAGA,IACE,qBACF,CAIA,WACE,2BACF,CACA,UACE,4BACF,CACA,WACE,4BACF,CACA,UACE,4BACF,CACA,WACE,4BACF,CACA,SACE,yBACF,CA7CF,CAqBA,iBAyBE,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,qCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,qCAIE,eACE,2BACF,CACA,cACE,4BACF,CACA,eACE,4BACF,CACA,cACE,4BACF,CACA,eACE,4BACF,CACA,aACE,yBACF,CACF,CACA,SACE,sBACF,CACA,SACE,uBACF,CACA,SACE,wBACF,CACA,SACE,yBACF,CACA,SACE,0BACF,CACA,SACE,uBACF,CACA,SACE,wBACF,CACA,QACE,kBACF,CACA,QACE,mBACF,CACA,iCACE,UAAW,CACX,aACF,CAIA,uBACE,UACF,CACA,uBACE,0BACF,CACA,qBACE,wBACF,CACA,wBACE,sBACF,CACA,8BACE,4BACF,CACA,+BACE,6BACF,CACA,mBACE,sBACF,CACA,iBACE,oBACF,CACA,oBACE,kBACF,CACA,qBACE,mBACF,CACA,iBACE,aAAc,CACd,iBACF,CACA,kBACE,gBAAiB,CACjB,cACF,CACA,mBACE,gBAAiB,CACjB,iBACF,CACA,gBACE,qBACF,CACA,mBACE,mBACF,CACA,mBACE,iBACF,CACA,oBACE,kBACF,CACA,iBACE,SACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,qCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,qCACE,4BACE,0BACF,CACA,0BACE,wBACF,CACA,6BACE,sBACF,CACA,mCACE,4BACF,CACA,oCACE,6BACF,CACA,wBACE,sBACF,CACA,sBACE,oBACF,CACA,yBACE,kBACF,CACA,0BACE,mBACF,CACA,sBACE,aAAc,CACd,iBACF,CACA,uBACE,gBAAiB,CACjB,cACF,CACA,wBACE,gBAAiB,CACjB,iBACF,CACA,qBACE,qBACF,CACA,wBACE,mBACF,CACA,wBACE,iBACF,CACA,yBACE,kBACF,CACA,sBACE,SACF,CACF,CACA,mBAGE,iBAAkB,CADlB,QAAS,CADT,cAGF,CACA,mBAGE,iBAAkB,CADlB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,SACE,aACF,CACA,gBACE,oBACF,CACA,UACE,cACF,CACA,QACE,YACF,CACA,eACE,mBACF,CACA,aACE,qBACF,CACA,WACE,oBACF,CACA,yDACE,mBACE,oBACF,CACF,CACA,YACE,qBACF,CACA,cACE,0BAA4B,CAC5B,2BACF,CACA,UACE,2BACF,CACA,UACE,2BACF,CAGA,0BASE,0BAA2B,CAC3B,0BAA8B,CAJ9B,QAAS,CAJT,UAAW,CAEX,WAAY,CAIZ,eAAgB,CAHhB,SAAU,CAEV,iBAAkB,CAJlB,SAQF,CACA,MACE,sBACF,CACA,WACE,iBACF,CAnBF,CACA,iBAmBE,oCACE,cACE,sBACF,CACF,CACA,yDACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,oCACE,cACE,sBACF,CACF,CACA,6DACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,oCACE,cACE,sBACF,CACF,CACA,6DACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,qCACE,cACE,sBACF,CACF,CACA,8DACE,cACE,sBACF,CACF,CACA,wCACE,SACE,sBACF,CACF,CACA,qCACE,SACE,sBACF,CACF,CACA,wCACE,cACE,sBACF,CACF,CACA,qCACE,cACE,sBACF,CACF,CACA,+DACE,cACE,sBACF,CACF,CACA,wCACE,UACE,sBACF,CACF,CACA,qCACE,UACE,sBACF,CACF,CACA,wCACE,eACE,sBACF,CACF,CACF,CACA,iBACE,SACE,iBACF,CACA,yDACE,iBACE,iBACF,CACF,CACA,SACE,iBACF,CACA,yDACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,8DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,8DACE,iBACE,iBACF,CACF,CACA,qCACE,YACE,iBACF,CACF,CACA,+DACE,iBACE,iBACF,CACF,CACA,qCACE,YACE,iBACF,CACF,CACA,+DACE,iBACE,iBACF,CACF,CACA,qCACE,aACE,iBACF,CAGA,aACE,iBACF,CAJF,CAMF,CACA,iBACE,6CAIE,4BAA6B,CAF7B,wEAAyE,CACzE,oBAEF,CACA,iDAEE,uBACF,CACA,mFAGE,eAAgB,CAChB,8CAA+C,CAC/C,kBAAmB,CAHnB,cAIF,CACA,+FAGE,2CAA4C,CAC5C,kBAAmB,CAFnB,SAGF,CACA,mBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,2BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,qCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,qCACE,wBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,gCAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACF,CACA,iBAKE,mDAIE,YAAa,CADb,cAEF,CACA,4DAIE,eAAgB,CADhB,YAEF,CACF","file":"utilities.css","sourcesContent":["@layer utilities {\n .background-primary {\n background-color: var(--color-background-primary) !important;\n }\n .background-secondary {\n background-color: var(--color-background-secondary) !important;\n }\n .background-contrast {\n background-color: var(--color-background-contrast) !important;\n }\n .background-accent {\n background-color: var(--color-background-accent) !important;\n }\n .background-accent1-blog {\n background-color: var(--color-background-accent1-blog) !important;\n }\n .background-accent2-blog {\n background-color: var(--color-background-accent2-blog) !important;\n }\n .surface-primary {\n background-color: var(--color-surface-primary) !important;\n }\n .surface-secondary {\n background-color: var(--color-surface-secondary) !important;\n }\n .surface-tertiary {\n background-color: var(--color-surface-tertiary) !important;\n }\n .surface-subtle {\n background-color: var(--color-surface-subtle) !important;\n }\n .surface-moderate {\n background-color: var(--color-surface-moderate) !important;\n }\n .surface-contrast {\n background-color: var(--color-surface-contrast) !important;\n }\n .surface-accent {\n background-color: var(--color-surface-accent) !important;\n }\n .fill-primary {\n background-color: var(--color-fill-primary) !important;\n }\n .fill-secondary {\n background-color: var(--color-fill-secondary) !important;\n }\n .fill-tertiary {\n background-color: var(--color-fill-tertiary) !important;\n }\n .fill-subtle {\n background-color: var(--color-fill-subtle) !important;\n }\n .fill-moderate {\n background-color: var(--color-fill-moderate) !important;\n }\n .fill-disabled {\n background-color: var(--color-fill-disabled) !important;\n }\n .fill-contrast {\n background-color: var(--color-fill-contrast) !important;\n }\n .fill-accent1 {\n background-color: var(--color-fill-accent1) !important;\n }\n .fill-accent2 {\n background-color: var(--color-fill-accent2) !important;\n }\n .fill-accent3 {\n background-color: var(--color-fill-accent3) !important;\n }\n .fill-accent4 {\n background-color: var(--color-fill-accent4) !important;\n }\n .fill-accent5 {\n background-color: var(--color-fill-accent5) !important;\n }\n .fill-information {\n background-color: var(--color-fill-information) !important;\n }\n .fill-positive {\n background-color: var(--color-fill-positive) !important;\n }\n .fill-warning {\n background-color: var(--color-fill-warning) !important;\n }\n .fill-negative {\n background-color: var(--color-fill-negative) !important;\n }\n .border-subtle {\n border-color: var(--color-border-subtle) !important;\n }\n .border-strong {\n border-color: var(--color-border-strong) !important;\n }\n .border-contrast {\n border-color: var(--color-border-contrast) !important;\n }\n .border-accent {\n border-color: var(--color-border-accent) !important;\n }\n .border-information {\n border-color: var(--color-border-information) !important;\n }\n .border-positive {\n border-color: var(--color-border-positive) !important;\n }\n .border-warning {\n border-color: var(--color-border-warning) !important;\n }\n .border-negative {\n border-color: var(--color-border-negative) !important;\n }\n .text-default {\n color: var(--color-text-default) !important;\n }\n .text-secondary {\n color: var(--color-text-secondary) !important;\n }\n .text-disabled {\n color: var(--color-text-disabled) !important;\n }\n .text-inverse {\n color: var(--color-text-inverse) !important;\n }\n .text-accent {\n color: var(--color-text-accent) !important;\n }\n .icon-default {\n color: var(--color-icon-default) !important;\n }\n .icon-inverse {\n color: var(--color-icon-inverse) !important;\n }\n .icon-brand {\n color: var(--color-icon-brand) !important;\n }\n .icon-accent {\n color: var(--color-icon-accent) !important;\n }\n .icon-disabled {\n color: var(--color-icon-disabled) !important;\n }\n .icon-information {\n color: var(--color-icon-information) !important;\n }\n .icon-positive {\n color: var(--color-icon-positive) !important;\n }\n .icon-warning {\n color: var(--color-icon-warning) !important;\n }\n .icon-negative {\n color: var(--color-icon-negative) !important;\n }\n .color-black {\n color: #000000 !important;\n }\n .color-orange {\n color: var(--color-text-accent) !important;\n }\n .color-gray {\n color: #666666 !important;\n }\n .color-white {\n color: #ffffff !important;\n }\n .color-blue {\n color: var(--color-icon-information) !important;\n }\n .color-danger {\n color: var(--color-icon-negative) !important;\n }\n .bg-white {\n background-color: #ffffff !important;\n color: var(--color-text-default);\n }\n .bg-white .color-blue, .bg-white.color-blue {\n color: var(--color-icon-information) !important;\n }\n .bg-black {\n background-color: #141414 !important;\n color: var(--color-text-inverse);\n }\n .bg-black .color-gray, .bg-black.color-gray {\n color: #dddddd !important;\n }\n .bg-black .color-blue, .bg-black.color-blue {\n color: #4bb4e6 !important;\n }\n .bg-orange {\n background-color: var(--color-surface-secondary) !important;\n color: #000000 !important;\n }\n .bg-orange-dark {\n background-color: var(--color-surface-tertiary) !important;\n color: var(--color-text-inverse) !important;\n }\n .bg-gray {\n background-color: var(--color-surface-subtle) !important;\n }\n .bg-gray-lighter {\n background-color: var(--color-background-secondary) !important;\n }\n .bg-blue {\n background-color: var(--color-fill-accent1) !important;\n color: #000000 !important;\n }\n .bg-green {\n background-color: var(--color-fill-accent2) !important;\n color: #000000 !important;\n }\n .bg-pink {\n background-color: var(--color-fill-accent3) !important;\n color: #000000 !important;\n }\n .bg-violet {\n background-color: var(--color-fill-accent4) !important;\n color: #000000 !important;\n }\n .bg-yellow {\n background-color: var(--color-fill-accent5) !important;\n color: #000000 !important;\n }\n .bg-yellow-lighter {\n background-color: #fff6b6 !important;\n color: #000000 !important;\n }\n .bg-red {\n background-color: #ff4d4d !important;\n color: #000000 !important;\n }\n .bg-accent {\n background-color: var(--color-background-accent) !important;\n color: var(--color-text-default) !important;\n }\n .bg-accent1-blog {\n background-color: var(--color-background-accent1-blog) !important;\n color: var(--color-text-default) !important;\n }\n .bg-accent2-blog {\n background-color: var(--color-background-accent2-blog) !important;\n color: var(--color-text-default) !important;\n }\n .bg-orange::selection,\n .bg-orange-dark::selection,\n .surface-secondary::selection,\n .surface-tertiary::selection {\n background-color: var(--color-background-contrast);\n color: var(--color-text-inverse);\n }\n .color-gray::selection {\n color: var(--color-text-default);\n }\n .bg-none {\n background: none !important;\n }\n .background-none {\n background: none !important;\n }\n}\n/**\n * Resets margin-bottom of the last child to zero\n */\n@layer utilities {\n strong,\n .bold {\n font-weight: 700 !important;\n }\n .normal {\n font-weight: 400 !important;\n }\n .thin {\n font-weight: 300 !important;\n }\n em,\n .italic {\n font-style: italic !important;\n }\n .underline {\n text-decoration: underline !important;\n text-underline-offset: 0.1em !important;\n }\n .no-underline {\n text-decoration: none !important;\n }\n .underline-hover {\n text-decoration: none !important;\n }\n .underline-hover:hover {\n text-decoration: underline !important;\n }\n .no-accent {\n color: inherit !important;\n text-decoration: underline;\n }\n small,\n .small {\n font-size: 0.875rem;\n line-height: 0.875rem;\n font-weight: 400;\n letter-spacing: 0rem;\n }\n @media screen and (min-width: 768px) {\n small,\n .small {\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 400;\n letter-spacing: -0.00625rem;\n }\n }\n @media screen and (min-width: 992px) {\n small,\n .small {\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 400;\n letter-spacing: -0.00625rem;\n }\n }\n .large {\n font-size: 1.125rem;\n line-height: 1.625rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n @media screen and (min-width: 768px) {\n .large {\n font-size: 1.25rem;\n line-height: 1.875rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n }\n @media screen and (min-width: 992px) {\n .large {\n font-size: 1.25rem;\n line-height: 1.875rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n }\n .text-nowrap {\n white-space: nowrap !important;\n }\n .text-wrap {\n white-space: normal !important;\n }\n .text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .align-left {\n text-align: left !important;\n }\n .align-center {\n text-align: center !important;\n }\n .align-right {\n text-align: right !important;\n }\n @media screen and (min-width: 480px) {\n .align-sm-right {\n text-align: right !important;\n }\n .align-sm-left {\n text-align: left !important;\n }\n .align-sm-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 768px) {\n .align-md-right {\n text-align: right !important;\n }\n .align-md-left {\n text-align: left !important;\n }\n .align-md-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 992px) {\n .align-lg-right {\n text-align: right !important;\n }\n .align-lg-left {\n text-align: left !important;\n }\n .align-lg-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .align-xl-right {\n text-align: right !important;\n }\n .align-xl-left {\n text-align: left !important;\n }\n .align-xl-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .align-xxl-right {\n text-align: right !important;\n }\n .align-xxl-left {\n text-align: left !important;\n }\n .align-xxl-center {\n text-align: center !important;\n }\n }\n .reset-text-decoration {\n text-decoration: none !important;\n }\n .align-middle {\n vertical-align: middle !important;\n }\n .align-top {\n vertical-align: top !important;\n }\n .align-bottom {\n vertical-align: bottom !important;\n }\n .align-baseline {\n vertical-align: baseline !important;\n }\n @media screen and (min-width: 480px) {\n .align-middle--sm {\n vertical-align: middle !important;\n }\n .align-top--sm {\n vertical-align: top !important;\n }\n .align-bottom--sm {\n vertical-align: bottom !important;\n }\n .align-baseline--sm {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 768px) {\n .align-middle--md {\n vertical-align: middle !important;\n }\n .align-top--md {\n vertical-align: top !important;\n }\n .align-bottom--md {\n vertical-align: bottom !important;\n }\n .align-baseline--md {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 992px) {\n .align-middle--lg {\n vertical-align: middle !important;\n }\n .align-top--lg {\n vertical-align: top !important;\n }\n .align-bottom--lg {\n vertical-align: bottom !important;\n }\n .align-baseline--lg {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .align-middle--xl {\n vertical-align: middle !important;\n }\n .align-top--xl {\n vertical-align: top !important;\n }\n .align-bottom--xl {\n vertical-align: bottom !important;\n }\n .align-baseline--xl {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .align-middle--xxl {\n vertical-align: middle !important;\n }\n .align-top--xxl {\n vertical-align: top !important;\n }\n .align-bottom--xxl {\n vertical-align: bottom !important;\n }\n .align-baseline--xxl {\n vertical-align: baseline !important;\n }\n }\n .reset-font-weight {\n font-weight: normal !important;\n }\n .reset-font-size {\n font-size: 16px !important;\n line-height: 1.25 !important;\n }\n .text-fullwidth {\n max-width: none;\n }\n .text-readable {\n max-width: 35em;\n }\n .text-narrow {\n max-width: 22em;\n }\n}\n@layer utilities {\n .border-radius--medium {\n border-radius: 10px;\n }\n .border {\n border: 2px solid var(--color-border-contrast);\n }\n .border.is-invalid {\n border-color: var(--color-border-negative) !important;\n }\n .border--gray {\n border-color: var(--color-border-subtle);\n }\n .border--gray.border-hover:hover, .border--gray.is-indicating:hover {\n border-color: var(--color-text-secondary);\n }\n .border--orange {\n border-color: var(--color-border-accent);\n }\n}\n@layer utilities {\n .mb {\n margin-bottom: 1.25rem;\n }\n .mb-none {\n margin-bottom: 0 !important;\n }\n .mb-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-small {\n margin-bottom: 10px !important;\n }\n .mb-medium {\n margin-bottom: 20px !important;\n }\n .mb-large {\n margin-bottom: 30px !important;\n }\n .mb-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-none {\n margin-bottom: 0 !important;\n }\n @media screen and (min-width: 480px) {\n .mb-sm-none {\n margin-bottom: 0 !important;\n }\n .mb-sm-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-sm-small {\n margin-bottom: 10px !important;\n }\n .mb-sm-medium {\n margin-bottom: 20px !important;\n }\n .mb-sm-large {\n margin-bottom: 30px !important;\n }\n .mb-sm-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-sm-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .mb-md-none {\n margin-bottom: 0 !important;\n }\n .mb-md-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-md-small {\n margin-bottom: 10px !important;\n }\n .mb-md-medium {\n margin-bottom: 20px !important;\n }\n .mb-md-large {\n margin-bottom: 30px !important;\n }\n .mb-md-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-md-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .mb-lg-none {\n margin-bottom: 0 !important;\n }\n .mb-lg-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-lg-small {\n margin-bottom: 10px !important;\n }\n .mb-lg-medium {\n margin-bottom: 20px !important;\n }\n .mb-lg-large {\n margin-bottom: 30px !important;\n }\n .mb-lg-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-lg-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .mb-xl-none {\n margin-bottom: 0 !important;\n }\n .mb-xl-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-xl-small {\n margin-bottom: 10px !important;\n }\n .mb-xl-medium {\n margin-bottom: 20px !important;\n }\n .mb-xl-large {\n margin-bottom: 30px !important;\n }\n .mb-xl-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-xl-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .mb-xxl-none {\n margin-bottom: 0 !important;\n }\n .mb-xxl-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-xxl-small {\n margin-bottom: 10px !important;\n }\n .mb-xxl-medium {\n margin-bottom: 20px !important;\n }\n .mb-xxl-large {\n margin-bottom: 30px !important;\n }\n .mb-xxl-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-xxl-none {\n margin-bottom: 0 !important;\n }\n }\n .mt-none {\n margin-top: 0 !important;\n }\n .pt-none {\n padding-top: 0 !important;\n }\n .mr-none {\n margin-right: 0 !important;\n }\n .pr-none {\n padding-right: 0 !important;\n }\n .pb-none {\n padding-bottom: 0 !important;\n }\n .ml-none {\n margin-left: 0 !important;\n }\n .pl-none {\n padding-left: 0 !important;\n }\n .no-mrg {\n margin: 0 !important;\n }\n .no-pad {\n padding: 0 !important;\n }\n .clearfix::before, .clearfix::after {\n content: \"\";\n display: table;\n }\n .clearfix::after {\n clear: both;\n }\n .clear {\n clear: both;\n }\n .justify-content-start {\n justify-content: flex-start;\n }\n .justify-content-end {\n justify-content: flex-end;\n }\n .justify-content-center {\n justify-content: center;\n }\n .justify-content-space-around {\n justify-content: space-around;\n }\n .justify-content-space-between {\n justify-content: space-between;\n }\n .align-items-start {\n align-items: flex-start;\n }\n .align-items-end {\n align-items: flex-end;\n }\n .align-items-center {\n align-items: center;\n }\n .align-items-stretch {\n align-items: stretch;\n }\n .align-self-left {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top {\n align-self: flex-start;\n }\n .align-self-bottom {\n align-self: flex-end;\n }\n .align-self-middle {\n align-self: center;\n }\n .align-self-stretch {\n align-self: stretch;\n }\n .align-self-last {\n order: 999;\n }\n @media screen and (min-width: 480px) {\n .justify-content-start--sm {\n justify-content: flex-start;\n }\n .justify-content-end--sm {\n justify-content: flex-end;\n }\n .justify-content-center--sm {\n justify-content: center;\n }\n .justify-content-space-around--sm {\n justify-content: space-around;\n }\n .justify-content-space-between--sm {\n justify-content: space-between;\n }\n .align-items-start--sm {\n align-items: flex-start;\n }\n .align-items-end--sm {\n align-items: flex-end;\n }\n .align-items-center--sm {\n align-items: center;\n }\n .align-items-stretch--sm {\n align-items: stretch;\n }\n .align-self-left--sm {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--sm {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--sm {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--sm {\n align-self: flex-start;\n }\n .align-self-bottom--sm {\n align-self: flex-end;\n }\n .align-self-middle--sm {\n align-self: center;\n }\n .align-self-stretch--sm {\n align-self: stretch;\n }\n .align-self-last--sm {\n order: 999;\n }\n }\n @media screen and (min-width: 768px) {\n .justify-content-start--md {\n justify-content: flex-start;\n }\n .justify-content-end--md {\n justify-content: flex-end;\n }\n .justify-content-center--md {\n justify-content: center;\n }\n .justify-content-space-around--md {\n justify-content: space-around;\n }\n .justify-content-space-between--md {\n justify-content: space-between;\n }\n .align-items-start--md {\n align-items: flex-start;\n }\n .align-items-end--md {\n align-items: flex-end;\n }\n .align-items-center--md {\n align-items: center;\n }\n .align-items-stretch--md {\n align-items: stretch;\n }\n .align-self-left--md {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--md {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--md {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--md {\n align-self: flex-start;\n }\n .align-self-bottom--md {\n align-self: flex-end;\n }\n .align-self-middle--md {\n align-self: center;\n }\n .align-self-stretch--md {\n align-self: stretch;\n }\n .align-self-last--md {\n order: 999;\n }\n }\n @media screen and (min-width: 992px) {\n .justify-content-start--lg {\n justify-content: flex-start;\n }\n .justify-content-end--lg {\n justify-content: flex-end;\n }\n .justify-content-center--lg {\n justify-content: center;\n }\n .justify-content-space-around--lg {\n justify-content: space-around;\n }\n .justify-content-space-between--lg {\n justify-content: space-between;\n }\n .align-items-start--lg {\n align-items: flex-start;\n }\n .align-items-end--lg {\n align-items: flex-end;\n }\n .align-items-center--lg {\n align-items: center;\n }\n .align-items-stretch--lg {\n align-items: stretch;\n }\n .align-self-left--lg {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--lg {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--lg {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--lg {\n align-self: flex-start;\n }\n .align-self-bottom--lg {\n align-self: flex-end;\n }\n .align-self-middle--lg {\n align-self: center;\n }\n .align-self-stretch--lg {\n align-self: stretch;\n }\n .align-self-last--lg {\n order: 999;\n }\n }\n @media screen and (min-width: 1240px) {\n .justify-content-start--xl {\n justify-content: flex-start;\n }\n .justify-content-end--xl {\n justify-content: flex-end;\n }\n .justify-content-center--xl {\n justify-content: center;\n }\n .justify-content-space-around--xl {\n justify-content: space-around;\n }\n .justify-content-space-between--xl {\n justify-content: space-between;\n }\n .align-items-start--xl {\n align-items: flex-start;\n }\n .align-items-end--xl {\n align-items: flex-end;\n }\n .align-items-center--xl {\n align-items: center;\n }\n .align-items-stretch--xl {\n align-items: stretch;\n }\n .align-self-left--xl {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--xl {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--xl {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--xl {\n align-self: flex-start;\n }\n .align-self-bottom--xl {\n align-self: flex-end;\n }\n .align-self-middle--xl {\n align-self: center;\n }\n .align-self-stretch--xl {\n align-self: stretch;\n }\n .align-self-last--xl {\n order: 999;\n }\n }\n @media screen and (min-width: 1380px) {\n .justify-content-start--xxl {\n justify-content: flex-start;\n }\n .justify-content-end--xxl {\n justify-content: flex-end;\n }\n .justify-content-center--xxl {\n justify-content: center;\n }\n .justify-content-space-around--xxl {\n justify-content: space-around;\n }\n .justify-content-space-between--xxl {\n justify-content: space-between;\n }\n .align-items-start--xxl {\n align-items: flex-start;\n }\n .align-items-end--xxl {\n align-items: flex-end;\n }\n .align-items-center--xxl {\n align-items: center;\n }\n .align-items-stretch--xxl {\n align-items: stretch;\n }\n .align-self-left--xxl {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--xxl {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--xxl {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--xxl {\n align-self: flex-start;\n }\n .align-self-bottom--xxl {\n align-self: flex-end;\n }\n .align-self-middle--xxl {\n align-self: center;\n }\n .align-self-stretch--xxl {\n align-self: stretch;\n }\n .align-self-last--xxl {\n order: 999;\n }\n }\n .aspect-ratio-21-9 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 21/9;\n }\n .aspect-ratio-16-9 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 16/9;\n }\n .aspect-ratio-4-3 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 4/3;\n }\n .aspect-ratio-1-1 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 1/1;\n }\n .aspect-ratio-3-2 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 3/2;\n }\n .d-block {\n display: block;\n }\n .d-inline-block {\n display: inline-block;\n }\n .d-inline {\n display: inline;\n }\n .d-flex {\n display: flex;\n }\n .d-inline-flex {\n display: inline-flex;\n }\n .flex-column {\n flex-direction: column;\n }\n .fullwidth {\n width: 100% !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .fullwidth-xs-only {\n width: 100% !important;\n }\n }\n .fullheight {\n height: 100% !important;\n }\n .center-block {\n margin-left: auto !important;\n margin-right: auto !important;\n }\n .relative {\n position: relative !important;\n }\n .absolute {\n position: absolute !important;\n }\n}\n@layer utilities {\n .visually-hidden,\n .sr-only {\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n position: absolute;\n overflow: hidden;\n clip: rect(1px 1px 1px 1px);\n clip: rect(1px, 1px, 1px, 1px);\n }\n .hide {\n display: none !important;\n }\n .invisible {\n visibility: hidden;\n }\n @media screen and (min-width: 480px) {\n .show-xs-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .hide-xs-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 479.98px) {\n .show-sm {\n display: none !important;\n }\n }\n @media screen and (min-width: 480px) {\n .hide-sm {\n display: none !important;\n }\n }\n @media screen and (max-width: 479.98px) {\n .show-sm-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) {\n .show-sm-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .hide-sm-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 767.98px) {\n .show-md {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) {\n .hide-md {\n display: none !important;\n }\n }\n @media screen and (max-width: 767.98px) {\n .show-md-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) {\n .show-md-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .hide-md-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 991.98px) {\n .show-lg {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) {\n .hide-lg {\n display: none !important;\n }\n }\n @media screen and (max-width: 991.98px) {\n .show-lg-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .show-lg-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .hide-lg-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 1239.98px) {\n .show-xl {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .hide-xl {\n display: none !important;\n }\n }\n @media screen and (max-width: 1239.98px) {\n .show-xl-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .show-xl-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .hide-xl-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 1379.98px) {\n .show-xxl {\n display: none !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .hide-xxl {\n display: none !important;\n }\n }\n @media screen and (max-width: 1379.98px) {\n .show-xxl-only {\n display: none !important;\n }\n }\n}\n@layer utilities {\n .order-1 {\n order: 1 !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .order-1-xs-only {\n order: 1 !important;\n }\n }\n .order-2 {\n order: 2 !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .order-2-xs-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 480px) {\n .order-1-sm {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .order-1-sm-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 480px) {\n .order-2-sm {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .order-2-sm-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .order-1-md {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .order-1-md-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .order-2-md {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .order-2-md-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .order-1-lg {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .order-1-lg-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .order-2-lg {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .order-2-lg-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .order-1-xl {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .order-1-xl-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .order-2-xl {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .order-2-xl-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .order-1-xxl {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .order-2-xxl {\n order: 2 !important;\n }\n }\n}\n@layer utilities {\n [class*=horizontal-scroll],\n .table-scrollable {\n scrollbar-color: var(--color-fill-contrast) var(--color-surface-moderate);\n scrollbar-width: thin;\n scroll-snap-type: x mandatory;\n }\n [class*=horizontal-scroll] > *,\n .table-scrollable > * {\n scroll-snap-align: start;\n }\n [class*=horizontal-scroll]::-webkit-scrollbar,\n .table-scrollable::-webkit-scrollbar {\n height: 0.375rem;\n appearance: none;\n background-color: var(--color-surface-moderate);\n border-radius: 99px;\n }\n [class*=horizontal-scroll]::-webkit-scrollbar-thumb,\n .table-scrollable::-webkit-scrollbar-thumb {\n opacity: 1;\n background-color: var(--color-fill-contrast);\n border-radius: 99px;\n }\n .horizontal-scroll {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n @media screen and (min-width: 480px) {\n .horizontal-scroll--sm {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--sm-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 768px) {\n .horizontal-scroll--md {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--md-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 992px) {\n .horizontal-scroll--lg {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--lg-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 1240px) {\n .horizontal-scroll--xl {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--xl-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 1380px) {\n .horizontal-scroll--xxl {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--xxl-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n}\n@layer utilities {\n /**\n * Resets for megamenu and footer\n * This reset is required due to default list spacing in ods 1 and will be removed once megamenu and footer components are migrated to 1.\n **/\n .osk-footer-menu,\n .mm-header ul,\n .megamenu-header ul {\n max-width: none;\n margin-top: 0;\n }\n .osk-footer-menu li,\n .mm-header ul li,\n .megamenu-header ul li {\n margin-top: 0;\n margin-bottom: 0;\n }\n}"]}
1
+ {"version":3,"sources":["utilities.scss"],"names":[],"mappings":"AAAA,iBACE,oBACE,0DACF,CACA,sBACE,4DACF,CACA,qBACE,2DACF,CACA,mBACE,yDACF,CACA,yBACE,+DACF,CACA,yBACE,+DACF,CACA,iBACE,uDACF,CACA,mBACE,yDACF,CACA,kBACE,wDACF,CACA,gBACE,sDACF,CACA,kBACE,wDACF,CACA,kBACE,wDACF,CACA,gBACE,sDACF,CACA,cACE,oDACF,CACA,gBACE,sDACF,CACA,eACE,qDACF,CACA,aACE,mDACF,CACA,eACE,qDACF,CACA,eACE,qDACF,CACA,eACE,qDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,cACE,oDACF,CACA,kBACE,wDACF,CACA,eACE,qDACF,CACA,cACE,oDACF,CACA,eACE,qDACF,CACA,eACE,iDACF,CACA,eACE,iDACF,CACA,iBACE,mDACF,CACA,eACE,iDACF,CACA,oBACE,sDACF,CACA,iBACE,mDACF,CACA,gBACE,kDACF,CACA,iBACE,mDACF,CACA,cACE,yCACF,CACA,gBACE,2CACF,CACA,eACE,0CACF,CACA,cACE,yCACF,CACA,aACE,wCACF,CACA,cACE,yCACF,CACA,cACE,yCACF,CACA,YACE,uCACF,CACA,aACE,wCACF,CACA,eACE,0CACF,CACA,kBACE,6CACF,CACA,eACE,0CACF,CACA,cACE,yCACF,CACA,eACE,0CACF,CACA,aACE,oBACF,CACA,cACE,wCACF,CACA,YACE,oBACF,CACA,aACE,oBACF,CACA,YACE,6CACF,CACA,cACE,0CACF,CACA,UACE,+BAAoC,CACpC,+BACF,CACA,2CACE,6CACF,CACA,UACE,kCAAoC,CACpC,+BACF,CACA,2CACE,oBACF,CACA,2CACE,uBACF,CACA,WACE,yDAA2D,CAC3D,oBACF,CACA,gBACE,wDAA0D,CAC1D,yCACF,CACA,SACE,sDACF,CACA,iBACE,4DACF,CACA,SACE,oDAEF,CACA,mBAFE,oBAKF,CAHA,UACE,oDAEF,CACA,SACE,oDAEF,CACA,oBAFE,oBAKF,CAHA,WACE,oDAEF,CACA,WACE,oDAAsD,CACtD,oBACF,CACA,mBACE,kCAAoC,CACpC,oBACF,CACA,QACE,kCAAoC,CACpC,oBACF,CACA,WACE,yDAEF,CACA,4BAFE,yCAKF,CAHA,iBACE,+DAEF,CACA,iBACE,+DAAiE,CACjE,yCACF,CACA,4GAIE,iDAAkD,CAClD,+BACF,CACA,uBACE,+BACF,CAIA,0BACE,yBACF,CAMA,aAEE,yBACF,CACA,QACE,yBACF,CACA,MACE,yBACF,CACA,WAEE,2BACF,CACA,WACE,mCAAqC,CACrC,oCACF,CAIA,+BACE,8BACF,CACA,uBACE,mCACF,CACA,WACE,uBAAyB,CACzB,yBACF,CACA,aAEE,iBAAmB,CAEnB,eAAgB,CAChB,gBAAoB,CAFpB,mBAGF,CA1CF,CAIA,iBAuCE,oCACE,aAEE,cAAe,CAEf,eAAgB,CAChB,yBAA2B,CAF3B,kBAGF,CACF,CACA,oCACE,aAEE,cAAe,CAEf,eAAgB,CAChB,yBAA2B,CAF3B,kBAGF,CACF,CACA,OACE,kBAAmB,CAEnB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACA,oCACE,OACE,iBAAkB,CAElB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACF,CACA,oCACE,OACE,iBAAkB,CAElB,eAAgB,CAChB,wBAA0B,CAF1B,oBAGF,CACF,CACA,aACE,4BACF,CACA,WACE,4BACF,CACA,eACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CACA,YACE,yBACF,CACA,cACE,2BACF,CACA,aACE,0BACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,oCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,qCACE,gBACE,0BACF,CACA,eACE,yBACF,CACA,iBACE,2BACF,CACF,CACA,qCACE,iBACE,0BACF,CACA,gBACE,yBACF,CACA,kBACE,2BACF,CACF,CACA,uBACE,8BACF,CACA,cACE,+BACF,CACA,WACE,4BACF,CACA,cACE,+BACF,CACA,gBACE,iCACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,oCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,qCACE,kBACE,+BACF,CACA,eACE,4BACF,CACA,kBACE,+BACF,CACA,oBACE,iCACF,CACF,CACA,qCACE,mBACE,+BACF,CACA,gBACE,4BACF,CACA,mBACE,+BACF,CACA,qBACE,iCACF,CACF,CACA,mBACE,yBACF,CACA,iBACE,wBAA0B,CAC1B,0BACF,CACA,gBACE,cACF,CACA,eACE,cACF,CACA,aACE,cACF,CAGA,uBACE,kBACF,CACA,QACE,6CACF,CACA,mBACE,mDACF,CACA,cACE,uCACF,CACA,mEACE,wCACF,CACA,gBACE,uCACF,CAGA,IACE,qBACF,CAIA,WACE,2BACF,CACA,UACE,4BACF,CACA,WACE,4BACF,CACA,UACE,4BACF,CACA,WACE,4BACF,CACA,SACE,yBACF,CA7CF,CAqBA,iBAyBE,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,oCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,qCAIE,cACE,2BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,aACE,4BACF,CACA,cACE,4BACF,CACA,YACE,yBACF,CACF,CACA,qCAIE,eACE,2BACF,CACA,cACE,4BACF,CACA,eACE,4BACF,CACA,cACE,4BACF,CACA,eACE,4BACF,CACA,aACE,yBACF,CACF,CACA,SACE,sBACF,CACA,SACE,uBACF,CACA,SACE,wBACF,CACA,SACE,yBACF,CACA,SACE,0BACF,CACA,SACE,uBACF,CACA,SACE,wBACF,CACA,QACE,kBACF,CACA,QACE,mBACF,CACA,iCACE,UAAW,CACX,aACF,CAIA,uBACE,UACF,CACA,uBACE,0BACF,CACA,qBACE,wBACF,CACA,wBACE,sBACF,CACA,8BACE,4BACF,CACA,+BACE,6BACF,CACA,mBACE,sBACF,CACA,iBACE,oBACF,CACA,oBACE,kBACF,CACA,qBACE,mBACF,CACA,iBACE,aAAc,CACd,iBACF,CACA,kBACE,gBAAiB,CACjB,cACF,CACA,mBACE,gBAAiB,CACjB,iBACF,CACA,gBACE,qBACF,CACA,mBACE,mBACF,CACA,mBACE,iBACF,CACA,oBACE,kBACF,CACA,iBACE,SACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,oCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,qCACE,2BACE,0BACF,CACA,yBACE,wBACF,CACA,4BACE,sBACF,CACA,kCACE,4BACF,CACA,mCACE,6BACF,CACA,uBACE,sBACF,CACA,qBACE,oBACF,CACA,wBACE,kBACF,CACA,yBACE,mBACF,CACA,qBACE,aAAc,CACd,iBACF,CACA,sBACE,gBAAiB,CACjB,cACF,CACA,uBACE,gBAAiB,CACjB,iBACF,CACA,oBACE,qBACF,CACA,uBACE,mBACF,CACA,uBACE,iBACF,CACA,wBACE,kBACF,CACA,qBACE,SACF,CACF,CACA,qCACE,4BACE,0BACF,CACA,0BACE,wBACF,CACA,6BACE,sBACF,CACA,mCACE,4BACF,CACA,oCACE,6BACF,CACA,wBACE,sBACF,CACA,sBACE,oBACF,CACA,yBACE,kBACF,CACA,0BACE,mBACF,CACA,sBACE,aAAc,CACd,iBACF,CACA,uBACE,gBAAiB,CACjB,cACF,CACA,wBACE,gBAAiB,CACjB,iBACF,CACA,qBACE,qBACF,CACA,wBACE,mBACF,CACA,wBACE,iBACF,CACA,yBACE,kBACF,CACA,sBACE,SACF,CACF,CACA,mBAGE,iBAAkB,CADlB,QAAS,CADT,cAGF,CACA,mBAGE,iBAAkB,CADlB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,kBAGE,gBAAiB,CADjB,QAAS,CADT,cAGF,CACA,SACE,aACF,CACA,gBACE,oBACF,CACA,UACE,cACF,CACA,QACE,YACF,CACA,eACE,mBACF,CACA,aACE,qBACF,CACA,WACE,oBACF,CACA,yDACE,mBACE,oBACF,CACF,CACA,YACE,qBACF,CACA,cACE,0BAA4B,CAC5B,2BACF,CACA,UACE,2BACF,CACA,UACE,2BACF,CAGA,0BASE,0BAA2B,CAC3B,0BAA8B,CAJ9B,QAAS,CAJT,UAAW,CAEX,WAAY,CAIZ,eAAgB,CAHhB,SAAU,CAEV,iBAAkB,CAJlB,SAQF,CACA,MACE,sBACF,CACA,WACE,iBACF,CAnBF,CACA,iBAmBE,oCACE,cACE,sBACF,CACF,CACA,yDACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,oCACE,cACE,sBACF,CACF,CACA,6DACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,oCACE,cACE,sBACF,CACF,CACA,6DACE,cACE,sBACF,CACF,CACA,uCACE,SACE,sBACF,CACF,CACA,oCACE,SACE,sBACF,CACF,CACA,uCACE,cACE,sBACF,CACF,CACA,qCACE,cACE,sBACF,CACF,CACA,8DACE,cACE,sBACF,CACF,CACA,wCACE,SACE,sBACF,CACF,CACA,qCACE,SACE,sBACF,CACF,CACA,wCACE,cACE,sBACF,CACF,CACA,qCACE,cACE,sBACF,CACF,CACA,+DACE,cACE,sBACF,CACF,CACA,wCACE,UACE,sBACF,CACF,CACA,qCACE,UACE,sBACF,CACF,CACA,wCACE,eACE,sBACF,CACF,CACF,CACA,iBACE,SACE,iBACF,CACA,yDACE,iBACE,iBACF,CACF,CACA,SACE,iBACF,CACA,yDACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,6DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,8DACE,iBACE,iBACF,CACF,CACA,oCACE,YACE,iBACF,CACF,CACA,8DACE,iBACE,iBACF,CACF,CACA,qCACE,YACE,iBACF,CACF,CACA,+DACE,iBACE,iBACF,CACF,CACA,qCACE,YACE,iBACF,CACF,CACA,+DACE,iBACE,iBACF,CACF,CACA,qCACE,aACE,iBACF,CAGA,aACE,iBACF,CAJF,CAMF,CACA,iBACE,6CAIE,4BAA6B,CAF7B,wEAAyE,CACzE,oBAEF,CACA,iDAEE,uBACF,CACA,mFAGE,eAAgB,CAChB,8CAA+C,CAC/C,kBAAmB,CAHnB,cAIF,CACA,+FAGE,2CAA4C,CAC5C,kBAAmB,CAFnB,SAGF,CACA,mBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,2BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,oCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,qCACE,uBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,+BAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACA,qCACE,wBAGE,+BAAgC,CAFhC,gBAAiB,CAGjB,sBAAuB,CAFvB,eAGF,CACA,gCAGE,kCAAmC,CAFnC,cAAe,CAGf,eAAgB,CAFhB,kBAGF,CACF,CACF,CACA,iBAKE,mDAIE,YAAa,CADb,cAEF,CACA,4DAIE,eAAgB,CADhB,YAEF,CACF","file":"utilities.css","sourcesContent":["@layer utilities {\n .background-primary {\n background-color: var(--color-background-primary) !important;\n }\n .background-secondary {\n background-color: var(--color-background-secondary) !important;\n }\n .background-contrast {\n background-color: var(--color-background-contrast) !important;\n }\n .background-accent {\n background-color: var(--color-background-accent) !important;\n }\n .background-accent1-blog {\n background-color: var(--color-background-accent1-blog) !important;\n }\n .background-accent2-blog {\n background-color: var(--color-background-accent2-blog) !important;\n }\n .surface-primary {\n background-color: var(--color-surface-primary) !important;\n }\n .surface-secondary {\n background-color: var(--color-surface-secondary) !important;\n }\n .surface-tertiary {\n background-color: var(--color-surface-tertiary) !important;\n }\n .surface-subtle {\n background-color: var(--color-surface-subtle) !important;\n }\n .surface-moderate {\n background-color: var(--color-surface-moderate) !important;\n }\n .surface-contrast {\n background-color: var(--color-surface-contrast) !important;\n }\n .surface-accent {\n background-color: var(--color-surface-accent) !important;\n }\n .fill-primary {\n background-color: var(--color-fill-primary) !important;\n }\n .fill-secondary {\n background-color: var(--color-fill-secondary) !important;\n }\n .fill-tertiary {\n background-color: var(--color-fill-tertiary) !important;\n }\n .fill-subtle {\n background-color: var(--color-fill-subtle) !important;\n }\n .fill-moderate {\n background-color: var(--color-fill-moderate) !important;\n }\n .fill-disabled {\n background-color: var(--color-fill-disabled) !important;\n }\n .fill-contrast {\n background-color: var(--color-fill-contrast) !important;\n }\n .fill-accent1 {\n background-color: var(--color-fill-accent1) !important;\n }\n .fill-accent2 {\n background-color: var(--color-fill-accent2) !important;\n }\n .fill-accent3 {\n background-color: var(--color-fill-accent3) !important;\n }\n .fill-accent4 {\n background-color: var(--color-fill-accent4) !important;\n }\n .fill-accent5 {\n background-color: var(--color-fill-accent5) !important;\n }\n .fill-information {\n background-color: var(--color-fill-information) !important;\n }\n .fill-positive {\n background-color: var(--color-fill-positive) !important;\n }\n .fill-warning {\n background-color: var(--color-fill-warning) !important;\n }\n .fill-negative {\n background-color: var(--color-fill-negative) !important;\n }\n .border-subtle {\n border-color: var(--color-border-subtle) !important;\n }\n .border-strong {\n border-color: var(--color-border-strong) !important;\n }\n .border-contrast {\n border-color: var(--color-border-contrast) !important;\n }\n .border-accent {\n border-color: var(--color-border-accent) !important;\n }\n .border-information {\n border-color: var(--color-border-information) !important;\n }\n .border-positive {\n border-color: var(--color-border-positive) !important;\n }\n .border-warning {\n border-color: var(--color-border-warning) !important;\n }\n .border-negative {\n border-color: var(--color-border-negative) !important;\n }\n .text-default {\n color: var(--color-text-default) !important;\n }\n .text-secondary {\n color: var(--color-text-secondary) !important;\n }\n .text-disabled {\n color: var(--color-text-disabled) !important;\n }\n .text-inverse {\n color: var(--color-text-inverse) !important;\n }\n .text-accent {\n color: var(--color-text-accent) !important;\n }\n .icon-default {\n color: var(--color-icon-default) !important;\n }\n .icon-inverse {\n color: var(--color-icon-inverse) !important;\n }\n .icon-brand {\n color: var(--color-icon-brand) !important;\n }\n .icon-accent {\n color: var(--color-icon-accent) !important;\n }\n .icon-disabled {\n color: var(--color-icon-disabled) !important;\n }\n .icon-information {\n color: var(--color-icon-information) !important;\n }\n .icon-positive {\n color: var(--color-icon-positive) !important;\n }\n .icon-warning {\n color: var(--color-icon-warning) !important;\n }\n .icon-negative {\n color: var(--color-icon-negative) !important;\n }\n .color-black {\n color: #000000 !important;\n }\n .color-orange {\n color: var(--color-text-accent) !important;\n }\n .color-gray {\n color: #666666 !important;\n }\n .color-white {\n color: #ffffff !important;\n }\n .color-blue {\n color: var(--color-icon-information) !important;\n }\n .color-danger {\n color: var(--color-icon-negative) !important;\n }\n .bg-white {\n background-color: #ffffff !important;\n color: var(--color-text-default);\n }\n .bg-white .color-blue, .bg-white.color-blue {\n color: var(--color-icon-information) !important;\n }\n .bg-black {\n background-color: #141414 !important;\n color: var(--color-text-inverse);\n }\n .bg-black .color-gray, .bg-black.color-gray {\n color: #dddddd !important;\n }\n .bg-black .color-blue, .bg-black.color-blue {\n color: #4bb4e6 !important;\n }\n .bg-orange {\n background-color: var(--color-surface-secondary) !important;\n color: #000000 !important;\n }\n .bg-orange-dark {\n background-color: var(--color-surface-tertiary) !important;\n color: var(--color-text-inverse) !important;\n }\n .bg-gray {\n background-color: var(--color-surface-subtle) !important;\n }\n .bg-gray-lighter {\n background-color: var(--color-background-secondary) !important;\n }\n .bg-blue {\n background-color: var(--color-fill-accent1) !important;\n color: #000000 !important;\n }\n .bg-green {\n background-color: var(--color-fill-accent2) !important;\n color: #000000 !important;\n }\n .bg-pink {\n background-color: var(--color-fill-accent3) !important;\n color: #000000 !important;\n }\n .bg-violet {\n background-color: var(--color-fill-accent4) !important;\n color: #000000 !important;\n }\n .bg-yellow {\n background-color: var(--color-fill-accent5) !important;\n color: #000000 !important;\n }\n .bg-yellow-lighter {\n background-color: #fff6b6 !important;\n color: #000000 !important;\n }\n .bg-red {\n background-color: #ff4d4d !important;\n color: #000000 !important;\n }\n .bg-accent {\n background-color: var(--color-background-accent) !important;\n color: var(--color-text-default) !important;\n }\n .bg-accent1-blog {\n background-color: var(--color-background-accent1-blog) !important;\n color: var(--color-text-default) !important;\n }\n .bg-accent2-blog {\n background-color: var(--color-background-accent2-blog) !important;\n color: var(--color-text-default) !important;\n }\n .bg-orange::selection,\n .bg-orange-dark::selection,\n .surface-secondary::selection,\n .surface-tertiary::selection {\n background-color: var(--color-background-contrast);\n color: var(--color-text-inverse);\n }\n .color-gray::selection {\n color: var(--color-text-default);\n }\n .bg-none {\n background: none !important;\n }\n .background-none {\n background: none !important;\n }\n}\n/**\n * Resets margin-bottom of the last child to zero\n */\n@layer utilities {\n strong,\n .bold {\n font-weight: 700 !important;\n }\n .normal {\n font-weight: 400 !important;\n }\n .thin {\n font-weight: 300 !important;\n }\n em,\n .italic {\n font-style: italic !important;\n }\n .underline {\n text-decoration: underline !important;\n text-underline-offset: 0.1em !important;\n }\n .no-underline {\n text-decoration: none !important;\n }\n .underline-hover {\n text-decoration: none !important;\n }\n .underline-hover:hover {\n text-decoration: underline !important;\n }\n .no-accent {\n color: inherit !important;\n text-decoration: underline;\n }\n small,\n .small {\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 400;\n letter-spacing: 0rem;\n }\n @media screen and (min-width: 768px) {\n small,\n .small {\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 400;\n letter-spacing: -0.00625rem;\n }\n }\n @media screen and (min-width: 992px) {\n small,\n .small {\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 400;\n letter-spacing: -0.00625rem;\n }\n }\n .large {\n font-size: 1.125rem;\n line-height: 1.625rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n @media screen and (min-width: 768px) {\n .large {\n font-size: 1.25rem;\n line-height: 1.875rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n }\n @media screen and (min-width: 992px) {\n .large {\n font-size: 1.25rem;\n line-height: 1.875rem;\n font-weight: 400;\n letter-spacing: -0.0125rem;\n }\n }\n .text-nowrap {\n white-space: nowrap !important;\n }\n .text-wrap {\n white-space: normal !important;\n }\n .text-ellipsis {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .align-left {\n text-align: left !important;\n }\n .align-center {\n text-align: center !important;\n }\n .align-right {\n text-align: right !important;\n }\n @media screen and (min-width: 480px) {\n .align-sm-right {\n text-align: right !important;\n }\n .align-sm-left {\n text-align: left !important;\n }\n .align-sm-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 768px) {\n .align-md-right {\n text-align: right !important;\n }\n .align-md-left {\n text-align: left !important;\n }\n .align-md-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 992px) {\n .align-lg-right {\n text-align: right !important;\n }\n .align-lg-left {\n text-align: left !important;\n }\n .align-lg-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .align-xl-right {\n text-align: right !important;\n }\n .align-xl-left {\n text-align: left !important;\n }\n .align-xl-center {\n text-align: center !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .align-xxl-right {\n text-align: right !important;\n }\n .align-xxl-left {\n text-align: left !important;\n }\n .align-xxl-center {\n text-align: center !important;\n }\n }\n .reset-text-decoration {\n text-decoration: none !important;\n }\n .align-middle {\n vertical-align: middle !important;\n }\n .align-top {\n vertical-align: top !important;\n }\n .align-bottom {\n vertical-align: bottom !important;\n }\n .align-baseline {\n vertical-align: baseline !important;\n }\n @media screen and (min-width: 480px) {\n .align-middle--sm {\n vertical-align: middle !important;\n }\n .align-top--sm {\n vertical-align: top !important;\n }\n .align-bottom--sm {\n vertical-align: bottom !important;\n }\n .align-baseline--sm {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 768px) {\n .align-middle--md {\n vertical-align: middle !important;\n }\n .align-top--md {\n vertical-align: top !important;\n }\n .align-bottom--md {\n vertical-align: bottom !important;\n }\n .align-baseline--md {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 992px) {\n .align-middle--lg {\n vertical-align: middle !important;\n }\n .align-top--lg {\n vertical-align: top !important;\n }\n .align-bottom--lg {\n vertical-align: bottom !important;\n }\n .align-baseline--lg {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .align-middle--xl {\n vertical-align: middle !important;\n }\n .align-top--xl {\n vertical-align: top !important;\n }\n .align-bottom--xl {\n vertical-align: bottom !important;\n }\n .align-baseline--xl {\n vertical-align: baseline !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .align-middle--xxl {\n vertical-align: middle !important;\n }\n .align-top--xxl {\n vertical-align: top !important;\n }\n .align-bottom--xxl {\n vertical-align: bottom !important;\n }\n .align-baseline--xxl {\n vertical-align: baseline !important;\n }\n }\n .reset-font-weight {\n font-weight: normal !important;\n }\n .reset-font-size {\n font-size: 16px !important;\n line-height: 1.25 !important;\n }\n .text-fullwidth {\n max-width: none;\n }\n .text-readable {\n max-width: 35em;\n }\n .text-narrow {\n max-width: 22em;\n }\n}\n@layer utilities {\n .border-radius--medium {\n border-radius: 10px;\n }\n .border {\n border: 2px solid var(--color-border-contrast);\n }\n .border.is-invalid {\n border-color: var(--color-border-negative) !important;\n }\n .border--gray {\n border-color: var(--color-border-subtle);\n }\n .border--gray.border-hover:hover, .border--gray.is-indicating:hover {\n border-color: var(--color-text-secondary);\n }\n .border--orange {\n border-color: var(--color-border-accent);\n }\n}\n@layer utilities {\n .mb {\n margin-bottom: 1.25rem;\n }\n .mb-none {\n margin-bottom: 0 !important;\n }\n .mb-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-small {\n margin-bottom: 10px !important;\n }\n .mb-medium {\n margin-bottom: 20px !important;\n }\n .mb-large {\n margin-bottom: 30px !important;\n }\n .mb-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-none {\n margin-bottom: 0 !important;\n }\n @media screen and (min-width: 480px) {\n .mb-sm-none {\n margin-bottom: 0 !important;\n }\n .mb-sm-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-sm-small {\n margin-bottom: 10px !important;\n }\n .mb-sm-medium {\n margin-bottom: 20px !important;\n }\n .mb-sm-large {\n margin-bottom: 30px !important;\n }\n .mb-sm-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-sm-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .mb-md-none {\n margin-bottom: 0 !important;\n }\n .mb-md-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-md-small {\n margin-bottom: 10px !important;\n }\n .mb-md-medium {\n margin-bottom: 20px !important;\n }\n .mb-md-large {\n margin-bottom: 30px !important;\n }\n .mb-md-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-md-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .mb-lg-none {\n margin-bottom: 0 !important;\n }\n .mb-lg-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-lg-small {\n margin-bottom: 10px !important;\n }\n .mb-lg-medium {\n margin-bottom: 20px !important;\n }\n .mb-lg-large {\n margin-bottom: 30px !important;\n }\n .mb-lg-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-lg-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .mb-xl-none {\n margin-bottom: 0 !important;\n }\n .mb-xl-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-xl-small {\n margin-bottom: 10px !important;\n }\n .mb-xl-medium {\n margin-bottom: 20px !important;\n }\n .mb-xl-large {\n margin-bottom: 30px !important;\n }\n .mb-xl-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-xl-none {\n margin-bottom: 0 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .mb-xxl-none {\n margin-bottom: 0 !important;\n }\n .mb-xxl-xsmall {\n margin-bottom: 5px !important;\n }\n .mb-xxl-small {\n margin-bottom: 10px !important;\n }\n .mb-xxl-medium {\n margin-bottom: 20px !important;\n }\n .mb-xxl-large {\n margin-bottom: 30px !important;\n }\n .mb-xxl-xlarge {\n margin-bottom: 60px !important;\n }\n .mb-xxl-none {\n margin-bottom: 0 !important;\n }\n }\n .mt-none {\n margin-top: 0 !important;\n }\n .pt-none {\n padding-top: 0 !important;\n }\n .mr-none {\n margin-right: 0 !important;\n }\n .pr-none {\n padding-right: 0 !important;\n }\n .pb-none {\n padding-bottom: 0 !important;\n }\n .ml-none {\n margin-left: 0 !important;\n }\n .pl-none {\n padding-left: 0 !important;\n }\n .no-mrg {\n margin: 0 !important;\n }\n .no-pad {\n padding: 0 !important;\n }\n .clearfix::before, .clearfix::after {\n content: \"\";\n display: table;\n }\n .clearfix::after {\n clear: both;\n }\n .clear {\n clear: both;\n }\n .justify-content-start {\n justify-content: flex-start;\n }\n .justify-content-end {\n justify-content: flex-end;\n }\n .justify-content-center {\n justify-content: center;\n }\n .justify-content-space-around {\n justify-content: space-around;\n }\n .justify-content-space-between {\n justify-content: space-between;\n }\n .align-items-start {\n align-items: flex-start;\n }\n .align-items-end {\n align-items: flex-end;\n }\n .align-items-center {\n align-items: center;\n }\n .align-items-stretch {\n align-items: stretch;\n }\n .align-self-left {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top {\n align-self: flex-start;\n }\n .align-self-bottom {\n align-self: flex-end;\n }\n .align-self-middle {\n align-self: center;\n }\n .align-self-stretch {\n align-self: stretch;\n }\n .align-self-last {\n order: 999;\n }\n @media screen and (min-width: 480px) {\n .justify-content-start--sm {\n justify-content: flex-start;\n }\n .justify-content-end--sm {\n justify-content: flex-end;\n }\n .justify-content-center--sm {\n justify-content: center;\n }\n .justify-content-space-around--sm {\n justify-content: space-around;\n }\n .justify-content-space-between--sm {\n justify-content: space-between;\n }\n .align-items-start--sm {\n align-items: flex-start;\n }\n .align-items-end--sm {\n align-items: flex-end;\n }\n .align-items-center--sm {\n align-items: center;\n }\n .align-items-stretch--sm {\n align-items: stretch;\n }\n .align-self-left--sm {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--sm {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--sm {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--sm {\n align-self: flex-start;\n }\n .align-self-bottom--sm {\n align-self: flex-end;\n }\n .align-self-middle--sm {\n align-self: center;\n }\n .align-self-stretch--sm {\n align-self: stretch;\n }\n .align-self-last--sm {\n order: 999;\n }\n }\n @media screen and (min-width: 768px) {\n .justify-content-start--md {\n justify-content: flex-start;\n }\n .justify-content-end--md {\n justify-content: flex-end;\n }\n .justify-content-center--md {\n justify-content: center;\n }\n .justify-content-space-around--md {\n justify-content: space-around;\n }\n .justify-content-space-between--md {\n justify-content: space-between;\n }\n .align-items-start--md {\n align-items: flex-start;\n }\n .align-items-end--md {\n align-items: flex-end;\n }\n .align-items-center--md {\n align-items: center;\n }\n .align-items-stretch--md {\n align-items: stretch;\n }\n .align-self-left--md {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--md {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--md {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--md {\n align-self: flex-start;\n }\n .align-self-bottom--md {\n align-self: flex-end;\n }\n .align-self-middle--md {\n align-self: center;\n }\n .align-self-stretch--md {\n align-self: stretch;\n }\n .align-self-last--md {\n order: 999;\n }\n }\n @media screen and (min-width: 992px) {\n .justify-content-start--lg {\n justify-content: flex-start;\n }\n .justify-content-end--lg {\n justify-content: flex-end;\n }\n .justify-content-center--lg {\n justify-content: center;\n }\n .justify-content-space-around--lg {\n justify-content: space-around;\n }\n .justify-content-space-between--lg {\n justify-content: space-between;\n }\n .align-items-start--lg {\n align-items: flex-start;\n }\n .align-items-end--lg {\n align-items: flex-end;\n }\n .align-items-center--lg {\n align-items: center;\n }\n .align-items-stretch--lg {\n align-items: stretch;\n }\n .align-self-left--lg {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--lg {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--lg {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--lg {\n align-self: flex-start;\n }\n .align-self-bottom--lg {\n align-self: flex-end;\n }\n .align-self-middle--lg {\n align-self: center;\n }\n .align-self-stretch--lg {\n align-self: stretch;\n }\n .align-self-last--lg {\n order: 999;\n }\n }\n @media screen and (min-width: 1240px) {\n .justify-content-start--xl {\n justify-content: flex-start;\n }\n .justify-content-end--xl {\n justify-content: flex-end;\n }\n .justify-content-center--xl {\n justify-content: center;\n }\n .justify-content-space-around--xl {\n justify-content: space-around;\n }\n .justify-content-space-between--xl {\n justify-content: space-between;\n }\n .align-items-start--xl {\n align-items: flex-start;\n }\n .align-items-end--xl {\n align-items: flex-end;\n }\n .align-items-center--xl {\n align-items: center;\n }\n .align-items-stretch--xl {\n align-items: stretch;\n }\n .align-self-left--xl {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--xl {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--xl {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--xl {\n align-self: flex-start;\n }\n .align-self-bottom--xl {\n align-self: flex-end;\n }\n .align-self-middle--xl {\n align-self: center;\n }\n .align-self-stretch--xl {\n align-self: stretch;\n }\n .align-self-last--xl {\n order: 999;\n }\n }\n @media screen and (min-width: 1380px) {\n .justify-content-start--xxl {\n justify-content: flex-start;\n }\n .justify-content-end--xxl {\n justify-content: flex-end;\n }\n .justify-content-center--xxl {\n justify-content: center;\n }\n .justify-content-space-around--xxl {\n justify-content: space-around;\n }\n .justify-content-space-between--xxl {\n justify-content: space-between;\n }\n .align-items-start--xxl {\n align-items: flex-start;\n }\n .align-items-end--xxl {\n align-items: flex-end;\n }\n .align-items-center--xxl {\n align-items: center;\n }\n .align-items-stretch--xxl {\n align-items: stretch;\n }\n .align-self-left--xxl {\n margin-left: 0;\n margin-right: auto;\n }\n .align-self-right--xxl {\n margin-left: auto;\n margin-right: 0;\n }\n .align-self-center--xxl {\n margin-left: auto;\n margin-right: auto;\n }\n .align-self-top--xxl {\n align-self: flex-start;\n }\n .align-self-bottom--xxl {\n align-self: flex-end;\n }\n .align-self-middle--xxl {\n align-self: center;\n }\n .align-self-stretch--xxl {\n align-self: stretch;\n }\n .align-self-last--xxl {\n order: 999;\n }\n }\n .aspect-ratio-21-9 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 21/9;\n }\n .aspect-ratio-16-9 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 16/9;\n }\n .aspect-ratio-4-3 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 4/3;\n }\n .aspect-ratio-1-1 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 1/1;\n }\n .aspect-ratio-3-2 {\n max-width: 100%;\n border: 0;\n aspect-ratio: 3/2;\n }\n .d-block {\n display: block;\n }\n .d-inline-block {\n display: inline-block;\n }\n .d-inline {\n display: inline;\n }\n .d-flex {\n display: flex;\n }\n .d-inline-flex {\n display: inline-flex;\n }\n .flex-column {\n flex-direction: column;\n }\n .fullwidth {\n width: 100% !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .fullwidth-xs-only {\n width: 100% !important;\n }\n }\n .fullheight {\n height: 100% !important;\n }\n .center-block {\n margin-left: auto !important;\n margin-right: auto !important;\n }\n .relative {\n position: relative !important;\n }\n .absolute {\n position: absolute !important;\n }\n}\n@layer utilities {\n .visually-hidden,\n .sr-only {\n height: 1px;\n width: 1px;\n margin: -1px;\n padding: 0;\n border: 0;\n position: absolute;\n overflow: hidden;\n clip: rect(1px 1px 1px 1px);\n clip: rect(1px, 1px, 1px, 1px);\n }\n .hide {\n display: none !important;\n }\n .invisible {\n visibility: hidden;\n }\n @media screen and (min-width: 480px) {\n .show-xs-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .hide-xs-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 479.98px) {\n .show-sm {\n display: none !important;\n }\n }\n @media screen and (min-width: 480px) {\n .hide-sm {\n display: none !important;\n }\n }\n @media screen and (max-width: 479.98px) {\n .show-sm-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) {\n .show-sm-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .hide-sm-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 767.98px) {\n .show-md {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) {\n .hide-md {\n display: none !important;\n }\n }\n @media screen and (max-width: 767.98px) {\n .show-md-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) {\n .show-md-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .hide-md-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 991.98px) {\n .show-lg {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) {\n .hide-lg {\n display: none !important;\n }\n }\n @media screen and (max-width: 991.98px) {\n .show-lg-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .show-lg-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .hide-lg-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 1239.98px) {\n .show-xl {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .hide-xl {\n display: none !important;\n }\n }\n @media screen and (max-width: 1239.98px) {\n .show-xl-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .show-xl-only {\n display: none !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .hide-xl-only {\n display: none !important;\n }\n }\n @media screen and (max-width: 1379.98px) {\n .show-xxl {\n display: none !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .hide-xxl {\n display: none !important;\n }\n }\n @media screen and (max-width: 1379.98px) {\n .show-xxl-only {\n display: none !important;\n }\n }\n}\n@layer utilities {\n .order-1 {\n order: 1 !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .order-1-xs-only {\n order: 1 !important;\n }\n }\n .order-2 {\n order: 2 !important;\n }\n @media screen and (min-width: 0) and (max-width: 479.98px) {\n .order-2-xs-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 480px) {\n .order-1-sm {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .order-1-sm-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 480px) {\n .order-2-sm {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 480px) and (max-width: 767.98px) {\n .order-2-sm-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .order-1-md {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .order-1-md-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 768px) {\n .order-2-md {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 768px) and (max-width: 991.98px) {\n .order-2-md-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .order-1-lg {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .order-1-lg-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 992px) {\n .order-2-lg {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 992px) and (max-width: 1239.98px) {\n .order-2-lg-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .order-1-xl {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .order-1-xl-only {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1240px) {\n .order-2-xl {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1240px) and (max-width: 1379.98px) {\n .order-2-xl-only {\n order: 2 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .order-1-xxl {\n order: 1 !important;\n }\n }\n @media screen and (min-width: 1380px) {\n .order-2-xxl {\n order: 2 !important;\n }\n }\n}\n@layer utilities {\n [class*=horizontal-scroll],\n .table-scrollable {\n scrollbar-color: var(--color-fill-contrast) var(--color-surface-moderate);\n scrollbar-width: thin;\n scroll-snap-type: x mandatory;\n }\n [class*=horizontal-scroll] > *,\n .table-scrollable > * {\n scroll-snap-align: start;\n }\n [class*=horizontal-scroll]::-webkit-scrollbar,\n .table-scrollable::-webkit-scrollbar {\n height: 0.375rem;\n appearance: none;\n background-color: var(--color-surface-moderate);\n border-radius: 99px;\n }\n [class*=horizontal-scroll]::-webkit-scrollbar-thumb,\n .table-scrollable::-webkit-scrollbar-thumb {\n opacity: 1;\n background-color: var(--color-fill-contrast);\n border-radius: 99px;\n }\n .horizontal-scroll {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n @media screen and (min-width: 480px) {\n .horizontal-scroll--sm {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--sm-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 768px) {\n .horizontal-scroll--md {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--md-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 992px) {\n .horizontal-scroll--lg {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--lg-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 1240px) {\n .horizontal-scroll--xl {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--xl-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n @media screen and (min-width: 1380px) {\n .horizontal-scroll--xxl {\n flex-wrap: nowrap;\n overflow-x: auto;\n -webkit-overflow-scrolling: auto;\n margin-bottom: 1.875rem;\n }\n .horizontal-scroll--xxl-disable {\n flex-wrap: wrap;\n overflow-x: initial;\n -webkit-overflow-scrolling: initial;\n margin-bottom: 0;\n }\n }\n}\n@layer utilities {\n /**\n * Resets for megamenu and footer\n * This reset is required due to default list spacing in ods 1 and will be removed once megamenu and footer components are migrated to 1.\n **/\n .osk-footer-menu,\n .mm-header ul,\n .megamenu-header ul {\n max-width: none;\n margin-top: 0;\n }\n .osk-footer-menu li,\n .mm-header ul li,\n .megamenu-header ul li {\n margin-top: 0;\n margin-bottom: 0;\n }\n}"]}
package/build/search-index.json CHANGED
@@ -165,7 +165,7 @@
165
165
  },
166
166
  {
167
167
  "href": "/components/grid",
168
- "content": "import spaces from \"@/styles/export/space.js\"; Grid The main function of the grid is to distribute items to rows and columns. Our grid has a maximum of 12 columns. Each column can have a custom size defined by breakpoints. Breakpoints Grid uses the mobile-first definition of breakpoints, which means that smallest breakpoint defines default size. Columns You can have a maximum of 12 columns in one row. A default column takes all the available space. <code>(default) 12</code> <code>6</code> <hr /> <code>auto</code> <code>4</code> <code>6</code> <hr /> <code>fill</code> <code>4</code> <code>6</code> <hr /> <code>shrink</code> <code>6</code> Resizing There are two ways of resizing a column. 1. .gridcol--[size] where size is a number 1-12 or one of [shrink/fill/auto] 2. .gridcol--[breakpoint]-[size] where breakpoint is used as a minimum display width to change the column size > XS breakpoint size > > There is no need to specify the xs breakpoint size because it's a default by definition of mobile-first philosophy. What is shrink/fill/auto? - shrink column takes the least amount of space available - fill column takes all the space available and does not shrink to accomodate other columns - auto takes all available space, also tries to shrink to fit into one row. This is the same as .gridcol. <code>(default) 12</code> <code>4</code> <code>shrink</code> <code>fill</code> <code>auto</code> Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Available combinations You can use combinations of different size types for one column at once. Available types are [1-12/shrink/fill/auto] for every breakpoint. <code>(default) 12, sm-9, md-6, lg-fill</code> <code>(default) 12, sm-3, md-6, lg-fill</code> Justify content height Grid with justified content height uses flexbox with an attempt to equalize height of column children <div className=\"surface-subtle\"> <p>Children of these columns are the same height</p> </div> <div className=\"surface-subtle\"> <p>The most high column dictates the height of the row</p> </div> <div className=\"surface-subtle\"> <p>Subsequent rows remain unaffected</p> </div> Container alignment Horizontal Vertical Children alignment Vertical Column gap size Add larger space between grid columns, use smaller gap, or remove them completely {[\"large\", \"default\", \"small\", \"none\"].map((size, index) => ( <div key={index.toString()}> <h3 className=\"bold\">Column gap size {JSON.stringify(size)}</h3> {[1, 2, 3].map((key) => ( <code>4</code> ))} </div> ))} Row gap size Row gap helps to maintain space between grid rows and fixes unwanted spacing problems on the bottom of grid's last row elements by removing their content margins. There are two ways of adding a row gap. 1. .grid-row-gap--[size] where size is one of [medium/xlarge] 2. .grid-row-gap--[breakpoint]-[size] where breakpoint is used as a minimum display width to change the gap size {[\"medium\", \"large\", { xs: \"large\", md: \"xlarge\" }].map( (size, index, array) => ( <h3 className=\"mb-2\">Row gap size {JSON.stringify(size)}</h3> {[1, 2, 3, 4, 5, 6].map((key) => ( <code>6</code> ))} ), )} Advanced Examples Complex Layout with Alignment <code>top aligned</code> <code>auto middle</code> <code>fill bottom</code> <code>stretch</code> Semantic HTML Tags <code>main content</code> <code>sidebar</code> All Column Sizes (1-12) {Array.from({ length: 12 }, (, i) => ( <code>{i + 1}</code> ))} API Grid React Props | Name | Type | Default | Description | | --------------- | -------------------------------------------------------- | ------- | --------------------------------------- | | vAlign | \"stretch\" \\| \"start\" \\| \"end\" \\| \"center\" | - | Vertical alignment of grid items. | | hAlign | \"end\" \\| \"center\" \\| \"space-around\" \\| \"space-between\" | - | Horizontal alignment of grid items. | | tag | React.ElementType | \"div\" | Rendered HTML element. | | justifyHeight | boolean | false | Whether grid should justify height. | | rowGapSize | \"medium\" \\| \"large\" \\| \"xlarge\" \\| Record<string, ...> | - | Row gap size, can be responsive object. | | columnGapSize | \"none\" \\| \"small\" \\| \"default\" \\| \"large\" | - | Column gap size. | | className | string | - | Additional CSS classes. | GridCol React Props | Name | Type | Default | Description | | ----------- | ------------------- | ------- | --------------------------------------------- | | size | ResponsiveSize | - | Column size (1-12), can be responsive object. | | offset | ResponsiveSize | - | Column offset, can be responsive object. | | tag | React.ElementType | \"div\" | Rendered HTML element. | | className | string | - | Additional CSS classes. |"
168
+ "content": "import spaces from \"@/styles/export/space.js\"; Grid The main function of the grid is to distribute items to rows and columns. Our grid has a maximum of 12 columns. Each column can have a custom size defined by breakpoints. Breakpoints Grid uses the mobile-first definition of breakpoints, which means that smallest breakpoint defines default size. Columns You can have a maximum of 12 columns in one row. A default column takes all the available space. <code>(default) 12</code> <code>6</code> <hr /> <code>auto</code> <code>4</code> <code>6</code> <hr /> <code>fill</code> <code>4</code> <code>6</code> <hr /> <code>shrink</code> <code>6</code> Resizing There are two ways of resizing a column. 1. .gridcol--[size] where size is a number 1-12 or one of [shrink/fill/auto] 2. .gridcol--[breakpoint]-[size] where breakpoint is used as a minimum display width to change the column size > XS breakpoint size > > There is no need to specify the xs breakpoint size because it's a default by definition of mobile-first philosophy. What is shrink/fill/auto? - shrink column takes the least amount of space available - fill column takes all the space available and does not shrink to accomodate other columns - auto takes all available space, also tries to shrink to fit into one row. This is the same as .gridcol. <code>(default) 12</code> <code>4</code> <code>shrink</code> <code>fill</code> <code>auto</code> Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Available combinations You can use combinations of different size types for one column at once. Available types are [1-12/shrink/fill/auto] for every breakpoint. <code>(default) 12, sm-9, md-6, lg-fill</code> <code>(default) 12, sm-3, md-6, lg-fill</code> Justify content height Grid with justified content height uses flexbox with an attempt to equalize height of column children <div className=\"surface-subtle\"> <p>Children of these columns are the same height</p> </div> <div className=\"surface-subtle\"> <p>The most high column dictates the height of the row</p> </div> <div className=\"surface-subtle\"> <p>Subsequent rows remain unaffected</p> </div> Container alignment Horizontal Vertical Children alignment Vertical Column gap size Add larger space between grid columns, use smaller gap, or remove them completely. There are two ways of adding a column gap: 1. .grid-column-gap--[size] where size is one of [none/small/default/large] 2. .grid-column-gap--[breakpoint]-[size] where breakpoint is used as a minimum display width to change the gap size {[\"large\", \"default\", \"small\", \"none\"].map((size, index) => ( <div key={index.toString()}> <h3 className=\"bold\">Column gap size {JSON.stringify(size)}</h3> {[1, 2, 3].map((key) => ( <code>4</code> ))} </div> ))} Row gap size Row gap helps to maintain space between grid rows and fixes unwanted spacing problems on the bottom of grid's last row elements by removing their content margins. There are two ways of adding a row gap: 1. .grid-row-gap--[size] where size is one of [small/medium/large/xlarge] 2. .grid-row-gap--[breakpoint]-[size] where breakpoint is used as a minimum display width to change the gap size {[\"small\", \"medium\", \"large\", \"xlarge\"].map((size, index, array) => ( <h3 className=\"mb-2\">Row gap size {JSON.stringify(size)}</h3> {[1, 2, 3, 4, 5, 6].map((key) => ( <code>6</code> ))} ))} Advanced Examples Complex Layout with Alignment <code>top aligned</code> <code>auto middle</code> <code>fill bottom</code> <code>stretch</code> Semantic HTML Tags <code>main content</code> <code>sidebar</code> All Column Sizes (1-12) {Array.from({ length: 12 }, (, i) => ( <code>{i + 1}</code> ))} API Grid React Props | Name | Type | Default | Description | | --------------- | ------------------------------------------------------------------- | ------- | ------------------------------------------ | | vAlign | \"stretch\" \\| \"start\" \\| \"end\" \\| \"center\" | - | Vertical alignment of grid items. | | hAlign | \"end\" \\| \"center\" \\| \"space-around\" \\| \"space-between\" | - | Horizontal alignment of grid items. | | tag | React.ElementType | \"div\" | Rendered HTML element. | | justifyHeight | boolean | false | Whether grid should justify height. | | rowGapSize | \"small\" \\| \"medium\" \\| \"large\" \\| \"xlarge\" \\| Record<string, ...> | - | Row gap size, can be responsive object. | | columnGapSize | \"none\" \\| \"small\" \\| \"default\" \\| \"large\" \\| Record<string, ...> | - | Column gap size, can be responsive object. | | className | string | - | Additional CSS classes. | GridCol React Props | Name | Type | Default | Description | | ----------- | ------------------- | ------- | --------------------------------------------- | | size | ResponsiveSize | - | Column size (1-12), can be responsive object. | | offset | ResponsiveSize | - | Column offset, can be responsive object. | | tag | React.ElementType | \"div\" | Rendered HTML element. | | className | string | - | Additional CSS classes. |"
169
169
  },
170
170
  {
171
171
  "href": "/components/hero",
@@ -323,6 +323,10 @@
323
323
  "href": "/fundamentals/typography/bodycopy",
324
324
  "content": "Body copy Use class names .small, .large to scale inline text. <p className=\"small\">This is small text</p> <p>This is default text</p> <p className=\"large\">This is large text</p> .small</code>, }, property: \"font-size\", value: \"14px\", }, { property: \"line-height\", value: \"18px\", }, { selector: { tag: \"th\", scope: \"row\", rowSpan: \"2\", value: <code>*</code>, }, property: \"font-size\", value: \"16px\", }, { property: \"line-height\", value: \"20px\", }, { selector: { tag: \"th\", scope: \"row\", rowSpan: \"2\", value: <code>.large</code>, }, property: \"font-size\", value: \"18px\", }, { property: \"line-height\", value: \"22px\", }, ]} /> Line length Line lengths should be managed to represent the correct look of text. Limit the extent of line lengths. Shorter line lengths are on brand and more readable. 1. Up to 40 characters per line for short lines of text or short paragraphs. 2. Up to 55 characters per line for body text. 3. More than 80 characters is too long. Default length is set to 30em, which equals roughly to 55 characters. This can be adjusted with text line length and wrapping utilities <p> {Digital services are a key enabler for today's social and economic development. Orange is a key player in this progress by providing telecoms infrastructure in more than 220 countries and territories around the world.} </p>"
325
325
  },
326
+ {
327
+ "href": "/fundamentals/typography/caption",
328
+ "content": "Caption Caption classes are used for image captions and related descriptive text. They provide three size variants with appropriate font sizing and line height for optimal readability. Usage Caption utilities can be applied to any text element, but are most commonly used with <p>, <figcaption>, or <span> tags to describe images, graphics, or other visual content. <figure> <figcaption className=\"caption--small\"> {\"This is a small caption (14px)\"} </figcaption> <figcaption className=\"caption\"> {\"This is a default caption (16px)\"} </figcaption> <figcaption className=\"caption--large\"> {\"This is a large caption (18px)\"} </figcaption> </figure> Sizes .caption--small</code>, }, { variant: \"Default\", fontSize: \"16px\", lineHeight: \"18px\", className: <code>.caption</code>, }, { variant: \"Large\", fontSize: \"18px\", lineHeight: \"20px\", className: <code>.caption--large</code>, }, ]} /> Best practices - Use semantic HTML: prefer <figure> and <figcaption> for images with captions - Keep captions concise and descriptive - Use the appropriate size for visual hierarchy - Combine with color and spacing utilities for clarity - Ensure sufficient color contrast for accessibility"
329
+ },
326
330
  {
327
331
  "href": "/fundamentals/typography/displayheadings",
328
332
  "content": "Display headings Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style. {[1, 2, 3, 4, \"hero\"].map((headingLevel) => { const displayClass = display-${headingLevel}; return ( <h1 key={displayClass} className={displayClass}> .{displayClass}: 401 Koní bežalo vôkol mäsového kombinátu </h1> ); })} <table className=\"table\"> <caption> Display headings font sizes and line heights. Displayed values are calculated from relative units when default font size is set to 16px. </caption> <thead> <tr> <th rowSpan=\"2\">Selector</th> <th rowSpan=\"2\">Property</th> <th colSpan=\"2\">Viewport size</th> </tr> <tr> <th>default</th> <th>md</th> <th>xl</th> </tr> </thead> <tbody> <tr> <th scope=\"row\" rowSpan=\"3\"> <code>.display-1</code> </th> <td>font-size</td> <td>30px</td> <td>50px</td> <td>60px</td> </tr> <tr> <td>line-height</td> <td>33px</td> <td>55px</td> <td>66px</td> </tr> <tr> <td>max-width</td> <td>520px</td> <td>700px</td> <td>950px</td> </tr> <tr> <th scope=\"row\" rowSpan=\"3\"> <code>.display-2</code> </th> <td>font-size</td> <td>28px</td> <td>40px</td> <td>50px</td> </tr> <tr> <td>line-height</td> <td>31px</td> <td>44px</td> <td>55px</td> </tr> <tr> <td>max-width</td> <td>520px</td> <td>650px</td> <td>850px</td> </tr> <tr> <th scope=\"row\" rowSpan=\"3\"> <code>.display-3</code> </th> <td>font-size</td> <td>26px</td> <td>34px</td> <td>40px</td> </tr> <tr> <td>line-height</td> <td>29px</td> <td>37px</td> <td>44px</td> </tr> <tr> <td>max-width</td> <td>480px</td> <td>580px</td> <td>750px</td> </tr> <tr> <th scope=\"row\" rowSpan=\"3\"> <code>.display-4</code> </th> <td>font-size</td> <td>24px</td> <td>30px</td> <td>34px</td> </tr> <tr> <td>line-height</td> <td>26px</td> <td>33px</td> <td>37px</td> </tr> <tr> <td>max-width</td> <td>480px</td> <td>520px</td> <td>700px</td> </tr> </tbody> </table> Text utilities If you need change style, alignment, color or wrapping of text use text utilities."
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@orangesk/orange-design-system",
3
- "version": "2.0.0-beta.29",
3
+ "version": "2.0.0-beta.30",
4
4
  "private": false,
5
5
  "engines": {
6
6
  "node": ">=20.x"
@@ -71,7 +71,7 @@
71
71
  "rehype-slug": "^6.0.0",
72
72
  "remark-gemoji": "^8.0.0",
73
73
  "remark-gfm": "^4.0.1",
74
- "swiper": "12.1.0",
74
+ "swiper": "12.1.1",
75
75
  "tabbable": "^6.4.0",
76
76
  "unescape-html": "^1.1.0",
77
77
  "wnumb": "^1.2.0"
@@ -94,8 +94,8 @@
94
94
  "@testing-library/jest-dom": "^6.9.1",
95
95
  "@testing-library/react": "^16.3.2",
96
96
  "@testing-library/user-event": "^14.6.1",
97
- "@types/node": "25.2.2",
98
- "@types/react": "19.2.13",
97
+ "@types/node": "25.2.3",
98
+ "@types/react": "19.2.14",
99
99
  "@types/react-dom": "19.2.3",
100
100
  "@types/wnumb": "^1.2.3",
101
101
  "babel-jest": "30.2.0",
@@ -104,8 +104,8 @@
104
104
  "eslint-config-prettier": "^10.1.8",
105
105
  "eslint-plugin-unused-imports": "^4.4.1",
106
106
  "fs-extra": "^11.3.3",
107
- "glob": "13.0.1",
108
- "html-validate": "10.7.0",
107
+ "glob": "13.0.3",
108
+ "html-validate": "10.8.0",
109
109
  "husky": "^9.1.7",
110
110
  "identity-obj-proxy": "^3.0.0",
111
111
  "jest": "30.2.0",
package/src/components/Carousel/Carousel.static.ts CHANGED
@@ -314,15 +314,16 @@ export default class Carousel {
314
314
  }
315
315
 
316
316
  /**
317
- * Apply negative margin-right to carousel track when slidesPerView is a whole number.
317
+ * Apply negative margin-right to carousel track when all slides fit on screen.
318
318
  * This compensates for the 20px padding-right on each slide, ensuring proper grid alignment.
319
319
  */
320
320
  private applyTrackMarginCompensation(): void {
321
321
  if (!this.instance || !this.viewport) return;
322
322
 
323
323
  const slidesPerView = Number(this.instance.params.slidesPerView) || 1;
324
+ const slidesCount = this.instance.slides.length;
324
325
 
325
- if (Number.isInteger(slidesPerView)) {
326
+ if (slidesCount <= slidesPerView) {
326
327
  this.viewport.style.setProperty("margin-right", "-20px", "important");
327
328
  } else {
328
329
  this.viewport.style.removeProperty("margin-right");
@@ -332,7 +333,7 @@ export default class Carousel {
332
333
  /**
333
334
  * Calculate how much the carousel should extend beyond the container (bleed effect).
334
335
  * On screens 2560px and wider, the bleed effect is disabled.
335
- * Also disabled when slidesPerView is a whole number (integer).
336
+ * Also disabled when all slides fit on screen (slidesCount <= slidesPerView).
336
337
  */
337
338
  private calculateBleedAmount(container: HTMLElement): number {
338
339
  const containerWidth = container.offsetWidth;
@@ -344,9 +345,10 @@ export default class Carousel {
344
345
  bleedAmount = 0;
345
346
  }
346
347
 
347
- // Disable bleed when slidesPerView is a whole number (integer)
348
+ // Disable bleed when all slides fit on screen (no scrolling needed)
348
349
  const slidesPerView = Number(this.instance?.params.slidesPerView) || 1;
349
- if (Number.isInteger(slidesPerView)) {
350
+ const slidesCount = this.instance?.slides.length || 0;
351
+ if (slidesCount <= slidesPerView) {
350
352
  bleedAmount = 0;
351
353
  }
352
354
 
@@ -397,7 +399,8 @@ export default class Carousel {
397
399
 
398
400
  const updateBleedState = () => {
399
401
  const slidesPerView = Number(this.instance?.params.slidesPerView) || 1;
400
- const shouldDisableBleed = Number.isInteger(slidesPerView);
402
+ const slidesCount = this.instance?.slides.length || 0;
403
+ const shouldDisableBleed = slidesCount <= slidesPerView;
401
404
 
402
405
  if (shouldDisableBleed) {
403
406
  this.element.classList.remove(CLASS_BLEED_RIGHT);
@@ -539,8 +542,12 @@ export default class Carousel {
539
542
  htmlControl.setAttribute(
540
543
  "aria-label",
541
544
  action === "next"
542
- ? this.config.a11y?.nextSlideMessage || "Nasledujúci snímok"
543
- : this.config.a11y?.prevSlideMessage || "Predchádzajúci snímok",
545
+ ? (typeof this.config.a11y === "object"
546
+ ? this.config.a11y?.nextSlideMessage
547
+ : undefined) || "Nasledujúci snímok"
548
+ : (typeof this.config.a11y === "object"
549
+ ? this.config.a11y?.prevSlideMessage
550
+ : undefined) || "Predchádzajúci snímok",
544
551
  );
545
552
  htmlControl.setAttribute("type", "button");
546
553
 
package/src/components/Expander/Expander.static.ts CHANGED
@@ -13,31 +13,6 @@ export default class Expander {
13
13
  }
14
14
 
15
15
  toggle() {
16
- const summary = this.element.querySelector("summary");
17
-
18
- if (!summary) {
19
- return;
20
- }
21
-
22
- const summaryText = summary.getAttribute("data-summary");
23
- const summaryOpenedText = summary.getAttribute("data-summary-opened");
24
-
25
- summary.setAttribute(
26
- "aria-expanded",
27
- summary.getAttribute("aria-expanded") === "true" ? "false" : "true",
28
- );
29
-
30
- if (summaryOpenedText) {
31
- const text =
32
- summary.getAttribute("aria-expanded") === "true"
33
- ? summaryOpenedText
34
- : summaryText;
35
-
36
- if (text) {
37
- summary.setAttribute("aria-label", text);
38
- }
39
- }
40
-
41
16
  const toggleGroup = this.element.getAttribute("data-toggle-group");
42
17
  if (toggleGroup) {
43
18
  this.syncGroup(toggleGroup);
@@ -54,22 +29,6 @@ export default class Expander {
54
29
  if (element !== this.element) {
55
30
  if (element.open !== isOpen) {
56
31
  element.open = isOpen;
57
- const summary = element.querySelector("summary");
58
- if (summary) {
59
- summary.setAttribute("aria-expanded", isOpen ? "true" : "false");
60
-
61
- const summaryText = summary.getAttribute("data-summary");
62
- const summaryOpenedText = summary.getAttribute(
63
- "data-summary-opened",
64
- );
65
-
66
- if (summaryOpenedText) {
67
- const text = isOpen ? summaryOpenedText : summaryText;
68
- if (text) {
69
- summary.setAttribute("aria-label", text);
70
- }
71
- }
72
- }
73
32
  }
74
33
  }
75
34
  });
package/src/components/Expander/Expander.tsx CHANGED
@@ -87,17 +87,12 @@ export const Expander: React.FC<ExpanderProps> = (props) => {
87
87
  ref={expanderRef}
88
88
  {...other}
89
89
  >
90
- <summary
91
- aria-expanded="false"
92
- aria-label={summary}
93
- data-summary={summary}
94
- data-summary-opened={summaryOpened}
95
- >
96
- <div className={`${CLASS_ROOT}__summary`}>{summaryText}</div>
90
+ <summary data-summary={summary} data-summary-opened={summaryOpened}>
91
+ <span className={`${CLASS_ROOT}__summary`}>{summaryText}</span>
97
92
  {summaryOpenedText && (
98
- <div className={`${CLASS_ROOT}__summary--opened`}>
93
+ <span className={`${CLASS_ROOT}__summary--opened`}>
99
94
  {summaryOpenedText}
100
- </div>
95
+ </span>
101
96
  )}
102
97
  </summary>
103
98
  <div>{children}</div>
package/src/components/Expander/styles/style.scss CHANGED
@@ -32,6 +32,7 @@
32
32
  &__summary,
33
33
  &__summary--opened {
34
34
  gap: space.get("xsmall");
35
+ display: block;
35
36
  }
36
37
 
37
38
  &__summary {
package/src/components/Grid/Grid.tsx CHANGED
@@ -5,11 +5,17 @@ import { genResponsiveClasses } from "../../utils";
5
5
  export type GridVAlign = "stretch" | "start" | "end" | "center";
6
6
  export type GridHAlign = "end" | "center" | "space-around" | "space-between";
7
7
  export type GridRowGapSize =
8
+ | "small"
8
9
  | "medium"
9
10
  | "large"
10
11
  | "xlarge"
11
- | Record<string, "medium" | "large" | "xlarge">;
12
- export type GridColumnGapSize = "none" | "small" | "default" | "large";
12
+ | Record<string, "small" | "medium" | "large" | "xlarge">;
13
+ export type GridColumnGapSize =
14
+ | "none"
15
+ | "small"
16
+ | "default"
17
+ | "large"
18
+ | Record<string, "none" | "small" | "default" | "large">;
13
19
 
14
20
  export interface GridProps extends React.HTMLAttributes<HTMLElement> {
15
21
  vAlign?: GridVAlign;
@@ -42,8 +48,8 @@ export const Grid = React.forwardRef<HTMLElement, GridProps>(
42
48
  [`align-items-${vAlign}`]: vAlign,
43
49
  [`justify-content-${hAlign}`]: hAlign,
44
50
  [`${CLASS_ROOT}--justify-height`]: justifyHeight,
45
- [`${CLASS_ROOT}--column-gap-${columnGapSize}`]: columnGapSize,
46
51
  },
52
+ ...genResponsiveClasses(`${CLASS_ROOT}-column-gap`, columnGapSize),
47
53
  ...genResponsiveClasses(`${CLASS_ROOT}-row-gap`, rowGapSize),
48
54
  className,
49
55
  );
package/src/components/Grid/styles/config.scss CHANGED
@@ -2,11 +2,12 @@
2
2
 
3
3
  $grid-base: 12 !default;
4
4
 
5
- $grid-row-gap-sizes: ("medium", "large", "xlarge");
5
+ $grid-row-gap-sizes: ("small", "medium", "large", "xlarge");
6
+ $grid-column-gap-sizes: ("none", "small", "default", "large");
6
7
 
7
8
  $column-gap: (
9
+ none: 0,
8
10
  small: space.get("xsmall"),
9
11
  default: space.get("small"),
10
12
  large: space.get("medium"),
11
- none: 0,
12
13
  );
package/src/components/Grid/styles/mixins.scss CHANGED
@@ -23,24 +23,16 @@
23
23
  }
24
24
  }
25
25
 
26
- @mixin grid-column-gap($size: "default", $column-gap: config.$column-gap) {
27
- $gap: map.get($column-gap, $size);
28
-
29
- @if ($size == "default" or $size == "small") {
30
- @if ($size == "default") {
31
- margin-left: -$gap;
32
- margin-right: -$gap;
33
- } @else {
34
- margin-left: -$gap !important;
35
- margin-right: -$gap !important;
36
- }
37
- } @else {
38
- // For large gaps, use negative margins only on desktop to prevent mobile overflow
39
- @include breakpoint.get("md") {
40
- margin-left: -$gap !important;
41
- margin-right: -$gap !important;
42
- }
43
- }
26
+ @mixin grid-column-gap($size: "default") {
27
+ $gap: map.get(config.$column-gap, $size);
28
+ margin-left: -$gap;
29
+ margin-right: -$gap;
30
+ }
31
+
32
+ @mixin grid-column-gap-responsive($size: "default") {
33
+ $gap: map.get(config.$column-gap, $size);
34
+ margin-left: -$gap !important;
35
+ margin-right: -$gap !important;
44
36
  }
45
37
 
46
38
  @mixin grid-with-equal-height-content(
@@ -83,22 +75,16 @@
83
75
  max-width: 100%;
84
76
  }
85
77
 
86
- @mixin grid-col-column-gap($size: "default", $column-gap: config.$column-gap) {
87
- $gap: map.get($column-gap, $size);
88
-
89
- @if ($size == "default") {
90
- padding-left: $gap;
91
- padding-right: $gap;
92
- } @else if ($size == "small") {
93
- padding-left: $gap !important;
94
- padding-right: $gap !important;
95
- } @else {
96
- // For large gaps, use padding only on desktop (where negative margins are applied)
97
- @include breakpoint.get("md") {
98
- padding-left: $gap !important;
99
- padding-right: $gap !important;
100
- }
101
- }
78
+ @mixin grid-col-column-gap($size: "default") {
79
+ $gap: map.get(config.$column-gap, $size);
80
+ padding-left: $gap;
81
+ padding-right: $gap;
82
+ }
83
+
84
+ @mixin grid-col-column-gap-responsive($size: "default") {
85
+ $gap: map.get(config.$column-gap, $size);
86
+ padding-left: $gap !important;
87
+ padding-right: $gap !important;
102
88
  }
103
89
 
104
90
  @mixin column-size($width: config.$grid-base, $grid-base: config.$grid-base) {
package/src/components/Grid/styles/style.scss CHANGED
@@ -10,6 +10,12 @@
10
10
  .grid {
11
11
  @include mixins.grid-base;
12
12
 
13
+ @include mixins.grid-column-gap("default");
14
+
15
+ > [class*="grid__col"] {
16
+ @include mixins.grid-col-column-gap("default");
17
+ }
18
+
13
19
  &--justify-height {
14
20
  @include mixins.grid-with-equal-height-content;
15
21
  }
@@ -24,12 +30,16 @@
24
30
  }
25
31
  }
26
32
 
27
- @each $name, $value in config.$column-gap {
28
- &#{generate.variant-name($name, "--column-gap-",)} {
29
- @include mixins.grid-column-gap($name);
33
+ &-column-gap {
34
+ @each $name in config.$grid-column-gap-sizes {
35
+ @include breakpoint.each using ($breakpoint) {
36
+ &-#{generate.variant-name($breakpoint, "-")}-#{string.unquote($name)} {
37
+ @include mixins.grid-column-gap-responsive($name);
30
38
 
31
- > [class*="grid__col"] {
32
- @include mixins.grid-col-column-gap($name);
39
+ > [class*="grid__col"] {
40
+ @include mixins.grid-col-column-gap-responsive($name);
41
+ }
42
+ }
33
43
  }
34
44
  }
35
45
  }
package/src/components/Grid/tests/Grid.unit.test.js CHANGED
@@ -63,12 +63,12 @@ describe("Grid", () => {
63
63
  });
64
64
 
65
65
  ["small", "large", "none"].forEach((columnGapSize) => {
66
- it(`applies grid--column-gap-${columnGapSize} class when columnGapSize is ${columnGapSize}`, () => {
66
+ it(`applies grid-column-gap--${columnGapSize} class when columnGapSize is ${columnGapSize}`, () => {
67
67
  const { getByTestId } = render(
68
68
  <Grid data-testid="test-id" columnGapSize={columnGapSize} />,
69
69
  );
70
70
  expect(getByTestId("test-id")).toHaveClass(
71
- `grid--column-gap-${columnGapSize}`,
71
+ `grid-column-gap--${columnGapSize}`,
72
72
  );
73
73
  });
74
74
  });
@@ -299,7 +299,7 @@ describe("Grid with GridCol combinations", () => {
299
299
 
300
300
  expect(grid).toHaveClass(
301
301
  "grid-row-gap--large",
302
- "grid--column-gap-none",
302
+ "grid-column-gap--none",
303
303
  "custom-grid",
304
304
  );
305
305
  expect(cols[0]).toHaveClass("grid__col", "grid__col--auto", "custom-col");