@pega/cosmos-react-demos 3.0.0-dev.3.0 → 3.0.0-dev.30.0

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.stories.js","sourceRoot":"","sources":["../../../src/core/Popover/Popover.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EACL,MAAM,EACN,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,IAAI,EACJ,OAAO,EAEP,IAAI,EACJ,OAAO,EACP,UAAU,EACX,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;IAClB,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,MAAM;QACjB,SAAS,EAAE,MAAM;QACjB,SAAS,EAAE,QAAQ;KACpB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QACvC,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC9E,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC9E,SAAS,EAAE;YACT,OAAO,EAAE;gBACP,QAAQ;gBACR,cAAc;gBACd,YAAY;gBACZ,KAAK;gBACL,WAAW;gBACX,SAAS;gBACT,MAAM;gBACN,YAAY;gBACZ,UAAU;gBACV,OAAO;gBACP,aAAa;gBACb,WAAW;gBACX,MAAM;gBACN,YAAY;gBACZ,UAAU;aACX;YACD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAwB,CAAC,IAAkB,EAAE,EAAE;IACrE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,iBAAiB,GAAG,UAAU,EAAkB,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,UAAU,EAAkB,CAAC;IAEzD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,iBAAiB,GAAG,UAAU,EAAkB,CAAC,CAAC,CAAC,CAAC;IAC1D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,UAAU,EAAqB,CAAC;IAEhE,MAAM,kBAAkB,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,EAAiC,EAAE,EAAE;QAC1E,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,IAAI,GAAG,KAAK,QAAQ;gBAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAClD,OAAO;SACR;QACD,oBAAoB,CAAC,IAAI,KAAK,WAAW,IAAI,IAAI,KAAK,OAAO,CAAC,CAAC;IACjE,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG;QAC5B,WAAW,EAAE,kBAAkB;QAC/B,UAAU,EAAE,kBAAkB;QAC9B,SAAS,EAAE,kBAAkB;QAC7B,OAAO,EAAE,kBAAkB;QAC3B,MAAM,EAAE,kBAAkB;KAC3B,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,EAAE,IAAI,EAAE,GAAG,EAAiC,EAAE,EAAE;QAC1E,IAAI,IAAI,KAAK,SAAS,EAAE;YACtB,IAAI,GAAG,KAAK,QAAQ;gBAAE,oBAAoB,CAAC,KAAK,CAAC,CAAC;YAClD,OAAO;SACR;QACD,oBAAoB,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,OAAO,CAAC,CAAC;IAC7D,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG;QAC5B,OAAO,EAAE,kBAAkB;QAC3B,SAAS,EAAE,kBAAkB;QAC7B,OAAO,EAAE,kBAAkB;QAC3B,MAAM,EAAE,kBAAkB;KAC3B,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,aAC1E,KAAC,IAAI,IAAC,GAAG,EAAE,SAAS,EAAE,OAAO,EAAC,IAAI,KAAK,qBAAqB,sCAErD,EACP,KAAC,OAAO,IACN,GAAG,EAAE,iBAAiB,EACtB,IAAI,EAAE,iBAAiB,EACvB,MAAM,EAAE,MAAM,EACd,MAAM,QACN,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,KACrB,qBAAqB,YAEzB,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,IAAI,yDAAsC,WAC/B,WACT,WACC,EACV,KAAC,MAAM,IAAC,GAAG,EAAE,WAAW,KAAM,qBAAqB,iCAE1C,EACT,KAAC,OAAO,IACN,GAAG,EAAE,iBAAiB,EACtB,IAAI,EAAE,iBAAiB,EACvB,MAAM,EAAE,QAAQ,EAChB,MAAM,QACN,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,SAAS,EAAE,IAAI,CAAC,SAAS,KACrB,qBAAqB,YAEzB,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,IAAI,yDAAsC,WAC/B,WACT,WACC,YACL,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU,GAAG,EAAE;IACvC,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAqB,CAAC;IACpF,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,UAAU,EAAqB,CAAC;IACtF,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAqB,CAAC;IAEpF,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAqB,CAAC;IACpF,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,UAAU,EAAqB,CAAC;IACtF,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,UAAU,EAAqB,CAAC;IAEpF,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhE,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,8CAA6B,EAC/C,MAAC,IAAI,eACH,KAAC,IAAI,IAAC,IAAI,EAAC,uBAAuB,EAAC,WAAW,+CAEvC,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,uBAAuB,EAAC,WAAW,+CAEvC,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,uBAAuB,EAAC,WAAW,+CAEvC,YACF,EACP,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,yCAAwB,EAC1C,MAAC,IAAI,eACH,KAAC,MAAM,IAAC,GAAG,EAAE,qBAAqB,sBAAmB,eAAe,iCAE3D,EACT,KAAC,OAAO,IAAC,MAAM,EAAE,kBAAkB,EAAE,EAAE,EAAC,eAAe,gEAE7C,EACV,KAAC,MAAM,IAAC,GAAG,EAAE,sBAAsB,sBAAmB,gBAAgB,iCAE7D,EACT,KAAC,OAAO,IAAC,MAAM,EAAE,mBAAmB,EAAE,EAAE,EAAC,gBAAgB,iEAE/C,EACV,KAAC,MAAM,IAAC,GAAG,EAAE,qBAAqB,sBAAmB,eAAe,iCAE3D,EACT,KAAC,OAAO,IAAC,MAAM,EAAE,kBAAkB,EAAE,EAAE,EAAC,eAAe,gEAE7C,YACL,EACP,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,mCAAkB,EACpC,MAAC,IAAI,eACH,KAAC,MAAM,IAAC,GAAG,EAAE,qBAAqB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,iCAE5E,EACT,KAAC,OAAO,IAAC,IAAI,EAAE,gBAAgB,EAAE,MAAM,EAAE,kBAAkB,YACzD,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,IAAI,qCAAkB,WACX,WACT,WACC,EACV,KAAC,MAAM,IAAC,GAAG,EAAE,sBAAsB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,iCAE9E,EACT,KAAC,OAAO,IAAC,IAAI,EAAE,iBAAiB,EAAE,MAAM,EAAE,mBAAmB,YAC3D,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,IAAI,qCAAkB,WACX,WACT,WACC,EACV,KAAC,MAAM,IAAC,GAAG,EAAE,qBAAqB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,iCAE5E,EACT,KAAC,OAAO,IAAC,IAAI,EAAE,gBAAgB,EAAE,MAAM,EAAE,kBAAkB,YACzD,KAAC,IAAI,cACH,KAAC,WAAW,cACV,KAAC,IAAI,qCAAkB,WACX,WACT,WACC,YACL,YACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACxC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  Flex,\n  Link,\n  Popover,\n  PopoverProps,\n  Text,\n  Tooltip,\n  useElement\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Popover',\n  component: Popover,\n  args: {\n    arrow: false,\n    showDelay: 'none',\n    hideDelay: 'none',\n    placement: 'bottom'\n  },\n  argTypes: {\n    arrow: { control: { type: 'boolean' } },\n    showDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n    hideDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n    placement: {\n      options: [\n        'bottom',\n        'bottom-start',\n        'bottom-end',\n        'top',\n        'top-start',\n        'top-end',\n        'left',\n        'left-start',\n        'left-end',\n        'right',\n        'right-start',\n        'right-end',\n        'auto',\n        'auto-start',\n        'auto-end'\n      ],\n      control: { type: 'select' }\n    }\n  }\n} as Meta;\n\nexport const PopoverDemo: Story<PopoverProps> = (args: PopoverProps) => {\n  const [mountHoverPopover, setMountHoverPopover] = useState(false);\n  const setHoverPopoverEl = useElement<HTMLDivElement>()[1];\n  const [textEl, setTextEl] = useElement<HTMLDivElement>();\n\n  const [mountClickPopover, setMountClickPopover] = useState(false);\n  const setClickPopoverEl = useElement<HTMLDivElement>()[1];\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n\n  const toggleHoverPopover = ({ type, key }: { type: string; key: string }) => {\n    if (type === 'keydown') {\n      if (key === 'Escape') setMountHoverPopover(false);\n      return;\n    }\n    setMountHoverPopover(type === 'mouseover' || type === 'focus');\n  };\n\n  const hoverMountingHandlers = {\n    onMouseOver: toggleHoverPopover,\n    onMouseOut: toggleHoverPopover,\n    onKeyDown: toggleHoverPopover,\n    onFocus: toggleHoverPopover,\n    onBlur: toggleHoverPopover\n  };\n\n  const toggleClickPopover = ({ type, key }: { type: string; key: string }) => {\n    if (type === 'keydown') {\n      if (key === 'Escape') setMountClickPopover(false);\n      return;\n    }\n    setMountClickPopover(type === 'click' || type === 'focus');\n  };\n\n  const clickMountingHandlers = {\n    onClick: toggleClickPopover,\n    onKeyDown: toggleClickPopover,\n    onFocus: toggleClickPopover,\n    onBlur: toggleClickPopover\n  };\n\n  return (\n    <Flex container={{ justify: 'center', pad: 4, gap: 4, alignItems: 'center' }}>\n      <Text ref={setTextEl} variant='h1' {...hoverMountingHandlers}>\n        Hover Over Me\n      </Text>\n      <Popover\n        ref={setHoverPopoverEl}\n        show={mountHoverPopover}\n        target={textEl}\n        portal\n        arrow={args.arrow}\n        showDelay={args.showDelay}\n        hideDelay={args.hideDelay}\n        placement={args.placement}\n        {...hoverMountingHandlers}\n      >\n        <Card>\n          <CardContent>\n            <Text>This Popover appears on hover!</Text>\n          </CardContent>\n        </Card>\n      </Popover>\n      <Button ref={setButtonEl} {...clickMountingHandlers}>\n        Click Me\n      </Button>\n      <Popover\n        ref={setClickPopoverEl}\n        show={mountClickPopover}\n        target={buttonEl}\n        portal\n        arrow={args.arrow}\n        showDelay={args.showDelay}\n        hideDelay={args.hideDelay}\n        placement={args.placement}\n        {...clickMountingHandlers}\n      >\n        <Card>\n          <CardContent>\n            <Text>This Popover appears on click!</Text>\n          </CardContent>\n        </Card>\n      </Popover>\n    </Flex>\n  );\n};\n\nexport const PopoverGroups: Story = () => {\n  const [firstTooltipButton, setFirstTooltipButton] = useElement<HTMLButtonElement>();\n  const [secondTooltipButton, setSecondTooltipButton] = useElement<HTMLButtonElement>();\n  const [thirdTooltipButton, setThirdTooltipButton] = useElement<HTMLButtonElement>();\n\n  const [firstPopoverButton, setFirstPopoverButton] = useElement<HTMLButtonElement>();\n  const [secondPopoverButton, setSecondPopoverButton] = useElement<HTMLButtonElement>();\n  const [thirdPopoverButton, setThirdPopoverButton] = useElement<HTMLButtonElement>();\n\n  const [showFirstPopover, setShowFirstPopover] = useState(false);\n  const [showSecondPopover, setShowSecondPopover] = useState(false);\n  const [showThirdPopover, setShowThirdPopover] = useState(false);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 4 }}>\n      <Text variant='h2'>groupId: link_preview</Text>\n      <Flex>\n        <Link href='http://www.google.com' previewable>\n          Previewable Link\n        </Link>\n        <Link href='http://www.google.com' previewable>\n          Previewable Link\n        </Link>\n        <Link href='http://www.google.com' previewable>\n          Previewable Link\n        </Link>\n      </Flex>\n      <Text variant='h2'>groupId: tooltip</Text>\n      <Flex>\n        <Button ref={setFirstTooltipButton} aria-describedby='first-tooltip'>\n          Hover me\n        </Button>\n        <Tooltip target={firstTooltipButton} id='first-tooltip'>\n          This is a tooltip for the first button.\n        </Tooltip>\n        <Button ref={setSecondTooltipButton} aria-describedby='second-tooltip'>\n          Hover me\n        </Button>\n        <Tooltip target={secondTooltipButton} id='second-tooltip'>\n          This is a tooltip for the second button.\n        </Tooltip>\n        <Button ref={setThirdTooltipButton} aria-describedby='third-tooltip'>\n          Hover me\n        </Button>\n        <Tooltip target={thirdTooltipButton} id='third-tooltip'>\n          This is a tooltip for the third button.\n        </Tooltip>\n      </Flex>\n      <Text variant='h2'>No groupId</Text>\n      <Flex>\n        <Button ref={setFirstPopoverButton} onClick={() => setShowFirstPopover(curr => !curr)}>\n          Click me\n        </Button>\n        <Popover show={showFirstPopover} target={firstPopoverButton}>\n          <Card>\n            <CardContent>\n              <Text>Popover #1</Text>\n            </CardContent>\n          </Card>\n        </Popover>\n        <Button ref={setSecondPopoverButton} onClick={() => setShowSecondPopover(curr => !curr)}>\n          Click me\n        </Button>\n        <Popover show={showSecondPopover} target={secondPopoverButton}>\n          <Card>\n            <CardContent>\n              <Text>Popover #2</Text>\n            </CardContent>\n          </Card>\n        </Popover>\n        <Button ref={setThirdPopoverButton} onClick={() => setShowThirdPopover(curr => !curr)}>\n          Click me\n        </Button>\n        <Popover show={showThirdPopover} target={thirdPopoverButton}>\n          <Card>\n            <CardContent>\n              <Text>Popover #3</Text>\n            </CardContent>\n          </Card>\n        </Popover>\n      </Flex>\n    </Flex>\n  );\n};\n\nPopoverGroups.argTypes = {\n  arrow: { table: { disable: true } },\n  showDelay: { table: { disable: true } },\n  hideDelay: { table: { disable: true } },\n  placement: { table: { disable: true } }\n};\n"]}
+{"version":3,"file":"Popover.stories.js","sourceRoot":"","sources":["../../../src/core/Popover/Popover.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  Flex,\n  Link,\n  Popover,\n  PopoverProps,\n  Text,\n  Tooltip,\n  useElement\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Popover',\n  component: Popover,\n  args: {\n    arrow: false,\n    showDelay: 'none',\n    hideDelay: 'none',\n    placement: 'bottom'\n  },\n  argTypes: {\n    arrow: { control: { type: 'boolean' } },\n    showDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n    hideDelay: { options: ['none', 'short', 'long'], control: { type: 'select' } },\n    placement: {\n      options: [\n        'bottom',\n        'bottom-start',\n        'bottom-end',\n        'top',\n        'top-start',\n        'top-end',\n        'left',\n        'left-start',\n        'left-end',\n        'right',\n        'right-start',\n        'right-end',\n        'auto',\n        'auto-start',\n        'auto-end'\n      ],\n      control: { type: 'select' }\n    }\n  }\n} as Meta;\n\nexport const PopoverDemo: Story<\n  Pick<PopoverProps, 'arrow' | 'showDelay' | 'hideDelay' | 'placement'>\n> = (args: Pick<PopoverProps, 'arrow' | 'showDelay' | 'hideDelay' | 'placement'>) => {\n  const [mountHoverPopover, setMountHoverPopover] = useState(false);\n  const setHoverPopoverEl = useElement<HTMLDivElement>()[1];\n  const [textEl, setTextEl] = useElement<HTMLDivElement>();\n\n  const [mountClickPopover, setMountClickPopover] = useState(false);\n  const setClickPopoverEl = useElement<HTMLDivElement>()[1];\n  const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n\n  const toggleHoverPopover = ({ type, key }: { type: string; key: string }) => {\n    if (type === 'keydown') {\n      if (key === 'Escape') setMountHoverPopover(false);\n      return;\n    }\n    setMountHoverPopover(type === 'mouseover' || type === 'focus');\n  };\n\n  const hoverMountingHandlers = {\n    onMouseOver: toggleHoverPopover,\n    onMouseOut: toggleHoverPopover,\n    onKeyDown: toggleHoverPopover,\n    onFocus: toggleHoverPopover,\n    onBlur: toggleHoverPopover\n  };\n\n  const toggleClickPopover = ({ type, key }: { type: string; key: string }) => {\n    if (type === 'keydown') {\n      if (key === 'Escape') setMountClickPopover(false);\n      return;\n    }\n    setMountClickPopover(type === 'click' || type === 'focus');\n  };\n\n  const clickMountingHandlers = {\n    onClick: toggleClickPopover,\n    onKeyDown: toggleClickPopover,\n    onFocus: toggleClickPopover,\n    onBlur: toggleClickPopover\n  };\n\n  return (\n    <Flex container={{ justify: 'center', pad: 4, gap: 4, alignItems: 'center' }}>\n      <Text ref={setTextEl} variant='h1' {...hoverMountingHandlers}>\n        Hover Over Me\n      </Text>\n      <Popover\n        ref={setHoverPopoverEl}\n        show={mountHoverPopover}\n        target={textEl}\n        portal\n        arrow={args.arrow}\n        showDelay={args.showDelay}\n        hideDelay={args.hideDelay}\n        placement={args.placement}\n        {...hoverMountingHandlers}\n      >\n        <Card>\n          <CardContent>\n            <Text>This Popover appears on hover!</Text>\n          </CardContent>\n        </Card>\n      </Popover>\n      <Button ref={setButtonEl} {...clickMountingHandlers}>\n        Click Me\n      </Button>\n      <Popover\n        ref={setClickPopoverEl}\n        show={mountClickPopover}\n        target={buttonEl}\n        portal\n        arrow={args.arrow}\n        showDelay={args.showDelay}\n        hideDelay={args.hideDelay}\n        placement={args.placement}\n        {...clickMountingHandlers}\n      >\n        <Card>\n          <CardContent>\n            <Text>This Popover appears on click!</Text>\n          </CardContent>\n        </Card>\n      </Popover>\n    </Flex>\n  );\n};\n\nexport const PopoverGroups: Story = () => {\n  const [firstTooltipButton, setFirstTooltipButton] = useElement<HTMLButtonElement>();\n  const [secondTooltipButton, setSecondTooltipButton] = useElement<HTMLButtonElement>();\n  const [thirdTooltipButton, setThirdTooltipButton] = useElement<HTMLButtonElement>();\n\n  const [firstPopoverButton, setFirstPopoverButton] = useElement<HTMLButtonElement>();\n  const [secondPopoverButton, setSecondPopoverButton] = useElement<HTMLButtonElement>();\n  const [thirdPopoverButton, setThirdPopoverButton] = useElement<HTMLButtonElement>();\n\n  const [showFirstPopover, setShowFirstPopover] = useState(false);\n  const [showSecondPopover, setShowSecondPopover] = useState(false);\n  const [showThirdPopover, setShowThirdPopover] = useState(false);\n\n  return (\n    <Flex container={{ direction: 'column', gap: 4 }}>\n      <Text variant='h2'>groupId: link_preview</Text>\n      <div>\n        <Link href='http://www.google.com' previewable>\n          Previewable Link\n        </Link>\n        <Link href='http://www.google.com' previewable>\n          Previewable Link\n        </Link>\n        <Link href='http://www.google.com' previewable>\n          Previewable Link\n        </Link>\n      </div>\n      <Text variant='h2'>groupId: tooltip</Text>\n      <div>\n        <Button ref={setFirstTooltipButton} aria-describedby='first-tooltip'>\n          Hover me\n        </Button>\n        <Tooltip target={firstTooltipButton} id='first-tooltip'>\n          This is a tooltip for the first button.\n        </Tooltip>\n        <Button ref={setSecondTooltipButton} aria-describedby='second-tooltip'>\n          Hover me\n        </Button>\n        <Tooltip target={secondTooltipButton} id='second-tooltip'>\n          This is a tooltip for the second button.\n        </Tooltip>\n        <Button ref={setThirdTooltipButton} aria-describedby='third-tooltip'>\n          Hover me\n        </Button>\n        <Tooltip target={thirdTooltipButton} id='third-tooltip'>\n          This is a tooltip for the third button.\n        </Tooltip>\n      </div>\n      <Text variant='h2'>No groupId</Text>\n      <div>\n        <Button ref={setFirstPopoverButton} onClick={() => setShowFirstPopover(curr => !curr)}>\n          Click me\n        </Button>\n        <Popover show={showFirstPopover} target={firstPopoverButton}>\n          <Card>\n            <CardContent>\n              <Text>Popover #1</Text>\n            </CardContent>\n          </Card>\n        </Popover>\n        <Button ref={setSecondPopoverButton} onClick={() => setShowSecondPopover(curr => !curr)}>\n          Click me\n        </Button>\n        <Popover show={showSecondPopover} target={secondPopoverButton}>\n          <Card>\n            <CardContent>\n              <Text>Popover #2</Text>\n            </CardContent>\n          </Card>\n        </Popover>\n        <Button ref={setThirdPopoverButton} onClick={() => setShowThirdPopover(curr => !curr)}>\n          Click me\n        </Button>\n        <Popover show={showThirdPopover} target={thirdPopoverButton}>\n          <Card>\n            <CardContent>\n              <Text>Popover #3</Text>\n            </CardContent>\n          </Card>\n        </Popover>\n      </div>\n    </Flex>\n  );\n};\n\nPopoverGroups.argTypes = {\n  arrow: { table: { disable: true } },\n  showDelay: { table: { disable: true } },\n  hideDelay: { table: { disable: true } },\n  placement: { table: { disable: true } }\n};\n"]}

