@laerdal/life-react-components 6.0.0-dev.1.full → 6.0.0-dev.12.full

package/dist/GlobalNavigationBar/mobile/__tests__/MobileMenuHeader.test.tsx

@@ -0,0 +1,195 @@
+import * as React from 'react';
+import {act, fireEvent, render} from '../../../test-utils';
+import MobileMenuHeader, {MobileMenuHeaderActions, MobileMenuHeaderWrapper} from '../MobileMenuHeader';
+import {IconButtonStyled} from '../../../Button/Iconbutton';
+import {MobileMenuButtonTypes, ProfileMenu} from '../../types';
+import {ProfileButtonContainer} from '../../../ProfileButton/ProfileButton';
+
+
+
+
+
+describe('MobileMenuHeader', () => {
+  const backSpy = jest.fn();
+  const closeSpy = jest.fn();
+  const subMenuOpenSpy = jest.fn();
+  const profileSpy = jest.fn();
+  const buttonSpy = jest.fn();
+
+  const profileButton: MobileMenuButtonTypes = {
+    type: 'profile',
+    action: profileSpy
+  }
+
+  const subMenuButton: MobileMenuButtonTypes = {
+    type: 'submenu',
+    menu: {
+      type: 'custom',
+      custom: () => <div>custom</div>,
+    },
+    icon: <i></i>
+  }
+
+  const leftButton: MobileMenuButtonTypes = {
+    type: 'action',
+    action: buttonSpy,
+    icon: <i></i>,
+    placement: 'left'
+  };
+
+  const rightButton: MobileMenuButtonTypes = {
+    type: 'action',
+    action: buttonSpy,
+    icon: <i></i>,
+    placement: 'right'
+  };
+
+  beforeEach(() => {
+    backSpy.mockReset();
+    closeSpy.mockReset();
+    subMenuOpenSpy.mockReset();
+    buttonSpy.mockReset();
+    profileSpy.mockReset();
+  });
+
+  it('should render', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy}/>)
+
+    expect(wrapper.container.querySelector(`${MobileMenuHeaderWrapper}`)).toBeDefined();
+  });
+
+  it('should render only close button', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy}/>)
+
+    expect(wrapper.container.querySelectorAll(`${IconButtonStyled}`)).toHaveLength(1);
+  });
+
+  it('should render label', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} label={'label'}/>)
+
+    expect(wrapper.queryByText('label')).toBeDefined();
+  });
+
+  it('should render close button and back button', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} onGoBack={backSpy}/>)
+
+    expect(wrapper.container.querySelectorAll(`${IconButtonStyled}`)).toHaveLength(2);
+  });
+
+  it('should render profile button', () => {
+
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} profile={
+      {
+        user:{
+          firstName: "name",
+          lastName: "last",
+          email: "mail",
+        },
+        sections:[]
+      }
+    } buttons={[profileButton]}/>)
+
+    expect(wrapper.container.querySelectorAll(`${ProfileButtonContainer}`)).toHaveLength(1);
+  });
+
+  it('should render button on the left', () => {
+
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} buttons={[leftButton]}/>)
+
+    expect(wrapper.container.querySelectorAll(`${MobileMenuHeaderWrapper} ${IconButtonStyled}`)).toHaveLength(2);
+    expect(wrapper.container.querySelectorAll(`${MobileMenuHeaderActions} ${IconButtonStyled}`)).toHaveLength(1);
+  });
+
+  it('should render button on the right', () => {
+
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} buttons={[rightButton]}/>)
+
+    expect(wrapper.container.querySelectorAll(`${MobileMenuHeaderWrapper} ${IconButtonStyled}`)).toHaveLength(2);
+    expect(wrapper.container.querySelectorAll(`${MobileMenuHeaderActions} ${IconButtonStyled}`)).toHaveLength(2);
+  });
+
+  it('should call onClose function when close button is clicked', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy}/>)
+
+    act(() => {
+      fireEvent.click(wrapper.container.querySelector(`${IconButtonStyled}`)!);
+    });
+
+    expect(closeSpy).toHaveBeenCalled();
+  });
+
+  it('should call onGoBack function when back button is clicked', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} onGoBack={backSpy}/>)
+
+    act(() => {
+      fireEvent.click(wrapper.container.querySelectorAll(`${IconButtonStyled}`)[0]);
+    });
+
+    expect(backSpy).toHaveBeenCalled();
+  });
+
+  it('should call onSubMenuOpen function when submenu button is clicked', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} buttons={[subMenuButton]}
+                                             onSubMenuOpen={subMenuOpenSpy}/>)
+
+    act(() => {
+      fireEvent.click(wrapper.container.querySelectorAll(`${IconButtonStyled}`)[0]);
+    });
+
+    expect(subMenuOpenSpy).toHaveBeenCalled();
+  });
+
+  it('should call action when icon button is clicked', () => {
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy} buttons={[leftButton]}/>)
+
+    act(() => {
+      fireEvent.click(wrapper.container.querySelectorAll(`${IconButtonStyled}`)[0]);
+    });
+
+    expect(buttonSpy).toHaveBeenCalled();
+  });
+
+  it('should call profile button action when profile button is clicked', () => {
+
+      const wrapper = render(<MobileMenuHeader onClose={closeSpy} profile={
+        {
+          user:{
+            firstName: "name",
+            lastName: "last",
+            email: "mail",
+          },
+          sections:[]
+        }
+      } buttons={[profileButton]}/>)
+
+    act(() => {
+      fireEvent.click(wrapper.container.querySelectorAll(`${IconButtonStyled}`)[0]);
+    });
+
+    expect(profileSpy).toHaveBeenCalled();
+  });
+
+  it('should call onSubMenuOpen when profile button is clicked and action is not provided', () => {
+    const profile = {
+      label: 'profile label',
+      sections: [],
+      user: {
+        lastName: 'lastname',
+        firstName: 'firstname',
+        email: 'email@email.com'
+      },
+    } as ProfileMenu;
+    const wrapper = render(<MobileMenuHeader onClose={closeSpy}
+                                             buttons={[{...profileButton, action: undefined}]}
+                                             profile={profile}
+                                             onSubMenuOpen={subMenuOpenSpy}/>)
+
+    act(() => {
+      fireEvent.click(wrapper.container.querySelectorAll(`${IconButtonStyled}`)[0]);
+    });
+
+    expect(subMenuOpenSpy).toHaveBeenCalled();
+  });
+
+
+});

