import { styled } from '../Theme';

export { default as WithDifferentSizes } from './demo/with-different-sizes';
export { default as Copyable } from './demo/copyable';
export { default as CompactMode } from './demo/compact-mode';
export { default as WithInheritSize } from './demo/with-inherit-size';
export { default as ResponsiveFontSize } from './demo/responsive-font-size';
export { default as InlineElementBlockElement } from './demo/inline-element-block-element';
export { default as DynamicTagname } from './demo/dynamic-tagname';
export { default as NonResponsiveCompact } from './demo/non-responsive-compact';
export { default as CopyTextI18N } from './demo/copy-text-i18n';
export { default as PrependAppend } from './demo/prepend-append';

export default {
  title: 'DID/Address',
  parameters: {},
  decorators: [
    (StoryFn) => (
      <ResizableContainer>
        <StoryFn />
      </ResizableContainer>
    ),
  ],
};

const ResizableContainer = styled('div')`
  width: 600px;
  max-width: 100%;
  padding: 16px;
  border: 1px solid #ddd;
  overflow: auto;
  background: #fff;
  resize: both;

  > * + * {
    margin-top: 16px;
  }
`;