package/lib/core/Progress/Progress.stories.js

@@ -32,7 +32,7 @@ export const IndeterminateProgress = (args) => {
             setLoading(true);
         }
     }, [args.placement]);
-    return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }, void 0), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }, void 0), _jsx(Progress, { variant: args.variant, placement: args.placement, message: args.message, visible: loading }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }), _jsx(Progress, { variant: args.variant, placement: args.placement, message: args.message, visible: loading })] }));
 };
 IndeterminateProgress.args = {
     message: 'Loading'
@@ -53,7 +53,7 @@ export const DeterminateProgress = (args) => {
             setLoading(true);
         }
     }, [args.placement]);
-    return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }, void 0), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }, void 0), _jsx(Progress, { value: args.value, variant: args.variant, placement: args.placement, message: args.message || `${args.value}%`, visible: loading }, void 0)] }, void 0));
+    return (_jsxs(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: [args.placement === 'global' && _jsx(Button, { onClick: handleClick, children: "Start loading" }), args.placement === 'inline' && _jsx(Text, { children: "Progress demo" }), _jsx(Progress, { value: args.value, variant: args.variant, placement: args.placement, message: args.message || `${args.value}%`, visible: loading })] }));
 };
 DeterminateProgress.args = {
     value: 67
@@ -68,7 +68,7 @@ export const ConfigurableProgress = (args) => {
                     'progress-color': args.progressColor
                 }
             }
