mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3 from IBM/develop

Browse source 
feat(components): add RadioButton, TextInput components
This commit is contained in:
Eric Liu 2019-12-15 15:27:48 -08:00 • committed by GitHub
commit 82f5a078a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 488 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

28
README.md
View file

@ -1,8 +1,11 @@
# carbon-components-svelte
> 🚧🚧🚧 UNDER CONSTRUCTION
> Svelte implementation of the Carbon Design System
> 🚧🚧🚧
## [Storybook](https://ibm.github.io/carbon-components-svelte)
## Getting Started
@ -15,16 +18,16 @@ Currently, the following components are supported:
- Accordion
- AccordionItem
- AccordionSkeleton
- AccordionSkeleton
- Breadcrumb
- BreadcrumbItem
- BreadcrumbSkeleton
- BreadcrumbSkeleton
- Button
- ButtonSkeleton
- ButtonSkeleton
- Checkbox
- CheckboxSkeleton
- CheckboxSkeleton
- CodeSnippet
- CodeSnippetSkeleton
- CodeSnippetSkeleton
- Copy
- CopyButton
- InlineLoading
@ -32,18 +35,23 @@ Currently, the following components are supported:
- Link
- ListItem
- OrderedList
- RadioButton
- RadioButtonSkeleton
- Search
- SearchSkeleton
- SearchSkeleton
- SkeletonPlaceholder
- SkeletonText
- Tag
- TagSkeleton
- TagSkeleton
- TextArea
- TextAreaSkeleton
- TextAreaSkeleton
- TextInput
- TextInputSkeleton
- PasswordInput
- Toggle
- ToggleSkeleton
- ToggleSkeleton
- ToggleSmall
- ToggleSmallSkeleton
- ToggleSmallSkeleton
- TooltipDefinition
- TooltipIcon
- UnorderedList

2
docs/iframe.html
View file

@ -70,4 +70,4 @@
}</script><style>#root[hidden],
#docs-root[hidden] {
display: none !important;
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.f68146be2ed36b44235a.bundle.js"></script><script src="vendors~main.f68146be2ed36b44235a.bundle.js"></script><script src="main.f68146be2ed36b44235a.bundle.js"></script></body></html>
}</style></head><body><div class="sb-nopreview sb-wrapper"><div class="sb-nopreview_main"><h1 class="sb-nopreview_heading sb-heading">No Preview</h1><p>Sorry, but you either have no stories or none are selected somehow.</p><ul><li>Please check the Storybook config.</li><li>Try reloading the page.</li></ul><p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p></div></div><div class="sb-errordisplay sb-wrapper"><pre id="error-message" class="sb-heading"></pre><pre class="sb-errordisplay_code"><code id="error-stack"></code></pre></div><div id="root"></div><div id="docs-root"></div><script src="runtime~main.970eec03e30441a69853.bundle.js"></script><script src="vendors~main.970eec03e30441a69853.bundle.js"></script><script src="main.970eec03e30441a69853.bundle.js"></script></body></html>

2
docs/main.970eec03e30441a69853.bundle.js Normal file
View file

File diff suppressed because one or more lines are too long

1
docs/main.970eec03e30441a69853.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"main.970eec03e30441a69853.bundle.js","sources":["webpack:///main.970eec03e30441a69853.bundle.js"],"mappings":"AAAA","sourceRoot":""}

2
docs/main.f68146be2ed36b44235a.bundle.js
View file

File diff suppressed because one or more lines are too long

1
docs/main.f68146be2ed36b44235a.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"main.f68146be2ed36b44235a.bundle.js","sources":["webpack:///main.f68146be2ed36b44235a.bundle.js"],"mappings":"AAAA","sourceRoot":""}

2
docs/runtime~main.f68146be2ed36b44235a.bundle.js → docs/runtime~main.970eec03e30441a69853.bundle.js
View file

