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

package/lib/components/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { StyledProps, css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { StyledCount } from '../Badges/Count';\nimport { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\n\nimport { TabsProps } from './Tabs.types';\n\ninterface TabProps {\n  /** Indicates if this Tab is active. */\n  selected: boolean;\n  /**\n   * Indicates if the styling of this Tab is inverted.\n   * @deprecated\n   */\n  inverted: boolean;\n  /** The text to display as the name of the Tab. */\n  content: string;\n  /** A number to associate with the Tab. */\n  count?: ReactNode;\n  /** Determines the direction in which the Tab will render. */\n  type: TabsProps['type'];\n  /** Disables the tab if true */\n  disabled?: boolean;\n}\n\nexport interface StyledTabProps {\n  selected: TabProps['selected'];\n  inverted: TabProps['inverted'];\n  tabType: TabProps['type'];\n}\n\nconst activeStyle = (color: string) => css`\n  ::after {\n    display: block;\n    background-color: ${color};\n  }\n`;\n\nconst getHorizontalStyles = ({ selected, theme, inverted }: StyledProps<StyledTabProps>) => {\n  const primaryColor = inverted\n    ? theme.components.tabs.inverted.foreground\n    : theme.components.tabs.base.foreground;\n  const lightenedColor = tryCatch(() => transparentize(0.3, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    height: calc(4 * ${spacing});\n    padding: 0 calc(2 * ${spacing});\n    border: none;\n\n    span:first-of-type {\n      color: ${selected ? primaryColor : theme.base.palette['foreground-color']};\n      text-transform: uppercase;\n      display: inline-block;\n\n      ::before {\n        content: attr(data-content);\n        display: block;\n        font-weight: bold;\n        height: 0;\n        overflow: hidden;\n        visibility: hidden;\n      }\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n\n    ::after {\n      background: ${selected ? primaryColor : lightenedColor};\n      display: ${selected ? 'block' : 'none'};\n      content: '';\n      position: absolute;\n      height: 0.125rem;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n    }\n\n    &:focus {\n      ${activeStyle(lightenedColor)}\n      box-shadow: inset ${theme.base.shadow.focus}\n    }\n\n    ${StyledCount} {\n      margin-inline-start: calc(0.5 * ${spacing});\n    }\n  `;\n};\n\nconst getVerticalStyles = ({ selected, theme }: StyledProps<StyledTabProps>) => {\n  const borderColor = theme.base.palette['border-line'];\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-style: solid;\n    color: ${theme.base.palette['foreground-color']};\n    border-width: 0.0625rem 0;\n    border-color: ${borderColor};\n    height: calc(5.5 * ${spacing});\n    margin-top: -0.0625rem;\n    padding: 0 calc(2 * ${spacing});\n\n    &:first-child {\n      border-top: 0.0625rem solid ${borderColor};\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      display: ${selected ? 'block' : 'none'};\n      top: 0;\n      bottom: 0;\n      right: 0;\n      width: 0.25rem;\n      background: ${primaryColor};\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n    }\n\n    &:focus {\n      ${activeStyle(primaryColor)}\n      box-shadow: inset 0 0 0 0.0625rem ${primaryColor};\n    }\n  `;\n};\n\nexport const StyledTab = styled(BareButton)<StyledTabProps>`\n  position: relative;\n  background: none;\n  cursor: pointer;\n\n  ${props =>\n    props.tabType === 'horizontal' ? getHorizontalStyles(props) : getVerticalStyles(props)}\n  ${props =>\n    props.selected &&\n    css`\n      font-weight: bold;\n    `}\n  white-space: nowrap;\n\n  & + & {\n    margin-inline-start: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: ${props => props.theme.base['disabled-opacity']};\n  }\n`;\n\nStyledTab.defaultProps = defaultThemeProp;\n\nconst Tab: FC<TabProps & ForwardProps> = forwardRef(\n  (\n    { selected, inverted, content, count, type, disabled, ...restProps }: PropsWithoutRef<TabProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    return (\n      <StyledTab\n        ref={ref}\n        selected={selected}\n        inverted={inverted}\n        tabType={type}\n        disabled={disabled}\n        type='button'\n        {...restProps}\n      >\n        <span data-content={content}>{content}</span>\n        {count}\n      </StyledTab>\n    );\n  }\n);\n\nexport default Tab;\n"]}
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, ReactNode, forwardRef, PropsWithoutRef, Ref } from 'react';\nimport styled, { StyledProps, css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils/utils';\nimport { StyledCount } from '../Badges/Count';\nimport { ForwardProps } from '../../types';\nimport BareButton from '../Button/BareButton';\n\nimport { TabsProps } from './Tabs.types';\n\ninterface TabProps {\n  /** Indicates if this Tab is active. */\n  selected: boolean;\n  /**\n   * Indicates if the styling of this Tab is inverted.\n   * @deprecated\n   */\n  inverted: boolean;\n  /** The text to display as the name of the Tab. */\n  content: string;\n  /** A number to associate with the Tab. */\n  count?: ReactNode;\n  /** Determines the direction in which the Tab will render. */\n  type: TabsProps['type'];\n  /** Disables the tab if true */\n  disabled?: boolean;\n}\n\nexport interface StyledTabProps {\n  selected: TabProps['selected'];\n  inverted: TabProps['inverted'];\n  tabType: TabProps['type'];\n}\n\nconst activeStyle = (color: string) => css`\n  ::after {\n    display: block;\n    background-color: ${color};\n  }\n`;\n\nconst getHorizontalStyles = ({ selected, theme, inverted }: StyledProps<StyledTabProps>) => {\n  const primaryColor = inverted\n    ? theme.components.tabs.inverted.foreground\n    : theme.components.tabs.base.foreground;\n  const lightenedColor = tryCatch(() => transparentize(0.3, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    align-items: center;\n    display: flex;\n    flex-direction: row;\n    height: calc(4 * ${spacing});\n    padding: 0 calc(2 * ${spacing});\n    border: none;\n\n    span:first-of-type {\n      color: ${selected ? primaryColor : theme.base.palette['foreground-color']};\n      display: inline-block;\n\n      ::before {\n        content: attr(data-content);\n        display: block;\n        font-weight: bold;\n        height: 0;\n        overflow: hidden;\n        visibility: hidden;\n      }\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n\n    ::after {\n      background: ${selected ? primaryColor : lightenedColor};\n      display: ${selected ? 'block' : 'none'};\n      content: '';\n      position: absolute;\n      height: 0.125rem;\n      bottom: 0;\n      left: 0;\n      right: 0;\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n    }\n\n    &:focus {\n      ${activeStyle(lightenedColor)}\n      box-shadow: inset ${theme.base.shadow.focus}\n    }\n\n    ${StyledCount} {\n      margin-inline-start: calc(0.5 * ${spacing});\n    }\n  `;\n};\n\nconst getVerticalStyles = ({ selected, theme }: StyledProps<StyledTabProps>) => {\n  const borderColor = theme.base.palette['border-line'];\n  const primaryColor = theme.base.palette.interactive;\n  const lightenedColor = tryCatch(() => transparentize(0.5, primaryColor)) ?? '';\n  const { spacing } = theme.base;\n\n  return css`\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border-style: solid;\n    color: ${theme.base.palette['foreground-color']};\n    border-width: 0.0625rem 0;\n    border-color: ${borderColor};\n    height: calc(5.5 * ${spacing});\n    margin-top: -0.0625rem;\n    padding: 0 calc(2 * ${spacing});\n\n    &:first-child {\n      border-top: 0.0625rem solid ${borderColor};\n    }\n\n    ::after {\n      content: '';\n      position: absolute;\n      display: ${selected ? 'block' : 'none'};\n      top: 0;\n      bottom: 0;\n      right: 0;\n      width: 0.25rem;\n      background: ${primaryColor};\n    }\n\n    &:hover&:not(:disabled) {\n      ${activeStyle(lightenedColor)}\n    }\n\n    &:focus {\n      ${activeStyle(primaryColor)}\n      box-shadow: inset 0 0 0 0.0625rem ${primaryColor};\n    }\n  `;\n};\n\nexport const StyledTab = styled(BareButton)<StyledTabProps>`\n  position: relative;\n  background: none;\n  cursor: pointer;\n\n  ${props =>\n    props.tabType === 'horizontal' ? getHorizontalStyles(props) : getVerticalStyles(props)}\n  ${props =>\n    props.selected &&\n    css`\n      font-weight: bold;\n    `}\n  white-space: nowrap;\n\n  & + & {\n    margin-inline-start: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: ${props => props.theme.base['disabled-opacity']};\n  }\n`;\n\nStyledTab.defaultProps = defaultThemeProp;\n\nconst Tab: FC<TabProps & ForwardProps> = forwardRef(\n  (\n    { selected, inverted, content, count, type, disabled, ...restProps }: PropsWithoutRef<TabProps>,\n    ref: Ref<HTMLButtonElement>\n  ) => {\n    return (\n      <StyledTab\n        ref={ref}\n        selected={selected}\n        inverted={inverted}\n        tabType={type}\n        disabled={disabled}\n        type='button'\n        {...restProps}\n      >\n        <span data-content={content}>{content}</span>\n        {count}\n      </StyledTab>\n    );\n  }\n);\n\nexport default Tab;\n"]}

package/lib/components/Tabs/TabPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;SAGK;IACL,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAChB,OAAO;SAgBhB,CAAC;AAEH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAyB7D,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAmB,MAAM,OAAO,CAAC;AAGvF,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,UAAU,aAAa;IACrB,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd;;;SAGK;IACL,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AAMD,eAAO,MAAM,cAAc;aAChB,OAAO;SAehB,CAAC;AAEH,QAAA,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,GAAG,YAAY,CAkB7D,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/lib/components/Tabs/TabPanel.js

@@ -8,7 +8,6 @@ export const StyledTabPanel = styled.div(({ current }) => {
     return css `
     min-width: 0;
     max-width: 100%;
-    height: 100%;
 
     :focus {
       outline: none;
@@ -21,13 +20,7 @@ export const StyledTabPanel = styled.div(({ current }) => {
   `;
 });
 const TabPanel = forwardRef(({ tabId, currentTabId, children, ...restProps }, ref) => {
-    const getTabIndex = () => {
-        if (currentTabId && tabId) {
-            return currentTabId === tabId ? 0 : undefined;
-        }
-        return 0;
-    };
-    return (_jsx(StyledTabPanel, { ...restProps, current: currentTabId && tabId ? currentTabId === tabId : true, role: 'tabpanel', tabIndex: getTabIndex(), "aria-labelledby": `${tabId}`, id: `${tabId}-panel`, ref: ref, children: children }, void 0));
+    return (_jsx(StyledTabPanel, { ...restProps, current: currentTabId && tabId ? currentTabId === tabId : true, role: 'tabpanel', "aria-labelledby": `${tabId}`, id: `${tabId}-panel`, ref: ref, children: children }));
 });
 TabPanel.defaultProps = defaultProps;
 export default TabPanel;

package/lib/components/Tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAkBhD,MAAM,YAAY,GAA2B;IAC3C,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAErC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACjB,OAAO,GAAG,CAAA;;;;;;;;;MASN,CAAC,OAAO;QACV,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CACE,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAkC,EAC/E,GAAyB,EACzB,EAAE;IACF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,YAAY,IAAI,KAAK,EAAE;YACzB,OAAO,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;SAC/C;QACD,OAAO,CAAC,CAAC;IACX,CAAC,CAAC;IACF,OAAO,CACL,KAAC,cAAc,OACT,SAAS,EACb,OAAO,EAAE,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,EAC9D,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,WAAW,EAAE,qBACN,GAAG,KAAK,EAAE,EAC3B,EAAE,EAAE,GAAG,KAAK,QAAQ,EACpB,GAAG,EAAE,GAAG,YAEP,QAAQ,WACM,CAClB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,YAAY,GAAG,YAAY,CAAC;AAErC,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\n\ninterface TabPanelProps {\n  /** The id of the Tab that the tab panel is related to. */\n  tabId: string;\n  /**\n   * The current selected value of the tabs. Controls the visibility of the tab panel.\n   * The tabsValue must match the tabId in order for the TabPanel to show itself.\n   * */\n  currentTabId?: string;\n  /** Content of the tab panel. */\n  children: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n  tabId: ''\n};\n\nexport const StyledTabPanel = styled.div<{\n  current: boolean;\n}>(({ current }) => {\n  return css`\n    min-width: 0;\n    max-width: 100%;\n    height: 100%;\n\n    :focus {\n      outline: none;\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n  `;\n});\n\nconst TabPanel: FunctionComponent<TabPanelProps & ForwardProps> = forwardRef(\n  (\n    { tabId, currentTabId, children, ...restProps }: PropsWithoutRef<TabPanelProps>,\n    ref: TabPanelProps['ref']\n  ) => {\n    const getTabIndex = () => {\n      if (currentTabId && tabId) {\n        return currentTabId === tabId ? 0 : undefined;\n      }\n      return 0;\n    };\n    return (\n      <StyledTabPanel\n        {...restProps}\n        current={currentTabId && tabId ? currentTabId === tabId : true}\n        role='tabpanel'\n        tabIndex={getTabIndex()}\n        aria-labelledby={`${tabId}`}\n        id={`${tabId}-panel`}\n        ref={ref}\n      >\n        {children}\n      </StyledTabPanel>\n    );\n  }\n);\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}
+{"version":3,"file":"TabPanel.js","sourceRoot":"","sources":["../../../src/components/Tabs/TabPanel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAsD,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAkBhD,MAAM,YAAY,GAA2B;IAC3C,KAAK,EAAE,EAAE;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAErC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IACjB,OAAO,GAAG,CAAA;;;;;;;;MAQN,CAAC,OAAO;QACV,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,MAAM,QAAQ,GAAoD,UAAU,CAC1E,CACE,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAkC,EAC/E,GAAyB,EACzB,EAAE;IACF,OAAO,CACL,KAAC,cAAc,OACT,SAAS,EACb,OAAO,EAAE,YAAY,IAAI,KAAK,CAAC,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,EAC9D,IAAI,EAAC,UAAU,qBACE,GAAG,KAAK,EAAE,EAC3B,EAAE,EAAE,GAAG,KAAK,QAAQ,EACpB,GAAG,EAAE,GAAG,YAEP,QAAQ,GACM,CAClB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,YAAY,GAAG,YAAY,CAAC;AAErC,eAAe,QAAQ,CAAC","sourcesContent":["import { forwardRef, FunctionComponent, ReactNode, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { ForwardProps } from '../../types';\n\ninterface TabPanelProps {\n  /** The id of the Tab that the tab panel is related to. */\n  tabId: string;\n  /**\n   * The current selected value of the tabs. Controls the visibility of the tab panel.\n   * The tabsValue must match the tabId in order for the TabPanel to show itself.\n   * */\n  currentTabId?: string;\n  /** Content of the tab panel. */\n  children: ReactNode;\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst defaultProps: Partial<TabPanelProps> = {\n  tabId: ''\n};\n\nexport const StyledTabPanel = styled.div<{\n  current: boolean;\n}>(({ current }) => {\n  return css`\n    min-width: 0;\n    max-width: 100%;\n\n    :focus {\n      outline: none;\n    }\n\n    ${!current &&\n    css`\n      display: none;\n    `}\n  `;\n});\n\nconst TabPanel: FunctionComponent<TabPanelProps & ForwardProps> = forwardRef(\n  (\n    { tabId, currentTabId, children, ...restProps }: PropsWithoutRef<TabPanelProps>,\n    ref: TabPanelProps['ref']\n  ) => {\n    return (\n      <StyledTabPanel\n        {...restProps}\n        current={currentTabId && tabId ? currentTabId === tabId : true}\n        role='tabpanel'\n        aria-labelledby={`${tabId}`}\n        id={`${tabId}-panel`}\n        ref={ref}\n      >\n        {children}\n      </StyledTabPanel>\n    );\n  }\n);\n\nTabPanel.defaultProps = defaultProps;\n\nexport default TabPanel;\n"]}

package/lib/components/Tabs/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,eAAO,MAAM,UAAU,yHAUtB,CAAC;AAIF;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAwGrD,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EAOlB,MAAM,OAAO,CAAC;AAOf,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,eAAO,MAAM,UAAU,yHAUtB,CAAC;AAIF;;;GAGG;AACH,QAAA,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,GAAG,YAAY,CAqGrD,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/lib/components/Tabs/Tabs.js

@@ -58,10 +58,10 @@ const Tabs = forwardRef(({ tabs = [], type = 'horizontal', currentTabId, onTabCl
     }
     return (_jsx(Flex, { ...restProps, container: {
             direction: type !== 'horizontal' ? 'column' : undefined
-        }, item: { shrink: 0 }, as: StyledTabs, ref: ref, type: type, role: 'tablist', children: tabs.map((tab, i) => {
+        }, item: { shrink: 0 }, as: StyledTabs, ref: ref, type: type, role: 'tablist', "aria-orientation": type, children: tabs.map((tab, i) => {
             const { href, name, count, id, disabled } = tab;
             const selected = id === currentTabId;
-            return (_jsx(Tab, { id: id, "aria-selected": selected, "aria-controls": `${id}-panel`, content: name, count: typeof count === 'number' && (_jsx(Count, { variant: selected ? 'interactive' : badgeVariant, children: count }, void 0)), href: href, inverted: inverted || false, selected: selected, onClick: (event) => {
+            return (_jsx(Tab, { id: id, "aria-selected": selected, "aria-controls": `${id}-panel`, content: name, count: typeof count === 'number' && _jsx(Count, { variant: badgeVariant, children: count }), href: href, inverted: inverted || false, selected: selected, onClick: (event) => {
                     onTabClick?.(id, event);
                 }, role: 'tab', ref: (el) => {
                     tabRefs.current[i] = el;
@@ -72,7 +72,7 @@ const Tabs = forwardRef(({ tabs = [], type = 'horizontal', currentTabId, onTabCl
                 }, onKeyUp: (e) => {
                     changeTabFocus(e, i);
                 }, as: href ? Link : undefined, tabIndex: selected ? undefined : -1, "aria-label": name, type: type, disabled: disabled }, id));
-        }) }, void 0));
+        }) }));
 });
 export default Tabs;
 //# sourceMappingURL=Tabs.js.map

package/lib/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  MouseEvent,\n  KeyboardEvent,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Count from '../Badges/Count';\nimport { ForwardProps } from '../../types';\n\nimport Tab from './Tab';\nimport { TabsProps } from './Tabs.types';\n\ntype TabItem = TabsProps['tabs'][number];\n\nexport const StyledTabs = styled.div<Partial<TabsProps>>(\n  ({ type, theme }) => css`\n    position: relative;\n    overflow: ${type === 'horizontal' ? 'auto' : 'visible'};\n    ${type === 'horizontal' &&\n    css`\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      height: max-content;\n    `}\n  `\n);\n\nStyledTabs.defaultProps = defaultThemeProp;\n\n/**\n * The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.\n * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated\n */\nconst Tabs: FunctionComponent<TabsProps & ForwardProps> = forwardRef(\n  (\n    {\n      tabs = [],\n      type = 'horizontal',\n      currentTabId,\n      onTabClick,\n      inverted = false,\n      ...restProps\n    }: PropsWithoutRef<TabsProps>,\n    ref: Ref<HTMLElement>\n  ) => {\n    // Used to keep a reference for every tab in order to focus them with key presses\n    const tabRefs = useRef<(HTMLButtonElement | HTMLAnchorElement)[]>([]);\n\n    // Handles arrow keypresses for changing the focus\n    const changeTabFocus = (event: KeyboardEvent, index: number): void => {\n      if (tabRefs.current?.length) {\n        const { key } = event;\n        if (key === 'ArrowRight' || key === 'ArrowDown') {\n          const nextIndex = index + 1 < tabs.length ? index + 1 : 0;\n          const nextTab = tabRefs.current[nextIndex] as HTMLButtonElement;\n\n          if (!nextTab?.disabled) {\n            nextTab?.focus();\n          } else {\n            changeTabFocus(event, nextIndex);\n          }\n        } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n          const prevIndex = index === 0 ? tabs.length - 1 : index - 1;\n          const prevTab = tabRefs.current[prevIndex] as HTMLButtonElement;\n          if (!prevTab?.disabled) {\n            prevTab?.focus();\n          } else {\n            changeTabFocus(event, prevIndex);\n          }\n        }\n      }\n    };\n\n    let badgeVariant: 'inverted' | 'default';\n    if (inverted) {\n      badgeVariant = 'inverted';\n    } else {\n      badgeVariant = 'default';\n    }\n\n    return (\n      <Flex\n        {...restProps}\n        container={{\n          direction: type !== 'horizontal' ? 'column' : undefined\n        }}\n        item={{ shrink: 0 }}\n        as={StyledTabs}\n        ref={ref}\n        type={type}\n        role='tablist'\n      >\n        {tabs.map((tab: TabItem, i) => {\n          const { href, name, count, id, disabled } = tab;\n          const selected = id === currentTabId;\n\n          return (\n            <Tab\n              id={id}\n              aria-selected={selected}\n              aria-controls={`${id}-panel`}\n              content={name}\n              count={\n                typeof count === 'number' && (\n                  <Count variant={selected ? 'interactive' : badgeVariant}>{count}</Count>\n                )\n              }\n              href={href}\n              inverted={inverted || false}\n              selected={selected}\n              onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n                onTabClick?.(id, event);\n              }}\n              role='tab'\n              ref={(el: HTMLButtonElement | HTMLAnchorElement) => {\n                tabRefs.current[i] = el;\n              }}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {\n                  e.preventDefault();\n                }\n              }}\n              onKeyUp={(e: KeyboardEvent<any>) => {\n                changeTabFocus(e, i);\n              }}\n              key={id}\n              as={href ? Link : undefined}\n              tabIndex={selected ? undefined : -1}\n              aria-label={name}\n              type={type}\n              disabled={disabled}\n            />\n          );\n        })}\n      </Flex>\n    );\n  }\n);\n\nexport default Tabs;\n"]}
+{"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FunctionComponent,\n  MouseEvent,\n  KeyboardEvent,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useRef\n} from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport Link from '../Link';\nimport Count from '../Badges/Count';\nimport { ForwardProps } from '../../types';\n\nimport Tab from './Tab';\nimport { TabsProps } from './Tabs.types';\n\ntype TabItem = TabsProps['tabs'][number];\n\nexport const StyledTabs = styled.div<Partial<TabsProps>>(\n  ({ type, theme }) => css`\n    position: relative;\n    overflow: ${type === 'horizontal' ? 'auto' : 'visible'};\n    ${type === 'horizontal' &&\n    css`\n      border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n      height: max-content;\n    `}\n  `\n);\n\nStyledTabs.defaultProps = defaultThemeProp;\n\n/**\n * The tabs component will take a list of tab data objects and render out a list of tabs in either vertical or horizontal direction.\n * The tabs component handles which tab is active but will give you a callback function that allows you to make changes when a new tab is activated\n */\nconst Tabs: FunctionComponent<TabsProps & ForwardProps> = forwardRef(\n  (\n    {\n      tabs = [],\n      type = 'horizontal',\n      currentTabId,\n      onTabClick,\n      inverted = false,\n      ...restProps\n    }: PropsWithoutRef<TabsProps>,\n    ref: Ref<HTMLElement>\n  ) => {\n    // Used to keep a reference for every tab in order to focus them with key presses\n    const tabRefs = useRef<(HTMLButtonElement | HTMLAnchorElement)[]>([]);\n\n    // Handles arrow keypresses for changing the focus\n    const changeTabFocus = (event: KeyboardEvent, index: number): void => {\n      if (tabRefs.current?.length) {\n        const { key } = event;\n        if (key === 'ArrowRight' || key === 'ArrowDown') {\n          const nextIndex = index + 1 < tabs.length ? index + 1 : 0;\n          const nextTab = tabRefs.current[nextIndex] as HTMLButtonElement;\n\n          if (!nextTab?.disabled) {\n            nextTab?.focus();\n          } else {\n            changeTabFocus(event, nextIndex);\n          }\n        } else if (key === 'ArrowLeft' || key === 'ArrowUp') {\n          const prevIndex = index === 0 ? tabs.length - 1 : index - 1;\n          const prevTab = tabRefs.current[prevIndex] as HTMLButtonElement;\n          if (!prevTab?.disabled) {\n            prevTab?.focus();\n          } else {\n            changeTabFocus(event, prevIndex);\n          }\n        }\n      }\n    };\n\n    let badgeVariant: 'inverted' | 'default';\n    if (inverted) {\n      badgeVariant = 'inverted';\n    } else {\n      badgeVariant = 'default';\n    }\n\n    return (\n      <Flex\n        {...restProps}\n        container={{\n          direction: type !== 'horizontal' ? 'column' : undefined\n        }}\n        item={{ shrink: 0 }}\n        as={StyledTabs}\n        ref={ref}\n        type={type}\n        role='tablist'\n        aria-orientation={type}\n      >\n        {tabs.map((tab: TabItem, i) => {\n          const { href, name, count, id, disabled } = tab;\n          const selected = id === currentTabId;\n\n          return (\n            <Tab\n              id={id}\n              aria-selected={selected}\n              aria-controls={`${id}-panel`}\n              content={name}\n              count={typeof count === 'number' && <Count variant={badgeVariant}>{count}</Count>}\n              href={href}\n              inverted={inverted || false}\n              selected={selected}\n              onClick={(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n                onTabClick?.(id, event);\n              }}\n              role='tab'\n              ref={(el: HTMLButtonElement | HTMLAnchorElement) => {\n                tabRefs.current[i] = el;\n              }}\n              onKeyDown={(e: KeyboardEvent) => {\n                if (['ArrowRight', 'ArrowDown', 'ArrowLeft', 'ArrowUp'].includes(e.key)) {\n                  e.preventDefault();\n                }\n              }}\n              onKeyUp={(e: KeyboardEvent<any>) => {\n                changeTabFocus(e, i);\n              }}\n              key={id}\n              as={href ? Link : undefined}\n              tabIndex={selected ? undefined : -1}\n              aria-label={name}\n              type={type}\n              disabled={disabled}\n            />\n          );\n        })}\n      </Flex>\n    );\n  }\n);\n\nexport default Tabs;\n"]}

package/lib/components/Text/Text.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { rgba as polishedRgba } from 'polished';
+import { rgba } from 'polished';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
 import { calculateFontSize } from '../../styles';
@@ -16,7 +16,7 @@ export const StyledText = styled.span(props => {
         }[status];
     }
     if (variant === 'secondary') {
-        color = tryCatch(() => polishedRgba(color ?? foregroundColor, secondaryAlpha));
+        color = tryCatch(() => rgba(color ?? foregroundColor, secondaryAlpha));
     }
     const fontSizes = calculateFontSize(fontSize, fontScale);
     return css `
@@ -30,7 +30,7 @@ const Text = forwardRef(({ variant = 'primary', as, ...restProps }, ref) => {
     // If variant is for a heading, and no as is passed, set as to heading tag.
     if (!as && /h\d/i.test(variant))
         as = variant;
-    return _jsx(StyledText, { ref: ref, variant: variant, as: as, ...restProps }, void 0);
+    return _jsx(StyledText, { ref: ref, variant: variant, as: as, ...restProps });
 });
 export default Text;
 //# sourceMappingURL=Text.js.map

package/lib/components/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,UAAU,EAAwB,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,IAAI,YAAY,EAAE,MAAM,UAAU,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAoB3D,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAwB,KAAK,CAAC,EAAE;IACnE,MAAM,EACJ,OAAO,EACP,MAAM,EACN,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,EACvF,YAAY,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,EAClD,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,GAAG,KAAK,CAAC;IAEV,IAAI,KAAyB,CAAC;IAE9B,IAAI,MAAM,EAAE;QACV,KAAK,GAAG;YACN,KAAK;YACL,OAAO;YACP,OAAO;SACR,CAAC,MAAM,CAAC,CAAC;KACX;IAED,IAAI,OAAO,KAAK,WAAW,EAAE;QAC3B,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,IAAI,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC;KAChF;IAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;iBACK,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAa,CAAC;mBAC/C,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC;aAClC,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAAgD,UAAU,CAClE,CACE,EAAE,OAAO,GAAG,SAAS,EAAE,EAAE,EAAE,GAAG,SAAS,EAA8B,EACrE,GAAqB,EACrB,EAAE;IACF,2EAA2E;IAC3E,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;QAAE,EAAE,GAAG,OAAkD,CAAC;IACzF,OAAO,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,KAAM,SAAS,WAAI,CAAC;AAC3E,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, forwardRef, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba as polishedRgba } from 'polished';\n\nimport { BaseProps, ForwardProps, AsProp, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize, FontSize } from '../../styles';\n\nexport interface TextProps extends BaseProps, AsProp {\n  /** Text content. */\n  children: ReactNode;\n  /**\n   * Typographical sizes and styles.\n   * @default \"primary\"\n   */\n  variant?: 'primary' | 'secondary' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /**\n   * Render text with semantic color based on a status.\n   */\n  status?: 'error' | 'warning' | 'success';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLSpanElement | HTMLHeadingElement>;\n}\n\ntype TextPropsWithDefaults = PropsWithDefaults<TextProps, 'variant'>;\n\nexport const StyledText = styled.span<TextPropsWithDefaults>(props => {\n  const {\n    variant,\n    status,\n    theme: {\n      base: {\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        palette: { 'foreground-color': foregroundColor, urgent: error, warn: warning, success },\n        transparency: { 'transparent-2': secondaryAlpha }\n      },\n      components: { text }\n    }\n  } = props;\n\n  let color: string | undefined;\n\n  if (status) {\n    color = {\n      error,\n      warning,\n      success\n    }[status];\n  }\n\n  if (variant === 'secondary') {\n    color = tryCatch(() => polishedRgba(color ?? foregroundColor, secondaryAlpha));\n  }\n\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${fontSizes[text[variant]['font-size'] as FontSize]};\n    font-weight: ${text[variant]['font-weight']};\n    color: ${color};\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nconst Text: FunctionComponent<TextProps & ForwardProps> = forwardRef(\n  (\n    { variant = 'primary', as, ...restProps }: PropsWithoutRef<TextProps>,\n    ref: TextProps['ref']\n  ) => {\n    // If variant is for a heading, and no as is passed, set as to heading tag.\n    if (!as && /h\\d/i.test(variant)) as = variant as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n    return <StyledText ref={ref} variant={variant} as={as} {...restProps} />;\n  }\n);\n\nexport default Text;\n"]}
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgC,UAAU,EAAwB,MAAM,OAAO,CAAC;AACvF,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAC;AAGhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAY,MAAM,cAAc,CAAC;AAoB3D,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAwB,KAAK,CAAC,EAAE;IACnE,MAAM,EACJ,OAAO,EACP,MAAM,EACN,KAAK,EAAE,EACL,IAAI,EAAE,EACJ,WAAW,EAAE,QAAQ,EACrB,YAAY,EAAE,SAAS,EACvB,OAAO,EAAE,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,EACvF,YAAY,EAAE,EAAE,eAAe,EAAE,cAAc,EAAE,EAClD,EACD,UAAU,EAAE,EAAE,IAAI,EAAE,EACrB,EACF,GAAG,KAAK,CAAC;IAEV,IAAI,KAAyB,CAAC;IAE9B,IAAI,MAAM,EAAE;QACV,KAAK,GAAG;YACN,KAAK;YACL,OAAO;YACP,OAAO;SACR,CAAC,MAAM,CAAC,CAAC;KACX;IAED,IAAI,OAAO,KAAK,WAAW,EAAE;QAC3B,KAAK,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC;KACxE;IAED,MAAM,SAAS,GAAG,iBAAiB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,GAAG,CAAA;iBACK,SAAS,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,WAAW,CAAa,CAAC;mBAC/C,IAAI,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC;aAClC,KAAK;GACf,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,IAAI,GAAgD,UAAU,CAClE,CACE,EAAE,OAAO,GAAG,SAAS,EAAE,EAAE,EAAE,GAAG,SAAS,EAA8B,EACrE,GAAqB,EACrB,EAAE;IACF,2EAA2E;IAC3E,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;QAAE,EAAE,GAAG,OAAkD,CAAC;IACzF,OAAO,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,KAAM,SAAS,GAAI,CAAC;AAC3E,CAAC,CACF,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import { FunctionComponent, ReactNode, forwardRef, Ref, PropsWithoutRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { rgba } from 'polished';\n\nimport { BaseProps, ForwardProps, AsProp, PropsWithDefaults } from '../../types';\nimport { defaultThemeProp } from '../../theme';\nimport { tryCatch } from '../../utils';\nimport { calculateFontSize, FontSize } from '../../styles';\n\nexport interface TextProps extends BaseProps, AsProp {\n  /** Text content. */\n  children: ReactNode;\n  /**\n   * Typographical sizes and styles.\n   * @default \"primary\"\n   */\n  variant?: 'primary' | 'secondary' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  /**\n   * Render text with semantic color based on a status.\n   */\n  status?: 'error' | 'warning' | 'success';\n  /** Ref for the wrapping element. */\n  ref?: Ref<HTMLSpanElement | HTMLHeadingElement>;\n}\n\ntype TextPropsWithDefaults = PropsWithDefaults<TextProps, 'variant'>;\n\nexport const StyledText = styled.span<TextPropsWithDefaults>(props => {\n  const {\n    variant,\n    status,\n    theme: {\n      base: {\n        'font-size': fontSize,\n        'font-scale': fontScale,\n        palette: { 'foreground-color': foregroundColor, urgent: error, warn: warning, success },\n        transparency: { 'transparent-2': secondaryAlpha }\n      },\n      components: { text }\n    }\n  } = props;\n\n  let color: string | undefined;\n\n  if (status) {\n    color = {\n      error,\n      warning,\n      success\n    }[status];\n  }\n\n  if (variant === 'secondary') {\n    color = tryCatch(() => rgba(color ?? foregroundColor, secondaryAlpha));\n  }\n\n  const fontSizes = calculateFontSize(fontSize, fontScale);\n\n  return css`\n    font-size: ${fontSizes[text[variant]['font-size'] as FontSize]};\n    font-weight: ${text[variant]['font-weight']};\n    color: ${color};\n  `;\n});\n\nStyledText.defaultProps = defaultThemeProp;\n\nconst Text: FunctionComponent<TextProps & ForwardProps> = forwardRef(\n  (\n    { variant = 'primary', as, ...restProps }: PropsWithoutRef<TextProps>,\n    ref: TextProps['ref']\n  ) => {\n    // If variant is for a heading, and no as is passed, set as to heading tag.\n    if (!as && /h\\d/i.test(variant)) as = variant as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n    return <StyledText ref={ref} variant={variant} as={as} {...restProps} />;\n  }\n);\n\nexport default Text;\n"]}

package/lib/components/TextArea/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAOF,kBAAkB,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAOrE,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,cAAc;IACrE,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CACpD;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CAwG9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,EAAE,EAOF,kBAAkB,EAEnB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE3D,OAAO,EAAE,gBAAgB,EAAqB,MAAM,gBAAgB,CAAC;AAOrE,MAAM,WAAW,aAAc,SAAQ,gBAAgB,EAAE,cAAc;IACrE,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,kBAAkB,CAAC,mBAAmB,CAAC,CAAC;CACpD;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,GAAG,YAAY,CA6G9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/lib/components/TextArea/TextArea.js

@@ -8,7 +8,7 @@ import Text from '../Text';
 import StyledTextArea from './TextArea.styles';
 const TextArea = forwardRef((props, ref) => {
     const uid = useUID();
-    const { id = uid, value, defaultValue, required = false, disabled = false, label, labelHidden, info, status, resizable = false, autoResize = false, maxLength, displayCharCount = false, hardStop = true, onChange: onChangeProp, ...restProps } = props;
+    const { additionalInfo, id = uid, value, defaultValue, required = false, disabled = false, label, labelHidden, info, status, resizable = false, autoResize = false, maxLength, displayCharCount = false, hardStop = true, onChange: onChangeProp, onResolveSuggestion, ...restProps } = props;
     const t = useI18n();
     const [textAreaRef, resizeTextArea] = useAutoResize(undefined, 100);
     const consolidatedRef = useConsolidatedRef(textAreaRef, ref);
@@ -44,21 +44,24 @@ const TextArea = forwardRef((props, ref) => {
             status,
             resizable,
             maxLength: hardStop ? maxLength : undefined,
+            hasSuggestion: status === 'pending' && !!onResolveSuggestion,
             ...controlProp,
             ...restProps,
             onChange,
             as: StyledTextArea
-        } }, void 0));
+        } }));
     return label || displayCharCount ? (_jsx(FormField, { ...{
+            additionalInfo,
             label,
             labelHidden,
             id,
             info,
             status,
-            charLimitDisplay: displayCharCount && typeof maxLength === 'number' ? (_jsx(Text, { variant: 'secondary', "aria-live": maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off', children: maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount }, void 0)) : undefined,
+            charLimitDisplay: displayCharCount && typeof maxLength === 'number' ? (_jsx(Text, { variant: 'secondary', "aria-live": maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off', children: maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount })) : undefined,
             required,
-            disabled
-        }, children: Comp }, void 0)) : (Comp);
+            disabled,
+            onResolveSuggestion
+        }, children: Comp })) : (Comp);
 });
 export default TextArea;
 //# sourceMappingURL=TextArea.js.map

package/lib/components/TextArea/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  ChangeEvent,\n  useCallback,\n  useState,\n  ChangeEventHandler,\n  useEffect\n} from 'react';\n\nimport { ForwardProps, NoChildrenProp } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp } from '../../utils';\nimport { useAutoResize, useConsolidatedRef, useI18n, useUID } from '../../hooks';\nimport Text from '../Text';\n\nimport StyledTextArea from './TextArea.styles';\n\nexport interface TextAreaProps extends FormControlProps, NoChildrenProp {\n  /** Minimum length of characters that can be input. */\n  minLength?: number;\n  /** Maximum length of characters that can be input. */\n  maxLength?: number;\n  /**\n   * Allows the user to resize the Text Area.\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Enables the Text Area to resize itself automatically.\n   * @default false\n   */\n  autoResize?: boolean;\n  /**\n   * Display a live character count in relation to the maxLength.\n   * @default false\n   */\n  displayCharCount?: boolean;\n  /**\n   * Allow or disallow a value beyond the maxLength.\n   * @default true\n   */\n  hardStop?: boolean;\n  onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n}\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TextAreaProps>, ref: Ref<HTMLTextAreaElement>) => {\n    const uid = useUID();\n    const {\n      id = uid,\n      value,\n      defaultValue,\n      required = false,\n      disabled = false,\n      label,\n      labelHidden,\n      info,\n      status,\n      resizable = false,\n      autoResize = false,\n      maxLength,\n      displayCharCount = false,\n      hardStop = true,\n      onChange: onChangeProp,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n    const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n    const [charCount, setCharCount] = useState(0);\n\n    const controlProp: {\n      value?: string;\n      defaultValue?: string;\n    } = {};\n\n    useEffect(() => {\n      if (hasProp(props, 'value')) {\n        setCharCount(props.value ? props.value.length : 0);\n      } else if (hasProp(props, 'defaultValue')) {\n        setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n      }\n    }, [props]);\n\n    // Conditionally render component as controlled/uncontrolled\n    if (hasProp(props, 'value')) {\n      controlProp.value = value ?? '';\n    } else if (hasProp(props, 'defaultValue')) {\n      controlProp.defaultValue = defaultValue ?? '';\n    }\n\n    const onChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {\n          onChangeProp?.(e);\n          setCharCount(e.target.value.length);\n          resizeTextArea();\n        }\n      },\n      [onChangeProp, resizeTextArea, hardStop, maxLength]\n    );\n\n    const Comp = (\n      <StyledFormControl\n        {...{\n          ref: autoResize ? consolidatedRef : ref,\n          id,\n          required,\n          disabled,\n          status,\n          resizable,\n          maxLength: hardStop ? maxLength : undefined,\n          ...controlProp,\n          ...restProps,\n          onChange,\n          as: StyledTextArea\n        }}\n      />\n    );\n\n    return label || displayCharCount ? (\n      <FormField\n        {...{\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          charLimitDisplay:\n            displayCharCount && typeof maxLength === 'number' ? (\n              <Text\n                variant='secondary'\n                aria-live={maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off'}\n              >\n                {maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount}\n              </Text>\n            ) : undefined,\n          required,\n          disabled\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default TextArea;\n"]}
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FC,\n  Ref,\n  forwardRef,\n  PropsWithoutRef,\n  ChangeEvent,\n  useCallback,\n  useState,\n  ChangeEventHandler,\n  useEffect\n} from 'react';\n\nimport { ForwardProps, NoChildrenProp } from '../../types';\nimport FormField from '../FormField';\nimport { FormControlProps, StyledFormControl } from '../FormControl';\nimport { hasProp } from '../../utils';\nimport { useAutoResize, useConsolidatedRef, useI18n, useUID } from '../../hooks';\nimport Text from '../Text';\n\nimport StyledTextArea from './TextArea.styles';\n\nexport interface TextAreaProps extends FormControlProps, NoChildrenProp {\n  /** Minimum length of characters that can be input. */\n  minLength?: number;\n  /** Maximum length of characters that can be input. */\n  maxLength?: number;\n  /**\n   * Allows the user to resize the Text Area.\n   * @default false\n   */\n  resizable?: boolean;\n  /**\n   * Enables the Text Area to resize itself automatically.\n   * @default false\n   */\n  autoResize?: boolean;\n  /**\n   * Display a live character count in relation to the maxLength.\n   * @default false\n   */\n  displayCharCount?: boolean;\n  /**\n   * Allow or disallow a value beyond the maxLength.\n   * @default true\n   */\n  hardStop?: boolean;\n  onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n}\n\nconst TextArea: FC<TextAreaProps & ForwardProps> = forwardRef(\n  (props: PropsWithoutRef<TextAreaProps>, ref: Ref<HTMLTextAreaElement>) => {\n    const uid = useUID();\n    const {\n      additionalInfo,\n      id = uid,\n      value,\n      defaultValue,\n      required = false,\n      disabled = false,\n      label,\n      labelHidden,\n      info,\n      status,\n      resizable = false,\n      autoResize = false,\n      maxLength,\n      displayCharCount = false,\n      hardStop = true,\n      onChange: onChangeProp,\n      onResolveSuggestion,\n      ...restProps\n    } = props;\n\n    const t = useI18n();\n\n    const [textAreaRef, resizeTextArea] = useAutoResize<HTMLTextAreaElement>(undefined, 100);\n    const consolidatedRef = useConsolidatedRef(textAreaRef, ref);\n    const [charCount, setCharCount] = useState(0);\n\n    const controlProp: {\n      value?: string;\n      defaultValue?: string;\n    } = {};\n\n    useEffect(() => {\n      if (hasProp(props, 'value')) {\n        setCharCount(props.value ? props.value.length : 0);\n      } else if (hasProp(props, 'defaultValue')) {\n        setCharCount(props.defaultValue ? props.defaultValue.length : 0);\n      }\n    }, [props]);\n\n    // Conditionally render component as controlled/uncontrolled\n    if (hasProp(props, 'value')) {\n      controlProp.value = value ?? '';\n    } else if (hasProp(props, 'defaultValue')) {\n      controlProp.defaultValue = defaultValue ?? '';\n    }\n\n    const onChange = useCallback(\n      (e: ChangeEvent<HTMLTextAreaElement>) => {\n        if (!hardStop || maxLength === undefined || e.target.value.length <= maxLength) {\n          onChangeProp?.(e);\n          setCharCount(e.target.value.length);\n          resizeTextArea();\n        }\n      },\n      [onChangeProp, resizeTextArea, hardStop, maxLength]\n    );\n\n    const Comp = (\n      <StyledFormControl\n        {...{\n          ref: autoResize ? consolidatedRef : ref,\n          id,\n          required,\n          disabled,\n          status,\n          resizable,\n          maxLength: hardStop ? maxLength : undefined,\n          hasSuggestion: status === 'pending' && !!onResolveSuggestion,\n          ...controlProp,\n          ...restProps,\n          onChange,\n          as: StyledTextArea\n        }}\n      />\n    );\n\n    return label || displayCharCount ? (\n      <FormField\n        {...{\n          additionalInfo,\n          label,\n          labelHidden,\n          id,\n          info,\n          status,\n          charLimitDisplay:\n            displayCharCount && typeof maxLength === 'number' ? (\n              <Text\n                variant='secondary'\n                aria-live={maxLength >= 0 && maxLength - charCount <= 20 ? 'polite' : 'off'}\n              >\n                {maxLength >= 0 ? t('x_of_y', [charCount || '0', maxLength]) : charCount}\n              </Text>\n            ) : undefined,\n          required,\n          disabled,\n          onResolveSuggestion\n        }}\n      >\n        {Comp}\n      </FormField>\n    ) : (\n      Comp\n    );\n  }\n);\n\nexport default TextArea;\n"]}

package/lib/components/Toaster/Context.d.ts

@@ -0,0 +1,7 @@
+import { ToastMessage } from './Toaster.types';
+export interface ToasterContextValue {
+    push: (message: ToastMessage) => void;
+    initialized: boolean;
+}
+export declare const ToasterContext: import("react").Context<ToasterContextValue>;
+//# sourceMappingURL=Context.d.ts.map

package/lib/components/Toaster/Context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Context.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAE/C,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACtC,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,8CAGzB,CAAC"}

package/lib/components/Toaster/Context.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+export const ToasterContext = createContext({
+    push: () => { },
+    initialized: false
+});
+//# sourceMappingURL=Context.js.map

package/lib/components/Toaster/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../src/components/Toaster/Context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAStC,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAAsB;IAC/D,IAAI,EAAE,GAAG,EAAE,GAAE,CAAC;IACd,WAAW,EAAE,KAAK;CACnB,CAAC,CAAC","sourcesContent":["import { createContext } from 'react';\n\nimport { ToastMessage } from './Toaster.types';\n\nexport interface ToasterContextValue {\n  push: (message: ToastMessage) => void;\n  initialized: boolean;\n}\n\nexport const ToasterContext = createContext<ToasterContextValue>({\n  push: () => {},\n  initialized: false\n});\n"]}

package/lib/components/Toaster/Toaster.d.ts

@@ -1,43 +1,11 @@
-import { FunctionComponent, ReactNode, Context } from 'react';
-export declare const initializedKey: unique symbol;
-export interface ToasterContextValue {
-    push: (message: ToastMessage) => void;
-    [initializedKey]: boolean;
-}
-export declare const ToasterContext: Context<ToasterContextValue>;
-export interface ToastMessage {
-    /** String to identify the specific message. Used as onDismiss callback arg. */
-    id?: string;
-    /** A short message to provide feedback based upon a user action. */
-    content: string;
-    /**
-     * Time in milliseconds to automatically dismiss toast.
-     * Can be set globally on Toaster and overridden individually at a message level.
-     * @default Infinity
-     */
-    dismissAfter?: number;
-    /** Called when user or timer dismisses toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */
-    onDismiss?: ({ id, timeout }: {
-        id: ToastState['id'];
-        timeout: boolean;
-    }) => void;
-}
-export interface ToasterProps {
-    /** The element(s) responsible for handling the Toaster state.  */
-    children: ReactNode;
-    /**
-     * Time in milliseconds to automatically dismiss Toast.
-     * Can be set globally on Toaster and overridden individually at a message level.
-     * @default Infinity
-     */
-    dismissAfter?: ToastMessage['dismissAfter'];
-    /** Called when user or timer dismisses Toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */
-    onDismiss?: ToastMessage['onDismiss'];
-    /** Context to read previous values from. */
-    context?: Context<ToasterContextValue>;
-}
-interface ToastState extends ToastMessage {
-    id: NonNullable<ToastMessage['id']>;
+import { FunctionComponent, Context } from 'react';
+import '../../init';
+import { ToasterProps } from './Toaster.types';
+import { ToasterContextValue } from './Context';
+declare module '../../init' {
+    interface CosmosGlobals {
+        toasterContext?: Context<ToasterContextValue>;
+    }
 }
 declare const Toaster: FunctionComponent<ToasterProps>;
 export default Toaster;

package/lib/components/Toaster/Toaster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,iBAAiB,EACjB,SAAS,EAGT,OAAO,EAQR,MAAM,OAAO,CAAC;AAcf,eAAO,MAAM,cAAc,eAA4D,CAAC;AAExF,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC;IACtC,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,8BAGzB,CAAC;AAEH,MAAM,WAAW,YAAY;IAC3B,+EAA+E;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oEAAoE;IACpE,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uIAAuI;IACvI,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE;QAAE,EAAE,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CACnF;AAED,MAAM,WAAW,YAAY;IAC3B,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C,uIAAuI;IACvI,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACtC,4CAA4C;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;CACxC;AAED,UAAU,UAAW,SAAQ,YAAY;IACvC,EAAE,EAAE,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;CACrC;AA+JD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CA+E5C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,iBAAiB,EAGjB,OAAO,EAQR,MAAM,OAAO,CAAC;AAWf,OAAO,YAAY,CAAC;AAEpB,OAAO,EAAgB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAkB,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAmBhE,OAAO,QAAQ,YAAY,CAAC;IAC1B,UAAiB,aAAa;QAC5B,cAAc,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;KAC/C;CACF;AAoJD,QAAA,MAAM,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAiF5C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Toaster/Toaster.js

@@ -1,21 +1,18 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createContext, useContext, useReducer, useMemo, useLayoutEffect, useRef, useState, forwardRef, useEffect } from 'react';
+import { useContext, useReducer, useMemo, useLayoutEffect, useRef, useState, forwardRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
 import Button from '../Button';
 import Icon, { registerIcon } from '../Icon';
 import * as timesIcon from '../Icon/icons/times.icon';
-import { createUID } from '../../utils';
+import { createUID, windowIsAvailable } from '../../utils';
 import { useConfiguration, useI18n } from '../../hooks';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
+import '../../init';
+import { ToasterContext } from './Context';
 registerIcon(timesIcon);
-export const initializedKey = Symbol.for('@pega/cosmos-react-core.toaster.initialized');
-export const ToasterContext = createContext({
-    push: () => { },
-    [initializedKey]: false
-});
 const StyledToastButton = styled.button(({ theme }) => css `
     border: none;
     color: inherit;
@@ -114,9 +111,9 @@ const Toast = forwardRef(({ dispatch, topLevelDismiss, dismissAfter, ...message
             '--translateY': `${-translateY}px`,
             '--opacity': dismissed ? '0' : '1',
             '--scale': dismissed ? '0' : '1'
-        }, onTransitionEnd: onTransitionEnd, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledToastContent, children: content }, void 0), _jsx(Button, { as: StyledToastButton, variant: 'simple', onClick: dismiss, icon: true, "aria-label": t('dismiss_label'), children: _jsx(Icon, { name: 'times' }, void 0) }, void 0)] }, void 0));
+        }, onTransitionEnd: onTransitionEnd, children: [_jsx(Flex, { item: { grow: 1 }, as: StyledToastContent, children: content }), _jsx(Button, { as: StyledToastButton, variant: 'simple', onClick: dismiss, icon: true, "aria-label": t('dismiss_label'), children: _jsx(Icon, { name: 'times' }) })] }));
 });
