intergalactic 15.99.0-prerelease.1 → 15.100.0-prerelease.0

package/tag/lib/es6/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","logger","CloseM","localizedMessages","i18nEnhance","resolveColorEnhance","uniqueIDEnhancement","keyboardFocusEnhance","style","_sstyled","insert","callAllEventHandlers","legacyThemeRecommendedMigration","primary","muted","info","success","warning","danger","secondary","RootTag","_Component","_inherits","_super","_createSuper","props","_legacyThemeRecommend","_this","_classCallCheck","call","_defineProperty","_assertThisInitialized","focusable","setState","event","key","asProps","onClick","preventDefault","warn","use","concat","theme","Tag","displayName","_createClass","value","getCircleProps","size","getTextProps","interactive","id","uid","state","tabIndex","getCloseProps","getI18nText","onMount","handleCloseMount","onUnmount","handleCloseUnmount","render","_ref","_ref6","STag","_this$asProps","Children","styles","color","disabled","addonLeft","addonRight","resolveColor","outerId","createElement","cn","_objectSpread","_assignProps","undefined","handleKeyDown","Addon","tag","Text","i18n","locale","_ref2","arguments[0]","_ref7","SText","_assignProps2","enhance","Close","_ref3","_ref8","SClose","useEffect","_props$onMount","_props$onUnmount","onKeyDown","useCallback","_assignProps3","_ref4","_ref9","SAddon","_assignProps4","Circle","_ref5","_ref10","SCircle","_assignProps5"],"sources":["../../src/Tag.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport logger from '@semcore/utils/lib/logger';\nimport CloseM from '@semcore/icon/Close/m';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/tag.shadow.css';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\n\nconst legacyThemeRecommendedMigration = {\n  primary: {\n    muted: 'gray-500',\n    info: 'blue-500',\n    success: 'green-500',\n    warning: 'orange-500',\n    danger: 'red-500',\n  },\n  secondary: {\n    muted: 'gray-50',\n  },\n};\n\nclass RootTag extends Component {\n  static displayName = 'Tag';\n  static style = style;\n  static enhance = [\n    i18nEnhance(localizedMessages),\n    uniqueIDEnhancement(),\n    resolveColorEnhance(),\n    keyboardFocusEnhance(),\n  ];\n  static defaultProps = {\n    theme: 'primary',\n    color: 'gray-500',\n    size: 'm',\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n  state = {\n    focusable: 'container',\n  };\n\n  constructor(props) {\n    super(props);\n\n    logger.warn(\n      props.use,\n      `Property 'use' is deprecated, replace property to \"theme='${props.use}' color='${\n        legacyThemeRecommendedMigration[props.use]?.[props.theme]\n      }'\"`,\n      props['data-ui-name'] || Tag.displayName,\n    );\n  }\n\n  getCircleProps() {\n    const { size } = this.asProps;\n    return { size };\n  }\n\n  getTextProps() {\n    const { interactive } = this.asProps;\n    const id = this.asProps.id || `igc-${this.asProps.uid}-tag`;\n    const { focusable } = this.state;\n\n    return {\n      tabIndex: focusable === 'text' && interactive ? 0 : -1,\n      id: `${id}-text`,\n    };\n  }\n  handleCloseMount = () => {\n    this.setState({ focusable: 'text' });\n  };\n  handleCloseUnmount = () => {\n    this.setState({ focusable: 'container' });\n  };\n  getCloseProps() {\n    const { getI18nText } = this.asProps;\n    const id = this.asProps.id || `igc-${this.asProps.uid}-tag`;\n\n    return {\n      getI18nText,\n      id: `${id}-clear`,\n      'aria-labelledby': `${id}-clear ${id}-text`,\n      'aria-label': getI18nText('remove'),\n      'aria-hidden': 'true',\n      onMount: this.handleCloseMount,\n      onUnmount: this.handleCloseUnmount,\n    };\n  }\n\n  handleKeyDown = (event) => {\n    switch (event.key) {\n      case ' ':\n      case 'Enter':\n        if (this.asProps.onClick) {\n          event.preventDefault();\n          this.asProps.onClick(event);\n        }\n        break;\n    }\n  };\n\n  render() {\n    const STag = Root;\n    const {\n      Children,\n      styles,\n      color,\n      interactive,\n      disabled,\n      addonLeft,\n      addonRight,\n      resolveColor,\n      id: outerId,\n      uid,\n    } = this.asProps;\n    const { focusable } = this.state;\n    const id = outerId || `igc-${uid}-tag`;\n\n    return sstyled(styles)(\n      <STag\n        render={Box}\n        id={id}\n        use:interactive={!disabled && interactive}\n        role={interactive ? 'button' : undefined}\n        tag-color={resolveColor(color)}\n        onKeyDown={this.handleKeyDown}\n        use:tabIndex={interactive && focusable === 'container' ? 0 : -1}\n      >\n        {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}\n        {addonTextChildren(Children, Tag.Text, Tag.Addon)}\n        {addonRight ? <Tag.Addon tag={addonRight} /> : null}\n      </STag>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={Box} tag='span' />);\n}\nText.enhance = [keyboardFocusEnhance()];\n\nfunction Close(props) {\n  const SClose = Root;\n  const { styles } = props;\n\n  React.useEffect(() => {\n    props.onMount?.();\n    return () => props.onUnmount?.();\n  }, []);\n\n  const onKeyDown = React.useCallback(\n    (event) => {\n      if (props.onKeyDown) {\n        return props.onKeyDown(event);\n      }\n\n      if (props.onClick && (event.key === 'Enter' || event.key === ' ')) {\n        event.preventDefault();\n        props.onClick(event);\n      }\n    },\n    [props.onKeyDown, props.onClick],\n  );\n\n  return sstyled(styles)(<SClose render={Box} tag={CloseM} interactive onKeyDown={onKeyDown} />);\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nfunction Circle(props) {\n  const SCircle = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SCircle render={Box} tag='span' />);\n}\n\nconst Tag = createComponent(RootTag, {\n  Text,\n  Addon,\n  Close,\n  Circle,\n});\n\nexport default Tag;\n"],"mappings":"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"}
+{"version":3,"file":"Tag.js","names":["React","createComponent","Component","sstyled","Root","Box","addonTextChildren","logger","CloseM","localizedMessages","i18nEnhance","resolveColorEnhance","uniqueIDEnhancement","keyboardFocusEnhance","log","style","_sstyled","insert","legacyThemeRecommendedMigration","primary","muted","info","success","warning","danger","secondary","RootTag","_Component","_inherits","_super","_createSuper","props","_legacyThemeRecommend","_this","_classCallCheck","call","_defineProperty","_assertThisInitialized","focusable","setState","event","key","asProps","onClick","preventDefault","warn","use","concat","theme","Tag","displayName","_createClass","value","getCircleProps","size","getTextProps","interactive","id","uid","state","tabIndex","role","undefined","getCloseProps","getI18nText","onMount","handleCloseMount","onUnmount","handleCloseUnmount","render","_ref","_ref8","STag","_this$asProps","Children","styles","color","disabled","addonLeft","addonRight","resolveColor","outerId","isInteractiveView","isInteractive","createElement","cn","_objectSpread","_assignProps","handleKeyDown","Addon","tag","Text","i18n","locale","RootTagContainer","_Component2","_super2","apply","arguments","getTagProps","_this$asProps2","active","_this$asProps3","_ref2","_ref9","STagContainer","_this$asProps4","_assignProps2","RootCloseTagContainer","_Component3","_super3","_this2","_len","length","args","Array","_key","_this2$asProps","onKeyDown","_ref3","_ref10","STagContainerClose","_this$asProps5","_assignProps3","children","CloseTagContainer","Close","_ref4","arguments[0]","_ref11","SText","_assignProps4","enhance","_ref5","_ref12","SClose","useEffect","_props$onMount","_props$onUnmount","useCallback","_assignProps5","_ref6","_ref13","SAddon","_assignProps6","Circle","_ref7","_ref14","SCircle","_assignProps7","TagContainer"],"sources":["../../src/Tag.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport logger from '@semcore/utils/lib/logger';\nimport CloseM from '@semcore/icon/Close/m';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport log from '@semcore/utils/lib/logger';\n\nimport style from './style/tag.shadow.css';\n\nconst legacyThemeRecommendedMigration = {\n  primary: {\n    muted: 'gray-500',\n    info: 'blue-500',\n    success: 'green-500',\n    warning: 'orange-500',\n    danger: 'red-500',\n  },\n  secondary: {\n    muted: 'gray-50',\n  },\n};\n\nclass RootTag extends Component {\n  static displayName = 'Tag';\n  static style = style;\n  static enhance = [\n    i18nEnhance(localizedMessages),\n    uniqueIDEnhancement(),\n    resolveColorEnhance(),\n    keyboardFocusEnhance(),\n  ];\n  static defaultProps = {\n    theme: 'primary',\n    color: 'gray-500',\n    size: 'm',\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n  state = {\n    focusable: 'container',\n  };\n\n  constructor(props) {\n    super(props);\n\n    logger.warn(\n      props.use,\n      `Property 'use' is deprecated, replace property to \"theme='${props.use}' color='${\n        legacyThemeRecommendedMigration[props.use]?.[props.theme]\n      }'\"`,\n      props['data-ui-name'] || Tag.displayName,\n    );\n  }\n\n  getCircleProps() {\n    const { size } = this.asProps;\n    return { size };\n  }\n\n  getTextProps() {\n    const { interactive } = this.asProps;\n    const id = this.asProps.id || `igc-${this.asProps.uid}-tag`;\n    const { focusable } = this.state;\n\n    return {\n      tabIndex: focusable === 'text' && interactive ? 0 : -1,\n      id: `${id}-text`,\n      role: focusable === 'text' && interactive ? 'button' : undefined,\n    };\n  }\n  handleCloseMount = () => {\n    this.setState({ focusable: 'text' });\n  };\n  handleCloseUnmount = () => {\n    this.setState({ focusable: 'container' });\n  };\n  getCloseProps() {\n    const { getI18nText } = this.asProps;\n    const id = this.asProps.id || `igc-${this.asProps.uid}-tag`;\n\n    return {\n      getI18nText,\n      id: `${id}-clear`,\n      'aria-labelledby': `${id}-clear ${id}-text`,\n      'aria-label': getI18nText('remove'),\n      onMount: this.handleCloseMount,\n      onUnmount: this.handleCloseUnmount,\n    };\n  }\n\n  handleKeyDown = (event) => {\n    switch (event.key) {\n      case ' ':\n      case 'Enter':\n        if (this.asProps.onClick) {\n          event.preventDefault();\n          this.asProps.onClick(event);\n        }\n        break;\n    }\n  };\n\n  render() {\n    const STag = Root;\n    const {\n      Children,\n      styles,\n      color,\n      interactive,\n      disabled,\n      addonLeft,\n      addonRight,\n      resolveColor,\n      id: outerId,\n      uid,\n    } = this.asProps;\n    const { focusable } = this.state;\n    const id = outerId || `igc-${uid}-tag`;\n    const isInteractiveView = !disabled && interactive;\n    const isInteractive = !disabled && interactive && focusable === 'container';\n\n    return sstyled(styles)(\n      <STag\n        render={Box}\n        id={id}\n        use:interactive={isInteractive}\n        use:interactiveView={isInteractiveView}\n        tag-color={resolveColor(color)}\n        onKeyDown={this.handleKeyDown}\n        use:tabIndex={isInteractive ? 0 : -1}\n        role={isInteractive ? 'button' : undefined}\n      >\n        {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}\n        {addonTextChildren(Children, Tag.Text, Tag.Addon)}\n        {addonRight ? <Tag.Addon tag={addonRight} /> : null}\n      </STag>,\n    );\n  }\n}\n\nclass RootTagContainer extends Component {\n  static displayName = 'TagContainer';\n  static style = style;\n\n  static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement()];\n\n  getTagProps() {\n    const { size, theme, color, disabled, active, uid, id: outerId } = this.asProps;\n    const id = outerId || `igc-${uid}-tag`;\n\n    return {\n      id: `${id}-text`,\n      disabled,\n      size,\n      theme,\n      color,\n      active,\n    };\n  }\n\n  getCloseProps() {\n    const { size, theme, color, disabled, active, uid, id: outerId, getI18nText } = this.asProps;\n    const id = outerId || `igc-${uid}-tag`;\n\n    return {\n      disabled,\n      size,\n      theme,\n      color,\n      active,\n      id: `${id}-clear`,\n      'aria-labelledby': `${id}-clear ${id}-text`,\n      'aria-label': getI18nText('remove'),\n    };\n  }\n\n  render() {\n    const STagContainer = Root;\n    const { styles, Children } = this.asProps;\n\n    return sstyled(styles)(\n      <STagContainer render={Box}>\n        <Children />\n      </STagContainer>,\n    );\n  }\n}\n\nclass RootCloseTagContainer extends Component {\n  static displayName = 'CloseTagContainer';\n  static style = style;\n\n  static defaultProps = () => {\n    return {\n      theme: 'primary',\n      color: 'gray-500',\n      size: 'm',\n      i18n: localizedMessages,\n      locale: 'en',\n      children: <CloseTagContainer.Close />,\n    };\n  };\n\n  static enhance = [resolveColorEnhance(), keyboardFocusEnhance()];\n\n  handleKeyDown = (event) => {\n    const { onKeyDown, onClick } = this.asProps;\n\n    if (onKeyDown) {\n      return onKeyDown(event);\n    }\n\n    if (onClick && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      onClick(event);\n    }\n  };\n\n  render() {\n    const STagContainerClose = Root;\n    const { Children, styles, color, resolveColor } = this.asProps;\n\n    return sstyled(styles)(\n      <STagContainerClose\n        render={Box}\n        tag={'button'}\n        interactive={true}\n        interactiveView={true}\n        tag-color={resolveColor(color)}\n        onKeyDown={this.handleKeyDown}\n      >\n        <Children />\n      </STagContainerClose>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={Box} tag='span' />);\n}\nText.enhance = [keyboardFocusEnhance()];\n\nfunction Close(props) {\n  const SClose = Root;\n  const { styles } = props;\n\n  React.useEffect(() => {\n    props.onMount?.();\n\n    log.warn(\n      true,\n      'Tag.Close is deprecated and will be removed in the next major release. Please, use TagContainer and TagContainer.Close',\n      'Tag.Close',\n    );\n\n    return () => props.onUnmount?.();\n  }, []);\n\n  const onKeyDown = React.useCallback(\n    (event) => {\n      if (props.onKeyDown) {\n        return props.onKeyDown(event);\n      }\n\n      if (props.onClick && (event.key === 'Enter' || event.key === ' ')) {\n        event.preventDefault();\n        props.onClick(event);\n      }\n    },\n    [props.onKeyDown, props.onClick],\n  );\n\n  return sstyled(styles)(<SClose render={Box} tag={CloseM} interactive onKeyDown={onKeyDown} />);\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nfunction Circle(props) {\n  const SCircle = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SCircle render={Box} tag='span' />);\n}\n\nconst Tag = createComponent(RootTag, {\n  Text,\n  Addon,\n  Close,\n  Circle,\n});\n\nconst CloseTagContainer = createComponent(RootCloseTagContainer, {\n  Close: CloseM,\n});\n\nexport const TagContainer = createComponent(RootTagContainer, {\n  Tag,\n  Close: CloseTagContainer,\n});\n\nexport default Tag;\n"],"mappings":"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"}

