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

package/build/lib/utilities.css.map

@@ -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: 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}"]}
+{"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,6CAEE,4BACF,CACA,iDAEE,uBACF,CACA,wCACE,mFAGE,eAAgB,CAChB,8CAA+C,CAC/C,kBAAmB,CAHnB,cAIF,CACA,+FAEE,8CAA+C,CAC/C,kBACF,CACA,+FAGE,2CAA4C,CAC5C,kBAAmB,CAFnB,SAGF,CACA,gbAKE,qDACF,CACF,CACA,4CACE,6CAEE,wEAAyE,CACzE,oBACF,CACF,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    scroll-snap-type: x mandatory;\n  }\n  [class*=horizontal-scroll] > *,\n  .table-scrollable > * {\n    scroll-snap-align: start;\n  }\n  @supports selector(::-webkit-scrollbar) {\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-track,\n    .table-scrollable::-webkit-scrollbar-track {\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    [class*=horizontal-scroll]:hover::-webkit-scrollbar-thumb, [class*=horizontal-scroll]:active::-webkit-scrollbar-thumb, [class*=horizontal-scroll]::-webkit-scrollbar-thumb:hover, [class*=horizontal-scroll]::-webkit-scrollbar-thumb:active,\n    .table-scrollable:hover::-webkit-scrollbar-thumb,\n    .table-scrollable:active::-webkit-scrollbar-thumb,\n    .table-scrollable::-webkit-scrollbar-thumb:hover,\n    .table-scrollable::-webkit-scrollbar-thumb:active {\n      background-color: var(--color-fill-contrast) !important;\n    }\n  }\n  @supports not selector(::-webkit-scrollbar) {\n    [class*=horizontal-scroll],\n    .table-scrollable {\n      scrollbar-color: var(--color-fill-contrast) var(--color-surface-moderate);\n      scrollbar-width: thin;\n    }\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

@@ -49,7 +49,7 @@
   },
   {
     "href": "/components/carousel",
-    "content": "import React from \"react\"; import cx from \"classnames\"; import breakpoint from \"@/styles/export/breakpoint.js\"; export const SlideExample = ({ num, ...props }) => ( <h3 className=\"mb-none\">Slide {num + 1}</h3> <p>lorem ipsum dolor</p> </React.Fragment> ); export const imageItems = Array(13) .fill() .map((, index) => ); Carousel Slideshow for cycling through image, text or combined elements. 🧭 Navigation Carousel uses directional buttons to enable slide by slide progression and pagination dots for quickly jumping to desired slide. Directional buttons and pagination dots are visible for md and larger viewports. On smaller viewports, the navigation elements are hidden and element is controlled using native horizontal scrolling. For cases where you want consistent scrolling behavior across all screen sizes, you can use the scrollbar variant which always shows the scrollbar and hides pagination dots. 📜 Scrollbar variant For cases where you want the scrollbar to always be visible regardless of viewport size, you can use the showScrollbar prop. This variant: - Always shows the horizontal scrollbar - Always hides the pagination dots - Provides consistent scrolling behavior across all screen sizes Directional buttons of a fullwidth carousel can overflow page content if there is enough space. See example. ↔️ Slide width Carousel shows 1.2 slides by default. This behavior is necessary for basic usability on small viewports, where directional buttons and pagination dots are hidden. Although this behavior can be overriden per breakpoint, it should be preserved for small viewports in order to provide a visual cue that there is content available to the sides. 🚫💪 Hero content not allowed Do not use Carousel for cycling hero banners or any other fullwidth banners. User research has clearly shown that a single (personalised) banner performs better than multiple different banners. Breakout directional buttons When a Carousel is a direct descendant of a Container, directional buttons can break outside the content column in order to align the slides with other fullwidth elements. Such situation can occur on md, lg, xl and xxl breakpoints, when the viewport is large enough to accomodate directional buttons outside the container. Please note that preview size does not represent viewport size and directional buttons will overflow the preview area. TODO: use test case iframe to show real behaviour in preview. <p>Example container content</p> <p>Example container content</p> 👉 Bleed right layout Use the bleedRight prop to make the carousel start aligned with the container but extend to the right edge of the screen. This is perfect for showcase layouts where you want to maintain left alignment with other content while letting the carousel extend beyond the container boundaries. Key features of the bleed right variant: - Carousel content starts aligned with the container's left edge - Extends to the full width of the viewport on the right side - Scrollbar remains within the container bounds for better usability - Works best with the showScrollbar prop for consistent navigation - Responsive behavior that adapts to different screen sizes: - Small screens (< 1240px): Optimized slide sizing to prevent gaps - Medium to large screens (1240px - 2559px): Full bleed effect extending to viewport edge - Ultra-wide screens (≥ 2560px)**: Normal carousel behavior to prevent oversized slides <p>Example container content above carousel</p> <p>Example container content below carousel</p> Custom options Carousel default configuration can be overriden before initialization using data-swiper-options attribute. The attribute accepts a JSON string representing a Swiper.js options object Auto-disable when content fits The carousel automatically disables all interactive features (dragging, pagination, scrollbar interaction) when the slidesPerView setting matches or exceeds the total number of slides. This is particularly useful for: - Responsive layouts where the number of slides varies - \"Bleed right\" carousels that need to prevent interaction when all slides fit - Dynamic content where slide count changes When disabled, the carousel remains visible but: - ✅ Slides cannot be dragged - ✅ No keyboard navigation - ✅ No scrollbar interaction - ✅ Pagination controls are not clickable - ✅ Content sits statically This is achieved using Swiper's native enable()/disable() methods, ensuring complete prevention of all carousel interactions. Example with bleed right Here's a common use case with bleedRight carousel that only shows slides that fit: <p>Example: With 3 slides and slidesPerView: 3, carousel is disabled</p> 🎮 External controls Connect external buttons or form controls to carousel slides using data attributes. This is useful for creating custom navigation interfaces or integrating carousel controls with forms. External controls can be placed anywhere in the DOM and will automatically connect to the carousel during initialization. Multiple control sets can control the same carousel. <div className=\"d-flex justify-content-end mb-large\"> </div> Data attributes | Attribute | Element | Description | | ------------------------ | -------- | --------------------------------------- | | data-carousel-id | Carousel | Unique identifier for the carousel | | data-carousel-controls | Control | References the carousel ID to control | | data-carousel-action | Control | Action to perform: \"next\" or \"prev\" | Implementation External controls automatically receive ARIA attributes for accessibility and work with both static HTML and React-rendered elements. They are automatically disabled when at the first or last slide, preventing unnecessary navigation attempts. API Props | Prop | Type | Default | Description | | --------------- | --------------------- | ------- | --------------------------------------------------------------------------- | | items | ReactNode[] | - | Array of carousel items to display | | swiperOptions | Record<string, any> | - | Swiper.js options object for customization | | colorScheme | \"light\" \\| \"dark\" | - | Inverse colors for dark/light themes | | showScrollbar | boolean | false | Always show scrollbar and hide pagination dots | | bleedRight | boolean | false | Make carousel bleed to right edge while keeping left aligned with container | | className | string | - | Additional CSS classes | JS module reference All elements with data-carousel are initialized on window.DOMContentLoaded event. Custom initialization example:"
+    "content": "import React from \"react\"; import cx from \"classnames\"; import breakpoint from \"@/styles/export/breakpoint.js\"; export const SlideExample = ({ num, ...props }) => ( <h3 className=\"mb-none\">Slide {num + 1}</h3> <p>lorem ipsum dolor</p> </React.Fragment> ); export const imageItems = Array(13) .fill() .map((, index) => ); Carousel Slideshow for cycling through image, text or combined elements. 🧭 Navigation Carousel uses directional buttons to enable slide by slide progression and pagination dots for quickly jumping to desired slide. Directional buttons and pagination dots are visible for md and larger viewports. On smaller viewports, the navigation elements are hidden and element is controlled using native horizontal scrolling. For cases where you want consistent scrolling behavior across all screen sizes, you can use the scrollbar variant which always shows the scrollbar and hides pagination dots. 📜 Scrollbar variant For cases where you want the scrollbar to always be visible regardless of viewport size, you can use the showScrollbar prop. This variant: - Always shows the horizontal scrollbar - Always hides the pagination dots - Provides consistent scrolling behavior across all screen sizes Directional buttons of a fullwidth carousel can overflow page content if there is enough space. See example. ↔️ Slide width Carousel shows 1.2 slides by default. This behavior is necessary for basic usability on small viewports, where directional buttons and pagination dots are hidden. Although this behavior can be overriden per breakpoint, it should be preserved for small viewports in order to provide a visual cue that there is content available to the sides. 🚫💪 Hero content not allowed Do not use Carousel for cycling hero banners or any other fullwidth banners. User research has clearly shown that a single (personalised) banner performs better than multiple different banners. Breakout directional buttons When a Carousel is a direct descendant of a Container, directional buttons can break outside the content column in order to align the slides with other fullwidth elements. Such situation can occur on md, lg, xl and xxl breakpoints, when the viewport is large enough to accomodate directional buttons outside the container. Please note that preview size does not represent viewport size and directional buttons will overflow the preview area. TODO: use test case iframe to show real behaviour in preview. <p>Example container content</p> <p>Example container content</p> 👉 Bleed right layout Use the bleedRight prop to enable a bleed layout that extends beyond the container edges while keeping the carousel internally managed (no global body overflow workaround needed). Key features of the bleed variant: - Carousel extends to the viewport edge while preserving container-aligned content insets - Extends beyond container edges without forcing page-level overflow clipping - Scrollbar remains within the container bounds for better usability - Works best with the showScrollbar prop for consistent navigation - Responsive behavior that adapts to different screen sizes: - Small screens (< 1240px): Optimized slide sizing to prevent gaps - Medium to large screens (1240px - 2559px): Full bleed effect extending to viewport edge - Ultra-wide screens (≥ 2560px)**: Normal carousel behavior to prevent oversized slides <p>Example container content above carousel</p> <p>Example container content below carousel</p> Custom options Carousel default configuration can be overriden before initialization using data-swiper-options attribute. The attribute accepts a JSON string representing a Swiper.js options object Auto-disable when content fits The carousel automatically disables all interactive features (dragging, pagination, scrollbar interaction) when the slidesPerView setting matches or exceeds the total number of slides. This is particularly useful for: - Responsive layouts where the number of slides varies - \"Bleed right\" carousels that need to prevent interaction when all slides fit - Dynamic content where slide count changes When disabled, the carousel remains visible but: - ✅ Slides cannot be dragged - ✅ No keyboard navigation - ✅ No scrollbar interaction - ✅ Pagination controls are not clickable - ✅ Content sits statically This is achieved using Swiper's native enable()/disable() methods, ensuring complete prevention of all carousel interactions. Example with bleed right Here's a common use case with bleedRight carousel that only shows slides that fit: <p>Example: With 3 slides and slidesPerView: 3, carousel is disabled</p> 🎮 External controls Connect external buttons or form controls to carousel slides using data attributes. This is useful for creating custom navigation interfaces or integrating carousel controls with forms. External controls can be placed anywhere in the DOM and will automatically connect to the carousel during initialization. Multiple control sets can control the same carousel. <div className=\"d-flex justify-content-end mb-large\"> </div> Data attributes | Attribute | Element | Description | | ------------------------ | -------- | --------------------------------------- | | data-carousel-id | Carousel | Unique identifier for the carousel | | data-carousel-controls | Control | References the carousel ID to control | | data-carousel-action | Control | Action to perform: \"next\" or \"prev\" | Implementation External controls automatically receive ARIA attributes for accessibility and work with both static HTML and React-rendered elements. They are automatically disabled when at the first or last slide, preventing unnecessary navigation attempts. API Props | Prop | Type | Default | Description | | --------------- | --------------------- | ------- | --------------------------------------------------------------------------- | | items | ReactNode[] | - | Array of carousel items to display | | swiperOptions | Record<string, any> | - | Swiper.js options object for customization | | colorScheme | \"light\" \\| \"dark\" | - | Inverse colors for dark/light themes | | showScrollbar | boolean | false | Always show scrollbar and hide pagination dots | | bleedRight | boolean | false | Make carousel bleed to right edge while keeping left aligned with container | | className | string | - | Additional CSS classes | JS module reference All elements with data-carousel are initialized on window.DOMContentLoaded event. Custom initialization example:"
   },
   {
     "href": "/components/carousel-hero",
@@ -81,7 +81,7 @@
   },
   {
     "href": "/components/expander",
-    "content": "import React from \"react\"; Expander The Expander component is used to hide and show content. It can be used to reduce the amount of content visible on the page by default, making it easier for users to find what they are looking for. Basic Usage {This is the content that will be hidden until the user clicks the summary text.} Changing the summary text Add the summaryOpened prop to change the text displayed when the content is visible. {This is the content that will be hidden until the user clicks the summary text.} Custom Icon Use the renderSummary prop to customize the summary icon. Icon is rotating thanks to data-summary-icon attribute, which needs to be present on the icon. Custom Summary text Use the renderSummary and renderSummaryOpened props to customize the summary text. Icons do not rotate in this case. Toggle Group Use the toggleGroup prop to synchronize multiple expanders together. When one expander in the group is toggled, all others with the same toggleGroup value will toggle together. Used mostly in Product cards. Full Width Use the isFullWidth prop to make the expander take the full width of its container. Accessibility The Expander component uses the <details> and <summary> HTML elements, which are natively supported by most screen readers. This ensures that the component is accessible to users who rely on assistive technologies. The component automatically manages the aria-expanded attribute and updates the aria-label when the summary text changes between collapsed and expanded states. Important: Ensure that the summary prop provides a clear and concise description of the content that will be revealed. Use summaryOpened to provide appropriate text for the expanded state. API React Props | Prop | Type | Default | Description | | --------------------- | ------------------------------------------- | ------- | -------------------------------------------------------- | | summary | string | - | Trigger text when collapsed | | summaryOpened | string | - | Trigger text when expanded | | renderSummary | (props: ExpanderProps) => React.ReactNode | - | Custom summary renderer for collapsed state | | renderSummaryOpened | (props: ExpanderProps) => React.ReactNode | - | Custom summary renderer for expanded state | | isFullWidth | boolean | - | Expander takes full width of its container | | toggleGroup | string | - | Group identifier for syncing multiple expanders together | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Content to show/hide | JS module reference All elements with data-expander are initialized automatically. Custom initialization example: Expander Methods | Method | Type | Description | | --------- | ------ | ---------------------------------------------------------- | | toggle | func | Toggle the expander open/closed state | | destroy | func | Destroy the instance - removes all listeners | | update | func | Re-initialize the component (useful after content changes) |"
+    "content": "import React from \"react\"; Expander The Expander component is used to hide and show content. It can be used to reduce the amount of content visible on the page by default, making it easier for users to find what they are looking for. Basic Usage {This is the content that will be hidden until the user clicks the summary text.} Changing the summary text Add the summaryOpened prop to change the text displayed when the content is visible. {This is the content that will be hidden until the user clicks the summary text.} Custom Icon Use the renderSummary prop to customize the summary icon. Icon is rotating thanks to data-summary-icon attribute, which needs to be present on the icon. Custom Summary text Use the renderSummary and renderSummaryOpened props to customize the summary text. Icons do not rotate in this case. Toggle Group Use the toggleGroup prop to synchronize multiple expanders together. When one expander in the group is toggled, all others with the same toggleGroup value will toggle together. Used mostly in Product cards. Full Width Use the isFullWidth prop to make the expander take the full width of its container. Accessibility The Expander component uses the native <details> and <summary> HTML elements, which provide built-in accessibility support. Screen readers automatically announce the expanded/collapsed state without requiring manual ARIA attributes. The native <details> element ensures: - Keyboard navigation works automatically (Enter/Space to toggle) - Screen readers announce the state changes - Focus management is handled by the browser Important: Ensure that the summary prop provides a clear and concise description of the content that will be revealed. Use summaryOpened to provide appropriate text for the expanded state to improve user experience. API React Props | Prop | Type | Default | Description | | --------------------- | ------------------------------------------- | ------- | -------------------------------------------------------- | | summary | string | - | Trigger text when collapsed | | summaryOpened | string | - | Trigger text when expanded | | renderSummary | (props: ExpanderProps) => React.ReactNode | - | Custom summary renderer for collapsed state | | renderSummaryOpened | (props: ExpanderProps) => React.ReactNode | - | Custom summary renderer for expanded state | | isFullWidth | boolean | - | Expander takes full width of its container | | toggleGroup | string | - | Group identifier for syncing multiple expanders together | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Content to show/hide | JS module reference All elements with data-expander are initialized automatically. Custom initialization example: Expander Methods | Method | Type | Description | | --------- | ------ | ---------------------------------------------------------- | | toggle | func | Toggle the expander open/closed state | | destroy | func | Destroy the instance - removes all listeners | | update | func | Re-initialize the component (useful after content changes) |"
   },
   {
     "href": "/components/feature-accordion",
@@ -89,7 +89,7 @@
   },
   {
     "href": "/components/footer",
-    "content": "Footer A comprehensive site footer component with navigation links, logo, social media section, bottom links, and copyright information. Automatically adapts to different color schemes using CSS-only implementation. Basic Usage Custom Data Footer accepts custom data to override the default footer content. The data structure includes columns with navigation links, bottom links, and copyright information. Standalone Usage The Footer component is built as a standalone CSS bundle that provides complete styling for footer layouts. It automatically adapts to light and dark themes using CSS variables. Build Files - CSS: build/lib/footer.css Quick Start 1. Build the bundle: 2. Include the CSS file: 3. Font Integration The component includes OrangeSK Neue font integration. Ensure font files are available or update the CSS paths accordingly: Features - CSS-Only Implementation: No JavaScript required - pure CSS styling - Theme Support: Automatic light/dark theme switching via .is-light/.is-dark classes - Responsive Design: Mobile-first approach with progressive enhancement - Accessible: Semantic HTML structure with proper ARIA labels - Customizable: Easy to modify styling via CSS variables HTML Structure Theme Integration Props | Prop | Type | Default | Description | | ----------- | -------- | ------------------- | -------------------------------------------------------- | | data | object | Default footer data | Custom data structure to override default footer content | | className | string | - | Additional CSS classes | Data Structure The data prop accepts an object with the following structure: Accessibility - Uses semantic <footer> element for proper landmark navigation - Maintains proper heading hierarchy with <h5> for column titles - All links are keyboard accessible - Screen readers can easily navigate between footer sections - Proper contrast ratios maintained in both normal and inverse themes Structure The Footer component consists of: 1. Logo: Company logo displayed at the top 2. Navigation Columns: Organized links grouped by category 3. Social Media Section: Placeholder for social media links 4. Bottom Links: Legal and secondary navigation links 5. Copyright: Copyright information aligned to the right on larger screens Responsive Behavior - Mobile (xs): Single column layout, all sections stacked vertically - Small (sm): Two columns per row for navigation links - Medium (md): Four columns per row for navigation links, bottom section splits into two columns - Large (lg+): Maintains four-column layout with optimized spacing API React Props | Prop | Type | Default | Description | | ----------- | ------------ | ------------ | ----------------------------------- | | data | FooterData | footerData | Footer content configuration object | | className | string | - | Additional CSS classes | FooterData Type"
+    "content": "Footer A comprehensive site footer component with navigation links, logo, social media links, app download badges, legal links, and copyright information. Automatically adapts to different color schemes using a CSS-first implementation. Basic Usage Custom Data Footer accepts custom data to override the default footer content. The data structure includes columns with navigation links, bottom links, and copyright information. Standalone Usage The Footer component is built as a standalone bundle that provides complete styling and xs accordion behavior. It automatically adapts to light and dark themes using CSS variables. Build Files - CSS: build/lib/footer.css - JavaScript: build/lib/footer.js Quick Start 1. Build the bundle: 2. Include the files: 3. Font Integration The component includes OrangeSK Neue font integration. Ensure font files are available or update the CSS paths accordingly: Features - Standalone Auto-Init: Automatically initializes all elements with data-footer - XS Accordion: Footer columns collapse into accordion sections only on xs screens (< 480px) - Theme Support: Automatic light/dark theme switching via .is-light/.is-dark classes - Responsive Design: Mobile-first approach with progressive enhancement - Top Utility Bar: Logo and social links are displayed together in a single responsive row - App Download Bar: Built-in App Store and Google Play badges with external links - Accessible: Semantic HTML structure with proper ARIA labels - Customizable: Easy to modify styling via CSS variables HTML Structure JavaScript API The bundle exposes a global ODSFooter object: Theme Integration Props | Prop | Type | Default | Description | | ----------- | -------- | ------------------- | -------------------------------------------------------- | | data | object | Default footer data | Custom data structure to override default footer content | | className | string | - | Additional CSS classes | Data Structure The data prop accepts an object with the following structure: Accessibility - Uses semantic <footer> element for proper landmark navigation - Uses paragraph titles (.footertitle) in navigation columns to avoid heading hierarchy conflicts - All links are keyboard accessible - External app links use target=\"blank\" with rel=\"noopener noreferrer\" - Screen readers can easily navigate between footer sections - Proper contrast ratios maintained in both normal and inverse themes Structure The Footer component consists of: 1. Top Bar: Company logo and social media actions with responsive wrapping 2. Navigation Columns: Organized links grouped by category 3. App Download Bar: App Store and Google Play badges plus Plan obnovy link 4. Bottom Links: Legal and secondary navigation links 5. Copyright: Copyright information aligned to the right on larger screens Responsive Behavior - Mobile (xs): Single-column menu with accordion interaction, bars stack vertically, bottom legal links stack in a column - Small (sm): Two-column navigation menu with expanded (non-accordion) columns and list break helpers for inline list wrapping - Medium (md): Three-column navigation menu, bottom section splits into links and copyright - Large (lg+): Four-column navigation menu with increased spacing API React Props | Prop | Type | Default | Description | | ----------- | ------------ | ------------ | ----------------------------------- | | data | FooterData | footerData | Footer content configuration object | | className | string | - | Additional CSS classes | FooterData Type"
   },
   {
     "href": "/components/forms/addons",
@@ -199,6 +199,10 @@
     "href": "/components/mega-menu",
     "content": "Megamenu A navigation menu component with dropdown functionality and mobile-responsive design. Default Megamenu Note: When you click on any dropdown button in the preview below, the dropdown menu will open, but is positioned incorrectly due to docs limitations. In a real application, the dropdown will be positioned correctly below the button. Empty Search State Megamenu for Blog or other similar sites Empty Search State Standalone Usage The Megamenu component is built as a standalone JavaScript bundle that automatically initializes all elements with the data-megamenu attribute. Build Files - CSS: build/lib/megamenu.css - JavaScript: build/lib/megamenu.js Quick Start 1. Build the bundle: 2. Include the files: 3. Font Integration The component includes OrangeSK Neue font integration. Ensure font files are available or update the CSS paths accordingly: 4. Add the markup: Features - Auto-initialization via data-megamenu attribute - Dropdown functionality with smooth transitions - Outside click handling - Mobile responsive design - Full accessibility support - Light/dark theme capabilities HTML Structure JavaScript API The bundle exposes a global ODSMegamenu object: API React Props The Megamenu component accepts a complex data structure with navigation items, dropdowns, mobile menus, and various configuration options. See the component source for detailed prop types. JS module reference Default Config | Property | Type | Default | Description | | ----------------- | --------- | --------------- | -------------------------------------- | | dataToggle | string | \"data-toggle\" | Attribute name for toggle elements. | | activeClass | string | \"is-active\" | CSS class for active state. | | removeOnDestroy | boolean | false | Whether to remove elements on destroy. | Methods | Method | Description | | ----------------- | ---------------------------------------------------------------- | | destroy() | Removes all event listeners and cleans up the megamenu instance. | | getInstance(el) | Static method to get the Megamenu instance from a DOM element. |"
   },
