@biblioteksentralen/react 3.1.0 → 4.0.0-beta.0

package/dist/chunk-QBXCCJ24.js

@@ -0,0 +1,344 @@
+"use strict";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _optionalChain(ops) {
+    var lastAccessLHS = undefined;
+    var value = ops[0];
+    var i = 1;
+    while(i < ops.length){
+        var op = ops[i];
+        var fn = ops[i + 1];
+        i += 2;
+        if ((op === "optionalAccess" || op === "optionalCall") && value == null) {
+            return undefined;
+        }
+        if (op === "access" || op === "optionalAccess") {
+            lastAccessLHS = value;
+            value = fn(value);
+        } else if (op === "call" || op === "optionalCall") {
+            var _value;
+            value = fn(function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return (_value = value).call.apply(_value, [
+                    lastAccessLHS
+                ].concat(_to_consumable_array(args)));
+            });
+            lastAccessLHS = undefined;
+        }
+    }
+    return value;
+}
+"use client";
+var _chunkQAW4IRLIjs = require("./chunk-QAW4IRLI.js");
+// src/styles/chakraTheme/biblioteksentralenChakraTheme.ts
+var _react = require("@chakra-ui/react");
+// src/styles/chakraTheme/ButtonStyles.ts
+var variants = _object_spread({
+    primary: {
+        backgroundColor: _chunkQAW4IRLIjs.colors.black,
+        color: "white",
+        _hover: {
+            backgroundColor: "hsla(0deg, 0%, 70%, 1)",
+            color: "black"
+        }
+    },
+    secondary: {
+        borderColor: "currentColor",
+        color: "currentColor",
+        backgroundColor: "transparent",
+        _hover: {
+            backgroundColor: "currentColor/7"
+        }
+    },
+    tertiary: {
+        color: "currentColor",
+        backgroundColor: "transparent",
+        _hover: {
+            backgroundColor: "currentColor/7"
+        }
+    }
+}, _optionalChain([
+    _react.defaultConfig,
+    "access",
+    function(_) {
+        return _.theme;
+    },
+    "optionalAccess",
+    function(_2) {
+        return _2.recipes;
+    },
+    "optionalAccess",
+    function(_3) {
+        return _3.button;
+    },
+    "optionalAccess",
+    function(_4) {
+        return _4.variants;
+    },
+    "optionalAccess",
+    function(_5) {
+        return _5.variant;
+    }
+]));
+var ButtonStyles = _react.defineRecipe.call(void 0, {
+    base: {
+        borderColor: "transparent",
+        borderWidth: "0.1em",
+        fontWeight: 600,
+        _disabled: {
+            backgroundColor: "".concat(_chunkQAW4IRLIjs.colors.grey45),
+            color: "white",
+            opacity: 1
+        }
+    },
+    variants: {
+        variant: variants,
+        size: {
+            sm: {
+                h: "8",
+                px: "2",
+                textStyle: "md"
+            },
+            md: {
+                textStyle: "md"
+            },
+            lg: {
+                h: "12",
+                textStyle: "lg"
+            }
+        }
+    },
+    defaultVariants: {
+        variant: "primary",
+        size: "md"
+    }
+});
+// src/styles/chakraTheme/ContainerStyles.ts
+var ContainerStyles = _react.defineRecipe.call(void 0, {
+    base: {
+        px: ".75rem"
+    }
+});
+// src/styles/chakraTheme/HeadingStyles.ts
+var HeadingStyles = _react.defineRecipe.call(void 0, {
+    base: {
+        fontWeight: "600"
+    }
+});
+// src/styles/chakraTheme/InputStyles.ts
+var variants2 = {
+    subtle: {
+        backgroundColor: {
+            _light: "gray.200",
+            _dark: "whiteAlpha.100"
+        },
+        _hover: {
+            bg: {
+                _light: "gray.300",
+                _dark: "whiteAlpha.200"
+            }
+        }
+    },
+    outline: {
+        borderColor: {
+            _light: "gray.300",
+            _dark: "whiteAlpha.300"
+        },
+        _hover: {
+            borderColor: {
+                _light: "gray.400",
+                _dark: "whiteAlpha.400"
+            }
+        }
+    },
+    flushed: {
+        borderColor: {
+            _light: "gray.300",
+            _dark: "whiteAlpha.300"
+        },
+        _hover: {
+            borderColor: {
+                _light: "gray.400",
+                _dark: "whiteAlpha.400"
+            }
+        }
+    }
+};
+var InputStyles = _react.defineRecipe.call(void 0, {
+    base: {
+        _placeholder: {
+            color: {
+                _light: "gray.500",
+                _dark: "whiteAlpha.500"
+            }
+        }
+    },
+    variants: {
+        variant: variants2
+    },
+    defaultVariants: {
+        variant: "subtle"
+    }
+});
+// src/styles/chakraTheme/SpinnerStyles.ts
+var SpinnerStyles = _react.defineRecipe.call(void 0, {
+    base: {
+        animationDuration: ".8s",
+        color: _chunkQAW4IRLIjs.colors.accentBlueMedium,
+        // Todo: Legg til trackColor: https://chakra-ui.com/docs/components/spinner#track-color
+        borderWidth: ".175em"
+    }
+});
+// src/styles/chakraTheme/sizes.ts
+var container = {
+    sm: {
+        value: "40rem"
+    },
+    md: {
+        value: "48rem"
+    },
+    lg: {
+        value: "56rem"
+    },
+    // Forsøker 56rem som standardbredde etter testing med Katrine
+    xl: {
+        value: "80rem"
+    }
+};
+var sizes = {
+    container: container
+};
+// src/styles/chakraTheme/LinkStyles.ts
+var variants3 = {
+    plain: {
+        color: "currentColor",
+        textDecoration: "none",
+        textDecorationColor: "currentColor",
+        _hover: {
+            textDecorationColor: "currentColor",
+            textDecoration: "underline"
+        }
+    },
+    underline: {
+        color: "currentColor",
+        textDecoration: "underline",
+        textDecorationColor: "currentColor",
+        _hover: {
+            textDecoration: "none"
+        }
+    }
+};
+var LinkStyles = _react.defineRecipe.call(void 0, {
+    base: {
+        _focus: {
+            outline: "none"
+        }
+    },
+    variants: {
+        variant: variants3
+    },
+    defaultVariants: {
+        variant: "underline"
+    }
+});
+// src/styles/chakraTheme/biblioteksentralenChakraTheme.ts
+var tokens = _react.defineTokens.call(void 0, {
+    sizes: sizes
+});
+var globalHyphens = {
+    hyphens: "auto",
+    hyphenateLimitChars: "8 5 3"
+};
+var focusStyle = {
+    outline: "none !important",
+    boxShadow: "0 0 0 .05rem ".concat(_chunkQAW4IRLIjs.colors.white, ", 0 0 0 .25rem ").concat(_chunkQAW4IRLIjs.colors.accentBlueMedium, ", 0 0 0 .3rem ").concat(_chunkQAW4IRLIjs.colors.white, " !important"),
+    transition: "box-shadow 0.1s ease-out"
+};
+var biblioteksentralenChakraTheme = _react.defineConfig.call(void 0, {
+    theme: {
+        tokens: tokens,
+        recipes: {
+            heading: HeadingStyles,
+            button: ButtonStyles,
+            input: InputStyles,
+            link: LinkStyles,
+            container: ContainerStyles,
+            spinner: SpinnerStyles
+        }
+    },
+    globalCss: {
+        html: {
+            fontSize: {
+                base: "112.5%",
+                md: "120%"
+            },
+            // Sørger for smooth scrolling for interne lenker som scroller til annet sted på siden,
+            // men ikke hvis fokus er utenfor viduet, feks ved søk i tekst (ctrl + f)
+            "&:focus-within": {
+                scrollBehavior: "smooth !important"
+            }
+        },
+        body: _object_spread({}, globalHyphens),
+        // Felles fokus-styling for alle elementer for å sikre at de har en tydelig og uniform visuell indikasjon når de er i fokus
+        "*:focus-visible": focusStyle
+    }
+});
+exports.focusStyle = focusStyle;
+exports.biblioteksentralenChakraTheme = biblioteksentralenChakraTheme;
+//# sourceMappingURL=chunk-QBXCCJ24.js.map

