braid-design-system/dist/lib/components/private/Keyline/Keyline.mjs

Themeable design system for the SEEK Group

import { jsx } from "react/jsx-runtime";
import { useBackgroundLightness } from "../../Box/BackgroundContext.mjs";
import { Box } from "../../Box/Box.mjs";
import { noRadiusOnRight, largestWidth, width, tone, lightMode, darkMode } from "./Keyline.css.mjs";
const Keyline = ({ tone: tone$1, borderRadius }) => {
  const backgroundLightness = useBackgroundLightness();
  return /* @__PURE__ */ jsx(
    Box,
    {
      component: "span",
      position: "absolute",
      top: 0,
      bottom: 0,
      left: 0,
      overflow: "hidden",
      borderRadius,
      className: [noRadiusOnRight, largestWidth],
      children: /* @__PURE__ */ jsx(
        Box,
        {
          component: "span",
          height: "full",
          display: "inlineBlock",
          className: [
            width,
            tone[tone$1],
            lightMode[backgroundLightness.lightMode],
            darkMode[backgroundLightness.darkMode]
          ]
        }
      )
    }
  );
};
export {
  Keyline
};