diff --git a/package-lock.json b/package-lock.json index ab8ecc72..201497bf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,30 +26,30 @@ "@zendeskgarden/container-utilities": "2.0.2", "@zendeskgarden/css-bedrock": "10.0.1", "@zendeskgarden/eslint-config": "44.0.1", - "@zendeskgarden/react-accordions": "9.2.0", - "@zendeskgarden/react-avatars": "9.2.0", - "@zendeskgarden/react-breadcrumbs": "9.2.0", - "@zendeskgarden/react-buttons": "9.2.0", - "@zendeskgarden/react-chrome": "9.2.0", - "@zendeskgarden/react-colorpickers": "9.2.0", - "@zendeskgarden/react-datepickers": "9.2.0", - "@zendeskgarden/react-draggable": "9.2.0", - "@zendeskgarden/react-dropdowns": "9.2.0", - "@zendeskgarden/react-forms": "9.2.0", - "@zendeskgarden/react-grid": "9.2.0", - "@zendeskgarden/react-loaders": "9.2.0", - "@zendeskgarden/react-modals": "9.2.0", - "@zendeskgarden/react-notifications": "9.2.0", - "@zendeskgarden/react-pagination": "9.2.0", - "@zendeskgarden/react-tables": "9.2.0", - "@zendeskgarden/react-tabs": "9.2.0", - "@zendeskgarden/react-tags": "9.2.0", - "@zendeskgarden/react-theming": "9.2.0", - "@zendeskgarden/react-tooltips": "9.2.0", - "@zendeskgarden/react-typography": "9.2.0", + "@zendeskgarden/react-accordions": "9.4.0", + "@zendeskgarden/react-avatars": "9.4.0", + "@zendeskgarden/react-breadcrumbs": "9.4.0", + "@zendeskgarden/react-buttons": "9.4.0", + "@zendeskgarden/react-chrome": "9.4.0", + "@zendeskgarden/react-colorpickers": "9.4.0", + "@zendeskgarden/react-datepickers": "9.4.0", + "@zendeskgarden/react-draggable": "9.4.0", + "@zendeskgarden/react-dropdowns": "9.4.0", + "@zendeskgarden/react-forms": "9.4.0", + "@zendeskgarden/react-grid": "9.4.0", + "@zendeskgarden/react-loaders": "9.4.0", + "@zendeskgarden/react-modals": "9.4.0", + "@zendeskgarden/react-notifications": "9.4.0", + "@zendeskgarden/react-pagination": "9.4.0", + "@zendeskgarden/react-tables": "9.4.0", + "@zendeskgarden/react-tabs": "9.4.0", + "@zendeskgarden/react-tags": "9.4.0", + "@zendeskgarden/react-theming": "9.4.0", + "@zendeskgarden/react-tooltips": "9.4.0", + "@zendeskgarden/react-typography": "9.4.0", "@zendeskgarden/scripts": "2.4.3", "@zendeskgarden/stylelint-config": "22.0.0", - "@zendeskgarden/svg-icons": "7.3.0", + "@zendeskgarden/svg-icons": "7.5.0", "babel-plugin-styled-components": "2.1.4", "cheerio": "1.0.0", "codesandbox": "2.2.3", @@ -7227,9 +7227,9 @@ } }, "node_modules/@zendeskgarden/react-accordions": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-accordions/-/react-accordions-9.2.0.tgz", - "integrity": "sha512-FCoxZsisSiGPdQYB1RfCBECiRtXyck4w/TMclhXGoaAe2ViWNjUK/G9K235tnO7FF543ijOB3jK88qyNSQYciQ==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-accordions/-/react-accordions-9.4.0.tgz", + "integrity": "sha512-ed5oQ7e25jVQ1sBfWFcMRl3C9A+6Gd3vUjqiHG0qHWeSQwqpTc5dLC+HfXfjegYV9Ft+fumnO24DNMM5P7vcmQ==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7242,13 +7242,13 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-avatars": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-avatars/-/react-avatars-9.2.0.tgz", - "integrity": "sha512-25/JvN1aCKfTUe/QfkWB9dlE6WW0ar2yEOsOERTTVJP7WsKAa8VKrEvSSAsHau049jWkh3++yZ7xmgGnh3Jdww==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-avatars/-/react-avatars-9.4.0.tgz", + "integrity": "sha512-vaZHV58KjTMFvLN8Jz0fbi+gHg35XvSAb2mXIUIIbfaeJerAAQqqnnqrMNju0y87JL2rdEJSJpOQnWkWZf3SUA==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7259,13 +7259,13 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-breadcrumbs": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-breadcrumbs/-/react-breadcrumbs-9.2.0.tgz", - "integrity": "sha512-sSHXdcg7tVXkftnV8UkVsLHGEBQmplzp2r+c53W2RQFCQr5Rx+YfM15NoMg/fBq+B3FIQeWuGMNHrnim/uTdkg==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-breadcrumbs/-/react-breadcrumbs-9.4.0.tgz", + "integrity": "sha512-C/+85XmMazUXxqwkcIFysvK3F86S3bso/lRaZyOzaRb7Wyi3cv1+lcbgsUEknzssHzLYzXdzrubOvGyelusNBA==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7277,13 +7277,13 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-buttons": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-buttons/-/react-buttons-9.2.0.tgz", - "integrity": "sha512-LihB647Dkphf/y3R0tE7Dbsk1hT1Rej9GxW506WOgVaD3rb5m6JBk0v+SyFFbGZSNpvzxiJqy/NNdmvBRu+UeQ==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-buttons/-/react-buttons-9.4.0.tgz", + "integrity": "sha512-1hpV7vG8PYVYY45iXb6RpcnMSv4ogS9kpKWNjKNFqMssyvmeV531hIOlxlMf7atJHPoLp+mNjx+2cDc7+EJjbw==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7296,17 +7296,18 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-chrome": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-chrome/-/react-chrome-9.2.0.tgz", - "integrity": "sha512-d07FZ+kl46sne8vROHuKXlv8YxDOw5orYTrZtbvDrIN9SVT7qFuzi2bksu4fX37yB50UoaYqnpL6PBOIEH/Lvw==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-chrome/-/react-chrome-9.4.0.tgz", + "integrity": "sha512-pPMkUTtsnKsEIAng83VInTwrJApOpmMaoA2xnixsiktWLYd8NfaVuUs3LeV3+dC/Tch522gq7Ujv2qzune9ZrQ==", "dev": true, "license": "Apache-2.0", "dependencies": { - "@zendeskgarden/react-buttons": "^9.2.0", + "@zendeskgarden/container-utilities": "^2.0.0", + "@zendeskgarden/react-buttons": "^9.4.0", "dom-helpers": "^5.2.1", "polished": "^4.3.1", "prop-types": "^15.5.7", @@ -7316,22 +7317,22 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-colorpickers": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-colorpickers/-/react-colorpickers-9.2.0.tgz", - "integrity": "sha512-jkujEAfoS3EtE+37q95BR3Osh01Uiy32S8/R3JqDWTZuBLvuzwItIMMxqhRPW51jILJApDrzxtWJ//6YknFxYA==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-colorpickers/-/react-colorpickers-9.4.0.tgz", + "integrity": "sha512-m7GaIKHuUhLORiO3B4qXEq5irCxai+HOR8/axa0YKgjTqpkFcQBoJTawrUDO8T7xrMvkDhNqlOuaywkmQAsq2Q==", "dev": true, "license": "Apache-2.0", "dependencies": { "@zendeskgarden/container-grid": "^3.0.0", "@zendeskgarden/container-utilities": "^2.0.0", - "@zendeskgarden/react-buttons": "^9.2.0", - "@zendeskgarden/react-forms": "^9.2.0", - "@zendeskgarden/react-modals": "^9.2.0", - "@zendeskgarden/react-tooltips": "^9.2.0", + "@zendeskgarden/react-buttons": "^9.4.0", + "@zendeskgarden/react-forms": "^9.4.0", + "@zendeskgarden/react-modals": "^9.4.0", + "@zendeskgarden/react-tooltips": "^9.4.0", "lodash.isequal": "^4.5.0", "lodash.throttle": "^4.1.1", "polished": "^4.3.1", @@ -7342,13 +7343,13 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-datepickers": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-datepickers/-/react-datepickers-9.2.0.tgz", - "integrity": "sha512-PHgLtSqpnGrQJcvxMiKKRok4toz+LpBLZD5fupgKNuFYfDkX1N5UMDv/jmaWBsvWjrCxll3xCrEHEafRr+FKLQ==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-datepickers/-/react-datepickers-9.4.0.tgz", + "integrity": "sha512-MQxXNpRKsuRylj3Ct4c2qO7iRx9ccIyedLS5qdqHOZ5r5nur8+LA3SAj5nFDVUakqhOPENXDt7lN36Rvsc0diw==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7362,13 +7363,13 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-draggable": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-draggable/-/react-draggable-9.2.0.tgz", - "integrity": "sha512-pBJ2u9cSpbt75y+6ABWjgF/dNEMIEZSiFAdnRMSNwxdfolMPo5igvq5ZZ+cpbJCP3WKFeG7mB7zD9yPlna990g==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-draggable/-/react-draggable-9.4.0.tgz", + "integrity": "sha512-DFNfKAcJI6hdvJHQokj17a2YWmqxAG3jgs7MZfYhUuo6A0Fzm3mQKJs4bMqlYx9wPABan49/0y083tgxf1cR3g==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7379,13 +7380,13 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-dropdowns": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-dropdowns/-/react-dropdowns-9.2.0.tgz", - "integrity": "sha512-6TvAFKRPjoOw1A3pDQQs72sw/Pa9XXNvYKQd/65nTSRQWxtTLM5ATuffQn7Wohk6927bOEBp054c5ZXD/j1ySQ==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-dropdowns/-/react-dropdowns-9.4.0.tgz", + "integrity": "sha512-N8olvAH4R3uRs6VNPRdG+/8p9Ivc89Xy4uBNJVevrtAT9Ul8FAqGoPDl7y6myZV95nshIIzDvl3V/PS6zV9jyQ==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7393,10 +7394,10 @@ "@zendeskgarden/container-combobox": "^2.0.0", "@zendeskgarden/container-menu": "^0.5.0", "@zendeskgarden/container-utilities": "^2.0.0", - "@zendeskgarden/react-buttons": "^9.2.0", - "@zendeskgarden/react-forms": "^9.2.0", - "@zendeskgarden/react-tags": "^9.2.0", - "@zendeskgarden/react-tooltips": "^9.2.0", + "@zendeskgarden/react-buttons": "^9.4.0", + "@zendeskgarden/react-forms": "^9.4.0", + "@zendeskgarden/react-tags": "^9.4.0", + "@zendeskgarden/react-tooltips": "^9.4.0", "polished": "^4.3.1", "prop-types": "^15.7.2", "react-merge-refs": "^2.0.0" @@ -7405,13 +7406,13 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-forms": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-forms/-/react-forms-9.2.0.tgz", - "integrity": "sha512-kyXsqZynjLV/gbRss45jIhjopQW32rcYJ4e6DnqqaUJJx58SBgCfYeQtdIkvKhjP1aZAqAAw0xBU5VRnm6bfAg==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-forms/-/react-forms-9.4.0.tgz", + "integrity": "sha512-xQnQ9Fy916nFwf0EnIi92FAdlFt0kz1BZcNvpdg8vcXeXZWou4s7+TgD0WU42L1yTFKA/FAQK+GccE8NaJ9KRw==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7426,20 +7427,20 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-grid": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-grid/-/react-grid-9.2.0.tgz", - "integrity": "sha512-ABe/pob/9dWyIgLAjDOMwJq/YABsS6Efn0uJ/JXLt8DNhfOpn2b368HYI4qGvqahK7z6OJXlWYwvtdV9iIh/NA==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-grid/-/react-grid-9.4.0.tgz", + "integrity": "sha512-X6WMzZ0KhLjp6bQrGv8pvfhZPAd7LU22UZMj3fcT7/Y5KgRgVzDBjED459eFpcASmeb1/a78Bas8LqrRcsmToA==", "dev": true, "license": "Apache-2.0", "dependencies": { "@zendeskgarden/container-splitter": "^2.0.17", "@zendeskgarden/container-utilities": "^2.0.0", - "@zendeskgarden/react-buttons": "^9.2.0", - "@zendeskgarden/react-tooltips": "^9.2.0", + "@zendeskgarden/react-buttons": "^9.4.0", + "@zendeskgarden/react-tooltips": "^9.4.0", "polished": "^4.3.1", "prop-types": "^15.5.7", "react-merge-refs": "^2.0.0", @@ -7449,13 +7450,13 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-loaders": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-loaders/-/react-loaders-9.2.0.tgz", - "integrity": "sha512-447S2RZXBiZtQ3nk7GZFXtU/kh56sWCt7yq/gth94NK9g/xrngUY6g39jZXUhG4wWmG8CIxO5HTD/CcUF8mTOg==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-loaders/-/react-loaders-9.4.0.tgz", + "integrity": "sha512-ng7f7PkXaSieAXVKslGXbauDaHGFhLB+lhhmF+tlaoe34l5UwtIhtvhFINzSYLjx6GV3kyvsj8CUOLpkD/9/Rw==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7467,20 +7468,20 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-modals": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-modals/-/react-modals-9.2.0.tgz", - "integrity": "sha512-BGIBeJ/qNSFL3/J4vIsNWv7PDkE8OyGmDO9r5ms7C0gefJ6qFufAwBxvD9GBRBgharDmGkxitmpB7yG3Qn6IIA==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-modals/-/react-modals-9.4.0.tgz", + "integrity": "sha512-K7J3qVvHij/O2yfkwK+4e35RIRRRiO6vH7gUYXjNEBscpNnKVj/ONOuEDOxmxQlZEDUvkSWtWcVUb+sgh5pDaw==", "dev": true, "license": "Apache-2.0", "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@zendeskgarden/container-modal": "^1.0.15", "@zendeskgarden/container-utilities": "^2.0.0", - "@zendeskgarden/react-buttons": "^9.2.0", + "@zendeskgarden/react-buttons": "^9.4.0", "dom-helpers": "^5.1.0", "prop-types": "^15.5.7", "react-merge-refs": "^2.0.0", @@ -7490,17 +7491,17 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-notifications": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-notifications/-/react-notifications-9.2.0.tgz", - "integrity": "sha512-oI43VL7xJNfOnVbkp+FDKZs958SX3zoHg/abzAUWLIsi0qx4ewB1JRBDkz8adDSOqcRNbKWq7TaW23bNFyeb4Q==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-notifications/-/react-notifications-9.4.0.tgz", + "integrity": "sha512-k+OsrB6hXL4OlWjBoheBMX7YCmGAdJbN3gqWjHViFHyRhpaC0KT9bU5YRIjEan2GVaNjO9GF4pNn7cCdQaYTaw==", "dev": true, "license": "Apache-2.0", "dependencies": { - "@zendeskgarden/react-buttons": "^9.2.0", + "@zendeskgarden/react-buttons": "^9.4.0", "polished": "^4.3.1", "prop-types": "^15.5.7", "react-transition-group": "^4.4.2", @@ -7510,13 +7511,13 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-pagination": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-pagination/-/react-pagination-9.2.0.tgz", - "integrity": "sha512-YYJgZq1clIZgQvb81b1hVa+QLq0CGcWB/N279hRlvPIuaVpTDRiJZ2wX5Tgr5KXkylOsGmho8gWQrfFAtfYzHw==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-pagination/-/react-pagination-9.4.0.tgz", + "integrity": "sha512-VohjogTwsw4NQtRvmBphFG5qwTvGCiPJ5760sD1UaMwUouO3XKcEfnV9SGZZKG9Jz8Y2rQv7lNRNz1iDiAfINw==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7528,18 +7529,18 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-tables": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-tables/-/react-tables-9.2.0.tgz", - "integrity": "sha512-I40CPvcdSwbtyNoEXDgPOigE5LwlmYjfw91vSUtW5UECF1Dze9ApLWdncdXEtNtbBYdREHAe+4nFbqpyEmtmgg==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-tables/-/react-tables-9.4.0.tgz", + "integrity": "sha512-sSj4S010CnZH/dD99V4/atjszKUZufPzmrnWvkjgm6PA6inRdzg1T2BBWH+Sk0yw3rYRDR/N5drBgRrQ9VgYaQ==", "dev": true, "license": "Apache-2.0", "dependencies": { "@zendeskgarden/container-utilities": "^2.0.0", - "@zendeskgarden/react-buttons": "^9.2.0", + "@zendeskgarden/react-buttons": "^9.4.0", "dom-helpers": "^5.1.0", "polished": "^4.3.1", "prop-types": "^15.5.7" @@ -7548,13 +7549,13 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-tabs": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-tabs/-/react-tabs-9.2.0.tgz", - "integrity": "sha512-pOWqEzs2lTt3572O/hrDywoS2VMN7CZgvTKsAhEEYazZhrYJjsAPgcGcf/DBfW9/k7Tq8q7bnlZdSD3RIB1JVA==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-tabs/-/react-tabs-9.4.0.tgz", + "integrity": "sha512-bUuziRumWQtkvPzNo9aArOoPOQmd++aBEqZA5jX76nooWs7Hf6dJ/UH+nkghh39S+KL/Hb/ZbiYTB6bDMyCpbg==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7568,13 +7569,13 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-tags": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-tags/-/react-tags-9.2.0.tgz", - "integrity": "sha512-H/I4PUz5n0yk0HPOWQbM68irhrrFqECznbWljEfNb46yK6abFicgfw9bFy/A6BUm4kgVzfwG0V9jIywGM5mhww==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-tags/-/react-tags-9.4.0.tgz", + "integrity": "sha512-PcELg1Ak6mnkp/M9VACny1WCj2mMLUQREluk2zhk7z42sWGtWscgtS/RqmW/zcs7U82jgaiRlCgd00Pv6TCTjQ==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7586,13 +7587,13 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-theming": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-theming/-/react-theming-9.2.0.tgz", - "integrity": "sha512-/UR0f4HcEyZFiPm2JwQYc9xeK/Xwas9be1lKe9IJfpYfXZPcWjut+rtxN5PsBUS9qv5yblFohhRR7NoWJRw7CQ==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-theming/-/react-theming-9.4.0.tgz", + "integrity": "sha512-sWHJhjlzlhp925hxFhsCh6PEYZhH4fYACJb914983MTOlrYlO+Su9unlrhGuzGiss66KtdnUw9kvPYG/3776xg==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7606,13 +7607,13 @@ "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^4.2.0 || ^5.3.1" + "styled-components": "^4.2.0 || ^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-tooltips": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-tooltips/-/react-tooltips-9.2.0.tgz", - "integrity": "sha512-qfMjI1Y9ooC7LlFRtRE9OUN7Qml92srqzjt82g15nWRfAT6vkd3NAs5t1jK0KAbGOuWaMhg/nwn06TGNzQycVQ==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-tooltips/-/react-tooltips-9.4.0.tgz", + "integrity": "sha512-ACaWrTStsM6lGw5OkBcphUd6/lfLE0WDx00tL6uGAuh6f4PPzJsHD1nvikLUZ+Qy8qQiZlghF4l7LVlXgCRNqg==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7627,13 +7628,13 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/react-typography": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/react-typography/-/react-typography-9.2.0.tgz", - "integrity": "sha512-naecTdYH76aHN9+u1hcazQ9HoCBLM7ywyIng/xRT7MbUIRCOSXzFa4QSJYNyEQushj3/5ezJMO33JLLDDzayXg==", + "version": "9.4.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/react-typography/-/react-typography-9.4.0.tgz", + "integrity": "sha512-CnHA59NhlNHxBZKH8duGD60QjD0Tzw4D7Uw3Nn+7l1LhuLu5/mLiTscZ2tdQqMKGCTgv2rIFw/I7C1qJAgCqrw==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -7646,7 +7647,7 @@ "@zendeskgarden/react-theming": ">=9.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", - "styled-components": "^5.3.1" + "styled-components": "^5.3.1 || ^6.0.0" } }, "node_modules/@zendeskgarden/scripts": { @@ -8021,10 +8022,11 @@ } }, "node_modules/@zendeskgarden/svg-icons": { - "version": "7.3.0", - "resolved": "https://registry.npmjs.org/@zendeskgarden/svg-icons/-/svg-icons-7.3.0.tgz", - "integrity": "sha512-lST3Py4kI47ai5O83EJnI+bU0WgWbXzlEZpNhOCKpoUB/9GFMcavT5MKUkiRMWg2YuNJjGzE8ag98EBtxvIsCQ==", - "dev": true + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/@zendeskgarden/svg-icons/-/svg-icons-7.5.0.tgz", + "integrity": "sha512-QCHjtHvIVs2mhdLZduIov42WLPSxPGoQe0c3WSr24zPHg9qO28S34BM6uBKXFl0o8p+Wy3jRp8TbDK+pHCNLuA==", + "dev": true, + "license": "Apache-2.0" }, "node_modules/abortcontroller-polyfill": { "version": "1.7.5", @@ -32739,6 +32741,48 @@ "integrity": "sha512-eZxlbI8GZscaGS7kkc/trHTT5xgrjH3/1n2JDwusC9iahPKWMRvRjJSAN5mCXviuTGQ/lHnhvv8Q1YTpnfz9gA==", "dev": true }, + "node_modules/netlify-cli/node_modules/@types/body-parser": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz", + "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==", + "extraneous": true, + "dependencies": { + "@types/connect": "*", + "@types/node": "*" + } + }, + "node_modules/netlify-cli/node_modules/@types/connect": { + "version": "3.4.35", + "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz", + "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==", + "extraneous": true, + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/netlify-cli/node_modules/@types/express": { + "version": "4.17.13", + "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz", + "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==", + "extraneous": true, + "dependencies": { + "@types/body-parser": "*", + "@types/express-serve-static-core": "^4.17.18", + "@types/qs": "*", + "@types/serve-static": "*" + } + }, + "node_modules/netlify-cli/node_modules/@types/express-serve-static-core": { + "version": "4.17.28", + "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz", + "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==", + "extraneous": true, + "dependencies": { + "@types/node": "*", + "@types/qs": "*", + "@types/range-parser": "*" + } + }, "node_modules/netlify-cli/node_modules/@types/http-cache-semantics": { "version": "4.0.4", "resolved": "https://registry.npmjs.org/@types/http-cache-semantics/-/http-cache-semantics-4.0.4.tgz", @@ -32778,6 +32822,12 @@ "@types/istanbul-lib-report": "*" } }, + "node_modules/netlify-cli/node_modules/@types/mime": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz", + "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==", + "extraneous": true + }, "node_modules/netlify-cli/node_modules/@types/node": { "version": "20.14.8", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.8.tgz", @@ -32793,12 +32843,34 @@ "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==", "dev": true }, + "node_modules/netlify-cli/node_modules/@types/qs": { + "version": "6.9.7", + "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz", + "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==", + "extraneous": true + }, + "node_modules/netlify-cli/node_modules/@types/range-parser": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz", + "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==", + "extraneous": true + }, "node_modules/netlify-cli/node_modules/@types/retry": { "version": "0.12.1", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.1.tgz", "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==", "dev": true }, + "node_modules/netlify-cli/node_modules/@types/serve-static": { + "version": "1.13.10", + "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz", + "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==", + "extraneous": true, + "dependencies": { + "@types/mime": "^1", + "@types/node": "*" + } + }, "node_modules/netlify-cli/node_modules/@types/yargs-parser": { "version": "20.2.1", "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-20.2.1.tgz", @@ -33179,6 +33251,22 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/netlify-cli/node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "extraneous": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, "node_modules/netlify-cli/node_modules/ajv-formats": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", @@ -36466,6 +36554,12 @@ "node": ">=8.6.0" } }, + "node_modules/netlify-cli/node_modules/fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "extraneous": true + }, "node_modules/netlify-cli/node_modules/fast-json-stringify": { "version": "5.15.1", "resolved": "https://registry.npmjs.org/fast-json-stringify/-/fast-json-stringify-5.15.1.tgz", @@ -38160,6 +38254,15 @@ "ipx": "bin/ipx.mjs" } }, + "node_modules/netlify-cli/node_modules/ipx/node_modules/@netlify/blobs": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/@netlify/blobs/-/blobs-6.5.0.tgz", + "integrity": "sha512-wRFlNnL/Qv3WNLZd3OT/YYqF1zb6iPSo8T31sl9ccL1ahBxW1fBqKgF4b1XL7Z+6mRIkatvcsVPkWBcO+oJMNA==", + "extraneous": true, + "engines": { + "node": "^14.16.0 || >=16.0.0" + } + }, "node_modules/netlify-cli/node_modules/ipx/node_modules/lru-cache": { "version": "10.2.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz", @@ -38715,6 +38818,12 @@ "fast-deep-equal": "^3.1.3" } }, + "node_modules/netlify-cli/node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "extraneous": true + }, "node_modules/netlify-cli/node_modules/jsonc-parser": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz", diff --git a/package.json b/package.json index 0668c768..74d79831 100644 --- a/package.json +++ b/package.json @@ -35,30 +35,30 @@ "@zendeskgarden/container-utilities": "2.0.2", "@zendeskgarden/css-bedrock": "10.0.1", "@zendeskgarden/eslint-config": "44.0.1", - "@zendeskgarden/react-accordions": "9.2.0", - "@zendeskgarden/react-avatars": "9.2.0", - "@zendeskgarden/react-breadcrumbs": "9.2.0", - "@zendeskgarden/react-buttons": "9.2.0", - "@zendeskgarden/react-chrome": "9.2.0", - "@zendeskgarden/react-colorpickers": "9.2.0", - "@zendeskgarden/react-datepickers": "9.2.0", - "@zendeskgarden/react-draggable": "9.2.0", - "@zendeskgarden/react-dropdowns": "9.2.0", - "@zendeskgarden/react-forms": "9.2.0", - "@zendeskgarden/react-grid": "9.2.0", - "@zendeskgarden/react-loaders": "9.2.0", - "@zendeskgarden/react-modals": "9.2.0", - "@zendeskgarden/react-notifications": "9.2.0", - "@zendeskgarden/react-pagination": "9.2.0", - "@zendeskgarden/react-tables": "9.2.0", - "@zendeskgarden/react-tabs": "9.2.0", - "@zendeskgarden/react-tags": "9.2.0", - "@zendeskgarden/react-theming": "9.2.0", - "@zendeskgarden/react-tooltips": "9.2.0", - "@zendeskgarden/react-typography": "9.2.0", + "@zendeskgarden/react-accordions": "9.4.0", + "@zendeskgarden/react-avatars": "9.4.0", + "@zendeskgarden/react-breadcrumbs": "9.4.0", + "@zendeskgarden/react-buttons": "9.4.0", + "@zendeskgarden/react-chrome": "9.4.0", + "@zendeskgarden/react-colorpickers": "9.4.0", + "@zendeskgarden/react-datepickers": "9.4.0", + "@zendeskgarden/react-draggable": "9.4.0", + "@zendeskgarden/react-dropdowns": "9.4.0", + "@zendeskgarden/react-forms": "9.4.0", + "@zendeskgarden/react-grid": "9.4.0", + "@zendeskgarden/react-loaders": "9.4.0", + "@zendeskgarden/react-modals": "9.4.0", + "@zendeskgarden/react-notifications": "9.4.0", + "@zendeskgarden/react-pagination": "9.4.0", + "@zendeskgarden/react-tables": "9.4.0", + "@zendeskgarden/react-tabs": "9.4.0", + "@zendeskgarden/react-tags": "9.4.0", + "@zendeskgarden/react-theming": "9.4.0", + "@zendeskgarden/react-tooltips": "9.4.0", + "@zendeskgarden/react-typography": "9.4.0", "@zendeskgarden/scripts": "2.4.3", "@zendeskgarden/stylelint-config": "22.0.0", - "@zendeskgarden/svg-icons": "7.3.0", + "@zendeskgarden/svg-icons": "7.5.0", "babel-plugin-styled-components": "2.1.4", "cheerio": "1.0.0", "codesandbox": "2.2.3", diff --git a/react-components b/react-components index 23a86c9a..02e3f240 160000 --- a/react-components +++ b/react-components @@ -1 +1 @@ -Subproject commit 23a86c9a1e830685e277544c089b44614c2261ac +Subproject commit 02e3f240b6f0c776fdae785254d6fe90cbfc37e4 diff --git a/src/examples/utilities/components.ts b/src/examples/utilities/components.ts index 20c2668c..333f0ed0 100644 --- a/src/examples/utilities/components.ts +++ b/src/examples/utilities/components.ts @@ -40,10 +40,25 @@ const components = [ } } }, + { + name: 'componentStyles', + props: { + 'options.theme': { + required: true, + type: 'DefaultTheme', + description: 'Provides `components` object used to resolve the given component ID' + }, + '[options.componentId]': { + type: 'string', + description: + 'Specifies the lookup ID for `theme.components` styles. The ID will be inferred from the `data-garden-id` attribute if not provided.' + } + } + }, { name: 'focusStyles', props: { - '[options.theme]': { + 'options.theme': { required: true, type: 'IGardenTheme', description: 'Provides values used to resolve the desired colors' @@ -127,7 +142,7 @@ const components = [ { name: 'getColor', props: { - '[options.theme]': { + 'options.theme': { required: true, type: 'IGardenTheme', description: 'Provides values used to resolve the desired color' @@ -197,7 +212,7 @@ const components = [ { name: 'getFocusBoxShadow', props: { - '[options.theme]': { + 'options.theme': { required: true, type: 'IGardenTheme', defaultValue: 'DEFAULT_THEME', @@ -319,22 +334,6 @@ const components = [ } } }, - { - name: 'retrieveComponentStyles', - props: { - id: { - required: true, - type: 'string', - description: - "Specifies the unique ID used to retrieve CSS styles from the theme's [components](/components/theme-object#components) object" - }, - props: { - required: true, - type: 'Partial>>', - description: 'Provides component props which contain the context `theme` object' - } - } - }, { name: 'useText', props: { diff --git a/src/pages/components/utilities.mdx b/src/pages/components/utilities.mdx index ff3b3859..fd5f4706 100644 --- a/src/pages/components/utilities.mdx +++ b/src/pages/components/utilities.mdx @@ -6,12 +6,11 @@ description: > package: '@zendeskgarden/react-theming' components: - theming/src/utils/arrowStyles.ts + - theming/src/utils/componentStyles.ts - theming/src/utils/getColor.ts - theming/src/utils/getLineHeight.ts - theming/src/utils/mediaQuery.ts - theming/src/utils/menuStyles.ts - - theming/src/utils/retrieveComponentStyles.ts - - theming/src/utils/withTheme.ts --- import { SEO } from '../../components'; @@ -51,6 +50,46 @@ are applied must be wrapped in a positioned box (`relative`, `absolute`, or +### componentStyles + +Retrieve customized CSS for themable component styling overrides. This example +demonstrates how to construct a styled component that accepts customizations via +the theme's [components](/components/theme-object#components) object. + +```jsx +import styled, { css, useTheme } from 'styled-components'; +import { componentStyles, getColor } from '@zendeskgarden/react-theming'; + +const StyledCustomComponent = styled.div` + display: flex; + align-items: center; + + /* CSS provided on the theme will be rendered inline */ + ${componentStyles}; +`; + +export const CustomComponent = props => { + const theme = useTheme(); + const customTheme = { + ...theme, + components: { + 'custom.component': css` + background-color: ${p => + getColor({ theme: p.theme, variable: 'background.primaryEmphasis' })}; + ` + } + }; + + return ( + + + + ); +}; +``` + + + ### focusStyles CSS for Garden standard `box-shadow` focus styling. The hue and shade are used @@ -124,33 +163,6 @@ which contains a child menu component. -### retrieveComponentStyles - -Retrieve customized CSS for themable component styling overrides. This -example demonstrates how to construct a custom styled component that permits -customizations via the theme's -[components](/components/theme-object#components) object. - -```jsx -import styled from 'styled-components'; -import { retrieveComponentStyles } from '@zendeskgarden/react-theming'; - -const COMPONENT_ID = 'custom.component'; - -export const StyledCustomComponent = styled.div.attrs({ - /* Render component ID attribute for reference */ - 'data-custom-id': COMPONENT_ID -})` - display: flex; - align-items: center; - - /* CSS provided on the theme will be rendered inline */ - ${props => retrieveComponentStyles(COMPONENT_ID, props)}; -`; -``` - - - ### useText A custom React hook that provides default text for `aria-label` or other