@pega/cosmos-react-core 2.2.1 → 2.2.4

package/lib/components/Number/utils.d.ts

@@ -0,0 +1,9 @@
+export declare function getInteger(value: string): string;
+export declare function getDecimal(locale: string, options?: Intl.NumberFormatOptions): string;
+export declare function getFraction(value: string): string;
+export declare function getCleanedValue(value: string, decimal: string, maximumFractionDigits: number): string;
+export declare function getFormattedValue(value: string, locale: string, showGroupSeparators: boolean, maximumFractionDigits?: number): string;
+export declare function isValueInRange(value: number, min: number | undefined, max: number | undefined): boolean;
+export declare function getIncrementedValue(value: string, min: number, max: number, step: number): string;
+export declare function getDecrementedValue(value: string, min: number, max: number, step: number): string;
+//# sourceMappingURL=utils.d.ts.map

package/lib/components/Number/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAIhD;AAED,wBAAgB,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,mBAAmB,UAM5E;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,UAIxC;AAED,wBAAgB,eAAe,CAC7B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,EACf,qBAAqB,EAAE,MAAM,GAC5B,MAAM,CAcR;AAED,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,EACd,mBAAmB,EAAE,OAAO,EAC5B,qBAAqB,GAAE,MAAU,GAChC,MAAM,CAyBR;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,MAAM,GAAG,SAAS,EACvB,GAAG,EAAE,MAAM,GAAG,SAAS,GACtB,OAAO,CAET;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAUjG"}

package/lib/components/Number/utils.js

@@ -0,0 +1,83 @@
+import BigNumber from 'bignumber.js';
+export function getInteger(value) {
+    const decPos = value.indexOf('.');
+    const substrLength = decPos === -1 ? value.length : decPos;
+    return value.substring(0, substrLength);
+}
+export function getDecimal(locale, options) {
+    return (new Intl.NumberFormat(locale, options)
+        .formatToParts(0.1)
+        .filter((part) => part.type === 'decimal')[0]?.value || '');
+}
+export function getFraction(value) {
+    const decPos = value.indexOf('.');
+    const substrLength = decPos === -1 ? value.length : decPos;
+    return value.substring(substrLength);
+}
+export function getCleanedValue(value, decimal, maximumFractionDigits) {
+    const regex = new RegExp(`[^-\\d${decimal}]`, 'g');
+    value = value.trim().replace(regex, '');
+    if (decimal) {
+        const decimalString = new RegExp(`\\${decimal}`, 'g');
+        value = value.replace(decimalString, '.');
+    }
+    if (value.startsWith('.'))
+        value = `0${value}`;
+    if (value.startsWith('-.'))
+        value = `-0${value.substring(1)}`;
+    const match = value.match(new RegExp(`-?\\d*(\\.\\d{0,${maximumFractionDigits}})?`));
+    if (match && match.length > 0) {
+        value = match[0];
+    }
+    return value;
+}
+export function getFormattedValue(value, locale, showGroupSeparators, maximumFractionDigits = 0) {
+    let valueNumber;
+    let sign = '';
+    const cleanedValue = getCleanedValue(value, '.', maximumFractionDigits);
+    let integer = getInteger(cleanedValue);
+    const decimal = getDecimal(locale);
+    const fractionPart = getFraction(cleanedValue).replace('.', decimal);
+    if (integer && integer.startsWith('-')) {
+        sign = '-';
+        integer = integer.substring(1);
+    }
+    if (!integer && maximumFractionDigits && fractionPart.startsWith(decimal)) {
+        integer = '0';
+    }
+    if (cleanedValue && !Number.isNaN(parseFloat(integer))) {
+        valueNumber = BigInt(integer);
+        return (sign +
+            new Intl.NumberFormat(locale, { useGrouping: showGroupSeparators })
+                .format(valueNumber)
+                .trim() +
+            (maximumFractionDigits ? fractionPart : ''));
+    }
+    return cleanedValue;
+}
+export function isValueInRange(value, min, max) {
+    return !((min !== undefined && value < min) || (max !== undefined && value > max));
+}
+export function getIncrementedValue(value, min, max, step) {
+    const numberValue = parseFloat(value) || 0;
+    const newValue = new BigNumber(numberValue).plus(step);
+    if (isValueInRange(newValue.toNumber(), min, max)) {
+        return newValue.toFixed();
+    }
+    if (min !== undefined && newValue.toNumber() < min) {
+        return min.toString();
+    }
+    return value;
+}
+export function getDecrementedValue(value, min, max, step) {
+    const numberValue = parseFloat(value) || 0;
+    const newValue = new BigNumber(numberValue).minus(step);
+    if (isValueInRange(newValue.toNumber(), min, max)) {
+        return newValue.toFixed();
+    }
+    if (max !== undefined && newValue.toNumber() > max) {
+        return max.toString();
+    }
+    return value;
+}
+//# sourceMappingURL=utils.js.map

