@televet/kibble-ui 5.1.0 → 5.2.0

package/dist/chunks/{conversationCard.component-sKlfIP1V.js.map → conversationCard.component-Dg3RtQE8.js.map}

@@ -1 +1 @@
-{"version":3,"file":"conversationCard.component-sKlfIP1V.js","sources":["../../src/components/ConversationCard/components/ConversationCardAvatarGroup/conversationCardAvatarGroup.component.tsx","../../src/components/ConversationCard/components/ConversationCardHeader/conversationCardHeader.component.tsx","../../src/components/ConversationCard/components/ConversationCardButtons/conversationCardButtons.component.tsx","../../src/components/ConversationCard/components/ConversationCardTags/conversationCardTags.component.tsx","../../src/components/ConversationCard/components/ConversationCardFooter/conversationCardFooter.component.tsx","../../src/components/ConversationCard/components/ConversationCardContent/conversationCardContent.component.tsx","../../src/components/ConversationCard/conversationCard.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { Avatar } from 'components/Avatar/avatar.component';\nimport { Tooltip } from 'components/Tooltip/tooltip.component';\n\nexport interface ConversationCardAvatarGroupProps {\n  /** Avatars to display in the group. */\n  avatars: React.ReactNode[];\n  /** Maximum number of avatars to display.\n   * @default 1\n   */\n  max?: number;\n  /** Callback function to be called when the avatar group is clicked. */\n  onAvatarGroupClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;\n  /** Label for the tooltip. */\n  tooltipLabel?: string;\n  /** Data test id for the avatar group.\n   * @default kibble-conversation-card-avatar-group\n   */\n  'data-testid'?: string;\n}\n\nexport const ConversationCardAvatarGroup = ({\n  avatars,\n  max = 1,\n  onAvatarGroupClick,\n  tooltipLabel,\n  ['data-testid']: dataTestId = 'kibble-conversation-card-avatar-group',\n}: ConversationCardAvatarGroupProps): React.JSX.Element => {\n  return (\n    <Tooltip label={tooltipLabel || ''} disabled={!tooltipLabel?.length}>\n      <Flex\n        className=\"ConversationCard__AvatarGroup\"\n        data-testid={dataTestId}\n        alignItems=\"flex-start\"\n        justifyContent=\"flex-start\"\n      >\n        {max && avatars.length > max ? (\n          <Avatar\n            onClick={(e): void => {\n              e.stopPropagation();\n              if (onAvatarGroupClick) {\n                onAvatarGroupClick(e);\n              }\n            }}\n            cursor=\"pointer\"\n            name={avatars.length.toString()}\n            showTooltip={false}\n          />\n        ) : (\n          <>{avatars.map((avatar) => avatar)}</>\n        )}\n      </Flex>\n    </Tooltip>\n  );\n};\n","import React from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack, VStack } from '@chakra-ui/react/stack';\nimport { Timestamp, TimestampProps } from 'components/Timestamp/timestamp.component';\nimport { NotificationCounter } from 'components/NotificationCounter/notificationCounter.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Heading } from 'components/Heading/heading.component';\nimport { Text } from 'components/Text/text.component';\nimport {\n  ConversationCardAvatarGroup,\n  ConversationCardAvatarGroupProps,\n} from '../ConversationCardAvatarGroup/conversationCardAvatarGroup.component';\n\nexport interface ConversationCardHeaderProps {\n  /** Props for the avatar group. */\n  avatarGroupProps?: ConversationCardAvatarGroupProps;\n  /** If true, the notification indicator will be displayed. */\n  showNotificationIndicator?: boolean;\n  /** Determines if the card is pinned. */\n  isCardPinned?: boolean;\n  /** Determines if the card is being hovered. */\n  isHoveringCard?: boolean;\n  /** Subtitle of the card. */\n  subtitle?: string;\n  /** Props for the timestamp. */\n  timestampProps: TimestampProps;\n  /** Title of the card. */\n  title: string;\n  /** Data test id for the header.\n   * @default kibble-conversation-card-header\n   */\n  'data-testid'?: string;\n}\n\nexport const ConversationCardHeader = ({\n  avatarGroupProps,\n  timestampProps,\n  isHoveringCard,\n  isCardPinned,\n  title,\n  showNotificationIndicator,\n  subtitle,\n  ['data-testid']: dataTestId = 'kibble-conversation-card-header',\n}: ConversationCardHeaderProps): React.JSX.Element => {\n  return (\n    <HStack className=\"ConversationCard__Header\" data-testid={dataTestId} justify=\"space-between\" align=\"flex-start\">\n      <HStack className=\"ConversationCard__Header--Left\" data-testid={`${dataTestId}-left`} cursor=\"pointer\">\n        {avatarGroupProps && (\n          <ConversationCardAvatarGroup {...avatarGroupProps} tooltipLabel={avatarGroupProps?.tooltipLabel || title} />\n        )}\n        <VStack\n          className=\"ConversationCard__HeaderText\"\n          data-testid={`${dataTestId}-text`}\n          justify=\"center\"\n          align=\"left\"\n          gap=\"0\"\n        >\n          <Heading\n            className=\"ConversationCard__HeaderText--Title\"\n            data-testid={`${dataTestId}-title`}\n            size=\"sm\"\n            truncated\n          >\n            {title}\n          </Heading>\n          {subtitle && (\n            <Text\n              className=\"ConversationCard__HeaderText--Subtitle\"\n              data-testid={`${dataTestId}-subtitle`}\n              size=\"sm\"\n              variant=\"subtle\"\n              truncated\n            >\n              {subtitle}\n            </Text>\n          )}\n        </VStack>\n      </HStack>\n      <HStack\n        className=\"ConversationCard__Header--Right\"\n        data-testid={`${dataTestId}-right`}\n        visibility={isHoveringCard ? 'hidden' : 'visible'}\n        align=\"center\"\n        gap={1}\n      >\n        <Timestamp {...timestampProps} />\n        {showNotificationIndicator && (\n          <Box\n            as=\"span\"\n            className=\"ConversationCard__HeaderNotificationCounter\"\n            data-testid={`${dataTestId}-unread-indicator`}\n          >\n            <NotificationCounter size=\"xs\" />\n          </Box>\n        )}\n        {isCardPinned && (\n          <Flex data-testid={`${dataTestId}-pinned-icon`}>\n            <Icon size=\"md\" variant=\"info\" name=\"pin\" />\n          </Flex>\n        )}\n      </HStack>\n    </HStack>\n  );\n};\n","import React from 'react';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { Button } from 'components/Button/button.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Menu, MenuProps, MenuItemProps } from 'components/Menu';\n\nexport interface ConversationCardOverlayProps {\n  /** Determines if the conversation is open in an overlay. */\n  isOpenInOverlay?: boolean;\n  /** Callback function to be called when the conversation is opened in an overlay. */\n  onOpenInOverlay: () => void;\n  /** Data test id for the overlay button. */\n  'data-testid'?: string;\n}\n\nexport interface ConversationCardPinProps {\n  /** Determines if the conversation is pinned. */\n  isPinned?: boolean;\n  /** Callback function to called when the conversation is pinned. */\n  onTogglePin: (isPinned: boolean) => void;\n  /** Data test id for the pin button. */\n  'data-testid'?: string;\n}\n\nexport interface ConversationCardButtonsProps {\n  /** Props for the overlay button. */\n  overlayProps?: ConversationCardOverlayProps;\n  /** Props for the pin button. */\n  pinProps?: ConversationCardPinProps;\n  /** Props for the header Menu. */\n  headerMenuProps?: MenuProps;\n  /** Data test id for the buttons.\n   * @default kibble-conversation-card-buttons\n   */\n  'data-testid'?: string;\n}\n\ninterface ConversationCardButtonsComponentProps extends ConversationCardButtonsProps {\n  /** Determines if the conversation is being hovered.\n   * @internal\n   */\n  isHovering: boolean;\n  /** Callback function to set the hover state.\n   * @internal\n   */\n  setIsHovering: (isHovering: boolean) => void;\n}\n\nexport const ConversationCardButtons = ({\n  overlayProps,\n  pinProps,\n  headerMenuProps,\n  isHovering,\n  setIsHovering,\n  ['data-testid']: dataTestId = 'kibble-conversation-card-buttons',\n}: ConversationCardButtonsComponentProps): React.JSX.Element => {\n  const { isOpenInOverlay, onOpenInOverlay, ['data-testid']: overlayDataTestId } = overlayProps || {};\n  const { isPinned, onTogglePin, ['data-testid']: pinDataTestId } = pinProps || {};\n  const { listProps, ['data-testid']: headerMenuDataTestId } = headerMenuProps || {};\n  const pinIconName = isPinned ? 'pinCancel' : 'pin';\n\n  return (\n    <HStack className=\"ConversationCard__Menu\" data-testid={dataTestId} gap={1}>\n      {overlayProps && (\n        <Button\n          className=\"ConversationCard__OverlayButton\"\n          data-testid={overlayDataTestId ? overlayDataTestId : `${dataTestId}-overlay-button`}\n          variant=\"secondarySubtle\"\n          borderRadius=\"sm\"\n          {...(isOpenInOverlay && { active: true })}\n          onClick={(): void => {\n            if (onOpenInOverlay) {\n              onOpenInOverlay();\n            }\n\n            if (isHovering) {\n              setIsHovering(false);\n            }\n          }}\n          iconName=\"popup\"\n          size=\"sm\"\n        />\n      )}\n      {pinProps && (\n        <Button\n          className=\"ConversationCard__PinButton\"\n          data-testid={pinDataTestId ? pinDataTestId : `${dataTestId}-pin-button`}\n          variant={isPinned ? 'secondarySubtleDestructive' : 'secondarySubtle'}\n          borderRadius=\"sm\"\n          onClick={(): void => {\n            if (onTogglePin) {\n              onTogglePin(!isPinned);\n            }\n\n            if (isHovering) {\n              setIsHovering(false);\n            }\n          }}\n          iconName={pinIconName}\n          size=\"sm\"\n        />\n      )}\n      {headerMenuProps && (\n        <Menu\n          buttonProps={\n            headerMenuProps.buttonProps || {\n              variant: 'secondarySubtle',\n              size: 'sm',\n              borderRadius: 'sm',\n              iconName: 'dotsVertical',\n              hideCaret: true,\n              padding: 0,\n            }\n          }\n          closeOnSelect={false}\n          lazyMount\n          data-testid={headerMenuDataTestId ? headerMenuDataTestId : `${dataTestId}-menu`}\n          {...headerMenuProps}\n          listProps={{\n            ...listProps,\n            menuItems: [\n              ...(pinProps\n                ? [\n                    {\n                      label: `${isPinned ? 'Unpin' : 'Pin'} Conversation`,\n                      value: 'PinConversation',\n                      variant: isPinned ? 'danger' : 'default',\n                      leftElement: <Icon size=\"md\" variant={isPinned ? 'danger' : 'default'} name={pinIconName} />,\n                      onSelect: (): void => {\n                        if (onTogglePin) {\n                          onTogglePin(!isPinned);\n                        }\n                      },\n                    } as MenuItemProps,\n                  ]\n                : []),\n              ...(listProps?.menuItems || []),\n            ],\n          }}\n        />\n      )}\n    </HStack>\n  );\n};\n","import React from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Wrap, WrapItem } from '@chakra-ui/react/wrap';\nimport { Tag, TagProps } from 'components/Tag/tag.component';\nimport { Tooltip } from 'components/Tooltip/tooltip.component';\n\nexport type ConversationCardTag = TagProps & {\n  /** Content to display in the tooltip. */\n  tooltipContent?: string;\n};\n\nexport interface ConversationCardTagsProps {\n  /** Tags to display in the ConversationCard. */\n  tags: ConversationCardTag[];\n  /** Data test id for the tags.\n   * @default kibble-conversation-card-tags\n   */\n  'data-testid'?: string;\n}\n\nexport const ConversationCardTags = ({\n  tags,\n  ['data-testid']: dataTestId = 'kibble-conversation-card-tags',\n}: ConversationCardTagsProps): React.JSX.Element => {\n  return (\n    <Box className=\"ConversationCard__Tags\" mt={3} data-testid={dataTestId}>\n      <Wrap gap={2}>\n        {tags.map((tag) => {\n          const { tooltipContent, ...rest } = tag;\n          let tagElement = <Tag {...rest} size=\"sm\" textTransform=\"capitalize\" />;\n\n          if (tooltipContent) {\n            tagElement = (\n              <Tooltip label={tooltipContent} placement=\"top\">\n                <Box>{tagElement}</Box>\n              </Tooltip>\n            );\n          }\n\n          return <WrapItem key={tag.label}>{tagElement}</WrapItem>;\n        })}\n      </Wrap>\n    </Box>\n  );\n};\n","import React from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { Icon, IconProps } from 'components/Icon/icon.component';\nimport { Text, TextProps } from 'components/Text/text.component';\n\nexport interface ConversationCardFooterProps {\n  /** Props for the Icon component. */\n  iconProps?: IconProps;\n  /** Content of the footer. */\n  content: React.ReactNode;\n  /** Props to customize the content styling. */\n  contentProps?: Omit<TextProps, 'children'>;\n  /** Data test id for the footer.\n   * @default kibble-conversation-card-footer\n   */\n  'data-testid'?: string;\n}\n\nexport const ConversationCardFooter = ({\n  iconProps,\n  content,\n  contentProps,\n  ['data-testid']: dataTestId = 'kibble-conversation-card-footer',\n}: ConversationCardFooterProps): React.JSX.Element => {\n  const _content =\n    typeof content === 'string' ? (\n      <Text\n        className=\"ConversationCard__FooterMessage\"\n        data-testid={`${dataTestId}-message`}\n        size=\"sm\"\n        variant=\"subtle\"\n        {...contentProps}\n        {...(iconProps && { ml: 1 })}\n      >\n        {content}\n      </Text>\n    ) : (\n      content\n    );\n  return (\n    <Flex className=\"ConversationCard__Footer\" data-testid={dataTestId} mt={3} alignItems=\"center\">\n      {iconProps && <Icon size=\"sm\" variant=\"subtle\" {...iconProps} />}\n      {_content}\n    </Flex>\n  );\n};\n","import React from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { Text, TextProps } from 'components/Text/text.component';\n\nexport interface ConversationCardContentProps {\n  /** Content of the card. */\n  content?: React.ReactNode;\n  /** Props to customize the content styling. */\n  contentProps?: Omit<TextProps, 'children'>;\n  /** Optional Menu for the card. */\n  contentMenu?: React.ReactNode;\n  /** Data test id for the content.\n   * @default kibble-conversation-card-content\n   */\n  'data-testid'?: string;\n}\n\nexport const ConversationCardContent = ({\n  contentMenu,\n  content,\n  contentProps,\n  ['data-testid']: dataTestId = 'kibble-conversation-card-content',\n}: ConversationCardContentProps): React.JSX.Element => {\n  const _content =\n    typeof content === 'string' ? (\n      <Text\n        className=\"ConversationCard__Content\"\n        data-testid={`${dataTestId}-content`}\n        truncated\n        size=\"sm\"\n        {...contentProps}\n      >\n        {content}\n      </Text>\n    ) : (\n      content\n    );\n\n  return (\n    <HStack\n      className=\"ConversationCard__ContentContainer\"\n      data-testid={`${dataTestId}-container`}\n      mt={3}\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n    >\n      {_content}\n      {contentMenu && (\n        <Box className=\"ConversationCard__ContentMenu\" data-testid={`${dataTestId}-menu`} ml=\"auto\">\n          {contentMenu}\n        </Box>\n      )}\n    </HStack>\n  );\n};\n","import React, { useState } from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Card } from 'components/Card/card.component';\nimport { MenuProps } from 'components/Menu/menu.component';\nimport {\n  ConversationCardHeader,\n  ConversationCardHeaderProps,\n} from './components/ConversationCardHeader/conversationCardHeader.component';\nimport {\n  ConversationCardButtons,\n  ConversationCardOverlayProps,\n  ConversationCardPinProps,\n} from './components/ConversationCardButtons/conversationCardButtons.component';\nimport {\n  ConversationCardTag,\n  ConversationCardTags,\n} from './components/ConversationCardTags/conversationCardTags.component';\nimport {\n  ConversationCardFooter,\n  ConversationCardFooterProps,\n} from './components/ConversationCardFooter/conversationCardFooter.component';\nimport {\n  ConversationCardContent,\n  ConversationCardContentProps,\n} from './components/ConversationCardContent/conversationCardContent.component';\nimport { ConversationCardAvatarGroupProps } from './components/ConversationCardAvatarGroup/conversationCardAvatarGroup.component';\n\nexport interface ConversationCardProps extends ConversationCardContentProps {\n  /**\n   * Used to enable hover actions on the ConversationCard.\n   * @default true\n   */\n  allowHoverActions?: boolean;\n  /** Props for the `AvatarGroup` component. */\n  avatarGroupProps?: ConversationCardAvatarGroupProps;\n  /** Props for the ConversationCard footer. */\n  footerProps?: ConversationCardFooterProps;\n  /** Props for the Menu component. See the `Menu` for more details. This component provides a default menu button if none is provided. If menuProps and pinProps are passed together, the component automatically adds a menuItem to control the pinned state. */\n  headerMenuProps?: MenuProps;\n  /** Props for the ConversationCard header. */\n  headerProps: ConversationCardHeaderProps;\n  /**\n   * Used to set the active state of the ConversationCard.\n   * @default false\n   */\n  active?: boolean;\n  /** Callback function for clicking the ConversationCard. */\n  onClick?: () => void;\n  /** Props to show and configure the conversation overlay button. If not passed, the overlay button won't be shown. */\n  overlayProps?: ConversationCardOverlayProps;\n  /** Props for the pin functionality. If not passed, pin functionality won't be shown. */\n  pinProps?: ConversationCardPinProps;\n  /**\n   * Used to preserve the position of the ConversationCard in a list with infinite scrolling.\n   * @default false\n   */\n  shouldPreservePosition?: boolean;\n  /**\n   * Used to show the unread messages indicator.\n   * @default false\n   */\n  showNotificationIndicator?: boolean;\n  /** The tags to be displayed in the ConversationCard. See the `Tag` for more information. Additionally, you can pass in a tooltipContent to customize what is shown in the tooltip. */\n  tags?: ConversationCardTag[];\n  /** Data test id for the conversation card.\n   * @default kibble-conversation-card\n   */\n  'data-testid'?: string;\n}\n\nexport const ConversationCard = ({\n  allowHoverActions = true,\n  avatarGroupProps,\n  content,\n  contentProps,\n  contentMenu,\n  footerProps,\n  headerMenuProps,\n  headerProps,\n  active,\n  onClick,\n  overlayProps,\n  pinProps,\n  shouldPreservePosition = false,\n  showNotificationIndicator,\n  tags,\n  ['data-testid']: dataTestId = 'kibble-conversation-card',\n}: ConversationCardProps): React.JSX.Element => {\n  const { isPinned } = pinProps || {};\n  const [isHovering, setIsHovering] = useState(false);\n\n  return (\n    <Card\n      className=\"ConversationCard\"\n      id=\"conversation-card-item\"\n      data-testid={dataTestId}\n      interactive\n      active={active}\n      size=\"sm\"\n      fullWidth\n      onClick={(): void => {\n        if (onClick) {\n          onClick();\n        }\n      }}\n      bg={showNotificationIndicator || active || isHovering ? 'background.default' : 'background.subtle'}\n      onMouseEnter={(): void => {\n        if (allowHoverActions) {\n          setIsHovering(true);\n        }\n      }}\n      onMouseLeave={(): void => setIsHovering(false)}\n      pos=\"relative\"\n      css={{ overflowAnchor: shouldPreservePosition ? 'auto' : 'none' }}\n    >\n      {isHovering && (\n        <Box\n          className=\"ConversationCard__Button--Container\"\n          data-testid={`${dataTestId}-button-container`}\n          pos=\"absolute\"\n          top={2}\n          zIndex=\"banner\"\n          right={2}\n          bg=\"background\"\n          borderRadius=\"md\"\n          onClick={(e): void => e.stopPropagation()}\n        >\n          <ConversationCardButtons\n            overlayProps={overlayProps}\n            pinProps={pinProps}\n            headerMenuProps={headerMenuProps}\n            isHovering={isHovering}\n            setIsHovering={setIsHovering}\n          />\n        </Box>\n      )}\n      <ConversationCardHeader\n        avatarGroupProps={avatarGroupProps}\n        isHoveringCard={isHovering}\n        isCardPinned={isPinned}\n        showNotificationIndicator={showNotificationIndicator}\n        {...headerProps}\n      />\n      <ConversationCardContent content={content} contentProps={contentProps} contentMenu={contentMenu} />\n      {!!tags?.length && <ConversationCardTags tags={tags} />}\n      {footerProps && <ConversationCardFooter {...footerProps} />}\n    </Card>\n  );\n};\n"],"names":["ConversationCardAvatarGroup","avatars","max","onAvatarGroupClick","tooltipLabel","dataTestId","jsx","Tooltip","Flex","Avatar","e","Fragment","avatar","ConversationCardHeader","avatarGroupProps","timestampProps","isHoveringCard","isCardPinned","title","showNotificationIndicator","subtitle","jsxs","HStack","VStack","Heading","Text","Timestamp","Box","NotificationCounter","Icon","ConversationCardButtons","overlayProps","pinProps","headerMenuProps","isHovering","setIsHovering","isOpenInOverlay","onOpenInOverlay","overlayDataTestId","isPinned","onTogglePin","pinDataTestId","listProps","headerMenuDataTestId","pinIconName","Button","Menu","ConversationCardTags","tags","Wrap","tag","tooltipContent","rest","tagElement","Tag","WrapItem","ConversationCardFooter","iconProps","content","contentProps","_content","ConversationCardContent","contentMenu","ConversationCard","allowHoverActions","footerProps","headerProps","active","onClick","shouldPreservePosition","useState","Card"],"mappings":"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"}
+{"version":3,"file":"conversationCard.component-Dg3RtQE8.js","sources":["../../src/components/ConversationCard/components/ConversationCardAvatarGroup/conversationCardAvatarGroup.component.tsx","../../src/components/ConversationCard/components/ConversationCardHeader/conversationCardHeader.component.tsx","../../src/components/ConversationCard/components/ConversationCardButtons/conversationCardButtons.component.tsx","../../src/components/ConversationCard/components/ConversationCardTags/conversationCardTags.component.tsx","../../src/components/ConversationCard/components/ConversationCardFooter/conversationCardFooter.component.tsx","../../src/components/ConversationCard/components/ConversationCardContent/conversationCardContent.component.tsx","../../src/components/ConversationCard/conversationCard.component.tsx"],"sourcesContent":["import React from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { Avatar } from 'components/Avatar/avatar.component';\nimport { Tooltip } from 'components/Tooltip/tooltip.component';\n\nexport interface ConversationCardAvatarGroupProps {\n  /** Avatars to display in the group. */\n  avatars: React.ReactNode[];\n  /** Maximum number of avatars to display.\n   * @default 1\n   */\n  max?: number;\n  /** Callback function to be called when the avatar group is clicked. */\n  onAvatarGroupClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;\n  /** Label for the tooltip. */\n  tooltipLabel?: string;\n  /** Data test id for the avatar group.\n   * @default kibble-conversation-card-avatar-group\n   */\n  'data-testid'?: string;\n}\n\nexport const ConversationCardAvatarGroup = ({\n  avatars,\n  max = 1,\n  onAvatarGroupClick,\n  tooltipLabel,\n  ['data-testid']: dataTestId = 'kibble-conversation-card-avatar-group',\n}: ConversationCardAvatarGroupProps): React.JSX.Element => {\n  return (\n    <Tooltip label={tooltipLabel || ''} disabled={!tooltipLabel?.length}>\n      <Flex\n        className=\"ConversationCard__AvatarGroup\"\n        data-testid={dataTestId}\n        alignItems=\"flex-start\"\n        justifyContent=\"flex-start\"\n      >\n        {max && avatars.length > max ? (\n          <Avatar\n            onClick={(e): void => {\n              e.stopPropagation();\n              if (onAvatarGroupClick) {\n                onAvatarGroupClick(e);\n              }\n            }}\n            cursor=\"pointer\"\n            name={avatars.length.toString()}\n            showTooltip={false}\n          />\n        ) : (\n          <>{avatars.map((avatar) => avatar)}</>\n        )}\n      </Flex>\n    </Tooltip>\n  );\n};\n","import React from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { HStack, VStack } from '@chakra-ui/react/stack';\nimport { Timestamp, TimestampProps } from 'components/Timestamp/timestamp.component';\nimport { NotificationCounter } from 'components/NotificationCounter/notificationCounter.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Heading } from 'components/Heading/heading.component';\nimport { Text } from 'components/Text/text.component';\nimport {\n  ConversationCardAvatarGroup,\n  ConversationCardAvatarGroupProps,\n} from '../ConversationCardAvatarGroup/conversationCardAvatarGroup.component';\n\nexport interface ConversationCardHeaderProps {\n  /** Props for the avatar group. */\n  avatarGroupProps?: ConversationCardAvatarGroupProps;\n  /** If true, the notification indicator will be displayed. */\n  showNotificationIndicator?: boolean;\n  /** Determines if the card is pinned. */\n  isCardPinned?: boolean;\n  /** Determines if the card is being hovered. */\n  isHoveringCard?: boolean;\n  /** Subtitle of the card. */\n  subtitle?: string;\n  /** Props for the timestamp. */\n  timestampProps: TimestampProps;\n  /** Title of the card. */\n  title: string;\n  /** Data test id for the header.\n   * @default kibble-conversation-card-header\n   */\n  'data-testid'?: string;\n}\n\nexport const ConversationCardHeader = ({\n  avatarGroupProps,\n  timestampProps,\n  isHoveringCard,\n  isCardPinned,\n  title,\n  showNotificationIndicator,\n  subtitle,\n  ['data-testid']: dataTestId = 'kibble-conversation-card-header',\n}: ConversationCardHeaderProps): React.JSX.Element => {\n  return (\n    <HStack className=\"ConversationCard__Header\" data-testid={dataTestId} justify=\"space-between\" align=\"flex-start\">\n      <HStack className=\"ConversationCard__Header--Left\" data-testid={`${dataTestId}-left`} cursor=\"pointer\">\n        {avatarGroupProps && (\n          <ConversationCardAvatarGroup {...avatarGroupProps} tooltipLabel={avatarGroupProps?.tooltipLabel || title} />\n        )}\n        <VStack\n          className=\"ConversationCard__HeaderText\"\n          data-testid={`${dataTestId}-text`}\n          justify=\"center\"\n          align=\"left\"\n          gap=\"0\"\n        >\n          <Heading\n            className=\"ConversationCard__HeaderText--Title\"\n            data-testid={`${dataTestId}-title`}\n            size=\"sm\"\n            truncated\n          >\n            {title}\n          </Heading>\n          {subtitle && (\n            <Text\n              className=\"ConversationCard__HeaderText--Subtitle\"\n              data-testid={`${dataTestId}-subtitle`}\n              size=\"sm\"\n              variant=\"subtle\"\n              truncated\n            >\n              {subtitle}\n            </Text>\n          )}\n        </VStack>\n      </HStack>\n      <HStack\n        className=\"ConversationCard__Header--Right\"\n        data-testid={`${dataTestId}-right`}\n        visibility={isHoveringCard ? 'hidden' : 'visible'}\n        align=\"center\"\n        gap={1}\n      >\n        <Timestamp {...timestampProps} />\n        {showNotificationIndicator && (\n          <Box\n            as=\"span\"\n            className=\"ConversationCard__HeaderNotificationCounter\"\n            data-testid={`${dataTestId}-unread-indicator`}\n          >\n            <NotificationCounter size=\"xs\" />\n          </Box>\n        )}\n        {isCardPinned && (\n          <Flex data-testid={`${dataTestId}-pinned-icon`}>\n            <Icon size=\"md\" variant=\"info\" name=\"pin\" />\n          </Flex>\n        )}\n      </HStack>\n    </HStack>\n  );\n};\n","import React from 'react';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { Button } from 'components/Button/button.component';\nimport { Icon } from 'components/Icon/icon.component';\nimport { Menu, MenuProps, MenuItemProps } from 'components/Menu';\n\nexport interface ConversationCardOverlayProps {\n  /** Determines if the conversation is open in an overlay. */\n  isOpenInOverlay?: boolean;\n  /** Callback function to be called when the conversation is opened in an overlay. */\n  onOpenInOverlay: () => void;\n  /** Data test id for the overlay button. */\n  'data-testid'?: string;\n}\n\nexport interface ConversationCardPinProps {\n  /** Determines if the conversation is pinned. */\n  isPinned?: boolean;\n  /** Callback function to called when the conversation is pinned. */\n  onTogglePin: (isPinned: boolean) => void;\n  /** Data test id for the pin button. */\n  'data-testid'?: string;\n}\n\nexport interface ConversationCardButtonsProps {\n  /** Props for the overlay button. */\n  overlayProps?: ConversationCardOverlayProps;\n  /** Props for the pin button. */\n  pinProps?: ConversationCardPinProps;\n  /** Props for the header Menu. */\n  headerMenuProps?: MenuProps;\n  /** Data test id for the buttons.\n   * @default kibble-conversation-card-buttons\n   */\n  'data-testid'?: string;\n}\n\ninterface ConversationCardButtonsComponentProps extends ConversationCardButtonsProps {\n  /** Determines if the conversation is being hovered.\n   * @internal\n   */\n  isHovering: boolean;\n  /** Callback function to set the hover state.\n   * @internal\n   */\n  setIsHovering: (isHovering: boolean) => void;\n}\n\nexport const ConversationCardButtons = ({\n  overlayProps,\n  pinProps,\n  headerMenuProps,\n  isHovering,\n  setIsHovering,\n  ['data-testid']: dataTestId = 'kibble-conversation-card-buttons',\n}: ConversationCardButtonsComponentProps): React.JSX.Element => {\n  const { isOpenInOverlay, onOpenInOverlay, ['data-testid']: overlayDataTestId } = overlayProps || {};\n  const { isPinned, onTogglePin, ['data-testid']: pinDataTestId } = pinProps || {};\n  const { listProps, ['data-testid']: headerMenuDataTestId } = headerMenuProps || {};\n  const pinIconName = isPinned ? 'pinCancel' : 'pin';\n\n  return (\n    <HStack className=\"ConversationCard__Menu\" data-testid={dataTestId} gap={1}>\n      {overlayProps && (\n        <Button\n          className=\"ConversationCard__OverlayButton\"\n          data-testid={overlayDataTestId ? overlayDataTestId : `${dataTestId}-overlay-button`}\n          variant=\"secondarySubtle\"\n          borderRadius=\"sm\"\n          {...(isOpenInOverlay && { active: true })}\n          onClick={(): void => {\n            if (onOpenInOverlay) {\n              onOpenInOverlay();\n            }\n\n            if (isHovering) {\n              setIsHovering(false);\n            }\n          }}\n          iconName=\"popup\"\n          size=\"sm\"\n        />\n      )}\n      {pinProps && (\n        <Button\n          className=\"ConversationCard__PinButton\"\n          data-testid={pinDataTestId ? pinDataTestId : `${dataTestId}-pin-button`}\n          variant={isPinned ? 'secondarySubtleDestructive' : 'secondarySubtle'}\n          borderRadius=\"sm\"\n          onClick={(): void => {\n            if (onTogglePin) {\n              onTogglePin(!isPinned);\n            }\n\n            if (isHovering) {\n              setIsHovering(false);\n            }\n          }}\n          iconName={pinIconName}\n          size=\"sm\"\n        />\n      )}\n      {headerMenuProps && (\n        <Menu\n          buttonProps={\n            headerMenuProps.buttonProps || {\n              variant: 'secondarySubtle',\n              size: 'sm',\n              borderRadius: 'sm',\n              iconName: 'dotsVertical',\n              hideCaret: true,\n              padding: 0,\n            }\n          }\n          closeOnSelect={false}\n          lazyMount\n          data-testid={headerMenuDataTestId ? headerMenuDataTestId : `${dataTestId}-menu`}\n          {...headerMenuProps}\n          listProps={{\n            ...listProps,\n            menuItems: [\n              ...(pinProps\n                ? [\n                    {\n                      label: `${isPinned ? 'Unpin' : 'Pin'} Conversation`,\n                      value: 'PinConversation',\n                      variant: isPinned ? 'danger' : 'default',\n                      leftElement: <Icon size=\"md\" variant={isPinned ? 'danger' : 'default'} name={pinIconName} />,\n                      onSelect: (): void => {\n                        if (onTogglePin) {\n                          onTogglePin(!isPinned);\n                        }\n                      },\n                    } as MenuItemProps,\n                  ]\n                : []),\n              ...(listProps?.menuItems || []),\n            ],\n          }}\n        />\n      )}\n    </HStack>\n  );\n};\n","import React from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Wrap, WrapItem } from '@chakra-ui/react/wrap';\nimport { Tag, TagProps } from 'components/Tag/tag.component';\nimport { Tooltip } from 'components/Tooltip/tooltip.component';\n\nexport type ConversationCardTag = TagProps & {\n  /** Content to display in the tooltip. */\n  tooltipContent?: string;\n};\n\nexport interface ConversationCardTagsProps {\n  /** Tags to display in the ConversationCard. */\n  tags: ConversationCardTag[];\n  /** Data test id for the tags.\n   * @default kibble-conversation-card-tags\n   */\n  'data-testid'?: string;\n}\n\nexport const ConversationCardTags = ({\n  tags,\n  ['data-testid']: dataTestId = 'kibble-conversation-card-tags',\n}: ConversationCardTagsProps): React.JSX.Element => {\n  return (\n    <Box className=\"ConversationCard__Tags\" mt={3} data-testid={dataTestId}>\n      <Wrap gap={2}>\n        {tags.map((tag) => {\n          const { tooltipContent, ...rest } = tag;\n          let tagElement = <Tag {...rest} size=\"sm\" textTransform=\"capitalize\" />;\n\n          if (tooltipContent) {\n            tagElement = (\n              <Tooltip label={tooltipContent} placement=\"top\">\n                <Box>{tagElement}</Box>\n              </Tooltip>\n            );\n          }\n\n          return <WrapItem key={tag.label}>{tagElement}</WrapItem>;\n        })}\n      </Wrap>\n    </Box>\n  );\n};\n","import React from 'react';\nimport { Flex } from '@chakra-ui/react/flex';\nimport { Icon, IconProps } from 'components/Icon/icon.component';\nimport { Text, TextProps } from 'components/Text/text.component';\n\nexport interface ConversationCardFooterProps {\n  /** Props for the Icon component. */\n  iconProps?: IconProps;\n  /** Content of the footer. */\n  content: React.ReactNode;\n  /** Props to customize the content styling. */\n  contentProps?: Omit<TextProps, 'children'>;\n  /** Data test id for the footer.\n   * @default kibble-conversation-card-footer\n   */\n  'data-testid'?: string;\n}\n\nexport const ConversationCardFooter = ({\n  iconProps,\n  content,\n  contentProps,\n  ['data-testid']: dataTestId = 'kibble-conversation-card-footer',\n}: ConversationCardFooterProps): React.JSX.Element => {\n  const _content =\n    typeof content === 'string' ? (\n      <Text\n        className=\"ConversationCard__FooterMessage\"\n        data-testid={`${dataTestId}-message`}\n        size=\"sm\"\n        variant=\"subtle\"\n        {...contentProps}\n        {...(iconProps && { ml: 1 })}\n      >\n        {content}\n      </Text>\n    ) : (\n      content\n    );\n  return (\n    <Flex className=\"ConversationCard__Footer\" data-testid={dataTestId} mt={3} alignItems=\"center\">\n      {iconProps && <Icon size=\"sm\" variant=\"subtle\" {...iconProps} />}\n      {_content}\n    </Flex>\n  );\n};\n","import React from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { HStack } from '@chakra-ui/react/stack';\nimport { Text, TextProps } from 'components/Text/text.component';\n\nexport interface ConversationCardContentProps {\n  /** Content of the card. */\n  content?: React.ReactNode;\n  /** Props to customize the content styling. */\n  contentProps?: Omit<TextProps, 'children'>;\n  /** Optional Menu for the card. */\n  contentMenu?: React.ReactNode;\n  /** Data test id for the content.\n   * @default kibble-conversation-card-content\n   */\n  'data-testid'?: string;\n}\n\nexport const ConversationCardContent = ({\n  contentMenu,\n  content,\n  contentProps,\n  ['data-testid']: dataTestId = 'kibble-conversation-card-content',\n}: ConversationCardContentProps): React.JSX.Element => {\n  const _content =\n    typeof content === 'string' ? (\n      <Text\n        className=\"ConversationCard__Content\"\n        data-testid={`${dataTestId}-content`}\n        truncated\n        size=\"sm\"\n        {...contentProps}\n      >\n        {content}\n      </Text>\n    ) : (\n      content\n    );\n\n  return (\n    <HStack\n      className=\"ConversationCard__ContentContainer\"\n      data-testid={`${dataTestId}-container`}\n      mt={3}\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n    >\n      {_content}\n      {contentMenu && (\n        <Box className=\"ConversationCard__ContentMenu\" data-testid={`${dataTestId}-menu`} ml=\"auto\">\n          {contentMenu}\n        </Box>\n      )}\n    </HStack>\n  );\n};\n","import React, { useState } from 'react';\nimport { Box } from '@chakra-ui/react/box';\nimport { Card } from 'components/Card/card.component';\nimport { MenuProps } from 'components/Menu/menu.component';\nimport {\n  ConversationCardHeader,\n  ConversationCardHeaderProps,\n} from './components/ConversationCardHeader/conversationCardHeader.component';\nimport {\n  ConversationCardButtons,\n  ConversationCardOverlayProps,\n  ConversationCardPinProps,\n} from './components/ConversationCardButtons/conversationCardButtons.component';\nimport {\n  ConversationCardTag,\n  ConversationCardTags,\n} from './components/ConversationCardTags/conversationCardTags.component';\nimport {\n  ConversationCardFooter,\n  ConversationCardFooterProps,\n} from './components/ConversationCardFooter/conversationCardFooter.component';\nimport {\n  ConversationCardContent,\n  ConversationCardContentProps,\n} from './components/ConversationCardContent/conversationCardContent.component';\nimport { ConversationCardAvatarGroupProps } from './components/ConversationCardAvatarGroup/conversationCardAvatarGroup.component';\n\nexport interface ConversationCardProps extends ConversationCardContentProps {\n  /**\n   * Used to enable hover actions on the ConversationCard.\n   * @default true\n   */\n  allowHoverActions?: boolean;\n  /** Props for the `AvatarGroup` component. */\n  avatarGroupProps?: ConversationCardAvatarGroupProps;\n  /** Props for the ConversationCard footer. */\n  footerProps?: ConversationCardFooterProps;\n  /** Props for the Menu component. See the `Menu` for more details. This component provides a default menu button if none is provided. If menuProps and pinProps are passed together, the component automatically adds a menuItem to control the pinned state. */\n  headerMenuProps?: MenuProps;\n  /** Props for the ConversationCard header. */\n  headerProps: ConversationCardHeaderProps;\n  /**\n   * Used to set the active state of the ConversationCard.\n   * @default false\n   */\n  active?: boolean;\n  /** Callback function for clicking the ConversationCard. */\n  onClick?: () => void;\n  /** Props to show and configure the conversation overlay button. If not passed, the overlay button won't be shown. */\n  overlayProps?: ConversationCardOverlayProps;\n  /** Props for the pin functionality. If not passed, pin functionality won't be shown. */\n  pinProps?: ConversationCardPinProps;\n  /**\n   * Used to preserve the position of the ConversationCard in a list with infinite scrolling.\n   * @default false\n   */\n  shouldPreservePosition?: boolean;\n  /**\n   * Used to show the unread messages indicator.\n   * @default false\n   */\n  showNotificationIndicator?: boolean;\n  /** The tags to be displayed in the ConversationCard. See the `Tag` for more information. Additionally, you can pass in a tooltipContent to customize what is shown in the tooltip. */\n  tags?: ConversationCardTag[];\n  /** Data test id for the conversation card.\n   * @default kibble-conversation-card\n   */\n  'data-testid'?: string;\n}\n\nexport const ConversationCard = ({\n  allowHoverActions = true,\n  avatarGroupProps,\n  content,\n  contentProps,\n  contentMenu,\n  footerProps,\n  headerMenuProps,\n  headerProps,\n  active,\n  onClick,\n  overlayProps,\n  pinProps,\n  shouldPreservePosition = false,\n  showNotificationIndicator,\n  tags,\n  ['data-testid']: dataTestId = 'kibble-conversation-card',\n}: ConversationCardProps): React.JSX.Element => {\n  const { isPinned } = pinProps || {};\n  const [isHovering, setIsHovering] = useState(false);\n\n  return (\n    <Card\n      className=\"ConversationCard\"\n      id=\"conversation-card-item\"\n      data-testid={dataTestId}\n      interactive\n      active={active}\n      size=\"sm\"\n      fullWidth\n      onClick={(): void => {\n        if (onClick) {\n          onClick();\n        }\n      }}\n      bg={showNotificationIndicator || active || isHovering ? 'background.default' : 'background.subtle'}\n      onMouseEnter={(): void => {\n        if (allowHoverActions) {\n          setIsHovering(true);\n        }\n      }}\n      onMouseLeave={(): void => setIsHovering(false)}\n      pos=\"relative\"\n      css={{ overflowAnchor: shouldPreservePosition ? 'auto' : 'none' }}\n    >\n      {isHovering && (\n        <Box\n          className=\"ConversationCard__Button--Container\"\n          data-testid={`${dataTestId}-button-container`}\n          pos=\"absolute\"\n          top={2}\n          zIndex=\"banner\"\n          right={2}\n          bg=\"background\"\n          borderRadius=\"md\"\n          onClick={(e): void => e.stopPropagation()}\n        >\n          <ConversationCardButtons\n            overlayProps={overlayProps}\n            pinProps={pinProps}\n            headerMenuProps={headerMenuProps}\n            isHovering={isHovering}\n            setIsHovering={setIsHovering}\n          />\n        </Box>\n      )}\n      <ConversationCardHeader\n        avatarGroupProps={avatarGroupProps}\n        isHoveringCard={isHovering}\n        isCardPinned={isPinned}\n        showNotificationIndicator={showNotificationIndicator}\n        {...headerProps}\n      />\n      <ConversationCardContent content={content} contentProps={contentProps} contentMenu={contentMenu} />\n      {!!tags?.length && <ConversationCardTags tags={tags} />}\n      {footerProps && <ConversationCardFooter {...footerProps} />}\n    </Card>\n  );\n};\n"],"names":["ConversationCardAvatarGroup","avatars","max","onAvatarGroupClick","tooltipLabel","dataTestId","jsx","Tooltip","Flex","Avatar","e","Fragment","avatar","ConversationCardHeader","avatarGroupProps","timestampProps","isHoveringCard","isCardPinned","title","showNotificationIndicator","subtitle","jsxs","HStack","VStack","Heading","Text","Timestamp","Box","NotificationCounter","Icon","ConversationCardButtons","overlayProps","pinProps","headerMenuProps","isHovering","setIsHovering","isOpenInOverlay","onOpenInOverlay","overlayDataTestId","isPinned","onTogglePin","pinDataTestId","listProps","headerMenuDataTestId","pinIconName","Button","Menu","ConversationCardTags","tags","Wrap","tag","tooltipContent","rest","tagElement","Tag","WrapItem","ConversationCardFooter","iconProps","content","contentProps","_content","ConversationCardContent","contentMenu","ConversationCard","allowHoverActions","footerProps","headerProps","active","onClick","shouldPreservePosition","useState","Card"],"mappings":"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"}

