@royaloperahouse/harmonic 0.18.3-m → 0.18.3-o

package/dist/components/molecules/PeopleListing/PeopleListing.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { IPeopleListing } from '../../../types/types';
-declare const PeopleListing: ({ roles, className, greyscale }: IPeopleListing) => React.JSX.Element;
+declare const PeopleListing: ({ roles, className, greyscale, largeDesktopColumns }: IPeopleListing) => React.JSX.Element;
 export default PeopleListing;

package/dist/components/molecules/PeopleListing/PeopleListing.style.d.ts

@@ -1 +1,3 @@
-export declare const PeopleListingGrid: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PeopleListingGrid: import("styled-components").StyledComponent<"div", any, {
+    $largeDesktopColumns?: 3 | 4 | undefined;
+}, never>;

package/dist/harmonic.cjs.development.js

@@ -8885,7 +8885,10 @@ var Pagination = function Pagination(_ref) {
 };
 
 var _templateObject$Z;
-var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 40px 36px;\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr 1fr 1fr;\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop);
+var PeopleListingGrid = /*#__PURE__*/styled__default(Grid)(_templateObject$Z || (_templateObject$Z = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  gap: 40px 36px;\n\n  grid-template-columns: 1fr 1fr 1fr;\n\n  @media ", " {\n    grid-template-columns: 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  @media ", " {\n    grid-template-columns: ", ";\n  }\n"])), devices.mobile, devices.tablet, devices.largeDesktop, function (_ref) {
+  var $largeDesktopColumns = _ref.$largeDesktopColumns;
+  return "repeat(" + ($largeDesktopColumns != null ? $largeDesktopColumns : 4) + ", 1fr)";
+});
 
 var _templateObject$_, _templateObject2$N;
 var TextWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$_ || (_templateObject$_ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  && {\n    color: var(--color-primary-black);\n  }\n  grid-area: role-person;\n  break-inside: avoid;\n"])));
@@ -8967,9 +8970,11 @@ var PersonCard = function PersonCard(_ref) {
 var PeopleListing = function PeopleListing(_ref) {
   var roles = _ref.roles,
     className = _ref.className,
-    greyscale = _ref.greyscale;
+    greyscale = _ref.greyscale,
+    largeDesktopColumns = _ref.largeDesktopColumns;
   return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
-    className: className
+    className: className,
+    "$largeDesktopColumns": largeDesktopColumns
   }, roles.map(function (role, index) {
     return /*#__PURE__*/React__default.createElement(GridItem, {
       key: role.name + "-" + index