@primer/components 32.0.1-rc.c4c2c50a → 32.1.0

package/lib/TextInputWithTokens.jsx

@@ -1,218 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const props_1 = require("@styled-system/props");
-const focusZone_1 = require("./behaviors/focusZone");
-const useCombinedRefs_1 = require("./hooks/useCombinedRefs");
-const useFocusZone_1 = require("./hooks/useFocusZone");
-const Token_1 = __importDefault(require("./Token/Token"));
-const hooks_1 = require("./hooks");
-const _UnstyledTextInput_1 = __importDefault(require("./_UnstyledTextInput"));
-const _TextInputWrapper_1 = __importDefault(require("./_TextInputWrapper"));
-const Box_1 = __importDefault(require("./Box"));
-const Text_1 = __importDefault(require("./Text"));
-const iterateFocusableElements_1 = require("./utils/iterateFocusableElements");
-const overflowCountFontSizeMap = {
-    small: 0,
-    medium: 1,
-    large: 1,
-    extralarge: 2
-};
-// using forwardRef is important so that other components (ex. Autocomplete) can use the ref
-function TextInputWithTokensInnerComponent({ icon: IconComponent, contrast, className, block, disabled, theme, sx: sxProp, tokens, onTokenRemove, tokenComponent: TokenComponent, preventTokenWrapping, size, hideTokenRemoveButtons, maxHeight, width: widthProp, minWidth: minWidthProp, maxWidth: maxWidthProp, variant: variantProp, visibleTokenCount, ...rest }, externalRef) {
-    const { onBlur, onFocus, onKeyDown, ...inputPropsRest } = props_1.omit(rest);
-    const ref = hooks_1.useProvidedRefOrCreate(externalRef);
-    const localInputRef = react_1.useRef(null);
-    const combinedInputRef = useCombinedRefs_1.useCombinedRefs(localInputRef, ref);
-    const [selectedTokenIndex, setSelectedTokenIndex] = react_1.useState();
-    const [tokensAreTruncated, setTokensAreTruncated] = react_1.useState(Boolean(visibleTokenCount));
-    const { containerRef } = useFocusZone_1.useFocusZone({
-        focusOutBehavior: 'wrap',
-        bindKeys: focusZone_1.FocusKeys.ArrowHorizontal | focusZone_1.FocusKeys.HomeAndEnd,
-        focusableElementFilter: element => {
-            return !element.getAttributeNames().includes('aria-hidden');
-        },
-        getNextFocusable: direction => {
-            if (!selectedTokenIndex && selectedTokenIndex !== 0) {
-                return undefined;
-            }
-            let nextIndex = selectedTokenIndex + 1; // "+ 1" accounts for the first element: the text input
-            if (direction === 'next') {
-                nextIndex += 1;
-            }
-            if (direction === 'previous') {
-                nextIndex -= 1;
-            }
-            if (nextIndex > tokens.length || nextIndex < 1) {
-                return combinedInputRef.current || undefined;
-            }
-            return containerRef.current?.children[nextIndex];
-        }
-    }, [selectedTokenIndex]);
-    const handleTokenRemove = (tokenId) => {
-        onTokenRemove(tokenId);
-        // HACK: wait a tick for the the token node to be removed from the DOM
-        setTimeout(() => {
-            const nextElementToFocus = containerRef.current?.children[selectedTokenIndex || 0];
-            // when removing the first token by keying "Backspace" or "Delete",
-            // `nextFocusableElement` is the div that wraps the input
-            const firstFocusable = nextElementToFocus && iterateFocusableElements_1.isFocusable(nextElementToFocus)
-                ? nextElementToFocus
-                : Array.from(containerRef.current?.children || []).find(el => iterateFocusableElements_1.isFocusable(el));
-            if (firstFocusable) {
-                firstFocusable.focus();
-            }
-            else {
-                // if there are no tokens left, focus the input
-                ref.current?.focus();
-            }
-        }, 0);
-    };
-    const handleTokenFocus = tokenIndex => () => {
-        setSelectedTokenIndex(tokenIndex);
-    };
-    const handleTokenBlur = () => {
-        setSelectedTokenIndex(undefined);
-        // HACK: wait a tick and check the focused element before hiding truncated tokens
-        // this prevents the tokens from hiding when the user is moving focus between tokens,
-        // but still hides the tokens when the user blurs the token by tabbing out or clicking somewhere else on the page
-        setTimeout(() => {
-            if (!containerRef.current?.contains(document.activeElement) && visibleTokenCount) {
-                setTokensAreTruncated(true);
-            }
-        }, 0);
-    };
-    const handleTokenKeyUp = event => {
-        if (event.key === 'Escape') {
-            ref.current?.focus();
-        }
-    };
-    const handleInputFocus = event => {
-        onFocus && onFocus(event);
-        setSelectedTokenIndex(undefined);
-        visibleTokenCount && setTokensAreTruncated(false);
-    };
-    const handleInputBlur = event => {
-        onBlur && onBlur(event);
-        // HACK: wait a tick and check the focused element before hiding truncated tokens
-        // this prevents the tokens from hiding when the user is moving focus from the input to a token,
-        // but still hides the tokens when the user blurs the input by tabbing out or clicking somewhere else on the page
-        setTimeout(() => {
-            if (!containerRef.current?.contains(document.activeElement) && visibleTokenCount) {
-                setTokensAreTruncated(true);
-            }
-        }, 0);
-    };
-    const handleInputKeyDown = e => {
-        if (onKeyDown) {
-            onKeyDown(e);
-        }
-        if (ref.current?.value) {
-            return;
-        }
-        const lastToken = tokens[tokens.length - 1];
-        if (e.key === 'Backspace' && lastToken) {
-            handleTokenRemove(lastToken.id);
-            if (ref.current) {
-                // TODO: eliminate the first hack by making changes to the Autocomplete component
-                //
-                // HACKS:
-                // 1. Directly setting `ref.current.value` instead of updating state because the autocomplete
-                //    highlight behavior doesn't work correctly if we update the value with a setState action in onChange
-                // 2. Adding an extra space so that when I backspace, it doesn't delete the last letter
-                ref.current.value = `${lastToken.text} `;
-            }
-            // HACK: for some reason we need to wait a tick for `.select()` to work
-            setTimeout(() => {
-                ref.current?.select();
-            }, 0);
-        }
-    };
-    const focusInput = () => {
-        combinedInputRef.current?.focus();
-    };
-    const preventTokenClickPropagation = event => {
-        event.stopPropagation();
-    };
-    const visibleTokens = tokensAreTruncated ? tokens.slice(0, visibleTokenCount) : tokens;
-    return (<_TextInputWrapper_1.default block={block} className={className} contrast={contrast} disabled={disabled} hasIcon={!!IconComponent} theme={theme} width={widthProp} minWidth={minWidthProp} maxWidth={maxWidthProp} variant={variantProp} onClick={focusInput} sx={{
-            ...(block
-                ? {
-                    display: 'flex',
-                    width: '100%'
-                }
-                : {}),
-            ...(maxHeight
-                ? {
-                    maxHeight,
-                    overflow: 'auto'
-                }
-                : {}),
-            ...(preventTokenWrapping
-                ? {
-                    overflow: 'auto'
-                }
-                : {}),
-            ...sxProp
-        }}>
-      <Box_1.default ref={containerRef} display="flex" sx={{
-            alignItems: 'center',
-            flexWrap: preventTokenWrapping ? 'nowrap' : 'wrap',
-            marginLeft: '-0.25rem',
-            marginBottom: '-0.25rem',
-            flexGrow: 1,
-            '> *': {
-                flexShrink: 0,
-                marginLeft: '0.25rem',
-                marginBottom: '0.25rem'
-            }
-        }}>
-        <Box_1.default sx={{
-            order: 1,
-            flexGrow: 1
-        }}>
-          {IconComponent && <IconComponent className="TextInput-icon"/>}
-          <_UnstyledTextInput_1.default ref={combinedInputRef} disabled={disabled} onFocus={handleInputFocus} onBlur={handleInputBlur} onKeyDown={handleInputKeyDown} type="text" sx={{ height: '100%' }} {...inputPropsRest}/>
-        </Box_1.default>
-        {TokenComponent
-            ? visibleTokens.map(({ id, ...tokenRest }, i) => (<TokenComponent key={id} onFocus={handleTokenFocus(i)} onBlur={handleTokenBlur} onKeyUp={handleTokenKeyUp} onClick={preventTokenClickPropagation} isSelected={selectedTokenIndex === i} onRemove={() => {
-                    handleTokenRemove(id);
-                }} hideRemoveButton={hideTokenRemoveButtons} size={size} tabIndex={0} {...tokenRest}/>))
-            : null}
-        {tokensAreTruncated ? (<Text_1.default color="fg.muted" fontSize={size && overflowCountFontSizeMap[size]}>
-            +{tokens.length - visibleTokens.length}
-          </Text_1.default>) : null}
-      </Box_1.default>
-    </_TextInputWrapper_1.default>);
-}
-const TextInputWithTokens = react_1.default.forwardRef(TextInputWithTokensInnerComponent);
-TextInputWithTokens.defaultProps = {
-    tokenComponent: Token_1.default,
-    size: 'extralarge',
-    hideTokenRemoveButtons: false,
-    preventTokenWrapping: false
-};
-TextInputWithTokens.displayName = 'TextInputWithTokens';
-exports.default = TextInputWithTokens;