package/dist/chunks/{maintenanceBanner.types-CfHYj6Nu.js → maintenanceBanner.types-CPr8G6Hj.js}

@@ -1,2 +1,2 @@
-"use strict";const r=require("./jsx-runtime-BjDatQAs.js"),s=require("./alert.component-B0gDwaKQ.js"),e=({message:n,description:t="We apologize for the inconvenience.",["data-testid"]:a="kibble-maintenance-banner",...i})=>n?r.jsxRuntimeExports.jsx(s.Alert,{"data-testid":a,title:n,description:t,status:"warning",hideCloseButton:!0,borderRadius:0,width:"100%",py:4,...i}):null;e.displayName="MaintenanceBanner";const c={vite:"VITE_MAINTENANCE_MESSAGE",nextjs:"NEXT_PUBLIC_MAINTENANCE_MESSAGE"};exports.MaintenanceBanner=e;exports.maintenanceBannerEnvKeys=c;
-//# sourceMappingURL=maintenanceBanner.types-CfHYj6Nu.js.map
+"use strict";const r=require("./jsx-runtime-BjDatQAs.js"),s=require("./alert.component-1-RhljlT.js"),e=({message:n,description:t="We apologize for the inconvenience.",["data-testid"]:a="kibble-maintenance-banner",...i})=>n?r.jsxRuntimeExports.jsx(s.Alert,{"data-testid":a,title:n,description:t,status:"warning",hideCloseButton:!0,borderRadius:0,width:"100%",py:4,...i}):null;e.displayName="MaintenanceBanner";const c={vite:"VITE_MAINTENANCE_MESSAGE",nextjs:"NEXT_PUBLIC_MAINTENANCE_MESSAGE"};exports.MaintenanceBanner=e;exports.maintenanceBannerEnvKeys=c;
+//# sourceMappingURL=maintenanceBanner.types-CPr8G6Hj.js.map