-const Toaster = ({ children, dismissAfter = Infinity, onDismiss, context = ToasterContext }) => {
+const Toaster = ({ children, dismissAfter = Infinity, onDismiss }) => {
     const { portalTarget } = useConfiguration();
     const [messages, dispatch] = useReducer(reducer, []);
     const [yOffsets, setYOffsets] = useState([]);
@@ -139,14 +136,17 @@ const Toaster = ({ children, dismissAfter = Infinity, onDismiss, context = Toast
                 payload: message
             });
         },
-        [initializedKey]: true
+        initialized: true
     }), [onDismiss, dismissAfter]);
     // Don't create additional ToasterContext.Providers.
+    const context = windowIsAvailable
+        ? window.cosmos.toasterContext ?? ToasterContext
+        : ToasterContext;
     const priorCtx = useContext(context);
-    if (priorCtx[initializedKey]) {
-        return _jsx(ToasterContext.Provider, { value: priorCtx, children: children }, void 0);
+    if (priorCtx.initialized) {
+        return _jsx(context.Provider, { value: priorCtx, children: children });
     }
-    return (_jsxs(_Fragment, { children: [_jsx(ToasterContext.Provider, { value: providerValue, children: children }, void 0), !!messages.length &&
+    return (_jsxs(_Fragment, { children: [_jsx(context.Provider, { value: providerValue, children: children }), !!messages.length &&
                 portalTarget &&
                 createPortal(_jsx(StyledToaster, { children: messages.map((message, i) => {
                         return (_createElement(Toast, { ...message, translateY: yOffsets[i] ?? 0, topLevelDismiss: onDismiss, dismissAfter: message.dismissAfter ?? dismissAfter, key: message.id, dispatch: dispatch, ref: el => {
@@ -157,7 +157,7 @@ const Toaster = ({ children, dismissAfter = Infinity, onDismiss, context = Toast
                                     delete heightHashRef.current[message.id];
                                 }
                             } }));
-                    }) }, void 0), portalTarget)] }, void 0));
+                    }) }), portalTarget)] }));
 };
 export default Toaster;
 //# sourceMappingURL=Toaster.js.map

