@pega/cosmos-react-demos 2.1.5 → 3.0.0-dev.10.1

package/lib/condition-builder/ConditionBuilder/props.mock.js

@@ -1,7 +1,22 @@
 export const demoFields = [
     { name: 'employeeId', label: 'Employee ID', type: 'TEXT' },
-    { name: 'firstName', label: 'First Name', type: 'TEXT' },
-    { name: 'lastName', label: 'Last Name', type: 'TEXT' },
+    {
+        name: 'firstName',
+        label: 'First Name',
+        type: 'TEXT'
+    },
+    {
+        name: 'lastName',
+        label: 'Last Name',
+        type: 'TEXT',
+        possibleValues: () => {
+            return new Promise(resolve => {
+                setTimeout(() => {
+                    resolve(['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7']);
+                }, 5000);
+            });
+        }
+    },
     { name: 'gender', label: 'Gender', type: 'TEXT' },
     {
         name: 'department',

package/lib/condition-builder/ConditionBuilder/props.mock.js.map

@@ -1 +1 @@
-{"version":3,"file":"props.mock.js","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/props.mock.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ComparatorsByType,\n  Condition,\n  DateFunctionsByType,\n  Field\n} from '@pega/cosmos-react-condition-builder';\n\nexport const demoFields: Field[] = [\n  { name: 'employeeId', label: 'Employee ID', type: 'TEXT' },\n  { name: 'firstName', label: 'First Name', type: 'TEXT' },\n  { name: 'lastName', label: 'Last Name', type: 'TEXT' },\n  { name: 'gender', label: 'Gender', type: 'TEXT' },\n  {\n    name: 'department',\n    label: 'Department',\n    type: 'TEXT',\n    possibleValues: [\n      'Customer Service',\n      'Engineering',\n      'Facilities',\n      'Finance',\n      'HR',\n      'IT',\n      'Sales'\n    ]\n  },\n  { name: 'age', label: 'Age', type: 'NUMBER' },\n  { name: 'experience', label: 'Experience (yrs)', type: 'NUMBER' },\n  { name: 'salary', label: 'Salary', type: 'NUMBER' },\n  { name: 'hireDate', label: 'Hire Date', type: 'DATE_ONLY' },\n  { name: 'dateOfBirth', label: 'Date of Birth', type: 'DATE_ONLY' },\n  {\n    name: 'shiftStartTime',\n    label: 'Shift start time',\n    type: 'TIME_ONLY',\n    groupLabel: 'Technical details'\n  },\n  {\n    name: 'shiftEndTime',\n    label: 'Shift end time',\n    type: 'TIME_ONLY',\n    groupLabel: 'Technical details'\n  },\n  {\n    name: 'lastActivityAt',\n    label: 'Last activity at',\n    type: 'DATE_TIME',\n    groupLabel: 'Technical details'\n  },\n  {\n    name: 'nextPasswordReset',\n    label: 'Next password reset',\n    type: 'DATE_TIME',\n    groupLabel: 'Technical details'\n  },\n  { name: 'isSeniorCitizen', label: 'Is Senior Citizen', type: 'BOOLEAN' },\n  { name: 'isRemoteEmployee', label: 'Is Remote Employee', type: 'BOOLEAN' }\n];\n\nexport const demoCondition: Condition = {\n  AND: [\n    {\n      condition: {\n        lhs: {\n          field: 'lastActivityAt'\n        },\n        comparator: 'EQ',\n        rhs: {\n          value: '2021-08-13T14:30'\n        }\n      }\n    },\n    {\n      NOT: {\n        OR: [\n          {\n            condition: {\n              lhs: { field: 'experience' },\n              comparator: 'GTE',\n              rhs: { value: 10 }\n            }\n          },\n          {\n            condition: {\n              lhs: { field: 'isRemoteEmployee' },\n              comparator: 'IS_TRUE'\n            }\n          }\n        ]\n      }\n    }\n  ]\n};\n\nexport const demoComparators: ComparatorsByType[] = [\n  { type: 'TEXT', comparators: ['EQ', 'NEQ'] },\n  { type: 'NUMBER', comparators: ['GT', 'GTE', 'LT', 'LTE'] },\n  { type: 'BOOLEAN', comparators: ['IS_TRUE', 'IS_FALSE'] }\n];\n\nexport const demoDateFunctions: DateFunctionsByType = {\n  DATE_TIME: [\n    'YEARS',\n    'QUARTERS',\n    'MONTHS',\n    'WEEKS',\n    'DAYS',\n    'HOURS',\n    'MONTHS_OF_YEAR',\n    'DAYS_OF_MONTH',\n    'DAYS_OF_WEEK'\n  ],\n  DATE_ONLY: [\n    'YEARS',\n    'QUARTERS',\n    'MONTHS',\n    'WEEKS',\n    'MONTHS_OF_YEAR',\n    'DAYS_OF_MONTH',\n    'DAYS_OF_WEEK'\n  ]\n};\n"]}
+{"version":3,"file":"props.mock.js","sourceRoot":"","sources":["../../../src/condition-builder/ConditionBuilder/props.mock.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,UAAU,GAAY;IACjC,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,MAAM,EAAE;IAC1D;QACE,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,MAAM;KACb;IACD;QACE,IAAI,EAAE,UAAU;QAChB,KAAK,EAAE,WAAW;QAClB,IAAI,EAAE,MAAM;QACZ,cAAc,EAAE,GAAG,EAAE;YACnB,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE;gBAC3B,UAAU,CAAC,GAAG,EAAE;oBACd,OAAO,CAAC,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;gBACzF,CAAC,EAAE,IAAI,CAAC,CAAC;YACX,CAAC,CAAC,CAAC;QACL,CAAC;KACF;IACD,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE;IACjD;QACE,IAAI,EAAE,YAAY;QAClB,KAAK,EAAE,YAAY;QACnB,IAAI,EAAE,MAAM;QACZ,cAAc,EAAE;YACd,kBAAkB;YAClB,aAAa;YACb,YAAY;YACZ,SAAS;YACT,IAAI;YACJ,IAAI;YACJ,OAAO;SACR;KACF;IACD,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE;IAC7C,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,kBAAkB,EAAE,IAAI,EAAE,QAAQ,EAAE;IACjE,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE;IACnD,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE;IAC3D,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,eAAe,EAAE,IAAI,EAAE,WAAW,EAAE;IAClE;QACE,IAAI,EAAE,gBAAgB;QACtB,KAAK,EAAE,kBAAkB;QACzB,IAAI,EAAE,WAAW;QACjB,UAAU,EAAE,mBAAmB;KAChC;IACD;QACE,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,gBAAgB;QACvB,IAAI,EAAE,WAAW;QACjB,UAAU,EAAE,mBAAmB;KAChC;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,KAAK,EAAE,kBAAkB;QACzB,IAAI,EAAE,WAAW;QACjB,UAAU,EAAE,mBAAmB;KAChC;IACD;QACE,IAAI,EAAE,mBAAmB;QACzB,KAAK,EAAE,qBAAqB;QAC5B,IAAI,EAAE,WAAW;QACjB,UAAU,EAAE,mBAAmB;KAChC;IACD,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,mBAAmB,EAAE,IAAI,EAAE,SAAS,EAAE;IACxE,EAAE,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,oBAAoB,EAAE,IAAI,EAAE,SAAS,EAAE;CAC3E,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,GAAG,EAAE;QACH;YACE,SAAS,EAAE;gBACT,GAAG,EAAE;oBACH,KAAK,EAAE,gBAAgB;iBACxB;gBACD,UAAU,EAAE,IAAI;gBAChB,GAAG,EAAE;oBACH,KAAK,EAAE,kBAAkB;iBAC1B;aACF;SACF;QACD;YACE,GAAG,EAAE;gBACH,EAAE,EAAE;oBACF;wBACE,SAAS,EAAE;4BACT,GAAG,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE;4BAC5B,UAAU,EAAE,KAAK;4BACjB,GAAG,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;yBACnB;qBACF;oBACD;wBACE,SAAS,EAAE;4BACT,GAAG,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE;4BAClC,UAAU,EAAE,SAAS;yBACtB;qBACF;iBACF;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAwB;IAClD,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;IAC5C,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,EAAE;IAC3D,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE;CAC1D,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAwB;IACpD,SAAS,EAAE;QACT,OAAO;QACP,UAAU;QACV,QAAQ;QACR,OAAO;QACP,MAAM;QACN,OAAO;QACP,gBAAgB;QAChB,eAAe;QACf,cAAc;KACf;IACD,SAAS,EAAE;QACT,OAAO;QACP,UAAU;QACV,QAAQ;QACR,OAAO;QACP,gBAAgB;QAChB,eAAe;QACf,cAAc;KACf;CACF,CAAC","sourcesContent":["import {\n  ComparatorsByType,\n  Condition,\n  DateFunctionsByType,\n  Field\n} from '@pega/cosmos-react-condition-builder';\n\nexport const demoFields: Field[] = [\n  { name: 'employeeId', label: 'Employee ID', type: 'TEXT' },\n  {\n    name: 'firstName',\n    label: 'First Name',\n    type: 'TEXT'\n  },\n  {\n    name: 'lastName',\n    label: 'Last Name',\n    type: 'TEXT',\n    possibleValues: () => {\n      return new Promise(resolve => {\n        setTimeout(() => {\n          resolve(['Value 1', 'Value 2', 'Value 3', 'Value 4', 'Value 5', 'Value 6', 'Value 7']);\n        }, 5000);\n      });\n    }\n  },\n  { name: 'gender', label: 'Gender', type: 'TEXT' },\n  {\n    name: 'department',\n    label: 'Department',\n    type: 'TEXT',\n    possibleValues: [\n      'Customer Service',\n      'Engineering',\n      'Facilities',\n      'Finance',\n      'HR',\n      'IT',\n      'Sales'\n    ]\n  },\n  { name: 'age', label: 'Age', type: 'NUMBER' },\n  { name: 'experience', label: 'Experience (yrs)', type: 'NUMBER' },\n  { name: 'salary', label: 'Salary', type: 'NUMBER' },\n  { name: 'hireDate', label: 'Hire Date', type: 'DATE_ONLY' },\n  { name: 'dateOfBirth', label: 'Date of Birth', type: 'DATE_ONLY' },\n  {\n    name: 'shiftStartTime',\n    label: 'Shift start time',\n    type: 'TIME_ONLY',\n    groupLabel: 'Technical details'\n  },\n  {\n    name: 'shiftEndTime',\n    label: 'Shift end time',\n    type: 'TIME_ONLY',\n    groupLabel: 'Technical details'\n  },\n  {\n    name: 'lastActivityAt',\n    label: 'Last activity at',\n    type: 'DATE_TIME',\n    groupLabel: 'Technical details'\n  },\n  {\n    name: 'nextPasswordReset',\n    label: 'Next password reset',\n    type: 'DATE_TIME',\n    groupLabel: 'Technical details'\n  },\n  { name: 'isSeniorCitizen', label: 'Is Senior Citizen', type: 'BOOLEAN' },\n  { name: 'isRemoteEmployee', label: 'Is Remote Employee', type: 'BOOLEAN' }\n];\n\nexport const demoCondition: Condition = {\n  AND: [\n    {\n      condition: {\n        lhs: {\n          field: 'lastActivityAt'\n        },\n        comparator: 'EQ',\n        rhs: {\n          value: '2021-08-13T14:30'\n        }\n      }\n    },\n    {\n      NOT: {\n        OR: [\n          {\n            condition: {\n              lhs: { field: 'experience' },\n              comparator: 'GTE',\n              rhs: { value: 10 }\n            }\n          },\n          {\n            condition: {\n              lhs: { field: 'isRemoteEmployee' },\n              comparator: 'IS_TRUE'\n            }\n          }\n        ]\n      }\n    }\n  ]\n};\n\nexport const demoComparators: ComparatorsByType[] = [\n  { type: 'TEXT', comparators: ['EQ', 'NEQ'] },\n  { type: 'NUMBER', comparators: ['GT', 'GTE', 'LT', 'LTE'] },\n  { type: 'BOOLEAN', comparators: ['IS_TRUE', 'IS_FALSE'] }\n];\n\nexport const demoDateFunctions: DateFunctionsByType = {\n  DATE_TIME: [\n    'YEARS',\n    'QUARTERS',\n    'MONTHS',\n    'WEEKS',\n    'DAYS',\n    'HOURS',\n    'MONTHS_OF_YEAR',\n    'DAYS_OF_MONTH',\n    'DAYS_OF_WEEK'\n  ],\n  DATE_ONLY: [\n    'YEARS',\n    'QUARTERS',\n    'MONTHS',\n    'WEEKS',\n    'MONTHS_OF_YEAR',\n    'DAYS_OF_MONTH',\n    'DAYS_OF_WEEK'\n  ]\n};\n"]}

package/lib/core/AppShell/AppShell.mocks.js

@@ -60,20 +60,20 @@ export const defaultNotifications = [
         id: '123',
         primary: "Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.",
         secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],
-        visual: _jsx(Avatar, { name: 'Dean Thomas' }, void 0),
+        visual: _jsx(Avatar, { name: 'Dean Thomas' }),
         unread: true
     },
     {
         id: '456',
         primary: "Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.",
-        visual: _jsx(Avatar, { name: 'Seth DeAngelo' }, void 0),
+        visual: _jsx(Avatar, { name: 'Seth DeAngelo' }),
         unread: true
     },
     {
         id: '789',
         primary: "Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.",
         secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],
-        visual: _jsx(Avatar, { name: 'Janet Moore' }, void 0),
+        visual: _jsx(Avatar, { name: 'Janet Moore' }),
         unread: true
     },
     {
@@ -127,9 +127,9 @@ export const defaultRecents = [
         secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]
     }
 ];
