@digital-ai/dot-components 2.18.1 → 2.18.2

package/index.esm.js

@@ -4315,6 +4315,7 @@ const DotAppToolbar = ({
         }, void 0)
       }), void 0), jsx(StyledMainMenu, Object.assign({
         anchor: "left",
+        ariaLabel: "main menu navigation",
         className: mainMenuClasses,
         "data-testid": "main-menu",
         onClose: () => updateMenuOpen(false),
@@ -6484,7 +6485,6 @@ function DotRadioButton({
   };
   // a11y: role doesn't need to be specified because it is done so automatically by the MUI component
   const radioControl = jsx(StyledRadioButton, {
-    "aria-checked": checked,
     checked: checked,
     classes: {
       root: rootClassName$t
@@ -7521,6 +7521,7 @@ const DotInlineEdit = ({
     }, void 0);
   };
   return jsx(StyledInlineEdit, Object.assign({
+    "aria-expanded": editing ? true : false,
     "aria-label": ariaLabel,
     className: rootClasses,
     "data-testid": dataTestId,
@@ -7962,7 +7963,7 @@ const StyledStepper = styled.div.withConfig({
   componentId: "sc-1qka0yq-0"
 })(["", ""], ({
   theme
-}) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row;}&.right{flex-direction:row-reverse;}.", "{padding:", ";&.MuiStepper-horizontal{padding:0;display:flex;flex-direction:column;}.MuiStep-root{width:315px;.dot-icon{display:flex;background:", ";border-radius:50%;color:", ";height:28px;width:28px;}.dot-typography{color:", ";}.MuiStepContent-root{border-left-color:", ";}&.MuiStep-horizontal{padding:", ";.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}.dot-typography{color:", ";}.horizontal-step-description{color:", ";}&:hover{cursor:pointer;}&.completed{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.active{background:", ";}&.error{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.in-progress{.dot-avatar i:before{color:", ";}}}&.MuiStep-vertical{&.completed{.dot-typography,.dot-icon{color:", ";}}&.active{.dot-icon{background:", ";color:", ";}.step-label.dot-typography{color:", ";}.dot-typography{color:", ";}}&.error{.dot-typography{color:", ";}.dot-icon{background:", ";border:1px solid ", ";color:", ";}}}&.disabled{.dot-icon{color:", ";}.dot-typography{color:", ";}}&:last-of-type .MuiStepContent-root{border-left-color:transparent;}}}.", "{width:100%;.step-content-container{padding:", ";}}}"], rootClassName$k, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3)));
+}) => css(["&.", "{display:flex;align-items:flex-start;padding:0;width:100%;&.left{flex-direction:row;}&.right{flex-direction:row-reverse;}.", "{padding:", ";&.MuiStepper-horizontal{padding:0;display:flex;flex-direction:column;}.MuiStep-root{width:315px;.dot-icon{display:flex;background:", ";border-radius:50%;color:", ";height:28px;width:28px;}.dot-typography{color:", ";}.MuiStepContent-root{border-left-color:", ";}&.MuiStep-horizontal{padding:", ";.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}.dot-typography{color:", ";}.horizontal-step-description{color:", ";}&:hover{cursor:pointer;}&.completed{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.active{background:", ";}&.error{.dot-avatar i:before{color:", ";}.dot-avatar,.dot-icon{background:", ";}}&.in-progress{.dot-avatar i:before{color:", ";}}}&.MuiStep-vertical{&.completed{.dot-typography,.dot-icon{color:", ";}}&.active{.dot-icon{background:", ";color:", ";}.step-label.dot-typography{color:", ";}.dot-typography{color:", ";}}&.inactive .step-label.dot-typography{color:", ";}&.error{.dot-typography{color:", ";}.dot-icon{background:", ";border:1px solid ", ";color:", ";}}}&.disabled{.dot-icon{color:", ";}.dot-typography{color:", ";}}&:last-of-type .MuiStepContent-root{border-left-color:transparent;}}}.", "{width:100%;.step-content-container{padding:", ";}}}"], rootClassName$k, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.layer.n400, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3)));
 const ScrollbarContainer = styled.div.withConfig({
   displayName: "Stepperstyles__ScrollbarContainer",
   componentId: "sc-1qka0yq-1"
@@ -8086,7 +8087,7 @@ const DotStepper = ({
       stepIcon = isHorizontal ? 'circle' : 'edit';
     }
     return isHorizontal ? jsx(DotAvatar, {
-      alt: iconId,
+      alt: iconId || stepIcon,
       iconId: stepIcon,
       type: "icon"
     }, void 0) : jsx(DotIcon, {
@@ -8186,8 +8187,9 @@ const DotStepper = ({
     className: rootClasses
   }, {
     children: [jsx(ScrollbarContainer, Object.assign({
+      className: _stepsPosition,
       offset: _offset,
-      className: _stepsPosition
+      tabIndex: 0
     }, {
       children: jsx(Stepper, Object.assign({
         activeStep: currentStep,
@@ -8200,7 +8202,7 @@ const DotStepper = ({
           const isActive = currentStep === step.id;
           // TODO: use useStylesWithRootClass here
           const stepClasses = () => {
-            return [step.className, isActive ? 'active' : '', step.completed ? 'completed' : '', step.disabled ? 'disabled' : '', step.error ? 'error' : '', step.inProgress ? 'in-progress' : ''].concat().join(' ').trim();
+            return [step.className, isActive ? 'active' : 'inactive', step.completed ? 'completed' : '', step.disabled ? 'disabled' : '', step.error ? 'error' : '', step.inProgress ? 'in-progress' : ''].concat().join(' ').trim();
           };
           const getContent = () => {
             return isString$1(step.description) ? jsx(StepDescription, Object.assign({
@@ -8981,7 +8983,9 @@ const DotHeaderRow = ({
         root: 'dot-tr'
       }
     }, {
-      children: [multiSelectHeader && renderMultiSelectCell(), collapsibleTableOptions && jsx(TableCell, {}, void 0), columns.map(cell => {
+      children: [multiSelectHeader && renderMultiSelectCell(), collapsibleTableOptions && jsx(TableCell, {
+        "aria-hidden": "true"
+      }, void 0), columns.map(cell => {
         return jsx(DotHeaderCell, {
           align: cell.align,
           createSortHandler: createSortHandler,

package/index.umd.js

@@ -4759,6 +4759,7 @@
             }, void 0)
           }), void 0), jsxRuntime.jsx(StyledMainMenu, __assign({
             anchor: "left",
+            ariaLabel: "main menu navigation",
             className: mainMenuClasses,
             "data-testid": "main-menu",
             onClose: function () {
@@ -7064,7 +7065,6 @@
       };
       // a11y: role doesn't need to be specified because it is done so automatically by the MUI component
       var radioControl = jsxRuntime.jsx(StyledRadioButton, {
-        "aria-checked": checked,
         checked: checked,
         classes: {
           root: rootClassName$t
@@ -8165,6 +8165,7 @@
         }, void 0);
       };
       return jsxRuntime.jsx(StyledInlineEdit, __assign({
+        "aria-expanded": editing ? true : false,
         "aria-label": ariaLabel,
         className: rootClasses,
         "data-testid": dataTestId,
@@ -8660,7 +8661,7 @@
       componentId: "sc-1qka0yq-0"
     })(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
       var theme = _a.theme;
-      return styled.css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n    &.", " {\n      display: flex;\n      align-items: flex-start;\n      padding: 0;\n      width: 100%;\n\n      &.left {\n        flex-direction: row;\n      }\n\n      &.right {\n        flex-direction: row-reverse;\n      }\n\n      .", " {\n        padding: ", ";\n\n        &.MuiStepper-horizontal {\n          padding: 0;\n          display: flex;\n          flex-direction: column;\n        }\n\n        .MuiStep-root {\n          width: 315px;\n\n          .dot-icon {\n            display: flex;\n            background: ", ";\n            border-radius: 50%;\n            color: ", ";\n            height: 28px;\n            width: 28px;\n          }\n\n          .dot-typography {\n            color: ", ";\n          }\n\n          .MuiStepContent-root {\n            border-left-color: ", ";\n          }\n\n          &.MuiStep-horizontal {\n            padding: ", ";\n\n            .dot-avatar i:before {\n              color: ", ";\n            }\n            .dot-avatar,\n            .dot-icon {\n              background: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n            .horizontal-step-description {\n              color: ", ";\n            }\n\n            &:hover {\n              cursor: pointer;\n            }\n\n            &.completed {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.active {\n              background: ", ";\n            }\n\n            &.error {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.in-progress {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n            }\n          }\n\n          &.MuiStep-vertical {\n            &.completed {\n              .dot-typography,\n              .dot-icon {\n                color: ", ";\n              }\n            }\n\n            &.active {\n              .dot-icon {\n                background: ", ";\n                color: ", ";\n              }\n              .step-label.dot-typography {\n                color: ", ";\n              }\n              .dot-typography {\n                color: ", ";\n              }\n            }\n\n            &.error {\n              .dot-typography {\n                color: ", ";\n              }\n\n              .dot-icon {\n                background: ", ";\n                border: 1px solid ", ";\n                color: ", ";\n              }\n            }\n          }\n\n          &.disabled {\n            .dot-icon {\n              color: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n          }\n\n          &:last-of-type .MuiStepContent-root {\n            border-left-color: transparent;\n          }\n        }\n      }\n\n      .", " {\n        width: 100%;\n\n        .step-content-container {\n          padding: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      display: flex;\n      align-items: flex-start;\n      padding: 0;\n      width: 100%;\n\n      &.left {\n        flex-direction: row;\n      }\n\n      &.right {\n        flex-direction: row-reverse;\n      }\n\n      .", " {\n        padding: ", ";\n\n        &.MuiStepper-horizontal {\n          padding: 0;\n          display: flex;\n          flex-direction: column;\n        }\n\n        .MuiStep-root {\n          width: 315px;\n\n          .dot-icon {\n            display: flex;\n            background: ", ";\n            border-radius: 50%;\n            color: ", ";\n            height: 28px;\n            width: 28px;\n          }\n\n          .dot-typography {\n            color: ", ";\n          }\n\n          .MuiStepContent-root {\n            border-left-color: ", ";\n          }\n\n          &.MuiStep-horizontal {\n            padding: ", ";\n\n            .dot-avatar i:before {\n              color: ", ";\n            }\n            .dot-avatar,\n            .dot-icon {\n              background: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n            .horizontal-step-description {\n              color: ", ";\n            }\n\n            &:hover {\n              cursor: pointer;\n            }\n\n            &.completed {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.active {\n              background: ", ";\n            }\n\n            &.error {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.in-progress {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n            }\n          }\n\n          &.MuiStep-vertical {\n            &.completed {\n              .dot-typography,\n              .dot-icon {\n                color: ", ";\n              }\n            }\n\n            &.active {\n              .dot-icon {\n                background: ", ";\n                color: ", ";\n              }\n              .step-label.dot-typography {\n                color: ", ";\n              }\n              .dot-typography {\n                color: ", ";\n              }\n            }\n\n            &.error {\n              .dot-typography {\n                color: ", ";\n              }\n\n              .dot-icon {\n                background: ", ";\n                border: 1px solid ", ";\n                color: ", ";\n              }\n            }\n          }\n\n          &.disabled {\n            .dot-icon {\n              color: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n          }\n\n          &:last-of-type .MuiStepContent-root {\n            border-left-color: transparent;\n          }\n        }\n      }\n\n      .", " {\n        width: 100%;\n\n        .step-content-container {\n          padding: ", ";\n        }\n      }\n    }\n  "])), rootClassName$k, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3));
+      return styled.css(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n    &.", " {\n      display: flex;\n      align-items: flex-start;\n      padding: 0;\n      width: 100%;\n\n      &.left {\n        flex-direction: row;\n      }\n\n      &.right {\n        flex-direction: row-reverse;\n      }\n\n      .", " {\n        padding: ", ";\n\n        &.MuiStepper-horizontal {\n          padding: 0;\n          display: flex;\n          flex-direction: column;\n        }\n\n        .MuiStep-root {\n          width: 315px;\n\n          .dot-icon {\n            display: flex;\n            background: ", ";\n            border-radius: 50%;\n            color: ", ";\n            height: 28px;\n            width: 28px;\n          }\n\n          .dot-typography {\n            color: ", ";\n          }\n\n          .MuiStepContent-root {\n            border-left-color: ", ";\n          }\n\n          &.MuiStep-horizontal {\n            padding: ", ";\n\n            .dot-avatar i:before {\n              color: ", ";\n            }\n            .dot-avatar,\n            .dot-icon {\n              background: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n            .horizontal-step-description {\n              color: ", ";\n            }\n\n            &:hover {\n              cursor: pointer;\n            }\n\n            &.completed {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.active {\n              background: ", ";\n            }\n\n            &.error {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.in-progress {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n            }\n          }\n\n          &.MuiStep-vertical {\n            &.completed {\n              .dot-typography,\n              .dot-icon {\n                color: ", ";\n              }\n            }\n\n            &.active {\n              .dot-icon {\n                background: ", ";\n                color: ", ";\n              }\n              .step-label.dot-typography {\n                color: ", ";\n              }\n              .dot-typography {\n                color: ", ";\n              }\n            }\n\n            &.inactive .step-label.dot-typography {\n              color: ", ";\n            }\n\n            &.error {\n              .dot-typography {\n                color: ", ";\n              }\n\n              .dot-icon {\n                background: ", ";\n                border: 1px solid ", ";\n                color: ", ";\n              }\n            }\n          }\n\n          &.disabled {\n            .dot-icon {\n              color: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n          }\n\n          &:last-of-type .MuiStepContent-root {\n            border-left-color: transparent;\n          }\n        }\n      }\n\n      .", " {\n        width: 100%;\n\n        .step-content-container {\n          padding: ", ";\n        }\n      }\n    }\n  "], ["\n    &.", " {\n      display: flex;\n      align-items: flex-start;\n      padding: 0;\n      width: 100%;\n\n      &.left {\n        flex-direction: row;\n      }\n\n      &.right {\n        flex-direction: row-reverse;\n      }\n\n      .", " {\n        padding: ", ";\n\n        &.MuiStepper-horizontal {\n          padding: 0;\n          display: flex;\n          flex-direction: column;\n        }\n\n        .MuiStep-root {\n          width: 315px;\n\n          .dot-icon {\n            display: flex;\n            background: ", ";\n            border-radius: 50%;\n            color: ", ";\n            height: 28px;\n            width: 28px;\n          }\n\n          .dot-typography {\n            color: ", ";\n          }\n\n          .MuiStepContent-root {\n            border-left-color: ", ";\n          }\n\n          &.MuiStep-horizontal {\n            padding: ", ";\n\n            .dot-avatar i:before {\n              color: ", ";\n            }\n            .dot-avatar,\n            .dot-icon {\n              background: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n            .horizontal-step-description {\n              color: ", ";\n            }\n\n            &:hover {\n              cursor: pointer;\n            }\n\n            &.completed {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.active {\n              background: ", ";\n            }\n\n            &.error {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n              .dot-avatar,\n              .dot-icon {\n                background: ", ";\n              }\n            }\n\n            &.in-progress {\n              .dot-avatar i:before {\n                color: ", ";\n              }\n            }\n          }\n\n          &.MuiStep-vertical {\n            &.completed {\n              .dot-typography,\n              .dot-icon {\n                color: ", ";\n              }\n            }\n\n            &.active {\n              .dot-icon {\n                background: ", ";\n                color: ", ";\n              }\n              .step-label.dot-typography {\n                color: ", ";\n              }\n              .dot-typography {\n                color: ", ";\n              }\n            }\n\n            &.inactive .step-label.dot-typography {\n              color: ", ";\n            }\n\n            &.error {\n              .dot-typography {\n                color: ", ";\n              }\n\n              .dot-icon {\n                background: ", ";\n                border: 1px solid ", ";\n                color: ", ";\n              }\n            }\n          }\n\n          &.disabled {\n            .dot-icon {\n              color: ", ";\n            }\n            .dot-typography {\n              color: ", ";\n            }\n          }\n\n          &:last-of-type .MuiStepContent-root {\n            border-left-color: transparent;\n          }\n        }\n      }\n\n      .", " {\n        width: 100%;\n\n        .step-content-container {\n          padding: ", ";\n        }\n      }\n    }\n  "])), rootClassName$k, stepListClassName, theme.spacing(3), theme.palette.primary['50'], theme.palette.primary['50'], theme.palette.layer.n300, theme.palette.layer.n300, theme.spacing(1), theme.palette.layer.n300, theme.palette.layer.n100, theme.palette.layer.n500, theme.palette.layer.n400, theme.palette.secondary['500'], theme.palette.secondary['50'], theme.palette.layer['n50'], theme.palette.error['500'], theme.palette.error['50'], theme.palette.primary['400'], theme.palette.layer.n700, theme.palette.primary['400'], theme.palette.layer.n0, theme.palette.primary['500'], theme.palette.layer.n700, theme.palette.layer.n400, theme.palette.error.main, theme.palette.layer.n0, theme.palette.error.main, theme.palette.error.main, theme.palette.primary['50'], theme.palette.layer.n300, contentClassName, theme.spacing(3, 3, 2, 3));
     });
     var ScrollbarContainer = styled__default["default"].div.withConfig({
       displayName: "Stepperstyles__ScrollbarContainer",
@@ -8807,7 +8808,7 @@
           stepIcon = isHorizontal ? 'circle' : 'edit';
         }
         return isHorizontal ? jsxRuntime.jsx(DotAvatar, {
-          alt: iconId,
+          alt: iconId || stepIcon,
           iconId: stepIcon,
           type: "icon"
         }, void 0) : jsxRuntime.jsx(DotIcon, {
@@ -8913,8 +8914,9 @@
         className: rootClasses
       }, {
         children: [jsxRuntime.jsx(ScrollbarContainer, __assign({
+          className: stepsPosition,
           offset: offset,
-          className: stepsPosition
+          tabIndex: 0
         }, {
           children: jsxRuntime.jsx(material.Stepper, __assign({
             activeStep: currentStep,
@@ -8927,7 +8929,7 @@
               var isActive = currentStep === step.id;
               // TODO: use useStylesWithRootClass here
               var stepClasses = function stepClasses() {
-                return [step.className, isActive ? 'active' : '', step.completed ? 'completed' : '', step.disabled ? 'disabled' : '', step.error ? 'error' : '', step.inProgress ? 'in-progress' : ''].concat().join(' ').trim();
+                return [step.className, isActive ? 'active' : 'inactive', step.completed ? 'completed' : '', step.disabled ? 'disabled' : '', step.error ? 'error' : '', step.inProgress ? 'in-progress' : ''].concat().join(' ').trim();
               };
               var getContent = function getContent() {
                 return isString$1(step.description) ? jsxRuntime.jsx(StepDescription, __assign({
@@ -9753,7 +9755,9 @@
             root: 'dot-tr'
           }
         }, {
-          children: [multiSelectHeader && renderMultiSelectCell(), collapsibleTableOptions && jsxRuntime.jsx(material.TableCell, {}, void 0), columns.map(function (cell) {
+          children: [multiSelectHeader && renderMultiSelectCell(), collapsibleTableOptions && jsxRuntime.jsx(material.TableCell, {
+            "aria-hidden": "true"
+          }, void 0), columns.map(function (cell) {
             return jsxRuntime.jsx(DotHeaderCell, {
               align: cell.align,
               createSortHandler: createSortHandler,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-components",
-  "version": "2.18.1",
+  "version": "2.18.2",
   "private": false,
   "license": "SEE LICENSE IN <LICENSE.md>",
   "contributors": [
@@ -22,6 +22,22 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "files": [
+    "**/*.styles.{js,jsx,ts,tsx}",
+    "**/*.{js,jsx,ts,tsx,svg}",
+    "!**/testing-utils/**",
+    "!typings/tests.d.ts",
+    "!**/*.stories.{js,jsx,ts,tsx}",
+    "!**/*.stories.*.{js,jsx,ts,tsx}",
+    "!**/*.spec.{js,jsx,ts,tsx}",
+    "!**/*.data.{js,jsx,ts,tsx}",
+    "!**/test_logo.svg",
+    "**/demo-*.svg",
+    "!.storybook/**",
+    "!jest.config.js",
+    "!rollup.config.js",
+    "!**/demo-*.svg"
+  ],
   "author": "Matt Haff",
   "dependencies": {
     "@digital-ai/dot-icons": "latest",