@chakra-ui/react/dist/esm/theme/recipes/pin-input.js

Responsive and accessible React UI components built with React and Emotion

"use strict";
import { defineSlotRecipe } from '../../styled-system/config.js';
import { mapEntries } from '../../utils/entries.js';
import { inputRecipe } from './input.js';
import { pinInputAnatomy } from '@ark-ui/react/pin-input';

const { variants, defaultVariants } = inputRecipe;
const pinInputSlotRecipe = defineSlotRecipe({
  className: "chakra-pin-input",
  slots: pinInputAnatomy.keys(),
  base: {
    input: {
      ...inputRecipe.base,
      textAlign: "center",
      width: "var(--input-height)"
    }
  },
  variants: {
    size: mapEntries(variants.size, (key, value) => [key, { input: value }]),
    variant: mapEntries(variants.variant, (key, value) => [
      key,
      { input: value }
    ])
  },
  defaultVariants
});

export { pinInputSlotRecipe };