-        }, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: _jsx(Progress, { variant: args.variant, placement: 'local', message: 'Loading', visible: true }, void 0) }, void 0) }, void 0));
+        }, children: _jsx(Flex, { container: { justify: 'center', alignItems: 'center' }, as: StyledDemoWrap, children: _jsx(Progress, { variant: args.variant, placement: 'local', message: 'Loading', visible: true }) }) }));
 };
 ConfigurableProgress.args = {
     progressColor: '#076bc9'

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

@@ -1 +1 @@
-{"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n  Button,\n  Configuration,\n  Flex,\n  Progress,\n  ProgressProps,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledDemoWrap } from './Progress.styles';\n\nexport default {\n  title: 'Core/Progress',\n  component: Progress,\n  args: {\n    variant: 'ring',\n    placement: 'local',\n    message: ''\n  },\n  argTypes: {\n    variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n    placement: { options: ['local', 'global', 'inline'], control: { type: 'select' } },\n    message: { control: { type: 'text' } }\n  }\n} as Meta;\n\nexport const IndeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n  const [loading, setLoading] = useState(false);\n\n  const handleClick = () => {\n    setLoading(true);\n\n    setTimeout(() => {\n      setLoading(false);\n    }, 2000);\n  };\n\n  useEffect(() => {\n    if (args.placement === 'global') {\n      setLoading(false);\n    } else {\n      setLoading(true);\n    }\n  }, [args.placement]);\n\n  return (\n    <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n      {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n      {args.placement === 'inline' && <Text>Progress demo</Text>}\n      <Progress\n        variant={args.variant}\n        placement={args.placement}\n        message={args.message}\n        visible={loading}\n      />\n    </Flex>\n  );\n};\n\nIndeterminateProgress.args = {\n  message: 'Loading'\n};\n\nexport const DeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n  const [loading, setLoading] = useState(false);\n\n  const handleClick = () => {\n    setLoading(true);\n\n    setTimeout(() => {\n      setLoading(false);\n    }, 2000);\n  };\n\n  useEffect(() => {\n    if (args.placement === 'global') {\n      setLoading(false);\n    } else {\n      setLoading(true);\n    }\n  }, [args.placement]);\n\n  return (\n    <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n      {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n      {args.placement === 'inline' && <Text>Progress demo</Text>}\n      <Progress\n        value={args.value}\n        variant={args.variant}\n        placement={args.placement}\n        message={args.message || `${args.value}%`}\n        visible={loading}\n      />\n    </Flex>\n  );\n};\n\nDeterminateProgress.args = {\n  value: 67\n};\n\nDeterminateProgress.argTypes = {\n  value: { control: { type: 'number' } }\n};\n\ninterface ConfigurableProgressProps extends ProgressProps {\n  progressColor?: string;\n}\n\nexport const ConfigurableProgress: Story<ConfigurableProgressProps> = (\n  args: ConfigurableProgressProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          progress: {\n            'progress-color': args.progressColor\n          }\n        }\n      }}\n    >\n      <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n        <Progress variant={args.variant} placement='local' message='Loading' visible />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableProgress.args = {\n  progressColor: '#076bc9'\n};\n\nConfigurableProgress.argTypes = {\n  progressColor: { control: { type: 'color' } },\n  placement: { table: { disable: true } },\n  message: { table: { disable: true } }\n};\n"]}
+{"version":3,"file":"Progress.stories.js","sourceRoot":"","sources":["../../../src/core/Progress/Progress.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useEffect, useState } from 'react';\n\nimport {\n  Button,\n  Configuration,\n  Flex,\n  Progress,\n  ProgressProps,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { StyledDemoWrap } from './Progress.styles';\n\nexport default {\n  title: 'Core/Progress',\n  component: Progress,\n  args: {\n    variant: 'ring',\n    placement: 'local',\n    message: ''\n  },\n  argTypes: {\n    variant: { options: ['ring', 'bar', 'ellipsis'], control: { type: 'select' } },\n    placement: { options: ['local', 'global', 'inline'], control: { type: 'select' } },\n    message: { control: { type: 'text' } }\n  }\n} as Meta;\n\nexport const IndeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n  const [loading, setLoading] = useState(false);\n\n  const handleClick = () => {\n    setLoading(true);\n\n    setTimeout(() => {\n      setLoading(false);\n    }, 2000);\n  };\n\n  useEffect(() => {\n    if (args.placement === 'global') {\n      setLoading(false);\n    } else {\n      setLoading(true);\n    }\n  }, [args.placement]);\n\n  return (\n    <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n      {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n      {args.placement === 'inline' && <Text>Progress demo</Text>}\n      <Progress\n        variant={args.variant}\n        placement={args.placement}\n        message={args.message}\n        visible={loading}\n      />\n    </Flex>\n  );\n};\n\nIndeterminateProgress.args = {\n  message: 'Loading'\n};\n\nexport const DeterminateProgress: Story<ProgressProps> = (args: ProgressProps) => {\n  const [loading, setLoading] = useState(false);\n\n  const handleClick = () => {\n    setLoading(true);\n\n    setTimeout(() => {\n      setLoading(false);\n    }, 2000);\n  };\n\n  useEffect(() => {\n    if (args.placement === 'global') {\n      setLoading(false);\n    } else {\n      setLoading(true);\n    }\n  }, [args.placement]);\n\n  return (\n    <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n      {args.placement === 'global' && <Button onClick={handleClick}>Start loading</Button>}\n      {args.placement === 'inline' && <Text>Progress demo</Text>}\n      <Progress\n        value={args.value}\n        variant={args.variant}\n        placement={args.placement}\n        message={args.message || `${args.value}%`}\n        visible={loading}\n      />\n    </Flex>\n  );\n};\n\nDeterminateProgress.args = {\n  value: 67\n};\n\nDeterminateProgress.argTypes = {\n  value: { control: { type: 'number' } }\n};\n\ninterface ConfigurableProgressProps extends ProgressProps {\n  progressColor?: string;\n}\n\nexport const ConfigurableProgress: Story<ConfigurableProgressProps> = (\n  args: ConfigurableProgressProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          progress: {\n            'progress-color': args.progressColor\n          }\n        }\n      }}\n    >\n      <Flex container={{ justify: 'center', alignItems: 'center' }} as={StyledDemoWrap}>\n        <Progress variant={args.variant} placement='local' message='Loading' visible />\n      </Flex>\n    </Configuration>\n  );\n};\n\nConfigurableProgress.args = {\n  progressColor: '#076bc9'\n};\n\nConfigurableProgress.argTypes = {\n  progressColor: { control: { type: 'color' } },\n  placement: { table: { disable: true } },\n  message: { table: { disable: true } }\n};\n"]}

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