-export const defaultMainContent = (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledMainContent, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { variant: 'h2', children: "This is the main content" }, void 0) }, void 0) }, void 0) }, void 0));
+export const defaultMainContent = (_jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledMainContent, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { variant: 'h2', children: "This is the main content" }) }) }) }));
 export const operatorData = {
-    avatar: _jsx(Avatar, { name: 'Cindy Turner' }, void 0),
+    avatar: _jsx(Avatar, { name: 'Cindy Turner' }),
     actions: [
         { text: 'Profile', id: 'profile' },
         { text: 'Settings', id: 'settings' },

package/lib/core/AppShell/AppShell.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.mocks.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AppShellProps,\n  Avatar,\n  Card,\n  CardContent,\n  DrawerItemProps,\n  Flex,\n  ForwardProps,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledMainContent } from './AppShell.styles';\n\nexport const defaultLinks: AppShellProps['links'] = [\n  {\n    id: '01',\n    name: 'Home',\n    href: '#home',\n    icon: 'home-solid',\n    active: true\n  },\n  {\n    id: '02',\n    name: 'My Dashboard',\n    href: '#dashboard',\n    icon: 'gauge-solid'\n  },\n  {\n    id: '03',\n    name: 'Collaboration',\n    href: '#collaboration',\n    icon: 'social-solid',\n    links: [\n      { id: '3-01', name: 'Spaces', href: '#spaces' },\n      { id: '3-02', name: 'Documents', href: '#documents' }\n    ]\n  },\n\n  {\n    id: '04',\n    name: 'Bugs',\n    href: '#bugs',\n    icon: 'users-solid'\n  },\n  {\n    id: '05',\n    name: 'Epics',\n    href: '#epics',\n    icon: 'book-solid'\n  },\n  {\n    id: '06',\n    name: 'Goals',\n    href: '#goals',\n    icon: 'analytics-good'\n  },\n  {\n    id: '07',\n    name: 'More',\n    href: '#more',\n    icon: 'more-alt',\n    active: false,\n    links: [\n      { id: '7-01', name: 'Item A', href: '#itemA' },\n      { id: '7-02', name: 'Option 1', href: '#option1' }\n    ]\n  }\n];\n\nexport const defaultNotifications: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary:\n      \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],\n    visual: <Avatar name='Dean Thomas' />,\n    unread: true\n  },\n  {\n    id: '456',\n    primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n    visual: <Avatar name='Seth DeAngelo' />,\n    unread: true\n  },\n  {\n    id: '789',\n    primary:\n      \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],\n    visual: <Avatar name='Janet Moore' />,\n    unread: true\n  },\n  {\n    id: '000',\n    primary: 'You have been awarded Employee of the Month! Congratulations!',\n    secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],\n    unread: true\n  }\n];\n\nexport const defaultRecents: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '456',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '789',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '111',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '222',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '333',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '444',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '555',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '666',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  }\n];\n\nexport const defaultMainContent = (\n  <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>\n    <Card>\n      <CardContent>\n        <Text variant='h2'>This is the main content</Text>\n      </CardContent>\n    </Card>\n  </Flex>\n);\n\nexport const operatorData = {\n  avatar: <Avatar name='Cindy Turner' />,\n  actions: [\n    { text: 'Profile', id: 'profile' },\n    { text: 'Settings', id: 'settings' },\n    { text: 'My applications', id: 'apps' },\n    { text: 'Help center', id: 'help' },\n    { text: 'Log out', id: 'logout' }\n  ],\n  name: 'Cindy Turner'\n};\n"]}
+{"version":3,"file":"AppShell.mocks.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  AppShellProps,\n  Avatar,\n  Card,\n  CardContent,\n  DrawerItemProps,\n  Flex,\n  ForwardProps,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledMainContent } from './AppShell.styles';\n\nexport const defaultLinks: AppShellProps['links'] = [\n  {\n    id: '01',\n    name: 'Home',\n    href: '#home',\n    icon: 'home-solid',\n    active: true\n  },\n  {\n    id: '02',\n    name: 'My Dashboard',\n    href: '#dashboard',\n    icon: 'gauge-solid'\n  },\n  {\n    id: '03',\n    name: 'Collaboration',\n    href: '#collaboration',\n    icon: 'social-solid',\n    links: [\n      { id: '3-01', name: 'Spaces', href: '#spaces' },\n      { id: '3-02', name: 'Documents', href: '#documents' }\n    ]\n  },\n\n  {\n    id: '04',\n    name: 'Bugs',\n    href: '#bugs',\n    icon: 'users-solid'\n  },\n  {\n    id: '05',\n    name: 'Epics',\n    href: '#epics',\n    icon: 'book-solid'\n  },\n  {\n    id: '06',\n    name: 'Goals',\n    href: '#goals',\n    icon: 'analytics-good'\n  },\n  {\n    id: '07',\n    name: 'More',\n    href: '#more',\n    icon: 'more-alt',\n    active: false,\n    links: [\n      { id: '7-01', name: 'Item A', href: '#itemA' },\n      { id: '7-02', name: 'Option 1', href: '#option1' }\n    ]\n  }\n];\n\nexport const defaultNotifications: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary:\n      \"Dean Thomas mentioned your team in a bug 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()],\n    visual: <Avatar name='Dean Thomas' />,\n    unread: true\n  },\n  {\n    id: '456',\n    primary: \"Seth DeAngelo mentioned your team in a bug 'Text variant h1 renders as h3 in DOM'.\",\n    visual: <Avatar name='Seth DeAngelo' />,\n    unread: true\n  },\n  {\n    id: '789',\n    primary:\n      \"Janet Moore mentioned your team in a bug 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-12345', new Date(2020, 9, 2, 9, 22).toDateString()],\n    visual: <Avatar name='Janet Moore' />,\n    unread: true\n  },\n  {\n    id: '000',\n    primary: 'You have been awarded Employee of the Month! Congratulations!',\n    secondary: [new Date(2020, 9, 8, 14, 46).toDateString()],\n    unread: true\n  }\n];\n\nexport const defaultRecents: (DrawerItemProps & ForwardProps)[] = [\n  {\n    id: '123',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '456',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '789',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '111',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '222',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '333',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  },\n  {\n    id: '444',\n    primary: \"BUG-12345: 'Button does not initiate onClick event handler'.\",\n    secondary: ['BUG-12345', new Date(2020, 8, 31, 13, 23).toDateString()]\n  },\n  {\n    id: '555',\n    primary: \"BUG-54321: 'Text variant h1 renders as h3 in DOM'.\"\n  },\n  {\n    id: '666',\n    primary:\n      \"BUG-00000: 'Tree expanded state does not match the state that was set on the component'.\",\n    secondary: ['BUG-00000', new Date(2020, 9, 2, 9, 22).toDateString()]\n  }\n];\n\nexport const defaultMainContent = (\n  <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledMainContent}>\n    <Card>\n      <CardContent>\n        <Text variant='h2'>This is the main content</Text>\n      </CardContent>\n    </Card>\n  </Flex>\n);\n\nexport const operatorData = {\n  avatar: <Avatar name='Cindy Turner' />,\n  actions: [\n    { text: 'Profile', id: 'profile' },\n    { text: 'Settings', id: 'settings' },\n    { text: 'My applications', id: 'apps' },\n    { text: 'Help center', id: 'help' },\n    { text: 'Log out', id: 'logout' }\n  ],\n  name: 'Cindy Turner'\n};\n"]}

package/lib/core/AppShell/AppShell.stories.d.ts

@@ -25,9 +25,15 @@ interface AppShellStoryProps {
     environmentColor?: string;
     notificationsEmpty?: boolean;
     notificationsLoading?: boolean;
+    casesTypesEmpty?: boolean;
     recentsEmpty?: boolean;
     recentsLoading?: boolean;
     pinsLoading?: boolean;
 }
 export declare const AppShellDemo: Story<AppShellStoryProps>;
+interface ConfigurableAppShellProps {
+    navColor?: string;
+    headerColor?: string;
+}
+export declare const ConfigurableAppShell: Story<ConfigurableAppShellProps>;
 //# sourceMappingURL=AppShell.stories.d.ts.map

package/lib/core/AppShell/AppShell.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,aAAa,EAkBd,MAAM,yBAAyB,CAAC;;AAcjC,wBAOU;AAEV,UAAU,kBAAkB;IAC1B,iBAAiB;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,yBAAyB;IACzB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAqPlD,CAAC"}
+{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,aAAa,EAmBd,MAAM,yBAAyB,CAAC;;AAcjC,wBAOU;AAEV,UAAU,kBAAkB;IAC1B,iBAAiB;IACjB,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAErC,yBAAyB;IACzB,OAAO,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IACpD,IAAI,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;IAChD,YAAY,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,CAAC;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAqPlD,CAAC;AAsCF,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,yBAAyB,CAqBjE,CAAC"}

package/lib/core/AppShell/AppShell.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext, useState, useMemo, useRef } from 'react';
-import { AppShell, AppShellList, Button, DateInput, Grid, Icon, registerIcon, Input, Select, Option, Modal, ModalManagerContext, TextArea, ToasterContext, useAfterInitialEffect, windowIsAvailable } from '@pega/cosmos-react-core';
+import { AppShell, AppShellList, Button, DateInput, Grid, Icon, registerIcon, Input, Select, Option, Modal, ModalManagerContext, TextArea, ToasterContext, useAfterInitialEffect, windowIsAvailable, Configuration } from '@pega/cosmos-react-core';
 import * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';
 import * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';
 import { defaultLinks, defaultMainContent, defaultNotifications, defaultRecents, operatorData } from './AppShell.mocks';