package/dist/chunk-QBXCCJ24.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles/chakraTheme/biblioteksentralenChakraTheme.ts","../src/styles/chakraTheme/ButtonStyles.ts","../src/styles/chakraTheme/ContainerStyles.ts","../src/styles/chakraTheme/HeadingStyles.ts","../src/styles/chakraTheme/InputStyles.ts","../src/styles/chakraTheme/SpinnerStyles.ts","../src/styles/chakraTheme/sizes.ts","../src/styles/chakraTheme/LinkStyles.ts"],"names":["defineRecipe","variants"],"mappings":"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","sourcesContent":["import { defineConfig, defineTokens } from \"@chakra-ui/react\";\nimport { ButtonStyles } from \"./ButtonStyles\";\nimport { ContainerStyles } from \"./ContainerStyles\";\nimport { HeadingStyles } from \"./HeadingStyles\";\nimport { InputStyles } from \"./InputStyles\";\nimport { SpinnerStyles } from \"./SpinnerStyles\";\nimport { sizes } from \"./sizes\";\nimport { LinkStyles } from \"./LinkStyles\";\nimport { colors } from \"@biblioteksentralen/utils\";\n\nconst tokens = defineTokens({\n  sizes,\n});\n\n// https://blog.logrocket.com/guide-css-word-wrap-overflow-wrap-word-break/\n// https://medium.com/clear-left-thinking/all-you-need-to-know-about-hyphenation-in-css-2baee2d89179\n// Skrur på hyphens auto som default fordi vi har masse mikrotekster og små elementer der layout knekker uten dette, og vi lager stadig nye og glemmer å ta hensyn til dette.\n// Så kan man optionaly sette hyphens: none de stedene man ikke ønsker det, men har ikke sett noe som knekker/blir rart pga dette enda\nconst globalHyphens = {\n  hyphens: \"auto\",\n  hyphenateLimitChars: \"8 5 3\", // minimum word-length / min letters first line / min letters second line\n};\n\nexport const focusStyle = {\n  outline: \"none !important\",\n  boxShadow: `0 0 0 .05rem ${colors.white}, 0 0 0 .25rem ${colors.accentBlueMedium}, 0 0 0 .3rem ${colors.white} !important`,\n  transition: \"box-shadow 0.1s ease-out\", // Transition makes the newly focused element \"pop in\" and easier to spot\n};\n\nexport const biblioteksentralenChakraTheme = defineConfig({\n  theme: {\n    tokens,\n    recipes: {\n      heading: HeadingStyles,\n      button: ButtonStyles,\n      input: InputStyles,\n      link: LinkStyles,\n      container: ContainerStyles,\n      spinner: SpinnerStyles,\n    },\n  },\n  globalCss: {\n    html: {\n      fontSize: { base: \"112.5%\", md: \"120%\" },\n      // Sørger for smooth scrolling for interne lenker som scroller til annet sted på siden,\n      // men ikke hvis fokus er utenfor viduet, feks ved søk i tekst (ctrl + f)\n      \"&:focus-within\": { scrollBehavior: \"smooth !important\" },\n    },\n    body: {\n      ...globalHyphens,\n    },\n    // Felles fokus-styling for alle elementer for å sikre at de har en tydelig og uniform visuell indikasjon når de er i fokus\n    \"*:focus-visible\": focusStyle,\n  },\n});\n","import { colors } from \"@biblioteksentralen/utils\";\nimport { defaultConfig, defineRecipe, SystemStyleObject } from \"@chakra-ui/react\";\n\nexport type CustomButtonVariants = \"primary\" | \"secondary\" | \"tertiary\";\n\nconst variants: Record<CustomButtonVariants, SystemStyleObject> = {\n  primary: {\n    backgroundColor: colors.black,\n    color: \"white\",\n    _hover: {\n      backgroundColor: \"hsla(0deg, 0%, 70%, 1)\",\n      color: \"black\",\n    },\n  },\n  secondary: {\n    borderColor: \"currentColor\",\n    color: \"currentColor\",\n    backgroundColor: \"transparent\",\n    _hover: {\n      backgroundColor: \"currentColor/7\",\n    },\n  },\n  tertiary: {\n    color: \"currentColor\",\n    backgroundColor: \"transparent\",\n    _hover: {\n      backgroundColor: \"currentColor/7\",\n    },\n  },\n  // Inherit variants from Chakra's default config. Seems like they are overridden by our custom variants by default.\n  ...defaultConfig.theme?.recipes?.button?.variants?.variant,\n};\n\nexport const ButtonStyles = defineRecipe({\n  base: {\n    borderColor: \"transparent\",\n    borderWidth: \"0.1em\",\n    fontWeight: 600,\n    _disabled: {\n      backgroundColor: `${colors.grey45}`,\n      color: \"white\",\n      opacity: 1,\n    },\n  },\n  variants: {\n    variant: variants,\n    size: {\n      sm: {\n        h: \"8\",\n        px: \"2\",\n        textStyle: \"md\",\n      },\n      md: {\n        textStyle: \"md\",\n      },\n      lg: {\n        h: \"12\",\n        textStyle: \"lg\",\n      },\n    },\n  },\n  defaultVariants: {\n    variant: \"primary\",\n    size: \"md\",\n  },\n});\n","import { defineRecipe } from \"@chakra-ui/react\";\n\nexport const ContainerStyles = defineRecipe({\n  base: {\n    px: \".75rem\", // Padding left/right\n  },\n});\n","import { defineRecipe } from \"@chakra-ui/react\";\n\nexport const HeadingStyles = defineRecipe({\n  base: {\n    fontWeight: \"600\",\n  },\n});\n","import { defineRecipe, SystemStyleObject } from \"@chakra-ui/react\";\n\nconst variants: Record<string, SystemStyleObject> = {\n  subtle: {\n    backgroundColor: { _light: \"gray.200\", _dark: \"whiteAlpha.100\" },\n    _hover: {\n      bg: { _light: \"gray.300\", _dark: \"whiteAlpha.200\" },\n    },\n  },\n  outline: {\n    borderColor: { _light: \"gray.300\", _dark: \"whiteAlpha.300\" },\n    _hover: {\n      borderColor: { _light: \"gray.400\", _dark: \"whiteAlpha.400\" },\n    },\n  },\n  flushed: {\n    borderColor: { _light: \"gray.300\", _dark: \"whiteAlpha.300\" },\n    _hover: {\n      borderColor: { _light: \"gray.400\", _dark: \"whiteAlpha.400\" },\n    },\n  },\n};\n\nexport const InputStyles = defineRecipe({\n  base: {\n    _placeholder: {\n      color: { _light: \"gray.500\", _dark: \"whiteAlpha.500\" },\n    },\n  },\n  variants: {\n    variant: variants,\n  },\n  defaultVariants: {\n    variant: \"subtle\",\n  },\n});\n","import { colors } from \"@biblioteksentralen/utils\";\nimport { defineRecipe } from \"@chakra-ui/react\";\n\nexport const SpinnerStyles = defineRecipe({\n  base: {\n    animationDuration: \".8s\",\n    color: colors.accentBlueMedium,\n    // Todo: Legg til trackColor: https://chakra-ui.com/docs/components/spinner#track-color\n    borderWidth: \".175em\",\n  },\n});\n","const container = {\n  sm: { value: \"40rem\" },\n  md: { value: \"48rem\" },\n  lg: { value: \"56rem\" }, // Forsøker 56rem som standardbredde etter testing med Katrine\n  xl: { value: \"80rem\" },\n};\n\nexport const sizes = {\n  container,\n};\n","import { defineRecipe, SystemStyleObject } from \"@chakra-ui/react\";\n\nexport type CustomLinkVariants = \"plain\" | \"underline\";\n\nconst variants: Record<CustomLinkVariants, SystemStyleObject> = {\n  plain: {\n    color: \"currentColor\",\n    textDecoration: \"none\",\n    textDecorationColor: \"currentColor\",\n    _hover: {\n      textDecorationColor: \"currentColor\",\n      textDecoration: \"underline\",\n    },\n  },\n  underline: {\n    color: \"currentColor\",\n    textDecoration: \"underline\",\n    textDecorationColor: \"currentColor\",\n    _hover: {\n      textDecoration: \"none\",\n    },\n  },\n};\n\nexport const LinkStyles = defineRecipe({\n  base: {\n    _focus: {\n      outline: \"none\",\n    },\n  },\n  variants: {\n    variant: variants,\n  },\n  defaultVariants: {\n    variant: \"underline\",\n  },\n});\n"]}