package/tag/lib/es6/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\nimport { IconProps } from '@semcore/icon';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TagSize = 'xl' | 'l' | 'm';\n/** @deprecated */\nexport type TagThemeOld =\n  | 'muted'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'invert'\n  | 'additional';\nexport type TagTheme = 'primary' | 'secondary' | TagThemeOld;\nexport type TagUse = 'primary' | 'secondary';\n\n/** @deprecated */\nexport interface ITagProps extends TagProps, UnknownProperties {}\nexport type TagProps = BoxProps &\n  KeyboardFocusProps & {\n    /** Value responsible for tag availability\n     */\n    disabled?: boolean;\n    /** Value responsible for tag activity\n     */\n    active?: boolean;\n    /** Interactive tag\n     */\n    interactive?: boolean;\n    /** Tag type\n     * @default secondary\n     * @deprecated v4.0.0\n     * @use ITagProps.theme\n     */\n    use?: TagUse;\n    /** Tag theme, there are several default themes or you can use your color\n     * @default primary\n     */\n    theme?: TagTheme;\n    /** Tag color text */\n    color?: string;\n    /** Tag size\n     * @default m\n     */\n    size?: TagSize;\n    /** Left addon tag */\n    addonLeft?: React.ElementType;\n    /** Right addon tag */\n    addonRight?: React.ElementType;\n    locale?: string;\n  };\n\n/** @deprecated */\nexport interface ITagCloseProps extends TagCloseProps, UnknownProperties {}\nexport type TagCloseProps = IconProps & {\n  /** Tag type\n   * @default secondary\n   */\n  use?: TagUse;\n  /** Tag theme, there are several default themes or you can use your color\n   * @default muted\n   */\n  theme?: TagTheme;\n};\n\n/** @deprecated */\nexport interface ITagContext extends TagContext, UnknownProperties {}\nexport type TagContext = TagProps & {\n  getCloseProps?: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITagAddonProps extends TagAddonProps, UnknownProperties {}\nexport type TagAddonProps = BoxProps & {};\n\n/** @deprecated */\nexport interface ITagTextProps extends TagTextProps, UnknownProperties {}\nexport type TagTextProps = BoxProps & KeyboardFocusProps & {};\n\ndeclare const Tag: Intergalactic.Component<'div', TagProps, TagContext> & {\n  Text: Intergalactic.Component<'div', TagTextProps>;\n  Addon: Intergalactic.Component<'div', TagAddonProps>;\n  Close: Intergalactic.Component<'div', TagCloseProps>;\n  Circle: Intergalactic.Component<'div', TagAddonProps>;\n};\n\nexport default Tag;\n"],"mappings":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\nimport { IconProps } from '@semcore/icon';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TagSize = 'xl' | 'l' | 'm';\n/** @deprecated */\nexport type TagThemeOld =\n  | 'muted'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'invert'\n  | 'additional';\nexport type TagTheme = 'primary' | 'secondary' | TagThemeOld;\nexport type TagUse = 'primary' | 'secondary';\n\n/** @deprecated */\nexport interface ITagProps extends TagProps, UnknownProperties {}\nexport type TagProps = BoxProps &\n  KeyboardFocusProps & {\n    /** Value responsible for tag availability\n     */\n    disabled?: boolean;\n    /** Value responsible for tag activity\n     */\n    active?: boolean;\n    /** Interactive tag\n     */\n    interactive?: boolean;\n    /** Tag type\n     * @default secondary\n     * @deprecated v4.0.0\n     * @use ITagProps.theme\n     */\n    use?: TagUse;\n    /** Tag theme, there are several default themes or you can use your color\n     * @default primary\n     */\n    theme?: TagTheme;\n    /** Tag color text */\n    color?: string;\n    /** Tag size\n     * @default m\n     */\n    size?: TagSize;\n    /** Left addon tag */\n    addonLeft?: React.ElementType;\n    /** Right addon tag */\n    addonRight?: React.ElementType;\n    locale?: string;\n  };\n\n/** @deprecated */\nexport interface ITagCloseProps extends TagCloseProps, UnknownProperties {}\nexport type TagCloseProps = IconProps & {\n  /** Tag type\n   * @default secondary\n   */\n  use?: TagUse;\n  /** Tag theme, there are several default themes or you can use your color\n   * @default muted\n   */\n  theme?: TagTheme;\n};\n\n/** @deprecated */\nexport interface ITagContext extends TagContext, UnknownProperties {}\nexport type TagContext = TagProps & {\n  getCloseProps?: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITagAddonProps extends TagAddonProps, UnknownProperties {}\nexport type TagAddonProps = BoxProps & {};\n\n/** @deprecated */\nexport interface ITagTextProps extends TagTextProps, UnknownProperties {}\nexport type TagTextProps = BoxProps & KeyboardFocusProps & {};\n\ndeclare const Tag: Intergalactic.Component<'div', TagProps, TagContext> & {\n  Text: Intergalactic.Component<'div', TagTextProps>;\n  Addon: Intergalactic.Component<'div', TagAddonProps>;\n  /**\n   * @deprecated For Tags with close button, you should use\n   * <TagContainer>\n   *     <TagContainer.Tag.Text>Tag text</TagContainer.Tag.Text>\n   *     <TagContainer.Close onClick={handleClose} />\n   * </TagContainer>\n   * See example on https://developer.semrush.com/intergalactic/components/tag/tag-code#removing-tag\n   * */\n  Close: Intergalactic.Component<'div', TagCloseProps>;\n  Circle: Intergalactic.Component<'div', TagAddonProps>;\n};\n\ndeclare const TagContainer: Intergalactic.Component<'div', TagProps, TagContext> & {\n  Tag: typeof Tag;\n  Close: Intergalactic.Component<'button', KeyboardFocusProps>;\n};\n\nexport default Tag;\nexport { TagContainer };\n"],"mappings":""}