package/lib/ThemeProvider.jsx

@@ -1,130 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useColorSchemeVar = exports.useTheme = exports.ThemeProvider = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = require("styled-components");
-const theme_1 = __importDefault(require("./theme"));
-const deepmerge_1 = __importDefault(require("deepmerge"));
-const defaultColorMode = 'day';
-const defaultDayScheme = 'light';
-const defaultNightScheme = 'dark';
-const ThemeContext = react_1.default.createContext({
-    setColorMode: () => null,
-    setDayScheme: () => null,
-    setNightScheme: () => null
-});
-const ThemeProvider = ({ children, ...props }) => {
-    // Get fallback values from parent ThemeProvider (if exists)
-    const { theme: fallbackTheme, colorMode: fallbackColorMode, dayScheme: fallbackDayScheme, nightScheme: fallbackNightScheme } = useTheme();
-    // Initialize state
-    const theme = props.theme ?? fallbackTheme ?? theme_1.default;
-    const [colorMode, setColorMode] = react_1.default.useState(props.colorMode ?? fallbackColorMode ?? defaultColorMode);
-    const [dayScheme, setDayScheme] = react_1.default.useState(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme);
-    const [nightScheme, setNightScheme] = react_1.default.useState(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme);
-    const systemColorMode = useSystemColorMode();
-    const resolvedColorMode = resolveColorMode(colorMode, systemColorMode);
-    const colorScheme = chooseColorScheme(resolvedColorMode, dayScheme, nightScheme);
-    const resolvedTheme = react_1.default.useMemo(() => applyColorScheme(theme, colorScheme), [theme, colorScheme]);
-    // Update state if props change
-    react_1.default.useEffect(() => {
-        setColorMode(props.colorMode ?? fallbackColorMode ?? defaultColorMode);
-    }, [props.colorMode, fallbackColorMode]);
-    react_1.default.useEffect(() => {
-        setDayScheme(props.dayScheme ?? fallbackDayScheme ?? defaultDayScheme);
-    }, [props.dayScheme, fallbackDayScheme]);
-    react_1.default.useEffect(() => {
-        setNightScheme(props.nightScheme ?? fallbackNightScheme ?? defaultNightScheme);
-    }, [props.nightScheme, fallbackNightScheme]);
-    return (<ThemeContext.Provider value={{
-            theme: resolvedTheme,
-            colorScheme,
-            colorMode,
-            resolvedColorMode,
-            dayScheme,
-            nightScheme,
-            setColorMode,
-            setDayScheme,
-            setNightScheme
-        }}>
-      <styled_components_1.ThemeProvider theme={resolvedTheme}>{children}</styled_components_1.ThemeProvider>
-    </ThemeContext.Provider>);
-};
-exports.ThemeProvider = ThemeProvider;
-function useTheme() {
-    return react_1.default.useContext(ThemeContext);
-}
-exports.useTheme = useTheme;
-function useColorSchemeVar(values, fallback) {
-    const { colorScheme = '' } = useTheme();
-    return values[colorScheme] ?? fallback;
-}
-exports.useColorSchemeVar = useColorSchemeVar;
-function useSystemColorMode() {
-    const [systemColorMode, setSystemColorMode] = react_1.default.useState(getSystemColorMode);
-    react_1.default.useEffect(() => {
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        const media = window?.matchMedia?.('(prefers-color-scheme: dark)');
-        function handleChange(event) {
-            const isNight = event.matches;
-            setSystemColorMode(isNight ? 'night' : 'day');
-        }
-        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-        if (media) {
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            if (media.addEventListener !== undefined) {
-                media.addEventListener('change', handleChange);
-                return function cleanup() {
-                    media.removeEventListener('change', handleChange);
-                };
-            }
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-            else if (media.addListener !== undefined) {
-                media.addListener(handleChange);
-                return function cleanup() {
-                    media.removeListener(handleChange);
-                };
-            }
-        }
-    }, []);
-    return systemColorMode;
-}
-function getSystemColorMode() {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)')?.matches) {
-        return 'night';
-    }
-    return 'day';
-}
-function resolveColorMode(colorMode, systemColorMode) {
-    switch (colorMode) {
-        case 'auto':
-            return systemColorMode;
-        default:
-            return colorMode;
-    }
-}
-function chooseColorScheme(colorMode, dayScheme, nightScheme) {
-    switch (colorMode) {
-        case 'day':
-            return dayScheme;
-        case 'night':
-            return nightScheme;
-    }
-}
-function applyColorScheme(theme, colorScheme) {
-    if (!theme.colorSchemes) {
-        return theme;
-    }
-    if (!theme.colorSchemes[colorScheme]) {
-        // eslint-disable-next-line no-console
-        console.error(`\`${colorScheme}\` scheme not defined in \`theme.colorSchemes\``);
-        // Apply the first defined color scheme
-        const defaultColorScheme = Object.keys(theme.colorSchemes)[0];
-        return deepmerge_1.default(theme, theme.colorSchemes[defaultColorScheme]);
-    }
-    return deepmerge_1.default(theme, theme.colorSchemes[colorScheme]);
-}
-exports.default = exports.ThemeProvider;

