welcome-ui/dist/Label.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as t } from "./jsx-runtime-Bqq1Hxg9.mjs";
import "./Icon.mjs";
import { L as u } from "./index-CuuMTEio.mjs";
import { shouldForwardProp as x, forwardRef as g } from "./System.mjs";
import { VariantIcon as w } from "./VariantIcon.mjs";
import { w as y } from "./wrap-children-CRHMWYug.mjs";
import o, { th as b, css as l } from "@xstyled/styled-components";
const n = o.labelBox.withConfig({ shouldForwardProp: x })(
  ({ required: e }) => l`
    position: relative;
    display: flex;
    flex-shrink: 0;
    max-width: 100%;
    align-items: center;
    line-height: lg;
    ${b("labels")};
    user-select: none;

    > * {
      &:not(:last-child) {
        margin-right: sm;
      }

      &:last-child {
        ${e && j};
      }
    }
  `
), j = l`
  &::after {
    content: '*';
    margin-left: xs;
    /* It prevents the element to shift the layout and it allows us to put it properly on top with super */
    line-height: 0;
    vertical-align: super;
    font-size: subtitle-sm;
    font-weight: bold;
    color: primary-40;
  }
`, L = o.div`
  display: inline-flex;
  margin-right: xs;
`, v = g(
  ({
    checkableField: e,
    children: a,
    dataTestId: m,
    disabled: i,
    disabledIcon: s,
    icon: p,
    variant: r,
    withDisabledIcon: h = !0,
    ...c
  }, d) => {
    const f = y(a);
    return /* @__PURE__ */ t.jsxs(
      n,
      {
        "data-testid": m,
        disabled: i,
        disabledIcon: s,
        ref: d,
        variant: r,
        ...c,
        children: [
          !e && /* @__PURE__ */ t.jsx(w, { icon: p, size: "sm", variant: r }),
          i && h ? /* @__PURE__ */ t.jsx(L, { children: s || /* @__PURE__ */ t.jsx(u, { size: "sm" }) }) : null,
          f
        ]
      }
    );
  }
);
v.displayName = "Label";
const q = n;
export {
  v as Label,
  q as StyledLabel
};