@@ -2,8 +2,11 @@ import { Meta, Story } from '@storybook/react';
 import { RadioCheckProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const DefaultRadioButton: Story<RadioCheckProps>;
-export declare const RadioButtonCard: Story<RadioCheckProps>;
+interface RadioCheckStoryProps extends RadioCheckProps {
+    showAdditionalInfo?: boolean;
+}
+export declare const DefaultRadioButton: Story<RadioCheckStoryProps>;
+export declare const RadioButtonCard: Story<RadioCheckStoryProps>;
 interface ConfigurableRadioButtonProps extends RadioCheckProps {
     size?: string;
     backgroundColor?: string;
@@ -14,6 +17,7 @@ interface ConfigurableRadioButtonProps extends RadioCheckProps {
     labelFontWeight?: string;
     checkedBackgroundColor?: string;
     checkedBorderColor?: string;
+    showAdditionalInfo?: boolean;
 }
 export declare const ConfigurableRadioButton: Story<ConfigurableRadioButtonProps>;
 //# sourceMappingURL=RadioButton.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA8B,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEtF,wBAiBU;AAEV,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,eAAe,CAUrD,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,eAAe,CAWlD,CAAC;AAEF,UAAU,4BAA6B,SAAQ,eAAe;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CA8BvE,CAAC"}
+{"version":3,"file":"RadioButton.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA8B,eAAe,EAAE,MAAM,yBAAyB,CAAC;;AAEtF,wBAmBU;AAEV,UAAU,oBAAqB,SAAQ,eAAe;IACpD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,oBAAoB,CAkB1D,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,oBAAoB,CAmBvD,CAAC;AAEF,UAAU,4BAA6B,SAAQ,eAAe;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CAwCvE,CAAC"}

package/lib/core/RadioButton/RadioButton.stories.js

@@ -8,21 +8,33 @@ export default {
         label: 'Choose me',
         required: false,
         disabled: false,
-        readOnly: false
+        readOnly: false,
+        showAdditionalInfo: true
     },
     argTypes: {
         status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },
         label: { control: { type: 'text' } },
         required: { control: { type: 'boolean' } },
         disabled: { control: { type: 'boolean' } },
-        readOnly: { control: { type: 'boolean' } }
+        readOnly: { control: { type: 'boolean' } },
+        showAdditionalInfo: { control: { type: 'boolean' } }
     }
 };
 export const DefaultRadioButton = (args) => {
-    return (_jsx(RadioButton, { status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+    return (_jsx(RadioButton, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
 };
 export const RadioButtonCard = (args) => {
-    return (_jsx(RadioButton, { variant: 'card', status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly }, void 0));
+    return (_jsx(RadioButton, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, variant: 'card', status: args.status, label: args.label, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
 };
 export const ConfigurableRadioButton = (args) => {
     return (_jsx(Configuration, { theme: {
@@ -45,7 +57,12 @@ export const ConfigurableRadioButton = (args) => {
                     }
                 }
             }
-        }, children: _jsx(RadioButton, { label: 'Configurable Radio Button' }, void 0) }, void 0));
+        }, children: _jsx(RadioButton, { additionalInfo: args.showAdditionalInfo
+                ? {
+                    heading: 'Additional Info',
+                    content: 'Some additional info'
+                }
+                : undefined, label: 'Configurable Radio Button' }) }));
 };
 ConfigurableRadioButton.args = {
     size: '1.25rem',

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAmB,MAAM,yBAAyB,CAAC;AAEtF,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,WAAW;QAClB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC3C;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,kBAAkB,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAClF,OAAO,CACL,KAAC,WAAW,IACV,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,WACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAA2B,CAAC,IAAqB,EAAE,EAAE;IAC/E,OAAO,CACL,KAAC,WAAW,IACV,OAAO,EAAC,MAAM,EACd,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,WACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAcF,MAAM,CAAC,MAAM,uBAAuB,GAAwC,CAC1E,IAAkC,EAClC,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,cAAc,EAAE;oBACd,eAAe,EAAE,IAAI,CAAC,YAAY;iBACnC;gBACD,aAAa,EAAE;oBACb,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,cAAc,EAAE,IAAI,CAAC,WAAW;oBAChC,kBAAkB,EAAE,IAAI,CAAC,eAAe;oBACxC,KAAK,EAAE;wBACL,KAAK,EAAE,IAAI,CAAC,UAAU;wBACtB,aAAa,EAAE,IAAI,CAAC,eAAe;qBACpC;oBACD,IAAI,EAAE,IAAI,CAAC,IAAI;oBACf,UAAU,EAAE;wBACV,kBAAkB,EAAE,IAAI,CAAC,sBAAsB;wBAC/C,cAAc,EAAE,IAAI,CAAC,kBAAkB;qBACxC;iBACF;aACF;SACF,YAED,KAAC,WAAW,IAAC,KAAK,EAAC,2BAA2B,WAAG,WACnC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,IAAI,EAAE,SAAS;IACf,eAAe,EAAE,SAAS;IAC1B,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,WAAW;IACxB,YAAY,EAAE,KAAK;IACnB,UAAU,EAAE,SAAS;IACrB,eAAe,EAAE,KAAK;IACtB,sBAAsB,EAAE,SAAS;IACjC,kBAAkB,EAAE,SAAS;CAC9B,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC/C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC3C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC1C,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC3C,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC1C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC9C,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IACtD,kBAAkB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAClD,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACpC,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACvC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, RadioButton, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/RadioButton',\n  component: RadioButton,\n  args: {\n    status: undefined,\n    label: 'Choose me',\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    label: { control: { type: 'text' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const DefaultRadioButton: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <RadioButton\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nexport const RadioButtonCard: Story<RadioCheckProps> = (args: RadioCheckProps) => {\n  return (\n    <RadioButton\n      variant='card'\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\ninterface ConfigurableRadioButtonProps extends RadioCheckProps {\n  size?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  borderWidth?: string;\n  borderRadius?: string;\n  labelColor?: string;\n  labelFontWeight?: string;\n  checkedBackgroundColor?: string;\n  checkedBorderColor?: string;\n}\n\nexport const ConfigurableRadioButton: Story<ConfigurableRadioButtonProps> = (\n  args: ConfigurableRadioButtonProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'radio-button': {\n            'border-radius': args.borderRadius\n          },\n          'radio-check': {\n            'border-color': args.borderColor,\n            'border-width': args.borderWidth,\n            'background-color': args.backgroundColor,\n            label: {\n              color: args.labelColor,\n              'font-weight': args.labelFontWeight\n            },\n            size: args.size,\n            ':checked': {\n              'background-color': args.checkedBackgroundColor,\n              'border-color': args.checkedBorderColor\n            }\n          }\n        }\n      }}\n    >\n      <RadioButton label='Configurable Radio Button' />\n    </Configuration>\n  );\n};\n\nConfigurableRadioButton.args = {\n  size: '1.25rem',\n  backgroundColor: '#ffffff',\n  borderColor: '#939393',\n  borderWidth: '0.0625rem',\n  borderRadius: '50%',\n  labelColor: '#939393',\n  labelFontWeight: '400',\n  checkedBackgroundColor: '#076bc9',\n  checkedBorderColor: '#076bc9'\n};\n\nConfigurableRadioButton.argTypes = {\n  size: { control: { type: 'text' } },\n  backgroundColor: { control: { type: 'color' } },\n  borderColor: { control: { type: 'color' } },\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'text' } },\n  labelColor: { control: { type: 'color' } },\n  labelFontWeight: { control: { type: 'text' } },\n  checkedBackgroundColor: { control: { type: 'color' } },\n  checkedBorderColor: { control: { type: 'color' } },\n  status: { table: { disable: true } },\n  label: { table: { disable: true } },\n  required: { table: { disable: true } },\n  disabled: { table: { disable: true } },\n  readOnly: { table: { disable: true } }\n};\n"]}
+{"version":3,"file":"RadioButton.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButton/RadioButton.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, RadioButton, RadioCheckProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/RadioButton',\n  component: RadioButton,\n  args: {\n    status: undefined,\n    label: 'Choose me',\n    required: false,\n    disabled: false,\n    readOnly: false,\n    showAdditionalInfo: true\n  },\n  argTypes: {\n    status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n    label: { control: { type: 'text' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } },\n    showAdditionalInfo: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface RadioCheckStoryProps extends RadioCheckProps {\n  showAdditionalInfo?: boolean;\n}\n\nexport const DefaultRadioButton: Story<RadioCheckStoryProps> = (args: RadioCheckStoryProps) => {\n  return (\n    <RadioButton\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Some additional info'\n            }\n          : undefined\n      }\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\nexport const RadioButtonCard: Story<RadioCheckStoryProps> = (args: RadioCheckStoryProps) => {\n  return (\n    <RadioButton\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Some additional info'\n            }\n          : undefined\n      }\n      variant='card'\n      status={args.status}\n      label={args.label}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    />\n  );\n};\n\ninterface ConfigurableRadioButtonProps extends RadioCheckProps {\n  size?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  borderWidth?: string;\n  borderRadius?: string;\n  labelColor?: string;\n  labelFontWeight?: string;\n  checkedBackgroundColor?: string;\n  checkedBorderColor?: string;\n  showAdditionalInfo?: boolean;\n}\n\nexport const ConfigurableRadioButton: Story<ConfigurableRadioButtonProps> = (\n  args: ConfigurableRadioButtonProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'radio-button': {\n            'border-radius': args.borderRadius\n          },\n          'radio-check': {\n            'border-color': args.borderColor,\n            'border-width': args.borderWidth,\n            'background-color': args.backgroundColor,\n            label: {\n              color: args.labelColor,\n              'font-weight': args.labelFontWeight\n            },\n            size: args.size,\n            ':checked': {\n              'background-color': args.checkedBackgroundColor,\n              'border-color': args.checkedBorderColor\n            }\n          }\n        }\n      }}\n    >\n      <RadioButton\n        additionalInfo={\n          args.showAdditionalInfo\n            ? {\n                heading: 'Additional Info',\n                content: 'Some additional info'\n              }\n            : undefined\n        }\n        label='Configurable Radio Button'\n      />\n    </Configuration>\n  );\n};\n\nConfigurableRadioButton.args = {\n  size: '1.25rem',\n  backgroundColor: '#ffffff',\n  borderColor: '#939393',\n  borderWidth: '0.0625rem',\n  borderRadius: '50%',\n  labelColor: '#939393',\n  labelFontWeight: '400',\n  checkedBackgroundColor: '#076bc9',\n  checkedBorderColor: '#076bc9'\n};\n\nConfigurableRadioButton.argTypes = {\n  size: { control: { type: 'text' } },\n  backgroundColor: { control: { type: 'color' } },\n  borderColor: { control: { type: 'color' } },\n  borderWidth: { control: { type: 'text' } },\n  borderRadius: { control: { type: 'text' } },\n  labelColor: { control: { type: 'color' } },\n  labelFontWeight: { control: { type: 'text' } },\n  checkedBackgroundColor: { control: { type: 'color' } },\n  checkedBorderColor: { control: { type: 'color' } },\n  status: { table: { disable: true } },\n  label: { table: { disable: true } },\n  required: { table: { disable: true } },\n  disabled: { table: { disable: true } },\n  readOnly: { table: { disable: true } }\n};\n"]}

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

@@ -1,7 +1,11 @@
 import { Meta, Story } from '@storybook/react';
-import { RadioCheckGroupProps } from '@pega/cosmos-react-core';
+import { RadioCheckGroupProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const RadioButtonGroupDemo: Story<RadioCheckGroupProps>;
-export declare const RadioButtonCardGroup: Story<RadioCheckGroupProps>;
+interface RadioCheckGroupStoryProps extends RadioCheckGroupProps {
+    showAdditionalInfo?: boolean;
+    showNestedAdditionalInfo?: boolean;
+}
+export declare const RadioButtonGroupDemo: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>>;
+export declare const RadioButtonCardGroup: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>>;
 //# sourceMappingURL=RadioButtonGroup.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAML,oBAAoB,EAErB,MAAM,yBAAyB,CAAC;;AAIjC,wBAmBU;AAEV,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,CAkB5D,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,oBAAoB,CAsE5D,CAAC"}
+{"version":3,"file":"RadioButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAML,oBAAoB,EAEpB,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAIjC,wBAuBU;AAEV,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,UAAU,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAiFzF,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,UAAU,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAwFzF,CAAC"}

package/lib/core/RadioButtonGroup/RadioButtonGroup.stories.js

@@ -10,7 +10,9 @@ export default {
         autoStack: true,
         required: false,
         disabled: false,
-        readOnly: false
+        readOnly: false,
+        showAdditionalInfo: true,
+        showNestedAdditionalInfo: false
     },
     argTypes: {
         labelHidden: { control: { type: 'boolean' } },
@@ -18,17 +20,51 @@ export default {
         autoStack: { control: { type: 'boolean' } },
         required: { control: { type: 'boolean' } },
         disabled: { control: { type: 'boolean' } },
-        readOnly: { control: { type: 'boolean' } }
+        readOnly: { control: { type: 'boolean' } },
+        showAdditionalInfo: { control: { type: 'boolean' } },
+        showNestedAdditionalInfo: { control: { type: 'boolean' } }
     }
 };
 export const RadioButtonGroupDemo = (args) => {
-    return (_jsxs(RadioButtonGroup, { label: 'What do you want to eat?', name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(RadioButton, { label: 'Banana', id: 'Banana', defaultChecked: true }, void 0), _jsx(RadioButton, { label: 'Apple', id: 'Apple' }, void 0), _jsx(RadioButton, { label: 'Mango', id: 'Mango' }, void 0), _jsx(RadioButton, { label: 'Orange', id: 'Orange' }, void 0)] }, void 0));
+    return args.showNestedAdditionalInfo ? (_jsxs(RadioButtonGroup, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, label: 'What do you want to eat?', name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(RadioButton, { label: 'Banana', id: 'Banana', defaultChecked: true, additionalInfo: {
+                    heading: 'Additional Info',
+                    content: 'Some additional info'
+                } }), _jsx(RadioButton, { label: 'Apple', id: 'Apple', additionalInfo: {
+                    heading: 'Additional Info',
+                    content: 'Some additional info'
+                } }), _jsx(RadioButton, { label: 'Mango', id: 'Mango', additionalInfo: {
+                    heading: 'Additional Info',
+                    content: 'Some additional info'
+                } }), _jsx(RadioButton, { label: 'Orange', id: 'Orange', additionalInfo: {
+                    heading: 'Additional Info',
+                    content: 'Some additional info'
+                } })] })) : (_jsxs(RadioButtonGroup, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, label: 'What do you want to eat?', name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(RadioButton, { label: 'Banana', id: 'Banana', defaultChecked: true }), _jsx(RadioButton, { label: 'Apple', id: 'Apple' }), _jsx(RadioButton, { label: 'Mango', id: 'Mango' }), _jsx(RadioButton, { label: 'Orange', id: 'Orange' })] }));
 };
 export const RadioButtonCardGroup = (args) => {
-    return (_jsxs(RadioButtonGroup, { variant: 'card', label: 'Which visuals appear satisfying?', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(RadioButton, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "A paragraph" }, void 0), _jsx(Paragraph, { children: "This is a paragraph of text. It is meant to appear visually satisfying amongst the other options in this group." }, void 0)] }, void 0), id: 'paragraph', defaultChecked: true }, void 0), _jsx(RadioButton, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }, void 0), _jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }, void 0)] }, void 0), id: 'space-photo' }, void 0), _jsx(RadioButton, { label: _jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }, void 0), _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }, void 0), _jsx(Paragraph, { children: "Space is the final frontier. There is so much to discover within Cosmos!" }, void 0)] }, void 0)] }, void 0), id: 'cosmos' }, void 0), _jsx(RadioButton, { label: _jsx(FieldGroup, { name: 'Gold service plan', children: _jsx(FieldValueList, { fields: [
+    return (_jsxs(RadioButtonGroup, { additionalInfo: args.showAdditionalInfo
+            ? {
+                heading: 'Additional Info',
+                content: 'Some additional info'
+            }
+            : undefined, variant: 'card', label: 'Which visuals appear satisfying?', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, children: [_jsx(RadioButton, { additionalInfo: args.showNestedAdditionalInfo
+                    ? {
+                        heading: 'Additional Info',
+                        content: 'Some additional info'
+                    }
+                    : undefined, label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "A paragraph" }), _jsx(Paragraph, { children: "This is a paragraph of text. It is meant to appear visually satisfying amongst the other options in this group." })] }), id: 'paragraph', defaultChecked: true }), _jsx(RadioButton, { label: _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' })] }), id: 'space-photo' }), _jsx(RadioButton, { label: _jsxs(Flex, { container: { gap: 1, alignItems: 'start' }, children: [_jsx(StyledImage, { src: 'https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale', alt: 'space' }), _jsxs(Flex, { container: { direction: 'column', gap: 1 }, children: [_jsx(Text, { variant: 'h4', children: "Space" }), _jsx(Paragraph, { children: "Space is the final frontier. There is so much to discover within Cosmos!" })] })] }), id: 'cosmos' }), _jsx(RadioButton, { label: _jsx(FieldGroup, { name: 'Gold service plan', children: _jsx(FieldValueList, { fields: [
                             { id: 'service', name: 'Service length', value: '1 year' },
                             { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },
                             { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }
-                        ] }, void 0) }, void 0), id: 'phone-plan' }, void 0)] }, void 0));
+                        ] }) }), id: 'phone-plan' })] }));
 };
 //# sourceMappingURL=RadioButtonGroup.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  FieldGroup,\n  FieldValueList,\n  Flex,\n  RadioButton,\n  RadioButtonGroup,\n  RadioCheckGroupProps,\n  Text\n} from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './RadioButtonGroup.styles';\n\nexport default {\n  title: 'Core/RadioButtonGroup',\n  component: RadioButtonGroup,\n  args: {\n    labelHidden: false,\n    inline: false,\n    autoStack: true,\n    required: false,\n    disabled: false,\n    readOnly: false\n  },\n  argTypes: {\n    labelHidden: { control: { type: 'boolean' } },\n    inline: { control: { type: 'boolean' } },\n    autoStack: { control: { type: 'boolean' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\nexport const RadioButtonGroupDemo: Story<RadioCheckGroupProps> = (args: RadioCheckGroupProps) => {\n  return (\n    <RadioButtonGroup\n      label='What do you want to eat?'\n      name='Fruit'\n      labelHidden={args.labelHidden}\n      inline={args.inline}\n      autoStack={args.autoStack}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    >\n      <RadioButton label='Banana' id='Banana' defaultChecked />\n      <RadioButton label='Apple' id='Apple' />\n      <RadioButton label='Mango' id='Mango' />\n      <RadioButton label='Orange' id='Orange' />\n    </RadioButtonGroup>\n  );\n};\n\nexport const RadioButtonCardGroup: Story<RadioCheckGroupProps> = (args: RadioCheckGroupProps) => {\n  return (\n    <RadioButtonGroup\n      variant='card'\n      label='Which visuals appear satisfying?'\n      labelHidden={args.labelHidden}\n      inline={args.inline}\n      autoStack={args.autoStack}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    >\n      <RadioButton\n        label={\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            <Text variant='h4'>A paragraph</Text>\n            <Paragraph>\n              This is a paragraph of text. It is meant to appear visually satisfying amongst the\n              other options in this group.\n            </Paragraph>\n          </Flex>\n        }\n        id='paragraph'\n        defaultChecked\n      />\n      <RadioButton\n        label={\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            <Text variant='h4'>Space</Text>\n            <StyledImage\n              src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n              alt='space'\n            />\n          </Flex>\n        }\n        id='space-photo'\n      />\n      <RadioButton\n        label={\n          <Flex container={{ gap: 1, alignItems: 'start' }}>\n            <StyledImage\n              src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n              alt='space'\n            />\n            <Flex container={{ direction: 'column', gap: 1 }}>\n              <Text variant='h4'>Space</Text>\n              <Paragraph>\n                Space is the final frontier. There is so much to discover within Cosmos!\n              </Paragraph>\n            </Flex>\n          </Flex>\n        }\n        id='cosmos'\n      />\n      <RadioButton\n        label={\n          <FieldGroup name='Gold service plan'>\n            <FieldValueList\n              fields={[\n                { id: 'service', name: 'Service length', value: '1 year' },\n                { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },\n                { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }\n              ]}\n            />\n          </FieldGroup>\n        }\n        id='phone-plan'\n      />\n    </RadioButtonGroup>\n  );\n};\n"]}
