npm - @bitrise/bitkit-v2 - Versions diffs - 0.3.425 → 0.3.426 - Mend

@bitrise/bitkit-v2 0.3.425 → 0.3.426

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/components/BitkitMultiselect/BitkitMultiselect.js CHANGED Viewed

@@ -81,6 +81,8 @@ var MultiselectOverlay = ({ constrained, isValueInvalid, placeholder, size, stat
 var TagSlot = ({ children }) => /* @__PURE__ */ jsx(Box, {
 	"data-slot": "tag",
 	display: "inline-flex",
+	minWidth: "0",
+	maxWidth: "100%",
 	pointerEvents: "auto",
 	children
 });

package/dist/components/BitkitMultiselect/BitkitMultiselect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BitkitMultiselect.js","names":[],"sources":["../../../lib/components/BitkitMultiselect/BitkitMultiselect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { useControllableState } from '@chakra-ui/react/hooks';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitMultiselectMenu, {\n type BitkitMultiselectMenuItemProps,\n} from '../BitkitMultiselectMenu/BitkitMultiselectMenu';\nimport {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuScrollProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport BitkitTag from '../BitkitTag/BitkitTag';\n\nexport type BitkitMultiselectTriggerProps = SelectTriggerProps;\n\nexport type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' \| 'onChange' \| 'state'> & {\n children?: BitkitSelectMenuActionChild;\n constrained?: boolean;\n defaultValue?: Array<string>;\n isLoading?: boolean;\n /** Reddens the offending tags and errors the field, like BitkitTagsInput. Pair with `errorText`. /\n isValueInvalid?: (value: string) => boolean;\n items: Array<BitkitMultiselectMenuItemProps>;\n onValueChange?: (newVal: Array<string>) => void;\n placeholder?: string;\n disablePortal?: boolean;\n selectProps?: Omit<SelectRootProps, 'collection' \| 'defaultValue' \| 'multiple' \| 'onValueChange' \| 'value'>;\n size?: 'md' \| 'lg';\n state?: 'disabled' \| 'error' \| 'readOnly' \| 'warning';\n triggerProps?: BitkitMultiselectTriggerProps;\n value?: Array<string>;\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuScrollProps &\n BitkitSelectMenuEmptyStateProps;\n\ntype MultiselectState = BitkitMultiselectProps['state'];\n\nconst NON_INTERACTIVE_STATES: ReadonlyArray<MultiselectState> = ['disabled', 'readOnly', 'error', 'warning'];\n\n/* Whether the clear-all button should be rendered (and the overlay should reserve extra room for it). */\nconst shouldShowClearButton = (constrained: boolean, selectionCount: number, state: MultiselectState): boolean =>\n !constrained && selectionCount > 0 && !NON_INTERACTIVE_STATES.includes(state);\n\ntype MultiselectOverlayProps = {\n constrained: boolean;\n isValueInvalid?: (value: string) => boolean;\n placeholder?: string;\n size: 'md' \| 'lg';\n state?: MultiselectState;\n};\n\nconst MultiselectOverlay = ({ constrained, isValueInvalid, placeholder, size, state }: MultiselectOverlayProps) => {\n const select = useSelectContext();\n const recipe = useSlotRecipe({ key: 'multiselect' });\n const styles = recipe({ constrained, size });\n\n const selectedItems = select.selectedItems as Array<BitkitMultiselectMenuItemProps>;\n const selectedValues = select.value;\n const isDisabled = state === 'disabled';\n const isReadOnly = state === 'readOnly';\n const tagState = isDisabled ? 'disabled' : undefined;\n // Overlay reserves ~96px on the right when the clear-all is visible (to keep the chevron +\n // clear button out of the tag row), otherwise ~48px (chevron only). Using spacing tokens\n // because '80' (the minimum that fits both icons with gaps) isn't a valid token; '96' is\n // the next one up.\n const overlayPaddingEnd = shouldShowClearButton(constrained, selectedValues.length, state) ? '96' : '48';\n\n const resolvedPlaceholder = placeholder ?? (isReadOnly ? '(not selected)' : 'Select options');\n const canRemove = !isDisabled && !isReadOnly;\n\n const hasSelection = selectedValues.length > 0;\n\n const renderTags = () => {\n if (constrained) {\n return (\n <>\n {hasSelection && (\n <TagSlot>\n <BitkitTag\n size=\"sm\"\n colorVariant={selectedValues.some((v) => isValueInvalid?.(v)) ? 'red' : 'neutral'}\n labelText={String(selectedValues.length)}\n state={tagState}\n onRemove={canRemove ? () => select.clearValue() : undefined}\n />\n </TagSlot>\n )}\n <Text as=\"span\" css={styles.placeholderText} data-placeholder={hasSelection ? undefined : ''}>\n {resolvedPlaceholder}\n </Text>\n </>\n );\n }\n\n if (selectedItems.length === 0) {\n return (\n <Text as=\"span\" css={styles.placeholderText} data-placeholder=\"\">\n {resolvedPlaceholder}\n </Text>\n );\n }\n\n return selectedItems.map((item) => (\n <TagSlot key={item.value}>\n <BitkitTag\n size=\"sm\"\n colorVariant={isValueInvalid?.(item.value) ? 'red' : 'neutral'}\n labelText={item.label}\n state={tagState}\n onRemove={canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : undefined}\n />\n </TagSlot>\n ));\n };\n\n return (\n <Box css={styles.overlay} pointerEvents=\"none\" paddingInlineEnd={overlayPaddingEnd}>\n <Box css={styles.tagsBlock}>{renderTags()}</Box>\n </Box>\n );\n};\n\nconst TagSlot = ({ children }: { children: ReactNode }) => (\n <Box data-slot=\"tag\" display=\"inline-flex\" pointerEvents=\"auto\">\n {children}\n </Box>\n);\n\ntype ClearAllButtonProps = {\n state?: MultiselectState;\n};\n\nconst ClearAllButton = ({ state }: ClearAllButtonProps) => {\n const select = useSelectContext();\n\n // Constrained mode has its own inline clear-all on the counter tag; this is the non-constrained trigger-level clear.\n if (!shouldShowClearButton(false, select.value.length, state)) return null;\n\n return (\n <BitkitCloseButton size=\"sm\" colorVariant=\"neutral\" aria-label=\"Clear all\" onClick={() => select.clearValue()} />\n );\n};\n\nconst BitkitMultiselect = forwardRef<HTMLDivElement, BitkitMultiselectProps>((props, ref) => {\n const {\n children,\n constrained = false,\n defaultValue,\n emptyHelperText,\n emptyLabel,\n isLoading,\n isValueInvalid,\n items,\n onScrolledToBottom,\n onSearchChange,\n onValueChange,\n placeholder,\n disablePortal,\n searchValue,\n selectProps,\n size = 'lg',\n state,\n triggerProps,\n value,\n ...fieldProps\n } = props;\n\n const collection = createListCollection({\n items,\n groupBy: (item) => item.group \|\| '',\n isItemDisabled: (item) => !!item.disabled,\n });\n\n const recipe = useSlotRecipe({ key: 'multiselect' });\n const styles = recipe({ constrained, size });\n\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n const iconSize = size === 'lg' ? '24' : '16';\n\n const [currentValues, setCurrentValues] = useControllableState<Array<string>>({\n value,\n defaultValue: defaultValue ?? [],\n });\n const isInteractive = state !== 'disabled' && state !== 'readOnly';\n const hasInvalidValue = isInteractive && !!isValueInvalid && currentValues.some(isValueInvalid);\n const effectiveState = hasInvalidValue ? 'error' : state;\n const isInvalid = effectiveState === 'error' \|\| !!fieldProps.errorText;\n\n return (\n <BitkitField ref={ref} state={effectiveState} {...fieldProps}>\n <Select.Root\n collection={collection}\n multiple\n {...selectProps}\n defaultValue={defaultValue}\n disabled={effectiveState === 'disabled'}\n invalid={isInvalid}\n onValueChange={(details) => {\n setCurrentValues(details.value);\n onValueChange?.(details.value);\n }}\n readOnly={effectiveState === 'readOnly'}\n // Zag's default scrollIntoView gates on `isScrollable(contentEl)`. Our content is\n // overflow:hidden + flex column (so the sticky-bottom create row stays visible while\n // the inner itemList Box scrolls). That gate fails, so keyboard highlight never\n // scrolls the items into view. Providing scrollToIndexFn bypasses the gate and lets\n // the browser's native scrollIntoView walk up to the real scroll container (itemList).\n scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n value={value}\n >\n <Select.Control css={styles.control} className=\"group\">\n <Select.HiddenSelect />\n <Select.Trigger css={styles.trigger} {...triggerProps} />\n <MultiselectOverlay\n constrained={constrained}\n isValueInvalid={hasInvalidValue ? isValueInvalid : undefined}\n placeholder={placeholder}\n size={size}\n state={effectiveState}\n />\n <Select.IndicatorGroup css={styles.indicatorGroup}>\n {!constrained && <ClearAllButton state={effectiveState} />}\n {effectiveState === 'error' && (\n <Select.Indicator css={styles.indicator}>\n <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />\n </Select.Indicator>\n )}\n {effectiveState === 'warning' && (\n <Select.Indicator css={styles.indicator}>\n <IconWarningYellow size={iconSize} />\n </Select.Indicator>\n )}\n <Select.Indicator css={styles.indicator} asChild>\n <AssetSelectChevron />\n </Select.Indicator>\n </Select.IndicatorGroup>\n </Select.Control>\n <Portal disabled={disablePortal \|\| disablePortalFromContext}>\n <Select.Positioner>\n <BitkitMultiselectMenu\n collection={collection}\n emptyHelperText={emptyHelperText}\n emptyLabel={emptyLabel}\n isLoading={isLoading}\n onScrolledToBottom={onScrolledToBottom}\n onSearchChange={onSearchChange}\n searchValue={searchValue}\n size={size}\n >\n {children}\n </BitkitMultiselectMenu>\n </Select.Positioner>\n </Portal>\n </Select.Root>\n </BitkitField>\n );\n});\n\nBitkitMultiselect.displayName = 'BitkitMultiselect';\n\nexport default withSubComponents(BitkitMultiselect, { Action: BitkitSelectMenuAction });\n"],"mappings":"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"}
1	+ {"version":3,"file":"BitkitMultiselect.js","names":[],"sources":["../../../lib/components/BitkitMultiselect/BitkitMultiselect.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { createListCollection } from '@chakra-ui/react/collection';\nimport { useControllableState } from '@chakra-ui/react/hooks';\nimport { Portal } from '@chakra-ui/react/portal';\nimport { Select, type SelectRootProps, type SelectTriggerProps, useSelectContext } from '@chakra-ui/react/select';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { forwardRef, type ReactNode, useContext } from 'react';\n\nimport { IconErrorCircleFilled, IconWarningYellow } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitPortalContext from '../../utilities/BitkitPortalContext';\nimport { withSubComponents } from '../../utilities/withSubComponents';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitField, { type BitkitFieldProps } from '../BitkitField/BitkitField';\nimport BitkitMultiselectMenu, {\n type BitkitMultiselectMenuItemProps,\n} from '../BitkitMultiselectMenu/BitkitMultiselectMenu';\nimport {\n type BitkitSelectMenuEmptyStateProps,\n type BitkitSelectMenuScrollProps,\n type BitkitSelectMenuSearchProps,\n} from '../BitkitSelectMenu/BitkitSelectMenu';\nimport BitkitSelectMenuAction, { type BitkitSelectMenuActionChild } from '../BitkitSelectMenu/BitkitSelectMenuAction';\nimport BitkitTag from '../BitkitTag/BitkitTag';\n\nexport type BitkitMultiselectTriggerProps = SelectTriggerProps;\n\nexport type BitkitMultiselectProps = Omit<BitkitFieldProps, 'children' \| 'onChange' \| 'state'> & {\n children?: BitkitSelectMenuActionChild;\n constrained?: boolean;\n defaultValue?: Array<string>;\n isLoading?: boolean;\n /** Reddens the offending tags and errors the field, like BitkitTagsInput. Pair with `errorText`. /\n isValueInvalid?: (value: string) => boolean;\n items: Array<BitkitMultiselectMenuItemProps>;\n onValueChange?: (newVal: Array<string>) => void;\n placeholder?: string;\n disablePortal?: boolean;\n selectProps?: Omit<SelectRootProps, 'collection' \| 'defaultValue' \| 'multiple' \| 'onValueChange' \| 'value'>;\n size?: 'md' \| 'lg';\n state?: 'disabled' \| 'error' \| 'readOnly' \| 'warning';\n triggerProps?: BitkitMultiselectTriggerProps;\n value?: Array<string>;\n} & BitkitSelectMenuSearchProps &\n BitkitSelectMenuScrollProps &\n BitkitSelectMenuEmptyStateProps;\n\ntype MultiselectState = BitkitMultiselectProps['state'];\n\nconst NON_INTERACTIVE_STATES: ReadonlyArray<MultiselectState> = ['disabled', 'readOnly', 'error', 'warning'];\n\n/* Whether the clear-all button should be rendered (and the overlay should reserve extra room for it). */\nconst shouldShowClearButton = (constrained: boolean, selectionCount: number, state: MultiselectState): boolean =>\n !constrained && selectionCount > 0 && !NON_INTERACTIVE_STATES.includes(state);\n\ntype MultiselectOverlayProps = {\n constrained: boolean;\n isValueInvalid?: (value: string) => boolean;\n placeholder?: string;\n size: 'md' \| 'lg';\n state?: MultiselectState;\n};\n\nconst MultiselectOverlay = ({ constrained, isValueInvalid, placeholder, size, state }: MultiselectOverlayProps) => {\n const select = useSelectContext();\n const recipe = useSlotRecipe({ key: 'multiselect' });\n const styles = recipe({ constrained, size });\n\n const selectedItems = select.selectedItems as Array<BitkitMultiselectMenuItemProps>;\n const selectedValues = select.value;\n const isDisabled = state === 'disabled';\n const isReadOnly = state === 'readOnly';\n const tagState = isDisabled ? 'disabled' : undefined;\n // Overlay reserves ~96px on the right when the clear-all is visible (to keep the chevron +\n // clear button out of the tag row), otherwise ~48px (chevron only). Using spacing tokens\n // because '80' (the minimum that fits both icons with gaps) isn't a valid token; '96' is\n // the next one up.\n const overlayPaddingEnd = shouldShowClearButton(constrained, selectedValues.length, state) ? '96' : '48';\n\n const resolvedPlaceholder = placeholder ?? (isReadOnly ? '(not selected)' : 'Select options');\n const canRemove = !isDisabled && !isReadOnly;\n\n const hasSelection = selectedValues.length > 0;\n\n const renderTags = () => {\n if (constrained) {\n return (\n <>\n {hasSelection && (\n <TagSlot>\n <BitkitTag\n size=\"sm\"\n colorVariant={selectedValues.some((v) => isValueInvalid?.(v)) ? 'red' : 'neutral'}\n labelText={String(selectedValues.length)}\n state={tagState}\n onRemove={canRemove ? () => select.clearValue() : undefined}\n />\n </TagSlot>\n )}\n <Text as=\"span\" css={styles.placeholderText} data-placeholder={hasSelection ? undefined : ''}>\n {resolvedPlaceholder}\n </Text>\n </>\n );\n }\n\n if (selectedItems.length === 0) {\n return (\n <Text as=\"span\" css={styles.placeholderText} data-placeholder=\"\">\n {resolvedPlaceholder}\n </Text>\n );\n }\n\n return selectedItems.map((item) => (\n <TagSlot key={item.value}>\n <BitkitTag\n size=\"sm\"\n colorVariant={isValueInvalid?.(item.value) ? 'red' : 'neutral'}\n labelText={item.label}\n state={tagState}\n onRemove={canRemove ? () => select.setValue(selectedValues.filter((v) => v !== item.value)) : undefined}\n />\n </TagSlot>\n ));\n };\n\n return (\n <Box css={styles.overlay} pointerEvents=\"none\" paddingInlineEnd={overlayPaddingEnd}>\n <Box css={styles.tagsBlock}>{renderTags()}</Box>\n </Box>\n );\n};\n\n// minWidth=\"0\" keeps the slot shrinkable inside the wrapping tags row: without it the slot holds\n// the tag's min-content width, which is the whole label now that it no longer wraps, and a long\n// selection overflows the control instead of ellipsizing. maxWidth=\"100%\" caps the other direction:\n// a tag alone on its own wrapped line has no sibling to shrink against, so it needs the row as its\n// own ceiling.\nconst TagSlot = ({ children }: { children: ReactNode }) => (\n <Box data-slot=\"tag\" display=\"inline-flex\" minWidth=\"0\" maxWidth=\"100%\" pointerEvents=\"auto\">\n {children}\n </Box>\n);\n\ntype ClearAllButtonProps = {\n state?: MultiselectState;\n};\n\nconst ClearAllButton = ({ state }: ClearAllButtonProps) => {\n const select = useSelectContext();\n\n // Constrained mode has its own inline clear-all on the counter tag; this is the non-constrained trigger-level clear.\n if (!shouldShowClearButton(false, select.value.length, state)) return null;\n\n return (\n <BitkitCloseButton size=\"sm\" colorVariant=\"neutral\" aria-label=\"Clear all\" onClick={() => select.clearValue()} />\n );\n};\n\nconst BitkitMultiselect = forwardRef<HTMLDivElement, BitkitMultiselectProps>((props, ref) => {\n const {\n children,\n constrained = false,\n defaultValue,\n emptyHelperText,\n emptyLabel,\n isLoading,\n isValueInvalid,\n items,\n onScrolledToBottom,\n onSearchChange,\n onValueChange,\n placeholder,\n disablePortal,\n searchValue,\n selectProps,\n size = 'lg',\n state,\n triggerProps,\n value,\n ...fieldProps\n } = props;\n\n const collection = createListCollection({\n items,\n groupBy: (item) => item.group \|\| '',\n isItemDisabled: (item) => !!item.disabled,\n });\n\n const recipe = useSlotRecipe({ key: 'multiselect' });\n const styles = recipe({ constrained, size });\n\n const { disablePortal: disablePortalFromContext } = useContext(BitkitPortalContext);\n const iconSize = size === 'lg' ? '24' : '16';\n\n const [currentValues, setCurrentValues] = useControllableState<Array<string>>({\n value,\n defaultValue: defaultValue ?? [],\n });\n const isInteractive = state !== 'disabled' && state !== 'readOnly';\n const hasInvalidValue = isInteractive && !!isValueInvalid && currentValues.some(isValueInvalid);\n const effectiveState = hasInvalidValue ? 'error' : state;\n const isInvalid = effectiveState === 'error' \|\| !!fieldProps.errorText;\n\n return (\n <BitkitField ref={ref} state={effectiveState} {...fieldProps}>\n <Select.Root\n collection={collection}\n multiple\n {...selectProps}\n defaultValue={defaultValue}\n disabled={effectiveState === 'disabled'}\n invalid={isInvalid}\n onValueChange={(details) => {\n setCurrentValues(details.value);\n onValueChange?.(details.value);\n }}\n readOnly={effectiveState === 'readOnly'}\n // Zag's default scrollIntoView gates on `isScrollable(contentEl)`. Our content is\n // overflow:hidden + flex column (so the sticky-bottom create row stays visible while\n // the inner itemList Box scrolls). That gate fails, so keyboard highlight never\n // scrolls the items into view. Providing scrollToIndexFn bypasses the gate and lets\n // the browser's native scrollIntoView walk up to the real scroll container (itemList).\n scrollToIndexFn={({ getElement }) => getElement()?.scrollIntoView({ block: 'nearest' })}\n value={value}\n >\n <Select.Control css={styles.control} className=\"group\">\n <Select.HiddenSelect />\n <Select.Trigger css={styles.trigger} {...triggerProps} />\n <MultiselectOverlay\n constrained={constrained}\n isValueInvalid={hasInvalidValue ? isValueInvalid : undefined}\n placeholder={placeholder}\n size={size}\n state={effectiveState}\n />\n <Select.IndicatorGroup css={styles.indicatorGroup}>\n {!constrained && <ClearAllButton state={effectiveState} />}\n {effectiveState === 'error' && (\n <Select.Indicator css={styles.indicator}>\n <IconErrorCircleFilled size={iconSize} color=\"icon/negative\" />\n </Select.Indicator>\n )}\n {effectiveState === 'warning' && (\n <Select.Indicator css={styles.indicator}>\n <IconWarningYellow size={iconSize} />\n </Select.Indicator>\n )}\n <Select.Indicator css={styles.indicator} asChild>\n <AssetSelectChevron />\n </Select.Indicator>\n </Select.IndicatorGroup>\n </Select.Control>\n <Portal disabled={disablePortal \|\| disablePortalFromContext}>\n <Select.Positioner>\n <BitkitMultiselectMenu\n collection={collection}\n emptyHelperText={emptyHelperText}\n emptyLabel={emptyLabel}\n isLoading={isLoading}\n onScrolledToBottom={onScrolledToBottom}\n onSearchChange={onSearchChange}\n searchValue={searchValue}\n size={size}\n >\n {children}\n </BitkitMultiselectMenu>\n </Select.Positioner>\n </Portal>\n </Select.Root>\n </BitkitField>\n );\n});\n\nBitkitMultiselect.displayName = 'BitkitMultiselect';\n\nexport default withSubComponents(BitkitMultiselect, { Action: BitkitSelectMenuAction });\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkDA,IAAM,yBAA0D;CAAC;CAAY;CAAY;CAAS;AAAS;;AAG3G,IAAM,yBAAyB,aAAsB,gBAAwB,UAC3E,CAAC,eAAe,iBAAiB,KAAK,CAAC,uBAAuB,SAAS,KAAK;AAU9E,IAAM,sBAAsB,EAAE,aAAa,gBAAgB,aAAa,MAAM,YAAqC;CACjH,MAAM,SAAS,iBAAiB;CAEhC,MAAM,SADS,cAAc,EAAE,KAAK,cAAc,CACnC,CAAA,CAAO;EAAE;EAAa;CAAK,CAAC;CAE3C,MAAM,gBAAgB,OAAO;CAC7B,MAAM,iBAAiB,OAAO;CAC9B,MAAM,aAAa,UAAU;CAC7B,MAAM,aAAa,UAAU;CAC7B,MAAM,WAAW,aAAa,aAAa,KAAA;CAK3C,MAAM,oBAAoB,sBAAsB,aAAa,eAAe,QAAQ,KAAK,IAAI,OAAO;CAEpG,MAAM,sBAAsB,gBAAgB,aAAa,mBAAmB;CAC5E,MAAM,YAAY,CAAC,cAAc,CAAC;CAElC,MAAM,eAAe,eAAe,SAAS;CAE7C,MAAM,mBAAmB;EACvB,IAAI,aACF,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,gBACC,oBAAC,SAAD,EAAA,UACE,oBAAC,WAAD;GACE,MAAK;GACL,cAAc,eAAe,MAAM,MAAM,iBAAiB,CAAC,CAAC,IAAI,QAAQ;GACxE,WAAW,OAAO,eAAe,MAAM;GACvC,OAAO;GACP,UAAU,kBAAkB,OAAO,WAAW,IAAI,KAAA;EACnD,CAAA,EACM,CAAA,GAEX,oBAAC,MAAD;GAAM,IAAG;GAAO,KAAK,OAAO;GAAiB,oBAAkB,eAAe,KAAA,IAAY;GACvF,UAAA;EACG,CAAA,CACN,EAAA,CAAA;EAIN,IAAI,cAAc,WAAW,GAC3B,OACE,oBAAC,MAAD;GAAM,IAAG;GAAO,KAAK,OAAO;GAAiB,oBAAiB;GAC3D,UAAA;EACG,CAAA;EAIV,OAAO,cAAc,KAAK,SACxB,oBAAC,SAAD,EAAA,UACE,oBAAC,WAAD;GACE,MAAK;GACL,cAAc,iBAAiB,KAAK,KAAK,IAAI,QAAQ;GACrD,WAAW,KAAK;GAChB,OAAO;GACP,UAAU,kBAAkB,OAAO,SAAS,eAAe,QAAQ,MAAM,MAAM,KAAK,KAAK,CAAC,IAAI,KAAA;EAC/F,CAAA,EACM,GARK,KAAK,KAQV,CACV;CACH;CAEA,OACE,oBAAC,KAAD;EAAK,KAAK,OAAO;EAAS,eAAc;EAAO,kBAAkB;EAC/D,UAAA,oBAAC,KAAD;GAAK,KAAK,OAAO;GAAY,UAAA,WAAW;EAAO,CAAA;CAC5C,CAAA;AAET;AAOA,IAAM,WAAW,EAAE,eACjB,oBAAC,KAAD;CAAK,aAAU;CAAM,SAAQ;CAAc,UAAS;CAAI,UAAS;CAAO,eAAc;CACnF;AACE,CAAA;AAOP,IAAM,kBAAkB,EAAE,YAAiC;CACzD,MAAM,SAAS,iBAAiB;CAGhC,IAAI,CAAC,sBAAsB,OAAO,OAAO,MAAM,QAAQ,KAAK,GAAG,OAAO;CAEtE,OACE,oBAAC,mBAAD;EAAmB,MAAK;EAAK,cAAa;EAAU,cAAW;EAAY,eAAe,OAAO,WAAW;CAAI,CAAA;AAEpH;AAEA,IAAM,oBAAoB,YAAoD,OAAO,QAAQ;CAC3F,MAAM,EACJ,UACA,cAAc,OACd,cACA,iBACA,YACA,WACA,gBACA,OACA,oBACA,gBACA,eACA,aACA,eACA,aACA,aACA,OAAO,MACP,OACA,cACA,OACA,GAAG,eACD;CAEJ,MAAM,aAAa,qBAAqB;EACtC;EACA,UAAU,SAAS,KAAK,SAAS;EACjC,iBAAiB,SAAS,CAAC,CAAC,KAAK;CACnC,CAAC;CAGD,MAAM,SADS,cAAc,EAAE,KAAK,cAAc,CACnC,CAAA,CAAO;EAAE;EAAa;CAAK,CAAC;CAE3C,MAAM,EAAE,eAAe,6BAA6B,WAAW,mBAAmB;CAClF,MAAM,WAAW,SAAS,OAAO,OAAO;CAExC,MAAM,CAAC,eAAe,oBAAoB,qBAAoC;EAC5E;EACA,cAAc,gBAAgB,CAAC;CACjC,CAAC;CAED,MAAM,kBADgB,UAAU,cAAc,UAAU,cACf,CAAC,CAAC,kBAAkB,cAAc,KAAK,cAAc;CAC9F,MAAM,iBAAiB,kBAAkB,UAAU;CACnD,MAAM,YAAY,mBAAmB,WAAW,CAAC,CAAC,WAAW;CAE7D,OACE,oBAAC,aAAD;EAAkB;EAAK,OAAO;EAAgB,GAAI;EAChD,UAAA,qBAAC,OAAO,MAAR;GACc;GACZ,UAAA;GACA,GAAI;GACU;GACd,UAAU,mBAAmB;GAC7B,SAAS;GACT,gBAAgB,YAAY;IAC1B,iBAAiB,QAAQ,KAAK;IAC9B,gBAAgB,QAAQ,KAAK;GAC/B;GACA,UAAU,mBAAmB;GAM7B,kBAAkB,EAAE,iBAAiB,WAAW,CAAC,EAAE,eAAe,EAAE,OAAO,UAAU,CAAC;GAC/E;GAlBT,UAAA,CAoBE,qBAAC,OAAO,SAAR;IAAgB,KAAK,OAAO;IAAS,WAAU;IAA/C,UAAA;KACE,oBAAC,OAAO,cAAR,CAAsB,CAAA;KACtB,oBAAC,OAAO,SAAR;MAAgB,KAAK,OAAO;MAAS,GAAI;KAAe,CAAA;KACxD,oBAAC,oBAAD;MACe;MACb,gBAAgB,kBAAkB,iBAAiB,KAAA;MACtC;MACP;MACN,OAAO;KACR,CAAA;KACD,qBAAC,OAAO,gBAAR;MAAuB,KAAK,OAAO;MAAnC,UAAA;OACG,CAAC,eAAe,oBAAC,gBAAD,EAAgB,OAAO,eAAiB,CAAA;OACxD,mBAAmB,WAClB,oBAAC,OAAO,WAAR;QAAkB,KAAK,OAAO;QAC5B,UAAA,oBAAC,uBAAD;SAAuB,MAAM;SAAU,OAAM;QAAiB,CAAA;OAC9C,CAAA;OAEnB,mBAAmB,aAClB,oBAAC,OAAO,WAAR;QAAkB,KAAK,OAAO;QAC5B,UAAA,oBAAC,mBAAD,EAAmB,MAAM,SAAW,CAAA;OACpB,CAAA;OAEpB,oBAAC,OAAO,WAAR;QAAkB,KAAK,OAAO;QAAW,SAAA;QACvC,UAAA,oBAAC,oBAAD,CAAqB,CAAA;OACL,CAAA;MACG;;IACT;GAChB,CAAA,GAAA,oBAAC,QAAD;IAAQ,UAAU,iBAAiB;IACjC,UAAA,oBAAC,OAAO,YAAR,EAAA,UACE,oBAAC,uBAAD;KACc;KACK;KACL;KACD;KACS;KACJ;KACH;KACP;KAEL;IACoB,CAAA,EACN,CAAA;GACb,CAAA,CACG;;CACF,CAAA;AAEjB,CAAC;AAED,kBAAkB,cAAc;AAEhC,IAAA,4BAAe,kBAAkB,mBAAmB,EAAE,QAAQ,uBAAuB,CAAC"}

package/dist/components/BitkitTag/BitkitTag.js CHANGED Viewed

@@ -20,6 +20,7 @@ var BitkitTag = (props) => {
 				height: isSkeleton ? "8" : void 0,
 				overflow: "hidden",
 				borderRadius: "0",
+				minWidth: "0",
 				children: /* @__PURE__ */ jsx(Tag.Label, { children: labelText })
 			}),
 			!!onRemove && /* @__PURE__ */ jsx(Tag.EndElement, {

package/dist/components/BitkitTag/BitkitTag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BitkitTag.js","names":[],"sources":["../../../lib/components/BitkitTag/BitkitTag.tsx"],"sourcesContent":["import { Skeleton } from '@chakra-ui/react/skeleton';\nimport { Tag, type TagRootProps } from '@chakra-ui/react/tag';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\nexport interface BitkitTagProps extends TagRootProps {\n icon?: BitkitIconComponent;\n labelText: string;\n onRemove?: () => void;\n state?: 'disabled' \| 'skeleton';\n}\n\nconst BitkitTag = (props: BitkitTagProps) => {\n const { labelText, icon: Icon, onRemove, state, ...rest } = props;\n const isSkeleton = state === 'skeleton';\n const isDisabled = !!rest.disabled \|\| state === 'disabled';\n return (\n <Tag.Root {...rest} disabled={isDisabled}>\n {!!Icon && (\n <Tag.StartElement asChild>\n <Icon size=\"16\" />\n </Tag.StartElement>\n )}\n <Skeleton loading={isSkeleton} height={isSkeleton ? '8' : undefined} overflow=\"hidden\" borderRadius=\"0\">\n <Tag.Label>{labelText}</Tag.Label>\n </Skeleton>\n {!!onRemove && (\n <Tag.EndElement asChild>\n <BitkitCloseButton\n disabled={isDisabled \|\| isSkeleton}\n size=\"xs\"\n aria-label=\"Remove\"\n colorVariant={rest.colorVariant}\n onClick={onRemove}\n />\n </Tag.EndElement>\n )}\n </Tag.Root>\n );\n};\n\nexport default BitkitTag;\n"],"mappings":";;;;;AAaA,IAAM,aAAa,UAA0B;CAC3C,MAAM,EAAE,WAAW,MAAM,MAAM,UAAU,OAAO,GAAG,SAAS;CAC5D,MAAM,aAAa,UAAU;CAC7B,MAAM,aAAa,CAAC,CAAC,KAAK,YAAY,UAAU;CAChD,OACE,qBAAC,IAAI,MAAL;EAAU,GAAI;EAAM,UAAU;EAA9B,UAAA;GACG,CAAC,CAAC,QACD,oBAAC,IAAI,cAAL;IAAkB,SAAA;IAChB,UAAA,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA;GACD,CAAA;~~GAEpB~~,oBAAC,UAAD;~~IAAU~~,SAAS;~~IAAY~~,QAAQ,aAAa,MAAM,KAAA;~~IAAW~~,UAAS;~~IAAS~~,cAAa;~~IAClG~~,UAAA,oBAAC,IAAI,OAAL,EAAA,UAAY,UAAqB,CAAA;GACzB,CAAA;GACT,CAAC,CAAC,YACD,oBAAC,IAAI,YAAL;IAAgB,SAAA;IACd,UAAA,oBAAC,mBAAD;KACE,UAAU,cAAc;KACxB,MAAK;KACL,cAAW;KACX,cAAc,KAAK;KACnB,SAAS;IACV,CAAA;GACa,CAAA;EAEV;;AAEd"}
1	+ {"version":3,"file":"BitkitTag.js","names":[],"sources":["../../../lib/components/BitkitTag/BitkitTag.tsx"],"sourcesContent":["import { Skeleton } from '@chakra-ui/react/skeleton';\nimport { Tag, type TagRootProps } from '@chakra-ui/react/tag';\n\nimport { type BitkitIconComponent } from '../../icons';\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\n\nexport interface BitkitTagProps extends TagRootProps {\n icon?: BitkitIconComponent;\n labelText: string;\n onRemove?: () => void;\n state?: 'disabled' \| 'skeleton';\n}\n\nconst BitkitTag = (props: BitkitTagProps) => {\n const { labelText, icon: Icon, onRemove, state, ...rest } = props;\n const isSkeleton = state === 'skeleton';\n const isDisabled = !!rest.disabled \|\| state === 'disabled';\n return (\n <Tag.Root {...rest} disabled={isDisabled}>\n {!!Icon && (\n <Tag.StartElement asChild>\n <Icon size=\"16\" />\n </Tag.StartElement>\n )}\n {/* minWidth=\"0\" lets this flex child shrink past its text so the label's ellipsis can kick in. */}\n <Skeleton\n loading={isSkeleton}\n height={isSkeleton ? '8' : undefined}\n overflow=\"hidden\"\n borderRadius=\"0\"\n minWidth=\"0\"\n >\n <Tag.Label>{labelText}</Tag.Label>\n </Skeleton>\n {!!onRemove && (\n <Tag.EndElement asChild>\n <BitkitCloseButton\n disabled={isDisabled \|\| isSkeleton}\n size=\"xs\"\n aria-label=\"Remove\"\n colorVariant={rest.colorVariant}\n onClick={onRemove}\n />\n </Tag.EndElement>\n )}\n </Tag.Root>\n );\n};\n\nexport default BitkitTag;\n"],"mappings":";;;;;AAaA,IAAM,aAAa,UAA0B;CAC3C,MAAM,EAAE,WAAW,MAAM,MAAM,UAAU,OAAO,GAAG,SAAS;CAC5D,MAAM,aAAa,UAAU;CAC7B,MAAM,aAAa,CAAC,CAAC,KAAK,YAAY,UAAU;CAChD,OACE,qBAAC,IAAI,MAAL;EAAU,GAAI;EAAM,UAAU;EAA9B,UAAA;GACG,CAAC,CAAC,QACD,oBAAC,IAAI,cAAL;IAAkB,SAAA;IAChB,UAAA,oBAAC,MAAD,EAAM,MAAK,KAAM,CAAA;GACD,CAAA;GAGpB,oBAAC,UAAD;IACE,SAAS;IACT,QAAQ,aAAa,MAAM,KAAA;IAC3B,UAAS;IACT,cAAa;IACb,UAAS;IAET,UAAA,oBAAC,IAAI,OAAL,EAAA,UAAY,UAAqB,CAAA;GACzB,CAAA;GACT,CAAC,CAAC,YACD,oBAAC,IAAI,YAAL;IAAgB,SAAA;IACd,UAAA,oBAAC,mBAAD;KACE,UAAU,cAAc;KACxB,MAAK;KACL,cAAW;KACX,cAAc,KAAK;KACnB,SAAS;IACV,CAAA;GACa,CAAA;EAEV;;AAEd"}

package/dist/theme/slot-recipes/Tag.recipe.js CHANGED Viewed

@@ -5,13 +5,21 @@ import { tagAnatomy } from "@chakra-ui/react/anatomy";
 var tagSlotRecipe = defineSlotRecipe({
 	className: "tag",
 	slots: tagAnatomy.keys(),
-	base: { root: {
-		borderRadius: "4",
-		border: "1px solid",
-		display: "inline-flex",
-		alignItems: "center",
-		overflow: "hidden"
-	} },
+	base: {
+		root: {
+			borderRadius: "4",
+			border: "1px solid",
+			display: "inline-flex",
+			alignItems: "center",
+			overflow: "hidden",
+			maxWidth: "100%"
+		},
+		label: {
+			display: "block",
+			minWidth: 0,
+			truncate: true
+		}
+	},
 	compoundVariants: [{
 		colorVariant: "neutral",
 		disabled: false,

package/dist/theme/slot-recipes/Tag.recipe.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Tag.recipe.ts"],"sourcesContent":["import { tagAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst tagSlotRecipe = defineSlotRecipe({\n className: 'tag',\n slots: tagAnatomy.keys(),\n base: {\n root: {\n borderRadius: '4',\n border: '1px solid',\n display: 'inline-flex',\n alignItems: 'center',\n overflow: 'hidden',\n },\n },\n compoundVariants: [\n {\n colorVariant: 'neutral',\n disabled: false,\n css: {\n root: {\n color: 'text/primary',\n },\n },\n },\n ],\n variants: {\n // The close button in endElement hovers to `subtle` in its own recipe, which is exactly the\n // tag's background, so each palette re-points its hover one step darker.\n colorVariant: {\n neutral: {\n root: {\n backgroundColor: 'color/neutral/subtle',\n borderColor: 'color/neutral/muted',\n color: 'color/neutral/strong',\n },\n endElement: { _hover: { backgroundColor: 'color/neutral/moderate' } },\n },\n blue: {\n root: { backgroundColor: 'color/blue/subtle', borderColor: 'color/blue/muted', color: 'color/blue/strong' },\n endElement: { _hover: { backgroundColor: 'color/blue/moderate' } },\n },\n green: {\n root: { backgroundColor: 'color/green/subtle', borderColor: 'color/green/muted', color: 'color/green/strong' },\n endElement: { _hover: { backgroundColor: 'color/green/moderate' } },\n },\n red: {\n root: { backgroundColor: 'color/red/subtle', borderColor: 'color/red/muted', color: 'color/red/strong' },\n endElement: { _hover: { backgroundColor: 'color/red/moderate' } },\n },\n yellow: {\n root: {\n backgroundColor: 'color/yellow/subtle',\n borderColor: 'color/yellow/muted',\n color: 'color/yellow/strong',\n },\n endElement: { _hover: { backgroundColor: 'color/yellow/moderate' } },\n },\n purple: {\n root: {\n backgroundColor: 'color/purple/subtle',\n borderColor: 'color/purple/muted',\n color: 'color/purple/strong',\n },\n endElement: { _hover: { backgroundColor: 'color/purple/moderate' } },\n },\n },\n disabled: {\n true: {\n root: {\n backgroundColor: 'background/disabled',\n borderColor: 'border/disabled',\n color: 'text/on-disabled',\n },\n },\n false: {},\n },\n size: {\n sm: {\n root: {\n height: '24',\n paddingInline: '4',\n '&:has(button)': {\n paddingInlineEnd: '1',\n },\n },\n label: {\n paddingInline: '4',\n textStyle: 'comp/tag/sm',\n },\n endElement: {\n width: '20',\n height: '20',\n },\n },\n md: {\n root: {\n height: '32',\n paddingInline: '6',\n '&:has(button)': {\n paddingInlineEnd: rem(3),\n },\n },\n startElement: {\n marginInlineEnd: '-2px',\n },\n label: {\n paddingInline: '6',\n textStyle: 'comp/tag/md',\n },\n },\n },\n },\n defaultVariants: {\n colorVariant: 'neutral',\n size: 'md',\n },\n});\n\nexport default tagSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,gBAAgB,iBAAiB;CACrC,WAAW;CACX,OAAO,WAAW,KAAK;CACvB,MAAM,EACJ,MAAM;~~EACJ~~,cAAc;~~EACd~~,QAAQ;~~EACR~~,SAAS;~~EACT~~,YAAY;EACZ,UAAU;~~CACZ~~,~~EACF~~;CACA,kBAAkB,CAChB;EACE,cAAc;EACd,UAAU;EACV,KAAK,EACH,MAAM,EACJ,OAAO,eACT,EACF;CACF,CACF;CACA,UAAU;EAGR,cAAc;GACZ,SAAS;IACP,MAAM;KACJ,iBAAiB;KACjB,aAAa;KACb,OAAO;IACT;IACA,YAAY,EAAE,QAAQ,EAAE,iBAAiB,yBAAyB,EAAE;GACtE;GACA,MAAM;IACJ,MAAM;KAAE,iBAAiB;KAAqB,aAAa;KAAoB,OAAO;IAAoB;IAC1G,YAAY,EAAE,QAAQ,EAAE,iBAAiB,sBAAsB,EAAE;GACnE;GACA,OAAO;IACL,MAAM;KAAE,iBAAiB;KAAsB,aAAa;KAAqB,OAAO;IAAqB;IAC7G,YAAY,EAAE,QAAQ,EAAE,iBAAiB,uBAAuB,EAAE;GACpE;GACA,KAAK;IACH,MAAM;KAAE,iBAAiB;KAAoB,aAAa;KAAmB,OAAO;IAAmB;IACvG,YAAY,EAAE,QAAQ,EAAE,iBAAiB,qBAAqB,EAAE;GAClE;GACA,QAAQ;IACN,MAAM;KACJ,iBAAiB;KACjB,aAAa;KACb,OAAO;IACT;IACA,YAAY,EAAE,QAAQ,EAAE,iBAAiB,wBAAwB,EAAE;GACrE;GACA,QAAQ;IACN,MAAM;KACJ,iBAAiB;KACjB,aAAa;KACb,OAAO;IACT;IACA,YAAY,EAAE,QAAQ,EAAE,iBAAiB,wBAAwB,EAAE;GACrE;EACF;EACA,UAAU;GACR,MAAM,EACJ,MAAM;IACJ,iBAAiB;IACjB,aAAa;IACb,OAAO;GACT,EACF;GACA,OAAO,CAAC;EACV;EACA,MAAM;GACJ,IAAI;IACF,MAAM;KACJ,QAAQ;KACR,eAAe;KACf,iBAAiB,EACf,kBAAkB,IACpB;IACF;IACA,OAAO;KACL,eAAe;KACf,WAAW;IACb;IACA,YAAY;KACV,OAAO;KACP,QAAQ;IACV;GACF;GACA,IAAI;IACF,MAAM;KACJ,QAAQ;KACR,eAAe;KACf,iBAAiB,EACf,kBAAkB,IAAI,CAAC,EACzB;IACF;IACA,cAAc,EACZ,iBAAiB,OACnB;IACA,OAAO;KACL,eAAe;KACf,WAAW;IACb;GACF;EACF;CACF;CACA,iBAAiB;EACf,cAAc;EACd,MAAM;CACR;AACF,CAAC"}
1	+ {"version":3,"file":"Tag.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Tag.recipe.ts"],"sourcesContent":["import { tagAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { rem } from '../themeUtils';\n\nconst tagSlotRecipe = defineSlotRecipe({\n className: 'tag',\n slots: tagAnatomy.keys(),\n base: {\n root: {\n borderRadius: '4',\n border: '1px solid',\n display: 'inline-flex',\n alignItems: 'center',\n overflow: 'hidden',\n maxWidth: '100%',\n },\n // The root has a fixed height, so a label that wraps gets cut off mid-line instead of growing\n // the tag. Keep it on one line and let it end in an ellipsis. `truncate` sets no `display`, and\n // only `block` takes the width the flex parent shrank the label to (see Breadcrumb.recipe.ts);\n // `minWidth` is what allows that shrink in the first place.\n label: {\n display: 'block',\n minWidth: 0,\n truncate: true,\n },\n },\n compoundVariants: [\n {\n colorVariant: 'neutral',\n disabled: false,\n css: {\n root: {\n color: 'text/primary',\n },\n },\n },\n ],\n variants: {\n // The close button in endElement hovers to `subtle` in its own recipe, which is exactly the\n // tag's background, so each palette re-points its hover one step darker.\n colorVariant: {\n neutral: {\n root: {\n backgroundColor: 'color/neutral/subtle',\n borderColor: 'color/neutral/muted',\n color: 'color/neutral/strong',\n },\n endElement: { _hover: { backgroundColor: 'color/neutral/moderate' } },\n },\n blue: {\n root: { backgroundColor: 'color/blue/subtle', borderColor: 'color/blue/muted', color: 'color/blue/strong' },\n endElement: { _hover: { backgroundColor: 'color/blue/moderate' } },\n },\n green: {\n root: { backgroundColor: 'color/green/subtle', borderColor: 'color/green/muted', color: 'color/green/strong' },\n endElement: { _hover: { backgroundColor: 'color/green/moderate' } },\n },\n red: {\n root: { backgroundColor: 'color/red/subtle', borderColor: 'color/red/muted', color: 'color/red/strong' },\n endElement: { _hover: { backgroundColor: 'color/red/moderate' } },\n },\n yellow: {\n root: {\n backgroundColor: 'color/yellow/subtle',\n borderColor: 'color/yellow/muted',\n color: 'color/yellow/strong',\n },\n endElement: { _hover: { backgroundColor: 'color/yellow/moderate' } },\n },\n purple: {\n root: {\n backgroundColor: 'color/purple/subtle',\n borderColor: 'color/purple/muted',\n color: 'color/purple/strong',\n },\n endElement: { _hover: { backgroundColor: 'color/purple/moderate' } },\n },\n },\n disabled: {\n true: {\n root: {\n backgroundColor: 'background/disabled',\n borderColor: 'border/disabled',\n color: 'text/on-disabled',\n },\n },\n false: {},\n },\n size: {\n sm: {\n root: {\n height: '24',\n paddingInline: '4',\n '&:has(button)': {\n paddingInlineEnd: '1',\n },\n },\n label: {\n paddingInline: '4',\n textStyle: 'comp/tag/sm',\n },\n endElement: {\n width: '20',\n height: '20',\n },\n },\n md: {\n root: {\n height: '32',\n paddingInline: '6',\n '&:has(button)': {\n paddingInlineEnd: rem(3),\n },\n },\n startElement: {\n marginInlineEnd: '-2px',\n },\n label: {\n paddingInline: '6',\n textStyle: 'comp/tag/md',\n },\n },\n },\n },\n defaultVariants: {\n colorVariant: 'neutral',\n size: 'md',\n },\n});\n\nexport default tagSlotRecipe;\n"],"mappings":";;;;AAKA,IAAM,gBAAgB,iBAAiB;CACrC,WAAW;CACX,OAAO,WAAW,KAAK;CACvB,MAAM;EACJ,MAAM;GACJ,cAAc;GACd,QAAQ;GACR,SAAS;GACT,YAAY;GACZ,UAAU;GACV,UAAU;EACZ;EAKA,OAAO;GACL,SAAS;GACT,UAAU;GACV,UAAU;EACZ;CACF;CACA,kBAAkB,CAChB;EACE,cAAc;EACd,UAAU;EACV,KAAK,EACH,MAAM,EACJ,OAAO,eACT,EACF;CACF,CACF;CACA,UAAU;EAGR,cAAc;GACZ,SAAS;IACP,MAAM;KACJ,iBAAiB;KACjB,aAAa;KACb,OAAO;IACT;IACA,YAAY,EAAE,QAAQ,EAAE,iBAAiB,yBAAyB,EAAE;GACtE;GACA,MAAM;IACJ,MAAM;KAAE,iBAAiB;KAAqB,aAAa;KAAoB,OAAO;IAAoB;IAC1G,YAAY,EAAE,QAAQ,EAAE,iBAAiB,sBAAsB,EAAE;GACnE;GACA,OAAO;IACL,MAAM;KAAE,iBAAiB;KAAsB,aAAa;KAAqB,OAAO;IAAqB;IAC7G,YAAY,EAAE,QAAQ,EAAE,iBAAiB,uBAAuB,EAAE;GACpE;GACA,KAAK;IACH,MAAM;KAAE,iBAAiB;KAAoB,aAAa;KAAmB,OAAO;IAAmB;IACvG,YAAY,EAAE,QAAQ,EAAE,iBAAiB,qBAAqB,EAAE;GAClE;GACA,QAAQ;IACN,MAAM;KACJ,iBAAiB;KACjB,aAAa;KACb,OAAO;IACT;IACA,YAAY,EAAE,QAAQ,EAAE,iBAAiB,wBAAwB,EAAE;GACrE;GACA,QAAQ;IACN,MAAM;KACJ,iBAAiB;KACjB,aAAa;KACb,OAAO;IACT;IACA,YAAY,EAAE,QAAQ,EAAE,iBAAiB,wBAAwB,EAAE;GACrE;EACF;EACA,UAAU;GACR,MAAM,EACJ,MAAM;IACJ,iBAAiB;IACjB,aAAa;IACb,OAAO;GACT,EACF;GACA,OAAO,CAAC;EACV;EACA,MAAM;GACJ,IAAI;IACF,MAAM;KACJ,QAAQ;KACR,eAAe;KACf,iBAAiB,EACf,kBAAkB,IACpB;IACF;IACA,OAAO;KACL,eAAe;KACf,WAAW;IACb;IACA,YAAY;KACV,OAAO;KACP,QAAQ;IACV;GACF;GACA,IAAI;IACF,MAAM;KACJ,QAAQ;KACR,eAAe;KACf,iBAAiB,EACf,kBAAkB,IAAI,CAAC,EACzB;IACF;IACA,cAAc,EACZ,iBAAiB,OACnB;IACA,OAAO;KACL,eAAe;KACf,WAAW;IACb;GACF;EACF;CACF;CACA,iBAAiB;EACf,cAAc;EACd,MAAM;CACR;AACF,CAAC"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.425",
+  "version": "0.3.426",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",