package/lib/components/Number/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/Number/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import BigNumber from 'bignumber.js';\n\nexport function getInteger(value: string): string {\n  const decPos = value.indexOf('.');\n  const substrLength = decPos === -1 ? value.length : decPos;\n  return value.substring(0, substrLength);\n}\n\nexport function getDecimal(locale: string, options?: Intl.NumberFormatOptions) {\n  return (\n    new Intl.NumberFormat(locale, options)\n      .formatToParts(0.1)\n      .filter((part: { type: string; value: string }) => part.type === 'decimal')[0]?.value || ''\n  );\n}\n\nexport function getFraction(value: string) {\n  const decPos = value.indexOf('.');\n  const substrLength = decPos === -1 ? value.length : decPos;\n  return value.substring(substrLength);\n}\n\nexport function getCleanedValue(\n  value: string,\n  decimal: string,\n  maximumFractionDigits: number\n): string {\n  const regex = new RegExp(`[^-\\\\d${decimal}]`, 'g');\n  value = value.trim().replace(regex, '');\n  if (decimal) {\n    const decimalString = new RegExp(`\\\\${decimal}`, 'g');\n    value = value.replace(decimalString, '.');\n  }\n  if (value.startsWith('.')) value = `0${value}`;\n  if (value.startsWith('-.')) value = `-0${value.substring(1)}`;\n  const match = value.match(new RegExp(`-?\\\\d*(\\\\.\\\\d{0,${maximumFractionDigits}})?`));\n  if (match && match.length > 0) {\n    value = match[0];\n  }\n  return value;\n}\n\nexport function getFormattedValue(\n  value: string,\n  locale: string,\n  showGroupSeparators: boolean,\n  maximumFractionDigits: number = 0\n): string {\n  let valueNumber;\n  let sign = '';\n  const cleanedValue = getCleanedValue(value, '.', maximumFractionDigits);\n  let integer = getInteger(cleanedValue);\n  const decimal = getDecimal(locale);\n  const fractionPart = getFraction(cleanedValue).replace('.', decimal);\n  if (integer && integer.startsWith('-')) {\n    sign = '-';\n    integer = integer.substring(1);\n  }\n  if (!integer && maximumFractionDigits && fractionPart.startsWith(decimal)) {\n    integer = '0';\n  }\n  if (cleanedValue && !Number.isNaN(parseFloat(integer))) {\n    valueNumber = BigInt(integer);\n    return (\n      sign +\n      new Intl.NumberFormat(locale, { useGrouping: showGroupSeparators })\n        .format(valueNumber)\n        .trim() +\n      (maximumFractionDigits ? fractionPart : '')\n    );\n  }\n  return cleanedValue;\n}\n\nexport function isValueInRange(\n  value: number,\n  min: number | undefined,\n  max: number | undefined\n): boolean {\n  return !((min !== undefined && value < min) || (max !== undefined && value > max));\n}\n\nexport function getIncrementedValue(value: string, min: number, max: number, step: number): string {\n  const numberValue = parseFloat(value) || 0;\n  const newValue = new BigNumber(numberValue).plus(step);\n  if (isValueInRange(newValue.toNumber(), min, max)) {\n    return newValue.toFixed();\n  }\n  if (min !== undefined && newValue.toNumber() < min) {\n    return min.toString();\n  }\n  return value;\n}\n\nexport function getDecrementedValue(value: string, min: number, max: number, step: number): string {\n  const numberValue = parseFloat(value) || 0;\n  const newValue = new BigNumber(numberValue).minus(step);\n  if (isValueInRange(newValue.toNumber(), min, max)) {\n    return newValue.toFixed();\n  }\n  if (max !== undefined && newValue.toNumber() > max) {\n    return max.toString();\n  }\n  return value;\n}\n"]}

package/lib/components/PageTemplates/CategorySubPage.d.ts

@@ -0,0 +1,40 @@
+import { Ref, FunctionComponent, ReactNode, MouseEventHandler } from 'react';
+import { ButtonProps } from '../Button';
+import { Action, ForwardProps } from '../../types';
+interface NavItemType extends ForwardProps {
+    text: string;
+    active?: boolean;
+    onClick?: MouseEventHandler;
+    href?: string;
+}
+interface NavGroupType {
+    title?: string;
+    items: NavItemType[];
+}
+interface PageAction extends Pick<Action, 'id' | 'icon' | 'href' | 'onClick' | 'disabled'>, Pick<ButtonProps, 'variant' | 'label' | 'aria-label' | 'loading'>, ForwardProps {
+    /** Optional text to replace required text string in Action type */
+    text?: string;
+}
+export interface TemplateProps {
+    /** Indicates that the primary view for the page cannot yet be rendered */
+    /** @default false */
+    viewLoading?: boolean;
+    /** Parent Category of page and all navigation items */
+    category: string;
+    /** Parent Category icon */
+    categoryIcon?: string;
+    navItemGroups: NavGroupType[];
+    pageTitle?: string;
+    /** Actions to render in fixed page header. Ordered by priority */
+    pageActions?: PageAction[];
+    /** Maximum top-level action buttons to render in header. Actions passed exceeding this limit will render in an action menu. */
+    /** @default 3 */
+    maxActions?: number;
+    /** Primary page content region */
+    region: ReactNode;
+    /** Ref forwarded to the wrapping element. */
+    ref?: Ref<HTMLDivElement>;
+}
+declare const CategorySubPage: FunctionComponent<TemplateProps & ForwardProps>;
+export default CategorySubPage;
+//# sourceMappingURL=CategorySubPage.d.ts.map

package/lib/components/PageTemplates/CategorySubPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategorySubPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,GAAG,EAGH,iBAAiB,EACjB,SAAS,EAGT,iBAAiB,EAClB,MAAM,OAAO,CAAC;AAIf,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAMhD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAqBnD,UAAU,WAAY,SAAQ,YAAY;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,UAAU,UACR,SAAQ,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,CAAC,EACnE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,OAAO,GAAG,YAAY,GAAG,SAAS,CAAC,EACjE,YAAY;IACd,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAa;IAC5B,0EAA0E;IAC1E,qBAAqB;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,QAAQ,EAAE,MAAM,CAAC;IACjB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC;IAC3B,+HAA+H;IAC/H,iBAAiB;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,MAAM,EAAE,SAAS,CAAC;IAClB,6CAA6C;IAC7C,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AA4DD,QAAA,MAAM,eAAe,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAsIpE,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/PageTemplates/CategorySubPage.js

