@laerdal/life-react-components 2.2.1-dev.9 → 2.3.0

package/dist/Tabs/TabLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabLink.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","useState","StyledTabLink","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","OptionalLineWrapper","Wrapper","TabLink","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","testId","showNotificationDot","size","Small","variant","ref","useRef","activeState","setActiveState","toString","isActive","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport { useLocation } from 'react-router';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n} & NavLinkProps;\n\ntype StyledTabLinkProps = {\n  disabled?: boolean;\n};\n\nconst StyledTabLink = styled(NavLink)<StyledTabLinkProps>`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  font-size: 16px;\n  line-height: 120%;\n  color: ${COLORS.neutral_600};\n\n  background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  border-left: 1px solid transparent;\n  text-decoration: none;\n  position: relative;\n  border-radius: 2px;\n\n  &:not(:last-child) {\n    margin-bottom: 4px;\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &.active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.neutral_20};\n  }\n\n  &.active:hover {\n    background-color: ${COLORS.primary_20};\n  }\n\n  &:hover {\n    z-index: ${Z_INDEXES.hover};\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_600};\n  }\n\n  &:active {\n    z-index: ${Z_INDEXES.active};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n  }\n\n  &.active {\n    &::after {\n      position: absolute;\n      content: ' ';\n      width: 4px;\n      top: 0;\n      bottom: 0;\n      left: -1px;\n      background-color: ${COLORS.primary_500};\n\n      border-radius: 2px;\n    }\n  }\n\n  &.active:hover {\n    &::after {\n      background-color: ${COLORS.primary_600};\n    }\n  }\n\n  &.active:active {\n    background-color: ${COLORS.primary_100};\n\n    &::after {\n      background-color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    background-color: ${COLORS.white};\n    color: ${COLORS.neutral_300};\n\n    span {\n      color: ${COLORS.neutral_300};\n    }\n\n    &::after {\n      background-color: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n\nconst Wrapper = styled.div`\n  &.disabled {\n    cursor: not-allowed;\n\n    ${StyledTabLink} {\n      pointer-events: none;\n    }\n  }\n`;\n\nconst TabLink = ({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  variant = 'critical',\n}: TabLinkProps) => {\n  const ref = React.useRef<any>(null);\n  const [activeState, setActiveState] = useState<boolean>(false);\n  return (\n    <Wrapper className={disabled ? 'disabled' : ''}>\n      <StyledTabLink\n        to={to.toString()}\n        disabled={disabled}\n        className={({ isActive }) => {\n          if(isActive != activeState)\n            setActiveState(isActive);\n          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        tabIndex={disabled ? -1 : 0}\n        role=\"tab\"\n        aria-selected={activeState}\n        onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n        ref={ref}\n        data-testid={testId}>\n        <TextContainer>\n          <TopWrapper>\n            <span>{requiredLine}</span>\n          </TopWrapper>\n          {optionalLine && OptionalLineIcon ? (\n            <OptionalLineWrapperWithIcon>\n              {OptionalLineIcon}\n              {!!optionalLine && <span>{optionalLine}</span>}\n            </OptionalLineWrapperWithIcon>\n          ) : optionalLine ? (\n            <OptionalLineWrapper>\n              <span>{optionalLine}</span>\n            </OptionalLineWrapper>\n          ) : (\n            <></>\n          )}\n        </TextContainer>\n        <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n      </StyledTabLink>\n    </Wrapper>\n  );\n};\n\nexport default TabLink;\n"],"mappings":"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"}
+{"version":3,"file":"TabLink.js","names":["React","NavLink","styled","NotificationDot","Size","COLORS","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","useState","OptionalLineWrapperWithIcon","div","TopWrapper","TextContainer","StyledNotification","EndLineIcon","OptionalLineWrapper","Wrapper","neutral_600","props","disabled","neutral_100","active","neutral_20","primary_20","hover","primary_600","primary_100","primary_800","primary_500","white","neutral_300","TabLink","forwardRef","ref","to","requiredLine","optionalLine","OptionalLineIcon","onLinkClick","forceDeactivate","testId","showNotificationDot","size","Small","endLineIcon","onActiveStateChanged","variant","children","containerOnMouseEnter","containerOnMouseLeave","className","rest","activeState","setActiveState","toString","isActive","e"],"sources":["../../src/Tabs/TabLink.tsx"],"sourcesContent":["import * as React from 'react';\nimport { NavLink, NavLinkProps } from 'react-router-dom';\nimport { useLocation } from 'react-router';\nimport styled from 'styled-components';\nimport { NotificationDot } from '../NotificationDot';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\nimport { COLORS, focusStyles } from '../styles';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { defaultOnMouseDownHandler } from '../common';\nimport { useState } from 'react';\n\ntype TabLinkProps = {\n  disabled?: boolean;\n  forceDeactivate?: boolean;\n  requiredLine: string;\n  optionalLine?: string;\n  OptionalLineIcon?: React.ReactNode; //React.FunctionComponent<BaseProps>;\n  endLineIcon?: React.ReactNode;\n  onLinkClick?: (e: React.MouseEvent) => void;\n  testId?: string;\n  onActiveStateChanged?: (state: boolean) => void;\n  showNotificationDot?: boolean;\n  size?: Size.Small | Size.Medium | Size.Large;\n  variant?: 'positive' | 'critical';\n  containerOnMouseEnter?: React.MouseEventHandler<HTMLDivElement>;\n  containerOnMouseLeave?: React.MouseEventHandler<HTMLDivElement>;\n} & NavLinkProps;\n\nconst OptionalLineWrapperWithIcon = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span {\n    margin: 0 0 0 4px !important;\n    font-size: 12px;\n    line-height: 16px;\n  }\n`;\n\nconst TopWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n\n  span:not(:only-child) {\n    width: calc(100% - 32px);\n  }\n`;\n\nconst TextContainer = styled.div`\n  width: 100%;\n  margin: auto 0 auto 16px !important;\n`;\n\nconst StyledNotification = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst EndLineIcon = styled.div`\n  margin: 0 15px 0 0 !important;\n`;\n\nconst OptionalLineWrapper = styled.div`\n  font-size: 12px;\n`;\n//replaced styledTabLink because 'className' and 'styled' functions for some reason were not being executed\nconst Wrapper = styled.div<{disabled: boolean}>`\n  position: relative;\n  &.disabled {\n    cursor: not-allowed;\n\n    a {\n      pointer-events: none;\n    }\n  }\n\n  a {\n    \n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  \n    font-size: 16px;\n    line-height: 120%;\n    color: ${COLORS.neutral_600};\n  \n    background-color: ${(props) => (props.disabled ? COLORS.neutral_100 : 'transparent')};\n    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n    border-left: 1px solid transparent;\n    text-decoration: none;\n    position: relative;\n    border-radius: 2px;\n  \n    &:not(:last-child) {\n      margin-bottom: 4px;\n    }\n  \n    &:focus {\n      ${focusStyles}\n    }\n  \n    &.active {\n      z-index: ${Z_INDEXES.active};\n      background-color: ${COLORS.neutral_20};\n    }\n  \n    &.active:hover, &.active.dropdown-hover {\n      background-color: ${COLORS.primary_20};\n    }\n  \n    &:hover, &.dropdown-hover {\n      z-index: ${Z_INDEXES.hover};\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_600};\n    }\n  \n    &:active {\n      z-index: ${Z_INDEXES.active};\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  \n    &.active {\n      &::after {\n        position: absolute;\n        content: ' ';\n        width: 4px;\n        top: 6px;\n        bottom: 6px;\n        left: 3px;\n        background-color: ${COLORS.primary_500};\n  \n        border-radius: 4px;\n      }\n    }\n  \n    &.active:hover, &.active.dropdown-hover {\n      &::after {\n        background-color: ${COLORS.primary_600};\n      }\n    }\n  \n    &.active:active {\n      background-color: ${COLORS.primary_100};\n  \n      &::after {\n        background-color: ${COLORS.primary_800};\n      }\n    }\n  \n    &.disabled {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_300};\n  \n      span {\n        color: ${COLORS.neutral_300};\n      }\n  \n      &::after {\n        background-color: ${COLORS.neutral_300};\n      }\n    }\n  }\n`;\n\nconst TabLink = React.forwardRef<HTMLAnchorElement, TabLinkProps>(({\n  to,\n  disabled = false,\n  requiredLine,\n  optionalLine,\n  OptionalLineIcon,\n  onLinkClick,\n  forceDeactivate,\n  testId,\n  showNotificationDot = false,\n  size = Size.Small,\n  endLineIcon,\n  onActiveStateChanged,\n  variant = 'critical',\n  children,\n  containerOnMouseEnter,\n  containerOnMouseLeave,\n  className,\n  ...rest\n}: TabLinkProps, ref) => {\n  \n  const [activeState, setActiveState] = useState<boolean>(false);\n\n  return (\n    <Wrapper disabled={disabled} className={disabled ? 'disabled' : ''} onMouseEnter={containerOnMouseEnter} onMouseLeave={containerOnMouseLeave}>\n      <NavLink\n        to={forceDeactivate ? 'invalid' : to.toString()}\n        //disabled={disabled}\n        className={({ isActive }) => {\n          onActiveStateChanged && onActiveStateChanged(activeState);\n          if(forceDeactivate)\n            {\n              if(disabled) \n                return 'disabled';\n              else \n                return '';\n            }\n\n          if(isActive != activeState)\n            setActiveState(isActive);\n\n          return (isActive ? 'active ' : '') + (disabled ? 'disabled' : '');\n        }}\n        onMouseDown={defaultOnMouseDownHandler}\n        tabIndex={disabled ? -1 : 0}\n        role=\"tab\"\n        aria-selected={activeState}\n        onClick={(e: React.MouseEvent) => !disabled && onLinkClick && onLinkClick(e)}\n        ref={ref}\n        data-testid={testId}\n        {...rest}>\n        <TextContainer>\n          <TopWrapper>\n            <span>{requiredLine}</span>\n          </TopWrapper>\n          {optionalLine && OptionalLineIcon ? (\n            <OptionalLineWrapperWithIcon>\n              {OptionalLineIcon}\n              {!!optionalLine && <span>{optionalLine}</span>}\n            </OptionalLineWrapperWithIcon>\n          ) : optionalLine ? (\n            <OptionalLineWrapper>\n              <span>{optionalLine}</span>\n            </OptionalLineWrapper>\n          ) : (\n            <></>\n          )}\n        </TextContainer>\n        <StyledNotification>{showNotificationDot && <NotificationDot testId=\"NotificationDot\" size={size} variant={variant} />}</StyledNotification>\n        {endLineIcon && <EndLineIcon>{endLineIcon}</EndLineIcon>}\n      </NavLink>\n      {children}\n    </Wrapper>\n  );\n});\n\nexport default TabLink;\n"],"mappings":"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"}

package/dist/Tabs/VerticalTabs.cjs

@@ -24,6 +24,7 @@ var VerticalTabs = function VerticalTabs(_ref) {
         to: entry.to,
         requiredLine: entry.requiredLine,
         optionalLine: entry.optionalLine,
+        endLineIcon: entry.endLineIcon,
         OptionalLineIcon: entry.optionalLineIcon,
         disabled: entry.disabled,
         showNotificationDot: entry.showNotificationDot,
@@ -43,6 +44,7 @@ VerticalTabs.propTypes = {
     requiredLine: _propTypes.default.string.isRequired,
     optionalLine: _propTypes.default.string,
     optionalLineIcon: _propTypes.default.node,
+    endLineIcon: _propTypes.default.node,
     to: _propTypes.default.string.isRequired,
     disabled: _propTypes.default.bool,
     onClick: _propTypes.default.func,

package/dist/Tabs/VerticalTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.cjs","names":["VerticalTabs","size","entries","Size","Large","map","entry","to","requiredLine","optionalLine","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.ReactNode;\n  to: string;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={(e) => {\n            if (entry.onClick) {\n              entry.onClick(e);\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAEA;AAAgC;AAAA;AAAA;AAiBhC,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,qBAAC,aAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIE,WAAI,CAACC,KAAM;IAAA,UAC5BF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,qBAAC,gBAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,gBAAgB,EAAEH,KAAK,CAACI,gBAAiB;QACzC,QAAQ,EAAEJ,KAAK,CAACK,QAAS;QACzB,mBAAmB,EAAEL,KAAK,CAACM,mBAAoB;QAC/C,IAAI,EAAEX,IAAK;QACX,OAAO,EAAEK,KAAK,CAACO,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIR,KAAK,CAACS,OAAO,EAAE;YACjBT,KAAK,CAACS,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAbGR,KAAK,CAACC,EAAE,CAaT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EAzBAL,OAAO;IAXPM,YAAY;IACZC,YAAY;IACZC,gBAAgB;IAChBH,EAAE;IACFI,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,4BAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AAAA,eA+BpBb,YAAY;AAAA"}
+{"version":3,"file":"VerticalTabs.cjs","names":["VerticalTabs","size","entries","Size","Large","map","entry","to","requiredLine","optionalLine","endLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.ReactNode;\n  endLineIcon?: React.ReactNode;\n  to: string;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          endLineIcon={entry.endLineIcon}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={(e) => {\n            if (entry.onClick) {\n              entry.onClick(e);\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AAEA;AAAgC;AAAA;AAAA;AAkBhC,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,qBAAC,aAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIE,WAAI,CAACC,KAAM;IAAA,UAC5BF,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEG,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,qBAAC,gBAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,WAAW,EAAEH,KAAK,CAACI,WAAY;QAC/B,gBAAgB,EAAEJ,KAAK,CAACK,gBAAiB;QACzC,QAAQ,EAAEL,KAAK,CAACM,QAAS;QACzB,mBAAmB,EAAEN,KAAK,CAACO,mBAAoB;QAC/C,IAAI,EAAEZ,IAAK;QACX,OAAO,EAAEK,KAAK,CAACQ,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIT,KAAK,CAACU,OAAO,EAAE;YACjBV,KAAK,CAACU,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAdGT,KAAK,CAACC,EAAE,CAcT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EA1BAL,OAAO;IAZPM,YAAY;IACZC,YAAY;IACZE,gBAAgB;IAChBD,WAAW;IACXH,EAAE;IACFK,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,4BAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AAAA,eAgCpBd,YAAY;AAAA"}

package/dist/Tabs/VerticalTabs.d.ts

@@ -4,6 +4,7 @@ export interface VerticalTabEntry {
     requiredLine: string;
     optionalLine?: string;
     optionalLineIcon?: React.ReactNode;
+    endLineIcon?: React.ReactNode;
     to: string;
     disabled?: boolean;
     onClick?: (e: React.MouseEvent) => void;

package/dist/Tabs/VerticalTabs.js

@@ -14,6 +14,7 @@ var VerticalTabs = function VerticalTabs(_ref) {
         to: entry.to,
         requiredLine: entry.requiredLine,
         optionalLine: entry.optionalLine,
+        endLineIcon: entry.endLineIcon,
         OptionalLineIcon: entry.optionalLineIcon,
         disabled: entry.disabled,
         showNotificationDot: entry.showNotificationDot,
@@ -33,6 +34,7 @@ VerticalTabs.propTypes = {
     requiredLine: _pt.string.isRequired,
     optionalLine: _pt.string,
     optionalLineIcon: _pt.node,
+    endLineIcon: _pt.node,
     to: _pt.string.isRequired,
     disabled: _pt.bool,
     onClick: _pt.func,

package/dist/Tabs/VerticalTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalTabs.js","names":["React","Tabs","TabLink","Size","VerticalTabs","size","entries","Large","map","entry","to","requiredLine","optionalLine","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.ReactNode;\n  to: string;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={(e) => {\n            if (entry.onClick) {\n              entry.onClick(e);\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,OAAO,MAAM,WAAW;AAE/B,SAASC,IAAI,QAAQ,UAAU;AAAC;AAiBhC,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,KAAC,IAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIF,IAAI,CAACI,KAAM;IAAA,UAC5BD,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,KAAC,OAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,gBAAgB,EAAEH,KAAK,CAACI,gBAAiB;QACzC,QAAQ,EAAEJ,KAAK,CAACK,QAAS;QACzB,mBAAmB,EAAEL,KAAK,CAACM,mBAAoB;QAC/C,IAAI,EAAEV,IAAK;QACX,OAAO,EAAEI,KAAK,CAACO,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIR,KAAK,CAACS,OAAO,EAAE;YACjBT,KAAK,CAACS,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAbGR,KAAK,CAACC,EAAE,CAaT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EAzBAJ,OAAO;IAXPK,YAAY;IACZC,YAAY;IACZC,gBAAgB;IAChBH,EAAE;IACFI,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,aAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AA+BnC,eAAeZ,YAAY"}
+{"version":3,"file":"VerticalTabs.js","names":["React","Tabs","TabLink","Size","VerticalTabs","size","entries","Large","map","entry","to","requiredLine","optionalLine","endLineIcon","optionalLineIcon","disabled","showNotificationDot","variant","e","onClick"],"sources":["../../src/Tabs/VerticalTabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport Tabs from './Tabs';\nimport TabLink from './TabLink';\nimport { BaseProps } from '../icons';\nimport { Size } from '../types';\n\nexport interface VerticalTabEntry {\n  requiredLine: string;\n  optionalLine?: string;\n  optionalLineIcon?: React.ReactNode;\n  endLineIcon?: React.ReactNode;\n  to: string;\n  disabled?: boolean;\n  onClick?: (e: React.MouseEvent) => void;\n  showNotificationDot?: boolean;\n  variant?: 'critical' | 'positive';\n}\ninterface VerticalTabsProps {\n  size?: Size.Small | Size.Medium | Size.Large;\n  entries: VerticalTabEntry[];\n}\n\nconst VerticalTabs = ({ size, entries }: VerticalTabsProps) => {\n  return (\n    <Tabs size={size ?? Size.Large}>\n      {entries?.map((entry: VerticalTabEntry) => (\n        <TabLink\n          key={entry.to}\n          to={entry.to}\n          requiredLine={entry.requiredLine}\n          optionalLine={entry.optionalLine}\n          endLineIcon={entry.endLineIcon}\n          OptionalLineIcon={entry.optionalLineIcon}\n          disabled={entry.disabled}\n          showNotificationDot={entry.showNotificationDot}\n          size={size}\n          variant={entry.variant}\n          onLinkClick={(e) => {\n            if (entry.onClick) {\n              entry.onClick(e);\n            }\n          }}/>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default VerticalTabs;\n"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,IAAI,MAAM,QAAQ;AACzB,OAAOC,OAAO,MAAM,WAAW;AAE/B,SAASC,IAAI,QAAQ,UAAU;AAAC;AAkBhC,IAAMC,YAAY,GAAG,SAAfA,YAAY,OAA6C;EAAA,IAAvCC,IAAI,QAAJA,IAAI;IAAEC,OAAO,QAAPA,OAAO;EACnC,oBACE,KAAC,IAAI;IAAC,IAAI,EAAED,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIF,IAAI,CAACI,KAAM;IAAA,UAC5BD,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEE,GAAG,CAAC,UAACC,KAAuB;MAAA,oBACpC,KAAC,OAAO;QAEN,EAAE,EAAEA,KAAK,CAACC,EAAG;QACb,YAAY,EAAED,KAAK,CAACE,YAAa;QACjC,YAAY,EAAEF,KAAK,CAACG,YAAa;QACjC,WAAW,EAAEH,KAAK,CAACI,WAAY;QAC/B,gBAAgB,EAAEJ,KAAK,CAACK,gBAAiB;QACzC,QAAQ,EAAEL,KAAK,CAACM,QAAS;QACzB,mBAAmB,EAAEN,KAAK,CAACO,mBAAoB;QAC/C,IAAI,EAAEX,IAAK;QACX,OAAO,EAAEI,KAAK,CAACQ,OAAQ;QACvB,WAAW,EAAE,qBAACC,CAAC,EAAK;UAClB,IAAIT,KAAK,CAACU,OAAO,EAAE;YACjBV,KAAK,CAACU,OAAO,CAACD,CAAC,CAAC;UAClB;QACF;MAAE,GAdGT,KAAK,CAACC,EAAE,CAcT;IAAA,CACP;EAAC,EACG;AAEX,CAAC;AAAC;EA1BAJ,OAAO;IAZPK,YAAY;IACZC,YAAY;IACZE,gBAAgB;IAChBD,WAAW;IACXH,EAAE;IACFK,QAAQ;IACRI,OAAO;IACPH,mBAAmB;IACnBC,OAAO,aAAG,UAAU,EAAG,UAAU;EAAA;AAAA;AAgCnC,eAAeb,YAAY"}

package/dist/Toggles/ToggleSwitch.cjs

@@ -8,20 +8,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var React = _interopRequireWildcard(require("react"));
 var _TogglerStyles = require("./TogglerStyles");
 var _ = require("..");
 var _common = require("../common");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"];
-var _templateObject;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var CheckmarkContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n"])));
 var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _size;
   var id = _ref.id,
@@ -63,13 +59,7 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TogglerStyles.ToggleSwitchContainer, {
       id: "switchContainer",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TogglerStyles.ToggleSwitch, {
-        className: isSemantic ? 'semantic' : '',
-        children: selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(CheckmarkContainer, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.CheckMark, {
-            size: '14px',
-            color: _.COLORS.white
-          })
-        })
+        className: isSemantic ? 'semantic' : ''
       })
     }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
       className: 'label',

package/dist/Toggles/ToggleSwitch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.cjs","names":["CheckmarkContainer","styled","div","ToggleSwitch","React","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useFocusVisibleRef","useImperativeHandle","current","Size","Medium","e","key","toString","toLowerCase","concat","COLORS","white"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport {ToggleSwitchProps} from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport {ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch} from './TogglerStyles';\nimport {COLORS, Size, SystemIcons} from '..';\nimport {useFocusVisibleRef} from '../common';\nimport styled from \"styled-components\";\n\nconst CheckmarkContainer =  styled.div`\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n`;\n\nconst ToggleSwitch = React.forwardRef(({\n                                         id,\n                                         disabled,\n                                         selected,\n                                         label,\n                                         isSemantic,\n                                         size,\n                                         onToggle,\n                                         className,\n                                         ...rest\n                                       }: ToggleSwitchProps, ref) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const toggle = () => {\n    // If disabled, don't do anything\n    if (disabled) return;\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n\n  const focusVisibleRef = useFocusVisibleRef([]);\n\n  React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      ref={focusVisibleRef}\n      onClick={(e) => toggle()}\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')\n        .concat(className ? ` ${className}` : '')}\n      selected={selected}\n      tabIndex={disabled ? -1 : 0}\n      {...rest}>\n      <ToggleSwitchContainer id=\"switchContainer\">\n        <Switch className={isSemantic ? 'semantic' : ''} >\n          {selected && <CheckmarkContainer><SystemIcons.CheckMark size={'14px'} color={COLORS.white}/></CheckmarkContainer>}\n        </Switch>\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n});\n\nexport default ToggleSwitch;\n"],"mappings":";;;;;;;;;;;AAGA;AAUA;AACA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEvC,IAAMA,kBAAkB,GAAIC,yBAAM,CAACC,GAAG,iOAQrC;AAED,IAAMC,YAAY,gBAAGC,KAAK,CAACC,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAG,IAAAC,0BAAkB,EAAC,EAAE,CAAC;EAE9Cd,KAAK,CAACe,mBAAmB,CAACb,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACG,OAAO;EAAA,GAAE,CAACH,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIS,MAAI,CAACC,MAAM;EAE1B,oBACE,sBAAC,2BAAY;IACX,GAAG,EAAEL,eAAgB;IACrB,OAAO,EAAE,iBAACM,CAAC;MAAA,OAAKP,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAO,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKR,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZa,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACnB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCmB,MAAM,CAACb,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,qBAAC,oCAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,qBAAC,2BAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG,EAAG;QAAA,UAC7CF,QAAQ,iBAAI,qBAAC,kBAAkB;UAAA,uBAAC,qBAAC,aAAW,CAAC,SAAS;YAAC,IAAI,EAAE,MAAO;YAAC,KAAK,EAAEmB,QAAM,CAACC;UAAM;QAAE;MAAqB;IAC1G,EACa,EACvBnB,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAAC,eAEYP,YAAY;AAAA"}
+{"version":3,"file":"ToggleSwitch.cjs","names":["ToggleSwitch","React","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useFocusVisibleRef","useImperativeHandle","current","Size","Medium","e","key","toString","toLowerCase","concat"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport {ToggleSwitchProps} from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport {ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch} from './TogglerStyles';\nimport {Size} from '..';\nimport {useFocusVisibleRef} from '../common';\n\nconst ToggleSwitch = React.forwardRef(({\n                                         id,\n                                         disabled,\n                                         selected,\n                                         label,\n                                         isSemantic,\n                                         size,\n                                         onToggle,\n                                         className,\n                                         ...rest\n                                       }: ToggleSwitchProps, ref) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const toggle = () => {\n    // If disabled, don't do anything\n    if (disabled) return;\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n\n  const focusVisibleRef = useFocusVisibleRef([]);\n\n  React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      ref={focusVisibleRef}\n      onClick={(e) => toggle()}\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')\n        .concat(className ? ` ${className}` : '')}\n      selected={selected}\n      tabIndex={disabled ? -1 : 0}\n      {...rest}>\n      <ToggleSwitchContainer id=\"switchContainer\">\n        <Switch className={isSemantic ? 'semantic' : ''} />\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n});\n\nexport default ToggleSwitch;\n"],"mappings":";;;;;;;;;;AAGA;AAUA;AACA;AACA;AAA6C;AAAA;AAAA;AAAA;AAAA;AAAA;AAE7C,IAAMA,YAAY,gBAAGC,KAAK,CAACC,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAG,IAAAC,0BAAkB,EAAC,EAAE,CAAC;EAE9Cd,KAAK,CAACe,mBAAmB,CAACb,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACG,OAAO;EAAA,GAAE,CAACH,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIS,MAAI,CAACC,MAAM;EAE1B,oBACE,sBAAC,2BAAY;IACX,GAAG,EAAEL,eAAgB;IACrB,OAAO,EAAE,iBAACM,CAAC;MAAA,OAAKP,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAO,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKR,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZa,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACnB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCmB,MAAM,CAACb,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,qBAAC,oCAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,qBAAC,2BAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG;MAAG;IAAG,EAC7B,EACvBD,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAAC,eAEYP,YAAY;AAAA"}

package/dist/Toggles/ToggleSwitch.js

@@ -1,8 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _excluded = ["id", "disabled", "selected", "label", "isSemantic", "size", "onToggle", "className"];
-var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
@@ -18,12 +16,10 @@ import * as React from 'react';
  * Import custom styles.
  */
 import { ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch } from './TogglerStyles';
-import { COLORS, Size, SystemIcons } from '..';
+import { Size } from '..';
 import { useFocusVisibleRef } from '../common';
-import styled from "styled-components";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var CheckmarkContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n"])));
 var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _size;
   var id = _ref.id,
@@ -65,13 +61,7 @@ var ToggleSwitch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: [/*#__PURE__*/_jsx(ToggleSwitchContainer, {
       id: "switchContainer",
       children: /*#__PURE__*/_jsx(Switch, {
-        className: isSemantic ? 'semantic' : '',
-        children: selected && /*#__PURE__*/_jsx(CheckmarkContainer, {
-          children: /*#__PURE__*/_jsx(SystemIcons.CheckMark, {
-            size: '14px',
-            color: COLORS.white
-          })
-        })
+        className: isSemantic ? 'semantic' : ''
       })
     }), label && /*#__PURE__*/_jsx("label", {
       className: 'label',

package/dist/Toggles/ToggleSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleSwitch.js","names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","COLORS","Size","SystemIcons","useFocusVisibleRef","styled","CheckmarkContainer","div","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useImperativeHandle","current","Medium","e","key","toString","toLowerCase","concat","white"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport {ToggleSwitchProps} from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport {ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch} from './TogglerStyles';\nimport {COLORS, Size, SystemIcons} from '..';\nimport {useFocusVisibleRef} from '../common';\nimport styled from \"styled-components\";\n\nconst CheckmarkContainer =  styled.div`\n  position: absolute;\n  width: 14px;\n  height: 14px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  left: 2px;\n`;\n\nconst ToggleSwitch = React.forwardRef(({\n                                         id,\n                                         disabled,\n                                         selected,\n                                         label,\n                                         isSemantic,\n                                         size,\n                                         onToggle,\n                                         className,\n                                         ...rest\n                                       }: ToggleSwitchProps, ref) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const toggle = () => {\n    // If disabled, don't do anything\n    if (disabled) return;\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n\n  const focusVisibleRef = useFocusVisibleRef([]);\n\n  React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      ref={focusVisibleRef}\n      onClick={(e) => toggle()}\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')\n        .concat(className ? ` ${className}` : '')}\n      selected={selected}\n      tabIndex={disabled ? -1 : 0}\n      {...rest}>\n      <ToggleSwitchContainer id=\"switchContainer\">\n        <Switch className={isSemantic ? 'semantic' : ''} >\n          {selected && <CheckmarkContainer><SystemIcons.CheckMark size={'14px'} color={COLORS.white}/></CheckmarkContainer>}\n        </Switch>\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n});\n\nexport default ToggleSwitch;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;;AAGA;AACA;AACA;AACA,SAAQC,qBAAqB,EAAEC,YAAY,IAAIC,MAAM,EAAEC,YAAY,QAAO,iBAAiB;AAC3F,SAAQC,MAAM,EAAEC,IAAI,EAAEC,WAAW,QAAO,IAAI;AAC5C,SAAQC,kBAAkB,QAAO,WAAW;AAC5C,OAAOC,MAAM,MAAM,mBAAmB;AAAC;AAAA;AAEvC,IAAMC,kBAAkB,GAAID,MAAM,CAACE,GAAG,mNAQrC;AAED,IAAMT,YAAY,gBAAGF,KAAK,CAACY,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAGhB,kBAAkB,CAAC,EAAE,CAAC;EAE9CR,KAAK,CAACyB,mBAAmB,CAACZ,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACE,OAAO;EAAA,GAAE,CAACF,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIb,IAAI,CAACqB,MAAM;EAE1B,oBACE,MAAC,YAAY;IACX,GAAG,EAAEH,eAAgB;IACrB,OAAO,EAAE,iBAACI,CAAC;MAAA,OAAKL,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAK,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKN,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZW,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACjB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCiB,MAAM,CAACX,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,KAAC,qBAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,KAAC,MAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG,EAAG;QAAA,UAC7CF,QAAQ,iBAAI,KAAC,kBAAkB;UAAA,uBAAC,KAAC,WAAW,CAAC,SAAS;YAAC,IAAI,EAAE,MAAO;YAAC,KAAK,EAAEX,MAAM,CAAC4B;UAAM;QAAE;MAAqB;IAC1G,EACa,EACvBhB,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAEF,eAAef,YAAY"}
+{"version":3,"file":"ToggleSwitch.js","names":["React","ToggleSwitchContainer","ToggleSwitch","Switch","StyledSwitch","Size","useFocusVisibleRef","forwardRef","ref","id","disabled","selected","label","isSemantic","size","onToggle","className","rest","toggle","focusVisibleRef","useImperativeHandle","current","Medium","e","key","toString","toLowerCase","concat"],"sources":["../../src/Toggles/ToggleSwitch.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom types.\n */\nimport {ToggleSwitchProps} from './TogglerTypes';\n\n/**\n * Import custom styles.\n */\nimport {ToggleSwitchContainer, ToggleSwitch as Switch, StyledSwitch} from './TogglerStyles';\nimport {Size} from '..';\nimport {useFocusVisibleRef} from '../common';\n\nconst ToggleSwitch = React.forwardRef(({\n                                         id,\n                                         disabled,\n                                         selected,\n                                         label,\n                                         isSemantic,\n                                         size,\n                                         onToggle,\n                                         className,\n                                         ...rest\n                                       }: ToggleSwitchProps, ref) => {\n  /**\n   * Does all required pre-requisites and toggles the switcher state.\n   */\n  const toggle = () => {\n    // If disabled, don't do anything\n    if (disabled) return;\n\n    // Toggle state change\n    onToggle(!selected);\n  };\n\n  const focusVisibleRef = useFocusVisibleRef([]);\n\n  React.useImperativeHandle(ref, () => focusVisibleRef.current, [focusVisibleRef]);\n\n  size = size ?? Size.Medium;\n\n  return (\n    <StyledSwitch\n      ref={focusVisibleRef}\n      onClick={(e) => toggle()}\n      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && toggle()}\n      className={size\n        .toString()\n        .toLowerCase()\n        .concat(disabled ? ' disabled' : '')\n        .concat(className ? ` ${className}` : '')}\n      selected={selected}\n      tabIndex={disabled ? -1 : 0}\n      {...rest}>\n      <ToggleSwitchContainer id=\"switchContainer\">\n        <Switch className={isSemantic ? 'semantic' : ''} />\n      </ToggleSwitchContainer>\n      {label && (\n        <label className={'label'} htmlFor={id}>\n          {label}\n        </label>\n      )}\n    </StyledSwitch>\n  );\n});\n\nexport default ToggleSwitch;\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;;AAGA;AACA;AACA;AACA,SAAQC,qBAAqB,EAAEC,YAAY,IAAIC,MAAM,EAAEC,YAAY,QAAO,iBAAiB;AAC3F,SAAQC,IAAI,QAAO,IAAI;AACvB,SAAQC,kBAAkB,QAAO,WAAW;AAAC;AAAA;AAE7C,IAAMJ,YAAY,gBAAGF,KAAK,CAACO,UAAU,CAAC,gBAUuBC,GAAG,EAAK;EAAA;EAAA,IAT5BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,UAAU,QAAVA,UAAU;IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACNC,IAAI;EAE9C;AACF;AACA;EACE,IAAMC,MAAM,GAAG,SAATA,MAAM,GAAS;IACnB;IACA,IAAIR,QAAQ,EAAE;;IAEd;IACAK,QAAQ,CAAC,CAACJ,QAAQ,CAAC;EACrB,CAAC;EAED,IAAMQ,eAAe,GAAGb,kBAAkB,CAAC,EAAE,CAAC;EAE9CN,KAAK,CAACoB,mBAAmB,CAACZ,GAAG,EAAE;IAAA,OAAMW,eAAe,CAACE,OAAO;EAAA,GAAE,CAACF,eAAe,CAAC,CAAC;EAEhFL,IAAI,YAAGA,IAAI,yCAAIT,IAAI,CAACiB,MAAM;EAE1B,oBACE,MAAC,YAAY;IACX,GAAG,EAAEH,eAAgB;IACrB,OAAO,EAAE,iBAACI,CAAC;MAAA,OAAKL,MAAM,EAAE;IAAA,CAAC;IACzB,SAAS,EAAE,mBAAAK,CAAC;MAAA,OAAI,CAACA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,KAAKN,MAAM,EAAE;IAAA,CAAC;IACjE,SAAS,EAAEJ,IAAI,CACZW,QAAQ,EAAE,CACVC,WAAW,EAAE,CACbC,MAAM,CAACjB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCiB,MAAM,CAACX,SAAS,cAAOA,SAAS,IAAK,EAAE,CAAE;IAC5C,QAAQ,EAAEL,QAAS;IACnB,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAC,GAAG;EAAE,GACxBO,IAAI;IAAA,wBACR,KAAC,qBAAqB;MAAC,EAAE,EAAC,iBAAiB;MAAA,uBACzC,KAAC,MAAM;QAAC,SAAS,EAAEJ,UAAU,GAAG,UAAU,GAAG;MAAG;IAAG,EAC7B,EACvBD,KAAK,iBACJ;MAAO,SAAS,EAAE,OAAQ;MAAC,OAAO,EAAEH,EAAG;MAAA,UACpCG;IAAK,EAET;EAAA,GACY;AAEnB,CAAC,CAAC;AAEF,eAAeV,YAAY"}

package/dist/Toggles/TogglerStyles.cjs

@@ -19,6 +19,6 @@ var StyledSwitch = _styledComponents.default.div(_templateObject || (_templateOb
 exports.StyledSwitch = StyledSwitch;
 var ToggleSwitchContainer = _styledComponents.default.label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n"])));
 exports.ToggleSwitchContainer = ToggleSwitchContainer;
-var ToggleSwitch = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ", ";\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ", ";\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ", ";\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n"])), _styles.COLORS.neutral_500, _styles.COLORS.critical_500, _styles.COLORS.white);
+var ToggleSwitch = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ", ";\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ", ";\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ", ";\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n"])), _styles.COLORS.neutral_500, _styles.COLORS.critical_500, _styles.COLORS.white);
 exports.ToggleSwitch = ToggleSwitch;
 //# sourceMappingURL=TogglerStyles.cjs.map

package/dist/Toggles/TogglerStyles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerStyles.cjs","names":["StyledSwitch","styled","div","ComponentSStyling","ComponentTextStyle","Regular","COLORS","black","ComponentMStyling","ComponentLStyling","neutral_300","primary_100","props","selected","css","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n  &.disabled {\n    color: ${COLORS.neutral_300};\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ${COLORS.primary_100};\n    }\n  }\n\n  ${(props) =>\n    props.selected\n      ? css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_200} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n          label:first-of-type span {\n            background-color: ${COLORS.primary_500};\n\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        `\n      : css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_100} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ${COLORS.critical_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n        `}\n  &:not(.disabled).focus-visible {\n    ${focusStyles}\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ${COLORS.neutral_500};\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ${COLORS.critical_500};\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ${COLORS.white};\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n`;\n"],"mappings":";;;;;;;;;AAGA;AAKA;AACA;AAAmH;AAAA;AAAA;AAE5G,IAAMA,YAAY,GAAGC,yBAAM,CAACC,GAAG,otBAShC,IAAAC,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAC,6BAAiB,EAACJ,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAE,6BAAiB,EAACL,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAGpDD,cAAM,CAACI,WAAW,EAaLJ,cAAM,CAACK,WAAW,EAIxC,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,QAAQ,OACVC,qBAAG,05BAEqBR,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACS,WAAW,EAMlBT,cAAM,CAACU,WAAW,EAIlBV,cAAM,CAACW,UAAU,EAInBX,cAAM,CAACY,WAAW,EAGhBZ,cAAM,CAACU,WAAW,QAU5CF,qBAAG,2kBAEqBR,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACa,WAAW,EAMlBb,cAAM,CAACc,YAAY,EAInBd,cAAM,CAACW,UAAU,CAG1C;AAAA,GAEHI,mBAAW,CAMhB;AAAC;AAEK,IAAMC,qBAAqB,GAAGrB,yBAAM,CAACsB,KAAK,sNAOhD;AAAC;AAEK,IAAMC,YAAY,GAAGvB,yBAAM,CAACwB,IAAI,8sBAYjBnB,cAAM,CAACoB,WAAW,EAIhBpB,cAAM,CAACc,YAAY,EAUnBd,cAAM,CAACqB,KAAK,CAMnC;AAAC"}
+{"version":3,"file":"TogglerStyles.cjs","names":["StyledSwitch","styled","div","ComponentSStyling","ComponentTextStyle","Regular","COLORS","black","ComponentMStyling","ComponentLStyling","neutral_300","primary_100","props","selected","css","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n  &.disabled {\n    color: ${COLORS.neutral_300};\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ${COLORS.primary_100};\n    }\n  }\n\n  ${(props) =>\n    props.selected\n      ? css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_200} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n          label:first-of-type span {\n            background-color: ${COLORS.primary_500};\n\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        `\n      : css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_100} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ${COLORS.critical_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n        `}\n  &:not(.disabled).focus-visible {\n    ${focusStyles}\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ${COLORS.neutral_500};\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ${COLORS.critical_500};\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ${COLORS.white};\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n`;\n"],"mappings":";;;;;;;;;AAGA;AAKA;AACA;AAAmH;AAAA;AAAA;AAE5G,IAAMA,YAAY,GAAGC,yBAAM,CAACC,GAAG,otBAShC,IAAAC,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAC,6BAAiB,EAACJ,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAI3D,IAAAE,6BAAiB,EAACL,8BAAkB,CAACC,OAAO,EAAEC,cAAM,CAACC,KAAK,CAAC,EAGpDD,cAAM,CAACI,WAAW,EAaLJ,cAAM,CAACK,WAAW,EAIxC,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,QAAQ,OACVC,qBAAG,05BAEqBR,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACS,WAAW,EAMlBT,cAAM,CAACU,WAAW,EAIlBV,cAAM,CAACW,UAAU,EAInBX,cAAM,CAACY,WAAW,EAGhBZ,cAAM,CAACU,WAAW,QAU5CF,qBAAG,2kBAEqBR,cAAM,CAACI,WAAW,EAIhBJ,cAAM,CAACa,WAAW,EAMlBb,cAAM,CAACc,YAAY,EAInBd,cAAM,CAACW,UAAU,CAG1C;AAAA,GAEHI,mBAAW,CAMhB;AAAC;AAEK,IAAMC,qBAAqB,GAAGrB,yBAAM,CAACsB,KAAK,sNAOhD;AAAC;AAEK,IAAMC,YAAY,GAAGvB,yBAAM,CAACwB,IAAI,8rBAWjBnB,cAAM,CAACoB,WAAW,EAIhBpB,cAAM,CAACc,YAAY,EAUnBd,cAAM,CAACqB,KAAK,CAMnC;AAAC"}

package/dist/Toggles/TogglerStyles.js

@@ -14,5 +14,5 @@ export var StyledSwitch = styled.div(_templateObject || (_templateObject = _tagg
   return props.selected ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          &.disabled label:first-of-type span {\n            background-color: ", " !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ", " !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              background-color: ", ";\n            }\n          }\n          label:first-of-type span {\n            background-color: ", ";\n\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        "])), COLORS.neutral_300, COLORS.neutral_200, COLORS.correct_500, COLORS.primary_20, COLORS.primary_500, COLORS.correct_500) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          &.disabled label:first-of-type span {\n            background-color: ", " !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ", " !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ", ";\n            }\n\n            &:before {\n              background-color: ", ";\n            }\n          }\n        "])), COLORS.neutral_300, COLORS.neutral_100, COLORS.critical_500, COLORS.primary_20);
 }, focusStyles);
 export var ToggleSwitchContainer = styled.label(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n"])));
-export var ToggleSwitch = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ", ";\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ", ";\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ", ";\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n"])), COLORS.neutral_500, COLORS.critical_500, COLORS.white);
+export var ToggleSwitch = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ", ";\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ", ";\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ", ";\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n"])), COLORS.neutral_500, COLORS.critical_500, COLORS.white);
 //# sourceMappingURL=TogglerStyles.js.map

package/dist/Toggles/TogglerStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","css","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","Regular","black","neutral_300","primary_100","props","selected","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n  &.disabled {\n    color: ${COLORS.neutral_300};\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ${COLORS.primary_100};\n    }\n  }\n\n  ${(props) =>\n    props.selected\n      ? css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_200} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n          label:first-of-type span {\n            background-color: ${COLORS.primary_500};\n\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        `\n      : css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_100} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ${COLORS.critical_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n        `}\n  &:not(.disabled).focus-visible {\n    ${focusStyles}\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ${COLORS.neutral_500};\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ${COLORS.critical_500};\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ${COLORS.white};\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n`;\n"],"mappings":";;AAAA;AACA;AACA;AACA,SAAQA,MAAM,EAAEC,WAAW,QAAO,WAAW;;AAE7C;AACA;AACA;AACA,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AAElH,OAAO,IAAMC,YAAY,GAAGN,MAAM,CAACO,GAAG,ssBAShCH,iBAAiB,CAACC,kBAAkB,CAACG,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAI3DN,iBAAiB,CAACE,kBAAkB,CAACG,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAI3DP,iBAAiB,CAACG,kBAAkB,CAACG,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAGpDX,MAAM,CAACY,WAAW,EAaLZ,MAAM,CAACa,WAAW,EAIxC,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,QAAQ,GACVZ,GAAG,24BAEqBH,MAAM,CAACY,WAAW,EAIhBZ,MAAM,CAACgB,WAAW,EAMlBhB,MAAM,CAACiB,WAAW,EAIlBjB,MAAM,CAACkB,UAAU,EAInBlB,MAAM,CAACmB,WAAW,EAGhBnB,MAAM,CAACiB,WAAW,IAU5Cd,GAAG,4jBAEqBH,MAAM,CAACY,WAAW,EAIhBZ,MAAM,CAACoB,WAAW,EAMlBpB,MAAM,CAACqB,YAAY,EAInBrB,MAAM,CAACkB,UAAU,CAG1C;AAAA,GAEHjB,WAAW,CAMhB;AAED,OAAO,IAAMqB,qBAAqB,GAAGpB,MAAM,CAACqB,KAAK,wMAOhD;AAED,OAAO,IAAMC,YAAY,GAAGtB,MAAM,CAACuB,IAAI,gsBAYjBzB,MAAM,CAAC0B,WAAW,EAIhB1B,MAAM,CAACqB,YAAY,EAUnBrB,MAAM,CAAC2B,KAAK,CAMnC"}
+{"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","css","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","Regular","black","neutral_300","primary_100","props","selected","neutral_200","correct_500","primary_20","primary_500","neutral_100","critical_500","ToggleSwitchContainer","label","ToggleSwitch","span","neutral_500","white"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\n * Import custom styles.\n */\nimport {COLORS, focusStyles} from '../styles';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\n\nexport const StyledSwitch = styled.div<{ selected: boolean | undefined }>`\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  min-height: 48px;\n  min-width: 48px;\n  align-items: center;\n  cursor: pointer;\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n  }\n  &.disabled {\n    color: ${COLORS.neutral_300};\n\n    .label {\n      cursor: not-allowed;\n    }\n  }\n  .label {\n    cursor: inherit;\n    margin-left: 8px;\n  }\n\n  &:not(.disabled):active label:first-of-type span {\n    &:before {\n      background-color: ${COLORS.primary_100};\n    }\n  }\n\n  ${(props) =>\n    props.selected\n      ? css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_200} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover span {\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n          label:first-of-type span {\n            background-color: ${COLORS.primary_500};\n\n            &.semantic {\n              background-color: ${COLORS.correct_500};\n            }\n\n            &:before {\n              -webkit-transform: translateX(20px);\n              -ms-transform: translateX(20px);\n              transform: translateX(20px);\n            }\n          }\n        `\n      : css`\n          &.disabled label:first-of-type span {\n            background-color: ${COLORS.neutral_300} !important;\n            cursor: not-allowed;\n\n            &:before {\n              background-color: ${COLORS.neutral_100} !important;\n              cursor: not-allowed;\n            }\n          }\n          &:hover label:first-of-type span {\n            &.semantic {\n              background-color: ${COLORS.critical_500};\n            }\n\n            &:before {\n              background-color: ${COLORS.primary_20};\n            }\n          }\n        `}\n  &:not(.disabled).focus-visible {\n    ${focusStyles}\n  }\n\n  &:not(.disabled) label:first-of-type {\n    cursor: inherit;\n  }\n`;\n\nexport const ToggleSwitchContainer = styled.label`\n  position: relative;\n  align-items: center;\n  display: inline-flex;\n  height: 28px;\n  width: auto;\n  padding: 10px 6px;\n`;\n\nexport const ToggleSwitch = styled.span`\n  position: relative;\n  display: inline-block;\n  vertical-align: middle;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  width: 36px;\n  height: 16px;\n  background-color: ${COLORS.neutral_500};\n  border-radius: 100px;\n\n  &.semantic {\n    background-color: ${COLORS.critical_500};\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 12px;\n    width: 12px;\n    left: 2px;\n    top: calc(50% - 6px);\n    background-color: ${COLORS.white};\n    -webkit-transition: background-color 0.1s, transform 0.1s;\n    transition: 0.1s;\n    transition-timing-function: ease-in-out;\n    border-radius: 50%;\n  }\n`;\n"],"mappings":";;AAAA;AACA;AACA;AACA,SAAQA,MAAM,EAAEC,WAAW,QAAO,WAAW;;AAE7C;AACA;AACA;AACA,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,sBAAsB;AAElH,OAAO,IAAMC,YAAY,GAAGN,MAAM,CAACO,GAAG,ssBAShCH,iBAAiB,CAACC,kBAAkB,CAACG,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAI3DN,iBAAiB,CAACE,kBAAkB,CAACG,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAI3DP,iBAAiB,CAACG,kBAAkB,CAACG,OAAO,EAAEV,MAAM,CAACW,KAAK,CAAC,EAGpDX,MAAM,CAACY,WAAW,EAaLZ,MAAM,CAACa,WAAW,EAIxC,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,QAAQ,GACVZ,GAAG,24BAEqBH,MAAM,CAACY,WAAW,EAIhBZ,MAAM,CAACgB,WAAW,EAMlBhB,MAAM,CAACiB,WAAW,EAIlBjB,MAAM,CAACkB,UAAU,EAInBlB,MAAM,CAACmB,WAAW,EAGhBnB,MAAM,CAACiB,WAAW,IAU5Cd,GAAG,4jBAEqBH,MAAM,CAACY,WAAW,EAIhBZ,MAAM,CAACoB,WAAW,EAMlBpB,MAAM,CAACqB,YAAY,EAInBrB,MAAM,CAACkB,UAAU,CAG1C;AAAA,GAEHjB,WAAW,CAMhB;AAED,OAAO,IAAMqB,qBAAqB,GAAGpB,MAAM,CAACqB,KAAK,wMAOhD;AAED,OAAO,IAAMC,YAAY,GAAGtB,MAAM,CAACuB,IAAI,grBAWjBzB,MAAM,CAAC0B,WAAW,EAIhB1B,MAAM,CAACqB,YAAY,EAUnBrB,MAAM,CAAC2B,KAAK,CAMnC"}

package/dist/Tooltips/TooltipOverflow.cjs

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var React = _interopRequireWildcard(require("react"));
+var _reactResizeDetector = require("react-resize-detector");
+var _TooltipStyles = require("./TooltipStyles");
+var _ = require("..");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["label", "children", "input", "withArrow", "maxWidth", "width", "value", "size", "height", "align", "position"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var TooltipOverflow = function TooltipOverflow(_ref) {
+  var label = _ref.label,
+    children = _ref.children,
+    input = _ref.input,
+    withArrow = _ref.withArrow,
+    maxWidth = _ref.maxWidth,
+    width = _ref.width,
+    value = _ref.value,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? _.Size.Small : _ref$size,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 'auto' : _ref$height,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'top' : _ref$position,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _React$useState = React.useState(false),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    textOverflowed = _React$useState2[0],
+    setTextOverflowed = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    focused = _React$useState4[0],
+    setFocused = _React$useState4[1];
+  var _useResizeDetector = (0, _reactResizeDetector.useResizeDetector)({
+      targetRef: input
+    }),
+    customW = _useResizeDetector.width,
+    customH = _useResizeDetector.height;
+  React.useEffect(function () {
+    checkIfOverflowed();
+  }, [customW, customH]);
+  var checkIfOverflowed = function checkIfOverflowed() {
+    var _ref2;
+    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1
+    var over = (_ref2 = input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) !== null && _ref2 !== void 0 ? _ref2 : false;
+    setTextOverflowed(over);
+  };
+  React.useEffect(function () {
+    checkIfOverflowed();
+  });
+  var onFocus = function onFocus() {
+    checkIfOverflowed();
+    setFocused(true);
+  };
+  var onBlur = function onBlur() {
+    setFocused(false);
+  };
+  React.useEffect(function () {
+    return function () {
+      if (input !== null && input !== void 0 && input.current) {
+        input === null || input === void 0 ? void 0 : input.current.removeEventListener("focus", onFocus);
+        input === null || input === void 0 ? void 0 : input.current.removeEventListener("blur", onBlur);
+      }
+    };
+  }, []);
+  var renderedCallback = React.useCallback(function (node) {
+    if (input && input.current) {
+      input.current.addEventListener("focus", onFocus);
+      input.current.addEventListener("blur", onBlur);
+      checkIfOverflowed();
+    }
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    ref: renderedCallback,
+    children: textOverflowed && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipStyles.Tooltip, _objectSpread(_objectSpread({
+      align: align,
+      height: height,
+      role: "tooltip",
+      maxWidth: maxWidth,
+      width: width,
+      size: size,
+      withArrow: withArrow,
+      position: position
+    }, props), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        children: [children, " "]
+      })
+    }))
+  });
+};
+TooltipOverflow.propTypes = {
+  maxWidth: _propTypes.default.string,
+  width: _propTypes.default.string,
+  value: _propTypes.default.string
+};
+var _default = TooltipOverflow;
+exports.default = _default;
+//# sourceMappingURL=TooltipOverflow.cjs.map