+{"version":3,"file":"RadioButtonGroup.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  FieldGroup,\n  FieldValueList,\n  Flex,\n  RadioButton,\n  RadioButtonGroup,\n  RadioCheckGroupProps,\n  Text,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './RadioButtonGroup.styles';\n\nexport default {\n  title: 'Core/RadioButtonGroup',\n  component: RadioButtonGroup,\n  args: {\n    labelHidden: false,\n    inline: false,\n    autoStack: true,\n    required: false,\n    disabled: false,\n    readOnly: false,\n    showAdditionalInfo: true,\n    showNestedAdditionalInfo: false\n  },\n  argTypes: {\n    labelHidden: { control: { type: 'boolean' } },\n    inline: { control: { type: 'boolean' } },\n    autoStack: { control: { type: 'boolean' } },\n    required: { control: { type: 'boolean' } },\n    disabled: { control: { type: 'boolean' } },\n    readOnly: { control: { type: 'boolean' } },\n    showAdditionalInfo: { control: { type: 'boolean' } },\n    showNestedAdditionalInfo: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface RadioCheckGroupStoryProps extends RadioCheckGroupProps {\n  showAdditionalInfo?: boolean;\n  showNestedAdditionalInfo?: boolean;\n}\n\nexport const RadioButtonGroupDemo: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n  args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n  return args.showNestedAdditionalInfo ? (\n    <RadioButtonGroup\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Some additional info'\n            }\n          : undefined\n      }\n      label='What do you want to eat?'\n      name='Fruit'\n      labelHidden={args.labelHidden}\n      inline={args.inline}\n      autoStack={args.autoStack}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    >\n      <RadioButton\n        label='Banana'\n        id='Banana'\n        defaultChecked\n        additionalInfo={{\n          heading: 'Additional Info',\n          content: 'Some additional info'\n        }}\n      />\n      <RadioButton\n        label='Apple'\n        id='Apple'\n        additionalInfo={{\n          heading: 'Additional Info',\n          content: 'Some additional info'\n        }}\n      />\n      <RadioButton\n        label='Mango'\n        id='Mango'\n        additionalInfo={{\n          heading: 'Additional Info',\n          content: 'Some additional info'\n        }}\n      />\n      <RadioButton\n        label='Orange'\n        id='Orange'\n        additionalInfo={{\n          heading: 'Additional Info',\n          content: 'Some additional info'\n        }}\n      />\n    </RadioButtonGroup>\n  ) : (\n    <RadioButtonGroup\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Some additional info'\n            }\n          : undefined\n      }\n      label='What do you want to eat?'\n      name='Fruit'\n      labelHidden={args.labelHidden}\n      inline={args.inline}\n      autoStack={args.autoStack}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    >\n      <RadioButton label='Banana' id='Banana' defaultChecked />\n      <RadioButton label='Apple' id='Apple' />\n      <RadioButton label='Mango' id='Mango' />\n      <RadioButton label='Orange' id='Orange' />\n    </RadioButtonGroup>\n  );\n};\n\nexport const RadioButtonCardGroup: Story<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n  args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n  return (\n    <RadioButtonGroup\n      additionalInfo={\n        args.showAdditionalInfo\n          ? {\n              heading: 'Additional Info',\n              content: 'Some additional info'\n            }\n          : undefined\n      }\n      variant='card'\n      label='Which visuals appear satisfying?'\n      labelHidden={args.labelHidden}\n      inline={args.inline}\n      autoStack={args.autoStack}\n      required={args.required}\n      disabled={args.disabled}\n      readOnly={args.readOnly}\n    >\n      <RadioButton\n        additionalInfo={\n          args.showNestedAdditionalInfo\n            ? {\n                heading: 'Additional Info',\n                content: 'Some additional info'\n              }\n            : undefined\n        }\n        label={\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            <Text variant='h4'>A paragraph</Text>\n            <Paragraph>\n              This is a paragraph of text. It is meant to appear visually satisfying amongst the\n              other options in this group.\n            </Paragraph>\n          </Flex>\n        }\n        id='paragraph'\n        defaultChecked\n      />\n      <RadioButton\n        label={\n          <Flex container={{ direction: 'column', gap: 1 }}>\n            <Text variant='h4'>Space</Text>\n            <StyledImage\n              src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n              alt='space'\n            />\n          </Flex>\n        }\n        id='space-photo'\n      />\n      <RadioButton\n        label={\n          <Flex container={{ gap: 1, alignItems: 'start' }}>\n            <StyledImage\n              src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n              alt='space'\n            />\n            <Flex container={{ direction: 'column', gap: 1 }}>\n              <Text variant='h4'>Space</Text>\n              <Paragraph>\n                Space is the final frontier. There is so much to discover within Cosmos!\n              </Paragraph>\n            </Flex>\n          </Flex>\n        }\n        id='cosmos'\n      />\n      <RadioButton\n        label={\n          <FieldGroup name='Gold service plan'>\n            <FieldValueList\n              fields={[\n                { id: 'service', name: 'Service length', value: '1 year' },\n                { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },\n                { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }\n              ]}\n            />\n          </FieldGroup>\n        }\n        id='phone-plan'\n      />\n    </RadioButtonGroup>\n  );\n};\n"]}

