declare const tutorial = "\n<div style=\"padding: 15px 20px\" default-source-provider=\"Demo\">\n\n  <style>\n    frc-boolean-box {\n      margin-bottom: 5px;\n    }\n    h1 {\n      margin: 0 0 10px;\n    }\n  </style>\n\n  <h1>Boolean Box</h1>\n  \n  <p>\n    The boolean box element is used to indicate if a value is true or false. When false one color\n    is shown, and when true another is shown.\n  </p>\n\n  <fwc-code-sample title=\"Basic Usage\">\n    <!-- The value of the box is false by default. The default false color is red -->\n    <frc-boolean-box></frc-boolean-box>\n\n    <!-- Add the 'value' attribute to the box to make it true. The default true color is green. -->\n    <frc-boolean-box value></frc-boolean-box>\n\n    <!-- You can pass in a hex color into the 'false-color' attribute to change what color is shown when the boolean box is false -->\n    <frc-boolean-box false-color=\"#ff7788\"></frc-boolean-box>\n\n    <!-- You can pass in a hex color into the 'true-color' attribute to change what color is shown when the boolean box is true -->\n    <frc-boolean-box value true-color=\"#ff00ff\"></frc-boolean-box>\n\n    <!-- You can add a label to the boolean box with the 'label' attribute -->\n    <frc-boolean-box label=\"Hello\" value></frc-boolean-box>\n  </fwc-code-sample>\n\n  <fwc-code-sample title=\"With styles\">\n    <style>\n      .with-styles::part(box) {\n        border-radius: 50%;\n        border: 3px solid black;\n        color: white;\n      }\n    </style>\n    <frc-boolean-box class=\"with-styles\" value>\n      Boolean Circle\n    </frc-boolean-box>\n  </fwc-code-sample>\n\n  <h3>Try it out!</h3>\n\n  <fwc-boolean source-key=\"/box/value\" value=\"true\"></fwc-boolean>\n  <fwc-string source-key=\"/box/trueColor\" value=\"green\"></fwc-string>\n  <fwc-string source-key=\"/box/falseColor\" value=\"#ff0000\"></fwc-string>\n\n  <frc-boolean-box source-key=\"/box\"></frc-boolean-box>\n\n  <div class=\"try-it-out\">\n\n    <vaadin-text-field \n      label=\"True Color\" \n      theme=\"small\" \n      source-key=\"/box/trueColor\"\n    ></vaadin-text-field>\n\n    <vaadin-text-field \n      label=\"False Color\" \n      theme=\"small\" \n      source-key=\"/box/falseColor\"\n    ></vaadin-text-field>\n\n    <vaadin-checkbox-group theme=\"horizontal\">\n      <vaadin-checkbox source-key=\"/box/value\">Value</vaadin-checkbox>\n    </vaadin-checkbox-group>\n  </div>\n\n</div>\n";
export default tutorial;