From fe2628a05aa244d82b93e632ffe521f90b7d29f5 Mon Sep 17 00:00:00 2001
From: katherine szelag <katherine.szelag@mail.utoronto.ca>
Date: Wed, 29 Jul 2020 18:03:12 -0400
Subject: [PATCH] fix(community-quiet-button): addresses issue 362, followup

---
 .all-contributorsrc                           |   9 +
 README.md                                     |   2 +-
 packages/QuietButton/QuietButton.jsx          |  75 ++++--
 .../__snapshots__/QuietButton.spec.jsx.snap   | 221 +++++++++++++-----
 packages/QuietButton/package.json             |   3 +
 5 files changed, 226 insertions(+), 84 deletions(-)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 2c33aea40..6f96a1aa0 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -248,6 +248,15 @@
       "contributions": [
         "tds"
       ]
+    },
+    {
+      "login": "ashwanitelus",
+      "name": "ashwanitelus",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/63233715?v=4",
+      "profile": "https://github.com/ashwanitelus",
+      "contributions": [
+        "tds"
+      ]
     }
   ]
 }
diff --git a/README.md b/README.md
index 83289955c..4dedc6a9f 100644
--- a/README.md
+++ b/README.md
@@ -68,7 +68,7 @@ To learn how to make contributions to TDS Community, See the [contributing guide
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars3.githubusercontent.com/u/42220619?v=4" width="100px;"/><br /><sub><b>Christina L.</b></sub>](https://github.com/Christina-Lo)<br />[](#tds-Christina-Lo "") | [<img src="https://avatars0.githubusercontent.com/u/931411?v=4" width="100px;"/><br /><sub><b>Andrew Lam</b></sub>](https://github.com/Andrew-K-Lam)<br />[](#tds-Andrew-K-Lam "") | [<img src="https://avatars0.githubusercontent.com/u/1036187?v=4" width="100px;"/><br /><sub><b>Jordan Raffoul</b></sub>](http://jordanraffoul.com)<br />[](#tds-jraff "") | [<img src="https://avatars2.githubusercontent.com/u/22725151?v=4" width="100px;"/><br /><sub><b>Nicholas Mak</b></sub>](https://github.com/nicmak)<br />[](#tds-nicmak "") | [<img src="https://avatars1.githubusercontent.com/in/2740?v=4" width="100px;"/><br /><sub><b>renovate[bot]</b></sub>](https://github.com/apps/renovate)<br />[](#tds-renovate[bot] "") | [<img src="https://avatars1.githubusercontent.com/u/3803746?v=4" width="100px;"/><br /><sub><b>Mike Bunce</b></sub>](https://github.com/sketchidea)<br />[](#tds-sketchidea "") | [<img src="https://avatars2.githubusercontent.com/u/2739819?v=4" width="100px;"/><br /><sub><b>Ani</b></sub>](https://github.com/simpleimpulse)<br />[](#tds-simpleimpulse "") |
 | [<img src="https://avatars0.githubusercontent.com/u/1015398?v=4" width="100px;"/><br /><sub><b>Samantha Vale</b></sub>](https://github.com/karlasamantha)<br />[](#tds-karlasamantha "") | [<img src="https://avatars0.githubusercontent.com/u/10473576?v=4" width="100px;"/><br /><sub><b>Tyler Dewald</b></sub>](https://github.com/DewaldoDev)<br />[](#tds-DewaldoDev "") | [<img src="https://avatars1.githubusercontent.com/u/3495961?v=4" width="100px;"/><br /><sub><b>Varun Jain</b></sub>](https://github.com/varunj90)<br />[](#tds-varunj90 "") | [<img src="https://avatars0.githubusercontent.com/u/5270458?v=4" width="100px;"/><br /><sub><b>abdul khan</b></sub>](https://github.com/invalidred)<br />[](#tds-invalidred "") | [<img src="https://avatars3.githubusercontent.com/u/4324431?v=4" width="100px;"/><br /><sub><b>Nate X</b></sub>](https://github.com/nateriesling)<br />[](#tds-nateriesling "") | [<img src="https://avatars1.githubusercontent.com/u/3803746?v=4" width="100px;"/><br /><sub><b>Mike Bunce</b></sub>](https://github.com/mike-bunce)<br />[](#tds-mike-bunce "") | [<img src="https://avatars3.githubusercontent.com/u/21316148?v=4" width="100px;"/><br /><sub><b>Donna Vitan</b></sub>](http://donnavitan.com)<br />[](#tds-donnavitan "") |
-| [<img src="https://avatars1.githubusercontent.com/u/18021992?v=4" width="100px;"/><br /><sub><b>harmeetsaimbhi</b></sub>](https://github.com/harmeetsaimbhi)<br />[](#tds-harmeetsaimbhi "") | [<img src="https://avatars2.githubusercontent.com/u/1115?v=4" width="100px;"/><br /><sub><b>Fabio Neves</b></sub>](https://github.com/fzero)<br />[](#tds-fzero "") | [<img src="https://avatars1.githubusercontent.com/u/49662501?v=4" width="100px;"/><br /><sub><b>Edison Li</b></sub>](https://ca.linkedin.com/in/edison-li)<br />[](#tds-zyl-edison-telus "") | [<img src="https://avatars1.githubusercontent.com/u/9220735?v=4" width="100px;"/><br /><sub><b>Michelle Linley</b></sub>](https://github.com/meeschka)<br />[](#tds-meeschka "") | [<img src="https://avatars3.githubusercontent.com/u/30445300?v=4" width="100px;"/><br /><sub><b>Jeffrey Chang</b></sub>](https://github.com/Jeffrey-Chang)<br />[](#tds-Jeffrey-Chang "") |
+| [<img src="https://avatars1.githubusercontent.com/u/18021992?v=4" width="100px;"/><br /><sub><b>harmeetsaimbhi</b></sub>](https://github.com/harmeetsaimbhi)<br />[](#tds-harmeetsaimbhi "") | [<img src="https://avatars2.githubusercontent.com/u/1115?v=4" width="100px;"/><br /><sub><b>Fabio Neves</b></sub>](https://github.com/fzero)<br />[](#tds-fzero "") | [<img src="https://avatars1.githubusercontent.com/u/49662501?v=4" width="100px;"/><br /><sub><b>Edison Li</b></sub>](https://ca.linkedin.com/in/edison-li)<br />[](#tds-zyl-edison-telus "") | [<img src="https://avatars1.githubusercontent.com/u/9220735?v=4" width="100px;"/><br /><sub><b>Michelle Linley</b></sub>](https://github.com/meeschka)<br />[](#tds-meeschka "") | [<img src="https://avatars3.githubusercontent.com/u/30445300?v=4" width="100px;"/><br /><sub><b>Jeffrey Chang</b></sub>](https://github.com/Jeffrey-Chang)<br />[](#tds-Jeffrey-Chang "") | [<img src="https://avatars1.githubusercontent.com/u/63233715?v=4" width="100px;"/><br /><sub><b>ashwanitelus</b></sub>](https://github.com/ashwanitelus)<br />[](#tds-ashwanitelus "") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 [circle-url]: https://circleci.com/gh/telus/tds-community
diff --git a/packages/QuietButton/QuietButton.jsx b/packages/QuietButton/QuietButton.jsx
index 882abeb9b..0bd966fac 100644
--- a/packages/QuietButton/QuietButton.jsx
+++ b/packages/QuietButton/QuietButton.jsx
@@ -1,5 +1,14 @@
 import React from 'react'
 import styled from 'styled-components'
+import Box from '@tds/core-box'
+import {
+  colorGreyRaven,
+  colorWhite,
+  colorGreyShuttle,
+  colorGreyGainsboro,
+  colorGreyShark,
+} from '@tds/core-colours'
+import { componentWithName } from '@tds/util-prop-types'
 import { safeRest } from '@tds/util-helpers'
 import { small } from '@tds/shared-typography'
 import { borders } from '@tds/shared-styles'
@@ -7,29 +16,28 @@ import PropTypes from 'prop-types'
 
 const baseButton = {
   boxSizing: 'border-box',
-  margin: '2px',
-  padding: '0px 16px 0px 16px',
+  margin: '0.125rem',
   cursor: 'pointer',
-  background: '#FFFFFF',
+  background: colorWhite,
   transition: 'all 0.2s ease-in-out',
-  minWidth: '44px',
-  height: '28px',
-  border: '1px solid #71757B',
+  minWidth: '2.75rem',
+  height: '1.75rem',
+  border: `0.0625rem solid ${colorGreyRaven}`,
   position: 'relative',
-  borderRadius: '3px',
-  color: '#2A2C2E',
+  borderRadius: '0.1875rem',
+  color: colorGreyShark,
   '&:hover': {
-    boxShadow: '0 0 0 2px #71757B',
-    midWidth: '72px',
+    boxShadow: `0 0 0 0.125rem ${colorGreyRaven}`,
+    midWidth: '4.5rem',
   },
   '&:active': {
-    border: '1px solid #54595F',
-    boxShadow: '0 0 0 2px #54595F',
-    background: '#D8D8D8',
+    border: `0.0625rem solid ${colorGreyShuttle}`,
+    boxShadow: `0 0 0 0.125rem ${colorGreyShuttle}`,
+    background: colorGreyGainsboro,
   },
   '&:focus': {
-    background: '#FFFFFF',
-    boxShadow: '0 0 0 2px #71757B,0 0 0 2px #FFFFFF inset, 0 0 0 3px #54595F inset',
+    background: colorWhite,
+    boxShadow: `0 0 0 0.125rem ${colorGreyRaven}, 0 0 0 0.125rem ${colorWhite} inset, 0 0 0 0.1875rem ${colorGreyShuttle} inset`,
     outline: 'none !important',
   },
   '@media (prefers-reduced-motion: reduce)': {
@@ -40,15 +48,19 @@ const btnWrapper = {
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
-  padding: '3px 0px 5px 0px',
   '& svg': {
-    margin: '-3px 0 -5px 0',
+    margin: '-0.125rem 0rem -0.3125rem 0rem',
   },
 }
 const spaceWrapper = {
-  paddingRight: '4px',
+  paddingRight: '0.25rem',
 }
 
+const StyledBox = styled(Box)`
+  padding-top: 0.125rem;
+  padding-bottom: 0.3125rem;
+`
+
 const StyledQuietButton = styled.button(baseButton, small, borders.rounded)
 const ButtonWrapper = styled.div(btnWrapper)
 const SpaceWrapper = styled.div(spaceWrapper)
@@ -72,7 +84,9 @@ const QuietButton = ({ children, ...rest }) => {
 
   return (
     <StyledQuietButton type="button" {...safeRest(rest)}>
-      <ButtonWrapper>{spaceFunction(childrenArray)}</ButtonWrapper>
+      <StyledBox horizontal={2}>
+        <ButtonWrapper>{spaceFunction(childrenArray)}</ButtonWrapper>
+      </StyledBox>
     </StyledQuietButton>
   )
 }
@@ -82,7 +96,28 @@ QuietButton.propTypes = {
    * Button children.
    */
 
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.oneOfType([
+        PropTypes.string,
+        componentWithName('A11yContent'),
+        componentWithName('Edit'),
+        componentWithName('Print'),
+        componentWithName('Profile'),
+        componentWithName('Add'),
+        componentWithName('Close'),
+        componentWithName('Delete'),
+        componentWithName('PlayVideo'),
+        componentWithName('Subtract'),
+        componentWithName('Download'),
+        componentWithName('DownloadPDF'),
+        componentWithName('DownloadPDFs'),
+        componentWithName('Search'),
+        componentWithName('Settings'),
+      ])
+    ),
+    PropTypes.string,
+  ]).isRequired,
 }
 
 export default QuietButton
diff --git a/packages/QuietButton/__tests__/__snapshots__/QuietButton.spec.jsx.snap b/packages/QuietButton/__tests__/__snapshots__/QuietButton.spec.jsx.snap
index 94ebb08f3..f9a014934 100644
--- a/packages/QuietButton/__tests__/__snapshots__/QuietButton.spec.jsx.snap
+++ b/packages/QuietButton/__tests__/__snapshots__/QuietButton.spec.jsx.snap
@@ -1,20 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`QuietButton renders 1`] = `
+.c2 {
+  display: block;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.c1 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.3125rem;
+}
+
 .c0 {
   box-sizing: border-box;
-  margin: 2px;
-  padding: 0px 16px 0px 16px;
+  margin: 0.125rem;
   cursor: pointer;
-  background: #FFFFFF;
+  background: #fff;
   -webkit-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
-  min-width: 44px;
-  height: 28px;
-  border: 1px solid #71757B;
+  min-width: 2.75rem;
+  height: 1.75rem;
+  border: 0.0625rem solid #71757b;
   position: relative;
-  border-radius: 3px;
-  color: #2A2C2E;
+  border-radius: 0.1875rem;
+  color: #2a2c2e;
   word-wrap: break-word;
   font-size: 0.875rem;
   -webkit-letter-spacing: -0.6px;
@@ -26,23 +39,23 @@ exports[`QuietButton renders 1`] = `
 }
 
 .c0:hover {
-  box-shadow: 0 0 0 2px #71757B;
-  mid-width: 72px;
+  box-shadow: 0 0 0 0.125rem #71757b;
+  mid-width: 4.5rem;
 }
 
 .c0:active {
-  border: 1px solid #54595F;
-  box-shadow: 0 0 0 2px #54595F;
-  background: #D8D8D8;
+  border: 0.0625rem solid #54595f;
+  box-shadow: 0 0 0 0.125rem #54595f;
+  background: #d8d8d8;
 }
 
 .c0:focus {
-  background: #FFFFFF;
-  box-shadow: 0 0 0 2px #71757B,0 0 0 2px #FFFFFF inset,0 0 0 3px #54595F inset;
+  background: #fff;
+  box-shadow: 0 0 0 0.125rem #71757b,0 0 0 0.125rem #fff inset,0 0 0 0.1875rem #54595f inset;
   outline: none !important;
 }
 
-.c1 {
+.c3 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -54,15 +67,14 @@ exports[`QuietButton renders 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  padding: 3px 0px 5px 0px;
 }
 
-.c1 svg {
-  margin: -3px 0 -5px 0;
+.c3 svg {
+  margin: -0.125rem 0rem -0.3125rem 0rem;
 }
 
-.c2 {
-  padding-right: 4px;
+.c4 {
+  padding-right: 0.25rem;
 }
 
 @media (prefers-reduced-motion:reduce) {
@@ -82,34 +94,33 @@ exports[`QuietButton renders 1`] = `
           "$$typeof": Symbol(react.forward_ref),
           "attrs": Array [],
           "componentStyle": ComponentStyle {
-            "componentId": "QuietButton__StyledQuietButton-sc-1anctzy-0",
+            "componentId": "QuietButton__StyledQuietButton-sc-1anctzy-1",
             "isStatic": false,
             "lastClassName": "c0",
             "rules": Array [
               "box-sizing: border-box;",
-              "margin: 2px;",
-              "padding: 0px 16px 0px 16px;",
+              "margin: 0.125rem;",
               "cursor: pointer;",
-              "background: #FFFFFF;",
+              "background: #fff;",
               "transition: all 0.2s ease-in-out;",
-              "min-width: 44px;",
-              "height: 28px;",
-              "border: 1px solid #71757B;",
+              "min-width: 2.75rem;",
+              "height: 1.75rem;",
+              "border: 0.0625rem solid #71757b;",
               "position: relative;",
-              "border-radius: 3px;",
-              "color: #2A2C2E;",
+              "border-radius: 0.1875rem;",
+              "color: #2a2c2e;",
               "&:hover {",
-              "box-shadow: 0 0 0 2px #71757B;",
-              "mid-width: 72px;",
+              "box-shadow: 0 0 0 0.125rem #71757b;",
+              "mid-width: 4.5rem;",
               "}",
               "&:active {",
-              "border: 1px solid #54595F;",
-              "box-shadow: 0 0 0 2px #54595F;",
-              "background: #D8D8D8;",
+              "border: 0.0625rem solid #54595f;",
+              "box-shadow: 0 0 0 0.125rem #54595f;",
+              "background: #d8d8d8;",
               "}",
               "&:focus {",
-              "background: #FFFFFF;",
-              "box-shadow: 0 0 0 2px #71757B,0 0 0 2px #FFFFFF inset, 0 0 0 3px #54595F inset;",
+              "background: #fff;",
+              "box-shadow: 0 0 0 0.125rem #71757b, 0 0 0 0.125rem #fff inset, 0 0 0 0.1875rem #54595f inset;",
               "outline: none !important;",
               "}",
               "@media (prefers-reduced-motion: reduce) {",
@@ -125,7 +136,7 @@ exports[`QuietButton renders 1`] = `
           "displayName": "QuietButton__StyledQuietButton",
           "foldedComponentIds": Array [],
           "render": [Function],
-          "styledComponentId": "QuietButton__StyledQuietButton-sc-1anctzy-0",
+          "styledComponentId": "QuietButton__StyledQuietButton-sc-1anctzy-1",
           "target": "button",
           "toString": [Function],
           "warnTooManyClasses": [Function],
@@ -139,61 +150,71 @@ exports[`QuietButton renders 1`] = `
         className="c0"
         type="button"
       >
-        <QuietButton__ButtonWrapper>
+        <QuietButton__StyledBox
+          horizontal={2}
+        >
           <StyledComponent
             forwardedComponent={
               Object {
                 "$$typeof": Symbol(react.forward_ref),
                 "attrs": Array [],
                 "componentStyle": ComponentStyle {
-                  "componentId": "QuietButton__ButtonWrapper-sc-1anctzy-1",
+                  "componentId": "QuietButton__StyledBox-sc-1anctzy-0",
                   "isStatic": false,
                   "lastClassName": "c1",
                   "rules": Array [
-                    "display: flex;",
-                    "flex-direction: row;",
-                    "align-items: center;",
-                    "padding: 3px 0px 5px 0px;",
-                    "& svg {",
-                    "margin: -3px 0 -5px 0;",
-                    "}",
+                    "padding-top:0.125rem;padding-bottom:0.3125rem;",
                   ],
                 },
-                "displayName": "QuietButton__ButtonWrapper",
+                "displayName": "QuietButton__StyledBox",
                 "foldedComponentIds": Array [],
                 "render": [Function],
-                "styledComponentId": "QuietButton__ButtonWrapper-sc-1anctzy-1",
-                "target": "div",
+                "styledComponentId": "QuietButton__StyledBox-sc-1anctzy-0",
+                "target": [Function],
                 "toString": [Function],
                 "warnTooManyClasses": [Function],
                 "withComponent": [Function],
               }
             }
             forwardedRef={null}
+            horizontal={2}
           >
-            <div
+            <Box
               className="c1"
+              horizontal={2}
+              inline={false}
+              tag="div"
             >
-              <QuietButton__SpaceWrapper
-                key="Words"
+              <styled.div
+                className="c1"
+                horizontal={2}
+                inline={false}
+                tag="div"
               >
                 <StyledComponent
+                  className="c1"
                   forwardedComponent={
                     Object {
                       "$$typeof": Symbol(react.forward_ref),
-                      "attrs": Array [],
+                      "attrs": Array [
+                        [Function],
+                      ],
                       "componentStyle": ComponentStyle {
-                        "componentId": "QuietButton__SpaceWrapper-sc-1anctzy-2",
+                        "componentId": "sc-EHOje",
                         "isStatic": false,
                         "lastClassName": "c2",
                         "rules": Array [
-                          "padding-right: 4px;",
+                          [Function],
+                          [Function],
+                          [Function],
+                          [Function],
+                          [Function],
                         ],
                       },
-                      "displayName": "QuietButton__SpaceWrapper",
+                      "displayName": "styled.div",
                       "foldedComponentIds": Array [],
                       "render": [Function],
-                      "styledComponentId": "QuietButton__SpaceWrapper-sc-1anctzy-2",
+                      "styledComponentId": "sc-EHOje",
                       "target": "div",
                       "toString": [Function],
                       "warnTooManyClasses": [Function],
@@ -201,17 +222,91 @@ exports[`QuietButton renders 1`] = `
                     }
                   }
                   forwardedRef={null}
+                  horizontal={2}
+                  inline={false}
+                  tag="div"
                 >
                   <div
-                    className="c2"
+                    className="c2 c1 QuietButton__StyledBox-sc-1anctzy-0 c1"
                   >
-                    Words
+                    <QuietButton__ButtonWrapper>
+                      <StyledComponent
+                        forwardedComponent={
+                          Object {
+                            "$$typeof": Symbol(react.forward_ref),
+                            "attrs": Array [],
+                            "componentStyle": ComponentStyle {
+                              "componentId": "QuietButton__ButtonWrapper-sc-1anctzy-2",
+                              "isStatic": false,
+                              "lastClassName": "c3",
+                              "rules": Array [
+                                "display: flex;",
+                                "flex-direction: row;",
+                                "align-items: center;",
+                                "& svg {",
+                                "margin: -0.125rem 0rem -0.3125rem 0rem;",
+                                "}",
+                              ],
+                            },
+                            "displayName": "QuietButton__ButtonWrapper",
+                            "foldedComponentIds": Array [],
+                            "render": [Function],
+                            "styledComponentId": "QuietButton__ButtonWrapper-sc-1anctzy-2",
+                            "target": "div",
+                            "toString": [Function],
+                            "warnTooManyClasses": [Function],
+                            "withComponent": [Function],
+                          }
+                        }
+                        forwardedRef={null}
+                      >
+                        <div
+                          className="c3"
+                        >
+                          <QuietButton__SpaceWrapper
+                            key="Words"
+                          >
+                            <StyledComponent
+                              forwardedComponent={
+                                Object {
+                                  "$$typeof": Symbol(react.forward_ref),
+                                  "attrs": Array [],
+                                  "componentStyle": ComponentStyle {
+                                    "componentId": "QuietButton__SpaceWrapper-sc-1anctzy-3",
+                                    "isStatic": false,
+                                    "lastClassName": "c4",
+                                    "rules": Array [
+                                      "padding-right: 0.25rem;",
+                                    ],
+                                  },
+                                  "displayName": "QuietButton__SpaceWrapper",
+                                  "foldedComponentIds": Array [],
+                                  "render": [Function],
+                                  "styledComponentId": "QuietButton__SpaceWrapper-sc-1anctzy-3",
+                                  "target": "div",
+                                  "toString": [Function],
+                                  "warnTooManyClasses": [Function],
+                                  "withComponent": [Function],
+                                }
+                              }
+                              forwardedRef={null}
+                            >
+                              <div
+                                className="c4"
+                              >
+                                Words
+                              </div>
+                            </StyledComponent>
+                          </QuietButton__SpaceWrapper>
+                        </div>
+                      </StyledComponent>
+                    </QuietButton__ButtonWrapper>
                   </div>
                 </StyledComponent>
-              </QuietButton__SpaceWrapper>
-            </div>
+              </styled.div>
+            </Box>
           </StyledComponent>
-        </QuietButton__ButtonWrapper>
+        </QuietButton__StyledBox>
       </button>
     </StyledComponent>
   </QuietButton__StyledQuietButton>
diff --git a/packages/QuietButton/package.json b/packages/QuietButton/package.json
index 6c0ae7b43..ec8ef7072 100644
--- a/packages/QuietButton/package.json
+++ b/packages/QuietButton/package.json
@@ -26,9 +26,12 @@
     "styled-components": "^4.1.3"
   },
   "dependencies": {
+    "@tds/core-box": "^2.2.0",
+    "@tds/core-colours": "^2.2.1",
     "@tds/shared-styles": "^1.5.2",
     "@tds/shared-typography": "^1.3.5",
     "@tds/util-helpers": "^1.2.0",
+    "@tds/util-prop-types": "^1.3.2",
     "prop-types": "^15.6.2"
   }
 }