@mmb-digital/ds-lilly 1.0.124 → 1.0.125

package/components/Components/DataTable/DataTableDivider.js

@@ -1,2 +1,2 @@
-import t from"react";import"../../../utils/getDisplayName.js";import"../../../utils/getIntegerMask.js";import"../../../utils/isFilled.js";import"../../../utils/isNotFilled.js";import"../../../utils/isNotNilNorEmpty.js";import'./../../../ext/diacritic/diacritics.js';import{cx as e}from"../../../utils/classBinder.js";import'./../../../ext/text-mask-addons/dist/textMaskAddons.js';var i=function(i){var s=i.testId,r=i.theme;return t.createElement("tr",{"aria-hidden":"true","data-testid":s},t.createElement("td",{colSpan:2},t.createElement("div",{className:e("c-dataTableDivider__line",r)})))};export{i as DataTableDivider};
+import t from"react";import"../../../utils/getDisplayName.js";import"../../../utils/getIntegerMask.js";import"../../../utils/isFilled.js";import"../../../utils/isNotFilled.js";import"../../../utils/isNotNilNorEmpty.js";import'./../../../ext/diacritic/diacritics.js';import{cx as e}from"../../../utils/classBinder.js";import'./../../../ext/text-mask-addons/dist/textMaskAddons.js';var i=function(i){var a,s=i.testId,r=i.theme,d=i.variant,l=void 0===d?"transparent":d;return t.createElement("tr",{"aria-hidden":"true",className:e("c-dataTableDivider",(a={},a["c-dataTableDivider--".concat(l)]="transparent"!==l,a)),"data-testid":s},t.createElement("td",{colSpan:2},t.createElement("div",{className:e("c-dataTableDivider__line",r)})))};export{i as DataTableDivider};
 //# sourceMappingURL=DataTableDivider.js.map

package/components/Components/DataTable/DataTableDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableDivider.js","sources":["../../../../src/components/Components/DataTable/DataTableDivider.tsx"],"sourcesContent":[null],"names":["DataTableDivider","_a","testId","theme","React","createElement","colSpan","className","cx"],"mappings":"0YAIO,IAAMA,EAAmB,SAACC,OAAEC,EAAMD,EAAAC,OAAEC,EAAKF,EAAAE,MAC9C,OACEC,EAAAC,cAAA,KAAA,CAAA,cAAgB,OAAM,cAAcH,GAClCE,EAAIC,cAAA,KAAA,CAAAC,QAAS,GACXF,EAAAC,cAAA,MAAA,CAAKE,UAAWC,EAAG,2BAA4BL,MAIvD"}
+{"version":3,"file":"DataTableDivider.js","sources":["../../../../src/components/Components/DataTable/DataTableDivider.tsx"],"sourcesContent":[null],"names":["DataTableDivider","_a","testId","theme","_c","variant","React","className","cx","_b","concat","createElement","colSpan"],"mappings":"0YAQO,IAAMA,EAAmB,SAACC,SAAEC,EAAMD,EAAAC,OAAEC,EAAKF,EAAAE,MAAEC,YAAAC,OAAU,IAAAD,EAAA,cAAaA,EACvE,OACEE,oCACc,OACZC,UAAWC,EAAG,sBAAoBC,EAAA,CAAA,EAAIA,EAAC,uBAAuBC,OAAAL,IAAwB,gBAAZA,EAAyBI,kBACtFP,GAEbI,EAAIK,cAAA,KAAA,CAAAC,QAAS,GACXN,EAAAK,cAAA,MAAA,CAAKJ,UAAWC,EAAG,2BAA4BL,MAIvD"}