package/dist/chunk-QX75QJ7F.mjs

@@ -0,0 +1,52 @@
+"use client";
+import {
+  colors
+} from "./chunk-BN5W6FVN.mjs";
+
+// src/components/AlertBS.tsx
+import { Alert as ChakraAlert } from "@chakra-ui/react";
+import React from "react";
+import { AlertCircle, CheckCircle, Info, XCircle } from "react-feather";
+var colorLookup = {
+  info: { bg: colors.lightBlue, color: colors.accentBlueMedium },
+  warning: { bg: colors.statusYellowLight, color: colors.statusYellow },
+  success: { bg: colors.statusGreenLight, color: colors.statusGreen },
+  error: { bg: colors.statusRedLight, color: colors.statusRed }
+};
+var iconLookup = {
+  info: /* @__PURE__ */ React.createElement(Info, { strokeWidth: 1.75, role: "img", "aria-label": "Informasjon" }),
+  warning: /* @__PURE__ */ React.createElement(AlertCircle, { strokeWidth: 1.75, role: "img", "aria-label": "Advarsel" }),
+  success: /* @__PURE__ */ React.createElement(CheckCircle, { strokeWidth: 1.75, role: "img", "aria-label": "Suksess" }),
+  error: /* @__PURE__ */ React.createElement(XCircle, { strokeWidth: 1.75, role: "img", "aria-label": "Feil" })
+};
+var variantStyles = {
+  inline: {
+    borderColor: "transparent",
+    backgroundColor: "transparent",
+    padding: "0"
+  }
+};
+function AlertBS({ status, children, variant, header, ...rest }) {
+  const colors2 = colorLookup[status];
+  return /* @__PURE__ */ React.createElement(
+    ChakraAlert.Root,
+    {
+      status,
+      fontSize: "md",
+      border: `0.1rem solid`,
+      borderColor: colors2.color,
+      backgroundColor: colors2.bg,
+      display: "flex",
+      flexWrap: "wrap",
+      ...variant === "inline" ? variantStyles[variant] : {},
+      ...rest
+    },
+    /* @__PURE__ */ React.createElement(ChakraAlert.Indicator, { marginX: "auto" }, iconLookup[status]),
+    /* @__PURE__ */ React.createElement(ChakraAlert.Content, { color: "black" }, header && /* @__PURE__ */ React.createElement(ChakraAlert.Title, null, header), /* @__PURE__ */ React.createElement(ChakraAlert.Description, null, children))
+  );
+}
+
+export {
+  AlertBS
+};
+//# sourceMappingURL=chunk-QX75QJ7F.mjs.map