package/lib/Timeline.jsx

@@ -1,123 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const classnames_1 = __importDefault(require("classnames"));
-const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importStar(require("styled-components"));
-const _1 = require(".");
-const constants_1 = require("./constants");
-const sx_1 = __importDefault(require("./sx"));
-const Timeline = styled_components_1.default.div `
-  display: flex;
-  flex-direction: column;
-  ${props => props.clipSidebar &&
-    styled_components_1.css `
-      .Timeline-Item:first-child {
-        padding-top: 0;
-      }
-
-      .Timeline-Item:last-child {
-        padding-bottom: 0;
-      }
-    `}
-
-  ${sx_1.default};
-`;
-const TimelineItem = styled_components_1.default.div.attrs(props => ({
-    className: classnames_1.default('Timeline-Item', props.className)
-})) `
-  display: flex;
-  position: relative;
-  padding: ${constants_1.get('space.3')} 0;
-  margin-left: ${constants_1.get('space.3')};
-
-  &::before {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    display: block;
-    width: 2px;
-    content: '';
-    background-color: ${constants_1.get('colors.border.muted')};
-  }
-
-  ${props => props.condensed &&
-    styled_components_1.css `
-      padding-top: ${constants_1.get('space.1')};
-      padding-bottom: 0;
-      &:last-child {
-        padding-bottom: ${constants_1.get('space.3')};
-      }
-
-      .TimelineItem-Badge {
-        height: 16px;
-        margin-top: ${constants_1.get('space.2')};
-        margin-bottom: ${constants_1.get('space.2')};
-        color: ${constants_1.get('colors.fg.muted')};
-        background-color: ${constants_1.get('colors.canvas.default')};
-        border: 0;
-      }
-    `}
-
-  ${sx_1.default};
-`;
-const TimelineBadge = (props) => {
-    return (<_1.Box position="relative" zIndex={1}>
-      <_1.Box display="flex" className="TimelineItem-Badge" flexShrink={0} borderRadius="50%" borderWidth="2px" borderStyle="solid" borderColor="canvas.default" overflow="hidden" color="fg.muted" bg="timeline.badgeBg" width="32px" height="32px" mr={2} ml="-15px" alignItems="center" justifyContent="center" sx={props.sx}>
-        {props.children}
-      </_1.Box>
-    </_1.Box>);
-};
-const TimelineBody = styled_components_1.default.div `
-  min-width: 0;
-  max-width: 100%;
-  margin-top: ${constants_1.get('space.1')};
-  color: ${constants_1.get('colors.fg.muted')};
-  flex: auto;
-  font-size: ${constants_1.get('fontSizes.1')};
-  ${sx_1.default};
-`;
-const TimelineBreak = styled_components_1.default.div `
-  position: relative
-  z-index: 1;
-  height: 24px;
-  margin: 0;
-  margin-bottom: -${constants_1.get('space.3')};
-  margin-left: 0;
-  background-color: ${constants_1.get('colors.canvas.default')};
-  border: 0;
-  border-top: ${constants_1.get('space.1')} solid ${constants_1.get('colors.border.default')};
-  ${sx_1.default};
-`;
-TimelineItem.displayName = 'Timeline.Item';
-TimelineBadge.displayName = 'Timeline.Badge';
-TimelineBody.displayName = 'Timeline.Body';
-TimelineBreak.displayName = 'Timeline.Break';
-exports.default = Object.assign(Timeline, {
-    Item: TimelineItem,
-    Badge: TimelineBadge,
-    Body: TimelineBody,
-    Break: TimelineBreak
-});

