@navikt/ds-react 0.8.0 → 0.9.0

package/esm/form/Textarea.js

@@ -49,7 +49,7 @@ export const Counter = ({ maxLength, currentLength, size }) => {
     const difference = maxLength - currentLength;
     return (React.createElement(BodyShort, { className: cl("navds-textarea__counter", {
             "navds-textarea__counter--error": difference < 0,
-        }), "aria-live": "polite", size: size }, difference < 0
+        }), "aria-live": difference < 20 ? "polite" : "off", size: size }, difference < 0
         ? `Du har ${Math.abs(difference)} tegn for mye`
         : `Du har ${difference} tegn igjen`));
 };

package/esm/form/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/form/Textarea.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/form/Textarea.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,gBAAgB,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AAC5C,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAkB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAiC3B,MAAM,QAAQ,GAAG,UAAU,CACzB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,kBAAkB,GACnB,GAAG,YAAY,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;IAEpC,MAAM,EACJ,KAAK,EACL,SAAS,EACT,WAAW,EACX,SAAS,EACT,SAAS,GAAG,KAAK,KAEf,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,+DAOL,CAAQ,CAAC;IAEV,MAAM,WAAW,GAAG,qBAAqB,KAAK,EAAE,EAAE,CAAC;IACnD,MAAM,YAAY,GAAG,SAAS,KAAK,SAAS,IAAI,SAAS,GAAG,CAAC,CAAC;IAE9D,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,KAAK,CAAC,SAAS,EACf,kBAAkB,EAClB,qBAAqB,IAAI,EAAE,EAC3B,EAAE,uBAAuB,EAAE,QAAQ,EAAE,CACtC;QAED,oBAAC,KAAK,IACJ,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE;gBACrC,SAAS,EAAE,SAAS;aACrB,CAAC,IAED,KAAK,CACA;QACP,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,6BAA6B,EAAE;gBAC3C,SAAS,EAAE,SAAS;aACrB,CAAC,EACF,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,IAAI,IAET,WAAW,CACF,CACb;QACD,6BAAK,SAAS,EAAC,yBAAyB;YACtC,oBAAC,gBAAgB,oBACX,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,EACxC,UAAU,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,uBAAuB,EACvB,kBAAkB,EAClB,cAAc,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,EAAE,EAChC;oBACE,yBAAyB,EAAE,YAAY;iBACxC,CACF,sBACiB,EAAE,CAAC,UAAU,CAAC,kBAAkB,CAAC,EAAE;oBACnD,CAAC,WAAW,CAAC,EAAE,YAAY;iBAC5B,CAAC,IACF;YACD,YAAY,IAAI,CACf;gBACE,8BAAM,EAAE,EAAE,WAAW,EAAE,SAAS,EAAC,SAAS;;oBACb,SAAS;;oBAA2B,GAAG;oBACjE,SAAS;8BACL;gBACP,oBAAC,OAAO,IACN,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,EACjC,IAAI,EAAE,IAAI,GACV,CACD,CACJ,CACG;QACN,6BAAK,EAAE,EAAE,OAAO,mBAAgB,oBAAoB,eAAW,QAAQ,IACpE,YAAY,IAAI,CACf,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,IAAG,KAAK,CAAC,KAAK,CAAgB,CACvD,CACG,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5D,MAAM,UAAU,GAAG,SAAS,GAAG,aAAa,CAAC;IAE7C,OAAO,CACL,oBAAC,SAAS,IACR,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;YACvC,gCAAgC,EAAE,UAAU,GAAG,CAAC;SACjD,CAAC,eACS,UAAU,GAAG,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAC7C,IAAI,EAAE,IAAI,IAET,UAAU,GAAG,CAAC;QACb,CAAC,CAAC,UAAU,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,eAAe;QAC/C,CAAC,CAAC,UAAU,UAAU,aAAa,CAC3B,CACb,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/speech-bubble/Bubble.d.ts

@@ -13,5 +13,6 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
      */
     backgroundColor?: string;
 }