@ -1,2 +1,2 @@
!function(modules){function webpackJsonpCallback(data){for(var moduleId,chunkId,chunkIds=data[0],moreModules=data[1],executeModules=data[2],i=0,resolves=[];i<chunkIds.length;i++)chunkId=chunkIds[i],Object.prototype.hasOwnProperty.call(installedChunks,chunkId)&&installedChunks[chunkId]&&resolves.push(installedChunks[chunkId][0]),installedChunks[chunkId]=0;for(moduleId in moreModules)Object.prototype.hasOwnProperty.call(moreModules,moduleId)&&(modules[moduleId]=moreModules[moduleId]);for(parentJsonpFunction&&parentJsonpFunction(data);resolves.length;)resolves.shift()();return deferredModules.push.apply(deferredModules,executeModules||[]),checkDeferredModules()}function checkDeferredModules(){for(var result,i=0;i<deferredModules.length;i++){for(var deferredModule=deferredModules[i],fulfilled=!0,j=1;j<deferredModule.length;j++){var depId=deferredModule[j];0!==installedChunks[depId]&&(fulfilled=!1)}fulfilled&&(deferredModules.splice(i--,1),result=__webpack_require__(__webpack_require__.s=deferredModule[0]))}return result}var installedModules={},installedChunks={1:0},deferredModules=[];function __webpack_require__(moduleId){if(installedModules[moduleId])return installedModules[moduleId].exports;var module=installedModules[moduleId]={i:moduleId,l:!1,exports:{}};return modules[moduleId].call(module.exports,module,module.exports,__webpack_require__),module.l=!0,module.exports}__webpack_require__.m=modules,__webpack_require__.c=installedModules,__webpack_require__.d=function(exports,name,getter){__webpack_require__.o(exports,name)||Object.defineProperty(exports,name,{enumerable:!0,get:getter})},__webpack_require__.r=function(exports){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(exports,"__esModule",{value:!0})},__webpack_require__.t=function(value,mode){if(1&mode&&(value=__webpack_require__(value)),8&mode)return value;if(4&mode&&"object"==typeof value&&value&&value.__esModule)return value;var ns=Object.create(null);if(__webpack_require__.r(ns),Object.defineProperty(ns,"default",{enumerable:!0,value:value}),2&mode&&"string"!=typeof value)for(var key in value)__webpack_require__.d(ns,key,function(key){return value[key]}.bind(null,key));return ns},__webpack_require__.n=function(module){var getter=module&&module.__esModule?function getDefault(){return module.default}:function getModuleExports(){return module};return __webpack_require__.d(getter,"a",getter),getter},__webpack_require__.o=function(object,property){return Object.prototype.hasOwnProperty.call(object,property)},__webpack_require__.p="";var jsonpArray=window.webpackJsonp=window.webpackJsonp||[],oldJsonpFunction=jsonpArray.push.bind(jsonpArray);jsonpArray.push=webpackJsonpCallback,jsonpArray=jsonpArray.slice();for(var i=0;i<jsonpArray.length;i++)webpackJsonpCallback(jsonpArray[i]);var parentJsonpFunction=oldJsonpFunction;checkDeferredModules()}([]);
//# sourceMappingURL=runtime~main.f68146be2ed36b44235a.bundle.js.map
//# sourceMappingURL=runtime~main.970eec03e30441a69853.bundle.js.map

2
docs/runtime~main.f68146be2ed36b44235a.bundle.js.map → docs/runtime~main.970eec03e30441a69853.bundle.js.map
View file

@ -1 +1 @@
{"version":3,"file":"runtime~main.f68146be2ed36b44235a.bundle.js","sources":["webpack:///runtime~main.f68146be2ed36b44235a.bundle.js"],"mappings":"AAAA","sourceRoot":""}
{"version":3,"file":"runtime~main.970eec03e30441a69853.bundle.js","sources":["webpack:///runtime~main.f68146be2ed36b44235a.bundle.js"],"mappings":"AAAA","sourceRoot":""}