@@ -0,0 +1,76 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createRef, forwardRef, useCallback, useMemo } from 'react';
+import { hasProp } from '../../utils';
+import { useConsolidatedRef, useUID } from '../../hooks';
+import Button from '../Button';
+import Flex from '../Flex';
+import Icon from '../Icon';
+import MenuButton from '../MenuButton';
+import Text from '../Text';
+import Progress from '../Progress';
+import { StyledTemplate, StyledTemplateRow, StyledPageArticle, StyledArticleHeader, StyledPageActionCol, StyledPageTitle, StyledMenuColumn, StyledCategoryHeadingRow, StyledCategoryIconBlock, StyledNav, StyledNavList, StyledNavGroup, StyledNavGroupList, StyledNavGroupHeader, StyledNavItem, StyledSkipNavigation } from './CategorySubPage.styles';
+const NavItem = ({ item: { href, text, active, ...restProps } }) => {
+    const isAnchor = !!href;
+    return (_jsx(StyledNavItem, { as: 'li', selected: !!active, tabType: 'horizontal', inverted: false, "aria-current": active ? 'page' : undefined, children: _jsx(Button, { ...restProps, href: isAnchor ? href : undefined, variant: 'text', children: text }, void 0) }, void 0));
+};
+const NavGroup = ({ item }) => {
+    const mappedGroupedItems = useMemo(() => {
+        return item.items.map(groupedItem => {
+            const key = groupedItem.text;
+            return _jsx(NavItem, { item: groupedItem }, key);
+        });
+    }, [item.items]);
+    const titledGroup = useMemo(() => {
+        return !!item.title && !!item.items.length;
+    }, [item.title, item.items]);
+    const anonGroup = useMemo(() => {
+        return !item.title && item.items.length > 1;
+    }, [item.title, item.items]);
+    const groupLabelId = useUID();
+    if (titledGroup) {
+        return (_jsxs(StyledNavGroup, { as: 'li', children: [_jsx(StyledNavGroupHeader, { variant: 'h3', id: groupLabelId, children: item.title }, void 0), _jsx(StyledNavGroupList, { "aria-labelledby": groupLabelId, children: mappedGroupedItems }, void 0)] }, void 0));
+    }
+    if (anonGroup) {
+        return _jsx(StyledNavGroup, { children: mappedGroupedItems }, void 0);
+    }
+    if (item.items.length === 1) {
+        return _jsx(NavItem, { item: item.items[0] }, void 0);
+    }
+    return null;
+};
+const CategorySubPage = forwardRef(({ viewLoading = false, category, categoryIcon, navItemGroups, pageTitle, pageActions, region, maxActions = 3, ...restProps }, ref) => {
+    const articleRef = createRef();
+    const templateRef = useConsolidatedRef(ref);
+    const mappedAction = useCallback((action) => {
+        const { id, text, icon, label, ...rest } = action;
+        return (_createElement(Button, { ...rest, key: id, icon: !!icon && !text, label: label || text },
+            !!icon && _jsx(Icon, { name: icon }, void 0),
+            !!text && text));
+    }, []);
+    return (_jsx(StyledTemplate, { children: _jsxs(Flex, { ...restProps, ref: templateRef, as: StyledTemplateRow, container: { alignItems: 'stretch', wrap: 'nowrap' }, children: [_jsxs(StyledMenuColumn, { children: [_jsx(StyledSkipNavigation, { onClick: () => {
+                                if (articleRef.current)
+                                    articleRef.current.focus();
+                            }, children: "Skip to page content" }, void 0), _jsxs(Flex, { as: StyledCategoryHeadingRow, container: { alignItems: 'center' }, children: [categoryIcon && (_jsx(Flex, { as: StyledCategoryIconBlock, container: { alignItems: 'center', justify: 'center' }, children: _jsx(Icon, { name: categoryIcon }, void 0) }, void 0)), _jsx(Text, { variant: 'h1', children: category }, void 0)] }, void 0), _jsx(StyledNav, { children: _jsx(StyledNavList, { children: navItemGroups.map((navItem, index) => {
+                                    const key = hasProp(navItem, 'title') ? navItem.title : `navItem${index}`;
+                                    return _jsx(NavGroup, { item: navItem }, key);
+                                }) }, void 0) }, void 0)] }, void 0), _jsxs(Flex, { as: StyledPageArticle, item: { grow: 1 }, ref: articleRef, "aria-label": pageTitle || 'Main Content', tabIndex: 0, children: [viewLoading && _jsx(Progress, { placement: 'local' }, void 0), !viewLoading && (_jsxs(_Fragment, { children: [(pageTitle || pageActions) && (_jsxs(Flex, { as: StyledArticleHeader, container: {
+                                        justify: 'between',
+                                        alignItems: 'center',
+                                        wrap: 'wrap'
+                                    }, children: [pageTitle && _jsx(StyledPageTitle, { children: pageTitle }, void 0), pageActions && !!pageActions.length && (_jsxs(_Fragment, { children: [pageActions.length <= maxActions && (_jsx(StyledPageActionCol, { children: pageActions.reverse().map(mappedAction) }, void 0)), pageActions.length > maxActions && (_jsxs(StyledPageActionCol, { children: [_jsx(MenuButton, { text: 'Actions', menu: {
+                                                                items: pageActions
+                                                                    .slice(maxActions - 1)
+                                                                    .map(({ id, text, onClick, ...rest }) => ({
+                                                                    id,
+                                                                    primary: text,
+                                                                    onClick,
+                                                                    ...rest
+                                                                }))
+                                                            } }, void 0), pageActions
+                                                            .slice(0, maxActions - 1)
+                                                            .reverse()
+                                                            .map(mappedAction)] }, void 0))] }, void 0))] }, void 0)), region] }, void 0))] }, void 0)] }, void 0) }, void 0));
+});
+export default CategorySubPage;
+//# sourceMappingURL=CategorySubPage.js.map

