'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
}) => {
  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,
    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,
  ...rest
}, ref) {
  const arrowRef = react.useRef(null);
  const [open, setOpen] = react.useState(false);
  const shouldOpen = title !== '' && typeof document !== 'undefined';
  const {
    x,
    y,
    refs,
    strategy,
    context,
    middlewareData: {
      arrow: {
        x: arrowX,
        y: arrowY
      } = {}
    },
    placement: finalPlacement
  } = 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
    })
  });
  edsUtils.useIsomorphicLayoutEffect(() => {
    if (shouldOpen && open) {
      refs.floating.current?.showPopover();
    }
  }, [open, shouldOpen, refs.floating]);
  const TooltipEl = /*#__PURE__*/jsxRuntime.jsxs(StyledTooltip, {
    popover: "manual",
    ...rest,
    ...getFloatingProps({
      ref: tooltipRef,
      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, 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,
  label,
  meta,
  unit,
  helperText,
  placeholder,
  disabled,
  multiline = false,
  className,
  variant,
  inputIcon,
  helperIcon,
  style,
  rowsMax,
  textareaRef,
  inputRef,
  ...other
}, ref) {
  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 = {};
let count = 0;
/** 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 => {
  count += 1;
  return {
    icon: _icons[name],
    count
  };
};

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 customIcon = icon => ({
  icon,
  count: Math.floor(Math.random() * 1000)
});
const findIcon = (name, data, size) => {
  // eslint-disable-next-line prefer-const
  let {
    icon,
    count
  } = data ? customIcon(data) : get(name);
  if (size < 24) {
    // fallback to normal icon if small is not made yet
    icon = icon.sizes?.small || icon;
  }
  return {
    icon,
    count
  };
};
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,
    count
  } = 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
  let titleId = '';
  if (title) {
    titleId = `${icon.prefix}-${icon.name}-${count}`;
    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;}"]);
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(optionDisabled)), [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 {
    locale
  } = reactAria.useLocale();
  const state = datepicker.useDateFieldState({
    ...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,
      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
    }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
      as: 'span',
      variant: 'text',
      group: 'input',
      style: {
        padding: '0 4px'
      },
      children: "\u2014"
    }), /*#__PURE__*/jsxRuntime.jsx(DateFieldSegments, {
      ...props.endFieldProps,
      ref: toRef
    }), /*#__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,
          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.Autocomplete = Autocomplete;
exports.Avatar = Avatar;
exports.Banner = Banner;
exports.Breadcrumbs = Breadcrumbs;
exports.Button = Button$1;
exports.Card = Card;
exports.Checkbox = Checkbox;
exports.Chip = Chip;
exports.CircularProgress = CircularProgress;
exports.DatePicker = DatePicker;
exports.DateRangePicker = DateRangePicker;
exports.Dialog = Dialog;
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.Menu = Menu;
exports.NativeSelect = NativeSelect;
exports.Pagination = Pagination;
exports.Paper = Paper;
exports.Popover = Popover;
exports.Progress = Progress;
exports.Radio = Radio;
exports.Scrim = Scrim;
exports.Search = Search;
exports.SideBar = SideBar;
exports.SideSheet = SideSheet;
exports.Slider = Slider;
exports.Snackbar = Snackbar;
exports.StarProgress = StarProgress;
exports.Switch = Switch;
exports.Table = Table;
exports.TableOfContents = TableOfContents;
exports.Tabs = Tabs;
exports.TextField = TextField;
exports.Tooltip = Tooltip$2;
exports.TopBar = TopBar;
exports.Typography = Typography;
exports.useEds = useEds;
exports.useSideBar = useSideBar;