package/dist/chunks/{maintenanceBanner.types-CfHYj6Nu.js.map → maintenanceBanner.types-CPr8G6Hj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"maintenanceBanner.types-CfHYj6Nu.js","sources":["../../src/components/MaintenanceBanner/maintenanceBanner.component.tsx","../../src/components/MaintenanceBanner/maintenanceBanner.types.ts"],"sourcesContent":["import React from 'react';\nimport { Alert, AlertProps } from 'components/Alert/alert.component';\n\nexport interface MaintenanceBannerProps\n  extends Omit<AlertProps, 'title' | 'description' | 'status' | 'hideCloseButton' | 'children'> {\n  /**\n   * The maintenance message to display.\n   * When falsy (undefined, null, or empty string), the banner does not render.\n   */\n  message?: string;\n  /**\n   * Optional secondary line of text displayed below the title.\n   */\n  description?: string;\n  /**\n   * Data test id for the banner.\n   * @default kibble-maintenance-banner\n   */\n  'data-testid'?: string;\n}\n\nexport const MaintenanceBanner = ({\n  message,\n  description = 'We apologize for the inconvenience.',\n  ['data-testid']: dataTestId = 'kibble-maintenance-banner',\n  ...rest\n}: MaintenanceBannerProps): React.JSX.Element | null => {\n  if (!message) {\n    return null;\n  }\n\n  return (\n    <Alert\n      data-testid={dataTestId}\n      title={message}\n      description={description}\n      status=\"warning\"\n      hideCloseButton\n      borderRadius={0}\n      width=\"100%\"\n      py={4}\n      {...rest}\n    />\n  );\n};\n\nMaintenanceBanner.displayName = 'MaintenanceBanner';\n","export const maintenanceBannerEnvKeys = {\n  vite: 'VITE_MAINTENANCE_MESSAGE',\n  nextjs: 'NEXT_PUBLIC_MAINTENANCE_MESSAGE',\n} as const;\n"],"names":["MaintenanceBanner","message","description","dataTestId","rest","jsx","Alert","maintenanceBannerEnvKeys"],"mappings":"qGAqBaA,EAAoB,CAAC,CAChC,QAAAC,EACA,YAAAC,EAAc,sCACd,CAAC,eAAgBC,EAAa,4BAC9B,GAAGC,CACL,IACOH,EAKHI,EAAA,kBAAA,IAACC,EAAA,MAAA,CACC,cAAaH,EACb,MAAOF,EACP,YAAAC,EACA,OAAO,UACP,gBAAe,GACf,aAAc,EACd,MAAM,OACN,GAAI,EACH,GAAGE,CAAA,CACN,EAdO,KAkBXJ,EAAkB,YAAc,oBC9CzB,MAAMO,EAA2B,CACtC,KAAM,2BACN,OAAQ,iCACV"}
+{"version":3,"file":"maintenanceBanner.types-CPr8G6Hj.js","sources":["../../src/components/MaintenanceBanner/maintenanceBanner.component.tsx","../../src/components/MaintenanceBanner/maintenanceBanner.types.ts"],"sourcesContent":["import React from 'react';\nimport { Alert, AlertProps } from 'components/Alert/alert.component';\n\nexport interface MaintenanceBannerProps\n  extends Omit<AlertProps, 'title' | 'description' | 'status' | 'hideCloseButton' | 'children'> {\n  /**\n   * The maintenance message to display.\n   * When falsy (undefined, null, or empty string), the banner does not render.\n   */\n  message?: string;\n  /**\n   * Optional secondary line of text displayed below the title.\n   */\n  description?: string;\n  /**\n   * Data test id for the banner.\n   * @default kibble-maintenance-banner\n   */\n  'data-testid'?: string;\n}\n\nexport const MaintenanceBanner = ({\n  message,\n  description = 'We apologize for the inconvenience.',\n  ['data-testid']: dataTestId = 'kibble-maintenance-banner',\n  ...rest\n}: MaintenanceBannerProps): React.JSX.Element | null => {\n  if (!message) {\n    return null;\n  }\n\n  return (\n    <Alert\n      data-testid={dataTestId}\n      title={message}\n      description={description}\n      status=\"warning\"\n      hideCloseButton\n      borderRadius={0}\n      width=\"100%\"\n      py={4}\n      {...rest}\n    />\n  );\n};\n\nMaintenanceBanner.displayName = 'MaintenanceBanner';\n","export const maintenanceBannerEnvKeys = {\n  vite: 'VITE_MAINTENANCE_MESSAGE',\n  nextjs: 'NEXT_PUBLIC_MAINTENANCE_MESSAGE',\n} as const;\n"],"names":["MaintenanceBanner","message","description","dataTestId","rest","jsx","Alert","maintenanceBannerEnvKeys"],"mappings":"qGAqBaA,EAAoB,CAAC,CAChC,QAAAC,EACA,YAAAC,EAAc,sCACd,CAAC,eAAgBC,EAAa,4BAC9B,GAAGC,CACL,IACOH,EAKHI,EAAA,kBAAA,IAACC,EAAA,MAAA,CACC,cAAaH,EACb,MAAOF,EACP,YAAAC,EACA,OAAO,UACP,gBAAe,GACf,aAAc,EACd,MAAM,OACN,GAAI,EACH,GAAGE,CAAA,CACN,EAdO,KAkBXJ,EAAkB,YAAc,oBC9CzB,MAAMO,EAA2B,CACtC,KAAM,2BACN,OAAQ,iCACV"}