package/dist/HyperLink/styling.cjs

@@ -16,31 +16,57 @@ const defaultStyle = exports.defaultStyle = (0, _styledComponents.css)`
 
   &:link {
     font-weight: 700;
-    color: ${props => _.COLORS.getColor('primary_600', props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
   }
 
   &:visited {
-    color: ${props => _.COLORS.getColor('primary_800', props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
   }
 
   &:hover,
   &.hover-state {
-    color: ${props => _.COLORS.getColor('primary_700', props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
     text-decoration-line: underline;
   }
 
   &:focus,
   &.focus-state {
     border-radius: 2px;
-    background: ${props => _.COLORS.getColor('primary_800', props.theme)};
-    color: ${props => _.COLORS.getColor('white', props.theme)};
+    background: ${props => _.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
   }
 
   &:active,
   &.active-state {
     border-radius: 2px;
-    background: ${props => _.COLORS.getColor('primary_800', props.theme)};
-    color: ${props => _.COLORS.getColor('white', props.theme)};
+    background: ${props => _.COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
   }
 
 
@@ -49,7 +75,11 @@ const defaultStyle = exports.defaultStyle = (0, _styledComponents.css)`
   &.active-state:hover,
   &.focus-state:hover{
     text-decoration-line: none;
-    color: ${props => _.COLORS.getColor('white', props.theme)};
+    color: ${props => _.COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     opacity: 0.9;
   }
 `;

package/dist/HyperLink/styling.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styling.cjs","names":["_styledComponents","require","_","defaultStyle","exports","css","props","COLORS","getColor","theme","invertedStyle"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: none;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    text-decoration-line: underline;\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n\r\n  &:focus:hover,\r\n  &:active:hover,\r\n  &.active-state:hover,\r\n  &.focus-state:hover{\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: underline;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    text-decoration-line: none;\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:focus:hover,\r\n  &:active:hover {\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,OAAA;AACA,IAAAC,CAAA,GAAAD,OAAA;AAEO,MAAME,YAAY,GAAAC,OAAA,CAAAD,YAAA,GAAG,IAAAE,qBAAG;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA;AACA,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACtE,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA,kBAAkBH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACtE,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC3D;AACA;AACA,CAAC;AAEM,MAAMC,aAAa,GAAAN,OAAA,CAAAM,aAAA,GAAG,IAAAL,qBAAG;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC3D;AACA;AACA;AACA,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAChE,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAChE,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA,aAAaH,KAAK,IAAIC,QAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACjE;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"styling.cjs","names":["_styledComponents","require","_","defaultStyle","exports","css","props","COLORS","generateToken","componentType","defaultVariant","theme","state","isOnFill","invertedStyle","getColor"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: none;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary', state: 'active' }, props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n    text-decoration-line: underline;\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n    color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n    color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n  }\r\n\r\n\r\n  &:focus:hover,\r\n  &:active:hover,\r\n  &.active-state:hover,\r\n  &.focus-state:hover{\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: underline;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    text-decoration-line: none;\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:focus:hover,\r\n  &:active:hover {\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/HyperLink/styling.js

@@ -10,31 +10,57 @@ export const defaultStyle = css`
 
   &:link {
     font-weight: 700;
-    color: ${props => COLORS.getColor('primary_600', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
   }
 
   &:visited {
-    color: ${props => COLORS.getColor('primary_800', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
   }
 
   &:hover,
   &.hover-state {
-    color: ${props => COLORS.getColor('primary_700', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
     text-decoration-line: underline;
   }
 
   &:focus,
   &.focus-state {
     border-radius: 2px;
-    background: ${props => COLORS.getColor('primary_800', props.theme)};
-    color: ${props => COLORS.getColor('white', props.theme)};
+    background: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
   }
 
   &:active,
   &.active-state {
     border-radius: 2px;
-    background: ${props => COLORS.getColor('primary_800', props.theme)};
-    color: ${props => COLORS.getColor('white', props.theme)};
+    background: ${props => COLORS.generateToken({
+  componentType: 'bg-fill',
+  defaultVariant: 'primary',
+  state: 'active'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
   }
 
 
@@ -43,7 +69,11 @@ export const defaultStyle = css`
   &.active-state:hover,
   &.focus-state:hover{
     text-decoration-line: none;
-    color: ${props => COLORS.getColor('white', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  isOnFill: true,
+  defaultVariant: 'primary'
+}, props.theme)};
     opacity: 0.9;
   }
 `;

package/dist/HyperLink/styling.js.map

@@ -1 +1 @@
-{"version":3,"file":"styling.js","names":["css","COLORS","defaultStyle","props","getColor","theme","invertedStyle"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: none;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    text-decoration-line: underline;\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n\r\n  &:focus:hover,\r\n  &:active:hover,\r\n  &.active-state:hover,\r\n  &.focus-state:hover{\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: underline;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    text-decoration-line: none;\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:focus:hover,\r\n  &:active:hover {\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,mBAAmB;AACvC,SAASC,MAAM,QAAQ,IAAI;AAE3B,OAAO,MAAMC,YAAY,GAAGF,GAAG;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaG,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA;AACA;AACA,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACtE,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA,kBAAkBF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACtE,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAC3D;AACA;AACA,CAAC;AAED,OAAO,MAAMC,aAAa,GAAGN,GAAG;AAChC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaG,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAC3D;AACA;AACA;AACA,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAChE,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAChE,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA,aAAaF,KAAK,IAAIF,MAAM,CAACG,QAAQ,CAAC,aAAa,EAAED,KAAK,CAACE,KAAK,CAAC;AACjE;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"styling.js","names":["css","COLORS","defaultStyle","props","generateToken","componentType","defaultVariant","theme","state","isOnFill","invertedStyle","getColor"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: none;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary', state: 'active' }, props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n    text-decoration-line: underline;\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n    color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n    color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n  }\r\n\r\n\r\n  &:focus:hover,\r\n  &:active:hover,\r\n  &.active-state:hover,\r\n  &.focus-state:hover{\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n  outline: none;\r\n  padding: 2px 0;\r\n\r\n  text-decoration-thickness: 2px;\r\n  text-decoration-style: solid;\r\n  text-underline-offset: 2px;\r\n  text-decoration-line: underline;\r\n\r\n  &:link {\r\n    font-weight: 700;\r\n    color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  &:visited {\r\n    color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    text-decoration-line: none;\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    border-radius: 2px;\r\n    text-decoration-line: none;\r\n    background: ${props => COLORS.getColor('white', props.theme)};\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n  }\r\n\r\n  &:focus:hover,\r\n  &:active:hover {\r\n    text-decoration-line: none;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    opacity: 0.9;\r\n  }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/Checkbox.cjs

@@ -29,7 +29,10 @@ const StyledCheckBox = exports.StyledCheckBox = _styledComponents.default.div`
   ${props => props.margin ? `margin: ${props.margin};` : ''}
   cursor: pointer;
 
-  color: ${props => _styles.COLORS.getColor('black', props.theme)};
+  color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme)};
 
   .pointerTransparent {
     pointer-events: none;
@@ -46,8 +49,21 @@ const StyledCheckBox = exports.StyledCheckBox = _styledComponents.default.div`
     border-radius: 50%;
 
     svg {
-      color: ${props => props.$selected ? _styles.COLORS.getColor('primary_500', props.theme) : props.$invalid ? _styles.COLORS.getColor('critical_400', props.theme) : _styles.COLORS.getColor('neutral_600', props.theme)};
+      color: ${props => props.$selected ? _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'selected'
+}, props.theme) : props.$invalid ? _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'critical'
+}, props.theme) : _styles.COLORS.generateToken({
+  componentType: 'icon',
+  defaultVariant: 'subtle'
+}, props.theme)};
     }
+    ${props => props.$invalid && `background-color: ${_styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)}`}
   }
 
   .checkbox-label {
@@ -56,21 +72,21 @@ const StyledCheckBox = exports.StyledCheckBox = _styledComponents.default.div`
   }
 
   &.small {
-    ${props => (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null)}
     .checkbox-label {
       padding-top: 14px;
     }
   }
 
   &.medium {
-    ${props => (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null)}
     .checkbox-label {
       padding-top: 12px;
     }
   }
 
   &.large {
-    ${props => (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+    ${(0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null)}
     .checkbox-label {
       padding-top: 12px;
     }
@@ -82,20 +98,32 @@ const StyledCheckBox = exports.StyledCheckBox = _styledComponents.default.div`
 
   &:not(.disabled):not(.readonly):hover {
     .checkbox-icon {
-      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
 
       svg {
-        color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+        color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover'
+}, props.theme)};
       }
     }
   }
 
   &:not(.disabled):not(.readonly):active {
     .checkbox-icon {
-      background: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+      background: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
 
       svg {
-        color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+        color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'active'
+}, props.theme)};
       }
     }
   }
@@ -112,7 +140,10 @@ const StyledCheckBox = exports.StyledCheckBox = _styledComponents.default.div`
   &.disabled {
     cursor: not-allowed;
 
-    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)};
 
     .checkbox-icon,
     .checkbox-label {
@@ -120,20 +151,29 @@ const StyledCheckBox = exports.StyledCheckBox = _styledComponents.default.div`
     }
 
     .checkbox-icon {
-      background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+      background-color: transparent;
     }
 
     .checkbox-icon svg {
-      color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'disabled'
+}, props.theme)};
     }
   }
 
   &.dropdown-hover:not(.disabled) {
     .checkbox-icon {
-      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+      background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
 
       svg {
-        color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+        color: ${props => _styles.COLORS.generateToken({
+  componentType: 'icon',
+  state: 'hover'
+}, props.theme)};
       }
     }
   }

