forstok-ui-lib 5.0.0 → 5.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forstok-ui-lib",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Forstok UI Components Library",
   "path": "dist",
   "main": "dist/index.js",

package/src/components/form/styles.ts

@@ -0,0 +1,56 @@
+import styled, { css } from 'styled-components'
+
+const PartialFormContainerStyles = css`
+  display: grid;
+  grid-row-gap: 12px;
+  grid-column-gap: 16px;
+  width: 100%;
+  margin-bottom: 12px;
+  align-items: start;
+`
+
+const getFormContainerModifiedStyles = ({ name }:{ name?: string }) => {
+  let style = ``
+  if (name === 'invoiceForm') {
+    style += `
+      grid-gap: 15px;
+    `
+  }
+  return style
+}
+
+const getInnerFormContainerModifiedStyles =({ $width }:{ $width?: string | number }) => {
+  let style = ``
+  if ($width) {
+    style += ` 
+      @media (min-width: 768px) {
+        width: ${$width}; 
+      }
+    `
+  }
+  return style
+}
+
+export const FormContainer = styled.form.attrs((props: { name?: string; autoComplete?: string }) => ({
+    name: props.name || 'form',
+    autoComplete: props.autoComplete || 'off'
+}))<{ name?: string }>`
+  display: inline-grid;
+  grid-auto-flow: row;
+  grid-gap: 25px;
+  width: 100%;
+  height: 100%;
+  [class*='singleValue'] {
+    width: 100%;
+    color: var(--inp-clr);
+    ._refLabel {
+      top: 5.5px;
+      right: 0;
+    }
+  }
+  ${getFormContainerModifiedStyles}
+`
+export const SingleFormContainer = styled.section<{ $width?: string | number }>`
+  ${PartialFormContainerStyles}
+  ${getInnerFormContainerModifiedStyles}
+`

package/src/components/index.ts

@@ -14,4 +14,6 @@ export { default as ReactPortalComponent } from './portal';
 
 export * from './dropdown/typed';
 export * from './message/typed';
-export * from './popup/typed';
+export * from './popup/typed';
+
+export * from './form/styles';