package/components/Components/DataTable/DataTableItem.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { ComponentPropsType } from '../../../utils';
+export type DataTableVariantType = 'default' | 'neutral' | 'brand' | 'promo' | 'transparent';
 export interface DataTableItemProps extends ComponentPropsType {
     /** Label displayed in the left column of the row. */
     label: ReactNode;
@@ -11,6 +12,10 @@ export interface DataTableItemProps extends ComponentPropsType {
     firstColumnSecondary?: boolean;
     /** Optional override for content bold styling. If undefined, inherits from DataTable. */
     isBold?: boolean;
+    /** Visual variant controlling row background, text color and divider color. */
+    variant?: DataTableVariantType;
+    /** If true, visual divider is displayed at the top of the row. */
+    hasDivider?: boolean;
 }
-export declare const DataTableItem: ({ children, firstColumnSecondary: firstColumnSecondaryProp, isBold: isBoldProp, label, perex, testId, theme }: DataTableItemProps) => JSX.Element;
+export declare const DataTableItem: ({ children, firstColumnSecondary: firstColumnSecondaryProp, hasDivider, isBold: isBoldProp, label, perex, testId, theme, variant }: DataTableItemProps) => JSX.Element;
 //# sourceMappingURL=DataTableItem.d.ts.map

package/components/Components/DataTable/DataTableItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Components/DataTable/DataTableItem.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,EAAE,kBAAkB,EAAM,MAAM,gBAAgB,CAAA;AAGvD,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,qDAAqD;IACrD,KAAK,EAAE,SAAS,CAAA;IAChB,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAA;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mGAAmG;IACnG,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,yFAAyF;IACzF,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,eAAO,MAAM,aAAa,kHAQvB,kBAAkB,KAAG,WAkCvB,CAAA"}
+{"version":3,"file":"DataTableItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Components/DataTable/DataTableItem.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,EAAE,kBAAkB,EAAM,MAAM,gBAAgB,CAAA;AAGvD,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,aAAa,CAAA;AAE5F,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,qDAAqD;IACrD,KAAK,EAAE,SAAS,CAAA;IAChB,wDAAwD;IACxD,QAAQ,EAAE,SAAS,CAAA;IACnB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mGAAmG;IACnG,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,yFAAyF;IACzF,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,+EAA+E;IAC/E,OAAO,CAAC,EAAE,oBAAoB,CAAA;IAC9B,kEAAkE;IAClE,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,aAAa,uIAUvB,kBAAkB,KAAG,WA0CvB,CAAA"}

package/components/Components/DataTable/DataTableItem.js

@@ -1,2 +1,2 @@
-import t from"react";import"../../../utils/getDisplayName.js";import"../../../utils/getIntegerMask.js";import"../../../utils/isFilled.js";import"../../../utils/isNotFilled.js";import"../../../utils/isNotNilNorEmpty.js";import'./../../../ext/diacritic/diacritics.js';import{cx as e}from"../../../utils/classBinder.js";import'./../../../ext/text-mask-addons/dist/textMaskAddons.js';import{useDataTableContext as a}from"./DataTable.js";var l=function(l){var s=l.children,i=l.firstColumnSecondary,o=l.isBold,r=l.label,d=l.perex,m=l.testId,n=l.theme,c=a(),_=c.disableStackingOnMobile,b=c.firstColumnSecondary,p=c.isBold,u=c.widerContent,I=null!=i?i:b,T=null!=o?o:p;return t.createElement("tr",{className:e(n),"data-testid":m},t.createElement("th",{className:e("c-dataTableItem__label",{"c-dataTableItem__label--tighter":u,"c-dataTableItem__label--noStack":_,"c-dataTableItem__label--secondary":I})},r),t.createElement("td",{className:e("c-dataTableItem__content",{"c-dataTableItem__content--wider":u,"c-dataTableItem__content--noStack":_,"c-dataTableItem__content--notBold":!T})},s,d&&t.createElement("div",{className:"c-dataTableItem__perex"},d)))};export{l as DataTableItem};
+import t from"react";import"../../../utils/getDisplayName.js";import"../../../utils/getIntegerMask.js";import"../../../utils/isFilled.js";import"../../../utils/isNotFilled.js";import"../../../utils/isNotNilNorEmpty.js";import'./../../../ext/diacritic/diacritics.js';import{cx as e}from"../../../utils/classBinder.js";import'./../../../ext/text-mask-addons/dist/textMaskAddons.js';import{useDataTableContext as a}from"./DataTable.js";var l=function(l){var i,s=l.children,r=l.firstColumnSecondary,d=l.hasDivider,o=void 0!==d&&d,n=l.isBold,m=l.label,c=l.perex,b=l.testId,_=l.theme,p=l.variant,u=void 0===p?"transparent":p,I=a(),T=I.disableStackingOnMobile,j=I.firstColumnSecondary,N=I.isBold,v=I.widerContent,f=null!=r?r:j,h=null!=n?n:N;return t.createElement("tr",{className:e("c-dataTableItem",(i={},i["c-dataTableItem--".concat(u)]="transparent"!==u,i),{"c-dataTableItem--hasDivider":o},_),"data-testid":b},t.createElement("th",{className:e("c-dataTableItem__label",{"c-dataTableItem__label--tighter":v,"c-dataTableItem__label--noStack":T,"c-dataTableItem__label--secondary":f})},m),t.createElement("td",{className:e("c-dataTableItem__content",{"c-dataTableItem__content--wider":v,"c-dataTableItem__content--noStack":T,"c-dataTableItem__content--notBold":!h})},s,c&&t.createElement("div",{className:"c-dataTableItem__perex"},c)))};export{l as DataTableItem};
 //# sourceMappingURL=DataTableItem.js.map

package/components/Components/DataTable/DataTableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableItem.js","sources":["../../../../src/components/Components/DataTable/DataTableItem.tsx"],"sourcesContent":[null],"names":["DataTableItem","_a","children","firstColumnSecondaryProp","isBoldProp","label","perex","testId","theme","_b","useDataTableContext","disableStackingOnMobile","firstColumnSecondaryFromContext","firstColumnSecondary","isBoldFromContext","isBold","widerContent","resolvedFirstColumnSecondary","resolvedIsBold","React","className","cx","createElement"],"mappings":"+bAkBO,IAAMA,EAAgB,SAACC,GAC5B,IAAAC,aACsBC,yBACdC,WACRC,EAAKJ,EAAAI,MACLC,EAAKL,EAAAK,MACLC,EAAMN,EAAAM,OACNC,EAAKP,EAAAO,MAECC,EAKFC,IAJFC,EAAuBF,EAAAE,wBACDC,EAA+BH,EAAAI,qBAC7CC,EAAiBL,EAAAM,OACzBC,iBAGIC,EAA+Bd,QAAAA,EAA4BS,EAC3DM,EAAiBd,QAAAA,EAAcU,EAErC,OACEK,sBAAIC,UAAWC,EAAGb,GAAM,cAAeD,GACrCY,EAAAG,cAAA,KAAA,CACEF,UAAWC,EAAG,yBAA0B,CACtC,kCAAmCL,EACnC,kCAAmCL,EACnC,oCAAqCM,KAGtCZ,GAEHc,EAAAG,cAAA,KAAA,CACEF,UAAWC,EAAG,2BAA4B,CACxC,kCAAmCL,EACnC,oCAAqCL,EACrC,qCAAsCO,KAGvChB,EACAI,GAASa,EAAKG,cAAA,MAAA,CAAAF,UAAU,0BAA0Bd,IAI3D"}
+{"version":3,"file":"DataTableItem.js","sources":["../../../../src/components/Components/DataTable/DataTableItem.tsx"],"sourcesContent":[null],"names":["DataTableItem","_a","children","firstColumnSecondaryProp","firstColumnSecondary","_c","hasDivider","isBoldProp","label","perex","testId","theme","_d","variant","_e","useDataTableContext","disableStackingOnMobile","firstColumnSecondaryFromContext","isBoldFromContext","isBold","widerContent","resolvedFirstColumnSecondary","resolvedIsBold","React","createElement","className","cx","_b","concat"],"mappings":"+bAwBO,IAAMA,EAAgB,SAACC,SAC5BC,EAAQD,EAAAC,SACcC,EAAwBF,EAAAG,qBAC9CC,EAAkBJ,EAAAK,WAAlBA,OAAU,IAAAD,GAAQA,EACVE,WACRC,EAAKP,EAAAO,MACLC,EAAKR,EAAAQ,MACLC,WACAC,EAAKV,EAAAU,MACLC,EAAuBX,EAAAY,QAAvBA,OAAO,IAAAD,EAAG,cAAaA,EAEjBE,EAKFC,IAJFC,EAAuBF,EAAAE,wBACDC,EAA+BH,EAAAV,qBAC7Cc,EAAiBJ,EAAAK,OACzBC,iBAGIC,EAA+BlB,QAAAA,EAA4Bc,EAC3DK,EAAiBf,QAAAA,EAAcW,EAErC,OACEK,EACEC,cAAA,KAAA,CAAAC,UAAWC,EACT,mBACEC,EAAA,GAAAA,EAAC,oBAAoBC,OAAAf,IAAwB,gBAAZA,EACnCc,GAAA,CAAE,8BAA+BrB,GACjCK,GACD,cACYD,GAEba,EAAAC,cAAA,KAAA,CACEC,UAAWC,EAAG,yBAA0B,CACtC,kCAAmCN,EACnC,kCAAmCJ,EACnC,oCAAqCK,KAGtCb,GAEHe,EAAAC,cAAA,KAAA,CACEC,UAAWC,EAAG,2BAA4B,CACxC,kCAAmCN,EACnC,oCAAqCJ,EACrC,qCAAsCM,KAGvCpB,EACAO,GAASc,EAAKC,cAAA,MAAA,CAAAC,UAAU,0BAA0BhB,IAI3D"}

package/ds-lilly.css

@@ -6689,11 +6689,40 @@ body.dark .c-logo__svg {
     right: 16px;
   }
 }