@@ -18,11 +18,11 @@ export const AppShellDemo = (args) => {
         const { ModalContext } = useContext(ModalManagerContext);
         const { dismiss } = useContext(ModalContext);
         const { push: pushToaster } = useContext(ToasterContext);
-        return (_jsx(Modal, { as: 'form', heading: `New ${caseType}`, actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: "Cancel" }, void 0), _jsx(Button, { variant: 'primary', type: 'submit', onClick: (e) => {
+        return (_jsx(Modal, { as: 'form', heading: `New ${caseType}`, actions: _jsxs(_Fragment, { children: [_jsx(Button, { onClick: dismiss, children: "Cancel" }), _jsx(Button, { variant: 'primary', type: 'submit', onClick: (e) => {
                             e.preventDefault();
                             dismiss();
                             pushToaster({ content: `${caseType} requested` });
-                        }, children: "Request" }, void 0)] }, void 0), children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(DateInput, { label: 'Date Requested', info: null }, void 0), _jsxs(Select, { label: 'Department', children: [_jsx(Option, { value: '', children: "Select\u2026" }, void 0), _jsx(Option, { value: 'Fire', children: "Fire" }, void 0), _jsx(Option, { value: 'Facilities', children: "Facilities" }, void 0), _jsx(Option, { value: 'Parks', children: "Parks" }, void 0), _jsx(Option, { value: 'Sanitation', children: "Sanitation" }, void 0), _jsx(Option, { value: 'Parking & Traffic', children: "Parking & Traffic" }, void 0), _jsx(Option, { value: 'Police', children: "Police" }, void 0), _jsx(Option, { value: 'Courts', children: "Courts" }, void 0), _jsx(Option, { value: 'Healthcare', children: "Healthcare" }, void 0), _jsx(Option, { value: 'Energy', children: "Energy" }, void 0), _jsx(Option, { value: 'Justice department', children: "Justice department" }, void 0), _jsx(Option, { value: 'Environmental', children: "Environmental" }, void 0)] }, void 0), _jsx(TextArea, { label: 'Purpose of Purchase' }, void 0), _jsxs(Select, { label: 'Desired Make', children: [_jsx(Option, { value: '', children: "Select..." }, void 0), _jsx(Option, { value: 'Ford', children: "Ford" }, void 0), _jsx(Option, { value: 'Dodge', children: "Dodge" }, void 0), _jsx(Option, { value: 'Toyota', children: "Toyota" }, void 0), _jsx(Option, { value: 'Tesla', children: "Tesla" }, void 0)] }, void 0), _jsx(Input, { label: 'Desired Make' }, void 0), _jsx(Input, { type: 'number', min: '2016', max: '2021', label: 'Year', info: 'Must be within last 5 years' }, void 0), _jsx(Input, { type: 'number', min: '0.01', step: '0.01', max: '50000', label: 'Estimated Cost', info: 'May not exceed $50,000.00' }, void 0)] }, void 0) }, void 0));
+                        }, children: "Request" })] }), children: _jsxs(Grid, { container: { rowGap: 2 }, children: [_jsx(DateInput, { label: 'Date Requested', info: null }), _jsxs(Select, { label: 'Department', children: [_jsx(Option, { value: '', children: "Select\u2026" }), _jsx(Option, { value: 'Fire', children: "Fire" }), _jsx(Option, { value: 'Facilities', children: "Facilities" }), _jsx(Option, { value: 'Parks', children: "Parks" }), _jsx(Option, { value: 'Sanitation', children: "Sanitation" }), _jsx(Option, { value: 'Parking & Traffic', children: "Parking & Traffic" }), _jsx(Option, { value: 'Police', children: "Police" }), _jsx(Option, { value: 'Courts', children: "Courts" }), _jsx(Option, { value: 'Healthcare', children: "Healthcare" }), _jsx(Option, { value: 'Energy', children: "Energy" }), _jsx(Option, { value: 'Justice department', children: "Justice department" }), _jsx(Option, { value: 'Environmental', children: "Environmental" })] }), _jsx(TextArea, { label: 'Purpose of Purchase' }), _jsxs(Select, { label: 'Desired Make', children: [_jsx(Option, { value: '', children: "Select..." }), _jsx(Option, { value: 'Ford', children: "Ford" }), _jsx(Option, { value: 'Dodge', children: "Dodge" }), _jsx(Option, { value: 'Toyota', children: "Toyota" }), _jsx(Option, { value: 'Tesla', children: "Tesla" })] }), _jsx(Input, { label: 'Desired Make' }), _jsx(Input, { type: 'number', min: '2016', max: '2021', label: 'Year', info: 'Must be within last 5 years' }), _jsx(Input, { type: 'number', min: '0.01', step: '0.01', max: '50000', label: 'Estimated Cost', info: 'May not exceed $50,000.00' })] }) }));
     };
     const caseLinks = args.caseLinks || defaultLinks;
     const showSearch = args.withSearch !== undefined ? args.withSearch : true;
@@ -111,9 +111,9 @@ export const AppShellDemo = (args) => {
     const defaultUtils = [
         {
             name: 'Notifications',
-            visual: _jsx(Icon, { name: 'bell-solid' }, void 0),
+            visual: _jsx(Icon, { name: 'bell-solid' }),
             count: args.notificationsEmpty ? 0 : numNewNotifications,
-            drawerView: _jsx(AppShellList, { listView: notificationViewItems }, void 0),
+            drawerView: _jsx(AppShellList, { listView: notificationViewItems }),
             onDrawerOpen: () => {
                 clearInterval(newNotificationCountTimerRef.current);
                 setNumNewNotifications(0);
@@ -130,8 +130,8 @@ export const AppShellDemo = (args) => {
         },
         {
             name: 'Recents',
-            visual: _jsx(Icon, { name: 'clock-solid' }, void 0),
-            drawerView: _jsx(AppShellList, { listView: recentViewItems }, void 0)
+            visual: _jsx(Icon, { name: 'clock-solid' }),
+            drawerView: _jsx(AppShellList, { listView: recentViewItems })
         }
     ];
     return (_jsx(AppShell, { appInfo: args.appInfo || {
@@ -149,12 +149,12 @@ export const AppShellDemo = (args) => {
                 },
                 value: searchVal
             }
-            : undefined, appHeader: args.appHeader, caseTypes: args.createLinks || defaultCreateLinks, links: linksWithHandlers, main: args.main || defaultMainContent, cases: args.cases, banners: args.banners, operator: operatorData, utils: args.utils || defaultUtils, environment: args.environmentName
+            : undefined, appHeader: args.appHeader, caseTypes: args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks, links: linksWithHandlers, main: args.main || defaultMainContent, cases: args.cases, banners: args.banners, operator: operatorData, utils: args.utils || defaultUtils, environment: args.environmentName
             ? {
                 name: args.environmentName,
                 color: args.environmentColor
             }
-            : undefined }, void 0));
+            : undefined }));
 };
 AppShellDemo.args = {
     appName: 'Cosmos AppShell',
@@ -168,6 +168,7 @@ AppShellDemo.args = {
     environmentColor: '#FFDBDE',
     notificationsEmpty: false,
     notificationsLoading: false,
+    casesTypesEmpty: false,
     recentsEmpty: false,
     recentsLoading: false,
     pinsLoading: false
@@ -184,8 +185,31 @@ AppShellDemo.argTypes = {
     environmentColor: { control: { type: 'color' } },
     notificationsEmpty: { control: { type: 'boolean' } },
     notificationsLoading: { control: { type: 'boolean' } },
+    casesTypesEmpty: { control: { type: 'boolean' } },
     recentsEmpty: { control: { type: 'boolean' } },
     recentsLoading: { control: { type: 'boolean' } },
     pinsLoading: { control: { type: 'boolean' } }
 };
+export const ConfigurableAppShell = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                'app-shell': {
+                    nav: {
+                        'background-color': args.navColor
+                    },
+                    header: {
+                        'background-color': args.headerColor
+                    }
+                }
+            }
+        }, children: _jsx(AppShellDemo, { appHeader: true }) }));
+};
+ConfigurableAppShell.args = {
+    navColor: '#252c32',
+    headerColor: '#e2f1ff'
+};
+ConfigurableAppShell.argTypes = {
+    navColor: { control: { type: 'color' } },
+    headerColor: { control: { type: 'color' } }
+};
 //# sourceMappingURL=AppShell.stories.js.map