-declare const Bubble: React.ForwardRefExoticComponent<BubbleProps & React.RefAttributes<HTMLDivElement>>;
+export declare type BubbleType = React.ForwardRefExoticComponent<BubbleProps & React.RefAttributes<HTMLDivElement>>;
+declare const Bubble: BubbleType;
 export default Bubble;

package/esm/speech-bubble/Bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bubble.js","sourceRoot":"","sources":["../../src/speech-bubble/Bubble.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAC;AAiB5B,MAAM,MAAM,GAAG,UAAU,CACvB,CAAC,EAA0D,EAAE,GAAG,EAAE,EAAE;QAAnE,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,OAAW,EAAN,IAAI,cAAxD,uDAA0D,CAAF;IACvD,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,4BAA4B,EAC5B,SAAS,EACT,iBAAiB,CAClB,EACD,KAAK,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EAC3C,QAAQ,EAAE,CAAC,IACP,IAAI;QAEP,OAAO,IAAI,CACV,8BAAM,SAAS,EAAC,2CAA2C,IACxD,OAAO,CACH,CACR;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Bubble.js","sourceRoot":"","sources":["../../src/speech-bubble/Bubble.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAC;AAqB5B,MAAM,MAAM,GAAe,UAAU,CACnC,CAAC,EAA0D,EAAE,GAAG,EAAE,EAAE;QAAnE,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,eAAe,OAAW,EAAN,IAAI,cAAxD,uDAA0D,CAAF;IACvD,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,4BAA4B,EAC5B,SAAS,EACT,iBAAiB,CAClB,EACD,KAAK,EAAE,EAAE,eAAe,EAAE,eAAe,EAAE,EAC3C,QAAQ,EAAE,CAAC,IACP,IAAI;QAEP,OAAO,IAAI,CACV,8BAAM,SAAS,EAAC,2CAA2C,IACxD,OAAO,CACH,CACR;QACA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/speech-bubble/SpeechBubble.d.ts

@@ -1,4 +1,5 @@
 import React, { HTMLAttributes } from "react";
+import { BubbleType } from "./Bubble";
 export interface SpeechBubbleProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Children of type <Bubble />
@@ -26,5 +27,8 @@ export interface SpeechBubbleProps extends HTMLAttributes<HTMLDivElement> {
      */
     position?: "left" | "right";
 }
-declare const SpeechBubble: React.ForwardRefExoticComponent<SpeechBubbleProps & React.RefAttributes<HTMLDivElement>>;
+interface SpeechBubbleComponent extends React.ForwardRefExoticComponent<SpeechBubbleProps & React.RefAttributes<HTMLDivElement>> {
+    Bubble: BubbleType;
+}
+declare const SpeechBubble: SpeechBubbleComponent;
 export default SpeechBubble;

package/esm/speech-bubble/SpeechBubble.js

@@ -11,6 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from "react";
 import cl from "classnames";
+import Bubble from "./Bubble";
 const SpeechBubble = forwardRef((_a, ref) => {
     var { children, className, topText, illustration, position = "left", illustrationBgColor, backgroundColor } = _a, rest = __rest(_a, ["children", "className", "topText", "illustration", "position", "illustrationBgColor", "backgroundColor"]);
     return (React.createElement("div", Object.assign({ ref: ref, className: cl("navds-speechbubble", className, `navds-speechbubble--${position}`, "navds-body-long") }, rest),
@@ -21,5 +22,6 @@ const SpeechBubble = forwardRef((_a, ref) => {
             }
         }))));
 });
+SpeechBubble.Bubble = Bubble;
 export default SpeechBubble;
 //# sourceMappingURL=SpeechBubble.js.map

