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

package/dist/SegmentControl/SegmentControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentControl.cjs","names":["_react","_interopRequireDefault","require","_types","_styledComponents","_styles","_common","_jsxRuntime","_excluded","_excluded2","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","SegmentControlItemContent","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","SegmentControlItemBackground","SegmentControlItemWrapper","focusStyles","Z_INDEXES","hover","state","active","isOnFill","SegmentControlWrapper","ComponentSStyling","ComponentTextStyle","Bold","ComponentMStyling","SegmentControl","_ref","items","size","Size","Medium","onChange","selected","className","rest","_objectWithoutProperties2","onKeyPress","item","key","document","activeElement","blur","disabled","onClick","jsx","children","map","a","i","content","tabIndex","undefined","onMouseDown","defaultOnMouseDownHandler","propTypes","_propTypes","arrayOf","shape","string","isRequired","bool","oneOfType","node","func","_default"],"sources":["../../src/SegmentControl/SegmentControl.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n`\r\n\r\nexport const SegmentControlItemBackground = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n  padding: 4px 0px;\r\n`;\r\n\r\nexport const SegmentControlItemWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 1;\r\n  cursor: pointer;\r\n  min-height: 48px;\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n\r\n    ${SegmentControlItemContent} {\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  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n\r\n    ${SegmentControlItemContent} {\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  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: transparent;\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.selected {\r\n    cursor: default;\r\n    pointer-events: none;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'primary' }, props.theme)};\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.selected.disabled {\r\n    cursor: not-allowed;\r\n    pointer-events: unset;\r\n    \r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled'}, props.theme)};\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', isOnFill: true, state:'disabled' }, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const SegmentControlWrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  ${SegmentControlItemWrapper}:first-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-left-radius: 12px;\r\n      border-top-left-radius: 12px;\r\n      padding-left: 4px;\r\n    }\r\n  }\r\n\r\n  ${SegmentControlItemWrapper}:last-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-right-radius: 12px;\r\n      border-top-right-radius: 12px;\r\n      padding-right: 4px;\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 32px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 40px;\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'content' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /**\r\n   * Required. The key of the segment control item. This should be unique among all items in the segment control.\r\n   */\r\n  key: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the segment control item is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Required. The content of the segment control item. This can be a string or a React node.\r\n   */\r\n  content: React.ReactNode | string;\r\n}\r\n\r\nexport interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n  /**\r\n   * Required. An array of SegmentControlItem objects representing the items in the segment control.\r\n   */\r\n  items: SegmentControlItem[];\r\n\r\n  /**\r\n   * Optional. The key of the currently selected item in the segment control. In order to change selected item\r\n   * when user clicks on it, you should update this prop to display item as 'selected'.\r\n   */\r\n  selected: string;\r\n\r\n  /**\r\n   * Required. A function to be called when the selected item in the segment control changes.\r\n   * It should take a string representing the key of the new selected item.\r\n   */\r\n  onChange: (value: string) => void;\r\n\r\n  /**\r\n   * Optional. The size of the segment control. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\r\n                                                                        items,\r\n                                                                        size = Size.Medium,\r\n                                                                        onChange,\r\n                                                                        selected,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      //@ts-ignore\r\n      document?.activeElement?.blur();\r\n      !item.disabled && onChange(item.key);\r\n    }\r\n  };\r\n\r\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\r\n    !item.disabled && onChange(item.key);\r\n  }\r\n\r\n  return (\r\n    <SegmentControlWrapper className={`${size} ${className || ''}`} {...rest}>\r\n      {items.map((a, i) => {\r\n        const {key, disabled, content, className, ...rest} = a;\r\n        return <SegmentControlItemWrapper key={a.key || i}\r\n                                          className={(className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\r\n                                          tabIndex={a.disabled || a.key === selected ? -1 : 0}\r\n                                          onClick={a.disabled ? undefined : (e) => onClick(e, a)}\r\n                                          onMouseDown={defaultOnMouseDownHandler}\r\n                                          onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}\r\n                                          {...rest}>\r\n          <SegmentControlItemBackground>\r\n            <SegmentControlItemContent>\r\n              {a.content}\r\n            </SegmentControlItemContent>\r\n          </SegmentControlItemBackground>\r\n        </SegmentControlItemWrapper>;\r\n      })\r\n      }\r\n    </SegmentControlWrapper>\r\n  );\r\n};\r\n\r\nexport default SegmentControl;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SegmentControl.cjs","names":["_react","_interopRequireDefault","require","_types","_styledComponents","_styles","_common","_jsxRuntime","_excluded","_excluded2","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","SegmentControlItemContent","exports","styled","div","props","COLORS","getColor","theme","SegmentControlItemBackground","SegmentControlItemWrapper","focusStyles","Z_INDEXES","hover","active","SegmentControlWrapper","ComponentSStyling","ComponentTextStyle","Bold","ComponentMStyling","SegmentControl","_ref","items","size","Size","Medium","onChange","selected","className","rest","_objectWithoutProperties2","onKeyPress","item","key","document","activeElement","blur","disabled","onClick","jsx","children","map","a","i","content","tabIndex","undefined","onMouseDown","defaultOnMouseDownHandler","propTypes","_propTypes","arrayOf","shape","string","isRequired","bool","oneOfType","node","func","_default"],"sources":["../../src/SegmentControl/SegmentControl.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`\r\n\r\nexport const SegmentControlItemBackground = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  padding: 4px 0px;\r\n`;\r\n\r\nexport const SegmentControlItemWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 1;\r\n  cursor: pointer;\r\n  min-height: 48px;\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.getColor('primary_200', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: transparent;\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.selected {\r\n    cursor: default;\r\n    pointer-events: none;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n      color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.selected.disabled {\r\n    cursor: not-allowed;\r\n    pointer-events: unset;\r\n    \r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const SegmentControlWrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  ${SegmentControlItemWrapper}:first-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-left-radius: 12px;\r\n      border-top-left-radius: 12px;\r\n      padding-left: 4px;\r\n    }\r\n  }\r\n\r\n  ${SegmentControlItemWrapper}:last-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-right-radius: 12px;\r\n      border-top-right-radius: 12px;\r\n      padding-right: 4px;\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 32px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 40px;\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'content' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /**\r\n   * Required. The key of the segment control item. This should be unique among all items in the segment control.\r\n   */\r\n  key: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the segment control item is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Required. The content of the segment control item. This can be a string or a React node.\r\n   */\r\n  content: React.ReactNode | string;\r\n}\r\n\r\nexport interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n  /**\r\n   * Required. An array of SegmentControlItem objects representing the items in the segment control.\r\n   */\r\n  items: SegmentControlItem[];\r\n\r\n  /**\r\n   * Optional. The key of the currently selected item in the segment control. In order to change selected item\r\n   * when user clicks on it, you should update this prop to display item as 'selected'.\r\n   */\r\n  selected: string;\r\n\r\n  /**\r\n   * Required. A function to be called when the selected item in the segment control changes.\r\n   * It should take a string representing the key of the new selected item.\r\n   */\r\n  onChange: (value: string) => void;\r\n\r\n  /**\r\n   * Optional. The size of the segment control. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\r\n                                                                        items,\r\n                                                                        size = Size.Medium,\r\n                                                                        onChange,\r\n                                                                        selected,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      //@ts-ignore\r\n      document?.activeElement?.blur();\r\n      !item.disabled && onChange(item.key);\r\n    }\r\n  };\r\n\r\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\r\n    !item.disabled && onChange(item.key);\r\n  }\r\n\r\n  return (\r\n    <SegmentControlWrapper className={`${size} ${className || ''}`} {...rest}>\r\n      {items.map((a, i) => {\r\n        const {key, disabled, content, className, ...rest} = a;\r\n        return <SegmentControlItemWrapper key={a.key || i}\r\n                                          className={(className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\r\n                                          tabIndex={a.disabled || a.key === selected ? -1 : 0}\r\n                                          onClick={a.disabled ? undefined : (e) => onClick(e, a)}\r\n                                          onMouseDown={defaultOnMouseDownHandler}\r\n                                          onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}\r\n                                          {...rest}>\r\n          <SegmentControlItemBackground>\r\n            <SegmentControlItemContent>\r\n              {a.content}\r\n            </SegmentControlItemContent>\r\n          </SegmentControlItemBackground>\r\n        </SegmentControlItemWrapper>;\r\n      })\r\n      }\r\n    </SegmentControlWrapper>\r\n  );\r\n};\r\n\r\nexport default SegmentControl;\r\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AAAoD,IAAAK,WAAA,GAAAL,OAAA;AAAA,MAAAM,SAAA;EAAAC,UAAA;AAAA,SAAAC,QAAAC,CAAA,EAAAC,CAAA,QAAAC,CAAA,GAAAC,MAAA,CAAAC,IAAA,CAAAJ,CAAA,OAAAG,MAAA,CAAAE,qBAAA,QAAAC,CAAA,GAAAH,MAAA,CAAAE,qBAAA,CAAAL,CAAA,GAAAC,CAAA,KAAAK,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAAN,CAAA,WAAAE,MAAA,CAAAK,wBAAA,CAAAR,CAAA,EAAAC,CAAA,EAAAQ,UAAA,OAAAP,CAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,CAAA,EAAAI,CAAA,YAAAJ,CAAA;AAAA,SAAAU,cAAAZ,CAAA,aAAAC,CAAA,MAAAA,CAAA,GAAAY,SAAA,CAAAC,MAAA,EAAAb,CAAA,UAAAC,CAAA,WAAAW,SAAA,CAAAZ,CAAA,IAAAY,SAAA,CAAAZ,CAAA,QAAAA,CAAA,OAAAF,OAAA,CAAAI,MAAA,CAAAD,CAAA,OAAAa,OAAA,WAAAd,CAAA,QAAAe,gBAAA,CAAAC,OAAA,EAAAjB,CAAA,EAAAC,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAE,MAAA,CAAAe,yBAAA,GAAAf,MAAA,CAAAgB,gBAAA,CAAAnB,CAAA,EAAAG,MAAA,CAAAe,yBAAA,CAAAhB,CAAA,KAAAH,OAAA,CAAAI,MAAA,CAAAD,CAAA,GAAAa,OAAA,WAAAd,CAAA,IAAAE,MAAA,CAAAiB,cAAA,CAAApB,CAAA,EAAAC,CAAA,EAAAE,MAAA,CAAAK,wBAAA,CAAAN,CAAA,EAAAD,CAAA,iBAAAD,CAAA;AAG7C,MAAMqB,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,yBAAM,CAACC,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAWC,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC/D,CAAC;AAEM,MAAMC,4BAA4B,GAAAP,OAAA,CAAAO,4BAAA,GAAGN,yBAAM,CAACC,GAAG;AACtD;AACA;AACA;AACA;AACA,sBAAsBC,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEF,KAAK,CAACG,KAAK,CAAC;AACzE;AACA,CAAC;AAEM,MAAME,yBAAyB,GAAAR,OAAA,CAAAQ,yBAAA,GAAGP,yBAAM,CAACC,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMO,mBAAW;AACjB;AACA;AACA;AACA,eAAeC,iBAAS,CAACC,KAAK;AAC9B;AACA,MAAMZ,yBAAyB;AAC/B,0BAA0BI,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA,eAAeI,iBAAS,CAACE,MAAM;AAC/B;AACA,MAAMb,yBAAyB;AAC/B,0BAA0BI,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMP,yBAAyB;AAC/B;AACA,eAAeI,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMP,yBAAyB;AAC/B,0BAA0BI,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMP,yBAAyB;AAC/B,0BAA0BI,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAC9E,eAAeH,KAAK,IAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AACnE;AACA;AACA,CAAC;AAEM,MAAMO,qBAAqB,GAAAb,OAAA,CAAAa,qBAAA,GAAGZ,yBAAM,CAACC,GAAG;AAC/C;AACA;AACA;AACA;AACA;AACA,IAAIM,yBAAyB;AAC7B,MAAMD,4BAA4B;AAClC;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,yBAAyB;AAC7B,MAAMD,4BAA4B;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMR,yBAAyB;AAC/B,QAAQ,IAAAe,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA;AACA;AACA;AACA,MAAMjB,yBAAyB;AAC/B,QAAQ,IAAAkB,yBAAiB,EAACF,0BAAkB,CAACC,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA;AACA,CAAC;AA4CD,MAAME,cAA4D,GAAGC,IAAA,IAOO;EAAA,IAPN;MACEC,KAAK;MACLC,IAAI,GAAGC,WAAI,CAACC,MAAM;MAClBC,QAAQ;MACRC,QAAQ;MACRC;IAEF,CAAC,GAAAP,IAAA;IADIQ,IAAI,OAAAC,yBAAA,CAAAjC,OAAA,EAAAwB,IAAA,EAAA5C,SAAA;EAE7E,MAAMsD,UAAU,GAAGA,CAACnD,CAAsC,EAAEoD,IAAwB,KAAK;IACvF,IAAIpD,CAAC,CAACqD,GAAG,KAAK,OAAO,IAAIrD,CAAC,CAACqD,GAAG,KAAK,GAAG,EAAE;MACtC;MACAC,QAAQ,EAAEC,aAAa,EAAEC,IAAI,CAAC,CAAC;MAC/B,CAACJ,IAAI,CAACK,QAAQ,IAAIX,QAAQ,CAACM,IAAI,CAACC,GAAG,CAAC;IACtC;EACF,CAAC;EAED,MAAMK,OAAO,GAAGA,CAAC1D,CAAmB,EAAEoD,IAAwB,KAAK;IACjE,CAACA,IAAI,CAACK,QAAQ,IAAIX,QAAQ,CAACM,IAAI,CAACC,GAAG,CAAC;EACtC,CAAC;EAED,oBACE,IAAAzD,WAAA,CAAA+D,GAAA,EAACxB,qBAAqB,EAAAvB,aAAA,CAAAA,aAAA;IAACoC,SAAS,EAAE,GAAGL,IAAI,IAAIK,SAAS,IAAI,EAAE;EAAG,GAAKC,IAAI;IAAAW,QAAA,EACrElB,KAAK,CAACmB,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAK;MACnB,MAAM;UAACV,GAAG;UAAEI,QAAQ;UAAEO,OAAO;UAAEhB;QAAkB,CAAC,GAAGc,CAAC;QAATb,IAAI,OAAAC,yBAAA,CAAAjC,OAAA,EAAI6C,CAAC,EAAAhE,UAAA;MACtD,oBAAO,IAAAF,WAAA,CAAA+D,GAAA,EAAC7B,yBAAyB,EAAAlB,aAAA,CAAAA,aAAA;QACCoC,SAAS,EAAE,CAACA,SAAS,IAAI,EAAE,KAAKc,CAAC,CAACL,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,IAAIK,CAAC,CAACT,GAAG,KAAKN,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAE;QACxGkB,QAAQ,EAAEH,CAAC,CAACL,QAAQ,IAAIK,CAAC,CAACT,GAAG,KAAKN,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QACpDW,OAAO,EAAEI,CAAC,CAACL,QAAQ,GAAGS,SAAS,GAAIlE,CAAC,IAAK0D,OAAO,CAAC1D,CAAC,EAAE8D,CAAC,CAAE;QACvDK,WAAW,EAAEC,iCAA0B;QACvCjB,UAAU,EAAEW,CAAC,CAACL,QAAQ,GAAGS,SAAS,GAAIlE,CAAC,IAAKmD,UAAU,CAACnD,CAAC,EAAE8D,CAAC;MAAE,GACzDb,IAAI;QAAAW,QAAA,eACxC,IAAAhE,WAAA,CAAA+D,GAAA,EAAC9B,4BAA4B;UAAA+B,QAAA,eAC3B,IAAAhE,WAAA,CAAA+D,GAAA,EAACtC,yBAAyB;YAAAuC,QAAA,EACvBE,CAAC,CAACE;UAAO,CACe;QAAC,CACA;MAAC,IAXMF,CAAC,CAACT,GAAG,IAAIU,CAYrB,CAAC;IAC9B,CAAC;EAAC,EAEmB,CAAC;AAE5B,CAAC;AAACvB,cAAA,CAAA6B,SAAA;EA7DA3B,KAAK,EAAA4B,UAAA,CAAArD,OAAA,CAAAsD,OAAA,CAAAD,UAAA,CAAArD,OAAA,CAAAuD,KAAA;IAjBLnB,GAAG,EAAAiB,UAAA,CAAArD,OAAA,CAAAwD,MAAA,CAAAC,UAAA;IAKHjB,QAAQ,EAAAa,UAAA,CAAArD,OAAA,CAAA0D,IAAA;IAKRX,OAAO,EAAAM,UAAA,CAAArD,OAAA,CAAA2D,SAAA,EAAAN,UAAA,CAAArD,OAAA,CAAA4D,IAAA,EAAAP,UAAA,CAAArD,OAAA,CAAAwD,MAAA,GAAAC;EAAA,IAAAA,UAAA;EAaP3B,QAAQ,EAAAuB,UAAA,CAAArD,OAAA,CAAAwD,MAAA,CAAAC,UAAA;EAMR5B,QAAQ,EAAAwB,UAAA,CAAArD,OAAA,CAAA6D,IAAA,CAAAJ;AAAA;AAAA,IAAAK,QAAA,GAAAzD,OAAA,CAAAL,OAAA,GAmDKuB,cAAc","ignoreList":[]}

package/dist/SegmentControl/SegmentControl.js

@@ -20,20 +20,14 @@ export const SegmentControlItemContent = styled.div`
   padding: 0 16px;
 
   background-color: transparent;
-  color: ${props => COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'subtle'
-}, props.theme)};
+  color: ${props => COLORS.getColor('neutral_600', props.theme)};
 `;
 export const SegmentControlItemBackground = styled.div`
   flex: 1;
   display: flex;
   flex-direction: row;
   align-items: center;
-  background-color: ${props => COLORS.generateToken({
-  componentType: 'bg-surface',
-  defaultVariant: 'subtle'
-}, props.theme)};
+  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};
   padding: 4px 0px;
 `;
 export const SegmentControlItemWrapper = styled.div`
@@ -53,14 +47,8 @@ export const SegmentControlItemWrapper = styled.div`
     z-index: ${Z_INDEXES.hover};
 
     ${SegmentControlItemContent} {
-      background-color: ${props => COLORS.generateToken({
-  componentType: 'bg-surface',
-  state: 'hover'
-}, props.theme)};
-      color: ${props => COLORS.generateToken({
-  componentType: 'text',
-  state: 'hover'
-}, props.theme)};
+      background-color: ${props => COLORS.getColor('primary_100', props.theme)};
+      color: ${props => COLORS.getColor('primary_700', props.theme)};
     }
   }
 
@@ -68,14 +56,8 @@ export const SegmentControlItemWrapper = styled.div`
     z-index: ${Z_INDEXES.active};
 
     ${SegmentControlItemContent} {
-      background-color: ${props => COLORS.generateToken({
-  componentType: 'bg-surface',
-  state: 'active'
-}, props.theme)};
-      color: ${props => COLORS.generateToken({
-  componentType: 'text',
-  state: 'active'
-}, props.theme)};
+      background-color: ${props => COLORS.getColor('primary_200', props.theme)};
+      color: ${props => COLORS.getColor('primary_800', props.theme)};
     }
   }
 
@@ -84,10 +66,7 @@ export const SegmentControlItemWrapper = styled.div`
 
     ${SegmentControlItemContent} {
       background-color: transparent;
-      color: ${props => COLORS.generateToken({
-  componentType: 'text',
-  state: 'disabled'
-}, props.theme)};
+      color: ${props => COLORS.getColor('neutral_300', props.theme)};
     }
   }
 
@@ -96,15 +75,8 @@ export const SegmentControlItemWrapper = styled.div`
     pointer-events: none;
 
     ${SegmentControlItemContent} {
-      background-color: ${props => COLORS.generateToken({
-  componentType: 'bg-fill',
-  defaultVariant: 'primary'
-}, props.theme)};
-      color: ${props => COLORS.generateToken({
-  componentType: 'text',
-  isOnFill: true,
-  defaultVariant: 'primary'
-}, props.theme)};
+      background-color: ${props => COLORS.getColor('primary_500', props.theme)};
+      color: ${props => COLORS.getColor('white', props.theme)};
     }
   }
 
@@ -113,15 +85,8 @@ export const SegmentControlItemWrapper = styled.div`
     pointer-events: unset;
     
     ${SegmentControlItemContent} {
-      background-color: ${props => COLORS.generateToken({
-  componentType: 'bg-fill',
-  state: 'disabled'
-}, props.theme)};
-      color: ${props => COLORS.generateToken({
-  componentType: 'text',
-  isOnFill: true,
-  state: 'disabled'
-}, props.theme)};
+      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};
+      color: ${props => COLORS.getColor('neutral_300', props.theme)};
     }
   }
 `;

package/dist/SegmentControl/SegmentControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentControl.js","names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","jsx","_jsx","SegmentControlItemContent","div","props","generateToken","componentType","defaultVariant","theme","SegmentControlItemBackground","SegmentControlItemWrapper","hover","state","active","isOnFill","SegmentControlWrapper","Bold","SegmentControl","_ref","items","size","Medium","onChange","selected","className","rest","_objectWithoutProperties","_excluded","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","_objectSpread","children","map","a","i","content","_excluded2","tabIndex","undefined","onMouseDown","propTypes","_pt","arrayOf","shape","string","isRequired","bool","oneOfType","node","func"],"sources":["../../src/SegmentControl/SegmentControl.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n`\r\n\r\nexport const SegmentControlItemBackground = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n  padding: 4px 0px;\r\n`;\r\n\r\nexport const SegmentControlItemWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 1;\r\n  cursor: pointer;\r\n  min-height: 48px;\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n\r\n    ${SegmentControlItemContent} {\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  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n\r\n    ${SegmentControlItemContent} {\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  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: transparent;\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.selected {\r\n    cursor: default;\r\n    pointer-events: none;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'primary' }, props.theme)};\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n    }\r\n  }\r\n\r\n  &.selected.disabled {\r\n    cursor: not-allowed;\r\n    pointer-events: unset;\r\n    \r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled'}, props.theme)};\r\n      color: ${props => COLORS.generateToken({ componentType: 'text', isOnFill: true, state:'disabled' }, props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const SegmentControlWrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  ${SegmentControlItemWrapper}:first-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-left-radius: 12px;\r\n      border-top-left-radius: 12px;\r\n      padding-left: 4px;\r\n    }\r\n  }\r\n\r\n  ${SegmentControlItemWrapper}:last-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-right-radius: 12px;\r\n      border-top-right-radius: 12px;\r\n      padding-right: 4px;\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 32px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 40px;\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'content' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /**\r\n   * Required. The key of the segment control item. This should be unique among all items in the segment control.\r\n   */\r\n  key: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the segment control item is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Required. The content of the segment control item. This can be a string or a React node.\r\n   */\r\n  content: React.ReactNode | string;\r\n}\r\n\r\nexport interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n  /**\r\n   * Required. An array of SegmentControlItem objects representing the items in the segment control.\r\n   */\r\n  items: SegmentControlItem[];\r\n\r\n  /**\r\n   * Optional. The key of the currently selected item in the segment control. In order to change selected item\r\n   * when user clicks on it, you should update this prop to display item as 'selected'.\r\n   */\r\n  selected: string;\r\n\r\n  /**\r\n   * Required. A function to be called when the selected item in the segment control changes.\r\n   * It should take a string representing the key of the new selected item.\r\n   */\r\n  onChange: (value: string) => void;\r\n\r\n  /**\r\n   * Optional. The size of the segment control. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\r\n                                                                        items,\r\n                                                                        size = Size.Medium,\r\n                                                                        onChange,\r\n                                                                        selected,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      //@ts-ignore\r\n      document?.activeElement?.blur();\r\n      !item.disabled && onChange(item.key);\r\n    }\r\n  };\r\n\r\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\r\n    !item.disabled && onChange(item.key);\r\n  }\r\n\r\n  return (\r\n    <SegmentControlWrapper className={`${size} ${className || ''}`} {...rest}>\r\n      {items.map((a, i) => {\r\n        const {key, disabled, content, className, ...rest} = a;\r\n        return <SegmentControlItemWrapper key={a.key || i}\r\n                                          className={(className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\r\n                                          tabIndex={a.disabled || a.key === selected ? -1 : 0}\r\n                                          onClick={a.disabled ? undefined : (e) => onClick(e, a)}\r\n                                          onMouseDown={defaultOnMouseDownHandler}\r\n                                          onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}\r\n                                          {...rest}>\r\n          <SegmentControlItemBackground>\r\n            <SegmentControlItemContent>\r\n              {a.content}\r\n            </SegmentControlItemContent>\r\n          </SegmentControlItemBackground>\r\n        </SegmentControlItemWrapper>;\r\n      })\r\n      }\r\n    </SegmentControlWrapper>\r\n  );\r\n};\r\n\r\nexport default SegmentControl;\r\n"],"mappings":";;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,IAAI,QAAO,UAAU;AAC7B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,EAAEC,WAAW,EAAEC,SAAS,QAAO,WAAW;AAClH,SAAQC,yBAAyB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGpD,OAAO,MAAMC,yBAAyB,GAAGV,MAAM,CAACW,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAWC,KAAK,IAAIX,MAAM,CAACY,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC;AAC1G,CAAC;AAED,OAAO,MAAMC,4BAA4B,GAAGjB,MAAM,CAACW,GAAG;AACtD;AACA;AACA;AACA;AACA,sBAAsBC,KAAK,IAAIX,MAAM,CAACY,aAAa,CAAC;EAAEC,aAAa,EAAE,YAAY;EAAEC,cAAc,EAAE;AAAS,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC;AAC3H;AACA,CAAC;AAED,OAAO,MAAME,yBAAyB,GAAGlB,MAAM,CAACW,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMN,WAAW;AACjB;AACA;AACA;AACA,eAAeC,SAAS,CAACa,KAAK;AAC9B;AACA,MAAMT,yBAAyB;AAC/B,0BAA0BE,KAAK,IAAIX,MAAM,CAACY,aAAa,CAAC;EAAEC,aAAa,EAAE,YAAY;EAAEM,KAAK,EAAE;AAAQ,CAAC,EAAER,KAAK,CAACI,KAAK,CAAC;AACrH,eAAeJ,KAAK,IAAIX,MAAM,CAACY,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEM,KAAK,EAAE;AAAQ,CAAC,EAAER,KAAK,CAACI,KAAK,CAAC;AACpG;AACA;AACA;AACA;AACA,eAAeV,SAAS,CAACe,MAAM;AAC/B;AACA,MAAMX,yBAAyB;AAC/B,0BAA0BE,KAAK,IAAIX,MAAM,CAACY,aAAa,CAAC;EAAEC,aAAa,EAAE,YAAY;EAAEM,KAAK,EAAE;AAAS,CAAC,EAAER,KAAK,CAACI,KAAK,CAAC;AACtH,eAAeJ,KAAK,IAAIX,MAAM,CAACY,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEM,KAAK,EAAE;AAAS,CAAC,EAAER,KAAK,CAACI,KAAK,CAAC;AACrG;AACA;AACA;AACA;AACA;AACA;AACA,MAAMN,yBAAyB;AAC/B;AACA,eAAeE,KAAK,IAAIX,MAAM,CAACY,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEM,KAAK,EAAE;AAAW,CAAC,EAAER,KAAK,CAACI,KAAK,CAAC;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMN,yBAAyB;AAC/B,0BAA0BE,KAAK,IAAIX,MAAM,CAACY,aAAa,CAAC;EAAEC,aAAa,EAAE,SAAS;EAAEC,cAAc,EAAE;AAAU,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC;AAC7H,eAAeJ,KAAK,IAAIX,MAAM,CAACY,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEQ,QAAQ,EAAE,IAAI;EAAEP,cAAc,EAAE;AAAU,CAAC,EAAEH,KAAK,CAACI,KAAK,CAAC;AAC/H;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMN,yBAAyB;AAC/B,0BAA0BE,KAAK,IAAIX,MAAM,CAACY,aAAa,CAAC;EAAEC,aAAa,EAAE,SAAS;EAAEM,KAAK,EAAE;AAAU,CAAC,EAAER,KAAK,CAACI,KAAK,CAAC;AACpH,eAAeJ,KAAK,IAAIX,MAAM,CAACY,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEQ,QAAQ,EAAE,IAAI;EAAEF,KAAK,EAAC;AAAW,CAAC,EAAER,KAAK,CAACI,KAAK,CAAC;AACtH;AACA;AACA,CAAC;AAED,OAAO,MAAMO,qBAAqB,GAAGvB,MAAM,CAACW,GAAG;AAC/C;AACA;AACA;AACA;AACA;AACA,IAAIO,yBAAyB;AAC7B,MAAMD,4BAA4B;AAClC;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,yBAAyB;AAC7B,MAAMD,4BAA4B;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMP,yBAAyB;AAC/B,QAAQP,iBAAiB,CAACC,kBAAkB,CAACoB,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA;AACA;AACA;AACA,MAAMd,yBAAyB;AAC/B,QAAQR,iBAAiB,CAACE,kBAAkB,CAACoB,IAAI,EAAE,IAAI,CAAC;AACxD;AACA;AACA;AACA,CAAC;AA4CD,MAAMC,cAA4D,GAAGC,IAAA,IAOO;EAAA,IAPN;MACEC,KAAK;MACLC,IAAI,GAAG7B,IAAI,CAAC8B,MAAM;MAClBC,QAAQ;MACRC,QAAQ;MACRC;IAEF,CAAC,GAAAN,IAAA;IADIO,IAAI,GAAAC,wBAAA,CAAAR,IAAA,EAAAS,SAAA;EAE7E,MAAMC,UAAU,GAAGA,CAACC,CAAsC,EAAEC,IAAwB,KAAK;IACvF,IAAID,CAAC,CAACE,GAAG,KAAK,OAAO,IAAIF,CAAC,CAACE,GAAG,KAAK,GAAG,EAAE;MACtC;MACAC,QAAQ,EAAEC,aAAa,EAAEC,IAAI,CAAC,CAAC;MAC/B,CAACJ,IAAI,CAACK,QAAQ,IAAIb,QAAQ,CAACQ,IAAI,CAACC,GAAG,CAAC;IACtC;EACF,CAAC;EAED,MAAMK,OAAO,GAAGA,CAACP,CAAmB,EAAEC,IAAwB,KAAK;IACjE,CAACA,IAAI,CAACK,QAAQ,IAAIb,QAAQ,CAACQ,IAAI,CAACC,GAAG,CAAC;EACtC,CAAC;EAED,oBACE9B,IAAA,CAACc,qBAAqB,EAAAsB,aAAA,CAAAA,aAAA;IAACb,SAAS,EAAE,GAAGJ,IAAI,IAAII,SAAS,IAAI,EAAE;EAAG,GAAKC,IAAI;IAAAa,QAAA,EACrEnB,KAAK,CAACoB,GAAG,CAAC,CAACC,CAAC,EAAEC,CAAC,KAAK;MACnB,MAAM;UAACV,GAAG;UAAEI,QAAQ;UAAEO,OAAO;UAAElB;QAAkB,CAAC,GAAGgB,CAAC;QAATf,IAAI,GAAAC,wBAAA,CAAIc,CAAC,EAAAG,UAAA;MACtD,oBAAO1C,IAAA,CAACS,yBAAyB,EAAA2B,aAAA,CAAAA,aAAA;QACCb,SAAS,EAAE,CAACA,SAAS,IAAI,EAAE,KAAKgB,CAAC,CAACL,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAC,IAAIK,CAAC,CAACT,GAAG,KAAKR,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAE;QACxGqB,QAAQ,EAAEJ,CAAC,CAACL,QAAQ,IAAIK,CAAC,CAACT,GAAG,KAAKR,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QACpDa,OAAO,EAAEI,CAAC,CAACL,QAAQ,GAAGU,SAAS,GAAIhB,CAAC,IAAKO,OAAO,CAACP,CAAC,EAAEW,CAAC,CAAE;QACvDM,WAAW,EAAE/C,yBAA0B;QACvC6B,UAAU,EAAEY,CAAC,CAACL,QAAQ,GAAGU,SAAS,GAAIhB,CAAC,IAAKD,UAAU,CAACC,CAAC,EAAEW,CAAC;MAAE,GACzDf,IAAI;QAAAa,QAAA,eACxCrC,IAAA,CAACQ,4BAA4B;UAAA6B,QAAA,eAC3BrC,IAAA,CAACC,yBAAyB;YAAAoC,QAAA,EACvBE,CAAC,CAACE;UAAO,CACe;QAAC,CACA;MAAC,IAXMF,CAAC,CAACT,GAAG,IAAIU,CAYrB,CAAC;IAC9B,CAAC;EAAC,EAEmB,CAAC;AAE5B,CAAC;AAACxB,cAAA,CAAA8B,SAAA;EA7DA5B,KAAK,EAAA6B,GAAA,CAAAC,OAAA,CAAAD,GAAA,CAAAE,KAAA;IAjBLnB,GAAG,EAAAiB,GAAA,CAAAG,MAAA,CAAAC,UAAA;IAKHjB,QAAQ,EAAAa,GAAA,CAAAK,IAAA;IAKRX,OAAO,EAAAM,GAAA,CAAAM,SAAA,EAAAN,GAAA,CAAAO,IAAA,EAAAP,GAAA,CAAAG,MAAA,GAAAC;EAAA,IAAAA,UAAA;EAaP7B,QAAQ,EAAAyB,GAAA,CAAAG,MAAA,CAAAC,UAAA;EAMR9B,QAAQ,EAAA0B,GAAA,CAAAQ,IAAA,CAAAJ;AAAA;AAmDV,eAAenC,cAAc","ignoreList":[]}
+{"version":3,"file":"SegmentControl.js","names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","Z_INDEXES","defaultOnMouseDownHandler","jsx","_jsx","SegmentControlItemContent","div","props","getColor","theme","SegmentControlItemBackground","SegmentControlItemWrapper","hover","active","SegmentControlWrapper","Bold","SegmentControl","_ref","items","size","Medium","onChange","selected","className","rest","_objectWithoutProperties","_excluded","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","_objectSpread","children","map","a","i","content","_excluded2","tabIndex","undefined","onMouseDown","propTypes","_pt","arrayOf","shape","string","isRequired","bool","oneOfType","node","func"],"sources":["../../src/SegmentControl/SegmentControl.tsx"],"sourcesContent":["import React from 'react';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, Z_INDEXES} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\n\r\nexport const SegmentControlItemContent = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 100%;\r\n  border-radius: 8px;\r\n  padding: 0 16px;\r\n\r\n  background-color: transparent;\r\n  color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n`\r\n\r\nexport const SegmentControlItemBackground = styled.div`\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  background-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n  padding: 4px 0px;\r\n`;\r\n\r\nexport const SegmentControlItemWrapper = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex: 1;\r\n  cursor: pointer;\r\n  min-height: 48px;\r\n\r\n  &:focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    z-index: ${Z_INDEXES.hover};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    z-index: ${Z_INDEXES.active};\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.getColor('primary_200', props.theme)};\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: transparent;\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.selected {\r\n    cursor: default;\r\n    pointer-events: none;\r\n\r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n      color: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.selected.disabled {\r\n    cursor: not-allowed;\r\n    pointer-events: unset;\r\n    \r\n    ${SegmentControlItemContent} {\r\n      background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const SegmentControlWrapper = styled.div`\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n\r\n  ${SegmentControlItemWrapper}:first-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-left-radius: 12px;\r\n      border-top-left-radius: 12px;\r\n      padding-left: 4px;\r\n    }\r\n  }\r\n\r\n  ${SegmentControlItemWrapper}:last-of-type {\r\n    ${SegmentControlItemBackground} {\r\n      border-bottom-right-radius: 12px;\r\n      border-top-right-radius: 12px;\r\n      padding-right: 4px;\r\n    }\r\n  }\r\n\r\n\r\n  &.small {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 32px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${SegmentControlItemContent} {\r\n      ${ComponentMStyling(ComponentTextStyle.Bold, null)}\r\n      min-height: 40px;\r\n    }\r\n  }\r\n`;\r\n\r\n\r\nexport interface SegmentControlItem extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'content' | 'onMouseDown' | 'onKeyDown' | 'onClick'> {\r\n  /**\r\n   * Required. The key of the segment control item. This should be unique among all items in the segment control.\r\n   */\r\n  key: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the segment control item is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Required. The content of the segment control item. This can be a string or a React node.\r\n   */\r\n  content: React.ReactNode | string;\r\n}\r\n\r\nexport interface SegmentControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\r\n  /**\r\n   * Required. An array of SegmentControlItem objects representing the items in the segment control.\r\n   */\r\n  items: SegmentControlItem[];\r\n\r\n  /**\r\n   * Optional. The key of the currently selected item in the segment control. In order to change selected item\r\n   * when user clicks on it, you should update this prop to display item as 'selected'.\r\n   */\r\n  selected: string;\r\n\r\n  /**\r\n   * Required. A function to be called when the selected item in the segment control changes.\r\n   * It should take a string representing the key of the new selected item.\r\n   */\r\n  onChange: (value: string) => void;\r\n\r\n  /**\r\n   * Optional. The size of the segment control. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n}\r\n\r\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\r\n                                                                        items,\r\n                                                                        size = Size.Medium,\r\n                                                                        onChange,\r\n                                                                        selected,\r\n                                                                        className,\r\n                                                                        ...rest\r\n                                                                      }) => {\r\n  const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\r\n    if (e.key === 'Enter' || e.key === ' ') {\r\n      //@ts-ignore\r\n      document?.activeElement?.blur();\r\n      !item.disabled && onChange(item.key);\r\n    }\r\n  };\r\n\r\n  const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\r\n    !item.disabled && onChange(item.key);\r\n  }\r\n\r\n  return (\r\n    <SegmentControlWrapper className={`${size} ${className || ''}`} {...rest}>\r\n      {items.map((a, i) => {\r\n        const {key, disabled, content, className, ...rest} = a;\r\n        return <SegmentControlItemWrapper key={a.key || i}\r\n                                          className={(className || '') + (a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\r\n                                          tabIndex={a.disabled || a.key === selected ? -1 : 0}\r\n                                          onClick={a.disabled ? undefined : (e) => onClick(e, a)}\r\n                                          onMouseDown={defaultOnMouseDownHandler}\r\n                                          onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}\r\n                                          {...rest}>\r\n          <SegmentControlItemBackground>\r\n            <SegmentControlItemContent>\r\n              {a.content}\r\n            </SegmentControlItemContent>\r\n          </SegmentControlItemBackground>\r\n        </SegmentControlItemWrapper>;\r\n      })\r\n      }\r\n    </SegmentControlWrapper>\r\n  );\r\n};\r\n\r\nexport default SegmentControl;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/SideMenu/SideMenuHeader.cjs

@@ -37,24 +37,15 @@ const LabelContainer = _styledComponents.default.div`
   margin-left: 8px;
 
   .small & {
-    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'subtle'
-}, props.theme))}
+    ${props => (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme))}
   }
 
   .medium & {
-    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'subtle'
-}, props.theme))}
+    ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme))}
   }
 
   .large & {
-    ${props => (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'subtle'
-}, props.theme))}
+    ${props => (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Bold, _styles.COLORS.getColor('neutral_600', props.theme))}
   }
 `;
 const SideMenuHeader = props => {

package/dist/SideMenu/SideMenuHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenuHeader.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_Button","_icons","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","LabelContainer","props","ComponentSStyling","ComponentTextStyle","Bold","COLORS","generateToken","componentType","defaultVariant","theme","ComponentMStyling","ComponentLStyling","SideMenuHeader","jsxs","children","header","actions","map","_ref","index","icon","rest","_objectWithoutProperties2","jsx","IconButton","variant","shape","label","action","onClose","style","marginLeft","SystemIcons","Close","exports"],"sources":["../../src/SideMenu/SideMenuHeader.tsx"],"sourcesContent":["import React from 'react';\r\nimport {SideMenuProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0 8px;\r\n\r\n  .small & {\r\n    min-height: 48px;\r\n  }\r\n\r\n  .medium & {\r\n    min-height: 56px;\r\n  }\r\n\r\n  .large & {\r\n    min-height: 64px;\r\n  }\r\n`;\r\n\r\nconst LabelContainer = styled.div`\r\n  margin-left: 8px;\r\n\r\n  .small & {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  .medium & {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  .large & {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n`;\r\n\r\nexport const SideMenuHeader = (props: SideMenuProps) => {\r\n\r\n  return (\r\n    <Wrapper>\r\n      {\r\n        props.header?.actions?.map(({icon, ...rest}, index) =>\r\n          <IconButton key={index} variant={'secondary'} shape={'circular'} {...rest}>\r\n            {icon}\r\n          </IconButton>\r\n        )\r\n      }\r\n      {\r\n        props.header?.label &&\r\n        <LabelContainer>\r\n          {props.header.label}\r\n        </LabelContainer>\r\n      }\r\n      <IconButton action={props.onClose} variant={'secondary'} shape={'circular'} style={{marginLeft: 'auto'}}>\r\n        <SystemIcons.Close/>\r\n      </IconButton>\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SideMenuHeader.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_Button","_icons","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","Wrapper","styled","div","LabelContainer","props","ComponentSStyling","ComponentTextStyle","Bold","COLORS","getColor","theme","ComponentMStyling","ComponentLStyling","SideMenuHeader","jsxs","children","header","actions","map","_ref","index","icon","rest","_objectWithoutProperties2","jsx","IconButton","variant","shape","label","action","onClose","style","marginLeft","SystemIcons","Close","exports"],"sources":["../../src/SideMenu/SideMenuHeader.tsx"],"sourcesContent":["import React from 'react';\r\nimport {SideMenuProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0 8px;\r\n\r\n  .small & {\r\n    min-height: 48px;\r\n  }\r\n\r\n  .medium & {\r\n    min-height: 56px;\r\n  }\r\n\r\n  .large & {\r\n    min-height: 64px;\r\n  }\r\n`;\r\n\r\nconst LabelContainer = styled.div`\r\n  margin-left: 8px;\r\n\r\n  .small & {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  .medium & {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  .large & {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\n\r\nexport const SideMenuHeader = (props: SideMenuProps) => {\r\n\r\n  return (\r\n    <Wrapper>\r\n      {\r\n        props.header?.actions?.map(({icon, ...rest}, index) =>\r\n          <IconButton key={index} variant={'secondary'} shape={'circular'} {...rest}>\r\n            {icon}\r\n          </IconButton>\r\n        )\r\n      }\r\n      {\r\n        props.header?.label &&\r\n        <LabelContainer>\r\n          {props.header.label}\r\n        </LabelContainer>\r\n      }\r\n      <IconButton action={props.onClose} variant={'secondary'} shape={'circular'} style={{marginLeft: 'auto'}}>\r\n        <SystemIcons.Close/>\r\n      </IconButton>\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":"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","ignoreList":[]}

package/dist/SideMenu/SideMenuHeader.js

@@ -30,24 +30,15 @@ const LabelContainer = styled.div`
   margin-left: 8px;
 
   .small & {
-    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'subtle'
-}, props.theme))}
+    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
   }
 
   .medium & {
-    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'subtle'
-}, props.theme))}
+    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
   }
 
   .large & {
-    ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'subtle'
-}, props.theme))}
+    ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}
   }
 `;
 export const SideMenuHeader = props => {

package/dist/SideMenu/SideMenuHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideMenuHeader.js","names":["React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","IconButton","SystemIcons","jsx","_jsx","jsxs","_jsxs","Wrapper","div","LabelContainer","props","Bold","generateToken","componentType","defaultVariant","theme","SideMenuHeader","children","header","actions","map","_ref","index","icon","rest","_objectWithoutProperties","_excluded","_objectSpread","variant","shape","label","action","onClose","style","marginLeft","Close"],"sources":["../../src/SideMenu/SideMenuHeader.tsx"],"sourcesContent":["import React from 'react';\r\nimport {SideMenuProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0 8px;\r\n\r\n  .small & {\r\n    min-height: 48px;\r\n  }\r\n\r\n  .medium & {\r\n    min-height: 56px;\r\n  }\r\n\r\n  .large & {\r\n    min-height: 64px;\r\n  }\r\n`;\r\n\r\nconst LabelContainer = styled.div`\r\n  margin-left: 8px;\r\n\r\n  .small & {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  .medium & {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n\r\n  .large & {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n  }\r\n`;\r\n\r\nexport const SideMenuHeader = (props: SideMenuProps) => {\r\n\r\n  return (\r\n    <Wrapper>\r\n      {\r\n        props.header?.actions?.map(({icon, ...rest}, index) =>\r\n          <IconButton key={index} variant={'secondary'} shape={'circular'} {...rest}>\r\n            {icon}\r\n          </IconButton>\r\n        )\r\n      }\r\n      {\r\n        props.header?.label &&\r\n        <LabelContainer>\r\n          {props.header.label}\r\n        </LabelContainer>\r\n      }\r\n      <IconButton action={props.onClose} variant={'secondary'} shape={'circular'} style={{marginLeft: 'auto'}}>\r\n        <SystemIcons.Close/>\r\n      </IconButton>\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAO,WAAW;AAC7G,SAAQC,UAAU,QAAO,WAAW;AACpC,SAAQC,WAAW,QAAO,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAErC,MAAMC,OAAO,GAAGZ,MAAM,CAACa,GAAG;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,cAAc,GAAGd,MAAM,CAACa,GAAG;AACjC;AACA;AACA;AACA,MAAME,KAAK,IAAIX,iBAAiB,CAACC,kBAAkB,CAACW,IAAI,EAAEf,MAAM,CAACgB,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAC5I;AACA;AACA;AACA,MAAML,KAAK,IAAIZ,iBAAiB,CAACE,kBAAkB,CAACW,IAAI,EAAEf,MAAM,CAACgB,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAC5I;AACA;AACA;AACA,MAAML,KAAK,IAAIb,iBAAiB,CAACG,kBAAkB,CAACW,IAAI,EAAEf,MAAM,CAACgB,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAACC,cAAc,EAAC;AAAQ,CAAC,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAC5I;AACA,CAAC;AAED,OAAO,MAAMC,cAAc,GAAIN,KAAoB,IAAK;EAEtD,oBACEJ,KAAA,CAACC,OAAO;IAAAU,QAAA,GAEJP,KAAK,CAACQ,MAAM,EAAEC,OAAO,EAAEC,GAAG,CAAC,CAAAC,IAAA,EAAkBC,KAAK;MAAA,IAAtB;UAACC;QAAa,CAAC,GAAAF,IAAA;QAALG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;MAAA,oBACxCtB,IAAA,CAACH,UAAU,EAAA0B,aAAA,CAAAA,aAAA;QAAaC,OAAO,EAAE,WAAY;QAACC,KAAK,EAAE;MAAW,GAAKL,IAAI;QAAAP,QAAA,EACtEM;MAAI,IADUD,KAEL,CAAC;IAAA,CACf,CAAC,EAGDZ,KAAK,CAACQ,MAAM,EAAEY,KAAK,iBACnB1B,IAAA,CAACK,cAAc;MAAAQ,QAAA,EACZP,KAAK,CAACQ,MAAM,CAACY;IAAK,CACL,CAAC,eAEnB1B,IAAA,CAACH,UAAU;MAAC8B,MAAM,EAAErB,KAAK,CAACsB,OAAQ;MAACJ,OAAO,EAAE,WAAY;MAACC,KAAK,EAAE,UAAW;MAACI,KAAK,EAAE;QAACC,UAAU,EAAE;MAAM,CAAE;MAAAjB,QAAA,eACtGb,IAAA,CAACF,WAAW,CAACiC,KAAK,IAAC;IAAC,CACV,CAAC;EAAA,CACN,CAAC;AAEd,CAAC","ignoreList":[]}
+{"version":3,"file":"SideMenuHeader.js","names":["React","styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","IconButton","SystemIcons","jsx","_jsx","jsxs","_jsxs","Wrapper","div","LabelContainer","props","Bold","getColor","theme","SideMenuHeader","children","header","actions","map","_ref","index","icon","rest","_objectWithoutProperties","_excluded","_objectSpread","variant","shape","label","action","onClose","style","marginLeft","Close"],"sources":["../../src/SideMenu/SideMenuHeader.tsx"],"sourcesContent":["import React from 'react';\r\nimport {SideMenuProps} from './types';\r\nimport styled from 'styled-components';\r\nimport {COLORS, ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle} from '../styles';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0 8px;\r\n\r\n  .small & {\r\n    min-height: 48px;\r\n  }\r\n\r\n  .medium & {\r\n    min-height: 56px;\r\n  }\r\n\r\n  .large & {\r\n    min-height: 64px;\r\n  }\r\n`;\r\n\r\nconst LabelContainer = styled.div`\r\n  margin-left: 8px;\r\n\r\n  .small & {\r\n    ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  .medium & {\r\n    ${props => ComponentMStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n\r\n  .large & {\r\n    ${props => ComponentLStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n  }\r\n`;\r\n\r\nexport const SideMenuHeader = (props: SideMenuProps) => {\r\n\r\n  return (\r\n    <Wrapper>\r\n      {\r\n        props.header?.actions?.map(({icon, ...rest}, index) =>\r\n          <IconButton key={index} variant={'secondary'} shape={'circular'} {...rest}>\r\n            {icon}\r\n          </IconButton>\r\n        )\r\n      }\r\n      {\r\n        props.header?.label &&\r\n        <LabelContainer>\r\n          {props.header.label}\r\n        </LabelContainer>\r\n      }\r\n      <IconButton action={props.onClose} variant={'secondary'} shape={'circular'} style={{marginLeft: 'auto'}}>\r\n        <SystemIcons.Close/>\r\n      </IconButton>\r\n    </Wrapper>\r\n  )\r\n};\r\n"],"mappings":";;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAO,WAAW;AAC7G,SAAQC,UAAU,QAAO,WAAW;AACpC,SAAQC,WAAW,QAAO,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAErC,MAAMC,OAAO,GAAGZ,MAAM,CAACa,GAAG;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,cAAc,GAAGd,MAAM,CAACa,GAAG;AACjC;AACA;AACA;AACA,MAAME,KAAK,IAAIX,iBAAiB,CAACC,kBAAkB,CAACW,IAAI,EAAEf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACtG;AACA;AACA;AACA,MAAMH,KAAK,IAAIZ,iBAAiB,CAACE,kBAAkB,CAACW,IAAI,EAAEf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACtG;AACA;AACA;AACA,MAAMH,KAAK,IAAIb,iBAAiB,CAACG,kBAAkB,CAACW,IAAI,EAAEf,MAAM,CAACgB,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC,CAAC;AACtG;AACA,CAAC;AAED,OAAO,MAAMC,cAAc,GAAIJ,KAAoB,IAAK;EAEtD,oBACEJ,KAAA,CAACC,OAAO;IAAAQ,QAAA,GAEJL,KAAK,CAACM,MAAM,EAAEC,OAAO,EAAEC,GAAG,CAAC,CAAAC,IAAA,EAAkBC,KAAK;MAAA,IAAtB;UAACC;QAAa,CAAC,GAAAF,IAAA;QAALG,IAAI,GAAAC,wBAAA,CAAAJ,IAAA,EAAAK,SAAA;MAAA,oBACxCpB,IAAA,CAACH,UAAU,EAAAwB,aAAA,CAAAA,aAAA;QAAaC,OAAO,EAAE,WAAY;QAACC,KAAK,EAAE;MAAW,GAAKL,IAAI;QAAAP,QAAA,EACtEM;MAAI,IADUD,KAEL,CAAC;IAAA,CACf,CAAC,EAGDV,KAAK,CAACM,MAAM,EAAEY,KAAK,iBACnBxB,IAAA,CAACK,cAAc;MAAAM,QAAA,EACZL,KAAK,CAACM,MAAM,CAACY;IAAK,CACL,CAAC,eAEnBxB,IAAA,CAACH,UAAU;MAAC4B,MAAM,EAAEnB,KAAK,CAACoB,OAAQ;MAACJ,OAAO,EAAE,WAAY;MAACC,KAAK,EAAE,UAAW;MAACI,KAAK,EAAE;QAACC,UAAU,EAAE;MAAM,CAAE;MAAAjB,QAAA,eACtGX,IAAA,CAACF,WAAW,CAAC+B,KAAK,IAAC;IAAC,CACV,CAAC;EAAA,CACN,CAAC;AAEd,CAAC","ignoreList":[]}

package/dist/Switcher/SwitcherMenuItem.cjs

@@ -20,10 +20,7 @@ const StyledSwitcherItem = _styledComponents.default.div`
   text-align: center;
   position: relative;
 
-  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'subtle'
-}, props.theme))}
+  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('neutral_600', props.theme))}
 
   text-decoration: none;
 

package/dist/Switcher/SwitcherMenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SwitcherMenuItem.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_common","_jsxRuntime","StyledSwitcherItem","styled","div","props","ComponentMStyling","ComponentTextStyle","Regular","COLORS","generateToken","componentType","defaultVariant","theme","Z_INDEXES","active","getColor","hover","focusStyles","A","a","SwitcherMenuItem","_ref","label","url","disabled","icon","as","testId","jsxs","onClick","window","location","href","onMouseDown","defaultOnMouseDownHandler","target","className","children","React","cloneElement","size","color","propTypes","_propTypes","default","string","isRequired","bool","any","_default","exports"],"sources":["../../src/Switcher/SwitcherMenuItem.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Z_INDEXES, ComponentMStyling, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledSwitcherItem = styled.div`\r\n  padding: 16px 25px;\r\n  margin: 0 2px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n\r\n  text-decoration: none;\r\n\r\n  svg {\r\n    margin-right: 16px;\r\n  }\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    left: 4px;\r\n    top: 4px;\r\n    bottom: 4px;\r\n    width: 4px;\r\n    background-color: transparent;\r\n    border-radius: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    font-weight: bold;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles};\r\n    \r\n    outline-offset: -2px;\r\n  }\r\n`;\r\n\r\nconst A = styled.a``;\r\n\r\nexport interface SwitcherNavItem {\r\n  label: string;\r\n  url: string;\r\n  disabled?: boolean;\r\n  icon?: any;\r\n  as?: any;\r\n  testId?: string;\r\n}\r\n\r\nconst SwitcherMenuItem = ({label, url, disabled, icon, as = A, testId}: SwitcherNavItem) => (\r\n  <StyledSwitcherItem\r\n    onClick={() => (window.location.href = url || '')}\r\n    as={as}\r\n    onMouseDown={defaultOnMouseDownHandler}\r\n    href={url || ''}\r\n    target=\"_parent\"\r\n    key={label}\r\n    className={disabled ? 'disabled' : ''}\r\n    data-testid={testId}>\r\n    {!!icon && React.cloneElement(icon, {size: '24px', color: '#666666'})}\r\n    {label}\r\n  </StyledSwitcherItem>\r\n);\r\n\r\nexport default SwitcherMenuItem;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SwitcherMenuItem.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_common","_jsxRuntime","StyledSwitcherItem","styled","div","props","ComponentMStyling","ComponentTextStyle","Regular","COLORS","getColor","theme","Z_INDEXES","active","hover","focusStyles","A","a","SwitcherMenuItem","_ref","label","url","disabled","icon","as","testId","jsxs","onClick","window","location","href","onMouseDown","defaultOnMouseDownHandler","target","className","children","React","cloneElement","size","color","propTypes","_propTypes","default","string","isRequired","bool","any","_default","exports"],"sources":["../../src/Switcher/SwitcherMenuItem.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Z_INDEXES, ComponentMStyling, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledSwitcherItem = styled.div`\r\n  padding: 16px 25px;\r\n  margin: 0 2px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  text-decoration: none;\r\n\r\n  svg {\r\n    margin-right: 16px;\r\n  }\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    left: 4px;\r\n    top: 4px;\r\n    bottom: 4px;\r\n    width: 4px;\r\n    background-color: transparent;\r\n    border-radius: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    font-weight: bold;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles};\r\n    \r\n    outline-offset: -2px;\r\n  }\r\n`;\r\n\r\nconst A = styled.a``;\r\n\r\nexport interface SwitcherNavItem {\r\n  label: string;\r\n  url: string;\r\n  disabled?: boolean;\r\n  icon?: any;\r\n  as?: any;\r\n  testId?: string;\r\n}\r\n\r\nconst SwitcherMenuItem = ({label, url, disabled, icon, as = A, testId}: SwitcherNavItem) => (\r\n  <StyledSwitcherItem\r\n    onClick={() => (window.location.href = url || '')}\r\n    as={as}\r\n    onMouseDown={defaultOnMouseDownHandler}\r\n    href={url || ''}\r\n    target=\"_parent\"\r\n    key={label}\r\n    className={disabled ? 'disabled' : ''}\r\n    data-testid={testId}>\r\n    {!!icon && React.cloneElement(icon, {size: '24px', color: '#666666'})}\r\n    {label}\r\n  </StyledSwitcherItem>\r\n);\r\n\r\nexport default SwitcherMenuItem;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Switcher/SwitcherMenuItem.js

@@ -13,10 +13,7 @@ const StyledSwitcherItem = styled.div`
   text-align: center;
   position: relative;
 
-  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
-  componentType: 'text',
-  defaultVariant: 'subtle'
-}, props.theme))}
+  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}
 
   text-decoration: none;
 

package/dist/Switcher/SwitcherMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SwitcherMenuItem.js","names":["React","styled","Z_INDEXES","ComponentMStyling","COLORS","ComponentTextStyle","focusStyles","defaultOnMouseDownHandler","jsxs","_jsxs","StyledSwitcherItem","div","props","Regular","generateToken","componentType","defaultVariant","theme","active","getColor","hover","A","a","SwitcherMenuItem","_ref","label","url","disabled","icon","as","testId","onClick","window","location","href","onMouseDown","target","className","children","cloneElement","size","color","propTypes","_pt","string","isRequired","bool","any"],"sources":["../../src/Switcher/SwitcherMenuItem.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Z_INDEXES, ComponentMStyling, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledSwitcherItem = styled.div`\r\n  padding: 16px 25px;\r\n  margin: 0 2px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n\r\n  text-decoration: none;\r\n\r\n  svg {\r\n    margin-right: 16px;\r\n  }\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    left: 4px;\r\n    top: 4px;\r\n    bottom: 4px;\r\n    width: 4px;\r\n    background-color: transparent;\r\n    border-radius: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    font-weight: bold;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles};\r\n    \r\n    outline-offset: -2px;\r\n  }\r\n`;\r\n\r\nconst A = styled.a``;\r\n\r\nexport interface SwitcherNavItem {\r\n  label: string;\r\n  url: string;\r\n  disabled?: boolean;\r\n  icon?: any;\r\n  as?: any;\r\n  testId?: string;\r\n}\r\n\r\nconst SwitcherMenuItem = ({label, url, disabled, icon, as = A, testId}: SwitcherNavItem) => (\r\n  <StyledSwitcherItem\r\n    onClick={() => (window.location.href = url || '')}\r\n    as={as}\r\n    onMouseDown={defaultOnMouseDownHandler}\r\n    href={url || ''}\r\n    target=\"_parent\"\r\n    key={label}\r\n    className={disabled ? 'disabled' : ''}\r\n    data-testid={testId}>\r\n    {!!icon && React.cloneElement(icon, {size: '24px', color: '#666666'})}\r\n    {label}\r\n  </StyledSwitcherItem>\r\n);\r\n\r\nexport default SwitcherMenuItem;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SwitcherMenuItem.js","names":["React","styled","Z_INDEXES","ComponentMStyling","COLORS","ComponentTextStyle","focusStyles","defaultOnMouseDownHandler","jsxs","_jsxs","StyledSwitcherItem","div","props","Regular","getColor","theme","active","hover","A","a","SwitcherMenuItem","_ref","label","url","disabled","icon","as","testId","onClick","window","location","href","onMouseDown","target","className","children","cloneElement","size","color","propTypes","_pt","string","isRequired","bool","any"],"sources":["../../src/Switcher/SwitcherMenuItem.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\nimport {Z_INDEXES, ComponentMStyling, COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledSwitcherItem = styled.div`\r\n  padding: 16px 25px;\r\n  margin: 0 2px;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  text-align: center;\r\n  position: relative;\r\n\r\n  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n\r\n  text-decoration: none;\r\n\r\n  svg {\r\n    margin-right: 16px;\r\n  }\r\n\r\n  &:after {\r\n    content: '';\r\n    display: block;\r\n    position: absolute;\r\n    left: 4px;\r\n    top: 4px;\r\n    bottom: 4px;\r\n    width: 4px;\r\n    background-color: transparent;\r\n    border-radius: 2px;\r\n  }\r\n\r\n  &.active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    font-weight: bold;\r\n    color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n  }\r\n\r\n  &:hover:not(.disabled) {\r\n    z-index: ${Z_INDEXES.hover};\r\n    color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled) {\r\n    z-index: ${Z_INDEXES.active};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n    &:after {\r\n      background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n    }\r\n\r\n    svg path {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled) {\r\n    ${focusStyles};\r\n    \r\n    outline-offset: -2px;\r\n  }\r\n`;\r\n\r\nconst A = styled.a``;\r\n\r\nexport interface SwitcherNavItem {\r\n  label: string;\r\n  url: string;\r\n  disabled?: boolean;\r\n  icon?: any;\r\n  as?: any;\r\n  testId?: string;\r\n}\r\n\r\nconst SwitcherMenuItem = ({label, url, disabled, icon, as = A, testId}: SwitcherNavItem) => (\r\n  <StyledSwitcherItem\r\n    onClick={() => (window.location.href = url || '')}\r\n    as={as}\r\n    onMouseDown={defaultOnMouseDownHandler}\r\n    href={url || ''}\r\n    target=\"_parent\"\r\n    key={label}\r\n    className={disabled ? 'disabled' : ''}\r\n    data-testid={testId}>\r\n    {!!icon && React.cloneElement(icon, {size: '24px', color: '#666666'})}\r\n    {label}\r\n  </StyledSwitcherItem>\r\n);\r\n\r\nexport default SwitcherMenuItem;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Table/TableFooter.cjs

@@ -62,10 +62,7 @@ const TableFooter = props => {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronLeft, {
             "aria-label": "Previous",
             size: "24",
-            color: _styles.COLORS.generateToken({
-              componentType: 'icon',
-              defaultVariant: 'subtle'
-            }, theme)
+            color: _styles.COLORS.getColor('neutral_600', theme)
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
           variant: "secondary",
@@ -75,10 +72,7 @@ const TableFooter = props => {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronRight, {
             "aria-label": "Next",
             size: "24",
-            color: _styles.COLORS.generateToken({
-              componentType: 'icon',
-              defaultVariant: 'subtle'
-            }, theme)
+            color: _styles.COLORS.getColor('neutral_600', theme)
           })
         })]
       })]

package/dist/Table/TableFooter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.cjs","names":["_react","_interopRequireDefault","require","_Dropdown","_Button","_icons","_styles","_TableStyles","_common","_styledComponents","_jsxRuntime","TableFooter","props","theme","useTheme","rowsPerPageValues","value","dropDownText","rowsPerPageLabel","rowsPerPage","jsxs","StyledTableFooter","children","accordion","StyledTableFooterCollapseButton","onClick","setIsCollapsed","isCollapsed","onMouseDown","defaultOnMouseDownHandler","disabled","rows","length","Fragment","showMoreLabel","jsx","SystemIcons","ArrowDropDown","showFewerLabel","ArrowDropUp","StyledTableFooterContent","DropdownButton","type","items","showLoadingIndicator","onRowsPerPageChange","label","keepLabel","StyledTableFooterCurrentInfo","total","from","to","StyledTableFooterControls","IconButton","variant","shape","action","prevPage","ChevronLeft","size","color","COLORS","generateToken","componentType","defaultVariant","nextPage","ChevronRight","propTypes","_propTypes","default","func","isRequired","number","bool","_default","exports"],"sources":["../../src/Table/TableFooter.tsx"],"sourcesContent":["import React from 'react';\r\nimport {TableProps} from './TableTypes';\r\nimport {DropdownButton, DropdownItem} from '../Dropdown';\r\nimport {IconButton} from '../Button';\r\nimport { SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {\r\n  StyledTableFooter, StyledTableFooterCollapseButton,\r\n  StyledTableFooterContent,\r\n  StyledTableFooterControls,\r\n  StyledTableFooterCurrentInfo\r\n} from './TableStyles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { useTheme } from 'styled-components';\r\n\r\n\r\ninterface TableFooterProps extends TableProps {\r\n  onRowsPerPageChange: (value: number) => void;\r\n  rowsPerPage: number;\r\n  from?: number;\r\n  to?: number;\r\n  total?: number;\r\n  nextPage: () => void;\r\n  prevPage: () => void;\r\n  setIsCollapsed: (isCollapsed: boolean) => void;\r\n  isCollapsed: boolean;\r\n}\r\n\r\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\r\n  const theme = useTheme();\r\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\r\n\r\n  const dropDownText = `${props.rowsPerPageLabel ?? 'Rows per page'} : ${props.rowsPerPage}`;\r\n\r\n  return (\r\n    <StyledTableFooter data-testid=\"TestTableFooterRow\">\r\n          {\r\n            props.accordion &&\r\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\r\n                                             onMouseDown={defaultOnMouseDownHandler}\r\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\r\n              {\r\n                props.isCollapsed &&\r\n                <>\r\n                  <span>{props.showMoreLabel ?? 'Show more'} ({props.rows.length - props.rowsPerPage})</span>\r\n                  <SystemIcons.ArrowDropDown/>\r\n                </>\r\n              }\r\n              {\r\n                !props.isCollapsed &&\r\n                <>\r\n                  <span>{props.showFewerLabel ?? 'Show fewer'}</span>\r\n                  <SystemIcons.ArrowDropUp/>\r\n                </>\r\n              }\r\n            </StyledTableFooterCollapseButton>\r\n          }\r\n          {\r\n            !props.accordion &&\r\n            <StyledTableFooterContent>\r\n              <DropdownButton\r\n                type={'text'}\r\n                items={rowsPerPageValues}\r\n                disabled={props.showLoadingIndicator}\r\n                value={[`${props.rowsPerPage}`]}\r\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\r\n                label={dropDownText}\r\n                keepLabel={true}\r\n              />\r\n              <StyledTableFooterCurrentInfo>\r\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\r\n              </StyledTableFooterCurrentInfo>\r\n              <StyledTableFooterControls>\r\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\r\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\r\n                  <SystemIcons.ChevronLeft aria-label='Previous' size=\"24\" color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)}/>\r\n                </IconButton>\r\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\r\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\r\n                  <SystemIcons.ChevronRight aria-label='Next' size=\"24\" color={COLORS.generateToken({componentType:'icon', defaultVariant:'subtle'}, theme)}/>\r\n                </IconButton>\r\n              </StyledTableFooterControls>\r\n            </StyledTableFooterContent>\r\n          }\r\n    </StyledTableFooter>\r\n  );\r\n};\r\n\r\n\r\nexport default TableFooter;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"TableFooter.cjs","names":["_react","_interopRequireDefault","require","_Dropdown","_Button","_icons","_styles","_TableStyles","_common","_styledComponents","_jsxRuntime","TableFooter","props","theme","useTheme","rowsPerPageValues","value","dropDownText","rowsPerPageLabel","rowsPerPage","jsxs","StyledTableFooter","children","accordion","StyledTableFooterCollapseButton","onClick","setIsCollapsed","isCollapsed","onMouseDown","defaultOnMouseDownHandler","disabled","rows","length","Fragment","showMoreLabel","jsx","SystemIcons","ArrowDropDown","showFewerLabel","ArrowDropUp","StyledTableFooterContent","DropdownButton","type","items","showLoadingIndicator","onRowsPerPageChange","label","keepLabel","StyledTableFooterCurrentInfo","total","from","to","StyledTableFooterControls","IconButton","variant","shape","action","prevPage","ChevronLeft","size","color","COLORS","getColor","nextPage","ChevronRight","propTypes","_propTypes","default","func","isRequired","number","bool","_default","exports"],"sources":["../../src/Table/TableFooter.tsx"],"sourcesContent":["import React from 'react';\r\nimport {TableProps} from './TableTypes';\r\nimport {DropdownButton, DropdownItem} from '../Dropdown';\r\nimport {IconButton} from '../Button';\r\nimport { SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {\r\n  StyledTableFooter, StyledTableFooterCollapseButton,\r\n  StyledTableFooterContent,\r\n  StyledTableFooterControls,\r\n  StyledTableFooterCurrentInfo\r\n} from './TableStyles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\nimport { useTheme } from 'styled-components';\r\n\r\n\r\ninterface TableFooterProps extends TableProps {\r\n  onRowsPerPageChange: (value: number) => void;\r\n  rowsPerPage: number;\r\n  from?: number;\r\n  to?: number;\r\n  total?: number;\r\n  nextPage: () => void;\r\n  prevPage: () => void;\r\n  setIsCollapsed: (isCollapsed: boolean) => void;\r\n  isCollapsed: boolean;\r\n}\r\n\r\nconst TableFooter: React.FunctionComponent<TableFooterProps> = (props) => {\r\n  const theme = useTheme();\r\n  const rowsPerPageValues: DropdownItem[] = [{value: '10'}, {value: '20'}, {value: '50'}, {value: '100'}];\r\n\r\n  const dropDownText = `${props.rowsPerPageLabel ?? 'Rows per page'} : ${props.rowsPerPage}`;\r\n\r\n  return (\r\n    <StyledTableFooter data-testid=\"TestTableFooterRow\">\r\n          {\r\n            props.accordion &&\r\n            <StyledTableFooterCollapseButton onClick={() => props.setIsCollapsed(!props.isCollapsed)}\r\n                                             onMouseDown={defaultOnMouseDownHandler}\r\n                                             disabled={props.isCollapsed && props.rows.length <= props.rowsPerPage}>\r\n              {\r\n                props.isCollapsed &&\r\n                <>\r\n                  <span>{props.showMoreLabel ?? 'Show more'} ({props.rows.length - props.rowsPerPage})</span>\r\n                  <SystemIcons.ArrowDropDown/>\r\n                </>\r\n              }\r\n              {\r\n                !props.isCollapsed &&\r\n                <>\r\n                  <span>{props.showFewerLabel ?? 'Show fewer'}</span>\r\n                  <SystemIcons.ArrowDropUp/>\r\n                </>\r\n              }\r\n            </StyledTableFooterCollapseButton>\r\n          }\r\n          {\r\n            !props.accordion &&\r\n            <StyledTableFooterContent>\r\n              <DropdownButton\r\n                type={'text'}\r\n                items={rowsPerPageValues}\r\n                disabled={props.showLoadingIndicator}\r\n                value={[`${props.rowsPerPage}`]}\r\n                onClick={(value) => props.onRowsPerPageChange(+value[0])}\r\n                label={dropDownText}\r\n                keepLabel={true}\r\n              />\r\n              <StyledTableFooterCurrentInfo>\r\n                {props.total === 0 ? 0 : props.from}-{props.to} of {props.total}\r\n              </StyledTableFooterCurrentInfo>\r\n              <StyledTableFooterControls>\r\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.prevPage()}\r\n                            disabled={props.from === 1 || props.showLoadingIndicator}>\r\n                  <SystemIcons.ChevronLeft aria-label='Previous' size=\"24\" color={COLORS.getColor('neutral_600', theme)}/>\r\n                </IconButton>\r\n                <IconButton variant=\"secondary\" shape=\"circular\" action={() => props.nextPage()}\r\n                            disabled={props.to === props.total || props.showLoadingIndicator}>\r\n                  <SystemIcons.ChevronRight aria-label='Next' size=\"24\" color={COLORS.getColor('neutral_600', theme)}/>\r\n                </IconButton>\r\n              </StyledTableFooterControls>\r\n            </StyledTableFooterContent>\r\n          }\r\n    </StyledTableFooter>\r\n  );\r\n};\r\n\r\n\r\nexport default TableFooter;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Table/TableFooter.js

@@ -55,10 +55,7 @@ const TableFooter = props => {
           children: /*#__PURE__*/_jsx(SystemIcons.ChevronLeft, {
             "aria-label": "Previous",
             size: "24",
-            color: COLORS.generateToken({
-              componentType: 'icon',
-              defaultVariant: 'subtle'
-            }, theme)
+            color: COLORS.getColor('neutral_600', theme)
           })
         }), /*#__PURE__*/_jsx(IconButton, {
           variant: "secondary",
@@ -68,10 +65,7 @@ const TableFooter = props => {
           children: /*#__PURE__*/_jsx(SystemIcons.ChevronRight, {
             "aria-label": "Next",
             size: "24",
-            color: COLORS.generateToken({
-              componentType: 'icon',
-              defaultVariant: 'subtle'
-            }, theme)
+            color: COLORS.getColor('neutral_600', theme)
           })
         })]
       })]