+.c-dataTableWrapper {
+  position: relative;
+  width: 100%;
+}
+.c-dataTableWrapper--small, .c-dataTableWrapper--medium, .c-dataTableWrapper--large {
+  border-radius: 13px;
+  overflow: hidden;
+}
+.c-dataTableWrapper--borderTransparent {
+  border: 1px solid transparent;
+}
+.c-dataTableWrapper--borderDefault {
+  border: 1px solid var(--bgNeutralSubtlest);
+}
+.c-dataTableWrapper--borderNeutral {
+  border: 1px solid var(--bgNeutralSubtlestHover);
+}
+.c-dataTableWrapper--borderBrand {
+  border: 1px solid var(--bgBrandBold);
+}
+.c-dataTableWrapper--borderPromo {
+  border: 1px solid var(--bgPromoBold);
+}
+
 .c-dataTable {
   width: 100%;
   table-layout: fixed;
+  border-spacing: 0;
+  border-collapse: separate;
+}
+.c-dataTable th,
+.c-dataTable td {
+  border: 0;
 }
-
 .c-dataTable--contentRightAligned .c-dataTableItem__content {
   text-align: right;
 }
@@ -6707,21 +6736,284 @@ body.dark .c-logo__svg {
     text-align: right;
   }
 }
+.c-dataTable--contentCenterAligned .c-dataTableItem__content {
+  text-align: center;
+}
+@media screen and (max-width: 799px) {
+  .c-dataTable--contentCenterAligned .c-dataTableItem__content {
+    text-align: left;
+  }
+}
+@media screen and (max-width: 799px) {
+  .c-dataTable--contentCenterAligned.c-dataTable--noStack .c-dataTableItem__content {
+    text-align: center;
+  }
+}
+.c-dataTable--gapSmall .c-dataTableItem__label,
+.c-dataTable--gapSmall .c-dataTableItem__content {
+  padding: var(--spaceXXXSmall) 0;
+}
+@media screen and (max-width: 799px) {
+  .c-dataTable--gapSmall:not(.c-dataTable--noStack) .c-dataTableItem:first-child .c-dataTableItem__content {
+    padding-top: var(--spaceXXXSmall);
+  }
+  .c-dataTable--gapSmall:not(.c-dataTable--noStack) .c-dataTableItem:last-child .c-dataTableItem__label {
+    padding-bottom: var(--spaceXXXSmall);
+  }
+}
+.c-dataTable--gapSmall .c-dataTableItem--hasDivider .c-dataTableItem__label,
+.c-dataTable--gapSmall .c-dataTableItem--hasDivider .c-dataTableItem__content {
+  padding-top: calc(var(--spaceXXXSmall) + 8px);
+}
+@media screen and (max-width: 799px) {
+  .c-dataTable--gapSmall .c-dataTableItem--hasDivider .c-dataTableItem__content {
+    padding-top: var(--spaceXXXSmall);
+  }
+}
+.c-dataTable--gapMedium .c-dataTableItem__label,
+.c-dataTable--gapMedium .c-dataTableItem__content {
+  padding: var(--spaceXSmall) 0;
+}
+@media screen and (max-width: 799px) {
+  .c-dataTable--gapMedium:not(.c-dataTable--noStack) .c-dataTableItem:first-child .c-dataTableItem__content {
+    padding-top: var(--spaceXSmall);
+  }
+  .c-dataTable--gapMedium:not(.c-dataTable--noStack) .c-dataTableItem:last-child .c-dataTableItem__label {
+    padding-bottom: var(--spaceXSmall);
+  }
+}
+.c-dataTable--gapMedium .c-dataTableItem--hasDivider .c-dataTableItem__label,
+.c-dataTable--gapMedium .c-dataTableItem--hasDivider .c-dataTableItem__content {
+  padding-top: calc(var(--spaceXSmall) + 8px);
+}
+@media screen and (max-width: 799px) {
+  .c-dataTable--gapMedium .c-dataTableItem--hasDivider .c-dataTableItem__content {
+    padding-top: var(--spaceXSmall);
+  }
+}
+.c-dataTable--gapLarge .c-dataTableItem__label,
+.c-dataTable--gapLarge .c-dataTableItem__content {
+  padding: var(--spaceSmall) 0;
+}
+@media screen and (max-width: 799px) {
+  .c-dataTable--gapLarge:not(.c-dataTable--noStack) .c-dataTableItem:first-child .c-dataTableItem__content {
+    padding-top: var(--spaceSmall);
+  }
+  .c-dataTable--gapLarge:not(.c-dataTable--noStack) .c-dataTableItem:last-child .c-dataTableItem__label {
+    padding-bottom: var(--spaceSmall);
+  }
+}
+.c-dataTable--gapLarge .c-dataTableItem--hasDivider .c-dataTableItem__label,
+.c-dataTable--gapLarge .c-dataTableItem--hasDivider .c-dataTableItem__content {
+  padding-top: calc(var(--spaceSmall) + 8px);
+}
+@media screen and (max-width: 799px) {
+  .c-dataTable--gapLarge .c-dataTableItem--hasDivider .c-dataTableItem__content {
+    padding-top: var(--spaceSmall);
+  }
+}
+.c-dataTable--gapXLarge .c-dataTableItem__label,
+.c-dataTable--gapXLarge .c-dataTableItem__content {
+  padding: var(--spaceMedium) 0;
+}
+@media screen and (max-width: 799px) {
+  .c-dataTable--gapXLarge:not(.c-dataTable--noStack) .c-dataTableItem:first-child .c-dataTableItem__content {
+    padding-top: var(--spaceMedium);
+  }
+  .c-dataTable--gapXLarge:not(.c-dataTable--noStack) .c-dataTableItem:last-child .c-dataTableItem__label {
+    padding-bottom: var(--spaceMedium);
+  }
+}
+.c-dataTable--gapXLarge .c-dataTableItem--hasDivider .c-dataTableItem__label,
+.c-dataTable--gapXLarge .c-dataTableItem--hasDivider .c-dataTableItem__content {
+  padding-top: calc(var(--spaceMedium) + 8px);
+}
+@media screen and (max-width: 799px) {
+  .c-dataTable--gapXLarge .c-dataTableItem--hasDivider .c-dataTableItem__content {
+    padding-top: var(--spaceMedium);
+  }
+}
+.c-dataTable--small, .c-dataTable--medium, .c-dataTable--large {
+  border-radius: var(--borderRadiusLarge);
+  overflow: hidden;
+}
+.c-dataTable--zero .c-dataTableItem__label,
+.c-dataTable--zero .c-dataTableItem__content,
+.c-dataTable--zero .c-dataTableDivider td {
+  padding-left: 0;
+  padding-right: 0;
+}
+.c-dataTable--small .c-dataTableItem__label {
+  padding-left: var(--paddingSmallCard);
+}
+.c-dataTable--small .c-dataTableItem__content {
+  padding-right: var(--paddingSmallCard);
+}
+.c-dataTable--small .c-dataTableDivider td {
+  padding-left: var(--paddingSmallCard);
+  padding-right: var(--paddingSmallCard);
+}
+.c-dataTable--small .c-dataTableItem:first-child .c-dataTableItem__label,
+.c-dataTable--small .c-dataTableItem:first-child .c-dataTableItem__content {
+  padding-top: var(--paddingSmallCard);
+}
+.c-dataTable--small .c-dataTableItem:last-child .c-dataTableItem__label,
+.c-dataTable--small .c-dataTableItem:last-child .c-dataTableItem__content {
+  padding-bottom: var(--paddingSmallCard);
+}
+.c-dataTable--small .c-dataTableItem--hasDivider .c-dataTableItem__label {
+  background-position: var(--paddingSmallCard) 4px;
+  background-size: calc(100% - var(--paddingSmallCard)) 1px;
+}
+.c-dataTable--small .c-dataTableItem--hasDivider .c-dataTableItem__content {
+  background-size: calc(100% - var(--paddingSmallCard)) 1px;
+}
+@media screen and (max-width: 799px) {
+  .c-dataTable--small:not(.c-dataTable--noStack) .c-dataTableItem__label,
+  .c-dataTable--small:not(.c-dataTable--noStack) .c-dataTableItem__content {
+    padding-left: var(--paddingSmallCard);
+    padding-right: var(--paddingSmallCard);
+  }
+  .c-dataTable--small:not(.c-dataTable--noStack) .c-dataTableItem--hasDivider .c-dataTableItem__label {
+    background-position: var(--paddingSmallCard) 4px;
+    background-size: calc(100% - var(--paddingSmallCard) * 2) 1px;
+  }
+  .c-dataTable--small:not(.c-dataTable--noStack) .c-dataTableItem--hasDivider .c-dataTableItem__content {
+    background-position: var(--paddingSmallCard) 4px;
+    background-size: calc(100% - var(--paddingSmallCard) * 2) 1px;
+  }
+}
+.c-dataTable--medium .c-dataTableItem__label {
+  padding-left: var(--paddingMediumCard);
+}
+.c-dataTable--medium .c-dataTableItem__content {
+  padding-right: var(--paddingMediumCard);
+}
+.c-dataTable--medium .c-dataTableDivider td {
+  padding-left: var(--paddingMediumCard);
+  padding-right: var(--paddingMediumCard);
+}
+.c-dataTable--medium .c-dataTableItem:first-child .c-dataTableItem__label,
+.c-dataTable--medium .c-dataTableItem:first-child .c-dataTableItem__content {
+  padding-top: var(--paddingMediumCard);
+}
+.c-dataTable--medium .c-dataTableItem:last-child .c-dataTableItem__label,
+.c-dataTable--medium .c-dataTableItem:last-child .c-dataTableItem__content {
+  padding-bottom: var(--paddingMediumCard);
+}
+.c-dataTable--medium .c-dataTableItem--hasDivider .c-dataTableItem__label {
+  background-position: var(--paddingMediumCard) 4px;
+  background-size: calc(100% - var(--paddingMediumCard)) 1px;
+}
+.c-dataTable--medium .c-dataTableItem--hasDivider .c-dataTableItem__content {
+  background-size: calc(100% - var(--paddingMediumCard)) 1px;
+}
+@media screen and (max-width: 799px) {
+  .c-dataTable--medium:not(.c-dataTable--noStack) .c-dataTableItem__label,
+  .c-dataTable--medium:not(.c-dataTable--noStack) .c-dataTableItem__content {
+    padding-left: var(--paddingMediumCard);
+    padding-right: var(--paddingMediumCard);
+  }
+  .c-dataTable--medium:not(.c-dataTable--noStack) .c-dataTableItem--hasDivider .c-dataTableItem__label {
+    background-position: var(--paddingMediumCard) 4px;
+    background-size: calc(100% - var(--paddingMediumCard) * 2) 1px;
+  }
+  .c-dataTable--medium:not(.c-dataTable--noStack) .c-dataTableItem--hasDivider .c-dataTableItem__content {
+    background-position: var(--paddingMediumCard) 4px;
+    background-size: calc(100% - var(--paddingMediumCard) * 2) 1px;
+  }
+}
+.c-dataTable--large .c-dataTableItem__label {
+  padding-left: var(--paddingLargeCard);
+}
+.c-dataTable--large .c-dataTableItem__content {
+  padding-right: var(--paddingLargeCard);
+}
+.c-dataTable--large .c-dataTableDivider td {
+  padding-left: var(--paddingLargeCard);
+  padding-right: var(--paddingLargeCard);
+}
+.c-dataTable--large .c-dataTableItem:first-child .c-dataTableItem__label,
+.c-dataTable--large .c-dataTableItem:first-child .c-dataTableItem__content {
+  padding-top: var(--paddingLargeCard);
+}
+.c-dataTable--large .c-dataTableItem:last-child .c-dataTableItem__label,
+.c-dataTable--large .c-dataTableItem:last-child .c-dataTableItem__content {
+  padding-bottom: var(--paddingLargeCard);
+}
+.c-dataTable--large .c-dataTableItem--hasDivider .c-dataTableItem__label {
+  background-position: var(--paddingLargeCard) 4px;
+  background-size: calc(100% - var(--paddingLargeCard)) 1px;
+}
+.c-dataTable--large .c-dataTableItem--hasDivider .c-dataTableItem__content {
+  background-size: calc(100% - var(--paddingLargeCard)) 1px;
+}
+@media screen and (max-width: 799px) {
+  .c-dataTable--large:not(.c-dataTable--noStack) .c-dataTableItem__label,
+  .c-dataTable--large:not(.c-dataTable--noStack) .c-dataTableItem__content {
+    padding-left: var(--paddingLargeCard);
+    padding-right: var(--paddingLargeCard);
+  }
+  .c-dataTable--large:not(.c-dataTable--noStack) .c-dataTableItem--hasDivider .c-dataTableItem__label {
+    background-position: var(--paddingLargeCard) 4px;
+    background-size: calc(100% - var(--paddingLargeCard) * 2) 1px;
+  }
+  .c-dataTable--large:not(.c-dataTable--noStack) .c-dataTableItem--hasDivider .c-dataTableItem__content {
+    background-position: var(--paddingLargeCard) 4px;
+    background-size: calc(100% - var(--paddingLargeCard) * 2) 1px;
+  }
+}
+@media screen and (max-width: 799px) {
+  .c-dataTable:not(.c-dataTable--noStack) {
+    display: block;
+    width: 100%;
+  }
+  .c-dataTable:not(.c-dataTable--noStack) tbody,
+  .c-dataTable:not(.c-dataTable--noStack) .c-dataTableItem {
+    display: block;
+    width: 100%;
+  }
+  .c-dataTable:not(.c-dataTable--noStack) .c-dataTableDivider {
+    display: block;
+    width: 100%;
+  }
+  .c-dataTable:not(.c-dataTable--noStack) .c-dataTableDivider td {
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+  }
+  .c-dataTable:not(.c-dataTable--noStack) .c-dataTableItem--default {
+    background-color: var(--bgNeutralSubtlest);
+  }
+  .c-dataTable:not(.c-dataTable--noStack) .c-dataTableItem--neutral {
+    background-color: var(--bgNeutralSubtlestHover);
+  }
+  .c-dataTable:not(.c-dataTable--noStack) .c-dataTableItem--brand {
+    background-color: var(--bgBrandBold);
+  }
+  .c-dataTable:not(.c-dataTable--noStack) .c-dataTableItem--promo {
+    background-color: var(--bgPromoBold);
+  }
+  .c-dataTable:not(.c-dataTable--noStack) .c-dataTableItem__label,
+  .c-dataTable:not(.c-dataTable--noStack) .c-dataTableItem__content {
+    display: block;
+    width: 100% !important;
+    box-sizing: border-box;
+    margin: 0;
+  }
+}
 
