"use strict";
const jsxRuntime = require("react/jsx-runtime");
const styles_lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
const styles_lib_components_Box_BackgroundContext_cjs = require("../../Box/BackgroundContext.cjs");
const styles_lib_components_private_Keyline_Keyline_css_cjs = require("./Keyline.css.cjs");
const Keyline = ({ tone, borderRadius }) => {
  const backgroundLightness = styles_lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
  return /* @__PURE__ */ jsxRuntime.jsx(
    styles_lib_components_Box_Box_cjs.Box,
    {
      component: "span",
      position: "absolute",
      top: 0,
      bottom: 0,
      left: 0,
      overflow: "hidden",
      borderRadius,
      className: [styles_lib_components_private_Keyline_Keyline_css_cjs.noRadiusOnRight, styles_lib_components_private_Keyline_Keyline_css_cjs.largestWidth],
      children: /* @__PURE__ */ jsxRuntime.jsx(
        styles_lib_components_Box_Box_cjs.Box,
        {
          component: "span",
          height: "full",
          display: "inlineBlock",
          className: [
            styles_lib_components_private_Keyline_Keyline_css_cjs.width,
            styles_lib_components_private_Keyline_Keyline_css_cjs.tone[tone],
            styles_lib_components_private_Keyline_Keyline_css_cjs.lightMode[backgroundLightness.lightMode],
            styles_lib_components_private_Keyline_Keyline_css_cjs.darkMode[backgroundLightness.darkMode]
          ]
        }
      )
    }
  );
};
exports.Keyline = Keyline;
