"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.inlineContext = exports.aboveBelowCombined = exports.below = exports.above = void 0;
const react_1 = __importDefault(require("react"));
const Divider_1 = require("../Divider");
const TextContainer_1 = require("../TextContainer");
const TextBlock_1 = require("../TextBlock");
const Text_1 = require("../Text");
const Hidden_1 = require("./Hidden");
const meta = {
    component: Hidden_1.Hidden,
    title: 'checkout-web-ui/Hidden',
};
exports.default = meta;
exports.above = () => (<TextContainer_1.TextContainer>
    <TextBlock_1.TextBlock>
      The next sentence is <Text_1.Text emphasized>hidden above the small</Text_1.Text>{' '}
      breakpoint.
    </TextBlock_1.TextBlock>
    <Hidden_1.Hidden above="small">
      <TextBlock_1.TextBlock>
        Select the address that matches your card or payment method.
      </TextBlock_1.TextBlock>
    </Hidden_1.Hidden>
  </TextContainer_1.TextContainer>);
exports.below = () => (<TextContainer_1.TextContainer>
    <TextBlock_1.TextBlock>
      The next sentence is <Text_1.Text emphasized>hidden below the large</Text_1.Text>{' '}
      breakpoint.
    </TextBlock_1.TextBlock>
    <Hidden_1.Hidden below="large">
      <TextBlock_1.TextBlock>
        Select the address that matches your card or payment method.
      </TextBlock_1.TextBlock>
    </Hidden_1.Hidden>
  </TextContainer_1.TextContainer>);
exports.aboveBelowCombined = () => (<TextContainer_1.TextContainer>
    <TextBlock_1.TextBlock>
      The next sentence is{' '}
      <Text_1.Text emphasized>hidden between small and large</Text_1.Text> breakpoints.
    </TextBlock_1.TextBlock>
    <Hidden_1.Hidden above="small" below="large">
      <TextBlock_1.TextBlock>
        Select the address that matches your card or payment method.
      </TextBlock_1.TextBlock>
    </Hidden_1.Hidden>
    <Divider_1.Divider />
    <TextBlock_1.TextBlock>
      The next sentence is{' '}
      <Text_1.Text emphasized>hidden below medium and above medium</Text_1.Text> breakpoints.
    </TextBlock_1.TextBlock>
    <Hidden_1.Hidden above="medium" below="medium">
      <TextBlock_1.TextBlock>
        Select the address that matches your card or payment method.
      </TextBlock_1.TextBlock>
    </Hidden_1.Hidden>
  </TextContainer_1.TextContainer>);
exports.inlineContext = () => (<TextContainer_1.TextContainer>
    <TextBlock_1.TextBlock>
      In the next sentence, the customer’s name is{' '}
      <Text_1.Text emphasized>hidden below small</Text_1.Text> breakpoint.
    </TextBlock_1.TextBlock>
    <TextBlock_1.TextBlock>
      Hi<Hidden_1.Hidden below="medium"> Jean-Frederic</Hidden_1.Hidden>,
    </TextBlock_1.TextBlock>
  </TextContainer_1.TextContainer>);