package/esm/speech-bubble/SpeechBubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpeechBubble.js","sourceRoot":"","sources":["../../src/speech-bubble/SpeechBubble.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAC;AA8B5B,MAAM,YAAY,GAAG,UAAU,CAC7B,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,YAAY,EACZ,QAAQ,GAAG,MAAM,EACjB,mBAAmB,EACnB,eAAe,OAEhB,EADI,IAAI,cART,0GASC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,SAAS,EACT,uBAAuB,QAAQ,EAAE,EACjC,iBAAiB,CAClB,IACG,IAAI;QAER,6BACE,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,EAAE,eAAe,EAAE,mBAAmB,EAAE,IAE9C,YAAY,CACT;QACN,4BAAI,SAAS,EAAC,iCAAiC,IAC5C,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAC/B,OAAO,CACL,gCACG,KAAK,CAAC,YAAY,CAAC,KAAK,kBACvB,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACjD,eAAe,IACZ,KAAK,CAAC,KAAK,EACd,CACC,CACN,CAAC;aACH;QACH,CAAC,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SpeechBubble.js","sourceRoot":"","sources":["../../src/speech-bubble/SpeechBubble.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAsB,MAAM,UAAU,CAAC;AAqC9C,MAAM,YAAY,GAAG,UAAU,CAC7B,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,QAAQ,EACR,SAAS,EACT,OAAO,EACP,YAAY,EACZ,QAAQ,GAAG,MAAM,EACjB,mBAAmB,EACnB,eAAe,OAEhB,EADI,IAAI,cART,0GASC,CADQ;IAIT,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oBAAoB,EACpB,SAAS,EACT,uBAAuB,QAAQ,EAAE,EACjC,iBAAiB,CAClB,IACG,IAAI;QAER,6BACE,SAAS,EAAC,kCAAkC,EAC5C,KAAK,EAAE,EAAE,eAAe,EAAE,mBAAmB,EAAE,IAE9C,YAAY,CACT;QACN,4BAAI,SAAS,EAAC,iCAAiC,IAC5C,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAC/B,OAAO,CACL,gCACG,KAAK,CAAC,YAAY,CAAC,KAAK,kBACvB,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACjD,eAAe,IACZ,KAAK,CAAC,KAAK,EACd,CACC,CACN,CAAC;aACH;QACH,CAAC,CAAC,CACC,CACD,CACP,CAAC;AACJ,CAAC,CACuB,CAAC;AAE3B,YAAY,CAAC,MAAM,GAAG,MAAM,CAAC;AAE7B,eAAe,YAAY,CAAC"}

package/esm/speech-bubble/index.d.ts

@@ -1,4 +1,2 @@
 export { default as SpeechBubble } from "./SpeechBubble";
 export * from "./SpeechBubble";
-export { default as Bubble } from "./Bubble";
-export * from "./Bubble";

package/esm/speech-bubble/index.js

@@ -1,5 +1,3 @@
 export { default as SpeechBubble } from "./SpeechBubble";
 export * from "./SpeechBubble";
-export { default as Bubble } from "./Bubble";
-export * from "./Bubble";
 //# sourceMappingURL=index.js.map

package/esm/speech-bubble/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/speech-bubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/speech-bubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,cAAc,gBAAgB,CAAC"}

