@laerdal/life-react-components 6.0.0-dev.2 → 6.0.0-dev.20.full

package/dist/Breadcrumb/__tests__/Breadcrumb.test.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { render } from '../../test-utils';
+import { Breadcrumb } from '../index';
+import '@testing-library/jest-dom';
+import { Size } from '../../types';
+
+const items = [
+  { label: 'test1', url: 'http://laerdal_test.com', callback: (id?: string) => {} },
+  { label: 'test2', url: 'http://laerdal_test1.com', callback: (id?: string) => {} },
+  { label: 'test3', url: 'http://laerdal_test2.com', callback: (id?: string) => {} },
+  { label: 'test4', url: 'http://laerdal_test3.com', callback: (id?: string) => {} },
+];
+
+
+
+describe('<Breadcrumb />', () => {
+  it('Renders with no values', async () => {
+    const { getByTestId, container } = render(<Breadcrumb items={[]} />);
+    //main container is displayed
+    expect(getByTestId('breacrumbContainer')).toBeDefined();
+    //home link is displayed
+    expect(container.querySelector('[id="homelink"]')).toBeDefined();
+  });
+
+  it('Renders with home icon and no values', async () => {
+    const { getByTestId, container } = render(<Breadcrumb items={[]} homeIcon={true} />);
+    expect(getByTestId('breacrumbContainer')).toBeDefined();
+    //home icon is displayed
+    expect(container.querySelector('[id="homeIcon"]')).toBeDefined();
+
+    //because a size was not provided, small icons width will be set (20px)
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '20px');
+  });
+
+  it('Render breadcrumb with two values ', async () => {
+    const options = items.slice(0, 2);
+    const { getByTestId, container } = render(<Breadcrumb lastItemAsLabel={true} items={options} size={Size.Medium} />);
+    expect(getByTestId('breacrumbContainer')).toBeDefined();
+    //check breadcrumbs displayed correctly - only one link defined for this scenario
+    const linkItem = container.querySelector('a[id*="link-item"]');
+    expect(linkItem).toBeDefined();
+    expect(linkItem).toHaveTextContent(options[0].label);
+
+    //query breadcrumb chrevron separators
+    const breadcrumbSeparators = container.querySelectorAll('.chevronicon');
+    expect(breadcrumbSeparators).toBeDefined();
+    expect(breadcrumbSeparators).toHaveLength(2);
+
+    //medium size provided
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '24px');
+
+    const lastItem = container.querySelector('label');
+    expect(lastItem).toBeDefined();
+    expect(lastItem).toHaveTextContent(options[options.length - 1].label);
+  });
+
+  it('Render more than 3 items', async () => {
+    const { container, getByText } = render(<Breadcrumb lastItemAsLabel={true} items={items} size={Size.XSmall} />);
+
+    //having more than 2 item show more dropdown selector should be displayed
+    //because home page button is not provided, only one button should be rendered
+    const showMoreBtn = container.querySelector('button');
+    expect(showMoreBtn).toBeDefined();
+    //in this scenario, first option label is not displayed, so only one link item available
+    const linkItem = container.querySelectorAll('a[id*="link-item"]');
+    expect(linkItem).toHaveLength(1);
+
+    //links not displayed for first two items, but these are defined as dropdown options
+    expect(getByText(items[0].label)).toBeDefined();
+    expect(getByText(items[1].label)).toBeDefined();
+
+    //xs size provided
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('width', '16px');
+  });
+});

package/dist/Breadcrumb/styles.cjs

@@ -23,7 +23,10 @@ const FontStyles = (size, textStyle, color) => {
   }
 };
 const BreadcrumbItemLastStyles = exports.BreadcrumbItemLastStyles = _styledComponents.default.label`
-  ${props => FontStyles(props.$size, _styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_800', props.theme))}
+  ${props => FontStyles(props.$size, _styles.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   ${props => marginRight(props.$size)}
 `;
 const BreadcrumbContainerStyles = exports.BreadcrumbContainerStyles = _styledComponents.default.div`
@@ -33,7 +36,9 @@ const BreadcrumbContainerStyles = exports.BreadcrumbContainerStyles = _styledCom
 
   a {
     text-decoration: none;
-    ${props => FontStyles(props.$size, _styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
+    ${props => FontStyles(props.$size, _styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text-link'
+}, props.theme))}
     ${props => marginRight(props.$size)}
   }
 
@@ -42,10 +47,16 @@ const BreadcrumbContainerStyles = exports.BreadcrumbContainerStyles = _styledCom
   }
 
   a:hover {
-    color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
   }
   a:active {
-    color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
   }
 `;
 //# sourceMappingURL=styles.cjs.map

