@laerdal/life-react-components 2.2.1-dev.23.full → 2.2.1-dev.24

package/dist/Tile/TileHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileHeader.cjs","names":["SubtitleIconContainer","styled","span","SubtitleContainer","div","COLORS","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","ComponentXSStyling","ComponentMStyling","ComponentLStyling","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","Size","XSmall","cursor","React","cloneElement","Large","map","item","index","RenderTileItem"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {Help} from '../icons/systemicons/SystemIcons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst SubtitleIconContainer = styled.span`\n  display: flex;\n  width: 16px;\n  height: 16px;\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nconst SubtitleContainer = styled.div`\n  color: ${COLORS.neutral_600};\n  display: flex;\n  align-items: center;\n  gap: 4px;\n`;\n\nconst TitleContainer = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n`;\n\nconst ActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 8px 16px;\n    min-height: 56px;\n\n    ${SubtitleContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 12px 20px;\n    min-height: 64px;\n\n    ${SubtitleContainer} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n\n  &.large {\n    padding: 16px 24px;\n    min-height: 72px;\n\n    ${SubtitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 subtitle,\n                                                                                 subtitleIcon,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size\n                                                                               }) => {\n\n  const renderTooltip = () =>\n    !!tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n                    align=\"center\"\n                    position=\"bottom\"\n                    withArrow={false}\n                    label={tooltip}>\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  style={{cursor: 'help'}}\n                  action={() => {\n                  }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        <TitleContainer>{title}</TitleContainer>\n        {\n          subtitle &&\n          <SubtitleContainer>\n            {\n              subtitleIcon &&\n              <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\n            }\n            <span>{subtitle}</span>\n          </SubtitleContainer>\n        }\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":"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"}
+{"version":3,"file":"TileHeader.cjs","names":["TagLineContainer","styled","div","COLORS","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","Bold","ComponentXSStyling","ComponentMStyling","ComponentLStyling","TileHeader","title","tagLine","tooltip","buttons","size","renderTooltip","Size","XSmall","cursor","map","item","index","RenderTileItem"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle, ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {Help} from '../icons/systemicons/SystemIcons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst TagLineContainer = styled.div`\n  color: ${COLORS.neutral_600};\n`;\n\nconst TitleContainer = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n`;\n\nconst ActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n    min-height: 56px;\n\n    ${TagLineContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n    min-height: 64px;\n\n    ${TagLineContainer} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n    min-height: 72px;\n\n    ${TagLineContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 tagLine,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size\n                                                                               }) => {\n\n  const renderTooltip = () =>\n    !!tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n                    align=\"center\"\n                    position=\"bottom\"\n                    withArrow={false}\n                    label={tooltip}>\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  style={{cursor: 'help'}}\n                  action={() => {\n                  }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        {tagLine && <TagLineContainer>{tagLine}</TagLineContainer>}\n        <TitleContainer>{title}</TitleContainer>\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":";;;;;;;;AAAA;AAEA;AACA;AACA;AAQA;AACA;AACA;AACA;AAAiD;AAAA;AAEjD,IAAMA,gBAAgB,GAAGC,yBAAM,CAACC,GAAG,sGACxBC,cAAM,CAACC,WAAW,CAC5B;AAED,IAAMC,cAAc,GAAGJ,yBAAM,CAACC,GAAG,wGACtBC,cAAM,CAACG,KAAK,CACtB;AAED,IAAMC,aAAa,GAAGN,yBAAM,CAACC,GAAG,4KAK/B;AAED,IAAMM,eAAe,GAAGP,yBAAM,CAACC,GAAG,iIAGjC;AAED,IAAMO,OAAO,GAAGR,yBAAM,CAACC,GAAG,ykBAWpBF,gBAAgB,EACd,IAAAU,2BAAmB,EAACC,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGvDP,cAAc,EACZ,IAAAQ,yBAAiB,EAACF,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,EAQlDd,gBAAgB,EACd,IAAAe,0BAAkB,EAACJ,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGtDP,cAAc,EACZ,IAAAW,yBAAiB,EAACL,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,EASlDd,gBAAgB,EACd,IAAAa,yBAAiB,EAACF,0BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,EAGrDP,cAAc,EACZ,IAAAY,yBAAiB,EAACN,0BAAkB,CAACG,IAAI,EAAE,IAAI,CAAC,CAIvD;AAGD,IAAMI,UAAqE,GAAG,SAAxEA,UAAqE,OAMU;EAAA,IALJC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;EAGnF,IAAMC,aAAa,GAAG,SAAhBA,aAAa;IAAA,OACjB,CAAC,CAACH,OAAO,iBACT,qBAAC,wBAAc;MAAC,KAAK,EAAC,IAAI;MAAC,IAAI,EAAEI,WAAI,CAACC,MAAO;MAC7B,KAAK,EAAC,QAAQ;MACd,QAAQ,EAAC,QAAQ;MACjB,SAAS,EAAE,KAAM;MACjB,KAAK,EAAEL,OAAQ;MAAA,uBAC7B,qBAAC,kBAAU;QAAC,OAAO,EAAC,WAAW;QACnB,KAAK,EAAC,UAAU;QAChB,KAAK,EAAE;UAACM,MAAM,EAAE;QAAM,CAAE;QACxB,MAAM,EAAE,kBAAM,CACd,CAAE;QAAA,uBACZ,qBAAC,iBAAI;UAAC,IAAI,EAAC,MAAM;UAAC,KAAK,EAAExB,cAAM,CAACC;QAAY;MAAE;IACnC,EACE;EAAA;EAGnB,oBACE,sBAAC,OAAO;IAAC,SAAS,EAAEmB,IAAK;IAAA,wBACvB,sBAAC,aAAa;MAAA,WACXH,OAAO,iBAAI,qBAAC,gBAAgB;QAAA,UAAEA;MAAO,EAAoB,eAC1D,qBAAC,cAAc;QAAA,UAAED;MAAK,EAAkB;IAAA,EAC1B,eAChB,sBAAC,eAAe;MAAA,WACbK,aAAa,EAAE,EACfF,OAAO,IAAIA,OAAO,CAACM,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;QAAA,OAAK,IAAAC,+BAAc,EAACF,IAAI,EAAEN,IAAI,EAAEO,KAAK,CAAC;MAAA,EAAC;IAAA,EAC3D;EAAA,EACV;AAEd,CAAC;AAAA,eAEcZ,UAAU;AAAA"}

package/dist/Tile/TileHeader.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 import React from 'react';
 import { Size } from '../types';
 import styled from 'styled-components';
@@ -10,16 +10,14 @@ import { Help } from '../icons/systemicons/SystemIcons';
 import { RenderTileItem } from './TileCommonItems';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var SubtitleIconContainer = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 16px;\n  height: 16px;\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n"])));
-var SubtitleContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n  display: flex;\n  align-items: center;\n  gap: 4px;\n"])), COLORS.neutral_600);
-var TitleContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.black);
-var TextContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n"])));
-var ActionContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-var Wrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 8px 16px;\n    min-height: 56px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 12px 20px;\n    min-height: 64px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 16px 24px;\n    min-height: 72px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"])), SubtitleContainer, ComponentXXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentSStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentMStyling(ComponentTextStyle.Bold, null), SubtitleContainer, ComponentSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentLStyling(ComponentTextStyle.Bold, null));
+var TagLineContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.neutral_600);
+var TitleContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), COLORS.black);
+var TextContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n"])));
+var ActionContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
+var Wrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n    min-height: 56px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n    min-height: 64px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n    min-height: 72px;\n\n    ", " {\n      ", "\n    }\n\n    ", " {\n      ", "\n    }\n\n  }\n"])), TagLineContainer, ComponentXXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentSStyling(ComponentTextStyle.Bold, null), TagLineContainer, ComponentXSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentMStyling(ComponentTextStyle.Bold, null), TagLineContainer, ComponentSStyling(ComponentTextStyle.Regular, null), TitleContainer, ComponentLStyling(ComponentTextStyle.Bold, null));
 var TileHeader = function TileHeader(_ref) {
   var title = _ref.title,
-    subtitle = _ref.subtitle,
-    subtitleIcon = _ref.subtitleIcon,
+    tagLine = _ref.tagLine,
     tooltip = _ref.tooltip,
     buttons = _ref.buttons,
     size = _ref.size;
@@ -48,16 +46,10 @@ var TileHeader = function TileHeader(_ref) {
   return /*#__PURE__*/_jsxs(Wrapper, {
     className: size,
     children: [/*#__PURE__*/_jsxs(TextContainer, {
-      children: [/*#__PURE__*/_jsx(TitleContainer, {
+      children: [tagLine && /*#__PURE__*/_jsx(TagLineContainer, {
+        children: tagLine
+      }), /*#__PURE__*/_jsx(TitleContainer, {
         children: title
-      }), subtitle && /*#__PURE__*/_jsxs(SubtitleContainer, {
-        children: [subtitleIcon && /*#__PURE__*/_jsx(SubtitleIconContainer, {
-          children: /*#__PURE__*/React.cloneElement(subtitleIcon, {
-            size: size === Size.Large ? '20px' : '16px'
-          })
-        }), /*#__PURE__*/_jsx("span", {
-          children: subtitle
-        })]
       })]
     }), /*#__PURE__*/_jsxs(ActionContainer, {
       children: [renderTooltip(), buttons && buttons.map(function (item, index) {

package/dist/Tile/TileHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","Help","RenderTileItem","SubtitleIconContainer","span","SubtitleContainer","div","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","Regular","Bold","TileHeader","title","subtitle","subtitleIcon","tooltip","buttons","size","renderTooltip","XSmall","cursor","cloneElement","Large","map","item","index"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {Help} from '../icons/systemicons/SystemIcons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst SubtitleIconContainer = styled.span`\n  display: flex;\n  width: 16px;\n  height: 16px;\n  .large & {\n    width: 20px;\n    height: 20px;\n  }\n`;\n\nconst SubtitleContainer = styled.div`\n  color: ${COLORS.neutral_600};\n  display: flex;\n  align-items: center;\n  gap: 4px;\n`;\n\nconst TitleContainer = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  flex: 1;\n`;\n\nconst ActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 8px 16px;\n    min-height: 56px;\n\n    ${SubtitleContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 12px 20px;\n    min-height: 64px;\n\n    ${SubtitleContainer} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n\n  &.large {\n    padding: 16px 24px;\n    min-height: 72px;\n\n    ${SubtitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 subtitle,\n                                                                                 subtitleIcon,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size\n                                                                               }) => {\n\n  const renderTooltip = () =>\n    !!tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n                    align=\"center\"\n                    position=\"bottom\"\n                    withArrow={false}\n                    label={tooltip}>\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  style={{cursor: 'help'}}\n                  action={() => {\n                  }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        <TitleContainer>{title}</TitleContainer>\n        {\n          subtitle &&\n          <SubtitleContainer>\n            {\n              subtitleIcon &&\n              <SubtitleIconContainer>{React.cloneElement(subtitleIcon as React.ReactElement, {size: size === Size.Large ? '20px' : '16px'})}</SubtitleIconContainer>\n            }\n            <span>{subtitle}</span>\n          </SubtitleContainer>\n        }\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":"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"}
+{"version":3,"file":"TileHeader.js","names":["React","Size","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","IconButton","Help","RenderTileItem","TagLineContainer","div","neutral_600","TitleContainer","black","TextContainer","ActionContainer","Wrapper","Regular","Bold","TileHeader","title","tagLine","tooltip","buttons","size","renderTooltip","XSmall","cursor","map","item","index"],"sources":["../../src/Tile/TileHeader.tsx"],"sourcesContent":["import React from 'react';\nimport {TileHeaderProps} from './TileTypes';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {\n  COLORS,\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle, ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {TooltipWrapper} from '../Tooltips';\nimport {IconButton} from '../Button';\nimport {Help} from '../icons/systemicons/SystemIcons';\nimport {RenderTileItem} from './TileCommonItems';\n\nconst TagLineContainer = styled.div`\n  color: ${COLORS.neutral_600};\n`;\n\nconst TitleContainer = styled.div`\n  color: ${COLORS.black};\n`;\n\nconst TextContainer = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n`;\n\nconst ActionContainer = styled.div`\n  display: flex;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  min-height: 56px;\n  box-sizing: border-box;\n\n  &.small {\n    padding: 4px 16px;\n    min-height: 56px;\n\n    ${TagLineContainer} {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n    }\n  }\n\n  &.medium {\n    padding: 8px 20px;\n    min-height: 64px;\n\n    ${TagLineContainer} {\n      ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n\n  &.large {\n    padding: 12px 24px;\n    min-height: 72px;\n\n    ${TagLineContainer} {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    ${TitleContainer} {\n      ${ComponentLStyling(ComponentTextStyle.Bold, null)}\n    }\n\n  }\n`;\n\n\nconst TileHeader: React.FunctionComponent<TileHeaderProps & { size: Size }> = ({\n                                                                                 title,\n                                                                                 tagLine,\n                                                                                 tooltip,\n                                                                                 buttons,\n                                                                                 size\n                                                                               }) => {\n\n  const renderTooltip = () =>\n    !!tooltip &&\n    <TooltipWrapper delay=\"0s\" size={Size.XSmall}\n                    align=\"center\"\n                    position=\"bottom\"\n                    withArrow={false}\n                    label={tooltip}>\n      <IconButton variant=\"secondary\"\n                  shape=\"circular\"\n                  style={{cursor: 'help'}}\n                  action={() => {\n                  }}>\n        <Help size=\"24px\" color={COLORS.neutral_600}/>\n      </IconButton>\n    </TooltipWrapper>;\n\n\n  return (\n    <Wrapper className={size}>\n      <TextContainer>\n        {tagLine && <TagLineContainer>{tagLine}</TagLineContainer>}\n        <TitleContainer>{title}</TitleContainer>\n      </TextContainer>\n      <ActionContainer>\n        {renderTooltip()}\n        {buttons && buttons.map((item, index) => RenderTileItem(item, size, index))}\n      </ActionContainer>\n    </Wrapper>\n  )\n}\n\nexport default TileHeader;\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAQC,IAAI,QAAO,UAAU;AAC7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SACEC,MAAM,EACNC,iBAAiB,EACjBC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,EAAEC,kBAAkB,EACtCC,mBAAmB,QACd,WAAW;AAClB,SAAQC,cAAc,QAAO,aAAa;AAC1C,SAAQC,UAAU,QAAO,WAAW;AACpC,SAAQC,IAAI,QAAO,kCAAkC;AACrD,SAAQC,cAAc,QAAO,mBAAmB;AAAC;AAAA;AAEjD,IAAMC,gBAAgB,GAAGZ,MAAM,CAACa,GAAG,wFACxBZ,MAAM,CAACa,WAAW,CAC5B;AAED,IAAMC,cAAc,GAAGf,MAAM,CAACa,GAAG,0FACtBZ,MAAM,CAACe,KAAK,CACtB;AAED,IAAMC,aAAa,GAAGjB,MAAM,CAACa,GAAG,8JAK/B;AAED,IAAMK,eAAe,GAAGlB,MAAM,CAACa,GAAG,mHAGjC;AAED,IAAMM,OAAO,GAAGnB,MAAM,CAACa,GAAG,2jBAWpBD,gBAAgB,EACdL,mBAAmB,CAACF,kBAAkB,CAACe,OAAO,EAAE,IAAI,CAAC,EAGvDL,cAAc,EACZX,iBAAiB,CAACC,kBAAkB,CAACgB,IAAI,EAAE,IAAI,CAAC,EAQlDT,gBAAgB,EACdN,kBAAkB,CAACD,kBAAkB,CAACe,OAAO,EAAE,IAAI,CAAC,EAGtDL,cAAc,EACZZ,iBAAiB,CAACE,kBAAkB,CAACgB,IAAI,EAAE,IAAI,CAAC,EASlDT,gBAAgB,EACdR,iBAAiB,CAACC,kBAAkB,CAACe,OAAO,EAAE,IAAI,CAAC,EAGrDL,cAAc,EACZb,iBAAiB,CAACG,kBAAkB,CAACgB,IAAI,EAAE,IAAI,CAAC,CAIvD;AAGD,IAAMC,UAAqE,GAAG,SAAxEA,UAAqE,OAMU;EAAA,IALJC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,IAAI,QAAJA,IAAI;EAGnF,IAAMC,aAAa,GAAG,SAAhBA,aAAa;IAAA,OACjB,CAAC,CAACH,OAAO,iBACT,KAAC,cAAc;MAAC,KAAK,EAAC,IAAI;MAAC,IAAI,EAAE1B,IAAI,CAAC8B,MAAO;MAC7B,KAAK,EAAC,QAAQ;MACd,QAAQ,EAAC,QAAQ;MACjB,SAAS,EAAE,KAAM;MACjB,KAAK,EAAEJ,OAAQ;MAAA,uBAC7B,KAAC,UAAU;QAAC,OAAO,EAAC,WAAW;QACnB,KAAK,EAAC,UAAU;QAChB,KAAK,EAAE;UAACK,MAAM,EAAE;QAAM,CAAE;QACxB,MAAM,EAAE,kBAAM,CACd,CAAE;QAAA,uBACZ,KAAC,IAAI;UAAC,IAAI,EAAC,MAAM;UAAC,KAAK,EAAE7B,MAAM,CAACa;QAAY;MAAE;IACnC,EACE;EAAA;EAGnB,oBACE,MAAC,OAAO;IAAC,SAAS,EAAEa,IAAK;IAAA,wBACvB,MAAC,aAAa;MAAA,WACXH,OAAO,iBAAI,KAAC,gBAAgB;QAAA,UAAEA;MAAO,EAAoB,eAC1D,KAAC,cAAc;QAAA,UAAED;MAAK,EAAkB;IAAA,EAC1B,eAChB,MAAC,eAAe;MAAA,WACbK,aAAa,EAAE,EACfF,OAAO,IAAIA,OAAO,CAACK,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;QAAA,OAAKtB,cAAc,CAACqB,IAAI,EAAEL,IAAI,EAAEM,KAAK,CAAC;MAAA,EAAC;IAAA,EAC3D;EAAA,EACV;AAEd,CAAC;AAED,eAAeX,UAAU"}

package/dist/Tile/TileTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TileTypes.cjs","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n  tooltip?: TooltipProps;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n  componentType: 'button';\n  buttonText: string;\n}\n\nexport type TileNote = {\n  componentType: 'note';\n  noteIcon?: React.ReactNode;\n  noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n  componentType: 'link';\n  linkIcon?: React.ReactNode;\n  linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n  title: string;\n  tooltip?: string;\n  subtitle?: string;\n  subtitleIcon?: React.ReactNode;\n\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}
+{"version":3,"file":"TileTypes.cjs","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n  componentType: 'button';\n  buttonText: string;\n}\n\nexport type TileNote = {\n  componentType: 'note';\n  noteIcon?: React.ReactNode;\n  noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n  componentType: 'link';\n  linkIcon?: React.ReactNode;\n  linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n  title: string;\n  tooltip?: string;\n  tagLine?: string;\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}

package/dist/Tile/TileTypes.d.ts

@@ -5,8 +5,7 @@ import { DropdownButtonProps } from '../Dropdown/DropdownButtonTypes';
 import { ButtonProps } from '../Button/Button';
 import { HyperlinkProps } from '../HyperLink/HyperLink';
 import { Size } from '../types';
-import { TooltipProps } from "../Tooltips/TooltipTypes";
-export type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {
+export type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {
     componentType: 'icon';
     icon: React.ReactNode;
 };
@@ -16,7 +15,6 @@ export type TileToggleButton = Pick<ToggleButtonProps, 'active' | 'onChange' | '
 export type TileDropdownButton = Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'> & {
     componentType: 'dropdown';
     icon: React.ReactNode;
-    tooltip?: TooltipProps;
 };
 export type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {
     componentType: 'button';
@@ -37,8 +35,7 @@ export type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButt
 export interface TileHeaderProps {
     title: string;
     tooltip?: string;
-    subtitle?: string;
-    subtitleIcon?: React.ReactNode;
+    tagLine?: string;
     buttons?: HeaderButtons[];
 }
 export interface TileFooterProps {

package/dist/Tile/TileTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileTypes.js","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled' | 'tooltip'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n  tooltip?: TooltipProps;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n  componentType: 'button';\n  buttonText: string;\n}\n\nexport type TileNote = {\n  componentType: 'note';\n  noteIcon?: React.ReactNode;\n  noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n  componentType: 'link';\n  linkIcon?: React.ReactNode;\n  linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n  title: string;\n  tooltip?: string;\n  subtitle?: string;\n  subtitleIcon?: React.ReactNode;\n\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}
+{"version":3,"file":"TileTypes.js","names":[],"sources":["../../src/Tile/TileTypes.ts"],"sourcesContent":["import React from 'react';\nimport {IconButtonProps} from '../Button/Iconbutton';\nimport {ToggleButtonProps} from '../Toggles/ToggleButton';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {ButtonProps} from '../Button/Button';\nimport {HyperlinkProps} from '../HyperLink/HyperLink';\nimport {Size} from '../types';\n\n\nexport type TileIconButton = Pick<IconButtonProps, 'action' | 'disabled'> & {\n  componentType: 'icon';\n  icon: React.ReactNode;\n}\n\nexport type TileToggleButton =\n  Pick<ToggleButtonProps, 'active' | 'onChange' | 'disabled' | 'defaultState' | 'activeState'>\n  & { componentType: 'toggle'; }\n\nexport type TileDropdownButton =\n  Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'itemsType' | 'action' | 'actionIcon' | 'actionLabel' | 'actionLoading' | 'actionVariant' | 'multiSelect' | 'scrollable' | 'pinTopItem' | 'maxHeight'>\n  & {\n  componentType: 'dropdown';\n  icon: React.ReactNode;\n}\n\nexport type TileStandardButton = Pick<ButtonProps, 'variant' | 'loading' | 'icon' | 'onClick' | 'disabled'> & {\n  componentType: 'button';\n  buttonText: string;\n}\n\nexport type TileNote = {\n  componentType: 'note';\n  noteIcon?: React.ReactNode;\n  noteText: string;\n}\n\n\nexport type TileHyperLink = HyperlinkProps & {\n  componentType: 'link';\n  linkIcon?: React.ReactNode;\n  linkText: string;\n}\n\nexport type FooterButtons = TileIconButton | TileToggleButton | TileDropdownButton | TileStandardButton;\nexport type HeaderButtons = TileIconButton | TileToggleButton | TileDropdownButton;\n\nexport interface TileHeaderProps {\n  title: string;\n  tooltip?: string;\n  tagLine?: string;\n  buttons?: HeaderButtons[];\n}\n\nexport interface TileFooterProps {\n  leftItem?: TileNote | TileHyperLink | TileStandardButton;\n  buttons?: FooterButtons[];\n}\n\n\nexport interface TileProps extends React.HTMLAttributes<HTMLDivElement>{\n  style?: {\n    width?: string,\n    minWidth?: string,\n    maxWidth?: string,\n    height?: string,\n    minHeight?: string,\n    maxHeight?: string,\n  };\n\n  size?: Size.Small | Size.Medium | Size.Large\n\n  header?: TileHeaderProps;\n  footer?: TileFooterProps;\n}\n"],"mappings":""}

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;