package/lib/Token/AvatarToken.jsx

@@ -1,54 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const constants_1 = require("../constants");
-const TokenBase_1 = require("./TokenBase");
-const Token_1 = __importDefault(require("./Token"));
-const __1 = require("..");
-const AvatarContainer = styled_components_1.default.span `
-  // 'space.1' is used because to match space from the left of the token to the left of the avatar
-  // '* 2' is done to account for the top and bottom
-  --spacing: calc(${constants_1.get('space.1')} * 2);
-
-  display: block;
-  height: ${props => `calc(${TokenBase_1.tokenSizes[props.avatarSize]} - var(--spacing))`};
-  width: ${props => `calc(${TokenBase_1.tokenSizes[props.avatarSize]} - var(--spacing))`};
-`;
-const AvatarToken = react_1.forwardRef(({ avatarSrc, id, size, ...rest }, forwardedRef) => {
-    return (<Token_1.default leadingVisual={() => (<AvatarContainer avatarSize={size || TokenBase_1.defaultTokenSize}>
-          <__1.Avatar src={avatarSrc} size={parseInt(TokenBase_1.tokenSizes[size || TokenBase_1.defaultTokenSize], 10)} sx={{
-                width: '100%',
-                height: '100%'
-            }}/>
-        </AvatarContainer>)} size={size} id={id?.toString()} sx={{
-            paddingLeft: constants_1.get('space.1')
-        }} {...rest} ref={forwardedRef}/>);
-});
-AvatarToken.defaultProps = {
-    size: TokenBase_1.defaultTokenSize
-};
-AvatarToken.displayName = 'AvatarToken';
-exports.default = AvatarToken;