package/lib/core/AppShell/AppShell.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAc,UAAU,EAAa,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EACL,QAAQ,EAER,YAAY,EAEZ,MAAM,EACN,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,EACL,mBAAmB,EACnB,QAAQ,EACR,cAAc,EAEd,qBAAqB,EACrB,iBAAiB,EAClB,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AAErG,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,oBAAoB,EACpB,cAAc,EACd,YAAY,EACb,MAAM,kBAAkB,CAAC;AAE1B,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAE5C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,EAAE,EAAE,WAAW;IACf,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AA+BV,MAAM,CAAC,MAAM,YAAY,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAClF,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAwB,EAAE,EAAE;QAC7D,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;QACzD,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;QAC7C,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;QAEzD,OAAO,CACL,KAAC,KAAK,IACJ,EAAE,EAAC,MAAM,EACT,OAAO,EAAE,OAAO,QAAQ,EAAE,EAC1B,OAAO,EACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,+BAAiB,EACzC,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAY,EAAE,EAAE;4BACxB,CAAC,CAAC,cAAc,EAAE,CAAC;4BACnB,OAAO,EAAE,CAAC;4BACV,WAAW,CAAC,EAAE,OAAO,EAAE,GAAG,QAAQ,YAAY,EAAE,CAAC,CAAC;wBACpD,CAAC,gCAGM,YACR,YAGL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAC5B,KAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,WAAI,EAChD,MAAC,MAAM,IAAC,KAAK,EAAC,YAAY,aACxB,KAAC,MAAM,IAAC,KAAK,EAAC,EAAE,qCAAiB,EACjC,KAAC,MAAM,IAAC,KAAK,EAAC,MAAM,6BAAc,EAClC,KAAC,MAAM,IAAC,KAAK,EAAC,YAAY,mCAAoB,EAC9C,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,8BAAe,EACpC,KAAC,MAAM,IAAC,KAAK,EAAC,YAAY,mCAAoB,EAC9C,KAAC,MAAM,IAAC,KAAK,EAAC,mBAAuB,0CAA+B,EACpE,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,+BAAgB,EACtC,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,+BAAgB,EACtC,KAAC,MAAM,IAAC,KAAK,EAAC,YAAY,mCAAoB,EAC9C,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,+BAAgB,EACtC,KAAC,MAAM,IAAC,KAAK,EAAC,oBAAoB,2CAA4B,EAC9D,KAAC,MAAM,IAAC,KAAK,EAAC,eAAe,sCAAuB,YAC7C,EACT,KAAC,QAAQ,IAAC,KAAK,EAAC,qBAAqB,WAAG,EACxC,MAAC,MAAM,IAAC,KAAK,EAAC,cAAc,aAC1B,KAAC,MAAM,IAAC,KAAK,EAAC,EAAE,kCAAmB,EACnC,KAAC,MAAM,IAAC,KAAK,EAAC,MAAM,6BAAc,EAClC,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,8BAAe,EACpC,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,+BAAgB,EACtC,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,8BAAe,YAC7B,EACT,KAAC,KAAK,IAAC,KAAK,EAAC,cAAc,WAAG,EAC9B,KAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,MAAM,EACV,GAAG,EAAC,MAAM,EACV,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,6BAA6B,WAClC,EACF,KAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,MAAM,EACX,GAAG,EAAC,OAAO,EACX,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,2BAA2B,WAChC,YACG,WACD,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,YAAY,CAAC;IACjD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IAE1E,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAChE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAyB,SAAS,CAAC,CAAC;IACtE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GACrC,QAAQ,CAAqC,oBAAoB,CAAC,CAAC;IACrE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CACpC,IAAI,CAAC,WAAW,IAAI,cAAc,CACnC,CAAC;IACF,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAC3C,CAAC;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE/C,qBAAqB,CAAC,GAAG,EAAE;QACzB,QAAQ,CAAC,SAAS,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,iBAAiB,GAAG,OAAO,CAAyB,GAAG,EAAE;QAC7D,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAChC,GAAG,IAAI;YACP,OAAO,CAAC,CAAgC;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,EAAE;oBAC1B,OAAO,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;wBAC9B,OAAO,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;oBAC1D,CAAC,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;gBACH,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAChC,CAAC;SACF,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,kBAAkB,GAAG,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC3D,IAAI;QACJ,OAAO,EAAE,GAAG,EAAE;YACZ,WAAW,CAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QACnD,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,uBAAuB,GAAG,CAAC,QAAgB,EAAE,EAAE;QACnD,gBAAgB,CAAC,GAAG,CAAC,EAAE,CACrB,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACpC,EAAE;YACF,MAAM,EAAE,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;YACxC,GAAG,IAAI;SACR,CAAC,CAAC,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC3C,UAAU,CAAC,GAAG,CAAC,EAAE,CACf,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACpC,EAAE;YACF,MAAM,EAAE,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YAC1C,GAAG,IAAI;SACR,CAAC,CAAC,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG;QAC5B;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;YACnD,OAAO,EAAE,IAAI,CAAC,oBAAoB;YAClC,WAAW,EAAE,uBAAuB;YACpC,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;YACD,SAAS,EAAE,kBAAkB;SAC9B;KACF,CAAC;IAEF,MAAM,eAAe,GAAG;QACtB;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;YACpC,OAAO,EAAE,IAAI,CAAC,WAAW;YACzB,eAAe,EAAE,eAAe;YAChC,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;YACD,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,cAAc;YAC3B,SAAS,EAAE,iBAAiB;SAC7B;QACD;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;YACvC,OAAO,EAAE,IAAI,CAAC,cAAc;YAC5B,eAAe,EAAE,eAAe;YAChC,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;YACD,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,iBAAiB;YAC9B,SAAS,EAAE,YAAY;SACxB;KACF,CAAC;IAEF,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAEjD,MAAM,YAAY,GAAG;QACnB;YACE,IAAI,EAAE,eAAe;YACrB,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,WAAG;YAClC,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB;YACxD,UAAU,EAAE,KAAC,YAAY,IAAC,QAAQ,EAAE,qBAAqB,WAAI;YAC7D,YAAY,EAAE,GAAG,EAAE;gBACjB,aAAa,CAAC,4BAA4B,CAAC,OAAO,CAAC,CAAC;gBACpD,sBAAsB,CAAC,CAAC,CAAC,CAAC;YAC5B,CAAC;YACD,aAAa,EAAE,GAAG,EAAE;gBAClB,IAAI,iBAAiB,EAAE;oBACrB,gFAAgF;oBAChF,iCAAiC;oBACjC,4BAA4B,CAAC,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;wBAC7D,sBAAsB,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;oBACzC,CAAC,EAAE,KAAK,CAAC,CAAC;iBACX;YACH,CAAC;SACF;QACD;YACE,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,WAAG;YACnC,UAAU,EAAE,KAAC,YAAY,IAAC,QAAQ,EAAE,eAAe,WAAI;SACxD;KACF,CAAC;IAEF,OAAO,CACL,KAAC,QAAQ,IACP,OAAO,EACL,IAAI,CAAC,OAAO,IAAI;YACd,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,uBAAuB;YAC1C,QAAQ,EACN,IAAI,CAAC,QAAQ;gBACb,8EAA8E;YAChF,YAAY,EACV,IAAI,CAAC,YAAY;gBACjB,uEAAuE;YACzE,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,iBAAiB;YAC1C,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,MAAM;SACtC,EAEH,WAAW,EACT,UAAU;YACR,CAAC,CAAC;gBACE,cAAc,EAAE,CAAC,KAAa,EAAE,EAAE;oBAChC,YAAY,CAAC,KAAK,CAAC,CAAC;gBACtB,CAAC;gBACD,KAAK,EAAE,SAAS;aACjB;YACH,CAAC,CAAC,SAAS,EAEf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,WAAW,IAAI,kBAAkB,EACjD,KAAK,EAAE,iBAAiB,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,kBAAkB,EACrC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,YAAY,EACjC,WAAW,EACT,IAAI,CAAC,eAAe;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,eAAe;gBAC1B,KAAK,EAAE,IAAI,CAAC,gBAAgB;aAC7B;YACH,CAAC,CAAC,SAAS,WAEf,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,OAAO,EAAE,iBAAiB;IAC1B,UAAU,EAAE,MAAM;IAClB,IAAI,EAAE,uBAAuB;IAC7B,QAAQ,EAAE,8EAA8E;IACxF,YAAY,EAAE,uEAAuE;IACrF,UAAU,EAAE,IAAI;IAChB,SAAS,EAAE,IAAI;IACf,eAAe,EAAE,KAAK;IACtB,gBAAgB,EAAE,SAAS;IAC3B,kBAAkB,EAAE,KAAK;IACzB,oBAAoB,EAAE,KAAK;IAC3B,YAAY,EAAE,KAAK;IACnB,cAAc,EAAE,KAAK;IACrB,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACzC,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC9C,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAChD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACpD,oBAAoB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACtD,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC9C,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useContext, FormEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n  AppShell,\n  AppShellProps,\n  AppShellList,\n  DrawerItemProps,\n  Button,\n  DateInput,\n  Grid,\n  Icon,\n  registerIcon,\n  Input,\n  Select,\n  Option,\n  Modal,\n  ModalManagerContext,\n  TextArea,\n  ToasterContext,\n  ForwardProps,\n  useAfterInitialEffect,\n  windowIsAvailable\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport {\n  defaultLinks,\n  defaultMainContent,\n  defaultNotifications,\n  defaultRecents,\n  operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n  title: 'Core/App Shell',\n  component: AppShell,\n  id: 'App Shell',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface AppShellStoryProps {\n  /** Demo props */\n  main?: AppShellProps['main'];\n  appInfo?: AppShellProps['appInfo'];\n  banners?: AppShellProps['banners'];\n  cases?: AppShellProps['cases'];\n  caseLinks?: AppShellProps['links'];\n  createLinks?: any[];\n  recentItems?: any[];\n  utils?: AppShellProps['utils'];\n  onLinkClick?: (name: string) => void;\n\n  /** Storybook controls */\n  appName?: AppShellProps['appInfo']['appName'];\n  portalName?: AppShellProps['appInfo']['portalName'];\n  href?: AppShellProps['appInfo']['href'];\n  imageSrc?: AppShellProps['appInfo']['imageSrc'];\n  fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n  withSearch?: boolean;\n  appHeader?: AppShellProps['appHeader'];\n  environmentName?: string;\n  environmentColor?: string;\n  notificationsEmpty?: boolean;\n  notificationsLoading?: boolean;\n  recentsEmpty?: boolean;\n  recentsLoading?: boolean;\n  pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const CreateCaseModal = ({ caseType }: { caseType: string }) => {\n    const { ModalContext } = useContext(ModalManagerContext);\n    const { dismiss } = useContext(ModalContext);\n    const { push: pushToaster } = useContext(ToasterContext);\n\n    return (\n      <Modal\n        as='form'\n        heading={`New ${caseType}`}\n        actions={\n          <>\n            <Button onClick={dismiss}>Cancel</Button>\n            <Button\n              variant='primary'\n              type='submit'\n              onClick={(e: FormEvent) => {\n                e.preventDefault();\n                dismiss();\n                pushToaster({ content: `${caseType} requested` });\n              }}\n            >\n              Request\n            </Button>\n          </>\n        }\n      >\n        <Grid container={{ rowGap: 2 }}>\n          <DateInput label='Date Requested' info={null} />\n          <Select label='Department'>\n            <Option value=''>Select…</Option>\n            <Option value='Fire'>Fire</Option>\n            <Option value='Facilities'>Facilities</Option>\n            <Option value='Parks'>Parks</Option>\n            <Option value='Sanitation'>Sanitation</Option>\n            <Option value='Parking &amp; Traffic'>Parking &amp; Traffic</Option>\n            <Option value='Police'>Police</Option>\n            <Option value='Courts'>Courts</Option>\n            <Option value='Healthcare'>Healthcare</Option>\n            <Option value='Energy'>Energy</Option>\n            <Option value='Justice department'>Justice department</Option>\n            <Option value='Environmental'>Environmental</Option>\n          </Select>\n          <TextArea label='Purpose of Purchase' />\n          <Select label='Desired Make'>\n            <Option value=''>Select...</Option>\n            <Option value='Ford'>Ford</Option>\n            <Option value='Dodge'>Dodge</Option>\n            <Option value='Toyota'>Toyota</Option>\n            <Option value='Tesla'>Tesla</Option>\n          </Select>\n          <Input label='Desired Make' />\n          <Input\n            type='number'\n            min='2016'\n            max='2021'\n            label='Year'\n            info='Must be within last 5 years'\n          />\n          <Input\n            type='number'\n            min='0.01'\n            step='0.01'\n            max='50000'\n            label='Estimated Cost'\n            info='May not exceed $50,000.00'\n          />\n        </Grid>\n      </Modal>\n    );\n  };\n\n  const caseLinks = args.caseLinks || defaultLinks;\n  const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n  const { create: createModal } = useContext(ModalManagerContext);\n  const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n  const [notifications, setNotifications] =\n    useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n  const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n    args.recentItems || defaultRecents\n  );\n  const [numNewNotifications, setNumNewNotifications] = useState(\n    notifications.filter(x => x.unread).length\n  );\n  const [searchVal, setSearchVal] = useState('');\n\n  useAfterInitialEffect(() => {\n    setLinks(caseLinks);\n  }, [caseLinks]);\n\n  const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n    return (links || []).map(link => ({\n      ...link,\n      onClick(e: MouseEvent<HTMLAnchorElement>) {\n        e.preventDefault();\n        setLinks((prevLinks = []) => {\n          return prevLinks.map(prevLink => {\n            return { ...link, active: prevLink.name === link.name };\n          });\n        });\n        args.onLinkClick?.(link.name);\n      }\n    }));\n  }, [links]);\n\n  const defaultCreateLinks = ['Vehicle Purchase'].map(name => ({\n    name,\n    onClick: () => {\n      createModal(CreateCaseModal, { caseType: name });\n    }\n  }));\n\n  const handleNotificationClick = (passedId: string) => {\n    setNotifications(cur =>\n      cur.map(({ id, unread, ...item }) => ({\n        id,\n        unread: passedId === id ? false : unread,\n        ...item\n      }))\n    );\n  };\n\n  const handlePinToggle = (passedId: string) => {\n    setRecents(cur =>\n      cur.map(({ id, pinned, ...item }) => ({\n        id,\n        pinned: passedId === id ? !pinned : pinned,\n        ...item\n      }))\n    );\n  };\n\n  const notificationViewItems = [\n    {\n      id: '234',\n      items: args.notificationsEmpty ? [] : notifications,\n      loading: args.notificationsLoading,\n      onItemClick: handleNotificationClick,\n      viewAll: {\n        href: '#'\n      },\n      emptyText: 'No notifications'\n    }\n  ];\n\n  const recentViewItems = [\n    {\n      id: '456',\n      items: recents.filter(x => x.pinned),\n      loading: args.pinsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Pinned items',\n      emptyText: 'No pinned items'\n    },\n    {\n      id: '789',\n      items: args.recentsEmpty ? [] : recents,\n      loading: args.recentsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Recently viewed',\n      emptyText: 'No recents'\n    }\n  ];\n\n  const newNotificationCountTimerRef = useRef(NaN);\n\n  const defaultUtils = [\n    {\n      name: 'Notifications',\n      visual: <Icon name='bell-solid' />,\n      count: args.notificationsEmpty ? 0 : numNewNotifications,\n      drawerView: <AppShellList listView={notificationViewItems} />,\n      onDrawerOpen: () => {\n        clearInterval(newNotificationCountTimerRef.current);\n        setNumNewNotifications(0);\n      },\n      onDrawerClose: () => {\n        if (windowIsAvailable) {\n          // Mock new notifications arriving on a minute interval after the drawer closes.\n          // Let's face it, you're popular.\n          newNotificationCountTimerRef.current = window.setInterval(() => {\n            setNumNewNotifications(cur => cur + 2);\n          }, 60000);\n        }\n      }\n    },\n    {\n      name: 'Recents',\n      visual: <Icon name='clock-solid' />,\n      drawerView: <AppShellList listView={recentViewItems} />\n    }\n  ];\n\n  return (\n    <AppShell\n      appInfo={\n        args.appInfo || {\n          href: args.href || 'https://www.pega.com/',\n          imageSrc:\n            args.imageSrc ||\n            'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n          fullImageSrc:\n            args.fullImageSrc ||\n            'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n          appName: args.appName || 'Cosmos AppShell',\n          portalName: args.portalName || 'Demo'\n        }\n      }\n      searchInput={\n        showSearch\n          ? {\n              onSearchChange: (value: string) => {\n                setSearchVal(value);\n              },\n              value: searchVal\n            }\n          : undefined\n      }\n      appHeader={args.appHeader}\n      caseTypes={args.createLinks || defaultCreateLinks}\n      links={linksWithHandlers}\n      main={args.main || defaultMainContent}\n      cases={args.cases}\n      banners={args.banners}\n      operator={operatorData}\n      utils={args.utils || defaultUtils}\n      environment={\n        args.environmentName\n          ? {\n              name: args.environmentName,\n              color: args.environmentColor\n            }\n          : undefined\n      }\n    />\n  );\n};\n\nAppShellDemo.args = {\n  appName: 'Cosmos AppShell',\n  portalName: 'Demo',\n  href: 'https://www.pega.com/',\n  imageSrc: 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n  fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n  withSearch: true,\n  appHeader: true,\n  environmentName: 'dev',\n  environmentColor: '#FFDBDE',\n  notificationsEmpty: false,\n  notificationsLoading: false,\n  recentsEmpty: false,\n  recentsLoading: false,\n  pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n  appName: { control: { type: 'text' } },\n  portalName: { control: { type: 'text' } },\n  href: { control: { type: 'text' } },\n  imageSrc: { control: { type: 'text' } },\n  fullImageSrc: { control: { type: 'text' } },\n  withSearch: { control: { type: 'boolean' } },\n  appHeader: { control: { type: 'boolean' } },\n  environmentName: { control: { type: 'text' } },\n  environmentColor: { control: { type: 'color' } },\n  notificationsEmpty: { control: { type: 'boolean' } },\n  notificationsLoading: { control: { type: 'boolean' } },\n  recentsEmpty: { control: { type: 'boolean' } },\n  recentsLoading: { control: { type: 'boolean' } },\n  pinsLoading: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/core/AppShell/AppShell.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAc,UAAU,EAAa,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAErF,OAAO,EACL,QAAQ,EAER,YAAY,EAEZ,MAAM,EACN,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,MAAM,EACN,KAAK,EACL,mBAAmB,EACnB,QAAQ,EACR,cAAc,EAEd,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,aAAa,MAAM,mEAAmE,CAAC;AACnG,OAAO,KAAK,cAAc,MAAM,oEAAoE,CAAC;AAErG,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,oBAAoB,EACpB,cAAc,EACd,YAAY,EACb,MAAM,kBAAkB,CAAC;AAE1B,YAAY,CAAC,aAAa,EAAE,cAAc,CAAC,CAAC;AAE5C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,EAAE,EAAE,WAAW;IACf,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAgCV,MAAM,CAAC,MAAM,YAAY,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAClF,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAwB,EAAE,EAAE;QAC7D,MAAM,EAAE,YAAY,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;QACzD,MAAM,EAAE,OAAO,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;QAC7C,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;QAEzD,OAAO,CACL,KAAC,KAAK,IACJ,EAAE,EAAC,MAAM,EACT,OAAO,EAAE,OAAO,QAAQ,EAAE,EAC1B,OAAO,EACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,OAAO,uBAAiB,EACzC,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAY,EAAE,EAAE;4BACxB,CAAC,CAAC,cAAc,EAAE,CAAC;4BACnB,OAAO,EAAE,CAAC;4BACV,WAAW,CAAC,EAAE,OAAO,EAAE,GAAG,QAAQ,YAAY,EAAE,CAAC,CAAC;wBACpD,CAAC,wBAGM,IACR,YAGL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAC5B,KAAC,SAAS,IAAC,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,GAAI,EAChD,MAAC,MAAM,IAAC,KAAK,EAAC,YAAY,aACxB,KAAC,MAAM,IAAC,KAAK,EAAC,EAAE,6BAAiB,EACjC,KAAC,MAAM,IAAC,KAAK,EAAC,MAAM,qBAAc,EAClC,KAAC,MAAM,IAAC,KAAK,EAAC,YAAY,2BAAoB,EAC9C,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,sBAAe,EACpC,KAAC,MAAM,IAAC,KAAK,EAAC,YAAY,2BAAoB,EAC9C,KAAC,MAAM,IAAC,KAAK,EAAC,mBAAuB,kCAA+B,EACpE,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,EACtC,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,EACtC,KAAC,MAAM,IAAC,KAAK,EAAC,YAAY,2BAAoB,EAC9C,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,EACtC,KAAC,MAAM,IAAC,KAAK,EAAC,oBAAoB,mCAA4B,EAC9D,KAAC,MAAM,IAAC,KAAK,EAAC,eAAe,8BAAuB,IAC7C,EACT,KAAC,QAAQ,IAAC,KAAK,EAAC,qBAAqB,GAAG,EACxC,MAAC,MAAM,IAAC,KAAK,EAAC,cAAc,aAC1B,KAAC,MAAM,IAAC,KAAK,EAAC,EAAE,0BAAmB,EACnC,KAAC,MAAM,IAAC,KAAK,EAAC,MAAM,qBAAc,EAClC,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,sBAAe,EACpC,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,EACtC,KAAC,MAAM,IAAC,KAAK,EAAC,OAAO,sBAAe,IAC7B,EACT,KAAC,KAAK,IAAC,KAAK,EAAC,cAAc,GAAG,EAC9B,KAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,MAAM,EACV,GAAG,EAAC,MAAM,EACV,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,6BAA6B,GAClC,EACF,KAAC,KAAK,IACJ,IAAI,EAAC,QAAQ,EACb,GAAG,EAAC,MAAM,EACV,IAAI,EAAC,MAAM,EACX,GAAG,EAAC,OAAO,EACX,KAAK,EAAC,gBAAgB,EACtB,IAAI,EAAC,2BAA2B,GAChC,IACG,GACD,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,YAAY,CAAC;IACjD,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC;IAE1E,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAChE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAyB,SAAS,CAAC,CAAC;IACtE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GACrC,QAAQ,CAAqC,oBAAoB,CAAC,CAAC;IACrE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CACpC,IAAI,CAAC,WAAW,IAAI,cAAc,CACnC,CAAC;IACF,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAC5D,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAC3C,CAAC;IACF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAE/C,qBAAqB,CAAC,GAAG,EAAE;QACzB,QAAQ,CAAC,SAAS,CAAC,CAAC;IACtB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,iBAAiB,GAAG,OAAO,CAAyB,GAAG,EAAE;QAC7D,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YAChC,GAAG,IAAI;YACP,OAAO,CAAC,CAAgC;gBACtC,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,QAAQ,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,EAAE;oBAC1B,OAAO,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE;wBAC9B,OAAO,EAAE,GAAG,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;oBAC1D,CAAC,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;gBACH,IAAI,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAChC,CAAC;SACF,CAAC,CAAC,CAAC;IACN,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,kBAAkB,GAAG,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAC3D,IAAI;QACJ,OAAO,EAAE,GAAG,EAAE;YACZ,WAAW,CAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;QACnD,CAAC;KACF,CAAC,CAAC,CAAC;IAEJ,MAAM,uBAAuB,GAAG,CAAC,QAAgB,EAAE,EAAE;QACnD,gBAAgB,CAAC,GAAG,CAAC,EAAE,CACrB,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACpC,EAAE;YACF,MAAM,EAAE,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;YACxC,GAAG,IAAI;SACR,CAAC,CAAC,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,QAAgB,EAAE,EAAE;QAC3C,UAAU,CAAC,GAAG,CAAC,EAAE,CACf,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;YACpC,EAAE;YACF,MAAM,EAAE,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;YAC1C,GAAG,IAAI;SACR,CAAC,CAAC,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG;QAC5B;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa;YACnD,OAAO,EAAE,IAAI,CAAC,oBAAoB;YAClC,WAAW,EAAE,uBAAuB;YACpC,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;YACD,SAAS,EAAE,kBAAkB;SAC9B;KACF,CAAC;IAEF,MAAM,eAAe,GAAG;QACtB;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;YACpC,OAAO,EAAE,IAAI,CAAC,WAAW;YACzB,eAAe,EAAE,eAAe;YAChC,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;YACD,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,cAAc;YAC3B,SAAS,EAAE,iBAAiB;SAC7B;QACD;YACE,EAAE,EAAE,KAAK;YACT,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;YACvC,OAAO,EAAE,IAAI,CAAC,cAAc;YAC5B,eAAe,EAAE,eAAe;YAChC,OAAO,EAAE;gBACP,IAAI,EAAE,GAAG;aACV;YACD,WAAW,EAAE,IAAI;YACjB,WAAW,EAAE,iBAAiB;YAC9B,SAAS,EAAE,YAAY;SACxB;KACF,CAAC;IAEF,MAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAEjD,MAAM,YAAY,GAAG;QACnB;YACE,IAAI,EAAE,eAAe;YACrB,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG;YAClC,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,mBAAmB;YACxD,UAAU,EAAE,KAAC,YAAY,IAAC,QAAQ,EAAE,qBAAqB,GAAI;YAC7D,YAAY,EAAE,GAAG,EAAE;gBACjB,aAAa,CAAC,4BAA4B,CAAC,OAAO,CAAC,CAAC;gBACpD,sBAAsB,CAAC,CAAC,CAAC,CAAC;YAC5B,CAAC;YACD,aAAa,EAAE,GAAG,EAAE;gBAClB,IAAI,iBAAiB,EAAE;oBACrB,gFAAgF;oBAChF,iCAAiC;oBACjC,4BAA4B,CAAC,OAAO,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,EAAE;wBAC7D,sBAAsB,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;oBACzC,CAAC,EAAE,KAAK,CAAC,CAAC;iBACX;YACH,CAAC;SACF;QACD;YACE,IAAI,EAAE,SAAS;YACf,MAAM,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,aAAa,GAAG;YACnC,UAAU,EAAE,KAAC,YAAY,IAAC,QAAQ,EAAE,eAAe,GAAI;SACxD;KACF,CAAC;IAEF,OAAO,CACL,KAAC,QAAQ,IACP,OAAO,EACL,IAAI,CAAC,OAAO,IAAI;YACd,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,uBAAuB;YAC1C,QAAQ,EACN,IAAI,CAAC,QAAQ;gBACb,8EAA8E;YAChF,YAAY,EACV,IAAI,CAAC,YAAY;gBACjB,uEAAuE;YACzE,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,iBAAiB;YAC1C,UAAU,EAAE,IAAI,CAAC,UAAU,IAAI,MAAM;SACtC,EAEH,WAAW,EACT,UAAU;YACR,CAAC,CAAC;gBACE,cAAc,EAAE,CAAC,KAAa,EAAE,EAAE;oBAChC,YAAY,CAAC,KAAK,CAAC,CAAC;gBACtB,CAAC;gBACD,KAAK,EAAE,SAAS;aACjB;YACH,CAAC,CAAC,SAAS,EAEf,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,IAAI,kBAAkB,EAC7E,KAAK,EAAE,iBAAiB,EACxB,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,kBAAkB,EACrC,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,YAAY,EACtB,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,YAAY,EACjC,WAAW,EACT,IAAI,CAAC,eAAe;YAClB,CAAC,CAAC;gBACE,IAAI,EAAE,IAAI,CAAC,eAAe;gBAC1B,KAAK,EAAE,IAAI,CAAC,gBAAgB;aAC7B;YACH,CAAC,CAAC,SAAS,GAEf,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,OAAO,EAAE,iBAAiB;IAC1B,UAAU,EAAE,MAAM;IAClB,IAAI,EAAE,uBAAuB;IAC7B,QAAQ,EAAE,8EAA8E;IACxF,YAAY,EAAE,uEAAuE;IACrF,UAAU,EAAE,IAAI;IAChB,SAAS,EAAE,IAAI;IACf,eAAe,EAAE,KAAK;IACtB,gBAAgB,EAAE,SAAS;IAC3B,kBAAkB,EAAE,KAAK;IACzB,oBAAoB,EAAE,KAAK;IAC3B,eAAe,EAAE,KAAK;IACtB,YAAY,EAAE,KAAK;IACnB,cAAc,EAAE,KAAK;IACrB,WAAW,EAAE,KAAK;CACnB,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACtC,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACzC,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC5C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC9C,gBAAgB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAChD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACpD,oBAAoB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACtD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC9C,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAC;AAOF,MAAM,CAAC,MAAM,oBAAoB,GAAqC,CACpE,IAA+B,EAC/B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,WAAW,EAAE;oBACX,GAAG,EAAE;wBACH,kBAAkB,EAAE,IAAI,CAAC,QAAQ;qBAClC;oBACD,MAAM,EAAE;wBACN,kBAAkB,EAAE,IAAI,CAAC,WAAW;qBACrC;iBACF;aACF;SACF,YAED,KAAC,YAAY,IAAC,SAAS,SAAG,GACZ,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,oBAAoB,CAAC,IAAI,GAAG;IAC1B,QAAQ,EAAE,SAAS;IACnB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,oBAAoB,CAAC,QAAQ,GAAG;IAC9B,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACxC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAC5C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { MouseEvent, useContext, FormEvent, useState, useMemo, useRef } from 'react';\n\nimport {\n  AppShell,\n  AppShellProps,\n  AppShellList,\n  DrawerItemProps,\n  Button,\n  DateInput,\n  Grid,\n  Icon,\n  registerIcon,\n  Input,\n  Select,\n  Option,\n  Modal,\n  ModalManagerContext,\n  TextArea,\n  ToasterContext,\n  ForwardProps,\n  useAfterInitialEffect,\n  windowIsAvailable,\n  Configuration\n} from '@pega/cosmos-react-core';\nimport * as bellSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bell-solid.icon';\nimport * as clockSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/clock-solid.icon';\n\nimport {\n  defaultLinks,\n  defaultMainContent,\n  defaultNotifications,\n  defaultRecents,\n  operatorData\n} from './AppShell.mocks';\n\nregisterIcon(bellSolidIcon, clockSolidIcon);\n\nexport default {\n  title: 'Core/App Shell',\n  component: AppShell,\n  id: 'App Shell',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\ninterface AppShellStoryProps {\n  /** Demo props */\n  main?: AppShellProps['main'];\n  appInfo?: AppShellProps['appInfo'];\n  banners?: AppShellProps['banners'];\n  cases?: AppShellProps['cases'];\n  caseLinks?: AppShellProps['links'];\n  createLinks?: any[];\n  recentItems?: any[];\n  utils?: AppShellProps['utils'];\n  onLinkClick?: (name: string) => void;\n\n  /** Storybook controls */\n  appName?: AppShellProps['appInfo']['appName'];\n  portalName?: AppShellProps['appInfo']['portalName'];\n  href?: AppShellProps['appInfo']['href'];\n  imageSrc?: AppShellProps['appInfo']['imageSrc'];\n  fullImageSrc?: AppShellProps['appInfo']['fullImageSrc'];\n  withSearch?: boolean;\n  appHeader?: AppShellProps['appHeader'];\n  environmentName?: string;\n  environmentColor?: string;\n  notificationsEmpty?: boolean;\n  notificationsLoading?: boolean;\n  casesTypesEmpty?: boolean;\n  recentsEmpty?: boolean;\n  recentsLoading?: boolean;\n  pinsLoading?: boolean;\n}\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const CreateCaseModal = ({ caseType }: { caseType: string }) => {\n    const { ModalContext } = useContext(ModalManagerContext);\n    const { dismiss } = useContext(ModalContext);\n    const { push: pushToaster } = useContext(ToasterContext);\n\n    return (\n      <Modal\n        as='form'\n        heading={`New ${caseType}`}\n        actions={\n          <>\n            <Button onClick={dismiss}>Cancel</Button>\n            <Button\n              variant='primary'\n              type='submit'\n              onClick={(e: FormEvent) => {\n                e.preventDefault();\n                dismiss();\n                pushToaster({ content: `${caseType} requested` });\n              }}\n            >\n              Request\n            </Button>\n          </>\n        }\n      >\n        <Grid container={{ rowGap: 2 }}>\n          <DateInput label='Date Requested' info={null} />\n          <Select label='Department'>\n            <Option value=''>Select…</Option>\n            <Option value='Fire'>Fire</Option>\n            <Option value='Facilities'>Facilities</Option>\n            <Option value='Parks'>Parks</Option>\n            <Option value='Sanitation'>Sanitation</Option>\n            <Option value='Parking &amp; Traffic'>Parking &amp; Traffic</Option>\n            <Option value='Police'>Police</Option>\n            <Option value='Courts'>Courts</Option>\n            <Option value='Healthcare'>Healthcare</Option>\n            <Option value='Energy'>Energy</Option>\n            <Option value='Justice department'>Justice department</Option>\n            <Option value='Environmental'>Environmental</Option>\n          </Select>\n          <TextArea label='Purpose of Purchase' />\n          <Select label='Desired Make'>\n            <Option value=''>Select...</Option>\n            <Option value='Ford'>Ford</Option>\n            <Option value='Dodge'>Dodge</Option>\n            <Option value='Toyota'>Toyota</Option>\n            <Option value='Tesla'>Tesla</Option>\n          </Select>\n          <Input label='Desired Make' />\n          <Input\n            type='number'\n            min='2016'\n            max='2021'\n            label='Year'\n            info='Must be within last 5 years'\n          />\n          <Input\n            type='number'\n            min='0.01'\n            step='0.01'\n            max='50000'\n            label='Estimated Cost'\n            info='May not exceed $50,000.00'\n          />\n        </Grid>\n      </Modal>\n    );\n  };\n\n  const caseLinks = args.caseLinks || defaultLinks;\n  const showSearch = args.withSearch !== undefined ? args.withSearch : true;\n\n  const { create: createModal } = useContext(ModalManagerContext);\n  const [links, setLinks] = useState<AppShellProps['links']>(caseLinks);\n  const [notifications, setNotifications] =\n    useState<(DrawerItemProps & ForwardProps)[]>(defaultNotifications);\n  const [recents, setRecents] = useState<(DrawerItemProps & ForwardProps)[]>(\n    args.recentItems || defaultRecents\n  );\n  const [numNewNotifications, setNumNewNotifications] = useState(\n    notifications.filter(x => x.unread).length\n  );\n  const [searchVal, setSearchVal] = useState('');\n\n  useAfterInitialEffect(() => {\n    setLinks(caseLinks);\n  }, [caseLinks]);\n\n  const linksWithHandlers = useMemo<AppShellProps['links']>(() => {\n    return (links || []).map(link => ({\n      ...link,\n      onClick(e: MouseEvent<HTMLAnchorElement>) {\n        e.preventDefault();\n        setLinks((prevLinks = []) => {\n          return prevLinks.map(prevLink => {\n            return { ...link, active: prevLink.name === link.name };\n          });\n        });\n        args.onLinkClick?.(link.name);\n      }\n    }));\n  }, [links]);\n\n  const defaultCreateLinks = ['Vehicle Purchase'].map(name => ({\n    name,\n    onClick: () => {\n      createModal(CreateCaseModal, { caseType: name });\n    }\n  }));\n\n  const handleNotificationClick = (passedId: string) => {\n    setNotifications(cur =>\n      cur.map(({ id, unread, ...item }) => ({\n        id,\n        unread: passedId === id ? false : unread,\n        ...item\n      }))\n    );\n  };\n\n  const handlePinToggle = (passedId: string) => {\n    setRecents(cur =>\n      cur.map(({ id, pinned, ...item }) => ({\n        id,\n        pinned: passedId === id ? !pinned : pinned,\n        ...item\n      }))\n    );\n  };\n\n  const notificationViewItems = [\n    {\n      id: '234',\n      items: args.notificationsEmpty ? [] : notifications,\n      loading: args.notificationsLoading,\n      onItemClick: handleNotificationClick,\n      viewAll: {\n        href: '#'\n      },\n      emptyText: 'No notifications'\n    }\n  ];\n\n  const recentViewItems = [\n    {\n      id: '456',\n      items: recents.filter(x => x.pinned),\n      loading: args.pinsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Pinned items',\n      emptyText: 'No pinned items'\n    },\n    {\n      id: '789',\n      items: args.recentsEmpty ? [] : recents,\n      loading: args.recentsLoading,\n      onItemPinToggle: handlePinToggle,\n      viewAll: {\n        href: '#'\n      },\n      displayPins: true,\n      headingText: 'Recently viewed',\n      emptyText: 'No recents'\n    }\n  ];\n\n  const newNotificationCountTimerRef = useRef(NaN);\n\n  const defaultUtils = [\n    {\n      name: 'Notifications',\n      visual: <Icon name='bell-solid' />,\n      count: args.notificationsEmpty ? 0 : numNewNotifications,\n      drawerView: <AppShellList listView={notificationViewItems} />,\n      onDrawerOpen: () => {\n        clearInterval(newNotificationCountTimerRef.current);\n        setNumNewNotifications(0);\n      },\n      onDrawerClose: () => {\n        if (windowIsAvailable) {\n          // Mock new notifications arriving on a minute interval after the drawer closes.\n          // Let's face it, you're popular.\n          newNotificationCountTimerRef.current = window.setInterval(() => {\n            setNumNewNotifications(cur => cur + 2);\n          }, 60000);\n        }\n      }\n    },\n    {\n      name: 'Recents',\n      visual: <Icon name='clock-solid' />,\n      drawerView: <AppShellList listView={recentViewItems} />\n    }\n  ];\n\n  return (\n    <AppShell\n      appInfo={\n        args.appInfo || {\n          href: args.href || 'https://www.pega.com/',\n          imageSrc:\n            args.imageSrc ||\n            'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n          fullImageSrc:\n            args.fullImageSrc ||\n            'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n          appName: args.appName || 'Cosmos AppShell',\n          portalName: args.portalName || 'Demo'\n        }\n      }\n      searchInput={\n        showSearch\n          ? {\n              onSearchChange: (value: string) => {\n                setSearchVal(value);\n              },\n              value: searchVal\n            }\n          : undefined\n      }\n      appHeader={args.appHeader}\n      caseTypes={args.casesTypesEmpty ? [] : args.createLinks || defaultCreateLinks}\n      links={linksWithHandlers}\n      main={args.main || defaultMainContent}\n      cases={args.cases}\n      banners={args.banners}\n      operator={operatorData}\n      utils={args.utils || defaultUtils}\n      environment={\n        args.environmentName\n          ? {\n              name: args.environmentName,\n              color: args.environmentColor\n            }\n          : undefined\n      }\n    />\n  );\n};\n\nAppShellDemo.args = {\n  appName: 'Cosmos AppShell',\n  portalName: 'Demo',\n  href: 'https://www.pega.com/',\n  imageSrc: 'https://pbs.twimg.com/profile_images/1410341211978752004/pLYjGIa8_bigger.jpg',\n  fullImageSrc: 'https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg',\n  withSearch: true,\n  appHeader: true,\n  environmentName: 'dev',\n  environmentColor: '#FFDBDE',\n  notificationsEmpty: false,\n  notificationsLoading: false,\n  casesTypesEmpty: false,\n  recentsEmpty: false,\n  recentsLoading: false,\n  pinsLoading: false\n};\n\nAppShellDemo.argTypes = {\n  appName: { control: { type: 'text' } },\n  portalName: { control: { type: 'text' } },\n  href: { control: { type: 'text' } },\n  imageSrc: { control: { type: 'text' } },\n  fullImageSrc: { control: { type: 'text' } },\n  withSearch: { control: { type: 'boolean' } },\n  appHeader: { control: { type: 'boolean' } },\n  environmentName: { control: { type: 'text' } },\n  environmentColor: { control: { type: 'color' } },\n  notificationsEmpty: { control: { type: 'boolean' } },\n  notificationsLoading: { control: { type: 'boolean' } },\n  casesTypesEmpty: { control: { type: 'boolean' } },\n  recentsEmpty: { control: { type: 'boolean' } },\n  recentsLoading: { control: { type: 'boolean' } },\n  pinsLoading: { control: { type: 'boolean' } }\n};\n\ninterface ConfigurableAppShellProps {\n  navColor?: string;\n  headerColor?: string;\n}\n\nexport const ConfigurableAppShell: Story<ConfigurableAppShellProps> = (\n  args: ConfigurableAppShellProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'app-shell': {\n            nav: {\n              'background-color': args.navColor\n            },\n            header: {\n              'background-color': args.headerColor\n            }\n          }\n        }\n      }}\n    >\n      <AppShellDemo appHeader />\n    </Configuration>\n  );\n};\n\nConfigurableAppShell.args = {\n  navColor: '#252c32',\n  headerColor: '#e2f1ff'\n};\n\nConfigurableAppShell.argTypes = {\n  navColor: { control: { type: 'color' } },\n  headerColor: { control: { type: 'color' } }\n};\n"]}

package/lib/core/Avatar/Avatar.stories.d.ts

@@ -7,4 +7,9 @@ export declare const TextOnlyAvatar: Story<AvatarProps>;
 export declare const TransparentAvatar: Story<AvatarProps>;
 export declare const IconAvatar: Story<AvatarProps>;
 export declare const StatusAvatar: Story<AvatarProps>;
+interface ConfigurableAvatarProps extends AvatarProps {
+    backgroundColor?: string;
+    borderRadius?: string;
+}
+export declare const ConfigurableAvatar: Story<ConfigurableAvatarProps>;
 //# sourceMappingURL=Avatar.stories.d.ts.map

package/lib/core/Avatar/Avatar.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAAS,MAAM,yBAAyB,CAAC;;AAErE,wBAaU;AAEV,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,WAAW,CAE5C,CAAC;AAWF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAE7C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,WAAW,CAShD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,WAAW,CAEzC,CAAC;AAUF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,WAAW,CAE3C,CAAC"}
+{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAU,WAAW,EAAwB,MAAM,yBAAyB,CAAC;;AAEpF,wBAaU;AAEV,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,WAAW,CAE5C,CAAC;AAWF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,WAAW,CAE7C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,WAAW,CAShD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,WAAW,CAWzC,CAAC;AAcF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,WAAW,CAE3C,CAAC;AAUF,UAAU,uBAAwB,SAAQ,WAAW;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAiB7D,CAAC"}

package/lib/core/Avatar/Avatar.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Avatar, icons } from '@pega/cosmos-react-core';
+import { Avatar, Configuration, icons } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Avatar',
     component: Avatar,
@@ -10,12 +10,12 @@ export default {
     },
     argTypes: {
         shape: { options: ['circle', 'squircle'], control: { type: 'select' } },
-        size: { options: ['s', 'm', 'l'], control: { type: 'select' } },
+        size: { options: ['s', 'm', 'l', 'xl'], control: { type: 'select' } },
         name: { control: { type: 'text' } }
     }
 };
 export const DefaultAvatar = (args) => {
-    return _jsx(Avatar, { shape: args.shape, size: args.size, name: args.name, imageSrc: args.imageSrc }, void 0);
+    return _jsx(Avatar, { shape: args.shape, size: args.size, name: args.name, imageSrc: args.imageSrc });
 };
 DefaultAvatar.args = {
     name: 'Pegasystems',
@@ -25,22 +25,26 @@ DefaultAvatar.argTypes = {
     imageSrc: { control: { type: 'text' } }
 };
 export const TextOnlyAvatar = (args) => {
-    return _jsx(Avatar, { shape: args.shape, size: args.size, name: args.name }, void 0);
+    return _jsx(Avatar, { shape: args.shape, size: args.size, name: args.name });
 };
 export const TransparentAvatar = (args) => {
-    return (_jsx(Avatar, { shape: args.shape, size: args.size, name: args.name, imageSrc: 'https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png' }, void 0));
+    return (_jsx(Avatar, { shape: args.shape, size: args.size, name: args.name, imageSrc: 'https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png' }));
 };
 export const IconAvatar = (args) => {
-    return _jsx(Avatar, { shape: args.shape, size: args.size, name: args.name, icon: args.icon }, void 0);
+    return (_jsx(Avatar, { shape: args.shape, size: args.size, name: args.name, icon: args.icon, color: args.color, backgroundColor: args.backgroundColor }));
 };
 IconAvatar.args = {
-    icon: 'headset'
+    icon: 'headset',
+    color: '#ffffff',
+    backgroundColor: '#4c5a67'
 };
 IconAvatar.argTypes = {
-    icon: { options: icons, control: { type: 'select', icons: true } }
+    icon: { options: icons, control: { type: 'select', icons: true } },
+    color: { control: { type: 'color' } },
+    backgroundColor: { control: { type: 'color' } }
 };
 export const StatusAvatar = (args) => {
-    return _jsx(Avatar, { shape: args.shape, size: args.size, name: args.name, status: args.status }, void 0);
+    return _jsx(Avatar, { shape: args.shape, size: args.size, name: args.name, status: args.status });
 };
 StatusAvatar.args = {
     status: 'active'
@@ -48,4 +52,25 @@ StatusAvatar.args = {
 StatusAvatar.argTypes = {
     status: { options: ['active', undefined], control: { type: 'select' } }
 };
+export const ConfigurableAvatar = (args) => {
+    return (_jsx(Configuration, { theme: {
+            components: {
+                avatar: {
+                    'background-color': args.backgroundColor,
+                    'border-radius': args.borderRadius
+                }
+            }
+        }, children: _jsx(Avatar, { shape: 'squircle', name: 'John Doe' }) }));
+};
+ConfigurableAvatar.args = {
+    backgroundColor: '#4c5a67',
+    borderRadius: '0.5rem'
+};
+ConfigurableAvatar.argTypes = {
+    backgroundColor: { control: { type: 'color' } },
+    borderRadius: { control: { type: 'text' } },
+    shape: { table: { disable: true } },
+    size: { table: { disable: true } },
+    name: { table: { disable: true } }
+};
 //# sourceMappingURL=Avatar.stories.js.map

package/lib/core/Avatar/Avatar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.stories.js","sourceRoot":"","sources":["../../../src/core/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Avatar, AvatarProps, icons } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Avatar',\n  component: Avatar,\n  args: {\n    shape: 'circle',\n    size: 'm',\n    name: 'John Doe'\n  },\n  argTypes: {\n    shape: { options: ['circle', 'squircle'], control: { type: 'select' } },\n    size: { options: ['s', 'm', 'l'], control: { type: 'select' } },\n    name: { control: { type: 'text' } }\n  }\n} as Meta;\n\nexport const DefaultAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n  return <Avatar shape={args.shape} size={args.size} name={args.name} imageSrc={args.imageSrc} />;\n};\n\nDefaultAvatar.args = {\n  name: 'Pegasystems',\n  imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'\n};\n\nDefaultAvatar.argTypes = {\n  imageSrc: { control: { type: 'text' } }\n};\n\nexport const TextOnlyAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n  return <Avatar shape={args.shape} size={args.size} name={args.name} />;\n};\n\nexport const TransparentAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n  return (\n    <Avatar\n      shape={args.shape}\n      size={args.size}\n      name={args.name}\n      imageSrc='https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png'\n    />\n  );\n};\n\nexport const IconAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n  return <Avatar shape={args.shape} size={args.size} name={args.name} icon={args.icon} />;\n};\n\nIconAvatar.args = {\n  icon: 'headset'\n};\n\nIconAvatar.argTypes = {\n  icon: { options: icons, control: { type: 'select', icons: true } }\n};\n\nexport const StatusAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n  return <Avatar shape={args.shape} size={args.size} name={args.name} status={args.status} />;\n};\n\nStatusAvatar.args = {\n  status: 'active'\n};\n\nStatusAvatar.argTypes = {\n  status: { options: ['active', undefined], control: { type: 'select' } }\n};\n"]}
+{"version":3,"file":"Avatar.stories.js","sourceRoot":"","sources":["../../../src/core/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Avatar, AvatarProps, Configuration, icons } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Avatar',\n  component: Avatar,\n  args: {\n    shape: 'circle',\n    size: 'm',\n    name: 'John Doe'\n  },\n  argTypes: {\n    shape: { options: ['circle', 'squircle'], control: { type: 'select' } },\n    size: { options: ['s', 'm', 'l', 'xl'], control: { type: 'select' } },\n    name: { control: { type: 'text' } }\n  }\n} as Meta;\n\nexport const DefaultAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n  return <Avatar shape={args.shape} size={args.size} name={args.name} imageSrc={args.imageSrc} />;\n};\n\nDefaultAvatar.args = {\n  name: 'Pegasystems',\n  imageSrc: 'https://www.pega.com/sites/default/files/media/images/2018-12/Pega.com-og.png'\n};\n\nDefaultAvatar.argTypes = {\n  imageSrc: { control: { type: 'text' } }\n};\n\nexport const TextOnlyAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n  return <Avatar shape={args.shape} size={args.size} name={args.name} />;\n};\n\nexport const TransparentAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n  return (\n    <Avatar\n      shape={args.shape}\n      size={args.size}\n      name={args.name}\n      imageSrc='https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png'\n    />\n  );\n};\n\nexport const IconAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n  return (\n    <Avatar\n      shape={args.shape}\n      size={args.size}\n      name={args.name}\n      icon={args.icon}\n      color={args.color}\n      backgroundColor={args.backgroundColor}\n    />\n  );\n};\n\nIconAvatar.args = {\n  icon: 'headset',\n  color: '#ffffff',\n  backgroundColor: '#4c5a67'\n};\n\nIconAvatar.argTypes = {\n  icon: { options: icons, control: { type: 'select', icons: true } },\n  color: { control: { type: 'color' } },\n  backgroundColor: { control: { type: 'color' } }\n};\n\nexport const StatusAvatar: Story<AvatarProps> = (args: AvatarProps) => {\n  return <Avatar shape={args.shape} size={args.size} name={args.name} status={args.status} />;\n};\n\nStatusAvatar.args = {\n  status: 'active'\n};\n\nStatusAvatar.argTypes = {\n  status: { options: ['active', undefined], control: { type: 'select' } }\n};\n\ninterface ConfigurableAvatarProps extends AvatarProps {\n  backgroundColor?: string;\n  borderRadius?: string;\n}\n\nexport const ConfigurableAvatar: Story<ConfigurableAvatarProps> = (\n  args: ConfigurableAvatarProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          avatar: {\n            'background-color': args.backgroundColor,\n            'border-radius': args.borderRadius\n          }\n        }\n      }}\n    >\n      <Avatar shape='squircle' name='John Doe' />\n    </Configuration>\n  );\n};\n\nConfigurableAvatar.args = {\n  backgroundColor: '#4c5a67',\n  borderRadius: '0.5rem'\n};\n\nConfigurableAvatar.argTypes = {\n  backgroundColor: { control: { type: 'color' } },\n  borderRadius: { control: { type: 'text' } },\n  shape: { table: { disable: true } },\n  size: { table: { disable: true } },\n  name: { table: { disable: true } }\n};\n"]}