package/dist/chunks/{maintenanceBanner.types-Bey20P0-.js → maintenanceBanner.types-bwnay-jL.js}

@@ -1,5 +1,5 @@
 import { j as i } from "./jsx-runtime-C5mzlN2N.js";
-import { A as r } from "./alert.component-DjFZO6Ks.js";
+import { A as r } from "./alert.component-ByJCotaH.js";
 const s = ({
   message: n,
   description: e = "We apologize for the inconvenience.",
@@ -28,4 +28,4 @@ export {
   s as M,
   d as m
 };
-//# sourceMappingURL=maintenanceBanner.types-Bey20P0-.js.map
+//# sourceMappingURL=maintenanceBanner.types-bwnay-jL.js.map

package/dist/chunks/{maintenanceBanner.types-Bey20P0-.js.map → maintenanceBanner.types-bwnay-jL.js.map}

@@ -1 +1 @@
-{"version":3,"file":"maintenanceBanner.types-Bey20P0-.js","sources":["../../src/components/MaintenanceBanner/maintenanceBanner.component.tsx","../../src/components/MaintenanceBanner/maintenanceBanner.types.ts"],"sourcesContent":["import React from 'react';\nimport { Alert, AlertProps } from 'components/Alert/alert.component';\n\nexport interface MaintenanceBannerProps\n  extends Omit<AlertProps, 'title' | 'description' | 'status' | 'hideCloseButton' | 'children'> {\n  /**\n   * The maintenance message to display.\n   * When falsy (undefined, null, or empty string), the banner does not render.\n   */\n  message?: string;\n  /**\n   * Optional secondary line of text displayed below the title.\n   */\n  description?: string;\n  /**\n   * Data test id for the banner.\n   * @default kibble-maintenance-banner\n   */\n  'data-testid'?: string;\n}\n\nexport const MaintenanceBanner = ({\n  message,\n  description = 'We apologize for the inconvenience.',\n  ['data-testid']: dataTestId = 'kibble-maintenance-banner',\n  ...rest\n}: MaintenanceBannerProps): React.JSX.Element | null => {\n  if (!message) {\n    return null;\n  }\n\n  return (\n    <Alert\n      data-testid={dataTestId}\n      title={message}\n      description={description}\n      status=\"warning\"\n      hideCloseButton\n      borderRadius={0}\n      width=\"100%\"\n      py={4}\n      {...rest}\n    />\n  );\n};\n\nMaintenanceBanner.displayName = 'MaintenanceBanner';\n","export const maintenanceBannerEnvKeys = {\n  vite: 'VITE_MAINTENANCE_MESSAGE',\n  nextjs: 'NEXT_PUBLIC_MAINTENANCE_MESSAGE',\n} as const;\n"],"names":["MaintenanceBanner","message","description","dataTestId","rest","jsx","Alert","maintenanceBannerEnvKeys"],"mappings":";;AAqBO,MAAMA,IAAoB,CAAC;AAAA,EAChC,SAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,CAAC,gBAAgBC,IAAa;AAAA,EAC9B,GAAGC;AACL,MACOH,IAKHI,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,eAAaH;AAAA,IACb,OAAOF;AAAA,IACP,aAAAC;AAAA,IACA,QAAO;AAAA,IACP,iBAAe;AAAA,IACf,cAAc;AAAA,IACd,OAAM;AAAA,IACN,IAAI;AAAA,IACH,GAAGE;AAAA,EAAA;AACN,IAdO;AAkBXJ,EAAkB,cAAc;AC9CzB,MAAMO,IAA2B;AAAA,EACtC,MAAM;AAAA,EACN,QAAQ;AACV;"}
+{"version":3,"file":"maintenanceBanner.types-bwnay-jL.js","sources":["../../src/components/MaintenanceBanner/maintenanceBanner.component.tsx","../../src/components/MaintenanceBanner/maintenanceBanner.types.ts"],"sourcesContent":["import React from 'react';\nimport { Alert, AlertProps } from 'components/Alert/alert.component';\n\nexport interface MaintenanceBannerProps\n  extends Omit<AlertProps, 'title' | 'description' | 'status' | 'hideCloseButton' | 'children'> {\n  /**\n   * The maintenance message to display.\n   * When falsy (undefined, null, or empty string), the banner does not render.\n   */\n  message?: string;\n  /**\n   * Optional secondary line of text displayed below the title.\n   */\n  description?: string;\n  /**\n   * Data test id for the banner.\n   * @default kibble-maintenance-banner\n   */\n  'data-testid'?: string;\n}\n\nexport const MaintenanceBanner = ({\n  message,\n  description = 'We apologize for the inconvenience.',\n  ['data-testid']: dataTestId = 'kibble-maintenance-banner',\n  ...rest\n}: MaintenanceBannerProps): React.JSX.Element | null => {\n  if (!message) {\n    return null;\n  }\n\n  return (\n    <Alert\n      data-testid={dataTestId}\n      title={message}\n      description={description}\n      status=\"warning\"\n      hideCloseButton\n      borderRadius={0}\n      width=\"100%\"\n      py={4}\n      {...rest}\n    />\n  );\n};\n\nMaintenanceBanner.displayName = 'MaintenanceBanner';\n","export const maintenanceBannerEnvKeys = {\n  vite: 'VITE_MAINTENANCE_MESSAGE',\n  nextjs: 'NEXT_PUBLIC_MAINTENANCE_MESSAGE',\n} as const;\n"],"names":["MaintenanceBanner","message","description","dataTestId","rest","jsx","Alert","maintenanceBannerEnvKeys"],"mappings":";;AAqBO,MAAMA,IAAoB,CAAC;AAAA,EAChC,SAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,CAAC,gBAAgBC,IAAa;AAAA,EAC9B,GAAGC;AACL,MACOH,IAKHI,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,eAAaH;AAAA,IACb,OAAOF;AAAA,IACP,aAAAC;AAAA,IACA,QAAO;AAAA,IACP,iBAAe;AAAA,IACf,cAAc;AAAA,IACd,OAAM;AAAA,IACN,IAAI;AAAA,IACH,GAAGE;AAAA,EAAA;AACN,IAdO;AAkBXJ,EAAkB,cAAc;AC9CzB,MAAMO,IAA2B;AAAA,EACtC,MAAM;AAAA,EACN,QAAQ;AACV;"}

package/dist/chunks/{notificationCounter.component-BUxWlpKh.js → notificationCounter.component-Cmpqouio.js}

@@ -1,2 +1,2 @@
-"use strict";const r=require("./jsx-runtime-BjDatQAs.js"),d=require("react"),g=require("./config-jChwZPSv.js"),h=require("./spinner.component-0tE7mnxi.js"),C=require("./index-BQRnVsAg.js"),b=require("./create-slot-recipe-context-HXE1VazG.js"),f=require("./flex-BOU6tYUd.js"),p=["root","maxElement"],S={blue:{root:{bgColor:"background.accent",color:"text.contrast"},maxElement:{bgColor:"text.contrast"}},green:{root:{bgColor:"background.success.contrast",color:"text.contrast"},maxElement:{bgColor:"text.contrast"}},neutral:{root:{bgColor:"background.subtle.less",color:"text"},maxElement:{bgColor:"text"}},red:{root:{bgColor:"background.danger.contrast",color:"text.contrast"},maxElement:{bgColor:"text.contrast"}}},E={xs:{root:{fontSize:"8px",height:3,width:3},maxElement:{height:"1px",width:"1px"}},sm:{root:{fontSize:"10px",height:4,width:4},maxElement:{height:"2px",width:"2px"}},md:{root:{fontSize:"xs",height:5,width:5},maxElement:{height:"3px",width:"3px"}},lg:{root:{fontSize:"sm",height:6,width:6},maxElement:{height:1,width:1}}},R=g.defineSlotRecipe({slots:p,base:{root:{alignItems:"center",border:"1px",borderColor:"background",borderRadius:"full",fontWeight:"semibold",justifyContent:"center"},maxElement:{borderRadius:"full"}},variants:{size:E,variant:S},defaultVariants:{size:"md",variant:"red"}}),w=99,j={xs:null,sm:"xs",md:"xs",lg:"sm"},q={red:"dangerOnContrast",blue:"interactiveOnContrast",green:"brandOnContrast",neutral:"subtleOnContrast"},z=({count:t,loading:i=!1,showCount:a=!0,size:e="md",variant:o="red",["data-testid"]:c="kibble-notification-counter",...l})=>{const n=b.useSlotRecipe({recipe:R})({size:e,variant:o}),u=e!=="xs"&&a,x=d.useMemo(()=>{const s=j[e],m=q[o];return i&&s?r.jsxRuntimeExports.jsx(h.Spinner,{variant:m,size:s}):t==null?null:t>w?r.jsxRuntimeExports.jsx(C.Box,{css:n.maxElement}):t},[e,o,i,t,n.maxElement]);return r.jsxRuntimeExports.jsx(f.Flex,{className:"NotificationCounter","data-testid":c,css:n.root,...l,children:u&&x})};exports.NotificationCounter=z;
-//# sourceMappingURL=notificationCounter.component-BUxWlpKh.js.map
+"use strict";const r=require("./jsx-runtime-BjDatQAs.js"),d=require("react"),g=require("./config-jChwZPSv.js"),h=require("./spinner.component-0tE7mnxi.js"),C=require("./index-BQRnVsAg.js"),b=require("./create-slot-recipe-context-HXE1VazG.js"),f=require("./flex-BOU6tYUd.js"),p=["root","maxElement"],S={blue:{root:{bgColor:"background.accent",color:"text.contrast"},maxElement:{bgColor:"text.contrast"}},green:{root:{bgColor:"background.success.contrast",color:"text.contrast"},maxElement:{bgColor:"text.contrast"}},neutral:{root:{bgColor:"background.subtle.less",color:"text"},maxElement:{bgColor:"text"}},red:{root:{bgColor:"background.danger.contrast",color:"text.contrast"},maxElement:{bgColor:"text.contrast"}}},E={xs:{root:{fontSize:"8px",height:3,width:3},maxElement:{height:"1px",width:"1px"}},sm:{root:{fontSize:"10px",height:4,width:4},maxElement:{height:"2px",width:"2px"}},md:{root:{fontSize:"xs",height:5,width:5},maxElement:{height:"3px",width:"3px"}},lg:{root:{fontSize:"sm",height:6,width:6},maxElement:{height:1,width:1}}},R=g.defineSlotRecipe({slots:p,base:{root:{alignItems:"center",border:"1px",borderColor:"background",borderRadius:"full",fontWeight:"semibold",justifyContent:"center",lineHeight:"none"},maxElement:{borderRadius:"full"}},variants:{size:E,variant:S},defaultVariants:{size:"md",variant:"red"}}),w=99,j={xs:null,sm:"xs",md:"xs",lg:"sm"},q={red:"dangerOnContrast",blue:"interactiveOnContrast",green:"brandOnContrast",neutral:"subtleOnContrast"},z=({count:t,loading:i=!1,showCount:a=!0,size:e="md",variant:o="red",["data-testid"]:c="kibble-notification-counter",...l})=>{const n=b.useSlotRecipe({recipe:R})({size:e,variant:o}),u=e!=="xs"&&a,x=d.useMemo(()=>{const s=j[e],m=q[o];return i&&s?r.jsxRuntimeExports.jsx(h.Spinner,{variant:m,size:s}):t==null?null:t>w?r.jsxRuntimeExports.jsx(C.Box,{css:n.maxElement}):t},[e,o,i,t,n.maxElement]);return r.jsxRuntimeExports.jsx(f.Flex,{className:"NotificationCounter","data-testid":c,css:n.root,...l,children:u&&x})};exports.NotificationCounter=z;
+//# sourceMappingURL=notificationCounter.component-Cmpqouio.js.map

package/dist/chunks/notificationCounter.component-Cmpqouio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notificationCounter.component-Cmpqouio.js","sources":["../../src/components/NotificationCounter/notificationCounter.recipe.ts","../../src/components/NotificationCounter/notificationCounter.records.ts","../../src/components/NotificationCounter/notificationCounter.component.tsx"],"sourcesContent":["import { defineSlotRecipe, SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { NotificationCounterSize, NotificationCounterVariant } from './notificationCounter.types';\n\nconst notificationCounterSlots = ['root', 'maxElement'] as const;\ntype NotificationCounterSlot = (typeof notificationCounterSlots)[number];\n\nconst notificationCounterVariantStyles: Record<\n  NotificationCounterVariant,\n  Record<NotificationCounterSlot, SystemStyleObject>\n> = {\n  blue: {\n    root: {\n      bgColor: 'background.accent',\n      color: 'text.contrast',\n    },\n    maxElement: {\n      bgColor: 'text.contrast',\n    },\n  },\n  green: {\n    root: {\n      bgColor: 'background.success.contrast',\n      color: 'text.contrast',\n    },\n    maxElement: {\n      bgColor: 'text.contrast',\n    },\n  },\n  neutral: {\n    root: {\n      bgColor: 'background.subtle.less',\n      color: 'text',\n    },\n    maxElement: {\n      bgColor: 'text',\n    },\n  },\n  red: {\n    root: {\n      bgColor: 'background.danger.contrast',\n      color: 'text.contrast',\n    },\n    maxElement: {\n      bgColor: 'text.contrast',\n    },\n  },\n};\n\nconst notificationCounterSizeStyles: Record<\n  NotificationCounterSize,\n  Record<NotificationCounterSlot, SystemStyleObject>\n> = {\n  xs: {\n    root: {\n      fontSize: '8px',\n      height: 3,\n      width: 3,\n    },\n    maxElement: {\n      height: '1px',\n      width: '1px',\n    },\n  },\n  sm: {\n    root: { fontSize: '10px', height: 4, width: 4 },\n    maxElement: {\n      height: '2px',\n      width: '2px',\n    },\n  },\n  md: {\n    root: {\n      fontSize: 'xs',\n      height: 5,\n      width: 5,\n    },\n    maxElement: {\n      height: '3px',\n      width: '3px',\n    },\n  },\n  lg: {\n    root: {\n      fontSize: 'sm',\n      height: 6,\n      width: 6,\n    },\n    maxElement: {\n      height: 1,\n      width: 1,\n    },\n  },\n};\n\nexport const notificationCounterRecipe = defineSlotRecipe({\n  slots: notificationCounterSlots,\n  base: {\n    root: {\n      alignItems: 'center',\n      border: '1px',\n      borderColor: 'background',\n      borderRadius: 'full',\n      fontWeight: 'semibold',\n      justifyContent: 'center',\n      // An inherited line height shifts the digits up or down depending on where the counter sits\n      lineHeight: 'none',\n    },\n    maxElement: {\n      borderRadius: 'full',\n    },\n  },\n  variants: {\n    size: notificationCounterSizeStyles,\n    variant: notificationCounterVariantStyles,\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'red',\n  },\n});\n","import { SpinnerSize } from 'components/Spinner/spinner.types';\nimport { NotificationCounterSize, NotificationCounterVariant } from './notificationCounter.types';\nimport { TypographyVariant } from 'shared/types';\n\nexport const MAX_COUNT = 99;\n\nexport const notificationCounterSpinnerSize: Record<NotificationCounterSize, SpinnerSize | null> = {\n  xs: null, // The xs size doesn't show a spinner\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm',\n};\n\nexport const spinnerVariantToNotificationCounterVariant: Record<NotificationCounterVariant, TypographyVariant> = {\n  red: 'dangerOnContrast',\n  blue: 'interactiveOnContrast',\n  green: 'brandOnContrast',\n  neutral: 'subtleOnContrast',\n};\n","import React, { useMemo } from 'react';\nimport { Flex, FlexProps } from '@chakra-ui/react/flex';\nimport { NotificationCounterSize, NotificationCounterVariant } from './notificationCounter.types';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { notificationCounterRecipe } from './notificationCounter.recipe';\nimport {\n  MAX_COUNT,\n  notificationCounterSpinnerSize,\n  spinnerVariantToNotificationCounterVariant,\n} from './notificationCounter.records';\nimport { Spinner } from 'components/Spinner/spinner.component';\nimport { Box } from '@chakra-ui/react/box';\n\nexport interface NotificationCounterProps extends FlexProps {\n  /** Value of the notification counter. If count is greater than 99, the count will be hidden and a special indicator will take its place. */\n  count?: number;\n  /** If true, the notification counter will show a spinner.\n   * @default false\n   */\n  loading?: boolean;\n  /** Whether or not to show the counter label. If the size is xs, by default the count label won't be shown.\n   * @default true\n   */\n  showCount?: boolean;\n  /** Size of the notification counter\n   * @default md\n   */\n  size?: NotificationCounterSize;\n  /** Color variant for the notification counter\n   * @default red\n   */\n  variant?: NotificationCounterVariant;\n  /** Data test id for the notification counter.\n   * @default kibble-notification-counter\n   */\n  'data-testid'?: string;\n}\n\nexport const NotificationCounter = ({\n  count,\n  loading = false,\n  showCount = true,\n  size = 'md',\n  variant = 'red',\n  ['data-testid']: dataTestId = 'kibble-notification-counter',\n  ...rest\n}: NotificationCounterProps): React.JSX.Element => {\n  const recipe = useSlotRecipe({ recipe: notificationCounterRecipe });\n  const styles = recipe({ size, variant });\n  const shouldShowCount = size !== 'xs' && showCount;\n\n  const counterContent = useMemo(() => {\n    const _spinnerSize = notificationCounterSpinnerSize[size];\n    const _spinnerVariant = spinnerVariantToNotificationCounterVariant[variant];\n\n    if (loading && !!_spinnerSize) return <Spinner variant={_spinnerVariant} size={_spinnerSize} />;\n\n    if (count == null) return null; // Handle undefined or null count\n\n    if (count > MAX_COUNT) return <Box css={styles.maxElement} />;\n\n    return count;\n  }, [size, variant, loading, count, styles.maxElement]);\n\n  return (\n    <Flex className=\"NotificationCounter\" data-testid={dataTestId} css={styles.root} {...rest}>\n      {shouldShowCount && counterContent}\n    </Flex>\n  );\n};\n"],"names":["notificationCounterSlots","notificationCounterVariantStyles","notificationCounterSizeStyles","notificationCounterRecipe","defineSlotRecipe","MAX_COUNT","notificationCounterSpinnerSize","spinnerVariantToNotificationCounterVariant","NotificationCounter","count","loading","showCount","size","variant","dataTestId","rest","styles","useSlotRecipe","shouldShowCount","counterContent","useMemo","_spinnerSize","_spinnerVariant","Spinner","Box","jsx","Flex"],"mappings":"mRAGMA,EAA2B,CAAC,OAAQ,YAAY,EAGhDC,EAGF,CACF,KAAM,CACJ,KAAM,CACJ,QAAS,oBACT,MAAO,eACT,EACA,WAAY,CACV,QAAS,eAAA,CAEb,EACA,MAAO,CACL,KAAM,CACJ,QAAS,8BACT,MAAO,eACT,EACA,WAAY,CACV,QAAS,eAAA,CAEb,EACA,QAAS,CACP,KAAM,CACJ,QAAS,yBACT,MAAO,MACT,EACA,WAAY,CACV,QAAS,MAAA,CAEb,EACA,IAAK,CACH,KAAM,CACJ,QAAS,6BACT,MAAO,eACT,EACA,WAAY,CACV,QAAS,eAAA,CACX,CAEJ,EAEMC,EAGF,CACF,GAAI,CACF,KAAM,CACJ,SAAU,MACV,OAAQ,EACR,MAAO,CACT,EACA,WAAY,CACV,OAAQ,MACR,MAAO,KAAA,CAEX,EACA,GAAI,CACF,KAAM,CAAE,SAAU,OAAQ,OAAQ,EAAG,MAAO,CAAE,EAC9C,WAAY,CACV,OAAQ,MACR,MAAO,KAAA,CAEX,EACA,GAAI,CACF,KAAM,CACJ,SAAU,KACV,OAAQ,EACR,MAAO,CACT,EACA,WAAY,CACV,OAAQ,MACR,MAAO,KAAA,CAEX,EACA,GAAI,CACF,KAAM,CACJ,SAAU,KACV,OAAQ,EACR,MAAO,CACT,EACA,WAAY,CACV,OAAQ,EACR,MAAO,CAAA,CACT,CAEJ,EAEaC,EAA4BC,EAAAA,iBAAiB,CACxD,MAAOJ,EACP,KAAM,CACJ,KAAM,CACJ,WAAY,SACZ,OAAQ,MACR,YAAa,aACb,aAAc,OACd,WAAY,WACZ,eAAgB,SAEhB,WAAY,MACd,EACA,WAAY,CACV,aAAc,MAAA,CAElB,EACA,SAAU,CACR,KAAME,EACN,QAASD,CACX,EACA,gBAAiB,CACf,KAAM,KACN,QAAS,KAAA,CAEb,CAAC,ECnHYI,EAAY,GAEZC,EAAsF,CACjG,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EAAoG,CAC/G,IAAK,mBACL,KAAM,wBACN,MAAO,kBACP,QAAS,kBACX,ECoBaC,EAAsB,CAAC,CAClC,MAAAC,EACA,QAAAC,EAAU,GACV,UAAAC,EAAY,GACZ,KAAAC,EAAO,KACP,QAAAC,EAAU,MACV,CAAC,eAAgBC,EAAa,8BAC9B,GAAGC,CACL,IAAmD,CAEjD,MAAMC,EADSC,EAAA,cAAc,CAAE,OAAQd,EAA2B,EAC5C,CAAE,KAAAS,EAAM,QAAAC,EAAS,EACjCK,EAAkBN,IAAS,MAAQD,EAEnCQ,EAAiBC,EAAAA,QAAQ,IAAM,CAC7B,MAAAC,EAAef,EAA+BM,CAAI,EAClDU,EAAkBf,EAA2CM,CAAO,EAEtE,OAAAH,GAAaW,0BAAsBE,UAAQ,CAAA,QAASD,EAAiB,KAAMD,CAAc,CAAA,EAEzFZ,GAAS,KAAa,KAEtBA,EAAQJ,0BAAmBmB,EAAI,IAAA,CAAA,IAAKR,EAAO,WAAY,EAEpDP,CAAA,EACN,CAACG,EAAMC,EAASH,EAASD,EAAOO,EAAO,UAAU,CAAC,EAErD,OACGS,EAAAA,kBAAAA,IAAAC,EAAAA,KAAA,CAAK,UAAU,sBAAsB,cAAaZ,EAAY,IAAKE,EAAO,KAAO,GAAGD,EAClF,SAAAG,GAAmBC,EACtB,CAEJ"}

package/dist/chunks/{notificationCounter.component-DikPb9gS.js → notificationCounter.component-kKVMY1AR.js}

@@ -1,9 +1,9 @@
 import { j as r } from "./jsx-runtime-C5mzlN2N.js";
 import { useMemo as d } from "react";
 import { d as f } from "./config-BV2SsQL7.js";
-import { S as p } from "./spinner.component-BxtAqNQO.js";
-import { B as g } from "./index-9BerxEcw.js";
-import { u as h } from "./create-slot-recipe-context-D_FXDJGp.js";
+import { S as g } from "./spinner.component-BxtAqNQO.js";
+import { B as h } from "./index-9BerxEcw.js";
+import { u as p } from "./create-slot-recipe-context-D_FXDJGp.js";
 import { F as b } from "./flex-CX-8gE9T.js";
 const C = ["root", "maxElement"], S = {
   blue: {
@@ -92,7 +92,9 @@ const C = ["root", "maxElement"], S = {
       borderColor: "background",
       borderRadius: "full",
       fontWeight: "semibold",
-      justifyContent: "center"
+      justifyContent: "center",
+      // An inherited line height shifts the digits up or down depending on where the counter sits
+      lineHeight: "none"
     },
     maxElement: {
       borderRadius: "full"
@@ -126,13 +128,13 @@ const C = ["root", "maxElement"], S = {
   ["data-testid"]: l = "kibble-notification-counter",
   ...c
 }) => {
-  const n = h({ recipe: w })({ size: o, variant: e }), m = o !== "xs" && a, x = d(() => {
+  const n = p({ recipe: w })({ size: o, variant: e }), m = o !== "xs" && a, x = d(() => {
     const s = j[o], u = k[e];
-    return i && s ? /* @__PURE__ */ r.jsx(p, { variant: u, size: s }) : t == null ? null : t > z ? /* @__PURE__ */ r.jsx(g, { css: n.maxElement }) : t;
+    return i && s ? /* @__PURE__ */ r.jsx(g, { variant: u, size: s }) : t == null ? null : t > z ? /* @__PURE__ */ r.jsx(h, { css: n.maxElement }) : t;
   }, [o, e, i, t, n.maxElement]);
   return /* @__PURE__ */ r.jsx(b, { className: "NotificationCounter", "data-testid": l, css: n.root, ...c, children: m && x });
 };
 export {
   F as N
 };
-//# sourceMappingURL=notificationCounter.component-DikPb9gS.js.map
+//# sourceMappingURL=notificationCounter.component-kKVMY1AR.js.map

package/dist/chunks/notificationCounter.component-kKVMY1AR.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"notificationCounter.component-kKVMY1AR.js","sources":["../../src/components/NotificationCounter/notificationCounter.recipe.ts","../../src/components/NotificationCounter/notificationCounter.records.ts","../../src/components/NotificationCounter/notificationCounter.component.tsx"],"sourcesContent":["import { defineSlotRecipe, SystemStyleObject } from '@chakra-ui/react/styled-system';\nimport { NotificationCounterSize, NotificationCounterVariant } from './notificationCounter.types';\n\nconst notificationCounterSlots = ['root', 'maxElement'] as const;\ntype NotificationCounterSlot = (typeof notificationCounterSlots)[number];\n\nconst notificationCounterVariantStyles: Record<\n  NotificationCounterVariant,\n  Record<NotificationCounterSlot, SystemStyleObject>\n> = {\n  blue: {\n    root: {\n      bgColor: 'background.accent',\n      color: 'text.contrast',\n    },\n    maxElement: {\n      bgColor: 'text.contrast',\n    },\n  },\n  green: {\n    root: {\n      bgColor: 'background.success.contrast',\n      color: 'text.contrast',\n    },\n    maxElement: {\n      bgColor: 'text.contrast',\n    },\n  },\n  neutral: {\n    root: {\n      bgColor: 'background.subtle.less',\n      color: 'text',\n    },\n    maxElement: {\n      bgColor: 'text',\n    },\n  },\n  red: {\n    root: {\n      bgColor: 'background.danger.contrast',\n      color: 'text.contrast',\n    },\n    maxElement: {\n      bgColor: 'text.contrast',\n    },\n  },\n};\n\nconst notificationCounterSizeStyles: Record<\n  NotificationCounterSize,\n  Record<NotificationCounterSlot, SystemStyleObject>\n> = {\n  xs: {\n    root: {\n      fontSize: '8px',\n      height: 3,\n      width: 3,\n    },\n    maxElement: {\n      height: '1px',\n      width: '1px',\n    },\n  },\n  sm: {\n    root: { fontSize: '10px', height: 4, width: 4 },\n    maxElement: {\n      height: '2px',\n      width: '2px',\n    },\n  },\n  md: {\n    root: {\n      fontSize: 'xs',\n      height: 5,\n      width: 5,\n    },\n    maxElement: {\n      height: '3px',\n      width: '3px',\n    },\n  },\n  lg: {\n    root: {\n      fontSize: 'sm',\n      height: 6,\n      width: 6,\n    },\n    maxElement: {\n      height: 1,\n      width: 1,\n    },\n  },\n};\n\nexport const notificationCounterRecipe = defineSlotRecipe({\n  slots: notificationCounterSlots,\n  base: {\n    root: {\n      alignItems: 'center',\n      border: '1px',\n      borderColor: 'background',\n      borderRadius: 'full',\n      fontWeight: 'semibold',\n      justifyContent: 'center',\n      // An inherited line height shifts the digits up or down depending on where the counter sits\n      lineHeight: 'none',\n    },\n    maxElement: {\n      borderRadius: 'full',\n    },\n  },\n  variants: {\n    size: notificationCounterSizeStyles,\n    variant: notificationCounterVariantStyles,\n  },\n  defaultVariants: {\n    size: 'md',\n    variant: 'red',\n  },\n});\n","import { SpinnerSize } from 'components/Spinner/spinner.types';\nimport { NotificationCounterSize, NotificationCounterVariant } from './notificationCounter.types';\nimport { TypographyVariant } from 'shared/types';\n\nexport const MAX_COUNT = 99;\n\nexport const notificationCounterSpinnerSize: Record<NotificationCounterSize, SpinnerSize | null> = {\n  xs: null, // The xs size doesn't show a spinner\n  sm: 'xs',\n  md: 'xs',\n  lg: 'sm',\n};\n\nexport const spinnerVariantToNotificationCounterVariant: Record<NotificationCounterVariant, TypographyVariant> = {\n  red: 'dangerOnContrast',\n  blue: 'interactiveOnContrast',\n  green: 'brandOnContrast',\n  neutral: 'subtleOnContrast',\n};\n","import React, { useMemo } from 'react';\nimport { Flex, FlexProps } from '@chakra-ui/react/flex';\nimport { NotificationCounterSize, NotificationCounterVariant } from './notificationCounter.types';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { notificationCounterRecipe } from './notificationCounter.recipe';\nimport {\n  MAX_COUNT,\n  notificationCounterSpinnerSize,\n  spinnerVariantToNotificationCounterVariant,\n} from './notificationCounter.records';\nimport { Spinner } from 'components/Spinner/spinner.component';\nimport { Box } from '@chakra-ui/react/box';\n\nexport interface NotificationCounterProps extends FlexProps {\n  /** Value of the notification counter. If count is greater than 99, the count will be hidden and a special indicator will take its place. */\n  count?: number;\n  /** If true, the notification counter will show a spinner.\n   * @default false\n   */\n  loading?: boolean;\n  /** Whether or not to show the counter label. If the size is xs, by default the count label won't be shown.\n   * @default true\n   */\n  showCount?: boolean;\n  /** Size of the notification counter\n   * @default md\n   */\n  size?: NotificationCounterSize;\n  /** Color variant for the notification counter\n   * @default red\n   */\n  variant?: NotificationCounterVariant;\n  /** Data test id for the notification counter.\n   * @default kibble-notification-counter\n   */\n  'data-testid'?: string;\n}\n\nexport const NotificationCounter = ({\n  count,\n  loading = false,\n  showCount = true,\n  size = 'md',\n  variant = 'red',\n  ['data-testid']: dataTestId = 'kibble-notification-counter',\n  ...rest\n}: NotificationCounterProps): React.JSX.Element => {\n  const recipe = useSlotRecipe({ recipe: notificationCounterRecipe });\n  const styles = recipe({ size, variant });\n  const shouldShowCount = size !== 'xs' && showCount;\n\n  const counterContent = useMemo(() => {\n    const _spinnerSize = notificationCounterSpinnerSize[size];\n    const _spinnerVariant = spinnerVariantToNotificationCounterVariant[variant];\n\n    if (loading && !!_spinnerSize) return <Spinner variant={_spinnerVariant} size={_spinnerSize} />;\n\n    if (count == null) return null; // Handle undefined or null count\n\n    if (count > MAX_COUNT) return <Box css={styles.maxElement} />;\n\n    return count;\n  }, [size, variant, loading, count, styles.maxElement]);\n\n  return (\n    <Flex className=\"NotificationCounter\" data-testid={dataTestId} css={styles.root} {...rest}>\n      {shouldShowCount && counterContent}\n    </Flex>\n  );\n};\n"],"names":["notificationCounterSlots","notificationCounterVariantStyles","notificationCounterSizeStyles","notificationCounterRecipe","defineSlotRecipe","MAX_COUNT","notificationCounterSpinnerSize","spinnerVariantToNotificationCounterVariant","NotificationCounter","count","loading","showCount","size","variant","dataTestId","rest","styles","useSlotRecipe","shouldShowCount","counterContent","useMemo","_spinnerSize","_spinnerVariant","Spinner","Box","jsx","Flex"],"mappings":"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"}

package/dist/chunks/{tab.types-xN2lQJLC.js → tab.types-C3Si454B.js}

@@ -1,2 +1,2 @@
-"use strict";const u=require("./jsx-runtime-BjDatQAs.js"),_=require("./icon.component-B1hr5lLa.js"),X=require("./notificationCounter.component-BUxWlpKh.js"),H=require("./heading.component-DeM4h5rY.js"),K=require("./create-slot-recipe-context-HXE1VazG.js"),m=require("react"),l=require("./use-locale-context-ym21RUxU.js"),n=require("./index-CQURjLlA.js"),E=require("./render-strategy-kPh1pd2U.js"),F=require("./index-Ts8g8jZd.js"),z=require("./index-BQRnVsAg.js");function Y(e,t){const[r,a]=m.useState(e);return m.useEffect(()=>{const o=setTimeout(()=>{a(e)},t);return()=>{clearTimeout(o)}},[e,t]),r}const[N,A]=l.createContext({name:"TabsContext",hookName:"useTabsContext",providerName:"<TabsProvider />"}),L=m.forwardRef((e,t)=>{const[r,a]=l.createSplitProps()(e,["value"]),o=A(),s=E.useRenderStrategyPropsContext(),i=F.usePresence({...s,present:Y(o.value===e.value,0),immediate:!0}),g=n.mergeProps(o.getContentProps(r),i.getPresenceProps(),a);return u.jsxRuntimeExports.jsx(F.PresenceProvider,{value:i,children:i.unmounted?null:u.jsxRuntimeExports.jsx(l.ark.div,{...g,ref:l.composeRefs(i.ref,t)})})});L.displayName="TabContent";const $=m.forwardRef((e,t)=>{const r=A(),a=n.mergeProps(r.getIndicatorProps(),e);return u.jsxRuntimeExports.jsx(l.ark.div,{...a,ref:t})});$.displayName="TabIndicator";const O=m.forwardRef((e,t)=>{const r=A(),a=n.mergeProps(r.getListProps(),e);return u.jsxRuntimeExports.jsx(l.ark.div,{...a,ref:t})});O.displayName="TabList";const B=m.forwardRef((e,t)=>{const[r,a]=l.createSplitProps()(e,["disabled","value"]),o=A(),s=n.mergeProps(o.getTriggerProps(r),a);return u.jsxRuntimeExports.jsx(l.ark.button,{...s,ref:t})});B.displayName="TabTrigger";var G=n.createAnatomy("tabs").parts("root","list","trigger","content","indicator"),y=G.build(),J=e=>e.ids?.root??`tabs:${e.id}`,h=e=>e.ids?.list??`tabs:${e.id}:list`,I=(e,t)=>e.ids?.content??`tabs:${e.id}:content-${t}`,R=(e,t)=>e.ids?.trigger??`tabs:${e.id}:trigger-${t}`,k=e=>e.ids?.indicator??`tabs:${e.id}:indicator`,Q=e=>e.getById(h(e)),Z=(e,t)=>e.getById(I(e,t)),V=(e,t)=>e.getById(R(e,t)),S=e=>e.getById(k(e)),P=e=>{const r=`[role=tab][data-ownedby='${CSS.escape(h(e))}']:not([disabled])`;return n.queryAll(Q(e),r)},ee=e=>n.first(P(e)),te=e=>n.last(P(e)),ae=(e,t)=>n.nextById(P(e),R(e,t.value),t.loopFocus),re=(e,t)=>n.prevById(P(e),R(e,t.value),t.loopFocus),D=e=>({left:e?.offsetLeft??0,top:e?.offsetTop??0,width:e?.offsetWidth??0,height:e?.offsetHeight??0}),se=(e,t)=>{const r=n.itemById(P(e),R(e,t));return U(D(r))},U=e=>({width:`${e.width}px`,height:`${e.height}px`,left:`${e.left}px`,top:`${e.top}px`});function oe(e,t){const{state:r,send:a,context:o,prop:s,scope:i}=e,g=s("translations"),p=r.matches("focused"),f=s("orientation")==="vertical",b=s("orientation")==="horizontal",j=s("composite");function w(c){return{selected:o.get("value")===c.value,focused:o.get("focusedValue")===c.value,disabled:!!c.disabled}}return{value:o.get("value"),focusedValue:o.get("focusedValue"),setValue(c){a({type:"SET_VALUE",value:c})},clearValue(){a({type:"CLEAR_VALUE"})},setIndicatorRect(c){const d=R(i,c);a({type:"SET_INDICATOR_RECT",id:d})},syncTabIndex(){a({type:"SYNC_TAB_INDEX"})},selectNext(c){a({type:"TAB_FOCUS",value:c,src:"selectNext"}),a({type:"ARROW_NEXT",src:"selectNext"})},selectPrev(c){a({type:"TAB_FOCUS",value:c,src:"selectPrev"}),a({type:"ARROW_PREV",src:"selectPrev"})},focus(){const c=o.get("value");c&&V(i,c)?.focus()},getRootProps(){return t.element({...y.root.attrs,id:J(i),"data-orientation":s("orientation"),"data-focus":n.dataAttr(p),dir:s("dir")})},getListProps(){return t.element({...y.list.attrs,id:h(i),role:"tablist",dir:s("dir"),"data-focus":n.dataAttr(p),"aria-orientation":s("orientation"),"data-orientation":s("orientation"),"aria-label":g?.listLabel,onKeyDown(c){if(c.defaultPrevented||!n.isSelfTarget(c)||n.isComposingEvent(c))return;const d={ArrowDown(){b||a({type:"ARROW_NEXT",key:"ArrowDown"})},ArrowUp(){b||a({type:"ARROW_PREV",key:"ArrowUp"})},ArrowLeft(){f||a({type:"ARROW_PREV",key:"ArrowLeft"})},ArrowRight(){f||a({type:"ARROW_NEXT",key:"ArrowRight"})},Home(){a({type:"HOME"})},End(){a({type:"END"})}};let v=n.getEventKey(c,{dir:s("dir"),orientation:s("orientation")});const T=d[v];if(T){c.preventDefault(),T(c);return}}})},getTriggerState:w,getTriggerProps(c){const{value:d,disabled:v}=c,T=w(c);return t.button({...y.trigger.attrs,role:"tab",type:"button",disabled:v,dir:s("dir"),"data-orientation":s("orientation"),"data-disabled":n.dataAttr(v),"aria-disabled":v,"data-value":d,"aria-selected":T.selected,"data-selected":n.dataAttr(T.selected),"data-focus":n.dataAttr(T.focused),"aria-controls":T.selected?I(i,d):void 0,"data-ownedby":h(i),"data-ssr":n.dataAttr(o.get("ssr")),id:R(i,d),tabIndex:T.selected&&j?0:-1,onFocus(){a({type:"TAB_FOCUS",value:d})},onBlur(x){x.relatedTarget?.getAttribute("role")!=="tab"&&a({type:"TAB_BLUR"})},onClick(x){x.defaultPrevented||n.isOpeningInNewTab(x)||v||(n.isSafari()&&x.currentTarget.focus(),a({type:"TAB_CLICK",value:d}))}})},getContentProps(c){const{value:d}=c,v=o.get("value")===d;return t.element({...y.content.attrs,dir:s("dir"),id:I(i,d),tabIndex:j?0:-1,"aria-labelledby":R(i,d),role:"tabpanel","data-ownedby":h(i),"data-selected":n.dataAttr(v),"data-orientation":s("orientation"),hidden:!v})},getIndicatorProps(){const c=o.get("indicatorRect"),d=o.get("indicatorTransition");return t.element({id:k(i),...y.indicator.attrs,dir:s("dir"),"data-orientation":s("orientation"),style:{"--transition-property":"left, right, top, bottom, width, height","--left":c.left,"--top":c.top,"--width":c.width,"--height":c.height,position:"absolute",willChange:"var(--transition-property)",transitionProperty:"var(--transition-property)",transitionDuration:d?"var(--transition-duration, 150ms)":"0ms",transitionTimingFunction:"var(--transition-timing-function)",[b?"left":"top"]:b?"var(--left)":"var(--top)"}})}}}var{createMachine:ne}=n.setup(),ie=ne({props({props:e}){return{dir:"ltr",orientation:"horizontal",activationMode:"automatic",loopFocus:!0,composite:!0,navigate(t){n.clickIfLink(t.node)},defaultValue:null,...e}},initialState(){return"idle"},context({prop:e,bindable:t}){return{value:t(()=>({defaultValue:e("defaultValue"),value:e("value"),onChange(r){e("onValueChange")?.({value:r})}})),focusedValue:t(()=>({defaultValue:e("value")||e("defaultValue"),sync:!0,onChange(r){e("onFocusChange")?.({focusedValue:r})}})),ssr:t(()=>({defaultValue:!0})),indicatorTransition:t(()=>({defaultValue:!1})),indicatorRect:t(()=>({defaultValue:{left:"0px",top:"0px",width:"0px",height:"0px"}}))}},watch({context:e,prop:t,track:r,action:a}){r([()=>e.get("value")],()=>{a(["allowIndicatorTransition","syncIndicatorRect","syncTabIndex","navigateIfNeeded"])}),r([()=>t("dir"),()=>t("orientation")],()=>{a(["syncIndicatorRect"])})},on:{SET_VALUE:{actions:["setValue"]},CLEAR_VALUE:{actions:["clearValue"]},SET_INDICATOR_RECT:{actions:["setIndicatorRect"]},SYNC_TAB_INDEX:{actions:["syncTabIndex"]}},entry:["syncIndicatorRect","syncTabIndex","syncSsr"],exit:["cleanupObserver"],states:{idle:{on:{TAB_FOCUS:{target:"focused",actions:["setFocusedValue"]},TAB_CLICK:{target:"focused",actions:["setFocusedValue","setValue"]}}},focused:{on:{TAB_CLICK:{actions:["setFocusedValue","setValue"]},ARROW_PREV:[{guard:"selectOnFocus",actions:["focusPrevTab","selectFocusedTab"]},{actions:["focusPrevTab"]}],ARROW_NEXT:[{guard:"selectOnFocus",actions:["focusNextTab","selectFocusedTab"]},{actions:["focusNextTab"]}],HOME:[{guard:"selectOnFocus",actions:["focusFirstTab","selectFocusedTab"]},{actions:["focusFirstTab"]}],END:[{guard:"selectOnFocus",actions:["focusLastTab","selectFocusedTab"]},{actions:["focusLastTab"]}],TAB_FOCUS:{actions:["setFocusedValue"]},TAB_BLUR:{target:"idle",actions:["clearFocusedValue"]}}}},implementations:{guards:{selectOnFocus:({prop:e})=>e("activationMode")==="automatic"},actions:{selectFocusedTab({context:e,prop:t}){n.raf(()=>{const r=e.get("focusedValue");if(!r)return;const o=t("deselectable")&&e.get("value")===r?null:r;e.set("value",o)})},setFocusedValue({context:e,event:t,flush:r}){t.value!=null&&r(()=>{e.set("focusedValue",t.value)})},clearFocusedValue({context:e}){e.set("focusedValue",null)},setValue({context:e,event:t,prop:r}){const a=r("deselectable")&&e.get("value")===e.get("focusedValue");e.set("value",a?null:t.value)},clearValue({context:e}){e.set("value",null)},focusFirstTab({scope:e}){n.raf(()=>{ee(e)?.focus()})},focusLastTab({scope:e}){n.raf(()=>{te(e)?.focus()})},focusNextTab({context:e,prop:t,scope:r,event:a}){const o=a.value??e.get("focusedValue");if(!o)return;const s=ae(r,{value:o,loopFocus:t("loopFocus")});n.raf(()=>{t("composite")?s?.focus():s?.dataset.value!=null&&e.set("focusedValue",s.dataset.value)})},focusPrevTab({context:e,prop:t,scope:r,event:a}){const o=a.value??e.get("focusedValue");if(!o)return;const s=re(r,{value:o,loopFocus:t("loopFocus")});n.raf(()=>{t("composite")?s?.focus():s?.dataset.value!=null&&e.set("focusedValue",s.dataset.value)})},syncTabIndex({context:e,scope:t}){n.raf(()=>{const r=e.get("value");if(!r)return;const a=Z(t,r);if(!a)return;n.getFocusables(a).length>0?a.removeAttribute("tabindex"):a.setAttribute("tabindex","0")})},cleanupObserver({refs:e}){const t=e.get("indicatorCleanup");t&&t()},allowIndicatorTransition({context:e}){e.set("indicatorTransition",!0)},setIndicatorRect({context:e,event:t,scope:r}){const a=t.id??e.get("value");if(!S(r))return;if(!a){e.set("indicatorTransition",!1);return}V(r,a)&&(e.set("indicatorRect",se(r,a)),n.nextTick(()=>{e.set("indicatorTransition",!1)}))},syncSsr({context:e}){e.set("ssr",!1)},syncIndicatorRect({context:e,refs:t,scope:r}){const a=t.get("indicatorCleanup");a&&a();const o=e.get("value");if(!o){e.set("indicatorTransition",!1);return}const s=V(r,o),i=S(r);if(!s||!i)return;const g=n.trackElementRect([s],{measure(p){return D(p)},onEntry({rects:p}){const[f]=p;e.set("indicatorRect",U(f))}});t.set("indicatorCleanup",g)},navigateIfNeeded({context:e,prop:t,scope:r}){const a=e.get("value");if(!a)return;const o=V(r,a);n.isAnchorElement(o)&&t("navigate")?.({value:a,node:o,href:o.href})}}}});l.createProps()(["activationMode","composite","deselectable","dir","getRootNode","id","ids","loopFocus","navigate","onFocusChange","onValueChange","orientation","translations","value","defaultValue"]);l.createProps()(["disabled","value"]);l.createProps()(["value"]);const ce=e=>{const t=m.useId(),{getRootNode:r}=l.useEnvironmentContext(),{dir:a}=l.useLocaleContext(),o={id:t,dir:a,getRootNode:r,...e},s=l.useMachine(ie,o);return oe(s,l.normalizeProps)},q=m.forwardRef((e,t)=>{const[r,a]=E.splitRenderStrategyProps(e),[o,s]=l.createSplitProps()(a,["activationMode","composite","defaultValue","deselectable","id","ids","loopFocus","navigate","onFocusChange","onValueChange","orientation","translations","value"]),i=ce(o),g=n.mergeProps(i.getRootProps(),s);return u.jsxRuntimeExports.jsx(N,{value:i,children:u.jsxRuntimeExports.jsx(E.RenderStrategyPropsProvider,{value:r,children:u.jsxRuntimeExports.jsx(l.ark.div,{...g,ref:t})})})});q.displayName="TabsRoot";const W=m.forwardRef((e,t)=>{const[r,a]=E.splitRenderStrategyProps(e),[{value:o},s]=l.createSplitProps()(a,["value"]),i=n.mergeProps(o.getRootProps(),s);return u.jsxRuntimeExports.jsx(N,{value:o,children:u.jsxRuntimeExports.jsx(E.RenderStrategyPropsProvider,{value:r,children:u.jsxRuntimeExports.jsx(l.ark.div,{...i,ref:t})})})});W.displayName="TabsRootProvider";const{withProvider:M,withContext:C}=K.createSlotRecipeContext({key:"tabs"});M(W,"root",{forwardAsChild:!0});const ue=M(q,"root",{forwardAsChild:!0}),le=C(B,"trigger",{forwardAsChild:!0}),de=C(L,"content",{forwardAsChild:!0});C("div","contentGroup");const ge=C(O,"list",{forwardAsChild:!0});C($,"indicator",{forwardAsChild:!0});const fe={xs:"sm",sm:"md",md:"md",lg:"lg"},pe={xs:"xs",sm:"xs",md:"sm",lg:"md"},be=({iconName:e,iconPosition:t="left",label:r,notificationCounterProps:a,showNotificationCounter:o,size:s="md",["data-testid"]:i="kibble-tab",...g})=>u.jsxRuntimeExports.jsxs(le,{className:"Tab","data-testid":i,...g,children:[!!e&&t==="left"&&u.jsxRuntimeExports.jsx(_.Icon,{className:"Tab__Icon","data-testid":`${i}-icon-left`,name:e,size:s,variant:"default"}),u.jsxRuntimeExports.jsx(H.WrappedHeading,{as:"span",className:"Tab__Label","data-testid":`${i}-label`,size:pe[s],children:r}),!!e&&t==="right"&&u.jsxRuntimeExports.jsx(_.Icon,{className:"Tab__Icon","data-testid":`${i}-icon-right`,name:e,size:s}),o&&u.jsxRuntimeExports.jsx(X.NotificationCounter,{className:"Tab__NotificationCounter","data-testid":`${i}-notification-counter`,...a,size:fe[s]})]}),ve=({align:e="start",onChange:t,scrollable:r=!1,size:a="md",tabs:o,tabsContent:s,["data-testid"]:i="kibble-tabs",...g})=>{const p=u.jsxRuntimeExports.jsx(ge,{className:"Tabs__List","data-testid":`${i}-trigger-list`,children:o.map((f,b)=>u.jsxRuntimeExports.jsx(be,{...f,"data-testid":`${i}-trigger-${f.value}`,size:a,...r&&{style:{flexShrink:0}}},`tab-${b}`))});return u.jsxRuntimeExports.jsxs(ue,{className:"Tabs","data-testid":i,justify:e||g.justify,size:a,onValueChange:({value:f})=>t?.(f),...g,children:[r?u.jsxRuntimeExports.jsx(z.Box,{overflowX:"auto",scrollbarWidth:"none",children:p}):p,!!s&&s.map((f,b)=>u.jsxRuntimeExports.jsx(de,{"data-testid":`${i}-content-${o[b].value}`,...f},`${i}-tabContent-${b}`))]})},me=["xs","sm","md","lg"],Te=["left","right"];exports.Tabs=ve;exports.tabIconPositions=Te;exports.tabSizes=me;
-//# sourceMappingURL=tab.types-xN2lQJLC.js.map
+"use strict";const u=require("./jsx-runtime-BjDatQAs.js"),_=require("./icon.component-B1hr5lLa.js"),X=require("./notificationCounter.component-Cmpqouio.js"),H=require("./heading.component-DeM4h5rY.js"),K=require("./create-slot-recipe-context-HXE1VazG.js"),m=require("react"),l=require("./use-locale-context-ym21RUxU.js"),n=require("./index-CQURjLlA.js"),E=require("./render-strategy-kPh1pd2U.js"),F=require("./index-Ts8g8jZd.js"),z=require("./index-BQRnVsAg.js");function Y(e,t){const[r,a]=m.useState(e);return m.useEffect(()=>{const o=setTimeout(()=>{a(e)},t);return()=>{clearTimeout(o)}},[e,t]),r}const[N,A]=l.createContext({name:"TabsContext",hookName:"useTabsContext",providerName:"<TabsProvider />"}),L=m.forwardRef((e,t)=>{const[r,a]=l.createSplitProps()(e,["value"]),o=A(),s=E.useRenderStrategyPropsContext(),i=F.usePresence({...s,present:Y(o.value===e.value,0),immediate:!0}),g=n.mergeProps(o.getContentProps(r),i.getPresenceProps(),a);return u.jsxRuntimeExports.jsx(F.PresenceProvider,{value:i,children:i.unmounted?null:u.jsxRuntimeExports.jsx(l.ark.div,{...g,ref:l.composeRefs(i.ref,t)})})});L.displayName="TabContent";const $=m.forwardRef((e,t)=>{const r=A(),a=n.mergeProps(r.getIndicatorProps(),e);return u.jsxRuntimeExports.jsx(l.ark.div,{...a,ref:t})});$.displayName="TabIndicator";const O=m.forwardRef((e,t)=>{const r=A(),a=n.mergeProps(r.getListProps(),e);return u.jsxRuntimeExports.jsx(l.ark.div,{...a,ref:t})});O.displayName="TabList";const B=m.forwardRef((e,t)=>{const[r,a]=l.createSplitProps()(e,["disabled","value"]),o=A(),s=n.mergeProps(o.getTriggerProps(r),a);return u.jsxRuntimeExports.jsx(l.ark.button,{...s,ref:t})});B.displayName="TabTrigger";var G=n.createAnatomy("tabs").parts("root","list","trigger","content","indicator"),y=G.build(),J=e=>e.ids?.root??`tabs:${e.id}`,h=e=>e.ids?.list??`tabs:${e.id}:list`,I=(e,t)=>e.ids?.content??`tabs:${e.id}:content-${t}`,R=(e,t)=>e.ids?.trigger??`tabs:${e.id}:trigger-${t}`,k=e=>e.ids?.indicator??`tabs:${e.id}:indicator`,Q=e=>e.getById(h(e)),Z=(e,t)=>e.getById(I(e,t)),V=(e,t)=>e.getById(R(e,t)),S=e=>e.getById(k(e)),P=e=>{const r=`[role=tab][data-ownedby='${CSS.escape(h(e))}']:not([disabled])`;return n.queryAll(Q(e),r)},ee=e=>n.first(P(e)),te=e=>n.last(P(e)),ae=(e,t)=>n.nextById(P(e),R(e,t.value),t.loopFocus),re=(e,t)=>n.prevById(P(e),R(e,t.value),t.loopFocus),D=e=>({left:e?.offsetLeft??0,top:e?.offsetTop??0,width:e?.offsetWidth??0,height:e?.offsetHeight??0}),se=(e,t)=>{const r=n.itemById(P(e),R(e,t));return U(D(r))},U=e=>({width:`${e.width}px`,height:`${e.height}px`,left:`${e.left}px`,top:`${e.top}px`});function oe(e,t){const{state:r,send:a,context:o,prop:s,scope:i}=e,g=s("translations"),p=r.matches("focused"),f=s("orientation")==="vertical",b=s("orientation")==="horizontal",j=s("composite");function w(c){return{selected:o.get("value")===c.value,focused:o.get("focusedValue")===c.value,disabled:!!c.disabled}}return{value:o.get("value"),focusedValue:o.get("focusedValue"),setValue(c){a({type:"SET_VALUE",value:c})},clearValue(){a({type:"CLEAR_VALUE"})},setIndicatorRect(c){const d=R(i,c);a({type:"SET_INDICATOR_RECT",id:d})},syncTabIndex(){a({type:"SYNC_TAB_INDEX"})},selectNext(c){a({type:"TAB_FOCUS",value:c,src:"selectNext"}),a({type:"ARROW_NEXT",src:"selectNext"})},selectPrev(c){a({type:"TAB_FOCUS",value:c,src:"selectPrev"}),a({type:"ARROW_PREV",src:"selectPrev"})},focus(){const c=o.get("value");c&&V(i,c)?.focus()},getRootProps(){return t.element({...y.root.attrs,id:J(i),"data-orientation":s("orientation"),"data-focus":n.dataAttr(p),dir:s("dir")})},getListProps(){return t.element({...y.list.attrs,id:h(i),role:"tablist",dir:s("dir"),"data-focus":n.dataAttr(p),"aria-orientation":s("orientation"),"data-orientation":s("orientation"),"aria-label":g?.listLabel,onKeyDown(c){if(c.defaultPrevented||!n.isSelfTarget(c)||n.isComposingEvent(c))return;const d={ArrowDown(){b||a({type:"ARROW_NEXT",key:"ArrowDown"})},ArrowUp(){b||a({type:"ARROW_PREV",key:"ArrowUp"})},ArrowLeft(){f||a({type:"ARROW_PREV",key:"ArrowLeft"})},ArrowRight(){f||a({type:"ARROW_NEXT",key:"ArrowRight"})},Home(){a({type:"HOME"})},End(){a({type:"END"})}};let v=n.getEventKey(c,{dir:s("dir"),orientation:s("orientation")});const T=d[v];if(T){c.preventDefault(),T(c);return}}})},getTriggerState:w,getTriggerProps(c){const{value:d,disabled:v}=c,T=w(c);return t.button({...y.trigger.attrs,role:"tab",type:"button",disabled:v,dir:s("dir"),"data-orientation":s("orientation"),"data-disabled":n.dataAttr(v),"aria-disabled":v,"data-value":d,"aria-selected":T.selected,"data-selected":n.dataAttr(T.selected),"data-focus":n.dataAttr(T.focused),"aria-controls":T.selected?I(i,d):void 0,"data-ownedby":h(i),"data-ssr":n.dataAttr(o.get("ssr")),id:R(i,d),tabIndex:T.selected&&j?0:-1,onFocus(){a({type:"TAB_FOCUS",value:d})},onBlur(x){x.relatedTarget?.getAttribute("role")!=="tab"&&a({type:"TAB_BLUR"})},onClick(x){x.defaultPrevented||n.isOpeningInNewTab(x)||v||(n.isSafari()&&x.currentTarget.focus(),a({type:"TAB_CLICK",value:d}))}})},getContentProps(c){const{value:d}=c,v=o.get("value")===d;return t.element({...y.content.attrs,dir:s("dir"),id:I(i,d),tabIndex:j?0:-1,"aria-labelledby":R(i,d),role:"tabpanel","data-ownedby":h(i),"data-selected":n.dataAttr(v),"data-orientation":s("orientation"),hidden:!v})},getIndicatorProps(){const c=o.get("indicatorRect"),d=o.get("indicatorTransition");return t.element({id:k(i),...y.indicator.attrs,dir:s("dir"),"data-orientation":s("orientation"),style:{"--transition-property":"left, right, top, bottom, width, height","--left":c.left,"--top":c.top,"--width":c.width,"--height":c.height,position:"absolute",willChange:"var(--transition-property)",transitionProperty:"var(--transition-property)",transitionDuration:d?"var(--transition-duration, 150ms)":"0ms",transitionTimingFunction:"var(--transition-timing-function)",[b?"left":"top"]:b?"var(--left)":"var(--top)"}})}}}var{createMachine:ne}=n.setup(),ie=ne({props({props:e}){return{dir:"ltr",orientation:"horizontal",activationMode:"automatic",loopFocus:!0,composite:!0,navigate(t){n.clickIfLink(t.node)},defaultValue:null,...e}},initialState(){return"idle"},context({prop:e,bindable:t}){return{value:t(()=>({defaultValue:e("defaultValue"),value:e("value"),onChange(r){e("onValueChange")?.({value:r})}})),focusedValue:t(()=>({defaultValue:e("value")||e("defaultValue"),sync:!0,onChange(r){e("onFocusChange")?.({focusedValue:r})}})),ssr:t(()=>({defaultValue:!0})),indicatorTransition:t(()=>({defaultValue:!1})),indicatorRect:t(()=>({defaultValue:{left:"0px",top:"0px",width:"0px",height:"0px"}}))}},watch({context:e,prop:t,track:r,action:a}){r([()=>e.get("value")],()=>{a(["allowIndicatorTransition","syncIndicatorRect","syncTabIndex","navigateIfNeeded"])}),r([()=>t("dir"),()=>t("orientation")],()=>{a(["syncIndicatorRect"])})},on:{SET_VALUE:{actions:["setValue"]},CLEAR_VALUE:{actions:["clearValue"]},SET_INDICATOR_RECT:{actions:["setIndicatorRect"]},SYNC_TAB_INDEX:{actions:["syncTabIndex"]}},entry:["syncIndicatorRect","syncTabIndex","syncSsr"],exit:["cleanupObserver"],states:{idle:{on:{TAB_FOCUS:{target:"focused",actions:["setFocusedValue"]},TAB_CLICK:{target:"focused",actions:["setFocusedValue","setValue"]}}},focused:{on:{TAB_CLICK:{actions:["setFocusedValue","setValue"]},ARROW_PREV:[{guard:"selectOnFocus",actions:["focusPrevTab","selectFocusedTab"]},{actions:["focusPrevTab"]}],ARROW_NEXT:[{guard:"selectOnFocus",actions:["focusNextTab","selectFocusedTab"]},{actions:["focusNextTab"]}],HOME:[{guard:"selectOnFocus",actions:["focusFirstTab","selectFocusedTab"]},{actions:["focusFirstTab"]}],END:[{guard:"selectOnFocus",actions:["focusLastTab","selectFocusedTab"]},{actions:["focusLastTab"]}],TAB_FOCUS:{actions:["setFocusedValue"]},TAB_BLUR:{target:"idle",actions:["clearFocusedValue"]}}}},implementations:{guards:{selectOnFocus:({prop:e})=>e("activationMode")==="automatic"},actions:{selectFocusedTab({context:e,prop:t}){n.raf(()=>{const r=e.get("focusedValue");if(!r)return;const o=t("deselectable")&&e.get("value")===r?null:r;e.set("value",o)})},setFocusedValue({context:e,event:t,flush:r}){t.value!=null&&r(()=>{e.set("focusedValue",t.value)})},clearFocusedValue({context:e}){e.set("focusedValue",null)},setValue({context:e,event:t,prop:r}){const a=r("deselectable")&&e.get("value")===e.get("focusedValue");e.set("value",a?null:t.value)},clearValue({context:e}){e.set("value",null)},focusFirstTab({scope:e}){n.raf(()=>{ee(e)?.focus()})},focusLastTab({scope:e}){n.raf(()=>{te(e)?.focus()})},focusNextTab({context:e,prop:t,scope:r,event:a}){const o=a.value??e.get("focusedValue");if(!o)return;const s=ae(r,{value:o,loopFocus:t("loopFocus")});n.raf(()=>{t("composite")?s?.focus():s?.dataset.value!=null&&e.set("focusedValue",s.dataset.value)})},focusPrevTab({context:e,prop:t,scope:r,event:a}){const o=a.value??e.get("focusedValue");if(!o)return;const s=re(r,{value:o,loopFocus:t("loopFocus")});n.raf(()=>{t("composite")?s?.focus():s?.dataset.value!=null&&e.set("focusedValue",s.dataset.value)})},syncTabIndex({context:e,scope:t}){n.raf(()=>{const r=e.get("value");if(!r)return;const a=Z(t,r);if(!a)return;n.getFocusables(a).length>0?a.removeAttribute("tabindex"):a.setAttribute("tabindex","0")})},cleanupObserver({refs:e}){const t=e.get("indicatorCleanup");t&&t()},allowIndicatorTransition({context:e}){e.set("indicatorTransition",!0)},setIndicatorRect({context:e,event:t,scope:r}){const a=t.id??e.get("value");if(!S(r))return;if(!a){e.set("indicatorTransition",!1);return}V(r,a)&&(e.set("indicatorRect",se(r,a)),n.nextTick(()=>{e.set("indicatorTransition",!1)}))},syncSsr({context:e}){e.set("ssr",!1)},syncIndicatorRect({context:e,refs:t,scope:r}){const a=t.get("indicatorCleanup");a&&a();const o=e.get("value");if(!o){e.set("indicatorTransition",!1);return}const s=V(r,o),i=S(r);if(!s||!i)return;const g=n.trackElementRect([s],{measure(p){return D(p)},onEntry({rects:p}){const[f]=p;e.set("indicatorRect",U(f))}});t.set("indicatorCleanup",g)},navigateIfNeeded({context:e,prop:t,scope:r}){const a=e.get("value");if(!a)return;const o=V(r,a);n.isAnchorElement(o)&&t("navigate")?.({value:a,node:o,href:o.href})}}}});l.createProps()(["activationMode","composite","deselectable","dir","getRootNode","id","ids","loopFocus","navigate","onFocusChange","onValueChange","orientation","translations","value","defaultValue"]);l.createProps()(["disabled","value"]);l.createProps()(["value"]);const ce=e=>{const t=m.useId(),{getRootNode:r}=l.useEnvironmentContext(),{dir:a}=l.useLocaleContext(),o={id:t,dir:a,getRootNode:r,...e},s=l.useMachine(ie,o);return oe(s,l.normalizeProps)},q=m.forwardRef((e,t)=>{const[r,a]=E.splitRenderStrategyProps(e),[o,s]=l.createSplitProps()(a,["activationMode","composite","defaultValue","deselectable","id","ids","loopFocus","navigate","onFocusChange","onValueChange","orientation","translations","value"]),i=ce(o),g=n.mergeProps(i.getRootProps(),s);return u.jsxRuntimeExports.jsx(N,{value:i,children:u.jsxRuntimeExports.jsx(E.RenderStrategyPropsProvider,{value:r,children:u.jsxRuntimeExports.jsx(l.ark.div,{...g,ref:t})})})});q.displayName="TabsRoot";const W=m.forwardRef((e,t)=>{const[r,a]=E.splitRenderStrategyProps(e),[{value:o},s]=l.createSplitProps()(a,["value"]),i=n.mergeProps(o.getRootProps(),s);return u.jsxRuntimeExports.jsx(N,{value:o,children:u.jsxRuntimeExports.jsx(E.RenderStrategyPropsProvider,{value:r,children:u.jsxRuntimeExports.jsx(l.ark.div,{...i,ref:t})})})});W.displayName="TabsRootProvider";const{withProvider:M,withContext:C}=K.createSlotRecipeContext({key:"tabs"});M(W,"root",{forwardAsChild:!0});const ue=M(q,"root",{forwardAsChild:!0}),le=C(B,"trigger",{forwardAsChild:!0}),de=C(L,"content",{forwardAsChild:!0});C("div","contentGroup");const ge=C(O,"list",{forwardAsChild:!0});C($,"indicator",{forwardAsChild:!0});const fe={xs:"sm",sm:"md",md:"md",lg:"lg"},pe={xs:"xs",sm:"xs",md:"sm",lg:"md"},be=({iconName:e,iconPosition:t="left",label:r,notificationCounterProps:a,showNotificationCounter:o,size:s="md",["data-testid"]:i="kibble-tab",...g})=>u.jsxRuntimeExports.jsxs(le,{className:"Tab","data-testid":i,...g,children:[!!e&&t==="left"&&u.jsxRuntimeExports.jsx(_.Icon,{className:"Tab__Icon","data-testid":`${i}-icon-left`,name:e,size:s}),u.jsxRuntimeExports.jsx(H.WrappedHeading,{as:"span",className:"Tab__Label",color:"inherit","data-testid":`${i}-label`,size:pe[s],children:r}),!!e&&t==="right"&&u.jsxRuntimeExports.jsx(_.Icon,{className:"Tab__Icon","data-testid":`${i}-icon-right`,name:e,size:s}),o&&u.jsxRuntimeExports.jsx(X.NotificationCounter,{className:"Tab__NotificationCounter","data-testid":`${i}-notification-counter`,...a,size:fe[s]})]}),ve=({align:e="start",onChange:t,scrollable:r=!1,size:a="md",tabs:o,tabsContent:s,["data-testid"]:i="kibble-tabs",...g})=>{const p=u.jsxRuntimeExports.jsx(ge,{className:"Tabs__List","data-testid":`${i}-trigger-list`,children:o.map((f,b)=>u.jsxRuntimeExports.jsx(be,{...f,"data-testid":`${i}-trigger-${f.value}`,size:a,...r&&{style:{flexShrink:0}}},`tab-${b}`))});return u.jsxRuntimeExports.jsxs(ue,{className:"Tabs","data-testid":i,justify:e||g.justify,size:a,onValueChange:({value:f})=>t?.(f),...g,children:[r?u.jsxRuntimeExports.jsx(z.Box,{overflowX:"auto",scrollbarWidth:"none",children:p}):p,!!s&&s.map((f,b)=>u.jsxRuntimeExports.jsx(de,{"data-testid":`${i}-content-${o[b].value}`,...f},`${i}-tabContent-${b}`))]})},me=["xs","sm","md","lg"],Te=["left","right"];exports.Tabs=ve;exports.tabIconPositions=Te;exports.tabSizes=me;
+//# sourceMappingURL=tab.types-C3Si454B.js.map