22
docs/vendors~main.f68146be2ed36b44235a.bundle.js → docs/vendors~main.970eec03e30441a69853.bundle.js
View file

File diff suppressed because one or more lines are too long

1
docs/vendors~main.970eec03e30441a69853.bundle.js.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"file":"vendors~main.970eec03e30441a69853.bundle.js","sources":["webpack:///vendors~main.970eec03e30441a69853.bundle.js"],"mappings":"AAAA;;;;;AAkkdA;;;;;AAmjGA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAqgBA;;;;;;;AAfA","sourceRoot":""}

1
docs/vendors~main.f68146be2ed36b44235a.bundle.js.map
View file

@ -1 +0,0 @@
{"version":3,"file":"vendors~main.f68146be2ed36b44235a.bundle.js","sources":["webpack:///vendors~main.f68146be2ed36b44235a.bundle.js"],"mappings":"AAAA;;;;;AAk3bA;;;;;AAm0FA;;;;;AAkkEA;;;;;;;;;AAukBA;;;AA8odA;;;;;;;;AAg/BA;;;;;;;;AAqEA;;;;;;;;AAkTA;;;;;;;AAyrDA;;;;;;;AAy7CA;;;;;;;AAogBA;;;;;;;AAfA","sourceRoot":""}

14
src/components/RadioButton/RadioButton.Skeleton.svelte Normal file
View file

@ -0,0 +1,14 @@
<script>
let className = undefined;
export { className as class };
export let props = {};
import { cx } from '../../lib';
const _class = cx('--radio-button-wrapper', className);
</script>
<div {...props} class={_class}>
<div class={cx('--radio-button', '--skeleton')} />
<span class={cx('--radio-button__label', '--skeleton')} />
</div>

19
src/components/RadioButton/RadioButton.Story.svelte Normal file
View file