package/tag/lib/es6/index.js

@@ -1,2 +1,2 @@
-export { default } from './Tag';
+export { default, TagContainer } from './Tag';
 //# sourceMappingURL=index.js.map

package/tag/lib/es6/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default"],"sources":["../../src/index.js"],"sourcesContent":["export { default } from './Tag';\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,OAAO"}
+{"version":3,"file":"index.js","names":["default","TagContainer"],"sources":["../../src/index.js"],"sourcesContent":["export { default, TagContainer } from './Tag';\n"],"mappings":"AAAA,SAASA,OAAO,EAAEC,YAAY,QAAQ,OAAO"}

package/tag/lib/es6/style/tag.shadow.css

@@ -1,4 +1,5 @@
-STag {
+STag,
+STagContainerClose {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -13,8 +14,9 @@ STag {
   font-weight: var(--intergalactic-medium, 500);
   color: var(--tag-color);
 
-  &[interactive]:has(SText:focus) {
+  &[interactive][keyboardFocused] {
     box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+    z-index: 1;
   }
 
   &::before {
@@ -52,27 +54,19 @@ STag {
   }
 }
 
-STag[interactive][keyboardFocused] {
-  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
-  z-index: 1;
-}
-
-STag[interactive][keyboardFocused]:has(:focus) {
-  box-shadow: none;
-}
-
-
-STag[disabled] {
+STag[disabled],
+STagContainerClose[disabled] {
   opacity: var(--intergalactic-disabled-opacity, 0.3);
   cursor: default;
   pointer-events: none;
 }
 
-STag[interactive] {
+STag[interactiveView] {
   cursor: pointer;
 }
 
-STag[size='m'] {
+STag[size='m'],
+STagContainerClose[size='m'] {
   height: 20px;
   min-width: 20px;
 
@@ -90,7 +84,8 @@ STag[size='m'] {
   }
 }
 
-STag[size='l'] {
+STag[size='l'],
+STagContainerClose[size='l'] {
   height: 28px;
   min-width: 28px;
 
@@ -100,9 +95,11 @@ STag[size='l'] {
   }
 }
 
-STag[size='xl'] {
+STag[size='xl'],
+STagContainerClose[size='xl'] {
   height: 40px;
   min-width: 40px;
+  padding: 0 var(--intergalactic-spacing-2x, 8px);
 
   & SText {
     font-size: var(--intergalactic-fs-300, 16px);
@@ -110,7 +107,8 @@ STag[size='xl'] {
   }
 }
 
-STag[theme='primary'] {
+STag[theme='primary'],
+STagContainerClose[theme='primary'] {
   &::before {
     top: -1px;
     left: -1px;
@@ -122,8 +120,8 @@ STag[theme='primary'] {
     display: none;
   }
 
-  &[interactive]:hover,
-  &[interactive]:active,
+  &[interactiveView]:hover,
+  &[interactiveView]:active,
   &[active] {
     &:before {
       opacity: 0.3;
@@ -132,13 +130,15 @@ STag[theme='primary'] {
 }
 
 STag[theme='secondary'],
-STag[theme='additional'] {
+STagContainerClose[theme='secondary'],
+STag[theme='additional'],
+STagContainerClose[theme='additional'] {
   &::before {
     opacity: 0.01;
   }
 
-  &[interactive]:hover,
-  &[interactive]:active,
+  &[interactiveView]:hover,
+  &[interactiveView]:active,
   &[active] {
     &:before {
       opacity: 0.1;
@@ -147,21 +147,28 @@ STag[theme='additional'] {
 }
 
 STag[theme='secondary'],
+STagContainerClose[theme='secondary'],
 STag[theme='additional'],
+STagContainerClose[theme='additional'],
 STag[theme='secondary-invert'],
-STag[theme='additional-invert'] {
+STagContainerClose[theme='secondary-invert'],
+STag[theme='additional-invert'],
+STagContainerClose[theme='additional-invert'] {
   &::after {
     opacity: 0.5;
   }
 }
 
-STag[theme='primary-invert'] {
+STag[theme='primary-invert'],
+STagContainerClose[theme='primary-invert'] {
   background-color: var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15));
   color: var(--intergalactic-text-primary-invert, #ffffff);
 }
 
 STag[theme='secondary-invert'],
-STag[theme='additional-invert'] {
+STagContainerClose[theme='secondary-invert'],
+STag[theme='additional-invert'],
+STagContainerClose[theme='additional-invert'] {
   color: var(--intergalactic-text-primary-invert, #ffffff);
 }
 
@@ -182,7 +189,7 @@ SText {
   position: relative;
 }
 
-STag[interactive] SText[keyboardFocused] {
+SText[keyboardFocused] {
   box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
   z-index: 1;
 }
@@ -258,4 +265,70 @@ SClose {
   &:hover path {
     opacity: 1;
   }
+}
+
+STagContainer {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+
+  STag {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    padding-right: var(--intergalactic-spacing-05x, 2px);
+
+    &::before,
+    &::after {
+      border-right: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+      margin-right: -1px;
+    }
+
+    SText {
+      padding-right: 0;
+    }
+  }
+
+  STagContainerClose {
+    cursor: pointer;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    padding-left: 0;
+    padding-right: 0;
+    min-width: 20px;
+
+    &::before,
+    &::after {
+      border-left: 0;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &::before {
+      left: -1px;
+    }
+
+    svg {
+      padding-left: 0;
+      padding-right: var(--intergalactic-spacing-1x, 4px);
+    }
+
+    svg path {
+      opacity: 0.5;
+    }
+
+    &:hover svg path {
+      opacity: 1;
+    }
+  }
+
+  STagContainerClose[size='xl'] {
+    svg {
+      padding-left: var(--intergalactic-spacing-1x, 4px);
+      padding-right: var(--intergalactic-spacing-2x, 8px);
+    }
+
+  }
 }

package/tag/lib/es6/translations/en.json

@@ -1,3 +1,3 @@
 {
-  "remove": "tap to remove tag"
+  "remove": "Remove"
 }

package/tag/lib/types/index.d.ts

@@ -83,8 +83,22 @@ export type TagTextProps = BoxProps & KeyboardFocusProps & {};
 declare const Tag: Intergalactic.Component<'div', TagProps, TagContext> & {
   Text: Intergalactic.Component<'div', TagTextProps>;
   Addon: Intergalactic.Component<'div', TagAddonProps>;
+  /**
+   * @deprecated For Tags with close button, you should use
+   * <TagContainer>
+   *     <TagContainer.Tag.Text>Tag text</TagContainer.Tag.Text>
+   *     <TagContainer.Close onClick={handleClose} />
+   * </TagContainer>
+   * See example on https://developer.semrush.com/intergalactic/components/tag/tag-code#removing-tag
+   * */
   Close: Intergalactic.Component<'div', TagCloseProps>;
   Circle: Intergalactic.Component<'div', TagAddonProps>;
 };
 
+declare const TagContainer: Intergalactic.Component<'div', TagProps, TagContext> & {
+  Tag: typeof Tag;
+  Close: Intergalactic.Component<'button', KeyboardFocusProps>;
+};
+
 export default Tag;
+export { TagContainer };

package/time-picker/lib/cjs/TimePicker.js

@@ -30,18 +30,18 @@ var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynam
 var _i18nEnhance = _interopRequireDefault(require("intergalactic/utils/lib/enhances/i18nEnhance"));
 var _keyboardFocusEnhance = _interopRequireDefault(require("intergalactic/utils/lib/enhances/keyboardFocusEnhance"));
 /*__reshadow-styles__:"./style/time-picker.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___STimePicker_17k0m_gg_{position:relative;width:auto;outline:0}.___STimePicker_17k0m_gg_.__keyboardFocused_17k0m_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STimePicker_17k0m_gg_.__disabled_17k0m_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}.___SPickerInput_17k0m_gg_{box-sizing:content-box;text-align:center;z-index:1;height:1.5em}.___SPickerInput_17k0m_gg_.__placeholder_17k0m_gg_{text-overflow:initial}.___SPickerInput_17k0m_gg_:focus{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SPickerInput_17k0m_gg_._size_l_17k0m_gg_,.___SPickerInput_17k0m_gg_._size_m_17k0m_gg_{width:19px;margin:0 var(--intergalactic-spacing-2x, 8px);padding:0}.___SPickerInput_17k0m_gg_._size_l_17k0m_gg_{width:21px}.___SPickerFormat_17k0m_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:var(--intergalactic-medium, 500);line-height:normal;-webkit-text-decoration:none;text-decoration:none;align-items:center;border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:0 var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}@media (hover:hover){.___SPickerFormat_17k0m_gg_:hover{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9)}}.___SPickerFormat_17k0m_gg_.__active_17k0m_gg_,.___SPickerFormat_17k0m_gg_:active{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-active, #c4c7cf)}.___SPickerFormat_17k0m_gg_._size_m_17k0m_gg_{height:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px);margin:0-1px 0 0}.___SPickerFormat_17k0m_gg_._size_m_17k0m_gg_ .___SPickerFormatText_17k0m_gg_{margin:0 var(--intergalactic-spacing-2x, 8px)}.___SPickerFormat_17k0m_gg_._size_l_17k0m_gg_{height:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px);margin:0 calc(-1*var(--intergalactic-spacing-1x, 4px))0 0}.___SPickerFormat_17k0m_gg_._size_l_17k0m_gg_ .___SPickerFormatText_17k0m_gg_{margin:0 var(--intergalactic-spacing-3x, 12px)}.___SPickerFormat_17k0m_gg_.__disabled_17k0m_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;border-color:transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf)}.___SPickerFormat_17k0m_gg_.__keyboardFocused_17k0m_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STimePickerSeparator_17k0m_gg_{color:var(--intergalactic-text-primary, #191b23)}.___STimePickerSeparator_17k0m_gg_.__disabled_17k0m_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);pointer-events:none}" /*__inner_css_end__*/, "17k0m_gg_") /*__reshadow_css_end__*/, {
-  "__STimePicker": "___STimePicker_17k0m_gg_",
-  "_keyboardFocused": "__keyboardFocused_17k0m_gg_",
-  "_disabled": "__disabled_17k0m_gg_",
-  "__SPickerInput": "___SPickerInput_17k0m_gg_",
-  "_size_m": "_size_m_17k0m_gg_",
-  "_size_l": "_size_l_17k0m_gg_",
-  "__SPickerFormat": "___SPickerFormat_17k0m_gg_",
-  "__STimePickerSeparator": "___STimePickerSeparator_17k0m_gg_",
-  "_placeholder": "__placeholder_17k0m_gg_",
-  "_active": "__active_17k0m_gg_",
-  "__SPickerFormatText": "___SPickerFormatText_17k0m_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___STimePicker_jxc01_gg_{position:relative;width:auto;outline:0}.___STimePicker_jxc01_gg_.__keyboardFocused_jxc01_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STimePicker_jxc01_gg_.__disabled_jxc01_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}.___SPickerInput_jxc01_gg_{box-sizing:content-box;text-align:center;z-index:1;height:1.5em}.___SPickerInput_jxc01_gg_.__placeholder_jxc01_gg_{text-overflow:initial}.___SPickerInput_jxc01_gg_:focus{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SPickerInput_jxc01_gg_._size_l_jxc01_gg_,.___SPickerInput_jxc01_gg_._size_m_jxc01_gg_{width:19px;margin:0 var(--intergalactic-spacing-2x, 8px);padding:0}.___SPickerInput_jxc01_gg_._size_l_jxc01_gg_{width:21px}.___SPickerFormat_jxc01_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:var(--intergalactic-medium, 500);line-height:normal;-webkit-text-decoration:none;text-decoration:none;align-items:center;border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:0 var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}@media (hover:hover){.___SPickerFormat_jxc01_gg_:hover{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9)}}.___SPickerFormat_jxc01_gg_.__active_jxc01_gg_,.___SPickerFormat_jxc01_gg_:active{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-active, #c4c7cf)}.___SPickerFormat_jxc01_gg_._size_m_jxc01_gg_{height:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px);margin:0-1px 0 0}.___SPickerFormat_jxc01_gg_._size_m_jxc01_gg_ .___SPickerFormatText_jxc01_gg_{margin:0 var(--intergalactic-spacing-2x, 8px)}.___SPickerFormat_jxc01_gg_._size_l_jxc01_gg_{height:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px);margin:0 calc(-1*var(--intergalactic-spacing-1x, 4px))0 0}.___SPickerFormat_jxc01_gg_._size_l_jxc01_gg_ .___SPickerFormatText_jxc01_gg_{margin:0 var(--intergalactic-spacing-3x, 12px)}.___SPickerFormat_jxc01_gg_.__disabled_jxc01_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;border-color:transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf)}.___SPickerFormat_jxc01_gg_.__keyboardFocused_jxc01_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STimePickerSeparator_jxc01_gg_{color:var(--intergalactic-text-primary, #191b23)}.___STimePickerSeparator_jxc01_gg_.__disabled_jxc01_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);pointer-events:none}" /*__inner_css_end__*/, "jxc01_gg_") /*__reshadow_css_end__*/, {
+  "__STimePicker": "___STimePicker_jxc01_gg_",
+  "_keyboardFocused": "__keyboardFocused_jxc01_gg_",
+  "_disabled": "__disabled_jxc01_gg_",
+  "__SPickerInput": "___SPickerInput_jxc01_gg_",
+  "_size_m": "_size_m_jxc01_gg_",
+  "_size_l": "_size_l_jxc01_gg_",
+  "__SPickerFormat": "___SPickerFormat_jxc01_gg_",
+  "__STimePickerSeparator": "___STimePickerSeparator_jxc01_gg_",
+  "_placeholder": "__placeholder_jxc01_gg_",
+  "_active": "__active_jxc01_gg_",
+  "__SPickerFormatText": "___SPickerFormatText_jxc01_gg_"
 });
 var MAP_MERIDIEM = {
   AM: 'PM',

package/time-picker/lib/es6/TimePicker.js

@@ -18,18 +18,18 @@ import Format from './PickerFormat';
 import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
 import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
 /*__reshadow-styles__:"./style/time-picker.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STimePicker_17k0m_gg_{position:relative;width:auto;outline:0}.___STimePicker_17k0m_gg_.__keyboardFocused_17k0m_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STimePicker_17k0m_gg_.__disabled_17k0m_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}.___SPickerInput_17k0m_gg_{box-sizing:content-box;text-align:center;z-index:1;height:1.5em}.___SPickerInput_17k0m_gg_.__placeholder_17k0m_gg_{text-overflow:initial}.___SPickerInput_17k0m_gg_:focus{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SPickerInput_17k0m_gg_._size_l_17k0m_gg_,.___SPickerInput_17k0m_gg_._size_m_17k0m_gg_{width:19px;margin:0 var(--intergalactic-spacing-2x, 8px);padding:0}.___SPickerInput_17k0m_gg_._size_l_17k0m_gg_{width:21px}.___SPickerFormat_17k0m_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:var(--intergalactic-medium, 500);line-height:normal;-webkit-text-decoration:none;text-decoration:none;align-items:center;border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:0 var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}@media (hover:hover){.___SPickerFormat_17k0m_gg_:hover{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9)}}.___SPickerFormat_17k0m_gg_.__active_17k0m_gg_,.___SPickerFormat_17k0m_gg_:active{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-active, #c4c7cf)}.___SPickerFormat_17k0m_gg_._size_m_17k0m_gg_{height:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px);margin:0-1px 0 0}.___SPickerFormat_17k0m_gg_._size_m_17k0m_gg_ .___SPickerFormatText_17k0m_gg_{margin:0 var(--intergalactic-spacing-2x, 8px)}.___SPickerFormat_17k0m_gg_._size_l_17k0m_gg_{height:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px);margin:0 calc(-1*var(--intergalactic-spacing-1x, 4px))0 0}.___SPickerFormat_17k0m_gg_._size_l_17k0m_gg_ .___SPickerFormatText_17k0m_gg_{margin:0 var(--intergalactic-spacing-3x, 12px)}.___SPickerFormat_17k0m_gg_.__disabled_17k0m_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;border-color:transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf)}.___SPickerFormat_17k0m_gg_.__keyboardFocused_17k0m_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STimePickerSeparator_17k0m_gg_{color:var(--intergalactic-text-primary, #191b23)}.___STimePickerSeparator_17k0m_gg_.__disabled_17k0m_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);pointer-events:none}" /*__inner_css_end__*/, "17k0m_gg_") /*__reshadow_css_end__*/, {
-  "__STimePicker": "___STimePicker_17k0m_gg_",
-  "_keyboardFocused": "__keyboardFocused_17k0m_gg_",
-  "_disabled": "__disabled_17k0m_gg_",
-  "__SPickerInput": "___SPickerInput_17k0m_gg_",
-  "_size_m": "_size_m_17k0m_gg_",
-  "_size_l": "_size_l_17k0m_gg_",
-  "__SPickerFormat": "___SPickerFormat_17k0m_gg_",
-  "__STimePickerSeparator": "___STimePickerSeparator_17k0m_gg_",
-  "_placeholder": "__placeholder_17k0m_gg_",
-  "_active": "__active_17k0m_gg_",
-  "__SPickerFormatText": "___SPickerFormatText_17k0m_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STimePicker_jxc01_gg_{position:relative;width:auto;outline:0}.___STimePicker_jxc01_gg_.__keyboardFocused_jxc01_gg_:focus{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STimePicker_jxc01_gg_.__disabled_jxc01_gg_{color:var(--intergalactic-text-secondary, #6c6e79);cursor:default}.___SPickerInput_jxc01_gg_{box-sizing:content-box;text-align:center;z-index:1;height:1.5em}.___SPickerInput_jxc01_gg_.__placeholder_jxc01_gg_{text-overflow:initial}.___SPickerInput_jxc01_gg_:focus{background-color:var(--intergalactic-bg-highlight-focus, rgba(0, 143, 248, 0.2))}.___SPickerInput_jxc01_gg_._size_l_jxc01_gg_,.___SPickerInput_jxc01_gg_._size_m_jxc01_gg_{width:19px;margin:0 var(--intergalactic-spacing-2x, 8px);padding:0}.___SPickerInput_jxc01_gg_._size_l_jxc01_gg_{width:21px}.___SPickerFormat_jxc01_gg_{flex-shrink:0;position:relative;display:inline-flex;padding:0;white-space:nowrap;font-family:inherit;font-weight:var(--intergalactic-medium, 500);line-height:normal;-webkit-text-decoration:none;text-decoration:none;align-items:center;border:1px solid var(--intergalactic-border-primary, #c4c7cf);border-radius:0 var(--intergalactic-control-rounded, 6px) var(--intergalactic-control-rounded, 6px)0;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}@media (hover:hover){.___SPickerFormat_jxc01_gg_:hover{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-hover, #e0e1e9)}}.___SPickerFormat_jxc01_gg_.__active_jxc01_gg_,.___SPickerFormat_jxc01_gg_:active{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-bg-secondary-neutral-active, #c4c7cf)}.___SPickerFormat_jxc01_gg_._size_m_jxc01_gg_{height:var(--intergalactic-form-control-m, 28px);font-size:var(--intergalactic-fs-200, 14px);margin:0-1px 0 0}.___SPickerFormat_jxc01_gg_._size_m_jxc01_gg_ .___SPickerFormatText_jxc01_gg_{margin:0 var(--intergalactic-spacing-2x, 8px)}.___SPickerFormat_jxc01_gg_._size_l_jxc01_gg_{height:var(--intergalactic-form-control-l, 40px);font-size:var(--intergalactic-fs-300, 16px);margin:0 calc(-1*var(--intergalactic-spacing-1x, 4px))0 0}.___SPickerFormat_jxc01_gg_._size_l_jxc01_gg_ .___SPickerFormatText_jxc01_gg_{margin:0 var(--intergalactic-spacing-3x, 12px)}.___SPickerFormat_jxc01_gg_.__disabled_jxc01_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;border-color:transparent transparent transparent var(--intergalactic-border-primary, #c4c7cf)}.___SPickerFormat_jxc01_gg_.__keyboardFocused_jxc01_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STimePickerSeparator_jxc01_gg_{color:var(--intergalactic-text-primary, #191b23)}.___STimePickerSeparator_jxc01_gg_.__disabled_jxc01_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);pointer-events:none}" /*__inner_css_end__*/, "jxc01_gg_") /*__reshadow_css_end__*/, {
+  "__STimePicker": "___STimePicker_jxc01_gg_",
+  "_keyboardFocused": "__keyboardFocused_jxc01_gg_",
+  "_disabled": "__disabled_jxc01_gg_",
+  "__SPickerInput": "___SPickerInput_jxc01_gg_",
+  "_size_m": "_size_m_jxc01_gg_",
+  "_size_l": "_size_l_jxc01_gg_",
+  "__SPickerFormat": "___SPickerFormat_jxc01_gg_",
+  "__STimePickerSeparator": "___STimePickerSeparator_jxc01_gg_",
+  "_placeholder": "__placeholder_jxc01_gg_",
+  "_active": "__active_jxc01_gg_",
+  "__SPickerFormatText": "___SPickerFormatText_jxc01_gg_"
 });
 import keyboardFocusEnhance from 'intergalactic/utils/lib/enhances/keyboardFocusEnhance';
 var MAP_MERIDIEM = {

package/tooltip/index.d.ts

@@ -7,6 +7,11 @@ import Popper, {
   eventInteraction,
 } from 'intergalactic/popper';
 
+export type ArrowCustom = {
+  arrowBgColor?: string;
+  arrowShadowColor?: string;
+};
+
 /** @deprecated */
 export interface ITooltipProps extends TooltipProps, UnknownProperties {}
 export type TooltipProps = Intergalactic.InternalTypings.EfficientOmit<PopperProps, 'interaction'> &
@@ -39,7 +44,7 @@ export type TooltipContext = PopperContext & {};
 
 declare const Tooltip: Intergalactic.Component<'div', TooltipProps, TooltipContext> & {
   Trigger: Intergalactic.Component<'div', PopperTriggerProps, TooltipTriggerContext>;
-  Popper: Intergalactic.Component<'div', TooltipProps, TooltipContext>;
+  Popper: Intergalactic.Component<'div', TooltipProps & ArrowCustom, TooltipContext>;
 };
 
 export type TooltipHintProps = Intergalactic.InternalTypings.EfficientOmit<
@@ -69,7 +74,7 @@ export type HintPopperProps = TooltipHintPopperProps;
 
 declare const Hint: Intergalactic.Component<'div', HintProps, TooltipTriggerContext> & {
   Trigger: Intergalactic.Component<'div', PopperTriggerProps, TooltipTriggerContext>;
-  Popper: Intergalactic.Component<'div', HintPopperProps, TooltipContext>;
+  Popper: Intergalactic.Component<'div', HintPopperProps & ArrowCustom, TooltipContext>;
 };
 
 export type DescriptionTooltipProps = Intergalactic.InternalTypings.EfficientOmit<
@@ -102,7 +107,8 @@ type DescriptionTooltipPopperAriaProps = Intergalactic.RequireAtLeastOne<{
 }>;
 
 export type DescriptionTooltipPopperProps = DescriptionTooltipProps &
-  DescriptionTooltipPopperAriaProps & {
+  DescriptionTooltipPopperAriaProps &
+  ArrowCustom & {
     /**
      * Popper in DescriptionTooltip should have role `dialog`.
      * @default 'dialog'

package/tooltip/lib/cjs/Tooltip.js

@@ -29,14 +29,17 @@ var _uniqueID = _interopRequireDefault(require("intergalactic/utils/lib/uniqueID
 var _portal = _interopRequireDefault(require("intergalactic/portal"));
 var _excluded = ["Children", "title", "offset", "forcedAdvancedMode"];
 /*__reshadow-styles__:"./style/tooltip.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___STooltip_1fokr_gg_{position:relative;padding:var(--intergalactic-spacing-3x, 12px);border-radius:var(--intergalactic-popper-rounded, 6px);box-sizing:border-box;color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);word-wrap:break-word;max-width:228px;font-weight:400;white-space:normal;box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));background-color:var(--intergalactic-tooltip-default, #ffffff);border:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___STooltip_1fokr_gg_._theme_invert_1fokr_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-tooltip-invert, #191b23);border:1px solid var(--intergalactic-border-tooltip-invert, #6c6e79)}.___STooltip_1fokr_gg_._theme_warning_1fokr_gg_{background-color:var(--intergalactic-tooltip-warning, #ffd7df);border:1px solid var(--intergalactic-border-critical-active, #d1002f)}.___STooltip_1fokr_gg_[data-popper-reference-hidden]{visibility:hidden;pointer-events:none}.___SArrow_1fokr_gg_{position:absolute;border:6px solid;border-color:var(--intergalactic-border-secondary, #e0e1e9)}.___SArrow_1fokr_gg_:before{content:\"\";position:absolute;border:6px solid;border-color:var(--intergalactic-tooltip-default, #ffffff)}.___SArrow_1fokr_gg_._theme_invert_1fokr_gg_{border-color:var(--intergalactic-border-tooltip-invert, #6c6e79)}.___SArrow_1fokr_gg_._theme_invert_1fokr_gg_::before{border-color:var(--intergalactic-tooltip-invert, #191b23)}.___SArrow_1fokr_gg_._theme_warning_1fokr_gg_{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SArrow_1fokr_gg_._theme_warning_1fokr_gg_::before{border-color:var(--intergalactic-tooltip-warning, #ffd7df)}.___STooltip_1fokr_gg_[data-popper-placement^=top] .___SArrow_1fokr_gg_,.___STooltip_1fokr_gg_[data-popper-placement^=top] .___SArrow_1fokr_gg_::before{top:100%;border-bottom:0 transparent;border-right-color:transparent!important;border-left-color:transparent!important}.___STooltip_1fokr_gg_[data-popper-placement^=top] .___SArrow_1fokr_gg_::before{top:-7px;left:-6px}.___STooltip_1fokr_gg_[data-popper-placement^=bottom] .___SArrow_1fokr_gg_{bottom:100%;border-top:0 transparent;border-right-color:transparent!important;border-left-color:transparent!important}.___STooltip_1fokr_gg_[data-popper-placement^=bottom] .___SArrow_1fokr_gg_::before{top:1px;left:-6px;border-top:0 transparent;border-right-color:transparent!important;border-left-color:transparent!important}.___STooltip_1fokr_gg_[data-popper-placement^=left] .___SArrow_1fokr_gg_,.___STooltip_1fokr_gg_[data-popper-placement^=left] .___SArrow_1fokr_gg_::before{left:100%;border-right:0 transparent;border-top-color:transparent!important;border-bottom-color:transparent!important}.___STooltip_1fokr_gg_[data-popper-placement^=left] .___SArrow_1fokr_gg_::before{top:-6px;left:-7px}.___STooltip_1fokr_gg_[data-popper-placement^=right] .___SArrow_1fokr_gg_{right:100%;border-left:0 transparent;border-top-color:transparent!important;border-bottom-color:transparent!important}.___STooltip_1fokr_gg_[data-popper-placement^=right] .___SArrow_1fokr_gg_::before{top:-6px;left:1px;border-left:0 transparent;border-top-color:transparent!important;border-bottom-color:transparent!important}.___STooltipPortalledWrapper_1fokr_gg_{position:relative;z-index:var(--intergalactic-z-index-tooltip, 800)}.___STooltipPortalledWrapper_1fokr_gg_.__zIndex_1fokr_gg_{z-index:var(--zIndex_1fokr)}" /*__inner_css_end__*/, "1fokr_gg_") /*__reshadow_css_end__*/, {
-  "__STooltip": "___STooltip_1fokr_gg_",
-  "_theme_invert": "_theme_invert_1fokr_gg_",
-  "_theme_warning": "_theme_warning_1fokr_gg_",
-  "__STooltipPortalledWrapper": "___STooltipPortalledWrapper_1fokr_gg_",
-  "_zIndex": "__zIndex_1fokr_gg_",
-  "--zIndex": "--zIndex_1fokr",
-  "__SArrow": "___SArrow_1fokr_gg_"
+var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___STooltip_j6yyp_gg_{position:relative;padding:var(--intergalactic-spacing-3x, 12px);border-radius:var(--intergalactic-popper-rounded, 6px);box-sizing:border-box;color:var(--intergalactic-text-primary, #191b23);font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%);word-wrap:break-word;max-width:228px;font-weight:400;white-space:normal;box-shadow:var(--intergalactic-box-shadow-popper, 0px 1px 12px 0px rgba(25, 27, 35, 0.15));background-color:var(--intergalactic-tooltip-default, #ffffff);border:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___STooltip_j6yyp_gg_._theme_invert_j6yyp_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-tooltip-invert, #191b23);border:1px solid var(--intergalactic-border-tooltip-invert, #6c6e79)}.___STooltip_j6yyp_gg_._theme_warning_j6yyp_gg_{background-color:var(--intergalactic-tooltip-warning, #ffd7df);border:1px solid var(--intergalactic-border-critical-active, #d1002f)}.___STooltip_j6yyp_gg_[data-popper-reference-hidden]{visibility:hidden;pointer-events:none}.___SArrow_j6yyp_gg_{position:absolute;border:6px solid;border-color:var(--intergalactic-border-secondary, #e0e1e9)}.___SArrow_j6yyp_gg_:before{content:\"\";position:absolute;border:6px solid;border-color:var(--intergalactic-tooltip-default, #ffffff)}.___SArrow_j6yyp_gg_._theme_invert_j6yyp_gg_{border-color:var(--intergalactic-border-tooltip-invert, #6c6e79)}.___SArrow_j6yyp_gg_._theme_invert_j6yyp_gg_::before{border-color:var(--intergalactic-tooltip-invert, #191b23)}.___SArrow_j6yyp_gg_._theme_warning_j6yyp_gg_{border-color:var(--intergalactic-border-critical-active, #d1002f)}.___SArrow_j6yyp_gg_._theme_warning_j6yyp_gg_::before{border-color:var(--intergalactic-tooltip-warning, #ffd7df)}.___SArrow_j6yyp_gg_.__bgColor_j6yyp_gg_{border-color:var(--shadowColor_j6yyp)}.___SArrow_j6yyp_gg_.__bgColor_j6yyp_gg_::before{border-color:var(--bgColor_j6yyp)}.___STooltip_j6yyp_gg_[data-popper-placement^=top] .___SArrow_j6yyp_gg_,.___STooltip_j6yyp_gg_[data-popper-placement^=top] .___SArrow_j6yyp_gg_::before{top:100%;border-bottom:0 transparent;border-right-color:transparent!important;border-left-color:transparent!important}.___STooltip_j6yyp_gg_[data-popper-placement^=top] .___SArrow_j6yyp_gg_::before{top:-7px;left:-6px}.___STooltip_j6yyp_gg_[data-popper-placement^=bottom] .___SArrow_j6yyp_gg_{bottom:100%;border-top:0 transparent;border-right-color:transparent!important;border-left-color:transparent!important}.___STooltip_j6yyp_gg_[data-popper-placement^=bottom] .___SArrow_j6yyp_gg_::before{top:1px;left:-6px;border-top:0 transparent;border-right-color:transparent!important;border-left-color:transparent!important}.___STooltip_j6yyp_gg_[data-popper-placement^=left] .___SArrow_j6yyp_gg_,.___STooltip_j6yyp_gg_[data-popper-placement^=left] .___SArrow_j6yyp_gg_::before{left:100%;border-right:0 transparent;border-top-color:transparent!important;border-bottom-color:transparent!important}.___STooltip_j6yyp_gg_[data-popper-placement^=left] .___SArrow_j6yyp_gg_::before{top:-6px;left:-7px}.___STooltip_j6yyp_gg_[data-popper-placement^=right] .___SArrow_j6yyp_gg_{right:100%;border-left:0 transparent;border-top-color:transparent!important;border-bottom-color:transparent!important}.___STooltip_j6yyp_gg_[data-popper-placement^=right] .___SArrow_j6yyp_gg_::before{top:-6px;left:1px;border-left:0 transparent;border-top-color:transparent!important;border-bottom-color:transparent!important}.___STooltipPortalledWrapper_j6yyp_gg_{position:relative;z-index:var(--intergalactic-z-index-tooltip, 800)}.___STooltipPortalledWrapper_j6yyp_gg_.__zIndex_j6yyp_gg_{z-index:var(--zIndex_j6yyp)}" /*__inner_css_end__*/, "j6yyp_gg_") /*__reshadow_css_end__*/, {
+  "__STooltip": "___STooltip_j6yyp_gg_",
+  "_theme_invert": "_theme_invert_j6yyp_gg_",
+  "_theme_warning": "_theme_warning_j6yyp_gg_",
+  "__STooltipPortalledWrapper": "___STooltipPortalledWrapper_j6yyp_gg_",
+  "_zIndex": "__zIndex_j6yyp_gg_",
+  "--zIndex": "--zIndex_j6yyp",
+  "__SArrow": "___SArrow_j6yyp_gg_",
+  "_bgColor": "__bgColor_j6yyp_gg_",
+  "--shadowColor": "--shadowColor_j6yyp",
+  "--bgColor": "--bgColor_j6yyp"
 });
 var Popper = _popper["default"][_core.CREATE_COMPONENT]();
 var defaultProps = {
@@ -166,7 +169,9 @@ function TooltipPopper(props) {
     ignorePortalsStacking = props.ignorePortalsStacking,
     ariaLive = props['aria-live'],
     zIndex = props.zIndex,
-    role = props.role;
+    role = props.role,
+    arrowBgColor = props.arrowBgColor,
+    arrowShadowColor = props.arrowShadowColor;
   var STooltip = Popper.Popper;
   var SArrow = _flexBox.Box;
   var STooltipPortalledWrapper = _flexBox.Box;
@@ -195,7 +200,9 @@ function TooltipPopper(props) {
     "ref": popperRef
   }, _ref3))), /*#__PURE__*/_react["default"].createElement(Children, _ref5.cn("Children", {})), /*#__PURE__*/_react["default"].createElement(SArrow, _ref5.cn("SArrow", {
     "data-popper-arrow": true,
-    "use:theme": resolveColor(theme)
+    "use:theme": resolveColor(theme),
+    "bgColor": resolveColor(arrowBgColor),
+    "shadowColor": resolveColor(arrowShadowColor !== null && arrowShadowColor !== void 0 ? arrowShadowColor : arrowBgColor)
   })))));
 }
 var HintRoot = /*#__PURE__*/function (_TooltipRoot) {
@@ -290,6 +297,7 @@ var DescriptionTooltipRoot = /*#__PURE__*/function (_TooltipRoot2) {
         'aria-haspopup': !(disabled || props.disabled) ? 'dialog' : 'false',
         'aria-expanded': visible,
         'aria-describedby': undefined,
+        'aria-controls': visible ? "igc-".concat(this.asProps.uid, "-popper") : undefined,
         onKeyDown: this.handleTriggerKeyDown
       });
     }