welcome-ui/dist/field-styles-CfVLcVQp.mjs

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

"use client";
import { th as d, css as a } from "@xstyled/styled-components";
const o = {
  lg: "sm",
  md: "sm",
  sm: "sm",
  xs: "xs"
}, f = ({
  iconPlacement: e,
  isClearable: i,
  size: l,
  transparent: $,
  variant: s
}) => {
  const t = o[l];
  return a`
    ${d("defaultFields.default")};
    ${s && d(`defaultFields.variants.${s}`)};
    width: 100%;
    transition: medium;
    appearance: none;
    ${l && d(`defaultFields.sizes.${l}`)};

    ${/* left icon or both */
  (e === "left" || e === "both") && a`
        padding-left: calc(
          ${d(`defaultFields.sizes.${l}.paddingLeft`)} + ${d(`icons.${t}`)} +
            ${d("space.sm")}
        );
      `};

    ${/* is clearable or right icon */
  (i || e === "right" || e === "both") && a`
        padding-right: calc(
          ${d(`defaultFields.sizes.${l}.paddingLeft`)} + ${d(`icons.${t}`)} +
            ${d("space.sm")}
        );
      `};

    ${/* is clearable and got a right/both icon */
  i && (e === "right" || e === "both") && a`
        padding-right: calc(
          ${d(`defaultFields.sizes.${l}.paddingLeft`)} + ${d(`icons.${t}`)} +
            ${d(`icons.${t}`)} + ${d("space.sm")} + ${d("space.sm")}
        );
      `};

    &:hover {
      ${!s && d("defaultFields.hover.default")};
    }

    ${!s && $ && a`
      border-color: transparent;
      background-color: transparent;

      &:hover {
        ${d("defaultFields.hover.transparency")};
      }
    `}

    &::placeholder {
      ${d("defaultFields.placeholder")};
    }

    &:focus {
      ${!s && d("defaultFields.focused.default")};
      ${s === "danger" && d("defaultFields.focused.danger")};
      ${s === "warning" && d("defaultFields.focused.warning")};
      ${s === "success" && d("defaultFields.focused.success")};
    }

    &[disabled] {
      ${d("defaultFields.disabled")};
    }

    &:invalid,
    &:-moz-submit-invalid,
    &:-moz-ui-invalid {
      box-shadow: none;
    }
  `;
};
export {
  o as F,
  f as d
};