@ -0,0 +1,19 @@
<script>
export let story = undefined;
import Layout from '../../internal/ui/Layout.svelte';
import ListItem from '../ListItem';
import RadioButton from './RadioButton.svelte';
import RadioButtonSkeleton from './RadioButton.Skeleton.svelte';
</script>
<Layout>
{#if story === 'skeleton'}
<div>
<RadioButtonSkeleton />
</div>
{:else}
<RadioButton {...$$props} id="radio-1" />
{/if}
</Layout>

22
src/components/RadioButton/RadioButton.stories.js Normal file
View file

@ -0,0 +1,22 @@
import { withKnobs, text, select, boolean } from '@storybook/addon-knobs';
import Component from './RadioButton.Story.svelte';
export default { title: 'Radio Button', decorators: [withKnobs] };
const labelPositions = {
'Left (left)': 'left',
'Right (right)': 'right'
};
export const Default = () => ({
Component,
props: {
name: text('Form item name (name)', 'test'),
value: text('Value (value)', 'standard'),
labelText: text('Label text (labelText)', 'Standard Radio Button'),
labelPosition: select('Label position (labelPosition)', labelPositions, 'right'),
disabled: boolean('Disabled (disabled)', false)
}
});
export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

42
src/components/RadioButton/RadioButton.svelte Normal file
View file

@ -0,0 +1,42 @@
<script>
let className = undefined;
export { className as class };
export let value = '';
export let checked = false;
export let disabled = false;
export let id = Math.random();
export let labelText = '';
export let hideLabel = false;
export let labelPosition = 'right';
export let name = '';
export let props = {};
import { cx } from '../../lib';
const _class = cx(
'--radio-button-wrapper',
labelPosition !== 'right' && `--radio-button-wrapper--label-${labelPosition}`,
className
);
const _innerLabelClass = cx(hideLabel && '--visually-hidden');
</script>
<div class={_class}>
<input
{...props}
type="radio"
class={cx('--radio-button')}
on:change
on:change={event => {
value = event.target.value;
}}
{id}
{name}
{checked}
{disabled}
{value} />
<label for={id} class={cx('--radio-button__label')}>
<span class={cx('--radio-button__appearance')} />
<span class={_innerLabelClass}>{labelText}</span>
</label>
</div>

4
src/components/RadioButton/index.js Normal file
View file

@ -0,0 +1,4 @@
import RadioButton from './RadioButton.svelte';
export default RadioButton;
export { default as RadioButtonSkeleton } from './RadioButton.Skeleton.svelte';

112
src/components/TextInput/PasswordInput.svelte Normal file
View file

@ -0,0 +1,112 @@
<script>
let className = undefined;
export { className as class };
export let disabled = false;
export let id = Math.random();
export let labelText = '';
export let placeholder = '';
export let type = 'password';
export let value = '';
export let invalid = false;
export let invalidText = '';
export let helperText = '';
export let hideLabel = false;
export let light = false;
export let tooltipPosition = 'bottom';
export let tooltipAlignment = 'center';
export let hidePasswordLabel = 'Hide password';
export let showPasswordLabel = 'Show password';
export let props = {};
import { createEventDispatcher } from 'svelte';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
import View16 from 'carbon-icons-svelte/lib/View16';
import ViewOff16 from 'carbon-icons-svelte/lib/ViewOff16';
import { cx } from '../../lib';
const dispatch = createEventDispatcher();
const errorId = `${id}-error`;
const passwordIsVisible = type === 'text';
const _labelClass = cx(
'--label',
hideLabel && '--visually-hidden',
disabled && '--label--disabled'
);
const _helperTextClass = cx('--form__helper-text', disabled && '--form__helper-text--disabled');
const _textInputClass = cx(
'--text-input',
'--password-input',
light && '--text-input--light',
invalid && '--text-input--invalid',
className
);
const _passwordVisibilityToggleClass = cx(
'--text-input--password__visibility__toggle',
'--btn--icon-only',
'--tooltip__trigger',
'--tooltip--a11y',
tooltipPosition && `--tooltip--${tooltipPosition}`,
tooltipAlignment && `--tooltip--align-${tooltipAlignment}`
);
</script>
<div class={cx('--form-item', '--text-input-wrapper', '--password-input-wrapper')}>
{#if labelText}
<label for={id} class={_labelClass}>{labelText}</label>
{/if}
{#if helperText}
<div class={_helperTextClass}>{helperText}</div>
{/if}
<div class={cx('--text-input__field-wrapper')} data-invalid={invalid || undefined}>
{#if invalid}
<WarningFilled16 class={cx('--text-input__invalid-icon')} />
{/if}
<input
{...props}
class={_textInputClass}
on:click={event => {
if (!disabled) {
dispatch('click', event);
}
}}
on:change={event => {
if (!disabled) {
dispatch('change', event);
}
}}
on:input={event => {
value = event.target.value;
if (!disabled) {
dispatch('input', event);
}
}}
data-invalid={invalid || undefined}
aria-invalid={invalid || undefined}
aria-describedby={invalid ? errorId : undefined}
{id}
{placeholder}
{type}
{value}
{disabled} />
<button
type="button"
class={_passwordVisibilityToggleClass}
on:click={() => {
type = type === 'password' ? 'text' : 'password';
}}>
<span class={cx('--assistive-text')}>
{#if passwordIsVisible}{hidePasswordLabel}{:else}{showPasswordLabel}{/if}
</span>
{#if passwordIsVisible}
<ViewOff16 class={cx('--icon-visibility-off')} />
{:else}
<View16 class={cx('--icon-visibility-on')} />
{/if}
</button>
</div>
{#if invalid}
<div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
{/if}
</div>

17
src/components/TextInput/TextInput.Skeleton.svelte Normal file
View file

@ -0,0 +1,17 @@
<script>
let className = undefined;
export { className as class };
export let hideLabel = false;
export let props = {};
import { cx } from '../../lib';
const _class = cx('--form-item', className);
</script>
<div {...props} class={_class}>
{#if !hideLabel}
<span class={cx('--label', '--skeleton')} />
{/if}
<div class={cx('--skeleton', '--text-area')} />
</div>

42
src/components/TextInput/TextInput.Story.svelte Normal file
View file

@ -0,0 +1,42 @@
<script>
export let story = undefined;
import Layout from '../../internal/ui/Layout.svelte';
import TextInput from './TextInput.svelte';
import PasswordInput from './PasswordInput.svelte';
import TextInputSkeleton from './TextInput.Skeleton.svelte';
let value = '';
let type = 'password';
</script>
<Layout>
{value}
{#if story === 'skeleton'}
<div aria-label="loading text input" aria-live="assertive" role="status" tabindex="0">
<TextInputSkeleton />
<br />
<TextInputSkeleton hideLabel />
</div>
{:else if story === 'password-visibility'}
<PasswordInput {...$$props} aria-level="" />
{:else if story === 'controlled'}
<PasswordInput {...$$props} {type} />
<div>
<button
on:click={() => {
type = 'text';
}}>
Show password
</button>
<button
on:click={() => {
type = 'password';
}}>
Hide password
</button>
</div>
{:else}
<TextInput {...$$props} bind:value />
{/if}
</Layout>

89
src/components/TextInput/TextInput.stories.js Normal file
View file

@ -0,0 +1,89 @@
import { withKnobs, boolean, text, select } from '@storybook/addon-knobs';
import Component from './TextInput.Story.svelte';
export default { title: 'TextInput', decorators: [withKnobs] };
export const Default = () => ({
Component,
props: {
disabled: boolean('Disabled (disabled)', false),
light: boolean('Light variant (light)', false),
hideLabel: boolean('No label (hideLabel)', false),
labelText: text('Label text (labelText)', 'Text Input label'),
invalid: boolean('Show form validation UI (invalid)', false),
invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
helperText: text('Helper text (helperText)', 'Optional helper text.'),
placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
id: 'text-input'
}
});
export const TogglePasswordVisibility = () => ({
Component,
props: {
story: 'password-visibility',
disabled: boolean('Disabled (disabled)', false),
light: boolean('Light variant (light)', false),
hideLabel: boolean('No label (hideLabel)', false),
labelText: text('Label text (labelText)', 'Text Input label'),
invalid: boolean('Show form validation UI (invalid)', false),
invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
helperText: text('Helper text (helperText)', 'Optional helper text.'),
placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
id: 'text-input',
tooltipPosition: select(
'Tooltip position (tooltipPosition)',
['top', 'right', 'bottom', 'left'],
'bottom'
),
tooltipAlignment: select(
'Tooltip alignment (tooltipAlignment)',
['start', 'center', 'end'],
'center'
),
hidePasswordLabel: text(
'"Hide password" tooltip label for password visibility toggle (hidePasswordLabel)',
'Hide password'
),
showPasswordLabel: text(
'"Show password" tooltip label for password visibility toggle (showPasswordLabel)',
'Show password'
)
}
});
export const ControlledTogglePasswordVisibility = () => ({
Component,
props: {
story: 'controlled',
disabled: boolean('Disabled (disabled)', false),
light: boolean('Light variant (light)', false),
hideLabel: boolean('No label (hideLabel)', false),
labelText: text('Label text (labelText)', 'Text Input label'),
invalid: boolean('Show form validation UI (invalid)', false),
invalidText: text('Content of form validation UI (invalidText)', 'A valid value is required'),
helperText: text('Helper text (helperText)', 'Optional helper text.'),
placeholder: text('Placeholder text (placeholder)', 'Placeholder text.'),
id: 'text-input',
tooltipPosition: select(
'Tooltip position (tooltipPosition)',
['top', 'right', 'bottom', 'left'],
'bottom'
),
tooltipAlignment: select(
'Tooltip alignment (tooltipAlignment)',
['start', 'center', 'end'],
'center'
),
hidePasswordLabel: text(
'"Hide password" tooltip label for password visibility toggle (hidePasswordLabel)',
'Hide password'
),
showPasswordLabel: text(
'"Show password" tooltip label for password visibility toggle (showPasswordLabel)',
'Show password'
)
}
});
export const Skeleton = () => ({ Component, props: { story: 'skeleton' } });

79
src/components/TextInput/TextInput.svelte Normal file
View file

@ -0,0 +1,79 @@
<script>
let className = undefined;
export { className as class };
export let disabled = false;
export let id = Math.random();
export let labelText = '';
export let placeholder = '';
export let type = '';
export let value = '';
export let invalid = false;
export let invalidText = '';
export let helperText = '';
export let hideLabel = false;
export let light = false;
export let props = {};
import { createEventDispatcher } from 'svelte';
import WarningFilled16 from 'carbon-icons-svelte/lib/WarningFilled16';
import { cx } from '../../lib';
const dispatch = createEventDispatcher();
const errorId = `${id}-error`;
const _labelClass = cx(
'--label',
hideLabel && '--visually-hidden',
disabled && '--label--disabled'
);
const _helperTextClass = cx('--form__helper-text', disabled && '--form__helper-text--disabled');
const _textInputClass = cx(
'--text-input',
light && '--text-input--light',
invalid && '--text-input--invalid',
className
);
</script>
<div class={cx('--form-item', '--text-input-wrapper')}>
{#if labelText}
<label for={id} class={_labelClass}>{labelText}</label>
{/if}
{#if helperText}
<div class={_helperTextClass}>{helperText}</div>
{/if}
<div class={cx('--text-input__field-wrapper')} data-invalid={invalid || undefined}>
{#if invalid}
<WarningFilled16 class={cx('--text-input__invalid-icon')} />
{/if}
<input
{...props}
class={_textInputClass}
on:click={event => {
if (!disabled) {
dispatch('click', event);
}
}}
on:change={event => {
if (!disabled) {
dispatch('change', event);
}
}}
on:input={event => {
value = event.target.value;
if (!disabled) {
dispatch('input', event);
}
}}
data-invalid={invalid || undefined}
aria-invalid={invalid || undefined}
aria-describedby={invalid ? errorId : undefined}
{id}
{placeholder}
{type}
{value}
{disabled} />
</div>
{#if invalid}
<div class={cx('--form-requirement')} id={errorId}>{invalidText}</div>
{/if}
</div>

5
src/components/TextInput/index.js Normal file
View file

@ -0,0 +1,5 @@
import TextInput from './TextInput.svelte';
export default TextInput;
export { default as TextInputSkeleton } from './TextInput.Skeleton.svelte';
export { default as PasswordInput } from './PasswordInput.svelte';

7
src/index.js
View file

@ -10,11 +10,13 @@ import Loading from './components/Loading';
import Link from './components/Link';
import ListItem from './components/ListItem';
import OrderedList from './components/OrderedList';
import RadioButton, { RadioButtonSkeleton } from './components/RadioButton';
import Search, { SearchSkeleton } from './components/Search';
import SkeletonPlaceholder from './components/SkeletonPlaceholder';
import SkeletonText from './components/SkeletonText';
import Tag, { TagSkeleton } from './components/Tag';
import TextArea, { TextAreaSkeleton } from './components/TextArea';
import TextInput, { TextInputSkeleton, PasswordInput } from './components/TextInput';
import Toggle, { ToggleSkeleton } from './components/Toggle';
import ToggleSmall, { ToggleSmallSkeleton } from './components/ToggleSmall';
import TooltipDefinition from './components/TooltipDefinition';
@ -41,6 +43,8 @@ export {
Link,
ListItem,
OrderedList,
RadioButton,
RadioButtonSkeleton,
Search,
SearchSkeleton,
SkeletonPlaceholder,
@ -49,6 +53,9 @@ export {
TagSkeleton,
TextArea,
TextAreaSkeleton,
TextInput,
TextInputSkeleton,
PasswordInput,
Toggle,
ToggleSkeleton,
ToggleSmall,