package/lib/core/Rating/Rating.stories.js

@@ -5,7 +5,7 @@ export default {
     component: Rating
 };
 export const RatingDemo = (args) => {
-    return (_jsx(Rating, { ...args, maxRating: args.maxRating, value: args.value, metaInfo: args.metaInfo, "aria-label": args.ariaLabel }, void 0));
+    return (_jsx(Rating, { ...args, maxRating: args.maxRating, value: args.value, metaInfo: args.metaInfo, "aria-label": args.ariaLabel }));
 };
 RatingDemo.args = {
     maxRating: 5,
@@ -26,7 +26,7 @@ export const ConfigurableRating = (args) => {
                     color: args.color
                 }
             }
-        }, children: _jsx(Rating, { maxRating: 5, value: 3.6, metaInfo: '52 reviews', "aria-label": '3.6 out of 5 stars based on 52 reviews' }, void 0) }, void 0));
+        }, children: _jsx(Rating, { maxRating: 5, value: 3.6, metaInfo: '52 reviews', "aria-label": '3.6 out of 5 stars based on 52 reviews' }) }));
 };
 ConfigurableRating.args = {
     color: '#939393'

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

@@ -1 +1 @@
-{"version":3,"file":"Rating.stories.js","sourceRoot":"","sources":["../../../src/core/Rating/Rating.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;AAE7E,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;CACV,CAAC;AAMV,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC5E,OAAO,CACL,KAAC,MAAM,OACD,IAAI,EACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,WAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,CAAC;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,wCAAwC;CACpD,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACzC,CAAC;AAMF,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAChE,IAA6B,EAC7B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;aACF;SACF,YAED,KAAC,MAAM,IACL,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,GAAG,EACV,QAAQ,EAAC,YAAY,gBACV,wCAAwC,WACnD,WACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CACtC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, Rating, RatingProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Rating',\n  component: Rating\n} as Meta;\n\ninterface RatingStoryProps extends RatingProps {\n  ariaLabel?: string;\n}\n\nexport const RatingDemo: Story<RatingStoryProps> = (args: RatingStoryProps) => {\n  return (\n    <Rating\n      {...args}\n      maxRating={args.maxRating}\n      value={args.value}\n      metaInfo={args.metaInfo}\n      aria-label={args.ariaLabel}\n    />\n  );\n};\n\nRatingDemo.args = {\n  maxRating: 5,\n  value: 3.6,\n  metaInfo: '52 reviews',\n  ariaLabel: '3.6 out of 5 stars based on 52 reviews'\n};\n\nRatingDemo.argTypes = {\n  maxRating: { control: { type: 'number' } },\n  value: { control: { type: 'number' } },\n  metaInfo: { control: { type: 'text' } },\n  ariaLabel: { control: { type: 'text' } }\n};\n\ninterface ConfigurableRatingProps {\n  color?: string;\n}\n\nexport const ConfigurableRating: Story<ConfigurableRatingProps> = (\n  args: ConfigurableRatingProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          rating: {\n            color: args.color\n          }\n        }\n      }}\n    >\n      <Rating\n        maxRating={5}\n        value={3.6}\n        metaInfo='52 reviews'\n        aria-label='3.6 out of 5 stars based on 52 reviews'\n      />\n    </Configuration>\n  );\n};\n\nConfigurableRating.args = {\n  color: '#939393'\n};\n\nConfigurableRating.argTypes = {\n  color: { control: { type: 'color' } }\n};\n"]}
+{"version":3,"file":"Rating.stories.js","sourceRoot":"","sources":["../../../src/core/Rating/Rating.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,EAAe,MAAM,yBAAyB,CAAC;AAE7E,eAAe;IACb,KAAK,EAAE,aAAa;IACpB,SAAS,EAAE,MAAM;CACV,CAAC;AAMV,MAAM,CAAC,MAAM,UAAU,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAC5E,OAAO,CACL,KAAC,MAAM,OACD,IAAI,EACR,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,GAC1B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,CAAC;IACZ,KAAK,EAAE,GAAG;IACV,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,wCAAwC;CACpD,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACvC,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACzC,CAAC;AAMF,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAChE,IAA6B,EAC7B,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,MAAM,EAAE;oBACN,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;aACF;SACF,YAED,KAAC,MAAM,IACL,SAAS,EAAE,CAAC,EACZ,KAAK,EAAE,GAAG,EACV,QAAQ,EAAC,YAAY,gBACV,wCAAwC,GACnD,GACY,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,KAAK,EAAE,SAAS;CACjB,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CACtC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, Rating, RatingProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/Rating',\n  component: Rating\n} as Meta;\n\ninterface RatingStoryProps extends RatingProps {\n  ariaLabel?: string;\n}\n\nexport const RatingDemo: Story<RatingStoryProps> = (args: RatingStoryProps) => {\n  return (\n    <Rating\n      {...args}\n      maxRating={args.maxRating}\n      value={args.value}\n      metaInfo={args.metaInfo}\n      aria-label={args.ariaLabel}\n    />\n  );\n};\n\nRatingDemo.args = {\n  maxRating: 5,\n  value: 3.6,\n  metaInfo: '52 reviews',\n  ariaLabel: '3.6 out of 5 stars based on 52 reviews'\n};\n\nRatingDemo.argTypes = {\n  maxRating: { control: { type: 'number' } },\n  value: { control: { type: 'number' } },\n  metaInfo: { control: { type: 'text' } },\n  ariaLabel: { control: { type: 'text' } }\n};\n\ninterface ConfigurableRatingProps {\n  color?: string;\n}\n\nexport const ConfigurableRating: Story<ConfigurableRatingProps> = (\n  args: ConfigurableRatingProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          rating: {\n            color: args.color\n          }\n        }\n      }}\n    >\n      <Rating\n        maxRating={5}\n        value={3.6}\n        metaInfo='52 reviews'\n        aria-label='3.6 out of 5 stars based on 52 reviews'\n      />\n    </Configuration>\n  );\n};\n\nConfigurableRating.args = {\n  color: '#939393'\n};\n\nConfigurableRating.argTypes = {\n  color: { control: { type: 'color' } }\n};\n"]}

package/lib/core/SearchInput/SearchInput.mocks.d.ts

@@ -0,0 +1,12 @@
+export declare const searchResults: {
+    primary: string;
+    href: string;
+    secondary: string[];
+    id: string;
+}[];
+export declare const recentSearches: {
+    id: string;
+    primary: string;
+    href: string;
+}[];
+//# sourceMappingURL=SearchInput.mocks.d.ts.map

package/lib/core/SearchInput/SearchInput.mocks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.mocks.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa;;;;;GAmBzB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;GAG1B,CAAC"}

package/lib/core/SearchInput/SearchInput.mocks.js

@@ -0,0 +1,25 @@
+export const searchResults = [
+    {
+        primary: 'Usability fixes',
+        href: '/BUG-90001',
+        secondary: ['BUG-90001', 'Updated on Thursday'],
+        id: 'BUG-90001'
+    },
+    {
+        primary: 'RTE Enhancements',
+        href: '/STORY-92120',
+        secondary: ['STORY-92120', 'Updated on Monday'],
+        id: 'STORY-92120'
+    },
+    {
+        primary: 'Cosmos Svelte Components',
+        href: '/EPIC-84623',
+        secondary: ['EPIC-84623', 'Updated on Tuesday'],
+        id: 'EPIC-84623'
+    }
+];
+export const recentSearches = [
+    { id: '1', primary: 'How to pet a dog', href: '/search?query=how%20to%20pet%20a%20dog' },
+    { id: '2', primary: 'Can dogs smile', href: '/search?query=can%dogs%smile' }
+];
+//# sourceMappingURL=SearchInput.mocks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.mocks.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.mocks.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B;QACE,OAAO,EAAE,iBAAiB;QAC1B,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,CAAC,WAAW,EAAE,qBAAqB,CAAC;QAC/C,EAAE,EAAE,WAAW;KAChB;IACD;QACE,OAAO,EAAE,kBAAkB;QAC3B,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,CAAC,aAAa,EAAE,mBAAmB,CAAC;QAC/C,EAAE,EAAE,aAAa;KAClB;IACD;QACE,OAAO,EAAE,0BAA0B;QACnC,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,CAAC,YAAY,EAAE,oBAAoB,CAAC;QAC/C,EAAE,EAAE,YAAY;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,kBAAkB,EAAE,IAAI,EAAE,wCAAwC,EAAE;IACxF,EAAE,EAAE,EAAE,GAAG,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,8BAA8B,EAAE;CAC7E,CAAC","sourcesContent":["export const searchResults = [\n  {\n    primary: 'Usability fixes',\n    href: '/BUG-90001',\n    secondary: ['BUG-90001', 'Updated on Thursday'],\n    id: 'BUG-90001'\n  },\n  {\n    primary: 'RTE Enhancements',\n    href: '/STORY-92120',\n    secondary: ['STORY-92120', 'Updated on Monday'],\n    id: 'STORY-92120'\n  },\n  {\n    primary: 'Cosmos Svelte Components',\n    href: '/EPIC-84623',\n    secondary: ['EPIC-84623', 'Updated on Tuesday'],\n    id: 'EPIC-84623'\n  }\n];\n\nexport const recentSearches = [\n  { id: '1', primary: 'How to pet a dog', href: '/search?query=how%20to%20pet%20a%20dog' },\n  { id: '2', primary: 'Can dogs smile', href: '/search?query=can%dogs%smile' }\n];\n"]}

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

@@ -3,8 +3,5 @@ import { SearchInputProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const SearchInputDemo: Story<SearchInputProps>;
-interface ConfigurableSearchInputProps {
-    borderRadius?: number;
-}
-export declare const ConfigurableSearchInput: Story<ConfigurableSearchInputProps>;
+export declare const EnhancedSearchInputDemo: Story;
 //# sourceMappingURL=SearchInput.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAA8B,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAEvF,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAEnD,CAAC;AAUF,UAAU,4BAA4B;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,4BAA4B,CAgBvE,CAAC"}
+{"version":3,"file":"SearchInput.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAe,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;;AAIxE,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAKnD,CAAC;AAUF,eAAO,MAAM,uBAAuB,EAAE,KAsCrC,CAAC"}

package/lib/core/SearchInput/SearchInput.stories.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Configuration, SearchInput } from '@pega/cosmos-react-core';
+import { useRef, useState } from 'react';
+import { SearchInput } from '@pega/cosmos-react-core';
+import { searchResults as mockSearchResults, recentSearches } from './SearchInput.mocks';
 export default {
     title: 'Core/SearchInput',
     component: SearchInput
 };
 export const SearchInputDemo = (args) => {
-    return _jsx(SearchInput, { ...args, placeholder: args.placeholder }, void 0);
+    const [value, setValue] = useState('');
+    return (_jsx(SearchInput, { ...args, placeholder: args.placeholder, onSearchChange: setValue, value: value }));
 };
 SearchInputDemo.args = {
     placeholder: 'Search…'
@@ -13,19 +16,30 @@ SearchInputDemo.args = {
 SearchInputDemo.argTypes = {
     placeholder: { control: { type: 'text' } }
 };
-export const ConfigurableSearchInput = (args) => {
-    return (_jsx(Configuration, { theme: {
-            components: {
-                'search-input': {
-                    'border-radius': args.borderRadius
-                }
+export const EnhancedSearchInputDemo = () => {
+    const [value, setValue] = useState('');
+    const [searchResults, setSearchResults] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const timeout = useRef(null);
+    const onValueChange = (val) => {
+        setValue(val);
+        setLoading(true);
+        setSearchResults([]);
+        if (timeout.current) {
+            clearTimeout(timeout.current);
+        }
+        timeout.current = window.setTimeout(() => {
+            if (val) {
+                setSearchResults(mockSearchResults.filter(res => {
+                    return res.primary.toLowerCase().includes(val.toLowerCase());
+                }));
             }
-        }, children: _jsx(SearchInput, {}, void 0) }, void 0));
-};
-ConfigurableSearchInput.args = {
-    borderRadius: 9999
-};
-ConfigurableSearchInput.argTypes = {
-    borderRadius: { control: { type: 'number' } }
+            setLoading(false);
+        }, 1000);
+    };
+    return (_jsx(SearchInput, { filters: ['Story', 'Very long filter'], loading: loading, searchResults: searchResults?.map(result => ({
+            ...result,
+            onClick: (id, e) => e.preventDefault()
+        })), value: value, onSearchChange: onValueChange, recentSearches: recentSearches, advancedSearchLink: { href: '/?path=/story/work-searchresults--search-results-demo' } }));
 };
 //# sourceMappingURL=SearchInput.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.stories.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,WAAW,EAAoB,MAAM,yBAAyB,CAAC;AAEvF,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACjF,OAAO,KAAC,WAAW,OAAK,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,WAAI,CAAC;AAClE,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC;AAMF,MAAM,CAAC,MAAM,uBAAuB,GAAwC,CAC1E,IAAkC,EAClC,EAAE;IACF,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,cAAc,EAAE;oBACd,eAAe,EAAE,IAAI,CAAC,YAAY;iBACnC;aACF;SACF,YAED,KAAC,WAAW,aAAG,WACD,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,uBAAuB,CAAC,IAAI,GAAG;IAC7B,YAAY,EAAE,IAAI;CACnB,CAAC;AAEF,uBAAuB,CAAC,QAAQ,GAAG;IACjC,YAAY,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;CAC9C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Configuration, SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/SearchInput',\n  component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n  return <SearchInput {...args} placeholder={args.placeholder} />;\n};\n\nSearchInputDemo.args = {\n  placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n  placeholder: { control: { type: 'text' } }\n};\n\ninterface ConfigurableSearchInputProps {\n  borderRadius?: number;\n}\n\nexport const ConfigurableSearchInput: Story<ConfigurableSearchInputProps> = (\n  args: ConfigurableSearchInputProps\n) => {\n  return (\n    <Configuration\n      theme={{\n        components: {\n          'search-input': {\n            'border-radius': args.borderRadius\n          }\n        }\n      }}\n    >\n      <SearchInput />\n    </Configuration>\n  );\n};\n\nConfigurableSearchInput.args = {\n  borderRadius: 9999\n};\n\nConfigurableSearchInput.argTypes = {\n  borderRadius: { control: { type: 'number' } }\n};\n"]}
+{"version":3,"file":"SearchInput.stories.js","sourceRoot":"","sources":["../../../src/core/SearchInput/SearchInput.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAoB,MAAM,yBAAyB,CAAC;AAExE,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAEzF,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACjF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,OAAO,CACL,KAAC,WAAW,OAAK,IAAI,EAAE,WAAW,EAAE,IAAI,CAAC,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CACjG,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,WAAW,EAAE,SAAS;CACvB,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAU,GAAG,EAAE;IACjD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAoC,EAAE,CAAC,CAAC;IAC1F,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,OAAO,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC5C,MAAM,aAAa,GAAG,CAAC,GAAW,EAAE,EAAE;QACpC,QAAQ,CAAC,GAAG,CAAC,CAAC;QACd,UAAU,CAAC,IAAI,CAAC,CAAC;QACjB,gBAAgB,CAAC,EAAE,CAAC,CAAC;QACrB,IAAI,OAAO,CAAC,OAAO,EAAE;YACnB,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;SAC/B;QACD,OAAO,CAAC,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;YACvC,IAAI,GAAG,EAAE;gBACP,gBAAgB,CACd,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE;oBAC7B,OAAO,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;gBAC/D,CAAC,CAAC,CACH,CAAC;aACH;YACD,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EAAE,IAAI,CAAC,CAAC;IACX,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,WAAW,IACV,OAAO,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC,EACtC,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YAC3C,GAAG,MAAM;YACT,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;SACvC,CAAC,CAAC,EACH,KAAK,EAAE,KAAK,EACZ,cAAc,EAAE,aAAa,EAC7B,cAAc,EAAE,cAAc,EAC9B,kBAAkB,EAAE,EAAE,IAAI,EAAE,uDAAuD,EAAE,GACrF,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { SearchInput, SearchInputProps } from '@pega/cosmos-react-core';\n\nimport { searchResults as mockSearchResults, recentSearches } from './SearchInput.mocks';\n\nexport default {\n  title: 'Core/SearchInput',\n  component: SearchInput\n} as Meta;\n\nexport const SearchInputDemo: Story<SearchInputProps> = (args: SearchInputProps) => {\n  const [value, setValue] = useState('');\n  return (\n    <SearchInput {...args} placeholder={args.placeholder} onSearchChange={setValue} value={value} />\n  );\n};\n\nSearchInputDemo.args = {\n  placeholder: 'Search…'\n};\n\nSearchInputDemo.argTypes = {\n  placeholder: { control: { type: 'text' } }\n};\n\nexport const EnhancedSearchInputDemo: Story = () => {\n  const [value, setValue] = useState('');\n  const [searchResults, setSearchResults] = useState<SearchInputProps['searchResults']>([]);\n  const [loading, setLoading] = useState(false);\n  const timeout = useRef<number | null>(null);\n  const onValueChange = (val: string) => {\n    setValue(val);\n    setLoading(true);\n    setSearchResults([]);\n    if (timeout.current) {\n      clearTimeout(timeout.current);\n    }\n    timeout.current = window.setTimeout(() => {\n      if (val) {\n        setSearchResults(\n          mockSearchResults.filter(res => {\n            return res.primary.toLowerCase().includes(val.toLowerCase());\n          })\n        );\n      }\n      setLoading(false);\n    }, 1000);\n  };\n\n  return (\n    <SearchInput\n      filters={['Story', 'Very long filter']}\n      loading={loading}\n      searchResults={searchResults?.map(result => ({\n        ...result,\n        onClick: (id, e) => e.preventDefault()\n      }))}\n      value={value}\n      onSearchChange={onValueChange}\n      recentSearches={recentSearches}\n      advancedSearchLink={{ href: '/?path=/story/work-searchresults--search-results-demo' }}\n    />\n  );\n};\n"]}