+  {
+    "href": "/components/mega-menu/test",
+    "content": ""
+  },
   {
     "href": "/components/modal",
     "content": "Modal Additional layer floating above the main content which temporarily interrupts current task. Requires user interaction before they can proceed. Sizes Adjust spacing and maximum width. Each size comes with a default title size, which can be customized when required. Small Default Large Custom title Customize the title and other content inside header. Custom footer Customize the footer. Should be primary used for specific action button cases. Product modal Use the product header to display product information with an optional image, similar to the Card component's product header. When using the product modal, the default modalbody's spacing can be disabled using modalbody--no-spacing modifier class. Instead of the default modal body spacing, each section inside the body has its own spacing, based on the content type. Use appropriate class for each section based on content: - Subtitle section: modalproduct-body-subtitle-section - List section: modalproduct-body-list-section - Accordion section: modalproduct-body-accordion-section For each title in the section, use the modalproduct-body-section-title class as it adds the correct spacing. Full height on XS On XS screens (mobile devices), the modal will take the full height of the viewport to maintain a consistent height when the modal contains a flow or multiple steps. Sticky footer Sticky footers do not stick in IE, as it does not support position: sticky. Colorful body A modal can contain multiple body containers to divide it's content into multiple colorful sections. Colorful body provides vertical spacing needed to visually divide each section. Color is added using background color utilities. Make sure to pick an accessible color combination. Use spacing utilities to remove top/bottom padding when the first/last body element is using default color (white). Accessibility - Modals should only be opened by activating a button element. - Opening a modal sets focus on element with data-a11y-modal-initial-focus attribute (modal title by default). When not present, focus is set on first focusable element, usually the close button. - An open modal traps focus. It must always contain a close button. - Pressing ESC or clicking the overlay closes the modal. - Closing a modal sets focus back on the activating button element. React Usage In React, use the isActive prop to control the modal's visibility. When isActive is provided, the modal enters \"controlled mode\" where React manages its state and event handlers work correctly. Key points: - isActive prop enables React controlled mode - modal won't be moved to #root-modals - onHide callback is triggered when user closes via close button (×), overlay click, or ESC key API React Props | Prop | Type | Default | Description | | ---------------------- | --------------------------------- | ------- | ------------------------------------------------------------------------------------------------------- | | id | string | - | Required. HTML id attribute | | title | string | - | Main title text | | size | \"small\" \\| \"large\" | - | Modal dialog size (default is medium) | | isActive | boolean | - | Controls if modal is opened/closed. Enables React controlled mode - modal stays in DOM, not moved | | onHide | () => void | - | Callback fired when modal is closed (ESC, overlay, close button). Works in both controlled/uncontrolled | | fullHeight | boolean | - | Full height on XS viewport | | hasStickyFooter | boolean | - | Make footer sticky when content overflows | | actions | React.ReactNode[] | - | Action buttons in footer | | renderHeader | (id: string) => React.ReactNode | - | Custom header renderer | | renderBody | () => React.ReactNode | - | Custom body renderer | | renderFooter | () => React.ReactNode | - | Custom footer renderer | | renderTitle | (id: string) => React.ReactNode | - | Custom title renderer | | disableHeaderSpacing | boolean | - | Remove header padding | | disableFooterSpacing | boolean | - | Remove footer padding | | className | string | - | Additional CSS classes | | children | React.ReactNode | - | Modal body content | JS module reference All elements with data-a11y-dialog are initialized on window.DOMContentLoaded event. Custom initialization example: Default Config | Prop | Type | Default | Description | | ---------------------- | --------- | ---------------- | -------------------------------------------------------------------------------- | | classModalIsOpen | string | \"is-active\" | Class applied to modal when open | | classModalIsOpenBody | string | \"has-modal\" | Class applied to body when modal is open | | root | string | \"#root\" | Root page content selector to hide when modal is open | | modalsRoot | string | \"#root-modals\" | Container where modals are moved | | disablePortal | boolean | false | Disable moving modal to #root-modals (used internally for React controlled mode) | Modal Methods | Method | Type | Description | | --------- | ------ | -------------------------------------------- | | show | func | Show/open the modal | | hide | func | Hide/close the modal | | destroy | func | Destroy the instance - removes all listeners |"
@@ -221,7 +225,7 @@
   },
   {
     "href": "/components/promo-banner",
-    "content": "PromoBanner Promotional banner component designed to highlight special offers, services, or call-to-action messages with optional images and customizable styling. The component provides a flexible container that can display content alongside optional images in a responsive grid layout. Example <h2 className=\"h1 mb-medium\"> {Chcete skúsiť nezávislosť?} <span className=\"text-accent ml-small\">{\"Prima Voľba\"}</span> </h2> <p className=\"mb-large\"> {Vyskúšajte si, aké je to byť v najlepšej mobilnej sieti na Slovensku vďaka karte Prima Voľba.} </p> {\"Mám záujem\"} With Image PromoBanner supports background images to create more visually engaging promotional content. <h2 className=\"h1 mb-medium\"> {Chcete skúsiť nezávislosť? Prima Voľba} <span className=\"text-accent ml-small\">{\" Prima Voľba\"}</span> </h2> <p className=\"mb-large\"> {Vyskúšajte si, aké je to byť v najlepšej mobilnej sieti na Slovensku vďaka karte Prima Voľba.} </p> {\"Mám záujem\"} Image aligned to bottom <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Image aligned to top <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Image with bleeding effect The bleedImage prop allows the image to extend beyond the container boundaries to the right edge of the viewport, creating a more dramatic visual effect. <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Reverse Variant The reverse variant changes the order of content and image, placing the image on the left side and content on the right side. This creates visual interest and can be used to break up monotonous layouts. <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Reverse Layout Example}</h2> <p className=\"mb-large\"> {The reverse variant places the image on the left and content on the right, creating a different visual flow that can help break up page layouts.} </p> {\"Learn More\"} Vertical Variant The vertical variant stacks the content and image vertically instead of horizontally. In this layout, both content and image span the full width (12 columns) and are arranged one above the other. <h2 className=\"h1 mb-medium\">{Vertical Layout Example}</h2> <p className=\"mb-large\"> {The vertical variant is perfect for narrow spaces or when you want a full-width content experience with stacked layout.} </p> {\"Learn More\"} Vertical with Full Width Image The imageFullWidth prop can be used with the vertical variant to make the image span the complete width of its container, creating a more immersive visual experience. <h2 className=\"h1 mb-medium\">{Full Width Image Example}</h2> <p className=\"mb-large\"> {When imageFullWidth is enabled, the image takes up the complete width of its container, creating a bold visual impact in the vertical layout.} </p> {\"Discover More\"} Usage PromoBanner is ideal for: - Highlighting special offers or promotions - Call-to-action sections on landing pages - Product or service announcements - Cross-selling and upselling opportunities - Feature announcements and product launches The component combines visual appeal with clear messaging to drive user engagement and conversions. Content Structure The PromoBanner component uses a children-based API, giving you complete control over the content structure. You can include any combination of: - Headings (h1, h2, h3, etc.) - Paragraphs - Buttons - Custom HTML elements - Other components Layout - Without image: Content spans 7/12 columns on desktop - With image: Content spans 6/12 columns, image spans 6/12 columns - With bleeding image: Image extends beyond the 6/12 column grid to the right edge of the viewport, while content remains in its 6/12 column space. The image appears after the content in the visual order. - Reverse variant: Image spans 6/12 columns on the left, content spans 6/12 columns on the right. The image appears before the content in both DOM order and visual order. - Vertical variant: Both content and image span full width (12/12 columns) and are stacked vertically - With imageFullWidth: When enabled, the image takes up the complete width of its container, particularly useful in vertical layouts for maximum visual impact - Mobile: Both content and image span full width (12/12 columns). Bleeding effect is disabled on small screens for better mobile experience. Image Alignment Use the alignImage prop to control vertical alignment of the image within its container: - \"bottom\": Aligns the image to the bottom of its container - \"top\": Aligns the image to the top of its container Bleeding Effect The bleedImage prop creates a dramatic visual effect by extending the image beyond the normal container boundaries. When enabled: - The image extends to the right edge of the viewport - The image is automatically positioned after the content (using CSS order: 2) - On mobile devices (small screens), the bleeding effect is disabled and normal layout is restored - The content maintains its standard grid positioning while the image breaks out of the grid - Note: The bleeding effect only works with the default horizontal layout, not with the reverse variant Full Width Image The imageFullWidth prop makes the image span the complete width of its container, creating a bold visual impact. This feature: - Applies the fullwidth class to the image component - Is particularly effective when used with the vertical variant - Ensures the image takes up the maximum available space within its grid column - Works well for hero-style images that need to make a strong visual statement API Reference Props | Prop | Type | Default | Description | | ---------------- | ------------------------- | ------- | -------------------------------------------------------------------------------------------- | | children | React.ReactNode | - | Content to display in the banner | | image | string | - | URL of the background image to display | | alignImage | \"bottom\" \\| \"top\" | - | Aligns the image to the bottom or top of its container | | bleedImage | boolean | false | Extends the image beyond container to viewport edge | | imageFullWidth | boolean | false | Makes the image span the complete width of its container | | colorScheme | \"light\" \\| \"dark\" | - | Color scheme for the banner | | variant | \"vertical\" \\| \"reverse\" | - | Sets the layout variant. Vertical stacks content and image, reverse places image on the left | | className | string | - | Additional CSS classes |"
+    "content": "PromoBanner Promotional banner component designed to highlight special offers, services, or call-to-action messages with optional images and customizable styling. The component provides a flexible container that can display content alongside optional images in a responsive grid layout. Example <h2 className=\"h1 mb-medium\"> {Chcete skúsiť nezávislosť?} <span className=\"text-accent ml-small\">{\"Prima Voľba\"}</span> </h2> <p className=\"mb-large\"> {Vyskúšajte si, aké je to byť v najlepšej mobilnej sieti na Slovensku vďaka karte Prima Voľba.} </p> {\"Mám záujem\"} With Image PromoBanner supports background images to create more visually engaging promotional content. <h2 className=\"h1 mb-medium\"> {Chcete skúsiť nezávislosť? Prima Voľba} <span className=\"text-accent ml-small\">{\" Prima Voľba\"}</span> </h2> <p className=\"mb-large\"> {Vyskúšajte si, aké je to byť v najlepšej mobilnej sieti na Slovensku vďaka karte Prima Voľba.} </p> {\"Mám záujem\"} Image aligned to bottom <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Image aligned to top <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Flush item top padding on mobile Use flushTopSmDown when you need to remove only top padding of the content item on mobile (sm and smaller). <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Flush item bottom padding on mobile Use flushBottomSmDown when image is visually above the text on mobile and you want to remove the extra spacing under text. <p className=\"mb-none\">Microsoft Copilot</p> <h2 className=\"h1 mb-medium\">{Zjednodušte si prácu s AI asistentom}</h2> <p className=\"mb-none\"> {Ukážka použitia pre prípady, keď je na mobile obrázok navrchu a pod textom nechcete voľný priestor.} </p> Image with bleeding effect The bleedImage prop allows the image to extend beyond the container boundaries to the right edge of the viewport, creating a more dramatic visual effect. <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Prihláste sa a užívajte si výhody}</h2> <p className=\"mb-large\"> {Ste naším zákazníkom? Rozdeľte si až 1000 € z ceny telefónu na splátky bez navýšenia.} </p> {\"Prihlásiť sa\"} Reverse Variant The reverse variant changes the order of content and image, placing the image on the left side and content on the right side. This creates visual interest and can be used to break up monotonous layouts. <p className=\"mb-none\">Byť v Orangei sa oplatí</p> <h2 className=\"h1 mb-medium\">{Reverse Layout Example}</h2> <p className=\"mb-large\"> {The reverse variant places the image on the left and content on the right, creating a different visual flow that can help break up page layouts.} </p> {\"Learn More\"} Vertical Variant The vertical variant stacks the content and image vertically instead of horizontally. In this layout, both content and image span the full width (12 columns) and are arranged one above the other. <h2 className=\"h1 mb-medium\">{Vertical Layout Example}</h2> <p className=\"mb-large\"> {The vertical variant is perfect for narrow spaces or when you want a full-width content experience with stacked layout.} </p> {\"Learn More\"} Vertical with Full Width Image The imageFullWidth prop can be used with the vertical variant to make the image span the complete width of its container, creating a more immersive visual experience. <h2 className=\"h1 mb-medium\">{Full Width Image Example}</h2> <p className=\"mb-large\"> {When imageFullWidth is enabled, the image takes up the complete width of its container, creating a bold visual impact in the vertical layout.} </p> {\"Discover More\"} Usage PromoBanner is ideal for: - Highlighting special offers or promotions - Call-to-action sections on landing pages - Product or service announcements - Cross-selling and upselling opportunities - Feature announcements and product launches The component combines visual appeal with clear messaging to drive user engagement and conversions. Content Structure The PromoBanner component uses a children-based API, giving you complete control over the content structure. You can include any combination of: - Headings (h1, h2, h3, etc.) - Paragraphs - Buttons - Custom HTML elements - Other components Layout - Without image: Content spans 7/12 columns on desktop - With image: Content spans 6/12 columns, image spans 6/12 columns - With bleeding image: Image extends beyond the 6/12 column grid to the right edge of the viewport, while content remains in its 6/12 column space. The image appears after the content in the visual order. - Reverse variant: Image spans 6/12 columns on the left, content spans 6/12 columns on the right. The image appears before the content in both DOM order and visual order. - Vertical variant: Both content and image span full width (12/12 columns) and are stacked vertically - With imageFullWidth: When enabled, the image takes up the complete width of its container, particularly useful in vertical layouts for maximum visual impact - Mobile: Both content and image span full width (12/12 columns). Bleeding effect is disabled on small screens for better mobile experience. Image Alignment Use the alignImage prop to control vertical alignment of the image within its container: - \"bottom\": Aligns the image to the bottom of its container - \"top\": Aligns the image to the top of its container Bleeding Effect The bleedImage prop creates a dramatic visual effect by extending the image beyond the normal container boundaries. When enabled: - The image extends to the right edge of the viewport - The image is automatically positioned after the content (using CSS order: 2) - On mobile devices (small screens), the bleeding effect is disabled and normal layout is restored - The content maintains its standard grid positioning while the image breaks out of the grid - Note: The bleeding effect only works with the default horizontal layout, not with the reverse variant Full Width Image The imageFullWidth prop makes the image span the complete width of its container, creating a bold visual impact. This feature: - Applies the fullwidth class to the image component - Is particularly effective when used with the vertical variant - Ensures the image takes up the maximum available space within its grid column - Works well for hero-style images that need to make a strong visual statement API Reference Props | Prop | Type | Default | Description | | ------------------- | ------------------------- | ------- | -------------------------------------------------------------------------------------------- | | children | React.ReactNode | - | Content to display in the banner | | image | string | - | URL of the background image to display | | alignImage | \"bottom\" \\| \"top\" | - | Aligns the image to the bottom or top of its container | | flushTopSmDown | boolean | false | Removes top padding from promo item on sm and smaller breakpoints | | flushBottomSmDown | boolean | false | Removes bottom padding from promo item on sm and smaller breakpoints | | bleedImage | boolean | false | Extends the image beyond container to viewport edge | | imageFullWidth | boolean | false | Makes the image span the complete width of its container | | colorScheme | \"light\" \\| \"dark\" | - | Color scheme for the banner | | variant | \"vertical\" \\| \"reverse\" | - | Sets the layout variant. Vertical stacks content and image, reverse places image on the left | | className | string | - | Additional CSS classes |"
   },
   {
     "href": "/components/promotion-card",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "2.0.0-beta.30",
+  "version": "2.0.0-beta.32",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -53,7 +53,7 @@
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
-    "dompurify": "^3.3.1",
+    "dompurify": "^3.3.2",
     "html-react-parser": "^5.2.17",
     "jest-environment-jsdom": "^30.2.0",
     "lorem-ipsum": "^2.0.8",
@@ -71,7 +71,7 @@
     "rehype-slug": "^6.0.0",
     "remark-gemoji": "^8.0.0",
     "remark-gfm": "^4.0.1",
-    "swiper": "12.1.1",
+    "swiper": "12.1.2",
     "tabbable": "^6.4.0",
     "unescape-html": "^1.1.0",
     "wnumb": "^1.2.0"
@@ -81,20 +81,20 @@
     "@babel/preset-env": "^7.29.0",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
-    "@eslint/eslintrc": "3.3.3",
+    "@eslint/eslintrc": "3.3.5",
     "@rollup/plugin-alias": "6.0.0",
-    "@rollup/plugin-babel": "^6.1.0",
-    "@rollup/plugin-commonjs": "29.0.0",
+    "@rollup/plugin-babel": "7.0.0",
+    "@rollup/plugin-commonjs": "29.0.2",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@rollup/plugin-url": "^8.0.2",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "25.2.3",
+    "@types/node": "25.3.5",
     "@types/react": "19.2.14",
     "@types/react-dom": "19.2.3",
     "@types/wnumb": "^1.2.3",
@@ -103,15 +103,15 @@
     "eslint-config-next": "16.1.6",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-unused-imports": "^4.4.1",
-    "fs-extra": "^11.3.3",
-    "glob": "13.0.3",
-    "html-validate": "10.8.0",
+    "fs-extra": "^11.3.4",
+    "glob": "13.0.6",
+    "html-validate": "10.11.1",
     "husky": "^9.1.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "30.2.0",
     "jest-axe": "10.0.0",
     "jest-snapshot": "^30.2.0",
-    "lint-staged": "16.2.7",
+    "lint-staged": "16.3.2",
     "prettier": "^3.8.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.3.0",

package/src/components/Breadcrumbs/styles/mixins.scss

@@ -14,8 +14,13 @@
   background-color: var(--color-surface-primary);
   font-weight: bold;
   font-family: base.$font-family;
-  font-size: base.$font-size;
+  font-size: base.$font-size !important;
   line-height: base.$line-height;
+
+  ol {
+    font-size: inherit !important;
+    line-height: inherit !important;
+  }
 }
 
 @mixin container {