import { n as e } from './chunk-BneVvdWh.js';
import { t } from './jsx-runtime-Bn1Ys6_W.js';
import { n, r, t as i } from './CSSValueInput-zgyJr054.js';
import { t as a } from './InputText-CxTji68U.js';
var o, s, c, l, u, d, f, p, m, h, g, _, v;
e(() => {
    (r(),
        i(),
        a(),
        (o = t()),
        (s = {
            component: n,
            parameters: {
                docs: {
                    description: {
                        component:
                            '`CSSValueInput` is a React component that renders a text input that can take and update a CSS value of a particular type with a default unit. The input’s behavior is similar to those in design applications such as Adobe Illustrator or XD.',
                    },
                },
            },
            tags: [`autodocs`],
            title: `UIKit/Controls/CSSValueInput`,
        }),
        (c = {
            args: {
                className: `my-special-input`,
                cssValueType: `length`,
                label: `Font size`,
                name: `fontsize`,
                placeholder: `1rem`,
                tabIndex: 1,
                unit: `rem`,
                validator:
                    /^(xx-small|x-small|small|medium|large|x-large|xx-large|xxx-large|inherit)$/,
                value: `24px`,
            },
        }),
        (l = {
            args: {
                className: `my-panel-input`,
                cssValueType: `time`,
                label: `Duration`,
                max: 20,
                min: 0,
                name: `duration`,
                placeholder: `0.25s`,
                step: 0.1,
                unit: `s`,
            },
        }),
        (u = {
            args: {
                className: `flex-item-example`,
                cssValueType: `angle`,
                icon: (0, o.jsx)(`svg`, {
                    width: `100px`,
                    height: `100px`,
                    viewBox: `0 0 100 100`,
                    version: `1.1`,
                    xmlns: `http://www.w3.org/2000/svg`,
                    children: (0, o.jsx)(`g`, {
                        stroke: `none`,
                        strokeWidth: `1`,
                        fill: `none`,
                        children: (0, o.jsxs)(`g`, {
                            transform: `translate(2, 2)`,
                            stroke: `#222F3E`,
                            strokeWidth: `4`,
                            children: [
                                (0, o.jsx)(`path`, {
                                    d: `M56.5106952,10.5464071 C60.8135865,11.5200327 64.8423906,13.2161538 68.4628809,15.5005439 L76.8618891,8.97963811 L87.0203619,19.1381109 L80.4994561,27.5371191 C82.7838462,31.1576094 84.4799673,35.1864135 85.4535929,39.4893048 L96,40.816875 L96,55.183125 L85.4535929,56.5106952 C84.4799673,60.8135865 82.7838462,64.8423906 80.4994561,68.4628809 L87.0203619,76.8618891 L76.8618891,87.0203619 L68.4628809,80.4994561 C64.8423906,82.7838462 60.8135865,84.4799673 56.5106952,85.4535929 L55.183125,96 L40.816875,96 L39.4893048,85.4535929 C35.1864135,84.4799673 31.1576094,82.7838462 27.5371191,80.4994561 L19.1381109,87.0203619 L8.97963811,76.8618891 L15.5005439,68.4628809 C13.2161538,64.8423906 11.5200327,60.8135865 10.5464071,56.5106952 L0,55.183125 L0,40.816875 L10.5464071,39.4893048 C11.5200327,35.1864135 13.2161538,31.1576094 15.5005439,27.5371191 L8.97963811,19.1381109 L19.1381109,8.97963811 L27.5371191,15.5005439 C31.1576094,13.2161538 35.1864135,11.5200327 39.4893048,10.5464071 L40.816875,0 L55.183125,0 L56.5106952,10.5464071 Z`,
                                    id: `Layer-1`,
                                }),
                                (0, o.jsx)(`circle`, { cx: `48`, cy: `48`, r: `14.4` }),
                            ],
                        }),
                    }),
                }),
                label: `Rotate Z`,
                name: `rotatez`,
                placeholder: `0deg`,
                step: 45,
                unit: `deg`,
                value: `90deg`,
            },
        }),
        (d = {
            args: {
                cssValueType: `percent`,
                label: `Width`,
                min: 0,
                name: `width`,
                placeholder: `100%`,
                step: 10,
                unit: `%`,
                value: `30%`,
            },
        }),
        (f = {
            args: {
                className: `my-special-input`,
                cssValueType: `length`,
                name: `labelless`,
                placeholder: `1rem`,
                title: `No label`,
                unit: `rem`,
                value: `24px`,
            },
        }),
        (p = {
            args: {
                className: `letter-spacing`,
                getValueAsNumber: (e) =>
                    typeof e == `number`
                        ? e
                        : typeof e == `string` && e.toLowerCase() === `normal`
                          ? 0
                          : parseFloat(e),
                label: `Letter spacing`,
                name: `letterspacing`,
                placeholder: `normal`,
                tabIndex: 2,
            },
        }),
        (m = {
            args: {
                className: `background-size`,
                label: `Background Size`,
                name: `backgroundsize`,
                unit: `%`,
                validator: /^(auto|contain|cover)$/,
                value: `cover`,
            },
        }),
        (h = {
            args: {
                cssValueType: `integer`,
                label: `z-index`,
                name: `zindex`,
                value: `0`,
            },
        }),
        (g = {
            args: {
                cssValueType: `integer`,
                label: `opacity`,
                name: `opacity`,
                value: `0`,
            },
        }),
        (_ = {
            args: {
                cssValueType: `length`,
                label: `line height`,
                name: `line-height`,
                step: 0.1,
                unit: ``,
                value: `1.4`,
            },
        }),
        (c.parameters = {
            ...c.parameters,
            docs: {
                ...c.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    className: 'my-special-input',
    cssValueType: 'length',
    label: 'Font size',
    name: 'fontsize',
    placeholder: '1rem',
    tabIndex: 1,
    unit: 'rem',
    validator: /^(xx-small|x-small|small|medium|large|x-large|xx-large|xxx-large|inherit)$/,
    value: '24px'
  }
}`,
                    ...c.parameters?.docs?.source,
                },
            },
        }),
        (l.parameters = {
            ...l.parameters,
            docs: {
                ...l.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    className: 'my-panel-input',
    cssValueType: 'time',
    label: 'Duration',
    max: 20,
    min: 0,
    name: 'duration',
    placeholder: '0.25s',
    step: 0.1,
    unit: 's'
  }
}`,
                    ...l.parameters?.docs?.source,
                },
            },
        }),
        (u.parameters = {
            ...u.parameters,
            docs: {
                ...u.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    className: 'flex-item-example',
    cssValueType: 'angle',
    icon: <svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
                <g stroke="none" strokeWidth="1" fill="none">
                    <g transform="translate(2, 2)" stroke="#222F3E" strokeWidth="4">
                        <path d="M56.5106952,10.5464071 C60.8135865,11.5200327 64.8423906,13.2161538 68.4628809,15.5005439 L76.8618891,8.97963811 L87.0203619,19.1381109 L80.4994561,27.5371191 C82.7838462,31.1576094 84.4799673,35.1864135 85.4535929,39.4893048 L96,40.816875 L96,55.183125 L85.4535929,56.5106952 C84.4799673,60.8135865 82.7838462,64.8423906 80.4994561,68.4628809 L87.0203619,76.8618891 L76.8618891,87.0203619 L68.4628809,80.4994561 C64.8423906,82.7838462 60.8135865,84.4799673 56.5106952,85.4535929 L55.183125,96 L40.816875,96 L39.4893048,85.4535929 C35.1864135,84.4799673 31.1576094,82.7838462 27.5371191,80.4994561 L19.1381109,87.0203619 L8.97963811,76.8618891 L15.5005439,68.4628809 C13.2161538,64.8423906 11.5200327,60.8135865 10.5464071,56.5106952 L0,55.183125 L0,40.816875 L10.5464071,39.4893048 C11.5200327,35.1864135 13.2161538,31.1576094 15.5005439,27.5371191 L8.97963811,19.1381109 L19.1381109,8.97963811 L27.5371191,15.5005439 C31.1576094,13.2161538 35.1864135,11.5200327 39.4893048,10.5464071 L40.816875,0 L55.183125,0 L56.5106952,10.5464071 Z" id="Layer-1"></path>
                        <circle cx="48" cy="48" r="14.4"></circle>
                    </g>
                </g>
            </svg>,
    label: 'Rotate Z',
    name: 'rotatez',
    placeholder: '0deg',
    step: 45,
    unit: 'deg',
    value: '90deg'
  }
}`,
                    ...u.parameters?.docs?.source,
                },
            },
        }),
        (d.parameters = {
            ...d.parameters,
            docs: {
                ...d.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    cssValueType: 'percent',
    label: 'Width',
    min: 0,
    name: 'width',
    placeholder: '100%',
    step: 10,
    unit: '%',
    value: '30%'
  }
}`,
                    ...d.parameters?.docs?.source,
                },
            },
        }),
        (f.parameters = {
            ...f.parameters,
            docs: {
                ...f.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    className: 'my-special-input',
    cssValueType: 'length',
    name: 'labelless',
    placeholder: '1rem',
    title: 'No label',
    unit: 'rem',
    value: '24px'
  }
}`,
                    ...f.parameters?.docs?.source,
                },
            },
        }),
        (p.parameters = {
            ...p.parameters,
            docs: {
                ...p.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    className: 'letter-spacing',
    getValueAsNumber: (value: number | string) => {
      if (typeof value === 'number') return value;
      // “normal” for letter-spacing is effectively equivalent to 0
      if (typeof value === 'string' && value.toLowerCase() === 'normal') {
        return 0;
      }
      return parseFloat(value);
    },
    label: 'Letter spacing',
    name: 'letterspacing',
    placeholder: 'normal',
    tabIndex: 2
  }
}`,
                    ...p.parameters?.docs?.source,
                },
            },
        }),
        (m.parameters = {
            ...m.parameters,
            docs: {
                ...m.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    className: 'background-size',
    label: 'Background Size',
    name: 'backgroundsize',
    unit: '%',
    validator: /^(auto|contain|cover)$/,
    value: 'cover'
  }
}`,
                    ...m.parameters?.docs?.source,
                },
            },
        }),
        (h.parameters = {
            ...h.parameters,
            docs: {
                ...h.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    cssValueType: 'integer',
    label: 'z-index',
    name: 'zindex',
    value: '0'
  }
}`,
                    ...h.parameters?.docs?.source,
                },
            },
        }),
        (g.parameters = {
            ...g.parameters,
            docs: {
                ...g.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    cssValueType: 'integer',
    label: 'opacity',
    name: 'opacity',
    value: '0'
  }
}`,
                    ...g.parameters?.docs?.source,
                },
            },
        }),
        (_.parameters = {
            ..._.parameters,
            docs: {
                ..._.parameters?.docs,
                source: {
                    originalSource: `{
  args: {
    cssValueType: 'length',
    label: 'line height',
    name: 'line-height',
    step: 0.1,
    unit: '',
    value: '1.4'
  }
}`,
                    ..._.parameters?.docs?.source,
                },
            },
        }),
        (v = [
            `Length`,
            `Time`,
            `Angle`,
            `Percent`,
            `LabelLess`,
            `CustomGetValueAsNumber`,
            `BackgroundSize`,
            `ZIndex`,
            `NumberValue`,
            `LineHeight`,
        ]));
})();
export {
    u as Angle,
    m as BackgroundSize,
    p as CustomGetValueAsNumber,
    f as LabelLess,
    c as Length,
    _ as LineHeight,
    g as NumberValue,
    d as Percent,
    l as Time,
    h as ZIndex,
    v as __namedExportsOrder,
    s as default,
};
