@procore/core-react 10.30.0 → 11.0.0-rc.2

package/dist/Pagination/PaginationSelect.js

@@ -0,0 +1,107 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { times } from 'ramda';
+import React from 'react';
+import { DropdownButton } from '../Dropdown/Dropdown';
+import { UNSAFE_Menu as MenuImperative } from '../MenuImperative';
+import { OverlayTrigger } from '../OverlayTrigger';
+import { useOverlayTriggerContext } from '../OverlayTrigger/OverlayTrigger';
+import { StyledOverlay } from './Pagination.styles';
+var noop = function () { };
+var PaginationMenu = React.forwardRef(function PaginationMenu(_a, ref) {
+    var activePage = _a.activePage, menuRef = _a.menuRef, _b = _a.onSelect, onSelect_ = _b === void 0 ? noop : _b, pages = _a.pages;
+    var ctx = useOverlayTriggerContext();
+    var lastItemRef = React.useRef(null);
+    var hasFooter = pages > 10;
+    React.useEffect(function () {
+        var _a;
+        (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightFirst();
+    }, [menuRef]);
+    React.useEffect(function () {
+        var _a, _b;
+        (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightSuggested();
+        (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.highlightSelected();
+    }, [menuRef]);
+    function onKeyDown(event) {
+        var _a, _b, _c;
+        var currentPage = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlighted();
+        if (event.key === 'ArrowDown' || event.key === 'Down') {
+            // when on the second to last item, want to jump to the last item (in the footer)
+            if (currentPage === pages - 1 && lastItemRef.current) {
+                (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.highlight(lastItemRef.current);
+            }
+        }
+        else if (event.key === 'ArrowUp' || event.key === 'Up') {
+            // on the last item (in the footer), want to jump back to the second to last
+            // item back in the menu
+            if (hasFooter && currentPage === pages) {
+                event.stopPropagation();
+                (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.highlightLast();
+            }
+        }
+    }
+    function onSelect(selection) {
+        onSelect_(selection);
+        ctx.hide(selection.event);
+    }
+    var children = times(function (index) {
+        var page = index + 1;
+        return (React.createElement(MenuImperative.Item, { item: page, key: index, selected: page === activePage, ref: lastItemRef }, page));
+    }, pages);
+    return (React.createElement(StyledOverlay, { ref: ref, shadowStrength: 2 },
+        React.createElement(MenuImperative, { ref: menuRef, onKeyDown: onKeyDown, onSelect: onSelect }, hasFooter ? (React.createElement(React.Fragment, null,
+            React.createElement(MenuImperative.Options, null, children.slice(0, -1)),
+            React.createElement(MenuImperative.Footer, { padding: "xs none" }, children[children.length - 1]))) : (React.createElement(MenuImperative.Options, null, children)))));
+});
+export var PaginationSelect = React.forwardRef(function PaginationSelect(_a, ref) {
+    var _b = _a.activePage, activePage = _b === void 0 ? 1 : _b, disabled = _a.disabled, onSelect = _a.onSelect, _c = _a.pages, pages = _c === void 0 ? 0 : _c, props = __rest(_a, ["activePage", "disabled", "onSelect", "pages"]);
+    var menuRef = React.useRef(null);
+    // Safari has an issue with giving focus to buttons after clicking on them
+    // if the button or menu do not have focus, the keyboard navigation does not work,
+    // so just focus the menu when we open it
+    function afterShow() {
+        var _a, _b, _c;
+        // this is brittle, if MenuImperative dom structure changes this could break
+        // but super specific to pagination, not really a concern elsewhere
+        ;
+        (_c = (_b = (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.el) === null || _b === void 0 ? void 0 : _b.firstChild) === null || _c === void 0 ? void 0 : _c.focus();
+    }
+    function onKeyDown(e) {
+        var _a, _b, _c;
+        if (e.key === 'Up' || e.key === 'ArrowUp') {
+            e.preventDefault();
+            (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.prev();
+        }
+        else if (e.key === 'Down' || e.key === 'ArrowDown') {
+            e.preventDefault();
+            (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.next();
+        }
+        else if (e.key === 'Enter') {
+            e.preventDefault();
+            (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.select(e);
+        }
+    }
+    return (React.createElement(OverlayTrigger, __assign({ afterShow: afterShow, overlay: React.createElement(PaginationMenu, { activePage: activePage, menuRef: menuRef, onSelect: onSelect, pages: pages }), placement: "bottom-left", ref: ref, trigger: "click" }, props),
+        React.createElement(DropdownButton, { arrow: true, disabled: disabled, onKeyDown: onKeyDown, variant: "tertiary" }, activePage)));
+});
+//# sourceMappingURL=PaginationSelect.js.map

package/dist/Pagination/PaginationSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationSelect.js","sourceRoot":"","sources":["../../src/Pagination/PaginationSelect.tsx"],"names":[],"mappings":"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"}

package/dist/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { Pagination } from './Pagination';
+export { PresetPaginationProps as PaginationProps } from './Pagination.types';

package/dist/Pagination/index.js

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

package/dist/Pagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA"}

package/dist/Panel/Panel.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { DivAttributes } from '../_utils/types';
+import { TypographyProps } from '../Typography';
+import { PanelBodyProps, PanelHeaderActionProps, PanelHeaderProps, PanelProps, PanelQaTags, PanelTitleTooltipProps } from './Panel.types';
+export declare const MoreIcon: React.FC<DivAttributes & {
+    qa?: Pick<PanelQaTags, 'moreIcon'>;
+}>;
+export declare const TitleTooltip: React.FC<PanelTitleTooltipProps>;
+export declare const Panel: React.ForwardRefExoticComponent<PanelProps & React.RefAttributes<HTMLDivElement>> & {
+    Body: React.ForwardRefExoticComponent<PanelBodyProps & React.RefAttributes<HTMLDivElement>>;
+    Footer: React.ForwardRefExoticComponent<DivAttributes & React.RefAttributes<HTMLDivElement>>;
+    FooterActions: React.ForwardRefExoticComponent<DivAttributes & React.RefAttributes<HTMLDivElement>>;
+    FooterNotation: React.ForwardRefExoticComponent<DivAttributes & React.RefAttributes<HTMLDivElement>>;
+    Header: React.ForwardRefExoticComponent<PanelHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    HeaderAction: React.ForwardRefExoticComponent<PanelHeaderActionProps & React.RefAttributes<HTMLSpanElement>>;
+    HeaderActions: React.ForwardRefExoticComponent<DivAttributes & {
+        qa?: Pick<PanelQaTags, "moreIcon"> | undefined;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Section: React.ForwardRefExoticComponent<import("../Section/Section.types").SectionProps & React.RefAttributes<HTMLDivElement>>;
+    Title: React.ForwardRefExoticComponent<TypographyProps & {
+        qa?: Pick<PanelQaTags, "title"> | undefined;
+    } & React.RefAttributes<HTMLSpanElement>>;
+};

package/dist/Panel/Panel.js

@@ -0,0 +1,184 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { ChevronLeft, Clear, EllipsisVertical } from '@procore/core-icons/dist';
+import { mergeRefs } from '../_utils/mergeRefs';
+import { useOverflowObserver } from '../_hooks/OverflowObserver';
+import { addSubcomponents } from '../_utils/addSubcomponents';
+import { isReactElement } from '../_utils/isReactElement';
+import { partition } from '../_utils/partition';
+import { Button } from '../Button';
+import { Menu } from '../Menu';
+import { OverlayTrigger } from '../OverlayTrigger';
+import { Tooltip } from '../Tooltip';
+import { StyledBody, StyledFooter, StyledFooterActions, StyledFooterNotation, StyledHeader, StyledHeaderActions, StyledHeaderBackAction, StyledMoreMenu, StyledPanel, StyledTitle, StyledCloseButton, } from './Panel.styles';
+import { Section, SectionProvider, LevelContext } from '../Section';
+import { useScroll } from '../_hooks/Scroll';
+import { useResize } from '../_hooks/Resize';
+import { useI18nContext } from '../_hooks/I18n';
+var PanelContext = React.createContext({
+    isFooterSticky: false,
+    setIsFooterSticky: function () { },
+});
+var maxVisibleIcons = 3;
+var HeaderAction = React.forwardRef(function HeaderAction(_a, ref) {
+    var title = _a.title, children = _a.children, props = __rest(_a, ["title", "children"]);
+    return (React.createElement(Tooltip, { overlay: title, ref: ref },
+        React.createElement(Button, __assign({}, props, { variant: "tertiary" }), children)));
+});
+var MoreMenu = React.forwardRef(function MoreMenu(_a, ref) {
+    var children = _a.children;
+    return (React.createElement(StyledMoreMenu, { ref: ref },
+        React.createElement(Menu, { ref: function (node) { return node === null || node === void 0 ? void 0 : node.focus(); } },
+            React.createElement(Menu.Options, null, React.Children.map(children, function (child) {
+                if (isReactElement(child)) {
+                    return (React.createElement(Menu.Item, { item: null, key: child.props.title, onClick: child.props.onClick }, child.props.title));
+                }
+            })))));
+});
+export var MoreIcon = function (_a) {
+    var children = _a.children, qa = _a.qa;
+    return (React.createElement(OverlayTrigger, { trigger: "click", placement: "bottom-right", overlay: React.createElement(MoreMenu, null, children) },
+        React.createElement(Button, { "data-qa": qa === null || qa === void 0 ? void 0 : qa.moreIcon, variant: "tertiary", icon: React.createElement(EllipsisVertical, null) })));
+};
+var HeaderActions = React.forwardRef(function HeaderActions(_a, ref) {
+    var children = _a.children, qa = _a.qa, props = __rest(_a, ["children", "qa"]);
+    var iconsAmount = React.Children.count(children);
+    var _b = iconsAmount > maxVisibleIcons
+        ? partition(function (_, index) { return index > iconsAmount - maxVisibleIcons; }, React.Children.toArray(children))
+        : [children, []], visibleIcons = _b[0], hiddenIcons = _b[1];
+    return (React.createElement(StyledHeaderActions, __assign({}, props, { ref: ref }),
+        visibleIcons,
+        hiddenIcons.length > 0 && React.createElement(MoreIcon, { qa: qa }, hiddenIcons)));
+});
+export var TitleTooltip = function (_a) {
+    var children = _a.children, overlay = _a.overlay, isVisible = _a.isVisible;
+    if (!isVisible) {
+        return children;
+    }
+    return (React.createElement(Tooltip, { trigger: "hover", overlay: React.createElement(Tooltip.Content, null, overlay), placement: "bottom" }, children));
+};
+var Title = React.forwardRef(function Title(_a, ref) {
+    var children = _a.children, qa = _a.qa, props = __rest(_a, ["children", "qa"]);
+    var _b = useOverflowObserver(), isOverflowingX = _b.isOverflowingX, overflowRef = _b.ref;
+    return (React.createElement(TitleTooltip, { isVisible: isOverflowingX, overlay: children },
+        React.createElement(StyledTitle, __assign({}, props, { ref: mergeRefs(overflowRef, ref), intent: "h2", "data-qa": qa === null || qa === void 0 ? void 0 : qa.title }), children)));
+});
+var Header = React.forwardRef(function Header(_a, ref) {
+    var children = _a.children, onClickBack = _a.onClickBack, onClose = _a.onClose, props = __rest(_a, ["children", "onClickBack", "onClose"]);
+    var I18n = useI18nContext();
+    return (React.createElement(StyledHeader, __assign({}, props, { ref: ref }),
+        React.createElement(StyledHeaderBackAction, { active: onClickBack !== undefined },
+            React.createElement(Button, { variant: "tertiary", onClick: onClickBack, icon: React.createElement(ChevronLeft, null) })),
+        children,
+        typeof onClose === 'function' && (React.createElement(StyledCloseButton, null,
+            React.createElement(HeaderAction, { title: I18n.t('core.panel.close'), icon: React.createElement(Clear, null), onClick: onClose })))));
+});
+var Body = React.forwardRef(function Body(_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var bodyRef = React.useRef(null);
+    var setIsFooterSticky = React.useContext(PanelContext).setIsFooterSticky;
+    function calculateBodyScroll() {
+        if (!bodyRef.current) {
+            return;
+        }
+        var isScrollable = bodyRef.current.scrollHeight > bodyRef.current.clientHeight;
+        if (isScrollable) {
+            var isNotScrolledToBottom = bodyRef.current.scrollTop + bodyRef.current.clientHeight <
+                bodyRef.current.scrollHeight;
+            setIsFooterSticky(isNotScrolledToBottom);
+        }
+        else {
+            setIsFooterSticky(false);
+        }
+    }
+    React.useLayoutEffect(function () {
+        // allow browsers to recalculate the layout
+        setTimeout(function () {
+            calculateBodyScroll();
+        }, 0);
+    }, []);
+    useScroll({ onScroll: calculateBodyScroll, scope: bodyRef });
+    useResize({ onResize: calculateBodyScroll });
+    return (React.createElement(SectionProvider, null,
+        React.createElement(LevelContext.Provider, { value: 3 },
+            React.createElement(StyledBody, __assign({}, props, { ref: mergeRefs(ref, bodyRef, calculateBodyScroll) }), children))));
+});
+var FooterNotation = React.forwardRef(function FooterNotation(_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledFooterNotation, __assign({}, props, { ref: ref }), children));
+});
+var FooterActions = React.forwardRef(function FooterActions(_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledFooterActions, __assign({}, props, { ref: ref }), children));
+});
+var Footer = React.forwardRef(function Footer(_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var isFooterSticky = React.useContext(PanelContext).isFooterSticky;
+    return (React.createElement(StyledFooter, __assign({}, props, { ref: ref, "$hasShadow": isFooterSticky }), children));
+});
+/**
+
+ Panels help users complete tasks or view additional information alongside the
+ main content of a page.
+
+ Panels are often initiated by clicking on an item somewhere on the main page,
+ and they often contain additional information or options specific to that item.
+
+ @since 10.19.0
+
+ @see [Storybook](https://procore.github.io/core/latest/?path=/story/demos-panel--demo)
+
+ @see [Design Guidelines](https://design.procore.com/panel)
+
+ */
+var Panel_ = React.forwardRef(function Panel(_a, ref) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var _b = React.useState(false), isFooterSticky = _b[0], setIsFooterSticky = _b[1];
+    return (React.createElement(PanelContext.Provider, { value: {
+            setIsFooterSticky: setIsFooterSticky,
+            isFooterSticky: isFooterSticky,
+        } },
+        React.createElement(StyledPanel, __assign({}, props, { ref: ref }), children)));
+});
+Panel_.displayName = 'Panel';
+Body.displayName = 'Panel.Body';
+Footer.displayName = 'Panel.Footer';
+FooterActions.displayName = 'Panel.FooterActions';
+FooterNotation.displayName = 'Panel.FooterNotation';
+Header.displayName = 'Panel.Header';
+HeaderAction.displayName = 'Panel.HeaderAction';
+HeaderActions.displayName = 'Panel.HeaderActions';
+Title.displayName = 'Panel.Title';
+export var Panel = addSubcomponents({
+    Body: Body,
+    Footer: Footer,
+    FooterActions: FooterActions,
+    FooterNotation: FooterNotation,
+    Header: Header,
+    HeaderAction: HeaderAction,
+    HeaderActions: HeaderActions,
+    Section: Section,
+    Title: Title,
+}, Panel_);
+//# sourceMappingURL=Panel.js.map

package/dist/Panel/Panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.js","sourceRoot":"","sources":["../../src/Panel/Panel.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAC/E,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAE/C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,OAAO,EACL,UAAU,EACV,YAAY,EACZ,mBAAmB,EACnB,oBAAoB,EACpB,YAAY,EACZ,mBAAmB,EACnB,sBAAsB,EACtB,cAAc,EACd,WAAW,EACX,WAAW,EACX,iBAAiB,GAClB,MAAM,gBAAgB,CAAA;AAUvB,OAAO,EAAE,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,IAAM,YAAY,GAAG,KAAK,CAAC,aAAa,CAAoB;IAC1D,cAAc,EAAE,KAAK;IACrB,iBAAiB,EAAE,cAAO,CAAC;CAC5B,CAAC,CAAA;AAEF,IAAM,eAAe,GAAG,CAAC,CAAA;AAEzB,IAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,SAAS,YAAY,CAAC,EAA6B,EAAE,GAAG;IAAhC,IAAA,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAK,KAAK,cAA3B,qBAA6B,CAAF;IAC/C,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG;QAC/B,oBAAC,MAAM,eAAK,KAAK,IAAE,OAAO,EAAC,UAAU,KAClC,QAAQ,CACF,CACD,CACX,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAC/B,SAAS,QAAQ,CAAC,EAAY,EAAE,GAAG;QAAf,QAAQ,cAAA;IAC1B,OAAO,CACL,oBAAC,cAAc,IAAC,GAAG,EAAE,GAAG;QACtB,oBAAC,IAAI,IAAC,GAAG,EAAE,UAAC,IAAI,IAAK,OAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,EAAE,EAAb,CAAa;YAChC,oBAAC,IAAI,CAAC,OAAO,QACV,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAC,KAAK;gBAClC,IAAI,cAAc,CAAyB,KAAK,CAAC,EAAE;oBACjD,OAAO,CACL,oBAAC,IAAI,CAAC,IAAI,IACR,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,KAAK,CAAC,KAAK,CAAC,KAAK,EACtB,OAAO,EACL,KAAK,CAAC,KAAK,CAAC,OAAwC,IAGrD,KAAK,CAAC,KAAK,CAAC,KAAK,CACR,CACb,CAAA;iBACF;YACH,CAAC,CAAC,CACW,CACV,CACQ,CAClB,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,CAAC,IAAM,QAAQ,GAEjB,UAAC,EAAgB;QAAd,QAAQ,cAAA,EAAE,EAAE,QAAA;IACjB,OAAO,CACL,oBAAC,cAAc,IACb,OAAO,EAAC,OAAO,EACf,SAAS,EAAC,cAAc,EACxB,OAAO,EAAE,oBAAC,QAAQ,QAAE,QAAQ,CAAY;QAExC,oBAAC,MAAM,eACI,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,QAAQ,EACrB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAE,oBAAC,gBAAgB,OAAG,GAC1B,CACa,CAClB,CAAA;AACH,CAAC,CAAA;AAED,IAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAGpC,SAAS,aAAa,CAAC,EAA0B,EAAE,GAAG;IAA7B,IAAA,QAAQ,cAAA,EAAE,EAAE,QAAA,EAAK,KAAK,cAAxB,kBAA0B,CAAF;IAC/C,IAAM,WAAW,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAE5C,IAAA,KACJ,WAAW,GAAG,eAAe;QAC3B,CAAC,CAAC,SAAS,CACP,UAAC,CAAC,EAAE,KAAK,IAAK,OAAA,KAAK,GAAG,WAAW,GAAG,eAAe,EAArC,CAAqC,EACnD,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CACjC;QACH,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,EANb,YAAY,QAAA,EAAE,WAAW,QAMZ,CAAA;IAEpB,OAAO,CACL,oBAAC,mBAAmB,eAAK,KAAK,IAAE,GAAG,EAAE,GAAG;QACrC,YAAY;QACZ,WAAW,CAAC,MAAM,GAAG,CAAC,IAAI,oBAAC,QAAQ,IAAC,EAAE,EAAE,EAAE,IAAG,WAAW,CAAY,CACjD,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,IAAM,YAAY,GAAqC,UAAC,EAI9D;QAHC,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,SAAS,eAAA;IAET,IAAI,CAAC,SAAS,EAAE;QACd,OAAO,QAA8B,CAAA;KACtC;IAED,OAAO,CACL,oBAAC,OAAO,IACN,OAAO,EAAC,OAAO,EACf,OAAO,EAAE,oBAAC,OAAO,CAAC,OAAO,QAAE,OAAO,CAAmB,EACrD,SAAS,EAAC,QAAQ,IAEjB,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAA;AAED,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAG5B,SAAS,KAAK,CAAC,EAA0B,EAAE,GAAG;IAA7B,IAAA,QAAQ,cAAA,EAAE,EAAE,QAAA,EAAK,KAAK,cAAxB,kBAA0B,CAAF;IACjC,IAAA,KAAuC,mBAAmB,EAAE,EAA1D,cAAc,oBAAA,EAAO,WAAW,SAA0B,CAAA;IAElE,OAAO,CACL,oBAAC,YAAY,IAAC,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ;QACxD,oBAAC,WAAW,eACN,KAAK,IACT,GAAG,EAAE,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC,EAChC,MAAM,EAAC,IAAI,aACF,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,KAAK,KAEjB,QAAQ,CACG,CACD,CAChB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAC7B,SAAS,MAAM,CAAC,EAA4C,EAAE,GAAG;IAA/C,IAAA,QAAQ,cAAA,EAAE,WAAW,iBAAA,EAAE,OAAO,aAAA,EAAK,KAAK,cAA1C,sCAA4C,CAAF;IACxD,IAAM,IAAI,GAAG,cAAc,EAAE,CAAA;IAC7B,OAAO,CACL,oBAAC,YAAY,eAAK,KAAK,IAAE,GAAG,EAAE,GAAG;QAC/B,oBAAC,sBAAsB,IAAC,MAAM,EAAE,WAAW,KAAK,SAAS;YACvD,oBAAC,MAAM,IACL,OAAO,EAAC,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAE,oBAAC,WAAW,OAAG,GACrB,CACqB;QACxB,QAAQ;QACR,OAAO,OAAO,KAAK,UAAU,IAAI,CAChC,oBAAC,iBAAiB;YAChB,oBAAC,YAAY,IACX,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,kBAAkB,CAAC,EACjC,IAAI,EAAE,oBAAC,KAAK,OAAG,EACf,OAAO,EAAE,OAAO,GAChB,CACgB,CACrB,CACY,CAChB,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAiC,SAAS,IAAI,CACzE,EAAsB,EACtB,GAAG;IADD,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAGpB,IAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAA;IAC1C,IAAA,iBAAiB,GAAK,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,kBAAnC,CAAmC;IAE5D,SAAS,mBAAmB;QAC1B,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;YACpB,OAAM;SACP;QACD,IAAM,YAAY,GAChB,OAAO,CAAC,OAAO,CAAC,YAAY,GAAG,OAAO,CAAC,OAAO,CAAC,YAAY,CAAA;QAC7D,IAAI,YAAY,EAAE;YAChB,IAAM,qBAAqB,GACzB,OAAO,CAAC,OAAO,CAAC,SAAS,GAAG,OAAO,CAAC,OAAO,CAAC,YAAY;gBACxD,OAAO,CAAC,OAAO,CAAC,YAAY,CAAA;YAC9B,iBAAiB,CAAC,qBAAqB,CAAC,CAAA;SACzC;aAAM;YACL,iBAAiB,CAAC,KAAK,CAAC,CAAA;SACzB;IACH,CAAC;IAED,KAAK,CAAC,eAAe,CAAC;QACpB,2CAA2C;QAC3C,UAAU,CAAC;YACT,mBAAmB,EAAE,CAAA;QACvB,CAAC,EAAE,CAAC,CAAC,CAAA;IACP,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,SAAS,CAAC,EAAE,QAAQ,EAAE,mBAAmB,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAA;IAE5D,SAAS,CAAC,EAAE,QAAQ,EAAE,mBAAmB,EAAE,CAAC,CAAA;IAE5C,OAAO,CACL,oBAAC,eAAe;QACd,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,CAAC;YAC7B,oBAAC,UAAU,eACL,KAAK,IACT,GAAG,EAAE,SAAS,CAAC,GAAG,EAAE,OAAO,EAAE,mBAAmB,CAAC,KAEhD,QAAQ,CACE,CACS,CACR,CACnB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,IAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,SAAS,cAAc,CAAC,EAAsB,EAAE,GAAG;IAAzB,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAC1C,OAAO,CACL,oBAAC,oBAAoB,eAAK,KAAK,IAAE,GAAG,EAAE,GAAG,KACtC,QAAQ,CACY,CACxB,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CACpC,SAAS,aAAa,CAAC,EAAsB,EAAE,GAAG;IAAzB,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IACzC,OAAO,CACL,oBAAC,mBAAmB,eAAK,KAAK,IAAE,GAAG,EAAE,GAAG,KACrC,QAAQ,CACW,CACvB,CAAA;AACH,CAAC,CACF,CAAA;AAED,IAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAAgC,SAAS,MAAM,CAC5E,EAAsB,EACtB,GAAG;IADD,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAGZ,IAAA,cAAc,GAAK,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,eAAnC,CAAmC;IACzD,OAAO,CACL,oBAAC,YAAY,eAAK,KAAK,IAAE,GAAG,EAAE,GAAG,gBAAc,cAAc,KAC1D,QAAQ,CACI,CAChB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF;;;;;;;;;;;;;;GAcG;AACH,IAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CAA6B,SAAS,KAAK,CACxE,EAAsB,EACtB,GAAG;IADD,IAAA,QAAQ,cAAA,EAAK,KAAK,cAApB,YAAsB,CAAF;IAGd,IAAA,KAAsC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAA1D,cAAc,QAAA,EAAE,iBAAiB,QAAyB,CAAA;IAEjE,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,EAAE;YACL,iBAAiB,mBAAA;YACjB,cAAc,gBAAA;SACf;QAED,oBAAC,WAAW,eAAK,KAAK,IAAE,GAAG,EAAE,GAAG,KAC7B,QAAQ,CACG,CACQ,CACzB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,WAAW,GAAG,OAAO,CAAA;AAC5B,IAAI,CAAC,WAAW,GAAG,YAAY,CAAA;AAC/B,MAAM,CAAC,WAAW,GAAG,cAAc,CAAA;AACnC,aAAa,CAAC,WAAW,GAAG,qBAAqB,CAAA;AACjD,cAAc,CAAC,WAAW,GAAG,sBAAsB,CAAA;AACnD,MAAM,CAAC,WAAW,GAAG,cAAc,CAAA;AACnC,YAAY,CAAC,WAAW,GAAG,oBAAoB,CAAA;AAC/C,aAAa,CAAC,WAAW,GAAG,qBAAqB,CAAA;AACjD,KAAK,CAAC,WAAW,GAAG,aAAa,CAAA;AAEjC,MAAM,CAAC,IAAM,KAAK,GAAG,gBAAgB,CACnC;IACE,IAAI,MAAA;IACJ,MAAM,QAAA;IACN,aAAa,eAAA;IACb,cAAc,gBAAA;IACd,MAAM,QAAA;IACN,YAAY,cAAA;IACZ,aAAa,eAAA;IACb,OAAO,SAAA;IACP,KAAK,OAAA;CACN,EACD,MAAM,CACP,CAAA"}

package/dist/Panel/Panel.styles.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare const StyledHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledTitle: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../_utils/types").SpanAttributes & import("..").TypographyProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;
+export declare const StyledHeaderBackAction: import("styled-components").StyledComponent<"div", any, {
+    active: boolean;
+}, never>;
+export declare const StyledMoreMenu: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../_utils/types").DivAttributes & import("../Card").CardProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;
+export declare const StyledHeaderActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledCloseButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledBody: import("styled-components").StyledComponent<"div", any, {
+    secondaryBgColor?: boolean | undefined;
+}, never>;
+export declare const StyledPanel: import("styled-components").StyledComponent<"aside", any, {}, never>;
+export declare const StyledFooterNotation: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFooterActions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledFooter: import("styled-components").StyledComponent<"div", any, {
+    $hasShadow: boolean;
+}, never>;

package/dist/Panel/Panel.styles.js

@@ -0,0 +1,46 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from 'styled-components';
+import { colors } from '../_styles/colors';
+import { spacing } from '../_styles/spacing';
+import { Card } from '../Card';
+import { Typography } from '../Typography/Typography';
+import { StyledSection, StyledSectionInner } from '../Section/Section.styles';
+import { getShadow } from '../_styles/shadows';
+var headerActionSize = 36;
+var buttonShadowWidth = 2;
+var gutter = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > * + * {\n    margin-left: ", "px;\n  }\n"], ["\n  > * + * {\n    margin-left: ", "px;\n  }\n"])), spacing.sm);
+var panel = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: ", "px;\n  background: ", ";\n"], ["\n  display: flex;\n  align-items: center;\n  padding: ", "px;\n  background: ", ";\n"])), spacing.lg, colors.white);
+export var StyledHeader = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n\n  ", "\n"], ["\n  border-bottom: 1px solid ", ";\n\n  ", "\n"])), colors.gray85, panel);
+export var StyledTitle = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex-grow: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"], ["\n  flex-grow: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])));
+export var StyledHeaderBackAction = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  transition: all 300ms ease-out;\n  flex-shrink: 0;\n\n  width: ", "px;\n  margin-right: ", "px;\n  opacity: ", ";\n  transform: translateX(\n    ", "px\n  );\n"], ["\n  transition: all 300ms ease-out;\n  flex-shrink: 0;\n\n  width: ", "px;\n  margin-right: ", "px;\n  opacity: ", ";\n  transform: translateX(\n    ", "px\n  );\n"])), function (_a) {
+    var active = _a.active;
+    return (active ? headerActionSize : 0);
+}, function (_a) {
+    var active = _a.active;
+    return (active ? spacing.lg : 0);
+}, function (_a) {
+    var active = _a.active;
+    return (active ? 1 : 0);
+}, function (_a) {
+    var active = _a.active;
+    return active ? 0 : -(spacing.lg + headerActionSize + buttonShadowWidth);
+});
+export var StyledMoreMenu = styled(Card)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  max-height: 128px;\n"], ["\n  max-height: 128px;\n"])));
+export var StyledHeaderActions = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  margin-left: ", "px;\n  flex-shrink: 0;\n\n  ", "\n"], ["\n  display: flex;\n  margin-left: ", "px;\n  flex-shrink: 0;\n\n  ", "\n"])), spacing.lg, gutter);
+export var StyledCloseButton = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin-left: ", "px;\n"], ["\n  margin-left: ", "px;\n"])), spacing.sm);
+export var StyledBody = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 100%;\n  background: ", ";\n  overflow-y: auto;\n\n  > ", " {\n    padding-left: ", "px;\n    padding-right: ", "px;\n\n    ", " {\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    &:first-child > ", " {\n      padding-top: ", "px;\n    }\n  }\n"], ["\n  height: 100%;\n  background: ", ";\n  overflow-y: auto;\n\n  > ", " {\n    padding-left: ", "px;\n    padding-right: ", "px;\n\n    ", " {\n      padding-left: 0;\n      padding-right: 0;\n    }\n\n    &:first-child > ", " {\n      padding-top: ", "px;\n    }\n  }\n"])), function (_a) {
+    var secondaryBgColor = _a.secondaryBgColor;
+    return secondaryBgColor ? colors.gray96 : colors.white;
+}, StyledSection, spacing.lg, spacing.lg, StyledSection, StyledSectionInner, spacing.lg);
+export var StyledPanel = styled.aside(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: ", ";\n  overflow: hidden;\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: ", ";\n  overflow: hidden;\n"])), colors.white);
+export var StyledFooterNotation = styled.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  flex-grow: 1;\n"], ["\n  flex-grow: 1;\n"])));
+export var StyledFooterActions = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), gutter);
+export var StyledFooter = styled.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  border-top: 1px solid ", ";\n  justify-content: flex-end;\n\n  ", "\n\n  ", "\n"], ["\n  border-top: 1px solid ", ";\n  justify-content: flex-end;\n\n  ", "\n\n  ", "\n"])), colors.gray85, panel, function (_a) {
+    var $hasShadow = _a.$hasShadow;
+    return $hasShadow && css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      ", "\n      z-index: 1;\n    "], ["\n      ", "\n      z-index: 1;\n    "])), getShadow(2, 'top'));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14;
+//# sourceMappingURL=Panel.styles.js.map