package/lib/components/PageTemplates/CategorySubPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategorySubPage.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createRef,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  FunctionComponent,\n  ReactNode,\n  useCallback,\n  useMemo,\n  MouseEventHandler\n} from 'react';\n\nimport { hasProp } from '../../utils';\nimport { useConsolidatedRef, useUID } from '../../hooks';\nimport Button, { ButtonProps } from '../Button';\nimport Flex from '../Flex';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport Text from '../Text';\nimport Progress from '../Progress';\nimport { Action, ForwardProps } from '../../types';\n\nimport {\n  StyledTemplate,\n  StyledTemplateRow,\n  StyledPageArticle,\n  StyledArticleHeader,\n  StyledPageActionCol,\n  StyledPageTitle,\n  StyledMenuColumn,\n  StyledCategoryHeadingRow,\n  StyledCategoryIconBlock,\n  StyledNav,\n  StyledNavList,\n  StyledNavGroup,\n  StyledNavGroupList,\n  StyledNavGroupHeader,\n  StyledNavItem,\n  StyledSkipNavigation\n} from './CategorySubPage.styles';\n\ninterface NavItemType extends ForwardProps {\n  text: string;\n  active?: boolean;\n  onClick?: MouseEventHandler;\n  href?: string;\n}\n\ninterface NavGroupType {\n  title?: string;\n  items: NavItemType[];\n}\n\ninterface PageAction\n  extends Pick<Action, 'id' | 'icon' | 'href' | 'onClick' | 'disabled'>,\n    Pick<ButtonProps, 'variant' | 'label' | 'aria-label' | 'loading'>,\n    ForwardProps {\n  /** Optional text to replace required text string in Action type */\n  text?: string;\n}\n\nexport interface TemplateProps {\n  /** Indicates that the primary view for the page cannot yet be rendered */\n  /** @default false */\n  viewLoading?: boolean;\n  /** Parent Category of page and all navigation items */\n  category: string;\n  /** Parent Category icon */\n  categoryIcon?: string;\n  navItemGroups: NavGroupType[];\n  pageTitle?: string;\n  /** Actions to render in fixed page header. Ordered by priority */\n  pageActions?: PageAction[];\n  /** Maximum top-level action buttons to render in header. Actions passed exceeding this limit will render in an action menu. */\n  /** @default 3 */\n  maxActions?: number;\n  /** Primary page content region */\n  region: ReactNode;\n  /** Ref forwarded to the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst NavItem = ({ item: { href, text, active, ...restProps } }: { item: NavItemType }) => {\n  const isAnchor = !!href;\n\n  return (\n    <StyledNavItem\n      as='li'\n      selected={!!active}\n      tabType='horizontal'\n      inverted={false}\n      aria-current={active ? 'page' : undefined}\n    >\n      <Button {...restProps} href={isAnchor ? href : undefined} variant='text'>\n        {text}\n      </Button>\n    </StyledNavItem>\n  );\n};\n\nconst NavGroup = ({ item }: { item: NavGroupType }) => {\n  const mappedGroupedItems = useMemo(() => {\n    return item.items.map(groupedItem => {\n      const key = groupedItem.text;\n      return <NavItem item={groupedItem} key={key} />;\n    });\n  }, [item.items]);\n\n  const titledGroup: boolean = useMemo(() => {\n    return !!item.title && !!item.items.length;\n  }, [item.title, item.items]);\n\n  const anonGroup: boolean = useMemo(() => {\n    return !item.title && item.items.length > 1;\n  }, [item.title, item.items]);\n\n  const groupLabelId = useUID();\n  if (titledGroup) {\n    return (\n      <StyledNavGroup as='li'>\n        <StyledNavGroupHeader variant='h3' id={groupLabelId}>\n          {(item as NavGroupType).title}\n        </StyledNavGroupHeader>\n\n        <StyledNavGroupList aria-labelledby={groupLabelId}>{mappedGroupedItems}</StyledNavGroupList>\n      </StyledNavGroup>\n    );\n  }\n\n  if (anonGroup) {\n    return <StyledNavGroup>{mappedGroupedItems}</StyledNavGroup>;\n  }\n\n  if (item.items.length === 1) {\n    return <NavItem item={item.items[0]} />;\n  }\n\n  return null;\n};\n\nconst CategorySubPage: FunctionComponent<TemplateProps & ForwardProps> = forwardRef(\n  (\n    {\n      viewLoading = false,\n      category,\n      categoryIcon,\n      navItemGroups,\n      pageTitle,\n      pageActions,\n      region,\n      maxActions = 3,\n      ...restProps\n    }: PropsWithoutRef<TemplateProps>,\n    ref: TemplateProps['ref']\n  ) => {\n    const articleRef = createRef<HTMLElement>();\n    const templateRef = useConsolidatedRef(ref);\n\n    const mappedAction = useCallback((action: PageAction) => {\n      const { id, text, icon, label, ...rest } = action;\n\n      return (\n        <Button {...rest} key={id} icon={!!icon && !text} label={label || text}>\n          {!!icon && <Icon name={icon} />}\n          {!!text && text}\n        </Button>\n      );\n    }, []);\n\n    return (\n      <StyledTemplate>\n        <Flex\n          {...restProps}\n          ref={templateRef}\n          as={StyledTemplateRow}\n          container={{ alignItems: 'stretch', wrap: 'nowrap' }}\n        >\n          <StyledMenuColumn>\n            <StyledSkipNavigation\n              onClick={() => {\n                if (articleRef.current) articleRef.current.focus();\n              }}\n            >\n              Skip to page content\n            </StyledSkipNavigation>\n\n            <Flex as={StyledCategoryHeadingRow} container={{ alignItems: 'center' }}>\n              {categoryIcon && (\n                <Flex\n                  as={StyledCategoryIconBlock}\n                  container={{ alignItems: 'center', justify: 'center' }}\n                >\n                  <Icon name={categoryIcon} />\n                </Flex>\n              )}\n              <Text variant='h1'>{category}</Text>\n            </Flex>\n\n            <StyledNav>\n              <StyledNavList>\n                {navItemGroups.map((navItem, index) => {\n                  const key = hasProp(navItem, 'title') ? navItem.title : `navItem${index}`;\n\n                  return <NavGroup key={key} item={navItem} />;\n                })}\n              </StyledNavList>\n            </StyledNav>\n          </StyledMenuColumn>\n\n          <Flex\n            as={StyledPageArticle}\n            item={{ grow: 1 }}\n            ref={articleRef}\n            aria-label={pageTitle || 'Main Content'}\n            tabIndex={0}\n          >\n            {viewLoading && <Progress placement='local' />}\n\n            {!viewLoading && (\n              <>\n                {(pageTitle || pageActions) && (\n                  <Flex\n                    as={StyledArticleHeader}\n                    container={{\n                      justify: 'between',\n                      alignItems: 'center',\n                      wrap: 'wrap'\n                    }}\n                  >\n                    {pageTitle && <StyledPageTitle>{pageTitle}</StyledPageTitle>}\n\n                    {pageActions && !!pageActions.length && (\n                      <>\n                        {pageActions.length <= maxActions && (\n                          <StyledPageActionCol>\n                            {pageActions.reverse().map(mappedAction)}\n                          </StyledPageActionCol>\n                        )}\n\n                        {pageActions.length > maxActions && (\n                          <StyledPageActionCol>\n                            <MenuButton\n                              text='Actions'\n                              menu={{\n                                items: (pageActions as Action[])\n                                  .slice(maxActions - 1)\n                                  .map(({ id, text, onClick, ...rest }) => ({\n                                    id,\n                                    primary: text,\n                                    onClick,\n                                    ...rest\n                                  }))\n                              }}\n                            />\n\n                            {pageActions\n                              .slice(0, maxActions - 1)\n                              .reverse()\n                              .map(mappedAction)}\n                          </StyledPageActionCol>\n                        )}\n                      </>\n                    )}\n                  </Flex>\n                )}\n\n                {region}\n              </>\n            )}\n          </Flex>\n        </Flex>\n      </StyledTemplate>\n    );\n  }\n);\n\nexport default CategorySubPage;\n"]}

package/lib/components/PageTemplates/CategorySubPage.styles.d.ts

@@ -0,0 +1,17 @@
+export declare const StyledSkipNavigation: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button").ButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNavItem: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Button/BareButton").BareButtonProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, import("../Tabs/Tab").StyledTabProps, never>;
+export declare const StyledNavGroupHeader: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Text").TextProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNavGroupList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNavGroup: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNavList: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledNav: import("styled-components").StyledComponent<"nav", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCategoryIconBlock: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCategoryHeadingRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledMenuColumn: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPageTitle: import("styled-components").StyledComponent<"h2", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPageActionCol: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledArticleHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledPageArticle: import("styled-components").StyledComponent<"article", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTemplateRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledTemplate: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+//# sourceMappingURL=CategorySubPage.styles.d.ts.map

package/lib/components/PageTemplates/CategorySubPage.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategorySubPage.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB,qMAoB/B,CAAC;AAEH,eAAO,MAAM,aAAa,sPAgExB,CAAC;AAGH,eAAO,MAAM,oBAAoB,iMAa/B,CAAC;AAGH,eAAO,MAAM,kBAAkB,wGAAc,CAAC;AAE9C,eAAO,MAAM,cAAc,yGAazB,CAAC;AAGH,eAAO,MAAM,aAAa,wGAwBxB,CAAC;AAEH,eAAO,MAAM,SAAS,yGAAe,CAAC;AAEtC,eAAO,MAAM,uBAAuB,yGAsBlC,CAAC;AAGH,eAAO,MAAM,wBAAwB,yGAcnC,CAAC;AAGH,eAAO,MAAM,gBAAgB,yGAuC3B,CAAC;AAGH,eAAO,MAAM,eAAe,wGAe1B,CAAC;AAGH,eAAO,MAAM,mBAAmB,yGAAe,CAAC;AAEhD,eAAO,MAAM,mBAAmB,4GAc9B,CAAC;AAGH,eAAO,MAAM,iBAAiB,6GA0B5B,CAAC;AAGH,eAAO,MAAM,iBAAiB,yGAe5B,CAAC;AAGH,eAAO,MAAM,cAAc,yGAG1B,CAAC"}

package/lib/components/PageTemplates/CategorySubPage.styles.js

@@ -0,0 +1,253 @@
+import styled, { css } from 'styled-components';
+import { readableColor } from 'polished';
+import Text from '../Text';
+import Button from '../Button';
+import { StyledTab } from '../Tabs/Tab';
+import { calculateFontSize, getHoverColors } from '../../styles';
+import { defaultThemeProp } from '../../theme';
+import { tryCatch } from '../../utils';
+export const StyledSkipNavigation = styled(Button)(({ theme }) => {
+    const { base: { palette: { 'primary-background': primaryBackground }, spacing } } = theme;
+    return css `
+    position: absolute;
+    top: ${spacing};
+    left: -200vw;
+    background-color: ${primaryBackground};
+    padding: calc(2 * ${spacing});
+
+    &:focus,
+    &:active {
+      left: ${spacing};
+    }
+  `;
+});
+export const StyledNavItem = styled(StyledTab)(({ theme }) => {
+    const { base: { breakpoints, palette: { interactive, 'app-background': hoverBase }, spacing } } = theme;
+    const hoverColors = getHoverColors(hoverBase);
+    return css `
+    height: auto;
+
+    a,
+    button {
+      display: block;
+      width: 100%;
+      padding: calc(0.8 * ${spacing}) calc(2 * ${spacing});
+    }
+
+    &[aria-current='page'] {
+      a {
+        color: ${interactive};
+      }
+
+      &::after {
+        background: ${interactive};
+      }
+    }
+
+    /* sm or below / "Mobile" (note: 0.0625em = 1px) */
+    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
+      a,
+      button {
+        text-transform: uppercase;
+        padding: calc(1.5 * ${spacing}) 0;
+
+        &:hover {
+          text-decoration: none;
+        }
+      }
+    }
+
+    /* md or above / "Desktop" */
+    @media all and (min-width: ${breakpoints.md}) {
+      padding-left: 0;
+      padding-right: 0;
+      border: none;
+
+      &::after {
+        content: none;
+      }
+
+      a,
+      button {
+        &:hover,
+        &:focus {
+          background: ${hoverColors.background};
+          color: ${hoverColors.foreground};
+          text-decoration: none;
+        }
+      }
+    }
+  `;
+});
+StyledNavItem.defaultProps = defaultThemeProp;
+export const StyledNavGroupHeader = styled(Text)(({ theme }) => {
+    const { base: { spacing, breakpoints } } = theme;
+    return css `
+    padding: calc(1.5 * ${spacing}) calc(2 * ${spacing});
+
+    /* sm or below / "Mobile" (note: 0.0625em = 1px) */
+    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
+      display: none;
+    }
+  `;
+});
+StyledNavGroupHeader.defaultProps = defaultThemeProp;
+export const StyledNavGroupList = styled.ul ``;
+export const StyledNavGroup = styled.div(({ theme }) => {
+    const { base: { breakpoints, spacing } } = theme;
+    return css `
+    margin: calc(2 * ${spacing}) 0;
+
+    /* sm or below / "Mobile" (note: 0.0625em = 1px) */
+    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
+      margin: 0;
+    }
+  `;
+});
+StyledNavGroup.defaultProps = defaultThemeProp;
+export const StyledNavList = styled.ul(({ theme }) => {
+    const { base: { breakpoints } } = theme;
+    return css `
+    &&,
+    li {
+      list-style-type: none;
+    }
+
+    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
+      white-space: nowrap;
+
+      li,
+      > div {
+        display: inline-block;
+      }
+    }
+
+    > ${StyledNavGroup}:first-child {
+      margin-top: 0;
+    }
+  `;
+});
+export const StyledNav = styled.nav ``;
+export const StyledCategoryIconBlock = styled.div(({ theme }) => {
+    const { base: { palette: { 'brand-primary': brandPrimary }, 'border-radius': baseBorderRadius, spacing } } = theme;
+    const color = tryCatch(() => readableColor(brandPrimary));
+    return css `
+    background: ${brandPrimary};
+    width: 2rem;
+    height: 2rem;
+    margin-inline-end: ${spacing};
+    border-radius: calc(0.5 * ${baseBorderRadius});
+
+    svg {
+      color: ${color};
+    }
+  `;
+});
+StyledCategoryIconBlock.defaultProps = defaultThemeProp;
+export const StyledCategoryHeadingRow = styled.div(({ theme }) => {
+    const { base: { breakpoints, spacing } } = theme;
+    return css `
+    padding: 0 calc(2 * ${spacing});
+    margin-bottom: calc(2 * ${spacing});
+
+    /* sm or below / "Mobile" (note: 0.0625em = 1px) */
+    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
+      margin-bottom: ${spacing};
+    }
+  `;
+});
+StyledCategoryHeadingRow.defaultProps = defaultThemeProp;
+export const StyledMenuColumn = styled.div(({ theme }) => {
+    const { base: { palette: { 'app-background': appBackground }, breakpoints, spacing } } = theme;
+    return css `
+    background-color: ${appBackground};
+    position: sticky;
+    top: 0;
+    overflow-y: auto;
+    max-height: 100%;
+    width: 100%;
+    padding: calc(2 * ${spacing}) 0;
+
+    /* sm or below / "Mobile" (note: 0.0625em = 1px) */
+    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
+      position: static;
+      padding-bottom: 0;
+    }
+
+    /* md or above */
+    @media all and (min-width: ${breakpoints.md}) {
+      max-width: 14.438rem;
+    }
+
+    /* lg or above */
+    @media all and (min-width: ${breakpoints.lg}) {
+      max-width: 17.563rem;
+    }
+
+    /* xl or above */
+    @media all and (min-width: ${breakpoints.xl}) {
+      max-width: 20.75rem;
+    }
+  `;
+});
+StyledMenuColumn.defaultProps = defaultThemeProp;
+export const StyledPageTitle = styled.h2(({ theme }) => {
+    const { base: { 'font-weight': { 'semi-bold': fontWeight }, 'font-size': fontSize, 'font-scale': fontScale } } = theme;
+    const fontSizes = calculateFontSize(fontSize, fontScale);
+    return css `
+    font-size: ${fontSizes['m']};
+    font-weight: ${fontWeight};
+  `;
+});
+StyledPageTitle.defaultProps = defaultThemeProp;
+export const StyledPageActionCol = styled.div ``;
+export const StyledArticleHeader = styled.header(({ theme }) => {
+    const { base: { palette: { 'primary-background': primaryBackground }, spacing } } = theme;
+    return css `
+    position: sticky;
+    top: 0;
+    background-color: ${primaryBackground};
+    padding: calc(2 * ${spacing}) 0 calc(3 * ${spacing});
+  `;
+});
+StyledArticleHeader.defaultProps = defaultThemeProp;
+export const StyledPageArticle = styled.article(({ theme }) => {
+    const { base: { breakpoints, palette: { 'primary-background': primaryBackground }, spacing } } = theme;
+    return css `
+    position: relative;
+    background-color: ${primaryBackground};
+    width: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+    padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});
+
+    &:focus {
+      outline: none;
+    }
+
+    /* sm or below / "Mobile" (note: 0.0625em = 1px) */
+    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
+      padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});
+    }
+  `;
+});
+StyledPageArticle.defaultProps = defaultThemeProp;
+export const StyledTemplateRow = styled.div(({ theme }) => {
+    const { base: { breakpoints } } = theme;
+    return css `
+    position: relative;
+    height: 100%;
+
+    /* sm or below / "Mobile" (note: 0.0625em = 1px) */
+    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {
+      flex-direction: column;
+      height: auto;
+    }
+  `;
+});
+StyledTemplateRow.defaultProps = defaultThemeProp;
+export const StyledTemplate = styled.div `
+  height: 0;
+  min-height: inherit;
+`;
+//# sourceMappingURL=CategorySubPage.styles.js.map

package/lib/components/PageTemplates/CategorySubPage.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategorySubPage.styles.js","sourceRoot":"","sources":["../../../src/components/PageTemplates/CategorySubPage.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport Text from '../Text';\nimport Button from '../Button';\nimport { StyledTab } from '../Tabs/Tab';\nimport { calculateFontSize, FontSize, getHoverColors } from '../../styles';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\n\nexport const StyledSkipNavigation = styled(Button)(({ theme }) => {\n  const {\n    base: {\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: absolute;\n    top: ${spacing};\n    left: -200vw;\n    background-color: ${primaryBackground};\n    padding: calc(2 * ${spacing});\n\n    &:focus,\n    &:active {\n      left: ${spacing};\n    }\n  `;\n});\n\nexport const StyledNavItem = styled(StyledTab)(({ theme }) => {\n  const {\n    base: {\n      breakpoints,\n      palette: { interactive, 'app-background': hoverBase },\n      spacing\n    }\n  } = theme;\n  const hoverColors = getHoverColors(hoverBase);\n\n  return css`\n    height: auto;\n\n    a,\n    button {\n      display: block;\n      width: 100%;\n      padding: calc(0.8 * ${spacing}) calc(2 * ${spacing});\n    }\n\n    &[aria-current='page'] {\n      a {\n        color: ${interactive};\n      }\n\n      &::after {\n        background: ${interactive};\n      }\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      a,\n      button {\n        text-transform: uppercase;\n        padding: calc(1.5 * ${spacing}) 0;\n\n        &:hover {\n          text-decoration: none;\n        }\n      }\n    }\n\n    /* md or above / \"Desktop\" */\n    @media all and (min-width: ${breakpoints.md}) {\n      padding-left: 0;\n      padding-right: 0;\n      border: none;\n\n      &::after {\n        content: none;\n      }\n\n      a,\n      button {\n        &:hover,\n        &:focus {\n          background: ${hoverColors.background};\n          color: ${hoverColors.foreground};\n          text-decoration: none;\n        }\n      }\n    }\n  `;\n});\nStyledNavItem.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupHeader = styled(Text)(({ theme }) => {\n  const {\n    base: { spacing, breakpoints }\n  } = theme;\n\n  return css`\n    padding: calc(1.5 * ${spacing}) calc(2 * ${spacing});\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      display: none;\n    }\n  `;\n});\nStyledNavGroupHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavGroupList = styled.ul``;\n\nexport const StyledNavGroup = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints, spacing }\n  } = theme;\n\n  return css`\n    margin: calc(2 * ${spacing}) 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      margin: 0;\n    }\n  `;\n});\nStyledNavGroup.defaultProps = defaultThemeProp;\n\nexport const StyledNavList = styled.ul(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n\n  return css`\n    &&,\n    li {\n      list-style-type: none;\n    }\n\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      white-space: nowrap;\n\n      li,\n      > div {\n        display: inline-block;\n      }\n    }\n\n    > ${StyledNavGroup}:first-child {\n      margin-top: 0;\n    }\n  `;\n});\n\nexport const StyledNav = styled.nav``;\n\nexport const StyledCategoryIconBlock = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'brand-primary': brandPrimary },\n      'border-radius': baseBorderRadius,\n      spacing\n    }\n  } = theme;\n\n  const color = tryCatch(() => readableColor(brandPrimary));\n\n  return css`\n    background: ${brandPrimary};\n    width: 2rem;\n    height: 2rem;\n    margin-inline-end: ${spacing};\n    border-radius: calc(0.5 * ${baseBorderRadius});\n\n    svg {\n      color: ${color};\n    }\n  `;\n});\nStyledCategoryIconBlock.defaultProps = defaultThemeProp;\n\nexport const StyledCategoryHeadingRow = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints, spacing }\n  } = theme;\n\n  return css`\n    padding: 0 calc(2 * ${spacing});\n    margin-bottom: calc(2 * ${spacing});\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      margin-bottom: ${spacing};\n    }\n  `;\n});\nStyledCategoryHeadingRow.defaultProps = defaultThemeProp;\n\nexport const StyledMenuColumn = styled.div(({ theme }) => {\n  const {\n    base: {\n      palette: { 'app-background': appBackground },\n      breakpoints,\n      spacing\n    }\n  } = theme;\n\n  return css`\n    background-color: ${appBackground};\n    position: sticky;\n    top: 0;\n    overflow-y: auto;\n    max-height: 100%;\n    width: 100%;\n    padding: calc(2 * ${spacing}) 0;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      position: static;\n      padding-bottom: 0;\n    }\n\n    /* md or above */\n    @media all and (min-width: ${breakpoints.md}) {\n      max-width: 14.438rem;\n    }\n\n    /* lg or above */\n    @media all and (min-width: ${breakpoints.lg}) {\n      max-width: 17.563rem;\n    }\n\n    /* xl or above */\n    @media all and (min-width: ${breakpoints.xl}) {\n      max-width: 20.75rem;\n    }\n  `;\n});\nStyledMenuColumn.defaultProps = defaultThemeProp;\n\nexport const StyledPageTitle = styled.h2(({ theme }) => {\n  const {\n    base: {\n      'font-weight': { 'semi-bold': fontWeight },\n      'font-size': fontSize,\n      'font-scale': fontScale\n    }\n  } = theme;\n\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${fontSizes['m' as FontSize]};\n    font-weight: ${fontWeight};\n  `;\n});\nStyledPageTitle.defaultProps = defaultThemeProp;\n\nexport const StyledPageActionCol = styled.div``;\n\nexport const StyledArticleHeader = styled.header(({ theme }) => {\n  const {\n    base: {\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: sticky;\n    top: 0;\n    background-color: ${primaryBackground};\n    padding: calc(2 * ${spacing}) 0 calc(3 * ${spacing});\n  `;\n});\nStyledArticleHeader.defaultProps = defaultThemeProp;\n\nexport const StyledPageArticle = styled.article(({ theme }) => {\n  const {\n    base: {\n      breakpoints,\n      palette: { 'primary-background': primaryBackground },\n      spacing\n    }\n  } = theme;\n\n  return css`\n    position: relative;\n    background-color: ${primaryBackground};\n    width: 100%;\n    max-height: 100%;\n    overflow-y: auto;\n    padding: 0 calc(3 * ${spacing}) calc(2 * ${spacing});\n\n    &:focus {\n      outline: none;\n    }\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      padding: 0 calc(2 * ${spacing}) calc(2 * ${spacing});\n    }\n  `;\n});\nStyledPageArticle.defaultProps = defaultThemeProp;\n\nexport const StyledTemplateRow = styled.div(({ theme }) => {\n  const {\n    base: { breakpoints }\n  } = theme;\n\n  return css`\n    position: relative;\n    height: 100%;\n\n    /* sm or below / \"Mobile\" (note: 0.0625em = 1px) */\n    @media all and (max-width: calc(${breakpoints.md} - 0.0625em)) {\n      flex-direction: column;\n      height: auto;\n    }\n  `;\n});\nStyledTemplateRow.defaultProps = defaultThemeProp;\n\nexport const StyledTemplate = styled.div`\n  height: 0;\n  min-height: inherit;\n`;\n"]}