-.c-dataTableItem__label,
-.c-dataTableItem__content {
+.c-dataTableItem__label, .c-dataTableItem__content {
   padding: var(--spaceXSmall) 0;
   word-break: break-word;
   vertical-align: top;
 }
 @media screen and (max-width: 799px) {
-  .c-dataTableItem__label,
-  .c-dataTableItem__content {
+  .c-dataTableItem__label, .c-dataTableItem__content {
     padding: var(--spaceXXXSmall) 0;
     display: block;
   }
 }
-
 .c-dataTableItem__label {
   text-align: left;
   font-weight: normal;
@@ -6733,7 +7025,25 @@ body.dark .c-logo__svg {
     width: 100%;
   }
 }
-
+.c-dataTableItem__label--secondary {
+  color: var(--fgNeutralSubtle);
+}
+.c-dataTableItem__label--tighter {
+  width: 30%;
+}
+@media screen and (max-width: 799px) {
+  .c-dataTableItem__label--tighter {
+    width: 100%;
+  }
+}
+@media screen and (max-width: 799px) {
+  .c-dataTableItem__label--noStack {
+    display: table-cell;
+    width: auto;
+    padding: var(--spaceSmall) 0;
+    margin-bottom: 0;
+  }
+}
 .c-dataTableItem__content {
   text-align: left;
   position: relative;
@@ -6743,46 +7053,139 @@ body.dark .c-logo__svg {
 @media screen and (max-width: 799px) {
   .c-dataTableItem__content {
     width: 100%;
-    margin-bottom: var(--spaceSmall);
+    padding-bottom: var(--spaceSmall);
   }
 }
-.c-dataTableItem__content.c-dataTableItem__content--noStack {
+.c-dataTableItem__content--noStack {
   padding-left: var(--spaceXSmall);
 }
-
+@media screen and (max-width: 799px) {
+  .c-dataTableItem__content--noStack {
+    display: table-cell;
+    width: auto;
+    padding: var(--spaceSmall) 0;
+    margin-bottom: 0;
+  }
+}
 .c-dataTableItem__content--notBold {
   font-weight: var(--fontWeightNormal);
 }
-
-.c-dataTableItem__label--secondary {
-  color: var(--fgNeutralSubtle);
-}
-
-.c-dataTableItem__label--tighter {
-  width: 30%;
+.c-dataTableItem__content--wider {
+  width: 70%;
 }
 @media screen and (max-width: 799px) {
-  .c-dataTableItem__label--tighter {
+  .c-dataTableItem__content--wider {
     width: 100%;
   }
 }
-
-.c-dataTableItem__content--wider {
-  width: 70%;
+.c-dataTableItem__perex {
+  color: var(--fgNeutralSubtle);
+  font-size: var(--fontSizeXSmall);
+  line-height: var(--lineHeightXSmall);
+  font-weight: var(--fontWeightNormal);
+}
+.c-dataTableItem--default {
+  background-color: var(--bgNeutralSubtlest);
+}
+.c-dataTableItem--default .c-dataTableItem__label,
+.c-dataTableItem--default .c-dataTableItem__content {
+  background-color: var(--bgNeutralSubtlest);
+  box-shadow: 0 0 0 1px var(--bgNeutralSubtlest);
+}
+.c-dataTableItem--neutral {
+  background-color: var(--bgNeutralSubtlestHover);
+}
+.c-dataTableItem--neutral .c-dataTableItem__label,
+.c-dataTableItem--neutral .c-dataTableItem__content {
+  background-color: var(--bgNeutralSubtlestHover);
+  box-shadow: 0 0 0 1px var(--bgNeutralSubtlestHover);
+}
+.c-dataTableItem--brand {
+  background-color: var(--bgBrandBold);
+}
+.c-dataTableItem--brand .c-dataTableItem__label,
+.c-dataTableItem--brand .c-dataTableItem__content {
+  background-color: var(--bgBrandBold);
+  box-shadow: 0 0 0 1px var(--bgBrandBold);
+}
+.c-dataTableItem--promo {
+  background-color: var(--bgPromoBold);
+}
+.c-dataTableItem--promo .c-dataTableItem__label,
+.c-dataTableItem--promo .c-dataTableItem__content {
+  background-color: var(--bgPromoBold);
+  box-shadow: 0 0 0 1px var(--bgPromoBold);
+}
+.c-dataTableItem--default .c-dataTableItem__label,
+.c-dataTableItem--default .c-dataTableItem__content,
+.c-dataTableItem--default .c-dataTableItem__perex,
+.c-dataTableItem--default .c-dataTableItem__label *,
+.c-dataTableItem--default .c-dataTableItem__content *, .c-dataTableItem--neutral .c-dataTableItem__label,
+.c-dataTableItem--neutral .c-dataTableItem__content,
+.c-dataTableItem--neutral .c-dataTableItem__perex,
+.c-dataTableItem--neutral .c-dataTableItem__label *,
+.c-dataTableItem--neutral .c-dataTableItem__content * {
+  color: var(--fgNeutralDefault);
+}
+.c-dataTableItem--brand .c-dataTableItem__label,
+.c-dataTableItem--brand .c-dataTableItem__content,
+.c-dataTableItem--brand .c-dataTableItem__perex,
+.c-dataTableItem--brand .c-dataTableItem__label *,
+.c-dataTableItem--brand .c-dataTableItem__label > *:not(.c-dropdown):not([data-popper-reference-hidden]),
+.c-dataTableItem--brand .c-dataTableItem__content > *:not(.c-dropdown):not([data-popper-reference-hidden]), .c-dataTableItem--promo .c-dataTableItem__label,
+.c-dataTableItem--promo .c-dataTableItem__content,
+.c-dataTableItem--promo .c-dataTableItem__perex,
+.c-dataTableItem--promo .c-dataTableItem__label *,
+.c-dataTableItem--promo .c-dataTableItem__label > *:not(.c-dropdown):not([data-popper-reference-hidden]),
+.c-dataTableItem--promo .c-dataTableItem__content > *:not(.c-dropdown):not([data-popper-reference-hidden]) {
+  color: var(--fgInverseDefault);
+}
+.c-dataTableItem--brand .c-dataTableItem__label input,
+.c-dataTableItem--brand .c-dataTableItem__label select,
+.c-dataTableItem--brand .c-dataTableItem__label textarea,
+.c-dataTableItem--brand .c-dataTableItem__label [class*=f-control],
+.c-dataTableItem--brand .c-dataTableItem__label .c-btn:not(.c-btn--transparent):not(.c-btn--link):not(.c-btn--link),
+.c-dataTableItem--brand .c-dataTableItem__content input,
+.c-dataTableItem--brand .c-dataTableItem__content select,
+.c-dataTableItem--brand .c-dataTableItem__content textarea,
+.c-dataTableItem--brand .c-dataTableItem__content [class*=f-control],
+.c-dataTableItem--brand .c-dataTableItem__content .c-btn:not(.c-btn--transparent):not(.c-btn--link):not(.c-btn--link), .c-dataTableItem--promo .c-dataTableItem__label input,
+.c-dataTableItem--promo .c-dataTableItem__label select,
+.c-dataTableItem--promo .c-dataTableItem__label textarea,
+.c-dataTableItem--promo .c-dataTableItem__label [class*=f-control],
+.c-dataTableItem--promo .c-dataTableItem__label .c-btn:not(.c-btn--transparent):not(.c-btn--link):not(.c-btn--link),
+.c-dataTableItem--promo .c-dataTableItem__content input,
+.c-dataTableItem--promo .c-dataTableItem__content select,
+.c-dataTableItem--promo .c-dataTableItem__content textarea,
+.c-dataTableItem--promo .c-dataTableItem__content [class*=f-control],
+.c-dataTableItem--promo .c-dataTableItem__content .c-btn:not(.c-btn--transparent):not(.c-btn--link):not(.c-btn--link) {
+  color: var(--fgNeutralDefault) !important;
+}
+.c-dataTableItem--hasDivider .c-dataTableItem__label,
+.c-dataTableItem--hasDivider .c-dataTableItem__content {
+  padding-top: calc(var(--spaceXSmall) + 8px);
+  background-image: linear-gradient(var(--bgNeutralDefault), var(--bgNeutralDefault));
+  background-repeat: no-repeat;
+  background-position: left 0 top 4px;
+  background-size: 100% 1px;
+  position: relative;
+  z-index: 1;
+  box-shadow: none !important;
 }
 @media screen and (max-width: 799px) {
-  .c-dataTableItem__content--wider {
-    width: 100%;
+  .c-dataTableItem--hasDivider .c-dataTableItem__content {
+    background-image: none;
+    padding-top: var(--spaceXXXSmall);
   }
 }
-
+.c-dataTableItem--hasDivider.c-dataTableItem--brand .c-dataTableItem__label,
+.c-dataTableItem--hasDivider.c-dataTableItem--brand .c-dataTableItem__content, .c-dataTableItem--hasDivider.c-dataTableItem--promo .c-dataTableItem__label,
+.c-dataTableItem--hasDivider.c-dataTableItem--promo .c-dataTableItem__content {
+  background-image: linear-gradient(var(--fgInverseDefault), var(--fgInverseDefault));
+}
 @media screen and (max-width: 799px) {
-  .c-dataTableItem__label--noStack,
-  .c-dataTableItem__content--noStack {
-    display: table-cell;
-    width: auto;
-    padding: var(--spaceSmall) 0;
-    margin-bottom: 0;
+  .c-dataTableItem--hasDivider.c-dataTableItem--brand .c-dataTableItem__content, .c-dataTableItem--hasDivider.c-dataTableItem--promo .c-dataTableItem__content {
+    background-image: none;
   }
 }
 
@@ -6791,32 +7194,23 @@ body.dark .c-logo__svg {
   width: 100%;
   margin: var(--spaceXSmall) 0;
 }
-
-.c-dataTableItem__perex {
-  color: var(--fgNeutralSubtle);
-  font-size: var(--fontSizeXSmall);
-  line-height: var(--lineHeightXSmall);
-  font-weight: var(--fontWeightNormal);
+.c-dataTableDivider--default td {
+  background-color: var(--bgNeutralSubtlest);
 }
-
-.c-dataTable--gapSmall .c-dataTableItem__label,
-.c-dataTable--gapSmall .c-dataTableItem__content {
-  padding: var(--spaceXXXSmall) 0;
+.c-dataTableDivider--neutral td {
+  background-color: var(--bgNeutralSubtlestHover);
 }
-
-.c-dataTable--gapMedium .c-dataTableItem__label,
-.c-dataTable--gapMedium .c-dataTableItem__content {
-  padding: var(--spaceXSmall) 0;
+.c-dataTableDivider--brand td {
+  background-color: var(--bgBrandBold);
 }
-
-.c-dataTable--gapLarge .c-dataTableItem__label,
-.c-dataTable--gapLarge .c-dataTableItem__content {
-  padding: var(--spaceSmall) 0;
+.c-dataTableDivider--brand .c-dataTableDivider__line {
+  border-top-color: var(--fgInverseDefault);
 }
-
-.c-dataTable--gapXLarge .c-dataTableItem__label,
-.c-dataTable--gapXLarge .c-dataTableItem__content {
-  padding: var(--spaceMedium) 0;
+.c-dataTableDivider--promo td {
+  background-color: var(--bgPromoBold);
+}
+.c-dataTableDivider--promo .c-dataTableDivider__line {
+  border-top-color: var(--fgInverseDefault);
 }
 
 .notificationCard__grid {
@@ -10739,7 +11133,7 @@ body.dark .u-fg--fgWhiteDefault {
 /* Slider */
 .slick-loading .slick-list
 {
-    background: #fff url('assets/864e42530327fe6c07fa.gif') center center no-repeat;
+    background: #fff url('assets/4b0a42440d9fe1cb1267.gif') center center no-repeat;
 }
 
 /* Icons */
@@ -10749,8 +11143,8 @@ body.dark .u-fg--fgWhiteDefault {
     font-weight: normal;
     font-style: normal;
 
-    src: url('assets/f6d9bb5349b8a755eb13.eot');
-    src: url('assets/c21807179b52c2bbc9ad.eot') format('embedded-opentype'), url('assets/2bbfc71d495737d0866e.woff') format('woff'), url('assets/90814fb8cd2747a50339.ttf') format('truetype'), url('assets/a07a498f2bfc5334c403.svg') format('svg');
+    src: url('assets/b528bfa936768255e211.eot');
+    src: url('assets/734bd1ff8f2a4cfe8084.eot') format('embedded-opentype'), url('assets/ddfc234b625bb1f677be.woff') format('woff'), url('assets/89666f6751cc1b796d4a.ttf') format('truetype'), url('assets/7373244c95816ebb6f73.svg') format('svg');
 }
 /* Arrows */
 .slick-prev,

package/package.json

@@ -3,7 +3,7 @@
   "module": "./index.js",
   "typings": "./index.d.ts",
   "name": "@mmb-digital/ds-lilly",
-  "version": "1.0.124",
+  "version": "1.0.125",
   "description": "MMB LILLY design system",
   "license": "UNLICENSED",
   "sideEffects": [