@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
12,530 lines • 358 kB
JavaScript
'use client';
'use strict';
var react = require('react');
var styled = require('styled-components');
var edsTokens = require('@equinor/eds-tokens');
var edsUtils = require('@equinor/eds-utils');
var jsxRuntime = require('react/jsx-runtime');
var reactDom = require('react-dom');
var react$1 = require('@floating-ui/react');
var edsIcons = require('@equinor/eds-icons');
var downshift = require('downshift');
var reactVirtual = require('@tanstack/react-virtual');
var reactAria = require('react-aria');
var calendar = require('@react-stately/calendar');
var date = require('@internationalized/date');
var datepicker = require('@react-stately/datepicker');
var utils = require('@react-aria/utils');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var styled__default = /*#__PURE__*/_interopDefault(styled);
const {
typography: {
navigation: {
button: buttonTypography
}
},
colors: {
interactive: {
disabled__text: {
rgba: disabledTextColor$3
},
disabled__border: {
rgba: disabledBorderColor$2
},
disabled__fill: {
rgba: disabledColor$3
}
}
},
spacings: {
comfortable: {
medium: medium$7
}
},
shape: {
button: {
minHeight: buttonHeight,
borderRadius: buttonBorderRadius$2
},
_modes: {
compact: {
button: {
minHeight: compactButtonHeight
}
}
}
},
interactions: {
focused: outline
},
clickbounds: {
default__base: clicboundHeight$2,
compact__standard: compactClickboundHeight$2
}
} = edsTokens.tokens;
const button = {
background: 'transparent',
height: `var(--eds_button__height, ${buttonHeight})`,
typography: {
...buttonTypography,
textAlign: 'center',
fontSize: `var(--eds_button__font_size, ${buttonTypography.fontSize})`
},
border: {
type: 'border',
width: `var(--eds_button__border_width, 1px)`,
color: 'transparent',
radius: `var(--eds_button__radius, ${buttonBorderRadius$2})`,
style: 'solid'
},
spacings: {
top: 'var(--eds_button__padding_y, 0)',
bottom: 'var(--eds_button__padding_y, 0)',
left: `var(--eds_button__padding_x, ${medium$7})`,
right: `var(--eds_button__padding_x, ${medium$7})`
},
clickbound: {
height: clicboundHeight$2,
width: '100%',
offset: {
top: `${(parseInt(clicboundHeight$2) - parseInt(buttonHeight)) / 2 + 1}px`,
left: '0'
}
},
entities: {
icon: {
height: 'var(--eds_button__icon__size, 24px)',
width: 'var(--eds_button__icon__size, 24px)'
}
},
states: {
hover: {
border: {
type: 'border',
width: '1px',
color: 'transparent',
radius: `var(--eds_button__radius, ${buttonBorderRadius$2})`,
style: 'solid'
}
},
focus: {
outline: {
type: 'outline',
offset: '3px',
style: 'dashed',
color: outline.color,
width: outline.width
}
},
disabled: {
background: disabledColor$3,
border: {
type: 'border',
width: '1px',
color: disabledBorderColor$2,
style: 'solid'
},
typography: {
...buttonTypography,
color: disabledTextColor$3,
textAlign: 'center'
}
}
},
modes: {
compact: {
height: `var(--eds_button__height_compact, ${compactButtonHeight})`,
spacings: {
top: 'var(--eds_button__padding_y_compact, 0)',
bottom: 'var(--eds_button__padding_y_compact, 0)'
},
clickbound: {
height: compactClickboundHeight$2,
width: '100%',
offset: {
top: `${(parseInt(compactClickboundHeight$2) - parseInt(compactButtonHeight)) / 2 + 1}px`,
left: '0'
}
}
}
}
};
function _isPlaceholder(a) {
return a != null && typeof a === 'object' && a['@@functional/placeholder'] === true;
}
/**
* Optimized internal one-arity curry function.
*
* @private
* @category Function
* @param {Function} fn The function to curry.
* @return {Function} The curried function.
*/
function _curry1(fn) {
return function f1(a) {
if (arguments.length === 0 || _isPlaceholder(a)) {
return f1;
} else {
return fn.apply(this, arguments);
}
};
}
/**
* Optimized internal two-arity curry function.
*
* @private
* @category Function
* @param {Function} fn The function to curry.
* @return {Function} The curried function.
*/
function _curry2(fn) {
return function f2(a, b) {
switch (arguments.length) {
case 0:
return f2;
case 1:
return _isPlaceholder(a) ? f2 : _curry1(function (_b) {
return fn(a, _b);
});
default:
return _isPlaceholder(a) && _isPlaceholder(b) ? f2 : _isPlaceholder(a) ? _curry1(function (_a) {
return fn(_a, b);
}) : _isPlaceholder(b) ? _curry1(function (_b) {
return fn(a, _b);
}) : fn(a, b);
}
};
}
/**
* Optimized internal three-arity curry function.
*
* @private
* @category Function
* @param {Function} fn The function to curry.
* @return {Function} The curried function.
*/
function _curry3(fn) {
return function f3(a, b, c) {
switch (arguments.length) {
case 0:
return f3;
case 1:
return _isPlaceholder(a) ? f3 : _curry2(function (_b, _c) {
return fn(a, _b, _c);
});
case 2:
return _isPlaceholder(a) && _isPlaceholder(b) ? f3 : _isPlaceholder(a) ? _curry2(function (_a, _c) {
return fn(_a, b, _c);
}) : _isPlaceholder(b) ? _curry2(function (_b, _c) {
return fn(a, _b, _c);
}) : _curry1(function (_c) {
return fn(a, b, _c);
});
default:
return _isPlaceholder(a) && _isPlaceholder(b) && _isPlaceholder(c) ? f3 : _isPlaceholder(a) && _isPlaceholder(b) ? _curry2(function (_a, _b) {
return fn(_a, _b, c);
}) : _isPlaceholder(a) && _isPlaceholder(c) ? _curry2(function (_a, _c) {
return fn(_a, b, _c);
}) : _isPlaceholder(b) && _isPlaceholder(c) ? _curry2(function (_b, _c) {
return fn(a, _b, _c);
}) : _isPlaceholder(a) ? _curry1(function (_a) {
return fn(_a, b, c);
}) : _isPlaceholder(b) ? _curry1(function (_b) {
return fn(a, _b, c);
}) : _isPlaceholder(c) ? _curry1(function (_c) {
return fn(a, b, _c);
}) : fn(a, b, c);
}
};
}
function _has(prop, obj) {
return Object.prototype.hasOwnProperty.call(obj, prop);
}
function _isObject(x) {
return Object.prototype.toString.call(x) === '[object Object]';
}
/**
* Creates a new object with the own properties of the two provided objects. If
* a key exists in both objects, the provided function is applied to the key
* and the values associated with the key in each object, with the result being
* used as the value associated with the key in the returned object.
*
* @func
* @memberOf R
* @since v0.19.0
* @category Object
* @sig ((String, a, a) -> a) -> {a} -> {a} -> {a}
* @param {Function} fn
* @param {Object} l
* @param {Object} r
* @return {Object}
* @see R.mergeDeepWithKey, R.merge, R.mergeWith
* @example
*
* let concatValues = (k, l, r) => k == 'values' ? R.concat(l, r) : r
* R.mergeWithKey(concatValues,
* { a: true, thing: 'foo', values: [10, 20] },
* { b: true, thing: 'bar', values: [15, 35] });
* //=> { a: true, b: true, thing: 'bar', values: [10, 20, 15, 35] }
* @symb R.mergeWithKey(f, { x: 1, y: 2 }, { y: 5, z: 3 }) = { x: 1, y: f('y', 2, 5), z: 3 }
*/
var mergeWithKey = /*#__PURE__*/_curry3(function mergeWithKey(fn, l, r) {
var result = {};
var k;
l = l || {};
r = r || {};
for (k in l) {
if (_has(k, l)) {
result[k] = _has(k, r) ? fn(k, l[k], r[k]) : l[k];
}
}
for (k in r) {
if (_has(k, r) && !_has(k, result)) {
result[k] = r[k];
}
}
return result;
});
/**
* Creates a new object with the own properties of the two provided objects.
* If a key exists in both objects:
* - and both associated values are also objects then the values will be
* recursively merged.
* - otherwise the provided function is applied to the key and associated values
* using the resulting value as the new value associated with the key.
* If a key only exists in one object, the value will be associated with the key
* of the resulting object.
*
* @func
* @memberOf R
* @since v0.24.0
* @category Object
* @sig ((String, a, a) -> a) -> {a} -> {a} -> {a}
* @param {Function} fn
* @param {Object} lObj
* @param {Object} rObj
* @return {Object}
* @see R.mergeWithKey, R.mergeDeepWith
* @example
*
* let concatValues = (k, l, r) => k == 'values' ? R.concat(l, r) : r
* R.mergeDeepWithKey(concatValues,
* { a: true, c: { thing: 'foo', values: [10, 20] }},
* { b: true, c: { thing: 'bar', values: [15, 35] }});
* //=> { a: true, b: true, c: { thing: 'bar', values: [10, 20, 15, 35] }}
*/
var mergeDeepWithKey = /*#__PURE__*/_curry3(function mergeDeepWithKey(fn, lObj, rObj) {
return mergeWithKey(function (k, lVal, rVal) {
if (_isObject(lVal) && _isObject(rVal)) {
return mergeDeepWithKey(fn, lVal, rVal);
} else {
return fn(k, lVal, rVal);
}
}, lObj, rObj);
});
/**
* Creates a new object with the own properties of the first object merged with
* the own properties of the second object. If a key exists in both objects:
* - and both values are objects, the two values will be recursively merged
* - otherwise the value from the second object will be used.
*
* @func
* @memberOf R
* @since v0.24.0
* @category Object
* @sig {a} -> {a} -> {a}
* @param {Object} lObj
* @param {Object} rObj
* @return {Object}
* @see R.merge, R.mergeDeepLeft, R.mergeDeepWith, R.mergeDeepWithKey
* @example
*
* R.mergeDeepRight({ name: 'fred', age: 10, contact: { email: 'moo@example.com' }},
* { age: 40, contact: { email: 'baa@example.com' }});
* //=> { name: 'fred', age: 40, contact: { email: 'baa@example.com' }}
*/
var mergeDeepRight = /*#__PURE__*/_curry2(function mergeDeepRight(lObj, rObj) {
return mergeDeepWithKey(function (k, lVal, rVal) {
return rVal;
}, lObj, rObj);
});
/**
* Creates a new object with the own properties of the two provided objects. If
* a key exists in both objects, the provided function is applied to the values
* associated with the key in each object, with the result being used as the
* value associated with the key in the returned object.
*
* @func
* @memberOf R
* @since v0.19.0
* @category Object
* @sig ((a, a) -> a) -> {a} -> {a} -> {a}
* @param {Function} fn
* @param {Object} l
* @param {Object} r
* @return {Object}
* @see R.mergeDeepWith, R.merge, R.mergeWithKey
* @example
*
* R.mergeWith(R.concat,
* { a: true, values: [10, 20] },
* { b: true, values: [15, 35] });
* //=> { a: true, b: true, values: [10, 20, 15, 35] }
*/
var mergeWith = /*#__PURE__*/_curry3(function mergeWith(fn, l, r) {
return mergeWithKey(function (_, _l, _r) {
return fn(_l, _r);
}, l, r);
});
/**
* Returns a partial copy of an object containing only the keys that satisfy
* the supplied predicate.
*
* @func
* @memberOf R
* @since v0.8.0
* @category Object
* @sig ((v, k) -> Boolean) -> {k: v} -> {k: v}
* @param {Function} pred A predicate to determine whether or not a key
* should be included on the output object.
* @param {Object} obj The object to copy from
* @return {Object} A new object with only properties that satisfy `pred`
* on it.
* @see R.pick, R.filter
* @example
*
* const isUpperCase = (val, key) => key.toUpperCase() === key;
* R.pickBy(isUpperCase, {a: 1, b: 2, A: 3, B: 4}); //=> {A: 3, B: 4}
*/
var pickBy = /*#__PURE__*/_curry2(function pickBy(test, obj) {
var result = {};
for (var prop in obj) {
if (test(obj[prop], prop, obj)) {
result[prop] = obj[prop];
}
}
return result;
});
const {
colors: {
text: {
static_icons__primary_white: {
rgba: primaryWhite$2
}
},
interactive: {
primary__resting: {
rgba: primaryColor$7
},
primary__hover: {
rgba: primaryHoverColor$2
},
secondary__resting: {
rgba: secondaryColor$3
},
secondary__link_hover: {
rgba: secondaryHoverColor$3
},
danger__resting: {
rgba: dangerColor$3
},
danger__hover: {
rgba: dangerHoverColor$3
}
}
},
shape: {
button: {
borderRadius: buttonBorderRadius$1
}
}
} = edsTokens.tokens;
const primary$a = mergeDeepRight(button, {
background: primaryColor$7,
typography: {
color: primaryWhite$2
},
border: {
type: 'border',
style: 'solid',
width: '1px',
color: primaryColor$7,
radius: `var(--eds_button__radius, ${buttonBorderRadius$1})`
},
states: {
hover: {
background: primaryHoverColor$2
}
}
});
const secondary$5 = mergeDeepRight(primary$a, {
background: secondaryColor$3,
border: {
color: secondaryColor$3
},
states: {
hover: {
background: secondaryHoverColor$3,
border: {
color: secondaryHoverColor$3
}
}
}
});
const danger$6 = mergeDeepRight(primary$a, {
background: dangerColor$3,
border: {
color: dangerColor$3
},
states: {
hover: {
background: dangerHoverColor$3,
border: {
color: dangerHoverColor$3
}
}
}
});
const {
colors: {
interactive: {
primary__resting: {
rgba: primaryColor$6
},
primary__hover: {
rgba: primaryHoverColor$1
},
primary__hover_alt: {
rgba: primaryHoverAltColor$2
},
secondary__resting: {
rgba: secondaryColor$2
},
secondary__link_hover: {
rgba: secondaryHoverColor$2
},
secondary__highlight: {
rgba: secondaryHoverAltColor$2
},
danger__resting: {
rgba: dangerColor$2
},
danger__hover: {
rgba: dangerHoverColor$2
},
danger__highlight: {
rgba: dangerHoverAltColor$2
}
}
},
shape: {
button: {
borderRadius: buttonBorderRadius
}
}
} = edsTokens.tokens;
const primary$9 = mergeDeepRight(button, {
typography: {
color: primaryColor$6
},
border: {
type: 'border',
style: 'solid',
width: '1px',
color: primaryColor$6,
radius: `var(--eds_button__radius, ${buttonBorderRadius})`
},
states: {
hover: {
typography: {
color: primaryHoverColor$1
},
background: primaryHoverAltColor$2,
border: {
style: 'solid',
type: 'border',
width: '1px',
color: primaryHoverColor$1
}
},
disabled: {
background: 'transparent'
}
}
});
const secondary$4 = mergeDeepRight(primary$9, {
typography: {
color: secondaryColor$2
},
border: {
color: secondaryColor$2
},
states: {
hover: {
background: secondaryHoverAltColor$2,
typography: {
color: secondaryHoverColor$2
},
border: {
color: secondaryHoverColor$2
}
}
}
});
const danger$5 = mergeDeepRight(primary$9, {
typography: {
color: dangerColor$2
},
border: {
color: dangerColor$2
},
states: {
hover: {
background: dangerHoverAltColor$2,
typography: {
color: dangerHoverColor$2
},
border: {
color: dangerHoverColor$2
}
}
}
});
const {
colors: {
interactive: {
primary__resting: {
rgba: primaryColor$5
},
primary__hover: {
rgba: primaryHoverColor
},
primary__hover_alt: {
rgba: primaryHoverAltColor$1
},
secondary__resting: {
rgba: secondaryColor$1
},
secondary__link_hover: {
rgba: secondaryHoverColor$1
},
secondary__highlight: {
rgba: secondaryHoverAltColor$1
},
danger__resting: {
rgba: dangerColor$1
},
danger__hover: {
rgba: dangerHoverColor$1
},
danger__highlight: {
rgba: dangerHoverAltColor$1
}
}
}
} = edsTokens.tokens;
const primary$8 = mergeDeepRight(button, {
typography: {
color: primaryColor$5
},
states: {
hover: {
background: primaryHoverAltColor$1,
typography: {
color: primaryHoverColor
}
},
disabled: {
background: 'transparent',
border: {
color: 'transparent'
}
}
}
});
const secondary$3 = mergeDeepRight(primary$8, {
typography: {
color: secondaryColor$1
},
states: {
hover: {
background: secondaryHoverAltColor$1,
typography: {
color: secondaryHoverColor$1
}
}
}
});
const danger$4 = mergeDeepRight(primary$8, {
typography: {
color: dangerColor$1
},
states: {
hover: {
background: dangerHoverAltColor$1,
typography: {
color: dangerHoverColor$1
}
}
}
});
const {
colors: {
interactive: {
primary__resting: {
rgba: primaryColor$4
},
primary__hover_alt: {
rgba: primaryHoverAltColor
},
secondary__resting: {
rgba: secondaryColor
},
secondary__link_hover: {
rgba: secondaryHoverColor
},
secondary__highlight: {
rgba: secondaryHoverAltColor
},
danger__resting: {
rgba: dangerColor
},
danger__hover: {
rgba: dangerHoverColor
},
danger__highlight: {
rgba: dangerHoverAltColor
}
}
},
clickbounds: {
default__base: clicboundHeight$1,
compact__standard: compactClickboundHeight$1
},
shape: shape$4,
interactions: {
focused: {
width: focusOutlineWidth$9
}
}
} = edsTokens.tokens;
const primary$7 = mergeDeepRight(button, {
height: shape$4.icon_button.minHeight,
width: shape$4.icon_button.minWidth,
typography: {
color: primaryColor$4
},
border: {
width: '0px',
radius: '50%'
},
background: 'transparent',
spacings: {
left: '0',
right: '0'
},
clickbound: {
width: clicboundHeight$1,
offset: {
top: `${(parseInt(clicboundHeight$1) - parseInt(shape$4.icon_button.minWidth)) / 2}px`,
left: `${(parseInt(clicboundHeight$1) - parseInt(shape$4.icon_button.minWidth)) / 2}px`
}
},
states: {
hover: {
background: primaryHoverAltColor,
border: {
width: '0px',
radius: '50%'
}
},
disabled: {
background: 'transparent',
border: {
color: 'transparent'
}
},
focus: {
outline: {
offset: `-${parseInt(focusOutlineWidth$9)}px`
}
}
},
modes: {
compact: {
height: shape$4._modes.compact.icon_button.minHeight,
width: shape$4._modes.compact.icon_button.minWidth,
clickbound: {
width: compactClickboundHeight$1,
offset: {
top: '0',
left: `${(parseInt(compactClickboundHeight$1) - parseInt(shape$4._modes.compact.icon_button.minWidth)) / 2}px`
}
}
}
}
});
const secondary$2 = mergeDeepRight(primary$7, {
typography: {
color: secondaryColor
},
states: {
hover: {
background: secondaryHoverAltColor,
typography: {
color: secondaryHoverColor
}
}
}
});
const danger$3 = mergeDeepRight(primary$7, {
typography: {
color: dangerColor
},
states: {
hover: {
background: dangerHoverAltColor,
typography: {
color: dangerHoverColor
}
}
}
});
const {
clickbounds: {
default__base: clicboundHeight,
compact__standard: compactClickboundHeight
},
shape: shape$3
} = edsTokens.tokens;
const contained_icon = {
height: shape$3.icon_button.minHeight,
width: shape$3.icon_button.minWidth,
border: {
width: '0px',
radius: '50%'
},
spacings: {
left: '0',
right: '0'
},
clickbound: {
width: clicboundHeight,
offset: {
top: `${(parseInt(clicboundHeight) - parseInt(shape$3.icon_button.minWidth)) / 2}px`,
left: `${(parseInt(clicboundHeight) - parseInt(shape$3.icon_button.minWidth)) / 2}px`
}
},
states: {
hover: {
border: {
width: '0px',
radius: '50%'
}
}
},
modes: {
compact: {
height: shape$3._modes.compact.icon_button.minHeight,
width: shape$3._modes.compact.icon_button.minWidth,
clickbound: {
width: compactClickboundHeight,
offset: {
top: '0',
left: `${(parseInt(compactClickboundHeight) - parseInt(shape$3._modes.compact.icon_button.minWidth)) / 2}px`
}
}
}
}
};
const primary$6 = mergeDeepRight(primary$a, contained_icon);
const secondary$1 = mergeDeepRight(secondary$5, contained_icon);
const danger$2 = mergeDeepRight(danger$6, contained_icon);
const token$6 = {
primary: {
contained: primary$a,
outlined: primary$9,
ghost: primary$8,
ghost_icon: primary$7,
contained_icon: primary$6
},
secondary: {
contained: secondary$5,
outlined: secondary$4,
ghost: secondary$3,
ghost_icon: secondary$2,
contained_icon: secondary$1
},
danger: {
contained: danger$6,
outlined: danger$5,
ghost: danger$4,
ghost_icon: danger$3,
contained_icon: danger$2
}
};
const FullWidthCenterContent = styled__default.default.span.withConfig({
displayName: "InnerFullWidth__FullWidthCenterContent",
componentId: "sc-qeawkb-0"
})(["text-align:center;flex:1;"]);
const FullWidthInner = styled__default.default.span.withConfig({
displayName: "InnerFullWidth__FullWidthInner",
componentId: "sc-qeawkb-1"
})(["height:100%;display:flex;align-items:center;> :is(svg,img){margin-top:var(--eds_button__margin_y,inherit);margin-bottom:var(--eds_button__margin_y,inherit);}> :is(svg,img):first-child{margin-right:var(--eds_button__fullwidth__icon__margin_x,8px);}> :is(svg,img):last-child{margin-left:var(--eds_button__fullwidth__icon__margin_x,8px);}> :is(svg,img):only-child{margin-left:auto;margin-right:auto;}> span:first-child{margin-left:var(--eds_button__fullwidth__margin_x,32px);}> span:last-child{margin-right:var(--eds_button__fullwidth__margin_x,32px);}> span:only-child{margin-right:0;margin-left:0;}"]);
const InnerFullWidth = /*#__PURE__*/react.forwardRef(function InnerFullWidth({
children
}, ref) {
// We need everything in elements for proper flexing 💪
const updatedChildren = react.Children.map(children, child => typeof child !== 'object' ? /*#__PURE__*/jsxRuntime.jsx(FullWidthCenterContent, {
children: child
}) : child);
return /*#__PURE__*/jsxRuntime.jsx(FullWidthInner, {
ref: ref,
children: updatedChildren
});
});
const initalState$2 = {
/** Density for all components inside `EdsProvider` */
density: 'comfortable'
};
const EdsContext = /*#__PURE__*/react.createContext(initalState$2);
const EdsProvider = ({
children,
density,
rootElement
}) => {
const [state, setState] = react.useState({
...initalState$2,
density: density || 'comfortable'
});
const setDensity = density => setState(prevState => ({
...prevState,
density
}));
react.useEffect(() => {
if (typeof density !== 'undefined' && density !== state.density) {
setDensity(density);
}
}, [density, state.density]);
const value = {
density: state.density,
rootElement,
setDensity
};
return /*#__PURE__*/jsxRuntime.jsx(EdsContext.Provider, {
value: value,
children: children
});
};
const useEds = () => react.useContext(EdsContext);
const getVariant$1 = (tokenSet, variant) => {
switch (variant) {
case 'ghost':
return tokenSet.ghost;
case 'ghost_icon':
return tokenSet.ghost_icon;
case 'outlined':
return tokenSet.outlined;
case 'contained_icon':
return tokenSet.contained_icon;
case 'contained':
default:
return tokenSet.contained;
}
};
const getToken$1 = (variant, color) => {
switch (color) {
case 'danger':
return getVariant$1(token$6.danger, variant);
case 'secondary':
return getVariant$1(token$6.secondary, variant);
case 'primary':
default:
return getVariant$1(token$6.primary, variant);
}
};
const Inner = styled__default.default.span.withConfig({
displayName: "Button__Inner",
componentId: "sc-1hs0myn-0"
})(["display:grid;grid-gap:var(--eds_button__gap,8px);grid-auto-flow:column;align-items:center;height:100%;justify-content:center;& > :is(svg,img){margin-top:var(--eds_button__icon__margin_y,0);margin-bottom:var(--eds_button__icon__margin_y,0);}"]);
const ButtonBase = styled__default.default.button.withConfig({
displayName: "Button__ButtonBase",
componentId: "sc-1hs0myn-1"
})(({
theme
}) => {
const {
states,
clickbound
} = theme;
const {
focus,
hover,
disabled
} = states;
return styled.css(["box-sizing:border-box;margin:0;padding:0;text-decoration:none;position:relative;cursor:pointer;display:inline-block;background:", ";height:", ";width:", ";svg{justify-self:center;}", " ", " ", " &::after{position:absolute;top:-", ";left:-", ";width:", ";height:", ";content:'';}@media (hover:hover) and (pointer:fine){&:hover{background:", ";color:", ";", ";}}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}&:disabled,&[aria-disabled='true']{cursor:not-allowed;background:", ";", ";", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}}"], theme.background, theme.height, theme.width, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), clickbound?.offset?.top, clickbound?.offset?.left, clickbound?.width, clickbound?.height, hover.background, hover.typography?.color, edsUtils.bordersTemplate(hover?.border), edsUtils.outlineTemplate(focus.outline), edsUtils.outlineTemplate(focus.outline), disabled.background, edsUtils.bordersTemplate(disabled.border), edsUtils.typographyTemplate(disabled.typography), disabled.background);
});
const Button$2 = /*#__PURE__*/react.forwardRef(function Button({
color = 'primary',
variant = 'contained',
children,
disabled = false,
href,
tabIndex = 0,
fullWidth = false,
...other
}, ref) {
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, getToken$1(variant, color));
const as = href && !disabled ? 'a' : other.as ? other.as : 'button';
const type = href || other.as ? undefined : 'button';
tabIndex = disabled ? -1 : tabIndex;
const buttonProps = {
ref,
as,
href,
type,
disabled,
tabIndex,
...other
};
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsx(ButtonBase, {
...buttonProps,
children: fullWidth ? /*#__PURE__*/jsxRuntime.jsx(InnerFullWidth, {
children: children
}) : /*#__PURE__*/jsxRuntime.jsx(Inner, {
children: children
})
})
});
});
const {
shape: {
corners: {
borderRadius: borderRadius$8
}
}
} = edsTokens.tokens;
const group = {
border: {
type: 'border',
radius: borderRadius$8
}
};
const {
border: border$5
} = group;
const radius$1 = border$5.type === 'border' && border$5.radius;
const ButtonGroupBase = styled__default.default.div.withConfig({
displayName: "ButtonGroup__ButtonGroupBase",
componentId: "sc-1fn8jon-0"
})(["display:inline-flex;> *{border-radius:0;@media (hover:hover) and (pointer:fine){&:hover{border-radius:0;}}}", ""], ({
$vertical
}) => $vertical ? styled.css(["flex-direction:column;> :first-child{border-top-left-radius:", ";border-top-right-radius:", ";}> :last-child{border-bottom-left-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-bottom:none;}"], radius$1, radius$1, radius$1, radius$1) : styled.css(["> :first-child{border-top-left-radius:", ";border-bottom-left-radius:", ";}> :last-child{border-top-right-radius:", ";border-bottom-right-radius:", ";}> :not(:last-child){border-right:none;}"], radius$1, radius$1, radius$1, radius$1));
const ButtonGroup = /*#__PURE__*/react.forwardRef(function ButtonGroup({
children,
vertical,
...rest
}, ref) {
const props = {
ref,
$vertical: vertical,
...rest
};
return /*#__PURE__*/jsxRuntime.jsx(ButtonGroupBase, {
role: "group",
...props,
children: children
});
});
const {
colors: {
text: {
static_icons__primary_white: {
rgba: white
}
},
ui: {
background__overlay: {
rgba: background$e
}
}
},
typography: {
ui
},
spacings: {
comfortable: {
x_large: spacingXlarge,
small: spacingSmall$4
}
},
shape: {
corners: {
borderRadius: borderRadius$7
}
}
} = edsTokens.tokens;
const tooltip = {
typography: {
...ui.tooltip,
color: white
},
background: background$e,
border: {
type: 'border',
radius: borderRadius$7
},
entities: {
tooltip: {
height: spacingXlarge
},
arrow: {
width: '6px',
height: spacingSmall$4,
spacings: {
bottom: '-6px',
top: '-6px',
left: '-6px',
right: '-6px'
}
}
},
spacings: {
left: spacingSmall$4,
right: spacingSmall$4,
top: spacingSmall$4,
bottom: spacingSmall$4
}
};
const StyledTooltip = styled__default.default('div').withConfig({
shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
}).withConfig({
displayName: "Tooltip__StyledTooltip",
componentId: "sc-m2im2p-0"
})(["inset:unset;border:0;overflow:visible;", " ", " ", " background:", ";white-space:nowrap;&::before{content:'; Has tooltip: ';clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;}&::backdrop{background-color:transparent;}"], edsUtils.typographyTemplate(tooltip.typography), edsUtils.spacingsTemplate(tooltip.spacings), edsUtils.bordersTemplate(tooltip.border), tooltip.background);
const ArrowWrapper$1 = styled__default.default.div.withConfig({
displayName: "Tooltip__ArrowWrapper",
componentId: "sc-m2im2p-1"
})(["position:absolute;width:", ";height:", ";z-index:-1;"], tooltip.entities.arrow.width, tooltip.entities.arrow.height);
const TooltipArrow = styled__default.default.svg.withConfig({
displayName: "Tooltip__TooltipArrow",
componentId: "sc-m2im2p-2"
})(["width:", ";height:", ";position:absolute;fill:", ";"], tooltip.entities.arrow.width, tooltip.entities.arrow.height, tooltip.background);
const Tooltip$2 = /*#__PURE__*/react.forwardRef(function Tooltip({
title,
placement = 'bottom',
children,
style,
enterDelay = 100,
portalContainer,
...rest
}, ref) {
const arrowRef = react.useRef(null);
const [open, setOpen] = react.useState(false);
const {
rootElement
} = useEds();
const shouldOpen = Boolean(title) && typeof document !== 'undefined';
const {
x,
y,
refs,
strategy,
context,
middlewareData: {
arrow: {
x: arrowX,
y: arrowY
} = {}
},
placement: finalPlacement,
elements
} = react$1.useFloating({
placement,
open,
onOpenChange: setOpen,
middleware: [react$1.offset(14), react$1.flip(), react$1.shift({
padding: 8
}), react$1.arrow({
element: arrowRef
})],
whileElementsMounted: react$1.autoUpdate
});
const anchorRef = react.useMemo(() => edsUtils.mergeRefs(refs.setReference, children?.ref), [refs.setReference, children?.ref]);
const tooltipRef = react.useMemo(() => edsUtils.mergeRefs(refs.setFloating, ref), [refs.setFloating, ref]);
const {
getReferenceProps,
getFloatingProps
} = react$1.useInteractions([react$1.useHover(context, {
delay: {
open: enterDelay
}
}), react$1.useFocus(context), react$1.useRole(context, {
role: 'tooltip'
}), react$1.useDismiss(context)]);
react.useEffect(() => {
const staticSide = {
top: 'bottom',
right: 'left',
bottom: 'top',
left: 'right'
}[finalPlacement.split('-')[0]];
let arrowTransform = 'none';
switch (staticSide) {
case 'right':
arrowTransform = 'rotateY(180deg)';
break;
case 'left':
arrowTransform = 'none';
break;
case 'top':
arrowTransform = 'rotate(90deg)';
break;
case 'bottom':
arrowTransform = 'rotate(-90deg)';
break;
}
if (arrowRef.current) {
Object.assign(arrowRef.current.style, {
left: arrowX != null ? `${arrowX}px` : '',
top: arrowY != null ? `${arrowY}px` : '',
right: '',
bottom: '',
[staticSide]: '-6px',
transform: arrowTransform
});
}
});
const updatedChildren = /*#__PURE__*/react.cloneElement(children, {
...getReferenceProps({
ref: anchorRef,
...children.props
})
});
react.useEffect(() => {
if (!elements.floating) return;
if (elements.floating.isConnected && shouldOpen && open) {
elements.floating.showPopover();
}
}, [open, shouldOpen, elements.floating]);
const TooltipEl = /*#__PURE__*/jsxRuntime.jsxs(StyledTooltip, {
popover: "manual",
...rest,
...getFloatingProps({
ref: tooltipRef,
className: `eds-tooltip ${rest.className ?? ''}`,
style: {
...style,
position: strategy,
top: y || 0,
left: x || 0
}
}),
children: [title, /*#__PURE__*/jsxRuntime.jsx(ArrowWrapper$1, {
ref: arrowRef,
children: /*#__PURE__*/jsxRuntime.jsx(TooltipArrow, {
className: "arrowSvg",
children: /*#__PURE__*/jsxRuntime.jsx("path", {
d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
})
})
})]
});
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [shouldOpen && open && /*#__PURE__*/reactDom.createPortal(TooltipEl, portalContainer ?? rootElement ?? document.body), updatedChildren]
});
});
const ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton({
children,
multiple,
selectedIndexes,
onChange,
...props
}, ref) {
const [pickedIndexes, setPickedIndexes] = react.useState(selectedIndexes || []);
react.useEffect(() => {
if (Array.isArray(selectedIndexes)) {
setPickedIndexes(selectedIndexes);
}
}, [selectedIndexes]);
function updateProps(child, isSelected, index) {
const childElement = child;
if (/*#__PURE__*/react.isValidElement(child)) {
const buttonProps = {
'aria-pressed': isSelected ? true : undefined,
variant: isSelected ? 'contained' : 'outlined',
onClick: e => {
childElement.props?.onClick?.(e);
let updatedSelection = [index];
if (multiple) {
updatedSelection = pickedIndexes.includes(index) ? pickedIndexes.filter(i => i !== index) : [...pickedIndexes, index];
}
setPickedIndexes(updatedSelection);
if (onChange) {
onChange(updatedSelection);
}
}
};
return /*#__PURE__*/react.cloneElement(child, buttonProps);
}
}
const updatedChildren = react.Children.map(children, (child, index) => {
const isSelected = pickedIndexes.includes(index);
const childElement = child;
if (/*#__PURE__*/react.isValidElement(child) && child.type === Tooltip$2) {
const updatedGrandChildren = react.Children.map(childElement.props.children, grandChild => {
return updateProps(grandChild, isSelected, index);
});
return /*#__PURE__*/react.cloneElement(childElement, null, updatedGrandChildren[0]);
} else {
return updateProps(childElement, isSelected, index);
}
});
return /*#__PURE__*/jsxRuntime.jsx(ButtonGroup, {
ref: ref,
...props,
children: updatedChildren
});
});
const Button$1 = Button$2;
Button$1.Group = ButtonGroup;
Button$1.Toggle = ToggleButton;
Button$1.Group.displayName = 'Button.Group';
Button$1.Toggle.displayName = 'Button.Toggle';
const {
typography: typography$g,
colors: colorsToken,
interactions: {
focused: {
width: focusOutlineWidth$8
}
}
} = edsTokens.tokens;
const {
heading,
paragraph: paragraph$2
} = typography$g;
const {
interactive: {
primary__resting: {
rgba: primary$5
},
secondary__resting: {
rgba: secondary
},
danger__resting: {
rgba: danger$1
},
warning__resting: {
rgba: warning$5
},
success__resting: {
rgba: success$2
},
disabled__text: {
rgba: disabled
},
focus: {
rgba: focus$3
}
}
} = colorsToken;
const colors$5 = {
primary: primary$5,
secondary,
danger: danger$1,
warning: warning$5,
success: success$2,
disabled
};
const quickVariants = {
...heading,
...paragraph$2
};
const link = {
states: {
focus: {
outline: {
width: focusOutlineWidth$8,
color: focus$3,
style: 'dashed',
type: 'outline',
offset: '2px'
}
}
}
};
const getElementType = (variant, link) => {
if (link) {
return 'a';
}
switch (variant) {
case 'h1':
case 'h2':
case 'h3':
case 'h4':
case 'h5':
case 'h6':
return variant;
case 'caption':
case 'overline':
case 'ingress':
case 'meta':
case 'body_short':
case 'body_long':
default:
return 'p';
}
};
const findTypography = (variantName, group) => {
// For quick use when using paragraphs and headings we can skip group
if (!group && quickVariants[variantName]) {
return quickVariants[variantName];
}
return typography$g[group][variantName];
};
//@TODO: fix typescript here
// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
const findColor = (inputColor = null) => typeof colors$5[inputColor] === 'undefined' ? inputColor : colors$5[inputColor];
const toVariantName = (variant, bold = false, italic = false, link = false) => `${variant}${bold ? '_bold' : ''}${italic ? '_italic' : ''}${link ? '_link' : ''}`;
const StyledTypography$1 = styled__default.default.p.withConfig({
displayName: "Typography__StyledTypography",
componentId: "sc-179guof-0"
})(["", " ", " ", " ", ""], ({
$typography,
$link
}) => edsUtils.typographyTemplate($typography, $link), ({
$color
}) => styled.css({
color: findColor($color)
}), ({
$lines
}) => $lines && styled.css(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;"], $lines), ({
$link
}) => $link && styled.css(["&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.outlineTemplate(link.states.focus.outline), edsUtils.outlineTemplate(link.states.focus.outline)));
const Typography = /*#__PURE__*/react.forwardRef(function Typography({
variant = 'body_short',
children,
bold,
italic,
link,
lines,
color,
group,
token,
as: providedAs,
...other
}, ref) {
const as = providedAs ? providedAs : getElementType(variant, link);
const variantName = toVariantName(variant, bold, italic, link);
const typography = findTypography(variantName, group);
if (typeof typography === 'undefined') {
throw new Error(`Typography variant not found for variant "${variantName}" ("${variant}") & group "${group || ''}"`);
}
return /*#__PURE__*/jsxRuntime.jsx(StyledTypography$1, {
as: as,
$typography: {
...typography,
...token
},
$link: link,
$lines: lines,
ref: ref,
$color: color,
...other,
children: children
});
});
// Typography.displayName = 'EdsTypography'
const {
typography: {
table: {
cell_text: cellTypography$1,
cell_numeric_monospaced: cellNumericTypography
},
_modes: {
compact: compactTypography$1
}
},
colors: {
text: {
static_icons__default: {
rgba: typographyColor$3
}
},
ui: {
background__medium: {
rgba: borderColor$5
}
},
interactive: {
table__cell__fill_resting: {
rgba: backgroundColor$6
},
table__cell__fill_hover: {
rgba: hoverBackgroundColor$3
},
table__cell__fill_activated: {
rgba: activeBackgroundColor$2
},
danger__highlight: {
rgba: errorColor$1
},
primary__resting: {
rgba: primaryRestingColor$1
},
disabled__text: {
rgba: disabledTextColor$2
},
disabled__border: {
rgba: disabledBorderColor$1
},
focus: {
rgba: focusColor$4
}
}
},
spacings: {
comfortable: {
medium: medium$6
}
}
} = edsTokens.tokens;
const tableCell = {
height: 'var(--eds_table__cell__height, 48px)',
background: backgroundColor$6,
align: {
vertical: 'var(--eds_table__cell__vertical_align, inherit)'
},
border: {
type: 'bordergroup',
bottom: {
color: borderColor$5,
width: '1px',
style: 'solid'
}
},
spacings: {
top: 'var(--eds_table__cell__padding_y, 0)',
bottom: 'var(--eds_table__cell__padding_y, 0)',
left: `var(--eds_table__cell__padding_x, ${medium$6})`,
right: `var(--eds_table__cell__padding_x, ${medium$6})`
},
typography: {
...cellTypography$1,
color: typographyColor$3,
fontSize: `var(--eds_table__font_size, ${cellTypography$1.fontSize})`
},
states: {
active: {
background: activeBackgroundColor$2,
typography: {
...cellTypography$1,
color: primaryRestingColor$1
},
border: {
bottom: {
color: primaryRestingColor$1
}
}
},
disabled: {
typography: {
...cellTypography$1,
color: disabledTextColor$2
},
border: {
type: 'bordergroup',
bottom: {
color: disabledBorderColor$1
}
}
},
focus: {
outline: {
type: 'outline',
color: focusColor$4,
width: '1px',
style: 'dashed'
}
},
hover: {
background: hoverBackgroundColor$3
}
},
modes: {
compact: {
height: 'var(--eds_table__cell__height_compact, 32px)',
typography: {
...compactTypography$1.table.cell_text,
color: typographyColor$3
},
spacings: {
top: 'var(--eds_table__cell__padding_y_compact, 0)',
bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
left: `var(--eds_table__cell__padding_x_compact, ${medium$6})`,
right: `var(--eds_table__cell__padding_x_compact, ${medium$6})`
}
}
},
validation: {
error: {
background: errorColor$1
}
},
variants: {
numeric: {
typography: {
...cellNumericTypography,
color: typographyColor$3
},
modes: {
compact: {
typography: {
...compactTypography$1.table.cell_numeric_monospaced,
color: typographyColor$3
}
}
}
}
}
};
const applyVariant = (variant, token) => {
switch (variant) {
case 'numeric':
return mergeDeepRight(token, token.variants.numeric);
default:
return token;
}
};
const TableBase$1 = styled__default.default.table.withConfig({
displayName: "Table__TableBase",
componentId: "sc-14kktwc-0"
})(["border-spacing:0;background:", ";"], tableCell.background);
const Table$1 = /*#__PURE__*/react.forwardRef(function Table({
children,
...props
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(TableBase$1, {
...props,
ref: ref,
children: children
});
});
// Table.displayName = 'EdsTable'
const initialState = {
variant: 'body'
};
const InnerContext = /*#__PURE__*/react.createContext(initialState);
const TableBase = styled__default.default.tbody.withConfig({
displayName: "Body__TableBase",
componentId: "sc-1pdmiku-0"
})([""]);
const Body = /*#__PURE__*/react.forwardRef(function Body({
children,
...props
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
value: {
variant: 'body'
},
children: /*#__PURE__*/jsxRuntime.jsx(TableBase, {
...props,
ref: ref,
children: children
})
});
});
const StyledTableCell$2 = styled__default.default.td.withConfig({
displayName: "DataCell__StyledTableCell",
componentId: "sc-15tuitc-0"
})(({
theme,
color
}) => {
const {
height,
typography,
spacings,
border,
align
} = theme;
const backgroundColor = color === 'error' ? theme.validation.error?.background : '';
const base = styled.css(["min-height:", ";height:", ";background:", ";vertical-align:", ";box-sizing:border-box;", " ", " ", ""], height, height, backgroundColor, align.vertical, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(border));
return base;
});
const TableDataCell = /*#__PURE__*/react.forwardRef(function TableDataCell({
children,
variant = 'text',
...rest
}, ref) {
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, applyVariant(variant, tableCell));
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell$2, {
...rest,
ref: ref,
children: children
})
});
});
const {
typography: {
table: {
cell_header: cellTypography
},
_modes: {
compact: compactTypography
}
},
colors: {
text: {
static_icons__default: {
rgba: typographyColor$2
}
},
ui: {
background__medium: {
rgba: borderColor$4
}
},
interactive: {
table__header__fill_resting: {
rgba: backgroundColor$5
},
table__header__fill_hover: {
rgba: hoverBackgroundColor$2
},
table__header__fill_activated: {
rgba: activeBackgroundColor$1
},
primary__resting: {
rgba: primaryRestingColor
},
disabled__text: {
rgba: disabledTextColor$1
},
disabled__border: {
rgba: disabledBorderColor
},
focus: {
rgba: focusColor$3
}
}
},
spacings: {
comfortable: {
medium: medium$5
}
}
} = edsTokens.tokens;
const token$5 = {
height: 'var(--eds_table__cell__height, 48px)',
background: backgroundColor$5,
align: {
vertical: 'var(--eds_table__cell__vertical_align, inherit)'
},
typography: {
...cellTypography,
color: typographyColor$2,
fontSize: `var(--eds_table__font_size, ${cellTypography.fontSize})`
},
border: {
type: 'bordergroup',
bottom: {
type: 'border',
width: '2px',
color: borderColor$4,
style: 'solid'
}
},
spacings: {
top: 'var(--eds_table__cell__padding_y, 0)',
bottom: 'var(--eds_table__cell__padding_y, 0)',
left: `var(--eds_table__cell__padding_x, ${medium$5})`,
right: `var(--eds_table__cell__padding_x, ${medium$5})`
},
states: {
active: {
background: activeBackgroundColor$1,
typography: {
...cellTypography,
color: primaryRestingColor
},
border: {
type: 'bordergroup',
bottom: {
color: primaryRestingColor
}
}
},
disabled: {
typography: {
...cellTypography,
color: disabledTextColor$1
},
border: {
type: 'bordergroup',
bottom: {
color: disabledBorderColor
}
}
},
focus: {
outline: {
type: 'outline',
color: focusColor$3,
width: '1px',
style: 'dashed'
}
},
hover: {
background: hoverBackgroundColor$2
}
},
modes: {
compact: {
height: 'var(--eds_table__cell__height_compact, 32px)',
typography: compactTypography.table.cell_header,
spacings: {
top: 'var(--eds_table__cell__padding_y_compact, 0)',
bottom: 'var(--eds_table__cell__padding_y_compact, 0)',
left: `var(--eds_table__cell__padding_x_compact, ${medium$5})`,
right: `var(--eds_table__cell__padding_x_compact, ${medium$5})`
}
}
}
};
const StyledTableCell$1 = styled__default.default.th.withConfig({
displayName: "HeaderCell__StyledTableCell",
componentId: "sc-18w2o3a-0"
})(props => {
const {
theme,
$sticky
} = props;
const {
background,
height,
typography,
spacings
} = theme;
const activeToken = theme.states.active;
const ariaSort = props['aria-sort'];
let sortStylingHover = styled.css({});
let sortStylingActive = styled.css({});
if (ariaSort) {
sortStylingHover = styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}"], theme.states.hover.background);
}
if (ariaSort && ariaSort !== 'none') {
sortStylingActive = styled.css(["", ";background:", ";color:", ";"], activeToken.border.type === 'bordergroup' ? styled.css(["border-color:", ";"], activeToken.border.bottom.color) : '', activeToken.background, activeToken.typography.color);
}
return styled.css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", ""], height, height, background, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(theme.border), sortStylingHover, sortStylingActive, $sticky ? styled.css(["position:sticky;top:0;z-index:1;"]) : '');
});
const CellInner$1 = styled__default.default.div.withConfig({
displayName: "HeaderCell__CellInner",
componentId: "sc-18w2o3a-1"
})(["display:flex;align-items:center;"]);
const TableHeaderCell = /*#__PURE__*/react.forwardRef(function TableHeaderCell({
children,
sort,
sticky,
...rest
}, ref) {
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, token$5);
const props = {
ref,
$sticky: sticky,
...rest
};
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell$1, {
"aria-sort": sort,
...props,
children: /*#__PURE__*/jsxRuntime.jsx(CellInner$1, {
children: children
})
})
});
});
const StyledTableCell = styled__default.default.th.withConfig({
displayName: "FooterCell__StyledTableCell",
componentId: "sc-1xq9z77-0"
})(props => {
const {
theme,
$sticky
} = props;
const {
background,
height,
typography,
spacings
} = theme;
return styled.css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", ""], height, height, background, edsUtils.spacingsTemplate(spacings), edsUtils.typographyTemplate(typography), edsUtils.bordersTemplate(theme.border), $sticky ? styled.css(["position:sticky;bottom:0;z-index:2;"]) : '');
});
const CellInner = styled__default.default.div.withConfig({
displayName: "FooterCell__CellInner",
componentId: "sc-1xq9z77-1"
})(["display:flex;align-items:center;"]);
const TableFooterCell = /*#__PURE__*/react.forwardRef(function TableFooterCell({
children,
sticky,
...rest
}, ref) {
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, token$5);
const props = {
ref,
$sticky: sticky,
...rest
};
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsx(StyledTableCell, {
...props,
children: /*#__PURE__*/jsxRuntime.jsx(CellInner, {
children: children
})
})
});
});
const Cell = /*#__PURE__*/react.forwardRef(function Cell({
...rest
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Consumer, {
children: ({
variant,
sticky
}) => {
switch (variant) {
case 'head':
return /*#__PURE__*/jsxRuntime.jsx(TableHeaderCell, {
ref: ref,
sticky: sticky,
...rest
});
case 'foot':
return /*#__PURE__*/jsxRuntime.jsx(TableFooterCell, {
ref: ref,
sticky: sticky,
...rest
});
default:
case 'body':
return /*#__PURE__*/jsxRuntime.jsx(TableDataCell, {
ref: ref,
...rest
});
}
}
});
});
const {
colors: {
ui: {
background__medium: {
rgba: borderColor$3
}
},
interactive: {
table__header__fill_resting: {
rgba: backgroundColor$4
}
}
}
} = edsTokens.tokens;
const token$4 = {
background: backgroundColor$4,
border: {
type: 'bordergroup',
bottom: {
type: 'border',
width: '2px',
color: borderColor$3,
style: 'solid'
}
}
};
const StyledTableHead = styled__default.default.thead.withConfig({
displayName: "Head__StyledTableHead",
componentId: "sc-g9tch7-0"
})(["", " background:", ";"], edsUtils.bordersTemplate(token$4.border), token$4.background);
const Head = /*#__PURE__*/react.forwardRef(function Head({
children,
sticky,
...props
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
value: {
variant: 'head',
sticky
},
children: /*#__PURE__*/jsxRuntime.jsx(StyledTableHead, {
...props,
ref: ref,
children: children
})
});
});
const {
colors: {
ui: {
background__medium: {
rgba: borderColor$2
}
},
interactive: {
table__header__fill_resting: {
rgba: backgroundColor$3
}
}
}
} = edsTokens.tokens;
const token$3 = {
background: backgroundColor$3,
border: {
type: 'bordergroup',
bottom: {
type: 'border',
width: '2px',
color: borderColor$2,
style: 'solid'
}
}
};
const StyledTableFoot = styled__default.default.tfoot.withConfig({
displayName: "Foot__StyledTableFoot",
componentId: "sc-3w9vih-0"
})(["", " background:", ";"], edsUtils.bordersTemplate(token$3.border), token$3.background);
const Foot = /*#__PURE__*/react.forwardRef(function Foot({
children,
sticky,
...props
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(InnerContext.Provider, {
value: {
variant: 'foot',
sticky
},
children: /*#__PURE__*/jsxRuntime.jsx(StyledTableFoot, {
...props,
ref: ref,
children: children
})
});
});
const {
colors: {
interactive: {
table__cell__fill_hover: {
rgba: hoverBackgroundColor$1
},
table__cell__fill_activated: {
rgba: activeBackgroundColor
}
}
}
} = edsTokens.tokens;
const token$2 = {
states: {
active: {
background: activeBackgroundColor
},
hover: {
background: hoverBackgroundColor$1
}
}
};
const StyledRow = styled__default.default.tr.withConfig({
displayName: "Row__StyledRow",
componentId: "sc-12c5lns-0"
})(["background:", ";@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}"], ({
$active
}) => $active ? token$2.states.active?.background : null, token$2.states.hover?.background);
const Row = /*#__PURE__*/react.forwardRef(function Row({
children,
active,
...props
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledRow, {
...props,
$active: active,
ref: ref,
children: children
});
});
const StyledCaption = styled__default.default.caption.withConfig({
displayName: "Caption__StyledCaption",
componentId: "sc-rtfr07-0"
})(({
$captionSide
}) => {
return styled.css(["caption-side:", ";"], $captionSide);
});
const Caption = /*#__PURE__*/react.forwardRef(function Caption({
captionSide = 'top',
...props
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledCaption, {
$captionSide: captionSide,
...props,
ref: ref
});
});
const Table = Table$1;
Table.Body = Body;
Table.Cell = Cell;
Table.Head = Head;
Table.Foot = Foot;
Table.Row = Row;
Table.Caption = Caption;
Table.Body.displayName = 'Table.Body';
Table.Cell.displayName = 'Table.Cell';
Table.Head.displayName = 'Table.Head';
Table.Foot.displayName = 'Table.Foot';
Table.Row.displayName = 'Table.Row';
Table.Caption.displayName = 'Table.Caption';
const {
colors: {
ui: {
background__default: {
rgba: lighter
},
background__light: {
rgba: light
},
background__medium: {
rgba: mediumColor
}
}
},
spacings: {
comfortable: {
small: spacingSmall$3,
medium: spacingMedium$8
}
}
} = edsTokens.tokens;
const divider$1 = {
lighter: {
background: lighter
},
light: {
background: light
},
mediumColor: {
background: mediumColor
}
};
const small$7 = {
spacings: {
top: spacingSmall$3,
bottom: spacingSmall$3
}
};
const medium$4 = {
spacings: {
top: spacingMedium$8,
bottom: spacingMedium$8
}
};
var tokens$6 = /*#__PURE__*/Object.freeze({
__proto__: null,
divider: divider$1,
medium: medium$4,
small: small$7
});
const {
divider
} = tokens$6;
const StyledDivider$3 = styled__default.default.hr.withConfig({
displayName: "Divider__StyledDivider",
componentId: "sc-1d8osde-0"
})(({
$backgroundColor,
$marginTop,
$marginBottom,
$dividerHeight
}) => {
return styled.css(["border:none;background-color:", ";margin-top:", ";margin-bottom:calc(", " - ", "px);height:", "px;"], $backgroundColor, $marginTop, $marginBottom, $dividerHeight, $dividerHeight);
});
const Divider = /*#__PURE__*/react.forwardRef(function Divider({
color = 'medium',
variant = 'medium',
size = '1',
...rest
}, ref) {
const colorValue = color === 'medium' ? 'mediumColor' : color;
const props = {
$backgroundColor: divider[colorValue].background,
$marginTop: tokens$6[variant].spacings.top,
$marginBottom: tokens$6[variant].spacings.bottom,
$dividerHeight: parseInt(size),
...rest
};
return /*#__PURE__*/jsxRuntime.jsx(StyledDivider$3, {
...props,
ref: ref
});
});
const {
colors: colors$4,
spacings: {
comfortable: comfortable$5
},
typography: typography$f
} = edsTokens.tokens;
const label = {
background: colors$4.ui.background__light.rgba,
typography: {
...typography$f.input.label,
color: colors$4.text.static_icons__tertiary.rgba
},
spacings: {
left: comfortable$5.small,
right: comfortable$5.small,
top: '6px',
bottom: '6px'
},
states: {
disabled: {
typography: {
color: colors$4.interactive.disabled__text.rgba
}
}
}
};
const LabelBase = styled__default.default.label.withConfig({
displayName: "Label__LabelBase",
componentId: "sc-1gi2bcn-0"
})(["display:flex;justify-content:space-between;align-items:flex-end;position:relative;", " margin-left:", ";margin-right:", ";color:", ";"], edsUtils.typographyTemplate(label.typography), label.spacings.left, label.spacings.right, ({
$disabledText
}) => $disabledText ? label.states.disabled.typography.color : label.typography.color);
const Text$3 = styled__default.default.span.withConfig({
displayName: "Label__Text",
componentId: "sc-1gi2bcn-1"
})(["margin:0;"]);
const Label$3 = /*#__PURE__*/react.forwardRef(function Label(props, ref) {
const {
label = '',
meta,
disabled = false,
...other
} = props;
return /*#__PURE__*/ /* @TODO: Other props spread has to be at the end for downshift to create the for attribute */jsxRuntime.jsxs(LabelBase, {
ref: ref,
$disabledText: disabled,
...other,
children: [/*#__PURE__*/jsxRuntime.jsx(Text$3, {
children: label
}), meta && /*#__PURE__*/jsxRuntime.jsx(Text$3, {
children: meta
})]
});
});
// Label.displayName = 'eds-text-field-label'
const {
colors: colors$3,
spacings: {
comfortable: comfortable$4
},
typography: typography$e
} = edsTokens.tokens;
const helperText = {
background: colors$3.ui.background__light.hex,
typography: {
...typography$e.input.helper,
color: colors$3.text.static_icons__tertiary.rgba
},
spacings: {
comfortable: {
left: comfortable$4.small,
right: comfortable$4.small,
top: comfortable$4.small,
bottom: '6px'
},
compact: {
left: comfortable$4.small,
right: comfortable$4.small,
top: comfortable$4.xx_small,
bottom: '6px'
}
}
};
const Container$6 = styled__default.default.div.withConfig({
displayName: "HelperText__Container",
componentId: "sc-189ug61-0"
})(({
color
}) => styled.css({
display: 'grid',
gap: '8px',
gridAutoFlow: 'column',
alignItems: 'start',
justifyContent: 'start',
color
}));
const Text$2 = styled__default.default.p.withConfig({
displayName: "HelperText__Text",
componentId: "sc-189ug61-1"
})(["margin:0;", ";white-space:pre-line;"], edsUtils.typographyMixin(helperText.typography));
const TextfieldHelperText = /*#__PURE__*/react.forwardRef(function TextfieldHelperText({
text,
icon,
color = helperText.typography.color,
...rest
}, ref) {
if (!text) {
return null;
}
return /*#__PURE__*/jsxRuntime.jsxs(Container$6, {
...rest,
color,
ref,
children: [icon, /*#__PURE__*/jsxRuntime.jsx(Text$2, {
children: text
})]
});
});
const {
colors: {
ui: {
background__light: {
rgba: background$d
}
},
text: {
static_icons__default: static_icons__default$1,
static_icons__tertiary: static_icons__tertiary$1
},
interactive: {
disabled__text: disabled__text$1,
primary__resting: primary__resting$2,
danger__resting: danger__resting$1,
danger__hover: danger__hover$1,
warning__resting: warning__resting$1,
warning__hover: warning__hover$1,
success__resting: success__resting$1,
success__hover: success__hover$1
}
},
spacings: {
comfortable: {
small: small$6,
x_small: x_small$5
}
},
typography: typography$d,
shape: shape$2
} = edsTokens.tokens;
const input$2 = {
minHeight: shape$2.straight.minHeight,
background: background$d,
spacings: {
left: small$6,
right: small$6,
top: '6px',
bottom: '6px'
},
typography: {
...typography$d.input.text,
color: static_icons__default$1.rgba
},
entities: {
placeholder: {
typography: {
color: static_icons__tertiary$1.rgba
}
},
helperText: {
typography: {
...typography$d.input.label,
color: static_icons__tertiary$1.rgba
},
states: {
disabled: {
typography: {
color: disabled__text$1.rgba
}
}
}
}
},
states: {
disabled: {
typography: {
color: disabled__text$1.rgba
}
},
readOnly: {
background: 'transparent',
boxShadow: 'none'
},
active: {
outline: {
type: 'outline',
color: 'transparent',
width: '1px',
style: 'solid',
offset: '0px'
}
},
focus: {
outline: {
type: 'outline',
width: '2px',
color: primary__resting$2.rgba,
style: 'solid',
offset: '0px'
}
}
},
boxShadow: 'inset 0px -1px 0px 0px ' + static_icons__tertiary$1.rgba,
modes: {
compact: {
minHeight: shape$2._modes.compact.straight.minHeight,
spacings: {
left: x_small$5,
right: x_small$5,
top: x_small$5,
bottom: x_small$5
}
}
}
};
const error$4 = mergeDeepRight(input$2, {
boxShadow: 'none',
outline: {
color: danger__resting$1.rgba
},
states: {
focus: {
outline: {
color: danger__hover$1.rgba
}
}
},
entities: {
helperText: {
typography: {
...typography$d.input.label,
color: danger__hover$1.rgba
}
}
}
});
const warning$4 = mergeDeepRight(input$2, {
boxShadow: 'none',
outline: {
color: warning__resting$1.rgba
},
states: {
focus: {
outline: {
color: warning__hover$1.rgba
}
}
},
entities: {
helperText: {
typography: {
...typography$d.input.label,
color: warning__hover$1.rgba
}
}
}
});
const success$1 = mergeDeepRight(input$2, {
boxShadow: 'none',
outline: {
color: success__resting$1.rgba
},
states: {
focus: {
outline: {
color: success__hover$1.rgba
}
}
},
entities: {
helperText: {
typography: {
...typography$d.input.label,
color: success__hover$1.rgba
}
}
}
});
const inputToken$1 = {
input: input$2,
error: error$4,
warning: warning$4,
success: success$1
};
const Container$5 = styled__default.default.div.withConfig({
displayName: "InputWrapper__Container",
componentId: "sc-v6o9z1-0"
})([""]);
const HelperText$1 = styled__default.default(TextfieldHelperText).withConfig({
displayName: "InputWrapper__HelperText",
componentId: "sc-v6o9z1-1"
})(["margin-top:8px;margin-left:8px;"]);
const Label$2 = styled__default.default(Label$3).withConfig({
displayName: "InputWrapper__Label",
componentId: "sc-v6o9z1-2"
})(["margin-left:8px;margin-right:8px;"]);
/* @TODO fix no-unused-prop-types disabled & readOnly */
/** InputWrapper is a internal skeleton component for structuring input elements */
const InputWrapper$2 = /*#__PURE__*/react.forwardRef(function InputWrapper({
children,
color,
label,
labelProps = {},
helperProps = {},
helperIcon,
...other
}, ref) {
const {
density
} = useEds();
const actualVariant = color || 'input';
const inputToken = inputToken$1[actualVariant];
const token = edsUtils.useToken({
density
}, inputToken);
const helperTextColor = react.useCallback(() => {
const _token = token();
return other.disabled ? _token.entities.helperText.states.disabled.typography.color : _token.entities.helperText.typography.color;
}, [token, other.disabled])();
const hasHelperText = Boolean(helperProps?.text);
const hasLabel = Boolean(label || labelProps?.label);
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsxs(Container$5, {
...other,
ref: ref,
children: [hasLabel && /*#__PURE__*/jsxRuntime.jsx(Label$2, {
label,
...labelProps
}), children, hasHelperText && /*#__PURE__*/jsxRuntime.jsx(HelperText$1, {
color: helperTextColor,
icon: helperIcon,
...helperProps
})]
})
});
});
const {
colors: {
ui: {
background__light: {
rgba: background$c
}
},
text: {
static_icons__default,
static_icons__tertiary
},
interactive: {
disabled__text,
primary__resting: primary__resting$1,
danger__resting,
danger__hover,
warning__resting,
warning__hover,
success__resting,
success__hover
}
},
spacings: {
comfortable: {
small: small$5,
x_small: x_small$4
}
},
typography: typography$c,
shape: shape$1
} = edsTokens.tokens;
const input$1 = {
height: shape$1.straight.minHeight,
width: '100%',
background: background$c,
spacings: {
left: small$5,
right: small$5,
top: '6px',
bottom: '6px'
},
typography: {
...typography$c.input.text,
color: static_icons__default.rgba
},
outline: {
type: 'outline',
color: 'transparent',
width: '1px',
style: 'solid',
offset: '0px'
},
entities: {
placeholder: {
typography: {
color: static_icons__tertiary.rgba
}
},
adornment: {
typography: {
...typography$c.input.label,
color: static_icons__tertiary.rgba
},
spacings: {
left: small$5,
right: small$5
},
states: {
disabled: {
typography: {
color: disabled__text.rgba
}
}
}
}
},
states: {
disabled: {
typography: {
color: disabled__text.rgba
}
},
readOnly: {
background: 'transparent',
boxShadow: 'none'
},
active: {},
focus: {
outline: {
type: 'outline',
width: '2px',
color: primary__resting$1.rgba,
style: 'solid',
offset: '0px'
}
}
},
boxShadow: 'inset 0px -1px 0px 0px ' + static_icons__tertiary.rgba,
modes: {
compact: {
height: shape$1._modes.compact.straight.minHeight,
spacings: {
left: x_small$4,
right: x_small$4,
top: x_small$4,
bottom: x_small$4
}
}
}
};
const error$3 = mergeDeepRight(input$1, {
boxShadow: 'none',
outline: {
color: danger__resting.rgba
},
states: {
focus: {
outline: {
color: danger__hover.rgba
}
}
},
entities: {
adornment: {
typography: {
...typography$c.input.label,
color: danger__resting.rgba
},
states: {
focus: {
outline: {
color: danger__hover.rgba
}
}
}
}
}
});
const warning$3 = mergeDeepRight(input$1, {
boxShadow: 'none',
outline: {
color: warning__resting.rgba
},
states: {
focus: {
outline: {
color: warning__hover.rgba
}
}
},
entities: {
adornment: {
typography: {
...typography$c.input.label,
color: warning__resting.rgba
},
states: {
focus: {
outline: {
color: warning__hover.rgba
}
}
}
}
}
});
const success = mergeDeepRight(input$1, {
boxShadow: 'none',
outline: {
color: success__resting.rgba
},
states: {
focus: {
outline: {
color: success__hover.rgba
}
}
},
entities: {
adornment: {
typography: {
...typography$c.input.label,
color: success__resting.rgba
},
states: {
focus: {
outline: {
color: success__hover.rgba
}
}
}
}
}
});
const inputToken = {
input: input$1,
error: error$3,
warning: warning$3,
success
};
var tokens$5 = /*#__PURE__*/Object.freeze({
__proto__: null,
error: error$3,
input: input$1,
inputToken: inputToken,
success: success,
warning: warning$3
});
const Container$4 = styled__default.default.div.withConfig({
displayName: "Input__Container",
componentId: "sc-1ykv024-0"
})(({
$token,
disabled,
readOnly
}) => {
const {
states,
entities
} = $token;
return styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";position:relative;height:", ";width:", ";display:flex;flex-direction:row;border:none;box-sizing:border-box;box-shadow:", ";background:var(--eds-input-background,", ");", " &:focus-within{--eds-input-adornment-color:", ";box-shadow:none;", "}", " ", " & > input{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"], entities.adornment.typography.color, $token.typography.color, $token.height, $token.width, $token.boxShadow, $token.background, edsUtils.outlineTemplate($token.outline), entities.adornment?.states.focus?.outline.color, edsUtils.outlineTemplate(states.focus.outline), disabled && styled.css(["--eds-input-adornment-color:", ";--eds-input-color:", ";cursor:not-allowed;box-shadow:none;"], states.disabled.typography.color, states.disabled.typography.color), readOnly && styled.css({
background: states.readOnly.background,
boxShadow: states.readOnly.boxShadow
}));
});
const StyledInput = styled__default.default.input.withConfig({
displayName: "Input__StyledInput",
componentId: "sc-1ykv024-1"
})(({
$token,
$paddingLeft,
$paddingRight
}) => {
return styled.css(["width:100%;border:none;background:transparent;", " ", " outline:none;padding-left:", ";padding-right:", ";&::placeholder{color:", ";}&:disabled{color:var(--eds-input-color);cursor:not-allowed;}"], edsUtils.spacingsTemplate($token.spacings), edsUtils.typographyMixin($token.typography), $paddingLeft, $paddingRight, $token.entities.placeholder.typography.color);
});
const Adornments = styled__default.default.div.withConfig({
displayName: "Input__Adornments",
componentId: "sc-1ykv024-2"
})(({
$token
}) => {
return styled.css(["position:absolute;top:", ";bottom:", ";display:flex;align-items:center;", " color:var(--eds-input-adornment-color);"], $token.spacings.top, $token.spacings.bottom, edsUtils.typographyMixin($token.entities.adornment.typography));
});
const LeftAdornments = styled__default.default(Adornments).withConfig({
displayName: "Input__LeftAdornments",
componentId: "sc-1ykv024-3"
})(({
$token
}) => styled.css(["left:0;padding-left:", ";"], $token.entities.adornment.spacings.left));
const RightAdornments = styled__default.default(Adornments).withConfig({
displayName: "Input__RightAdornments",
componentId: "sc-1ykv024-4"
})(({
$token
}) => styled.css(["right:0;padding-right:", ";"], $token.entities.adornment.spacings.right));
const Input$4 = /*#__PURE__*/react.forwardRef(function Input({
variant,
disabled = false,
type = 'text',
leftAdornments,
rightAdornments,
readOnly,
className,
style,
leftAdornmentsProps,
rightAdornmentsProps,
leftAdornmentsWidth,
rightAdornmentsWidth,
...other
}, ref) {
const inputVariant = inputToken[variant] ? inputToken[variant] : inputToken.input;
const {
density
} = useEds();
const _token = edsUtils.useToken({
density
}, inputVariant)();
const [rightAdornmentsRef, setRightAdornmentsRef] = react.useState();
const [leftAdornmentsRef, setLeftAdornmentsRef] = react.useState();
const token = react.useCallback(() => {
const _leftAdornmentsWidth = leftAdornmentsWidth || (leftAdornmentsRef ? leftAdornmentsRef.clientWidth : 0);
const _rightAdornmentsWidth = rightAdornmentsWidth || (rightAdornmentsRef ? rightAdornmentsRef.clientWidth : 0);
return {
..._token,
spacings: {
..._token.spacings,
left: `${_leftAdornmentsWidth + parseInt(_token.spacings.left)}px`,
right: `${_rightAdornmentsWidth + parseInt(_token.spacings.right)}px`
}
};
}, [leftAdornmentsWidth, leftAdornmentsRef, rightAdornmentsWidth, rightAdornmentsRef, _token])();
const inputProps = {
ref,
type,
disabled,
readOnly,
$token: token,
style: {
resize: 'none'
},
...other
};
const containerProps = {
disabled,
readOnly,
className,
style,
$token: token
};
const _leftAdornmentProps = {
...leftAdornmentsProps,
ref: setLeftAdornmentsRef,
$token: token
};
const _rightAdornmentProps = {
...rightAdornmentsProps,
ref: setRightAdornmentsRef,
$token: token
};
return (
/*#__PURE__*/
// Not using <ThemeProvider> because of cascading styling messing with adornments
jsxRuntime.jsxs(Container$4, {
...containerProps,
children: [leftAdornments ? /*#__PURE__*/jsxRuntime.jsx(LeftAdornments, {
..._leftAdornmentProps,
children: leftAdornments
}) : null, /*#__PURE__*/jsxRuntime.jsx(StyledInput, {
$paddingLeft: token.spacings.left,
$paddingRight: token.spacings.right,
...inputProps
}), rightAdornments ? /*#__PURE__*/jsxRuntime.jsx(RightAdornments, {
..._rightAdornmentProps,
children: rightAdornments
}) : null]
})
);
});
const {
input
} = tokens$5;
const Textarea = /*#__PURE__*/react.forwardRef(function Textarea({
variant,
disabled = false,
type = 'text',
rowsMax,
...other
}, ref) {
const [textareaEl, setTextareaEl] = react.useState(null);
const {
density
} = useEds();
const spacings = density === 'compact' ? input.modes.compact.spacings : input.spacings;
const {
lineHeight
} = input$1.typography;
const {
top,
bottom
} = spacings;
let fontSize = 16;
if (textareaEl) {
fontSize = parseInt(window.getComputedStyle(textareaEl).fontSize);
}
const padding = parseInt(top) + parseInt(bottom);
const maxHeight = parseFloat(lineHeight) * fontSize * rowsMax + padding;
edsUtils.useAutoResize(textareaEl, rowsMax ? maxHeight : null);
const combinedRef = react.useCallback(() => edsUtils.mergeRefs(ref, setTextareaEl), [setTextareaEl, ref])();
const inputProps = {
ref: combinedRef,
type,
disabled,
variant,
...other
};
const leftAdornmentStyles = {
style: {
alignItems: 'flex-start'
}
};
const rigthAdornmentStyles = {
style: {
alignItems: 'flex-start',
pointerEvents: 'none'
}
};
return /*#__PURE__*/jsxRuntime.jsx(Input$4, {
as: "textarea",
rightAdornmentsProps: rigthAdornmentStyles,
leftAdornmentsProps: leftAdornmentStyles,
style: {
height: 'auto'
},
...inputProps
});
});
/** Proxy component for working around typescript and element type switching */
const Field = /*#__PURE__*/react.forwardRef(function Field(props, ref) {
return props.$multiline ? /*#__PURE__*/jsxRuntime.jsx(Textarea, {
ref: ref,
...props
}) : /*#__PURE__*/jsxRuntime.jsx(Input$4, {
ref: ref,
...props
});
});
const TextField = /*#__PURE__*/react.forwardRef(function TextField({
id: _id,
label,
meta,
unit,
helperText,
placeholder,
disabled,
multiline = false,
className,
variant,
inputIcon,
helperIcon,
style,
rowsMax,
textareaRef,
inputRef,
...other
}, ref) {
const id = edsUtils.useId(_id, 'input');
const helperTextId = edsUtils.useId(null, 'helpertext');
const hasRightAdornments = Boolean(unit || inputIcon);
let fieldProps = {
'aria-invalid': variant === 'error' || undefined,
disabled,
placeholder,
id,
variant,
rightAdornments: hasRightAdornments && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [inputIcon, /*#__PURE__*/jsxRuntime.jsx("span", {
children: unit
})]
}),
rowsMax,
ref: inputRef || textareaRef,
$multiline: multiline,
...other
};
let helperProps = {
id: null,
text: helperText,
icon: helperIcon,
disabled
};
const containerProps = {
ref,
className,
style: {
width: '100%',
...style
},
color: variant
};
const labelProps = {
htmlFor: id,
label,
meta,
disabled
};
if (helperText) {
fieldProps = {
'aria-describedby': helperTextId,
...fieldProps
};
helperProps = {
...helperProps,
id: helperTextId
};
}
return /*#__PURE__*/jsxRuntime.jsx(InputWrapper$2, {
helperProps: helperProps,
labelProps: labelProps,
...containerProps,
children: /*#__PURE__*/jsxRuntime.jsx(Field, {
...fieldProps
})
});
});
let _icons = {};
/** Add icons to library to be used for rendering using name.
This needs to be done lonly once */
const add = icons => {
_icons = {
..._icons,
...icons
};
};
const get = name => {
return _icons[name];
};
const StyledSvg = styled__default.default.svg.attrs(({
$height,
$width,
fill
}) => ({
name: null,
xmlns: 'http://www.w3.org/2000/svg',
height: `${$height}px`,
width: `${$width}px`,
fill
})).withConfig({
displayName: "Icon__StyledSvg",
componentId: "sc-6evbi1-0"
})(["transform:", ";"], ({
$rotation
}) => $rotation ? `rotate(${$rotation}deg)` : 'none');
const StyledPath$2 = styled__default.default.path.attrs(({
$height,
$size
}) => ({
size: null,
fillRule: 'evenodd',
clipRule: 'evenodd',
transform: $size / $height !== 1 ? `scale(${$size / $height})` : null
})).withConfig({
displayName: "Icon__StyledPath",
componentId: "sc-6evbi1-1"
})([""]);
const findIcon = (name, data, size) => {
// eslint-disable-next-line prefer-const
const icon = data ?? get(name);
if (size < 24) {
// fallback to normal icon if small is not made yet
return icon.sizes?.small || icon;
}
return icon;
};
const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon({
size,
color = 'currentColor',
name,
rotation,
title,
data,
...rest
}, ref) {
// eslint-disable-next-line prefer-const
const icon = findIcon(name, data, size);
if (typeof icon === 'undefined') {
throw Error(`Icon "${name}" not found. Have you added it using Icon.add() or using data props?`);
}
const $height = size ? size : parseInt(icon.width);
const $width = size ? size : parseInt(icon.height);
let svgProps = {
$height,
$width,
fill: color,
viewBox: `0 0 ${$width} ${$height}`,
$rotation: rotation,
name,
'aria-hidden': true
};
const pathProps = {
$height: icon.height ? parseInt(icon.height) : size,
$size: size || parseInt(icon.height)
};
// Accessibility
const titleId = edsUtils.useId(null, `${icon.prefix}-${icon.name}`);
if (title) {
svgProps = {
...svgProps,
title,
role: 'img',
'aria-hidden': undefined,
'aria-labelledby': titleId
};
}
return /*#__PURE__*/jsxRuntime.jsxs(StyledSvg, {
...svgProps,
...rest,
ref: ref,
children: [title && /*#__PURE__*/jsxRuntime.jsx("title", {
id: titleId,
children: title
}), Array.isArray(icon.svgPathData) ? icon.svgPathData.map(pathData => {
return /*#__PURE__*/jsxRuntime.jsx(StyledPath$2, {
...pathProps,
d: pathData
}, pathData);
}) : /*#__PURE__*/jsxRuntime.jsx(StyledPath$2, {
"data-testid": "eds-icon-path",
...pathProps,
d: icon.svgPathData
})]
});
});
// Icon.displayName = 'EdsIcon'
const Icon$1 = Icon$2;
Icon$1.add = add;
const {
typography: {
paragraph: paragraph$1
}
} = edsTokens.tokens;
const list = {
typography: paragraph$1.body_short
};
const {
typography: typography$b
} = list;
const StyledList$1 = styled__default.default.ul.withConfig({
displayName: "List__StyledList",
componentId: "sc-v9d2hy-0"
})(["", " ", ""], ({
as
}) => as === 'ol' ? styled.css(["& ol{list-style-type:lower-alpha;}"]) : '', edsUtils.typographyTemplate(typography$b));
const List$2 = /*#__PURE__*/react.forwardRef(function List({
children,
variant = 'bullet',
...props
}, ref) {
const as = variant === 'numbered' ? 'ol' : 'ul';
return /*#__PURE__*/jsxRuntime.jsx(StyledList$1, {
as: as,
ref: ref,
...props,
children: children
});
});
const ListItem$2 = /*#__PURE__*/react.forwardRef(function ListItem({
children,
...props
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx("li", {
...props,
ref: ref,
children: children
});
});
const List$1 = List$2;
List$1.Item = ListItem$2;
List$1.Item.displayName = 'List.Item';
const {
typography: {
ui: {
accordion_header: typography$a
}
},
colors: {
ui: {
background__default: {
rgba: backgroundDefault
},
background__medium: {
rgba: borderColor$1
},
background__light: {
rgba: backgroundHover
}
},
interactive: {
primary__resting: {
rgba: activatedColor
},
disabled__fill: {
rgba: disabledIconColor$1
},
disabled__text: {
rgba: disabledColor$2
},
focus: {
rgba: focusOutlineColor$7
}
},
text: {
static_icons__default: {
rgba: defaultIconColor
}
}
},
spacings: {
comfortable: {
medium: mediumSpacing
}
},
interactions: {
focused: {
width: focusOutlineWidth$7
}
},
typography: {
input: {
text
}
}
} = edsTokens.tokens;
const accordion = {
border: {
type: 'border',
color: borderColor$1,
style: 'solid',
width: '1px'
},
entities: {
chevron: {
background: activatedColor,
states: {
disabled: {
background: disabledIconColor$1
}
}
},
header: {
height: '48px',
background: backgroundDefault,
typography: typography$a,
spacings: {
left: mediumSpacing,
right: mediumSpacing
},
states: {
focus: {
outline: {
type: 'outline',
color: focusOutlineColor$7,
style: 'dashed',
width: focusOutlineWidth$7,
offset: '2px'
}
},
disabled: {
typography: {
...typography$a,
color: disabledColor$2
}
},
active: {
typography: {
...typography$a,
color: activatedColor
}
},
hover: {
background: backgroundHover
}
}
},
panel: {
spacings: {
bottom: mediumSpacing,
left: mediumSpacing,
right: mediumSpacing,
top: mediumSpacing
},
typography: {
...text
}
},
icon: {
typography: {
color: defaultIconColor
}
}
},
modes: {
compact: {}
}
};
const Accordion$1 = /*#__PURE__*/react.forwardRef(function Accordion({
headerLevel = 'h2',
chevronPosition = 'left',
children,
id,
...props
}, ref) {
const accordionId = edsUtils.useId(id, 'accordion');
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, accordion);
const AccordionItems = react.Children.map(children, (child, index) => {
if (!child) return null;
return /*#__PURE__*/react.cloneElement(child, {
accordionId,
index,
headerLevel,
chevronPosition
});
});
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsx("div", {
...props,
ref: ref,
children: AccordionItems
})
});
});
const AccordionItem = /*#__PURE__*/react.forwardRef(function AccordionItem({
headerLevel,
chevronPosition,
index = 0,
accordionId,
isExpanded = false,
onExpandedChange,
children,
disabled,
...props
}, ref) {
const [expanded, setExpanded] = react.useState(isExpanded);
const controlled = onExpandedChange != undefined;
const activeExpandedState = controlled ? isExpanded : expanded;
const toggleExpanded = () => {
if (controlled) {
onExpandedChange(!isExpanded);
} else {
setExpanded(!expanded);
}
};
const Children = react.Children.map(children, (child, childIndex) => {
const headerId = `${accordionId}-header-${index + 1}`;
const panelId = `${accordionId}-panel-${index + 1}`;
return childIndex === 0 ? /*#__PURE__*/react.cloneElement(child, {
isExpanded: activeExpandedState,
toggleExpanded,
id: headerId,
panelId,
headerLevel,
chevronPosition,
parentIndex: index,
disabled
}) : /*#__PURE__*/react.cloneElement(child, {
hidden: !activeExpandedState,
id: panelId,
headerId
});
});
react.useEffect(() => {
if (!controlled) {
setExpanded(isExpanded);
}
}, [isExpanded, controlled]);
return /*#__PURE__*/jsxRuntime.jsx("div", {
...props,
ref: ref,
children: Children
});
});
const StyledAccordionHeaderTitle = styled__default.default.span.withConfig({
displayName: "AccordionHeaderTitle__StyledAccordionHeaderTitle",
componentId: "sc-g27uve-0"
})(({
theme,
$isExpanded,
$disabled
}) => {
const {
entities: {
header
}
} = theme;
return styled.css(["display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;flex-grow:1;overflow:hidden;text-align:left;color:", ";"], $isExpanded && !$disabled ? header.states.active.typography?.color : 'inherit');
});
const AccordionHeaderTitle = /*#__PURE__*/react.forwardRef(function AccordionHeaderTitle({
isExpanded,
disabled,
children,
...rest
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderTitle, {
ref: ref,
$isExpanded: isExpanded,
$disabled: disabled,
...rest,
children: children
});
});
const StyledAccordionHeaderActions = styled__default.default.span.withConfig({
displayName: "AccordionHeaderActions__StyledAccordionHeaderActions",
componentId: "sc-klu9el-0"
})(({
theme,
$isExpanded,
disabled
}) => {
const {
entities: {
header
}
} = theme;
return styled.css(["display:flex;align-items:center;justify-content:flex-end;padding-right:", ";", " color:", ";"], header.spacings.right, disabled ? styled.css({
color: header.states.disabled.typography.color,
cursor: 'not-allowed'
}) : styled.css({
color: header.typography.color,
cursor: 'pointer'
}), $isExpanded && !disabled ? header.states.active.typography?.color : 'inherit');
});
const AccordionHeaderActions = /*#__PURE__*/react.forwardRef(function AccordionHeaderActions({
isExpanded,
disabled,
children,
...rest
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderActions, {
ref: ref,
$isExpanded: isExpanded,
disabled: disabled,
...rest,
children: children
});
});
const {
entities: {
chevron: chevronToken
}
} = accordion;
const StyledAccordionHeader = styled__default.default.div.withConfig({
displayName: "AccordionHeader__StyledAccordionHeader",
componentId: "sc-cu2e95-0"
})(({
theme,
disabled,
$parentIndex
}) => {
const {
entities: {
header
},
border
} = theme;
return styled.css(["margin:0;padding:0;height:", ";box-sizing:border-box;display:flex;flex-wrap:nowrap;justify-content:space-between;background-color:", ";", " border-top:", ";", ""], header.height, header.background, edsUtils.bordersTemplate(border), $parentIndex === 0 ? null : 'none', disabled ? styled.css(["color:", ";cursor:not-allowed;"], header.states.disabled.typography.color) : styled.css(["color:", ";cursor:pointer;@media (hover:hover) and (pointer:fine){&:hover{background:", ";}}"], header.typography.color, header.states.hover.background));
});
const StyledAccordionHeaderButton = styled__default.default.button.attrs(({
$panelId,
$isExpanded,
disabled
}) => ({
'aria-expanded': $isExpanded,
'aria-controls': $panelId,
'aria-disabled': $isExpanded && disabled,
tabIndex: disabled ? -1 : 0,
disabled
})).withConfig({
displayName: "AccordionHeader__StyledAccordionHeaderButton",
componentId: "sc-cu2e95-1"
})(({
theme,
disabled
}) => {
const {
entities: {
header,
icon: iconToken
}
} = theme;
return styled.css(["", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border:0;background-color:transparent;margin:0;display:flex;align-items:center;flex-grow:1;", " > svg{color:", ";}"], edsUtils.typographyTemplate(header.typography), edsUtils.spacingsTemplate(header.spacings), edsUtils.outlineTemplate(header.states.focus.outline), edsUtils.outlineTemplate(header.states.focus.outline), disabled ? styled.css({
color: header.states.disabled.typography.color,
cursor: 'not-allowed'
}) : styled.css({
color: header.typography.color,
cursor: 'pointer'
}), iconToken.typography.color);
});
const StyledIcon$1 = styled__default.default(Icon$1).withConfig({
displayName: "AccordionHeader__StyledIcon",
componentId: "sc-cu2e95-2"
})(({
$chevronPosition
}) => {
return styled.css(["flex-shrink:0;", ""], $chevronPosition === 'left' ? styled.css({
marginRight: '32px'
}) : styled.css({
marginLeft: '16px'
}));
});
const AccordionHeader$1 = /*#__PURE__*/react.forwardRef(function AccordionHeader({
parentIndex,
headerLevel,
chevronPosition,
panelId,
id,
isExpanded = false,
children,
toggleExpanded,
disabled,
className,
style,
...props
}, ref) {
const handleClick = e => {
e.preventDefault();
e.stopPropagation();
if (!disabled) {
toggleExpanded();
if (props.onToggle) {
props.onToggle();
}
}
};
const handleKeyDown = e => {
const {
key
} = e;
if (key === 'Enter' || key === ' ') {
toggleExpanded();
if (props.onToggle) {
props.onToggle();
}
e.preventDefault();
e.stopPropagation();
}
};
const chevron = /*#__PURE__*/jsxRuntime.jsx(StyledIcon$1, {
data: isExpanded ? edsIcons.chevron_up : edsIcons.chevron_down,
size: 24,
$chevronPosition: chevronPosition,
color: disabled ? chevronToken.states.disabled.background : chevronToken.background
}, `${id}-icon`);
const headerChildren = react.Children.map(children, child => {
if (typeof child === 'string') {
return /*#__PURE__*/jsxRuntime.jsx(AccordionHeaderTitle, {
isExpanded: isExpanded,
disabled: disabled,
children: child
});
}
if (/*#__PURE__*/react.isValidElement(child) && child.type === AccordionHeaderTitle) {
return /*#__PURE__*/react.cloneElement(child, {
isExpanded,
disabled
});
}
if (child.type === AccordionHeaderActions) {
return;
}
return child;
});
const headerActions = react.Children.map(children, child => {
if (/*#__PURE__*/react.isValidElement(child) && child.type === AccordionHeaderActions) {
return /*#__PURE__*/react.cloneElement(child, {
isExpanded,
disabled
});
}
});
const newChildren = [chevron, headerChildren];
return /*#__PURE__*/jsxRuntime.jsxs(StyledAccordionHeader, {
disabled: disabled,
$parentIndex: parentIndex,
as: headerLevel,
className: className,
style: style,
children: [/*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderButton, {
$isExpanded: isExpanded,
disabled: disabled,
$panelId: panelId,
onClick: handleClick,
onKeyDown: handleKeyDown,
ref: ref,
type: "button",
...props,
children: chevronPosition === 'left' ? newChildren : newChildren.reverse()
}), headerActions && headerActions]
});
});
const StyledAccordionPanel = styled__default.default.div.attrs(({
$headerId
}) => ({
role: 'region',
'aria-labelledby': $headerId
})).withConfig({
displayName: "AccordionPanel__StyledAccordionPanel",
componentId: "sc-suplv4-0"
})(({
theme
}) => {
const {
entities: {
header,
panel
},
border
} = theme;
return styled.css(["", " border-top:0;", " ", " background:", ";min-height:96px;box-sizing:border-box;"], edsUtils.bordersTemplate(border), edsUtils.spacingsTemplate(panel.spacings), edsUtils.typographyTemplate(panel.typography), header.background);
});
const AccordionPanel = /*#__PURE__*/react.forwardRef(function AccordionPanel({
id,
headerId,
hidden,
children,
...props
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionPanel, {
$headerId: headerId,
id: id,
hidden: hidden,
...props,
ref: ref,
children: children
});
});
const Accordion = Accordion$1;
Accordion.Item = AccordionItem;
Accordion.Header = AccordionHeader$1;
Accordion.HeaderTitle = AccordionHeaderTitle;
Accordion.HeaderActions = AccordionHeaderActions;
Accordion.Panel = AccordionPanel;
Accordion.Item.displayName = 'Accordion.Item';
Accordion.Header.displayName = 'Accordion.Header';
Accordion.HeaderTitle.displayName = 'Accordion.HeaderTitle';
Accordion.HeaderActions.displayName = 'Accordion.HeaderActions';
Accordion.Panel.displayName = 'Accordion.Panel';
const TabsContext = /*#__PURE__*/react.createContext({
variant: 'minWidth',
scrollable: false,
handleChange: () => null,
activeTab: 0,
tabsId: '',
tabsFocused: false
});
const TabsProvider = TabsContext.Provider;
TabsContext.Consumer;
const {
colors: {
text: {
static_icons__tertiary: {
rgba: defaultColor
}
},
ui: {
background__medium: {
rgba: defaultBorderColor
}
},
interactive: {
focus: {
rgba: focusOutlineColor$6
},
primary__hover_alt: {
rgba: hoverBackgroundColor
},
primary__resting: {
rgba: activeColor$2
},
primary__hover: {
rgba: activeHoverColor
}
}
},
clickbounds: {
default__base: clickboundsHeight
},
spacings: {
comfortable: {
medium: spacingMedium$7
}
},
interactions: {
focused: {
width: focusOutlineWidth$6
}
},
typography: {
navigation: {
menu_tabs,
menu_title
}
}
} = edsTokens.tokens;
const token$1 = {
entities: {
panel: {
spacings: {
top: spacingMedium$7,
bottom: spacingMedium$7
},
states: {
focus: {
outline: {
type: 'outline',
width: focusOutlineWidth$6,
style: 'dashed',
color: focusOutlineColor$6
}
}
},
typography: {
...menu_title
}
},
tab: {
background: 'transparent',
height: clickboundsHeight,
clickbound: {
height: clickboundsHeight,
offset: {
top: '2px'
}
},
spacings: {
left: spacingMedium$7,
right: spacingMedium$7
},
typography: {
color: defaultColor,
textAlign: 'center',
...menu_tabs
},
border: {
type: 'bordergroup',
bottom: {
color: defaultBorderColor,
style: 'solid',
width: '2px'
}
},
states: {
disabled: {
border: {
type: 'border',
width: 0,
color: 'transparent',
style: 'solid'
}
},
hover: {
background: hoverBackgroundColor
},
focus: {
outline: {
type: 'outline',
width: focusOutlineWidth$6,
offset: `-${parseInt(focusOutlineWidth$6)}px`,
style: 'dashed',
color: focusOutlineColor$6
}
},
active: {
typography: {
color: activeColor$2
},
border: {
type: 'bordergroup',
bottom: {
color: activeColor$2,
style: 'solid',
width: '2px'
}
},
states: {
hover: {
typography: {
color: activeHoverColor
}
}
}
}
}
}
},
modes: {
compact: {}
}
};
const Tabs$1 = /*#__PURE__*/react.forwardRef(function Tabs({
activeTab = 0,
onChange = () => null,
onBlur,
onFocus,
variant = 'minWidth',
scrollable = false,
id,
...props
}, ref) {
const tabsId = edsUtils.useId(id, 'tabs');
const tabsRef = react.useRef(null);
const combinedTabsRef = react.useMemo(() => edsUtils.mergeRefs(tabsRef, ref), [tabsRef, ref]);
const [tabsFocused, setTabsFocused] = react.useState(false);
const [listenerAttached, setListenerAttached] = react.useState(false);
let blurTimer;
const handleBlur = e => {
setListenerAttached(false);
if (tabsRef.current) {
tabsRef.current.removeEventListener('keyup', checkIfTabWasPressed);
}
blurTimer = setTimeout(() => {
if (tabsFocused) {
setTabsFocused(false);
}
}, 0);
onBlur && onBlur(e);
};
const handleFocus = e => {
if (e.target.getAttribute('role') !== 'tab') {
return;
}
clearTimeout(blurTimer);
if (tabsFocused) return;
if (!listenerAttached) {
if (tabsRef.current) {
setListenerAttached(true);
tabsRef.current.addEventListener('keyup', checkIfTabWasPressed, {
once: true,
capture: true
});
}
}
onFocus && onFocus(e);
};
//Only force focus on active Tab if Tabs was navigated to with keyboard
const checkIfTabWasPressed = event => {
setListenerAttached(false);
if (event.key === 'Tab') setTabsFocused(true);
};
react.useEffect(() => {
const tabs = tabsRef.current;
return () => {
if (tabs) tabs.removeEventListener('keyup', checkIfTabWasPressed);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, token$1);
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsx(TabsProvider, {
value: {
activeTab,
handleChange: onChange,
tabsId,
variant,
scrollable,
tabsFocused
},
children: /*#__PURE__*/jsxRuntime.jsx("div", {
ref: combinedTabsRef,
...props,
onBlur: handleBlur,
onFocus: handleFocus
})
})
});
});
const variants$1 = {
fullWidth: 'minmax(1%, 360px)',
minWidth: 'max-content'
};
const StyledTabList = styled__default.default.div.attrs(() => ({
role: 'tablist'
})).withConfig({
displayName: "TabList__StyledTabList",
componentId: "sc-1g1p5i1-0"
})(["display:grid;grid-auto-flow:column;grid-auto-columns:", ";overflow-x:", ";scroll-snap-type:x mandatory;overscroll-behavior-x:contain;@media (prefers-reduced-motion:no-preference){scroll-behavior:smooth;}@media (hover:none){overflow-x:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:none;& ::-webkit-scrollbar{width:0;height:0;}}"], ({
$variant
}) => variants$1[$variant], ({
$scrollable
}) => $scrollable ? 'auto' : 'hidden');
const TabList = /*#__PURE__*/react.forwardRef(function TabsList({
children = [],
...props
}, ref) {
const {
activeTab,
handleChange,
tabsId,
variant = 'minWidth',
scrollable = false,
tabsFocused
} = react.useContext(TabsContext);
const currentTab = react.useRef();
const [arrowNavigating, setArrowNavigating] = react.useState(false);
const selectedTabRef = react.useCallback(node => {
if (node !== null && tabsFocused || node !== null && arrowNavigating) {
setArrowNavigating(false);
node.focus();
}
}, [arrowNavigating, tabsFocused]);
const Tabs = react.Children.map(children, (child, $index) => {
const childProps = child.props;
const controlledActive = childProps.value;
const isActive = controlledActive ? controlledActive === activeTab : $index === activeTab;
const tabRef = isActive ? edsUtils.mergeRefs(child.ref, selectedTabRef) : child.ref;
if (isActive) currentTab.current = $index;
return /*#__PURE__*/react.cloneElement(child, {
id: `${tabsId}-tab-${$index + 1}`,
'aria-controls': `${tabsId}-panel-${$index + 1}`,
active: isActive,
$index,
onClick: () => handleChange($index),
ref: tabRef
});
});
const focusableChildren = Tabs.filter(child => {
const childProps = child.props;
return !childProps.disabled;
}).map(child => {
const childProps = child.props;
return childProps.$index;
});
const firstFocusableChild = focusableChildren[0];
const lastFocusableChild = focusableChildren[focusableChildren.length - 1];
const handleTabsChange = (direction, fallbackTab) => {
const i = direction === 'left' ? 1 : -1;
const nextTab = focusableChildren[focusableChildren.indexOf(currentTab.current) - i];
setArrowNavigating(true);
handleChange(nextTab === undefined ? fallbackTab : nextTab);
};
const handleKeyPress = event => {
const {
key
} = event;
if (key === 'ArrowLeft') {
event.preventDefault();
handleTabsChange('left', lastFocusableChild);
}
if (key === 'ArrowRight') {
event.preventDefault();
handleTabsChange('right', firstFocusableChild);
}
};
return /*#__PURE__*/jsxRuntime.jsx(StyledTabList, {
onKeyDown: handleKeyPress,
ref: ref,
...props,
$variant: variant,
$scrollable: scrollable,
children: Tabs
});
});
const StyledTab = styled__default.default.button.attrs(({
$active = false,
disabled = false,
$value
}) => ({
type: 'button',
role: 'tab',
'aria-selected': $active,
'aria-disabled': disabled,
tabIndex: $value ? 0 : $active ? 0 : -1
})).withConfig({
displayName: "Tab__StyledTab",
componentId: "sc-scjkct-0"
})(({
theme,
$active,
disabled
}) => {
const {
entities: {
tab
}
} = theme;
return styled.css(["appearance:none;box-sizing:border-box;display:inline-flex;align-items:center;border:none;outline:none;height:", ";", " ", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;text-decoration:none;overflow-x:hidden;scroll-snap-align:end;scroll-snap-stop:always;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, edsUtils.spacingsTemplate(tab.spacings), edsUtils.typographyTemplate(tab.typography), $active ? tab.states.active.typography.color : tab.typography.color, tab.background, edsUtils.outlineTemplate(tab.states.focus.outline), edsUtils.outlineTemplate(tab.states.focus.outline), $active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? styled.css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : styled.css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? edsUtils.bordersTemplate(tab.states.disabled.border) : edsUtils.bordersTemplate(tab.border), $active && edsUtils.bordersTemplate(tab.states.active.border));
});
const Tab = /*#__PURE__*/react.forwardRef(function Tab({
active,
value,
...rest
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledTab, {
ref: ref,
$active: active,
$value: value,
...rest
});
});
const TabPanels = /*#__PURE__*/react.forwardRef(function TabPanels({
children,
conditionalRender,
...props
}, ref) {
const {
activeTab,
tabsId
} = react.useContext(TabsContext);
const Panels = react.Children.map(children, (child, $index) => {
if (conditionalRender && activeTab !== $index) return null;
return /*#__PURE__*/react.cloneElement(child, {
id: `${tabsId}-panel-${$index + 1}`,
'aria-labelledby': `${tabsId}-tab-${$index + 1}`,
hidden: activeTab !== $index
});
});
return /*#__PURE__*/jsxRuntime.jsx("div", {
ref: ref,
...props,
children: Panels
});
});
const StyledTabPanel = styled__default.default.div.attrs(() => ({
tabIndex: 0,
role: 'tabpanel'
})).withConfig({
displayName: "TabPanel__StyledTabPanel",
componentId: "sc-e8v1d4-0"
})(({
theme
}) => {
const {
entities: {
panel
}
} = theme;
return styled.css(["", " ", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.spacingsTemplate(panel.spacings), edsUtils.typographyTemplate(panel.typography), edsUtils.outlineTemplate(panel.states.focus.outline), edsUtils.outlineTemplate(panel.states.focus.outline));
});
const TabPanel = /*#__PURE__*/react.forwardRef(function TabPanel({
...props
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledTabPanel, {
ref: ref,
...props,
children: props.children
});
});
const Tabs = Tabs$1;
Tabs.Tab = Tab;
Tabs.Panels = TabPanels;
Tabs.Panel = TabPanel;
Tabs.List = TabList;
Tabs.Tab.displayName = 'Tabs.Tab';
Tabs.Panels.displayName = 'Tabs.Panels';
Tabs.Panel.displayName = 'Tabs.Panel';
Tabs.List.displayName = 'Tabs.List';
const {
elevation,
colors: {
ui: {
background__default: {
rgba: background$b
}
}
}
} = edsTokens.tokens;
const paper = {
background: background$b
};
const StyledPaper = styled__default.default.div.withConfig({
displayName: "Paper__StyledPaper",
componentId: "sc-6ncnv9-0"
})(["background:", ";box-shadow:", ";"], paper.background, ({
$elevation
}) => $elevation);
const Paper = /*#__PURE__*/react.forwardRef(function Paper({
elevation: elevation$1 = 'none',
...rest
}, ref) {
const props = {
...rest,
$elevation: elevation[elevation$1] ?? 'none'
};
return /*#__PURE__*/jsxRuntime.jsx(StyledPaper, {
...props,
ref: ref
});
});
const {
colors: {
ui: {
background__default: {
rgba: background$a
},
background__info: {
rgba: backgroundInfo
},
background__warning: {
rgba: backgroundWarning
},
background__danger: {
rgba: backgroundDanger
}
}
},
spacings: {
comfortable: {
medium: spacingMedium$6
}
},
shape: {
corners: {
borderRadius: borderRadius$6
}
}
} = edsTokens.tokens;
const primary$4 = {
background: background$a,
border: {
type: 'border',
radius: borderRadius$6
},
spacings: {
left: spacingMedium$6,
bottom: spacingMedium$6,
right: spacingMedium$6,
top: spacingMedium$6
}
};
const info$2 = {
background: backgroundInfo
};
const danger = {
background: backgroundDanger
};
const warning$2 = {
background: backgroundWarning
};
var tokens$4 = /*#__PURE__*/Object.freeze({
__proto__: null,
danger: danger,
info: info$2,
primary: primary$4,
warning: warning$2
});
const {
primary: primary$3
} = tokens$4;
const StyledCard = styled__default.default(Paper).withConfig({
displayName: "Card__StyledCard",
componentId: "sc-bjucjn-0"
})(["width:100%;position:relative;background-color:", ";box-sizing:border-box;display:flex;flex-direction:column;grid-gap:16px;", ";"], ({
$background
}) => $background, edsUtils.bordersTemplate(primary$3.border));
const Card$1 = /*#__PURE__*/react.forwardRef(function Card({
children,
variant = 'default',
elevation = 'none',
...rest
}, ref) {
const cardVariant = variant === 'default' ? 'primary' : variant;
const token = tokens$4[cardVariant];
const props = {
ref,
$background: token.background,
...rest
};
return /*#__PURE__*/jsxRuntime.jsx(StyledCard, {
elevation: elevation,
...props,
children: children
});
});
const {
spacings: spacings$6
} = primary$4;
const StyledCardActions = styled__default.default.div.withConfig({
displayName: "CardActions__StyledCardActions",
componentId: "sc-1d5vskp-0"
})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";margin-top:auto;&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}"], ({
$justifyContent
}) => $justifyContent, spacings$6.right, spacings$6.left, spacings$6.top, spacings$6.bottom);
const CardActions = /*#__PURE__*/react.forwardRef(function CardActions({
children,
alignRight = false,
meta = '',
...rest
}, ref) {
const $justifyContent = alignRight ? 'flex-end' : 'flex-start';
const props = {
ref,
$justifyContent,
...rest
};
return /*#__PURE__*/jsxRuntime.jsxs(StyledCardActions, {
...props,
children: [children, meta !== '' && /*#__PURE__*/jsxRuntime.jsx(Typography, {
variant: "caption",
children: meta
})]
});
});
const {
spacings: spacings$5
} = primary$4;
const StyledCardContent = styled__default.default.div.withConfig({
displayName: "CardContent__StyledCardContent",
componentId: "sc-esm4ym-0"
})(["display:grid;padding:0 ", " 0 ", ";&:last-child{padding-bottom:", ";}"], spacings$5.right, spacings$5.left, spacings$5.bottom);
const CardContent = /*#__PURE__*/react.forwardRef(function CardContent({
children,
...props
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledCardContent, {
ref: ref,
...props,
children: children
});
});
const {
spacings: spacings$4,
border: border$4
} = primary$4;
const StyledCardMedia = styled__default.default.div.withConfig({
displayName: "CardMedia__StyledCardMedia",
componentId: "sc-kr8q9c-0"
})(["display:flex;width:auto;", ""], ({
$fullWidth
}) => $fullWidth ? styled.css(["> *{width:100%;}&:first-child{img{border-top-right-radius:", ";border-top-left-radius:", ";}}&:last-child{img{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}}"], border$4.type === 'border' && border$4.radius, border$4.type === 'border' && border$4.radius, border$4.type === 'border' && border$4.radius, border$4.type === 'border' && border$4.radius) : styled.css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings$4.right, spacings$4.left, spacings$4.top, spacings$4.right, spacings$4.left, spacings$4.right, spacings$4.bottom, spacings$4.left));
const CardMedia = /*#__PURE__*/react.forwardRef(function CardMedia({
children,
fullWidth = false,
...rest
}, ref) {
const props = {
...rest,
ref,
$fullWidth: fullWidth
};
return /*#__PURE__*/jsxRuntime.jsx(StyledCardMedia, {
...props,
children: children
});
});
const {
spacings: spacings$3
} = primary$4;
const StyledCardHeader = styled__default.default.div.withConfig({
displayName: "CardHeader__StyledCardHeader",
componentId: "sc-15k8edh-0"
})(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";> :not(:first-child){margin-left:", ";}&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}"], spacings$3.right, spacings$3.left, spacings$3.left, spacings$3.top, spacings$3.bottom);
const CardHeader = /*#__PURE__*/react.forwardRef(function CardHeader({
children,
...rest
}, ref) {
const props = {
...rest,
ref
};
return /*#__PURE__*/jsxRuntime.jsx(StyledCardHeader, {
...props,
children: children
});
});
const StyledCardHeaderTitle = styled__default.default.div.withConfig({
displayName: "CardHeaderTitle__StyledCardHeaderTitle",
componentId: "sc-11m80r3-0"
})(["display:grid;flex-grow:2;grid-auto-columns:auto;"]);
const CardHeaderTitle = /*#__PURE__*/react.forwardRef(function CardHeaderTitle({
children,
...rest
}, ref) {
const props = {
...rest,
ref
};
return /*#__PURE__*/jsxRuntime.jsx(StyledCardHeaderTitle, {
...props,
children: children
});
});
const Card = Card$1;
Card.Actions = CardActions;
Card.Content = CardContent;
Card.Header = CardHeader;
Card.Media = CardMedia;
Card.HeaderTitle = CardHeaderTitle;
Card.Actions.displayName = 'Card.Actions';
Card.Content.displayName = 'Card.Content';
Card.Header.displayName = 'Card.Header';
Card.Media.displayName = 'Card.Media';
Card.HeaderTitle.displayName = 'Card.HeaderTitle';
const {
colors: colors$2,
spacings: {
comfortable: comfortable$3
},
typography: {
navigation
}
} = edsTokens.tokens;
const topbar = {
height: '64px',
background: colors$2.ui.background__default.rgba,
typography: navigation.menu_title,
spacings: {
left: comfortable$3.large,
right: comfortable$3.large,
top: comfortable$3.small,
bottom: comfortable$3.small
},
border: {
type: 'bordergroup',
bottom: {
style: 'solid',
color: colors$2.ui.background__light.rgba,
width: '2px'
}
},
modes: {
compact: {}
}
};
const StyledTopBar = styled__default.default(Paper).withConfig({
displayName: "TopBar__StyledTopBar",
componentId: "sc-1yj236q-0"
})(({
theme,
$sticky
}) => {
return styled.css(["height:", ";background:", ";box-sizing:border-box;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", " ", ""], theme.height, theme.background, theme.spacings.left, edsUtils.bordersTemplate(theme.border), edsUtils.spacingsTemplate(theme.spacings), edsUtils.typographyTemplate(theme.typography), $sticky && styled.css(["position:sticky;top:0;z-index:1100;"]));
});
const TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar({
children,
elevation = 'none',
sticky = true,
...props
}, ref) {
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, topbar);
const rest = {
...props,
ref
};
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsx(StyledTopBar, {
forwardedAs: 'header',
elevation: elevation,
$sticky: sticky,
...rest,
children: children
})
});
});
// TopBar.displayName = 'eds-topbar'
const StyledActions = styled__default.default.div.withConfig({
displayName: "Actions__StyledActions",
componentId: "sc-1251ang-0"
})(["grid-area:right;text-align:right;align-items:center;display:flex;"]);
const Actions = /*#__PURE__*/react.forwardRef(function Actions({
children,
...props
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledActions, {
ref: ref,
...props,
children: children
});
});
// Actions.displayName = 'eds-topbar-actions'
const StyledHeader = styled__default.default.div.withConfig({
displayName: "Header__StyledHeader",
componentId: "sc-1fpllve-0"
})(["grid-area:left;display:grid;grid-template-columns:auto auto;grid-gap:12px;align-items:center;"]);
const Header$2 = /*#__PURE__*/react.forwardRef(function Header({
children,
...props
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledHeader, {
ref: ref,
...props,
children: children
});
});
// Header.displayName = 'eds-topbar-header'
const StyledCustomContent = styled__default.default.div.withConfig({
displayName: "CustomContent__StyledCustomContent",
componentId: "sc-d0e83a-0"
})(["grid-area:center;"]);
const CustomContent = /*#__PURE__*/react.forwardRef(function CustomContent({
children,
...props
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledCustomContent, {
ref: ref,
...props,
children: children
});
});
// CustomContent.displayName = 'eds-topbar-customcontent'
const TopBar = TopBar$1;
TopBar.Actions = Actions;
TopBar.Header = Header$2;
TopBar.CustomContent = CustomContent;
TopBar.Actions.displayName = 'Topbar.Actions';
TopBar.Header.displayName = 'Topbar.Header';
TopBar.CustomContent.displayName = 'Topbar.CustomContent';
const {
spacings: {
comfortable: {
medium: spacingMedium$5
}
},
typography: {
ui: {
accordion_header
},
paragraph: {
body_long
}
},
colors: {
ui: {
background__default: {
rgba: background$9
},
background__scrim: {
rgba: backdrop
}
}
},
shape: {
corners: {
borderRadius: borderRadius$5
}
}
} = edsTokens.tokens;
const dialog = {
width: '252px',
background: background$9,
typography: accordion_header,
border: {
type: 'border',
radius: borderRadius$5
},
spacings: {
bottom: spacingMedium$5
},
entities: {
children: {
spacings: {
top: spacingMedium$5,
bottom: spacingMedium$5,
left: spacingMedium$5,
right: spacingMedium$5
}
},
title: {
minHeight: '24px',
typography: accordion_header
},
content: {
minHeight: '80px',
height: '104px',
typography: body_long
},
actions: {
minHeight: '48px'
},
scrim: {
background: backdrop
}
},
modes: {
compact: {}
}
};
const StyledDialog = styled__default.default(Paper).attrs({
'aria-labelledby': 'eds-dialog-title',
'aria-describedby': 'eds-dialog-customcontent',
elevation: 'above_scrim'
}).withConfig({
displayName: "Dialog__StyledDialog",
componentId: "sc-1mewo3f-0"
})(({
theme
}) => {
return styled.css(["width:", ";background:", ";display:grid;grid-auto-columns:auto;", ";", ";grid-gap:", ";"], theme.width, theme.background, edsUtils.typographyTemplate(theme.typography), edsUtils.bordersTemplate(theme.border), theme.spacings.bottom);
});
const StyledNativeDialog = styled__default.default.dialog.withConfig({
displayName: "Dialog__StyledNativeDialog",
componentId: "sc-1mewo3f-1"
})(({
theme
}) => {
return styled.css(["padding:0;border:0;overflow:visible;overscroll-behavior:contain;", ";&::backdrop{background-color:", ";}"], edsUtils.bordersTemplate(theme.border), theme.entities.scrim.background);
});
const Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog({
children,
open,
onClose,
isDismissable = false,
dialogRef,
...props
}, ref) {
const {
density
} = useEds();
const localRef = react.useRef(null);
const token = edsUtils.useToken({
density
}, dialog);
const combinedDialogRef = react.useMemo(() => edsUtils.mergeRefs(localRef, dialogRef), [localRef, dialogRef]);
react.useEffect(() => {
if (open) {
localRef?.current?.showModal();
} else {
localRef?.current?.close();
}
}, [open]);
//This might become redundant in the future, see https://github.com/whatwg/html/issues/7732
edsUtils.useHideBodyScroll(open);
const handleDismiss = e => {
const {
target
} = e;
if (target instanceof HTMLElement) if (isDismissable && target.nodeName === 'DIALOG') {
onClose && onClose();
}
};
edsUtils.useGlobalKeyPress('Escape', e => {
e.preventDefault();
if (isDismissable && onClose && open) {
onClose && onClose();
}
});
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsx(StyledNativeDialog, {
ref: combinedDialogRef,
onMouseDown: handleDismiss,
children: open && /*#__PURE__*/jsxRuntime.jsx(StyledDialog, {
...props,
ref: ref,
children: children
})
})
});
});
// Dialog.displayName = 'EdsDialog'
const StyledDialogActions = styled__default.default.div.withConfig({
displayName: "DialogActions__StyledDialogActions",
componentId: "sc-16ydtxd-0"
})(({
theme,
children
}) => {
return styled.css(["align-self:end;justify-self:start;padding:0 ", " 0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}", ""], theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.top, theme.entities.children.spacings.bottom, !children && styled.css(["min-height:initial;height:'8px';"]));
});
const DialogActions = /*#__PURE__*/react.forwardRef(function DialogActions({
children,
...props
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledDialogActions, {
ref: ref,
...props,
children: children
});
});
// Actions.displayName = 'EdsDialogActions'
const StyledDialogTitle = styled__default.default.div.withConfig({
displayName: "DialogTitle__StyledDialogTitle",
componentId: "sc-1t3jljt-0"
})(({
theme,
children
}) => {
return styled.css(["", " min-height:", ";align-self:end;justify-self:start;margin-right:", ";", ""], edsUtils.typographyTemplate(theme.entities.title.typography), theme.entities.title.minHeight, theme.entities.children.spacings.right, !children && styled.css(["min-height:initial;height:'8px';"]));
});
const DialogTitle = /*#__PURE__*/react.forwardRef(function DialogTitle({
children,
...rest
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
children: /*#__PURE__*/jsxRuntime.jsx(StyledDialogTitle, {
id: "eds-dialog-title",
ref: ref,
...rest,
children: children
})
});
});
const StyledDialogContent = styled__default.default.div.withConfig({
displayName: "DialogContent__StyledDialogContent",
componentId: "sc-1tze18k-0"
})(({
theme,
$scrollable
}) => {
return styled.css(["--content-spacing-top:", ";", " min-height:", ";align-self:stretch;justify-self:stretch;padding:0 ", " 0 ", ";&:first-child{padding-top:var(--content-spacing-top);}&:last-child{padding-bottom:", ";}", ""], theme.entities.children.spacings.top, edsUtils.typographyTemplate(theme.entities.content.typography), theme.entities.content.minHeight, theme.entities.children.spacings.right, theme.entities.children.spacings.left, theme.entities.children.spacings.bottom, $scrollable && styled.css(["&:not(:first-child){margin-top:calc(var(--content-spacing-top) * -1);}padding-top:var(--content-spacing-top);margin-bottom:calc(var(--content-spacing-top) * -1);padding-bottom:var(--content-spacing-top);min-height:initial;height:", ";overflow-y:auto;"], theme.entities.content.height));
});
const StyledDivider$2 = styled__default.default(Divider).withConfig({
displayName: "DialogContent__StyledDivider",
componentId: "sc-1tze18k-1"
})(["width:100%;margin:0;"]);
const DialogContent = /*#__PURE__*/react.forwardRef(function DialogContent({
children,
scrollable = false,
...rest
}, ref) {
const props = {
$scrollable: scrollable,
ref,
...rest
};
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [/*#__PURE__*/jsxRuntime.jsx(StyledDialogContent, {
id: "eds-dialog-customcontent",
...props,
children: children
}), children && scrollable && /*#__PURE__*/jsxRuntime.jsx(StyledDivider$2, {
color: "medium",
variant: "small"
})]
});
});
const StyledDialogHeader = styled__default.default.div.withConfig({
displayName: "DialogHeader__StyledDialogHeader",
componentId: "sc-mbwcos-0"
})(({
theme
}) => {
return styled.css(["display:flex;justify-content:space-between;align-items:center;padding:", " ", " 0 ", ";"], theme.entities.children.spacings.top, theme.entities.children.spacings.right, theme.entities.children.spacings.left);
});
const StyledDivider$1 = styled__default.default(Divider).withConfig({
displayName: "DialogHeader__StyledDivider",
componentId: "sc-mbwcos-1"
})(["margin-bottom:0;"]);
const DialogHeader = /*#__PURE__*/react.forwardRef(function DialogHeader({
children,
...rest
}, ref) {
const props = {
...rest,
ref
};
return /*#__PURE__*/jsxRuntime.jsxs("div", {
...props,
children: [/*#__PURE__*/jsxRuntime.jsx(StyledDialogHeader, {
children: children
}), /*#__PURE__*/jsxRuntime.jsx(StyledDivider$1, {
variant: "small",
color: "medium"
})]
});
});
const Dialog = Dialog$1;
Dialog.Actions = DialogActions;
Dialog.Title = DialogTitle;
Dialog.CustomContent = DialogContent;
Dialog.Content = DialogContent;
Dialog.Header = DialogHeader;
Dialog.Actions.displayName = 'Dialog.Actions';
Dialog.Title.displayName = 'Dialog.Title';
Dialog.Content.displayName = 'Dialog.Content';
Dialog.Header.displayName = 'Dialog.Header';
const {
colors: {
ui: {
background__scrim: {
rgba: background$8
}
}
}
} = edsTokens.tokens;
const scrim = {
background: background$8
};
const {
background: background$7
} = scrim;
const StyledScrim = styled__default.default(react$1.FloatingOverlay).withConfig({
displayName: "Scrim__StyledScrim",
componentId: "sc-1fr7uvy-0"
})(["background:", ";z-index:1300;align-items:center;justify-content:center;display:flex;"], background$7);
const ScrimContent = styled__default.default.div.withConfig({
displayName: "Scrim__ScrimContent",
componentId: "sc-1fr7uvy-1"
})(["width:auto;height:auto;"]);
const Scrim = /*#__PURE__*/react.forwardRef(function Scrim({
children,
onClose,
open,
isDismissable = false,
...rest
}, ref) {
const scrimRef = react.useRef(null);
edsUtils.useHideBodyScroll(open);
const combinedScrimRef = react.useMemo(() => edsUtils.mergeRefs(scrimRef, ref), [scrimRef, ref]);
edsUtils.useGlobalKeyPress('Escape', () => {
if (isDismissable && onClose && open) {
onClose();
}
});
const handleMouseClose = event => {
if (event && event.target === scrimRef.current) {
if (event.type === 'mousedown' && isDismissable && open) {
onClose && onClose();
}
}
};
if (!open) {
return null;
}
return /*#__PURE__*/jsxRuntime.jsx(StyledScrim, {
onMouseDown: handleMouseClose,
ref: combinedScrimRef,
...rest,
children: /*#__PURE__*/jsxRuntime.jsx(ScrimContent, {
children: children
})
});
});
const {
colors: {
interactive: {
primary__resting: {
rgba: primaryColor$3
},
primary__hover_alt: {
rgba: primaryHoverAlt$5
},
primary__hover: {
rgba: primaryHover$3
},
focus: {
rgba: focusColor$2
}
},
text: {
static_icons__tertiary: {
rgba: labelColor
}
}
},
shape: {
corners: {
borderRadius: borderRadius$4
}
},
spacings: {
comfortable: {
small: small$4,
x_large: x_large$3,
xxx_large: xxx_large$1
}
},
typography: typography$9
} = edsTokens.tokens;
const tableOfContents = {
typography: {
...typography$9.navigation.button,
color: labelColor
},
spacings: {
top: xxx_large$1,
bottom: x_large$3
},
entities: {
icon: {
background: primaryColor$3,
spacings: {
right: small$4
}
},
links: {
width: 'calc(189px - 36px)',
typography: {
...typography$9.navigation.button,
color: primaryColor$3
},
spacings: {
top: '10px',
bottom: '10px',
left: '18px',
right: '18px'
}
},
span: {
maxWidth: '115px'
},
sticky: {
spacings: {
top: x_large$3,
right: x_large$3
}
}
},
states: {
focus: {
outline: {
type: 'outline',
color: focusColor$2,
width: '1px',
style: 'dashed',
offset: '2px'
}
},
hover: {
background: primaryHoverAlt$5,
border: {
radius: borderRadius$4
},
entities: {
icon: {
background: primaryHover$3
}
},
typography: {
...typography$9.navigation.button,
color: primaryHover$3
}
}
},
modes: {
compact: {}
}
};
const StyledTableOfContents = styled__default.default.nav.withConfig({
displayName: "TableOfContents__StyledTableOfContents",
componentId: "sc-q23s6y-0"
})(({
theme,
$sticky
}) => {
return styled.css(["margin-top:", ";margin-bottom:", ";", ""], theme.spacings.top, theme.spacings.bottom, $sticky && styled.css(["position:fixed;top:", ";right:", ";"], theme.entities.sticky.spacings.top, theme.entities.sticky.spacings.right));
});
const TocList = styled__default.default(List$1).withConfig({
displayName: "TableOfContents__TocList",
componentId: "sc-q23s6y-1"
})(["margin:0;padding:0;"]);
const TocLabel = styled__default.default(Typography).withConfig({
displayName: "TableOfContents__TocLabel",
componentId: "sc-q23s6y-2"
})(({
theme
}) => {
return styled.css(["", ""], edsUtils.typographyTemplate(theme.typography));
});
const TableOfContents$1 = /*#__PURE__*/react.forwardRef(function TableOfContents({
children,
sticky = false,
label = '',
...rest
}, ref) {
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, tableOfContents);
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsxs(StyledTableOfContents, {
ref: ref,
$sticky: sticky,
...rest,
children: [/*#__PURE__*/jsxRuntime.jsx(TocLabel, {
variant: "overline",
children: label
}), /*#__PURE__*/jsxRuntime.jsx(TocList, {
children: children
})]
})
});
});
const StyledLinkItem = styled__default.default.li.withConfig({
displayName: "LinkItem__StyledLinkItem",
componentId: "sc-1tfuad4-0"
})(({
theme
}) => {
return styled.css(["list-style:none;margin:0;padding:0;a{text-decoration:none;", " ", " height:", ";width:", ";display:block;position:relative;svg{fill:", ";margin-right:", ";vertical-align:text-bottom;}span{max-width:", ";overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:text-bottom;display:inline-block;}&:focus{", ";}@media (hover:hover) and (pointer:fine){&:hover{", " background:", ";", " svg{fill:", ";}}}&:active{outline:none;}}"], edsUtils.typographyTemplate(theme.entities.links.typography), edsUtils.spacingsTemplate(theme.entities.links.spacings), theme.entities.links.typography.lineHeight, theme.entities.links.width, theme.entities.icon.background, theme.entities.icon.spacings.right, theme.entities.span.maxWidth, edsUtils.outlineTemplate(theme.states.focus.outline), edsUtils.typographyTemplate(theme.states.hover.typography), theme.states.hover.background, edsUtils.bordersTemplate(theme.states.hover.border), theme.states.hover.entities.icon.background);
});
const LinkItem = /*#__PURE__*/react.forwardRef(function LinkItem({
children,
...props
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledLinkItem, {
...props,
ref: ref,
children: children
});
});
const TableOfContents = TableOfContents$1;
TableOfContents.LinkItem = LinkItem;
TableOfContents.LinkItem.displayName = 'TableOfContents.LinkItem';
const {
colors: {
ui: {
background__default: {
rgba: background$6
},
background__light: {
rgba: borderColor
}
}
},
spacings: {
comfortable: {
xx_small: spacingXXS,
medium: spacingMedium$4
}
},
typography: {
paragraph: {
body_short
}
}
} = edsTokens.tokens;
const comfortable$2 = {
background: background$6,
spacings: {
left: '14px',
// padding left is 14px, because of border-left 'steals' 2px of the padding
right: spacingMedium$4,
top: spacingMedium$4
},
border: {
type: 'bordergroup',
left: {
color: borderColor,
width: spacingXXS,
style: 'solid'
}
},
typography: {
...body_short
}
};
const variants = {
small: '240px',
medium: '320px',
large: '480px',
xlarge: '640px'
};
const {
background: background$5,
spacings: spacings$2,
border: border$3,
typography: typography$8
} = comfortable$2;
const StyledSideSheet = styled__default.default.div.withConfig({
displayName: "SideSheet__StyledSideSheet",
componentId: "sc-wkzlnn-0"
})(["height:100%;position:absolute;z-index:1200;top:0;right:0;box-sizing:border-box;background:", ";width:", ";", " ", ";", ""], background$5, ({
width
}) => width, edsUtils.bordersTemplate(border$3), edsUtils.spacingsTemplate(spacings$2), edsUtils.typographyTemplate(typography$8));
const Header$1 = styled__default.default.div.withConfig({
displayName: "SideSheet__Header",
componentId: "sc-wkzlnn-1"
})(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;& > button{margin-left:auto;flex-shrink:0;}"]);
const SideSheet = /*#__PURE__*/react.forwardRef(function SideSheet({
variant = 'medium',
width,
title,
children,
open,
onClose,
...rest
}, ref) {
const props = {
...rest,
ref,
width: width || variants[variant]
};
return open && /*#__PURE__*/jsxRuntime.jsxs(StyledSideSheet, {
...props,
children: [(title || onClose) && /*#__PURE__*/jsxRuntime.jsxs(Header$1, {
children: [title && /*#__PURE__*/jsxRuntime.jsx(Typography, {
variant: "h2",
children: title
}), onClose && /*#__PURE__*/jsxRuntime.jsx(Button$1, {
variant: "ghost_icon",
onClick: onClose,
title: "Close",
"aria-label": "Close sidesheet",
children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
name: "clear",
data: edsIcons.clear
})
})]
}), children]
});
});
const {
spacings: {
comfortable: {
x_small: x_small$3,
small: small$3,
medium: medium$3
}
},
typography: {
ui: {
chip__badge: chipTypography
}
},
colors: {
ui: {
background__default: {
rgba: backgroundColorDefault$1
},
background__light: {
rgba: backgroundColor$2
}
},
interactive: {
primary__resting: {
rgba: primaryColor$2
},
primary__hover_alt: {
rgba: primaryHoverAlt$4
},
primary__hover: {
rgba: primaryHover$2
},
disabled__text: {
rgba: disabledColor$1
},
focus: {
rgba: focusOutlineColor$5
},
primary__selected_highlight: {
rgba: activeColor$1
},
danger__resting: {
rgba: errorColor
},
danger__hover: {
rgba: errorColorHover
},
danger__highlight: {
rgba: errorBackgroundHover
}
}
},
shape: {
rounded: {
borderRadius: borderRadius$3
}
},
interactions: {
focused: {
width: focusOutlineWidth$5
}
}
} = edsTokens.tokens;
const enabled$3 = {
background: backgroundColor$2,
height: '22px',
border: {
radius: borderRadius$3,
color: 'transparent',
type: 'border',
width: '1px',
style: 'solid'
},
spacings: {
left: x_small$3,
right: small$3
},
typography: {
...chipTypography,
color: primaryColor$2
},
states: {
hover: {
typography: {
color: primaryHover$2
}
},
disabled: {
typography: {
color: disabledColor$1
}
},
focus: {
outline: {
width: focusOutlineWidth$5,
color: focusOutlineColor$5,
style: 'dashed',
type: 'outline',
offset: '3px'
}
},
active: {
background: activeColor$1
}
},
entities: {
icon: {
height: medium$3,
width: medium$3,
border: {
radius: borderRadius$3,
type: 'border',
width: 0
},
states: {
hover: {
background: primaryHoverAlt$4
}
}
}
}
};
const error$2 = {
background: backgroundColorDefault$1,
border: {
type: 'border',
color: errorColor,
width: '1px',
style: 'solid',
radius: borderRadius$3
},
typography: {
color: errorColor
},
states: {
hover: {
typography: {
color: errorColorHover
}
}
},
entities: {
icon: {
typography: {
color: errorColor
},
background: errorBackgroundHover
}
}
};
var tokens$3 = /*#__PURE__*/Object.freeze({
__proto__: null,
enabled: enabled$3,
error: error$2
});
Icon$1.add({
close: edsIcons.close
});
const {
enabled: enabled$2,
error: error$1
} = tokens$3;
const Icon = styled__default.default(Icon$1).withConfig({
displayName: "Icon",
componentId: "sc-50ffvg-0"
})(["cursor:pointer;padding:1px;", " &:hover{", ";}", ""], edsUtils.bordersTemplate(enabled$2.entities.icon.border), ({
$variant
}) => {
switch ($variant) {
case 'error':
return styled.css(["background:", ";svg{fill:", ";}"], error$1.entities.icon.background, error$1.entities.icon.typography.color);
default:
return styled.css(["background:", ";svg{fill:", ";}"], enabled$2.entities.icon.states.hover.background, enabled$2.states.hover.typography.color);
}
}, ({
$disabled
}) => $disabled && styled.css(["cursor:not-allowed;&:hover{background:transparent;}"]));
const {
enabled: enabled$1,
error
} = tokens$3;
const {
background: background$4,
height,
typography: typography$7,
spacings: spacings$1,
border: border$2,
states: states$2
} = enabled$1;
const StyledChips = styled__default.default.div.attrs(({
$clickable,
$deletable
}) => ({
tabIndex: $clickable || $deletable ? 0 : null,
role: $clickable ? 'button' : null
})).withConfig({
displayName: "Chip__StyledChips",
componentId: "sc-wzsllq-0"
})(["background:", ";height:", ";width:fit-content;display:grid;grid-gap:8px;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;svg{fill:", ";}&:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}", " ", " ", " ", " ", " ", " ", " ", ""], background$4, height, typography$7.color, edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.outlineTemplate(states$2.focus.outline), edsUtils.bordersTemplate(border$2), edsUtils.spacingsTemplate(spacings$1), edsUtils.typographyTemplate(typography$7), ({
$clickable
}) => $clickable && styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;color:", ";svg{fill:", ";}}}"], states$2.hover.typography.color, states$2.hover.typography.color), ({
$variant,
$clickable
}) => {
switch ($variant) {
case 'active':
return styled.css(["background:", ";"], states$2.active.background);
case 'error':
return styled.css(["background:", ";color:", ";svg{fill:", ";}", ";@media (hover:hover) and (pointer:fine){&:hover{border-color:", ";color:", ";svg{fill:", ";}}}"], error.background, error.typography.color, error.entities.icon.typography.color, edsUtils.bordersTemplate(error.border), $clickable && error.states.hover.typography.color, $clickable && error.states.hover.typography.color, $clickable && error.states.hover.typography.color);
default:
return '';
}
}, ({
$disabled
}) => $disabled && styled.css(["cursor:not-allowed;background:", ";color:", ";svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{color:", ";cursor:not-allowed;svg{fill:", ";}}}"], background$4, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color, states$2.disabled.typography.color), ({
$deletable
}) => $deletable && styled.css(["padding-right:4px;"]), ({
$onlyChild
}) => $onlyChild ? styled.css(["padding-left:8px;"]) : '');
const Chip = /*#__PURE__*/react.forwardRef(function Chip({
children,
onDelete,
disabled = false,
onClick,
variant = 'default',
...other
}, ref) {
const handleDelete = disabled ? undefined : onDelete;
const handleClick = disabled ? undefined : onClick;
const deletable = handleDelete !== undefined;
const clickable = handleClick !== undefined;
const onlyChild = typeof children === 'string';
const chipProps = {
...other,
ref,
$disabled: disabled,
$deletable: deletable,
$clickable: clickable,
$onlyChild: onlyChild,
$variant: variant
};
const handleKeyPress = event => {
const {
key
} = event;
if (key === 'Enter') {
if (deletable) {
handleDelete(event);
}
// Delete takes precedence, else click action is activated
if (clickable && !deletable) {
handleClick(event);
}
}
};
const resizedChildren = react.Children.map(children, child => {
// We force size on Icon & Avatar component
if (child.props) {
return /*#__PURE__*/react.cloneElement(child, {
size: 16,
disabled
});
}
return child;
});
const onDeleteClick = event => {
event.stopPropagation();
if (deletable) {
handleDelete(event);
}
};
return /*#__PURE__*/jsxRuntime.jsxs(StyledChips, {
...chipProps,
onClick: event => clickable && handleClick(event),
onKeyDown: handleKeyPress,
children: [resizedChildren, onDelete && /*#__PURE__*/jsxRuntime.jsx(Icon, {
name: "close",
title: "close",
$disabled: disabled,
$variant: variant,
onClick: onDeleteClick,
size: 16
})]
});
});
// Chip.displayName = 'eds-chip'
const avatar = {
border: {
type: 'border',
radius: '50%'
},
states: {
disabled: {
opacity: '0.5'
}
}
};
const StyledAvatar = styled__default.default.div.withConfig({
displayName: "Avatar__StyledAvatar",
componentId: "sc-r7n7on-0"
})(["position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;", ";", ""], edsUtils.bordersTemplate(avatar.border), ({
$size
}) => styled.css(["height:", "px;width:", "px;"], $size, $size));
const StyledImage = styled__default.default.img.withConfig({
displayName: "Avatar__StyledImage",
componentId: "sc-r7n7on-1"
})(["height:100%;text-align:center;color:transparent;", ";"], ({
$disabled
}) => $disabled && styled.css(["opacity:", ";"], avatar.states.disabled.opacity));
const Avatar = /*#__PURE__*/react.forwardRef(function Avatar({
src = null,
alt,
size = 24,
disabled = false,
...rest
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledAvatar, {
$size: size,
ref: ref,
...rest,
children: /*#__PURE__*/jsxRuntime.jsx(StyledImage, {
src: src,
alt: alt,
$disabled: disabled
})
});
});
Avatar.displayName = 'Avatar';
const SearchInput = styled__default.default(Input$4).withConfig({
displayName: "Search__SearchInput",
componentId: "sc-v8l23u-0"
})(["input{&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}}"]);
const InsideButton = styled__default.default(Button$1).withConfig({
displayName: "Search__InsideButton",
componentId: "sc-v8l23u-1"
})(["height:24px;width:24px;"]);
const Search = /*#__PURE__*/react.forwardRef(function Search({
onChange,
style,
className,
...rest
}, ref) {
const inputRef = react.useRef(null);
const [showClear, setShowClear] = react.useState(Boolean(rest.defaultValue));
react.useEffect(() => {
if (rest.disabled) {
setShowClear(false);
} else if (rest.value) {
setShowClear(Boolean(rest.value));
}
}, [rest.value, rest.disabled]);
const clearInputValue = () => {
const input = inputRef.current;
const clearedValue = '';
edsUtils.setReactInputValue(input, clearedValue);
};
const handleOnChange = e => {
setShowClear(Boolean(e.currentTarget.value));
};
const combinedRef = react.useMemo(() => edsUtils.mergeRefs(inputRef, ref), [inputRef, ref]);
return /*#__PURE__*/jsxRuntime.jsx(InputWrapper$2, {
role: "search",
style: style,
className: className,
children: /*#__PURE__*/jsxRuntime.jsx(SearchInput, {
onChange: e => {
handleOnChange(e);
if (onChange) {
onChange(e);
}
},
ref: combinedRef,
leftAdornmentsWidth: 24 + 8,
leftAdornments: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: edsIcons.search,
"aria-hidden": true,
size: 18
}),
rightAdornmentsWidth: 24 + 8,
rightAdornments: /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
children: showClear && /*#__PURE__*/jsxRuntime.jsx(InsideButton, {
"aria-label": 'clear search',
title: "clear",
variant: "ghost_icon",
onClick: e => {
e.stopPropagation();
clearInputValue();
},
children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: edsIcons.close,
size: 16
})
})
}),
...rest
})
});
});
const {
colors: {
ui: {
background__light: {
rgba: backgroundColor$1
},
background__default: {
rgba: backgroundColorDefault
},
background__medium: {
rgba: backgroundColorMedium$1
}
},
interactive: {
primary__resting: {
rgba: indicatorColor
},
primary__hover_alt: {
rgba: primaryHoverAlt$3
},
primary__hover: {
rgba: primaryHover$1
},
focus: {
rgba: focusOutlineColor$4
},
disabled__fill: {
rgba: backgroundColorDisabled
},
disabled__text: {
rgba: textColorDisabled
},
disabled__border: {
rgba: backgroundBorderDisabled
}
},
text: {
static_icons__tertiary: {
rgba: textColor$1
}
}
},
typography: {
paragraph
},
interactions: {
focused: {
width: focusOutlineWidth$4
}
}
} = edsTokens.tokens;
const slider = {
background: backgroundColorDefault,
entities: {
track: {
background: backgroundColor$1,
height: '4px',
spacings: {
top: '24px',
bottom: '9px'
},
entities: {
indicator: {
background: indicatorColor,
states: {
hover: {
background: primaryHover$1
},
disabled: {
background: backgroundBorderDisabled
}
}
}
},
states: {
hover: {
background: backgroundColorMedium$1
}
}
},
output: {
background: indicatorColor,
typography: {
...paragraph.caption,
color: textColor$1
},
states: {
hover: {
background: primaryHover$1
},
disabled: {
background: backgroundColorDisabled,
typography: {
color: textColorDisabled
}
}
}
},
handle: {
background: backgroundColorDefault,
height: '12px',
width: '12px',
border: {
type: 'border',
color: indicatorColor,
radius: '50%',
width: '2px',
style: 'solid'
},
states: {
focus: {
outline: {
type: 'outline',
color: focusOutlineColor$4,
width: focusOutlineWidth$4,
style: 'dashed',
offset: '3px'
}
},
hover: {
background: primaryHoverAlt$3,
border: {
type: 'border',
color: primaryHover$1
}
}
}
},
dot: {
height: '6px',
width: '6px',
border: {
type: 'border',
color: backgroundColorMedium$1,
width: '1px',
style: 'solid',
radius: '50%'
},
spacings: {
bottom: '8px'
}
}
},
states: {
disabled: {
background: backgroundColorDisabled,
border: {
type: 'border',
color: backgroundColorMedium$1
}
}
}
};
const {
entities: {
track: track$2,
output: output$2
}
} = slider;
const StyledMinMax = styled__default.default.span.withConfig({
displayName: "MinMax__StyledMinMax",
componentId: "sc-lxmlid-0"
})(["grid-row:2;", " position:absolute;left:2px;top:", ";pointer-events:none;text-align:left;transform:translate(calc(-1 * calc((100% - 8px) / 2)));&:last-child{left:auto;right:2px;transform:translate(calc((100% - 8px) / 2));}"], edsUtils.typographyTemplate(output$2.typography), track$2.spacings.top);
const MinMax = /*#__PURE__*/react.forwardRef(function MinMax({
children
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledMinMax, {
ref: ref,
children: children
});
});
const {
entities: {
output: output$1
}
} = slider;
const StyledOutput = styled__default.default.output.withConfig({
displayName: "Output__StyledOutput",
componentId: "sc-1dy945x-0"
})(["--realWidth:calc(100% - 12px);--background:var(--tooltip-background,", ");width:fit-content;position:absolute;display:flex;align-items:center;border-radius:4px;z-index:1;", ";color:white;background:var(--background);padding:4px 4px 2px 4px;bottom:calc(100% + 1px);pointer-events:none;margin-left:calc((var(--val) - var(--min)) / var(--dif) * var(--realWidth));transform:translate(calc(-1 * calc(var(--realWidth) / 2)));grid-row:2;grid-column:1 / -1;opacity:var(--showTooltip);[data-disabled] &{background:", ";color:", ";}"], output$1.background, edsUtils.typographyTemplate(output$1.typography), output$1.states.disabled.background, output$1.states.disabled.typography.color);
const Output = /*#__PURE__*/react.forwardRef(function Output({
children,
value,
htmlFor
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledOutput, {
ref: ref,
style: {
'--val': value
},
htmlFor: htmlFor,
children: children
});
});
const {
entities: {
handle: handle$1
},
states: {
disabled: _disabled
}
} = slider;
const track$1 = styled.css(["width:100%;height:100%;cursor:pointer;background:none;"]);
const thumb = styled.css(["", " height:", ";width:", ";background:", ";cursor:pointer;position:relative;z-index:1;"], edsUtils.bordersTemplate(handle$1.border), handle$1.height, handle$1.width, handle$1.background);
const thumbHover = styled.css(["@media (hover:hover) and (pointer:fine){box-shadow:0px 0px 0px 6px ", ";border-color:", ";}"], handle$1.states.hover.background, handle$1.states.hover.border.type === 'border' && handle$1.states.hover.border.color);
const thumbHoverAndDisabled = styled.css(["@media (hover:hover) and (pointer:fine){cursor:not-allowed;box-shadow:none;}"]);
const thumbDisabled = styled.css(["background-color:", ";border-color:", ";"], _disabled.background, _disabled.border.type === 'border' && _disabled.border.color);
const StyledSliderInput = styled__default.default.input.attrs(() => ({
type: 'range'
})).withConfig({
displayName: "SliderInput__StyledSliderInput",
componentId: "sc-17orw4f-0"
})(["&::-webkit-slider-runnable-track,&::-webkit-slider-thumb,&{-webkit-appearance:none;}::-moz-focus-outer{border:0;}width:100%;background:transparent;background:none;grid-column:1 / -1;grid-row:2;font:inherit;margin:0;z-index:2;outline:none;&[data-focus-visible-added]:focus{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:focus-visible{z-index:2;&::-webkit-slider-thumb{", ";}&::-moz-range-thumb{", ";}}&:hover,&:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}}&:disabled:hover,&:disabled:active{&::-webkit-slider-thumb{", "}&::-moz-range-thumb{", "}&::-webkit-slider-runnable-track{cursor:not-allowed;}&::-moz-range-track{cursor:not-allowed;}}&:before,&:after{}&:after{right:0;}&::-webkit-slider-thumb{", " margin-top:6px;}&::-moz-range-thumb{", " height:8px;width:8px;}&::-webkit-slider-runnable-track{", "}&::-moz-range-track{", "}"], edsUtils.outlineTemplate(handle$1.states.focus.outline), edsUtils.outlineTemplate(handle$1.states.focus.outline), edsUtils.outlineTemplate(handle$1.states.focus.outline), edsUtils.outlineTemplate(handle$1.states.focus.outline), thumbHover, thumbHover, thumbDisabled, thumbDisabled, thumbHoverAndDisabled, thumbHoverAndDisabled, thumb, thumb, track$1, track$1);
const SliderInput = /*#__PURE__*/react.forwardRef(function SliderInput({
value,
min,
max,
id,
step,
onChange,
onMouseUp,
onKeyUp,
disabled,
...restProps
}, ref) {
return /*#__PURE__*/jsxRuntime.jsx(StyledSliderInput, {
...restProps,
value: value,
ref: ref,
min: min,
max: max,
id: id,
step: step,
onChange: event => {
onChange(event);
},
onMouseUp: event => {
onMouseUp(event);
},
onKeyUp: event => {
onKeyUp(event);
},
disabled: disabled
});
});
SliderInput.displayName = 'SliderInput';
const {
entities: {
track,
handle,
dot,
output
}
} = slider;
const fakeTrackBg = styled.css(["background-image:url(\"data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='", "' width='100%' height='4' rx='2' /></svg>\");background-size:cover;background-repeat:no-repeat;"], track.background);
const fakeTrackBgHover = styled.css({
backgroundImage: `url("data:image/svg+xml,<svg xmlns='http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'><rect x='0' y='11' fill='${track.states.hover.background}' width='100%' height='4' rx='2' /></svg>")`
});
const trackFill = styled.css(["grid-column:1 / span 2;grid-row:2;height:", ";margin-bottom:", ";align-self:end;content:'';"], track.height, track.spacings.bottom);
const wrapperGrid = styled.css(["display:grid;grid-template-rows:max-content 24px;grid-template-columns:1fr 1fr;width:100%;position:relative;"]);
const RangeWrapper = styled__default.default.div.attrs(({
$min,
$max,
$valA,
$valB,
$disabled,
$hideActiveTrack,
$labelAlwaysOn,
style
}) => ({
'data-disabled': $disabled ? true : null,
style: {
'--a': $valA,
'--b': $valB,
'--min': $min,
'--max': $max,
'--showTooltip': $labelAlwaysOn ? 1 : 0,
'--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
'--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background,
...style
}
})).withConfig({
displayName: "Slider__RangeWrapper",
componentId: "sc-n1grrg-0"
})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::before,&::after{", ";background:var(--background);}&::before{margin-left:calc( calc(", " / 2) + (var(--a) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--b) - var(--a)) / var(--dif) * var(--realWidth));}&::after{margin-left:calc( calc(", " / 2) + (var(--b) - var(--min)) / var(--dif) * var(--realWidth) );width:calc((var(--a) - var(--b)) / var(--dif) * var(--realWidth));}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::before,&::after{background:var(--background-hover);}}}", ";", ";"], wrapperGrid, fakeTrackBg, trackFill, handle.width, handle.width, output.states.hover.background, fakeTrackBgHover, ({
$touchNavigation
}) => $touchNavigation && styled.css(["& > input[type='range']{pointer-events:none;}& > input[type='range']::-webkit-slider-thumb{pointer-events:auto;}& > input[type='range']::-moz-range-thumb{pointer-events:auto;}"]), ({
$labelBelow
}) => $labelBelow && styled.css(["& > output{top:calc(100% + 1px);bottom:unset;}"]));
const Wrapper = styled__default.default.div.attrs(({
$min,
$max,
value,
$disabled,
$hideActiveTrack,
$labelAlwaysOn,
style
}) => ({
'data-disabled': $disabled ? true : null,
style: {
'--min': $min,
'--max': $max,
'--value': value,
'--showTooltip': $labelAlwaysOn ? 1 : 0,
'--background': $disabled ? track.entities.indicator.states.disabled.background : $hideActiveTrack ? 'transparent' : track.entities.indicator.background,
'--background-hover': $hideActiveTrack ? 'transparent' : track.entities.indicator.states.hover.background,
...style
}
})).withConfig({
displayName: "Slider__Wrapper",
componentId: "sc-n1grrg-1"
})(["--dif:calc(var(--max) - var(--min));--realWidth:calc(100% - 12px);", " ", " &::after{", " background:var(--background)}&::after{margin-right:calc( (var(--max) - var(--value)) / var(--dif) * var(--realWidth) );margin-left:3px;}&:has(:focus-visible),&:hover{& > output{--showTooltip:1;--tooltip-background:", ";}}@media (hover:hover) and (pointer:fine){&:hover:not([data-disabled]){", " &::after{background:var(--background-hover);}}", ";}"], wrapperGrid, fakeTrackBg, trackFill, output.states.hover.background, fakeTrackBgHover, ({
$labelBelow
}) => $labelBelow && styled.css(["& > output{top:calc(100% + 1px);bottom:unset;}"]));
const WrapperGroupLabel = styled__default.default.div.withConfig({
displayName: "Slider__WrapperGroupLabel",
componentId: "sc-n1grrg-2"
})(["grid-row:1;grid-column:1 / 3;"]);
const WrapperGroupLabelDots = styled__default.default(WrapperGroupLabel).withConfig({
displayName: "Slider__WrapperGroupLabelDots",
componentId: "sc-n1grrg-3"
})(["&:before,&:after{content:' ';display:block;position:absolute;width:", ";height:", ";background:", ";", ";bottom:", ";left:0;}&:after{right:0;left:auto;}"], dot.width, dot.height, slider.background, edsUtils.bordersTemplate(dot.border), dot.spacings.bottom);
const SrOnlyLabel = styled__default.default.label.withConfig({
displayName: "Slider__SrOnlyLabel",
componentId: "sc-n1grrg-4"
})(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
const Slider = /*#__PURE__*/react.forwardRef(function Slider({
min = 0,
max = 100,
value = [40, 60],
outputFunction,
onChange,
onChangeCommitted,
minMaxDots = true,
minMaxValues = true,
labelAlwaysOn,
labelBelow,
step = 1,
disabled,
hideActiveTrack,
ariaLabelledby,
'aria-labelledby': ariaLabelledbyNative,
...rest
}, ref) {
const isNumber = !Array.isArray(value);
const isRangeSlider = !isNumber && value.length === 2;
const parsedValue = isNumber ? [value] : value;
const [initalValue, setInitalValue] = react.useState(parsedValue);
const [sliderValue, setSliderValue] = react.useState(parsedValue);
const [mousePressed, setMousePressed] = react.useState(false);
const [touchNavigation, setTouchNavigation] = react.useState(false);
react.useEffect(() => {
if (isRangeSlider) {
if (value[0] !== initalValue[0] || value[1] !== initalValue[1]) {
setInitalValue(value);
setSliderValue(value);
}
} else {
const numberValue = Number(value);
if (numberValue !== initalValue[0]) {
setInitalValue([numberValue]);
setSliderValue([numberValue]);
}
}
}, [value, initalValue, isRangeSlider]);
const minRange = react.useRef(null);
const maxRange = react.useRef(null);
const onValueChange = (event, valueArrIdx) => {
const changedValue = parseFloat(event.target.value);
if (isRangeSlider) {
const newValue = sliderValue.slice();
newValue[valueArrIdx] = changedValue;
//Prevent min/max values from crossing eachother
if (valueArrIdx === 0 && newValue[0] >= newValue[1]) {
newValue[0] = newValue[1];
maxRange.current?.focus();
}
if (valueArrIdx === 1 && newValue[1] <= newValue[0]) {
newValue[1] = newValue[0];
minRange.current?.focus();
}
setSliderValue(newValue);
if (onChange) {
// Callback for provided onChange func
onChange(event, newValue);
}
return;
}
setSliderValue([changedValue]);
if (onChange) {
// Callback for provided onChange func
onChange(event, [changedValue]);
}
};
const handleKeyUp = event => {
if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
handleCommitedValue(event);
}
};
const handleCommitedValue = event => {
if (onChangeCommitted) {
onChangeCommitted(event, sliderValue);
}
};
const getFormattedText = text => {
return outputFunction ? outputFunction(text) : text;
};
const findClosestRange = event => {
const target = event.target;
if (target.type === 'output' || mousePressed) {
return;
}
let clientX;
if (event.type === 'touchstart') {
clientX = event.targetTouches[0].clientX;
setTouchNavigation(true);
} else if (event.type === 'mousemove') {
clientX = event.clientX;
setTouchNavigation(false);
}
const bounds = target.getBoundingClientRect();
const x = clientX - bounds.left;
const inputWidth = minRange.current.offsetWidth;
const minValue = parseFloat(minRange.current.value);
const maxValue = parseFloat(maxRange.current.value);
const diff = max - min;
const normX = x / inputWidth * diff + min;
const maxX = Math.abs(normX - maxValue);
const minX = Math.abs(normX - minValue);
if (minX > maxX) {
minRange.current.style.zIndex = '10';
maxRange.current.style.zIndex = '20';
} else {
minRange.current.style.zIndex = '20';
maxRange.current.style.zIndex = '10';
}
//special cases where both thumbs are all the way to the left or right
if (minValue === maxValue && minValue === min) {
minRange.current.style.zIndex = '10';
maxRange.current.style.zIndex = '20';
}
if (minValue === maxValue && maxValue === max) {
minRange.current.style.zIndex = '20';
maxRange.current.style.zIndex = '10';
}
};
const handleDragging = type => {
if (type === 'mousedown' || type === 'touchmove') {
setMousePressed(true);
} else {
setMousePressed(false);
}
};
let inputIdA = edsUtils.useId(null, 'inputA');
let inputIdB = edsUtils.useId(null, 'inputB');
let inputId = edsUtils.useId(null, 'thumb');
if (rest['id']) {
const overrideId = rest['id'];
inputIdA = `${overrideId}-thumb-a`;
inputIdB = `${overrideId}-thumb-b`;
inputId = `${overrideId}-thumb`;
}
const getAriaLabelledby = react.useCallback(() => {
if (ariaLabelledbyNative) return ariaLabelledbyNative;
if (ariaLabelledby) return ariaLabelledby;
return null;
}, [ariaLabelledbyNative, ariaLabelledby]);
return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
children: isRangeSlider ? /*#__PURE__*/jsxRuntime.jsxs(RangeWrapper, {
...rest,
ref: ref,
role: "group",
"aria-labelledby": getAriaLabelledby(),
$valA: sliderValue[0],
$valB: sliderValue[1],
$max: max,
$min: min,
$disabled: disabled,
$hideActiveTrack: hideActiveTrack,
$labelAlwaysOn: labelAlwaysOn || touchNavigation,
$labelBelow: labelBelow,
$touchNavigation: touchNavigation,
onMouseMove: findClosestRange,
onTouchStartCapture: findClosestRange,
onTouchEnd: e => handleDragging(e.type),
onTouchMove: e => handleDragging(e.type),
onMouseDown: e => handleDragging(e.type),
onMouseUp: e => handleDragging(e.type),
children: [minMaxDots && /*#__PURE__*/jsxRuntime.jsx(WrapperGroupLabelDots, {}), /*#__PURE__*/jsxRuntime.jsx(SrOnlyLabel, {
htmlFor: inputIdA,
children: "Value A"
}), /*#__PURE__*/jsxRuntime.jsx(SliderInput, {
type: "range",
ref: minRange,
value: sliderValue[0],
max: max,
min: min,
"aria-valuemax": max,
"aria-valuemin": min,
"aria-valuenow": sliderValue[0],
"aria-valuetext": getFormattedText(sliderValue[0]).toString(),
id: inputIdA,
step: step,
onChange: event => {
onValueChange(event, 0);
},
onMouseUp: event => handleCommitedValue(event),
onTouchEnd: event => handleCommitedValue(event),
onKeyUp: event => handleKeyUp(event),
disabled: disabled
}), /*#__PURE__*/jsxRuntime.jsx(Output, {
htmlFor: inputIdA,
value: sliderValue[0],
children: getFormattedText(sliderValue[0])
}), minMaxValues && /*#__PURE__*/jsxRuntime.jsx(MinMax, {
children: getFormattedText(min)
}), /*#__PURE__*/jsxRuntime.jsx(SrOnlyLabel, {
htmlFor: inputIdB,
children: "Value B"
}), /*#__PURE__*/jsxRuntime.jsx(SliderInput, {
type: "range",
value: sliderValue[1],
min: min,
max: max,
"aria-valuemax": max,
"aria-valuemin": min,
"aria-valuenow": sliderValue[1],
"aria-valuetext": getFormattedText(sliderValue[1]).toString(),
id: inputIdB,
step: step,
ref: maxRange,
onChange: event => {
onValueChange(event, 1);
},
onMouseUp: event => handleCommitedValue(event),
onTouchEnd: event => handleCommitedValue(event),
onKeyUp: event => handleKeyUp(event),
disabled: disabled
}), /*#__PURE__*/jsxRuntime.jsx(Output, {
htmlFor: inputIdB,
value: sliderValue[1],
children: getFormattedText(sliderValue[1])
}), minMaxValues && /*#__PURE__*/jsxRuntime.jsx(MinMax, {
children: getFormattedText(max)
})]
}) : /*#__PURE__*/jsxRuntime.jsxs(Wrapper, {
...rest,
ref: ref,
$max: max,
$min: min,
value: sliderValue[0],
$disabled: disabled,
$hideActiveTrack: hideActiveTrack,
$labelAlwaysOn: labelAlwaysOn || touchNavigation,
$labelBelow: labelBelow,
onTouchStartCapture: () => setTouchNavigation(true),
onMouseDownCapture: () => setTouchNavigation(false),
children: [/*#__PURE__*/jsxRuntime.jsx(SliderInput, {
type: "range",
value: sliderValue[0],
min: min,
max: max,
"aria-valuemax": max,
"aria-valuemin": min,
"aria-valuenow": sliderValue[0],
"aria-valuetext": getFormattedText(sliderValue[0]).toString(),
step: step,
id: inputId,
onChange: event => {
onValueChange(event);
},
disabled: disabled,
"aria-labelledby": getAriaLabelledby(),
onMouseUp: event => handleCommitedValue(event),
onKeyUp: event => handleKeyUp(event),
onTouchEnd: event => handleCommitedValue(event)
}), /*#__PURE__*/jsxRuntime.jsx(Output, {
htmlFor: inputId,
value: sliderValue[0],
children: getFormattedText(sliderValue[0])
}), minMaxDots && /*#__PURE__*/jsxRuntime.jsx(WrapperGroupLabelDots, {}), minMaxValues && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [/*#__PURE__*/jsxRuntime.jsx(MinMax, {
children: getFormattedText(min)
}), /*#__PURE__*/jsxRuntime.jsx(MinMax, {
children: getFormattedText(max)
})]
})]
})
});
});
const StyledSnackbarAction = styled__default.default.div.withConfig({
displayName: "SnackbarAction__StyledSnackbarAction",
componentId: "sc-1v5mjvd-0"
})(({
theme
}) => {
return styled.css(["display:inline-flex;margin-left:", ";margin-top:", ";margin-bottom:", ";"], theme.entities.actions.spacings.left, theme.entities.actions.spacings.top, theme.entities.actions.spacings.bottom);
});
const SnackbarAction = /*#__PURE__*/react.forwardRef(function SnackbarAction({
children,
...rest
}, ref) {
const props = {
...rest,
ref
};
return /*#__PURE__*/jsxRuntime.jsx(StyledSnackbarAction, {
...props,
children: react.Children.only(children)
});
});
const {
typography: {
ui: {
snackbar: typography$6
}
},
colors: {
ui: {
background__overlay: {
rgba: background$3
}
},
text: {
static_icons__primary_white: {
rgba: color
}
},
interactive: {
link_in_snackbars: {
rgba: buttonColor
}
}
},
spacings: {
comfortable: {
medium: spacingMedium$3,
x_large: spacingXLarge
}
},
clickbounds: {
default__base: clickbounds$1
},
shape: {
button: {
borderRadius: radius
}
}
} = edsTokens.tokens;
const snackbar = {
background: background$3,
minHeight: clickbounds$1,
border: {
type: 'border',
width: 0,
radius
},
entities: {
actions: {
spacings: {
left: spacingXLarge,
top: '-10px',
bottom: '-10px'
}
},
button: {
typography: {
color: buttonColor
}
}
},
spacings: {
left: spacingMedium$3,
bottom: spacingMedium$3,
right: spacingMedium$3,
top: spacingMedium$3
},
typography: {
...typography$6,
color
},
modes: {
compact: {}
}
};
const PopoverDiv = styled__default.default('div').withConfig({
shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
,
displayName: "Snackbar__PopoverDiv",
componentId: "sc-ac6no8-0"
})(({
theme,
$placement
}) => {
return styled.css(["inset:unset;border:0;overflow:visible;position:fixed;padding:0;background-color:transparent;", " &::backdrop{background-color:transparent;}"], {
top: $placement.includes('top') ? theme.spacings.top : $placement === 'left' || $placement === 'right' ? '50%' : undefined,
bottom: $placement.includes('bottom') ? theme.spacings.bottom : undefined,
right: $placement.includes('right') ? theme.spacings.right : undefined,
left: $placement.includes('left') ? theme.spacings.left : $placement === 'top' || $placement === 'bottom' ? '50%' : undefined,
transform: $placement === 'left' || $placement === 'right' ? 'translateY(-50%)' : $placement === 'top' || $placement === 'bottom' ? 'translateX(-50%)' : undefined
});
});
const StyledSnackbar = styled__default.default(Paper).withConfig({
displayName: "Snackbar__StyledSnackbar",
componentId: "sc-ac6no8-1"
})(({
theme
}) => {
return styled.css(["background-color:", ";", " ", " ", " min-height:", ";box-sizing:border-box;a,button{color:", ";}"], theme.background, edsUtils.spacingsTemplate(theme.spacings), edsUtils.bordersTemplate(theme.border), edsUtils.typographyTemplate(theme.typography), theme.minHeight, theme.entities.button.typography.color);
});
const Snackbar$1 = /*#__PURE__*/react.forwardRef(function Snackbar({
open = false,
autoHideDuration = 7000,
onClose,
placement = 'bottom',
children,
...rest
}, ref) {
const [visible, setVisible] = react.useState(open);
const timer = react.useRef();
react.useEffect(() => {
setVisible(open);
if (open) {
timer.current = setTimeout(() => {
setVisible(false);
if (onClose) {
onClose();
}
}, autoHideDuration);
}
return () => clearTimeout(timer.current);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open, autoHideDuration]);
const props = {
ref,
...rest
};
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, snackbar);
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: visible && /*#__PURE__*/jsxRuntime.jsx(PopoverDiv, {
popover: "manual",
$placement: placement,
ref: el => el?.showPopover(),
children: /*#__PURE__*/jsxRuntime.jsx(StyledSnackbar, {
role: "alert",
elevation: "overlay",
...props,
children: children
})
})
});
});
const Snackbar = Snackbar$1;
Snackbar.Action = SnackbarAction;
const {
typography: {
ui: {
accordion_header: header
}
},
colors: {
ui: {
background__default: {
rgba: background$2
}
},
interactive: {
focus: {
rgba: focusOutlineColor$3
}
}
},
spacings: {
comfortable: {
medium: spacingMedium$2,
small: spacingSmall$2
}
},
shape: {
corners: {
borderRadius: borderRadius$2
}
},
interactions: {
focused: {
width: focusOutlineWidth$3
}
}
} = edsTokens.tokens;
const popover = {
background: background$2,
typography: header,
maxWidth: '560px',
maxHeight: '80vh',
entities: {
arrow: {
width: '6px',
height: spacingSmall$2,
spacings: {
top: '-5px',
// 1px less than arrow width, if not the shadow would show between arrow and popover
bottom: '-5px',
left: '-5px',
right: '-5px'
}
},
title: {
spacings: {
top: '12px'
}
},
paper: {
states: {
focus: {
outline: {
type: 'outline',
width: focusOutlineWidth$3,
style: 'dashed',
color: focusOutlineColor$3
}
}
}
}
},
spacings: {
top: spacingMedium$2,
left: spacingMedium$2,
right: spacingMedium$2,
bottom: spacingMedium$2
},
border: {
type: 'border',
radius: borderRadius$2
},
modes: {
compact: {}
}
};
const PopoverPaper = styled__default.default(Paper).withConfig({
displayName: "Popover__PopoverPaper",
componentId: "sc-b7p1is-0"
})(({
theme
}) => {
const {
entities: {
paper
}
} = theme;
return styled.css(["position:relative;", " background:", ";", " &:focus-visible{", "}"], edsUtils.typographyTemplate(theme.typography), theme.background, edsUtils.bordersTemplate(theme.border), edsUtils.outlineTemplate(paper.states.focus.outline));
});
const StyledPopover$2 = styled__default.default('div').withConfig({
shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
}).withConfig({
displayName: "Popover__StyledPopover",
componentId: "sc-b7p1is-1"
})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;background-color:transparent;&::backdrop{background-color:transparent;}"]);
const ArrowWrapper = styled__default.default.div.withConfig({
displayName: "Popover__ArrowWrapper",
componentId: "sc-b7p1is-2"
})(({
theme
}) => {
return styled.css(["position:absolute;width:", ";height:", ";"], theme.entities.arrow.width, theme.entities.arrow.height);
});
const InnerWrapper = styled__default.default.div.withConfig({
displayName: "Popover__InnerWrapper",
componentId: "sc-b7p1is-3"
})(({
theme
}) => {
return styled.css(["display:grid;grid-gap:", ";max-height:", ";width:max-content;max-width:", ";overflow:auto;"], theme.spacings.bottom, theme.maxHeight, theme.maxWidth);
});
const PopoverArrow = styled__default.default.svg.withConfig({
displayName: "Popover__PopoverArrow",
componentId: "sc-b7p1is-4"
})(({
theme
}) => {
return styled.css(["width:", ";height:", ";position:absolute;fill:", ";filter:drop-shadow(-4px 0px 2px rgba(0,0,0,0.2));"], theme.entities.arrow.width, theme.entities.arrow.height, theme.background);
});
const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover({
children,
placement = 'bottom',
anchorEl,
style,
open,
onClose,
withinPortal,
trapFocus,
...rest
}, ref) {
if (withinPortal) {
console.warn('Popover "withinPortal" prop has been deprecated. Popover now uses the native popover api');
}
const arrowRef = react.useRef(null);
const {
x,
y,
refs,
strategy,
context,
elements,
middlewareData: {
arrow: {
x: arrowX,
y: arrowY
} = {}
},
placement: finalPlacement
} = react$1.useFloating({
elements: {
reference: anchorEl
},
placement,
open,
onOpenChange: onClose,
middleware: [react$1.offset(14), react$1.flip(), react$1.shift({
padding: 8
}), react$1.arrow({
element: arrowRef
})],
whileElementsMounted: react$1.autoUpdate
});
const popoverRef = react.useMemo(() => edsUtils.mergeRefs(refs.setFloating, ref), [refs.setFloating, ref]);
const {
getFloatingProps
} = react$1.useInteractions([react$1.useDismiss(context)]);
react.useEffect(() => {
if (!elements.floating) return;
if (open) {
if (elements.floating.isConnected) {
elements.floating.showPopover();
}
} else {
elements.floating.hidePopover();
}
}, [open, elements.floating]);
react.useEffect(() => {
if (arrowRef.current) {
const staticSide = {
top: 'bottom',
right: 'left',
bottom: 'top',
left: 'right'
}[finalPlacement.split('-')[0]];
let arrowTransform = 'none';
switch (staticSide) {
case 'right':
arrowTransform = 'rotateY(180deg)';
break;
case 'left':
arrowTransform = 'none';
break;
case 'top':
arrowTransform = 'rotate(90deg)';
break;
case 'bottom':
arrowTransform = 'rotate(-90deg)';
break;
}
Object.assign(arrowRef.current.style, {
left: arrowX != null ? `${arrowX}px` : '',
top: arrowY != null ? `${arrowY}px` : '',
right: '',
bottom: '',
[staticSide]: '-6px',
transform: arrowTransform
});
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [arrowRef.current, arrowX, arrowY, finalPlacement]);
const props = {
...rest
};
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, popover);
const popover$1 = /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsx(StyledPopover$2, {
popover: "manual",
...getFloatingProps({
ref: popoverRef,
style: {
...style,
position: strategy,
top: y || 0,
left: x || 0
}
}),
children: /*#__PURE__*/jsxRuntime.jsxs(PopoverPaper, {
elevation: "overlay",
...props,
children: [/*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, {
ref: arrowRef,
className: "arrow",
children: /*#__PURE__*/jsxRuntime.jsx(PopoverArrow, {
className: "arrowSvg",
children: /*#__PURE__*/jsxRuntime.jsx("path", {
d: "M0.504838 4.86885C-0.168399 4.48524 -0.168399 3.51476 0.504838 3.13115L6 8.59227e-08L6 8L0.504838 4.86885Z"
})
})
}), /*#__PURE__*/jsxRuntime.jsx(InnerWrapper, {
children: children
})]
})
})
});
return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
children: trapFocus ? open && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
context: context,
modal: true,
children: popover$1
}) : open && popover$1
});
});
const StyledPopoverTitle = styled__default.default.div.withConfig({
displayName: "PopoverTitle__StyledPopoverTitle",
componentId: "sc-1ben8su-0"
})(({
theme
}) => {
return styled.css(["max-width:", ";margin-right:", ";overflow:hidden;"], theme.maxWidth, theme.spacings.right);
});
const PopoverTitle = /*#__PURE__*/react.forwardRef(function PopoverTitle({
children,
...rest
}, ref) {
const props = {
...rest,
ref
};
return /*#__PURE__*/jsxRuntime.jsx(StyledPopoverTitle, {
...props,
children: children
});
});
const ContentWrapper = styled__default.default.div.withConfig({
displayName: "PopoverContent__ContentWrapper",
componentId: "sc-vwww9h-0"
})(({
theme
}) => {
return styled.css(["padding:0 ", " 0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.top, theme.spacings.bottom);
});
const PopoverContent = /*#__PURE__*/react.forwardRef(function PopoverContent({
children,
...rest
}, ref) {
const props = {
...rest,
ref
};
return /*#__PURE__*/jsxRuntime.jsx(ContentWrapper, {
...props,
children: children
});
});
// PopoverContent.displayName = 'eds-popover-content'
const StyledPopoverHeader = styled__default.default.div.withConfig({
displayName: "PopoverHeader__StyledPopoverHeader",
componentId: "sc-ibcx7p-0"
})(({
theme
}) => {
return styled.css(["display:flex;justify-content:space-between;align-items:center;padding:", " ", " 0 ", ";"], theme.entities.title.spacings.top, theme.spacings.right, theme.spacings.left);
});
const StyledDivider = styled__default.default(Divider).withConfig({
displayName: "PopoverHeader__StyledDivider",
componentId: "sc-ibcx7p-1"
})(["margin-bottom:0;"]);
const PopoverHeader = /*#__PURE__*/react.forwardRef(function PopoverHeader({
children,
...rest
}, ref) {
const props = {
...rest,
ref
};
return /*#__PURE__*/jsxRuntime.jsxs("div", {
...props,
children: [/*#__PURE__*/jsxRuntime.jsx(StyledPopoverHeader, {
children: children
}), /*#__PURE__*/jsxRuntime.jsx(StyledDivider, {
variant: "small"
})]
});
});
const StyledPopoverActions = styled__default.default.div.withConfig({
displayName: "PopoverActions__StyledPopoverActions",
componentId: "sc-1dkrhw6-0"
})(({
theme
}) => {
return styled.css(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;padding:0 ", " 0 ", ";&:first-child{padding-top:", ";}&:last-child{padding-bottom:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.top, theme.spacings.bottom);
});
const PopoverActions = /*#__PURE__*/react.forwardRef(function PopoverActions({
children,
...rest
}, ref) {
const props = {
ref,
...rest
};
return /*#__PURE__*/jsxRuntime.jsx(StyledPopoverActions, {
...props,
children: children
});
});
const Popover = Popover$1;
Popover.Title = PopoverTitle;
Popover.Content = PopoverContent;
Popover.Header = PopoverHeader;
Popover.Actions = PopoverActions;
Popover.Title.displayName = 'Popover.Title';
Popover.Content.displayName = 'Popover.Content';
Popover.Header.displayName = 'Popover.Header';
Popover.Actions.displayName = 'Popover.Actions';
/* eslint-disable camelcase */
const {
typography: {
paragraph: {
body_long: messageTypography
}
},
spacings: {
comfortable: {
medium: medium$2
}
},
colors: {
infographic: {
primary__moss_green_13: {
rgba: infoBackground
},
primary__energy_red_13: {
rgba: warningBackground
},
primary__moss_green_100: {
rgba: infoColor
},
primary__energy_red_100: {
rgba: warningColor
}
},
ui: {
background__default: {
rgba: backgroundColor
}
}
},
shape: {
circle: {
minHeight: minHeight$2,
minWidth: minWidth$2,
borderRadius: borderRadius$1
}
}
} = edsTokens.tokens;
const enabled = {
typography: {
...messageTypography
},
background: backgroundColor,
spacings: {
left: medium$2,
right: medium$2,
top: medium$2,
bottom: medium$2
},
entities: {
icon: {
height: minHeight$2,
width: minWidth$2,
border: {
type: 'border',
radius: borderRadius$1
}
}
},
modes: {
compact: {}
}
};
const info$1 = {
entities: {
icon: {
background: infoBackground,
typography: {
color: infoColor
}
}
},
modes: {
compact: {}
}
};
const warning$1 = {
entities: {
icon: {
background: warningBackground,
typography: {
color: warningColor
}
}
},
modes: {
compact: {}
}
};
var tokens$2 = /*#__PURE__*/Object.freeze({
__proto__: null,
enabled: enabled,
info: info$1,
warning: warning$1
});
const {
info,
warning
} = tokens$2;
const StyledBannerIcon = styled__default.default.span.withConfig({
displayName: "BannerIcon__StyledBannerIcon",
componentId: "sc-7ow3zc-0"
})(({
theme,
$variant
}) => {
return styled.css(["display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;", ";background-color:", ";width:", ";height:", ";margin-right:", ";"], edsUtils.bordersTemplate(theme.entities.icon.border), $variant === 'warning' ? warning.entities.icon.background : info.entities.icon.background, theme.entities.icon.width, theme.entities.icon.height, theme.spacings.right);
});
const BannerIcon = /*#__PURE__*/react.forwardRef(function BannerIcon({
children,
variant = 'info',
...rest
}, ref) {
const childrenWithColor = react.Children.map(children, child => {
const color = variant === 'warning' ? warning.entities.icon.typography.color : info.entities.icon.typography.color;
return /*#__PURE__*/react.isValidElement(child) && child.type === Icon$1 && /*#__PURE__*/react.cloneElement(child, {
color
}) || child;
});
const props = {
ref,
...rest
};
return /*#__PURE__*/jsxRuntime.jsx(StyledBannerIcon, {
$variant: variant,
...props,
children: childrenWithColor
});
});
const Content$1 = styled__default.default.div.withConfig({
displayName: "Banner__Content",
componentId: "sc-1ju451i-0"
})(({
theme,
$hasIcon
}) => {
return styled.css(["", " display:grid;grid-template-columns:", ";align-items:center;background-color:", ";"], edsUtils.spacingsTemplate(theme.spacings), $hasIcon ? 'min-content 1fr auto' : '1fr auto', theme.background);
});
const NonMarginDivider = styled__default.default(Divider).withConfig({
displayName: "Banner__NonMarginDivider",
componentId: "sc-1ju451i-1"
})(["margin:0;height:2px;"]);
const Banner$1 = /*#__PURE__*/react.forwardRef(function Banner({
children,
className,
elevation = 'none',
...rest
}, ref) {
const childrenWhereBannerIcon = react.Children.map(children, child => {
return /*#__PURE__*/react.isValidElement(child) && child.type === BannerIcon;
});
const hasIcon = childrenWhereBannerIcon.some(bool => bool);
const props = {
ref,
...rest
};
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, enabled);
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsxs(Paper, {
...props,
className: className,
elevation: elevation,
role: "alert",
children: [/*#__PURE__*/jsxRuntime.jsx(Content$1, {
$hasIcon: hasIcon,
children: children
}), /*#__PURE__*/jsxRuntime.jsx(NonMarginDivider, {
color: "light"
})]
})
});
});
const StyledBannerMessage = styled__default.default(Typography).withConfig({
displayName: "BannerMessage__StyledBannerMessage",
componentId: "sc-1lfqos1-0"
})([""]);
const BannerMessage = /*#__PURE__*/react.forwardRef(function BannerMessage({
children,
...rest
}, ref) {
const props = {
ref,
...rest
};
return /*#__PURE__*/jsxRuntime.jsx(StyledBannerMessage, {
variant: "body_long",
...props,
children: children
});
});
const StyledBannerActions = styled__default.default.div.withConfig({
displayName: "BannerActions__StyledBannerActions",
componentId: "sc-1o38ds2-0"
})(({
theme,
$placement
}) => {
return styled.css(["display:flex;margin-left:", ";grid-gap:8px;grid-column:", ";", ""], theme.spacings.left, $placement === 'bottom' ? '1/-1' : 'auto', $placement === 'bottom' && {
marginTop: theme.spacings.top,
marginLeft: '0'
});
});
const BannerActions = /*#__PURE__*/react.forwardRef(function BannerActions({
children,
placement = 'left',
...rest
}, ref) {
const props = {
ref,
...rest
};
return /*#__PURE__*/jsxRuntime.jsx(StyledBannerActions, {
$placement: placement,
...props,
children: children
});
});
const Banner = Banner$1;
Banner.Icon = BannerIcon;
Banner.Message = BannerMessage;
Banner.Actions = BannerActions;
Banner.Icon.displayName = 'Banner.Icon';
Banner.Message.displayName = 'Banner.Message';
Banner.Actions.displayName = 'Banner.Actions';
const {
colors: {
infographic: {
primary__moss_green_13: {
rgba: primary13$1
},
primary__moss_green_100: {
rgba: primary100$2
}
}
}
} = edsTokens.tokens;
const primary$2 = {
background: primary13$1,
entities: {
progress: {
background: primary100$2
}
}
};
const indeterminate$2 = styled.keyframes(["0%{left:-200%;right:100%;}60%{left:107%;right:-8%;}100%{left:107%;right:-8%;}"]);
const Track$2 = styled__default.default.div.withConfig({
displayName: "LinearProgress__Track",
componentId: "sc-5orxpi-0"
})(["position:relative;overflow:hidden;height:4px;background-color:", ";width:100%;border-radius:50px;"], primary$2.background);
const ProgressBar = styled__default.default.div.withConfig({
displayName: "LinearProgress__ProgressBar",
componentId: "sc-5orxpi-1"
})(["transition:transform 0.4s linear;background-color:", ";width:100%;border-radius:50px;position:absolute;left:0;bottom:0;top:0;transition:transform 0.2s linear;transform-origin:left;"], primary$2.entities.progress.background);
const IndeterminateProgressBar = styled__default.default.div.withConfig({
displayName: "LinearProgress__IndeterminateProgressBar",
componentId: "sc-5orxpi-2"
})(["width:75%;border-radius:50px;position:absolute;left:0;bottom:0;top:0;transition:transform 0.2s linear;transform-origin:left;background-color:", ";animation:", " 1.5s cubic-bezier(0.165,0.84,0.44,1) 1s infinite;"], primary$2.entities.progress.background, indeterminate$2);
const SrOnlyOutput$1 = styled__default.default.output.withConfig({
displayName: "LinearProgress__SrOnlyOutput",
componentId: "sc-5orxpi-3"
})(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
const LinearProgress = /*#__PURE__*/react.forwardRef(function LinearProgress({
variant = 'indeterminate',
value = null,
...rest
}, ref) {
const props = {
...rest,
ref
};
const [srProgress, setSrProgress] = react.useState(0);
let barStyle;
if (variant === 'determinate') {
if (value !== undefined) {
props['aria-valuenow'] = Math.round(value);
props['aria-valuemin'] = 0;
props['aria-valuemax'] = 100;
const transform = value - 100;
barStyle = `translateX(${transform}%)`;
}
}
const transformStyle = {
transform: barStyle
};
react.useEffect(() => {
if (variant === 'indeterminate') return;
if (value >= 25 && value < 50) {
setSrProgress(25);
} else if (value >= 50 && value < 75) {
setSrProgress(50);
} else if (value >= 75 && value < 100) {
setSrProgress(75);
} else if (value === 100) {
setSrProgress(100);
}
}, [value, variant]);
const getProgressFormatted = () => {
return `Loading ${srProgress}%`;
};
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [/*#__PURE__*/jsxRuntime.jsx(Track$2, {
...props,
role: "progressbar",
children: variant === 'indeterminate' ? /*#__PURE__*/jsxRuntime.jsx(IndeterminateProgressBar, {}) : /*#__PURE__*/jsxRuntime.jsx(ProgressBar, {
style: transformStyle
})
}), variant === 'determinate' && /*#__PURE__*/jsxRuntime.jsx(SrOnlyOutput$1, {
children: getProgressFormatted()
})]
});
});
const {
colors: {
infographic: {
primary__moss_green_13: {
rgba: primary13
},
primary__moss_green_100: {
rgba: primary100$1
}
},
interactive: {
icon_on_interactive_colors: {
rgba: icon_on_interactive_colors$1
}
},
ui: {
background__semitransparent: {
rgba: background__semitransparent
}
}
}
} = edsTokens.tokens;
const primary$1 = {
background: primary13,
entities: {
progress: {
background: primary100$1
}
}
};
const neutral$1 = {
background: background__semitransparent,
entities: {
progress: {
background: icon_on_interactive_colors$1
}
}
};
var tokens$1 = /*#__PURE__*/Object.freeze({
__proto__: null,
neutral: neutral$1,
primary: primary$1
});
const indeterminate$1 = styled.keyframes(["100%{transform:rotate(360deg);}"]);
const Svg$4 = styled__default.default.svg.withConfig({
displayName: "CircularProgress__Svg",
componentId: "sc-hib054-0"
})(["display:inline-block;", ";"], ({
$variant
}) => $variant === 'indeterminate' ? styled.css(["animation:", " 1.4s linear infinite;"], indeterminate$1) : styled.css(["transform:rotate(-90deg);"]));
const SrOnlyOutput = styled__default.default.output.withConfig({
displayName: "CircularProgress__SrOnlyOutput",
componentId: "sc-hib054-1"
})(["position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;"]);
const TrackCircle = styled__default.default.circle.withConfig({
displayName: "CircularProgress__TrackCircle",
componentId: "sc-hib054-2"
})([""]);
const ProgressCircle = styled__default.default.circle.withConfig({
displayName: "CircularProgress__ProgressCircle",
componentId: "sc-hib054-3"
})([""]);
const getToken = color => {
if (tokens$1[color]) {
return tokens$1[color];
}
return {
background: 'transparent',
entities: {
progress: {
background: color
}
}
};
};
const CircularProgress = /*#__PURE__*/react.forwardRef(function CircularProgress({
variant = 'indeterminate',
value = null,
size = 48,
color = 'primary',
...rest
}, ref) {
const thickness = 4;
const progress = Math.round(value);
const trackStyle = {};
const props = {
...rest,
ref,
$variant: variant
};
const token = getToken(color);
const [srProgress, setSrProgress] = react.useState(0);
const circumference = 2 * Math.PI * ((48 - thickness) / 2);
if (variant === 'determinate') {
trackStyle.stroke = circumference.toFixed(3);
trackStyle.strokeDashoffset = `${((100 - progress) / 100 * circumference).toFixed(3)}px`;
props['aria-valuenow'] = progress;
if (value !== undefined) {
props['aria-valuenow'] = progress;
props['aria-valuemin'] = 0;
props['aria-valuemax'] = 100;
}
}
react.useEffect(() => {
if (variant === 'indeterminate') return;
if (progress >= 25 && progress < 50) {
setSrProgress(25);
} else if (progress >= 50 && progress < 75) {
setSrProgress(50);
} else if (progress >= 75 && progress < 100) {
setSrProgress(75);
} else if (progress === 100) {
setSrProgress(100);
}
}, [progress, variant]);
const getProgressFormatted = () => {
return `Loading ${srProgress}%`;
};
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [/*#__PURE__*/jsxRuntime.jsxs(Svg$4, {
...props,
viewBox: "24 24 48 48",
role: "progressbar",
height: size,
width: size,
preserveAspectRatio: "xMidYMid meet",
children: [/*#__PURE__*/jsxRuntime.jsx(TrackCircle, {
style: trackStyle,
cx: 48,
cy: 48,
r: (48 - thickness) / 2,
fill: "none",
strokeWidth: thickness,
stroke: token.background
}), /*#__PURE__*/jsxRuntime.jsx(ProgressCircle, {
style: trackStyle,
cx: 48,
cy: 48,
r: (48 - thickness) / 2,
fill: "none",
strokeLinecap: "round",
strokeWidth: thickness,
strokeDasharray: variant === 'determinate' ? circumference : 48,
stroke: token.entities.progress.background
})]
}), variant === 'determinate' && /*#__PURE__*/jsxRuntime.jsx(SrOnlyOutput, {
children: getProgressFormatted()
})]
});
});
const {
colors: {
logo: {
fill_positive: {
rgba: logoFillPositive
}
}
}
} = edsTokens.tokens;
const token = {
background: logoFillPositive
};
const indeterminate = styled.keyframes(["0%{opacity:1;}20%{opacity:0.8;}40%{opacity:0.6;}60%{opacity:0.4;}80%{opacity:0.2;}100%{opacity:0.05;}"]);
const determinate = styled.keyframes(["0%{opacity:0;}10%{opacity:0.05;}20%{opacity:0.2;}40%{opacity:0.4;}60%{opacity:0.6;}80%{opacity:0.8;}100%{opacity:1;}"]);
const Svg$3 = styled__default.default.svg.withConfig({
displayName: "StarProgress__Svg",
componentId: "sc-c0byj9-0"
})(["fill:", ";", ""], token.background, ({
$variant,
$progress
}) => $variant === 'indeterminate' ? styled.css(["path{&:nth-child(1){animation:", " 1.3s linear infinite;}&:nth-child(2){animation:", " 1.3s linear 0.3s infinite;}&:nth-child(3){animation:", " 1.3s linear 0.4s infinite;}&:nth-child(4){animation:", " 1.3s linear 0.6s infinite;}&:nth-child(5){animation:", " 1.3s linear 0.8s infinite;}&:nth-child(6){animation:", " 1.3s linear 1s infinite;}}"], indeterminate, indeterminate, indeterminate, indeterminate, indeterminate, indeterminate) : styled.css(["path{animation:", " 1.3s linear;&:nth-child(6){animation-play-state:", ";}&:nth-child(5){animation-play-state:", ";}&:nth-child(4){animation-play-state:", ";}&:nth-child(3){animation-play-state:", ";}&:nth-child(2){animation-play-state:", ";}&:nth-child(1){animation-play-state:", ";}}"], determinate, $progress > 90 ? 'running' : 'paused', $progress > 80 ? 'running' : 'paused', $progress > 60 ? 'running' : 'paused', $progress > 40 ? 'running' : 'paused', $progress > 20 ? 'running' : 'paused', $progress <= 20 ? 'running' : 'paused'));
const StarProgress = /*#__PURE__*/react.forwardRef(function StarProgress({
variant = 'indeterminate',
value = null,
size = 48,
...rest
}, ref) {
const progress = Math.round(value);
const height = size * 1.2;
const width = size;
const props = {
...rest,
ref,
$variant: variant,
$progress: progress
};
if (variant === 'determinate') {
if (value !== undefined) {
props['aria-valuenow'] = progress;
props['aria-valuemin'] = 0;
props['aria-valuemax'] = 100;
}
}
return /*#__PURE__*/jsxRuntime.jsxs(Svg$3, {
...props,
role: "progressbar",
width: width,
height: height,
viewBox: "0 0 40 48",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
preserveAspectRatio: "xMidYMid meet",
children: [/*#__PURE__*/jsxRuntime.jsx("path", {
d: "M32.756 34.6798L29.482 36.5817C29.4139 36.6219 29.3295 36.6227 29.2606 36.5829L25.9476 34.7151C25.7975 34.6306 25.7967 34.4149 25.9456 34.3284L29.2397 32.4256C29.3077 32.3858 29.3914 32.3858 29.4603 32.4248L32.754 34.2931C32.9033 34.3784 32.9041 34.5929 32.756 34.6798Z"
}), /*#__PURE__*/jsxRuntime.jsx("path", {
d: "M25.9596 45.4706L22.6655 43.5867C22.5966 43.5469 22.554 43.4744 22.554 43.396V41.4289V39.5922C22.5519 39.4204 22.7381 39.3109 22.8878 39.397L26.1819 41.2981C26.25 41.3379 26.2926 41.4104 26.2934 41.4896V43.4268V45.2762C26.2947 45.4472 26.1085 45.5559 25.9596 45.4706Z"
}), /*#__PURE__*/jsxRuntime.jsx("path", {
d: "M12.3022 47.7037V44.9795V42.6544C12.3022 42.5495 12.3576 42.4515 12.4482 42.3986L14.1262 41.4062L16.8143 39.8188C17.0119 39.7019 17.2617 39.8442 17.2625 40.0739L17.2633 42.7627V45.1456C17.2633 45.251 17.2079 45.3486 17.1165 45.4015L12.7496 47.9587C12.552 48.0748 12.3031 47.9325 12.3022 47.7037Z"
}), /*#__PURE__*/jsxRuntime.jsx("path", {
d: "M0.221343 34.2106L6.76939 30.4056C6.90636 30.326 7.07449 30.3256 7.21227 30.4023L13.8378 34.1401C14.138 34.3095 14.14 34.7413 13.8415 34.9131L7.25492 38.7182C7.11795 38.7977 6.94941 38.7985 6.81204 38.7206L0.225854 34.9836C-0.0734986 34.8139 -0.075549 34.3833 0.221343 34.2106Z"
}), /*#__PURE__*/jsxRuntime.jsx("path", {
d: "M6.03876 9.125L16.9237 15.5151C17.1513 15.6484 17.2903 15.8912 17.2903 16.1549V28.8331C17.2903 29.4076 16.665 29.7647 16.1704 29.4728L5.28546 23.0264C5.05869 22.8919 4.92008 22.6479 4.9209 22.3855V9.76307C4.92254 9.1902 5.54503 8.83467 6.03876 9.125Z"
}), /*#__PURE__*/jsxRuntime.jsx("path", {
d: "M39.6262 1.07261V11.7603V19.3368C39.627 19.7178 39.4265 20.0709 39.0988 20.2644L31.4145 24.8195L23.3545 29.5964C22.6385 30.0192 21.7339 29.5029 21.7339 28.6717V10.3259C21.7339 9.94495 21.9356 9.5927 22.2641 9.39955L38.008 0.149533C38.7232 -0.270381 39.6241 0.24385 39.6262 1.07261Z"
})]
});
});
const {
colors: {
infographic: {
primary__moss_green_100: {
rgba: primary100
}
},
interactive: {
icon_on_interactive_colors: {
rgba: icon_on_interactive_colors
},
danger__resting: {
rgba: danger_resting
}
}
}
} = edsTokens.tokens;
const primary = {
background: primary100
};
const neutral = {
background: icon_on_interactive_colors
};
const tertiary = {
background: danger_resting
};
var tokens = /*#__PURE__*/Object.freeze({
__proto__: null,
neutral: neutral,
primary: primary,
tertiary: tertiary
});
const opacity = styled.keyframes(["0%{opacity:1;}100%{opacity:0.5;}"]);
const Svg$2 = styled__default.default.svg.withConfig({
displayName: "DotProgress__Svg",
componentId: "sc-1s6o2q7-0"
})(["fill:", ";circle{&:nth-child(1){animation:", " 1s ease infinite;}&:nth-child(2){animation:", " 1s ease 0.2s infinite;}&:nth-child(3){animation:", " 1s ease 0.4s infinite;}}"], ({
color
}) => color, opacity, opacity, opacity);
const getColor = color => {
if (tokens[color]) {
return tokens[color].background;
}
return color;
};
const DotProgress = /*#__PURE__*/react.forwardRef(function DotProgress({
color = 'neutral',
size = 32,
...rest
}, ref) {
const props = {
...rest,
color: getColor(color),
ref
};
const height = size / 4;
const width = size;
return /*#__PURE__*/jsxRuntime.jsxs(Svg$2, {
...props,
role: "progressbar",
viewBox: "0 0 16 4",
height: height,
width: width,
preserveAspectRatio: "xMidYMid meet",
children: [/*#__PURE__*/jsxRuntime.jsx("circle", {
cx: 2,
cy: 2,
r: 2
}), /*#__PURE__*/jsxRuntime.jsx("circle", {
cx: 8,
cy: 2,
r: 2
}), /*#__PURE__*/jsxRuntime.jsx("circle", {
cx: 14,
cy: 2,
r: 2
})]
});
});
const Progress = {
Linear: LinearProgress,
Circular: CircularProgress,
Star: StarProgress,
Dots: DotProgress
};
const {
colors: {
text: {
static_icons__tertiary: {
rgba: enabledColor
}
},
interactive: {
primary__resting: {
rgba: hoverColor
}
}
},
spacings: {
comfortable: {
medium: spacingMedium$1
}
}
} = edsTokens.tokens;
const breadcrumbs = {
spacings: {
left: spacingMedium$1,
right: spacingMedium$1
},
typography: {
color: enabledColor
},
states: {
hover: {
typography: {
color: hoverColor
}
}
}
};
const {
spacings,
typography: typography$5,
states: states$1
} = breadcrumbs;
const OrderedList$1 = styled__default.default.ol.withConfig({
displayName: "Breadcrumbs__OrderedList",
componentId: "sc-12awlbz-0"
})(["list-style:none;display:flex;gap:0.45em 0;align-items:center;padding:0;margin:0;flex-wrap:", ";"], ({
$wrap
}) => $wrap ? 'wrap' : 'nowrap');
const ListItem$1 = styled__default.default.li.withConfig({
displayName: "Breadcrumbs__ListItem",
componentId: "sc-12awlbz-1"
})(["display:block;min-width:30px;"]);
const Separator = styled__default.default(Typography).withConfig({
displayName: "Breadcrumbs__Separator",
componentId: "sc-12awlbz-2"
})(["color:", ";", " display:block;line-height:1;display:flex;& > svg{margin-inline:-9px;}"], typography$5.color, edsUtils.spacingsTemplate(spacings));
const Collapsed = styled__default.default(Typography).withConfig({
displayName: "Breadcrumbs__Collapsed",
componentId: "sc-12awlbz-3"
})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";}}color:", ";text-decoration:none;"], states$1.hover.typography.color, typography$5.color);
const Breadcrumbs$1 = /*#__PURE__*/react.forwardRef(function Breadcrumbs({
children,
collapse,
wrap = true,
separator = '/',
...rest
}, ref) {
const props = {
...rest,
ref
};
const [expanded, setExpanded] = react.useState(false);
const collapsedCrumbs = allCrumbs => {
const handleExpandClick = e => {
setExpanded(true);
const {
key
} = e;
if (key === 'Enter') {
setExpanded(true);
}
};
if (allCrumbs.length < 3) {
return allCrumbs;
}
return [allCrumbs[0], /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
children: [/*#__PURE__*/jsxRuntime.jsx(ListItem$1, {
style: {
minWidth: 'unset'
},
children: /*#__PURE__*/jsxRuntime.jsx(Collapsed, {
link: true,
role: "button",
variant: "body_short",
onClick: handleExpandClick,
onKeyDown: handleExpandClick,
tabIndex: 0,
children: "\u2026"
})
}), /*#__PURE__*/jsxRuntime.jsx("li", {
"aria-hidden": true,
children: /*#__PURE__*/jsxRuntime.jsx(Separator, {
variant: "body_short",
children: separator
})
})]
}, "collapsed"), allCrumbs[allCrumbs.length - 1]];
};
const allCrumbs = react.Children.toArray(children).map((child, index) =>
/*#__PURE__*/
// eslint-disable-next-line react/no-array-index-key
jsxRuntime.jsxs(react.Fragment, {
children: [/*#__PURE__*/jsxRuntime.jsx(ListItem$1, {
children: child
}), index !== react.Children.toArray(children).length - 1 && /*#__PURE__*/jsxRuntime.jsx("li", {
"aria-hidden": true,
children: /*#__PURE__*/jsxRuntime.jsx(Separator, {
variant: "body_short",
children: separator
})
})]
}, `breadcrumb-${index}`));
return /*#__PURE__*/jsxRuntime.jsx("nav", {
...props,
"aria-label": "breadcrumbs",
children: /*#__PURE__*/jsxRuntime.jsx(OrderedList$1, {
$wrap: wrap,
children: collapse && !expanded ? collapsedCrumbs(allCrumbs) : allCrumbs
})
});
});
// Breadcrumbs.displayName = 'eds-breadcrumbs'
const {
states,
typography: typography$4
} = breadcrumbs;
const StyledTypography = styled__default.default(Typography).withConfig({
displayName: "Breadcrumb__StyledTypography",
componentId: "sc-10nvwte-0"
})(["@media (hover:hover) and (pointer:fine){&:hover{text-decoration:underline;color:", ";cursor:pointer;}}white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;line-height:1;text-decoration:none;color:", ";width:100%;", ""], states.hover.typography.color, typography$4.color, ({
$maxWidth
}) => styled.css({
maxWidth: $maxWidth
}));
const Breadcrumb = /*#__PURE__*/react.forwardRef(function Breadcrumb({
children,
maxWidth,
forceTooltip,
href,
as,
...other
}, ref) {
const props = {
...other,
href,
ref
};
const showTooltip = maxWidth > 0 || forceTooltip;
const isHrefDefined = href !== undefined;
const forwardedAs = react.useMemo(() => as ? as : isHrefDefined ? 'a' : 'span', [as, isHrefDefined]);
const crumb = /*#__PURE__*/jsxRuntime.jsx(StyledTypography, {
link: isHrefDefined,
forwardedAs: forwardedAs,
variant: "body_short",
$maxWidth: maxWidth,
...props,
children: children
});
return showTooltip ? /*#__PURE__*/jsxRuntime.jsx(Tooltip$2, {
title: children,
placement: "top",
children: crumb
}) : crumb;
});
const Breadcrumbs = Breadcrumbs$1;
Breadcrumbs.Breadcrumb = Breadcrumb;
Breadcrumbs.Breadcrumb.displayName = 'Breadcrumbs.Breadcrumb';
const initalState$1 = {
focusedIndex: -1,
initialFocus: null,
onClose: null
};
const MenuContext = /*#__PURE__*/react.createContext(initalState$1);
const MenuProvider = ({
children
}) => {
const [state, setState] = react.useState(initalState$1);
const {
focusedIndex,
initialFocus,
onClose
} = state;
const setFocusedIndex = i => {
setState(prevState => ({
...prevState,
focusedIndex: i
}));
};
const setInitialFocus = initialFocus => {
setState(prevState => ({
...prevState,
initialFocus: initialFocus
}));
};
const setOnClose = onClose => {
const onCloseHelper = () => {
setFocusedIndex(-1);
setInitialFocus(null);
onClose();
};
setState(prevState => ({
...prevState,
onClose: onCloseHelper
}));
};
const value = {
setFocusedIndex,
focusedIndex,
setInitialFocus,
initialFocus,
setOnClose,
onClose
};
return /*#__PURE__*/jsxRuntime.jsx(MenuContext.Provider, {
value: value,
children: children
});
};
const useMenu = () => react.useContext(MenuContext);
const {
colors: {
ui: {
background__default: {
rgba: background$1
}
},
interactive: {
primary__selected_highlight: {
rgba: activeBackground
},
primary__resting: {
rgba: activeTextColor
},
focus: {
rgba: focusColor$1
},
disabled__fill: {
rgba: disabledIconColor
},
disabled__text: {
rgba: disabledTextColor
},
table__header__fill_hover: {
rgba: hoverBackground
}
},
text: {
static_icons__default: {
rgba: textColor
}
}
},
spacings: {
comfortable: {
medium: medium$1,
large: large$1,
small: small$2
}
},
typography: {
navigation: {
menu_title: typography$3
}
}
} = edsTokens.tokens;
const menu = {
background: background$1,
spacings: {
top: small$2,
bottom: small$2,
left: '0px',
right: '0px'
},
border: {
type: 'border',
radius: '4px'
},
typography: {
...typography$3,
color: textColor
},
entities: {
icon: {
states: {
disabled: {
typography: {
color: disabledIconColor
}
}
}
},
item: {
spacings: {
left: large$1,
right: large$1,
top: medium$1,
bottom: medium$1
},
states: {
active: {
typography: {
...typography$3,
color: activeTextColor
},
background: activeBackground
},
focus: {
outline: {
color: focusColor$1,
style: 'dashed',
type: 'outline',
width: '2px',
offset: '2px'
}
},
hover: {
background: hoverBackground
},
disabled: {
typography: {
...typography$3,
color: disabledTextColor
}
}
}
},
title: {
spacings: {
left: large$1,
right: large$1,
top: small$2,
bottom: small$2
}
}
},
modes: {
compact: {
entities: {
item: {
spacings: {
left: large$1,
right: large$1,
top: small$2,
bottom: small$2
}
}
}
}
}
};
const {
typography: typography$2,
entities: {
item: {
states: {
active: activeToken,
focus: focus$2,
hover,
disabled: disabledToken
}
},
icon
}
} = menu;
const Item = styled__default.default.button.attrs(({
$isFocused
}) => ({
role: 'menuitem',
tabIndex: $isFocused ? -1 : 0
})).withConfig({
displayName: "MenuItem__Item",
componentId: "sc-1g9fpbe-0"
})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;text-decoration:none;", " ", " ", " ", ""], edsUtils.typographyTemplate(typography$2), ({
theme
}) => edsUtils.spacingsTemplate(theme.entities.item.spacings), ({
$active
}) => $active && styled.css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color), ({
disabled
}) => disabled ? styled.css(["*{color:", ";}svg{fill:", ";}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : styled.css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}&:focus-visible{z-index:3;", "}"], hover.background, edsUtils.outlineTemplate(focus$2.outline)));
const Content = styled__default.default.div.withConfig({
displayName: "MenuItem__Content",
componentId: "sc-1g9fpbe-1"
})(["width:auto;display:grid;grid-gap:16px;grid-auto-flow:column;grid-auto-columns:max-content auto max-content;align-items:center;"]);
const MenuItem$1 = /*#__PURE__*/react.forwardRef(function MenuItem({
children,
disabled,
active,
index = 0,
as = 'button',
onClick,
closeMenuOnClick = true,
...rest
}, ref) {
const {
focusedIndex,
setFocusedIndex,
onClose
} = useMenu();
const toggleFocus = index_ => {
if (focusedIndex !== index_) {
setFocusedIndex(index_);
}
};
const isFocused = index === focusedIndex;
const props = {
...rest,
as,
disabled,
$isFocused: isFocused
};
return /*#__PURE__*/jsxRuntime.jsx(Item, {
...props,
$active: active,
type: "button",
ref: edsUtils.mergeRefs(ref, el => {
if (isFocused) {
requestAnimationFrame(() => {
if (el !== null) el.focus();
});
}
}),
onFocus: () => toggleFocus(index),
onClick: e => {
if (onClick) {
onClick(e);
if (onClose !== null && closeMenuOnClick) {
onClose(e);
}
}
},
children: /*#__PURE__*/jsxRuntime.jsx(Content, {
children: children
})
});
});
MenuItem$1.displayName = 'MenuItem';
const Header = styled__default.default.div.attrs(() => ({
tabIndex: 0
})).withConfig({
displayName: "MenuSection__Header",
componentId: "sc-gfcbvg-0"
})(["", " &:focus{outline:none;}"], edsUtils.spacingsTemplate(menu.entities.title.spacings));
const MenuSection = /*#__PURE__*/react.memo(function MenuSection(props) {
const {
children,
title,
index
} = props;
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [index !== 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
children: /*#__PURE__*/jsxRuntime.jsx(Divider, {
variant: "small"
})
}), title && /*#__PURE__*/jsxRuntime.jsx(Header, {
role: "group",
children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
group: "navigation",
variant: "label",
children: title
})
}), children]
});
});
// MenuSection.displayName = 'EdsMenuSection'
const List = styled__default.default.div.withConfig({
displayName: "MenuList__List",
componentId: "sc-104rzof-0"
})(["position:relative;list-style:none;display:flex;flex-direction:column;margin:0;", " li:first-child{z-index:3;}"], edsUtils.spacingsTemplate(menu.spacings));
function isIndexable(item) {
if (/*#__PURE__*/react.isValidElement(item) && !item.props.disabled && item.type === MenuItem$1) return true;
return false;
}
function closeMenuOnClick(item) {
if (/*#__PURE__*/react.isValidElement(item) && item.type === MenuItem$1 && item.props.closeMenuOnClick !== false) return true;
return false;
}
const MenuList = /*#__PURE__*/react.forwardRef(function MenuList({
addCloseMenuOnClickIndex,
children,
...rest
}, ref) {
const {
focusedIndex,
setFocusedIndex,
initialFocus
} = useMenu();
let index = -1;
const focusableIndexs = react.useMemo(() => [], []);
const updatedChildren = react.useMemo(() => react.Children.map(children, child => {
if (!child) return child;
if (child.type === MenuSection) {
index++;
const menuSectionIndex = index;
const updatedGrandChildren = react.Children.map(child.props.children, grandChild => {
index++;
if (isIndexable(grandChild)) focusableIndexs.push(index);
return /*#__PURE__*/react.cloneElement(grandChild, {
index
});
});
return /*#__PURE__*/react.cloneElement(child, {
index: menuSectionIndex
}, updatedGrandChildren);
} else {
index++;
if (isIndexable(child)) focusableIndexs.push(index);
if (closeMenuOnClick(child)) {
addCloseMenuOnClickIndex(index);
}
return /*#__PURE__*/react.cloneElement(child, {
index
});
}
}), [children, focusableIndexs, index, addCloseMenuOnClickIndex]);
const firstFocusIndex = focusableIndexs[0];
const lastFocusIndex = focusableIndexs[focusableIndexs.length - 1];
react.useEffect(() => {
if (initialFocus === 'first') {
setFocusedIndex(firstFocusIndex);
}
if (initialFocus === 'last') {
setFocusedIndex(lastFocusIndex);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [initialFocus, firstFocusIndex, lastFocusIndex]);
const handleMenuItemChange = (direction, fallbackIndex) => {
const i = direction === 'down' ? 1 : -1;
const currentFocus = focusableIndexs.indexOf(focusedIndex);
const nextMenuItem = focusableIndexs[currentFocus + i];
const nextFocusedIndex = typeof nextMenuItem === 'undefined' ? fallbackIndex : nextMenuItem;
setFocusedIndex(nextFocusedIndex);
};
const handleKeyPress = event => {
const {
key
} = event;
event.stopPropagation();
if (key === 'ArrowDown') {
event.preventDefault();
handleMenuItemChange('down', firstFocusIndex);
}
if (key === 'ArrowUp') {
event.preventDefault();
handleMenuItemChange('up', lastFocusIndex);
}
};
return /*#__PURE__*/jsxRuntime.jsx(List, {
onKeyDown: handleKeyPress,
role: "menu",
...rest,
ref: ref,
children: updatedChildren
});
});
// MenuList.displayName = 'EdsMenuList'
const {
border: border$1
} = menu;
const MenuPaper = styled__default.default(Paper).withConfig({
displayName: "Menu__MenuPaper",
componentId: "sc-1vlnqcj-0"
})(["width:100%;min-width:fit-content;", ";"], edsUtils.bordersTemplate(border$1));
const StyledPopover$1 = styled__default.default('div').withConfig({
shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
}).withConfig({
displayName: "Menu__StyledPopover",
componentId: "sc-1vlnqcj-1"
})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;background-color:transparent;&::backdrop{background-color:transparent;}"]);
const MenuContainer = /*#__PURE__*/react.forwardRef(function MenuContainer({
children,
anchorEl,
onClose: onCloseCallback,
open,
...rest
}, ref) {
const {
setOnClose,
onClose,
setInitialFocus,
focusedIndex
} = useMenu();
const closeMenuOnClickIndexes = react.useMemo(() => [], []);
react.useEffect(() => {
if (onClose === null && onCloseCallback) {
setOnClose(onCloseCallback);
}
}, [onClose, onCloseCallback, setOnClose]);
react.useEffect(() => {
const openWithKey = e => {
const {
key
} = e;
//activate menu with arrows according to wai-aria best practices
if (key === 'ArrowDown' || key === 'ArrowUp') {
e.preventDefault();
e.stopPropagation();
anchorEl.dispatchEvent(new Event('click', {
bubbles: true
}));
}
switch (key) {
case 'Enter':
case 'ArrowDown':
setInitialFocus('first');
break;
case 'ArrowUp':
setInitialFocus('last');
break;
}
};
if (anchorEl) anchorEl.addEventListener('keydown', openWithKey);
return () => {
if (anchorEl) anchorEl.removeEventListener('keydown', openWithKey);
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [anchorEl]);
edsUtils.useGlobalKeyPress('Escape', () => {
if (open && onClose !== null) {
onClose();
anchorEl.focus();
}
});
edsUtils.useGlobalKeyPress('Enter', () => {
if (open && onClose !== null && closeMenuOnClickIndexes.includes(focusedIndex)) {
setTimeout(() => {
if (window.document.contains(anchorEl)) {
anchorEl.focus();
}
}, 0);
}
});
const addCloseMenuOnClickIndex = index => {
if (closeMenuOnClickIndexes.indexOf(index) < 0) {
closeMenuOnClickIndexes.push(index);
}
};
return /*#__PURE__*/jsxRuntime.jsx(MenuList, {
addCloseMenuOnClickIndex: addCloseMenuOnClickIndex,
...rest,
ref: ref,
children: children
});
});
const Menu$1 = /*#__PURE__*/react.forwardRef(function Menu({
anchorEl,
open,
placement = 'bottom',
matchAnchorWidth = false,
onClose,
style,
className,
...rest
}, ref) {
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, menu);
let floatingMiddleware = [react$1.offset(4), react$1.flip(), react$1.shift({
padding: 8
})];
if (matchAnchorWidth) {
floatingMiddleware = [...floatingMiddleware, react$1.size({
apply({
rects,
elements
}) {
Object.assign(elements.floating.style, {
width: `${rects.reference.width}px`
});
}
})];
}
const {
x,
y,
refs,
update,
strategy,
context
} = react$1.useFloating({
elements: {
reference: anchorEl
},
placement,
open,
onOpenChange: onClose,
middleware: floatingMiddleware
});
const popoverRef = react.useMemo(() => edsUtils.mergeRefs(refs.setFloating, ref), [refs.setFloating, ref]);
edsUtils.useIsomorphicLayoutEffect(() => {
if (refs.reference.current && refs.floating.current && open) {
return react$1.autoUpdate(refs.reference.current, refs.floating.current, update);
}
}, [refs.reference, refs.floating, update, open]);
edsUtils.useIsomorphicLayoutEffect(() => {
if (open) {
refs.floating.current?.showPopover();
} else {
refs.floating.current?.hidePopover();
}
}, [open, refs.floating]);
const {
getFloatingProps
} = react$1.useInteractions([react$1.useDismiss(context, {
escapeKey: false
})]);
const props = {
className
};
const menuProps = {
...rest,
onClose,
anchorEl,
open
};
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsx(StyledPopover$1, {
popover: "manual",
...getFloatingProps({
ref: popoverRef,
style: {
...style,
position: strategy,
top: y || 0,
left: x || 0
}
}),
children: /*#__PURE__*/jsxRuntime.jsx(MenuPaper, {
elevation: "raised",
...props,
children: /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
children: /*#__PURE__*/jsxRuntime.jsx(MenuContainer, {
...menuProps,
ref: ref
})
})
})
})
});
});
const Menu = Menu$1;
Menu.Item = MenuItem$1;
Menu.Section = MenuSection;
Menu.Item.displayName = 'Menu.Item';
Menu.Section.displayName = 'Menu.Section';
const {
colors: {
interactive: {
primary__selected_highlight: {
rgba: selectedColor
},
disabled__text: {
rgba: disabledColor
}
}
},
spacings: {
comfortable: {
small: spacingSmall$1
}
}
} = edsTokens.tokens;
const pagination = {
entities: {
item: {
states: {
active: {
background: selectedColor
}
}
},
icon: {
typography: {
color: disabledColor
}
}
},
spacings: {
left: spacingSmall$1
}
};
const PaginationItem = /*#__PURE__*/react.forwardRef(function PaginationItem({
$page,
selected,
onClick,
...rest
}, ref) {
const props = {
ref,
$page,
selected,
...rest
};
const background = selected ? pagination.entities.item.states.active.background : null;
return /*#__PURE__*/jsxRuntime.jsx(Button$1, {
style: {
background
},
variant: "ghost_icon",
onClick: onClick ? onClick : undefined,
...props,
children: $page
});
});
function PaginationControl(pages, activePage) {
const siblings = 1; // amount of siblings on left and right side of active page after trunking
const totalPagesShown = 7; // amount of total pages before we start trunking pages in ellipsis
const pagesBeforeEllipsis = 5; // total pages shown before ellipsis and trunking begins
const ELLIPSIS = 'ELLIPSIS';
// Range function from https://dev.to/namirsab/comment/2050
const range = (start, end) => {
const length = end - start + 1;
return Array.from({
length
}, (_, i) => start + i);
};
let pageRange;
if (pages > 4) {
const startPage = Math.max(1, activePage < pagesBeforeEllipsis || pages <= totalPagesShown ? 1 : activePage + siblings + 1 >= pages ? pages - 4 // - 4 to fit total columns /
: activePage > 4 && pages > totalPagesShown ? activePage - siblings : 1); // the first page after left ellipsis
const endOffset = activePage < pagesBeforeEllipsis && pages > totalPagesShown ? pagesBeforeEllipsis : activePage < pagesBeforeEllipsis && pages <= totalPagesShown ? pages : activePage + siblings + 1 < pages - 1 ? activePage + siblings : activePage + siblings + 1 === pages - 1 ? pages : pages;
const endPage = Math.min(pages, endOffset); // the last page before right ellipsis
pageRange = range(startPage, endPage); // range in between ellipsis(es). Ex: range(4, 6) = 1 ... ( 4 5 6 ) ... 10
const hiddenLeft = startPage > 2 && pages > totalPagesShown; // Has hidden pages on left side
const hiddenRight = pages - endPage > 1 && pages > totalPagesShown; // Has hidden pages on right side
if (hiddenLeft && !hiddenRight) {
pageRange = [1, ELLIPSIS, ...pageRange];
} else if (!hiddenLeft && hiddenRight) {
pageRange = [...pageRange, ELLIPSIS, pages];
} else if (hiddenLeft && hiddenRight) {
pageRange = [1, ELLIPSIS, ...pageRange, ELLIPSIS, pages];
}
return [...pageRange];
}
return range(1, pages);
}
const icons = {
chevron_left: edsIcons.chevron_left,
chevron_right: edsIcons.chevron_right,
more_horizontal: edsIcons.more_horizontal
};
Icon$1.add(icons);
const Navigation = styled__default.default.nav.withConfig({
displayName: "Pagination__Navigation",
componentId: "sc-13cpp3o-0"
})(["display:flex;justify-content:space-between;align-items:center;flex-wrap:nowrap;margin-left:", ";"], ({
$withItemIndicator
}) => $withItemIndicator ? pagination.spacings.left : 0);
const OrderedList = styled__default.default.ol.withConfig({
displayName: "Pagination__OrderedList",
componentId: "sc-13cpp3o-1"
})(["list-style:none;margin:0;padding:0;display:grid;grid-gap:", ";grid-auto-flow:column;"], pagination.spacings.left);
const ListItem = styled__default.default.li.withConfig({
displayName: "Pagination__ListItem",
componentId: "sc-13cpp3o-2"
})(["display:inline-grid;"]);
const StyledIcon = styled__default.default(Icon$1).withConfig({
displayName: "Pagination__StyledIcon",
componentId: "sc-13cpp3o-3"
})(["align-self:center;justify-self:center;fill:", ";"], pagination.entities.icon.typography.color);
const FlexContainer = styled__default.default.div.withConfig({
displayName: "Pagination__FlexContainer",
componentId: "sc-13cpp3o-4"
})(["display:flex;justify-content:space-between;flex-wrap:nowrap;align-items:center;"]);
const Text$1 = styled__default.default(Typography).withConfig({
displayName: "Pagination__Text",
componentId: "sc-13cpp3o-5"
})(["white-space:nowrap;"]);
function getAriaLabel(page, selected) {
return `${selected === page ? 'Current page, ' : 'Go to '}page ${page}`;
}
const Pagination = /*#__PURE__*/react.forwardRef(function Pagination({
totalItems,
defaultPage = 1,
withItemIndicator,
itemsPerPage = 10,
onChange,
...rest
}, ref) {
const pages = Math.ceil(totalItems / itemsPerPage); // Total page numbers
const columns = pages < 5 ? pages + 2 : 7; // Total pages to display on the control + 2: < and >
const [activePage, setActivePage] = react.useState(defaultPage);
const currentItemFirst = activePage === 1 ? 1 : activePage * itemsPerPage - itemsPerPage + 1; // First number of range of items at current page
const currentItemLast = activePage === pages ? totalItems : activePage * itemsPerPage; // Last number of range of items at current page
const onPageChange = (event, page) => {
page && setActivePage(page);
if (event && onChange) {
// Callback for provided onChange func
onChange(event, page);
} else {
return undefined;
}
};
const isMounted = edsUtils.useIsMounted();
const items = PaginationControl(pages, activePage);
edsUtils.useIsomorphicLayoutEffect(() => {
if (isMounted) {
setActivePage(1);
onChange?.(null, 1);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [itemsPerPage]);
const props = {
ref,
$withItemIndicator: withItemIndicator,
...rest
};
const pagination = /*#__PURE__*/jsxRuntime.jsx(Navigation, {
"aria-label": "pagination",
...props,
children: /*#__PURE__*/jsxRuntime.jsxs(OrderedList, {
style: {
gridTemplateColumns: `repeat(${columns}, 48px)`
},
children: [/*#__PURE__*/jsxRuntime.jsx(ListItem, {
children: /*#__PURE__*/jsxRuntime.jsx(Button$1, {
variant: "ghost_icon",
onClick: activePage > 1 ? event => {
onPageChange(event, activePage - 1);
} : undefined,
disabled: activePage === 1,
"aria-label": "Go to previous page",
children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
name: "chevron_left"
})
})
}, "previous"), items.length > 0 ? items.map((page, index) => page !== 'ELLIPSIS' ? /*#__PURE__*/jsxRuntime.jsx(ListItem
// eslint-disable-next-line react/no-array-index-key
, {
children: /*#__PURE__*/jsxRuntime.jsx(PaginationItem, {
"aria-label": getAriaLabel(page, activePage),
"aria-current": activePage,
$page: page,
selected: page === activePage,
onClick: event => {
onPageChange(event, page);
}
})
}, `list-item ${index}`) : /*#__PURE__*/jsxRuntime.jsx(ListItem
// eslint-disable-next-line react/no-array-index-key
, {
children: /*#__PURE__*/jsxRuntime.jsx(StyledIcon, {
name: "more_horizontal",
"aria-label": "Ellipsis of pages"
})
}, `ellipsis-${index}`)) : undefined, /*#__PURE__*/jsxRuntime.jsx(ListItem, {
children: /*#__PURE__*/jsxRuntime.jsx(Button$1, {
variant: "ghost_icon",
onClick: activePage < pages ? event => {
onPageChange(event, activePage + 1);
} : undefined,
"aria-label": "Go to next page",
disabled: activePage === pages,
children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
name: "chevron_right"
})
})
}, "next")]
})
});
return withItemIndicator ? /*#__PURE__*/jsxRuntime.jsxs(FlexContainer, {
children: [/*#__PURE__*/jsxRuntime.jsx(Text$1, {
children: currentItemFirst !== currentItemLast ? `${currentItemFirst}
${' - '}
${currentItemLast}
${' of '}
${totalItems}
${' items'}` : `${currentItemFirst} ${' of '} ${totalItems} ${' items'}`
}), pagination]
}) : pagination;
});
const {
colors: colors$1,
spacings: {
comfortable: {
small: small$1,
x_small: x_small$2
}
},
typography: typography$1,
shape
} = edsTokens.tokens;
const nativeselect = {
background: colors$1.ui.background__light.rgba,
typography: {
...typography$1.input.text,
color: colors$1.text.static_icons__default.rgba
},
entities: {
input: {
spacings: {
left: small$1,
right: small$1,
top: '6px',
bottom: '6px'
}
},
icon: {
width: '24px'
}
},
boxShadow: 'inset 0 -1px 0 0 ' + colors$1.text.static_icons__tertiary.rgba,
states: {
focus: {
outline: {
type: 'outline',
width: '2px',
color: colors$1.interactive.primary__resting.rgba,
style: 'solid',
offset: '0px'
}
},
disabled: {
typography: {
color: colors$1.interactive.disabled__text.rgba
}
}
},
modes: {
compact: {
minHeight: shape._modes.compact.straight.minHeight,
entities: {
input: {
spacings: {
left: x_small$2,
right: x_small$2,
top: '0',
bottom: '0'
}
}
}
}
}
};
const Container$3 = styled__default.default.div.withConfig({
displayName: "NativeSelect__Container",
componentId: "sc-82vb16-0"
})(["min-width:100px;width:100%;"]);
const StyledSelect = styled__default.default.select.withConfig({
displayName: "NativeSelect__StyledSelect",
componentId: "sc-82vb16-1"
})(["border:none;border-radius:0;box-shadow:", ";", " ", " padding-right:calc(", " *2 + ", ");display:block;margin:0;appearance:none;background-image:", " linear-gradient( to bottom,", " 0%,", " 100% );background-repeat:no-repeat,repeat;background-position:right ", " top 50%;width:100%;&:active,&:focus{box-shadow:none;", "}&:disabled{color:", ";background-image:url(\"data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23bebebe' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E\"),linear-gradient( to bottom,", " 0%,", " 100% );cursor:not-allowed;box-shadow:none;outline:none;.arrow-icon{fill:red;}&:focus,&:active{outline:none;}}"], nativeselect.boxShadow, edsUtils.typographyTemplate(nativeselect.typography), ({
theme
}) => styled.css(["height:", ";", ""], theme.minHeight, edsUtils.spacingsTemplate(theme.entities.input.spacings)), nativeselect.entities.input.spacings.right, nativeselect.entities.icon.width, props => props.multiple ? `` : `url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%236f6f6f' d='M7 9.5l5 5 5-5H7z'/%3E%3C/svg%3E"),`, nativeselect.background, nativeselect.background, nativeselect.entities.input.spacings.right, edsUtils.outlineTemplate(nativeselect.states.focus.outline), nativeselect.states.disabled.typography.color, nativeselect.background, nativeselect.background);
const NativeSelect = /*#__PURE__*/react.forwardRef(function NativeSelect({
label,
children,
className,
style,
selectRef,
id,
meta,
disabled = false,
multiple = false,
...other
}, ref) {
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, nativeselect);
const containerProps = {
ref,
className,
style
};
const selectProps = {
ref: selectRef,
id,
disabled,
multiple,
...other
};
const labelProps = {
htmlFor: id,
label,
meta,
disabled
};
const showLabel = label || meta;
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsxs(Container$3, {
...containerProps,
children: [showLabel && /*#__PURE__*/jsxRuntime.jsx(Label$3, {
...labelProps
}), /*#__PURE__*/jsxRuntime.jsx(StyledSelect, {
...selectProps,
children: children
})]
})
});
});
const {
colors: {
interactive: {
primary__resting: {
rgba: primaryColor$1
},
primary__hover_alt: {
rgba: primaryHoverAlt$2
},
focus: {
rgba: focusOutlineColor$2
},
disabled__text: {
rgba: disabledText$1
}
}
},
typography: {
navigation: {
menu_title: labelTypography$2
}
},
spacings: {
comfortable: {
medium_small: medium_small$2,
x_small: x_small$1,
x_large: x_large$2,
xx_large: xx_large$1
}
},
clickbounds: {
default__base: clicboundSize$1,
compact__standard: compactClickboundSize$1
},
interactions: {
focused: {
width: focusOutlineWidth$2
}
}
} = edsTokens.tokens;
const checkbox = {
background: primaryColor$1,
typography: labelTypography$2,
width: xx_large$1,
spacings: {
bottom: medium_small$2,
top: medium_small$2,
left: medium_small$2,
right: medium_small$2
},
clickbound: {
height: clicboundSize$1
},
states: {
hover: {
background: primaryHoverAlt$2
},
disabled: {
background: disabledText$1
},
focus: {
outline: {
type: 'outline',
style: 'dashed',
width: focusOutlineWidth$2,
color: focusOutlineColor$2,
offset: '10px'
}
}
},
modes: {
compact: {
width: x_large$2,
spacings: {
bottom: x_small$1,
top: x_small$1,
left: x_small$1,
right: x_small$1
},
clickbound: {
height: compactClickboundSize$1
},
states: {
focus: {
outline: {
type: 'outline',
style: 'dashed',
width: focusOutlineWidth$2,
color: focusOutlineColor$2,
offset: '2px'
}
}
}
}
}
};
/* eslint camelcase: "off" */
const StyledPath$1 = styled__default.default.path.attrs(({
$icon
}) => ({
fillRule: 'evenodd',
clipRule: 'evenodd',
d: $icon.svgPathData
})).withConfig({
displayName: "Input__StyledPath",
componentId: "sc-rqj7qf-0"
})([""]);
const Input$3 = styled__default.default.input.attrs(({
type = 'checkbox'
}) => ({
type
})).withConfig({
displayName: "Input",
componentId: "sc-rqj7qf-1"
})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='checked']{display:none;}&:not(:checked) ~ svg path[name='not-checked']{display:inline;}&:checked ~ svg path[name='not-checked']{display:none;}&:checked ~ svg path[name='checked']{display:inline;}"], ({
theme,
$iconSize
}) => parseFloat(theme.clickbound.height) / $iconSize, ({
disabled
}) => disabled ? 'not-allowed' : 'pointer', ({
theme
}) => edsUtils.outlineTemplate(theme.states.focus.outline), ({
theme
}) => edsUtils.outlineTemplate(theme.states.focus.outline));
const Svg$1 = styled__default.default.svg.attrs(({
height,
width,
fill
}) => ({
name: null,
xmlns: 'http://www.w3.org/2000/svg',
height,
width,
fill
})).withConfig({
displayName: "Input__Svg",
componentId: "sc-rqj7qf-2"
})(["grid-area:input;pointer-events:none;"]);
const InputWrapper$1 = styled__default.default.span.withConfig({
displayName: "Input__InputWrapper",
componentId: "sc-rqj7qf-3"
})(["display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;isolation:isolate;", " &::before{content:'';position:absolute;width:", ";aspect-ratio:1/1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:100%;}@media (hover:hover) and (pointer:fine){> svg{z-index:1;}&:hover{&::before{background-color:", ";}}}"], ({
theme
}) => edsUtils.spacingsTemplate(theme.spacings), ({
theme
}) => theme.width, ({
disabled
}) => disabled ? 'transparent' : checkbox.states.hover.background);
const CheckboxInput = /*#__PURE__*/react.forwardRef(function CheckboxInput({
disabled = false,
indeterminate,
style,
className,
...rest
}, ref) {
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, checkbox);
const iconSize = 24;
const fill = disabled ? checkbox.states.disabled.background : checkbox.background;
const inputWrapperProps = {
disabled,
style,
className
};
const inputProps = {
ref,
disabled,
['data-indeterminate']: indeterminate,
...rest
};
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsxs(InputWrapper$1, {
...inputWrapperProps,
children: [/*#__PURE__*/jsxRuntime.jsx(Input$3, {
$iconSize: iconSize,
...inputProps
}), indeterminate ? /*#__PURE__*/jsxRuntime.jsx(Svg$1, {
width: iconSize,
height: iconSize,
viewBox: `0 0 ${iconSize} ${iconSize}`,
fill: fill,
"aria-hidden": true,
children: /*#__PURE__*/jsxRuntime.jsx(StyledPath$1, {
$icon: edsIcons.checkbox_indeterminate,
name: "indeterminate"
})
}) : /*#__PURE__*/jsxRuntime.jsxs(Svg$1, {
width: iconSize,
height: iconSize,
viewBox: `0 0 ${iconSize} ${iconSize}`,
fill: fill,
"aria-hidden": true,
children: [/*#__PURE__*/jsxRuntime.jsx(StyledPath$1, {
$icon: edsIcons.checkbox,
name: "checked"
}), /*#__PURE__*/jsxRuntime.jsx(StyledPath$1, {
$icon: edsIcons.checkbox_outline,
name: "not-checked"
})]
})]
})
});
});
/* eslint camelcase: "off" */
const StyledLabel$2 = styled__default.default.label.withConfig({
displayName: "Checkbox__StyledLabel",
componentId: "sc-yg6l8h-0"
})(["display:inline-flex;align-items:center;cursor:", ";"], ({
$disabled
}) => $disabled ? 'not-allowed' : 'pointer');
const LabelText$1 = styled__default.default.span.withConfig({
displayName: "Checkbox__LabelText",
componentId: "sc-yg6l8h-1"
})(["", ";"], edsUtils.typographyTemplate(checkbox.typography));
const Checkbox = /*#__PURE__*/react.forwardRef(function Checkbox({
label,
disabled = false,
indeterminate,
className,
style,
...rest
}, ref) {
return label ? /*#__PURE__*/jsxRuntime.jsxs(StyledLabel$2, {
$disabled: disabled,
className: className,
style: style,
children: [/*#__PURE__*/jsxRuntime.jsx(CheckboxInput, {
...rest,
disabled: disabled,
ref: ref,
indeterminate: indeterminate
}), /*#__PURE__*/jsxRuntime.jsx(LabelText$1, {
children: label
})]
}) : /*#__PURE__*/jsxRuntime.jsx(CheckboxInput, {
...rest,
className: className,
style: style,
disabled: disabled,
ref: ref,
indeterminate: indeterminate
});
});
Checkbox.displayName = 'Checkbox';
const {
colors: {
interactive: {
primary__resting: {
rgba: primaryColor
},
primary__hover_alt: {
rgba: primaryHoverAlt$1
},
focus: {
rgba: focusOutlineColor$1
},
disabled__text: {
rgba: disabledText
}
}
},
typography: {
navigation: {
menu_title: labelTypography$1
}
},
spacings: {
comfortable: {
medium_small: medium_small$1,
x_small,
x_large: x_large$1,
xx_large
}
},
clickbounds: {
default__base: clicboundSize,
compact__standard: compactClickboundSize
},
interactions: {
focused: {
width: focusOutlineWidth$1
}
}
} = edsTokens.tokens;
const comfortable$1 = {
background: primaryColor,
typography: labelTypography$1,
width: xx_large,
spacings: {
bottom: medium_small$1,
top: medium_small$1,
left: medium_small$1,
right: medium_small$1
},
clickbound: {
height: clicboundSize
},
states: {
hover: {
background: primaryHoverAlt$1
},
disabled: {
background: disabledText
},
focus: {
outline: {
type: 'outline',
style: 'dashed',
width: focusOutlineWidth$1,
color: focusOutlineColor$1,
offset: '10px'
}
}
},
modes: {
compact: {
width: x_large$1,
spacings: {
bottom: x_small,
top: x_small,
left: x_small,
right: x_small
},
clickbound: {
height: compactClickboundSize
},
states: {
focus: {
outline: {
type: 'outline',
style: 'dashed',
width: focusOutlineWidth$1,
color: focusOutlineColor$1,
offset: '2px'
}
}
}
}
}
};
/* eslint camelcase: "off" */
const Input$2 = styled__default.default.input.attrs(({
type = 'radio'
}) => ({
type
})).withConfig({
displayName: "Radio__Input",
componentId: "sc-we59oz-0"
})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], ({
theme,
$iconSize
}) => parseFloat(theme.clickbound.height) / $iconSize, ({
disabled
}) => disabled ? 'not-allowed' : 'pointer', ({
theme
}) => edsUtils.outlineTemplate(theme.states.focus.outline), ({
theme
}) => edsUtils.outlineTemplate(theme.states.focus.outline));
const StyledLabel$1 = styled__default.default.label.withConfig({
displayName: "Radio__StyledLabel",
componentId: "sc-we59oz-1"
})(["display:inline-flex;align-items:center;cursor:", ";"], ({
$disabled
}) => $disabled ? 'not-allowed' : 'pointer');
const StyledPath = styled__default.default.path.attrs(({
$icon
}) => ({
fillRule: 'evenodd',
clipRule: 'evenodd',
d: $icon.svgPathData
})).withConfig({
displayName: "Radio__StyledPath",
componentId: "sc-we59oz-2"
})([""]);
const Svg = styled__default.default.svg.attrs(({
height,
width,
fill
}) => ({
name: null,
xmlns: 'http://www.w3.org/2000/svg',
height,
width,
fill
})).withConfig({
displayName: "Radio__Svg",
componentId: "sc-we59oz-3"
})(["grid-area:input;pointer-events:none;"]);
const LabelText = styled__default.default.span.withConfig({
displayName: "Radio__LabelText",
componentId: "sc-we59oz-4"
})(["", ""], edsUtils.typographyTemplate(comfortable$1.typography));
const InputWrapper = styled__default.default.span.withConfig({
displayName: "Radio__InputWrapper",
componentId: "sc-we59oz-5"
})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;isolation:isolate;cursor:", ";&::before{content:'';position:absolute;width:", ";aspect-ratio:1/1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:100%;}@media (hover:hover) and (pointer:fine){> svg{z-index:1;}&:hover{&::before{background-color:", ";}}}"], ({
theme
}) => edsUtils.spacingsTemplate(theme.spacings), ({
disabled
}) => disabled ? 'not-allowed' : 'pointer', ({
theme
}) => theme.width, ({
disabled
}) => disabled ? 'transparent' : comfortable$1.states.hover.background);
const Radio = /*#__PURE__*/react.forwardRef(function Radio({
label,
disabled = false,
className,
style,
...rest
}, ref) {
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, comfortable$1);
const iconSize = 24;
const fill = disabled ? comfortable$1.states.disabled.background : comfortable$1.background;
const renderSVG = react.useMemo(() => {
return /*#__PURE__*/jsxRuntime.jsxs(Svg, {
width: iconSize,
height: iconSize,
viewBox: `0 0 ${iconSize} ${iconSize}`,
fill: fill,
"aria-hidden": true,
children: [/*#__PURE__*/jsxRuntime.jsx(StyledPath, {
$icon: edsIcons.radio_button_selected,
name: "selected"
}), /*#__PURE__*/jsxRuntime.jsx(StyledPath, {
$icon: edsIcons.radio_button_unselected,
name: "unselected"
})]
});
}, [fill]);
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: label ? /*#__PURE__*/jsxRuntime.jsxs(StyledLabel$1, {
$disabled: disabled,
className: className,
style: style,
children: [/*#__PURE__*/jsxRuntime.jsxs(InputWrapper, {
disabled: disabled,
children: [/*#__PURE__*/jsxRuntime.jsx(Input$2, {
...rest,
ref: ref,
disabled: disabled,
$iconSize: iconSize
}), renderSVG]
}), /*#__PURE__*/jsxRuntime.jsx(LabelText, {
children: label
})]
}) : /*#__PURE__*/jsxRuntime.jsxs(InputWrapper, {
disabled: disabled,
className: className,
style: style,
children: [/*#__PURE__*/jsxRuntime.jsx(Input$2, {
...rest,
ref: ref,
disabled: disabled,
$iconSize: iconSize
}), renderSVG]
})
});
});
Radio.displayName = 'Radio';
const BaseInputWrapper = styled__default.default.span.withConfig({
displayName: "Switchstyles__BaseInputWrapper",
componentId: "sc-x39lde-0"
})(({
theme: {
width,
height
}
}) => styled.css(["width:", ";height:", ";border-radius:50%;position:relative;grid-area:input;"], width, height));
const BaseInput = styled__default.default.input.attrs(({
type = 'checkbox'
}) => ({
type
})).withConfig({
displayName: "Switchstyles__BaseInput",
componentId: "sc-x39lde-1"
})(({
disabled,
theme
}) => styled.css(["appearance:none;width:100%;height:100%;grid-area:input;margin:0;position:relative;z-index:1;cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}"], disabled ? 'not-allowed' : 'pointer', edsUtils.outlineTemplate(theme.states.focus.outline), edsUtils.outlineTemplate(theme.states.focus.outline)));
const GridWrapper = styled__default.default.span.withConfig({
displayName: "Switchstyles__GridWrapper",
componentId: "sc-x39lde-2"
})(["display:inline-grid;vertical-align:middle;grid:[input] 1fr / [input] 1fr;place-items:center;isolation:isolate;"]);
const Input$1 = styled__default.default(BaseInput).withConfig({
displayName: "SwitchSmall__Input",
componentId: "sc-1a99mis-0"
})(({
disabled,
theme: {
states,
entities: {
handle,
track
}
}
}) => styled.css(["&[data-focus-visible-added]:focus + span{", "}&:focus-visible + span{", "}&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(180%,-50%);background-color:", ";}@media (hover:hover) and (pointer:fine){&:hover + span{background-color:", ";}}"], edsUtils.outlineTemplate(states.focus.outline), edsUtils.outlineTemplate(states.focus.outline), disabled ? states.disabled.background : track.states.active.background, handle.background, disabled ? 'transparent' : states.hover.background));
const Track$1 = styled__default.default.span.withConfig({
displayName: "SwitchSmall__Track",
componentId: "sc-1a99mis-1"
})(({
$isDisabled,
theme: {
states,
entities: {
track
}
}
}) => styled.css(["width:", ";height:", ";border-radius:10px;border:none;background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);"], track.width, track.height, $isDisabled ? states.disabled.background : track.states.disabled.background));
const Handle$1 = styled__default.default.span.withConfig({
displayName: "SwitchSmall__Handle",
componentId: "sc-1a99mis-2"
})(({
theme: {
entities: {
handle
}
}
}) => styled.css(["background-color:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(11%,-50%);left:7px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, handle.width, handle.height));
const SwitchSmall = /*#__PURE__*/react.forwardRef(function SwitchSmall({
disabled,
className,
style,
...rest
}, ref) {
return /*#__PURE__*/jsxRuntime.jsxs(GridWrapper, {
className: className,
style: style,
children: [/*#__PURE__*/jsxRuntime.jsx(Input$1, {
...rest,
ref: ref,
disabled: disabled
}), /*#__PURE__*/jsxRuntime.jsxs(BaseInputWrapper, {
children: [/*#__PURE__*/jsxRuntime.jsx(Track$1, {
$isDisabled: disabled
}), /*#__PURE__*/jsxRuntime.jsx(Handle$1, {})]
})]
});
});
SwitchSmall.displayName = 'SwitchSmall';
const Input = styled__default.default(BaseInput).withConfig({
displayName: "SwitchDefault__Input",
componentId: "sc-16ym5pn-0"
})(({
disabled,
theme
}) => styled.css(["width:", ";aspect-ratio:1/1;&:checked + span > span{background-color:", ";}&:checked + span > span:last-child{transform:translate(105%,-50%);background-color:", ";}&:hover + span{background-color:", ";}&:hover + span > span:last-child{background-color:", ";}"], theme.clickbound.height, disabled ? theme.states.disabled.background : theme.entities.track.states.active.background, disabled ? theme.states.disabled.background : theme.entities.handle.states.active.background, disabled ? 'transparent' : theme.states.hover.background, disabled ? theme.states.disabled.background : theme.states.hover.entities.handle.background));
const Track = styled__default.default.span.withConfig({
displayName: "SwitchDefault__Track",
componentId: "sc-16ym5pn-1"
})(({
$isDisabled,
theme: {
states,
entities: {
track
}
}
}) => styled.css(["", " border:none;width:", ";height:", ";background-color:", ";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:background 0.36s;", ""], edsUtils.bordersTemplate(track.border), track.width, track.height, track.background, $isDisabled && {
backgroundColor: states.disabled.background
}));
const Handle = styled__default.default.span.withConfig({
displayName: "SwitchDefault__Handle",
componentId: "sc-16ym5pn-2"
})(({
$isDisabled,
theme: {
states,
entities: {
handle
}
}
}) => styled.css(["background-color:", ";", " box-shadow:", ";width:", ";height:", ";border-radius:50%;display:inline-block;position:absolute;top:50%;transform:translate(0,-50%);left:4px;transition:transform 0.36s cubic-bezier(0.78,0.14,0.15,0.86);"], handle.background, $isDisabled && {
backgroundColor: states.disabled.background
}, handle.boxShadow, handle.width, handle.height));
const SwitchDefault = /*#__PURE__*/react.forwardRef(function SwitchDefault({
disabled,
className,
style,
...rest
}, ref) {
return /*#__PURE__*/jsxRuntime.jsxs(GridWrapper, {
className: className,
style: style,
children: [/*#__PURE__*/jsxRuntime.jsx(Input, {
...rest,
ref: ref,
disabled: disabled
}), /*#__PURE__*/jsxRuntime.jsxs(BaseInputWrapper, {
children: [/*#__PURE__*/jsxRuntime.jsx(Track, {
$isDisabled: disabled
}), /*#__PURE__*/jsxRuntime.jsx(Handle, {
$isDisabled: disabled
})]
})]
});
});
SwitchDefault.displayName = 'SwitchDefault';
const {
colors: {
ui: {
background__medium: {
rgba: backgroundColorMedium
}
},
interactive: {
primary__hover_alt: {
rgba: primaryHoverAlt
},
primary__hover: {
rgba: primaryHover
},
primary__selected_highlight: {
rgba: activeColor
},
primary__resting: {
rgba: primaryResting
},
disabled__fill: {
rgba: backgroundDisabled
},
focus: {
rgba: focusOutlineColor
},
icon_on_interactive_colors: {
rgba: iconInteractive
}
},
text: {
static_icons__tertiary: {
rgba: iconTertiary
}
}
},
typography: {
navigation: {
menu_title: labelTypography
}
},
clickbounds,
elevation: {
raised: boxShadow$1
},
spacings: {
comfortable: {
medium_small
}
},
shape: {
circle,
_modes: {
compact: {
icon_button: compactIconButton
}
}
},
interactions: {
focused: {
width: focusOutlineWidth
}
}
} = edsTokens.tokens;
const comfortable = {
typography: labelTypography,
height: circle.minHeight,
width: circle.minWidth,
clickbound: {
height: clickbounds.default__base,
width: clickbounds.default__base
},
entities: {
label: {
spacings: {
left: medium_small
}
},
track: {
width: '32px',
height: '8px',
background: backgroundColorMedium,
border: {
type: 'border',
radius: '4px'
},
states: {
active: {
background: activeColor
},
hover: {
background: primaryHover
}
}
},
handle: {
height: '16px',
width: '16px',
boxShadow: boxShadow$1,
background: iconTertiary,
states: {
active: {
background: primaryResting
},
hover: {
background: primaryHoverAlt
}
}
}
},
modes: {
compact: {
height: compactIconButton.minHeight,
width: compactIconButton.minWidth,
clickbound: {
height: clickbounds.compact__standard,
width: clickbounds.compact__standard
},
entities: {
track: {
width: '20px',
height: '10px',
states: {
disabled: {
background: iconTertiary
},
active: {
background: primaryResting
}
}
},
handle: {
height: '6px',
width: '6px',
background: iconInteractive
}
}
}
},
states: {
disabled: {
background: backgroundDisabled
},
focus: {
outline: {
width: focusOutlineWidth,
type: 'outline',
style: 'dashed',
color: focusOutlineColor
}
},
hover: {
background: primaryHoverAlt,
entities: {
handle: {
background: primaryHover
}
}
}
}
};
const StyledLabel = styled__default.default.label.withConfig({
displayName: "Switch__StyledLabel",
componentId: "sc-sdaahx-0"
})(["cursor:", ";border:none;background-color:transparent;vertical-align:middle;display:inline-flex;align-items:center;position:relative;gap:", ";"], ({
$isDisabled
}) => $isDisabled ? 'not-allowed' : 'pointer', ({
$size
}) => $size === 'small' ? '12px' : '8px');
const Label$1 = styled__default.default.span.withConfig({
displayName: "Switch__Label",
componentId: "sc-sdaahx-1"
})(({
theme
}) => styled.css(["", ";"], edsUtils.typographyTemplate(theme.typography)));
const Switch = /*#__PURE__*/react.forwardRef(function Switch({
size = 'default',
disabled,
label,
className,
style,
...rest
}, ref) {
const {
density
} = useEds();
// TODO Temporary workaround untill we can deprecate "size" property (controlled by EdsProvider in the future)
const overrideDensity = size === 'small' ? 'compact' : density;
const token = edsUtils.useToken({
density: overrideDensity
}, comfortable);
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: label ? /*#__PURE__*/jsxRuntime.jsxs(StyledLabel, {
$size: size,
$isDisabled: disabled,
className: className,
style: style,
children: [size === 'small' ? /*#__PURE__*/jsxRuntime.jsx(SwitchSmall, {
disabled: disabled,
...rest,
ref: ref
}) : /*#__PURE__*/jsxRuntime.jsx(SwitchDefault, {
disabled: disabled,
...rest,
ref: ref
}), label && /*#__PURE__*/jsxRuntime.jsx(Label$1, {
children: label
})]
}) : size === 'small' ? /*#__PURE__*/jsxRuntime.jsx(SwitchSmall, {
disabled: disabled,
className: className,
style: style,
...rest,
ref: ref
}) : /*#__PURE__*/jsxRuntime.jsx(SwitchDefault, {
disabled: disabled,
className: className,
style: style,
...rest,
ref: ref
})
});
});
Switch.displayName = 'Switch';
const {
typography,
colors,
shape: {
corners: {
borderRadius
}
},
spacings: {
comfortable: {
small: spacingSmall,
medium_small: spacingMediumSmall,
medium: spacingMedium,
large: spacingLarge,
x_large,
xxx_large
}
},
elevation: {
temporary_nav: boxShadow
}
} = edsTokens.tokens;
const selectTokens = {
background: colors.ui.background__default.rgba,
boxShadow,
spacings: {
top: '0',
right: spacingLarge,
bottom: '0',
left: spacingLarge
},
typography: {
...typography.navigation.menu_title,
color: colors.text.static_icons__default.rgba
},
border: {
type: 'border',
radius: borderRadius
},
states: {
hover: {
background: colors.ui.background__medium.rgba
},
active: {
background: colors.interactive.primary__selected_highlight.rgba
},
disabled: {
typography: {
color: colors.interactive.disabled__text.rgba
}
}
},
variants: {
error: {
typography: {
color: colors.interactive.danger__text.rgba
}
},
warning: {
typography: {
color: colors.interactive.warning__text.rgba
}
},
success: {
typography: {
color: colors.interactive.success__text.rgba
}
}
},
entities: {
button: {
height: '24px',
width: '24px',
spacings: {
left: spacingSmall,
right: spacingSmall,
top: '6px'
}
},
label: {
minHeight: xxx_large,
spacings: {
left: '0',
right: '0',
top: spacingMedium,
bottom: spacingMedium
}
},
noOptions: {
typography: {
color: colors.text.static_icons__tertiary.rgba
}
}
},
modes: {
compact: {
spacings: {
left: spacingSmall,
right: spacingSmall,
top: '0',
bottom: '0'
},
entities: {
button: {
spacings: {
left: spacingSmall,
right: spacingSmall,
top: '0'
}
},
label: {
minHeight: x_large,
spacings: {
left: '0',
right: '0',
top: spacingSmall,
bottom: spacingSmall
}
}
}
}
}
};
const multiSelect = mergeDeepRight(selectTokens, {
spacings: {
top: '0',
bottom: '0',
left: spacingMediumSmall,
right: spacingLarge
},
modes: {
compact: {
spacings: {
top: '0',
//xx_small,
bottom: '0'
}
}
}
});
const StyledListItem = styled__default.default.li.withConfig({
displayName: "Option__StyledListItem",
componentId: "sc-1ly11zu-0"
})(({
theme,
$highlighted,
$active,
$isdisabled
}) => {
const backgroundColor = $highlighted === 'true' ? theme.states.hover.background : $active === 'true' ? theme.states.active.background : theme.background;
return styled.css(["display:flex;grid-area:1 / -1;align-items:center;align-self:start;margin:0;list-style:none;background-color:", ";user-select:none;overflow:hidden;touch-action:manipulation;z-index:3;cursor:", ";", " ", " ", ""], backgroundColor, $highlighted === 'true' ? 'pointer' : 'default', edsUtils.typographyTemplate(theme.typography), edsUtils.spacingsTemplate(theme.spacings), $isdisabled === 'true' ? styled.css(["color:", ";"], theme.states.disabled.typography.color) : '');
});
const Label = styled__default.default.span.withConfig({
displayName: "Option__Label",
componentId: "sc-1ly11zu-1"
})(({
theme,
$multiline
}) => {
return styled.css(["", " text-overflow:ellipsis;white-space:", ";overflow:", ";overflow-wrap:anywhere;@supports (-moz-appearance:none){overflow:", ";}"], edsUtils.spacingsTemplate(theme.entities.label.spacings), $multiline ? 'normal' : 'nowrap', $multiline ? 'initial' : 'hidden', $multiline ? 'initial' : 'clip');
});
function AutocompleteOptionInner(props, ref) {
const {
value,
optionComponent,
multiple,
isSelected,
indeterminate,
isDisabled,
multiline,
highlighted,
onClick,
'aria-selected': ariaSelected,
...other
} = props;
return /*#__PURE__*/jsxRuntime.jsxs(StyledListItem, {
ref: ref,
$isdisabled: isDisabled ? 'true' : 'false',
$highlighted: highlighted,
"aria-hidden": isDisabled,
$active: !multiple && isSelected ? 'true' : 'false',
onClick: e => {
!isDisabled && onClick(e);
},
"aria-selected": multiple ? isSelected : ariaSelected,
...other,
children: [multiple && /*#__PURE__*/jsxRuntime.jsx(Checkbox, {
disabled: isDisabled,
checked: isSelected,
indeterminate: indeterminate,
value: value,
onChange: () => {
return null;
}
}), optionComponent ? /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
children: optionComponent
}) : /*#__PURE__*/jsxRuntime.jsx(Label, {
$multiline: multiline,
children: value
})]
});
}
const AutocompleteOption = /*#__PURE__*/react.forwardRef(AutocompleteOptionInner);
const Container$2 = styled__default.default.div.withConfig({
displayName: "Autocomplete__Container",
componentId: "sc-yvif0e-0"
})(["position:relative;"]);
const AllSymbol = Symbol('Select all');
// MARK: styled components
const StyledList = styled__default.default(List$1).withConfig({
displayName: "Autocomplete__StyledList",
componentId: "sc-yvif0e-1"
})(({
theme
}) => styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;overflow-x:hidden;padding:0;display:grid;@supports (-moz-appearance:none){scrollbar-width:thin;}"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border)));
const StyledPopover = styled__default.default('div').withConfig({
shouldForwardProp: () => true //workaround to avoid warning until popover gets added to react types
}).withConfig({
displayName: "Autocomplete__StyledPopover",
componentId: "sc-yvif0e-2"
})(["inset:unset;border:0;padding:0;margin:0;overflow:visible;&::backdrop{background-color:transparent;}"]);
const HelperText = styled__default.default(TextfieldHelperText).withConfig({
displayName: "Autocomplete__HelperText",
componentId: "sc-yvif0e-3"
})(["margin-top:8px;margin-left:8px;"]);
const AutocompleteNoOptions = styled__default.default(AutocompleteOption).withConfig({
displayName: "Autocomplete__AutocompleteNoOptions",
componentId: "sc-yvif0e-4"
})(({
theme
}) => styled.css(["color:", ";"], theme.entities.noOptions.typography.color));
const StyledButton$1 = styled__default.default(Button$1).withConfig({
displayName: "Autocomplete__StyledButton",
componentId: "sc-yvif0e-5"
})(({
theme: {
entities: {
button
}
}
}) => styled.css(["height:", ";width:", ";"], button.height, button.height));
// MARK: outside functions
// Typescript can struggle with parsing generic arrow functions in a .tsx file (see https://github.com/microsoft/TypeScript/issues/15713)
// Workaround is to add a trailing , after T, which tricks the compiler, but also have to ignore prettier rule.
// prettier-ignore
const findIndex = ({
calc,
index,
optionDisabled,
availableItems
}) => {
const nextItem = availableItems[index];
if (optionDisabled(nextItem) && index >= 0 && index < availableItems.length) {
const nextIndex = calc(index);
return findIndex({
calc,
index: nextIndex,
availableItems,
optionDisabled
});
}
return index;
};
const isEvent = (val, key) => /^on[A-Z](.*)/.test(key) && typeof val === 'function';
function mergeEventsFromRight(props1, props2) {
const events1 = pickBy(isEvent, props1);
const events2 = pickBy(isEvent, props2);
return mergeWith((event1, event2) => {
return (...args) => {
event1(...args);
event2(...args);
};
}, events1, events2);
}
const findNextIndex = ({
index,
optionDisabled,
availableItems,
allDisabled
}) => {
if (allDisabled) return 0;
const options = {
index,
optionDisabled,
availableItems,
calc: num => num + 1
};
const nextIndex = findIndex(options);
if (nextIndex > availableItems.length - 1) {
// jump to start of list
return findIndex({
...options,
index: 0
});
}
return nextIndex;
};
const findPrevIndex = ({
index,
optionDisabled,
availableItems,
allDisabled
}) => {
if (allDisabled) return 0;
const options = {
index,
optionDisabled,
availableItems,
calc: num => num - 1
};
const prevIndex = findIndex(options);
if (prevIndex < 0) {
// jump to end of list
return findIndex({
...options,
index: availableItems.length - 1
});
}
return prevIndex;
};
/*When a user clicks the StyledList scrollbar, the input looses focus which breaks downshift
* keyboard navigation in the list. This code returns focus to the input on mouseUp
*/
const handleListFocus = e => {
e.preventDefault();
e.stopPropagation();
window?.addEventListener('mouseup', () => {
e.relatedTarget?.focus();
}, {
once: true
});
};
const defaultOptionDisabled = () => false;
// MARK: types
// MARK: component
function AutocompleteInner(props, ref) {
const {
options = [],
label,
meta,
className,
style,
disabled = false,
readOnly = false,
loading = false,
hideClearButton = false,
onOptionsChange,
onInputChange,
selectedOptions: _selectedOptions,
multiple,
itemCompare,
allowSelectAll,
initialSelectedOptions: _initialSelectedOptions = [],
optionDisabled = defaultOptionDisabled,
optionsFilter,
autoWidth,
placeholder,
optionLabel,
clearSearchOnChange = true,
multiline = false,
dropdownHeight = 300,
optionComponent,
helperText,
helperIcon,
noOptionsText = 'No options',
variant,
onClear,
...other
} = props;
// MARK: initializing data/setup
const selectedOptions = _selectedOptions ? itemCompare ? options.filter(item => _selectedOptions.some(compare => itemCompare(item, compare))) : _selectedOptions : undefined;
const initialSelectedOptions = _initialSelectedOptions ? itemCompare ? options.filter(item => _initialSelectedOptions.some(compare => itemCompare(item, compare))) : _initialSelectedOptions : undefined;
const isControlled = Boolean(selectedOptions);
const [inputOptions, setInputOptions] = react.useState(options);
const [_availableItems, setAvailableItems] = react.useState(inputOptions);
const [typedInputValue, setTypedInputValue] = react.useState('');
const inputRef = react.useRef(null);
const showSelectAll = react.useMemo(() => {
if (!multiple && allowSelectAll) {
throw new Error(`allowSelectAll can only be used with multiple`);
}
return allowSelectAll && !typedInputValue;
}, [allowSelectAll, multiple, typedInputValue]);
const availableItems = react.useMemo(() => {
if (showSelectAll) return [AllSymbol, ..._availableItems];
return _availableItems;
}, [_availableItems, showSelectAll]);
//issue 2304, update dataset when options are added dynamically
react.useEffect(() => {
const availableHash = JSON.stringify(inputOptions);
const optionsHash = JSON.stringify(options);
if (availableHash !== optionsHash) {
setInputOptions(options);
}
}, [options, inputOptions]);
react.useEffect(() => {
setAvailableItems(inputOptions);
}, [inputOptions]);
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, multiple ? multiSelect : selectTokens);
const tokens = token();
let placeholderText = placeholder;
let multipleSelectionProps = {
initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : []
};
if (multiple) {
multipleSelectionProps = {
...multipleSelectionProps,
onSelectedItemsChange: changes => {
if (onOptionsChange) {
let selectedItems = changes.selectedItems.filter(item => item !== AllSymbol);
if (itemCompare) {
selectedItems = inputOptions.filter(item => selectedItems.some(compare => itemCompare(item, compare)));
}
onOptionsChange({
selectedItems
});
}
}
};
if (isControlled) {
multipleSelectionProps = {
...multipleSelectionProps,
selectedItems: selectedOptions
};
}
}
const {
getDropdownProps,
addSelectedItem,
removeSelectedItem,
selectedItems,
setSelectedItems
} = downshift.useMultipleSelection(multipleSelectionProps);
// MARK: select all logic
const enabledItems = react.useMemo(() => {
const disabledItemsSet = new Set(inputOptions.filter(optionDisabled));
return inputOptions.filter(x => !disabledItemsSet.has(x));
}, [inputOptions, optionDisabled]);
const allDisabled = enabledItems.length === 0;
const selectedDisabledItemsSet = react.useMemo(() => new Set(selectedItems.filter(x => x !== null && optionDisabled(x))), [selectedItems, optionDisabled]);
const selectedEnabledItems = react.useMemo(() => selectedItems.filter(x => !selectedDisabledItemsSet.has(x)), [selectedItems, selectedDisabledItemsSet]);
const allSelectedState = react.useMemo(() => {
if (!enabledItems || !selectedEnabledItems) return 'NONE';
if (enabledItems.length === selectedEnabledItems.length) return 'ALL';
if (enabledItems.length != selectedEnabledItems.length && selectedEnabledItems.length > 0) return 'SOME';
return 'NONE';
}, [enabledItems, selectedEnabledItems]);
const toggleAllSelected = () => {
if (selectedEnabledItems.length === enabledItems.length) {
setSelectedItems([...selectedDisabledItemsSet]);
} else {
setSelectedItems([...enabledItems, ...selectedDisabledItemsSet]);
}
};
// MARK: getLabel
const getLabel = react.useCallback(item => {
//note: non strict check for null or undefined to allow 0
if (item == null) {
return '';
}
if (typeof item === 'object') {
if (optionLabel) {
return optionLabel(item);
} else {
throw new Error('Missing label. When using objects for options make sure to define the `optionLabel` property');
}
}
if (typeof item === 'string') {
return item;
}
try {
// eslint-disable-next-line @typescript-eslint/no-base-to-string
return item?.toString();
} catch {
throw new Error('Unable to find label, make sure your are using options as documented');
}
}, [optionLabel]);
// MARK: setup virtualizer
const scrollContainer = react.useRef(null);
const rowVirtualizer = reactVirtual.useVirtualizer({
count: availableItems.length,
getScrollElement: () => scrollContainer.current,
estimateSize: react.useCallback(() => {
return parseInt(token().entities.label.minHeight);
}, [token]),
overscan: 25
});
//https://github.com/TanStack/virtual/discussions/379#discussioncomment-3501037
edsUtils.useIsomorphicLayoutEffect(() => {
rowVirtualizer?.measure?.();
}, [rowVirtualizer, density]);
// MARK: downshift state
let comboBoxProps = {
items: availableItems,
//can not pass readonly type to downshift so we cast it to regular T[]
initialSelectedItem: initialSelectedOptions[0],
isItemDisabled(item) {
return optionDisabled(item);
},
itemToString: getLabel,
onInputValueChange: ({
inputValue
}) => {
onInputChange && onInputChange(inputValue);
setAvailableItems(options.filter(item => {
if (optionsFilter) {
return optionsFilter(item, inputValue);
}
return getLabel(item).toLowerCase().includes(inputValue.toLowerCase());
}));
},
onHighlightedIndexChange({
highlightedIndex,
type
}) {
if (type == downshift.useCombobox.stateChangeTypes.InputClick || type == downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown && !isOpen || type == downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp && !isOpen) {
//needs delay for dropdown to render before calling scroll
setTimeout(() => {
rowVirtualizer.scrollToIndex(highlightedIndex, {
align: allowSelectAll ? 'center' : 'auto'
});
}, 1);
} else if (type !== downshift.useCombobox.stateChangeTypes.ItemMouseMove && type !== downshift.useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex >= 0) {
rowVirtualizer.scrollToIndex(highlightedIndex, {
align: allowSelectAll ? 'center' : 'auto'
});
}
},
onIsOpenChange: ({
selectedItem
}) => {
if (!multiple && selectedItem !== null) {
setAvailableItems(options);
}
},
onStateChange: ({
type,
selectedItem
}) => {
switch (type) {
case downshift.useCombobox.stateChangeTypes.InputChange:
case downshift.useCombobox.stateChangeTypes.InputBlur:
break;
case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
case downshift.useCombobox.stateChangeTypes.ItemClick:
//note: non strict check for null or undefined to allow 0
if (selectedItem != null && !optionDisabled(selectedItem)) {
if (selectedItem === AllSymbol) {
toggleAllSelected();
} else if (multiple) {
const shouldRemove = itemCompare ? selectedItems.some(i => itemCompare(selectedItem, i)) : selectedItems.includes(selectedItem);
if (shouldRemove) {
removeSelectedItem(selectedItem);
} else {
addSelectedItem(selectedItem);
}
} else {
setSelectedItems([selectedItem]);
}
}
break;
}
}
};
// MARK: singleselect specific
if (!multiple) {
comboBoxProps = {
...comboBoxProps,
onSelectedItemChange: changes => {
if (onOptionsChange) {
let {
selectedItem
} = changes;
if (itemCompare) {
selectedItem = inputOptions.find(item => itemCompare(item, selectedItem));
}
onOptionsChange({
selectedItems: selectedItem ? [selectedItem] : []
});
}
},
stateReducer: (_, actionAndChanges) => {
const {
changes,
type
} = actionAndChanges;
switch (type) {
case downshift.useCombobox.stateChangeTypes.InputClick:
return {
...changes,
isOpen: !(disabled || readOnly)
};
case downshift.useCombobox.stateChangeTypes.InputBlur:
return {
...changes,
inputValue: changes.selectedItem ? getLabel(changes.selectedItem) : ''
};
case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown:
case downshift.useCombobox.stateChangeTypes.InputKeyDownHome:
if (readOnly) {
return {
...changes,
isOpen: false
};
}
return {
...changes,
highlightedIndex: findNextIndex({
index: changes.highlightedIndex,
availableItems,
optionDisabled,
allDisabled
})
};
case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp:
case downshift.useCombobox.stateChangeTypes.InputKeyDownEnd:
if (readOnly) {
return {
...changes,
isOpen: false
};
}
return {
...changes,
highlightedIndex: findPrevIndex({
index: changes.highlightedIndex,
availableItems,
optionDisabled,
allDisabled
})
};
case downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
setSelectedItems([changes.selectedItem]);
return {
...changes
};
default:
return changes;
}
}
};
if (isControlled) {
comboBoxProps = {
...comboBoxProps,
selectedItem: selectedOptions[0] || null
};
}
}
// MARK: multiselect specific
if (multiple) {
placeholderText = typeof placeholderText !== 'undefined' ? placeholderText : `${selectedItems.length}/${inputOptions.length} selected`;
comboBoxProps = {
...comboBoxProps,
selectedItem: null,
stateReducer: (state, actionAndChanges) => {
const {
changes,
type
} = actionAndChanges;
switch (type) {
case downshift.useCombobox.stateChangeTypes.InputClick:
return {
...changes,
isOpen: !(disabled || readOnly)
};
case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowDown:
case downshift.useCombobox.stateChangeTypes.InputKeyDownHome:
if (readOnly) {
return {
...changes,
isOpen: false
};
}
return {
...changes,
highlightedIndex: findNextIndex({
index: changes.highlightedIndex,
availableItems,
optionDisabled,
allDisabled
})
};
case downshift.useCombobox.stateChangeTypes.InputKeyDownArrowUp:
case downshift.useCombobox.stateChangeTypes.InputKeyDownEnd:
if (readOnly) {
return {
...changes,
isOpen: false
};
}
return {
...changes,
highlightedIndex: findPrevIndex({
index: changes.highlightedIndex,
availableItems,
optionDisabled,
allDisabled
})
};
case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
case downshift.useCombobox.stateChangeTypes.ItemClick:
if (clearSearchOnChange) {
setTypedInputValue('');
}
return {
...changes,
isOpen: true,
// keep menu open after selection.
highlightedIndex: state.highlightedIndex,
inputValue: !clearSearchOnChange ? typedInputValue : ''
};
case downshift.useCombobox.stateChangeTypes.InputChange:
setTypedInputValue(changes.inputValue);
return {
...changes
};
case downshift.useCombobox.stateChangeTypes.InputBlur:
setTypedInputValue('');
return {
...changes,
inputValue: ''
};
case downshift.useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem:
return {
...changes,
inputValue: !clearSearchOnChange ? typedInputValue : changes.inputValue
};
default:
return changes;
}
}
};
}
const {
isOpen,
getToggleButtonProps,
getLabelProps,
getMenuProps,
getInputProps,
highlightedIndex,
getItemProps,
inputValue,
reset: resetCombobox
} = downshift.useCombobox(comboBoxProps);
// MARK: floating-ui setup
const {
x,
y,
refs,
update,
strategy
} = react$1.useFloating({
placement: 'bottom-start',
middleware: [react$1.offset(4), react$1.flip({
boundary: typeof document === 'undefined' ? undefined : document?.body
}), react$1.size({
apply({
rects,
elements
}) {
const anchorWidth = `${rects.reference.width}px`;
Object.assign(elements.floating.style, {
width: `${autoWidth ? anchorWidth : 'auto'}`
});
},
padding: 10
})]
});
const {
getFloatingProps
} = react$1.useInteractions([]);
react.useEffect(() => {
if (refs.reference.current && refs.floating.current && isOpen) {
return react$1.autoUpdate(refs.reference.current, refs.floating.current, update);
}
}, [refs.reference, refs.floating, update, isOpen]);
// MARK: popover toggle
edsUtils.useIsomorphicLayoutEffect(() => {
if (isOpen) {
refs.floating.current?.showPopover();
} else {
refs.floating.current?.hidePopover();
}
}, [isOpen, refs.floating]);
const clear = () => {
if (onClear) onClear();
resetCombobox();
//dont clear items if they are selected and disabled
setSelectedItems([...selectedDisabledItemsSet]);
setTypedInputValue('');
inputRef.current?.focus();
};
const showClearButton = (selectedItems.length > 0 || inputValue) && !readOnly && !hideClearButton;
const showNoOptions = isOpen && !availableItems.length && noOptionsText.length > 0;
const selectedItemsLabels = react.useMemo(() => selectedItems.map(getLabel), [selectedItems, getLabel]);
// MARK: optionsList
const optionsList = /*#__PURE__*/jsxRuntime.jsx(StyledPopover, {
popover: "manual",
...getFloatingProps({
ref: refs.setFloating,
onFocus: handleListFocus,
style: {
position: strategy,
top: y || 0,
left: x || 0
}
}),
children: /*#__PURE__*/jsxRuntime.jsxs(StyledList, {
...getMenuProps({
'aria-multiselectable': multiple ? 'true' : null,
ref: scrollContainer,
style: {
maxHeight: `${dropdownHeight}px`
}
}, {
suppressRefError: true
}),
children: [showNoOptions && /*#__PURE__*/jsxRuntime.jsx(AutocompleteNoOptions, {
value: noOptionsText,
multiple: false,
multiline: false,
highlighted: 'false',
isSelected: false,
isDisabled: true
}), isOpen && /*#__PURE__*/jsxRuntime.jsx("li", {
role: "presentation",
style: {
height: `${rowVirtualizer.getTotalSize()}px`,
margin: '0',
gridArea: '1 / -1'
}
}, "total-size"), !isOpen ? null : rowVirtualizer.getVirtualItems().map(virtualItem => {
const index = virtualItem.index;
const item = availableItems[index];
const label = getLabel(item);
const isDisabled = optionDisabled(item);
const isSelected = selectedItemsLabels.includes(label);
if (item === AllSymbol) {
return /*#__PURE__*/jsxRuntime.jsx(AutocompleteOption, {
"data-index": 0,
"data-testid": 'select-all',
value: 'Select all',
"aria-setsize": availableItems.length,
multiple: true,
isSelected: allSelectedState === 'ALL',
indeterminate: allSelectedState === 'SOME',
highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
isDisabled: false,
multiline: multiline,
onClick: toggleAllSelected,
style: {
position: 'sticky',
top: 0,
zIndex: 99
},
...getItemProps({
...(multiline && {
ref: rowVirtualizer.measureElement
}),
item,
index: index
})
}, 'select-all');
}
return /*#__PURE__*/jsxRuntime.jsx(AutocompleteOption, {
"data-index": index,
"aria-setsize": availableItems.length,
"aria-posinset": index + 1,
value: label,
multiple: multiple,
highlighted: highlightedIndex === index && !isDisabled ? 'true' : 'false',
isSelected: isSelected,
isDisabled: isDisabled,
multiline: multiline,
optionComponent: optionComponent?.(item, isSelected),
...getItemProps({
...(multiline && {
ref: rowVirtualizer.measureElement
}),
item,
index,
style: {
transform: `translateY(${virtualItem.start}px)`,
...(!multiline && {
height: `${virtualItem.size}px`
})
}
})
}, virtualItem.key);
})]
})
});
const inputProps = getInputProps(getDropdownProps({
preventKeyAction: multiple ? isOpen : undefined,
disabled,
ref: inputRef
}));
const consolidatedEvents = mergeEventsFromRight(other, inputProps);
// MARK: input
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsxs(Container$2, {
className: className,
style: style,
ref: ref,
children: [/*#__PURE__*/jsxRuntime.jsx(Label$3, {
...getLabelProps(),
label: label,
meta: meta,
disabled: disabled
}), /*#__PURE__*/jsxRuntime.jsx(Container$2, {
ref: refs.setReference,
children: /*#__PURE__*/jsxRuntime.jsx(Input$4, {
...inputProps,
variant: variant,
placeholder: placeholderText,
readOnly: readOnly,
rightAdornmentsWidth: hideClearButton ? 24 + 8 : 24 * 2 + 8,
rightAdornments: /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [loading && /*#__PURE__*/jsxRuntime.jsx(Progress.Circular, {
size: 16
}), showClearButton && /*#__PURE__*/jsxRuntime.jsx(StyledButton$1, {
variant: "ghost_icon",
disabled: disabled || readOnly,
"aria-label": 'clear options',
title: "clear",
onClick: clear,
children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: edsIcons.close,
size: 16
})
}), !readOnly && /*#__PURE__*/jsxRuntime.jsx(StyledButton$1, {
variant: "ghost_icon",
...getToggleButtonProps({
disabled: disabled || readOnly
}),
"aria-label": 'toggle options',
title: "open",
children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: isOpen ? edsIcons.arrow_drop_up : edsIcons.arrow_drop_down
})
})]
}),
...other,
...consolidatedEvents
})
}), helperText && /*#__PURE__*/jsxRuntime.jsx(HelperText, {
color: variant ? tokens.variants[variant].typography.color : undefined,
text: helperText,
icon: helperIcon
}), optionsList]
})
});
}
// MARK: exported component
const Autocomplete = /*#__PURE__*/react.forwardRef(AutocompleteInner);
const {
colors: {
ui: {
background__light: {
rgba: background__light
},
background__medium: {
rgba: background__medium
},
background__default: {
rgba: background
}
},
interactive: {
focus: {
rgba: focusColor
},
primary__resting: {
rgba: primary__resting
},
primary__selected_highlight: {
rgba: menuActive
},
disabled__fill: {
rgba: menuDisabledBackground$1
},
disabled__text: {
rgba: menuDisabledText$1
}
},
text: {
static_icons__default: {
rgba: expandTextColor
},
static_icons__primary_white: {
rgba: primaryWhite$1
}
}
},
spacings: {
comfortable: {
medium,
large,
small
}
}
} = edsTokens.tokens;
const sidebar = {
background,
minWidth: '72px',
maxWidth: '256px',
spacings: {
top: large,
bottom: large
},
border: {
type: 'bordergroup',
right: {
color: background__light,
width: '2px',
style: 'solid'
}
},
entities: {
actionButton: {
typography: {
color: primaryWhite$1
},
spacings: {
top: medium,
bottom: medium,
right: large,
left: large
}
},
sidebarItem: {
minHeight: '48px',
spacings: {
top: '0',
bottom: '0'
},
typography: {
color: expandTextColor
},
border: {
type: 'bordergroup',
bottom: {
color: background__light,
width: '2px',
style: 'solid'
}
},
states: {
active: {
background: menuActive,
typography: {
color: primary__resting
}
},
hover: {
background: background__medium
},
focus: {
outline: {
color: focusColor,
style: 'dashed',
type: 'outline',
width: '2px',
offset: '-2px'
}
},
disabled: {
background: menuDisabledBackground$1,
typography: {
color: menuDisabledText$1
}
}
}
},
toggleOpen: {
spacings: {
top: small,
bottom: small
},
typography: {
color: expandTextColor
}
}
},
modes: {
compact: {
entities: {}
}
}
};
const initalState = {
isOpen: false,
onToggle: null
};
const SideBarContext = /*#__PURE__*/react.createContext(initalState);
const SideBarProvider = ({
children,
isOpen: isOpenProp = false
}) => {
const [state, setState] = react.useState({
onToggle: null,
isOpen: isOpenProp
});
const {
isOpen,
onToggle
} = state;
const setIsOpen = react.useCallback(open => {
setState(prevState => ({
...prevState,
isOpen: open
}));
onToggle?.(open);
}, [onToggle]);
const setOnToggle = onToggle => {
setState(prevState => ({
...prevState,
onToggle
}));
};
const value = {
setIsOpen,
setOnToggle,
onToggle,
isOpen
};
return /*#__PURE__*/jsxRuntime.jsx(SideBarContext.Provider, {
value: value,
children: children
});
};
const useSideBar = () => react.useContext(SideBarContext);
const SideBarContainer = /*#__PURE__*/react.forwardRef(function SideBarContainer({
onToggle: onToggleCallback,
children,
...rest
}, ref) {
const {
isOpen,
onToggle,
setOnToggle
} = useSideBar();
react.useEffect(() => {
if (onToggle === null && onToggleCallback) {
setOnToggle(onToggleCallback);
}
}, [onToggle, onToggleCallback, setOnToggle]);
return /*#__PURE__*/jsxRuntime.jsx(GridContainer, {
...rest,
open: isOpen,
ref: ref,
children: children
});
});
const GridContainer = styled__default.default.div.withConfig({
displayName: "SideBar__GridContainer",
componentId: "sc-a84pkc-0"
})(({
theme,
open
}) => {
return styled.css(["box-sizing:content-box;", " display:grid;grid-template-rows:1fr auto;height:100%;grid-template-areas:'content' 'footer';background-color:", ";overflow:auto;width:", ";min-width:", ";", ""], edsUtils.bordersTemplate(theme.border), theme.background, open ? theme.maxWidth : theme.minWidth, open ? theme.maxWidth : theme.minWidth, !open && styled.css(["scrollbar-width:none;&::-webkit-scrollbar{display:none;}"]));
});
const SideBar$1 = /*#__PURE__*/react.forwardRef(({
onToggle,
open = false,
children,
...rest
}, ref) => {
const {
density
} = useEds();
const token = edsUtils.useToken({
density
}, sidebar);
const props = {
onToggle,
open,
children,
...rest
};
return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
theme: token,
children: /*#__PURE__*/jsxRuntime.jsx(SideBarProvider, {
isOpen: open,
children: /*#__PURE__*/jsxRuntime.jsx(SideBarContainer, {
...props,
ref: ref
})
})
});
});
SideBar$1.displayName = 'SideBar';
const {
entities: {
sidebarItem: {
typography: {
color: itemTextColor
},
states: {
active: {
typography: {
color: iconActive
}
}
}
}
}
} = sidebar;
const Container$1 = styled__default.default.a.withConfig({
displayName: "SidebarLink__Container",
componentId: "sc-gbehcj-0"
})(({
theme,
$active
}) => {
const {
minWidth,
entities: {
sidebarItem: {
minHeight,
border,
states: {
active: {
background: menuActiveBackground
},
hover: {
background: menuHoverBackground
},
focus,
disabled: {
background: menuDisabledBackground,
typography: {
color: menuDisabledText
}
}
}
}
}
} = theme;
return styled.css(["background-color:", ";display:grid;grid-template-columns:", " 1fr;width:100%;padding:0;place-items:center;border:0;", " text-decoration:none;min-height:", ";&:hover{cursor:pointer;background-color:", ";}&:disabled{background-color:", ";color:", ";cursor:not-allowed;& > p{color:", ";}& > svg{fill:", ";}}&:focus-visible{", ";}"], $active ? menuActiveBackground : 'transparent', minWidth, edsUtils.bordersTemplate(border), minHeight, $active ? menuActiveBackground : menuHoverBackground, menuDisabledBackground, menuDisabledText, menuDisabledText, menuDisabledText, edsUtils.outlineTemplate(focus.outline));
});
const ItemText$1 = styled__default.default(Typography).withConfig({
displayName: "SidebarLink__ItemText",
componentId: "sc-gbehcj-1"
})(({
theme,
$active
}) => {
const {
entities: {
sidebarItem: {
typography: {
color: itemTextColor
},
states: {
active: {
typography: {
color: itemActiveTextColor
}
}
}
}
}
} = theme;
return styled.css(["justify-self:start;color:", ";&::first-letter{text-transform:capitalize;}"], $active ? itemActiveTextColor : itemTextColor);
});
const Tooltip$1 = styled__default.default(Tooltip$2).withConfig({
displayName: "SidebarLink__Tooltip",
componentId: "sc-gbehcj-2"
})(["text-transform:capitalize;"]);
const SidebarLink = /*#__PURE__*/react.forwardRef(function SidebarLink({
icon,
label,
active,
onClick,
as = 'a',
...rest
}, ref) {
const {
isOpen
} = useSideBar();
const getIconColor = () => {
return active ? iconActive : itemTextColor;
};
if (isOpen) {
return /*#__PURE__*/jsxRuntime.jsxs(Container$1, {
as: as,
tabIndex: 0,
$active: active,
onClick: onClick,
ref: ref,
...rest,
children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: icon,
color: getIconColor()
}), /*#__PURE__*/jsxRuntime.jsx(ItemText$1, {
variant: "cell_text",
group: "table",
$active: active,
children: label
})]
});
}
return /*#__PURE__*/jsxRuntime.jsx(Tooltip$1, {
title: label,
placement: "right",
children: /*#__PURE__*/jsxRuntime.jsx(Container$1, {
tabIndex: 0,
as: as,
$active: active,
onClick: onClick,
ref: ref,
...rest,
children: icon && /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: icon,
color: getIconColor()
})
})
});
});
SidebarLink.displayName = 'SidebarLink';
const StyledSideBarContent = styled__default.default.div.withConfig({
displayName: "SideBarContent__StyledSideBarContent",
componentId: "sc-kq9ra8-0"
})(() => {
return styled.css(["grid-area:content;"]);
});
const SideBarContent = /*#__PURE__*/react.forwardRef(function SideBarContent({
children,
...rest
}, ref) {
const props = {
ref,
...rest
};
return /*#__PURE__*/jsxRuntime.jsx(StyledSideBarContent, {
...props,
children: children
});
});
const StyledSideBarFooter = styled__default.default.div.withConfig({
displayName: "SideBarFooter__StyledSideBarFooter",
componentId: "sc-1hsu72u-0"
})(() => {
return styled.css(["grid-area:footer;"]);
});
const SideBarFooter = /*#__PURE__*/react.forwardRef(function SideBarFooter({
children,
...rest
}, ref) {
const props = {
ref,
...rest
};
return /*#__PURE__*/jsxRuntime.jsx(StyledSideBarFooter, {
...props,
children: children
});
});
const {
entities: {
toggleOpen: {
typography: {
color: iconColor
}
}
}
} = sidebar;
const ToggleContainer = styled__default.default.div.withConfig({
displayName: "SideBarToggle__ToggleContainer",
componentId: "sc-1w5e44y-0"
})(({
theme
}) => {
const {
minWidth,
entities: {
toggleOpen: {
spacings: {
top,
bottom
}
}
}
} = theme;
return styled.css(["width:", ";display:grid;place-items:center;margin-block-start:", ";margin-block-end:", ";"], minWidth, top, bottom);
});
const SideBarToggle = /*#__PURE__*/react.forwardRef(function SideBarToggle({
...rest
}, ref) {
const props = {
...rest,
ref
};
const {
isOpen,
setIsOpen
} = useSideBar();
return /*#__PURE__*/jsxRuntime.jsx(ToggleContainer, {
open: isOpen,
...props,
children: /*#__PURE__*/jsxRuntime.jsx(Tooltip$2, {
title: isOpen ? 'Collapse' : 'Expand',
placement: "right",
children: /*#__PURE__*/jsxRuntime.jsx(Button$1, {
variant: "ghost_icon",
onClick: () => setIsOpen(!isOpen),
"aria-label": isOpen ? 'Collapse' : 'Expand',
children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
size: 24,
data: isOpen ? edsIcons.collapse : edsIcons.expand,
color: iconColor
})
})
})
});
});
const {
entities: {
actionButton: {
typography: {
color: primaryWhite
}
}
}
} = sidebar;
const MenuButtonContainer = styled__default.default.div.withConfig({
displayName: "SideBarButton__MenuButtonContainer",
componentId: "sc-15xlkyo-0"
})(({
open,
theme
}) => {
const {
entities: {
actionButton: {
spacings: {
right,
left,
top,
bottom
}
}
}
} = theme;
return styled.css(["display:", ";grid-template-columns:", " 1fr ", ";justify-content:center;align-items:center;margin-block-start:", ";margin-block-end:", ";box-sizing:border-box;"], open ? 'grid' : 'flex', left, right, top, bottom);
});
const ExtendedButton = styled__default.default(Button$1).withConfig({
displayName: "SideBarButton__ExtendedButton",
componentId: "sc-15xlkyo-1"
})(() => {
return styled.css(["height:40px;grid-column:2;width:fit-content;"]);
});
const SideBarButton = /*#__PURE__*/react.forwardRef(function SideBarToggle({
label,
icon,
style,
className,
...rest
}, ref) {
const props = {
...rest,
ref
};
const styleProps = {
style,
className
};
const {
isOpen
} = useSideBar();
if (isOpen) {
return /*#__PURE__*/jsxRuntime.jsx(MenuButtonContainer, {
open: isOpen,
...styleProps,
children: /*#__PURE__*/jsxRuntime.jsxs(ExtendedButton, {
open: true,
variant: "contained",
...props,
children: [/*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: icon,
color: primaryWhite
}), " ", label]
})
});
}
return /*#__PURE__*/jsxRuntime.jsx(Tooltip$2, {
title: label,
placement: "right",
children: /*#__PURE__*/jsxRuntime.jsx(MenuButtonContainer, {
open: isOpen,
...styleProps,
children: /*#__PURE__*/jsxRuntime.jsx(Button$1, {
variant: "contained_icon",
...props,
children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: icon,
color: primaryWhite
})
})
})
});
});
const {
minWidth: minWidth$1,
entities: {
sidebarItem: {
minHeight: minHeight$1,
border,
typography: {
color: typographyColor$1
},
states: {
active: {
background: menuActiveBackground$1,
typography: {
color: typographyActiveColor$1
}
},
hover: {
background: menuHoverBackground$1
},
focus: focus$1,
disabled: {
background: menuDisabledBackground,
typography: {
color: menuDisabledText
}
}
}
}
}
} = sidebar;
const MenuItem = styled__default.default.div.withConfig({
displayName: "SideBarAccordion__MenuItem",
componentId: "sc-1ekwnbi-0"
})(({
$isExpanded
}) => {
return styled.css(["display:grid;grid-template-columns:1fr;place-items:center;text-decoration:none;min-height:", ";", ";&:hover{cursor:pointer;background-color:", ";}&:focus-visible{", ";}"], minHeight$1, !$isExpanded && edsUtils.bordersTemplate(border), !$isExpanded ? menuHoverBackground$1 : 'none', edsUtils.outlineTemplate(focus$1.outline));
});
const AccordionHeader = styled__default.default.h2.withConfig({
displayName: "SideBarAccordion__AccordionHeader",
componentId: "sc-1ekwnbi-1"
})(({
$active
}) => {
return styled.css(["margin:0;width:100%;min-height:", ";background-color:", ";&:hover{cursor:pointer;background-color:", ";}"], minHeight$1, $active ? menuActiveBackground$1 : 'none', $active ? menuActiveBackground$1 : menuHoverBackground$1);
});
const Button = styled__default.default.button.withConfig({
displayName: "SideBarAccordion__Button",
componentId: "sc-1ekwnbi-2"
})(({
$active
}) => {
return styled.css(["width:100%;min-height:", ";padding:0;border:none;background-color:", ";cursor:pointer;display:grid;place-items:center;&:focus-visible{", ";}&:disabled{background-color:", ";cursor:auto;}"], minHeight$1, $active ? menuActiveBackground$1 : 'transparent', edsUtils.outlineTemplate(focus$1.outline), menuDisabledBackground);
});
const OpenSidebarButton = styled__default.default(Button).withConfig({
displayName: "SideBarAccordion__OpenSidebarButton",
componentId: "sc-1ekwnbi-3"
})(["grid-template-columns:", " 1fr 48px;"], minWidth$1);
const ClosedSidebarButton = styled__default.default(Button).withConfig({
displayName: "SideBarAccordion__ClosedSidebarButton",
componentId: "sc-1ekwnbi-4"
})(["grid-template-columns:", ";position:relative;overflow:hidden;"], minWidth$1);
const AccordionIcon = styled__default.default(Icon$1).withConfig({
displayName: "SideBarAccordion__AccordionIcon",
componentId: "sc-1ekwnbi-5"
})(["position:absolute;bottom:-10px;right:-10px;transform:rotate(-45deg);"]);
const Panel = styled__default.default.div.withConfig({
displayName: "SideBarAccordion__Panel",
componentId: "sc-1ekwnbi-6"
})(["width:100%;", ""], edsUtils.bordersTemplate(border));
const ItemText = styled__default.default(Typography).withConfig({
displayName: "SideBarAccordion__ItemText",
componentId: "sc-1ekwnbi-7"
})(({
$textColor
}) => {
return styled.css(["justify-self:start;color:", ";&::first-letter{text-transform:capitalize;}"], $textColor);
});
const Tooltip = styled__default.default(Tooltip$2).withConfig({
displayName: "SideBarAccordion__Tooltip",
componentId: "sc-1ekwnbi-8"
})(["text-transform:capitalize;"]);
const SideBarAccordion = /*#__PURE__*/react.forwardRef(function SideBarAccordion({
icon,
label,
isExpanded,
id,
active,
toggleExpand,
onClick,
children,
disabled,
...rest
}, ref) {
const accordionId = edsUtils.useId(id, 'accordion');
const [menuIsOpen, setMenuIsOpen] = react.useState(false);
const [accordionIsOpen, setAccordionIsOpen] = react.useState(isExpanded);
const [anchorEl, setAnchorEl] = react.useState(null);
const {
isOpen
} = useSideBar();
const showPanel = toggleExpand !== undefined ? isExpanded : accordionIsOpen;
const showAsActive = react.useMemo(() => {
// Active-state is controlled
if (active !== undefined) {
return active;
}
let hasActiveChild = false;
react.Children.forEach(children, child => {
const item = child;
if (item.props.active) {
hasActiveChild = true;
}
});
// When Sidebar is expanded, we only show accordion header as active if the accordion is closed, to avoid showing two active items at the same time.
return isOpen ? !showPanel && hasActiveChild : hasActiveChild;
}, [active, children, showPanel, isOpen]);
const combinedRefs = react.useMemo(() => edsUtils.mergeRefs(setAnchorEl, ref), [ref]);
const closeMenu = () => {
setMenuIsOpen(false);
};
const onClickWhenSidePanelExpanded = () => {
if (toggleExpand === undefined) {
setAccordionIsOpen(!accordionIsOpen);
} else {
toggleExpand();
}
onClick && onClick();
};
const onClickWhenSidePanelClosed = () => {
setMenuIsOpen(!menuIsOpen);
onClick && onClick();
};
const getTextColor = () => {
if (showAsActive) {
return typographyActiveColor$1;
} else if (disabled) {
return menuDisabledText;
}
return typographyColor$1;
};
if (isOpen) {
return /*#__PURE__*/jsxRuntime.jsxs(MenuItem, {
$isExpanded: showPanel,
children: [/*#__PURE__*/jsxRuntime.jsx(AccordionHeader, {
$active: showAsActive,
children: /*#__PURE__*/jsxRuntime.jsxs(OpenSidebarButton, {
ref: ref,
id: `header_${accordionId}`,
"aria-expanded": showPanel,
"aria-controls": `panel_${accordionId}`,
onClick: onClickWhenSidePanelExpanded,
disabled: disabled,
...rest,
children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: icon,
color: getTextColor()
}), /*#__PURE__*/jsxRuntime.jsx(ItemText, {
variant: "cell_text",
group: "table",
$textColor: getTextColor(),
children: label
}), /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: showPanel ? edsIcons.chevron_up : edsIcons.chevron_down,
size: 24,
color: getTextColor()
})]
})
}), showPanel && /*#__PURE__*/jsxRuntime.jsx(Panel, {
id: `panel_${accordionId}`,
role: "region",
"aria-labelledby": `header_${accordionId}`,
children: children
})]
});
}
const tooltip = menuIsOpen ? '' : label;
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [/*#__PURE__*/jsxRuntime.jsx(Tooltip, {
title: tooltip,
placement: "right",
children: /*#__PURE__*/jsxRuntime.jsx(MenuItem, {
$isExpanded: showPanel,
children: /*#__PURE__*/jsxRuntime.jsx(AccordionHeader, {
$active: showAsActive,
children: /*#__PURE__*/jsxRuntime.jsxs(ClosedSidebarButton, {
ref: combinedRefs,
id: "anchor-default",
"aria-haspopup": "true",
"aria-expanded": menuIsOpen,
"aria-controls": "menu-default",
onClick: onClickWhenSidePanelClosed,
disabled: disabled,
...rest,
children: [icon && /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: icon,
color: getTextColor()
}), /*#__PURE__*/jsxRuntime.jsx(AccordionIcon, {
data: edsIcons.arrow_drop_down,
size: 24,
color: getTextColor()
})]
})
})
})
}), /*#__PURE__*/jsxRuntime.jsx(Menu, {
open: menuIsOpen,
placement: 'right-start',
onClose: closeMenu,
anchorEl: anchorEl,
children: react.Children.map(children, child => {
const item = child;
return /*#__PURE__*/jsxRuntime.jsx(Menu.Item, {
...child.props,
children: item.props.label
});
})
})]
});
});
SideBarAccordion.displayName = 'SidebarAccordion';
const {
minWidth,
entities: {
sidebarItem: {
minHeight,
typography: {
color: typographyColor
},
states: {
active: {
background: menuActiveBackground,
typography: {
color: typographyActiveColor
}
},
focus,
hover: {
background: menuHoverBackground
}
}
}
}
} = sidebar;
const Container = styled__default.default.a.withConfig({
displayName: "SideBarAccordionItem__Container",
componentId: "sc-1aeo1e1-0"
})(({
$active
}) => {
return styled.css(["display:grid;grid-template-columns:", " 1fr;justify-items:stretch;background-color:", ";cursor:pointer;text-decoration:none;border:0;width:100%;padding:0;&:hover{background-color:", ";}&:focus-visible{", ";}"], minWidth, $active ? menuActiveBackground : 'transparent', $active ? menuActiveBackground : menuHoverBackground, edsUtils.outlineTemplate(focus.outline));
});
const TextWrapper = styled__default.default.div.withConfig({
displayName: "SideBarAccordionItem__TextWrapper",
componentId: "sc-1aeo1e1-1"
})(["min-height:", ";grid-column:2;justify-self:start;display:flex;align-items:center;width:100%;"], minHeight);
const Text = styled__default.default(Typography).withConfig({
displayName: "SideBarAccordionItem__Text",
componentId: "sc-1aeo1e1-2"
})(({
$active
}) => {
return styled.css(["color:", ";width:100%;&::first-letter{text-transform:capitalize;}"], $active ? typographyActiveColor : typographyColor);
});
const SideBarAccordionItem = /*#__PURE__*/react.forwardRef(function SidebarLink({
label,
active,
onClick,
as = 'a',
...rest
}, ref) {
const {
isOpen
} = useSideBar();
if (isOpen) {
return /*#__PURE__*/jsxRuntime.jsx(Container, {
as: as,
tabIndex: 0,
$active: active,
onClick: onClick,
ref: ref,
...rest,
children: /*#__PURE__*/jsxRuntime.jsx(TextWrapper, {
children: /*#__PURE__*/jsxRuntime.jsx(Text, {
variant: "cell_text",
group: "table",
$active: active,
children: label
})
})
});
}
return null;
});
SideBarAccordionItem.displayName = 'SideBarAccordionItem';
const SideBar = SideBar$1;
SideBar.Link = SidebarLink;
SideBar.Content = SideBarContent;
SideBar.Footer = SideBarFooter;
SideBar.Toggle = SideBarToggle;
SideBar.Button = SideBarButton;
SideBar.Accordion = SideBarAccordion;
SideBar.AccordionItem = SideBarAccordionItem;
SideBar.Link.displayName = 'SideBar.Link';
SideBar.Content.displayName = 'SideBar.Content';
SideBar.Footer.displayName = 'SideBar.Footer';
SideBar.Toggle.displayName = 'SideBar.Toggle';
SideBar.Button.displayName = 'SideBar.Button';
SideBar.Accordion.displayName = 'SideBar.Accordion';
SideBar.AccordionItem.displayName = 'SideBar.AccordionItem';
const StyledCell = styled__default.default(Typography).withConfig({
displayName: "CalendarCell__StyledCell",
componentId: "sc-y5ycmg-0"
})(["display:flex;justify-content:center;align-items:center;cursor:pointer;&:hover{background-color:", ";}", " ", " ", " ", " ", " ", " ", ""], edsTokens.tokens.colors.interactive.table__cell__fill_hover.rgba, ({
$focused
}) => $focused && `outline: 2px dashed rgba(0, 112, 121, 1);`, ({
$selected
}) => $selected && `background-color: ${edsTokens.tokens.colors.interactive.primary__selected_highlight.rgba};`, ({
$hidden
}) => $hidden && `visibility: hidden;`, ({
$highlight
}) => {
switch ($highlight) {
case 'SINGLE':
case 'NONE':
case 'BOTH':
return 'border-radius: 50%;';
case 'END':
return 'border-radius: 0% 50% 50% 0;';
case 'START':
return 'border-radius: 50% 0% 0% 50%;';
case 'RANGE':
return '';
}
}, ({
$disabled
}) => $disabled && `
color: ${edsTokens.tokens.colors.interactive.disabled__text.rgba};
&:hover {
background-color: transparent;
cursor: not-allowed;
}
`, ({
$selected,
$disabled
}) => {
if ($selected && $disabled) {
return `background-color: ${edsTokens.tokens.colors.interactive.warning__highlight.rgba};
&:hover {
background-color: ${edsTokens.tokens.colors.interactive.warning__highlight.rgba};
}`;
}
}, ({
$density
}) => {
switch ($density) {
case 'compact':
return `
height: 32px;
width: 32px;
padding: 2px;
`;
case 'comfortable':
return `
height: 40px;
width: 40px;
padding: 4px;
`;
}
});
const StyledTd = styled__default.default.td.withConfig({
displayName: "CalendarCell__StyledTd",
componentId: "sc-y5ycmg-1"
})(["border:0;border-spacing:0;"]);
/**
* CalendarCell is used to represent a single cell in {@link Calendar} and {@link RangeCalendar}
*/
function CalendarCell({
state,
date
}) {
const ref = react.useRef(null);
const {
density
} = useEds();
const {
cellProps,
buttonProps,
isSelected,
isOutsideVisibleRange,
isDisabled,
isUnavailable,
formattedDate,
isFocused
} = reactAria.useCalendarCell({
date
}, state, ref);
/**
* Determines how the selection should be highlighted
* If range is selected, it will highlight start - end, with differing border-radius
*/
const isHighlight = react.useMemo(() => {
if (isSelected && 'highlightedRange' in state) {
const start = state.highlightedRange.start;
const end = state.highlightedRange.end;
const startSame = start.day === date.day && start.month === date.month && start.year === date.year;
const endSame = end.day === date.day && end.month === date.month && end.year === date.year;
if (startSame && endSame) {
return 'BOTH';
}
if (startSame) {
return 'START';
} else if (endSame) {
return 'END';
} else {
return 'RANGE';
}
} else if (isSelected) {
return 'SINGLE';
}
return 'NONE';
}, [date.day, date.month, date.year, isSelected, state]);
return /*#__PURE__*/jsxRuntime.jsx(StyledTd, {
...cellProps,
style: {
border: 0,
borderSpacing: 0,
padding: 0
},
children: /*#__PURE__*/jsxRuntime.jsx(StyledCell, {
...buttonProps,
as: 'div',
ref: ref,
tabIndex: 0,
$hidden: isOutsideVisibleRange,
className: `cell ${isSelected ? 'selected' : ''} ${isUnavailable ? 'unavailable' : ''}${isDisabled ? 'disabled' : ''}`,
$selected: isSelected,
$highlight: isHighlight,
$disabled: isDisabled || isUnavailable,
$density: density,
$focused: isFocused,
children: formattedDate
})
});
}
// Disable no-autofocus - it's not the native autofocus attribute, but react-aria's autoFocus prop
/* eslint-disable jsx-a11y/no-autofocus */
const Grid = styled__default.default.div.withConfig({
displayName: "YearGrid__Grid",
componentId: "sc-1l9jho8-0"
})(["display:grid;grid-template-columns:repeat(6,1fr);grid-gap:8px;margin:8px;"]);
const GridColumn = styled__default.default.button.withConfig({
displayName: "YearGrid__GridColumn",
componentId: "sc-1l9jho8-1"
})(["background-color:transparent;outline:none;border:none;display:flex;justify-content:center;cursor:pointer;padding:8px;font-size:", ";font-family:", ";font-weight:", ";line-height:", ";color:", ";border-radius:999px;", ";&:hover{background-color:#f0f0f0;}&:focus{outline:2px dashed ", ";}"], edsTokens.tokens.typography.navigation.button.fontSize, edsTokens.tokens.typography.navigation.button.fontFamily, edsTokens.tokens.typography.navigation.button.fontWeight, edsTokens.tokens.typography.navigation.button.lineHeight, edsTokens.tokens.colors.text.static_icons__default.rgba, ({
$active
}) => $active ? `background-color: ${edsTokens.tokens.colors.interactive.primary__selected_highlight.rgba}` : '', edsTokens.tokens.colors.interactive.primary__resting.rgba);
const TOTAL_VISIBLE_YEARS = 36;
const RANGE_OFFSET = 30 / 2;
const GridFocusManager = ({
year: selectedYear,
setFocusedYear,
yearPickerPage,
setYearPickerPage
}) => {
const focusManager = reactAria.useFocusManager();
const prevYear = react.useRef();
const navByKeyboard = react.useRef(false);
const page = yearPickerPage * TOTAL_VISIBLE_YEARS;
const years = Array.from({
length: TOTAL_VISIBLE_YEARS
}, (_, i) => i + (selectedYear + page - RANGE_OFFSET));
react.useEffect(() => {
if (prevYear.current === undefined) {
prevYear.current = yearPickerPage;
return;
}
if (!navByKeyboard.current) {
focusManager.focusFirst();
return;
}
navByKeyboard.current = false;
yearPickerPage > prevYear.current ? focusManager.focusFirst() : focusManager.focusLast();
prevYear.current = yearPickerPage;
}, [yearPickerPage, focusManager]);
const onKeyDown = year => e => {
const target = e.currentTarget;
const parent = target.parentElement;
const isFirstYear = years.at(0) === year;
const isLastYear = years.at(-1) === year;
switch (e.key) {
case 'ArrowRight':
e.preventDefault();
if (isLastYear) {
navByKeyboard.current = true;
setYearPickerPage(page => page + 1);
break;
}
focusManager.focusNext({
wrap: true
});
break;
case 'ArrowLeft':
e.preventDefault();
if (isFirstYear) {
navByKeyboard.current = true;
setYearPickerPage(page => page - 1);
break;
}
focusManager.focusPrevious({
wrap: true
});
break;
case 'ArrowDown':
{
e.preventDefault();
if (isLastYear) {
navByKeyboard.current = true;
setYearPickerPage(page => page + 1);
break;
}
const selfIndex = Array.from(parent.children).indexOf(target);
const focusElement = Array.from(parent.children).at(selfIndex + 5);
focusManager.focusNext({
from: focusElement
});
break;
}
case 'ArrowUp':
{
e.preventDefault();
if (isFirstYear) {
navByKeyboard.current = true;
setYearPickerPage(page => page - 1);
break;
}
const selfIndex = Array.from(parent.children).indexOf(target);
const focusElement = Array.from(parent.children).at(selfIndex - 5);
focusManager.focusPrevious({
from: focusElement
});
break;
}
}
};
return years.map(year => /*#__PURE__*/jsxRuntime.jsx(GridColumn, {
$active: selectedYear === year,
onKeyDown: onKeyDown(year),
onClick: () => setFocusedYear(year),
"aria-label": `Set year to ${year}`,
tabIndex: 0,
children: year
}, year));
};
const YearGrid = ({
setFocusedYear,
year: selectedYear,
yearPickerPage,
setYearPickerPage
}) => {
return /*#__PURE__*/jsxRuntime.jsx(Grid, {
children: /*#__PURE__*/jsxRuntime.jsx(reactAria.FocusScope, {
contain: true,
restoreFocus: true,
autoFocus: true,
children: /*#__PURE__*/jsxRuntime.jsx(GridFocusManager, {
year: selectedYear,
setFocusedYear: setFocusedYear,
yearPickerPage: yearPickerPage,
setYearPickerPage: setYearPickerPage
})
})
});
};
/* eslint-disable react/no-array-index-key */
/**
* The grid laying out the cells for the calendars in {link Calendar} and {link RangeCalendar}
*/
function CalendarGrid({
state,
showYearPicker,
setShowYearPicker,
yearPickerPage,
setYearPickerPage,
...props
}) {
const {
locale
} = reactAria.useLocale();
const {
gridProps,
headerProps,
weekDays
} = reactAria.useCalendarGrid({
...props,
weekdayStyle: 'long'
}, state);
// Get the number of weeks in the month so that we can render the proper number of rows.
const howManyWeeksInMonth = date.getWeeksInMonth(state.visibleRange.start, locale);
const weeksInMonthArray = [...new Array(howManyWeeksInMonth).keys()];
return showYearPicker ? /*#__PURE__*/jsxRuntime.jsx(YearGrid, {
year: state.focusedDate.year,
setFocusedYear: year => {
state.setFocusedDate(state.focusedDate.set({
year
}));
setShowYearPicker(false);
},
yearPickerPage: yearPickerPage,
setYearPickerPage: setYearPickerPage
}) : /*#__PURE__*/jsxRuntime.jsxs("table", {
...gridProps,
style: {
borderSpacing: '0px'
},
children: [/*#__PURE__*/jsxRuntime.jsx("thead", {
...headerProps,
children: /*#__PURE__*/jsxRuntime.jsx("tr", {
children: weekDays.map((day, index) => /*#__PURE__*/jsxRuntime.jsx("th", {
style: {
textAlign: 'center'
},
abbr: day,
children: day.charAt(0).toLocaleUpperCase()
}, `${day}-${index}`))
})
}), /*#__PURE__*/jsxRuntime.jsx("tbody", {
children: weeksInMonthArray.map(weekIndex => /*#__PURE__*/jsxRuntime.jsx("tr", {
children: state.getDatesInWeek(weekIndex).map((date, i) => date ? /*#__PURE__*/jsxRuntime.jsx(CalendarCell, {
state: state,
date: date
}, date.toString()) : /*#__PURE__*/jsxRuntime.jsx("td", {}, `placeholder-${i}`))
}, weekIndex))
})]
});
}
const HeaderWrapper = styled__default.default.div.withConfig({
displayName: "CalendarHeader__HeaderWrapper",
componentId: "sc-kuy15-0"
})(["display:flex;justify-content:space-between;align-items:center;text-transform:capitalize;width:100%;"]);
function TodayPicker({
onClick,
disabled
}) {
const today = new Date();
return /*#__PURE__*/jsxRuntime.jsx(Button$1, {
disabled: disabled,
onClick: () => onClick(new date.CalendarDate(today.getFullYear(), today.getMonth() + 1, today.getDate())),
variant: 'ghost',
style: {
marginLeft: 16
},
children: "Today"
});
}
const HeaderActions = styled__default.default.div.withConfig({
displayName: "CalendarHeader__HeaderActions",
componentId: "sc-kuy15-1"
})(["display:flex;align-items:center;width:100%;"]);
/**
* The default header for the calendar components if no custom header is provided
*/
function CalendarHeader({
state,
title,
previousMonthDisabled,
nextMonthDisabled,
showYearPicker,
setShowYearPicker,
setYearPickerPage
}) {
return /*#__PURE__*/jsxRuntime.jsx(HeaderWrapper, {
children: /*#__PURE__*/jsxRuntime.jsxs(HeaderActions, {
children: [/*#__PURE__*/jsxRuntime.jsx(Button$1, {
variant: 'ghost_icon',
"aria-label": 'Previous month',
disabled: previousMonthDisabled,
onClick: () => showYearPicker ? setYearPickerPage(page => page - 1) : state.focusPreviousPage(),
children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: edsIcons.chevron_left
})
}), /*#__PURE__*/jsxRuntime.jsx("span", {
style: {
flex: '1 1 auto'
}
}), /*#__PURE__*/jsxRuntime.jsxs(Button$1, {
onClick: () => setShowYearPicker(!showYearPicker),
"data-testid": 'heading',
"aria-live": 'polite',
variant: 'ghost',
style: {
fontSize: edsTokens.tokens.typography.heading.h5.fontSize,
textTransform: 'capitalize'
},
children: [title, /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: showYearPicker ? edsIcons.chevron_up : edsIcons.chevron_down
})]
}), /*#__PURE__*/jsxRuntime.jsx(TodayPicker, {
disabled: showYearPicker,
onClick: v => state.setFocusedDate(v)
}), /*#__PURE__*/jsxRuntime.jsx("span", {
style: {
flex: '1 1 auto'
}
}), /*#__PURE__*/jsxRuntime.jsx(Button$1, {
variant: 'ghost_icon',
onClick: () => showYearPicker ? setYearPickerPage(page => page + 1) : state.focusNextPage(),
disabled: nextMonthDisabled,
"aria-label": 'Next month',
children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: edsIcons.chevron_right
})
})]
})
});
}
const CalendarWrapper = styled__default.default.div.withConfig({
displayName: "CalendarWrapper",
componentId: "sc-14hqwiu-0"
})(["display:grid;grid-gap:16px;max-height:80vh;width:max-content;max-width:560px;overflow:auto;"]);
const Calendar = /*#__PURE__*/react.forwardRef(({
Header,
Footer,
...props
}, ref) => {
const [showYearPicker, setShowYearPicker] = react.useState(false);
const [yearPickerPage, setYearPickerPage] = react.useState(0);
const {
locale
} = reactAria.useLocale();
const calendarState = calendar.useCalendarState({
...props,
locale,
createCalendar: date.createCalendar
});
const {
calendarProps,
prevButtonProps,
nextButtonProps,
title
} = reactAria.useCalendar(props, calendarState);
return /*#__PURE__*/jsxRuntime.jsxs(CalendarWrapper, {
ref: ref,
...calendarProps,
children: [/*#__PURE__*/jsxRuntime.jsx(Popover.Header, {
style: {
width: '100%'
},
children: Header ? /*#__PURE__*/jsxRuntime.jsx(Header, {
month: calendarState.focusedDate.month,
state: calendarState,
setMonth: month => calendarState.setFocusedDate(calendarState.focusedDate.set({
month
})),
setYear: year => calendarState.setFocusedDate(calendarState.focusedDate.set({
year
})),
year: calendarState.focusedDate.year
}) : /*#__PURE__*/jsxRuntime.jsx(CalendarHeader, {
state: calendarState,
title: title,
previousMonthDisabled: prevButtonProps.isDisabled,
nextMonthDisabled: nextButtonProps.isDisabled,
setShowYearPicker: setShowYearPicker,
showYearPicker: showYearPicker,
setYearPickerPage: setYearPickerPage
})
}), /*#__PURE__*/jsxRuntime.jsx(Popover.Content, {
className: "calendar",
style: {
height: 'fit-content'
},
children: /*#__PURE__*/jsxRuntime.jsx(CalendarGrid, {
state: calendarState,
setShowYearPicker: setShowYearPicker,
showYearPicker: showYearPicker,
yearPickerPage: yearPickerPage,
setYearPickerPage: setYearPickerPage
})
}), Footer && /*#__PURE__*/jsxRuntime.jsx(Popover.Actions, {
children: /*#__PURE__*/jsxRuntime.jsx(Footer, {
month: calendarState.focusedDate.month,
state: calendarState,
setMonth: month => calendarState.setFocusedDate(calendarState.focusedDate.set({
month
})),
setYear: year => calendarState.setFocusedDate(calendarState.focusedDate.set({
year
})),
year: calendarState.focusedDate.year
})
})]
});
});
Calendar.displayName = 'Calendar';
const getVariant = variant => {
if (variant === 'error') {
return edsTokens.tokens.colors.interactive.danger__resting.rgba;
}
if (variant === 'success') {
return edsTokens.tokens.colors.interactive.success__resting.rgba;
}
if (variant === 'warning') {
return edsTokens.tokens.colors.interactive.warning__resting.rgba;
}
return edsTokens.tokens.colors.interactive.primary__resting.rgba;
};
const getVariantText = variant => {
if (variant === 'error') {
return edsTokens.tokens.colors.interactive.danger__text.rgba;
}
if (variant === 'success') {
return edsTokens.tokens.colors.interactive.success__text.rgba;
}
if (variant === 'warning') {
return edsTokens.tokens.colors.interactive.warning__text.rgba;
}
return edsTokens.tokens.typography.input.text.color;
};
const StyledInputFieldWrapper = styled__default.default.div.withConfig({
displayName: "FieldWrapper__StyledInputFieldWrapper",
componentId: "sc-1h0kqs9-0"
})(["display:flex;align-items:center;background-color:", ";height:", ";padding:0 8px;", " ", " color:", ";cursor:default;"], edsTokens.tokens.colors.ui.background__light.rgba, ({
$density
}) => $density === 'compact' ? '24px' : '36px', ({
$variant,
$disabled,
$readonly
}) => {
if (!$variant && !$readonly) {
return `&:focus-within:not(.invalid) {
outline: 2px solid
${edsTokens.tokens.colors.interactive.primary__resting.rgba};
}
${!$disabled && `&:not(:focus-within) {
box-shadow: inset 0 -1px 0 0 ${edsTokens.tokens.colors.text.static_icons__tertiary.rgba};`}
}
`;
}
return `outline: 2px solid ${getVariant($variant)};`;
}, ({
$readonly
}) => {
return $readonly && `background-color: ${edsTokens.tokens.colors.ui.background__default.rgba};
outline: none;`;
}, p => getVariantText(p.$variant));
/**
* Applies styles around the date input fields (density, color etc.)
*/
const InputFieldWrapper = /*#__PURE__*/react.forwardRef(({
children,
color,
disabled,
readonly,
...props
}, ref) => {
const {
density
} = useEds();
// As the props returned are designed for react-aria, some of them are not valid DOM props (i.e. onPress).
// The filterDOMProps-method strips out the invalid props, but it also removes event listeners due to casing
const filteredProps = utils.filterDOMProps(props);
// filterDOMProps also strips event handlers
const eventHandlers = Object.keys(props).filter(k => k.startsWith('on')).reduce((a, b) => ({
...a,
[b]: props[b]
}), {});
return /*#__PURE__*/jsxRuntime.jsx(StyledInputFieldWrapper, {
ref: ref,
$density: density,
$variant: color,
$disabled: disabled ?? false,
$readonly: readonly ?? false,
...filteredProps,
...eventHandlers,
children: children
});
});
const FieldWrapper = /*#__PURE__*/react.forwardRef(({
children,
pickerRef,
calendar,
isOpen,
setIsOpen,
label,
readonly,
...props
}, ref) => {
react.useEffect(() => {
if (isOpen === false) {
// Focus the first segment in the input field
const segment = ref.current?.querySelector('.segment');
segment?.focus();
}
}, [ref, isOpen, pickerRef]);
return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [/*#__PURE__*/jsxRuntime.jsx(InputWrapper$2, {
readOnly: readonly,
label: label,
onKeyDownCapture: event => {
const isIconTarget = event.target instanceof SVGSVGElement;
if (!isIconTarget && (event.code === 'Space' || event.code === 'Enter')) {
setIsOpen(true);
}
},
...props,
children: children
}), /*#__PURE__*/jsxRuntime.jsx(Popover, {
open: isOpen ?? false,
onClose: () => setIsOpen(false),
anchorEl: ref.current,
placement: 'bottom-start',
children: calendar
})]
});
});
InputFieldWrapper.displayName = 'InputFieldWrapper';
FieldWrapper.displayName = 'FieldWrapper';
const intl = new Intl.DateTimeFormat();
const defaultTimezone = intl.resolvedOptions().timeZone;
const DatePickerContext = /*#__PURE__*/react.createContext({
timezone: defaultTimezone
});
const DatePickerProvider = ({
timezone,
formatOptions,
children
}) => {
return /*#__PURE__*/jsxRuntime.jsx(DatePickerContext.Provider, {
value: {
timezone: timezone ?? defaultTimezone,
formatOptions
},
children: children
});
};
const useDatePickerContext = () => react.useContext(DatePickerContext);
const Segment = styled__default.default.div.withConfig({
displayName: "DateSegment__Segment",
componentId: "sc-19uidpx-0"
})(({
$placeholder,
$disabled
}) => {
return styled.css(["font-family:", ";&:focus-visible{outline:2px solid ", ";background-color:", ";}", " ", ""], edsTokens.tokens.typography.input.text.fontFamily, edsTokens.tokens.colors.interactive.primary__resting.rgba, edsTokens.tokens.colors.ui.background__medium.rgba, $placeholder ? styled.css({
color: edsTokens.tokens.colors.text.static_icons__tertiary.rgba
}) : styled.css({
color: edsTokens.tokens.colors.text.static_icons__default.rgba
}), $disabled && styled.css(["color:", ";"], edsTokens.tokens.colors.interactive.disabled__text.rgba));
});
/**
* DateSegment is used to represent a single segment of a date in the DateField (i.e. day, month, year)
*/
function DateSegment({
segment,
state
}) {
const {
formatOptions,
timezone
} = useDatePickerContext();
const formatter = reactAria.useDateFormatter(formatOptions);
const parts = state.value ? formatter.formatToParts(state.value.toDate(timezone)) : [];
const part = parts.find(p => p.type === segment.type);
const value = segment.isPlaceholder || segment.type === 'literal' ? segment.text : part?.value ?? segment.text;
const [focus, setFocus] = react.useState(false);
const ref = react.useRef(null);
const {
segmentProps
} = reactAria.useDateSegment(segment, state, ref);
return /*#__PURE__*/jsxRuntime.jsx(Segment, {
...segmentProps,
onFocus: e => {
setFocus(true);
segmentProps.onFocus(e);
},
onBlur: e => {
setFocus(false);
segmentProps.onBlur(e);
},
$invalid: state.isInvalid,
$disabled: state.isDisabled,
$placeholder: segment.isPlaceholder,
style: {
padding: segment.type === 'literal' ? '0 2px' : '0'
},
onKeyDown: e => {
if (e.code === 'Enter' || e.code === 'Space') {
e.stopPropagation();
e.preventDefault();
} else if (segmentProps.onKeyDown) {
segmentProps.onKeyDown(e);
}
},
ref: ref,
className: `segment ${segment.isPlaceholder ? 'placeholder' : ''}`,
children: focus ? segment.isPlaceholder || segment.type === 'literal' ? segment.text : segment.text.padStart(segment.type === 'year' ? 4 : 2, '0') : value
});
}
// In some cases we need to use the index as key
/* eslint-disable react/no-array-index-key */
/**
* A field that wraps segments for inputting a date / date-time
*/
const DateFieldSegments = /*#__PURE__*/react.forwardRef((props, ref) => {
const state = datepicker.useDateFieldState({
...props,
locale: props.locale,
createCalendar: date.createCalendar
});
const {
fieldProps
} = reactAria.useDateField({
...props,
// Type-casting as react-aria expects string | ReactNode, but we only pass strings
'aria-label': props.label ?? 'Date input field'
}, state, ref);
return /*#__PURE__*/jsxRuntime.jsx("div", {
...fieldProps,
style: {
display: 'flex'
},
ref: ref,
children: state.segments.map((segment, i) => /*#__PURE__*/jsxRuntime.jsx(DateSegment, {
segment: segment,
state: state
}, i))
});
});
DateFieldSegments.displayName = 'SingleDateField';
/**
* DateField is the input field used in {@link DatePicker} to type in a single date.
* Encapsulates styling / functionality for typing a date
*/
const DateField = /*#__PURE__*/react.forwardRef(function ({
fieldProps,
groupProps,
variant,
dateCreateProps,
...props
}, ref) {
const state = datepicker.useDateFieldState(dateCreateProps);
const inputRef = react.useRef(null);
return /*#__PURE__*/jsxRuntime.jsxs(InputFieldWrapper, {
...groupProps,
readonly: fieldProps.isReadOnly,
disabled: state.isDisabled,
color: state.isInvalid ? 'warning' : variant,
ref: ref,
className: `field ${state.isInvalid ? 'invalid' : 'valid'}`,
children: [/*#__PURE__*/jsxRuntime.jsx(DateFieldSegments, {
...state,
...fieldProps,
locale: dateCreateProps.locale,
ref: inputRef
}), /*#__PURE__*/jsxRuntime.jsx("span", {
style: {
flex: '1 1 auto'
}
}), props.rightAdornments]
});
});
DateField.displayName = 'DateField';
const useConvertedValidationFunctions = (minValue, maxValue, isDateUnavailable, timezone) => {
const tz = timezone ?? defaultTimezone;
const _minValue = minValue ? date.toCalendarDate(date.fromDate(minValue, tz)) : undefined;
const _maxValue = maxValue ? date.toCalendarDate(date.fromDate(maxValue, tz)) : undefined;
const _minTimeValue = minValue ? date.fromDate(minValue, tz) : undefined;
const _maxTimeValue = maxValue ? date.fromDate(maxValue, tz) : undefined;
const _isDateUnavailable = value => isDateUnavailable ? isDateUnavailable(value.toDate(tz)) : false;
return {
_minValue,
_maxValue,
_isDateUnavailable,
_minTimeValue,
_maxTimeValue
};
};
const StyledButton = styled__default.default(Button$2).withConfig({
displayName: "Toggle__StyledButton",
componentId: "sc-1bwqcj7-0"
})(["height:24px;width:24px;"]);
/**
* Toggle component encapsulates the reset and open calendar buttons
*/
const Toggle = ({
reset,
setOpen,
open,
icon,
disabled,
buttonProps,
valueString,
showClearButton,
readonly
}) => {
return readonly || disabled ? null : /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [showClearButton && /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
disabled: disabled,
variant: 'ghost_icon',
"aria-label": 'Reset',
onClick: () => {
reset();
},
onKeyDown: e => {
if (e.code === 'Enter' || e.code === 'Space') {
e.preventDefault();
e.stopPropagation();
reset();
}
},
children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: edsIcons.close
})
}), /*#__PURE__*/jsxRuntime.jsx(StyledButton, {
...utils.filterDOMProps(buttonProps),
disabled: disabled,
"aria-label": valueString ? `Change date, ${valueString}` : `Change date`,
variant: 'ghost_icon',
onClick: e => {
e.preventDefault();
e.stopPropagation();
setOpen(!open);
},
children: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
data: icon
})
})]
});
};
const getCalendarDate = (value, timezone, showTimeInput = false) => {
if (!value) return null;
return showTimeInput ? date.toCalendarDateTime(date.fromDate(value, timezone)) : date.toCalendarDate(date.fromDate(value, timezone));
};
const useGetLocale = locale => {
const {
locale: externalLocale
} = reactAria.useLocale();
// react-aria defaults to navigator.language if no locale is provided. If these are equal, we override by using the system default locale
const defaultLocale = typeof navigator !== 'undefined' && navigator.language || 'en-US';
const fallbackLocale = new Intl.DateTimeFormat().resolvedOptions().locale;
return locale ?? (externalLocale === defaultLocale ? undefined : externalLocale) ?? fallbackLocale;
};
const DatePicker = /*#__PURE__*/react.forwardRef(({
onChange,
label,
value,
isDateUnavailable,
minValue,
maxValue,
Footer,
Header,
timezone,
locale: propLocale,
defaultValue,
showTimeInput,
granularity,
hideClearButton,
disabled: isDisabled,
readOnly: isReadOnly,
formatOptions,
helperProps,
variant,
...props
}, forwardedRef) => {
timezone = timezone ?? defaultTimezone;
formatOptions = formatOptions ?? {
year: 'numeric',
month: '2-digit',
day: '2-digit'
};
const [innerValue, setInnerValue] = react.useState(() => {
const initialValue = value ?? defaultValue;
if (initialValue) {
if (showTimeInput) {
return date.toCalendarDateTime(date.fromDate(initialValue, timezone));
} else {
return date.toCalendarDate(date.fromDate(initialValue, timezone));
}
}
return null;
});
const [isOpen, setIsOpen] = react.useState(null);
const inputRef = react.useRef(null);
const pickerRef = react.useRef(null);
const ref = forwardedRef || inputRef;
const {
_minValue,
_maxValue,
_isDateUnavailable
} = useConvertedValidationFunctions(minValue, maxValue, isDateUnavailable, timezone);
const _onChange = react.useCallback(value => {
// Set internal value
if (value) {
setInnerValue(showTimeInput ? date.toCalendarDateTime(value) : date.toCalendarDate(value));
} else {
setInnerValue(null);
}
// Close the picker after selecting a date
if (isOpen) {
setIsOpen(false);
}
// Call onChange callback from props
if (onChange) {
if (!value) {
onChange(null);
} else {
const date = value.toDate(timezone);
onChange(date);
}
}
}, [onChange, isOpen, showTimeInput, timezone]);
const _value = getCalendarDate(value, timezone, showTimeInput) ?? innerValue;
const locale = useGetLocale(propLocale);
const dateCreateProps = {
helperProps,
variant,
isDisabled,
value: _value,
hideTimeZone: true,
locale: locale,
createCalendar: date.createCalendar,
onChange: _onChange,
minValue: _minValue,
maxValue: _maxValue,
isDateUnavailable: _isDateUnavailable,
label: label || 'Date picker',
isReadOnly,
granularity
};
const pickerState = datepicker.useDatePickerState(dateCreateProps);
const {
groupProps,
buttonProps,
fieldProps,
calendarProps
} = reactAria.useDatePicker(dateCreateProps, pickerState, ref);
const helperPropsInvalid = pickerState.displayValidation.isInvalid ? {
text: pickerState.displayValidation.validationErrors.join('\n'),
color: edsTokens.tokens.colors.interactive.warning__text.rgba,
icon: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
size: 16,
data: edsIcons.warning_outlined
})
} : undefined;
const showClearButton = pickerState.dateValue !== null && !hideClearButton;
// innerValue is used as a fallback, especially for uncontrolled inputs, so it needs to be reset when value / defaultValue is reset
react.useEffect(() => {
if (!defaultValue && !value) setInnerValue(null);
}, [defaultValue, value]);
return /*#__PURE__*/jsxRuntime.jsx(reactAria.I18nProvider, {
locale: locale,
children: /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
timezone: timezone,
formatOptions: formatOptions,
children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
...props,
isOpen: isOpen,
readonly: fieldProps.isReadOnly,
pickerRef: pickerRef,
ref: ref,
setIsOpen: setIsOpen,
label: label,
calendar: /*#__PURE__*/jsxRuntime.jsx(Calendar, {
ref: pickerRef,
Footer: Footer,
Header: Header,
...calendarProps
}),
disabled: isDisabled,
readOnly: isReadOnly,
color: pickerState.isInvalid ? 'warning' : variant,
helperProps: helperPropsInvalid ?? helperProps,
children: /*#__PURE__*/jsxRuntime.jsx(DateField, {
fieldProps: fieldProps,
groupProps: groupProps,
dateCreateProps: dateCreateProps,
ref: ref,
onChange: _onChange,
rightAdornments: /*#__PURE__*/jsxRuntime.jsx(Toggle, {
showClearButton: showClearButton,
setOpen: setIsOpen,
open: isOpen,
icon: edsIcons.calendar,
disabled: isDisabled,
readonly: isReadOnly,
reset: () => _onChange(null),
buttonProps: buttonProps,
valueString: pickerState.formatValue(locale, {
year: 'numeric',
month: 'short',
day: '2-digit'
})
}),
variant: variant
})
})
})
});
});
DatePicker.displayName = 'DatePicker';
const RangeCalendar = /*#__PURE__*/react.forwardRef(({
Header,
Footer,
...props
}, ref) => {
const [showYearPicker, setShowYearPicker] = react.useState(false);
const [yearPickerPage, setYearPickerPage] = react.useState(0);
const {
locale
} = reactAria.useLocale();
const state = calendar.useRangeCalendarState({
...props,
locale,
createCalendar: date.createCalendar
});
const {
calendarProps,
title
} = reactAria.useRangeCalendar(props, state, ref);
return /*#__PURE__*/jsxRuntime.jsxs(CalendarWrapper, {
...calendarProps,
ref: ref,
children: [/*#__PURE__*/jsxRuntime.jsx(Popover.Header, {
children: Header ? /*#__PURE__*/jsxRuntime.jsx(Header, {
month: state.focusedDate.month,
state: state,
setMonth: month => state.setFocusedDate(state.focusedDate.set({
month
})),
setYear: year => state.setFocusedDate(state.focusedDate.set({
year
})),
year: state.focusedDate.year
}) : /*#__PURE__*/jsxRuntime.jsx(CalendarHeader, {
state: state,
title: title,
setShowYearPicker: setShowYearPicker,
showYearPicker: showYearPicker,
setYearPickerPage: setYearPickerPage
})
}), /*#__PURE__*/jsxRuntime.jsx(Popover.Content, {
children: /*#__PURE__*/jsxRuntime.jsx(CalendarGrid, {
state: state,
setShowYearPicker: setShowYearPicker,
showYearPicker: showYearPicker,
yearPickerPage: yearPickerPage,
setYearPickerPage: setYearPickerPage
})
}), Footer && /*#__PURE__*/jsxRuntime.jsx(Popover.Actions, {
children: /*#__PURE__*/jsxRuntime.jsx(Footer, {
month: state.focusedDate.month,
state: state,
setMonth: month => state.setFocusedDate(state.focusedDate.set({
month
})),
setYear: year => state.setFocusedDate(state.focusedDate.set({
year
})),
year: state.focusedDate.year
})
})]
});
});
RangeCalendar.displayName = 'RangeCalendar';
/**
* DateRangeField is the input field used in {@link DateRangePicker} to type in a date range.
*/
const DateRangeField = /*#__PURE__*/react.forwardRef(function (props, ref) {
const fromRef = react.useRef(null);
const toRef = react.useRef(null);
return /*#__PURE__*/jsxRuntime.jsxs(InputFieldWrapper, {
ref: ref,
readonly: props.startFieldProps.isReadOnly,
className: "field",
disabled: props.disabled,
color: props.variant,
...props.groupProps,
children: [/*#__PURE__*/jsxRuntime.jsx(DateFieldSegments, {
...props.startFieldProps,
ref: fromRef,
locale: props.locale
}), /*#__PURE__*/jsxRuntime.jsx(Typography, {
as: 'span',
variant: 'text',
group: 'input',
style: {
padding: '0 4px'
},
children: "\u2014"
}), /*#__PURE__*/jsxRuntime.jsx(DateFieldSegments, {
...props.endFieldProps,
ref: toRef,
locale: props.locale
}), /*#__PURE__*/jsxRuntime.jsx("span", {
style: {
flex: '1 1 auto'
}
}), props.rightAdornments]
});
});
DateRangeField.displayName = 'DateRangeField';
const DateRangePicker = /*#__PURE__*/react.forwardRef(({
onChange,
label,
value,
isDateUnavailable,
minValue,
maxValue,
Footer,
Header,
timezone,
defaultValue,
locale: propLocale,
formatOptions,
hideClearButton,
disabled: isDisabled,
readOnly: isReadOnly,
...props
}, forwardedRef) => {
timezone = timezone ?? defaultTimezone;
formatOptions = formatOptions ?? {
year: 'numeric',
month: '2-digit',
day: '2-digit'
};
const [innerValue, setInnerValue] = react.useState(() => {
const initialValue = value ?? defaultValue;
if (initialValue) {
return {
start: initialValue.from ? date.toCalendarDate(date.fromDate(initialValue.from, timezone)) : null,
end: initialValue.to ? date.toCalendarDate(date.fromDate(initialValue.to, timezone)) : null
};
}
});
const [isOpen, setIsOpen] = react.useState(null);
const inputRef = react.useRef(null);
const pickerRef = react.useRef(null);
const ref = forwardedRef || inputRef;
const locale = useGetLocale(propLocale);
const {
_minValue,
_maxValue,
_isDateUnavailable
} = useConvertedValidationFunctions(minValue, maxValue, isDateUnavailable, timezone);
const _onChange = react.useCallback(rangeValue => {
setInnerValue(rangeValue);
// Close picker on selecting date
if (isOpen) {
setIsOpen(false);
}
// Propagate change
if (onChange) {
if (!rangeValue) onChange(null);else {
onChange({
from: rangeValue.start?.toDate(timezone) ?? null,
to: rangeValue.end?.toDate(timezone) ?? null
});
}
}
}, [onChange, isOpen, timezone]);
const _value = value ? {
start: getCalendarDate(value.from, timezone),
end: getCalendarDate(value.to, timezone)
} : innerValue;
const dateRangePickerStateProps = {
maxValue: _maxValue,
minValue: _minValue,
isDateUnavailable: _isDateUnavailable,
onChange: _onChange,
label: label ?? 'Date-range',
value: _value,
isDisabled: isDisabled,
isReadOnly: isReadOnly
};
const state = datepicker.useDateRangePickerState(dateRangePickerStateProps);
const {
groupProps,
startFieldProps,
endFieldProps,
buttonProps,
calendarProps
} = reactAria.useDateRangePicker(dateRangePickerStateProps, state, ref);
const helperProps = state.displayValidation.isInvalid ? {
text: state.displayValidation.validationErrors.join('\n'),
color: edsTokens.tokens.colors.interactive.warning__text.rgba,
icon: /*#__PURE__*/jsxRuntime.jsx(Icon$1, {
size: 16,
data: edsIcons.warning_outlined
})
} : undefined;
const showClearButton = state.dateRange !== null && !hideClearButton;
const formattedValue = state.formatValue(locale, {
year: 'numeric',
month: 'short',
day: '2-digit'
});
const valueString = formattedValue ? Object.values(formattedValue).join(' - ') : null;
// innerValue is used as a fallback, especially for uncontrolled inputs, so it needs to be reset when value / defaultValue is reset
react.useEffect(() => {
const val = defaultValue ?? value;
if (!defaultValue && !value) setInnerValue(null);
if (!val?.from && !val?.to) setInnerValue(null);
}, [defaultValue, value]);
return /*#__PURE__*/jsxRuntime.jsx(reactAria.I18nProvider, {
locale: locale,
children: /*#__PURE__*/jsxRuntime.jsx(DatePickerProvider, {
timezone: timezone,
formatOptions: formatOptions,
children: /*#__PURE__*/jsxRuntime.jsx(FieldWrapper, {
...props,
isOpen: isOpen,
color: state.isInvalid ? 'warning' : props.variant,
helperProps: helperProps ?? props.helperProps,
readonly: startFieldProps.isReadOnly,
ref: ref,
pickerRef: pickerRef,
setIsOpen: setIsOpen,
label: label,
calendar: /*#__PURE__*/jsxRuntime.jsx(RangeCalendar, {
ref: pickerRef,
maxValue: _maxValue,
minValue: _minValue,
isDateUnavailable: _isDateUnavailable,
Footer: Footer,
Header: Header,
...calendarProps
}),
children: /*#__PURE__*/jsxRuntime.jsx(DateRangeField, {
startFieldProps: startFieldProps,
endFieldProps: endFieldProps,
groupProps: groupProps,
ref: ref,
variant: props.variant,
disabled: isDisabled,
locale: locale,
rightAdornments: /*#__PURE__*/jsxRuntime.jsx(Toggle, {
showClearButton: showClearButton,
buttonProps: buttonProps,
disabled: isDisabled,
readonly: isReadOnly,
reset: () => {
_onChange(null);
},
setOpen: setIsOpen,
open: isOpen,
icon: edsIcons.calendar_date_range,
valueString: valueString
})
})
})
})
});
});
DateRangePicker.displayName = 'DateRangePicker';
exports.Accordion = Accordion;
exports.AccordionHeader = AccordionHeader$1;
exports.AccordionHeaderActions = AccordionHeaderActions;
exports.AccordionHeaderTitle = AccordionHeaderTitle;
exports.AccordionItem = AccordionItem;
exports.AccordionPanel = AccordionPanel;
exports.Autocomplete = Autocomplete;
exports.Avatar = Avatar;
exports.Banner = Banner;
exports.BannerActions = BannerActions;
exports.BannerIcon = BannerIcon;
exports.BannerMessage = BannerMessage;
exports.Breadcrumb = Breadcrumb;
exports.Breadcrumbs = Breadcrumbs;
exports.Button = Button$1;
exports.ButtonGroup = ButtonGroup;
exports.Card = Card;
exports.CardActions = CardActions;
exports.CardContent = CardContent;
exports.CardHeader = CardHeader;
exports.CardHeaderTitle = CardHeaderTitle;
exports.CardMedia = CardMedia;
exports.Checkbox = Checkbox;
exports.Chip = Chip;
exports.CircularProgress = CircularProgress;
exports.DatePicker = DatePicker;
exports.DateRangePicker = DateRangePicker;
exports.Dialog = Dialog;
exports.DialogActions = DialogActions;
exports.DialogContent = DialogContent;
exports.DialogHeader = DialogHeader;
exports.DialogTitle = DialogTitle;
exports.Divider = Divider;
exports.DotProgress = DotProgress;
exports.EdsProvider = EdsProvider;
exports.Icon = Icon$1;
exports.Input = Input$4;
exports.InputWrapper = InputWrapper$2;
exports.Label = Label$3;
exports.LinearProgress = LinearProgress;
exports.List = List$1;
exports.ListItem = ListItem$2;
exports.Menu = Menu;
exports.MenuItem = MenuItem$1;
exports.MenuSection = MenuSection;
exports.NativeSelect = NativeSelect;
exports.Pagination = Pagination;
exports.Paper = Paper;
exports.Popover = Popover;
exports.PopoverActions = PopoverActions;
exports.PopoverContent = PopoverContent;
exports.PopoverHeader = PopoverHeader;
exports.PopoverTitle = PopoverTitle;
exports.Progress = Progress;
exports.Radio = Radio;
exports.Scrim = Scrim;
exports.Search = Search;
exports.SideBar = SideBar;
exports.SideBarAccordion = SideBarAccordion;
exports.SideBarAccordionItem = SideBarAccordionItem;
exports.SideBarButton = SideBarButton;
exports.SideBarContent = SideBarContent;
exports.SideBarFooter = SideBarFooter;
exports.SideBarToggle = SideBarToggle;
exports.SideSheet = SideSheet;
exports.SidebarLink = SidebarLink;
exports.Slider = Slider;
exports.Snackbar = Snackbar;
exports.SnackbarAction = SnackbarAction;
exports.StarProgress = StarProgress;
exports.Switch = Switch;
exports.Tab = Tab;
exports.TabList = TabList;
exports.TabPanel = TabPanel;
exports.TabPanels = TabPanels;
exports.Table = Table;
exports.TableBody = Body;
exports.TableCaption = Caption;
exports.TableCell = Cell;
exports.TableFoot = Foot;
exports.TableHead = Head;
exports.TableOfContents = TableOfContents;
exports.TableOfContentsLinkItem = LinkItem;
exports.Tabs = Tabs;
exports.TextField = TextField;
exports.ToggleButton = ToggleButton;
exports.Tooltip = Tooltip$2;
exports.TopBar = TopBar;
exports.TopbarActions = Actions;
exports.TopbarCustomContent = CustomContent;
exports.TopbarHeader = Header$2;
exports.Typography = Typography;
exports.tableRow = Row;
exports.useEds = useEds;
exports.useSideBar = useSideBar;