package/dist/Tooltips/TooltipOverflow.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipOverflow.cjs","names":["TooltipOverflow","label","children","input","withArrow","maxWidth","width","value","size","Size","Small","height","align","position","props","React","useState","textOverflowed","setTextOverflowed","focused","setFocused","useResizeDetector","targetRef","customW","customH","useEffect","checkIfOverflowed","over","current","offsetWidth","scrollWidth","onFocus","onBlur","removeEventListener","renderedCallback","useCallback","node","addEventListener"],"sources":["../../src/Tooltips/TooltipOverflow.tsx"],"sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \ninterface TooltipOverflowProps extends TooltipProps {\n    input?: React.MutableRefObject<HTMLInputElement | null>;\n    maxWidth?: string;\n    width?: string;\n    value?: string;\n}\n\n const TooltipOverflow = ({\n   label, children,\n   input,\n   withArrow,\n   maxWidth,\n   width,\n   value,\n   size = Size.Small,\n   height = 'auto',\n   align = 'center', \n   position = 'top',\n   ...props } : TooltipOverflowProps) => {\n\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<boolean>(false);\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  }, [customW, customH]);\n\n  const checkIfOverflowed = () => {\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\n    setTextOverflowed(over);\n  };\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  });\n\n  const onFocus = () => {\n    checkIfOverflowed();\n    setFocused(true);\n  };\n\n  const onBlur = () => {\n    setFocused(false);\n  };\n\n  React.useEffect(() => {\n    return () => {\n      if(input?.current)\n      {\n        input?.current.removeEventListener(\"focus\", onFocus);\n        input?.current.removeEventListener(\"blur\", onBlur);\n      }\n    }\n  }, []);\n\n  const renderedCallback = React.useCallback(node => {\n    if(input && input.current)\n    {\n      input.current.addEventListener(\"focus\", onFocus);\n      input.current.addEventListener(\"blur\", onBlur);\n      checkIfOverflowed();\n    }\n  }, []);\n \n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip align={align}\n               height={height}\n               role=\"tooltip\"\n               maxWidth={maxWidth}\n               width={width}\n               size={size}\n               withArrow={withArrow}\n               position={position}\n               {...props}>\n                <span>\n               {children} </span>\n            </Tooltip> }</div>;\n };\n \n export default TooltipOverflow;\n"],"mappings":"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"}

package/dist/Tooltips/TooltipOverflow.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { TooltipProps } from './TooltipTypes';
+interface TooltipOverflowProps extends TooltipProps {
+    input?: React.MutableRefObject<HTMLInputElement | null>;
+    maxWidth?: string;
+    width?: string;
+    value?: string;
+}
+declare const TooltipOverflow: ({ label, children, input, withArrow, maxWidth, width, value, size, height, align, position, ...props }: TooltipOverflowProps) => JSX.Element;
+export default TooltipOverflow;

package/dist/Tooltips/TooltipOverflow.js

@@ -0,0 +1,102 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _pt from "prop-types";
+var _excluded = ["label", "children", "input", "withArrow", "maxWidth", "width", "value", "size", "height", "align", "position"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import * as React from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+import { Tooltip } from './TooltipStyles';
+import { Size } from '..';
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+var TooltipOverflow = function TooltipOverflow(_ref) {
+  var label = _ref.label,
+    children = _ref.children,
+    input = _ref.input,
+    withArrow = _ref.withArrow,
+    maxWidth = _ref.maxWidth,
+    width = _ref.width,
+    value = _ref.value,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Small : _ref$size,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 'auto' : _ref$height,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'center' : _ref$align,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? 'top' : _ref$position,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    textOverflowed = _React$useState2[0],
+    setTextOverflowed = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    focused = _React$useState4[0],
+    setFocused = _React$useState4[1];
+  var _useResizeDetector = useResizeDetector({
+      targetRef: input
+    }),
+    customW = _useResizeDetector.width,
+    customH = _useResizeDetector.height;
+  React.useEffect(function () {
+    checkIfOverflowed();
+  }, [customW, customH]);
+  var checkIfOverflowed = function checkIfOverflowed() {
+    var _ref2;
+    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1
+    var over = (_ref2 = input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) !== null && _ref2 !== void 0 ? _ref2 : false;
+    setTextOverflowed(over);
+  };
+  React.useEffect(function () {
+    checkIfOverflowed();
+  });
+  var onFocus = function onFocus() {
+    checkIfOverflowed();
+    setFocused(true);
+  };
+  var onBlur = function onBlur() {
+    setFocused(false);
+  };
+  React.useEffect(function () {
+    return function () {
+      if (input !== null && input !== void 0 && input.current) {
+        input === null || input === void 0 ? void 0 : input.current.removeEventListener("focus", onFocus);
+        input === null || input === void 0 ? void 0 : input.current.removeEventListener("blur", onBlur);
+      }
+    };
+  }, []);
+  var renderedCallback = React.useCallback(function (node) {
+    if (input && input.current) {
+      input.current.addEventListener("focus", onFocus);
+      input.current.addEventListener("blur", onBlur);
+      checkIfOverflowed();
+    }
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    ref: renderedCallback,
+    children: textOverflowed && /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+      align: align,
+      height: height,
+      role: "tooltip",
+      maxWidth: maxWidth,
+      width: width,
+      size: size,
+      withArrow: withArrow,
+      position: position
+    }, props), {}, {
+      children: /*#__PURE__*/_jsxs("span", {
+        children: [children, " "]
+      })
+    }))
+  });
+};
+TooltipOverflow.propTypes = {
+  maxWidth: _pt.string,
+  width: _pt.string,
+  value: _pt.string
+};
+export default TooltipOverflow;
+//# sourceMappingURL=TooltipOverflow.js.map

