import { a as e, n as t } from './chunk-BneVvdWh.js';
import { S as n } from './iframe-B-AKBcwT.js';
import { t as r } from './jsx-runtime-Bn1Ys6_W.js';
import { t as i } from './compiler-runtime-C9X80vSn.js';
import { n as a, r as o, t as s } from './CSSValueInput-zgyJr054.js';
import { t as c } from './InputText-CxTji68U.js';
import { n as l, r as u, t as d } from './Dropdown-CiUidz9i.js';
function f(e) {
    let t = (0, p.c)(3),
        n;
    t[0] === Symbol.for(`react.memo_cache_sentinel`)
        ? ((n = (0, h.jsx)(`path`, {
              d: `M2.5 4.5 6 8l3.5-3.5`,
              stroke: `currentColor`,
              strokeLinecap: `round`,
              strokeLinejoin: `round`,
              strokeWidth: `1.5`,
          })),
          (t[0] = n))
        : (n = t[0]);
    let r;
    return (
        t[1] === e
            ? (r = t[2])
            : ((r = (0, h.jsx)(`svg`, {
                  'aria-hidden': `true`,
                  fill: `none`,
                  focusable: `false`,
                  height: `12`,
                  viewBox: `0 0 12 12`,
                  width: `12`,
                  ...e,
                  children: n,
              })),
              (t[1] = e),
              (t[2] = r)),
        r
    );
}
var p, m, h, g, _, v, y, b, x, S, C, w, T, E, D, O, k, A, j, M, N, P, F, I;
t(() => {
    ((p = i()),
        (m = e(n())),
        o(),
        u(),
        s(),
        d(),
        c(),
        (h = r()),
        ({ fn: g } = __STORYBOOK_MODULE_TEST__),
        ({ Fragment: _ } = m),
        (v = {
            args: {
                onClick: g(),
                onClose: g(),
                onMouseDown: g(),
                onMouseUp: g(),
                onOpen: g(),
                onSubmitItem: g(),
            },
            component: l,
            parameters: {
                docs: {
                    description: {
                        component:
                            '`Dropdown` is a React component that renders a menu-like UI with a trigger that the user clicks to disclose a dropdown positioned below the trigger. The body of the dropdown can include any DOM, and many dropdowns can be combined to form a multi-item menu, like the system menu in the top toolbar of macOS.',
                    },
                },
            },
            tags: [`autodocs`],
            title: `UIKit/Controls/Dropdown`,
        }),
        (y = {
            args: {
                children: (0, h.jsxs)(`ul`, {
                    children: [
                        (0, h.jsx)(`li`, { children: `0px` }),
                        (0, h.jsx)(`li`, { children: `4px` }),
                        (0, h.jsx)(`li`, { children: `9px` }),
                        (0, h.jsx)(`li`, { children: `18px` }),
                        (0, h.jsx)(`li`, { children: `36px` }),
                        (0, h.jsx)(`li`, { children: `54px` }),
                        (0, h.jsx)(`li`, { children: `72px` }),
                        (0, h.jsx)(`li`, { children: `144px` }),
                        (0, h.jsx)(`li`, { children: `167px` }),
                        (0, h.jsx)(`li`, { children: `198px` }),
                    ],
                }),
                className: `css-lengths no-trigger-text`,
            },
        }),
        (b = {
            args: {
                children: (0, h.jsxs)(`ul`, {
                    children: [
                        (0, h.jsx)(`li`, { children: `Alabama` }),
                        (0, h.jsx)(`li`, { children: `Alaska` }),
                        (0, h.jsx)(`li`, { children: `Arizona` }),
                        (0, h.jsx)(`li`, { children: `Arkansas` }),
                        (0, h.jsx)(`li`, { children: `California` }),
                        (0, h.jsx)(`li`, { children: `Colorado` }),
                        (0, h.jsx)(`li`, { children: `Connecticut` }),
                        (0, h.jsx)(`li`, { children: `Delaware` }),
                        (0, h.jsx)(`li`, { children: `Florida` }),
                        (0, h.jsx)(`li`, { children: `Georgia` }),
                        (0, h.jsx)(`li`, { children: `Hawaii` }),
                        (0, h.jsx)(`li`, { children: `Idaho` }),
                        (0, h.jsx)(`li`, { children: `Illinois` }),
                        (0, h.jsx)(`li`, { children: `Indiana` }),
                        (0, h.jsx)(`li`, { children: `Iowa` }),
                        (0, h.jsx)(`li`, { children: `Kansas` }),
                        (0, h.jsx)(`li`, { children: `Kentucky` }),
                        (0, h.jsx)(`li`, { children: `Louisiana` }),
                        (0, h.jsx)(`li`, { children: `Maine` }),
                        (0, h.jsx)(`li`, { children: `Maryland` }),
                        (0, h.jsx)(`li`, { children: `Massachusetts` }),
                        (0, h.jsx)(`li`, { children: `Michigan` }),
                        (0, h.jsx)(`li`, { children: `Minnesota` }),
                        (0, h.jsx)(`li`, { children: `Mississippi` }),
                        (0, h.jsx)(`li`, { children: `Missouri` }),
                        (0, h.jsx)(`li`, { children: `Montana` }),
                        (0, h.jsx)(`li`, { children: `Nebraska` }),
                        (0, h.jsx)(`li`, { children: `Nevada` }),
                        (0, h.jsx)(`li`, { children: `New Hampshire` }),
                        (0, h.jsx)(`li`, { children: `New Jersey` }),
                        (0, h.jsx)(`li`, { children: `New Mexico` }),
                        (0, h.jsx)(`li`, { children: `New York` }),
                        (0, h.jsx)(`li`, { children: `North Carolina` }),
                        (0, h.jsx)(`li`, { children: `North Dakota` }),
                        (0, h.jsx)(`li`, { children: `Ohio` }),
                        (0, h.jsx)(`li`, { children: `Oklahoma` }),
                        (0, h.jsx)(`li`, { children: `Oregon` }),
                        (0, h.jsx)(`li`, { children: `Pennsylvania` }),
                        (0, h.jsx)(`li`, { children: `Rhode Island` }),
                        (0, h.jsx)(`li`, { children: `South Carolina` }),
                        (0, h.jsx)(`li`, { children: `South Dakota` }),
                        (0, h.jsx)(`li`, { children: `Tennessee` }),
                        (0, h.jsx)(`li`, { children: `Texas` }),
                        (0, h.jsx)(`li`, { children: `Utah` }),
                        (0, h.jsx)(`li`, { children: `Vermont` }),
                        (0, h.jsx)(`li`, { children: `Virginia` }),
                        (0, h.jsx)(`li`, { children: `Washington` }),
                        (0, h.jsx)(`li`, { children: `West Virginia` }),
                        (0, h.jsx)(`li`, { children: `Wisconsin` }),
                        (0, h.jsx)(`li`, { children: `Wyoming` }),
                    ],
                }),
                className: `states-dropdown`,
                isSearchable: !0,
                placeholder: `Choose a state…`,
            },
        }),
        (x = {
            args: {
                children: (0, h.jsxs)(`ul`, {
                    children: [
                        (0, h.jsxs)(`li`, {
                            'data-ukt-value': `100`,
                            children: [
                                (0, h.jsx)(`span`, {
                                    className: `item-title`,
                                    children: `Font Weight - `,
                                }),
                                `100`,
                            ],
                        }),
                        (0, h.jsxs)(`li`, {
                            'data-ukt-value': `200`,
                            children: [
                                (0, h.jsx)(`span`, {
                                    className: `item-title`,
                                    children: `Font Weight - `,
                                }),
                                `200`,
                            ],
                        }),
                        (0, h.jsxs)(`li`, {
                            'data-ukt-value': `300`,
                            children: [
                                (0, h.jsx)(`span`, {
                                    className: `item-title`,
                                    children: `Font Weight - `,
                                }),
                                `300`,
                            ],
                        }),
                        (0, h.jsxs)(`li`, {
                            'data-ukt-value': `400`,
                            children: [
                                (0, h.jsx)(`span`, {
                                    className: `item-title`,
                                    children: `Font Weight - `,
                                }),
                                `400`,
                            ],
                        }),
                        (0, h.jsxs)(`li`, {
                            'data-ukt-value': `500`,
                            children: [
                                (0, h.jsx)(`span`, {
                                    className: `item-title`,
                                    children: `Font Weight - `,
                                }),
                                `500`,
                            ],
                        }),
                        (0, h.jsxs)(`li`, {
                            'data-ukt-value': `600`,
                            children: [
                                (0, h.jsx)(`span`, {
                                    className: `item-title`,
                                    children: `Font Weight - `,
                                }),
                                `600`,
                            ],
                        }),
                        (0, h.jsxs)(`li`, {
                            'data-ukt-value': `700`,
                            children: [
                                (0, h.jsx)(`span`, {
                                    className: `item-title`,
                                    children: `Font Weight - `,
                                }),
                                `700`,
                            ],
                        }),
                    ],
                }),
                className: `font-weight`,
                isSearchable: !0,
            },
        }),
        (S = {
            args: {
                children: [
                    `View menu`,
                    (0, h.jsxs)(_, {
                        children: [
                            (0, h.jsx)(`h4`, { className: `heading`, children: `View` }),
                            (0, h.jsxs)(`ul`, {
                                children: [
                                    (0, h.jsx)(`li`, {
                                        'data-ukt-item': !0,
                                        children: `Open`,
                                    }),
                                    (0, h.jsx)(`li`, {
                                        'data-ukt-item': !0,
                                        children: `Preview`,
                                    }),
                                ],
                            }),
                            (0, h.jsx)(`h4`, { className: `heading`, children: `Edit` }),
                            (0, h.jsxs)(`ul`, {
                                children: [
                                    (0, h.jsx)(`li`, {
                                        'data-ukt-value': `save-item`,
                                        children: `Save`,
                                    }),
                                    (0, h.jsx)(`li`, {
                                        'data-ukt-value': `edit-item`,
                                        children: `Edit`,
                                    }),
                                    (0, h.jsx)(`li`, {
                                        'data-ukt-value': `delete-item`,
                                        children: `Delete`,
                                    }),
                                ],
                            }),
                        ],
                    }),
                ],
                className: `open-on-mount-context-menu`,
                isOpenOnMount: !0,
            },
        }),
        (C = {
            args: {
                children: [
                    `Open`,
                    (0, h.jsxs)(`div`, {
                        children: [
                            (0, h.jsx)(`p`, {
                                children: `Try interacting with the controls here. The dropdown should only close when you click outside of the entire dropdown or if you hit the escape key when focus isn’t in the input controls.`,
                            }),
                            (0, h.jsx)(a, {
                                cssValueType: `length`,
                                label: `Width`,
                                onSubmitValue: () => {},
                                placeholder: `100vw`,
                                unit: `vw`,
                            }),
                            (0, h.jsx)(a, {
                                cssValueType: `length`,
                                label: `Rotation`,
                                onSubmitValue: () => {},
                                placeholder: `0deg`,
                                step: 5,
                                unit: `deg`,
                            }),
                        ],
                    }),
                ],
                className: `dropdown-without-items`,
                hasItems: !1,
            },
        }),
        (w = {
            args: {
                children: (0, h.jsxs)(`ul`, {
                    children: [
                        (0, h.jsx)(`li`, { children: `0px` }),
                        (0, h.jsx)(`li`, { children: `4px` }),
                        (0, h.jsx)(`li`, { children: `9px` }),
                        (0, h.jsx)(`li`, { children: `18px` }),
                        (0, h.jsx)(`li`, { children: `36px` }),
                        (0, h.jsx)(`li`, { children: `54px` }),
                        (0, h.jsx)(`li`, { children: `72px` }),
                        (0, h.jsx)(`li`, { children: `144px` }),
                        (0, h.jsx)(`li`, { children: `167px` }),
                        (0, h.jsx)(`li`, { children: `198px` }),
                    ],
                }),
                className: `searchable-with-label`,
                isSearchable: !0,
                label: (0, h.jsxs)(`span`, {
                    style: {
                        alignItems: `center`,
                        display: `inline-flex`,
                        gap: `0.25rem`,
                    },
                    children: [`Font size`, (0, h.jsx)(f, {})],
                }),
            },
        }),
        (T = {
            args: {
                allowCreate: !0,
                children: (0, h.jsxs)(`ul`, {
                    children: [
                        (0, h.jsx)(`li`, { children: `0px` }),
                        (0, h.jsx)(`li`, { children: `4px` }),
                        (0, h.jsx)(`li`, { children: `9px` }),
                        (0, h.jsx)(`li`, { children: `18px` }),
                        (0, h.jsx)(`li`, { children: `36px` }),
                        (0, h.jsx)(`li`, { children: `54px` }),
                        (0, h.jsx)(`li`, { children: `72px` }),
                        (0, h.jsx)(`li`, { children: `144px` }),
                        (0, h.jsx)(`li`, { children: `167px` }),
                        (0, h.jsx)(`li`, { children: `198px` }),
                    ],
                }),
                className: `searchable-and-allow-create`,
                isSearchable: !0,
                label: `Font size`,
            },
        }),
        (E = {
            args: {
                allowCreate: !0,
                children: [
                    (0, h.jsx)(a, {
                        name: `cssinputbackgroundsize`,
                        onSubmitValue: () => {},
                        placeholder: `cover`,
                        validator: /^(auto|contain|cover)$/,
                    }),
                    (0, h.jsxs)(`ul`, {
                        children: [
                            (0, h.jsx)(`li`, { children: `cover` }),
                            (0, h.jsx)(`li`, { children: `contain` }),
                            (0, h.jsx)(`li`, { children: `auto` }),
                            (0, h.jsx)(`li`, { children: `50px` }),
                            (0, h.jsx)(`li`, { children: `100px` }),
                            (0, h.jsx)(`li`, { children: `200px` }),
                            (0, h.jsx)(`li`, { children: `50%` }),
                        ],
                    }),
                ],
                className: `css-value-input-trigger`,
                hasItems: !0,
                label: `Background size`,
            },
        }),
        (D = {
            args: {
                children: [
                    (0, h.jsx)(`textarea`, {}),
                    (0, h.jsxs)(`ul`, {
                        children: [
                            (0, h.jsx)(`li`, {
                                children: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ullamcorper fringilla quam, vel tincidunt nisl mattis vel.`,
                            }),
                            (0, h.jsx)(`li`, {
                                children: `Aenean posuere erat sed enim luctus, et accumsan nisl elementum. Nulla vel blandit urna, vel accumsan nulla. Nulla varius luctus ex, gravida ultrices orci sagittis eu.`,
                            }),
                            (0, h.jsx)(`li`, {
                                children: `Quisque vitae magna euismod ligula molestie maximus id et nunc. Nam et lacus euismod, porttitor massa vel, sollicitudin ex. Sed ut tellus suscipit, faucibus tortor nec, fermentum mi.`,
                            }),
                            (0, h.jsx)(`li`, {
                                children: `Nulla sagittis justo non accumsan sagittis. Cras a eros et dolor dapibus bibendum lobortis quis ante. Ut eget scelerisque massa.`,
                            }),
                            (0, h.jsx)(`li`, {
                                children: `Vestibulum quis dignissim nunc. Mauris fringilla at nulla non lacinia. Etiam tristique elit non nisl finibus, fringilla hendrerit ligula hendrerit. Fusce eget leo lacinia, eleifend diam non, suscipit purus.`,
                            }),
                        ],
                    }),
                ],
                className: `textarea-trigger`,
                hasItems: !0,
            },
        }),
        (O = {
            args: {
                children: [
                    `Colors`,
                    (0, h.jsxs)(`ul`, {
                        children: [
                            (0, h.jsx)(`li`, {
                                children: (0, h.jsxs)(`label`, {
                                    children: [
                                        (0, h.jsx)(`input`, { type: `checkbox` }),
                                        ` Red`,
                                    ],
                                }),
                            }),
                            (0, h.jsx)(`li`, {
                                children: (0, h.jsxs)(`label`, {
                                    children: [
                                        (0, h.jsx)(`input`, { type: `checkbox` }),
                                        ` Blue`,
                                    ],
                                }),
                            }),
                            (0, h.jsx)(`li`, {
                                children: (0, h.jsxs)(`label`, {
                                    children: [
                                        (0, h.jsx)(`input`, { type: `checkbox` }),
                                        ` Yellow`,
                                    ],
                                }),
                            }),
                            (0, h.jsx)(`li`, {
                                children: (0, h.jsxs)(`label`, {
                                    children: [
                                        (0, h.jsx)(`input`, { type: `checkbox` }),
                                        ` Cyan`,
                                    ],
                                }),
                            }),
                            (0, h.jsx)(`li`, {
                                children: (0, h.jsxs)(`label`, {
                                    children: [
                                        (0, h.jsx)(`input`, { type: `checkbox` }),
                                        ` Orchid`,
                                    ],
                                }),
                            }),
                            (0, h.jsx)(`li`, {
                                children: (0, h.jsxs)(`label`, {
                                    children: [
                                        (0, h.jsx)(`input`, { type: `checkbox` }),
                                        ` Slate`,
                                    ],
                                }),
                            }),
                        ],
                    }),
                ],
                className: `checkboxes`,
                keepOpenOnSubmit: !0,
            },
        }),
        (k = {
            children: [
                (0, h.jsx)(`button`, {
                    'aria-label': `Open user menu`,
                    className: `avatar-profile has-avatar`,
                    popoverTarget: `avatar-menu-popover`,
                    style: {
                        backgroundImage: `url("https://picsum.photos/id/40/100/100")`,
                    },
                    children: `AP`,
                }),
                (0, h.jsxs)(`ul`, {
                    className: `menu-list avatar-dropdown`,
                    children: [
                        (0, h.jsx)(`div`, {
                            className: `avatar-edit has-avatar`,
                            style: {
                                backgroundImage: `url("https://picsum.photos/id/40/100/100")`,
                            },
                            children: (0, h.jsx)(`div`, {
                                className: `avatar-initials`,
                                children: `AP`,
                            }),
                        }),
                        (0, h.jsx)(`div`, {
                            className: `profile-email-wrap`,
                            children: (0, h.jsx)(`p`, {
                                className: `profile-email`,
                                children: `andrew@example.com`,
                            }),
                        }),
                        (0, h.jsx)(`form`, {
                            method: `post`,
                            action: `/logout`,
                            className: `sign-out-wrap`,
                            children: (0, h.jsx)(`button`, {
                                className: `btn-ghost`,
                                type: `submit`,
                                children: `Sign Out`,
                            }),
                        }),
                    ],
                }),
            ],
            className: `avatar-menu`,
        }),
        (A = {
            args: k,
            render() {
                return (0, h.jsxs)(h.Fragment, {
                    children: [
                        (0, h.jsxs)(`header`, {
                            className: `mk-header`,
                            children: [
                                (0, h.jsxs)(`nav`, {
                                    className: `mk-nav a1`,
                                    children: [
                                        (0, h.jsx)(`a`, { className: `logo`, href: `/` }),
                                        (0, h.jsx)(`a`, {
                                            className: `btn-text logo-text`,
                                            href: `/`,
                                            children: `UIKit`,
                                        }),
                                    ],
                                }),
                                (0, h.jsx)(`div`, {
                                    className: `mk-nav center`,
                                    children: (0, h.jsxs)(`h5`, {
                                        className: `mk subtitle`,
                                        children: [
                                            `Welcome! Join our`,
                                            ` `,
                                            (0, h.jsx)(`a`, {
                                                className: `home-link`,
                                                rel: `noreferrer`,
                                                href: `https://discord.gg/dTpXZpQ9Rz`,
                                                target: `_blank`,
                                                children: `Discord.`,
                                            }),
                                        ],
                                    }),
                                }),
                                (0, h.jsxs)(`nav`, {
                                    className: `mk-nav a2`,
                                    children: [
                                        (0, h.jsx)(`a`, {
                                            className: `btn-text`,
                                            href: `/projects`,
                                            children: `Projects`,
                                        }),
                                        (0, h.jsx)(l, { ...k }),
                                    ],
                                }),
                            ],
                        }),
                        (0, h.jsx)(`h1`, { children: `Lorem ipsum` }),
                    ],
                });
            },
        }),
        (j = {
            args: {
                children: (0, h.jsxs)(`ul`, {
                    children: [
                        (0, h.jsx)(`li`, { children: `0px` }),
                        (0, h.jsx)(`li`, { children: `4px` }),
                        (0, h.jsx)(`li`, { children: `9px` }),
                        (0, h.jsx)(`li`, { children: `18px` }),
                        (0, h.jsx)(`li`, { children: `36px` }),
                        (0, h.jsx)(`li`, { children: `54px` }),
                        (0, h.jsx)(`li`, { children: `72px` }),
                        (0, h.jsx)(`li`, { children: `144px` }),
                        (0, h.jsx)(`li`, { children: `167px` }),
                        (0, h.jsx)(`li`, { children: `198px` }),
                    ],
                }),
                className: `disabled-dropdown`,
                disabled: !0,
                isSearchable: !0,
                label: `Disabled`,
                name: `disabledexample`,
                value: `167px`,
            },
        }),
        (M = {
            args: {
                children: (0, h.jsxs)(`ul`, {
                    children: [
                        (0, h.jsx)(`li`, { children: `the carbon in our apple pies` }),
                        (0, h.jsx)(`li`, { children: `sea of tranquility tesseract` }),
                        (0, h.jsx)(`li`, { children: `encyclopaedia galactica` }),
                        (0, h.jsx)(`li`, { children: `billions upon billions` }),
                        (0, h.jsx)(`li`, { children: `network of wormholes` }),
                        (0, h.jsx)(`li`, { children: `tingling of the spine` }),
                        (0, h.jsx)(`li`, { children: `corpus callosum` }),
                        (0, h.jsx)(`li`, { children: `finite but unbounded` }),
                    ],
                }),
                className: `overlapping-dropdown no-trigger-text`,
            },
        }),
        (N = {
            args: {
                children: (0, h.jsxs)(`ul`, {
                    children: [
                        (0, h.jsx)(`li`, { children: `0px` }),
                        (0, h.jsx)(`li`, { children: `4px` }),
                        (0, h.jsx)(`li`, { children: `9px` }),
                        (0, h.jsx)(`li`, { children: `18px` }),
                        (0, h.jsx)(`li`, { children: `36px` }),
                        (0, h.jsx)(`li`, { children: `54px` }),
                        (0, h.jsx)(`li`, { children: `72px` }),
                        (0, h.jsx)(`li`, { children: `144px` }),
                        (0, h.jsx)(`li`, { children: `167px` }),
                        (0, h.jsx)(`li`, { children: `198px` }),
                    ],
                }),
                className: `out-of-bounds-example position-right`,
                isSearchable: !0,
                name: `outofboundsatright`,
                placeholder: `Fill available space`,
            },
        }),
        (P = {
            args: {
                children: (0, h.jsxs)(`ul`, {
                    children: [
                        (0, h.jsx)(`li`, { children: `Antarctica` }),
                        (0, h.jsx)(`li`, { children: `Arctic Circle` }),
                        (0, h.jsx)(`li`, { children: `North Pole` }),
                    ],
                }),
                className: `out-of-bounds-example no-direction-change`,
                isSearchable: !0,
                name: `outofboundsatbottomnodirectionchange`,
                placeholder: `Show below even though it goes out of bounds`,
            },
        }),
        (F = {
            args: {
                children: (0, h.jsxs)(`ul`, {
                    children: [
                        (0, h.jsx)(`li`, { children: `Antarctica` }),
                        (0, h.jsx)(`li`, { children: `Arctic Circle` }),
                        (0, h.jsx)(`li`, { children: `North Pole` }),
                    ],
                }),
                className: `out-of-bounds-example no-direction-change`,
                constrainHeightToAvoidClipping: !0,
                isSearchable: !0,
                name: `constrainheighttoavoidclipping`,
                placeholder: `Stay below, but scroll if clipping remains`,
            },
        }),
        (y.parameters = {
            ...y.parameters,
            docs: {
                ...y.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    children: <ul>
                <li>0px</li>
                <li>4px</li>
                <li>9px</li>
                <li>18px</li>
                <li>36px</li>
                <li>54px</li>
                <li>72px</li>
                <li>144px</li>
                <li>167px</li>
                <li>198px</li>
            </ul>,
    className: 'css-lengths no-trigger-text'
  }
}`,
                    ...y.parameters?.docs?.source,
                },
            },
        }),
        (b.parameters = {
            ...b.parameters,
            docs: {
                ...b.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    children: <ul>
                <li>Alabama</li>
                <li>Alaska</li>
                <li>Arizona</li>
                <li>Arkansas</li>
                <li>California</li>
                <li>Colorado</li>
                <li>Connecticut</li>
                <li>Delaware</li>
                <li>Florida</li>
                <li>Georgia</li>
                <li>Hawaii</li>
                <li>Idaho</li>
                <li>Illinois</li>
                <li>Indiana</li>
                <li>Iowa</li>
                <li>Kansas</li>
                <li>Kentucky</li>
                <li>Louisiana</li>
                <li>Maine</li>
                <li>Maryland</li>
                <li>Massachusetts</li>
                <li>Michigan</li>
                <li>Minnesota</li>
                <li>Mississippi</li>
                <li>Missouri</li>
                <li>Montana</li>
                <li>Nebraska</li>
                <li>Nevada</li>
                <li>New Hampshire</li>
                <li>New Jersey</li>
                <li>New Mexico</li>
                <li>New York</li>
                <li>North Carolina</li>
                <li>North Dakota</li>
                <li>Ohio</li>
                <li>Oklahoma</li>
                <li>Oregon</li>
                <li>Pennsylvania</li>
                <li>Rhode Island</li>
                <li>South Carolina</li>
                <li>South Dakota</li>
                <li>Tennessee</li>
                <li>Texas</li>
                <li>Utah</li>
                <li>Vermont</li>
                <li>Virginia</li>
                <li>Washington</li>
                <li>West Virginia</li>
                <li>Wisconsin</li>
                <li>Wyoming</li>
            </ul>,
    className: 'states-dropdown',
    isSearchable: true,
    placeholder: 'Choose a state…'
  }
}`,
                    ...b.parameters?.docs?.source,
                },
            },
        }),
        (x.parameters = {
            ...x.parameters,
            docs: {
                ...x.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    children: <ul>
                <li data-ukt-value="100">
                    <span className="item-title">Font Weight - </span>
                    100
                </li>
                <li data-ukt-value="200">
                    <span className="item-title">Font Weight - </span>
                    200
                </li>
                <li data-ukt-value="300">
                    <span className="item-title">Font Weight - </span>
                    300
                </li>
                <li data-ukt-value="400">
                    <span className="item-title">Font Weight - </span>
                    400
                </li>
                <li data-ukt-value="500">
                    <span className="item-title">Font Weight - </span>
                    500
                </li>
                <li data-ukt-value="600">
                    <span className="item-title">Font Weight - </span>
                    600
                </li>
                <li data-ukt-value="700">
                    <span className="item-title">Font Weight - </span>
                    700
                </li>
            </ul>,
    className: 'font-weight',
    isSearchable: true
  }
}`,
                    ...x.parameters?.docs?.source,
                },
            },
        }),
        (S.parameters = {
            ...S.parameters,
            docs: {
                ...S.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    children: ['View menu', <Fragment>
                <h4 className="heading">View</h4>
                <ul>
                    <li data-ukt-item>Open</li>
                    <li data-ukt-item>Preview</li>
                </ul>
                <h4 className="heading">Edit</h4>
                <ul>
                    <li data-ukt-value="save-item">Save</li>
                    <li data-ukt-value="edit-item">Edit</li>
                    <li data-ukt-value="delete-item">Delete</li>
                </ul>
            </Fragment>],
    className: 'open-on-mount-context-menu',
    isOpenOnMount: true
  }
}`,
                    ...S.parameters?.docs?.source,
                },
            },
        }),
        (C.parameters = {
            ...C.parameters,
            docs: {
                ...C.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    children: ['Open', <div>
                <p>
                    Try interacting with the controls here. The dropdown should only close
                    when you click outside of the entire dropdown or if you hit the escape
                    key when focus isn’t in the input controls.
                </p>
                <CSSValueInput cssValueType="length" label="Width" onSubmitValue={() => {}} placeholder="100vw" unit="vw" />
                <CSSValueInput cssValueType="length" label="Rotation" onSubmitValue={() => {}} placeholder="0deg" step={5} unit="deg" />
            </div>],
    className: 'dropdown-without-items',
    hasItems: false
  }
}`,
                    ...C.parameters?.docs?.source,
                },
            },
        }),
        (w.parameters = {
            ...w.parameters,
            docs: {
                ...w.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    children: <ul>
                <li>0px</li>
                <li>4px</li>
                <li>9px</li>
                <li>18px</li>
                <li>36px</li>
                <li>54px</li>
                <li>72px</li>
                <li>144px</li>
                <li>167px</li>
                <li>198px</li>
            </ul>,
    className: 'searchable-with-label',
    isSearchable: true,
    label: <span style={{
      alignItems: 'center',
      display: 'inline-flex',
      gap: '0.25rem'
    }}>
                Font size
                <ChevronDownIcon />
            </span>
  }
}`,
                    ...w.parameters?.docs?.source,
                },
            },
        }),
        (T.parameters = {
            ...T.parameters,
            docs: {
                ...T.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    allowCreate: true,
    children: <ul>
                <li>0px</li>
                <li>4px</li>
                <li>9px</li>
                <li>18px</li>
                <li>36px</li>
                <li>54px</li>
                <li>72px</li>
                <li>144px</li>
                <li>167px</li>
                <li>198px</li>
            </ul>,
    className: 'searchable-and-allow-create',
    isSearchable: true,
    label: 'Font size'
  }
}`,
                    ...T.parameters?.docs?.source,
                },
            },
        }),
        (E.parameters = {
            ...E.parameters,
            docs: {
                ...E.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    allowCreate: true,
    children: [<CSSValueInput name="cssinputbackgroundsize" onSubmitValue={() => {}} placeholder="cover" validator={/^(auto|contain|cover)$/} />, <ul>
                <li>cover</li>
                <li>contain</li>
                <li>auto</li>
                <li>50px</li>
                <li>100px</li>
                <li>200px</li>
                <li>50%</li>
            </ul>],
    className: 'css-value-input-trigger',
    hasItems: true,
    label: 'Background size'
  }
}`,
                    ...E.parameters?.docs?.source,
                },
            },
        }),
        (D.parameters = {
            ...D.parameters,
            docs: {
                ...D.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    children: [<textarea></textarea>, <ul>
                <li>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
                    ullamcorper fringilla quam, vel tincidunt nisl mattis vel.
                </li>
                <li>
                    Aenean posuere erat sed enim luctus, et accumsan nisl elementum. Nulla
                    vel blandit urna, vel accumsan nulla. Nulla varius luctus ex, gravida
                    ultrices orci sagittis eu.
                </li>
                <li>
                    Quisque vitae magna euismod ligula molestie maximus id et nunc. Nam et
                    lacus euismod, porttitor massa vel, sollicitudin ex. Sed ut tellus
                    suscipit, faucibus tortor nec, fermentum mi.
                </li>
                <li>
                    Nulla sagittis justo non accumsan sagittis. Cras a eros et dolor
                    dapibus bibendum lobortis quis ante. Ut eget scelerisque massa.
                </li>
                <li>
                    Vestibulum quis dignissim nunc. Mauris fringilla at nulla non lacinia.
                    Etiam tristique elit non nisl finibus, fringilla hendrerit ligula
                    hendrerit. Fusce eget leo lacinia, eleifend diam non, suscipit purus.
                </li>
            </ul>],
    className: 'textarea-trigger',
    hasItems: true
  }
}`,
                    ...D.parameters?.docs?.source,
                },
            },
        }),
        (O.parameters = {
            ...O.parameters,
            docs: {
                ...O.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    children: ['Colors', <ul>
                <li>
                    <label>
                        <input type="checkbox" /> Red
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" /> Blue
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" /> Yellow
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" /> Cyan
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" /> Orchid
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox" /> Slate
                    </label>
                </li>
            </ul>],
    className: 'checkboxes',
    keepOpenOnSubmit: true
  }
}`,
                    ...O.parameters?.docs?.source,
                },
            },
        }),
        (A.parameters = {
            ...A.parameters,
            docs: {
                ...A.parameters?.docs,
                source: {
                    originalSource: `{
  args: FIXED_HEADER_PROPS,
  render() {
    // const [dateStart, setDateStart] = useState(
    //     FIXED_HEADER_PROPS.dateStart,
    // );
    // const [dateEnd, setDateEnd] = useState(
    //     FIXED_HEADER_PROPS.dateEnd,
    // );

    return <>
                <header className="mk-header">
                    <nav className="mk-nav a1">
                        <a className="logo" href="/"></a>
                        <a className="btn-text logo-text" href="/">
                            UIKit
                        </a>
                    </nav>
                    <div className="mk-nav center">
                        <h5 className="mk subtitle">
                            Welcome! Join our{' '}
                            <a className="home-link" rel="noreferrer" href="https://discord.gg/dTpXZpQ9Rz" target="_blank">
                                Discord.
                            </a>
                        </h5>
                    </div>
                    <nav className="mk-nav a2">
                        <a className="btn-text" href="/projects">
                            Projects
                        </a>
                        <Dropdown {...FIXED_HEADER_PROPS} />
                    </nav>
                </header>
                <h1>Lorem ipsum</h1>
            </>;
  }
}`,
                    ...A.parameters?.docs?.source,
                },
            },
        }),
        (j.parameters = {
            ...j.parameters,
            docs: {
                ...j.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    children: <ul>
                <li>0px</li>
                <li>4px</li>
                <li>9px</li>
                <li>18px</li>
                <li>36px</li>
                <li>54px</li>
                <li>72px</li>
                <li>144px</li>
                <li>167px</li>
                <li>198px</li>
            </ul>,
    className: 'disabled-dropdown',
    disabled: true,
    isSearchable: true,
    label: 'Disabled',
    name: 'disabledexample',
    value: '167px'
  }
}`,
                    ...j.parameters?.docs?.source,
                },
            },
        }),
        (M.parameters = {
            ...M.parameters,
            docs: {
                ...M.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    children: <ul>
                <li>the carbon in our apple pies</li>
                <li>sea of tranquility tesseract</li>
                <li>encyclopaedia galactica</li>
                <li>billions upon billions</li>
                <li>network of wormholes</li>
                <li>tingling of the spine</li>
                <li>corpus callosum</li>
                <li>finite but unbounded</li>
            </ul>,
    className: 'overlapping-dropdown no-trigger-text'
  }
}`,
                    ...M.parameters?.docs?.source,
                },
            },
        }),
        (N.parameters = {
            ...N.parameters,
            docs: {
                ...N.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    children: <ul>
                <li>0px</li>
                <li>4px</li>
                <li>9px</li>
                <li>18px</li>
                <li>36px</li>
                <li>54px</li>
                <li>72px</li>
                <li>144px</li>
                <li>167px</li>
                <li>198px</li>
            </ul>,
    className: 'out-of-bounds-example position-right',
    isSearchable: true,
    name: 'outofboundsatright',
    placeholder: 'Fill available space'
  }
}`,
                    ...N.parameters?.docs?.source,
                },
            },
        }),
        (P.parameters = {
            ...P.parameters,
            docs: {
                ...P.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    children: <ul>
                <li>Antarctica</li>
                <li>Arctic Circle</li>
                <li>North Pole</li>
            </ul>,
    className: 'out-of-bounds-example no-direction-change',
    isSearchable: true,
    name: 'outofboundsatbottomnodirectionchange',
    placeholder: 'Show below even though it goes out of bounds'
  }
}`,
                    ...P.parameters?.docs?.source,
                },
            },
        }),
        (F.parameters = {
            ...F.parameters,
            docs: {
                ...F.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    children: <ul>
                <li>Antarctica</li>
                <li>Arctic Circle</li>
                <li>North Pole</li>
            </ul>,
    className: 'out-of-bounds-example no-direction-change',
    constrainHeightToAvoidClipping: true,
    isSearchable: true,
    name: 'constrainheighttoavoidclipping',
    placeholder: 'Stay below, but scroll if clipping remains'
  }
}`,
                    ...F.parameters?.docs?.source,
                },
            },
        }),
        (I = [
            `CSSLengthsDropdown`,
            `StatesDropdown`,
            `FontWeightDropdown`,
            `ShowContextMenuOnMount`,
            `DropdownWithInteractiveContents`,
            `SearchableWithLabel`,
            `SearchableAndAllowCreate`,
            `CSSValueInputTrigger`,
            `TextareaTrigger`,
            `CheckboxesDropdown`,
            `FixedHeader`,
            `DisabledDropdown`,
            `OverlappingDropdown`,
            `OutOfBoundsAtRight`,
            `OutOfBoundsWithNoDirectionChange`,
            `ConstrainHeightToAvoidClipping`,
        ]));
})();
export {
    y as CSSLengthsDropdown,
    E as CSSValueInputTrigger,
    O as CheckboxesDropdown,
    F as ConstrainHeightToAvoidClipping,
    j as DisabledDropdown,
    C as DropdownWithInteractiveContents,
    A as FixedHeader,
    x as FontWeightDropdown,
    N as OutOfBoundsAtRight,
    P as OutOfBoundsWithNoDirectionChange,
    M as OverlappingDropdown,
    T as SearchableAndAllowCreate,
    w as SearchableWithLabel,
    S as ShowContextMenuOnMount,
    b as StatesDropdown,
    D as TextareaTrigger,
    I as __namedExportsOrder,
    v as default,
};