package/lib/core/Backdrop/Backdrop.stories.js

@@ -17,10 +17,10 @@ export default {
 };
 export const BackdropDemo = (args) => {
     const [open, setOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Backdrop" }, void 0), open && (_jsx(Backdrop, { open: open, alpha: args.alpha, variant: args.variant, transitionSpeed: args.transitionSpeed, children: _jsx(Button, { variant: 'primary', onClick: () => setOpen(false), children: "Close Backdrop" }, void 0) }, void 0))] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Backdrop" }), open && (_jsx(Backdrop, { open: open, alpha: args.alpha, variant: args.variant, transitionSpeed: args.transitionSpeed, children: _jsx(Button, { variant: 'primary', onClick: () => setOpen(false), children: "Close Backdrop" }) }))] }));
 };
 export const DismissibleBackdropDemo = (args) => {
     const [open, setOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Backdrop" }, void 0), open && (_jsx(Backdrop, { onClick: () => setOpen(false), open: open, alpha: args.alpha, variant: args.variant, transitionSpeed: args.transitionSpeed, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "This Backdrop can be dismissed by clicking anywhere in the viewport." }, void 0) }, void 0) }, void 0) }, void 0))] }, void 0));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), children: "Open Backdrop" }), open && (_jsx(Backdrop, { onClick: () => setOpen(false), open: open, alpha: args.alpha, variant: args.variant, transitionSpeed: args.transitionSpeed, children: _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Text, { children: "This Backdrop can be dismissed by clicking anywhere in the viewport." }) }) }) }))] }));
 };
 //# sourceMappingURL=Backdrop.stories.js.map

package/lib/core/Backdrop/Backdrop.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Backdrop.stories.js","sourceRoot":"","sources":["../../../src/core/Backdrop/Backdrop.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAiB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEnG,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;QACV,OAAO,EAAE,MAAM;QACf,eAAe,EAAE,QAAQ;KAC1B;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACtC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACpE,eAAe,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;KAC9F;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,IAAmB,EAAE,EAAE;IACxE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,sCAAwB,EAE3D,IAAI,IAAI,CACP,KAAC,QAAQ,IACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,eAAe,EAAE,IAAI,CAAC,eAAe,YAErC,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,uCAE9C,WACA,CACZ,YACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAyB,CAAC,IAAmB,EAAE,EAAE;IACnF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,sCAAwB,EAE3D,IAAI,IAAI,CACP,KAAC,QAAQ,IACP,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,eAAe,EAAE,IAAI,CAAC,eAAe,YAErC,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,IAAI,+FAA4E,WACrE,WACT,WACE,CACZ,YACA,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Backdrop, BackdropProps, Button, Card, CardContent, Text } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Backdrop',\n  component: Backdrop,\n  args: {\n    alpha: 0.4,\n    variant: 'dark',\n    transitionSpeed: 'medium'\n  },\n  argTypes: {\n    alpha: { control: { type: 'number' } },\n    variant: { options: ['dark', 'light'], control: { type: 'select' } },\n    transitionSpeed: { options: ['slow', 'medium', 'fast', 'none'], control: { type: 'select' } }\n  }\n} as Meta;\n\nexport const BackdropDemo: Story<BackdropProps> = (args: BackdropProps) => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open Backdrop</Button>\n\n      {open && (\n        <Backdrop\n          open={open}\n          alpha={args.alpha}\n          variant={args.variant}\n          transitionSpeed={args.transitionSpeed}\n        >\n          <Button variant='primary' onClick={() => setOpen(false)}>\n            Close Backdrop\n          </Button>\n        </Backdrop>\n      )}\n    </>\n  );\n};\n\nexport const DismissibleBackdropDemo: Story<BackdropProps> = (args: BackdropProps) => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open Backdrop</Button>\n\n      {open && (\n        <Backdrop\n          onClick={() => setOpen(false)}\n          open={open}\n          alpha={args.alpha}\n          variant={args.variant}\n          transitionSpeed={args.transitionSpeed}\n        >\n          <Card>\n            <CardContent>\n              <Text>This Backdrop can be dismissed by clicking anywhere in the viewport.</Text>\n            </CardContent>\n          </Card>\n        </Backdrop>\n      )}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"Backdrop.stories.js","sourceRoot":"","sources":["../../../src/core/Backdrop/Backdrop.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,QAAQ,EAAiB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEnG,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;QACV,OAAO,EAAE,MAAM;QACf,eAAe,EAAE,QAAQ;KAC1B;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACtC,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QACpE,eAAe,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;KAC9F;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,YAAY,GAAyB,CAAC,IAAmB,EAAE,EAAE;IACxE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,8BAAwB,EAE3D,IAAI,IAAI,CACP,KAAC,QAAQ,IACP,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,eAAe,EAAE,IAAI,CAAC,eAAe,YAErC,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,+BAE9C,GACA,CACZ,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAyB,CAAC,IAAmB,EAAE,EAAE;IACnF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,8BAAwB,EAE3D,IAAI,IAAI,CACP,KAAC,QAAQ,IACP,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,eAAe,EAAE,IAAI,CAAC,eAAe,YAErC,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,IAAI,uFAA4E,GACrE,GACT,GACE,CACZ,IACA,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Backdrop, BackdropProps, Button, Card, CardContent, Text } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Backdrop',\n  component: Backdrop,\n  args: {\n    alpha: 0.4,\n    variant: 'dark',\n    transitionSpeed: 'medium'\n  },\n  argTypes: {\n    alpha: { control: { type: 'number' } },\n    variant: { options: ['dark', 'light'], control: { type: 'select' } },\n    transitionSpeed: { options: ['slow', 'medium', 'fast', 'none'], control: { type: 'select' } }\n  }\n} as Meta;\n\nexport const BackdropDemo: Story<BackdropProps> = (args: BackdropProps) => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open Backdrop</Button>\n\n      {open && (\n        <Backdrop\n          open={open}\n          alpha={args.alpha}\n          variant={args.variant}\n          transitionSpeed={args.transitionSpeed}\n        >\n          <Button variant='primary' onClick={() => setOpen(false)}>\n            Close Backdrop\n          </Button>\n        </Backdrop>\n      )}\n    </>\n  );\n};\n\nexport const DismissibleBackdropDemo: Story<BackdropProps> = (args: BackdropProps) => {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <>\n      <Button onClick={() => setOpen(true)}>Open Backdrop</Button>\n\n      {open && (\n        <Backdrop\n          onClick={() => setOpen(false)}\n          open={open}\n          alpha={args.alpha}\n          variant={args.variant}\n          transitionSpeed={args.transitionSpeed}\n        >\n          <Card>\n            <CardContent>\n              <Text>This Backdrop can be dismissed by clicking anywhere in the viewport.</Text>\n            </CardContent>\n          </Card>\n        </Backdrop>\n      )}\n    </>\n  );\n};\n"]}

