@project44-manifest/react
Version:
Manifest Design System react components
1,357 lines (1,329 loc) • 356 kB
JavaScript
// Bundled with Packemon: https://packemon.dev
// Platform: browser, Support: stable, Format: lib
'use strict';
const _excluded = ["as", "children", "className", "href", "css"],
_excluded2 = ["as", "children", "className", "css"],
_excluded3 = ["as", "children", "className", "css"],
_excluded4 = ["as", "children", "className", "css", "size", "src"],
_excluded5 = ["alt", "as", "children", "className", "css", "fallback", "size", "src"],
_excluded6 = ["as", "className", "css"],
_excluded7 = ["as", "children", "className", "css"],
_excluded8 = ["as", "children", "className", "css"],
_excluded9 = ["as", "children", "className", "css", "href"],
_excluded10 = ["as", "autoFocus", "children", "className", "css", "isDisabled", "endIcon", "href", "onClick", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "rel", "size", "startIcon", "variant", "target", "type"],
_excluded11 = ["as", "children", "className", "css", "isDisabled", "isAttached", "size", "variant"],
_excluded12 = ["className", "css", "size"],
_excluded13 = ["as", "className", "css", "icon"],
_excluded14 = ["as", "className", "css", "variant", "color"],
_excluded15 = ["className", "css", "orientation"],
_excluded16 = ["as", "className", "css"],
_excluded17 = ["as", "align", "className", "css", "gap", "justify", "orientation", "wrap"],
_excluded18 = ["as", "className", "css", "size"],
_excluded19 = ["as", "className", "css", "state", "loading", "noResultsChildren", "loadingText"],
_excluded20 = ["as", "className", "css", "showCalendar", "showRanges", "ranges"],
_excluded21 = ["as", "children", "className", "css"],
_excluded22 = ["as", "children", "className", "css"],
_excluded23 = ["as", "children", "className", "css"],
_excluded24 = ["as", "children", "className", "css"],
_excluded25 = ["children", "className", "in", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "style", "timeout"],
_excluded26 = ["children", "in", "duration", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "style", "timeout"],
_excluded27 = ["children", "className", "css", "helperText", "helperTextProps", "isRequired", "label", "labelProps", "orientation", "validationState"],
_excluded28 = ["as", "children", "className", "css"],
_excluded29 = ["children", "locale", "disableCSSBaseline", "style"],
_excluded30 = ["as", "children", "className", "css", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "onClose", "shouldCloseOnBlur", "shouldCloseOnInteractOutside"],
_excluded31 = ["as", "className", "css", "fixed", "maxWidth"],
_excluded32 = ["children", "className", "css"],
_excluded33 = ["as", "autoFocus", "children", "className", "css", "isActive", "isDisabled"],
_excluded34 = ["as", "boundaries", "children", "className", "css", "defaultPage", "getPaginationLabel", "getItemAriaLabel", "onChange", "nextLabel", "page", "previousLabel", "rowsPerPage", "siblings", "showLabel", "showPageNumbers", "totalRowCount"],
_excluded35 = ["data", "defaultColumn", "columns", "enableCheckboxForChildren", "enableExpandAll", "enableExpanding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableRowClick", "showCanExpandIcon", "expandAllButtonProps", "expandButtonProps", "initialState", "isLoading", "manualExpanding", "manualPagination", "manualSorting", "pageCount", "paginationProps", "footerProps", "selectAllCheckboxProps", "selectCheckboxProps", "rowCount", "state", "onExpandedChange", "onPaginationChange", "onRowSelectionChange", "onSortingChange", "onScroll", "onRowClick", "autoResetExpanded", "getSubRows"],
_excluded36 = ["as", "children", "className", "css", "isDismissable", "isKeyboardDismissDisabled", "isOpen", "onClose"],
_excluded37 = ["isOpen"],
_excluded38 = ["as", "children", "className", "css", "isDismissable", "onClose", "role"],
_excluded39 = ["isDismissable", "isKeyboardDismissDisabled", "isOpen", "onClose"],
_excluded40 = ["as", "children", "className", "css"],
_excluded41 = ["as", "children", "className", "css", "buttonGroupProps"],
_excluded42 = ["as", "buttonProps", "children", "className", "css", "typographyProps"],
_excluded43 = ["defaultOpen", "children", "closeOnSelect", "isOpen", "offset", "placement", "shouldFlip", "onOpenChange", "trigger", "type"],
_excluded44 = ["as", "className", "css"],
_excluded45 = ["children", "in", "duration", "onEnter", "onExit", "style", "timeout"],
_excluded46 = ["as", "className", "columnGap", "columns", "css", "flow", "gap", "rowGap", "rows"],
_excluded47 = ["area", "as", "className", "css", "column", "columnEnd", "columnStart", "order", "row", "rowEnd", "rowStart"],
_excluded48 = ["as", "children", "className", "css", "variant"],
_excluded49 = ["as", "autoFocus", "children", "className", "css", "isSelected", "variant", "onClick", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp"],
_excluded50 = ["as", "children", "className", "css", "localNavigationItemProps", "title"],
_excluded51 = ["as", "children", "className", "css"],
_excluded52 = ["as", "children", "className", "css", "endIcon", "startIcon", "label", "labelProps", "isSelected"],
_excluded53 = ["as", "children", "className", "css", "defaultExpanded", "iconProps", "isExpanded", "itemProps", "label", "labelProps", "onExpandedChange", "startIcon", "isSelected"],
_excluded54 = ["as", "className", "css", "gap", "orientation"],
_excluded55 = ["as", "children", "className", "css", "isCopyable", "isDisabled", "isRemovable", "label", "onRemove", "removeButtonProps", "startAdornment"],
_excluded56 = ["className", "children"],
_excluded57 = ["defaultOpen", "children", "delay", "isOpen", "isDisabled", "placement", "onOpenChange", "title", "trigger"],
_excluded58 = ["className", "helperTextProps", "customLocale", "inputProps", "inputRef", "labelProps", "onChange", "size"],
_excluded59 = ["as", "className", "colorScheme", "css", "icon", "isCollapsible", "label"],
_excluded60 = ["as", "className", "children", "css", "orientation"],
_excluded61 = ["as", "isFocusable"],
_excluded62 = ["as", "autoFocus", "className", "css", "label", "endAdornment", "startAdornment", "value"],
_excluded63 = ["as", "children", "className", "css", "defaultOpen", "isOpen", "onOpenChange"],
_excluded64 = ["as", "children", "className", "css"],
_excluded65 = ["as", "avatarProps", "children", "className", "css", "subTitle", "title"],
_excluded66 = ["as", "children", "className", "css", "logo"],
_excluded67 = ["className"],
_excluded68 = ["className", "isExpanded", "isSelected"],
_excluded69 = ["className"],
_excluded70 = ["as", "children", "className", "css", "isDense", "showHover", "onMouseEnter", "onMouseLeave"],
_excluded71 = ["as", "children", "className", "css"],
_excluded72 = ["as", "align", "children", "className", "css", "onMouseEnter"],
_excluded73 = ["as", "align", "children", "className", "css", "isActive", "isSortable", "sortDirection"],
_excluded74 = ["as", "children", "className", "css"],
_excluded75 = ["as", "children", "className", "css"],
_excluded76 = ["as", "children", "className", "css", "onMouseEnter", "onMouseLeave"],
_excluded77 = ["className", "helperTextProps", "inputProps", "inputRef", "labelProps", "onChange"],
_excluded78 = ["className", "helperTextProps", "inputProps", "inputRef", "labelProps", "onChange", "size"],
_excluded79 = ["action", "as", "children", "className", "css", "dismissButtonProps", "id", "isDismissable", "isVisible", "onDismiss", "description", "message", "variant"],
_excluded80 = ["as", "className", "css", "duration"],
_excluded81 = ["id", "visible"];
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
Object.defineProperty(exports, '__esModule', {
value: true
});
const collections = require('@react-stately/collections');
const React = require('react');
const jsxRuntime = require('react/jsx-runtime');
const reactStyles = require('@project44-manifest/react-styles');
const reactIcons = require('@project44-manifest/react-icons');
const button = require('@react-aria/button');
const focus = require('@react-aria/focus');
const interactions = require('@react-aria/interactions');
const clsx = require('clsx');
const isObject = require('lodash.isobject');
const overlays = require('@react-aria/overlays');
const tooltip$1 = require('@react-aria/tooltip');
const tooltip = require('@react-stately/tooltip');
const i18n = require('@react-aria/i18n');
const data = require('@react-stately/data');
const overlays$1 = require('@react-stately/overlays');
const calendar = require('@react-aria/calendar');
const calendar$1 = require('@react-stately/calendar');
const date = require('@internationalized/date');
const separator = require('@react-aria/separator');
const utils = require('@react-aria/utils');
const list = require('@react-stately/list');
const listbox = require('@react-aria/listbox');
const checkbox = require('@react-aria/checkbox');
const toggle = require('@react-stately/toggle');
const TransitionComponent = require('react-transition-group/Transition');
const combobox = require('@react-aria/combobox');
const combobox$1 = require('@react-stately/combobox');
const reactTable = require('@tanstack/react-table');
const ContentLoader = require('react-content-loader');
const utils$1 = require('@react-stately/utils');
const datepicker$1 = require('@react-aria/datepicker');
const datepicker = require('@react-stately/datepicker');
const dialog = require('@react-aria/dialog');
const menu = require('@react-aria/menu');
const menu$1 = require('@react-stately/menu');
const tree = require('@react-stately/tree');
const label = require('@react-aria/label');
const selection = require('@react-aria/selection');
const visuallyHidden = require('@react-aria/visually-hidden');
const numberfield$1 = require('@react-aria/numberfield');
const numberfield = require('@react-stately/numberfield');
const ReactDom = require('react-dom');
const radio$1 = require('@react-aria/radio');
const radio = require('@react-stately/radio');
const select$1 = require('@react-aria/select');
const select = require('@react-stately/select');
const _switch = require('@react-aria/switch');
const textfield = require('@react-aria/textfield');
const hotToast = require('react-hot-toast/headless');
const _interopDefault = e => e && e.__esModule ? e : {
default: e
};
function _interopNamespace(e) {
if (e && e.__esModule) return e;
const n = Object.create(null);
if (e) {
for (const k in e) {
if (k !== 'default') {
const d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: () => e[k]
});
}
}
}
n.default = e;
return Object.freeze(n);
}
const React__namespace = /*#__PURE__*/_interopNamespace(React);
const clsx__default = /*#__PURE__*/_interopDefault(clsx);
const isObject__default = /*#__PURE__*/_interopDefault(isObject);
const TransitionComponent__default = /*#__PURE__*/_interopDefault(TransitionComponent);
const ContentLoader__default = /*#__PURE__*/_interopDefault(ContentLoader);
const ReactDom__namespace = /*#__PURE__*/_interopNamespace(ReactDom);
const hotToast__default = /*#__PURE__*/_interopDefault(hotToast);
const StyledActionCard = reactStyles.styled('a', reactStyles.card, {
display: 'inline-block',
color: '$text-primary',
textDecoration: 'none'
});
const StyledActionCardBody = reactStyles.styled('div', {
px: '$large',
paddingBottom: '$large',
typography: '$body',
width: '100%'
});
const StyledActionCardHeader = reactStyles.styled('div', {
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
width: '100%',
p: '$large',
typography: '$title'
});
const StyledActionCardImage = reactStyles.styled('div', {
display: 'block',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
objectFit: 'cover',
variants: {
size: {
large: {
height: reactStyles.pxToRem(180),
minWidth: reactStyles.pxToRem(352)
},
small: {
height: reactStyles.pxToRem(130),
minWidth: reactStyles.pxToRem(320)
}
}
},
defaultVariants: {
size: 'large'
}
});
const ActionCard = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
href = props.href,
css = props.css,
other = _objectWithoutProperties(props, _excluded);
const className = reactStyles.cx('manifest-action-card', classNameProp);
return /*#__PURE__*/jsxRuntime.jsx(StyledActionCard, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: css,
href: href,
children: children
}));
});
ActionCard.displayName = 'ActionCard';
/* -------------------------------------------------------------------------------------------------
* ActionCardBody
* -----------------------------------------------------------------------------------------------*/
const ActionCardBody = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
other = _objectWithoutProperties(props, _excluded2);
const className = reactStyles.cx('manifest-action-card-body', classNameProp);
return /*#__PURE__*/jsxRuntime.jsx(StyledActionCardBody, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: css,
children: children
}));
});
ActionCardBody.displayName = 'ActionCardBody';
/* -------------------------------------------------------------------------------------------------
* ActionCardHeader
* -----------------------------------------------------------------------------------------------*/
const ActionCardHeader = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
other = _objectWithoutProperties(props, _excluded3);
const className = reactStyles.cx('manifest-action-card-header', classNameProp);
return /*#__PURE__*/jsxRuntime.jsxs(StyledActionCardHeader, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: css,
children: [children, /*#__PURE__*/jsxRuntime.jsx(reactIcons.ArrowRight, {
"aria-hidden": true,
className: "manifest-action-card-header__icon"
})]
}));
});
ActionCardHeader.displayName = 'ActionCardHeader';
/* -------------------------------------------------------------------------------------------------
* ActionCardImage
* -----------------------------------------------------------------------------------------------*/
const ActionCardImage = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
_props$size = props.size,
size = _props$size === void 0 ? 'large' : _props$size,
src = props.src,
other = _objectWithoutProperties(props, _excluded4);
const className = reactStyles.cx('manifest-action-card-image', classNameProp, {
[`manifest-action-card-image--${size}`]: size
});
return /*#__PURE__*/jsxRuntime.jsx(StyledActionCardImage, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: _objectSpread(_objectSpread({}, css), {}, {
backgroundImage: `url(${src})`
}),
size: size
}));
});
ActionCardImage.displayName = 'ActionCardImage';
const StyledAvatarImage = reactStyles.styled('img', {
borderRadius: 'inherit',
boxSizing: 'border-box',
height: '100%',
objectFit: 'cover',
verticalAlign: 'middle',
width: '100%'
});
const StyledAvatarFallback = reactStyles.styled('span', {
alignItems: 'center',
color: 'inherit',
display: 'flex',
fontWeight: '$semibold',
letterSpacing: '$medium',
height: '100%',
justifyContent: 'center',
width: '100%'
});
const StyledAvatar = reactStyles.styled('div', {
alignItems: 'center',
backgroundColor: '$background-secondary',
borderRadius: '$full',
boxSizing: 'border-box',
color: '$text-secondary',
display: 'flex',
justifyContent: 'center',
outline: 'none',
overflow: 'hidden',
verticalAlign: 'middle',
variants: {
size: {
medium: {
minHeight: reactStyles.pxToRem(40),
minWidth: reactStyles.pxToRem(40),
size: reactStyles.pxToRem(40),
[`& ${StyledAvatarFallback}`]: {
fontSize: '$small',
lineHeight: '$medium'
}
},
small: {
minHeight: reactStyles.pxToRem(28),
minWidth: reactStyles.pxToRem(28),
size: reactStyles.pxToRem(28),
[`& ${StyledAvatarFallback}`]: {
fontSize: '$x-small',
lineHeight: reactStyles.pxToRem(14)
}
}
}
},
defaultVariants: {
size: 'medium'
}
});
const Avatar = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
const alt = props.alt,
as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
fallback = props.fallback,
_props$size2 = props.size,
size = _props$size2 === void 0 ? 'medium' : _props$size2,
_props$src = props.src,
src = _props$src === void 0 ? '' : _props$src,
other = _objectWithoutProperties(props, _excluded5);
const _React__namespace$use = React__namespace.useState(false),
_React__namespace$use2 = _slicedToArray(_React__namespace$use, 2),
mounted = _React__namespace$use2[0],
setMounted = _React__namespace$use2[1];
const _React__namespace$use3 = React__namespace.useState('pending'),
_React__namespace$use4 = _slicedToArray(_React__namespace$use3, 2),
status = _React__namespace$use4[0],
setStatus = _React__namespace$use4[1];
const handleError = React__namespace.useCallback(() => void setStatus('error'), []);
const handleLoad = React__namespace.useCallback(() => void setStatus('loaded'), []);
const classes = reactStyles.cx('manifest-avatar', classNameProp, {
[`manifest-avatar--${size}`]: size,
[`manifest-avatar--${status}`]: status
});
// Reset status to pending if src changes.
React__namespace.useEffect(() => {
setStatus('pending');
}, [src]);
// Ensure that the image is only loaded on the client (ssr).
React__namespace.useEffect(() => {
setMounted(true);
}, []);
return /*#__PURE__*/jsxRuntime.jsxs(StyledAvatar, _objectSpread(_objectSpread({
ref: forwardedRef,
as: as,
className: classes,
css: css,
size: size
}, other), {}, {
children: [src && mounted && status !== 'error' && /*#__PURE__*/jsxRuntime.jsx(StyledAvatarImage, {
alt: alt,
className: "manifest-avatar__image",
src: src,
onError: handleError,
onLoad: handleLoad
}), (!src || status === 'error') && /*#__PURE__*/jsxRuntime.jsx(StyledAvatarFallback, {
className: "manifest-avatar__fallback",
children: fallback
})]
}));
});
Avatar.displayName = 'Avatar';
const StyledBox = reactStyles.styled('div', {
boxSizing: 'border-box',
margin: 0,
minWidth: 0
});
const Box = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
const as = props.as,
classNameProp = props.className,
css = props.css,
other = _objectWithoutProperties(props, _excluded6);
return /*#__PURE__*/jsxRuntime.jsx(StyledBox, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: reactStyles.cx('manifest-box', classNameProp),
css: css
}));
});
Box.displayName = 'Box';
const StyledLink = reactStyles.styled('a', {
alignItems: 'baseline',
color: '$text-primary',
display: 'inline-flex',
fontSize: '$medium',
fontWeight: '$semibold',
letterSpacing: '$medium',
lineHeight: '$medium',
textDecoration: 'underline',
width: 'fitContent'
});
const Link = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
other = _objectWithoutProperties(props, _excluded7);
const className = reactStyles.cx('manifest-link', classNameProp);
return /*#__PURE__*/jsxRuntime.jsx(StyledLink, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: css,
children: children
}));
});
Link.toString = () => '.manifest-link';
Link.displayName = 'Link';
const StyledBreadcrumb = reactStyles.styled('nav', {
overflowX: 'auto'
});
const StyledBreadcrumbList = reactStyles.styled('ol', {
d: 'flex',
listStyle: 'none',
margin: 0,
p: 0
});
const StyledBreadcrumbItem = reactStyles.styled('li', {
d: 'flex',
alignItems: 'center',
color: '$text-secondary',
[`& ${Link}`]: {
typography: '$subtext',
color: 'inherit',
textDecoration: 'none'
},
'&:last-child .manifest-icon': {
display: 'none'
}
});
const Breadcrumb = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
other = _objectWithoutProperties(props, _excluded8);
const className = reactStyles.cx('manifest-breadcrumb', classNameProp);
return /*#__PURE__*/jsxRuntime.jsx(StyledBreadcrumb, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: css,
children: /*#__PURE__*/jsxRuntime.jsx(StyledBreadcrumbList, {
className: "manifest-breadcrumb__list",
children: children
})
}));
});
Breadcrumb.displayName = 'Breadcrumb';
/* -------------------------------------------------------------------------------------------------
* BreadcrumbItem
* -----------------------------------------------------------------------------------------------*/
const BreadcrumbItem = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
href = props.href,
other = _objectWithoutProperties(props, _excluded9);
const className = reactStyles.cx('manifest-breadcrumb-item', classNameProp);
return /*#__PURE__*/jsxRuntime.jsxs(StyledBreadcrumbItem, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: css,
children: [/*#__PURE__*/jsxRuntime.jsx(Link, {
href: href,
children: children
}), /*#__PURE__*/jsxRuntime.jsx(reactIcons.ChevronRight, {
"aria-hidden": true,
className: "manifest-breadcrumb-item__icon",
size: "small"
})]
}));
});
BreadcrumbItem.displayName = 'BreadcrumbItem';
/**
* Creates react context with a provider and hook.
*/
function createContext(options = {}) {
const name = options.name;
const Context = /*#__PURE__*/React__namespace.createContext(undefined);
Context.displayName = name;
const useContext = () => React__namespace.useContext(Context);
return [Context.Provider, useContext, Context];
}
// Will be fixed when this is moved into its own package
// eslint-disable-next-line import/no-unresolved
/**
* Pulled directly from react-aria for composing our own multi-select state for the combobox component.
*
* https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/combobox/src/useComboBoxState.ts
*/
function filterNodes(nodes, inputValue, filter) {
const filteredNode = [];
for (const node of nodes) {
if (node.type === 'section' && node.hasChildNodes) {
const filtered = filterNodes(node.childNodes, inputValue, filter);
if ([...filtered].length > 0) {
filteredNode.push(_objectSpread(_objectSpread({}, node), {}, {
childNodes: filtered
}));
}
} else if (node.type !== 'section' && filter(node.textValue, inputValue)) {
filteredNode.push(_objectSpread({}, node));
}
}
return filteredNode;
}
function filterCollection(collection, inputValue, filter) {
return new list.ListCollection(filterNodes(collection, inputValue, filter));
}
/**
* Merge all callbacks into a single callback function.
*/
function mergeCallbacks(...fns) {
return (...args) => {
for (const fn of fns) {
if (typeof fn === 'function') {
fn?.(...args);
}
}
};
}
/**
* Merge multiple sets of props together
*
* Adapted from react-aria to support style objects
* https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/utils/src/mergeProps.ts
*/
function mergeProps(...args) {
const result = _objectSpread({}, args[0]);
for (let i = 1; i < args.length; i += 1) {
const props = args[i];
for (const prop in props) {
if (Object.prototype.hasOwnProperty.call(props, prop)) {
const mergedValue = result[prop];
const propValue = props[prop];
// Merge classNames
if (prop === 'className' && typeof mergedValue === 'string' && typeof propValue === 'string') {
result[prop] = clsx__default.default(mergedValue, propValue);
// Merge styles
} else if (prop === 'style' && isObject__default.default(mergedValue) && isObject__default.default(propValue)) {
result[prop] = _objectSpread(_objectSpread({}, mergedValue), propValue);
// Merge event handlers that start with `on`
} else if (typeof mergedValue === 'function' && typeof propValue === 'function' && /^on[A-Z]/.test(prop)) {
result[prop] = mergeCallbacks(mergedValue, propValue);
} else {
result[prop] = propValue ?? mergedValue;
}
}
}
}
return result;
}
function mergeRefs(...refs) {
return value => {
for (const ref of refs) {
if (typeof ref === 'function') {
ref(value);
} else if (typeof ref === 'object' && ref !== null && 'current' in ref) {
ref.current = value;
}
}
};
}
function noop() {}
const reflow = node => node.scrollTop;
const StyledButton$1 = reactStyles.styled('button', {
alignItems: 'center',
appearance: 'none',
backgroundColor: 'transparent',
border: 'none',
borderRadius: '$small',
boxShadow: '$small',
boxSizing: 'border-box',
color: '$text-primary',
cursor: 'pointer',
display: 'inline-flex',
fontFamily: 'inherit',
fontSize: '$small',
fontWeight: '$semibold',
justifyContent: 'center',
letterSpacing: '$medium',
lineHeight: '$small',
outline: 'none',
position: 'relative',
px: reactStyles.pxToRem(12),
userSelect: 'none',
whiteSpace: 'nowrap',
variants: {
hasEndIcon: {
true: {
paddingRight: '$small'
}
},
hasStartIcon: {
true: {
paddingLeft: '$small'
}
},
isDisabled: {
true: {
cursor: 'not-allowed',
pointerEvents: 'none',
opacity: 0.57,
boxShadow: 'none'
}
},
isFocusVisible: {
true: {
'&:after': {
backgroundColor: 'transparent',
border: '2px solid $colors$palette-indigo-200',
// TODO: replace with design token once its defined.s
borderRadius: '4px',
bottom: '-4px',
content: '',
display: 'block',
left: '-4px',
position: 'absolute',
right: '-4px',
top: '-4px'
}
},
false: {}
},
isHovered: {
true: {}
},
isPressed: {
true: {}
},
variant: {
danger: {
backgroundColor: '$palette-red-500',
color: '$palette-white'
},
brand: {
background: '$brand-gradient',
color: '$palette-white'
},
primary: {
backgroundColor: '$primary-default',
color: '$palette-white'
},
secondary: {
backgroundColor: '$palette-white'
},
tertiary: {
backgroundColor: 'transparent',
boxShadow: 'none'
}
},
size: {
medium: {
height: reactStyles.pxToRem(40),
py: '$small',
'.material-icons': {
fontSize: '$x-large'
}
},
small: {
height: reactStyles.pxToRem(32),
py: reactStyles.pxToRem(6),
'.material-icons': {
fontSize: reactStyles.pxToRem(16)
}
}
}
},
compoundVariants: [{
isDisabled: true,
variant: 'secondary',
css: {
borderWidth: '$small',
borderStyle: 'solid',
borderColor: '$border-disabled'
}
}, {
isHovered: true,
variant: 'primary',
css: {
backgroundColor: '$primary-hover'
}
}, {
isHovered: true,
variant: 'secondary',
css: {
backgroundColor: '$palette-grey-100'
}
}, {
isHovered: true,
variant: 'tertiary',
css: {
backgroundColor: '$palette-grey-100'
}
}, {
isHovered: true,
variant: 'brand',
css: {
background: '$brand-hover'
}
}, {
isHovered: true,
variant: 'danger',
css: {
background: 'linear-gradient(0deg, rgba(9, 21, 33, 0.15), rgba(9, 21, 33, 0.15)), $colors$palette-red-500'
}
}, {
isPressed: true,
variant: 'primary',
css: {
backgroundColor: '$primary-active',
boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)'
}
}, {
isPressed: true,
variant: 'secondary',
css: {
backgroundColor: '$palette-grey-300',
boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)'
}
}, {
isPressed: true,
variant: 'tertiary',
css: {
backgroundColor: '$palette-grey-300'
}
}, {
isPressed: true,
variant: 'brand',
css: {
background: '$brand-active'
}
}, {
isPressed: true,
variant: 'danger',
css: {
background: 'linear-gradient(0deg, rgba(9, 21, 33, 0.3), rgba(9, 21, 33, 0.3)), $colors$palette-red-500',
boxShadow: 'inset 0px 1px 1px rgba(5, 10, 26, 0.25)'
}
}],
defaultVariants: {
size: 'medium',
variant: 'primary'
}
});
const StyledButtonIcon = reactStyles.styled('span', {
alignSelf: 'center',
display: 'inline-flex',
flexShrink: 0,
variants: {
placement: {
end: {
marginLeft: '$small',
marginRight: '-$x-small'
},
start: {
marginLeft: '-$x-small',
marginRight: '$small'
}
},
size: {
medium: {
fontSize: '$x-large'
},
small: {
fontSize: reactStyles.pxToRem(18)
}
}
}
});
const StyledButtonGroup = reactStyles.styled('div', {
boxSizing: 'border-box',
display: 'inline-flex',
variants: {
isAttached: {
true: {
'> *:first-of-type:not(:last-of-type)': {
borderBottomRightRadius: 0,
borderTopRightRadius: 0
},
'> *:not(:first-of-type):not(:last-of-type)': {
borderRadius: 0
},
'> *:not(:first-of-type):last-of-type': {
borderBottomLeftRadius: 0,
borderTopLeftRadius: 0
}
},
false: {
'& > *:not(style) ~ *:not(style)': {
marginLeft: '$small'
}
}
}
},
defaultVariants: {
isAttached: false
}
});
const _createContext = createContext({
name: 'ButtonGroupContext'
}),
_createContext2 = _slicedToArray(_createContext, 2),
ButtonGroupProvider = _createContext2[0],
useButtonGroup = _createContext2[1];
/* -------------------------------------------------------------------------------------------------
* Button
* -----------------------------------------------------------------------------------------------*/
const Button = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
const group = useButtonGroup();
const as = props.as,
autoFocus = props.autoFocus,
children = props.children,
classNameProp = props.className,
css = props.css,
_props$isDisabled = props.isDisabled,
isDisabled = _props$isDisabled === void 0 ? group?.isDisabled : _props$isDisabled,
endIcon = props.endIcon,
href = props.href,
onClick = props.onClick,
onPress = props.onPress,
onPressStart = props.onPressStart,
onPressEnd = props.onPressEnd,
onPressChange = props.onPressChange,
onPressUp = props.onPressUp,
rel = props.rel,
_props$size3 = props.size,
size = _props$size3 === void 0 ? group?.size ?? 'medium' : _props$size3,
startIcon = props.startIcon,
_props$variant = props.variant,
variant = _props$variant === void 0 ? group?.variant ?? 'primary' : _props$variant,
target = props.target,
_props$type = props.type,
type = _props$type === void 0 ? 'button' : _props$type,
other = _objectWithoutProperties(props, _excluded10);
const buttonRef = React__namespace.useRef(null);
const _button$useButton = button.useButton(_objectSpread(_objectSpread({}, other), {}, {
elementType: typeof as === 'string' ? as : 'button',
href,
isDisabled,
onClick,
onPress,
onPressStart,
onPressEnd,
onPressChange,
onPressUp,
rel,
target,
type
}), buttonRef),
buttonProps = _button$useButton.buttonProps,
isPressed = _button$useButton.isPressed;
const _focus$useFocusRing = focus.useFocusRing({
autoFocus
}),
isFocusVisible = _focus$useFocusRing.isFocusVisible,
focusProps = _focus$useFocusRing.focusProps;
const _interactions$useHove = interactions.useHover({
isDisabled
}),
isHovered = _interactions$useHove.isHovered,
hoverProps = _interactions$useHove.hoverProps;
const classnames = reactStyles.cx('manifest-button', classNameProp, {
'manifest-button--disabled': isDisabled,
[`manifest-button--${size}`]: size,
[`manifest-button--${variant}`]: variant
});
return /*#__PURE__*/jsxRuntime.jsxs(StyledButton$1, _objectSpread(_objectSpread({}, mergeProps(buttonProps, focusProps, hoverProps, other)), {}, {
ref: mergeRefs(buttonRef, forwardedRef),
as: as,
className: classnames,
css: css,
isDisabled: isDisabled,
isFocusVisible: isFocusVisible,
isHovered: isHovered,
isPressed: isPressed,
size: size,
variant: variant,
children: [startIcon && /*#__PURE__*/jsxRuntime.jsx(StyledButtonIcon, {
className: reactStyles.cx('manifest-button__icon', 'manifest-button__icon--start'),
placement: "start",
size: size,
children: startIcon
}), children, endIcon && /*#__PURE__*/jsxRuntime.jsx(StyledButtonIcon, {
className: reactStyles.cx('manifest-button__icon', 'manifest-button__icon--end'),
placement: "end",
size: size,
children: endIcon
})]
}));
});
Button.displayName = 'Button';
/* -------------------------------------------------------------------------------------------------
* ButtonGroup
* -----------------------------------------------------------------------------------------------*/
const ButtonGroup = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
const as = props.as,
children = props.children,
classNameProp = props.className,
css = props.css,
isDisabled = props.isDisabled,
isAttached = props.isAttached,
size = props.size,
variant = props.variant,
other = _objectWithoutProperties(props, _excluded11);
const context = React__namespace.useMemo(() => ({
isDisabled,
size,
variant
}), [isDisabled, size, variant]);
const className = reactStyles.cx('manifest-button-group', {
'manifest-button-group--attached': isAttached
}, classNameProp);
return /*#__PURE__*/jsxRuntime.jsx(StyledButtonGroup, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
as: as,
className: className,
css: css,
isAttached: isAttached,
children: /*#__PURE__*/jsxRuntime.jsx(ButtonGroupProvider, {
value: context,
children: children
})
}));
});
ButtonGroup.displayName = 'ButtonGroup';
/* -------------------------------------------------------------------------------------------------
* IconButton
* -----------------------------------------------------------------------------------------------*/
const IconButton = /*#__PURE__*/React__namespace.forwardRef((props, forwardedRef) => {
const classNameProp = props.className,
css = props.css,
_props$size4 = props.size,
size = _props$size4 === void 0 ? 'medium' : _props$size4,
other = _objectWithoutProperties(props, _excluded12);
return /*#__PURE__*/jsxRuntime.jsx(Button, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
className: reactStyles.cx('manifest-icon-button', classNameProp),
css: _objectSpread(_objectSpread({}, css), {}, {
justifyContent: 'center',
px: size === 'small' ? reactStyles.pxToRem(7) : '$small'
}),
size: size
}));
});
IconButton.displayName = 'IconButton';
/**
* Creates a type-safe component with the `as` prop and `React.forwardRef`.
*
* Inspired by ariakit and chakra-ui.
*/
function createComponent(
// The function is being removed in favor of our Polymorphic types.
// eslint-disable-next-line @typescript-eslint/no-explicit-any
component) {
return /*#__PURE__*/React__namespace.forwardRef(component);
}
const useStyles$t = reactStyles.css({
alignSelf: 'center',
userSelect: 'none'
});
const Icon = createComponent((props, forwardedRef) => {
const _props$as = props.as,
Comp = _props$as === void 0 ? 'span' : _props$as,
classNameProp = props.className,
css = props.css,
icon = props.icon,
other = _objectWithoutProperties(props, _excluded13);
const _useStyles$t = useStyles$t({
css
}),
className = _useStyles$t.className;
return /*#__PURE__*/jsxRuntime.jsx(Comp, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
className: reactStyles.cx(className, classNameProp, 'manifest-icon', 'material-icons'),
children: icon
}));
});
Icon.displayName = 'Icon';
const useStyles$s = reactStyles.css({
margin: '0',
variants: {
paragraph: {
true: {
marginBottom: '$medium'
}
},
variant: {
display: {
typography: '$display'
},
heading: {
typography: '$heading'
},
title: {
typography: '$title'
},
subtitle: {
typography: '$subtitle'
},
body: {
typography: '$body'
},
bodyBold: {
typography: '$body-bold'
},
subtext: {
typography: '$subtext'
},
subtextBold: {
typography: '$subtext-bold'
},
caption: {
typography: '$caption'
},
captionBold: {
typography: '$caption-bold'
}
},
color: {
primary: {
color: '$text-primary'
},
secondary: {
color: '$text-secondary'
},
tertiary: {
color: '$text-tertiary'
}
}
},
defaultVariants: {
variant: 'body'
}
});
const Typography = createComponent((props, forwardedRef) => {
const _props$as2 = props.as,
Comp = _props$as2 === void 0 ? 'span' : _props$as2,
classNameProp = props.className,
css = props.css,
_props$variant2 = props.variant,
variant = _props$variant2 === void 0 ? 'body' : _props$variant2,
_props$color = props.color,
color = _props$color === void 0 ? undefined : _props$color,
other = _objectWithoutProperties(props, _excluded14);
const _useStyles$s = useStyles$s({
css,
color,
variant
}),
className = _useStyles$s.className;
const classes = reactStyles.cx(className, classNameProp, {
'manifest-typography': true,
[`manifest-typography--${variant}`]: variant
});
return /*#__PURE__*/jsxRuntime.jsx(Comp, _objectSpread(_objectSpread({}, other), {}, {
ref: forwardedRef,
className: classes
}));
});
Typography.displayName = 'Typography';
const useStyles$r = reactStyles.css({
alignItems: 'center',
display: 'flex',
justifyContent: 'space-between',
margin: 0,
padding: '$small $medium',
flexDirection: 'row',
'.manifest-calendar-header__text': {
color: '$text-secondary',
fontWeight: '$bold'
}
});
/* @private */
function CalendarHeader(props) {
const nextButtonProps = props.nextButtonProps,
prevButtonProps = props.prevButtonProps,
state = props.state;
const _i18n$useLocale = i18n.useLocale(),
direction = _i18n$useLocale.direction;
const currentMonth = state.visibleRange.start;
const dateFormatter = i18n.useDateFormatter({
month: 'long',
year: 'numeric',
era: currentMonth.calendar.identifier === 'gregory' && currentMonth.era === 'BC' ? 'short' : undefined,
calendar: currentMonth.calendar.identifier,
timeZone: state.timeZone
});
const _useStyles$r = useStyles$r(),
className = _useStyles$r.className;
return /*#__PURE__*/jsxRuntime.jsxs("div", {
className: reactStyles.cx(className, 'manifest-calendar-header'),
children: [/*#__PURE__*/jsxRuntime.jsx(IconButton, _objectSpread(_objectSpread({}, prevButtonProps), {}, {
className: "manifest-calendar-header__previous-button",
size: "small",
variant: "tertiary",
children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
icon: direction === 'rtl' ? 'chevron_right' : 'chevron_left'
})
})), /*#__PURE__*/jsxRuntime.jsx(Typography, {
className: "manifest-calendar-header__text",
variant: "subtext",
children: dateFormatter.format(state.visibleRange.start.toDate(state.timeZone))
}), /*#__PURE__*/jsxRuntime.jsx(IconButton, _objectSpread(_objectSpread({}, nextButtonProps), {}, {
className: "manifest-calendar-header__next-button",
size: "small",
variant: "tertiary",
children: /*#__PURE__*/jsxRuntime.jsx(Icon, {
icon: direction === 'rtl' ? 'chevron_left' : 'chevron_right'
})
}))]
});
}
CalendarHeader.displayName = 'CalendarHeader';
const calendarCellUnderlineLight = {
'.manifest-calendar-cell__text': {
'&::after': {
content: '""',
backgroundColor: 'white',
borderRadius: '$full',
height: 1,
position: 'absolute',
top: reactStyles.pxToRem(23),
width: 12
}
}
};
const useStyles$q = reactStyles.css({
height: reactStyles.pxToRem(32),
textAlign: 'center',
padding: '$x-small 0',
position: 'relative',
width: reactStyles.pxToRem(44),
'&:last-of-type': {
'.manifest-calendar-cell__button': {
borderTopRightRadius: reactStyles.pxToRem(4),
borderBottomRightRadius: reactStyles.pxToRem(4)
}
},
'&:first-of-type': {
'.manifest-calendar-cell__button': {
borderTopLeftRadius: reactStyles.pxToRem(4),
borderBottomLeftRadius: reactStyles.pxToRem(4)
}
},
'.manifest-calendar-cell__button': {
background: 'transparent',
boxSizing: 'border-box',
cursor: 'pointer',
display: 'block',
height: reactStyles.pxToRem(28),
margin: 0,
outline: 'none',
padding: 0,
position: 'relative',
width: '100%'
},
'.manifest-calendar-cell__text': {
alignItems: 'center',
backgroundColor: 'transparent',
borderRadius: reactStyles.pxToRem(4),
color: '$text-primary',
display: 'flex',
justifyContent: 'center',
left: reactStyles.pxToRem(10),
outline: 'none',
position: 'absolute',
top: 0,
typography: '$caption',
size: reactStyles.pxToRem(28),
whiteSpace: 'nowrap'
},
variants: {
isDisabled: {
true: {
'.manifest-calendar-cell__button': {
cursor: 'default',
pointerEvents: 'none'
},
'.manifest-calendar-cell__text': {
color: '$text-disabled'
}
}
},
isFocusVisible: {
true: {
'.manifest-calendar-cell__text': {
boxShadow: '0 0 0 2px $colors$palette-indigo-200'
}
},
false: {
'.manifest-calendar-cell__text': {
boxShadow: 'none'
}
}
},
isRangeEnd: {
true: {}
},
isRangeSelection: {
true: {}
},
isRangeStart: {
true: {}
},
isSelected: {
true: {}
},
isSelectionEnd: {
true: {}
},
isSelectionStart: {
true: {}
},
isToday: {
true: {
'.manifest-calendar-cell__text': {
'&::after': {
content: '""',
backgroundColor: '$text-primary',
borderRadius: '$full',
height: 1,
position: 'absolute',
top: reactStyles.pxToRem(23),
width: 12
}
}
}
},
isUnavailable: {
true: {
'.manifest-calendar-cell__text': {
color: '$text-disabled'
}
}
}
},
compoundVariants: [{
isSelected: true,
isRangeSelection: false,
css: {
'.manifest-calendar-cell__button': {
'&::after': {
display: 'none'
}
},
'.manifest-calendar-cell__text': {
backgroundColor: '$primary-default',
borderColor: '$palette-indigo-100',
color: '$palette-white'
}
}
}, {
isSelected: true,
isRangeSelection: true,
isSelectionStart: true,
css: {
'.manifest-calendar-cell__button': {
background: 'linear-gradient(to left, $colors$palette-indigo-100 50%, transparent 50%)',
'&::after': {
display: 'none'
}
},
'.manifest-calendar-cell__text': {
backgroundColor: '$primary-default',
borderColor: '$palette-indigo-100',
color: '$text-contrast'
}
}
}, {
isSelected: true,
isRangeSelection: true,
isSelectionEnd: true,
css: {
'.manifest-calendar-cell__button': {
background: 'linear-gradient(to right, $colors$palette-indigo-100 50%, transparent 5