"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var breakpoints_stories_exports = {};
__export(breakpoints_stories_exports, {
  Breakpoints: () => Breakpoints,
  default: () => breakpoints_stories_default
});
module.exports = __toCommonJS(breakpoints_stories_exports);
var import_react = __toESM(require("react"));
var import_Flex = __toESM(require("../components/layout/Flex"));
var import_Text = __toESM(require("../components/asorted/Text"));
const description = `
## <Heading hidden>Overview</Heading>

Every utility class can be applied conditionally at different breakpoints, which makes it a piece of cake to build complex responsive interfaces without ever leaving your HTML.

There are five breakpoints by default, inspired by common device resolutions:

| Breakpoint prefix | Minimum width | CSS |
| --- | --- | --- |
| 'sm' | 640px | '@media (min-width: 640px) { ... }' |
| 'md' | 768px | '@media (min-width: 768px) { ... }' |
| 'lg' | 1024px | '@media (min-width: 1024px) { ... }' |
| 'xl' | 1280px | '@media (min-width: 1280px) { ... }' |
| 'xxl' | 1536px | '@media (min-width: 1536px) { ... }' |

To add a utility but only have it take effect at a certain breakpoint, all you need to do is to specify an object in the class you want to be responsive


\`\`\`html
<!-- Width of 16 by default, 32 on medium screens, and 48 on large screens -->
<Flex 
  height={400} 
  width="100%" 
  backgroundColor={{_: 'yellow', sm: 'purple', md: 'green', lg:'cyan', xl: 'orange', xxl: 'red'}}>
</Flex>
\`\`\`

## Mobile First

By default, Ledger ui uses a mobile first breakpoint system, similar to what you might be used to in other frameworks like Bootstrap or tailwind.

What this means is that unprefixed utilities (like \`uppercase\`) take effect on all screen sizes, while prefixed utilities (like \`md:uppercase\`) only take effect at the specified breakpoint *and above*.

### Targeting mobile screens

Where this approach surprises people most often is that to style something for mobile, you need to use the unprefixed version of a utility, not the \`sm:\` prefixed version. Don't think of \`sm:\` as meaning "on small screens", think of it as "at the small *breakpoint*".

<TipBad>Don't use <code className="text-sm font-bold text-slate-800">sm:</code> to target mobile devices</TipBad>

\`\`\`html
<!-- This will only center text on screens 640px and wider, not on small screens -->
<Text textAlign={{sm: "center"}}></Text>
\`\`\`

<TipGood>Use unprefixed utilities to target mobile, and override them at larger breakpoints</TipGood>

\`\`\`html
<!-- This will center text on mobile, and left align it on screens 640px and wider -->
<Text textAlign={{_: "center", sm: "left"}}></Text>
\`\`\`

`;
var breakpoints_stories_default = {
  title: "Particles",
  parameters: {
    docs: {
      description: {
        component: description
      }
    }
  }
};
const Breakpoints = () => {
  return /* @__PURE__ */ import_react.default.createElement(import_Flex.default, { flexDirection: "column", rowGap: "24px" }, /* @__PURE__ */ import_react.default.createElement(
    import_Flex.default,
    {
      flexDirection: "column",
      rowGap: "4px",
      justifyContent: "center",
      alignItems: "center",
      height: 400,
      width: "100%",
      backgroundColor: {
        _: "yellow",
        sm: "purple",
        md: "green",
        lg: "cyan",
        xl: "orange",
        xxl: "red"
      }
    },
    /* @__PURE__ */ import_react.default.createElement(import_Text.default, { display: { _: "none", sm: "block", md: "none" } }, "SM breakpoint"),
    /* @__PURE__ */ import_react.default.createElement(import_Text.default, { display: { _: "none", md: "block", lg: "none" } }, "MD breakpoint"),
    /* @__PURE__ */ import_react.default.createElement(import_Text.default, { display: { _: "none", lg: "block", xl: "none" } }, "LG breakpoint"),
    /* @__PURE__ */ import_react.default.createElement(import_Text.default, { display: { _: "none", xl: "block", xxl: "none" } }, "XL breakpoint"),
    /* @__PURE__ */ import_react.default.createElement(import_Text.default, { display: { _: "none", xxl: "block" } }, "XXL breakpoint")
  ));
};
//# sourceMappingURL=breakpoints.stories.js.map