package/dist/Panel/Panel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.styles.js","sourceRoot":"","sources":["../../src/Panel/Panel.styles.ts"],"names":[],"mappings":"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"}

package/dist/Panel/Panel.types.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+import { ButtonAttributes, DivAttributes } from '../_utils/types';
+import { ButtonProps } from '../Button/Button.types';
+import { SectionProps } from '../Section/Section.types';
+export interface PanelQaTags {
+    /**
+     * @since 10.19.0
+     */
+    moreIcon?: string;
+    /**
+     * @since 10.19.0
+     */
+    title?: string;
+}
+export interface PanelProps extends DivAttributes {
+}
+export interface PanelHeaderProps extends DivAttributes {
+    /**
+     * Controls visibility and behavior for the "chevron-left" icon on the left
+     * side of the title.
+     * @since 10.19.0
+     */
+    onClickBack?: () => void;
+    /**
+     * @since 10.19.0
+     */
+    onClose?: () => void;
+}
+export interface PanelTitleTooltipProps {
+    /**
+     * @since 10.19.0
+     */
+    children: React.ReactNode;
+    /**
+     * @since 10.19.0
+     */
+    isVisible: boolean;
+    /**
+     * @since 10.19.0
+     */
+    overlay: React.ReactNode;
+}
+export interface PanelHeaderActionProps extends ButtonAttributes, ButtonProps {
+    /**
+     * Tooltip/Overflow menu label text.
+     * @since 10.19.0
+     * */
+    title: string;
+}
+export interface PanelBodyProps extends DivAttributes {
+    /**
+     * Applies the gray secondary background color.
+     * @since 10.19.0
+     */
+    secondaryBgColor?: boolean;
+}
+export interface PanelContextShape {
+    /**
+     * @since 10.19.0
+     */
+    isFooterSticky: boolean;
+    /**
+     * @since 10.19.0
+     */
+    setIsFooterSticky: (v: boolean) => void;
+}
+export interface PanelSectionProps extends SectionProps {
+}