package/lib/core/Badges/Alert.stories.js

@@ -5,7 +5,7 @@ export default {
     component: Alert
 };
 export const AlertBadge = (args) => {
-    return _jsx(Alert, { variant: args.variant }, void 0);
+    return _jsx(Alert, { variant: args.variant });
 };
 AlertBadge.args = {
     variant: 'success'

package/lib/core/Badges/Alert.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Alert.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAc,MAAM,yBAAyB,CAAC;AAE5D,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,KAAK;CACT,CAAC;AAEV,MAAM,CAAC,MAAM,UAAU,GAAsB,CAAC,IAAgB,EAAE,EAAE;IAChE,OAAO,KAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,WAAI,CAAC;AAC1C,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACzE,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Alert, AlertProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Badges/Alert',\n  component: Alert\n} as Meta;\n\nexport const AlertBadge: Story<AlertProps> = (args: AlertProps) => {\n  return <Alert variant={args.variant} />;\n};\n\nAlertBadge.args = {\n  variant: 'success'\n};\n\nAlertBadge.argTypes = {\n  variant: { options: ['success', 'urgent'], control: { type: 'select' } }\n};\n"]}
+{"version":3,"file":"Alert.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Alert.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAc,MAAM,yBAAyB,CAAC;AAE5D,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,KAAK;CACT,CAAC;AAEV,MAAM,CAAC,MAAM,UAAU,GAAsB,CAAC,IAAgB,EAAE,EAAE;IAChE,OAAO,KAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,CAAC;AAC1C,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CACzE,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Alert, AlertProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Badges/Alert',\n  component: Alert\n} as Meta;\n\nexport const AlertBadge: Story<AlertProps> = (args: AlertProps) => {\n  return <Alert variant={args.variant} />;\n};\n\nAlertBadge.args = {\n  variant: 'success'\n};\n\nAlertBadge.argTypes = {\n  variant: { options: ['success', 'urgent'], control: { type: 'select' } }\n};\n"]}