package/dist/Breadcrumb/styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","_types","marginRight","size","Size","Small","Medium","FontStyles","textStyle","color","XSmall","ComponentXXSStyling","ComponentMStyling","ComponentSStyling","BreadcrumbItemLastStyles","exports","styled","label","props","$size","ComponentTextStyle","Bold","COLORS","getColor","theme","BreadcrumbContainerStyles","div","Regular"],"sources":["../../src/Breadcrumb/styles.ts"],"sourcesContent":["import styled from 'styled-components';\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles';\r\nimport { Size } from '../types';\r\n\r\nconst marginRight = (size: Size | undefined) => {\r\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';\r\n};\r\n\r\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\r\n  switch (size) {\r\n    case Size.XSmall:\r\n      return ComponentXXSStyling(textStyle, color);\r\n    case Size.Medium:\r\n      return ComponentMStyling(textStyle, color);\r\n    case Size.Small:\r\n    default:\r\n      return ComponentSStyling(textStyle, color);\r\n  }\r\n};\r\n\r\nexport const BreadcrumbItemLastStyles = styled.label<{ $size: Size }>`\r\n  ${(props) => FontStyles(props.$size, ComponentTextStyle.Bold, COLORS.getColor('neutral_800', props.theme))}\r\n  ${(props) => marginRight(props.$size)}\r\n`;\r\n\r\nexport const BreadcrumbContainerStyles = styled.div<{ $size: Size | undefined }>`\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 48px;\r\n\r\n  a {\r\n    text-decoration: none;\r\n    ${(props) => FontStyles(props.$size, ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    ${(props) => marginRight(props.$size)}\r\n  }\r\n\r\n  .chevronicon {\r\n    ${(props) => marginRight(props.$size)}\r\n  }\r\n\r\n  a:hover {\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n  a:active {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,MAAMG,WAAW,GAAIC,IAAsB,IAAK;EAC9C,OAAOA,IAAI,IAAIC,WAAI,CAACC,KAAK,IAAIF,IAAI,IAAIC,WAAI,CAACE,MAAM,GAAG,oBAAoB,GAAG,oBAAoB;AAChG,CAAC;AAED,MAAMC,UAAU,GAAGA,CAACJ,IAAsB,EAAEK,SAA6B,EAAEC,KAAa,KAAK;EAC3F,QAAQN,IAAI;IACV,KAAKC,WAAI,CAACM,MAAM;MACd,OAAO,IAAAC,2BAAmB,EAACH,SAAS,EAAEC,KAAK,CAAC;IAC9C,KAAKL,WAAI,CAACE,MAAM;MACd,OAAO,IAAAM,yBAAiB,EAACJ,SAAS,EAAEC,KAAK,CAAC;IAC5C,KAAKL,WAAI,CAACC,KAAK;IACf;MACE,OAAO,IAAAQ,yBAAiB,EAACL,SAAS,EAAEC,KAAK,CAAC;EAC9C;AACF,CAAC;AAEM,MAAMK,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAGE,yBAAM,CAACC,KAAsB;AACrE,IAAKC,KAAK,IAAKX,UAAU,CAACW,KAAK,CAACC,KAAK,EAAEC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AAC5G,IAAKN,KAAK,IAAKhB,WAAW,CAACgB,KAAK,CAACC,KAAK,CAAC;AACvC,CAAC;AAEM,MAAMM,yBAAyB,GAAAV,OAAA,CAAAU,yBAAA,GAAGT,yBAAM,CAACU,GAAgC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA,MAAOR,KAAK,IAAKX,UAAU,CAACW,KAAK,CAACC,KAAK,EAAEC,0BAAkB,CAACO,OAAO,EAAEL,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AACjH,MAAON,KAAK,IAAKhB,WAAW,CAACgB,KAAK,CAACC,KAAK,CAAC;AACzC;AACA;AACA;AACA,MAAOD,KAAK,IAAKhB,WAAW,CAACgB,KAAK,CAACC,KAAK,CAAC;AACzC;AACA;AACA;AACA,aAAaD,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACjE;AACA;AACA,aAAaN,KAAK,IAAII,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEL,KAAK,CAACM,KAAK,CAAC;AACjE;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"styles.cjs","names":["_styledComponents","_interopRequireDefault","require","_styles","_types","marginRight","size","Size","Small","Medium","FontStyles","textStyle","color","XSmall","ComponentXXSStyling","ComponentMStyling","ComponentSStyling","BreadcrumbItemLastStyles","exports","styled","label","props","$size","ComponentTextStyle","Bold","COLORS","generateToken","componentType","defaultVariant","theme","BreadcrumbContainerStyles","div","Regular","state"],"sources":["../../src/Breadcrumb/styles.ts"],"sourcesContent":["import styled from 'styled-components';\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles';\r\nimport { Size } from '../types';\r\n\r\nconst marginRight = (size: Size | undefined) => {\r\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';\r\n};\r\n\r\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\r\n  switch (size) {\r\n    case Size.XSmall:\r\n      return ComponentXXSStyling(textStyle, color);\r\n    case Size.Medium:\r\n      return ComponentMStyling(textStyle, color);\r\n    case Size.Small:\r\n    default:\r\n      return ComponentSStyling(textStyle, color);\r\n  }\r\n};\r\n\r\nexport const BreadcrumbItemLastStyles = styled.label<{ $size: Size }>`\r\n  ${(props) => FontStyles(props.$size, ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text',defaultVariant:'default'}, props.theme))}\r\n  ${(props) => marginRight(props.$size)}\r\n`;\r\n\r\nexport const BreadcrumbContainerStyles = styled.div<{ $size: Size | undefined }>`\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 48px;\r\n\r\n  a {\r\n    text-decoration: none;\r\n    ${(props) => FontStyles(props.$size, ComponentTextStyle.Regular, COLORS.generateToken({componentType: 'text-link'}, props.theme))}\r\n    ${(props) => marginRight(props.$size)}\r\n  }\r\n\r\n  .chevronicon {\r\n    ${(props) => marginRight(props.$size)}\r\n  }\r\n\r\n  a:hover {\r\n    color: ${props => COLORS.generateToken({componentType: 'text-link', defaultVariant: 'primary'}, props.theme)};\r\n  }\r\n  a:active {\r\n    color: ${props => COLORS.generateToken({componentType: 'text', state: 'active' }, props.theme)};\r\n  }\r\n`;\r\n"],"mappings":";;;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAEA,MAAMG,WAAW,GAAIC,IAAsB,IAAK;EAC9C,OAAOA,IAAI,IAAIC,WAAI,CAACC,KAAK,IAAIF,IAAI,IAAIC,WAAI,CAACE,MAAM,GAAG,oBAAoB,GAAG,oBAAoB;AAChG,CAAC;AAED,MAAMC,UAAU,GAAGA,CAACJ,IAAsB,EAAEK,SAA6B,EAAEC,KAAa,KAAK;EAC3F,QAAQN,IAAI;IACV,KAAKC,WAAI,CAACM,MAAM;MACd,OAAO,IAAAC,2BAAmB,EAACH,SAAS,EAAEC,KAAK,CAAC;IAC9C,KAAKL,WAAI,CAACE,MAAM;MACd,OAAO,IAAAM,yBAAiB,EAACJ,SAAS,EAAEC,KAAK,CAAC;IAC5C,KAAKL,WAAI,CAACC,KAAK;IACf;MACE,OAAO,IAAAQ,yBAAiB,EAACL,SAAS,EAAEC,KAAK,CAAC;EAC9C;AACF,CAAC;AAEM,MAAMK,wBAAwB,GAAAC,OAAA,CAAAD,wBAAA,GAAGE,yBAAM,CAACC,KAAsB;AACrE,IAAKC,KAAK,IAAKX,UAAU,CAACW,KAAK,CAACC,KAAK,EAAEC,0BAAkB,CAACC,IAAI,EAAEC,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAS,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC,CAAC;AACnJ,IAAKR,KAAK,IAAKhB,WAAW,CAACgB,KAAK,CAACC,KAAK,CAAC;AACvC,CAAC;AAEM,MAAMQ,yBAAyB,GAAAZ,OAAA,CAAAY,yBAAA,GAAGX,yBAAM,CAACY,GAAgC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA,MAAOV,KAAK,IAAKX,UAAU,CAACW,KAAK,CAACC,KAAK,EAAEC,0BAAkB,CAACS,OAAO,EAAEP,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAE;AAAW,CAAC,EAAEN,KAAK,CAACQ,KAAK,CAAC,CAAC;AACrI,MAAOR,KAAK,IAAKhB,WAAW,CAACgB,KAAK,CAACC,KAAK,CAAC;AACzC;AACA;AACA;AACA,MAAOD,KAAK,IAAKhB,WAAW,CAACgB,KAAK,CAACC,KAAK,CAAC;AACzC;AACA;AACA;AACA,aAAaD,KAAK,IAAII,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAE,WAAW;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEP,KAAK,CAACQ,KAAK,CAAC;AAChH;AACA;AACA,aAAaR,KAAK,IAAII,cAAM,CAACC,aAAa,CAAC;EAACC,aAAa,EAAE,MAAM;EAAEM,KAAK,EAAE;AAAS,CAAC,EAAEZ,KAAK,CAACQ,KAAK,CAAC;AAClG;AACA,CAAC","ignoreList":[]}

package/dist/Breadcrumb/styles.js

@@ -16,7 +16,10 @@ const FontStyles = (size, textStyle, color) => {
   }
 };
 export const BreadcrumbItemLastStyles = styled.label`
-  ${props => FontStyles(props.$size, ComponentTextStyle.Bold, COLORS.getColor('neutral_800', props.theme))}
+  ${props => FontStyles(props.$size, ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   ${props => marginRight(props.$size)}
 `;
 export const BreadcrumbContainerStyles = styled.div`
@@ -26,7 +29,9 @@ export const BreadcrumbContainerStyles = styled.div`
 
   a {
     text-decoration: none;
-    ${props => FontStyles(props.$size, ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
+    ${props => FontStyles(props.$size, ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text-link'
+}, props.theme))}
     ${props => marginRight(props.$size)}
   }
 
@@ -35,10 +40,16 @@ export const BreadcrumbContainerStyles = styled.div`
   }
 
   a:hover {
-    color: ${props => COLORS.getColor('primary_700', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text-link',
+  defaultVariant: 'primary'
+}, props.theme)};
   }
   a:active {
-    color: ${props => COLORS.getColor('primary_800', props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
   }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/Breadcrumb/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXXSStyling","Size","marginRight","size","Small","Medium","FontStyles","textStyle","color","XSmall","BreadcrumbItemLastStyles","label","props","$size","Bold","getColor","theme","BreadcrumbContainerStyles","div","Regular"],"sources":["../../src/Breadcrumb/styles.ts"],"sourcesContent":["import styled from 'styled-components';\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles';\r\nimport { Size } from '../types';\r\n\r\nconst marginRight = (size: Size | undefined) => {\r\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';\r\n};\r\n\r\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\r\n  switch (size) {\r\n    case Size.XSmall:\r\n      return ComponentXXSStyling(textStyle, color);\r\n    case Size.Medium:\r\n      return ComponentMStyling(textStyle, color);\r\n    case Size.Small:\r\n    default:\r\n      return ComponentSStyling(textStyle, color);\r\n  }\r\n};\r\n\r\nexport const BreadcrumbItemLastStyles = styled.label<{ $size: Size }>`\r\n  ${(props) => FontStyles(props.$size, ComponentTextStyle.Bold, COLORS.getColor('neutral_800', props.theme))}\r\n  ${(props) => marginRight(props.$size)}\r\n`;\r\n\r\nexport const BreadcrumbContainerStyles = styled.div<{ $size: Size | undefined }>`\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 48px;\r\n\r\n  a {\r\n    text-decoration: none;\r\n    ${(props) => FontStyles(props.$size, ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    ${(props) => marginRight(props.$size)}\r\n  }\r\n\r\n  .chevronicon {\r\n    ${(props) => marginRight(props.$size)}\r\n  }\r\n\r\n  a:hover {\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n  a:active {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n`;\r\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,mBAAmB,QAAQ,WAAW;AACjH,SAASC,IAAI,QAAQ,UAAU;AAE/B,MAAMC,WAAW,GAAIC,IAAsB,IAAK;EAC9C,OAAOA,IAAI,IAAIF,IAAI,CAACG,KAAK,IAAID,IAAI,IAAIF,IAAI,CAACI,MAAM,GAAG,oBAAoB,GAAG,oBAAoB;AAChG,CAAC;AAED,MAAMC,UAAU,GAAGA,CAACH,IAAsB,EAAEI,SAA6B,EAAEC,KAAa,KAAK;EAC3F,QAAQL,IAAI;IACV,KAAKF,IAAI,CAACQ,MAAM;MACd,OAAOT,mBAAmB,CAACO,SAAS,EAAEC,KAAK,CAAC;IAC9C,KAAKP,IAAI,CAACI,MAAM;MACd,OAAOR,iBAAiB,CAACU,SAAS,EAAEC,KAAK,CAAC;IAC5C,KAAKP,IAAI,CAACG,KAAK;IACf;MACE,OAAON,iBAAiB,CAACS,SAAS,EAAEC,KAAK,CAAC;EAC9C;AACF,CAAC;AAED,OAAO,MAAME,wBAAwB,GAAGf,MAAM,CAACgB,KAAsB;AACrE,IAAKC,KAAK,IAAKN,UAAU,CAACM,KAAK,CAACC,KAAK,EAAEd,kBAAkB,CAACe,IAAI,EAAElB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC,CAAC;AAC5G,IAAKJ,KAAK,IAAKV,WAAW,CAACU,KAAK,CAACC,KAAK,CAAC;AACvC,CAAC;AAED,OAAO,MAAMI,yBAAyB,GAAGtB,MAAM,CAACuB,GAAgC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA,MAAON,KAAK,IAAKN,UAAU,CAACM,KAAK,CAACC,KAAK,EAAEd,kBAAkB,CAACoB,OAAO,EAAEvB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC,CAAC;AACjH,MAAOJ,KAAK,IAAKV,WAAW,CAACU,KAAK,CAACC,KAAK,CAAC;AACzC;AACA;AACA;AACA,MAAOD,KAAK,IAAKV,WAAW,CAACU,KAAK,CAACC,KAAK,CAAC;AACzC;AACA;AACA;AACA,aAAaD,KAAK,IAAIhB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AACjE;AACA;AACA,aAAaJ,KAAK,IAAIhB,MAAM,CAACmB,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AACjE;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"styles.js","names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXXSStyling","Size","marginRight","size","Small","Medium","FontStyles","textStyle","color","XSmall","BreadcrumbItemLastStyles","label","props","$size","Bold","generateToken","componentType","defaultVariant","theme","BreadcrumbContainerStyles","div","Regular","state"],"sources":["../../src/Breadcrumb/styles.ts"],"sourcesContent":["import styled from 'styled-components';\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles';\r\nimport { Size } from '../types';\r\n\r\nconst marginRight = (size: Size | undefined) => {\r\n  return size == Size.Small || size == Size.Medium ? 'margin-right: 8px;' : 'margin-right: 4px;';\r\n};\r\n\r\nconst FontStyles = (size: Size | undefined, textStyle: ComponentTextStyle, color: string) => {\r\n  switch (size) {\r\n    case Size.XSmall:\r\n      return ComponentXXSStyling(textStyle, color);\r\n    case Size.Medium:\r\n      return ComponentMStyling(textStyle, color);\r\n    case Size.Small:\r\n    default:\r\n      return ComponentSStyling(textStyle, color);\r\n  }\r\n};\r\n\r\nexport const BreadcrumbItemLastStyles = styled.label<{ $size: Size }>`\r\n  ${(props) => FontStyles(props.$size, ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text',defaultVariant:'default'}, props.theme))}\r\n  ${(props) => marginRight(props.$size)}\r\n`;\r\n\r\nexport const BreadcrumbContainerStyles = styled.div<{ $size: Size | undefined }>`\r\n  display: flex;\r\n  align-items: center;\r\n  min-height: 48px;\r\n\r\n  a {\r\n    text-decoration: none;\r\n    ${(props) => FontStyles(props.$size, ComponentTextStyle.Regular, COLORS.generateToken({componentType: 'text-link'}, props.theme))}\r\n    ${(props) => marginRight(props.$size)}\r\n  }\r\n\r\n  .chevronicon {\r\n    ${(props) => marginRight(props.$size)}\r\n  }\r\n\r\n  a:hover {\r\n    color: ${props => COLORS.generateToken({componentType: 'text-link', defaultVariant: 'primary'}, props.theme)};\r\n  }\r\n  a:active {\r\n    color: ${props => COLORS.generateToken({componentType: 'text', state: 'active' }, props.theme)};\r\n  }\r\n`;\r\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,mBAAmB,QAAQ,WAAW;AACjH,SAASC,IAAI,QAAQ,UAAU;AAE/B,MAAMC,WAAW,GAAIC,IAAsB,IAAK;EAC9C,OAAOA,IAAI,IAAIF,IAAI,CAACG,KAAK,IAAID,IAAI,IAAIF,IAAI,CAACI,MAAM,GAAG,oBAAoB,GAAG,oBAAoB;AAChG,CAAC;AAED,MAAMC,UAAU,GAAGA,CAACH,IAAsB,EAAEI,SAA6B,EAAEC,KAAa,KAAK;EAC3F,QAAQL,IAAI;IACV,KAAKF,IAAI,CAACQ,MAAM;MACd,OAAOT,mBAAmB,CAACO,SAAS,EAAEC,KAAK,CAAC;IAC9C,KAAKP,IAAI,CAACI,MAAM;MACd,OAAOR,iBAAiB,CAACU,SAAS,EAAEC,KAAK,CAAC;IAC5C,KAAKP,IAAI,CAACG,KAAK;IACf;MACE,OAAON,iBAAiB,CAACS,SAAS,EAAEC,KAAK,CAAC;EAC9C;AACF,CAAC;AAED,OAAO,MAAME,wBAAwB,GAAGf,MAAM,CAACgB,KAAsB;AACrE,IAAKC,KAAK,IAAKN,UAAU,CAACM,KAAK,CAACC,KAAK,EAAEd,kBAAkB,CAACe,IAAI,EAAElB,MAAM,CAACmB,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAS,CAAC,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC;AACnJ,IAAKN,KAAK,IAAKV,WAAW,CAACU,KAAK,CAACC,KAAK,CAAC;AACvC,CAAC;AAED,OAAO,MAAMM,yBAAyB,GAAGxB,MAAM,CAACyB,GAAgC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA,MAAOR,KAAK,IAAKN,UAAU,CAACM,KAAK,CAACC,KAAK,EAAEd,kBAAkB,CAACsB,OAAO,EAAEzB,MAAM,CAACmB,aAAa,CAAC;EAACC,aAAa,EAAE;AAAW,CAAC,EAAEJ,KAAK,CAACM,KAAK,CAAC,CAAC;AACrI,MAAON,KAAK,IAAKV,WAAW,CAACU,KAAK,CAACC,KAAK,CAAC;AACzC;AACA;AACA;AACA,MAAOD,KAAK,IAAKV,WAAW,CAACU,KAAK,CAACC,KAAK,CAAC;AACzC;AACA;AACA;AACA,aAAaD,KAAK,IAAIhB,MAAM,CAACmB,aAAa,CAAC;EAACC,aAAa,EAAE,WAAW;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEL,KAAK,CAACM,KAAK,CAAC;AAChH;AACA;AACA,aAAaN,KAAK,IAAIhB,MAAM,CAACmB,aAAa,CAAC;EAACC,aAAa,EAAE,MAAM;EAAEM,KAAK,EAAE;AAAS,CAAC,EAAEV,KAAK,CAACM,KAAK,CAAC;AAClG;AACA,CAAC","ignoreList":[]}

package/dist/Button/BackButton.cjs

@@ -34,7 +34,13 @@ const BackButtonContainerStyles = _styledComponents.default.button`
   background-color: transparent;
   cursor: pointer;
 
-  ${props => props.$size === _types.Size.XSmall ? (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme)) : (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme))};
+  ${props => props.$size === _types.Size.XSmall ? (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)) : (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))};
   font-feature-settings: 'liga' off;
 
   & > ${BackButtonContentContainer} {
@@ -63,8 +69,14 @@ const BackButtonContainerStyles = _styledComponents.default.button`
 
   &:hover > ${BackButtonContentContainer},
   &.hover-state > ${BackButtonContentContainer} {
-    background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
-    color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
   }
   &:focus > ${BackButtonContentContainer},
   &.focus-state > ${BackButtonContentContainer} {
@@ -72,14 +84,23 @@ const BackButtonContainerStyles = _styledComponents.default.button`
   }
   &:active > ${BackButtonContentContainer},
   &.active-state > ${BackButtonContentContainer} {
-    background-color: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
-    color: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
   }
   &:disabled {
     cursor: not-allowed;
   }
   &:disabled > ${BackButtonContentContainer} {
-    color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
+    color: ${props => _styles.COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)} !important;
     background-color: transparent !important;
   }
 `;

package/dist/Button/BackButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BackButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styles","_types","_icons","_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","BackButtonContentContainer","exports","styled","div","BackButtonContainerStyles","button","props","$size","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Bold","COLORS","getColor","theme","ComponentSStyling","focusStyles","BackButton","_ref","children","size","Small","dataTestId","_objectWithoutProperties2","jsx","onMouseDown","defaultOnMouseDownHandler","jsxs","SystemIcons","ArrowLineLeft","propTypes","disabled","_propTypes","bool","_default"],"sources":["../../src/Button/BackButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, focusStyles} from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { SystemIcons } from '../icons';\r\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nexport const BackButtonContentContainer = styled.div``;\r\n\r\nconst BackButtonContainerStyles = styled.button<{$size: Size, dataTestId: string | undefined}>`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  padding: 0;\r\n  margin: 0;\r\n  outline:none;\r\n  max-width: max-content;\r\n  display: flex;\r\n  align-items: center;\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n\r\n  ${(props) => (props.$size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)))};\r\n  font-feature-settings: 'liga' off;\r\n\r\n  & > ${BackButtonContentContainer} {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    max-width: max-content;\r\n    padding: 4px 4px 4px 0;\r\n    border-radius: 4px;\r\n    cursor: inherit;\r\n    min-width: 64px;\r\n\r\n  }\r\n\r\n  & > ${BackButtonContentContainer} > span {\r\n    display: flex;\r\n    cursor: inherit;\r\n  }\r\n  & > ${BackButtonContentContainer} > label {\r\n    display: flex;\r\n    cursor: inherit;\r\n    flex-grow: 1;\r\n    justify-content: center;\r\n  }\r\n\r\n  &:hover > ${BackButtonContentContainer},\r\n  &.hover-state > ${BackButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n  &:focus > ${BackButtonContentContainer},\r\n  &.focus-state > ${BackButtonContentContainer} {\r\n    ${focusStyles}\r\n  }\r\n  &:active > ${BackButtonContentContainer},\r\n  &.active-state > ${BackButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > ${BackButtonContentContainer} {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\nexport interface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n    /**\r\n   * Required. The size of the back button. Can be 'Small' or 'XSmall'.\r\n   */\r\n  size: Size.Small | Size.XSmall;\r\n    /**\r\n   * Optional. A boolean indicating whether the back button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n}\r\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size: size = Size.Small, dataTestId, ...props }) => {\r\n  return (\r\n    <BackButtonContainerStyles {...props} $size={size} onMouseDown={defaultOnMouseDownHandler} dataTestId={dataTestId}>\r\n      <BackButtonContentContainer>\r\n        <span aria-hidden=\"true\">\r\n          <SystemIcons.ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\r\n        </span>\r\n        <label>{children}</label>\r\n      </BackButtonContentContainer>\r\n    </BackButtonContainerStyles>\r\n  );\r\n};\r\n\r\nexport default BackButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BackButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styles","_types","_icons","_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","BackButtonContentContainer","exports","styled","div","BackButtonContainerStyles","button","props","$size","Size","XSmall","ComponentXSStyling","ComponentTextStyle","Bold","COLORS","generateToken","componentType","defaultVariant","theme","ComponentSStyling","state","focusStyles","BackButton","_ref","children","size","Small","dataTestId","_objectWithoutProperties2","jsx","onMouseDown","defaultOnMouseDownHandler","jsxs","SystemIcons","ArrowLineLeft","propTypes","disabled","_propTypes","bool","_default"],"sources":["../../src/Button/BackButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, focusStyles} from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { SystemIcons } from '../icons';\r\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nexport const BackButtonContentContainer = styled.div``;\r\n\r\nconst BackButtonContainerStyles = styled.button<{$size: Size, dataTestId: string | undefined}>`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  padding: 0;\r\n  margin: 0;\r\n  outline:none;\r\n  max-width: max-content;\r\n  display: flex;\r\n  align-items: center;\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n\r\n  ${(props) => (props.$size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)) \r\n    : ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)))};\r\n  font-feature-settings: 'liga' off;\r\n\r\n  & > ${BackButtonContentContainer} {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    max-width: max-content;\r\n    padding: 4px 4px 4px 0;\r\n    border-radius: 4px;\r\n    cursor: inherit;\r\n    min-width: 64px;\r\n\r\n  }\r\n\r\n  & > ${BackButtonContentContainer} > span {\r\n    display: flex;\r\n    cursor: inherit;\r\n  }\r\n  & > ${BackButtonContentContainer} > label {\r\n    display: flex;\r\n    cursor: inherit;\r\n    flex-grow: 1;\r\n    justify-content: center;\r\n  }\r\n\r\n  &:hover > ${BackButtonContentContainer},\r\n  &.hover-state > ${BackButtonContentContainer} {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)};\r\n  }\r\n  &:focus > ${BackButtonContentContainer},\r\n  &.focus-state > ${BackButtonContentContainer} {\r\n    ${focusStyles}\r\n  }\r\n  &:active > ${BackButtonContentContainer},\r\n  &.active-state > ${BackButtonContentContainer} {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > ${BackButtonContentContainer} {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)} !important;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\nexport interface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n    /**\r\n   * Required. The size of the back button. Can be 'Small' or 'XSmall'.\r\n   */\r\n  size: Size.Small | Size.XSmall;\r\n    /**\r\n   * Optional. A boolean indicating whether the back button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n}\r\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size: size = Size.Small, dataTestId, ...props }) => {\r\n  return (\r\n    <BackButtonContainerStyles {...props} $size={size} onMouseDown={defaultOnMouseDownHandler} dataTestId={dataTestId}>\r\n      <BackButtonContentContainer>\r\n        <span aria-hidden=\"true\">\r\n          <SystemIcons.ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\r\n        </span>\r\n        <label>{children}</label>\r\n      </BackButtonContentContainer>\r\n    </BackButtonContainerStyles>\r\n  );\r\n};\r\n\r\nexport default BackButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Button/BackButton.js

@@ -26,7 +26,13 @@ const BackButtonContainerStyles = styled.button`
   background-color: transparent;
   cursor: pointer;
 
-  ${props => props.$size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))};
+  ${props => props.$size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme)) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'subtle'
+}, props.theme))};
   font-feature-settings: 'liga' off;
 
   & > ${BackButtonContentContainer} {
@@ -55,8 +61,14 @@ const BackButtonContainerStyles = styled.button`
 
   &:hover > ${BackButtonContentContainer},
   &.hover-state > ${BackButtonContentContainer} {
-    background-color: ${props => COLORS.getColor('primary_20', props.theme)};
-    color: ${props => COLORS.getColor('primary_700', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'hover'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'hover'
+}, props.theme)};
   }
   &:focus > ${BackButtonContentContainer},
   &.focus-state > ${BackButtonContentContainer} {
@@ -64,14 +76,23 @@ const BackButtonContainerStyles = styled.button`
   }
   &:active > ${BackButtonContentContainer},
   &.active-state > ${BackButtonContentContainer} {
-    background-color: ${props => COLORS.getColor('primary_100', props.theme)};
-    color: ${props => COLORS.getColor('primary_800', props.theme)};
+    background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  state: 'active'
+}, props.theme)};
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'active'
+}, props.theme)};
   }
   &:disabled {
     cursor: not-allowed;
   }
   &:disabled > ${BackButtonContentContainer} {
-    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+    color: ${props => COLORS.generateToken({
+  componentType: 'text',
+  state: 'disabled'
+}, props.theme)} !important;
     background-color: transparent !important;
   }
 `;

package/dist/Button/BackButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"BackButton.js","names":["React","styled","COLORS","focusStyles","Size","SystemIcons","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","BackButtonContentContainer","div","BackButtonContainerStyles","button","props","$size","XSmall","Bold","getColor","theme","BackButton","_ref","children","size","Small","dataTestId","_objectWithoutProperties","_excluded","_objectSpread","onMouseDown","ArrowLineLeft","propTypes","disabled","_pt","bool"],"sources":["../../src/Button/BackButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, focusStyles} from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { SystemIcons } from '../icons';\r\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nexport const BackButtonContentContainer = styled.div``;\r\n\r\nconst BackButtonContainerStyles = styled.button<{$size: Size, dataTestId: string | undefined}>`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  padding: 0;\r\n  margin: 0;\r\n  outline:none;\r\n  max-width: max-content;\r\n  display: flex;\r\n  align-items: center;\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n\r\n  ${(props) => (props.$size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)) : ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme)))};\r\n  font-feature-settings: 'liga' off;\r\n\r\n  & > ${BackButtonContentContainer} {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    max-width: max-content;\r\n    padding: 4px 4px 4px 0;\r\n    border-radius: 4px;\r\n    cursor: inherit;\r\n    min-width: 64px;\r\n\r\n  }\r\n\r\n  & > ${BackButtonContentContainer} > span {\r\n    display: flex;\r\n    cursor: inherit;\r\n  }\r\n  & > ${BackButtonContentContainer} > label {\r\n    display: flex;\r\n    cursor: inherit;\r\n    flex-grow: 1;\r\n    justify-content: center;\r\n  }\r\n\r\n  &:hover > ${BackButtonContentContainer},\r\n  &.hover-state > ${BackButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n  &:focus > ${BackButtonContentContainer},\r\n  &.focus-state > ${BackButtonContentContainer} {\r\n    ${focusStyles}\r\n  }\r\n  &:active > ${BackButtonContentContainer},\r\n  &.active-state > ${BackButtonContentContainer} {\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > ${BackButtonContentContainer} {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\nexport interface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n    /**\r\n   * Required. The size of the back button. Can be 'Small' or 'XSmall'.\r\n   */\r\n  size: Size.Small | Size.XSmall;\r\n    /**\r\n   * Optional. A boolean indicating whether the back button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n}\r\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size: size = Size.Small, dataTestId, ...props }) => {\r\n  return (\r\n    <BackButtonContainerStyles {...props} $size={size} onMouseDown={defaultOnMouseDownHandler} dataTestId={dataTestId}>\r\n      <BackButtonContentContainer>\r\n        <span aria-hidden=\"true\">\r\n          <SystemIcons.ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\r\n        </span>\r\n        <label>{children}</label>\r\n      </BackButtonContentContainer>\r\n    </BackButtonContainerStyles>\r\n  );\r\n};\r\n\r\nexport default BackButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"BackButton.js","names":["React","styled","COLORS","focusStyles","Size","SystemIcons","ComponentTextStyle","ComponentSStyling","ComponentXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","BackButtonContentContainer","div","BackButtonContainerStyles","button","props","$size","XSmall","Bold","generateToken","componentType","defaultVariant","theme","state","BackButton","_ref","children","size","Small","dataTestId","_objectWithoutProperties","_excluded","_objectSpread","onMouseDown","ArrowLineLeft","propTypes","disabled","_pt","bool"],"sources":["../../src/Button/BackButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {COLORS, focusStyles} from '../styles';\r\nimport { Size, Testable } from '../types';\r\nimport { SystemIcons } from '../icons';\r\nimport { ComponentTextStyle, ComponentSStyling, ComponentXSStyling } from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nexport const BackButtonContentContainer = styled.div``;\r\n\r\nconst BackButtonContainerStyles = styled.button<{$size: Size, dataTestId: string | undefined}>`\r\n  box-sizing: border-box;\r\n  min-height: 48px;\r\n  padding: 0;\r\n  margin: 0;\r\n  outline:none;\r\n  max-width: max-content;\r\n  display: flex;\r\n  align-items: center;\r\n  border: none;\r\n  background-color: transparent;\r\n  cursor: pointer;\r\n\r\n  ${(props) => (props.$size === Size.XSmall ? ComponentXSStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)) \r\n    : ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)))};\r\n  font-feature-settings: 'liga' off;\r\n\r\n  & > ${BackButtonContentContainer} {\r\n    display: flex;\r\n    flex-direction: row;\r\n    align-items: center;\r\n    justify-content: flex-start;\r\n    max-width: max-content;\r\n    padding: 4px 4px 4px 0;\r\n    border-radius: 4px;\r\n    cursor: inherit;\r\n    min-width: 64px;\r\n\r\n  }\r\n\r\n  & > ${BackButtonContentContainer} > span {\r\n    display: flex;\r\n    cursor: inherit;\r\n  }\r\n  & > ${BackButtonContentContainer} > label {\r\n    display: flex;\r\n    cursor: inherit;\r\n    flex-grow: 1;\r\n    justify-content: center;\r\n  }\r\n\r\n  &:hover > ${BackButtonContentContainer},\r\n  &.hover-state > ${BackButtonContentContainer} {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'hover' }, props.theme)};\r\n  }\r\n  &:focus > ${BackButtonContentContainer},\r\n  &.focus-state > ${BackButtonContentContainer} {\r\n    ${focusStyles}\r\n  }\r\n  &:active > ${BackButtonContentContainer},\r\n  &.active-state > ${BackButtonContentContainer} {\r\n    background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'active' }, props.theme)};\r\n  }\r\n  &:disabled {\r\n    cursor: not-allowed;\r\n  }\r\n  &:disabled > ${BackButtonContentContainer} {\r\n    color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)} !important;\r\n    background-color: transparent !important;\r\n  }\r\n`;\r\n\r\nexport interface BackButtonProps extends Testable, React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n    /**\r\n   * Required. The size of the back button. Can be 'Small' or 'XSmall'.\r\n   */\r\n  size: Size.Small | Size.XSmall;\r\n    /**\r\n   * Optional. A boolean indicating whether the back button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n}\r\nconst BackButton: React.FunctionComponent<BackButtonProps> = ({ children, size: size = Size.Small, dataTestId, ...props }) => {\r\n  return (\r\n    <BackButtonContainerStyles {...props} $size={size} onMouseDown={defaultOnMouseDownHandler} dataTestId={dataTestId}>\r\n      <BackButtonContentContainer>\r\n        <span aria-hidden=\"true\">\r\n          <SystemIcons.ArrowLineLeft size={size === Size.XSmall ? '20' : '24'} />\r\n        </span>\r\n        <label>{children}</label>\r\n      </BackButtonContentContainer>\r\n    </BackButtonContainerStyles>\r\n  );\r\n};\r\n\r\nexport default BackButton;\r\n"],"mappings":"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","ignoreList":[]}