@xplortech/apollo-core 2.11.0 → 3.0.0

package/dist/collection/components/xpl-input/input.stories.js

@@ -1,696 +0,0 @@
-export default {
-    title: 'Components/Input',
-    parameters: {
-        actions: {
-            handles: [
-                'inputChange',
-                'inputEvent',
-                'valueChange',
-                'hasErrorStateChanged',
-                'rangeSelected',
-                'search',
-            ],
-        },
-    },
-    argTypes: {
-        label: {
-            type: { name: 'string', required: true },
-        },
-        description: {
-            type: { name: 'string', required: false },
-        },
-        disabled: {
-            type: {
-                name: 'boolean',
-            },
-        },
-        error: {
-            type: {
-                name: 'boolean',
-            },
-        },
-        errorMessage: {
-            type: { name: 'string', required: false },
-        },
-        type: {
-            options: [
-                'text',
-                'number',
-                'file',
-                'password',
-                'date',
-                'time',
-                'color',
-                'phone',
-                'search',
-            ],
-            control: {
-                type: 'select',
-            },
-        },
-    },
-};
-export const Input = ({ label, description, disabled, error, errorMessage, pre, post, type, defaultCountry, isInternational, }) => {
-    let attrs = '';
-    if (label)
-        attrs += ` label="${label}"`;
-    if (description)
-        attrs += ` description="${description}"`;
-    if (disabled)
-        attrs += ` disabled`;
-    if (error)
-        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
-    if (pre)
-        attrs += ` pre="${pre}"`;
-    if (post)
-        attrs += ` post="${post}"`;
-    if (type !== 'text')
-        attrs += ` type="${type}"`;
-    if (type === 'phone' && defaultCountry)
-        attrs += ` default-country="${defaultCountry}"`;
-    if (type === 'phone' && isInternational === false)
-        attrs += ` is-international="false"`;
-    return `<xpl-input${attrs} name="input-name" placeholder="Placeholder"></xpl-input>`;
-};
-Input.args = {
-    label: 'Input',
-    description: 'A brief description',
-    disabled: false,
-    error: false,
-    errorMessage: '',
-    pre: '',
-    post: '',
-    type: 'text',
-    defaultCountry: 'US',
-    isInternational: true,
-};
-Input.argTypes = {
-    defaultCountry: {
-        control: { type: 'text' },
-        description: 'Default country (ISO code) for phone input',
-        if: { arg: 'type', eq: 'phone' },
-    },
-    isInternational: {
-        control: { type: 'boolean' },
-        description: 'Enables international mode with country selector. When false, locked to defaultCountry with no picker.',
-        if: { arg: 'type', eq: 'phone' },
-    },
-};
-Input.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Input(Input.args),
-    },
-    html: {
-        render: (({ label, description, disabled, error, errorMessage, pre, post, type }) => {
-            const output = [];
-            let className = 'xpl-input';
-            if (disabled)
-                className += ' xpl-input--disabled';
-            if (error)
-                className += ' xpl-input--error';
-            output.push(`
-                <div class="${className}">
-                    <label for="id">
-                        ${label}
-                        ${description ? `<small>${description}</small>` : ''}
-                    </label>
-                    <div class="xpl-input-wrapper">
-                        ${pre ? `<label class="xpl-input-pre" for="id">${pre}</label>` : ''}
-        <input ${disabled ? 'disabled ' : ''}id="id" name="input-name" placeholder="Placeholder" type="${type}" />${post
-                ? `
-        <label class="xpl-input-post" for="id">${post}</label>`
-                : ''}
-    </div>${errorMessage
-                ? `
-    <label class="xpl-input-error" for="id">
-        <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" /></svg>
-        ${errorMessage}
-    </label>`
-                : ''}
-</div>`);
-            return output;
-        })(Input.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=16215-5412&p=f&t=vVY2x58f7oPprNSr-11',
-    },
-};
-export const Multiline = ({ label, description, disabled, error, errorMessage, maxCharacterCount, }) => {
-    let attrs = ' multiline';
-    if (label)
-        attrs += ` label="${label}"`;
-    if (description)
-        attrs += ` description="${description}"`;
-    if (disabled)
-        attrs += ` disabled`;
-    if (error)
-        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
-    if (maxCharacterCount >= 0)
-        attrs += ` max-character-count="${maxCharacterCount}"`;
-    return `<xpl-input${attrs} name="input-name" placeholder="Placeholder"></xpl-input>`;
-};
-Multiline.args = {
-    label: 'Multiline Input',
-    description: 'A brief description',
-    disabled: false,
-    error: false,
-    errorMessage: '',
-    maxCharacterCount: 50,
-};
-Multiline.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Multiline(Multiline.args),
-    },
-    html: {
-        render: (({ disabled, error, errorMessage, label, description, maxCharacterCount }) => {
-            const output = [];
-            if (maxCharacterCount > 0)
-                output.push(`WARNING: For multiline inputs with a max. character count,
-there is JS interactivity that is provided only by
-the web component. The code shown below does not
-reflect the additional markup and interactivity.`);
-            let className = 'xpl-input';
-            if (disabled)
-                className += ' xpl-input--disabled';
-            if (error)
-                className += ' xpl-input--error';
-            output.push(`<div class="${className}">
-    <label for="id">
-        ${label}${description
-                ? `
-        <small>${description}</small>`
-                : ''}
-    </label>
-    <div class="xpl-input-wrapper">
-        <textarea ${disabled ? 'disabled ' : ''}id="id" name="input-name" placeholder="Placeholder"></textarea>
-    </div>${errorMessage
-                ? `
-    <label class="xpl-input-error" for="id">
-        <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" /></svg>
-        ${errorMessage}
-    </label>`
-                : ''}
-</div>`);
-            return output;
-        })(Multiline.args),
-    },
-};
-export const Datepicker = ({ label, dateFormat, description, disabled, error, errorMessage, min, mode, max, required, type, }) => {
-    let attrs = ` type="${type}"`;
-    if (label)
-        attrs += ` label="${label}"`;
-    if (dateFormat)
-        attrs += ` date-format="${dateFormat}"`;
-    if (description)
-        attrs += ` description="${description}"`;
-    if (disabled)
-        attrs += ` disabled`;
-    if (error)
-        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
-    if (min)
-        attrs += ` min="${min}"`;
-    if (max)
-        attrs += ` max="${max}"`;
-    if (mode)
-        attrs += ` mode="${mode}"`;
-    if (required)
-        attrs += ` required`;
-    return `<xpl-input${attrs} name="input-name" placeholder="Placeholder"></xpl-input>`;
-};
-Datepicker.argTypes = {
-    mode: {
-        options: ['single', 'range'],
-        control: {
-            type: 'select',
-        },
-    },
-    type: {
-        options: ['date', 'time'],
-        control: {
-            type: 'select',
-        },
-    },
-};
-Datepicker.args = {
-    mode: 'single',
-    label: 'Datepicker',
-    dateFormat: 'm/d/Y',
-    description: 'A brief description',
-    disabled: false,
-    error: false,
-    errorMessage: '',
-    min: '01/01/2000',
-    max: '12/31/2099',
-    required: false,
-    type: 'date',
-};
-Datepicker.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Datepicker(Datepicker.args),
-    },
-    html: {
-        render: (({ label, description, disabled, error, errorMessage, min, max, required }) => {
-            const output = [
-                `The full-featured Datepicker Input only supports web component usage. However, a 'lite' version that uses native browser features is included here:`,
-            ];
-            let className = 'xpl-input';
-            if (disabled)
-                className += ' xpl-input--disabled';
-            if (error)
-                className += ' xpl-input--error';
-            output.push(`<div class="${className}">
-    <label for="id">
-        ${label}${description
-                ? `
-        <small>${description}</small>`
-                : ''}
-    </label>
-    <div class="xpl-input-wrapper">
-        <input ${required ? 'required ' : ''}${disabled ? 'disabled ' : ''}id="id"${min ? ` min="${min}"` : ''}${max ? ` max="${max}"` : ''} name="input-name" placeholder="Placeholder" type="date" />
-    </div>${errorMessage
-                ? `
-    <label class="xpl-input-error" for="id">
-        <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" /></svg>
-        ${errorMessage}
-    </label>`
-                : ''}
-</div>`);
-            return output;
-        })(Datepicker.args),
-    },
-};
-export const Timepicker = ({ label, description, disabled, error, errorMessage, required, readonly, value, step, timeFormat, allowCustomOption, min, max, type, }) => {
-    let attrs = '';
-    if (label)
-        attrs += `label="${label}"`;
-    if (description)
-        attrs += ` description="${description}"`;
-    if (disabled)
-        attrs += ` disabled`;
-    if (error)
-        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
-    if (min)
-        attrs += ` min="${min}"`;
-    if (max)
-        attrs += ` max="${max}"`;
-    if (required)
-        attrs += ` required`;
-    if (readonly)
-        attrs += ` readonly`;
-    if (value)
-        attrs += ` value="${value}"`;
-    if (step)
-        attrs += ` step="${step}"`;
-    if (timeFormat)
-        attrs += ` time-format="${timeFormat}"`;
-    if (allowCustomOption)
-        attrs += ` allow-custom-option`;
-    if (type)
-        attrs += ` type="${type}"`;
-    return `<xpl-input ${attrs} name="input-name"></xpl-input>`;
-};
-Timepicker.args = {
-    label: 'Timepicker',
-    description: 'A brief description',
-    disabled: false,
-    error: false,
-    errorMessage: 'This field is required.',
-    required: true,
-    readonly: false,
-    value: '15:30',
-    step: 30,
-    timeFormat: '12h',
-    allowCustomOption: false,
-    min: '10:00',
-    max: '18:00',
-    type: 'time',
-};
-Timepicker.argTypes = {
-    timeFormat: {
-        control: { type: 'select' },
-        options: ['12h', '24h'],
-    },
-};
-Timepicker.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Timepicker(Timepicker.args),
-    },
-    html: {
-        render: (({ label, description, disabled, error, errorMessage, min, max, required, type, timeFormat, }) => {
-            const output = [
-                `The full-featured Timepicker Input only supports web component usage. However, a 'lite' version that uses native browser features is included here:`,
-            ];
-            let className = 'xpl-input';
-            if (disabled)
-                className += ' xpl-input--disabled';
-            if (error)
-                className += ' xpl-input--error';
-            output.push(`<div class="${className}">
-    <label for="id">
-        ${label}${description
-                ? `
-        <small>${description}</small>`
-                : ''}
-    </label>
-    <div class="xpl-input-wrapper">
-        <label class="xpl-input-pre"><xpl-icon icon="clock" size="24"></xpl-icon></label>
-        <input type="${type}" ${required ? 'required ' : ''}${disabled ? 'disabled ' : ''}id="id"${min ? ` min="${min}"` : ''}${max ? ` max="${max}"` : ''} name="input-name" placeholder="Placeholder" />
-        <label class="xpl-input-post">${timeFormat === '12h' ? 'AM' : ''}</label>
-        <xpl-dropdown options={[
-    {
-        "label": "10:00 AM",
-        "value": "10:00"
-    },
-    {
-        "label": "10:30 AM",
-        "value": "10:30"
-    },
-    {
-        "label": "11:00 AM",
-        "value": "11:00"
-    },
-    {
-        "label": "5:30 PM",
-        "value": "17:30"
-    },
-    {
-        "label": "6:00 PM",
-        "value": "18:00"
-    }
-]}></xpl-dropdown>
-    </div>${errorMessage
-                ? `
-    <label class="xpl-input-error" for="id">
-        <svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.84375 5.25C9.84375 2.59375 7.65625 0.40625 5 0.40625C2.32422 0.40625 0.15625 2.59375 0.15625 5.25C0.15625 7.92578 2.32422 10.0938 5 10.0938C7.65625 10.0938 9.84375 7.92578 9.84375 5.25ZM5 6.22656C5.48828 6.22656 5.89844 6.63672 5.89844 7.125C5.89844 7.63281 5.48828 8.02344 5 8.02344C4.49219 8.02344 4.10156 7.63281 4.10156 7.125C4.10156 6.63672 4.49219 6.22656 5 6.22656ZM4.14062 3.00391C4.12109 2.86719 4.23828 2.75 4.375 2.75H5.60547C5.74219 2.75 5.85938 2.86719 5.83984 3.00391L5.70312 5.66016C5.68359 5.79688 5.58594 5.875 5.46875 5.875H4.51172C4.39453 5.875 4.29688 5.79688 4.27734 5.66016L4.14062 3.00391Z" /></svg>
-        ${errorMessage}
-    </label>`
-                : ''}
-</div>`);
-            return output;
-        })(Timepicker.args),
-    },
-};
-export const Password = ({ label, description, disabled, error, errorMessage, pre, post, }) => {
-    let attrs = '';
-    if (label)
-        attrs += ` label="${label}"`;
-    if (description)
-        attrs += ` description="${description}"`;
-    if (disabled)
-        attrs += ` disabled`;
-    if (error)
-        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
-    if (pre)
-        attrs += ` pre="${pre}"`;
-    if (post)
-        attrs += ` post="${post}"`;
-    return `<xpl-input type="password"${attrs} name="input-name"></xpl-input>`;
-};
-Password.args = {
-    label: 'Password',
-    description: 'Enter a password:',
-    disabled: false,
-    error: false,
-    errorMessage: '',
-};
-Password.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Password(Password.args),
-    },
-    html: {
-        render: ((_) => `Sorry, the Password Input only supports web component usage.`)(Password.args),
-    },
-};
-export const File = ({ accept, multiple, hideTriggerOnSelect, hideFileNames, hideAcceptText, label, triggerContent, description, disabled, error, errorMessage, }) => {
-    const renderFileUpload = () => `
-        <xpl-input
-            label="${label}"
-            accept="${accept}"
-            multiple="${multiple}"
-            type="file"
-            name="file-input"
-            hide-trigger-on-select="${hideTriggerOnSelect}"
-            hide-file-names="${hideFileNames}"
-            hide-accept-text="${hideAcceptText}"
-            description="${description}"
-            disabled="${disabled}"
-            ${error ? `error="${errorMessage}"` : ''}
-        >
-            ${triggerContent}
-        </xpl-input>
-    `;
-    return renderFileUpload();
-};
-File.args = {
-    accept: 'image/png, image/jpeg',
-    multiple: false,
-    hideTriggerOnSelect: false,
-    hideFileNames: false,
-    hideAcceptText: false,
-    label: 'Upload File',
-    triggerContent: `<xpl-button slot="trigger"><xpl-icon icon="upload" size="24"></xpl-icon>Upload File</xpl-button>`,
-    description: '',
-    disabled: false,
-    error: false,
-    errorMessage: 'This field is required.',
-    type: 'file',
-};
-File.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: File(File.args),
-    },
-    html: {
-        render: ((args) => {
-            const output = [];
-            output.push(`<label class="xpl-input-label">${args.label}<small>${args.description}</small></label>`);
-            output.push(`<div class="xpl-input-file" ${args.hideTriggerOnSelect ? 'xpl-input-file--hide-trigger-on-select' : ''} ${args.disabled ? 'xpl-input-file--disabled' : ''} >`);
-            output.push(`<span class="xpl-input-file__trigger-wrapper" role="button" tabindex="0">${args.triggerContent}</span>`);
-            if (args.hideAcceptText !== true && args.accept) {
-                output.push(`<span class="xpl-input-file__accept xpl-text-caption">Accepted file types: ${args.accept}</span>`);
-            }
-            if (!args.hideFileNames) {
-                output.push(`<ul class="xpl-input-file__file-list">
-                        <li class="xpl-input-file__file-item">
-                            <span class="xpl-text-callout">Filename1.png</span>
-                            <xpl-icon icon="x-circle" size="24" class="xpl-input-file__remove-icon"></xpl-icon>
-                        </li>
-                        <li class="xpl-input-file__file-item">
-                            <span class="xpl-text-callout">Filename2.png</span>
-                            <xpl-icon icon="x-circle" size="24" class="xpl-input-file__remove-icon"></xpl-icon>
-                        </li>
-                    </ul>`);
-            }
-            output.push('</div>');
-            return output.join('');
-        })(File.args),
-    },
-};
-export const Color = ({ value, label, placeholder, disabled, required, requiredErrorMessage, hideEyeDropper, }) => {
-    const renderFileUpload = () => `
-        <xpl-input
-            type="color"
-            label="${label}"
-            value="${value}"
-            placeholder="${placeholder}"
-            disabled="${disabled}"
-            required="${required}"
-            required-error-message="${requiredErrorMessage}"
-            hide-eye-dropper="${hideEyeDropper}"
-        >
-        </xpl-input>
-    `;
-    return renderFileUpload();
-};
-Color.args = {
-    label: 'Select Color',
-    placeholder: 'Choose color',
-    value: '#ffff00',
-    disabled: false,
-    required: false,
-    requiredErrorMessage: 'This field is required.',
-    hideEyeDropper: false,
-};
-Color.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Color(Color.args),
-    },
-    html: {
-        render: ((args) => {
-            const output = [];
-            output.push(`
-                <div class="xpl-input-color">
-                    <label class="xpl-input-color__label">${args.label}</label>
-                    <xpl-popover disabled="${args.disabled}">
-                        <div class="xpl-input-color__display" ${args.disabled ? 'xpl-input-color__display--disabled' : ''}>
-                            <span class="xpl-input-color__color" style="background: ${args.value}"></span>
-                            <span class="xpl-input-color__value">${args.value}</span>
-                            <xpl-icon class="xpl-input-color__icon" icon="eye-droper"></xpl-icon>
-                        </div>
-                        <div class="xpl-popover__arrow"></div>
-                        <div class="xpl-popover__content">
-                            <div class="xpl-input-color__menu">
-                                <div class="xpl-input-color__sl-grid" style="background: linear-gradient(to right, rgb(128, 128, 128), rgb(81, 0, 255)), linear-gradient(to top, black, transparent);">
-                                    <div class="xpl-input-color__sl-thumb" style="left: 92%; top: 39%;"></div>
-                                    <input type="range" min="0" max="360" value="0" class="xpl-input-color__slider xpl-input-color__hue" name="color-hue-slider" />
-                                </div>
-                                <div class="xpl-input-color__grid">
-                                    <input type="range" min="0" max="360" value="0" class="xpl-input-color__slider xpl-input-color__hue" name="color-hue-slider" />
-                                    <input type="range" min="0" max="1" step="0.01" value="0" class="xpl-input-color__slider xpl-input-color__alpha" name="color-alpha-slider" />
-                                    <div class="xpl-input-color__preview" style="background: rgba(255, 255, 0, 1);"></div>
-                                </div>
-                                <div class="xpl-input-color__inputs">
-                                    <xpl-input label="Hex" name="color-hex-input" placeholder="793EF7" value="${args.value}" />
-                                    <xpl-input label="R" name="color-r-input" placeholder="0" value="${args.value}" />
-                                    <xpl-input label="G" name="color-g-input" placeholder="0" value="${args.value}" />
-                                    <xpl-input label="B" name="color-b-input" placeholder="0" value="${args.value}" />
-                                    <xpl-input label="A" name="color-a-input" placeholder="1" value="${args.value}" />
-                                </div>
-                            </div>
-                        </div>
-                    </xpl-popover>
-                </div>
-            `);
-            return output.join('');
-        })(Color.args),
-    },
-};
-export const Phone = ({ label, description, placeholder, disabled, defaultCountry, isInternational, value, }) => {
-    let attrs = ` type="phone" label="${label}" name="phone" placeholder="${placeholder}"`;
-    if (description)
-        attrs += ` description="${description}"`;
-    if (disabled)
-        attrs += ` disabled`;
-    if (defaultCountry)
-        attrs += ` default-country="${defaultCountry}"`;
-    if (isInternational === false)
-        attrs += ` is-international="false"`;
-    if (value)
-        attrs += ` value="${value}"`;
-    return `<xpl-input${attrs}></xpl-input>`;
-};
-Phone.args = {
-    defaultCountry: 'US',
-    description: 'Enter your phone number with country code',
-    disabled: false,
-    error: false,
-    errorMessage: '',
-    isInternational: true,
-    label: 'Phone number',
-    placeholder: 'Enter number',
-    value: '+0000000000',
-};
-Phone.argTypes = {
-    isInternational: {
-        control: { type: 'boolean' },
-        description: 'Enables international mode with country selector. When false, locked to defaultCountry with no picker.',
-    },
-};
-Phone.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Phone(Phone.args),
-    },
-    html: {
-        render: (() => `
-                <div class="xpl-input">
-                    <label class="xpl-input-label" for="phone-id">${Phone.args.label}</label>
-                    ${Phone.args.description ? `<small>${Phone.args.description}</small>` : ''}
-                    <div class="xpl-input-wrapper xpl-input-phone">
-                        <button type="button" class="xpl-input-phone__trigger" aria-haspopup="listbox">+1</button>
-                        <input type="tel" id="phone-id" name="phone" placeholder="${Phone.args.placeholder}" class="xpl-input-phone__input" />
-                    </div>
-                </div>`)(),
-    },
-};
-export const Search = ({ label, description, disabled, error, readonly, errorMessage, placeholder, value, name, shape, autocomplete, ariaLabel, }) => {
-    let attrs = ' type="search"';
-    if (label !== undefined && label !== '')
-        attrs += ` label="${label}"`;
-    if (description)
-        attrs += ` description="${description}"`;
-    if (disabled)
-        attrs += ` disabled`;
-    if (error)
-        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
-    if (placeholder)
-        attrs += ` placeholder="${placeholder}"`;
-    if (value)
-        attrs += ` value="${value}"`;
-    if (name)
-        attrs += ` name="${name}"`;
-    if (shape)
-        attrs += ` shape="${shape}"`;
-    if (autocomplete)
-        attrs += ` autocomplete="${autocomplete}"`;
-    if (ariaLabel)
-        attrs += ` aria-label="${ariaLabel}"`;
-    if (readonly)
-        attrs += ` readonly`;
-    return `<xpl-input${attrs}></xpl-input>`;
-};
-Search.args = {
-    ariaLabel: '',
-    autocomplete: '',
-    description: '',
-    disabled: false,
-    error: false,
-    errorMessage: '',
-    label: '',
-    readonly: false,
-    name: '',
-    placeholder: 'Search…',
-    shape: 'rounded',
-    value: '',
-};
-Search.argTypes = {
-    ariaLabel: {
-        control: { type: 'text' },
-        description: 'Accessible name when no visible label (search inputs only)',
-    },
-    shape: {
-        control: { type: 'select' },
-        options: ['rounded', 'box'],
-    },
-};
-Search.parameters = {
-    layout: 'centered',
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=2430-168374&p=f&t=oG14CHMwd7GirmPv-11',
-    },
-    'web-component': {
-        render: Search(Search.args),
-    },
-    html: {
-        render: (() => `
-<div class="xpl-input xpl-input--search">
-  <div class="xpl-input-search">
-    <form class="xpl-input-search__form">
-      <div class="xpl-input-search__shell">
-        <span class="xpl-input-search__icon" aria-hidden="true"></span>
-        <input
-          class="xpl-input-search__input"
-          id="search-html-id"
-          name="${Search.args.name}"
-          type="text"
-          role="searchbox"
-          aria-label="Search"
-          placeholder="${Search.args.placeholder}"
-          autocomplete="off"
-        />
-        <button type="button" class="xpl-input-search__clear" aria-label="Clear search"></button>
-      </div>
-    </form>
-  </div>
-</div>
-`)(),
-    },
-};