package/lib/components/Toaster/Toaster.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  createContext,\n  useContext,\n  useReducer,\n  useMemo,\n  useLayoutEffect,\n  FunctionComponent,\n  ReactNode,\n  CSSProperties,\n  TransitionEvent,\n  Context,\n  useRef,\n  useState,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  Dispatch\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { createUID } from '../../utils';\nimport { useConfiguration, useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\n\nregisterIcon(timesIcon);\n\nexport const initializedKey = Symbol.for('@pega/cosmos-react-core.toaster.initialized');\n\nexport interface ToasterContextValue {\n  push: (message: ToastMessage) => void;\n  [initializedKey]: boolean;\n}\n\nexport const ToasterContext = createContext<ToasterContextValue>({\n  push: () => {},\n  [initializedKey]: false\n});\n\nexport interface ToastMessage {\n  /** String to identify the specific message. Used as onDismiss callback arg. */\n  id?: string;\n  /** A short message to provide feedback based upon a user action. */\n  content: string;\n  /**\n   * Time in milliseconds to automatically dismiss toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: number;\n  /** Called when user or timer dismisses toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ({ id, timeout }: { id: ToastState['id']; timeout: boolean }) => void;\n}\n\nexport interface ToasterProps {\n  /** The element(s) responsible for handling the Toaster state.  */\n  children: ReactNode;\n  /**\n   * Time in milliseconds to automatically dismiss Toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: ToastMessage['dismissAfter'];\n  /** Called when user or timer dismisses Toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ToastMessage['onDismiss'];\n  /** Context to read previous values from. */\n  context?: Context<ToasterContextValue>;\n}\n\ninterface ToastState extends ToastMessage {\n  id: NonNullable<ToastMessage['id']>;\n}\n\ntype ToastReducerAction =\n  | { type: 'push'; payload: ToastState }\n  | { type: 'unmount'; payload: ToastState['id'] };\n\ninterface ToastProps extends ToastState {\n  topLevelDismiss: ToasterProps['onDismiss'];\n  translateY: number;\n  dispatch: Dispatch<ToastReducerAction>;\n  ref: Ref<HTMLDivElement>;\n}\n\nconst StyledToastButton = styled.button(\n  ({ theme }) => css`\n    border: none;\n    color: inherit;\n    padding: 0;\n    font-size: 1rem;\n\n    &:enabled:hover {\n      background: #ffffff19;\n    }\n\n    &:enabled:focus {\n      box-shadow: ${theme.base.shadow['focus-inverted']};\n    }\n  `\n);\n\nStyledToastButton.defaultProps = defaultThemeProp;\n\nconst StyledToastContent = styled.div(({ theme }) => {\n  return css`\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: ${theme.base['font-size']};\n    margin-inline-start: calc(${theme.base['border-radius']} / 2);\n  `;\n});\n\nStyledToastContent.defaultProps = defaultThemeProp;\n\nconst StyledToast = styled.div(({ theme }) => {\n  return css`\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    padding: calc(${theme.base.spacing} / 2);\n    background: ${theme.base.colors.slate['extra-dark']};\n    color: ${theme.base.colors.white};\n    border-radius: calc(${theme.base['border-radius']} / 2);\n    opacity: var(--opacity);\n    transform: translateY(var(--translateY)) scale(var(--scale));\n    transition-property: transform, opacity;\n    transition-duration: ${theme.base.animation.speed};\n    transition-timing-function: ${theme.base.animation.timing.ease};\n  `;\n});\n\nStyledToast.defaultProps = defaultThemeProp;\n\nconst StyledToaster = styled.div`\n  position: fixed;\n  z-index: ${({ theme }) => theme.base['z-index'].toast};\n  width: min(40ch, calc(100% - 1rem));\n  inset-inline-start: 50%;\n  transform: translateX(-50%);\n  top: 100%;\n`;\n\nStyledToaster.defaultProps = defaultThemeProp;\n\nfunction reducer(current: ToastState[], action: ToastReducerAction) {\n  switch (action.type) {\n    case 'push':\n      return [\n        ...current,\n        {\n          ...action.payload\n        }\n      ];\n\n    case 'unmount':\n      return current.filter(m => m.id !== action.payload);\n\n    default:\n      return current;\n  }\n}\n\nconst Toast: FunctionComponent<ToastProps> = forwardRef(\n  (\n    { dispatch, topLevelDismiss, dismissAfter, ...message }: PropsWithoutRef<ToastProps>,\n    ref: ToastProps['ref']\n  ) => {\n    const { content, translateY } = message;\n    const [dismissed, setDismissed] = useState(false);\n    const timeoutRef = useRef(NaN);\n    const t = useI18n();\n\n    const onTransitionEnd = (e: TransitionEvent<HTMLDivElement>) => {\n      if (dismissed && e.propertyName === 'opacity' && e.target === e.currentTarget) {\n        dispatch({ type: 'unmount', payload: message.id });\n      }\n    };\n\n    const dismiss = () => {\n      clearTimeout(timeoutRef.current);\n      if (dismissed) return;\n      setDismissed(true);\n      topLevelDismiss?.({ id: message.id, timeout: false });\n    };\n\n    useEffect(() => {\n      if (Number.isFinite(dismissAfter)) {\n        timeoutRef.current = setTimeout(dismiss, dismissAfter);\n      }\n\n      return () => {\n        clearTimeout(timeoutRef.current);\n      };\n    }, []);\n\n    return (\n      <Flex\n        container={{ alignItems: 'center', gap: 0.25 }}\n        as={StyledToast}\n        ref={ref}\n        style={\n          {\n            '--translateY': `${-translateY}px`,\n            '--opacity': dismissed ? '0' : '1',\n            '--scale': dismissed ? '0' : '1'\n          } as CSSProperties\n        }\n        onTransitionEnd={onTransitionEnd}\n      >\n        <Flex item={{ grow: 1 }} as={StyledToastContent}>\n          {content}\n        </Flex>\n        <Button\n          as={StyledToastButton}\n          variant='simple'\n          onClick={dismiss}\n          icon\n          aria-label={t('dismiss_label')}\n        >\n          <Icon name='times' />\n        </Button>\n      </Flex>\n    );\n  }\n);\n\nconst Toaster: FunctionComponent<ToasterProps> = ({\n  children,\n  dismissAfter = Infinity,\n  onDismiss,\n  context = ToasterContext\n}: ToasterProps) => {\n  const { portalTarget } = useConfiguration();\n  const [messages, dispatch] = useReducer(reducer, []);\n  const [yOffsets, setYOffsets] = useState<number[]>([]);\n  const heightHashRef = useRef<{\n    [id: string]: number;\n  }>({});\n\n  // This effect will cause a re-render with a translateY value set for each toast.\n  useLayoutEffect(() => {\n    const heights = [...messages].reverse().map(({ id }) => heightHashRef.current[id]);\n\n    setYOffsets(\n      heights\n        .map((_, i) => heights.slice(0, i + 1).reduce((sum, cur) => sum + cur + 4, 0))\n        .reverse()\n    );\n  }, [messages.length]);\n\n  const providerValue = useMemo(\n    () => ({\n      push(incoming: ToastMessage) {\n        const message: ToastState = {\n          ...incoming,\n          id: incoming.id ?? createUID()\n        };\n\n        dispatch({\n          type: 'push',\n          payload: message\n        });\n      },\n      [initializedKey]: true\n    }),\n    [onDismiss, dismissAfter]\n  );\n\n  // Don't create additional ToasterContext.Providers.\n  const priorCtx = useContext(context);\n  if (priorCtx[initializedKey]) {\n    return <ToasterContext.Provider value={priorCtx}>{children}</ToasterContext.Provider>;\n  }\n\n  return (\n    <>\n      <ToasterContext.Provider value={providerValue}>{children}</ToasterContext.Provider>\n      {!!messages.length &&\n        portalTarget &&\n        createPortal(\n          <StyledToaster>\n            {messages.map((message, i) => {\n              return (\n                <Toast\n                  {...message}\n                  translateY={yOffsets[i] ?? 0}\n                  topLevelDismiss={onDismiss}\n                  dismissAfter={message.dismissAfter ?? dismissAfter}\n                  key={message.id}\n                  dispatch={dispatch}\n                  ref={el => {\n                    if (el) {\n                      heightHashRef.current[message.id] = el.offsetHeight;\n                    } else {\n                      delete heightHashRef.current[message.id];\n                    }\n                  }}\n                />\n              );\n            })}\n          </StyledToaster>,\n          portalTarget\n        )}\n    </>\n  );\n};\n\nexport default Toaster;\n"]}
+{"version":3,"file":"Toaster.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useContext,\n  useReducer,\n  useMemo,\n  useLayoutEffect,\n  FunctionComponent,\n  CSSProperties,\n  TransitionEvent,\n  Context,\n  useRef,\n  useState,\n  forwardRef,\n  PropsWithoutRef,\n  Ref,\n  useEffect,\n  Dispatch\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport styled, { css } from 'styled-components';\n\nimport Button from '../Button';\nimport Icon, { registerIcon } from '../Icon';\nimport * as timesIcon from '../Icon/icons/times.icon';\nimport { createUID, windowIsAvailable } from '../../utils';\nimport { useConfiguration, useI18n } from '../../hooks';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport '../../init';\n\nimport { ToastMessage, ToasterProps } from './Toaster.types';\nimport { ToasterContext, ToasterContextValue } from './Context';\n\nregisterIcon(timesIcon);\n\ninterface ToastState extends ToastMessage {\n  id: NonNullable<ToastMessage['id']>;\n}\n\ntype ToastReducerAction =\n  | { type: 'push'; payload: ToastState }\n  | { type: 'unmount'; payload: ToastState['id'] };\n\ninterface ToastProps extends ToastState {\n  topLevelDismiss: ToasterProps['onDismiss'];\n  translateY: number;\n  dispatch: Dispatch<ToastReducerAction>;\n  ref: Ref<HTMLDivElement>;\n}\n\ndeclare module '../../init' {\n  export interface CosmosGlobals {\n    toasterContext?: Context<ToasterContextValue>;\n  }\n}\n\nconst StyledToastButton = styled.button(\n  ({ theme }) => css`\n    border: none;\n    color: inherit;\n    padding: 0;\n    font-size: 1rem;\n\n    &:enabled:hover {\n      background: #ffffff19;\n    }\n\n    &:enabled:focus {\n      box-shadow: ${theme.base.shadow['focus-inverted']};\n    }\n  `\n);\n\nStyledToastButton.defaultProps = defaultThemeProp;\n\nconst StyledToastContent = styled.div(({ theme }) => {\n  return css`\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-size: ${theme.base['font-size']};\n    margin-inline-start: calc(${theme.base['border-radius']} / 2);\n  `;\n});\n\nStyledToastContent.defaultProps = defaultThemeProp;\n\nconst StyledToast = styled.div(({ theme }) => {\n  return css`\n    position: absolute;\n    inset-block-start: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    padding: calc(${theme.base.spacing} / 2);\n    background: ${theme.base.colors.slate['extra-dark']};\n    color: ${theme.base.colors.white};\n    border-radius: calc(${theme.base['border-radius']} / 2);\n    opacity: var(--opacity);\n    transform: translateY(var(--translateY)) scale(var(--scale));\n    transition-property: transform, opacity;\n    transition-duration: ${theme.base.animation.speed};\n    transition-timing-function: ${theme.base.animation.timing.ease};\n  `;\n});\n\nStyledToast.defaultProps = defaultThemeProp;\n\nconst StyledToaster = styled.div`\n  position: fixed;\n  z-index: ${({ theme }) => theme.base['z-index'].toast};\n  width: min(40ch, calc(100% - 1rem));\n  inset-inline-start: 50%;\n  transform: translateX(-50%);\n  top: 100%;\n`;\n\nStyledToaster.defaultProps = defaultThemeProp;\n\nfunction reducer(current: ToastState[], action: ToastReducerAction) {\n  switch (action.type) {\n    case 'push':\n      return [\n        ...current,\n        {\n          ...action.payload\n        }\n      ];\n\n    case 'unmount':\n      return current.filter(m => m.id !== action.payload);\n\n    default:\n      return current;\n  }\n}\n\nconst Toast: FunctionComponent<ToastProps> = forwardRef(\n  (\n    { dispatch, topLevelDismiss, dismissAfter, ...message }: PropsWithoutRef<ToastProps>,\n    ref: ToastProps['ref']\n  ) => {\n    const { content, translateY } = message;\n    const [dismissed, setDismissed] = useState(false);\n    const timeoutRef = useRef(NaN);\n    const t = useI18n();\n\n    const onTransitionEnd = (e: TransitionEvent<HTMLDivElement>) => {\n      if (dismissed && e.propertyName === 'opacity' && e.target === e.currentTarget) {\n        dispatch({ type: 'unmount', payload: message.id });\n      }\n    };\n\n    const dismiss = () => {\n      clearTimeout(timeoutRef.current);\n      if (dismissed) return;\n      setDismissed(true);\n      topLevelDismiss?.({ id: message.id, timeout: false });\n    };\n\n    useEffect(() => {\n      if (Number.isFinite(dismissAfter)) {\n        timeoutRef.current = setTimeout(dismiss, dismissAfter);\n      }\n\n      return () => {\n        clearTimeout(timeoutRef.current);\n      };\n    }, []);\n\n    return (\n      <Flex\n        container={{ alignItems: 'center', gap: 0.25 }}\n        as={StyledToast}\n        ref={ref}\n        style={\n          {\n            '--translateY': `${-translateY}px`,\n            '--opacity': dismissed ? '0' : '1',\n            '--scale': dismissed ? '0' : '1'\n          } as CSSProperties\n        }\n        onTransitionEnd={onTransitionEnd}\n      >\n        <Flex item={{ grow: 1 }} as={StyledToastContent}>\n          {content}\n        </Flex>\n        <Button\n          as={StyledToastButton}\n          variant='simple'\n          onClick={dismiss}\n          icon\n          aria-label={t('dismiss_label')}\n        >\n          <Icon name='times' />\n        </Button>\n      </Flex>\n    );\n  }\n);\n\nconst Toaster: FunctionComponent<ToasterProps> = ({\n  children,\n  dismissAfter = Infinity,\n  onDismiss\n}: ToasterProps) => {\n  const { portalTarget } = useConfiguration();\n  const [messages, dispatch] = useReducer(reducer, []);\n  const [yOffsets, setYOffsets] = useState<number[]>([]);\n  const heightHashRef = useRef<{\n    [id: string]: number;\n  }>({});\n\n  // This effect will cause a re-render with a translateY value set for each toast.\n  useLayoutEffect(() => {\n    const heights = [...messages].reverse().map(({ id }) => heightHashRef.current[id]);\n\n    setYOffsets(\n      heights\n        .map((_, i) => heights.slice(0, i + 1).reduce((sum, cur) => sum + cur + 4, 0))\n        .reverse()\n    );\n  }, [messages.length]);\n\n  const providerValue = useMemo(\n    () => ({\n      push(incoming: ToastMessage) {\n        const message: ToastState = {\n          ...incoming,\n          id: incoming.id ?? createUID()\n        };\n\n        dispatch({\n          type: 'push',\n          payload: message\n        });\n      },\n      initialized: true\n    }),\n    [onDismiss, dismissAfter]\n  );\n\n  // Don't create additional ToasterContext.Providers.\n  const context = windowIsAvailable\n    ? window.cosmos.toasterContext ?? ToasterContext\n    : ToasterContext;\n  const priorCtx = useContext(context);\n  if (priorCtx.initialized) {\n    return <context.Provider value={priorCtx}>{children}</context.Provider>;\n  }\n\n  return (\n    <>\n      <context.Provider value={providerValue}>{children}</context.Provider>\n      {!!messages.length &&\n        portalTarget &&\n        createPortal(\n          <StyledToaster>\n            {messages.map((message, i) => {\n              return (\n                <Toast\n                  {...message}\n                  translateY={yOffsets[i] ?? 0}\n                  topLevelDismiss={onDismiss}\n                  dismissAfter={message.dismissAfter ?? dismissAfter}\n                  key={message.id}\n                  dispatch={dispatch}\n                  ref={el => {\n                    if (el) {\n                      heightHashRef.current[message.id] = el.offsetHeight;\n                    } else {\n                      delete heightHashRef.current[message.id];\n                    }\n                  }}\n                />\n              );\n            })}\n          </StyledToaster>,\n          portalTarget\n        )}\n    </>\n  );\n};\n\nexport default Toaster;\n"]}

package/lib/components/Toaster/Toaster.types.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+export interface ToastMessage {
+    /** String to identify the specific message. Used as onDismiss callback arg. */
+    id?: string;
+    /** A short message to provide feedback based upon a user action. */
+    content: string;
+    /**
+     * Time in milliseconds to automatically dismiss toast.
+     * Can be set globally on Toaster and overridden individually at a message level.
+     * @default Infinity
+     */
+    dismissAfter?: number;
+    /** Called when user or timer dismisses toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */
+    onDismiss?: ({ id, timeout }: {
+        id: NonNullable<ToastMessage['id']>;
+        timeout: boolean;
+    }) => void;
+}
+export interface ToasterProps {
+    /** The element(s) responsible for handling the Toaster state.  */
+    children: ReactNode;
+    /**
+     * Time in milliseconds to automatically dismiss Toast.
+     * Can be set globally on Toaster and overridden individually at a message level.
+     * @default Infinity
+     */
+    dismissAfter?: ToastMessage['dismissAfter'];
+    /** Called when user or timer dismisses Toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */
+    onDismiss?: ToastMessage['onDismiss'];
+}
+//# sourceMappingURL=Toaster.types.d.ts.map

package/lib/components/Toaster/Toaster.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.types.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,YAAY;IAC3B,+EAA+E;IAC/E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oEAAoE;IACpE,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,uIAAuI;IACvI,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE;QAAE,EAAE,EAAE,WAAW,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;QAAC,OAAO,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;CAClG;AAED,MAAM,WAAW,YAAY;IAC3B,kEAAkE;IAClE,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAC;IAC5C,uIAAuI;IACvI,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACvC"}

package/lib/components/Toaster/Toaster.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Toaster.types.js.map

package/lib/components/Toaster/Toaster.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.types.js","sourceRoot":"","sources":["../../../src/components/Toaster/Toaster.types.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactNode } from 'react';\n\nexport interface ToastMessage {\n  /** String to identify the specific message. Used as onDismiss callback arg. */\n  id?: string;\n  /** A short message to provide feedback based upon a user action. */\n  content: string;\n  /**\n   * Time in milliseconds to automatically dismiss toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: number;\n  /** Called when user or timer dismisses toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ({ id, timeout }: { id: NonNullable<ToastMessage['id']>; timeout: boolean }) => void;\n}\n\nexport interface ToasterProps {\n  /** The element(s) responsible for handling the Toaster state.  */\n  children: ReactNode;\n  /**\n   * Time in milliseconds to automatically dismiss Toast.\n   * Can be set globally on Toaster and overridden individually at a message level.\n   * @default Infinity\n   */\n  dismissAfter?: ToastMessage['dismissAfter'];\n  /** Called when user or timer dismisses Toasts. Callback is passed the message id and boolean indicating if the dismissal was timed. */\n  onDismiss?: ToastMessage['onDismiss'];\n}\n"]}

package/lib/components/Toaster/index.d.ts

@@ -1,4 +1,3 @@
 export { default } from './Toaster';
-export { ToasterProps } from './Toaster';
-export { ToasterContext } from './Toaster';
+export { ToasterProps } from './Toaster.types';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Toaster/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toaster/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/lib/components/Toaster/index.js

@@ -1,3 +1,2 @@
 export { default } from './Toaster';
-export { ToasterContext } from './Toaster';
 //# sourceMappingURL=index.js.map

package/lib/components/Toaster/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Toaster/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Toaster';\nexport { ToasterProps } from './Toaster';\nexport { ToasterContext } from './Toaster';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Toaster/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC","sourcesContent":["export { default } from './Toaster';\nexport { ToasterProps } from './Toaster.types';\n"]}