@pega/cosmos-react-build 9.0.0-build.9.9 → 9.0.0

package/lib/components/AuthoringPanel/AuthoringPanel.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AuthoringPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanel.styles.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,eAAe,yGA0B1B,CAAC;AAGH,eAAO,MAAM,oBAAoB,wIAchC,CAAC;AAGF,eAAO,MAAM,mBAAmB,kNAE/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,kNAEhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,yGAQlC,CAAC;AAGH,eAAO,MAAM,aAAa,kNAIzB,CAAC;AAEF,eAAO,MAAM,sBAAsB;YAA0B,OAAO;SAalE,CAAC;AAGH,eAAO,MAAM,uBAAuB,oNAYlC,CAAC;AAGH,eAAO,MAAM,qBAAqB;2BA/CtB,CAAC;uDA0DX,CAAC;AAGH,eAAO,MAAM,qBAAqB,kNAEjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,yGAIjC,CAAC;AAGH,eAAO,MAAM,mBAAmB,yGAsB9B,CAAC"}
+{"version":3,"file":"AuthoringPanel.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanel.styles.ts"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAElE,eAAO,MAAM,eAAe;;;;mBAoC1B,CAAC;AAGH,eAAO,MAAM,oBAAoB,sQAchC,CAAC;AAGF,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAE/B,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAEhC,CAAC;AAEF,eAAO,MAAM,uBAAuB,6NAQlC,CAAC;AAGH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAIzB,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;aAA2B,OAAO;kLAanE,CAAC;AAGH,eAAO,MAAM,uBAAuB;;2LAYlC,CAAC;AAGH,eAAO,MAAM,qBAAqB;;;2BAkC5B,CAAC;iDAvBL,CAAC;AAGH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sOAEjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,6NAIjC,CAAC;AAGH,eAAO,MAAM,mBAAmB,6NAsB9B,CAAC"}

package/lib/components/AuthoringPanel/AuthoringPanel.styles.js

@@ -5,15 +5,15 @@ import { StyledRegions } from '@pega/cosmos-react-core/lib/components/PageTempla
 import { resizeDrawerMaxWidth, resizeDrawerMinWidth } from '@pega/cosmos-react-core/lib/styles/constants';
 import { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';
 import { StyledPage } from '../PageTemplates/PageTemplates';
-export const StyledPanelPage = styled(StyledPage)(({ theme }) => {
-    const { spacing } = theme.base;
+export const StyledPanelPage = styled(StyledPage)(({ theme: { base: { spacing }, components: { 'case-view': { header: { background } } } } }) => {
     return css `
     width: 100%;
 
     ${StyledPageHeader} {
       padding: calc(2 * ${spacing});
-      padding-block-end: 0;
+      background: ${background};
     }
+
     ${StyledVisual} {
       align-self: start;
     }
@@ -24,6 +24,7 @@ export const StyledPanelPage = styled(StyledPage)(({ theme }) => {
       & ${StyledPageHeader} {
         border-bottom: none;
         padding-block: 0;
+        background: none;
       }
 
       ${StyledTabPanel} {
@@ -111,7 +112,7 @@ export const StyledPreviewDrawer = styled.div(({ theme }) => {
     min-width: ${resizeDrawerMinWidth};
     max-width: ${resizeDrawerMaxWidth};
     width: var(--resize-drawer-width);
-    background: ${theme.base.palette['primary-background']};
+    background: ${theme.base.palette['app-background']};
     height: calc(100vh - var(--appshell-offset, 0rem));
     top: var(--appshell-offset, 0);
     z-index: calc(${theme.base['z-index'].drawer} + 500);

package/lib/components/AuthoringPanel/AuthoringPanel.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AuthoringPanel.styles.js","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanel.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Text,\n  StyledPageHeader,\n  Link,\n  defaultThemeProp,\n  StyledButton,\n  StyledVisual,\n  Flex,\n  readableHue\n} from '@pega/cosmos-react-core';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { StyledRegions } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';\nimport {\n  resizeDrawerMaxWidth,\n  resizeDrawerMinWidth\n} from '@pega/cosmos-react-core/lib/styles/constants';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport { StyledPage } from '../PageTemplates/PageTemplates';\n\nimport type { AuthoringPanelProps } from './AuthoringPanel.types';\n\nexport const StyledPanelPage = styled(StyledPage)(({ theme }) => {\n  const { spacing } = theme.base;\n  return css`\n    width: 100%;\n\n    ${StyledPageHeader} {\n      padding: calc(2 * ${spacing});\n      padding-block-end: 0;\n    }\n    ${StyledVisual} {\n      align-self: start;\n    }\n\n    ${StyledRegions} {\n      padding: 0;\n\n      & ${StyledPageHeader} {\n        border-bottom: none;\n        padding-block: 0;\n      }\n\n      ${StyledTabPanel} {\n        padding-inline: calc(2 * ${spacing});\n      }\n    }\n  `;\n});\nStyledPanelPage.defaultProps = defaultThemeProp;\n\nexport const StyledAuthoringPanel = styled.div<Pick<AuthoringPanelProps, 'open'>>(\n  ({ open, theme }) => {\n    const { animation, palette, spacing } = theme.base;\n    const translate = open ? 0 : '100%';\n    return css`\n      height: calc(100vh - 3rem);\n      position: relative;\n      border-inline-start: solid calc(0.125 * ${spacing}) ${palette['border-line']};\n      transition-property: transform, opacity;\n      transition-duration: calc(2 * ${animation.speed});\n      transition-timing-function: ${animation.timing.ease};\n      transform: ${open ? 'none' : `translateX(${translate})`};\n    `;\n  }\n);\nStyledAuthoringPanel.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderContent = styled(Flex)`\n  overflow: hidden;\n`;\n\nexport const StyledTitleContainer = styled(Flex)`\n  overflow: hidden;\n`;\n\nexport const StyledProgressContainer = styled.div(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    width: 100%;\n    ${StyledButton} {\n      z-index: ${theme.base['z-index'].drawer};\n    }\n  `;\n});\nStyledProgressContainer.defaultProps = defaultThemeProp;\n\nexport const StyledActions = styled(Flex)`\n  ${StyledButton} {\n    margin-inline-start: 0;\n  }\n`;\n\nexport const StyledTextWithEllipsis = styled(Text)<{ isLink: boolean }>(({\n  theme: {\n    base: { spacing }\n  },\n  isLink\n}) => {\n  return css`\n    ${ellipsisOverflow}\n    ${isLink === false &&\n    `\n      margin: calc(0.5 * ${spacing});\n    `}\n  `;\n});\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryTextButton = styled(Button)(({\n  theme: {\n    base: { spacing }\n  }\n}) => {\n  return css`\n    overflow: hidden;\n    height: 100%;\n    max-width: fit-content;\n    text-overflow: ellipsis;\n    margin: calc(0.5 * ${spacing});\n  `;\n});\nStyledPrimaryTextButton.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryTextLink = styled(Link)(({\n  theme: {\n    base: { spacing }\n  }\n}) => {\n  return css`\n    margin: calc(0.5 * ${spacing});\n    overflow: hidden;\n    max-width: fit-content;\n    ${ellipsisOverflow}\n  `;\n});\nStyledPrimaryTextLink.defaultProps = defaultThemeProp;\n\nexport const StyledTitlesContainer = styled(Flex)`\n  overflow: hidden;\n`;\n\nexport const StyledPrimaryContainer = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: calc(-1 * ${theme.base.spacing});\n  `;\n});\nStyledPrimaryContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewDrawer = styled.div(({ theme }) => {\n  return css`\n    min-width: ${resizeDrawerMinWidth};\n    max-width: ${resizeDrawerMaxWidth};\n    width: var(--resize-drawer-width);\n    background: ${theme.base.palette['primary-background']};\n    height: calc(100vh - var(--appshell-offset, 0rem));\n    top: var(--appshell-offset, 0);\n    z-index: calc(${theme.base['z-index'].drawer} + 500);\n    transition-property: transform, box-shadow, opacity, border-inline-start;\n    transition-duration: max(${theme.base.animation.speed}, 0.0001s);\n    transition-timing-function: ${theme.base.animation.timing.ease};\n\n    @media (min-width: ${theme.base.breakpoints.xl}) {\n      box-shadow: none;\n      border-inline-start: 0.0625rem solid\n        ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {\n          mode: 'both',\n          level: 'AANonText'\n        })};\n    }\n  `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"AuthoringPanel.styles.js","sourceRoot":"","sources":["../../../src/components/AuthoringPanel/AuthoringPanel.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport {\n  Button,\n  Text,\n  StyledPageHeader,\n  Link,\n  defaultThemeProp,\n  StyledButton,\n  StyledVisual,\n  Flex,\n  readableHue\n} from '@pega/cosmos-react-core';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\nimport { StyledRegions } from '@pega/cosmos-react-core/lib/components/PageTemplates/PageTemplates';\nimport {\n  resizeDrawerMaxWidth,\n  resizeDrawerMinWidth\n} from '@pega/cosmos-react-core/lib/styles/constants';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\n\nimport { StyledPage } from '../PageTemplates/PageTemplates';\n\nimport type { AuthoringPanelProps } from './AuthoringPanel.types';\n\nexport const StyledPanelPage = styled(StyledPage)(({\n  theme: {\n    base: { spacing },\n    components: {\n      'case-view': {\n        header: { background }\n      }\n    }\n  }\n}) => {\n  return css`\n    width: 100%;\n\n    ${StyledPageHeader} {\n      padding: calc(2 * ${spacing});\n      background: ${background};\n    }\n\n    ${StyledVisual} {\n      align-self: start;\n    }\n\n    ${StyledRegions} {\n      padding: 0;\n\n      & ${StyledPageHeader} {\n        border-bottom: none;\n        padding-block: 0;\n        background: none;\n      }\n\n      ${StyledTabPanel} {\n        padding-inline: calc(2 * ${spacing});\n      }\n    }\n  `;\n});\nStyledPanelPage.defaultProps = defaultThemeProp;\n\nexport const StyledAuthoringPanel = styled.div<Pick<AuthoringPanelProps, 'open'>>(\n  ({ open, theme }) => {\n    const { animation, palette, spacing } = theme.base;\n    const translate = open ? 0 : '100%';\n    return css`\n      height: calc(100vh - 3rem);\n      position: relative;\n      border-inline-start: solid calc(0.125 * ${spacing}) ${palette['border-line']};\n      transition-property: transform, opacity;\n      transition-duration: calc(2 * ${animation.speed});\n      transition-timing-function: ${animation.timing.ease};\n      transform: ${open ? 'none' : `translateX(${translate})`};\n    `;\n  }\n);\nStyledAuthoringPanel.defaultProps = defaultThemeProp;\n\nexport const StyledHeaderContent = styled(Flex)`\n  overflow: hidden;\n`;\n\nexport const StyledTitleContainer = styled(Flex)`\n  overflow: hidden;\n`;\n\nexport const StyledProgressContainer = styled.div(({ theme }) => {\n  return css`\n    padding: calc(2 * ${theme.base.spacing});\n    width: 100%;\n    ${StyledButton} {\n      z-index: ${theme.base['z-index'].drawer};\n    }\n  `;\n});\nStyledProgressContainer.defaultProps = defaultThemeProp;\n\nexport const StyledActions = styled(Flex)`\n  ${StyledButton} {\n    margin-inline-start: 0;\n  }\n`;\n\nexport const StyledTextWithEllipsis = styled(Text)<{ isLink?: boolean }>(({\n  theme: {\n    base: { spacing }\n  },\n  isLink\n}) => {\n  return css`\n    ${ellipsisOverflow}\n    ${isLink === false &&\n    `\n      margin: calc(0.5 * ${spacing});\n    `}\n  `;\n});\nStyledTextWithEllipsis.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryTextButton = styled(Button)(({\n  theme: {\n    base: { spacing }\n  }\n}) => {\n  return css`\n    overflow: hidden;\n    height: 100%;\n    max-width: fit-content;\n    text-overflow: ellipsis;\n    margin: calc(0.5 * ${spacing});\n  `;\n});\nStyledPrimaryTextButton.defaultProps = defaultThemeProp;\n\nexport const StyledPrimaryTextLink = styled(Link)(({\n  theme: {\n    base: { spacing }\n  }\n}) => {\n  return css`\n    margin: calc(0.5 * ${spacing});\n    overflow: hidden;\n    max-width: fit-content;\n    ${ellipsisOverflow}\n  `;\n});\nStyledPrimaryTextLink.defaultProps = defaultThemeProp;\n\nexport const StyledTitlesContainer = styled(Flex)`\n  overflow: hidden;\n`;\n\nexport const StyledPrimaryContainer = styled.div(({ theme }) => {\n  return css`\n    margin-block-start: calc(-1 * ${theme.base.spacing});\n  `;\n});\nStyledPrimaryContainer.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewDrawer = styled.div(({ theme }) => {\n  return css`\n    min-width: ${resizeDrawerMinWidth};\n    max-width: ${resizeDrawerMaxWidth};\n    width: var(--resize-drawer-width);\n    background: ${theme.base.palette['app-background']};\n    height: calc(100vh - var(--appshell-offset, 0rem));\n    top: var(--appshell-offset, 0);\n    z-index: calc(${theme.base['z-index'].drawer} + 500);\n    transition-property: transform, box-shadow, opacity, border-inline-start;\n    transition-duration: max(${theme.base.animation.speed}, 0.0001s);\n    transition-timing-function: ${theme.base.animation.timing.ease};\n\n    @media (min-width: ${theme.base.breakpoints.xl}) {\n      box-shadow: none;\n      border-inline-start: 0.0625rem solid\n        ${readableHue(theme.base.palette['border-line'], theme.base.palette['app-background'], {\n          mode: 'both',\n          level: 'AANonText'\n        })};\n    }\n  `;\n});\n\nStyledPreviewDrawer.defaultProps = defaultThemeProp;\n"]}

package/lib/components/Automation/Automation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Automation.js","sourceRoot":"","sources":["../../../src/components/Automation/Automation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useEffect, useMemo, forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n  Flex,\n  Button,\n  Icon,\n  useTestIds,\n  withTestIds,\n  useDirection,\n  useEvent,\n  useI18n,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport type { TreeProps, ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nimport RuleStep from './RuleStep';\nimport { getAutomationTestIds } from './Automation.test-ids';\nimport { automationTreeHelpers } from './Automation.utils';\nimport { StyledAIButton, StyledAutomation, StyledBaseTree } from './Automation.styles';\nimport type { AutomationProps, RuleStepTreeNode } from './Automation.types';\nimport AutomationContext from './AutomationContext';\n\nregisterIcon(caretDownIcon, caretLeftIcon, caretRightIcon);\n\nconst NodeRenderer: TreeProps<RuleStepTreeNode>['nodeRenderer'] = ({ subTree, ...restProps }) => {\n  return (\n    <>\n      <RuleStep {...restProps} />\n      {subTree}\n    </>\n  );\n};\n\nconst Automation: ForwardRefForwardPropsComponent<AutomationProps> = forwardRef(\n  ({\n    testId,\n    nodes,\n    onExpandAll,\n    onCollapseAll,\n    focusedNodeId,\n    onGenerateCommentsUsingGenAI\n  }: PropsWithoutRef<AutomationProps>) => {\n    const t = useI18n();\n    const { rtl } = useDirection();\n    const testIds = useTestIds(testId, getAutomationTestIds);\n\n    const treeRef = useRef<HTMLDivElement>(null);\n\n    const [focusedNode, setFocusedNode] = useState<RuleStepTreeNode['stepId']>('');\n    const [focusInsideNode, setFocusInsideNode] = useState(false);\n    const [focusInsideTree, setFocusInsideTree] = useState(false);\n\n    // handle key strokes on tree\n    const handlekeyDown = (e: KeyboardEvent) => {\n      if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key) && focusInsideNode) {\n        return;\n      }\n      switch (e.key) {\n        case 'ArrowDown': {\n          const nextNode = automationTreeHelpers.getNextNode(nodes, focusedNode);\n          setFocusedNode(nextNode.stepId);\n          break;\n        }\n        case 'ArrowUp': {\n          const previousNode = automationTreeHelpers.getPreviousNode(nodes, focusedNode);\n          setFocusedNode(previousNode.stepId);\n          break;\n        }\n        case 'Enter': {\n          setFocusInsideNode(true);\n          break;\n        }\n        case 'Escape': {\n          if (focusInsideNode) {\n            const currentFocussedNodeId = document.activeElement\n              ?.closest('[role=\"treeitem\"]')\n              ?.getAttribute('id');\n            if (currentFocussedNodeId) {\n              setFocusedNode(currentFocussedNodeId);\n            }\n            setFocusInsideNode(false);\n          }\n\n          break;\n        }\n        default:\n          break;\n      }\n    };\n\n    // handle focus movements in and out of tree\n    const handleFocusEvent = (e: FocusEvent) => {\n      switch (e.type) {\n        case 'focusin': {\n          if (!focusedNode) {\n            setFocusedNode(nodes[0].stepId);\n          }\n          if (!focusInsideTree) {\n            setFocusInsideTree(true);\n          }\n\n          break;\n        }\n        case 'focusout': {\n          if (focusInsideTree) {\n            setFocusInsideTree(false);\n          }\n          break;\n        }\n        default:\n          break;\n      }\n    };\n\n    const handleClick = (e: Event) => {\n      const currentNodeId =\n        e.target instanceof Element\n          ? e.target.closest('[role=\"treeitem\"]')?.getAttribute('id')\n          : null;\n      if (focusInsideTree && !focusInsideNode && currentNodeId) {\n        setFocusInsideNode(true);\n        setFocusedNode(currentNodeId);\n      }\n    };\n\n    // event handlers for focus management.\n    useEvent('keydown', handlekeyDown, { target: treeRef });\n    useEvent('focusin', handleFocusEvent, { target: treeRef });\n    useEvent('focusout', handleFocusEvent, { target: treeRef });\n    useEvent('click', handleClick, { target: treeRef });\n\n    // To capture focusNode from story\n    useEffect(() => {\n      if (focusedNodeId) {\n        setFocusInsideNode(false);\n        setFocusedNode(focusedNodeId);\n      }\n    }, [focusedNodeId]);\n\n    const indexedNodes = useMemo(() => automationTreeHelpers.calculateStepIndices(nodes), [nodes]);\n\n    const automationCtxValue = useMemo(\n      () => ({\n        focusedNodeId: focusedNode,\n        focusInsideNode,\n        focusInsideTree,\n        firstNodeId: nodes[0]?.stepId\n      }),\n      [focusedNode, focusInsideNode, focusInsideTree, nodes]\n    );\n\n    return (\n      <AutomationContext.Provider value={automationCtxValue}>\n        <StyledAutomation>\n          <Flex\n            container={{ pad: [0, 0, 2, 2] }}\n            justify='space-between'\n            data-testid={testIds.root}\n            alignItems='center'\n          >\n            {onExpandAll && (\n              <Button\n                aria-label={t('expand_steps')}\n                data-testid={testIds.expandAll}\n                onClick={onExpandAll}\n              >\n                <Icon name='caret-down' />\n                {t('expand_all')}\n              </Button>\n            )}\n\n            {onCollapseAll && (\n              <Button\n                aria-label={t('collapse_steps')}\n                data-testid={testIds.collapseAll}\n                onClick={onCollapseAll}\n              >\n                <Icon name={`caret-${rtl ? 'left' : 'right'}`} />\n                {t('collapse_all')}\n              </Button>\n            )}\n\n            {onGenerateCommentsUsingGenAI && (\n              <StyledAIButton\n                label={t('generate_comments')}\n                variant='secondary'\n                onClick={onGenerateCommentsUsingGenAI}\n                data-testid={testIds.generateComments}\n              />\n            )}\n          </Flex>\n\n          <StyledBaseTree\n            ref={treeRef}\n            testId={testIds.steps}\n            nodes={indexedNodes}\n            nodeRenderer={NodeRenderer}\n          />\n        </StyledAutomation>\n      </AutomationContext.Provider>\n    );\n  }\n);\n\nexport default withTestIds(Automation, getAutomationTestIds);\n"]}
+{"version":3,"file":"Automation.js","sourceRoot":"","sources":["../../../src/components/Automation/Automation.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useRef, useState, useEffect, useMemo, forwardRef } from 'react';\nimport type { PropsWithoutRef } from 'react';\n\nimport {\n  Flex,\n  Button,\n  Icon,\n  useTestIds,\n  withTestIds,\n  useDirection,\n  useEvent,\n  useI18n,\n  registerIcon\n} from '@pega/cosmos-react-core';\nimport type { TreeProps, ForwardRefForwardPropsComponent } from '@pega/cosmos-react-core';\nimport * as caretDownIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-down.icon';\nimport * as caretLeftIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-left.icon';\nimport * as caretRightIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/caret-right.icon';\n\nimport RuleStep from './RuleStep';\nimport { getAutomationTestIds } from './Automation.test-ids';\nimport { automationTreeHelpers } from './Automation.utils';\nimport { StyledAIButton, StyledAutomation, StyledBaseTree } from './Automation.styles';\nimport type { AutomationProps, RuleStepTreeNode } from './Automation.types';\nimport AutomationContext from './AutomationContext';\n\nregisterIcon(caretDownIcon, caretLeftIcon, caretRightIcon);\n\nconst NodeRenderer: TreeProps<RuleStepTreeNode>['nodeRenderer'] = ({ subTree, ...restProps }) => {\n  return (\n    <>\n      <RuleStep {...restProps} />\n      {subTree}\n    </>\n  );\n};\n\nconst Automation: ForwardRefForwardPropsComponent<AutomationProps> = forwardRef(\n  ({\n    testId,\n    nodes,\n    onExpandAll,\n    onCollapseAll,\n    focusedNodeId,\n    onGenerateCommentsUsingGenAI\n  }: PropsWithoutRef<AutomationProps>) => {\n    const t = useI18n();\n    const { rtl } = useDirection();\n    const testIds = useTestIds(testId, getAutomationTestIds);\n\n    const treeRef = useRef<HTMLUListElement>(null);\n\n    const [focusedNode, setFocusedNode] = useState<RuleStepTreeNode['stepId']>('');\n    const [focusInsideNode, setFocusInsideNode] = useState(false);\n    const [focusInsideTree, setFocusInsideTree] = useState(false);\n\n    // handle key strokes on tree\n    const handlekeyDown = (e: KeyboardEvent) => {\n      if (['Enter', 'ArrowDown', 'ArrowUp'].includes(e.key) && focusInsideNode) {\n        return;\n      }\n      switch (e.key) {\n        case 'ArrowDown': {\n          const nextNode = automationTreeHelpers.getNextNode(nodes, focusedNode);\n          setFocusedNode(nextNode.stepId);\n          break;\n        }\n        case 'ArrowUp': {\n          const previousNode = automationTreeHelpers.getPreviousNode(nodes, focusedNode);\n          setFocusedNode(previousNode.stepId);\n          break;\n        }\n        case 'Enter': {\n          setFocusInsideNode(true);\n          break;\n        }\n        case 'Escape': {\n          if (focusInsideNode) {\n            const currentFocussedNodeId = document.activeElement\n              ?.closest('[role=\"treeitem\"]')\n              ?.getAttribute('id');\n            if (currentFocussedNodeId) {\n              setFocusedNode(currentFocussedNodeId);\n            }\n            setFocusInsideNode(false);\n          }\n\n          break;\n        }\n        default:\n          break;\n      }\n    };\n\n    // handle focus movements in and out of tree\n    const handleFocusEvent = (e: FocusEvent) => {\n      switch (e.type) {\n        case 'focusin': {\n          if (!focusedNode) {\n            setFocusedNode(nodes[0].stepId);\n          }\n          if (!focusInsideTree) {\n            setFocusInsideTree(true);\n          }\n\n          break;\n        }\n        case 'focusout': {\n          if (focusInsideTree) {\n            setFocusInsideTree(false);\n          }\n          break;\n        }\n        default:\n          break;\n      }\n    };\n\n    const handleClick = (e: Event) => {\n      const currentNodeId =\n        e.target instanceof Element\n          ? e.target.closest('[role=\"treeitem\"]')?.getAttribute('id')\n          : null;\n      if (focusInsideTree && !focusInsideNode && currentNodeId) {\n        setFocusInsideNode(true);\n        setFocusedNode(currentNodeId);\n      }\n    };\n\n    // event handlers for focus management.\n    useEvent('keydown', handlekeyDown, { target: treeRef });\n    useEvent('focusin', handleFocusEvent, { target: treeRef });\n    useEvent('focusout', handleFocusEvent, { target: treeRef });\n    useEvent('click', handleClick, { target: treeRef });\n\n    // To capture focusNode from story\n    useEffect(() => {\n      if (focusedNodeId) {\n        setFocusInsideNode(false);\n        setFocusedNode(focusedNodeId);\n      }\n    }, [focusedNodeId]);\n\n    const indexedNodes = useMemo(() => automationTreeHelpers.calculateStepIndices(nodes), [nodes]);\n\n    const automationCtxValue = useMemo(\n      () => ({\n        focusedNodeId: focusedNode,\n        focusInsideNode,\n        focusInsideTree,\n        firstNodeId: nodes[0]?.stepId\n      }),\n      [focusedNode, focusInsideNode, focusInsideTree, nodes]\n    );\n\n    return (\n      <AutomationContext.Provider value={automationCtxValue}>\n        <StyledAutomation>\n          <Flex\n            container={{ pad: [0, 0, 2, 2] }}\n            justify='space-between'\n            data-testid={testIds.root}\n            alignItems='center'\n          >\n            {onExpandAll && (\n              <Button\n                aria-label={t('expand_steps')}\n                data-testid={testIds.expandAll}\n                onClick={onExpandAll}\n              >\n                <Icon name='caret-down' />\n                {t('expand_all')}\n              </Button>\n            )}\n\n            {onCollapseAll && (\n              <Button\n                aria-label={t('collapse_steps')}\n                data-testid={testIds.collapseAll}\n                onClick={onCollapseAll}\n              >\n                <Icon name={`caret-${rtl ? 'left' : 'right'}`} />\n                {t('collapse_all')}\n              </Button>\n            )}\n\n            {onGenerateCommentsUsingGenAI && (\n              <StyledAIButton\n                label={t('generate_comments')}\n                variant='secondary'\n                onClick={onGenerateCommentsUsingGenAI}\n                data-testid={testIds.generateComments}\n              />\n            )}\n          </Flex>\n\n          <StyledBaseTree\n            ref={treeRef}\n            testId={testIds.steps}\n            nodes={indexedNodes}\n            nodeRenderer={NodeRenderer}\n          />\n        </StyledAutomation>\n      </AutomationContext.Provider>\n    );\n  }\n);\n\nexport default withTestIds(Automation, getAutomationTestIds);\n"]}

package/lib/components/Automation/Automation.styles.d.ts

@@ -1,12 +1,35 @@
-export declare const StyledContainer: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").CardProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledSummary: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledErrorIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledComment: import("styled-components").StyledComponent<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledStepHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledBaseTree: import("styled-components").StyledComponent<(<T extends import("@pega/cosmos-react-core").TreeNode = import("@pega/cosmos-react-core").TreeNode>(props: import("@pega/cosmos-react-core").TreeProps<T> & import("@pega/cosmos-react-core").ForwardProps) => JSX.Element | null) & {
+import type { RuleStepTreeNode } from './Automation.types';
+export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").CardProps, "ref"> & import("react").RefAttributes<HTMLElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
+}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").CardProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledSummary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
+}, never>> & string & Omit<import("@pega/cosmos-react-core").ForwardRefForwardPropsComponent<import("@pega/cosmos-react-core").TextProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledErrorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@pega/cosmos-react-core").IconProps & import("styled-components/dist/types").BaseObject, import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("@pega/cosmos-react-core").IconProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledComment: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<Omit<import("@pega/cosmos-react-core").TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("@pega/cosmos-react-core").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
+}, never>, never>> & string;
+export declare const StyledStepHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledBaseTree: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@pega/cosmos-react-core").TreeProps<RuleStepTreeNode> & import("@pega/cosmos-react-core").ForwardProps, never>> & string & Omit<((props: import("@pega/cosmos-react-core").TreeProps<RuleStepTreeNode> & import("@pega/cosmos-react-core").ForwardProps) => JSX.Element | null) & {
     getTestIds: (testIdProp?: import("@pega/cosmos-react-core").TestIdProp["testId"]) => import("@pega/cosmos-react-core").TestIdsRecord<readonly []>;
-}, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAIButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<import("@pega/cosmos-react-core").AIButtonProps> & import("react").RefAttributes<HTMLButtonElement>>, import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAutomation: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+}, keyof import("react").Component<any, {}, any>>;
+export declare const StyledAIButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<import("@pega/cosmos-react-core").NoChildrenProp & {
+    variant?: "primary" | "secondary";
+    label: string;
+} & {
+    icon?: string;
+    iconOnly: true;
+} & Omit<import("@pega/cosmos-react-core").Attributes<"button">, "icon" | "label" | "children" | "variant" | "iconOnly">, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}) | (Omit<Omit<import("@pega/cosmos-react-core").NoChildrenProp & {
+    variant?: "primary" | "secondary";
+    label: string;
+} & {
+    icon?: string | null;
+    iconOnly?: false;
+} & Omit<import("@pega/cosmos-react-core").Attributes<"button">, "icon" | "label" | "children" | "variant" | "iconOnly">, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}), import("styled-components/dist/types").BaseObject>> & string & Omit<import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<import("@pega/cosmos-react-core").AIButtonProps> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledAutomation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 //# sourceMappingURL=Automation.styles.d.ts.map

package/lib/components/Automation/Automation.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Automation.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Automation/Automation.styles.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,eAAe,kNAiB1B,CAAC;AAIH,eAAO,MAAM,aAAa,kNAEzB,CAAC;AAIF,eAAO,MAAM,aAAa,yGAKxB,CAAC;AAIH,eAAO,MAAM,eAAe,0LAI1B,CAAC;AAIH,eAAO,MAAM,aAAa,kNAIxB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAG5B,CAAC;AAMF,eAAO,MAAM,cAAc;2BAAxB,CAAC;uDAWF,CAAC;AAIH,eAAO,MAAM,cAAc,kRAI1B,CAAC;AAIF,eAAO,MAAM,gBAAgB,yGAI5B,CAAC"}
+{"version":3,"file":"Automation.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Automation/Automation.styles.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAI3D,eAAO,MAAM,eAAe;;yLAiB1B,CAAC;AAIH,eAAO,MAAM,aAAa;;yLAEzB,CAAC;AAIF,eAAO,MAAM,aAAa,6NAKxB,CAAC;AAIH,eAAO,MAAM,eAAe,kaAI1B,CAAC;AAIH,eAAO,MAAM,aAAa;;2BAIxB,CAAC;AAIH,eAAO,MAAM,gBAAgB,6NAG5B,CAAC;AAMF,eAAO,MAAM,cAAc;2BAQY,CAAC;iDAGtC,CAAC;AAIH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;sSAI1B,CAAC;AAIF,eAAO,MAAM,gBAAgB,6NAI5B,CAAC"}

package/lib/components/Automation/Automation.styles.js

@@ -44,7 +44,7 @@ export const StyledStepHeader = styled.div `
 `;
 StyledStepHeader.defaultProps = defaultThemeProp;
 // Automation wrapper styles
-export const StyledBaseTree = styled(Tree)(({ theme: { base: { spacing } } }) => {
+export const StyledBaseTree = styled((Tree))(({ theme: { base: { spacing } } }) => {
     return css `
     &,
     & ul {

package/lib/components/Automation/Automation.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Automation.styles.js","sourceRoot":"","sources":["../../../src/components/Automation/Automation.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC7F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAE7E,mBAAmB;AAEnB,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAC3C,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,MAAM,EACN,OAAO,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,EACvC,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;qCACyB,UAAU;;;;0BAIrB,MAAM,CAAC,aAAa,CAAC;;;GAG5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IACrC,gBAAgB;CACnB,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,OAAO;GAC9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;GACnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,OAAO,GAAG,CAAA;qCACyB,KAAK,CAAC,IAAI,CAAC,OAAO;GACpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGzC,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,4BAA4B;AAE5B,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAC1C,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;uCAG2B,OAAO;;GAE3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;;;CAI7C,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;IACtC,iBAAiB;;;CAGpB,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Card, Text, Tree, Icon, defaultThemeProp, AIButton } from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\n\n// Rule step styles\n\nexport const StyledContainer = styled(Card)(({\n  theme: {\n    base: {\n      shadow,\n      palette: { 'border-line': borderLine }\n    }\n  }\n}) => {\n  return css`\n    border-bottom: 0.0625rem solid ${borderLine};\n\n    &:focus,\n    &:focus-visible {\n      box-shadow: inset ${shadow['focus-solid']};\n      outline: none;\n    }\n  `;\n});\n\nStyledContainer.defaultProps = defaultThemeProp;\n\nexport const StyledSummary = styled(Text)`\n  ${ellipsisOverflow}\n`;\n\nStyledSummary.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    padding: ${theme.base.spacing};\n  `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n  `;\n});\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledComment = styled(StyledSummary)(({ theme }) => {\n  return css`\n    padding-inline-start: calc(4 * ${theme.base.spacing});\n  `;\n});\n\nStyledComment.defaultProps = defaultThemeProp;\n\nexport const StyledStepHeader = styled.div`\n  min-width: 0;\n  flex: 1 1 auto;\n`;\n\nStyledStepHeader.defaultProps = defaultThemeProp;\n\n// Automation wrapper styles\n\nexport const StyledBaseTree = styled(Tree)(({\n  theme: {\n    base: { spacing }\n  }\n}) => {\n  return css`\n    &,\n    & ul {\n      padding-inline-start: calc(2 * ${spacing});\n    }\n  `;\n});\n\nStyledBaseTree.defaultProps = defaultThemeProp;\n\nexport const StyledAIButton = styled(AIButton)`\n  && {\n    margin-inline-start: auto;\n  }\n`;\n\nStyledAIButton.defaultProps = defaultThemeProp;\n\nexport const StyledAutomation = styled.div`\n  ${StyledCardContent}:has(&&&) {\n    padding: unset;\n  }\n`;\n\nStyledAutomation.defaultProps = defaultThemeProp;\n"]}
+{"version":3,"file":"Automation.styles.js","sourceRoot":"","sources":["../../../src/components/Automation/Automation.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC7F,OAAO,EAAE,iBAAiB,EAAE,MAAM,yDAAyD,CAAC;AAC5F,OAAO,EAAE,gBAAgB,EAAE,MAAM,2CAA2C,CAAC;AAI7E,mBAAmB;AAEnB,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAC3C,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,MAAM,EACN,OAAO,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,EACvC,EACF,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;qCACyB,UAAU;;;;0BAIrB,MAAM,CAAC,aAAa,CAAC;;;GAG5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;IACrC,gBAAgB;CACnB,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,OAAO;GAC9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACxD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM;GACnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/D,OAAO,GAAG,CAAA;qCACyB,KAAK,CAAC,IAAI,CAAC,OAAO;GACpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGzC,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,4BAA4B;AAE5B,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,CAAA,IAAsB,CAAA,CAAC,CAAC,CAAC,EAC5D,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;;uCAG2B,OAAO;;GAE3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;;;;CAI7C,CAAC;AAEF,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA;IACtC,iBAAiB;;;CAGpB,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Card, Text, Tree, Icon, defaultThemeProp, AIButton } from '@pega/cosmos-react-core';\nimport { StyledCardContent } from '@pega/cosmos-react-core/lib/components/Card/CardContent';\nimport { ellipsisOverflow } from '@pega/cosmos-react-core/lib/styles/mixins';\n\nimport type { RuleStepTreeNode } from './Automation.types';\n\n// Rule step styles\n\nexport const StyledContainer = styled(Card)(({\n  theme: {\n    base: {\n      shadow,\n      palette: { 'border-line': borderLine }\n    }\n  }\n}) => {\n  return css`\n    border-bottom: 0.0625rem solid ${borderLine};\n\n    &:focus,\n    &:focus-visible {\n      box-shadow: inset ${shadow['focus-solid']};\n      outline: none;\n    }\n  `;\n});\n\nStyledContainer.defaultProps = defaultThemeProp;\n\nexport const StyledSummary = styled(Text)`\n  ${ellipsisOverflow}\n`;\n\nStyledSummary.defaultProps = defaultThemeProp;\n\nexport const StyledContent = styled.div(({ theme }) => {\n  return css`\n    position: relative;\n    padding: ${theme.base.spacing};\n  `;\n});\n\nStyledContent.defaultProps = defaultThemeProp;\n\nexport const StyledErrorIcon = styled(Icon)(({ theme }) => {\n  return css`\n    color: ${theme.base.palette.urgent};\n  `;\n});\n\nStyledErrorIcon.defaultProps = defaultThemeProp;\n\nexport const StyledComment = styled(StyledSummary)(({ theme }) => {\n  return css`\n    padding-inline-start: calc(4 * ${theme.base.spacing});\n  `;\n});\n\nStyledComment.defaultProps = defaultThemeProp;\n\nexport const StyledStepHeader = styled.div`\n  min-width: 0;\n  flex: 1 1 auto;\n`;\n\nStyledStepHeader.defaultProps = defaultThemeProp;\n\n// Automation wrapper styles\n\nexport const StyledBaseTree = styled(Tree<RuleStepTreeNode>)(({\n  theme: {\n    base: { spacing }\n  }\n}) => {\n  return css`\n    &,\n    & ul {\n      padding-inline-start: calc(2 * ${spacing});\n    }\n  `;\n});\n\nStyledBaseTree.defaultProps = defaultThemeProp;\n\nexport const StyledAIButton = styled(AIButton)`\n  && {\n    margin-inline-start: auto;\n  }\n`;\n\nStyledAIButton.defaultProps = defaultThemeProp;\n\nexport const StyledAutomation = styled.div`\n  ${StyledCardContent}:has(&&&) {\n    padding: unset;\n  }\n`;\n\nStyledAutomation.defaultProps = defaultThemeProp;\n"]}