package/dist/Tooltips/TooltipOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipOverflow.js","names":["React","useResizeDetector","Tooltip","Size","TooltipOverflow","label","children","input","withArrow","maxWidth","width","value","size","Small","height","align","position","props","useState","textOverflowed","setTextOverflowed","focused","setFocused","targetRef","customW","customH","useEffect","checkIfOverflowed","over","current","offsetWidth","scrollWidth","onFocus","onBlur","removeEventListener","renderedCallback","useCallback","node","addEventListener"],"sources":["../../src/Tooltips/TooltipOverflow.tsx"],"sourcesContent":["\nimport * as React from 'react';\n\nimport { TooltipProps } from './TooltipTypes';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { TooltipContainer, Tooltip } from './TooltipStyles';\nimport { Size } from '..';\n \ninterface TooltipOverflowProps extends TooltipProps {\n    input?: React.MutableRefObject<HTMLInputElement | null>;\n    maxWidth?: string;\n    width?: string;\n    value?: string;\n}\n\n const TooltipOverflow = ({\n   label, children,\n   input,\n   withArrow,\n   maxWidth,\n   width,\n   value,\n   size = Size.Small,\n   height = 'auto',\n   align = 'center', \n   position = 'top',\n   ...props } : TooltipOverflowProps) => {\n\n  const [textOverflowed, setTextOverflowed] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<boolean>(false);\n  const {width: customW, height: customH} = useResizeDetector({ targetRef: input });\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  }, [customW, customH]);\n\n  const checkIfOverflowed = () => {\n    //adding +3 offset to offsetWidth, because sometimes when there is no overflow, scrollWidth can be equal to offsetWidth + 1\n    const over = (input && !focused && input.current && input.current.offsetWidth + 3 < input.current.scrollWidth) ?? false;\n    setTextOverflowed(over);\n  };\n\n  React.useEffect(() => {\n    checkIfOverflowed();\n  });\n\n  const onFocus = () => {\n    checkIfOverflowed();\n    setFocused(true);\n  };\n\n  const onBlur = () => {\n    setFocused(false);\n  };\n\n  React.useEffect(() => {\n    return () => {\n      if(input?.current)\n      {\n        input?.current.removeEventListener(\"focus\", onFocus);\n        input?.current.removeEventListener(\"blur\", onBlur);\n      }\n    }\n  }, []);\n\n  const renderedCallback = React.useCallback(node => {\n    if(input && input.current)\n    {\n      input.current.addEventListener(\"focus\", onFocus);\n      input.current.addEventListener(\"blur\", onBlur);\n      checkIfOverflowed();\n    }\n  }, []);\n \n    return <div ref={renderedCallback}>{textOverflowed && <Tooltip align={align}\n               height={height}\n               role=\"tooltip\"\n               maxWidth={maxWidth}\n               width={width}\n               size={size}\n               withArrow={withArrow}\n               position={position}\n               {...props}>\n                <span>\n               {children} </span>\n            </Tooltip> }</div>;\n };\n \n export default TooltipOverflow;\n"],"mappings":"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"}