package/dist/chunk-QX75QJ7F.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AlertBS.tsx"],"sourcesContent":["import { Modify } from \"@biblioteksentralen/types\";\nimport { colors } from \"@biblioteksentralen/utils\";\nimport { AlertRootProps, Alert as ChakraAlert, SystemStyleObject } from \"@chakra-ui/react\";\nimport React, { ReactNode } from \"react\";\nimport { AlertCircle, CheckCircle, Info, XCircle } from \"react-feather\";\n\ntype Status = \"info\" | \"warning\" | \"success\" | \"error\";\ntype CustomVariants = \"inline\";\ntype Variants = AlertRootProps[\"variant\"] | CustomVariants;\n\nconst colorLookup: Record<Status, { bg: string; color: string }> = {\n  info: { bg: colors.lightBlue, color: colors.accentBlueMedium },\n  warning: { bg: colors.statusYellowLight, color: colors.statusYellow },\n  success: { bg: colors.statusGreenLight, color: colors.statusGreen },\n  error: { bg: colors.statusRedLight, color: colors.statusRed },\n};\n\nconst iconLookup: Record<Status, React.ReactElement> = {\n  info: <Info strokeWidth={1.75} role=\"img\" aria-label=\"Informasjon\" />,\n  warning: <AlertCircle strokeWidth={1.75} role=\"img\" aria-label=\"Advarsel\" />,\n  success: <CheckCircle strokeWidth={1.75} role=\"img\" aria-label=\"Suksess\" />,\n  error: <XCircle strokeWidth={1.75} role=\"img\" aria-label=\"Feil\" />,\n};\n\ninterface Props extends Modify<AlertRootProps, { variant?: Variants }> {\n  children: ReactNode;\n  header?: ReactNode;\n  status: Status;\n  variant?: Variants;\n}\n\nconst variantStyles: Record<CustomVariants, SystemStyleObject> = {\n  inline: {\n    borderColor: \"transparent\",\n    backgroundColor: \"transparent\",\n    padding: \"0\",\n  },\n};\n\nexport function AlertBS({ status, children, variant, header, ...rest }: Props) {\n  const colors = colorLookup[status];\n  return (\n    <ChakraAlert.Root\n      status={status}\n      fontSize=\"md\"\n      border={`0.1rem solid`}\n      borderColor={colors.color}\n      backgroundColor={colors.bg}\n      display=\"flex\"\n      flexWrap=\"wrap\"\n      {...(variant === \"inline\" ? variantStyles[variant] : {})}\n      {...rest}\n    >\n      <ChakraAlert.Indicator marginX=\"auto\">{iconLookup[status]}</ChakraAlert.Indicator>\n      <ChakraAlert.Content color=\"black\">\n        {header && <ChakraAlert.Title>{header}</ChakraAlert.Title>}\n        <ChakraAlert.Description>{children}</ChakraAlert.Description>\n      </ChakraAlert.Content>\n    </ChakraAlert.Root>\n  );\n}\n"],"mappings":";;;;;;AAEA,SAAyB,SAAS,mBAAsC;AACxE,OAAO,WAA0B;AACjC,SAAS,aAAa,aAAa,MAAM,eAAe;AAMxD,IAAM,cAA6D;AAAA,EACjE,MAAM,EAAE,IAAI,OAAO,WAAW,OAAO,OAAO,iBAAiB;AAAA,EAC7D,SAAS,EAAE,IAAI,OAAO,mBAAmB,OAAO,OAAO,aAAa;AAAA,EACpE,SAAS,EAAE,IAAI,OAAO,kBAAkB,OAAO,OAAO,YAAY;AAAA,EAClE,OAAO,EAAE,IAAI,OAAO,gBAAgB,OAAO,OAAO,UAAU;AAC9D;AAEA,IAAM,aAAiD;AAAA,EACrD,MAAM,oCAAC,QAAK,aAAa,MAAM,MAAK,OAAM,cAAW,eAAc;AAAA,EACnE,SAAS,oCAAC,eAAY,aAAa,MAAM,MAAK,OAAM,cAAW,YAAW;AAAA,EAC1E,SAAS,oCAAC,eAAY,aAAa,MAAM,MAAK,OAAM,cAAW,WAAU;AAAA,EACzE,OAAO,oCAAC,WAAQ,aAAa,MAAM,MAAK,OAAM,cAAW,QAAO;AAClE;AASA,IAAM,gBAA2D;AAAA,EAC/D,QAAQ;AAAA,IACN,aAAa;AAAA,IACb,iBAAiB;AAAA,IACjB,SAAS;AAAA,EACX;AACF;AAEO,SAAS,QAAQ,EAAE,QAAQ,UAAU,SAAS,QAAQ,GAAG,KAAK,GAAU;AAC7E,QAAMA,UAAS,YAAY,MAAM;AACjC,SACE;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACC;AAAA,MACA,UAAS;AAAA,MACT,QAAQ;AAAA,MACR,aAAaA,QAAO;AAAA,MACpB,iBAAiBA,QAAO;AAAA,MACxB,SAAQ;AAAA,MACR,UAAS;AAAA,MACR,GAAI,YAAY,WAAW,cAAc,OAAO,IAAI,CAAC;AAAA,MACrD,GAAG;AAAA;AAAA,IAEJ,oCAAC,YAAY,WAAZ,EAAsB,SAAQ,UAAQ,WAAW,MAAM,CAAE;AAAA,IAC1D,oCAAC,YAAY,SAAZ,EAAoB,OAAM,WACxB,UAAU,oCAAC,YAAY,OAAZ,MAAmB,MAAO,GACtC,oCAAC,YAAY,aAAZ,MAAyB,QAAS,CACrC;AAAA,EACF;AAEJ;","names":["colors"]}