package/lib/Token/IssueLabelToken.jsx

@@ -1,125 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const TokenBase_1 = __importStar(require("./TokenBase"));
-const _RemoveTokenButton_1 = __importDefault(require("./_RemoveTokenButton"));
-const color2k_1 = require("color2k");
-const ThemeProvider_1 = require("../ThemeProvider");
-const _TokenTextContainer_1 = __importDefault(require("./_TokenTextContainer"));
-const tokenBorderWidthPx = 1;
-const lightModeStyles = {
-    '--lightness-threshold': '0.453',
-    '--border-threshold': '0.96',
-    '--border-alpha': 'max(0, min(calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1))',
-    background: 'rgb(var(--label-r), var(--label-g), var(--label-b))',
-    color: 'hsl(0, 0%, calc(var(--lightness-switch) * 100%))',
-    borderWidth: tokenBorderWidthPx,
-    borderStyle: 'solid',
-    borderColor: 'hsla(var(--label-h),calc(var(--label-s) * 1%),calc((var(--label-l) - 25) * 1%),var(--border-alpha))'
-};
-const darkModeStyles = {
-    '--lightness-threshold': '0.6',
-    '--background-alpha': '0.18',
-    '--border-alpha': '0.3',
-    '--lighten-by': 'calc(((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch))',
-    borderWidth: tokenBorderWidthPx,
-    borderStyle: 'solid',
-    background: 'rgba(var(--label-r), var(--label-g), var(--label-b), var(--background-alpha))',
-    color: 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))',
-    borderColor: 'hsla(var(--label-h), calc(var(--label-s) * 1%),calc((var(--label-l) + var(--lighten-by)) * 1%),var(--border-alpha))'
-};
-const IssueLabelToken = react_1.forwardRef((props, forwardedRef) => {
-    const { as, fillColor = '#999', onRemove, id, isSelected, text, size, hideRemoveButton, href, onClick, ...rest } = props;
-    const interactiveTokenProps = {
-        as,
-        href,
-        onClick
-    };
-    const { colorScheme } = ThemeProvider_1.useTheme();
-    const hasMultipleActionTargets = TokenBase_1.isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton;
-    const onRemoveClick = e => {
-        e.stopPropagation();
-        onRemove && onRemove();
-    };
-    const labelStyles = react_1.useMemo(() => {
-        const [r, g, b] = color2k_1.parseToRgba(fillColor);
-        const [h, s, l] = color2k_1.parseToHsla(fillColor);
-        // label hack taken from https://github.com/github/github/blob/master/app/assets/stylesheets/hacks/hx_primer-labels.scss#L43-L108
-        // this logic should eventually live in primer/components. Also worthy of note is that the dotcom hack code will be moving to primer/css soon.
-        return {
-            '--label-r': String(r),
-            '--label-g': String(g),
-            '--label-b': String(b),
-            '--label-h': String(Math.round(h)),
-            '--label-s': String(Math.round(s * 100)),
-            '--label-l': String(Math.round(l * 100)),
-            '--perceived-lightness': 'calc(((var(--label-r) * 0.2126) + (var(--label-g) * 0.7152) + (var(--label-b) * 0.0722)) / 255)',
-            '--lightness-switch': 'max(0, min(calc((var(--perceived-lightness) - var(--lightness-threshold)) * -1000), 1))',
-            paddingRight: hideRemoveButton || !onRemove ? undefined : 0,
-            position: 'relative',
-            ...(colorScheme === 'light' ? lightModeStyles : darkModeStyles),
-            ...(isSelected
-                ? {
-                    background: colorScheme === 'light'
-                        ? 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 5) * 1%))'
-                        : darkModeStyles.background,
-                    ':focus': {
-                        outline: 'none'
-                    },
-                    ':after': {
-                        content: '""',
-                        position: 'absolute',
-                        zIndex: 1,
-                        top: `-${tokenBorderWidthPx * 2}px`,
-                        right: `-${tokenBorderWidthPx * 2}px`,
-                        bottom: `-${tokenBorderWidthPx * 2}px`,
-                        left: `-${tokenBorderWidthPx * 2}px`,
-                        display: 'block',
-                        pointerEvents: 'none',
-                        boxShadow: `0 0 0 ${tokenBorderWidthPx * 2}px ${colorScheme === 'light'
-                            ? 'rgb(var(--label-r), var(--label-g), var(--label-b))'
-                            : 'hsl(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%))'}`,
-                        borderRadius: '999px'
-                    }
-                }
-                : {})
-        };
-    }, [colorScheme, fillColor, isSelected, hideRemoveButton, onRemove]);
-    return (<TokenBase_1.default onRemove={onRemove} id={id?.toString()} isSelected={isSelected} text={text} size={size} sx={labelStyles} {...(!hasMultipleActionTargets ? interactiveTokenProps : {})} {...rest} ref={forwardedRef}>
-      <_TokenTextContainer_1.default {...(hasMultipleActionTargets ? interactiveTokenProps : {})}>{text}</_TokenTextContainer_1.default>
-      {!hideRemoveButton && onRemove ? (<_RemoveTokenButton_1.default borderOffset={tokenBorderWidthPx} onClick={onRemoveClick} size={size} aria-hidden={hasMultipleActionTargets ? 'true' : 'false'} isParentInteractive={TokenBase_1.isTokenInteractive(props)} sx={hasMultipleActionTargets
-                ? {
-                    position: 'relative',
-                    zIndex: '1'
-                }
-                : {}}/>) : null}
-    </TokenBase_1.default>);
-});
-IssueLabelToken.defaultProps = {
-    fillColor: '#999',
-    size: TokenBase_1.defaultTokenSize
-};
-IssueLabelToken.displayName = 'IssueLabelToken';
-exports.default = IssueLabelToken;