package/lib/core/Badges/Count.stories.js

@@ -5,7 +5,7 @@ export default {
     component: Count
 };
 export const CountBadge = (args) => {
-    return _jsx(Count, { variant: args.variant, children: args.children }, void 0);
+    return _jsx(Count, { variant: args.variant, children: args.children });
 };
 CountBadge.args = {
     children: 3,

package/lib/core/Badges/Count.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Count.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Count.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAc,MAAM,yBAAyB,CAAC;AAE5D,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,KAAK;CACT,CAAC;AAEV,MAAM,CAAC,MAAM,UAAU,GAAsB,CAAC,IAAgB,EAAE,EAAE;IAChE,OAAO,KAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAAG,IAAI,CAAC,QAAQ,WAAS,CAAC;AAC/D,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,QAAQ,EAAE,CAAC;IACX,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACzC,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,CAAC;QACzD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Count, CountProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Badges/Count',\n  component: Count\n} as Meta;\n\nexport const CountBadge: Story<CountProps> = (args: CountProps) => {\n  return <Count variant={args.variant}>{args.children}</Count>;\n};\n\nCountBadge.args = {\n  children: 3,\n  variant: 'default'\n};\n\nCountBadge.argTypes = {\n  children: { control: { type: 'number' } },\n  variant: {\n    options: ['default', 'interactive', 'inverted', 'urgent'],\n    control: { type: 'select' }\n  }\n};\n"]}
+{"version":3,"file":"Count.stories.js","sourceRoot":"","sources":["../../../src/core/Badges/Count.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAc,MAAM,yBAAyB,CAAC;AAE5D,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,KAAK;CACT,CAAC;AAEV,MAAM,CAAC,MAAM,UAAU,GAAsB,CAAC,IAAgB,EAAE,EAAE;IAChE,OAAO,KAAC,KAAK,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,YAAG,IAAI,CAAC,QAAQ,GAAS,CAAC;AAC/D,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,QAAQ,EAAE,CAAC;IACX,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACzC,OAAO,EAAE;QACP,OAAO,EAAE,CAAC,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,QAAQ,CAAC;QACzD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;CACF,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Count, CountProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Badges/Count',\n  component: Count\n} as Meta;\n\nexport const CountBadge: Story<CountProps> = (args: CountProps) => {\n  return <Count variant={args.variant}>{args.children}</Count>;\n};\n\nCountBadge.args = {\n  children: 3,\n  variant: 'default'\n};\n\nCountBadge.argTypes = {\n  children: { control: { type: 'number' } },\n  variant: {\n    options: ['default', 'interactive', 'inverted', 'urgent'],\n    control: { type: 'select' }\n  }\n};\n"]}

package/lib/core/Badges/Keyboard.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, Story } from '@storybook/react';
+import { KeyboardProps } from '@pega/cosmos-react-core';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const KeyboardBadge: Story<KeyboardProps>;
+//# sourceMappingURL=Keyboard.stories.d.ts.map

package/lib/core/Badges/Keyboard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Keyboard.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Badges/Keyboard.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAY,aAAa,EAAQ,MAAM,yBAAyB,CAAC;;AAExE,wBAGU;AAEV,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,aAAa,CAM9C,CAAC"}