package/dist/chunk-RZUGRIUF.mjs

@@ -0,0 +1,17 @@
+"use client";
+
+// src/components/InputBS.tsx
+import { Input as ChakraInput, Field, VisuallyHidden } from "@chakra-ui/react";
+import React from "react";
+var FieldHelperText = Field.HelperText;
+var FieldErrorText = Field.ErrorText;
+var InputBS = (props) => {
+  const { labelProps, label, helperText, errorMessage, hideLabel, ...inputProps } = props;
+  const formLabel = /* @__PURE__ */ React.createElement(Field.Label, { ...labelProps }, label);
+  return /* @__PURE__ */ React.createElement(Field.Root, { invalid: !!errorMessage }, hideLabel ? /* @__PURE__ */ React.createElement(VisuallyHidden, null, formLabel) : formLabel, helperText && /* @__PURE__ */ React.createElement(FieldHelperText, null, helperText), /* @__PURE__ */ React.createElement(ChakraInput, { ...inputProps }), errorMessage && /* @__PURE__ */ React.createElement(FieldErrorText, null, errorMessage));
+};
+
+export {
+  InputBS
+};
+//# sourceMappingURL=chunk-RZUGRIUF.mjs.map

package/dist/chunk-RZUGRIUF.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/InputBS.tsx"],"sourcesContent":["import { Input as ChakraInput, Field, FieldLabelProps, InputProps, VisuallyHidden } from \"@chakra-ui/react\";\nimport React, { RefObject } from \"react\";\n\n// Chakra v3 Field.HelperText and Field.ErrorText don't include children in their types\nconst FieldHelperText = Field.HelperText as React.FC<React.PropsWithChildren>;\nconst FieldErrorText = Field.ErrorText as React.FC<React.PropsWithChildren>;\n\ninterface Props extends InputProps {\n  label: string;\n  hideLabel?: boolean;\n  labelProps?: FieldLabelProps;\n  helperText?: string;\n  errorMessage?: string;\n  ref?: RefObject<HTMLInputElement | null>;\n}\n\n/**\n * Creating custom input-component to make sure label is always set (for accessibility)\n * Also handles some common needs (helper text and error message. For more advanced input-components we leave it to the consumers to compose custom input-components based on Chakra\n */\nexport const InputBS = (props: Props) => {\n  const { labelProps, label, helperText, errorMessage, hideLabel, ...inputProps } = props;\n\n  const formLabel = <Field.Label {...labelProps}>{label}</Field.Label>;\n\n  return (\n    <Field.Root invalid={!!errorMessage}>\n      {hideLabel ? <VisuallyHidden>{formLabel}</VisuallyHidden> : formLabel}\n      {helperText && <FieldHelperText>{helperText}</FieldHelperText>}\n      <ChakraInput {...inputProps} />\n      {errorMessage && <FieldErrorText>{errorMessage}</FieldErrorText>}\n    </Field.Root>\n  );\n};\n"],"mappings":";;;AAAA,SAAS,SAAS,aAAa,OAAoC,sBAAsB;AACzF,OAAO,WAA0B;AAGjC,IAAM,kBAAkB,MAAM;AAC9B,IAAM,iBAAiB,MAAM;AAetB,IAAM,UAAU,CAAC,UAAiB;AACvC,QAAM,EAAE,YAAY,OAAO,YAAY,cAAc,WAAW,GAAG,WAAW,IAAI;AAElF,QAAM,YAAY,oCAAC,MAAM,OAAN,EAAa,GAAG,cAAa,KAAM;AAEtD,SACE,oCAAC,MAAM,MAAN,EAAW,SAAS,CAAC,CAAC,gBACpB,YAAY,oCAAC,sBAAgB,SAAU,IAAoB,WAC3D,cAAc,oCAAC,uBAAiB,UAAW,GAC5C,oCAAC,eAAa,GAAG,YAAY,GAC5B,gBAAgB,oCAAC,sBAAgB,YAAa,CACjD;AAEJ;","names":[]}