package/esm/util/useId.js

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useState } from "react";
-import ShortUuid from "short-uuid";
+import { v4 as uuidv4 } from "uuid";
 const canUseDOM = () => {
     return (typeof window !== "undefined" &&
         typeof window.document !== "undefined" &&
@@ -10,7 +10,7 @@ export const useId = (id) => {
     var _a;
     const [newId, setNewId] = useState(undefined);
     useClientLayoutEffect(() => {
-        setNewId(ShortUuid.generate());
+        setNewId(uuidv4());
     }, []);
     return (_a = id !== null && id !== void 0 ? id : newId) !== null && _a !== void 0 ? _a : "";
 };

package/esm/util/useId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useId.js","sourceRoot":"","sources":["../../src/util/useId.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,SAAS,GAAG,GAAY,EAAE;IAC9B,OAAO,CACL,OAAO,MAAM,KAAK,WAAW;QAC7B,OAAO,MAAM,CAAC,QAAQ,KAAK,WAAW;QACtC,OAAO,MAAM,CAAC,QAAQ,CAAC,aAAa,KAAK,WAAW,CACrD,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;AAE9E,MAAM,CAAC,MAAM,KAAK,GAA4B,CAAC,EAAE,EAAE,EAAE;;IACnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAElE,qBAAqB,CAAC,GAAG,EAAE;QACzB,QAAQ,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,MAAA,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,KAAK,mCAAI,EAAE,CAAC;AAC3B,CAAC,CAAC"}
+{"version":3,"file":"useId.js","sourceRoot":"","sources":["../../src/util/useId.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,EAAE,IAAI,MAAM,EAAE,MAAM,MAAM,CAAC;AAEpC,MAAM,SAAS,GAAG,GAAY,EAAE;IAC9B,OAAO,CACL,OAAO,MAAM,KAAK,WAAW;QAC7B,OAAO,MAAM,CAAC,QAAQ,KAAK,WAAW;QACtC,OAAO,MAAM,CAAC,QAAQ,CAAC,aAAa,KAAK,WAAW,CACrD,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,EAAE,GAAE,CAAC,CAAC;AAE9E,MAAM,CAAC,MAAM,KAAK,GAA4B,CAAC,EAAE,EAAE,EAAE;;IACnD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC,CAAC;IAElE,qBAAqB,CAAC,GAAG,EAAE;QACzB,QAAQ,CAAC,MAAM,EAAE,CAAC,CAAC;IACrB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,MAAA,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,KAAK,mCAAI,EAAE,CAAC;AAC3B,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -33,27 +33,27 @@
     "watch": "tsc --watch -p tsconfig-esm.json"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.2",
-    "@navikt/ds-icons": "^0.5.2",
-    "@popperjs/core": "^2.5.4",
+    "@material-ui/core": "^4.12.3",
+    "@navikt/ds-icons": "^0.5.3",
+    "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.3.1",
     "react-collapse": "^5.1.0",
     "react-merge-refs": "^1.1.0",
-    "react-modal": "3.12.1",
-    "react-popper": "^2.2.4",
-    "short-uuid": "^4.2.0"
+    "react-modal": "3.14.3",
+    "react-popper": "^2.2.5",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "@types/react-router-dom": "^5.1.8",
+    "@types/react-router-dom": "^5.1.9",
     "@types/styled-components": "^5.1.14",
     "copyfiles": "^2.4.1",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.0",
     "rimraf": "3.0.2",
     "styled-components": "^5.3.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "c485e1bfc7de8e30386b9b3c094a3032783db26f"
+  "gitHead": "e7660412bcd11dcc44a851b2b0a8414fed8513ff"
 }

package/src/button/stories/button.stories.mdx

@@ -1,17 +1,17 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
 import { Button, Loader } from "../../index";
-import { Success } from "@navikt/ds-react";
+import { Success } from "@navikt/ds-icons";
 
 <Meta title="ds-react/button/intro" />
 
 # Hvordan ta i bruk Button
 
 ```jsx
-<Button>Buttontekst</Button>
+<Button>Button</Button>
 ```
 
 <Canvas>
-  <Button>Buttontekst</Button>
+  <Button>Button</Button>
 </Canvas>
 
 ## Varianter
@@ -20,10 +20,10 @@ import { Success } from "@navikt/ds-react";
 `primary`, `secondary`, `tertiary` og `danger`
 
 <Canvas>
-  <Button variant="primary">Buttontekst</Button>
-  <Button variant="secondary">Buttontekst</Button>
-  <Button variant="tertiary">Buttontekst</Button>
-  <Button variant="danger">Buttontekst</Button>
+  <Button variant="primary">Primary</Button>
+  <Button variant="secondary">Secondary</Button>
+  <Button variant="tertiary">Tertiary</Button>
+  <Button variant="danger">Danger</Button>
 </Canvas>
 
 ## Sizing
@@ -32,33 +32,39 @@ Button har to størrelser: Default 48px min-height og small 32px min-height
 
 <Canvas>
   <Button size="small" variant="primary">
-    Buttontekst
+    Primary
   </Button>
   <Button size="small" variant="secondary">
-    Buttontekst
+    Secondary
   </Button>
   <Button size="small" variant="tertiary">
-    Buttontekst
+    Tertiary
   </Button>
   <Button size="small" variant="danger">
-    Buttontekst
+    Danger
   </Button>
 </Canvas>
 
 ## Med ikon eller `<Loader />`
 
 Hvis man setter ikoner (svg) eller `<Loader />` rett på button vil størrelsen
-bli justert automatisk.
+bli justert automatisk og sentrert.
 
 <Canvas>
   <Button>
-    <Loader /> Buttontekst
+    <Loader /> Laster... <Loader />
+  </Button>
+  <Button size="small">
+    <Loader />
+    Laster...
+    <Loader />
   </Button>
   <Button>
-    Buttontekst <Loader />
+    <Success /> Laster... <Success />
   </Button>
   <Button size="small">
-    Buttontekst
-    <Loader />
+    <Success />
+    Laster...
+    <Success />
   </Button>
 </Canvas>

package/src/button/stories/button.stories.tsx

@@ -10,12 +10,12 @@ export default {
 const Section = ({ children }) => (
   <div
     style={{
-      display: "grid",
+      display: "flex",
       gap: 16,
       gridAutoFlow: "column",
       justifyContent: "start",
       padding: 24,
-      background: "lightgray",
+      paddingLeft: 0,
     }}
   >
     {children}
@@ -38,7 +38,7 @@ const varSwitch = {
 
 export const All = () => {
   return (
-    <>
+    <div style={{ paddingLeft: "1rem" }}>
       <h1>Button</h1>
       <Section>
         {variants.map((variant) => (
@@ -103,6 +103,6 @@ export const All = () => {
           </Button>
         ))}
       </Section>
-    </>
+    </div>
   );
 };

package/src/form/Textarea.tsx

@@ -140,7 +140,7 @@ export const Counter = ({ maxLength, currentLength, size }) => {
       className={cl("navds-textarea__counter", {
         "navds-textarea__counter--error": difference < 0,
       })}
-      aria-live="polite"
+      aria-live={difference < 20 ? "polite" : "off"}
       size={size}
     >
       {difference < 0

package/src/speech-bubble/Bubble.tsx

@@ -16,7 +16,11 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
   backgroundColor?: string;
 }
 
-const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
+export type BubbleType = React.ForwardRefExoticComponent<
+  BubbleProps & React.RefAttributes<HTMLDivElement>
+>;
+
+const Bubble: BubbleType = forwardRef(
   ({ children, className, topText, backgroundColor, ...rest }, ref) => {
     return (
       <div

package/src/speech-bubble/SpeechBubble.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
+import Bubble, { BubbleType } from "./Bubble";
 
 export interface SpeechBubbleProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -29,6 +30,13 @@ export interface SpeechBubbleProps extends HTMLAttributes<HTMLDivElement> {
   position?: "left" | "right";
 }
 
+interface SpeechBubbleComponent
+  extends React.ForwardRefExoticComponent<
+    SpeechBubbleProps & React.RefAttributes<HTMLDivElement>
+  > {
+  Bubble: BubbleType;
+}
+
 const SpeechBubble = forwardRef<HTMLDivElement, SpeechBubbleProps>(
   (
     {
@@ -78,6 +86,8 @@ const SpeechBubble = forwardRef<HTMLDivElement, SpeechBubbleProps>(
       </div>
     );
   }
-);
+) as SpeechBubbleComponent;
+
+SpeechBubble.Bubble = Bubble;
 
 export default SpeechBubble;

package/src/speech-bubble/index.ts

@@ -1,4 +1,2 @@
 export { default as SpeechBubble } from "./SpeechBubble";
 export * from "./SpeechBubble";
-export { default as Bubble } from "./Bubble";
-export * from "./Bubble";

package/src/speech-bubble/stories/speechbubble.stories.mdx

@@ -11,27 +11,31 @@ breaking-changes før v1 er klar. Anbefaler da å ikke override styling som er b
 
 ```jsx
 <SpeechBubble illustration="OLA" topText="Ola Normann 01.01.21 14:00">
-  <Bubble>
+  <SpeechBubble.Bubble>
     Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </Bubble>
-  <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
-  <Bubble>
+  </SpeechBubble.Bubble>
+  <SpeechBubble.Bubble>
+    Tempor fugiat amet eu sint in in ullamco.
+  </SpeechBubble.Bubble>
+  <SpeechBubble.Bubble>
     Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
     labore nisi ut.
-  </Bubble>
+  </SpeechBubble.Bubble>
 </SpeechBubble>
 ```
 
 <Canvas>
   <SpeechBubble illustration="OLA" topText="Ola Normann 01.01.21 14:00">
-    <Bubble>
+    <SpeechBubble.Bubble>
       Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </Bubble>
-    <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
-    <Bubble>
+    </SpeechBubble.Bubble>
+    <SpeechBubble.Bubble>
+      Tempor fugiat amet eu sint in in ullamco.
+    </SpeechBubble.Bubble>
+    <SpeechBubble.Bubble>
       Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
       labore nisi ut.
-    </Bubble>
+    </SpeechBubble.Bubble>
   </SpeechBubble>
 </Canvas>
 
@@ -41,27 +45,29 @@ Speechbubble kan bli posisjonert "left" og "right" med `position`-proppen
 
 ```jsx
 <SpeechBubble illustration="OLA" position="left">
-  <Bubble>
+  <SpeechBubble.Bubble>
     Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </Bubble>
+  </SpeechBubble.Bubble>
 </SpeechBubble>
 <SpeechBubble illustration="OLA" position="right">
-  <Bubble>
+  <SpeechBubble.Bubble>
     Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </Bubble>
+  </SpeechBubble.Bubble>
 </SpeechBubble>
 ```
 
 <Canvas>
   <div>
     <SpeechBubble illustration="OLA" position="left">
-      <Bubble>
+      <SpeechBubble.Bubble>
         Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-      </Bubble>
+      </SpeechBubble.Bubble>
     </SpeechBubble>
     <br />
     <SpeechBubble illustration="PER" position="right">
-      <Bubble>Ipsum laborum culpa ea ea commodo eiusmod in aute.</Bubble>
+      <SpeechBubble.Bubble>
+        Ipsum laborum culpa ea ea commodo eiusmod in aute.
+      </SpeechBubble.Bubble>
     </SpeechBubble>
   </div>
 </Canvas>
@@ -77,9 +83,9 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
   illustrationBgColor="var(--navds-color-lightblue-10)"
   backgroundColor="var(--navds-color-lightblue-20)"
 >
-  <Bubble>
+  <SpeechBubble.Bubble>
     Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </Bubble>
+  </SpeechBubble.Bubble>
 </SpeechBubble>
 ```
 
@@ -90,9 +96,9 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
     illustrationBgColor="var(--navds-color-lightblue-10)"
     backgroundColor="var(--navds-color-lightblue-20)"
   >
-    <Bubble>
+    <SpeechBubble.Bubble>
       Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </Bubble>
+    </SpeechBubble.Bubble>
   </SpeechBubble>
 </Canvas>
 
@@ -103,17 +109,17 @@ Hvis man bruker en illustrasjon i SVG-fromat vil den fungere likt `nav-frontend-
 
 ```jsx
 <SpeechBubble illustration={<Illustration />} position="left">
-  <Bubble>
+  <SpeechBubble.Bubble>
     Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </Bubble>
+  </SpeechBubble.Bubble>
 </SpeechBubble>
 ```
 
 <Canvas>
   <SpeechBubble illustration={<Illustration />} position="left">
-    <Bubble>
+    <SpeechBubble.Bubble>
       Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </Bubble>
+    </SpeechBubble.Bubble>
   </SpeechBubble>
 </Canvas>
 
@@ -136,14 +142,16 @@ Hvis man bruker en illustrasjon i SVG-fromat vil den fungere likt `nav-frontend-
     </div>
   }
 >
-  <Bubble>
+  <SpeechBubble.Bubble>
     Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-  </Bubble>
-  <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
-  <Bubble>
+  </SpeechBubble.Bubble>
+  <SpeechBubble.Bubble>
+    Tempor fugiat amet eu sint in in ullamco.
+  </SpeechBubble.Bubble>
+  <SpeechBubble.Bubble>
     Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
     labore nisi ut.
-  </Bubble>
+  </SpeechBubble.Bubble>
 </SpeechBubble>
 ```
 
@@ -162,13 +170,15 @@ Hvis man bruker en illustrasjon i SVG-fromat vil den fungere likt `nav-frontend-
       </div>
     }
   >
-    <Bubble>
+    <SpeechBubble.Bubble>
       Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </Bubble>
-    <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
-    <Bubble>
+    </SpeechBubble.Bubble>
+    <SpeechBubble.Bubble>
+      Tempor fugiat amet eu sint in in ullamco.
+    </SpeechBubble.Bubble>
+    <SpeechBubble.Bubble>
       Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
       labore nisi ut.
-    </Bubble>
+    </SpeechBubble.Bubble>
   </SpeechBubble>
 </Canvas>

package/src/speech-bubble/stories/speechbubble.stories.tsx

@@ -17,14 +17,16 @@ export const All = () => {
         topText="Ola Normann 01.01.21 14:00"
         backgroundColor="var(--navds-color-lightblue-20)"
       >
-        <Bubble>
+        <SpeechBubble.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </Bubble>
-        <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
-        <Bubble>
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Tempor fugiat amet eu sint in in ullamco.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
           Adipisicing laborum est eu laborum est sit in commodo enim sint
           laboris labore nisi ut.
-        </Bubble>
+        </SpeechBubble.Bubble>
       </SpeechBubble>
       <SpeechBubble
         illustration={<div>KAJ</div>}
@@ -43,54 +45,60 @@ export const All = () => {
         position="right"
         backgroundColor="var(--navds-color-gray-10)"
       >
-        <Bubble>
+        <SpeechBubble.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </Bubble>
-        <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
-        <Bubble>
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Tempor fugiat amet eu sint in in ullamco.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
           Adipisicing laborum est eu laborum est sit in commodo enim sint
           laboris labore nisi ut.
-        </Bubble>
+        </SpeechBubble.Bubble>
       </SpeechBubble>
       <SpeechBubble
         illustration={<div>KAJ</div>}
         topText="Ola Normann 01.01.21 14:00"
         position="left"
       >
-        <Bubble>
+        <SpeechBubble.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </Bubble>
-        <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
-        <Bubble>
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Tempor fugiat amet eu sint in in ullamco.
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
           Adipisicing laborum est eu laborum est sit in commodo enim sint
           laboris labore nisi ut.
-        </Bubble>
+        </SpeechBubble.Bubble>
       </SpeechBubble>
       <SpeechBubble
         illustration={<div>KAJ</div>}
         topText="Ola Normann 01.01.21 14:00"
         position="right"
       >
-        <Bubble>
+        <SpeechBubble.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </Bubble>
-        <Bubble>Tempor fugiat amet eu sint in in ullamco.</Bubble>
+        </SpeechBubble.Bubble>
+        <SpeechBubble.Bubble>
+          Tempor fugiat amet eu sint in in ullamco.
+        </SpeechBubble.Bubble>
       </SpeechBubble>
       <SpeechBubble
         illustration={<div>KAJ</div>}
         topText="Ola Normann 01.01.21 14:00"
         position="left"
       >
-        <Bubble>
+        <SpeechBubble.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-        </Bubble>
+        </SpeechBubble.Bubble>
       </SpeechBubble>
       <SpeechBubble
         illustration={<div>KAJ</div>}
         topText="Ola Normann 01.01.21 14:00"
         position="right"
       >
-        <Bubble>Per skriver....</Bubble>
+        <SpeechBubble.Bubble>Per skriver....</SpeechBubble.Bubble>
       </SpeechBubble>
     </div>
   );

package/src/util/useId.ts

@@ -1,5 +1,5 @@
 import { useLayoutEffect, useState } from "react";
-import ShortUuid from "short-uuid";
+import { v4 as uuidv4 } from "uuid";
 
 const canUseDOM = (): boolean => {
   return (
@@ -15,7 +15,7 @@ export const useId: (id?: string) => string = (id) => {
   const [newId, setNewId] = useState<string | undefined>(undefined);
 
   useClientLayoutEffect(() => {
-    setNewId(ShortUuid.generate());
+    setNewId(uuidv4());
   }, []);
 
   return id ?? newId ?? "";