package/dist/Panel/Panel.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.types.js","sourceRoot":"","sources":["../../src/Panel/Panel.types.ts"],"names":[],"mappings":""}

package/dist/Panel/index.d.ts

@@ -0,0 +1,2 @@
+export { Panel } from './Panel';
+export { PanelProps, PanelBodyProps, PanelHeaderProps, PanelHeaderActionProps, PanelSectionProps, } from './Panel.types';

package/dist/Panel/index.js

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

package/dist/Panel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Panel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA"}

package/dist/Pill/Pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.js","sourceRoot":"","sources":["../../src/Pill/Pill.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAG1C;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,IAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAA6B,SAAS,IAAI,CAC5E,EAA4B,EAC5B,GAAG;IADD,IAAA,aAAc,EAAd,KAAK,mBAAG,MAAM,KAAA,EAAK,KAAK,cAA1B,SAA4B,CAAF;IAG1B,OAAO,CACL,oBAAC,UAAU,uBAAS,KAAK,IAAM,KAAK,IAAE,GAAG,EAAE,GAAG,KAC3C,KAAK,CAAC,QAAQ,CACJ,CACd,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/Pill/Pill.styles.js

@@ -0,0 +1,31 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled, { css } from 'styled-components';
+import { colors } from '../_styles/colors';
+import { spacing } from '../_styles/spacing';
+import { getTypographyIntent } from '../Typography/Typography.styles';
+export var StyledPill = styled.span(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  ", "\n  display: inline-block;\n  padding: 1px ", "px;\n  border: 1px solid;\n  border-radius: 10px;\n  font-weight: 600;\n\n  & + & {\n    margin-left: ", "px;\n  }\n\n  ", "\n"], ["\n  ", "\n  display: inline-block;\n  padding: 1px ", "px;\n  border: 1px solid;\n  border-radius: 10px;\n  font-weight: 600;\n\n  & + & {\n    margin-left: ", "px;\n  }\n\n  ", "\n"])), getTypographyIntent('small'), spacing.sm, spacing.xs, function (_a) {
+    var $color = _a.$color;
+    switch ($color) {
+        case 'blue':
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "])), colors.blue94, colors.blue85, colors.blue45);
+        case 'cyan':
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "])), colors.cyan94, colors.cyan85, colors.cyan30);
+        case 'gray':
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "])), colors.gray94, colors.gray85, colors.gray30);
+        case 'green':
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "])), colors.green94, colors.green70, colors.green30);
+        case 'magenta':
+            return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "])), colors.magenta94, colors.magenta85, colors.magenta40);
+        case 'red':
+            return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "])), colors.red94, colors.red85, colors.red45);
+        case 'yellow':
+            return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "], ["\n          background-color: ", ";\n          border-color: ", ";\n          color: ", ";\n        "])), colors.yellow90, colors.yellow60, colors.orange30);
+        default:
+            return '';
+    }
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=Pill.styles.js.map

package/dist/Pill/Pill.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.styles.js","sourceRoot":"","sources":["../../src/Pill/Pill.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAA;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAA;AAGrE,MAAM,CAAC,IAAM,UAAU,GAAG,MAAM,CAAC,IAAI,0PAAuB,MACxD,EAA4B,6CAEf,EAAU,wGAMR,EAAU,gBAGzB,EA+CD,IACF,KA3DG,mBAAmB,CAAC,OAAO,CAAC,EAEf,OAAO,CAAC,EAAE,EAMR,OAAO,CAAC,EAAE,EAGzB,UAAC,EAAU;QAAR,MAAM,YAAA;IACT,QAAQ,MAAM,EAAE;QACd,KAAK,MAAM;YACT,OAAO,GAAG,yKAAA,gCACY,EAAa,6BACjB,EAAa,sBACpB,EAAa,aACvB,KAHqB,MAAM,CAAC,MAAM,EACjB,MAAM,CAAC,MAAM,EACpB,MAAM,CAAC,MAAM,EACvB;QACH,KAAK,MAAM;YACT,OAAO,GAAG,yKAAA,gCACY,EAAa,6BACjB,EAAa,sBACpB,EAAa,aACvB,KAHqB,MAAM,CAAC,MAAM,EACjB,MAAM,CAAC,MAAM,EACpB,MAAM,CAAC,MAAM,EACvB;QACH,KAAK,MAAM;YACT,OAAO,GAAG,yKAAA,gCACY,EAAa,6BACjB,EAAa,sBACpB,EAAa,aACvB,KAHqB,MAAM,CAAC,MAAM,EACjB,MAAM,CAAC,MAAM,EACpB,MAAM,CAAC,MAAM,EACvB;QACH,KAAK,OAAO;YACV,OAAO,GAAG,yKAAA,gCACY,EAAc,6BAClB,EAAc,sBACrB,EAAc,aACxB,KAHqB,MAAM,CAAC,OAAO,EAClB,MAAM,CAAC,OAAO,EACrB,MAAM,CAAC,OAAO,EACxB;QACH,KAAK,SAAS;YACZ,OAAO,GAAG,yKAAA,gCACY,EAAgB,6BACpB,EAAgB,sBACvB,EAAgB,aAC1B,KAHqB,MAAM,CAAC,SAAS,EACpB,MAAM,CAAC,SAAS,EACvB,MAAM,CAAC,SAAS,EAC1B;QACH,KAAK,KAAK;YACR,OAAO,GAAG,yKAAA,gCACY,EAAY,6BAChB,EAAY,sBACnB,EAAY,aACtB,KAHqB,MAAM,CAAC,KAAK,EAChB,MAAM,CAAC,KAAK,EACnB,MAAM,CAAC,KAAK,EACtB;QACH,KAAK,QAAQ;YACX,OAAO,GAAG,yKAAA,gCACY,EAAe,6BACnB,EAAe,sBACtB,EAAe,aACzB,KAHqB,MAAM,CAAC,QAAQ,EACnB,MAAM,CAAC,QAAQ,EACtB,MAAM,CAAC,QAAQ,EACzB;QACH;YACE,OAAO,EAAE,CAAA;KACZ;AACH,CAAC,CACF,CAAA"}

package/dist/Pill/Pill.types.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare type PillColor = 'blue' | 'cyan' | 'gray' | 'green' | 'magenta' | 'red' | 'yellow';
+export interface PillProps extends React.ComponentPropsWithoutRef<'span'> {
+    /**
+     * Controls the border, background and color of the Pill
+     * @defaultValue gray
+     * @since 10.19.0
+     */
+    color?: PillColor;
+}

package/dist/Pill/Pill.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.types.js","sourceRoot":"","sources":["../../src/Pill/Pill.types.ts"],"names":[],"mappings":""}

package/dist/Pill/index.d.ts

@@ -0,0 +1,2 @@
+export { Pill } from './Pill';
+export { PillColor, PillProps } from './Pill.types';

package/dist/Pill/index.js

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

package/dist/Pill/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Pill/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}