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

Themeable design system for the SEEK Group

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