package/lib/components/PageTemplates/DashboardPage.d.ts

@@ -0,0 +1,24 @@
+import { FunctionComponent, ReactNode } from 'react';
+import { ForwardProps } from '../../types';
+import { PageTemplateProps, PageLayoutProps } from './PageTemplates';
+export interface DashboardPageProps extends PageTemplateProps {
+    a: ReactNode;
+    b: ReactNode;
+    c: ReactNode;
+    filters?: ReactNode[];
+    fitToViewport?: boolean;
+}
+export interface DashboardPageLayoutProps extends PageLayoutProps {
+    filters?: ReactNode[];
+    filterPosition?: 'block-start' | 'inline-start' | 'inline-end';
+    fitToViewport?: boolean;
+    regionFullWidth: ReactNode[];
+}
+export declare const StyledFilterRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDashboardRegion: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledDashboardPageLayout: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    scrollContent: boolean | undefined;
+} & Pick<DashboardPageProps, "fitToViewport">, never>;
+declare const DashboardPage: FunctionComponent<DashboardPageProps & ForwardProps>;
+export default DashboardPage;
+//# sourceMappingURL=DashboardPage.d.ts.map

package/lib/components/PageTemplates/DashboardPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardPage.d.ts","sourceRoot":"","sources":["../../../src/components/PageTemplates/DashboardPage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,iBAAiB,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhG,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQ3C,OAAO,EACL,iBAAiB,EACjB,eAAe,EAKhB,MAAM,iBAAiB,CAAC;AAEzB,MAAM,WAAW,kBAAmB,SAAQ,iBAAiB;IAC3D,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,CAAC,EAAE,SAAS,CAAC;IACb,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,wBAAyB,SAAQ,eAAe;IAC/D,OAAO,CAAC,EAAE,SAAS,EAAE,CAAC;IACtB,cAAc,CAAC,EAAE,aAAa,GAAG,cAAc,GAAG,YAAY,CAAC;IAC/D,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,yGAAyB,CAAC;AAIzD,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAIF,eAAO,MAAM,yBAAyB;;qDAYpC,CAAC;AA+LH,QAAA,MAAM,aAAa,EAAE,iBAAiB,CAAC,kBAAkB,GAAG,YAAY,CAiBvE,CAAC;AAEF,eAAe,aAAa,CAAC"}