package/dist/InputFields/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_typography","_common","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledCheckBox","exports","styled","div","props","margin","COLORS","getColor","theme","$selected","$invalid","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","Checkbox","forwardRef","_ref","ref","id","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties2","onKeyPress","keyCode","handleClick","stopPropagation","Size","Medium","cls","jsxs","tabIndex","onClick","onKeyDown","onMouseDown","defaultOnMouseDownHandler","jsx","SystemIcons","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor","_default"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\r\n    }\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    $selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    $invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_typography","_common","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledCheckBox","exports","styled","div","props","margin","COLORS","generateToken","componentType","defaultVariant","theme","$selected","$invalid","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","state","Checkbox","forwardRef","_ref","ref","id","selected","select","label","invalid","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","_objectWithoutProperties2","onKeyPress","keyCode","handleClick","stopPropagation","Size","Medium","cls","jsxs","tabIndex","onClick","onKeyDown","onMouseDown","defaultOnMouseDownHandler","jsx","SystemIcons","CheckboxOn","CheckboxSemi","CheckboxOff","htmlFor","_default"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { CheckboxProps } from './types';\r\n\r\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; $invalid?: boolean; $selected?: boolean; margin?: string }>`\r\n  display: flex;\r\n  width: 100%;\r\n  min-height: 48px;\r\n  min-width: 48px;\r\n\r\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n  cursor: pointer;\r\n\r\n  color: ${props => COLORS.generateToken({componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n\r\n  .pointerTransparent {\r\n    pointer-events: none;\r\n  }\r\n\r\n  .checkbox-icon {\r\n    margin: 6px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    box-sizing: border-box;\r\n    height: 36px;\r\n    min-width: 36px;\r\n    border-radius: 50%;\r\n\r\n    svg {\r\n      color: ${props => (props.$selected ? COLORS.generateToken({componentType: 'icon', defaultVariant:'selected'}, props.theme) : \r\n        props.$invalid ? COLORS.generateToken({componentType:'icon', defaultVariant:'critical'}, props.theme) : \r\n        COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, props.theme))};\r\n    }\r\n    ${props => props.$invalid && `background-color: ${COLORS.generateToken({componentType: 'bg-surface', defaultVariant: 'default'}, props.theme)}`}\r\n  }\r\n\r\n  .checkbox-label {\r\n    user-select: none;\r\n    cursor: inherit;\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n    .checkbox-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n    .checkbox-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):hover {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'hover'}, props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.generateToken({componentType: 'icon', state: 'hover'}, props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):not(.readonly):active {\r\n    .checkbox-icon {\r\n      background: ${props => COLORS.generateToken({componentType: 'bg-surface', state: 'active'}, props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.generateToken({componentType: 'icon', state: 'active'}, props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: inherit;\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${props => COLORS.generateToken({componentType: 'text', state: 'disabled'}, props.theme)};\r\n\r\n    .checkbox-icon,\r\n    .checkbox-label {\r\n      pointer-events: none;\r\n    }\r\n\r\n    .checkbox-icon {\r\n      background-color: transparent;\r\n    }\r\n\r\n    .checkbox-icon svg {\r\n      color: ${props => COLORS.generateToken({componentType: 'icon', state: 'disabled'}, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .checkbox-icon {\r\n      background-color: ${props => COLORS.generateToken({componentType:'bg-surface',state:'hover'}, props.theme)};\r\n\r\n      svg {\r\n        color: ${props => COLORS.generateToken({componentType:'icon',state:'hover'}, props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\r\n                                                            id,\r\n                                                            selected,\r\n                                                            select,\r\n                                                            label,\r\n                                                            invalid,\r\n                                                            iconPointerEventsTransparent,\r\n                                                            disabled,\r\n                                                            margin,\r\n                                                            size,\r\n                                                            semiSelected,\r\n                                                            children,\r\n                                                            readOnly,\r\n                                                            tabIndexVal,\r\n                                                            dataTestId,\r\n                                                            className,\r\n                                                            ...rest\r\n                                                          }, ref) => {\r\n  const onKeyPress = (e: any) => {\r\n    if (e.keyCode === 13 && !disabled && !readOnly) {\r\n      select && select(!selected);\r\n    }\r\n  };\r\n\r\n  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n    if (disabled || readOnly) {\r\n      return;\r\n    }\r\n    if(select){\r\n      e?.stopPropagation();\r\n      select(!selected);\r\n    }\r\n  };\r\n\r\n  size = size ?? Size.Medium;\r\n\r\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\r\n\r\n  return (\r\n    <StyledCheckBox key={id}\r\n                    ref={ref}\r\n                    disabled={disabled}\r\n                    className={cls}\r\n                    aria-checked={selected}\r\n                    $selected={selected}\r\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n                    $invalid={invalid}\r\n                    margin={margin}\r\n                    onClick={handleClick}\r\n                    onKeyDown={onKeyPress}\r\n                    onMouseDown={defaultOnMouseDownHandler}\r\n                    {...rest}>\r\n      <div id={id} data-testid={dataTestId} className={'checkbox-icon'}>\r\n        {\r\n          selected\r\n            ? <SystemIcons.CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n            : semiSelected\r\n              ? <SystemIcons.CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n              : <SystemIcons.CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\r\n        }\r\n      </div>\r\n      {\r\n        label &&\r\n        (\r\n          <label className={'checkbox-label'}\r\n                 htmlFor={id}>\r\n            {label}\r\n          </label>\r\n        )\r\n      }\r\n      {\r\n        !label &&\r\n        <label className={'checkbox-label'}\r\n               htmlFor={id}>\r\n          {children}\r\n        </label>\r\n      }\r\n    </StyledCheckBox>\r\n  );\r\n});\r\n\r\nexport default Checkbox;\r\n"],"mappings":"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","ignoreList":[]}