@equinor/eds-core-react
Version:
The React implementation of the Equinor Design System
1,879 lines (1,837 loc) • 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({
display