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

export { default as ActionTest } from './demo/action-test';
export { default as WithDifferentSizes } from './demo/with-different-sizes';
export { default as WithDifferentColors } from './demo/with-different-colors';
export { default as WithChainId } from './demo/with-chainId';
export { default as WithRoleType } from './demo/with-roleType';
export { default as OnlyDialog } from './demo/only-dialog';
export { default as WithFlexBox } from './demo/with-flex-box';
export { default as InlineMode } from './demo/inline-mode';
export { default as DIDWithPrefix } from './demo/did-with-prefix';

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

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

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